@djangocfg/ui-core 2.1.382 → 2.1.384

package/src/components/forms/input-group/input-group.story.tsx

@@ -1,119 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-} from '.';
-import { Search, Mail, Eye, EyeOff, Copy, AtSign } from 'lucide-react';
-import { useState } from 'react';
-import { Kbd } from '../../specialized/kbd';
-
-export default defineStory({
-  title: 'Core/InputGroup',
-  component: InputGroup,
-  description: 'Input with addons, buttons, and icons.',
-});
-
-export const WithIcon = () => (
-  <InputGroup className="max-w-sm">
-    <InputGroupAddon>
-      <Search className="h-4 w-4" />
-    </InputGroupAddon>
-    <InputGroupInput placeholder="Search..." />
-  </InputGroup>
-);
-
-export const WithText = () => (
-  <InputGroup className="max-w-sm">
-    <InputGroupAddon>
-      <InputGroupText>https://</InputGroupText>
-    </InputGroupAddon>
-    <InputGroupInput placeholder="example.com" />
-  </InputGroup>
-);
-
-export const WithButton = () => (
-  <InputGroup className="max-w-sm">
-    <InputGroupInput placeholder="Enter email" />
-    <InputGroupAddon align="inline-end">
-      <InputGroupButton>Subscribe</InputGroupButton>
-    </InputGroupAddon>
-  </InputGroup>
-);
-
-export const PasswordToggle = () => {
-  const [showPassword, setShowPassword] = useState(false);
-
-  return (
-    <InputGroup className="max-w-sm">
-      <InputGroupInput
-        type={showPassword ? 'text' : 'password'}
-        placeholder="Enter password"
-      />
-      <InputGroupAddon align="inline-end">
-        <InputGroupButton
-          size="icon-xs"
-          onClick={() => setShowPassword(!showPassword)}
-        >
-          {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-        </InputGroupButton>
-      </InputGroupAddon>
-    </InputGroup>
-  );
-};
-
-export const CopyInput = () => (
-  <InputGroup className="max-w-md">
-    <InputGroupInput value="npm install @djangocfg/ui-core" readOnly />
-    <InputGroupAddon align="inline-end">
-      <InputGroupButton size="icon-xs">
-        <Copy className="h-4 w-4" />
-      </InputGroupButton>
-    </InputGroupAddon>
-  </InputGroup>
-);
-
-export const WithKbd = () => (
-  <InputGroup className="max-w-sm">
-    <InputGroupAddon>
-      <Search className="h-4 w-4" />
-    </InputGroupAddon>
-    <InputGroupInput placeholder="Search..." />
-    <InputGroupAddon align="inline-end">
-      <Kbd size="xs">⌘K</Kbd>
-    </InputGroupAddon>
-  </InputGroup>
-);
-
-export const Email = () => (
-  <InputGroup className="max-w-sm">
-    <InputGroupAddon>
-      <AtSign className="h-4 w-4" />
-    </InputGroupAddon>
-    <InputGroupInput type="email" placeholder="you@example.com" />
-  </InputGroup>
-);
-
-export const WithTextarea = () => (
-  <InputGroup className="max-w-md">
-    <InputGroupAddon align="block-start">
-      <InputGroupText>Description</InputGroupText>
-    </InputGroupAddon>
-    <InputGroupTextarea placeholder="Enter description..." rows={4} />
-  </InputGroup>
-);
-
-export const BothSides = () => (
-  <InputGroup className="max-w-sm">
-    <InputGroupAddon>
-      <Mail className="h-4 w-4" />
-    </InputGroupAddon>
-    <InputGroupInput placeholder="Enter email" />
-    <InputGroupAddon align="inline-end">
-      <InputGroupButton>Send</InputGroupButton>
-    </InputGroupAddon>
-  </InputGroup>
-);

package/src/components/forms/input-otp/input-otp.story.tsx

@@ -1,105 +0,0 @@
-import { useState } from 'react';
-import { defineStory } from '@djangocfg/playground';
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-  InputOTPSeparator,
-} from '.';
-
-export default defineStory({
-  title: 'Core/InputOTP',
-  component: InputOTP,
-  description: 'One-time password input with individual digit slots.',
-});
-
-export const Default = () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <InputOTP maxLength={6} value={value} onChange={setValue}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-        <InputOTPSlot index={3} />
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
-  );
-};
-
-export const WithSeparator = () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <InputOTP maxLength={6} value={value} onChange={setValue}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-      </InputOTPGroup>
-      <InputOTPSeparator />
-      <InputOTPGroup>
-        <InputOTPSlot index={3} />
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
-  );
-};
-
-export const FourDigits = () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <InputOTP maxLength={4} value={value} onChange={setValue}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-        <InputOTPSlot index={3} />
-      </InputOTPGroup>
-    </InputOTP>
-  );
-};
-
-export const Disabled = () => (
-  <InputOTP maxLength={6} disabled>
-    <InputOTPGroup>
-      <InputOTPSlot index={0} />
-      <InputOTPSlot index={1} />
-      <InputOTPSlot index={2} />
-      <InputOTPSlot index={3} />
-      <InputOTPSlot index={4} />
-      <InputOTPSlot index={5} />
-    </InputOTPGroup>
-  </InputOTP>
-);
-
-export const WithLabel = () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <div className="space-y-2">
-      <label className="text-sm font-medium">Verification Code</label>
-      <InputOTP maxLength={6} value={value} onChange={setValue}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-      <p className="text-sm text-muted-foreground">
-        Enter the 6-digit code sent to your email.
-      </p>
-    </div>
-  );
-};

