@djangocfg/ui-core 2.1.260 → 2.1.262

package/README.md

@@ -28,30 +28,45 @@ pnpm add @djangocfg/ui-core
 | `@djangocfg/ui-tools` | Heavy tools with lazy loading |
 | `@djangocfg/ui-nextjs` | Next.js apps (extends ui-core) |
 
-## Components (60+)
+## Components (65+)
+
+Components are organized by category in `components/`. All exports are available from the root:
+```tsx
+import { Button, Dialog, Table } from '@djangocfg/ui-core';
+```
 
 ### Forms (18)
-`Label` `Button` `ButtonLink` `Input` `Checkbox` `RadioGroup` `Select` `Textarea` `Switch` `Slider` `Combobox` `MultiSelect` `CountrySelect` `LanguageSelect` `InputOTP` `PhoneInput` `Form` `Field`
+`Button` `ButtonLink` `ButtonGroup` `Input` `Textarea` `Checkbox` `RadioGroup` `Switch` `Slider` `Label` `Form` `Field` `InputOTP` `PhoneInput` `InputGroup` `DownloadButton` `OTPInput` `Textarea`
+
+### Select (8)
+`Select` `Combobox` `MultiSelect` `MultiSelectPro` `MultiSelectProAsync` `CountrySelect` `LanguageSelect`
+
+> **Select Components** — All select components now support **icons** and **badges**:
+> - `Select` — Radix primitives with `icon` on trigger/item, `badge` on item
+> - `Combobox` — Searchable single-select with icon + badge in trigger and dropdown
+> - `MultiSelectPro` — Multi-select with colored badges, icons, animations
+> 
+> See `components/select/README.md` for full documentation.
 
 ### Layout (8)
 `Card` `Separator` `Skeleton` `AspectRatio` `Sticky` `ScrollArea` `Resizable` `Section`
 
-### Overlay (7)
-`Dialog` `AlertDialog` `Sheet` `Drawer` `Popover` `HoverCard` `Tooltip`
+### Overlay (8)
+`Dialog` `AlertDialog` `Sheet` `Drawer` `Popover` `HoverCard` `Tooltip` `ResponsiveSheet`
 
 Default **`TooltipContent`** styling uses semantic **popover** tokens (`bg-popover`, `text-popover-foreground`, `border-border`, shadow) — not `primary` — so hints read as neutral floating UI.
 
-### Feedback (5)
-`Toaster` `Alert` `Progress` `Badge` `Avatar`
+### Navigation (8)
+`Tabs` `Accordion` `Collapsible` `Command` `ContextMenu` `DropdownMenu` `Menubar` `NavigationMenu`
 
-### Data (8)
-`Table` `Tabs` `Accordion` `Collapsible` `Toggle` `ToggleGroup` `Calendar` `Carousel`
+### Data (10)
+`Table` `Badge` `Avatar` `Progress` `Calendar` `Carousel` `Chart` `Toggle` `ToggleGroup` `DatePicker`
 
-### Interactive (3)
-`Command` `ContextMenu` `Chart`
+### Feedback (5)
+`Alert` `Toaster` (Sonner) `Spinner` `Empty` `Preloader`
 
-### Specialized (13)
-`ButtonGroup` `Empty` `Spinner` `Preloader` `Kbd` `TokenIcon` `InputGroup` `Item` `ImageWithFallback` `OgImage` `CopyButton` `CopyField` `StaticPagination`
+### Specialized (7)
+`Kbd` `TokenIcon` `Item` `Portal` `ImageWithFallback` `CopyButton` `CopyField`
 
 ## Hooks (17)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.260",
