@nextlyhq/ui 0.0.2-alpha.42 → 0.0.2-alpha.44

package/dist/index.d.cts

@@ -67,7 +67,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
  * Design Specs:
  * - Height: sm=32px, default=40px, lg=44px
  * - Padding: Horizontal varies by size (sm=10px, default=12px, lg=16px)
- * - Border radius: 0px (rounded-none)
+ * - Border radius: `rounded-md`, the control step of the `--radius` scale
  * - Border: 1px solid, changes on focus/error
  * - Transition: 150ms (consistent with design system)
  * - Font size: sm/default=14px (text-sm), lg=16px (text-base)
@@ -148,7 +148,7 @@ declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_
  * Cards provide a structured layout with header, content, and footer sections.
  *
  * Design Specs:
- * - Border radius: 0px (rounded-none)
+ * - Border radius: `rounded-lg`, the container step of the `--radius` scale
  * - Padding: 24px (p-6) for header/content, 16px 24px for footer
  * - Shadow: sm (default), md (hover/elevated)
  * - Border: 1px solid  border border-border color
@@ -252,7 +252,7 @@ declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttribu
  *
  * Design Specs:
  * - Padding: 16px (p-4)
- * - Border radius: 0px (rounded-none) - intentionally smaller than Card (12px)
+ * - Border radius: `rounded-md`, one step tighter than Card's `rounded-lg`
  *   for inline/flow content vs. larger container components
  * - Border: 1px solid matching variant color
  * - Shadow: sm (subtle elevation)
@@ -367,7 +367,7 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
  * @design_specs
  * - Background: bg-accent (slate-100 in light mode, slate-800 in dark mode)
  * - Animation: animate-pulse with motion-reduce:animate-none (respects prefers-reduced-motion)
- * - Border-radius: 0px (rounded-none)
+ * - Border-radius: `rounded-md` by default; override per placeholder shape
  * - Contrast: 3:1 minimum for WCAG 1.4.11 (Non-text Contrast) compliance
  *
  * @accessibility
@@ -387,13 +387,13 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
  *
  * **Avatar Skeleton:**
  * ```tsx
- * <Skeleton className="h-12 w-12 rounded-none" />
+ * <Skeleton className="h-12 w-12 rounded-md" />
  * ```
  *
  * **Card Skeleton:**
  * ```tsx
  * <div className="space-y-3">
- *   <Skeleton className="h-[125px] w-[250px] rounded-none" />
+ *   <Skeleton className="h-[125px] w-[250px] rounded-lg" />
  *   <div className="space-y-2">
  *     <Skeleton className="h-4 w-[250px]" />
  *     <Skeleton className="h-4 w-[200px]" />
@@ -407,7 +407,7 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
  *   {isLoading ? (
  *     <>
  *       <span className="sr-only">Loading user profile...</span>
- *       <Skeleton className="h-12 w-12 rounded-none" />
+ *       <Skeleton className="h-12 w-12 rounded-md" />
  *       <Skeleton className="h-4 w-[200px]" />
  *     </>
  *   ) : (
@@ -577,7 +577,10 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.C
  * Design Specs:
  * - Size: 16px (h-4 w-4) - Fixed size matching Checkbox
  * - Border: 1px solid, expands to 5px when checked (visual indicator)
- * - Border radius: Full (rounded-none)
+ * - Border radius: `rounded-full`. Round means "pick one" and square means
+ *   "pick many"; a square radio would announce the wrong behaviour, so the
+ *   shape is fixed and deliberately outside the `--radius` scale. Checkbox
+ *   keeps the derived radius for the same reason.
  * - Transition: 150ms (consistent with design system)
  * - Focus ring: 2px ring with 2px offset
  *
@@ -590,6 +593,11 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.C
 declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * A pill track carrying a circular thumb is how a toggle is recognised, so both
+ * parts use `rounded-full` and stay outside the `--radius` scale: at any theme
+ * radius the switch must still read as a switch and not as a small checkbox.
+ */
 declare function Switch({ className, ...props }: ComponentProps<typeof Root$1>): react_jsx_runtime.JSX.Element;
 
 declare const Collapsible: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
@@ -785,7 +793,9 @@ declare const AccordionContent: react.ForwardRefExoticComponent<Omit<AccordionPr
  * - 2xl: 80px (h-20 w-20) - For profile headers, large avatars
  *
  * **Design Specs**:
- * - Border radius: rounded-none (circular)
+ * - Border radius: `rounded-full`. A person's avatar is read as a circle, so it
+ *   sits outside the `--radius` scale and stays circular at any theme radius.
+ *   Non-identity content (media thumbnails) overrides back to a scale step.
  * - Background: bg-accent (slate-100 light, slate-800 dark)
  * - Text color: text-accent-foreground (slate-900 light, slate-100 dark)
  * - Fallback text scales with avatar size (text-xs to text-2xl)
@@ -958,8 +968,9 @@ type TabsContentProps = ComponentPropsWithoutRef<typeof Content$1>;
  * Built on Radix UI primitives with WAI-ARIA compliance.
  *
  * Design Specs:
- * - TabsList border-radius: 0px (rounded-none)
- * - TabsTrigger border-radius: 0px (rounded-none)
+ * - TabsList border-radius: square, independent of `--radius`
+ * - TabsTrigger border-radius: square, independent of `--radius`; the active
+ *   state is a 2px bottom border that has to stay flush with the tab edges
  * - TabsList height: 40px (h-10)
  * - TabsTrigger padding: 12px 24px (px-3 py-1.5)
  * - Transition duration: 150ms (design system standard)
@@ -1113,7 +1124,7 @@ declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimit
  * ```
  *
  * @design-spec
