@alexgorbatchev/shadcn 0.0.19 → 0.0.21

package/llms/components/forms/InputOTP.md

@@ -0,0 +1,400 @@
+# InputOTP
+
+Story: @alexgorbatchev/shadcn/components/forms/InputOTP
+Source: src/components/stories/forms/InputOTP.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/InputOTP.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DirectionProvider, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Button } from "@alexgorbatchev/shadcn";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@alexgorbatchev/shadcn/input-otp";
+```
+
+## Supporting imports
+
+```tsx
+import type { ComponentProps } from "react";
+import { useId, useRef, useState } from "react";
+import { z } from "zod";
+import { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+```
+
+## Default component
+
+```tsx
+InputOTP
+```
+
+## Story controls
+
+```tsx
+{ density: { control: "select", options: ["compact", "comfortable"] } }
+```
+
+## Default args
+
+```tsx
+{ maxLength: 6, "aria-label": "Verification code", pattern: REGEXP_ONLY_DIGITS, onComplete: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => (<InputOTP {...args}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0}/>
+        <InputOTPSlot index={1}/>
+        <InputOTPSlot index={2}/>
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3}/>
+        <InputOTPSlot index={4}/>
+        <InputOTPSlot index={5}/>
+      </InputOTPGroup>
+    </InputOTP>)
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true, value: "123456" }
+}
+```
+
+### Placeholder
+
+```tsx
+{
+    args: { placeholder: "000000" }
+}
+```
+
+### Paste
+
+```tsx
+{
+    args: { pasteTransformer: (text: string) => text.replaceAll("-", "") }
+}
+```
+
+### Invalid
+
+```tsx
+{
+    args: { "aria-invalid": true, "aria-describedby": "otp-error" },
+    render: (args) => (<div className="flex flex-col gap-panel">
+      <InputOTP {...args}>
+        <InputOTPGroup>
+          {Array.from({ length: 6 }, (_, index) => (<InputOTPSlot key={index} index={index}/>))}
+        </InputOTPGroup>
+      </InputOTP>
+      <p id="otp-error">The code has expired.</p>
+    </div>)
+}
+```
+
+### Controlled
+
+```tsx
+{
+    render: function Render(args) {
+        const [value, setValue] = useState("");
+        return (<div className="flex flex-col items-start gap-panel">
+        <InputOTP {...args} value={value} onChange={setValue}>
+          <InputOTPGroup>
+            {Array.from({ length: 6 }, (_, index) => (<InputOTPSlot key={index} index={index}/>))}
+          </InputOTPGroup>
+        </InputOTP>
+        <output aria-label="Current code">{value}</output>
+        <Button onClick={() => setValue("")}>Reset code</Button>
+      </div>);
+    }
+}
+```
+
+### DefaultValue
+
+```tsx
+{
+    args: { defaultValue: "123456", onChange: fn() },
+    render: function Render(args) {
+        const [defaultValue, setDefaultValue] = useState(args.defaultValue);
+        return (<div className="flex flex-col items-start gap-panel">
+        <InputOTP {...args} defaultValue={defaultValue} name="code">
+          <InputOTPGroup>
+            {Array.from({ length: 6 }, (_, index) => (<InputOTPSlot key={index} index={index}/>))}
+          </InputOTPGroup>
+        </InputOTP>
+        <Button onClick={() => setDefaultValue("654321")}>Change initial code</Button>
+      </div>);
+    }
+}
+```
+
+### RenderCallback
+
+```tsx
+{
+    render: () => (<InputOTP maxLength={4} aria-label="PIN" render={({ slots }) => (<div className="flex gap-control-gap">
+          {slots.map((slot, index) => (<span key={index} aria-hidden="true">
+              {slot.char}
+            </span>))}
+        </div>)}/>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: (args) => (<InputOTP {...args} dir="rtl">
+      <InputOTPGroup>
+        {Array.from({ length: 6 }, (_, index) => (<InputOTPSlot key={index} index={index}/>))}
+      </InputOTPGroup>
+    </InputOTP>)
+}
+```
+
+### FourDigits
+
+```tsx
+{
+    args: { maxLength: 4 },
+    render: (args) => (<InputOTP {...args}>
+      <InputOTPGroup>
+        {Array.from({ length: 4 }, (_, index) => (<InputOTPSlot key={index} index={index}/>))}
+      </InputOTPGroup>
+    </InputOTP>)
+}
+```
+
+### RightToLeftFourDigits
+
+```tsx
+{
+    args: { maxLength: 4 },
+    render: (args) => (<InputOTP {...args}>
+      <InputOTPGroup>
+        {Array.from({ length: 4 }, (_, index) => (<InputOTPSlot key={index} index={index}/>))}
+      </InputOTPGroup>
+    </InputOTP>),
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ]
+}
+```
+
+### Alphanumeric
+
+```tsx
+{
+    args: { maxLength: 6, pattern: REGEXP_ONLY_DIGITS_AND_CHARS, inputMode: "text" },
+    render: (args) => (<InputOTP {...args}>
+      <InputOTPGroup>
+        {Array.from({ length: 6 }, (_, index) => (<InputOTPSlot key={index} index={index}/>))}
+      </InputOTPGroup>
+    </InputOTP>)
+}
+```
+
+### RightToLeftAlphanumeric
+
+```tsx
+{
+    args: { maxLength: 6, pattern: REGEXP_ONLY_DIGITS_AND_CHARS, inputMode: "text" },
+    render: (args) => (<InputOTP {...args}>
+      <InputOTPGroup>
+        {Array.from({ length: 6 }, (_, index) => (<InputOTPSlot key={index} index={index}/>))}
+      </InputOTPGroup>
+    </InputOTP>),
+    decorators: RightToLeftFourDigits.decorators
+}
+```
+
+### Form
+
+```tsx
+{
+    render: function Render(args) {
+        const id = useId(), errorId = useId(), descriptionId = useId();
+        const [value, setValue] = useState(""), [isInvalid, setInvalid] = useState(false), [result, setResult] = useState("Not verified");
+        const inputRef = useRef<HTMLInputElement>(null);
+        return (<form aria-label="Verify login" onSubmit={(event) => {
+                event.preventDefault();
+                const code = otpFormSchema.safeParse(new FormData(event.currentTarget).get("code"));
+                setInvalid(!code.success);
+                if (code.success) {
+                    setResult(`Verified ${code.data}`);
+                }
+                else {
+                    inputRef.current?.focus();
+                }
+            }} onReset={() => {
+                setValue("");
+                setInvalid(false);
+            }}>
+        <Card className="w-80">
+          <CardHeader>
+            <CardTitle>Verify your login</CardTitle>
+            <CardDescription>Enter the code sent to m@example.com.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FieldGroup>
+              <Field data-invalid={isInvalid}>
+                <FieldLabel htmlFor={id}>Login code</FieldLabel>
+                <InputOTP {...args} ref={inputRef} id={id} name="code" aria-label={undefined} value={value} onChange={(next) => {
+                setValue(next);
+                setInvalid(false);
+            }} required aria-invalid={isInvalid || undefined} aria-errormessage={isInvalid ? errorId : undefined} aria-describedby={descriptionId} onInvalid={() => setInvalid(true)}>
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0}/>
+                    <InputOTPSlot index={1}/>
+                    <InputOTPSlot index={2}/>
+                  </InputOTPGroup>
+                  <InputOTPSeparator />
+                  <InputOTPGroup>
+                    <InputOTPSlot index={3}/>
+                    <InputOTPSlot index={4}/>
+                    <InputOTPSlot index={5}/>
+                  </InputOTPGroup>
+                </InputOTP>
+                <FieldDescription id={descriptionId}>Use the six-digit verification code.</FieldDescription>
+                {isInvalid && <FieldError id={errorId}>Enter all six digits.</FieldError>}
+              </Field>
+            </FieldGroup>
+          </CardContent>
+          <CardFooter>
+            <Button type="submit">Verify code</Button>
+            <Button type="reset" variant="outline">
+              Reset
+            </Button>
+            <Button type="button" variant="ghost" onClick={() => {
+                setValue("");
+                setInvalid(false);
+                setResult("Code resent");
+            }}>
+              Resend code
+            </Button>
+          </CardFooter>
+        </Card>
+        <output aria-label="Verification result">{result}</output>
+      </form>);
+    }
+}
+```
+
+### RightToLeftForm
+
+```tsx
+{
+    render: function Render(args) {
+        const id = useId(), errorId = useId(), descriptionId = useId();
+        const [value, setValue] = useState(""), [isInvalid, setInvalid] = useState(false), [result, setResult] = useState("Not verified");
+        const inputRef = useRef<HTMLInputElement>(null);
+        return (<form aria-label="Verify login" onSubmit={(event) => {
+                event.preventDefault();
+                const code = otpFormSchema.safeParse(new FormData(event.currentTarget).get("code"));
+                setInvalid(!code.success);
+                if (code.success) {
+                    setResult(`Verified ${code.data}`);
+                }
+                else {
+                    inputRef.current?.focus();
+                }
+            }} onReset={() => {
+                setValue("");
+                setInvalid(false);
+            }}>
+        <Card className="w-80">
+          <CardHeader>
+            <CardTitle>Verify your login</CardTitle>
+            <CardDescription>Enter the code sent to m@example.com.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FieldGroup>
+              <Field data-invalid={isInvalid}>
+                <FieldLabel htmlFor={id}>Login code</FieldLabel>
+                <InputOTP {...args} ref={inputRef} id={id} name="code" aria-label={undefined} value={value} onChange={(next) => {
+                setValue(next);
+                setInvalid(false);
+            }} required aria-invalid={isInvalid || undefined} aria-errormessage={isInvalid ? errorId : undefined} aria-describedby={descriptionId} onInvalid={() => setInvalid(true)}>
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0}/>
+                    <InputOTPSlot index={1}/>
+                    <InputOTPSlot index={2}/>
+                  </InputOTPGroup>
+                  <InputOTPSeparator />
+                  <InputOTPGroup>
+                    <InputOTPSlot index={3}/>
+                    <InputOTPSlot index={4}/>
+                    <InputOTPSlot index={5}/>
+                  </InputOTPGroup>
+                </InputOTP>
+                <FieldDescription id={descriptionId}>Use the six-digit verification code.</FieldDescription>
+                {isInvalid && <FieldError id={errorId}>Enter all six digits.</FieldError>}
+              </Field>
+            </FieldGroup>
+          </CardContent>
+          <CardFooter>
+            <Button type="submit">Verify code</Button>
+            <Button type="reset" variant="outline">
+              Reset
+            </Button>
+            <Button type="button" variant="ghost" onClick={() => {
+                setValue("");
+                setInvalid(false);
+                setResult("Code resent");
+            }}>
+              Resend code
+            </Button>
+          </CardFooter>
+        </Card>
+        <output aria-label="Verification result">{result}</output>
+      </form>);
+    },
+    decorators: RightToLeftFourDigits.decorators
+}
+```
+
+### ReadOnly
+
+```tsx
+{
+    args: { readOnly: true, value: "123456" }
+}
+```
+
+### RightToLeftReadOnly
+
+```tsx
+{
+    args: { readOnly: true, value: "123456" },
+    decorators: RightToLeftFourDigits.decorators
+}
+```

package/llms/components/forms/Label.md

@@ -0,0 +1,181 @@
+# Label
+
+Story: @alexgorbatchev/shadcn/components/forms/Label
+Source: src/components/stories/forms/Label.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/Label.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Label, Input, Checkbox, Field, FieldDescription, FieldGroup, FieldLabel, Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useId } from "react";
+```
+
+## Default component
+
+```tsx
+Label
+```
+
+## Default args
+
+```tsx
+{ children: "Email address", ref: fn(), onClick: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => {
+    const storyId = useId();
+    return (<FieldGroup>
+        <Field>
+          <Label htmlFor={`${storyId}-label-email`} {...args}/>
+          <Input id={`${storyId}-label-email`} type="email" placeholder="alex@example.com"/>
+        </Field>
+      </FieldGroup>);
+}
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{}
+```
+
+### Disabled
+
+```tsx
+{
+    render: () => {
+        const storyId = useId();
+        return (<FieldGroup>
+        <Field data-disabled="true" className="group">
+          <Label htmlFor={`${storyId}-label-disabled`}>Email address</Label>
+          <Input id={`${storyId}-label-disabled`} disabled/>
+        </Field>
+      </FieldGroup>);
+    }
+}
+```
+
+### ImplicitAssociation
+
+```tsx
+{
+    render: (args) => (<FieldGroup>
+      <Field>
+        <Label {...args}>
+          <span>Email address</span>
+          <Input type="email"/>
+        </Label>
+      </Field>
+    </FieldGroup>)
+}
+```
+
+### CheckboxAssociation
+
+```tsx
+{
+    render: (args) => {
+        const storyId = useId();
+        return (<FieldGroup>
+        <Field orientation="horizontal">
+          <Checkbox id={`${storyId}-updates`}/>
+          <Label {...args} htmlFor={`${storyId}-updates`}>
+            Send project updates
+          </Label>
+        </Field>
+      </FieldGroup>);
+    }
+}
+```
+
+### DisabledPeer
+
+```tsx
+{
+    render: (args) => {
+        const storyId = useId();
+        return (<FieldGroup>
+        <Field>
+          <Input id={`${storyId}-peer`} className="peer" disabled/>
+          <Label {...args} htmlFor={`${storyId}-peer`}>
+            Email address
+          </Label>
+          <Button>Next field</Button>
+        </Field>
+      </FieldGroup>);
+    }
+}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### InField
+
+```tsx
+{
+    render: function Render() {
+        const id = useId();
+        return (<FieldGroup className="w-80">
+        <Field>
+          <FieldLabel htmlFor={`${id}-email`}>Contact email</FieldLabel>
+          <Input id={`${id}-email`} type="email" aria-describedby={`${id}-help`}/>
+          <FieldDescription id={`${id}-help`}>For project updates.</FieldDescription>
+        </Field>
+      </FieldGroup>);
+    }
+}
+```
+
+### RightToLeftField
+
+```tsx
+{
+    render: function Render() {
+        const id = useId();
+        return (<FieldGroup className="w-80">
+        <Field>
+          <FieldLabel htmlFor={`${id}-email`}>Contact email</FieldLabel>
+          <Input id={`${id}-email`} type="email" aria-describedby={`${id}-help`}/>
+          <FieldDescription id={`${id}-help`}>For project updates.</FieldDescription>
+        </Field>
+      </FieldGroup>);
+    },
+    decorators: [
+        (Story) => (<div dir="rtl">
+        <Story />
+      </div>),
+    ]
+}
+```

package/llms/components/forms/NativeSelect.md

@@ -0,0 +1,128 @@
+# NativeSelect
+
+Story: @alexgorbatchev/shadcn/components/forms/NativeSelect
+Source: src/components/stories/forms/NativeSelect.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/NativeSelect.stories.tsx)
+
+## Public imports
+
+```tsx
+import { NativeSelect, NativeSelectOption, NativeSelectOptGroup, Button, Field, FieldGroup, FieldLabel, FieldError } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+NativeSelect
+```
+
+## Story controls
+
+```tsx
+{ size: { control: "select", options: ["default", "sm"] } }
+```
+
+## Default args
+
+```tsx
+{ "aria-label": "Runtime", defaultValue: "bun", onChange: fn() }
+```
+
+## Default render
+
+```tsx
+(args) => (<NativeSelect {...args}>
+      <NativeSelectOptGroup label="JavaScript">
+        <NativeSelectOption value="bun">Bun</NativeSelectOption>
+        <NativeSelectOption value="node">Node</NativeSelectOption>
+        <NativeSelectOption value="deno" disabled>
+          Deno
+        </NativeSelectOption>
+      </NativeSelectOptGroup>
+    </NativeSelect>)
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{}
+```
+
+### Small
+
+```tsx
+{
+    args: { size: "sm" }
+}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```
+
+### Invalid
+
+```tsx
+{
+    render: (args) => (<Field data-invalid>
+      <FieldLabel htmlFor="invalid-runtime">Runtime</FieldLabel>
+      <NativeSelect {...args} id="invalid-runtime" aria-invalid="true" aria-describedby="runtime-error">
+        <NativeSelectOption value="bun">Bun</NativeSelectOption>
+        <NativeSelectOption value="node">Node</NativeSelectOption>
+      </NativeSelect>
+      <FieldError id="runtime-error">Choose a supported runtime.</FieldError>
+    </Field>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    args: { dir: "rtl" }
+}
+```
+
+### NativeForm
+
+```tsx
+{
+    render: (args) => (<form onSubmit={(event) => {
+            event.preventDefault();
+            onSubmit(new FormData(event.currentTarget).get("runtime"));
+        }}>
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="form-runtime">Runtime</FieldLabel>
+          <NativeSelect {...args} id="form-runtime" name="runtime">
+            <NativeSelectOption value="bun">Bun</NativeSelectOption>
+            <NativeSelectOption value="node">Node</NativeSelectOption>
+          </NativeSelect>
+        </Field>
+        <Field orientation="horizontal">
+          <Button type="submit">Save runtime</Button>
+          <Button type="reset" variant="outline">
+            Reset runtime
+          </Button>
+        </Field>
+      </FieldGroup>
+    </form>)
+}
+```