+  "version": "2.1.262",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -86,7 +86,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.260",
+    "@djangocfg/i18n": "^2.1.262",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -148,9 +148,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.260",
+    "@djangocfg/i18n": "^2.1.262",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.260",
+    "@djangocfg/typescript-config": "^2.1.262",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/{avatar.story.tsx → data/avatar/avatar.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useSelect } from '@djangocfg/playground';
-import { Avatar, AvatarImage, AvatarFallback } from './avatar';
+import { Avatar, AvatarImage, AvatarFallback } from '.';
 
 export default defineStory({
   title: 'Core/Avatar',

package/src/components/{avatar.tsx → data/avatar/index.tsx}

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,

package/src/components/{badge.story.tsx → data/badge/badge.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useSelect } from '@djangocfg/playground';
-import { Badge } from './badge';
+import { Badge } from '.';
 
 export default defineStory({
   title: 'Core/Badge',

package/src/components/{badge.tsx → data/badge/index.tsx}

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

package/src/components/{calendar.story.tsx → data/calendar/calendar.story.tsx}

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { defineStory } from '@djangocfg/playground';
-import { Calendar, DatePicker, DateRangePicker, type DateRange } from './calendar';
+import { Calendar } from '.';
+import { DatePicker, DateRangePicker, type DateRange } from './date-picker';
 
 export default defineStory({
   title: 'Core/Calendar',

package/src/components/{calendar → data/calendar}/calendar.tsx

@@ -4,8 +4,8 @@ import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react
 import * as React from 'react';
 import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
 
-import { cn } from '../../lib/utils';
-import { Button, buttonVariants } from '../button';
+import { cn } from '../../../lib/utils';
+import { Button, buttonVariants } from '../../forms/button';
 
 function Calendar({
   className,

package/src/components/{calendar → data/calendar}/date-picker.tsx

@@ -5,9 +5,9 @@ import { CalendarIcon } from 'lucide-react';
 import * as React from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { cn } from '../../lib/utils';
-import { Button } from '../button';
-import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { cn } from '../../../lib/utils';
+import { Button } from '../../forms/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../overlay/popover';
 import { Calendar } from './calendar';
 
 import type { SelectSingleEventHandler, DateRange as RDPDateRange } from 'react-day-picker'

package/src/components/{carousel.story.tsx → data/carousel/carousel.story.tsx}

@@ -5,8 +5,8 @@ import {
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from './carousel';
-import { Card, CardContent } from './card';
+} from '.';
+import { Card, CardContent } from '../../layout/card';
 
 const meta: StoryMeta = defineStory({
   title: 'Core/Carousel',

package/src/components/{carousel.tsx → data/carousel/index.tsx}

@@ -6,8 +6,8 @@ import * as React from 'react';
 import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
 
 import { useAppT } from '@djangocfg/i18n';
-import { cn } from '../lib/utils';
-import { Button } from './button';
+import { cn } from '../../../lib/utils';
+import { Button } from '../../forms/button';
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>

package/src/components/{chart.tsx → data/chart/index.tsx}

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const

package/src/components/{progress.tsx → data/progress/index.tsx}

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,

package/src/components/{progress.story.tsx → data/progress/progress.story.tsx}

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { defineStory, useNumber } from '@djangocfg/playground';
-import { Progress } from './progress';
+import { Progress } from '.';
 
 export default defineStory({
   title: 'Core/Progress',

package/src/components/{table.tsx → data/table/index.tsx}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,

package/src/components/{table.story.tsx → data/table/table.story.tsx}

@@ -7,8 +7,8 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from './table';
-import { Badge } from './badge';
+} from '.';
+import { Badge } from '../../data/badge';
 
 export default defineStory({
   title: 'Core/Table',

package/src/components/{toggle.tsx → data/toggle/index.tsx}

@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

package/src/components/{toggle.story.tsx → data/toggle/toggle.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { Toggle } from './toggle';
+import { Toggle } from '.';
 import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
 
 export default defineStory({

package/src/components/{toggle-group.tsx → data/toggle-group/index.tsx}

@@ -5,8 +5,8 @@ import * as React from 'react';
 
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 
-import { cn } from '../lib/utils';
-import { toggleVariants } from './toggle';
+import { cn } from '../../../lib/utils';
+import { toggleVariants } from '../../data/toggle';
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>

package/src/components/{toggle-group.story.tsx → data/toggle-group/toggle-group.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { ToggleGroup, ToggleGroupItem } from './toggle-group';
+import { ToggleGroup, ToggleGroupItem } from '.';
 import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, AlignJustify } from 'lucide-react';
 
 export default defineStory({

package/src/components/{alert.story.tsx → feedback/alert/alert.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useSelect } from '@djangocfg/playground';
-import { Alert, AlertTitle, AlertDescription } from './alert';
+import { Alert, AlertTitle, AlertDescription } from '.';
 import { AlertCircle, CheckCircle2, Info, AlertTriangle } from 'lucide-react';
 
 export default defineStory({

package/src/components/{alert.tsx → feedback/alert/index.tsx}

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",

package/src/components/{empty.story.tsx → feedback/empty/empty.story.tsx}

@@ -6,8 +6,8 @@ import {
   EmptyDescription,
   EmptyContent,
   EmptyMedia,
-} from './empty';
-import { Button } from './button';
+} from '.';
+import { Button } from '../../forms/button';
 import { Inbox, Search, FileQuestion, Plus, RefreshCw } from 'lucide-react';
 
 export default defineStory({

package/src/components/{empty.tsx → feedback/empty/index.tsx}

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/{preloader.tsx → feedback/preloader/index.tsx}

@@ -11,7 +11,7 @@ import { Loader2 } from 'lucide-react';
 import React from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 // Spinner is available for future use
 // import { Spinner } from './spinner';
 

package/src/components/{preloader.story.tsx → feedback/preloader/preloader.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { Preloader, PreloaderSkeleton } from './preloader';
+import { Preloader, PreloaderSkeleton } from '.';
 
 export default defineStory({
   title: 'Core/Preloader',

package/src/components/{sonner.tsx → feedback/sonner/index.tsx}

@@ -1,7 +1,7 @@
 "use client"
 
 import { Toaster as Sonner } from 'sonner';
-import { useResolvedTheme } from '../hooks/useResolvedTheme';
+import { useResolvedTheme } from '../../../hooks/useResolvedTheme';
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 

package/src/components/{spinner.tsx → feedback/spinner/index.tsx}

@@ -1,7 +1,7 @@
 import { Loader2Icon } from 'lucide-react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   const t = useAppT()

package/src/components/{spinner.story.tsx → feedback/spinner/spinner.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useSelect } from '@djangocfg/playground';
-import { Spinner } from './spinner';
+import { Spinner } from '.';
 
 export default defineStory({
   title: 'Core/Spinner',

package/src/components/{button.story.tsx → forms/button/button.story.tsx}

@@ -1,6 +1,6 @@
 import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
 import { Mail, Send, Loader2, ChevronRight, Plus, Trash2 } from 'lucide-react';
-import { Button, ButtonLink } from './button';
+import { Button, ButtonLink } from '.';
 
 export default defineStory({
   title: 'Core/Button',

package/src/components/{button.tsx → forms/button/index.tsx}

@@ -6,7 +6,7 @@ import * as React from 'react';
 
 import { Slot } from '@radix-ui/react-slot';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const buttonVariants = cva(
   "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

package/src/components/{button-download.story.tsx → forms/button-download/button-download.story.tsx}

@@ -1,5 +1,5 @@
 import { defineStory, useBoolean } from '@djangocfg/playground';
-import { DownloadButton } from './button-download';
+import { DownloadButton } from '.';
 
 export default defineStory({
   title: 'Core/DownloadButton',

package/src/components/{button-download.tsx → forms/button-download/index.tsx}

@@ -3,9 +3,9 @@
 import { AlertCircle, CheckCircle2, Download, Loader2 } from 'lucide-react';
 import * as React from 'react';
 
-import { Button, type ButtonProps } from './button';
-import { cn } from '../lib';
-import { useLocalStorage } from '../hooks/useLocalStorage';
+import { Button, type ButtonProps } from '../../forms/button';
+import { cn } from '../../../lib';
+import { useLocalStorage } from '../../../hooks/useLocalStorage';
 
 // Token key used by the API client
 const TOKEN_KEY = "auth_token"

package/src/components/{button-group.story.tsx → forms/button-group/button-group.story.tsx}

@@ -1,6 +1,6 @@
 import { defineStory } from '@djangocfg/playground';
-import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from './button-group';
-import { Button } from './button';
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '.';
+import { Button } from '../../forms/button';
 import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, ChevronDown } from 'lucide-react';
 
 export default defineStory({

package/src/components/{button-group.tsx → forms/button-group/index.tsx}

@@ -4,8 +4,8 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 import { Slot } from '@radix-ui/react-slot';
 
-import { cn } from '../lib/utils';
-import { Separator } from './separator';
+import { cn } from '../../../lib/utils';
+import { Separator } from '../../layout/separator';
 
 const buttonGroupVariants = cva(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",

package/src/components/{checkbox.story.tsx → forms/checkbox/checkbox.story.tsx}

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { defineStory, useBoolean } from '@djangocfg/playground';
-import { Checkbox } from './checkbox';
-import { Label } from './label';
+import { Checkbox } from '.';
+import { Label } from '../../forms/label';
 
 export default defineStory({
   title: 'Core/Checkbox',

package/src/components/{checkbox.tsx → forms/checkbox/index.tsx}

@@ -5,7 +5,7 @@ import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

package/src/components/{field.tsx → forms/field/index.tsx}

@@ -3,9 +3,9 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { useMemo } from 'react';
 
-import { cn } from '../lib/utils';
-import { Label } from './label';
-import { Separator } from './separator';
+import { cn } from '../../../lib/utils';
+import { Label } from '../../forms/label';
+import { Separator } from '../../layout/separator';
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (

package/src/components/{form.tsx → forms/form/index.tsx}

@@ -8,8 +8,8 @@ import {
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 
-import { cn } from '../lib/utils';
-import { Label } from './label';
+import { cn } from '../../../lib/utils';
+import { Label } from '../../forms/label';
 
 const Form = FormProvider
 

package/src/components/{input.tsx → forms/input/index.tsx}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import { useStoredValue, type StorageType, type UseStoredValueOptions } from '../hooks/useStoredValue';
-import { cn } from '../lib/utils';
+import { useStoredValue, type StorageType, type UseStoredValueOptions } from '../../../hooks/useStoredValue';
+import { cn } from '../../../lib/utils';
 
 export interface InputProps extends React.ComponentProps<"input"> {
   /**

package/src/components/{input.story.tsx → forms/input/input.story.tsx}

@@ -1,6 +1,6 @@
 import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { Input } from './input';
-import { Label } from './label';
+import { Input } from '.';
+import { Label } from '../../forms/label';
 
 export default defineStory({
   title: 'Core/Input',

package/src/components/{input-group.tsx → forms/input-group/index.tsx}

@@ -3,10 +3,10 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-import { cn } from '../lib/utils';
-import { Button } from './button';
-import { Input } from './input';
-import { Textarea } from './textarea';
+import { cn } from '../../../lib/utils';
+import { Button } from '../../forms/button';
+import { Input } from '../../forms/input';
+import { Textarea } from '../../forms/textarea';
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/{input-group.story.tsx → forms/input-group/input-group.story.tsx}

@@ -6,10 +6,10 @@ import {
   InputGroupText,
   InputGroupInput,
   InputGroupTextarea,
-} from './input-group';
+} from '.';
 import { Search, Mail, Eye, EyeOff, Copy, AtSign } from 'lucide-react';
 import { useState } from 'react';
-import { Kbd } from './kbd';
+import { Kbd } from '../../specialized/kbd';
 
 export default defineStory({
   title: 'Core/InputGroup',

package/src/components/{input-otp.tsx → forms/input-otp/index.tsx}

@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import { MinusIcon } from '@radix-ui/react-icons';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type ChildrenBranch = Extract<BaseOTPInputProps, { render?: never }>;
 type InputOTPProps = Omit<ChildrenBranch, 'className' | 'containerClassName'> & {

package/src/components/{input-otp.story.tsx → forms/input-otp/input-otp.story.tsx}

@@ -5,7 +5,7 @@ import {
   InputOTPGroup,
   InputOTPSlot,
   InputOTPSeparator,
-} from './input-otp';
+} from '.';
 
 export default defineStory({
   title: 'Core/InputOTP',

package/src/components/{label.tsx → forms/label/index.tsx}

@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import * as LabelPrimitive from '@radix-ui/react-label';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

package/src/components/{label.story.tsx → forms/label/label.story.tsx}

@@ -1,7 +1,7 @@
 import { defineStory } from '@djangocfg/playground';
-import { Label } from './label';
-import { Input } from './input';
-import { Checkbox } from './checkbox';
+import { Label } from '.';
+import { Input } from '../../forms/input';
+import { Checkbox } from '../../forms/checkbox';
 
 export default defineStory({
   title: 'Core/Label',

package/src/components/{otp → forms/otp}/index.tsx

@@ -4,8 +4,8 @@ import { MinusIcon } from 'lucide-react';
 import * as React from 'react';
 
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '../input-otp';
-import { cn } from '../../lib';
-import { useIsMobile } from '../../hooks/useMobile';
+import { cn } from '../../../lib';
+import { useIsMobile } from '../../../hooks/useMobile';
 
 import { createPasteHandler, useSmartOTP } from './use-otp-input';
 

package/src/components/{phone-input.tsx → forms/phone-input/index.tsx}

@@ -7,12 +7,12 @@ import { ChevronDown, Search } from 'lucide-react';
 import * as React from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { Button } from './button';
-import { Input } from './input';
-import { cn } from '../lib';
+import { Button } from '../../forms/button';
+import { Input } from '../../forms/input';
+import { cn } from '../../../lib';
 import {
     DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger
-} from './dropdown-menu';
+} from '../../navigation/dropdown-menu';
 
 // Generate country flag emoji from country code
 const getCountryFlag = (countryCode: CountryCode): string => {

package/src/components/{radio-group.tsx → forms/radio-group/index.tsx}

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { DotFilledIcon } from '@radix-ui/react-icons';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,

package/src/components/{radio-group.story.tsx → forms/radio-group/radio-group.story.tsx}

@@ -1,6 +1,6 @@
 import { defineStory, useBoolean } from '@djangocfg/playground';
-import { RadioGroup, RadioGroupItem } from './radio-group';
-import { Label } from './label';
+import { RadioGroup, RadioGroupItem } from '.';
+import { Label } from '../../forms/label';
 
 export default defineStory({
   title: 'Core/Radio Group',