- * - Border-radius: 0px (rounded-none) per design system spec
+ * - Border-radius: `rounded-lg`, the container step of the `--radius` scale
  * - Max-width: 512px (default), responsive sizes available
  * - Backdrop: black/80 with blur effect
  * - Padding: 24px (p-6)
@@ -1258,7 +1269,7 @@ declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<AlertDialo
  * Provides context menus, action menus, and navigation menus with full keyboard support.
  *
  * **Design Specifications**:
- * - Border-radius: 0px (rounded-none) - consistent with Dialog, Select
+ * - Border-radius: `rounded-lg` for the menu surface, `rounded-sm` for items
  * - Padding: 4px (p-1) - compact spacing for menu items
  * - Shadow: shadow-md - floating element elevation
  * - Z-index: z-50 - above most content, below modals
@@ -1437,7 +1448,7 @@ type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
  * Design Specs:
  * - Height: sm=32px, default=40px, lg=44px (matches Input component)
  * - Padding: Horizontal 12px, vertical varies by size
- * - Border radius: 0px (rounded-none)
+ * - Border radius: `rounded-md` on the trigger, `rounded-lg` on the panel
  * - Border: 1px solid, changes on focus/error
  * - Transition: 150ms (consistent with design system)
  * - Font size: sm/default=14px (text-sm), lg=16px (text-base)
@@ -1686,7 +1697,7 @@ type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
  * @design-spec
  * - Input height: 48px (h-12) - larger for prominence
  * - Item height: 36px (h-9) desktop, 44px (h-11) mobile for touch
- * - Border radius: 0px (rounded-none) for items
+ * - Border radius: `rounded-lg` for the panel, `rounded-sm` for items
  * - Max list height: 400px (max-h-[400px])
  * - Transition: 150ms per design system
  *

package/dist/index.d.ts

@@ -67,7 +67,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
  * Design Specs:
  * - Height: sm=32px, default=40px, lg=44px
  * - Padding: Horizontal varies by size (sm=10px, default=12px, lg=16px)
- * - Border radius: 0px (rounded-none)
+ * - Border radius: `rounded-md`, the control step of the `--radius` scale
  * - Border: 1px solid, changes on focus/error
  * - Transition: 150ms (consistent with design system)
  * - Font size: sm/default=14px (text-sm), lg=16px (text-base)
@@ -148,7 +148,7 @@ declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_
  * Cards provide a structured layout with header, content, and footer sections.
  *
  * Design Specs:
- * - Border radius: 0px (rounded-none)
+ * - Border radius: `rounded-lg`, the container step of the `--radius` scale
  * - Padding: 24px (p-6) for header/content, 16px 24px for footer
  * - Shadow: sm (default), md (hover/elevated)
  * - Border: 1px solid  border border-border color
@@ -252,7 +252,7 @@ declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttribu
  *
  * Design Specs:
  * - Padding: 16px (p-4)
- * - Border radius: 0px (rounded-none) - intentionally smaller than Card (12px)
+ * - Border radius: `rounded-md`, one step tighter than Card's `rounded-lg`
  *   for inline/flow content vs. larger container components
  * - Border: 1px solid matching variant color
  * - Shadow: sm (subtle elevation)
@@ -367,7 +367,7 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
  * @design_specs
  * - Background: bg-accent (slate-100 in light mode, slate-800 in dark mode)
  * - Animation: animate-pulse with motion-reduce:animate-none (respects prefers-reduced-motion)
- * - Border-radius: 0px (rounded-none)
+ * - Border-radius: `rounded-md` by default; override per placeholder shape
  * - Contrast: 3:1 minimum for WCAG 1.4.11 (Non-text Contrast) compliance
  *
  * @accessibility
