@uselets/ui 1.20.4 → 2.0.0

package/dist/components/native-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.js","names":["props","fieldControlId","useFieldControlId","id","cn","className","size","IconSelector"],"sources":["../../src/components/native-select.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { IconSelector } from '@tabler/icons-react'\n\nimport { cn } from '../lib/utils'\nimport { useFieldControlId } from './field'\n\nexport type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {\n  size?: 'sm' | 'md'\n}\n\nexport type NativeSelectOptionProps = React.ComponentProps<'option'>\n\nexport type NativeSelectOptGroupProps = React.ComponentProps<'optgroup'>\n\nfunction NativeSelect({ className, id, size = 'md', ...props }: NativeSelectProps) {\n  const fieldControlId = useFieldControlId(id)\n\n  return (\n    <div\n      className={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        id={fieldControlId}\n        data-slot=\"native-select\"\n        data-size={size}\n        className={cn(\n          'border-input dark:bg-input/30 dark:hover:bg-input/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none outline-none',\n          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',\n          'aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n          'placeholder:text-placeholder selection:bg-primary selection:text-primary-foreground',\n          'data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5',\n          'disabled:pointer-events-none disabled:cursor-not-allowed'\n        )}\n        {...props}\n      />\n      <IconSelector\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: NativeSelectOptionProps) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({ className, ...props }: NativeSelectOptGroupProps) {\n  return <optgroup data-slot=\"native-select-optgroup\" className={cn(className)} {...props} />\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n"],"mappings":"iOAeA,SAAS,aAAa,CAAE,YAAW,KAAI,OAAO,KAAM,GAAGA,GAA4B,CACjF,IAAMC,EAAiBC,EAAkBC,CAAE,EAE3C,MACE,kBAAC,MAAD,CACE,UAAWC,EAAG,sEAAuEC,CAAS,EAC9F,YAAU,wBACV,YAAWC,EAHb,SAAA,CAKE,kBAAC,SAAD,CACE,GAAIL,EACJ,YAAU,gBACV,YAAWK,EACX,UAAWF,EACT,+LACA,4EACA,qKACA,sFACA,+FACA,0DACF,EACA,GAAIJ,CACL,CAAA,EACD,kBAACO,EAAD,CACE,UAAU,2GACV,cAAY,OACZ,YAAU,oBACX,CAAA,CACE,GAET,CAEA,SAAS,mBAAmB,CAAE,GAAGP,GAAkC,CACjE,MAAO,kBAAC,SAAD,CAAQ,YAAU,uBAAuB,GAAIA,CAAQ,CAAA,CAC9D,CAEA,SAAS,qBAAqB,CAAE,YAAW,GAAGA,GAAoC,CAChF,MAAO,kBAAC,WAAD,CAAU,YAAU,yBAAyB,UAAWI,EAAGC,CAAS,EAAG,GAAIL,CAAQ,CAAA,CAC5F"}
+{"version":3,"file":"native-select.js","names":["ariaInvalid","props","fieldControlId","useFieldControlId","id","invalid","useFieldInvalid","cn","className","size","IconSelector"],"sources":["../../src/components/native-select.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { IconSelector } from '@tabler/icons-react'\n\nimport { cn } from '../lib/utils'\nimport { useFieldControlId, useFieldInvalid } from './field'\n\nexport type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {\n  /**\n   * Height of the select.\n   * @default 'md'\n   */\n  size?: 'sm' | 'md'\n}\n\nexport type NativeSelectOptionProps = React.ComponentProps<'option'>\n\nexport type NativeSelectOptGroupProps = React.ComponentProps<'optgroup'>\n\nfunction NativeSelect({ className, id, size = 'md', 'aria-invalid': ariaInvalid, ...props }: NativeSelectProps) {\n  const fieldControlId = useFieldControlId(id)\n  const invalid = useFieldInvalid(ariaInvalid)\n\n  return (\n    <div\n      className={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        id={fieldControlId}\n        aria-invalid={invalid}\n        data-slot=\"native-select\"\n        data-size={size}\n        className={cn(\n          'border-input dark:bg-input/30 dark:hover:bg-input/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none outline-none',\n          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',\n          'aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n          'placeholder:text-placeholder selection:bg-primary selection:text-primary-foreground',\n          'data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5',\n          'disabled:pointer-events-none disabled:cursor-not-allowed'\n        )}\n        {...props}\n      />\n      <IconSelector\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: NativeSelectOptionProps) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({ className, ...props }: NativeSelectOptGroupProps) {\n  return <optgroup data-slot=\"native-select-optgroup\" className={cn(className)} {...props} />\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n"],"mappings":"sPAmBA,SAAS,aAAa,CAAE,YAAW,KAAI,OAAO,KAAM,eAAgBA,EAAa,GAAGC,GAA4B,CAC9G,IAAMC,EAAiBC,EAAkBC,CAAE,EACrCC,EAAUC,EAAgBN,CAAW,EAE3C,MACE,kBAAC,MAAD,CACE,UAAWO,EAAG,sEAAuEC,CAAS,EAC9F,YAAU,wBACV,YAAWC,EAHb,SAAA,CAKE,kBAAC,SAAD,CACE,GAAIP,EACJ,eAAcG,EACd,YAAU,gBACV,YAAWI,EACX,UAAWF,EACT,+LACA,4EACA,qKACA,sFACA,+FACA,0DACF,EACA,GAAIN,CACL,CAAA,EACD,kBAACS,EAAD,CACE,UAAU,2GACV,cAAY,OACZ,YAAU,oBACX,CAAA,CACE,GAET,CAEA,SAAS,mBAAmB,CAAE,GAAGT,GAAkC,CACjE,MAAO,kBAAC,SAAD,CAAQ,YAAU,uBAAuB,GAAIA,CAAQ,CAAA,CAC9D,CAEA,SAAS,qBAAqB,CAAE,YAAW,GAAGA,GAAoC,CAChF,MAAO,kBAAC,WAAD,CAAU,YAAU,yBAAyB,UAAWM,EAAGC,CAAS,EAAG,GAAIP,CAAQ,CAAA,CAC5F"}

package/dist/components/navigation-menu.d.ts

@@ -1,26 +1,25 @@
 import { t as __name } from "../rolldown-runtime-BhWHdk3m.js";
-import { NavigationMenu as NavigationMenu$1 } from "radix-ui";
+import { t as AsChildPrimitiveProps } from "../as-child-Dxg3Xo1G.js";
 import * as React from "react";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 //#region src/components/navigation-menu.d.ts
-export type NavigationMenuProps = React.ComponentProps<typeof NavigationMenu$1.Root> & {
-  viewport?: boolean;
-};
-export type NavigationMenuListProps = React.ComponentProps<typeof NavigationMenu$1.List>;
-export type NavigationMenuItemProps = React.ComponentProps<typeof NavigationMenu$1.Item>;
-export type NavigationMenuTriggerProps = React.ComponentProps<typeof NavigationMenu$1.Trigger>;
-export type NavigationMenuContentProps = React.ComponentProps<typeof NavigationMenu$1.Content>;
-export type NavigationMenuViewportProps = React.ComponentProps<typeof NavigationMenu$1.Viewport>;
-export type NavigationMenuLinkProps = React.ComponentProps<typeof NavigationMenu$1.Link>;
-export type NavigationMenuIndicatorProps = React.ComponentProps<typeof NavigationMenu$1.Indicator>;
-declare function NavigationMenu({ className, children, viewport, ...props }: NavigationMenuProps): React.JSX.Element;
-declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): React.JSX.Element;
-declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): React.JSX.Element;
+export type NavigationMenuProps = Omit<React.ComponentProps<typeof NavigationMenu$1.Root>, 'render'> & Pick<React.ComponentProps<typeof NavigationMenu$1.Positioner>, 'align'>;
+export type NavigationMenuListProps = AsChildPrimitiveProps<typeof NavigationMenu$1.List>;
+export type NavigationMenuItemProps = AsChildPrimitiveProps<typeof NavigationMenu$1.Item>;
+export type NavigationMenuTriggerProps = AsChildPrimitiveProps<typeof NavigationMenu$1.Trigger>;
+export type NavigationMenuContentProps = AsChildPrimitiveProps<typeof NavigationMenu$1.Content>;
+export type NavigationMenuPositionerProps = Omit<React.ComponentProps<typeof NavigationMenu$1.Positioner>, 'render'> & Pick<React.ComponentProps<typeof NavigationMenu$1.Portal>, 'keepMounted'>;
+export type NavigationMenuLinkProps = AsChildPrimitiveProps<typeof NavigationMenu$1.Link>;
+export type NavigationMenuIndicatorProps = AsChildPrimitiveProps<typeof NavigationMenu$1.Icon>;
+declare function NavigationMenu({ align, className, children, ...props }: NavigationMenuProps): React.JSX.Element;
+declare function NavigationMenuList({ className, asChild, children, ...props }: NavigationMenuListProps): React.JSX.Element;
+declare function NavigationMenuItem({ className, asChild, children, ...props }: NavigationMenuItemProps): React.JSX.Element;
 declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): React.JSX.Element;
-declare function NavigationMenuContent({ className, ...props }: NavigationMenuContentProps): React.JSX.Element;
-declare function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps): React.JSX.Element;
-declare function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps): React.JSX.Element;
-declare function NavigationMenuIndicator({ className, ...props }: NavigationMenuIndicatorProps): React.JSX.Element;
+declare function NavigationMenuTrigger({ className, children, asChild, ...props }: NavigationMenuTriggerProps): React.JSX.Element;
+declare function NavigationMenuContent({ className, asChild, children, ...props }: NavigationMenuContentProps): React.JSX.Element;
+declare function NavigationMenuPositioner({ className, side, sideOffset, align, alignOffset, keepMounted, ...props }: NavigationMenuPositionerProps): React.JSX.Element;
+declare function NavigationMenuLink({ className, asChild, children, ...props }: NavigationMenuLinkProps): React.JSX.Element;
+declare function NavigationMenuIndicator({ className, asChild, children, ...props }: NavigationMenuIndicatorProps): React.JSX.Element;
 //#endregion
-export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, navigationMenuTriggerStyle };
 //# sourceMappingURL=navigation-menu.d.ts.map

package/dist/components/navigation-menu.js

