feat: add input-otp

shadcn-ui · Mar 6, 2024 · bcac4b9 · bcac4b9
1 parent 3f5f361
commit bcac4b9
Show file tree

Hide file tree

Showing 16 changed files with 272 additions and 8 deletions.
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
@@ -145,6 +145,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/ui/input")),
       files: ["registry/default/ui/input.tsx"],
     },
+    "input-otp": {
+      name: "input-otp",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/input-otp")),
+      files: ["registry/default/ui/input-otp.tsx"],
+    },
     "label": {
       name: "label",
       type: "components:ui",
@@ -754,6 +761,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/input-with-text")),
       files: ["registry/default/example/input-with-text.tsx"],
     },
+    "input-otp-demo": {
+      name: "input-otp-demo",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: React.lazy(() => import("@/registry/default/example/input-otp-demo")),
+      files: ["registry/default/example/input-otp-demo.tsx"],
+    },
     "label-demo": {
       name: "label-demo",
       type: "components:example",
@@ -1371,6 +1385,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/new-york/ui/input")),
       files: ["registry/new-york/ui/input.tsx"],
     },
+    "input-otp": {
+      name: "input-otp",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/input-otp")),
+      files: ["registry/new-york/ui/input-otp.tsx"],
+    },
     "label": {
       name: "label",
       type: "components:ui",
@@ -1980,6 +2001,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/new-york/example/input-with-text")),
       files: ["registry/new-york/example/input-with-text.tsx"],
     },
+    "input-otp-demo": {
+      name: "input-otp-demo",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: React.lazy(() => import("@/registry/new-york/example/input-otp-demo")),
+      files: ["registry/new-york/example/input-otp-demo.tsx"],
+    },
     "label-demo": {
       name: "label-demo",
       type: "components:example",

diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
@@ -209,6 +209,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/input",
           items: [],
         },
+        {
+          title: "Input OTP",
+          href: "/docs/components/input-otp",
+          items: [],
+        },
         {
           title: "Label",
           href: "/docs/components/label",

diff --git a/apps/www/content/docs/components/input-otp.mdx b/apps/www/content/docs/components/input-otp.mdx
@@ -0,0 +1,69 @@
+---
+title: Input OTP
+description: Accessible one-time password component with copy paste functionality.
+component: true
+links:
+  doc: https://input-otp.rodz.dev
+---
+
+<ComponentPreview name="input-otp-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add input-otp
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install input-otp
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="input-otp" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+```
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -58,6 +58,7 @@
     "embla-carousel-autoplay": "8.0.0-rc15",
     "embla-carousel-react": "8.0.0-rc15",
     "geist": "^1.1.0",
+    "input-otp": "^1.0.0",
     "jotai": "^2.1.0",
     "lodash.template": "^4.5.0",
     "lucide-react": "0.288.0",

diff --git a/apps/www/public/registry/index.json b/apps/www/public/registry/index.json
@@ -209,6 +209,16 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "input-otp",
+    "dependencies": [
+      "input-otp"
+    ],
+    "files": [
+      "ui/input-otp.tsx"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "label",
     "dependencies": [

diff --git a/apps/www/public/registry/styles/default/input-otp.json b/apps/www/public/registry/styles/default/input-otp.json
@@ -0,0 +1,13 @@
+{
+  "name": "input-otp",
+  "dependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "name": "input-otp.tsx",
+      "content": "const InputOTP = () => <div>ds</div>\n\nexport { InputOTP }\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/public/registry/styles/default/toast.json b/apps/www/public/registry/styles/default/toast.json
diff --git a/apps/www/public/registry/styles/new-york/input-otp.json b/apps/www/public/registry/styles/new-york/input-otp.json
@@ -0,0 +1,13 @@
+{
+  "name": "input-otp",
+  "dependencies": [
+    "input-otp"
+  ],
+  "files": [
+    {
+      "name": "input-otp.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DashIcon } from \"@radix-ui/react-icons\"\nimport { OTPInput, SlotProps } from \"input-otp\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\"flex items-center gap-2\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  SlotProps & React.ComponentPropsWithoutRef<\"div\">\n>(({ char, hasFakeCaret, isActive, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-1 ring-ring\",\n        className\n      )}\n      {...props}\n    >\n      {char && <div>{char}</div>}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink h-4 w-px bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(className)} {...props}>\n    <DashIcon />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"
+    }
+  ],
+  "type": "components:ui"
+}