@@ -387,13 +387,13 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
  *
  * **Avatar Skeleton:**
  * ```tsx
- * <Skeleton className="h-12 w-12 rounded-none" />
+ * <Skeleton className="h-12 w-12 rounded-md" />
  * ```
  *
  * **Card Skeleton:**
  * ```tsx
  * <div className="space-y-3">
- *   <Skeleton className="h-[125px] w-[250px] rounded-none" />
+ *   <Skeleton className="h-[125px] w-[250px] rounded-lg" />
  *   <div className="space-y-2">
  *     <Skeleton className="h-4 w-[250px]" />
  *     <Skeleton className="h-4 w-[200px]" />
@@ -407,7 +407,7 @@ declare function Separator({ className, orientation, decorative, ...props }: rea
  *   {isLoading ? (
  *     <>
  *       <span className="sr-only">Loading user profile...</span>
- *       <Skeleton className="h-12 w-12 rounded-none" />
+ *       <Skeleton className="h-12 w-12 rounded-md" />
  *       <Skeleton className="h-4 w-[200px]" />
  *     </>
  *   ) : (
@@ -577,7 +577,10 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.C
  * Design Specs:
  * - Size: 16px (h-4 w-4) - Fixed size matching Checkbox
  * - Border: 1px solid, expands to 5px when checked (visual indicator)
- * - Border radius: Full (rounded-none)
+ * - Border radius: `rounded-full`. Round means "pick one" and square means
+ *   "pick many"; a square radio would announce the wrong behaviour, so the
+ *   shape is fixed and deliberately outside the `--radius` scale. Checkbox
+ *   keeps the derived radius for the same reason.
  * - Transition: 150ms (consistent with design system)
  * - Focus ring: 2px ring with 2px offset
  *
@@ -590,6 +593,11 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.C
 declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * A pill track carrying a circular thumb is how a toggle is recognised, so both
+ * parts use `rounded-full` and stay outside the `--radius` scale: at any theme
+ * radius the switch must still read as a switch and not as a small checkbox.
+ */
 declare function Switch({ className, ...props }: ComponentProps<typeof Root$1>): react_jsx_runtime.JSX.Element;
 
 declare const Collapsible: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
@@ -785,7 +793,9 @@ declare const AccordionContent: react.ForwardRefExoticComponent<Omit<AccordionPr
  * - 2xl: 80px (h-20 w-20) - For profile headers, large avatars
  *
  * **Design Specs**:
- * - Border radius: rounded-none (circular)
+ * - Border radius: `rounded-full`. A person's avatar is read as a circle, so it
+ *   sits outside the `--radius` scale and stays circular at any theme radius.
+ *   Non-identity content (media thumbnails) overrides back to a scale step.
  * - Background: bg-accent (slate-100 light, slate-800 dark)
  * - Text color: text-accent-foreground (slate-900 light, slate-100 dark)
  * - Fallback text scales with avatar size (text-xs to text-2xl)
@@ -958,8 +968,9 @@ type TabsContentProps = ComponentPropsWithoutRef<typeof Content$1>;
  * Built on Radix UI primitives with WAI-ARIA compliance.
  *
  * Design Specs:
- * - TabsList border-radius: 0px (rounded-none)
- * - TabsTrigger border-radius: 0px (rounded-none)
+ * - TabsList border-radius: square, independent of `--radius`
+ * - TabsTrigger border-radius: square, independent of `--radius`; the active
+ *   state is a 2px bottom border that has to stay flush with the tab edges
  * - TabsList height: 40px (h-10)
  * - TabsTrigger padding: 12px 24px (px-3 py-1.5)
  * - Transition duration: 150ms (design system standard)
@@ -1113,7 +1124,7 @@ declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimit
  * ```
  *
  * @design-spec
- * - Border-radius: 0px (rounded-none) per design system spec
+ * - Border-radius: `rounded-lg`, the container step of the `--radius` scale
  * - Max-width: 512px (default), responsive sizes available
  * - Backdrop: black/80 with blur effect
  * - Padding: 24px (p-6)
@@ -1258,7 +1269,7 @@ declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<AlertDialo
  * Provides context menus, action menus, and navigation menus with full keyboard support.
  *
  * **Design Specifications**:
- * - Border-radius: 0px (rounded-none) - consistent with Dialog, Select
+ * - Border-radius: `rounded-lg` for the menu surface, `rounded-sm` for items
  * - Padding: 4px (p-1) - compact spacing for menu items
  * - Shadow: shadow-md - floating element elevation
  * - Z-index: z-50 - above most content, below modals
@@ -1437,7 +1448,7 @@ type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
  * Design Specs:
  * - Height: sm=32px, default=40px, lg=44px (matches Input component)
  * - Padding: Horizontal 12px, vertical varies by size
- * - Border radius: 0px (rounded-none)
+ * - Border radius: `rounded-md` on the trigger, `rounded-lg` on the panel
  * - Border: 1px solid, changes on focus/error
  * - Transition: 150ms (consistent with design system)
  * - Font size: sm/default=14px (text-sm), lg=16px (text-base)
@@ -1686,7 +1697,7 @@ type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
  * @design-spec
  * - Input height: 48px (h-12) - larger for prominence
  * - Item height: 36px (h-9) desktop, 44px (h-11) mobile for touch
- * - Border radius: 0px (rounded-none) for items
+ * - Border radius: `rounded-lg` for the panel, `rounded-sm` for items
  * - Max list height: 400px (max-h-[400px])
  * - Transition: 150ms per design system
  *