@@ -1,2 +1,2 @@
-import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{IconChevronDown as t}from"@tabler/icons-react";import{NavigationMenu as n}from"radix-ui";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{cva as a}from"class-variance-authority";function NavigationMenu({className:t,children:a,viewport:o=!0,...s}){return/* @__PURE__ */ i(n.Root,{"data-slot":`navigation-menu`,"data-viewport":o,className:e(`group/navigation-menu relative flex max-w-max flex-1 items-center justify-center`,t),...s,children:[a,o&&/* @__PURE__ */ r(NavigationMenuViewport,{})]})}function NavigationMenuList({className:t,...i}){return/* @__PURE__ */ r(n.List,{"data-slot":`navigation-menu-list`,className:e(`group flex flex-1 list-none items-center justify-center gap-0`,t),...i})}function NavigationMenuItem({className:t,...i}){return/* @__PURE__ */ r(n.Item,{"data-slot":`navigation-menu-item`,className:e(`relative`,t),...i})}const o=a(`group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted`);function NavigationMenuTrigger({className:a,children:s,...c}){return/* @__PURE__ */ i(n.Trigger,{"data-slot":`navigation-menu-trigger`,className:e(o(),`group`,a),...c,children:[s,` `,/* @__PURE__ */ r(t,{className:e(`relative top-px ml-1 size-3 transition duration-300`,`group-data-popup-open/navigation-menu-trigger:rotate-180`,`group-data-open/navigation-menu-trigger:rotate-180`),"aria-hidden":`true`})]})}function NavigationMenuContent({className:t,...i}){return/* @__PURE__ */ r(n.Content,{"data-slot":`navigation-menu-content`,className:e(`top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] md:absolute md:w-auto`,`group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5`,`group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg`,`group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground`,`group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1`,`group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300`,`group-data-[viewport=false]/navigation-menu:data-open:animate-in`,`group-data-[viewport=false]/navigation-menu:data-open:fade-in-0`,`group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95`,`group-data-[viewport=false]/navigation-menu:data-closed:animate-out`,`group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0`,`group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95`,`data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52`,`data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52`,`data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in`,`data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out`,`**:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none`,t),...i})}function NavigationMenuViewport({className:t,...i}){return/* @__PURE__ */ r(`div`,{className:e(`absolute top-full left-0 isolate z-50 flex justify-center`),children:/* @__PURE__ */ r(n.Viewport,{"data-slot":`navigation-menu-viewport`,className:e(`origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg`,`bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100`,`md:w-(--radix-navigation-menu-viewport-width)`,`data-open:animate-in data-open:zoom-in-90`,`data-closed:animate-out data-closed:zoom-out-90`,t),...i})})}function NavigationMenuLink({className:t,...i}){return/* @__PURE__ */ r(n.Link,{"data-slot":`navigation-menu-link`,className:e(`flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4`,t),...i})}function NavigationMenuIndicator({className:t,...i}){return/* @__PURE__ */ r(n.Indicator,{"data-slot":`navigation-menu-indicator`,className:e(`top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in`,t),...i,children:/* @__PURE__ */ r(`div`,{className:`relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md`})})}export{NavigationMenu,NavigationMenuContent,NavigationMenuIndicator,NavigationMenuItem,NavigationMenuLink,NavigationMenuList,NavigationMenuTrigger,NavigationMenuViewport,o as navigationMenuTriggerStyle};
+import"../rolldown-runtime-BhWHdk3m.js";import{toAsChildRenderProps as e}from"../lib/as-child.js";import{cn as t}from"../lib/utils.js";import{t as n}from"../resolve-class-name-BurP8ngI.js";import{IconChevronDown as r}from"@tabler/icons-react";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{NavigationMenu as c}from"@base-ui/react/navigation-menu";function NavigationMenu({align:e=`start`,className:r,children:i,...s}){return/* @__PURE__ */ o(c.Root,{"data-slot":`navigation-menu`,className:e=>t(`group/navigation-menu relative flex max-w-max flex-1 items-center justify-center`,n(r,e)),...s,children:[i,/* @__PURE__ */ a(NavigationMenuPositioner,{align:e})]})}function NavigationMenuList({className:r,asChild:i,children:o,...s}){return/* @__PURE__ */ a(c.List,{"data-slot":`navigation-menu-list`,className:e=>t(`group flex flex-1 list-none items-center justify-center gap-0`,n(r,e)),...s,...e(i,o)})}function NavigationMenuItem({className:r,asChild:i,children:o,...s}){return/* @__PURE__ */ a(c.Item,{"data-slot":`navigation-menu-item`,className:e=>t(`relative`,n(r,e)),...s,...e(i,o)})}const l=s(`group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted`);function NavigationMenuTrigger({className:s,children:u,asChild:d,...f}){return/* @__PURE__ */ o(c.Trigger,{"data-slot":`navigation-menu-trigger`,className:e=>t(l(),`group`,n(s,e)),...f,...e(d,u),children:[!d&&u,!d&&/* @__PURE__ */ o(i,{children:[` `,/* @__PURE__ */ a(r,{className:t(`relative top-px ml-1 size-3 transition duration-300`,`group-data-popup-open/navigation-menu-trigger:rotate-180`,`group-data-open/navigation-menu-trigger:rotate-180`),"aria-hidden":`true`})]})]})}function NavigationMenuContent({className:r,asChild:i,children:o,...s}){return/* @__PURE__ */ a(c.Content,{"data-slot":`navigation-menu-content`,className:e=>t(`h-full w-auto p-1 ease-[cubic-bezier(0.22,1,0.36,1)]`,`transition-[opacity,transform,translate] duration-[0.35s]`,`data-starting-style:opacity-0 data-ending-style:opacity-0`,`data-[activation-direction=left]:data-starting-style:-translate-x-1/2 data-[activation-direction=right]:data-starting-style:translate-x-1/2`,`data-[activation-direction=left]:data-ending-style:translate-x-1/2 data-[activation-direction=right]:data-ending-style:-translate-x-1/2`,`**:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none`,n(r,e)),...s,...e(i,o)})}function NavigationMenuPositioner({className:e,side:r=`bottom`,sideOffset:i=6,align:o=`start`,alignOffset:s=0,keepMounted:l,...u}){return/* @__PURE__ */ a(c.Portal,{keepMounted:l,children:/* @__PURE__ */ a(c.Positioner,{"data-slot":`navigation-menu-positioner`,side:r,sideOffset:i,align:o,alignOffset:s,className:r=>t(`isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)`,`transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none`,n(e,r)),...u,children:/* @__PURE__ */ a(c.Popup,{"data-slot":`navigation-menu-popup`,className:t(`relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-lg outline-none`,`bg-popover text-popover-foreground shadow ring-1 ring-foreground/10`,`transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]`,`data-starting-style:scale-90 data-starting-style:opacity-0`,`data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150`),children:/* @__PURE__ */ a(c.Viewport,{"data-slot":`navigation-menu-viewport`,className:`relative size-full overflow-hidden`})})})})}function NavigationMenuLink({className:r,asChild:i,children:o,...s}){return/* @__PURE__ */ a(c.Link,{"data-slot":`navigation-menu-link`,className:e=>t(`flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4`,n(r,e)),...s,...e(i,o)})}function NavigationMenuIndicator({className:r,asChild:i,children:o,...s}){return/* @__PURE__ */ a(c.Icon,{"data-slot":`navigation-menu-indicator`,className:e=>t(`top-full z-1 flex h-1.5 items-end justify-center overflow-hidden`,n(r,e)),...s,...e(i,o),children:!i&&/* @__PURE__ */ a(`div`,{className:`relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md`})})}export{NavigationMenu,NavigationMenuContent,NavigationMenuIndicator,NavigationMenuItem,NavigationMenuLink,NavigationMenuList,NavigationMenuPositioner,NavigationMenuTrigger,l as navigationMenuTriggerStyle};
 //# sourceMappingURL=navigation-menu.js.map