package/src/components/forms/label/label.story.tsx

@@ -1,52 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { Label } from '.';
-import { Input } from '../../forms/input';
-import { Checkbox } from '../../forms/checkbox';
-
-export default defineStory({
-  title: 'Core/Label',
-  component: Label,
-  description: 'Accessible label for form controls.',
-});
-
-export const Default = () => <Label>Email address</Label>;
-
-export const WithInput = () => (
-  <div className="max-w-sm space-y-2">
-    <Label htmlFor="email">Email</Label>
-    <Input id="email" type="email" placeholder="you@example.com" />
-  </div>
-);
-
-export const WithCheckbox = () => (
-  <div className="flex items-center space-x-2">
-    <Checkbox id="terms" />
-    <Label htmlFor="terms">Accept terms and conditions</Label>
-  </div>
-);
-
-export const Required = () => (
-  <div className="max-w-sm space-y-2">
-    <Label htmlFor="name">
-      Name <span className="text-destructive">*</span>
-    </Label>
-    <Input id="name" placeholder="Enter your name" />
-  </div>
-);
-
-export const WithDescription = () => (
-  <div className="max-w-sm space-y-1">
-    <Label htmlFor="bio">Bio</Label>
-    <p className="text-sm text-muted-foreground">
-      Tell us a little about yourself.
-    </p>
-    <Input id="bio" placeholder="I am..." />
-  </div>
-);
-
-export const Disabled = () => (
-  <div className="max-w-sm space-y-2">
-    <Label htmlFor="disabled" className="opacity-50">Disabled field</Label>
-    <Input id="disabled" disabled placeholder="Cannot edit" />
-  </div>
-);

package/src/components/forms/radio-group/radio-group.story.tsx