package/dist/components/navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.js","names":["NavigationMenuPrimitive","NavigationMenu$1","props","viewport","cn","className","children","navigationMenuTriggerStyle","cva","IconChevronDown"],"sources":["../../src/components/navigation-menu.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { cva } from 'class-variance-authority'\nimport { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\n\nexport type NavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}\n\nexport type NavigationMenuListProps = React.ComponentProps<typeof NavigationMenuPrimitive.List>\n\nexport type NavigationMenuItemProps = React.ComponentProps<typeof NavigationMenuPrimitive.Item>\n\nexport type NavigationMenuTriggerProps = React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>\n\nexport type NavigationMenuContentProps = React.ComponentProps<typeof NavigationMenuPrimitive.Content>\n\nexport type NavigationMenuViewportProps = React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>\n\nexport type NavigationMenuLinkProps = React.ComponentProps<typeof NavigationMenuPrimitive.Link>\n\nexport type NavigationMenuIndicatorProps = React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>\n\nfunction NavigationMenu({ className, children, viewport = true, ...props }: NavigationMenuProps) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({ className, ...props }: NavigationMenuListProps) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn('group flex flex-1 list-none items-center justify-center gap-0', className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({ className, ...props }: NavigationMenuItemProps) {\n  return (\n    <NavigationMenuPrimitive.Item data-slot=\"navigation-menu-item\" className={cn('relative', className)} {...props} />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted'\n)\n\nfunction NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), 'group', className)}\n      {...props}\n    >\n      {children}{' '}\n      <IconChevronDown\n        className={cn(\n          'relative top-px ml-1 size-3 transition duration-300',\n          'group-data-popup-open/navigation-menu-trigger:rotate-180',\n          'group-data-open/navigation-menu-trigger:rotate-180'\n        )}\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({ className, ...props }: NavigationMenuContentProps) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        'top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] md:absolute md:w-auto',\n        'group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5',\n        'group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg',\n        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground',\n        'group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1',\n        'group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300',\n        'group-data-[viewport=false]/navigation-menu:data-open:animate-in',\n        'group-data-[viewport=false]/navigation-menu:data-open:fade-in-0',\n        'group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95',\n        'group-data-[viewport=false]/navigation-menu:data-closed:animate-out',\n        'group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0',\n        'group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95',\n        'data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52',\n        'data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52',\n        'data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in',\n        'data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out',\n        '**:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps) {\n  return (\n    <div className={cn('absolute top-full left-0 isolate z-50 flex justify-center')}>\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          'origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg',\n          'bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100',\n          'md:w-(--radix-navigation-menu-viewport-width)',\n          'data-open:animate-in data-open:zoom-in-90',\n          'data-closed:animate-out data-closed:zoom-out-90',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({ className, ...props }: NavigationMenuIndicatorProps) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle\n}\n"],"mappings":"8QA0BA,SAAS,eAAe,CAAE,YAAW,WAAU,WAAW,GAAM,GAAGE,GAA8B,CAC/F,MACE,kBAACF,EAAwB,KAAzB,CACE,YAAU,kBACV,gBAAeG,EACf,UAAWC,EAAG,mFAAoFC,CAAS,EAC3G,GAAIH,EAJN,SAAA,CAMGI,EACAH,GAAY,kBAAC,uBAAD,CAAyB,CAAA,CACV,GAElC,CAEA,SAAS,mBAAmB,CAAE,YAAW,GAAGD,GAAkC,CAC5E,MACE,kBAACF,EAAwB,KAAzB,CACE,YAAU,uBACV,UAAWI,EAAG,gEAAiEC,CAAS,EACxF,GAAIH,CACL,CAAA,CAEL,CAEA,SAAS,mBAAmB,CAAE,YAAW,GAAGA,GAAkC,CAC5E,MACE,kBAACF,EAAwB,KAAzB,CAA8B,YAAU,uBAAuB,UAAWI,EAAG,WAAYC,CAAS,EAAG,GAAIH,CAAQ,CAAA,CAErH,CAEA,MAAMK,EAA6BC,EACjC,kcACF,EAEA,SAAS,sBAAsB,CAAE,YAAW,WAAU,GAAGN,GAAqC,CAC5F,MACE,kBAACF,EAAwB,QAAzB,CACE,YAAU,0BACV,UAAWI,EAAGG,EAA2B,EAAG,QAASF,CAAS,EAC9D,GAAIH,EAHN,SAAA,CAKGI,EAAU,IACX,kBAACG,EAAD,CACE,UAAWL,EACT,sDACA,2DACA,oDACF,EACA,cAAY,MACb,CAAA,CAC8B,GAErC,CAEA,SAAS,sBAAsB,CAAE,YAAW,GAAGF,GAAqC,CAClF,MACE,kBAACF,EAAwB,QAAzB,CACE,YAAU,0BACV,UAAWI,EACT,mFACA,0GACA,qHACA,6HACA,wGACA,0HACA,mEACA,kEACA,mEACA,sEACA,qEACA,sEACA,+FACA,yFACA,+DACA,6DACA,0GACAC,CACF,EACA,GAAIH,CACL,CAAA,CAEL,CAEA,SAAS,uBAAuB,CAAE,YAAW,GAAGA,GAAsC,CACpF,MACE,kBAAC,MAAD,CAAK,UAAWE,EAAG,2DAA2D,EAC5E,SAAA,kBAACJ,EAAwB,SAAzB,CACE,YAAU,2BACV,UAAWI,EACT,kHACA,mFACA,gDACA,4CACA,kDACAC,CACF,EACA,GAAIH,CACL,CAAA,CACE,CAAA,CAET,CAEA,SAAS,mBAAmB,CAAE,YAAW,GAAGA,GAAkC,CAC5E,MACE,kBAACF,EAAwB,KAAzB,CACE,YAAU,uBACV,UAAWI,EACT,wVACAC,CACF,EACA,GAAIH,CACL,CAAA,CAEL,CAEA,SAAS,wBAAwB,CAAE,YAAW,GAAGA,GAAuC,CACtF,MACE,kBAACF,EAAwB,UAAzB,CACE,YAAU,4BACV,UAAWI,EACT,6LACAC,CACF,EACA,GAAIH,EAEJ,SAAA,kBAAC,MAAD,CAAK,UAAU,wEAA0E,CAAA,CACxD,CAAA,CAEvC"}
+{"version":3,"file":"navigation-menu.js","names":["NavigationMenuPrimitive","resolveClassName","NavigationMenu$1","props","cn","className","state","children","toAsChildRenderProps","asChild","navigationMenuTriggerStyle","cva","Fragment","IconChevronDown"],"sources":["../../src/components/navigation-menu.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu'\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { cva } from 'class-variance-authority'\n\nimport { type AsChildPrimitiveProps, toAsChildRenderProps } from '../lib/as-child'\nimport { cn } from '../lib/utils'\nimport { resolveClassName } from '../utils/resolve-class-name'\n\nexport type NavigationMenuProps = Omit<React.ComponentProps<typeof NavigationMenuPrimitive.Root>, 'render'> &\n  Pick<React.ComponentProps<typeof NavigationMenuPrimitive.Positioner>, 'align'>\n\nexport type NavigationMenuListProps = AsChildPrimitiveProps<typeof NavigationMenuPrimitive.List>\n\nexport type NavigationMenuItemProps = AsChildPrimitiveProps<typeof NavigationMenuPrimitive.Item>\n\nexport type NavigationMenuTriggerProps = AsChildPrimitiveProps<typeof NavigationMenuPrimitive.Trigger>\n\nexport type NavigationMenuContentProps = AsChildPrimitiveProps<typeof NavigationMenuPrimitive.Content>\n\nexport type NavigationMenuPositionerProps = Omit<\n  React.ComponentProps<typeof NavigationMenuPrimitive.Positioner>,\n  'render'\n> &\n  Pick<React.ComponentProps<typeof NavigationMenuPrimitive.Portal>, 'keepMounted'>\n\nexport type NavigationMenuLinkProps = AsChildPrimitiveProps<typeof NavigationMenuPrimitive.Link>\n\nexport type NavigationMenuIndicatorProps = AsChildPrimitiveProps<typeof NavigationMenuPrimitive.Icon>\n\nfunction NavigationMenu({ align = 'start', className, children, ...props }: NavigationMenuProps) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={(state) =>\n        cn(\n          'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',\n          resolveClassName(className, state)\n        )\n      }\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner align={align} />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({ className, asChild, children, ...props }: NavigationMenuListProps) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={(state) =>\n        cn('group flex flex-1 list-none items-center justify-center gap-0', resolveClassName(className, state))\n      }\n      {...props}\n      {...toAsChildRenderProps(asChild, children)}\n    />\n  )\n}\n\nfunction NavigationMenuItem({ className, asChild, children, ...props }: NavigationMenuItemProps) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={(state) => cn('relative', resolveClassName(className, state))}\n      {...props}\n      {...toAsChildRenderProps(asChild, children)}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted'\n)\n\nfunction NavigationMenuTrigger({ className, children, asChild, ...props }: NavigationMenuTriggerProps) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={(state) => cn(navigationMenuTriggerStyle(), 'group', resolveClassName(className, state))}\n      {...props}\n      {...toAsChildRenderProps(asChild, children)}\n    >\n      {!asChild && children}\n      {!asChild && (\n        <>\n          {' '}\n          <IconChevronDown\n            className={cn(\n              'relative top-px ml-1 size-3 transition duration-300',\n              'group-data-popup-open/navigation-menu-trigger:rotate-180',\n              'group-data-open/navigation-menu-trigger:rotate-180'\n            )}\n            aria-hidden=\"true\"\n          />\n        </>\n      )}\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({ className, asChild, children, ...props }: NavigationMenuContentProps) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={(state) =>\n        cn(\n          'h-full w-auto p-1 ease-[cubic-bezier(0.22,1,0.36,1)]',\n          'transition-[opacity,transform,translate] duration-[0.35s]',\n          'data-starting-style:opacity-0 data-ending-style:opacity-0',\n          'data-[activation-direction=left]:data-starting-style:-translate-x-1/2 data-[activation-direction=right]:data-starting-style:translate-x-1/2',\n          'data-[activation-direction=left]:data-ending-style:translate-x-1/2 data-[activation-direction=right]:data-ending-style:-translate-x-1/2',\n          '**:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',\n          resolveClassName(className, state)\n        )\n      }\n      {...props}\n      {...toAsChildRenderProps(asChild, children)}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = 'bottom',\n  sideOffset = 6,\n  align = 'start',\n  alignOffset = 0,\n  keepMounted,\n  ...props\n}: NavigationMenuPositionerProps) {\n  return (\n    <NavigationMenuPrimitive.Portal keepMounted={keepMounted}>\n      <NavigationMenuPrimitive.Positioner\n        data-slot=\"navigation-menu-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={(state) =>\n          cn(\n            'isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)',\n            'transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none',\n            resolveClassName(className, state)\n          )\n        }\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup\n          data-slot=\"navigation-menu-popup\"\n          className={cn(\n            'relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-lg outline-none',\n            'bg-popover text-popover-foreground shadow ring-1 ring-foreground/10',\n            'transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]',\n            'data-starting-style:scale-90 data-starting-style:opacity-0',\n            'data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150'\n          )}\n        >\n          <NavigationMenuPrimitive.Viewport\n            data-slot=\"navigation-menu-viewport\"\n            className=\"relative size-full overflow-hidden\"\n          />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({ className, asChild, children, ...props }: NavigationMenuLinkProps) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={(state) =>\n        cn(\n          \"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n          resolveClassName(className, state)\n        )\n      }\n      {...props}\n      {...toAsChildRenderProps(asChild, children)}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({ className, asChild, children, ...props }: NavigationMenuIndicatorProps) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={(state) =>\n        cn('top-full z-1 flex h-1.5 items-end justify-center overflow-hidden', resolveClassName(className, state))\n      }\n      {...props}\n      {...toAsChildRenderProps(asChild, children)}\n    >\n      {!asChild && <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />}\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuPositioner,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle\n}\n"],"mappings":"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"}

package/dist/components/number-field.d.ts

@@ -1,6 +1,8 @@
 import { t as __name } from "../rolldown-runtime-BhWHdk3m.js";
-import { VariantProps } from "class-variance-authority";
+import { t as AsChildPrimitiveProps } from "../as-child-Dxg3Xo1G.js";
+import * as React from "react";
 import { ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
 import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
 //#region src/components/number-field.d.ts
 declare const numberFieldGroupVariants: (props?: ({
@@ -12,24 +14,27 @@ declare const numberFieldButtonVariants: (props?: ({
 declare const numberFieldInputVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type NumberFieldProps = NumberField$1.Root.Props & VariantProps<typeof numberFieldGroupVariants>;
-declare function NumberField({ id, className, size, ...props }: NumberFieldProps): import("react").JSX.Element;
-export type NumberFieldGroupProps = NumberField$1.Group.Props & Partial<VariantProps<typeof numberFieldGroupVariants>>;
-declare function NumberFieldGroup({ className, size: sizeProp, ...props }: NumberFieldGroupProps): import("react").JSX.Element;
-export type NumberFieldDecrementProps = NumberField$1.Decrement.Props & Partial<VariantProps<typeof numberFieldButtonVariants>> & {
+export type NumberFieldProps = Omit<NumberField$1.Root.Props, 'render'> & VariantProps<typeof numberFieldGroupVariants>;
+declare function NumberField({ id, className, size, 'aria-invalid': ariaInvalid, ...props }: NumberFieldProps): React.JSX.Element;
+export type NumberFieldGroupProps = AsChildPrimitiveProps<typeof NumberField$1.Group> & Partial<VariantProps<typeof numberFieldGroupVariants>>;
+declare function NumberFieldGroup({ className, size: sizeProp, asChild, children, ...props }: NumberFieldGroupProps): React.JSX.Element;
+export type NumberFieldDecrementProps = AsChildPrimitiveProps<typeof NumberField$1.Decrement> & Partial<VariantProps<typeof numberFieldButtonVariants>> & {
+  /** Replaces the default minus icon. */
   children?: React.ReactNode;
 };
-declare function NumberFieldDecrement({ className, size: sizeProp, children, ...props }: NumberFieldDecrementProps): import("react").JSX.Element;
-export type NumberFieldIncrementProps = NumberField$1.Increment.Props & Partial<VariantProps<typeof numberFieldButtonVariants>> & {
+declare function NumberFieldDecrement({ className, size: sizeProp, children, asChild, ...props }: NumberFieldDecrementProps): React.JSX.Element;
+export type NumberFieldIncrementProps = AsChildPrimitiveProps<typeof NumberField$1.Increment> & Partial<VariantProps<typeof numberFieldButtonVariants>> & {
+  /** Replaces the default plus icon. */
   children?: ReactNode;
 };
-declare function NumberFieldIncrement({ className, size: sizeProp, children, ...props }: NumberFieldIncrementProps): import("react").JSX.Element;
-export type NumberFieldInputProps = NumberField$1.Input.Props & Partial<VariantProps<typeof numberFieldInputVariants>>;
-declare function NumberFieldInput({ id, className, size: sizeProp, ...props }: NumberFieldInputProps): import("react").JSX.Element;
-export type NumberFieldScrubAreaProps = NumberField$1.ScrubArea.Props & {
+declare function NumberFieldIncrement({ className, size: sizeProp, children, asChild, ...props }: NumberFieldIncrementProps): React.JSX.Element;
+export type NumberFieldInputProps = Omit<NumberField$1.Input.Props, 'render'> & Partial<VariantProps<typeof numberFieldInputVariants>>;
+declare function NumberFieldInput({ id, className, size: sizeProp, ...props }: NumberFieldInputProps): React.JSX.Element;
+export type NumberFieldScrubAreaProps = Omit<React.ComponentProps<typeof NumberField$1.ScrubArea>, 'render'> & {
+  /** Visible label; dragging it changes the value. */
   label: string;
 };
-declare function NumberFieldScrubArea({ className, label, ...props }: NumberFieldScrubAreaProps): import("react").JSX.Element;
+declare function NumberFieldScrubArea({ className, label, ...props }: NumberFieldScrubAreaProps): React.JSX.Element;
 //#endregion
 export { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea };
 //# sourceMappingURL=number-field.d.ts.map

package/dist/components/number-field.js

@@ -1,2 +1,2 @@
-import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{Label as t}from"./label.js";import{useFieldControlId as n}from"./field.js";import{IconMinus as r,IconPlus as i}from"@tabler/icons-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{createContext as c,useContext as l,useId as u}from"react";import{NumberField as d}from"@base-ui/react/number-field";const f=c(null),p=s(`relative flex w-full justify-between border border-input data-disabled:pointer-events-none data-disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-within:has-aria-invalid:border-destructive focus-within:has-aria-invalid:ring-destructive/20 dark:focus-within:has-aria-invalid:ring-destructive/40 rounded-lg bg-transparent dark:bg-input/30 transition-colors focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-3`,{variants:{size:{sm:`h-7 text-sm`,md:`h-8 text-sm`,lg:`h-9 text-sm`}},defaultVariants:{size:`md`}}),m=s(`relative flex shrink-0 cursor-pointer items-center justify-center transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent`,{variants:{size:{sm:`px-1.5 [&_svg:not([class*='size-'])]:size-3.5`,md:`px-2 [&_svg:not([class*='size-'])]:size-4`,lg:`px-2.5 [&_svg:not([class*='size-'])]:size-4`}},defaultVariants:{size:`md`}}),h=s(`w-full min-w-0 flex-1 bg-transparent text-center tabular-nums outline-none`,{variants:{size:{sm:`px-2 py-0.5`,md:`px-2.5 py-1`,lg:`px-2.5 py-1.5`}},defaultVariants:{size:`md`}});function NumberField({id:t,className:r,size:i=`md`,...o}){let s=u(),c=n(t)??s,l=i??`md`;return/* @__PURE__ */ a(f.Provider,{value:{fieldId:c,size:l},children:/* @__PURE__ */ a(d.Root,{className:e(`flex w-full flex-col items-start gap-2`,r),"data-size":l,"data-slot":`number-field`,...o})})}function NumberFieldGroup({className:t,size:n,...r}){let i=l(f);if(!i)throw Error(`NumberFieldGroup must be used within a NumberField component.`);let o=n??i.size;return/* @__PURE__ */ a(d.Group,{className:e(p({size:o}),t),"data-slot":`number-field-group`,...r})}function NumberFieldDecrement({className:t,size:n,children:i,...o}){let s=l(f);if(!s)throw Error(`NumberFieldDecrement must be used within a NumberField component.`);let c=n??s.size;return/* @__PURE__ */ a(d.Decrement,{className:e(m({size:c}),`rounded-s-lg border-e-0`,t),"data-slot":`number-field-decrement`,...o,children:i??/* @__PURE__ */ a(r,{})})}function NumberFieldIncrement({className:t,size:n,children:r,...o}){let s=l(f);if(!s)throw Error(`NumberFieldIncrement must be used within a NumberField component.`);let c=n??s.size;return/* @__PURE__ */ a(d.Increment,{className:e(m({size:c}),`rounded-e-lg border-s-0`,t),"data-slot":`number-field-increment`,...o,children:r??/* @__PURE__ */ a(i,{})})}function NumberFieldInput({id:t,className:n,size:r,...i}){let o=l(f);if(!o)throw Error(`NumberFieldInput must be used within a NumberField component.`);let s=r??o.size;return/* @__PURE__ */ a(d.Input,{id:t??o.fieldId,className:e(h({size:s}),n),"data-slot":`number-field-input`,...i})}function NumberFieldScrubArea({className:n,label:r,...i}){let s=l(f);if(!s)throw Error(`NumberFieldScrubArea must be used within a NumberField component for accessibility.`);return/* @__PURE__ */ o(d.ScrubArea,{className:e(`flex cursor-ew-resize`,n),"data-slot":`number-field-scrub-area`,...i,children:[/* @__PURE__ */ a(t,{className:`cursor-ew-resize`,htmlFor:s.fieldId,children:r}),/* @__PURE__ */ a(d.ScrubAreaCursor,{className:`drop-shadow-[0_1px_1px_#0008] filter`,children:/* @__PURE__ */ a(CursorGrowIcon,{})})]})}function CursorGrowIcon(e){return/* @__PURE__ */ a(`svg`,{"aria-hidden":`true`,fill:`black`,height:`14`,stroke:`white`,viewBox:`0 0 24 14`,width:`26`,xmlns:`http://www.w3.org/2000/svg`,...e,children:/* @__PURE__ */ a(`path`,{d:`M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z`})})}export{NumberField,NumberFieldDecrement,NumberFieldGroup,NumberFieldIncrement,NumberFieldInput,NumberFieldScrubArea};
+import"../rolldown-runtime-BhWHdk3m.js";import{toAsChildRenderProps as e}from"../lib/as-child.js";import{cn as t}from"../lib/utils.js";import{t as n}from"../resolve-class-name-BurP8ngI.js";import{Label as r}from"./label.js";import{useFieldControlId as i,useFieldInvalid as a}from"./field.js";import{IconMinus as o,IconPlus as s}from"@tabler/icons-react";import{createContext as c,useContext as l,useId as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{cva as p}from"class-variance-authority";import{NumberField as m}from"@base-ui/react/number-field";const h=c(null),g=p([`relative flex w-full justify-between rounded-lg border border-input bg-transparent transition-colors dark:bg-input/30`,`data-disabled:pointer-events-none data-disabled:opacity-50`,`focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50`,`has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40`],{variants:{size:{sm:`h-7 text-sm`,md:`h-8 text-sm`,lg:`h-9 text-sm`}},defaultVariants:{size:`md`}}),_=p(`relative flex shrink-0 cursor-pointer items-center justify-center transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent`,{variants:{size:{sm:`px-1.5 [&_svg:not([class*='size-'])]:size-3.5`,md:`px-2 [&_svg:not([class*='size-'])]:size-4`,lg:`px-2.5 [&_svg:not([class*='size-'])]:size-4`}},defaultVariants:{size:`md`}}),v=p(`w-full min-w-0 flex-1 bg-transparent text-center tabular-nums outline-none`,{variants:{size:{sm:`px-2 py-0.5`,md:`px-2.5 py-1`,lg:`px-2.5 py-1.5`}},defaultVariants:{size:`md`}});function NumberField({id:e,className:r,size:o=`md`,"aria-invalid":s,...c}){let l=u(),f=i(e),p=a(s),g=f??l,_=o??`md`;return/* @__PURE__ */ d(h.Provider,{value:{fieldId:g,size:_,invalid:p},children:/* @__PURE__ */ d(m.Root,{className:e=>t(`flex w-full flex-col items-start gap-2`,n(r,e)),"data-size":_,"data-slot":`number-field`,...c})})}function NumberFieldGroup({className:r,size:i,asChild:a,children:o,...s}){let c=l(h);if(!c)throw Error(`NumberFieldGroup must be used within a NumberField component.`);let u=i??c.size;return/* @__PURE__ */ d(m.Group,{className:e=>t(g({size:u}),n(r,e)),"data-slot":`number-field-group`,...s,...e(a,o)})}function NumberFieldDecrement({className:r,size:i,children:a,asChild:s,...c}){let u=l(h);if(!u)throw Error(`NumberFieldDecrement must be used within a NumberField component.`);let f=i??u.size;return/* @__PURE__ */ d(m.Decrement,{className:e=>t(_({size:f}),`rounded-s-lg border-e-0`,n(r,e)),"data-slot":`number-field-decrement`,...c,...e(s,a),children:!s&&(a??/* @__PURE__ */ d(o,{}))})}function NumberFieldIncrement({className:r,size:i,children:a,asChild:o,...c}){let u=l(h);if(!u)throw Error(`NumberFieldIncrement must be used within a NumberField component.`);let f=i??u.size;return/* @__PURE__ */ d(m.Increment,{className:e=>t(_({size:f}),`rounded-e-lg border-s-0`,n(r,e)),"data-slot":`number-field-increment`,...c,...e(o,a),children:!o&&(a??/* @__PURE__ */ d(s,{}))})}function NumberFieldInput({id:e,className:r,size:i,...a}){let o=l(h);if(!o)throw Error(`NumberFieldInput must be used within a NumberField component.`);let s=i??o.size;return/* @__PURE__ */ d(m.Input,{id:e??o.fieldId,"aria-invalid":o.invalid,className:e=>t(v({size:s}),n(r,e)),"data-slot":`number-field-input`,...a})}function NumberFieldScrubArea({className:e,label:i,...a}){let o=l(h);if(!o)throw Error(`NumberFieldScrubArea must be used within a NumberField component for accessibility.`);return/* @__PURE__ */ f(m.ScrubArea,{className:r=>t(`flex cursor-ew-resize`,n(e,r)),"data-slot":`number-field-scrub-area`,...a,children:[/* @__PURE__ */ d(r,{className:`cursor-ew-resize`,htmlFor:o.fieldId,children:i}),/* @__PURE__ */ d(m.ScrubAreaCursor,{className:`drop-shadow-[0_1px_1px_#0008] filter`,children:/* @__PURE__ */ d(CursorGrowIcon,{})})]})}function CursorGrowIcon(e){return/* @__PURE__ */ d(`svg`,{"aria-hidden":`true`,fill:`black`,height:`14`,stroke:`white`,viewBox:`0 0 24 14`,width:`26`,xmlns:`http://www.w3.org/2000/svg`,...e,children:/* @__PURE__ */ d(`path`,{d:`M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z`})})}export{NumberField,NumberFieldDecrement,NumberFieldGroup,NumberFieldIncrement,NumberFieldInput,NumberFieldScrubArea};
 //# sourceMappingURL=number-field.js.map

package/dist/components/number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","names":["NumberFieldPrimitive","NumberField$1","NumberFieldContext","createContext","numberFieldGroupVariants","cva","numberFieldButtonVariants","numberFieldInputVariants","props","generatedId","useId","fieldId","useFieldControlId","id","sizeValue","size","cn","className","sizeProp","context","useContext","children","IconMinus","IconPlus","Label","label"],"sources":["../../src/components/number-field.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useId } from 'react'\n\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field'\nimport { IconMinus, IconPlus } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '../lib/utils'\nimport { useFieldControlId } from './field'\nimport { Label } from './label'\n\nconst NumberFieldContext = createContext<{\n  fieldId: string\n  size: 'sm' | 'md' | 'lg'\n} | null>(null)\n\nconst numberFieldGroupVariants = cva(\n  'relative flex w-full justify-between border border-input data-disabled:pointer-events-none data-disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-within:has-aria-invalid:border-destructive focus-within:has-aria-invalid:ring-destructive/20 dark:focus-within:has-aria-invalid:ring-destructive/40 rounded-lg bg-transparent dark:bg-input/30 transition-colors focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-3',\n  {\n    variants: {\n      size: {\n        sm: 'h-7 text-sm',\n        md: 'h-8 text-sm',\n        lg: 'h-9 text-sm'\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  }\n)\n\nconst numberFieldButtonVariants = cva(\n  'relative flex shrink-0 cursor-pointer items-center justify-center transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent',\n  {\n    variants: {\n      size: {\n        sm: \"px-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        md: \"px-2 [&_svg:not([class*='size-'])]:size-4\",\n        lg: \"px-2.5 [&_svg:not([class*='size-'])]:size-4\"\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  }\n)\n\nconst numberFieldInputVariants = cva('w-full min-w-0 flex-1 bg-transparent text-center tabular-nums outline-none', {\n  variants: {\n    size: {\n      sm: 'px-2 py-0.5',\n      md: 'px-2.5 py-1',\n      lg: 'px-2.5 py-1.5'\n    }\n  },\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\nexport type NumberFieldProps = NumberFieldPrimitive.Root.Props & VariantProps<typeof numberFieldGroupVariants>\n\nfunction NumberField({ id, className, size = 'md', ...props }: NumberFieldProps) {\n  const generatedId = useId()\n  const fieldControlId = useFieldControlId(id)\n  const fieldId = fieldControlId ?? generatedId\n  const sizeValue = size ?? 'md'\n\n  return (\n    <NumberFieldContext.Provider value={{ fieldId, size: sizeValue }}>\n      <NumberFieldPrimitive.Root\n        className={cn('flex w-full flex-col items-start gap-2', className)}\n        data-size={sizeValue}\n        data-slot=\"number-field\"\n        {...props}\n      />\n    </NumberFieldContext.Provider>\n  )\n}\n\nexport type NumberFieldGroupProps = NumberFieldPrimitive.Group.Props &\n  Partial<VariantProps<typeof numberFieldGroupVariants>>\n\nfunction NumberFieldGroup({ className, size: sizeProp, ...props }: NumberFieldGroupProps) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error('NumberFieldGroup must be used within a NumberField component.')\n  }\n  const size = sizeProp ?? context.size\n\n  return (\n    <NumberFieldPrimitive.Group\n      className={cn(numberFieldGroupVariants({ size }), className)}\n      data-slot=\"number-field-group\"\n      {...props}\n    />\n  )\n}\n\nexport type NumberFieldDecrementProps = NumberFieldPrimitive.Decrement.Props &\n  Partial<VariantProps<typeof numberFieldButtonVariants>> & {\n    children?: React.ReactNode\n  }\n\nfunction NumberFieldDecrement({ className, size: sizeProp, children, ...props }: NumberFieldDecrementProps) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error('NumberFieldDecrement must be used within a NumberField component.')\n  }\n  const size = sizeProp ?? context.size\n\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cn(numberFieldButtonVariants({ size }), 'rounded-s-lg border-e-0', className)}\n      data-slot=\"number-field-decrement\"\n      {...props}\n    >\n      {children ?? <IconMinus />}\n    </NumberFieldPrimitive.Decrement>\n  )\n}\n\nexport type NumberFieldIncrementProps = NumberFieldPrimitive.Increment.Props &\n  Partial<VariantProps<typeof numberFieldButtonVariants>> & {\n    children?: ReactNode\n  }\n\nfunction NumberFieldIncrement({ className, size: sizeProp, children, ...props }: NumberFieldIncrementProps) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error('NumberFieldIncrement must be used within a NumberField component.')\n  }\n  const size = sizeProp ?? context.size\n\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cn(numberFieldButtonVariants({ size }), 'rounded-e-lg border-s-0', className)}\n      data-slot=\"number-field-increment\"\n      {...props}\n    >\n      {children ?? <IconPlus />}\n    </NumberFieldPrimitive.Increment>\n  )\n}\n\nexport type NumberFieldInputProps = NumberFieldPrimitive.Input.Props &\n  Partial<VariantProps<typeof numberFieldInputVariants>>\n\nfunction NumberFieldInput({ id, className, size: sizeProp, ...props }: NumberFieldInputProps) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error('NumberFieldInput must be used within a NumberField component.')\n  }\n  const size = sizeProp ?? context.size\n\n  return (\n    <NumberFieldPrimitive.Input\n      id={id ?? context.fieldId}\n      className={cn(numberFieldInputVariants({ size }), className)}\n      data-slot=\"number-field-input\"\n      {...props}\n    />\n  )\n}\n\nexport type NumberFieldScrubAreaProps = NumberFieldPrimitive.ScrubArea.Props & {\n  label: string\n}\n\nfunction NumberFieldScrubArea({ className, label, ...props }: NumberFieldScrubAreaProps) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error('NumberFieldScrubArea must be used within a NumberField component for accessibility.')\n  }\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cn('flex cursor-ew-resize', className)}\n      data-slot=\"number-field-scrub-area\"\n      {...props}\n    >\n      <Label className=\"cursor-ew-resize\" htmlFor={context.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  )\n}\n\nfunction CursorGrowIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  )\n}\n\nexport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea\n}\n"],"mappings":"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"}
+{"version":3,"file":"number-field.js","names":["NumberFieldPrimitive","resolveClassName","NumberField$1","NumberFieldContext","createContext","numberFieldGroupVariants","cva","numberFieldButtonVariants","numberFieldInputVariants","ariaInvalid","props","generatedId","useId","fieldControlId","useFieldControlId","id","invalid","useFieldInvalid","fieldId","sizeValue","size","cn","className","state","sizeProp","context","useContext","toAsChildRenderProps","asChild","children","IconMinus","IconPlus","Label","label"],"sources":["../../src/components/number-field.tsx"],"sourcesContent":["import type * as React from 'react'\nimport { createContext, type ReactNode, useContext, useId } from 'react'\n\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field'\nimport { IconMinus, IconPlus } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { type AsChildPrimitiveProps, toAsChildRenderProps } from '../lib/as-child'\nimport { cn } from '../lib/utils'\nimport { resolveClassName } from '../utils/resolve-class-name'\nimport { useFieldControlId, useFieldInvalid } from './field'\nimport { Label } from './label'\n\nconst NumberFieldContext = createContext<{\n  fieldId: string\n  size: 'sm' | 'md' | 'lg'\n  invalid: React.AriaAttributes['aria-invalid']\n} | null>(null)\n\nconst numberFieldGroupVariants = cva(\n  [\n    'relative flex w-full justify-between rounded-lg border border-input bg-transparent transition-colors dark:bg-input/30',\n    'data-disabled:pointer-events-none data-disabled:opacity-50',\n    'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50',\n    'has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40'\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-7 text-sm',\n        md: 'h-8 text-sm',\n        lg: 'h-9 text-sm'\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  }\n)\n\nconst numberFieldButtonVariants = cva(\n  'relative flex shrink-0 cursor-pointer items-center justify-center transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent',\n  {\n    variants: {\n      size: {\n        sm: \"px-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        md: \"px-2 [&_svg:not([class*='size-'])]:size-4\",\n        lg: \"px-2.5 [&_svg:not([class*='size-'])]:size-4\"\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  }\n)\n\nconst numberFieldInputVariants = cva('w-full min-w-0 flex-1 bg-transparent text-center tabular-nums outline-none', {\n  variants: {\n    size: {\n      sm: 'px-2 py-0.5',\n      md: 'px-2.5 py-1',\n      lg: 'px-2.5 py-1.5'\n    }\n  },\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\nexport type NumberFieldProps = Omit<NumberFieldPrimitive.Root.Props, 'render'> &\n  VariantProps<typeof numberFieldGroupVariants>\n\nfunction NumberField({ id, className, size = 'md', 'aria-invalid': ariaInvalid, ...props }: NumberFieldProps) {\n  const generatedId = useId()\n  const fieldControlId = useFieldControlId(id)\n  const invalid = useFieldInvalid(ariaInvalid)\n  const fieldId = fieldControlId ?? generatedId\n  const sizeValue = size ?? 'md'\n\n  return (\n    <NumberFieldContext.Provider value={{ fieldId, size: sizeValue, invalid }}>\n      <NumberFieldPrimitive.Root\n        className={(state) => cn('flex w-full flex-col items-start gap-2', resolveClassName(className, state))}\n        data-size={sizeValue}\n        data-slot=\"number-field\"\n        {...props}\n      />\n    </NumberFieldContext.Provider>\n  )\n}\n\nexport type NumberFieldGroupProps = AsChildPrimitiveProps<typeof NumberFieldPrimitive.Group> &\n  Partial<VariantProps<typeof numberFieldGroupVariants>>\n\nfunction NumberFieldGroup({ className, size: sizeProp, asChild, children, ...props }: NumberFieldGroupProps) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error('NumberFieldGroup must be used within a NumberField component.')\n  }\n  const size = sizeProp ?? context.size\n\n  return (\n    <NumberFieldPrimitive.Group\n      className={(state) => cn(numberFieldGroupVariants({ size }), resolveClassName(className, state))}\n      data-slot=\"number-field-group\"\n      {...props}\n      {...toAsChildRenderProps(asChild, children)}\n    />\n  )\n}\n\nexport type NumberFieldDecrementProps = AsChildPrimitiveProps<typeof NumberFieldPrimitive.Decrement> &\n  Partial<VariantProps<typeof numberFieldButtonVariants>> & {\n    /** Replaces the default minus icon. */\n    children?: React.ReactNode\n  }\n\nfunction NumberFieldDecrement({ className, size: sizeProp, children, asChild, ...props }: NumberFieldDecrementProps) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error('NumberFieldDecrement must be used within a NumberField component.')\n  }\n  const size = sizeProp ?? context.size\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={(state) =>\n        cn(numberFieldButtonVariants({ size }), 'rounded-s-lg border-e-0', resolveClassName(className, state))\n      }\n      data-slot=\"number-field-decrement\"\n      {...props}\n      {...toAsChildRenderProps(asChild, children)}\n    >\n      {!asChild && (children ?? <IconMinus />)}\n    </NumberFieldPrimitive.Decrement>\n  )\n}\n\nexport type NumberFieldIncrementProps = AsChildPrimitiveProps<typeof NumberFieldPrimitive.Increment> &\n  Partial<VariantProps<typeof numberFieldButtonVariants>> & {\n    /** Replaces the default plus icon. */\n    children?: ReactNode\n  }\n\nfunction NumberFieldIncrement({ className, size: sizeProp, children, asChild, ...props }: NumberFieldIncrementProps) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error('NumberFieldIncrement must be used within a NumberField component.')\n  }\n  const size = sizeProp ?? context.size\n  return (\n    <NumberFieldPrimitive.Increment\n      className={(state) =>\n        cn(numberFieldButtonVariants({ size }), 'rounded-e-lg border-s-0', resolveClassName(className, state))\n      }\n      data-slot=\"number-field-increment\"\n      {...props}\n      {...toAsChildRenderProps(asChild, children)}\n    >\n      {!asChild && (children ?? <IconPlus />)}\n    </NumberFieldPrimitive.Increment>\n  )\n}\n\nexport type NumberFieldInputProps = Omit<NumberFieldPrimitive.Input.Props, 'render'> &\n  Partial<VariantProps<typeof numberFieldInputVariants>>\n\nfunction NumberFieldInput({ id, className, size: sizeProp, ...props }: NumberFieldInputProps) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error('NumberFieldInput must be used within a NumberField component.')\n  }\n  const size = sizeProp ?? context.size\n\n  return (\n    <NumberFieldPrimitive.Input\n      id={id ?? context.fieldId}\n      aria-invalid={context.invalid}\n      className={(state) => cn(numberFieldInputVariants({ size }), resolveClassName(className, state))}\n      data-slot=\"number-field-input\"\n      {...props}\n    />\n  )\n}\n\nexport type NumberFieldScrubAreaProps = Omit<React.ComponentProps<typeof NumberFieldPrimitive.ScrubArea>, 'render'> & {\n  /** Visible label; dragging it changes the value. */\n  label: string\n}\n\nfunction NumberFieldScrubArea({ className, label, ...props }: NumberFieldScrubAreaProps) {\n  const context = useContext(NumberFieldContext)\n  if (!context) {\n    throw new Error('NumberFieldScrubArea must be used within a NumberField component for accessibility.')\n  }\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={(state) => cn('flex cursor-ew-resize', resolveClassName(className, state))}\n      data-slot=\"number-field-scrub-area\"\n      {...props}\n    >\n      <Label className=\"cursor-ew-resize\" htmlFor={context.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  )\n}\n\nfunction CursorGrowIcon(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  )\n}\n\nexport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea\n}\n"],"mappings":"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"}

package/dist/components/pagination.d.ts

@@ -6,12 +6,21 @@ export type PaginationProps = React.ComponentProps<'nav'> & Pick<React.Component
 export type PaginationContentProps = React.ComponentProps<'ul'>;
 export type PaginationItemProps = React.ComponentProps<'li'>;
 export type PaginationLinkProps = {
+  /** Marks the link as the current page. */
   isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, 'size' | 'color'> & React.ComponentProps<'a'>;
 export type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink> & {
+  /**
+   * Label next to the arrow, shown from `sm` up.
+   * @default ''
+   */
   text?: string;
 };
 export type PaginationNextProps = React.ComponentProps<typeof PaginationLink> & {
+  /**
+   * Label next to the arrow, shown from `sm` up.
+   * @default ''
+   */
   text?: string;
 };
 export type PaginationEllipsisProps = React.ComponentProps<'span'>;

package/dist/components/pagination.js

@@ -1,2 +1,2 @@
-import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{IconChevronLeft as n,IconChevronRight as r,IconDots as i}from"@tabler/icons-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import*as s from"react";const c=s.createContext({color:`primary`});function Pagination({className:t,color:n,children:r,...i}){return/* @__PURE__ */ a(c.Provider,{value:{color:n},children:/* @__PURE__ */ a(`nav`,{"aria-label":`pagination`,"data-slot":`pagination`,"data-color":n,className:e(`mx-auto flex w-full justify-center`,t),...i,children:r})})}function PaginationContent({className:t,...n}){return/* @__PURE__ */ a(`ul`,{"data-slot":`pagination-content`,className:e(`flex items-center gap-0.5`,t),...n})}function PaginationItem({...e}){return/* @__PURE__ */ a(`li`,{"data-slot":`pagination-item`,...e})}function PaginationLink({className:n,isActive:r,size:i=`icon`,color:o=`primary`,...l}){let u=s.useContext(c);return/* @__PURE__ */ a(t,{asChild:!0,variant:r?`solid`:`secondary`,color:u.color||o,size:i,className:e(n),children:/* @__PURE__ */ a(`a`,{"aria-current":r?`page`:void 0,"data-slot":`pagination-link`,"data-active":r,...l})})}function PaginationPrevious({className:t,text:r=``,...i}){return/* @__PURE__ */ o(PaginationLink,{"aria-label":`Go to previous page`,size:r?`md`:`icon`,className:e(r&&`pl-1.5!`,t),...i,children:[/* @__PURE__ */ a(n,{"data-icon":`inline-start`}),r&&/* @__PURE__ */ a(`span`,{className:`hidden sm:block`,children:r})]})}function PaginationNext({className:t,text:n=``,...i}){return/* @__PURE__ */ o(PaginationLink,{"aria-label":`Go to next page`,size:n?`md`:`icon`,className:e(n&&`pr-1.5!`,t),...i,children:[n&&/* @__PURE__ */ a(`span`,{className:`hidden sm:block`,children:n}),/* @__PURE__ */ a(r,{"data-icon":`inline-end`})]})}function PaginationEllipsis({className:t,...n}){return/* @__PURE__ */ o(`span`,{"aria-hidden":!0,"data-slot":`pagination-ellipsis`,className:e(`flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4`,t),...n,children:[/* @__PURE__ */ a(i,{}),/* @__PURE__ */ a(`span`,{className:`sr-only`,children:`More pages`})]})}export{Pagination,PaginationContent,PaginationEllipsis,PaginationItem,PaginationLink,PaginationNext,PaginationPrevious};
+import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{IconChevronLeft as n,IconChevronRight as r,IconDots as i}from"@tabler/icons-react";import*as a from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=a.createContext({});function Pagination({className:t,color:n,children:r,...i}){return/* @__PURE__ */ o(c.Provider,{value:{color:n},children:/* @__PURE__ */ o(`nav`,{"aria-label":`pagination`,"data-slot":`pagination`,"data-color":n,className:e(`mx-auto flex w-full justify-center`,t),...i,children:r})})}function PaginationContent({className:t,...n}){return/* @__PURE__ */ o(`ul`,{"data-slot":`pagination-content`,className:e(`flex items-center gap-0.5`,t),...n})}function PaginationItem({...e}){return/* @__PURE__ */ o(`li`,{"data-slot":`pagination-item`,...e})}function PaginationLink({className:n,isActive:r,size:i=`icon`,color:s,...l}){let u=a.useContext(c);return/* @__PURE__ */ o(t,{asChild:!0,variant:r?`solid`:`secondary`,color:s??u.color??`primary`,size:i,className:e(n),children:/* @__PURE__ */ o(`a`,{"aria-current":r?`page`:void 0,"data-slot":`pagination-link`,"data-active":r,...l})})}function PaginationPrevious({className:t,text:r=``,...i}){return/* @__PURE__ */ s(PaginationLink,{"aria-label":`Go to previous page`,size:r?`md`:`icon`,className:e(r&&`pl-1.5!`,t),...i,children:[/* @__PURE__ */ o(n,{"data-icon":`inline-start`}),r&&/* @__PURE__ */ o(`span`,{className:`hidden sm:block`,children:r})]})}function PaginationNext({className:t,text:n=``,...i}){return/* @__PURE__ */ s(PaginationLink,{"aria-label":`Go to next page`,size:n?`md`:`icon`,className:e(n&&`pr-1.5!`,t),...i,children:[n&&/* @__PURE__ */ o(`span`,{className:`hidden sm:block`,children:n}),/* @__PURE__ */ o(r,{"data-icon":`inline-end`})]})}function PaginationEllipsis({className:t,...n}){return/* @__PURE__ */ s(`span`,{"aria-hidden":!0,"data-slot":`pagination-ellipsis`,className:e(`flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4`,t),...n,children:[/* @__PURE__ */ o(i,{}),/* @__PURE__ */ o(`span`,{className:`sr-only`,children:`More pages`})]})}export{Pagination,PaginationContent,PaginationEllipsis,PaginationItem,PaginationLink,PaginationNext,PaginationPrevious};
 //# sourceMappingURL=pagination.js.map

package/dist/components/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":["React","PaginationContext","props","color","cn","className","context","Button","isActive","text","IconChevronLeft","IconChevronRight","IconDots"],"sources":["../../src/components/pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconChevronLeft, IconChevronRight, IconDots } from '@tabler/icons-react'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\nconst PaginationContext = React.createContext<Pick<React.ComponentProps<typeof Button>, 'color'>>({\n  color: 'primary'\n})\n\nexport type PaginationProps = React.ComponentProps<'nav'> & Pick<React.ComponentProps<typeof Button>, 'color'>\n\nexport type PaginationContentProps = React.ComponentProps<'ul'>\n\nexport type PaginationItemProps = React.ComponentProps<'li'>\n\nexport type PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, 'size' | 'color'> &\n  React.ComponentProps<'a'>\n\nexport type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink> & {\n  text?: string\n}\n\nexport type PaginationNextProps = React.ComponentProps<typeof PaginationLink> & {\n  text?: string\n}\n\nexport type PaginationEllipsisProps = React.ComponentProps<'span'>\n\nfunction Pagination({ className, color, children, ...props }: PaginationProps) {\n  return (\n    <PaginationContext.Provider value={{ color }}>\n      <nav\n        aria-label=\"pagination\"\n        data-slot=\"pagination\"\n        data-color={color}\n        className={cn('mx-auto flex w-full justify-center', className)}\n        {...props}\n      >\n        {children}\n      </nav>\n    </PaginationContext.Provider>\n  )\n}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n  return <ul data-slot=\"pagination-content\" className={cn('flex items-center gap-0.5', className)} {...props} />\n}\n\nfunction PaginationItem({ ...props }: PaginationItemProps) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\nfunction PaginationLink({ className, isActive, size = 'icon', color = 'primary', ...props }: PaginationLinkProps) {\n  const context = React.useContext(PaginationContext)\n\n  return (\n    <Button\n      asChild\n      variant={isActive ? 'solid' : 'secondary'}\n      color={context.color || color}\n      size={size}\n      className={cn(className)}\n    >\n      <a aria-current={isActive ? 'page' : undefined} data-slot=\"pagination-link\" data-active={isActive} {...props} />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({ className, text = '', ...props }: PaginationPreviousProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size={text ? 'md' : 'icon'}\n      className={cn(text && 'pl-1.5!', className)}\n      {...props}\n    >\n      <IconChevronLeft data-icon=\"inline-start\" />\n      {text && <span className=\"hidden sm:block\">{text}</span>}\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({ className, text = '', ...props }: PaginationNextProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size={text ? 'md' : 'icon'}\n      className={cn(text && 'pr-1.5!', className)}\n      {...props}\n    >\n      {text && <span className=\"hidden sm:block\">{text}</span>}\n      <IconChevronRight data-icon=\"inline-end\" />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({ className, ...props }: PaginationEllipsisProps) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconDots />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious\n}\n"],"mappings":"sRAOA,MAAMC,EAAoBD,EAAM,cAAkE,CAChG,MAAO,SACT,CAAC,EAuBD,SAAS,WAAW,CAAE,YAAW,QAAO,WAAU,GAAGE,GAA0B,CAC7E,MACE,kBAACD,EAAkB,SAAnB,CAA4B,MAAO,CAAE,OAAM,EACzC,SAAA,kBAAC,MAAD,CACE,aAAW,aACX,YAAU,aACV,aAAYE,EACZ,UAAWC,EAAG,qCAAsCC,CAAS,EAC7D,GAAIH,EAEH,UACE,CAAA,CACqB,CAAA,CAEhC,CAEA,SAAS,kBAAkB,CAAE,YAAW,GAAGA,GAAiC,CAC1E,MAAO,kBAAC,KAAD,CAAI,YAAU,qBAAqB,UAAWE,EAAG,4BAA6BC,CAAS,EAAG,GAAIH,CAAQ,CAAA,CAC/G,CAEA,SAAS,eAAe,CAAE,GAAGA,GAA8B,CACzD,MAAO,kBAAC,KAAD,CAAI,YAAU,kBAAkB,GAAIA,CAAQ,CAAA,CACrD,CAEA,SAAS,eAAe,CAAE,YAAW,WAAU,OAAO,OAAQ,QAAQ,UAAW,GAAGA,GAA8B,CAChH,IAAMI,EAAUN,EAAM,WAAWC,CAAiB,EAElD,MACE,kBAACM,EAAD,CACE,QAAA,GACA,QAASC,EAAW,QAAU,YAC9B,MAAOF,EAAQ,OAASH,EAClB,OACN,UAAWC,EAAGC,CAAS,EAEvB,SAAA,kBAAC,IAAD,CAAG,eAAcG,EAAW,OAAS,IAAA,GAAW,YAAU,kBAAkB,cAAaA,EAAU,GAAIN,CAAQ,CAAA,CACzG,CAAA,CAEZ,CAEA,SAAS,mBAAmB,CAAE,YAAW,OAAO,GAAI,GAAGA,GAAkC,CACvF,MACE,kBAAC,eAAD,CACE,aAAW,sBACX,KAAMO,EAAO,KAAO,OACpB,UAAWL,EAAGK,GAAQ,UAAWJ,CAAS,EAC1C,GAAIH,EAJN,SAAA,CAME,kBAACQ,EAAD,CAAiB,YAAU,cAAgB,CAAA,EAC1CD,GAAQ,kBAAC,OAAD,CAAM,UAAU,kBAAmB,SAAAA,CAAW,CAAA,CACzC,GAEpB,CAEA,SAAS,eAAe,CAAE,YAAW,OAAO,GAAI,GAAGP,GAA8B,CAC/E,MACE,kBAAC,eAAD,CACE,aAAW,kBACX,KAAMO,EAAO,KAAO,OACpB,UAAWL,EAAGK,GAAQ,UAAWJ,CAAS,EAC1C,GAAIH,EAJN,SAAA,CAMGO,GAAQ,kBAAC,OAAD,CAAM,UAAU,kBAAmB,SAAAA,CAAW,CAAA,EACvD,kBAACE,EAAD,CAAkB,YAAU,YAAc,CAAA,CAC5B,GAEpB,CAEA,SAAS,mBAAmB,CAAE,YAAW,GAAGT,GAAkC,CAC5E,MACE,kBAAC,OAAD,CACE,cAAA,GACA,YAAU,sBACV,UAAWE,EAAG,+EAAgFC,CAAS,EACvG,GAAIH,EAJN,SAAA,CAME,kBAACU,EAAD,CAAW,CAAA,EACX,kBAAC,OAAD,CAAM,UAAU,UAAU,SAAA,YAAgB,CAAA,CACtC,GAEV"}
+{"version":3,"file":"pagination.js","names":["React","PaginationContext","props","color","cn","className","context","Button","isActive","text","IconChevronLeft","IconChevronRight","IconDots"],"sources":["../../src/components/pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconChevronLeft, IconChevronRight, IconDots } from '@tabler/icons-react'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\nconst PaginationContext = React.createContext<Pick<React.ComponentProps<typeof Button>, 'color'>>({})\n\nexport type PaginationProps = React.ComponentProps<'nav'> & Pick<React.ComponentProps<typeof Button>, 'color'>\n\nexport type PaginationContentProps = React.ComponentProps<'ul'>\n\nexport type PaginationItemProps = React.ComponentProps<'li'>\n\nexport type PaginationLinkProps = {\n  /** Marks the link as the current page. */\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, 'size' | 'color'> &\n  React.ComponentProps<'a'>\n\nexport type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink> & {\n  /**\n   * Label next to the arrow, shown from `sm` up.\n   * @default ''\n   */\n  text?: string\n}\n\nexport type PaginationNextProps = React.ComponentProps<typeof PaginationLink> & {\n  /**\n   * Label next to the arrow, shown from `sm` up.\n   * @default ''\n   */\n  text?: string\n}\n\nexport type PaginationEllipsisProps = React.ComponentProps<'span'>\n\nfunction Pagination({ className, color, children, ...props }: PaginationProps) {\n  return (\n    <PaginationContext.Provider value={{ color }}>\n      <nav\n        aria-label=\"pagination\"\n        data-slot=\"pagination\"\n        data-color={color}\n        className={cn('mx-auto flex w-full justify-center', className)}\n        {...props}\n      >\n        {children}\n      </nav>\n    </PaginationContext.Provider>\n  )\n}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n  return <ul data-slot=\"pagination-content\" className={cn('flex items-center gap-0.5', className)} {...props} />\n}\n\nfunction PaginationItem({ ...props }: PaginationItemProps) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\nfunction PaginationLink({ className, isActive, size = 'icon', color, ...props }: PaginationLinkProps) {\n  const context = React.useContext(PaginationContext)\n\n  return (\n    <Button\n      asChild\n      variant={isActive ? 'solid' : 'secondary'}\n      color={color ?? context.color ?? 'primary'}\n      size={size}\n      className={cn(className)}\n    >\n      <a aria-current={isActive ? 'page' : undefined} data-slot=\"pagination-link\" data-active={isActive} {...props} />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({ className, text = '', ...props }: PaginationPreviousProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size={text ? 'md' : 'icon'}\n      className={cn(text && 'pl-1.5!', className)}\n      {...props}\n    >\n      <IconChevronLeft data-icon=\"inline-start\" />\n      {text && <span className=\"hidden sm:block\">{text}</span>}\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({ className, text = '', ...props }: PaginationNextProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size={text ? 'md' : 'icon'}\n      className={cn(text && 'pr-1.5!', className)}\n      {...props}\n    >\n      {text && <span className=\"hidden sm:block\">{text}</span>}\n      <IconChevronRight data-icon=\"inline-end\" />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({ className, ...props }: PaginationEllipsisProps) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconDots />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious\n}\n"],"mappings":"sRAOA,MAAMC,EAAoBD,EAAM,cAAkE,CAAC,CAAC,EAgCpG,SAAS,WAAW,CAAE,YAAW,QAAO,WAAU,GAAGE,GAA0B,CAC7E,MACE,kBAACD,EAAkB,SAAnB,CAA4B,MAAO,CAAE,OAAM,EACzC,SAAA,kBAAC,MAAD,CACE,aAAW,aACX,YAAU,aACV,aAAYE,EACZ,UAAWC,EAAG,qCAAsCC,CAAS,EAC7D,GAAIH,EAEH,UACE,CAAA,CACqB,CAAA,CAEhC,CAEA,SAAS,kBAAkB,CAAE,YAAW,GAAGA,GAAiC,CAC1E,MAAO,kBAAC,KAAD,CAAI,YAAU,qBAAqB,UAAWE,EAAG,4BAA6BC,CAAS,EAAG,GAAIH,CAAQ,CAAA,CAC/G,CAEA,SAAS,eAAe,CAAE,GAAGA,GAA8B,CACzD,MAAO,kBAAC,KAAD,CAAI,YAAU,kBAAkB,GAAIA,CAAQ,CAAA,CACrD,CAEA,SAAS,eAAe,CAAE,YAAW,WAAU,OAAO,OAAQ,QAAO,GAAGA,GAA8B,CACpG,IAAMI,EAAUN,EAAM,WAAWC,CAAiB,EAElD,MACE,kBAACM,EAAD,CACE,QAAA,GACA,QAASC,EAAW,QAAU,YAC9B,MAAOL,GAASG,EAAQ,OAAS,UAC3B,OACN,UAAWF,EAAGC,CAAS,EAEvB,SAAA,kBAAC,IAAD,CAAG,eAAcG,EAAW,OAAS,IAAA,GAAW,YAAU,kBAAkB,cAAaA,EAAU,GAAIN,CAAQ,CAAA,CACzG,CAAA,CAEZ,CAEA,SAAS,mBAAmB,CAAE,YAAW,OAAO,GAAI,GAAGA,GAAkC,CACvF,MACE,kBAAC,eAAD,CACE,aAAW,sBACX,KAAMO,EAAO,KAAO,OACpB,UAAWL,EAAGK,GAAQ,UAAWJ,CAAS,EAC1C,GAAIH,EAJN,SAAA,CAME,kBAACQ,EAAD,CAAiB,YAAU,cAAgB,CAAA,EAC1CD,GAAQ,kBAAC,OAAD,CAAM,UAAU,kBAAmB,SAAAA,CAAW,CAAA,CACzC,GAEpB,CAEA,SAAS,eAAe,CAAE,YAAW,OAAO,GAAI,GAAGP,GAA8B,CAC/E,MACE,kBAAC,eAAD,CACE,aAAW,kBACX,KAAMO,EAAO,KAAO,OACpB,UAAWL,EAAGK,GAAQ,UAAWJ,CAAS,EAC1C,GAAIH,EAJN,SAAA,CAMGO,GAAQ,kBAAC,OAAD,CAAM,UAAU,kBAAmB,SAAAA,CAAW,CAAA,EACvD,kBAACE,EAAD,CAAkB,YAAU,YAAc,CAAA,CAC5B,GAEpB,CAEA,SAAS,mBAAmB,CAAE,YAAW,GAAGT,GAAkC,CAC5E,MACE,kBAAC,OAAD,CACE,cAAA,GACA,YAAU,sBACV,UAAWE,EAAG,+EAAgFC,CAAS,EACvG,GAAIH,EAJN,SAAA,CAME,kBAACU,EAAD,CAAW,CAAA,EACX,kBAAC,OAAD,CAAM,UAAU,UAAU,SAAA,YAAgB,CAAA,CACtC,GAEV"}

package/dist/components/phone-input.d.ts

@@ -3,8 +3,11 @@ import { ComponentProps } from "react";
 import * as BasePhoneInput from "react-phone-number-input";
 //#region src/components/phone-input.d.ts
 export type PhoneInputProps = Omit<ComponentProps<'input'>, 'onChange' | 'value' | 'ref'> & Omit<BasePhoneInput.Props<typeof BasePhoneInput.default>, 'onChange' | 'popupClassName' | 'scrollAreaClassName'> & {
+  /** Called with the number in E.164 format, or an empty string when the input is cleared. */
   onChange?: (value: BasePhoneInput.Value) => void;
+  /** Classes for the country list popup. */
   popupClassName?: string;
+  /** Classes for the scrollable area of the country list. */
   scrollAreaClassName?: string;
 };
 export type PhoneInputValue = BasePhoneInput.Value;

package/dist/components/phone-input.js

@@ -1,2 +1,2 @@
-import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{Input as n}from"./input.js";import{Combobox as r,ComboboxContent as i,ComboboxEmpty as a,ComboboxInput as o,ComboboxItem as s,ComboboxList as c,ComboboxSeparator as l,ComboboxTrigger as u,ComboboxValue as d}from"./combobox.js";import{ScrollArea as f}from"./scroll-area.js";import{IconWorld as p}from"@tabler/icons-react";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{createContext as g,useContext as _,useMemo as v,useState as y}from"react";import*as b from"react-phone-number-input";import x from"react-phone-number-input/flags";const S=g({popupClassName:void 0,scrollAreaClassName:void 0});function PhoneInput({className:t,popupClassName:n,scrollAreaClassName:r,onChange:i,value:a,...o}){return/* @__PURE__ */ m(S.Provider,{value:{popupClassName:n,scrollAreaClassName:r},children:/* @__PURE__ */ m(b.default,{className:e(`flex`,o[`aria-invalid`]&&`[&_*[data-slot=combobox-trigger]]:border-destructive [&_*[data-slot=combobox-trigger]]:ring-destructive/50`,t),flagComponent:FlagComponent,countrySelectComponent:CountrySelect,inputComponent:InputComponent,smartCaret:!1,defaultCountry:`BR`,value:a||void 0,onChange:e=>i?.(e||``),...o})})}function InputComponent({className:t,...r}){return/* @__PURE__ */ m(n,{className:e(`rounded-s-none focus:z-1`,t),...r})}function CountrySelect({disabled:n,value:p,options:g,onChange:x}){let{popupClassName:C}=_(S),[w,T]=y(``),E=v(()=>w?g.filter(({label:e})=>e.toLowerCase().includes(w.toLowerCase())):g,[g,w]);return/* @__PURE__ */ h(r,{items:E,value:p||``,onValueChange:e=>{e&&x(e)},children:[/* @__PURE__ */ m(u,{render:/* @__PURE__ */ h(t,{variant:`outline`,color:`zinc`,className:e(`flex h-8 items-center gap-1 rounded-s-lg rounded-e-none border-e-0 border-input px-2.5 py-0 leading-none dark:bg-input/30`,`hover:bg-transparent focus:z-10 data-pressed:bg-transparent`,n&&`opacity-50`),disabled:n,children:[/* @__PURE__ */ m(`span`,{className:`sr-only`,children:/* @__PURE__ */ m(d,{})}),/* @__PURE__ */ m(FlagComponent,{country:p,countryName:p})]})}),/* @__PURE__ */ h(i,{className:e(`w-xs *:data-[slot=input-group]:bg-transparent`,C),children:[/* @__PURE__ */ m(o,{placeholder:`e.g. United States`,value:w,onChange:e=>T(e.target.value),showTrigger:!1,className:`border-input focus-visible:border-border rounded-none border-0 px-0 py-2.5 shadow-none ring-0! outline-none! focus-visible:ring-0 focus-visible:ring-offset-0`}),/* @__PURE__ */ m(l,{}),/* @__PURE__ */ m(a,{className:`px-4 py-2.5 text-sm`,children:`Nenhum país encontrado.`}),/* @__PURE__ */ m(c,{children:/* @__PURE__ */ m(`div`,{className:`relative flex max-h-full`,children:/* @__PURE__ */ m(`div`,{className:`flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain`,children:/* @__PURE__ */ m(f,{className:`size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 **:data-[slot=scroll-area-viewport]:h-full **:data-[slot=scroll-area-viewport]:overscroll-contain`,children:E.map(e=>e.value?/* @__PURE__ */ h(s,{value:e.value,className:`flex items-center gap-2`,children:[/* @__PURE__ */ m(FlagComponent,{country:e.value,countryName:e.label}),/* @__PURE__ */ m(`span`,{className:`flex-1 text-sm`,children:e.label}),/* @__PURE__ */ m(`span`,{className:`text-foreground/50 text-sm`,children:`+${b.getCountryCallingCode(e.value)}`})]},e.value):null)})})})})]})]})}function FlagComponent({country:e,countryName:t}){let n=x[e];return/* @__PURE__ */ m(`span`,{className:`flex h-4 w-4 items-center justify-center [&_svg:not([class*='size-'])]:size-full! [&_svg:not([class*='size-'])]:rounded-[5px]`,children:n?/* @__PURE__ */ m(n,{title:t}):/* @__PURE__ */ m(p,{className:`size-4 opacity-60`})})}export{PhoneInput};
+import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{useFieldInvalid as n}from"./field.js";import{Input as r}from"./input.js";import{Combobox as i,ComboboxContent as a,ComboboxEmpty as o,ComboboxInput as s,ComboboxItem as c,ComboboxList as l,ComboboxSeparator as u,ComboboxTrigger as d,ComboboxValue as f}from"./combobox.js";import{ScrollArea as p}from"./scroll-area.js";import{IconWorld as m}from"@tabler/icons-react";import{createContext as h,useContext as g,useMemo as _,useState as v}from"react";import{jsx as y,jsxs as b}from"react/jsx-runtime";import*as x from"react-phone-number-input";import S from"react-phone-number-input/flags";const C=h({popupClassName:void 0,scrollAreaClassName:void 0});function PhoneInput({className:t,popupClassName:r,scrollAreaClassName:i,onChange:a,value:o,...s}){let c=n(s[`aria-invalid`]);return/* @__PURE__ */ y(C.Provider,{value:{popupClassName:r,scrollAreaClassName:i},children:/* @__PURE__ */ y(x.default,{className:e(`flex`,c&&c!==`false`&&`[&_*[data-slot=combobox-trigger]]:border-destructive [&_*[data-slot=combobox-trigger]]:ring-destructive/50`,t),flagComponent:FlagComponent,countrySelectComponent:CountrySelect,inputComponent:InputComponent,smartCaret:!1,defaultCountry:`BR`,value:o||void 0,onChange:e=>a?.(e||``),...s})})}function InputComponent({className:t,...n}){return/* @__PURE__ */ y(r,{className:e(`rounded-s-none focus:z-1`,t),...n})}function CountrySelect({disabled:n,value:r,options:m,onChange:h}){let{popupClassName:S}=g(C),[w,T]=v(``),E=_(()=>w?m.filter(({label:e})=>e.toLowerCase().includes(w.toLowerCase())):m,[m,w]);return/* @__PURE__ */ b(i,{items:E,value:r||``,onValueChange:e=>{e&&h(e)},children:[/* @__PURE__ */ y(d,{asChild:!0,children:/* @__PURE__ */ b(t,{variant:`outline`,color:`zinc`,className:e(`flex h-8 items-center gap-1 rounded-s-lg rounded-e-none border-e-0 border-input px-2.5 py-0 leading-none dark:bg-input/30`,`hover:bg-transparent focus:z-10 data-pressed:bg-transparent`,n&&`opacity-50`),disabled:n,children:[/* @__PURE__ */ y(`span`,{className:`sr-only`,children:/* @__PURE__ */ y(f,{})}),/* @__PURE__ */ y(FlagComponent,{country:r,countryName:r})]})}),/* @__PURE__ */ b(a,{className:e(`w-xs *:data-[slot=input-group]:bg-transparent`,S),children:[/* @__PURE__ */ y(s,{placeholder:`e.g. United States`,value:w,onChange:e=>T(e.target.value),showTrigger:!1,className:`border-input focus-visible:border-border rounded-none border-0 px-0 py-2.5 shadow-none ring-0! outline-none! focus-visible:ring-0 focus-visible:ring-offset-0`}),/* @__PURE__ */ y(u,{}),/* @__PURE__ */ y(o,{className:`px-4 py-2.5 text-sm`,children:`Nenhum país encontrado.`}),/* @__PURE__ */ y(l,{className:`max-h-none overflow-visible`,children:/* @__PURE__ */ y(`div`,{className:`relative flex max-h-full`,children:/* @__PURE__ */ y(`div`,{className:`flex max-h-[min(calc(var(--available-height)-(--spacing(9))),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain`,children:/* @__PURE__ */ y(p,{className:`size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 **:data-[slot=scroll-area-viewport]:h-full **:data-[slot=scroll-area-viewport]:overscroll-contain`,children:E.map(e=>e.value?/* @__PURE__ */ b(c,{value:e.value,className:`flex items-center gap-2`,children:[/* @__PURE__ */ y(FlagComponent,{country:e.value,countryName:e.label}),/* @__PURE__ */ y(`span`,{className:`flex-1 text-sm`,children:e.label}),/* @__PURE__ */ y(`span`,{className:`text-foreground/50 text-sm`,children:`+${x.getCountryCallingCode(e.value)}`})]},e.value):null)})})})})]})]})}function FlagComponent({country:e,countryName:t}){let n=S[e];return/* @__PURE__ */ y(`span`,{className:`flex h-4 w-4 items-center justify-center [&_svg:not([class*='size-'])]:size-full! [&_svg:not([class*='size-'])]:rounded-[5px]`,children:n?/* @__PURE__ */ y(n,{title:t}):/* @__PURE__ */ y(m,{className:`size-4 opacity-60`})})}export{PhoneInput};
 //# sourceMappingURL=phone-input.js.map

package/dist/components/phone-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-input.js","names":["BasePhoneInput","flags","PhoneInputContext","createContext","props","cn","className","value","onChange","Input","selectedCountry","countryList","useContext","searchValue","setSearchValue","useState","filteredCountries","useMemo","label","Combobox","country","ComboboxTrigger","Button","disabled","ComboboxValue","ComboboxContent","popupClassName","ComboboxInput","ComboboxSeparator","ComboboxEmpty","ComboboxList","ScrollArea","item","ComboboxItem","Flag","countryName","IconWorld"],"sources":["../../src/components/phone-input.tsx"],"sourcesContent":["import { type ComponentProps, createContext, useContext, useMemo, useState } from 'react'\nimport * as BasePhoneInput from 'react-phone-number-input'\nimport flags from 'react-phone-number-input/flags'\n\nimport { IconWorld } from '@tabler/icons-react'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue\n} from './combobox'\nimport { Input } from './input'\nimport { ScrollArea } from './scroll-area'\n\nconst PhoneInputContext = createContext<{\n  popupClassName?: string\n  scrollAreaClassName?: string\n}>({\n  popupClassName: undefined,\n  scrollAreaClassName: undefined\n})\n\nexport type PhoneInputProps = Omit<ComponentProps<'input'>, 'onChange' | 'value' | 'ref'> &\n  Omit<BasePhoneInput.Props<typeof BasePhoneInput.default>, 'onChange' | 'popupClassName' | 'scrollAreaClassName'> & {\n    onChange?: (value: BasePhoneInput.Value) => void\n    popupClassName?: string\n    scrollAreaClassName?: string\n  }\n\nexport type PhoneInputValue = BasePhoneInput.Value\nexport type PhoneInputCountry = BasePhoneInput.Country\nexport type PhoneInputLabels = BasePhoneInput.Labels\n\nfunction PhoneInput({ className, popupClassName, scrollAreaClassName, onChange, value, ...props }: PhoneInputProps) {\n  return (\n    <PhoneInputContext.Provider value={{ popupClassName, scrollAreaClassName }}>\n      <BasePhoneInput.default\n        className={cn(\n          'flex',\n          props['aria-invalid'] &&\n            '[&_*[data-slot=combobox-trigger]]:border-destructive [&_*[data-slot=combobox-trigger]]:ring-destructive/50',\n          className\n        )}\n        flagComponent={FlagComponent}\n        countrySelectComponent={CountrySelect}\n        inputComponent={InputComponent}\n        smartCaret={false}\n        defaultCountry=\"BR\"\n        value={value || undefined}\n        onChange={(value) => onChange?.(value || ('' as BasePhoneInput.Value))}\n        {...props}\n      />\n    </PhoneInputContext.Provider>\n  )\n}\n\nfunction InputComponent({ className, ...props }: ComponentProps<typeof Input>) {\n  return <Input className={cn('rounded-s-none focus:z-1', className)} {...props} />\n}\n\ntype CountryEntry = { label: string; value: BasePhoneInput.Country | undefined }\n\ntype CountrySelectProps = {\n  disabled?: boolean\n  value: BasePhoneInput.Country\n  options: CountryEntry[]\n  onChange: (country: BasePhoneInput.Country) => void\n}\n\nfunction CountrySelect({ disabled, value: selectedCountry, options: countryList, onChange }: CountrySelectProps) {\n  const { popupClassName } = useContext(PhoneInputContext)\n  const [searchValue, setSearchValue] = useState('')\n\n  const filteredCountries = useMemo(() => {\n    if (!searchValue) return countryList\n    return countryList.filter(({ label }) => label.toLowerCase().includes(searchValue.toLowerCase()))\n  }, [countryList, searchValue])\n\n  return (\n    <Combobox\n      items={filteredCountries}\n      value={selectedCountry || ''}\n      onValueChange={(country: BasePhoneInput.Country | null) => {\n        if (country) {\n          onChange(country)\n        }\n      }}\n    >\n      <ComboboxTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            color=\"zinc\"\n            className={cn(\n              'flex h-8 items-center gap-1 rounded-s-lg rounded-e-none border-e-0 border-input px-2.5 py-0 leading-none dark:bg-input/30',\n              'hover:bg-transparent focus:z-10 data-pressed:bg-transparent',\n              disabled && 'opacity-50'\n            )}\n            disabled={disabled}\n          >\n            <span className=\"sr-only\">\n              <ComboboxValue />\n            </span>\n            <FlagComponent country={selectedCountry} countryName={selectedCountry} />\n          </Button>\n        }\n      />\n      <ComboboxContent className={cn('w-xs *:data-[slot=input-group]:bg-transparent', popupClassName)}>\n        <ComboboxInput\n          placeholder=\"e.g. United States\"\n          value={searchValue}\n          onChange={(e) => setSearchValue(e.target.value)}\n          showTrigger={false}\n          className=\"border-input focus-visible:border-border rounded-none border-0 px-0 py-2.5 shadow-none ring-0! outline-none! focus-visible:ring-0 focus-visible:ring-offset-0\"\n        />\n        <ComboboxSeparator />\n        <ComboboxEmpty className=\"px-4 py-2.5 text-sm\">Nenhum país encontrado.</ComboboxEmpty>\n        <ComboboxList>\n          <div className=\"relative flex max-h-full\">\n            <div className=\"flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain\">\n              <ScrollArea className=\"size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 **:data-[slot=scroll-area-viewport]:h-full **:data-[slot=scroll-area-viewport]:overscroll-contain\">\n                {filteredCountries.map((item: CountryEntry) =>\n                  item.value ? (\n                    <ComboboxItem key={item.value} value={item.value} className=\"flex items-center gap-2\">\n                      <FlagComponent country={item.value} countryName={item.label} />\n                      <span className=\"flex-1 text-sm\">{item.label}</span>\n                      <span className=\"text-foreground/50 text-sm\">\n                        {`+${BasePhoneInput.getCountryCallingCode(item.value)}`}\n                      </span>\n                    </ComboboxItem>\n                  ) : null\n                )}\n              </ScrollArea>\n            </div>\n          </div>\n        </ComboboxList>\n      </ComboboxContent>\n    </Combobox>\n  )\n}\n\nfunction FlagComponent({ country, countryName }: BasePhoneInput.FlagProps) {\n  const Flag = flags[country]\n\n  return (\n    <span className=\"flex h-4 w-4 items-center justify-center [&_svg:not([class*='size-'])]:size-full! [&_svg:not([class*='size-'])]:rounded-[5px]\">\n      {Flag ? <Flag title={countryName} /> : <IconWorld className=\"size-4 opacity-60\" />}\n    </span>\n  )\n}\n\nexport { PhoneInput }\n"],"mappings":"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"}
+{"version":3,"file":"phone-input.js","names":["BasePhoneInput","flags","PhoneInputContext","createContext","props","invalid","useFieldInvalid","cn","className","value","onChange","Input","selectedCountry","countryList","useContext","searchValue","setSearchValue","useState","filteredCountries","useMemo","label","Combobox","country","ComboboxTrigger","Button","disabled","ComboboxValue","ComboboxContent","popupClassName","ComboboxInput","ComboboxSeparator","ComboboxEmpty","ComboboxList","ScrollArea","item","ComboboxItem","Flag","countryName","IconWorld"],"sources":["../../src/components/phone-input.tsx"],"sourcesContent":["import { type ComponentProps, createContext, useContext, useMemo, useState } from 'react'\nimport * as BasePhoneInput from 'react-phone-number-input'\nimport flags from 'react-phone-number-input/flags'\n\nimport { IconWorld } from '@tabler/icons-react'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue\n} from './combobox'\nimport { useFieldInvalid } from './field'\nimport { Input } from './input'\nimport { ScrollArea } from './scroll-area'\n\nconst PhoneInputContext = createContext<{\n  popupClassName?: string\n  scrollAreaClassName?: string\n}>({\n  popupClassName: undefined,\n  scrollAreaClassName: undefined\n})\n\nexport type PhoneInputProps = Omit<ComponentProps<'input'>, 'onChange' | 'value' | 'ref'> &\n  Omit<BasePhoneInput.Props<typeof BasePhoneInput.default>, 'onChange' | 'popupClassName' | 'scrollAreaClassName'> & {\n    /** Called with the number in E.164 format, or an empty string when the input is cleared. */\n    onChange?: (value: BasePhoneInput.Value) => void\n    /** Classes for the country list popup. */\n    popupClassName?: string\n    /** Classes for the scrollable area of the country list. */\n    scrollAreaClassName?: string\n  }\n\nexport type PhoneInputValue = BasePhoneInput.Value\nexport type PhoneInputCountry = BasePhoneInput.Country\nexport type PhoneInputLabels = BasePhoneInput.Labels\n\nfunction PhoneInput({ className, popupClassName, scrollAreaClassName, onChange, value, ...props }: PhoneInputProps) {\n  const invalid = useFieldInvalid(props['aria-invalid'])\n\n  return (\n    <PhoneInputContext.Provider value={{ popupClassName, scrollAreaClassName }}>\n      <BasePhoneInput.default\n        className={cn(\n          'flex',\n          invalid &&\n            invalid !== 'false' &&\n            '[&_*[data-slot=combobox-trigger]]:border-destructive [&_*[data-slot=combobox-trigger]]:ring-destructive/50',\n          className\n        )}\n        flagComponent={FlagComponent}\n        countrySelectComponent={CountrySelect}\n        inputComponent={InputComponent}\n        smartCaret={false}\n        defaultCountry=\"BR\"\n        value={value || undefined}\n        onChange={(value) => onChange?.(value || ('' as BasePhoneInput.Value))}\n        {...props}\n      />\n    </PhoneInputContext.Provider>\n  )\n}\n\nfunction InputComponent({ className, ...props }: ComponentProps<typeof Input>) {\n  return <Input className={cn('rounded-s-none focus:z-1', className)} {...props} />\n}\n\ntype CountryEntry = { label: string; value: BasePhoneInput.Country | undefined }\n\ntype CountrySelectProps = {\n  disabled?: boolean\n  value: BasePhoneInput.Country\n  options: CountryEntry[]\n  onChange: (country: BasePhoneInput.Country) => void\n}\n\nfunction CountrySelect({ disabled, value: selectedCountry, options: countryList, onChange }: CountrySelectProps) {\n  const { popupClassName } = useContext(PhoneInputContext)\n  const [searchValue, setSearchValue] = useState('')\n\n  const filteredCountries = useMemo(() => {\n    if (!searchValue) return countryList\n    return countryList.filter(({ label }) => label.toLowerCase().includes(searchValue.toLowerCase()))\n  }, [countryList, searchValue])\n\n  return (\n    <Combobox\n      items={filteredCountries}\n      value={selectedCountry || ''}\n      onValueChange={(country: BasePhoneInput.Country | null) => {\n        if (country) {\n          onChange(country)\n        }\n      }}\n    >\n      <ComboboxTrigger asChild>\n        <Button\n          variant=\"outline\"\n          color=\"zinc\"\n          className={cn(\n            'flex h-8 items-center gap-1 rounded-s-lg rounded-e-none border-e-0 border-input px-2.5 py-0 leading-none dark:bg-input/30',\n            'hover:bg-transparent focus:z-10 data-pressed:bg-transparent',\n            disabled && 'opacity-50'\n          )}\n          disabled={disabled}\n        >\n          <span className=\"sr-only\">\n            <ComboboxValue />\n          </span>\n          <FlagComponent country={selectedCountry} countryName={selectedCountry} />\n        </Button>\n      </ComboboxTrigger>\n      <ComboboxContent className={cn('w-xs *:data-[slot=input-group]:bg-transparent', popupClassName)}>\n        <ComboboxInput\n          placeholder=\"e.g. United States\"\n          value={searchValue}\n          onChange={(e) => setSearchValue(e.target.value)}\n          showTrigger={false}\n          className=\"border-input focus-visible:border-border rounded-none border-0 px-0 py-2.5 shadow-none ring-0! outline-none! focus-visible:ring-0 focus-visible:ring-offset-0\"\n        />\n        <ComboboxSeparator />\n        <ComboboxEmpty className=\"px-4 py-2.5 text-sm\">Nenhum país encontrado.</ComboboxEmpty>\n        <ComboboxList className=\"max-h-none overflow-visible\">\n          <div className=\"relative flex max-h-full\">\n            <div className=\"flex max-h-[min(calc(var(--available-height)-(--spacing(9))),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain\">\n              <ScrollArea className=\"size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 **:data-[slot=scroll-area-viewport]:h-full **:data-[slot=scroll-area-viewport]:overscroll-contain\">\n                {filteredCountries.map((item: CountryEntry) =>\n                  item.value ? (\n                    <ComboboxItem key={item.value} value={item.value} className=\"flex items-center gap-2\">\n                      <FlagComponent country={item.value} countryName={item.label} />\n                      <span className=\"flex-1 text-sm\">{item.label}</span>\n                      <span className=\"text-foreground/50 text-sm\">\n                        {`+${BasePhoneInput.getCountryCallingCode(item.value)}`}\n                      </span>\n                    </ComboboxItem>\n                  ) : null\n                )}\n              </ScrollArea>\n            </div>\n          </div>\n        </ComboboxList>\n      </ComboboxContent>\n    </Combobox>\n  )\n}\n\nfunction FlagComponent({ country, countryName }: BasePhoneInput.FlagProps) {\n  const Flag = flags[country]\n\n  return (\n    <span className=\"flex h-4 w-4 items-center justify-center [&_svg:not([class*='size-'])]:size-full! [&_svg:not([class*='size-'])]:rounded-[5px]\">\n      {Flag ? <Flag title={countryName} /> : <IconWorld className=\"size-4 opacity-60\" />}\n    </span>\n  )\n}\n\nexport { PhoneInput }\n"],"mappings":"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"}

package/dist/components/pie-chart.d.ts

@@ -4,27 +4,80 @@ import * as React from "react";
 import { Pie } from "recharts";
 //#region src/components/pie-chart.d.ts
 export type PieChartDatum = {
+  /** Slice name, shown in the tooltip and legend. */
   name: string;
+  /** Slice value. */
   value: number;
+  /** Any CSS color. Wins over `colorKey`. */
   color?: string;
+  /** Palette family, resolved to its semantic color `var(--{key})`. */
   colorKey?: ChartColorKey;
 };
 export type PieChartProps = Omit<React.ComponentProps<'div'>, 'children'> & {
+  /** Slices to draw. */
   data: PieChartDatum[];
+  /**
+   * Shows a tooltip on hover.
+   * @default true
+   */
   withTooltip?: boolean;
+  /**
+   * Shows the legend.
+   * @default false
+   */
   withLegend?: boolean;
+  /**
+   * Shows the value of each slice.
+   * @default false
+   */
   withLabels?: boolean;
+  /**
+   * Where the labels go.
+   * @default 'outside'
+   */
   labelsPosition?: 'inside' | 'outside';
+  /**
+   * Angle where the first slice starts.
+   * @default 90
+   */
   startAngle?: number;
+  /**
+   * Angle where the last slice ends.
+   * @default -270
+   */
   endAngle?: number;
+  /**
+   * Space between slices, in degrees.
+   * @default 0
+   */
   paddingAngle?: number;
+  /**
+   * Width of the gap between slices.
+   * @default 1
+   */
   strokeWidth?: number;
+  /**
+   * Color of the gap between slices (palette family or CSS color).
+   * @default 'var(--background)'
+   */
   strokeColor?: ChartColorKey | string;
+  /**
+   * Inner radius; above `0` it becomes a ring.
+   * @default 0
+   */
   innerRadius?: number | string;
+  /**
+   * Outer radius (px or %).
+   * @default '80%'
+   */
   outerRadius?: number | string;
+  /** Animation length in ms. */
   animationDuration?: number;
+  /** Props for the tooltip content. */
   tooltipProps?: ChartTooltipContentProps;
+  /** Props for the legend content. */
   legendProps?: ChartLegendContentProps;
+  /** Props for the Recharts `<Pie>`. */
   pieProps?: Partial<React.ComponentProps<typeof Pie>>;
   children?: React.ReactNode;
 };

package/dist/components/pie-chart.js

@@ -1,2 +1,2 @@
-import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{ChartContainer as t,ChartLegendContent as n,ChartTooltipContent as r,DEFAULT_CHART_PALETTE as i,resolveChartColor as a}from"./chart.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";import*as c from"react";import{Legend as l,Pie as u,PieChart as d,Tooltip as f}from"recharts";function buildPieConfig(e){return e.reduce((e,t,n)=>(e[t.name]={label:t.name,color:t.color??a(t.colorKey)??i[n%i.length]},e),{})}function PieChartBase({className:i,data:p,withTooltip:m=!0,withLegend:h=!1,withLabels:g=!1,labelsPosition:_=`outside`,startAngle:v=90,endAngle:y=-270,paddingAngle:b=0,strokeWidth:x=1,strokeColor:S=`var(--background)`,innerRadius:C=0,outerRadius:w=`80%`,animationDuration:T,tooltipProps:E,legendProps:D,pieProps:O,dataSlot:k,centerSlot:A,...j}){let M=c.useMemo(()=>buildPieConfig(p),[p]),N=a(S)??S,P=c.useMemo(()=>p.map(e=>({...e,fill:M[e.name]?.color,stroke:N})),[p,N,M]);return/* @__PURE__ */ o(t,{"data-slot":k,className:e(`relative aspect-square w-full`,i),config:M,...j,children:/* @__PURE__ */ s(d,{children:[m&&/* @__PURE__ */ o(f,{cursor:!1,content:/* @__PURE__ */ o(r,{hideLabel:!0,...E})}),h&&/* @__PURE__ */ o(l,{content:/* @__PURE__ */ o(n,{nameKey:`name`,...D})}),/* @__PURE__ */ o(u,{data:P,dataKey:`value`,nameKey:`name`,startAngle:v,endAngle:y,innerRadius:C,outerRadius:w,paddingAngle:b,strokeWidth:x,label:g?{fontSize:12}:void 0,labelLine:g&&_===`outside`,animationDuration:T,isAnimationActive:T!==0,...O,children:A})]})})}function PieChart(e){return/* @__PURE__ */ o(PieChartBase,{...e,dataSlot:`pie-chart`})}export{PieChart,PieChartBase,buildPieConfig};
+import"../rolldown-runtime-BhWHdk3m.js";import{cn as e}from"../lib/utils.js";import{ChartContainer as t,ChartLegendContent as n,ChartTooltipContent as r,DEFAULT_CHART_PALETTE as i,resolveChartColor as a}from"./chart.js";import*as o from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{Legend as l,Pie as u,PieChart as d,Tooltip as f}from"recharts";function buildPieConfig(e){return e.reduce((e,t,n)=>(e[t.name]={label:t.name,color:t.color??a(t.colorKey)??i[n%i.length]},e),{})}function PieChartBase({className:i,data:p,withTooltip:m=!0,withLegend:h=!1,withLabels:g=!1,labelsPosition:_=`outside`,startAngle:v=90,endAngle:y=-270,paddingAngle:b=0,strokeWidth:x=1,strokeColor:S=`var(--background)`,innerRadius:C=0,outerRadius:w=`80%`,animationDuration:T,tooltipProps:E,legendProps:D,pieProps:O,dataSlot:k,centerSlot:A,...j}){let M=o.useMemo(()=>buildPieConfig(p),[p]),N=a(S)??S,P=o.useMemo(()=>p.map(e=>({...e,fill:M[e.name]?.color,stroke:N})),[p,N,M]);return/* @__PURE__ */ s(t,{"data-slot":k,className:e(`relative aspect-square w-full`,i),config:M,...j,children:/* @__PURE__ */ c(d,{children:[m&&/* @__PURE__ */ s(f,{cursor:!1,content:/* @__PURE__ */ s(r,{hideLabel:!0,...E})}),h&&/* @__PURE__ */ s(l,{content:/* @__PURE__ */ s(n,{nameKey:`name`,...D})}),/* @__PURE__ */ s(u,{data:P,dataKey:`value`,nameKey:`name`,startAngle:v,endAngle:y,innerRadius:C,outerRadius:w,paddingAngle:b,strokeWidth:x,label:g?_===`inside`?{position:`inside`,fontSize:12,fontWeight:500,fill:`var(--background)`}:{fontSize:12}:void 0,labelLine:g&&_===`outside`,animationDuration:T,isAnimationActive:T!==0,...O,children:A})]})})}function PieChart(e){return/* @__PURE__ */ s(PieChartBase,{...e,dataSlot:`pie-chart`})}export{PieChart,PieChartBase,buildPieConfig};
 //# sourceMappingURL=pie-chart.js.map