@@ -1,113 +0,0 @@
-import { defineStory, useBoolean } from '@djangocfg/playground';
-import { RadioGroup, RadioGroupItem } from '.';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Radio Group',
-  component: RadioGroup,
-  description: 'Radio button group for single selection.',
-});
-
-export const Interactive = () => {
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable radio group',
-  });
-
-  return (
-    <RadioGroup defaultValue="option-1" disabled={disabled}>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="option-1" id="option-1" />
-        <Label htmlFor="option-1">Option 1</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="option-2" id="option-2" />
-        <Label htmlFor="option-2">Option 2</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="option-3" id="option-3" />
-        <Label htmlFor="option-3">Option 3</Label>
-      </div>
-    </RadioGroup>
-  );
-};
-
-export const Default = () => (
-  <RadioGroup defaultValue="comfortable">
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="default" id="r1" />
-      <Label htmlFor="r1">Default</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="comfortable" id="r2" />
-      <Label htmlFor="r2">Comfortable</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="compact" id="r3" />
-      <Label htmlFor="r3">Compact</Label>
-    </div>
-  </RadioGroup>
-);
-
-export const Horizontal = () => (
-  <RadioGroup defaultValue="card" className="flex gap-4">
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="card" id="card" />
-      <Label htmlFor="card">Card</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="paypal" id="paypal" />
-      <Label htmlFor="paypal">PayPal</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="apple" id="apple" />
-      <Label htmlFor="apple">Apple Pay</Label>
-    </div>
-  </RadioGroup>
-);
-
-export const Disabled = () => (
-  <RadioGroup defaultValue="option-1" disabled>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option-1" id="d1" />
-      <Label htmlFor="d1">Option 1</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option-2" id="d2" />
-      <Label htmlFor="d2">Option 2</Label>
-    </div>
-  </RadioGroup>
-);
-
-export const WithDescriptions = () => (
-  <RadioGroup defaultValue="startup" className="space-y-4">
-    <div className="flex items-start space-x-3">
-      <RadioGroupItem value="startup" id="startup" className="mt-1" />
-      <div>
-        <Label htmlFor="startup" className="font-medium">Startup</Label>
-        <p className="text-sm text-muted-foreground">
-          Perfect for small teams and startups.
-        </p>
-      </div>
-    </div>
-    <div className="flex items-start space-x-3">
-      <RadioGroupItem value="business" id="business" className="mt-1" />
-      <div>
-        <Label htmlFor="business" className="font-medium">Business</Label>
-        <p className="text-sm text-muted-foreground">
-          For growing businesses with advanced needs.
-        </p>
-      </div>
-    </div>
-    <div className="flex items-start space-x-3">
-      <RadioGroupItem value="enterprise" id="enterprise" className="mt-1" />
-      <div>
-        <Label htmlFor="enterprise" className="font-medium">Enterprise</Label>
-        <p className="text-sm text-muted-foreground">
-          Custom solutions for large organizations.
-        </p>
-      </div>
-    </div>
-  </RadioGroup>
-);

package/src/components/forms/slider/slider.story.tsx

@@ -1,134 +0,0 @@
-import { useState } from 'react';
-import { defineStory, useBoolean, useNumber } from '@djangocfg/playground';
-import { Slider } from '.';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Slider',
-  component: Slider,
-  description: 'Slider input for selecting numeric values.',
-});
-
-export const Interactive = () => {
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable slider',
-  });
-
-  const [max] = useNumber('max', {
-    defaultValue: 100,
-    min: 10,
-    max: 1000,
-    label: 'Max Value',
-    description: 'Maximum slider value',
-  });
-
-  const [step] = useNumber('step', {
-    defaultValue: 1,
-    min: 1,
-    max: 10,
-    label: 'Step',
-    description: 'Step increment',
-  });
-
-  const [value, setValue] = useState([50]);
-
-  return (
-    <div className="max-w-sm space-y-4">
-      <div className="space-y-2">
-        <div className="flex justify-between">
-          <Label>Value</Label>
-          <span className="text-sm text-muted-foreground">{value[0]}</span>
-        </div>
-        <Slider
-          value={value}
-          onValueChange={setValue}
-          max={max}
-          step={step}
-          disabled={disabled}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const Default = () => (
-  <div className="max-w-sm">
-    <Slider defaultValue={[50]} max={100} step={1} />
-  </div>
-);
-
-export const WithLabel = () => {
-  const [value, setValue] = useState([25]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <div className="flex justify-between">
-        <Label>Volume</Label>
-        <span className="text-sm text-muted-foreground">{value[0]}%</span>
-      </div>
-      <Slider value={value} onValueChange={setValue} max={100} step={1} />
-    </div>
-  );
-};
-
-export const Range = () => {
-  const [value, setValue] = useState([25, 75]);
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <div className="flex justify-between">
-        <Label>Price Range</Label>
-        <span className="text-sm text-muted-foreground">
-          ${value[0]} - ${value[1]}
-        </span>
-      </div>
-      <Slider value={value} onValueChange={setValue} max={100} step={1} />
-    </div>
-  );
-};
-
-export const Steps = () => (
-  <div className="max-w-sm space-y-6">
-    <div className="space-y-2">
-      <Label>Step: 1</Label>
-      <Slider defaultValue={[50]} max={100} step={1} />
-    </div>
-    <div className="space-y-2">
-      <Label>Step: 10</Label>
-      <Slider defaultValue={[50]} max={100} step={10} />
-    </div>
-    <div className="space-y-2">
-      <Label>Step: 25</Label>
-      <Slider defaultValue={[50]} max={100} step={25} />
-    </div>
-  </div>
-);
-
-export const Disabled = () => (
-  <div className="max-w-sm">
-    <Slider defaultValue={[50]} max={100} disabled />
-  </div>
-);
-
-export const Vertical = () => {
-  const [value, setValue] = useState([70]);
-
-  return (
-    <div className="flex items-start gap-8">
-      <div className="flex flex-col items-center gap-2">
-        <span className="text-sm text-muted-foreground">{value[0]}%</span>
-        <Slider
-          orientation="vertical"
-          value={value}
-          onValueChange={setValue}
-          max={100}
-          step={5}
-          className="h-32"
-        />
-        <Label>Volume</Label>
-      </div>
-    </div>
-  );
-};

package/src/components/forms/switch/switch.story.tsx

@@ -1,98 +0,0 @@
-import { useState } from 'react';
-import { defineStory, useBoolean } from '@djangocfg/playground';
-import { Switch } from '.';
-import { Label } from '../../forms/label';
-
-export default defineStory({
-  title: 'Core/Switch',
-  component: Switch,
-  description: 'Toggle switch for on/off states.',
-});
-
-export const Interactive = () => {
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable switch',
-  });
-
-  return (
-    <div className="flex items-center space-x-2">
-      <Switch id="airplane-mode" disabled={disabled} />
-      <Label htmlFor="airplane-mode">Airplane Mode</Label>
-    </div>
-  );
-};
-
-export const Default = () => (
-  <div className="flex items-center space-x-2">
-    <Switch id="default" />
-    <Label htmlFor="default">Default switch</Label>
-  </div>
-);
-
-export const Checked = () => (
-  <div className="flex items-center space-x-2">
-    <Switch id="checked" defaultChecked />
-    <Label htmlFor="checked">Checked by default</Label>
-  </div>
-);
-
-export const Disabled = () => (
-  <div className="space-y-4">
-    <div className="flex items-center space-x-2">
-      <Switch id="disabled-off" disabled />
-      <Label htmlFor="disabled-off">Disabled off</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <Switch id="disabled-on" disabled defaultChecked />
-      <Label htmlFor="disabled-on">Disabled on</Label>
-    </div>
-  </div>
-);
-
-export const Settings = () => {
-  const [settings, setSettings] = useState({
-    notifications: true,
-    darkMode: false,
-    autoSave: true,
-  });
-
-  return (
-    <div className="space-y-6 max-w-sm">
-      <div className="flex items-center justify-between">
-        <div>
-          <Label htmlFor="notifications" className="block">Notifications</Label>
-          <span className="text-sm text-muted-foreground">Receive push notifications</span>
-        </div>
-        <Switch
-          id="notifications"
-          checked={settings.notifications}
-          onCheckedChange={(checked) => setSettings({ ...settings, notifications: checked })}
-        />
-      </div>
-      <div className="flex items-center justify-between">
-        <div>
-          <Label htmlFor="darkMode" className="block">Dark Mode</Label>
-          <span className="text-sm text-muted-foreground">Use dark theme</span>
-        </div>
-        <Switch
-          id="darkMode"
-          checked={settings.darkMode}
-          onCheckedChange={(checked) => setSettings({ ...settings, darkMode: checked })}
-        />
-      </div>
-      <div className="flex items-center justify-between">
-        <div>
-          <Label htmlFor="autoSave" className="block">Auto Save</Label>
-          <span className="text-sm text-muted-foreground">Save changes automatically</span>
-        </div>
-        <Switch
-          id="autoSave"
-          checked={settings.autoSave}
-          onCheckedChange={(checked) => setSettings({ ...settings, autoSave: checked })}
-        />
-      </div>
-    </div>
-  );
-};