@cryptlex/web-components 6.5.0-alpha00 → 6.5.1

package/dist/components/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../lib/components/menu.tsx"],"sourcesContent":["import { VariantProps } from 'class-variance-authority';\nimport {\n    Header as AriaHeader,\n    Keyboard as AriaKeyboard,\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    MenuItemProps as AriaMenuItemProps,\n    MenuProps as AriaMenuProps,\n    MenuTrigger as AriaMenuTrigger,\n    MenuTriggerProps as AriaMenuTriggerProps,\n    Separator as AriaSeparator,\n    SeparatorProps as AriaSeparatorProps,\n    SubmenuTrigger as AriaSubmenuTrigger,\n    composeRenderProps,\n    PopoverProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utils/primitives';\n\nimport { Check, ChevronRight, Dot } from 'lucide-react';\nimport { Button, buttonVariants } from './button';\nimport { ListBoxCollection } from './list-box';\nimport { SelectPopover } from './select';\n\nexport const MenuTrigger = AriaMenuTrigger;\nexport const MenuSubTrigger = AriaSubmenuTrigger;\nexport const MenuCollection = ListBoxCollection;\n\nexport function MenuPopover({ className, ...props }: PopoverProps) {\n    return <SelectPopover className={composeRenderProps(className, className => classNames(className))} {...props} />;\n}\n\nexport function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {\n    return (\n        <AriaMenu\n            className={classNames(\n                'overflow-auto p-1 outline-0 [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]',\n                className\n            )}\n            escapeKeyBehavior=\"none\"\n            {...props}\n        />\n    );\n}\n\n// TODO standardize the styles on this component? This is the equivalent to a ghost button\nexport function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n    return (\n        <AriaMenuItem\n            textValue={props.textValue || (typeof children === 'string' ? children : undefined)}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'btn btn-ghost relative flex justify-start input-dim',\n                    /* Selection Mode */\n                    'data-[selection-mode]:pl-input',\n                    className\n                )\n            )}\n            {...props}\n        >\n            {composeRenderProps(children, (children, renderProps) => (\n                <>\n                    <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n                        {renderProps.isSelected && (\n                            <>\n                                {renderProps.selectionMode == 'single' && <Dot className=\"size-icon fill-current\" />}\n                                {renderProps.selectionMode == 'multiple' && <Check className=\"size-icon\" />}\n                            </>\n                        )}\n                    </span>\n\n                    {children}\n\n                    {renderProps.hasSubmenu && <ChevronRight className=\"ml-auto size-icon\" />}\n                </>\n            ))}\n        </AriaMenuItem>\n    );\n}\n\ninterface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {\n    inset?: boolean;\n    separator?: boolean;\n}\n\nexport function MenuHeader({ className, inset, separator = true, ...props }: MenuHeaderProps) {\n    return (\n        <AriaHeader\n            className={classNames(\n                'px-3 py-1.5 body font-semibold',\n                inset && 'pl-input',\n                separator && '-mx-1 mb-1 border-b border-b-border pb-2.5',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function MenuSeparator({ className, ...props }: AriaSeparatorProps) {\n    return <AriaSeparator className={classNames('-mx-1 my-1 h-px bg-muted', className)} {...props} />;\n}\n\nexport function MenuKeyboard({ className, ...props }: React.ComponentProps<typeof AriaKeyboard>) {\n    return <AriaKeyboard className={classNames('ml-auto body-sm tracking-widest opacity-60', className)} {...props} />;\n}\ninterface MenuProps<T>\n    extends AriaMenuProps<T>,\n        VariantProps<typeof buttonVariants>,\n        Omit<AriaMenuTriggerProps, 'children'> {\n    label?: React.ReactNode;\n    isDisabled?: boolean;\n    isNonModal?: boolean;\n}\n// TODO name this better\nexport function EasyMenu<T extends object>({\n    label,\n    children,\n    variant,\n    isDisabled,\n    size,\n    isNonModal,\n    ...props\n}: MenuProps<T>) {\n    return (\n        <MenuTrigger {...props}>\n            <Button isDisabled={isDisabled} type=\"button\" variant={variant} size={size}>\n                {label}\n            </Button>\n            <MenuPopover isNonModal={isNonModal} className=\"overflow-auto\">\n                <Menu {...props}>{children}</Menu>\n            </MenuPopover>\n        </MenuTrigger>\n    );\n}\n"],"names":["MenuTrigger","AriaMenuTrigger","MenuSubTrigger","AriaSubmenuTrigger","MenuCollection","ListBoxCollection","MenuPopover","className","props","jsx","SelectPopover","composeRenderProps","classNames","Menu","AriaMenu","MenuItem","children","AriaMenuItem","renderProps","jsxs","Fragment","Dot","Check","ChevronRight","MenuHeader","inset","separator","AriaHeader","MenuSeparator","AriaSeparator","MenuKeyboard","AriaKeyboard","EasyMenu","label","variant","isDisabled","size","isNonModal","Button"],"mappings":"6qBAwBO,MAAMA,EAAcC,EACdC,EAAiBC,EACjBC,EAAiBC,EAEvB,SAASC,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAAuB,CAC/D,OAAOC,EAACC,EAAA,CAAc,UAAWC,EAAmBJ,EAAWA,GAAaK,EAAWL,CAAS,CAAC,EAAI,GAAGC,CAAA,CAAO,CACnH,CAEO,SAASK,EAAuB,CAAE,UAAAN,EAAW,GAAGC,GAA2B,CAC9E,OACIC,EAACK,EAAA,CACG,UAAWF,EACP,uFACAL,CAAA,EAEJ,kBAAkB,OACjB,GAAGC,CAAA,CAAA,CAGhB,CAGO,SAASO,EAAS,CAAE,SAAAC,EAAU,UAAAT,EAAW,GAAGC,GAAkE,CACjH,OACIC,EAACQ,EAAA,CACG,UAAWT,EAAM,YAAc,OAAOQ,GAAa,SAAWA,EAAW,QACzE,UAAWL,EAAmBJ,EAAWA,GACrCK,EACI,sDAEA,iCACAL,CAAA,CACJ,EAEH,GAAGC,EAEH,SAAAG,EAAmBK,EAAU,CAACA,EAAUE,IACrCC,EAAAC,EAAA,CACI,SAAA,CAAAX,EAAC,OAAA,CAAK,UAAU,6DACX,SAAAS,EAAY,YACTC,EAAAC,EAAA,CACK,SAAA,CAAAF,EAAY,eAAiB,UAAYT,EAACY,EAAA,CAAI,UAAU,yBAAyB,EACjFH,EAAY,eAAiB,YAAcT,EAACa,EAAA,CAAM,UAAU,WAAA,CAAY,CAAA,CAAA,CAC7E,CAAA,CAER,EAECN,EAEAE,EAAY,YAAcT,EAACc,EAAA,CAAa,UAAU,mBAAA,CAAoB,CAAA,EAC3E,CACH,CAAA,CAAA,CAGb,CAOO,SAASC,EAAW,CAAE,UAAAjB,EAAW,MAAAkB,EAAO,UAAAC,EAAY,GAAM,GAAGlB,GAA0B,CAC1F,OACIC,EAACkB,EAAA,CACG,UAAWf,EACP,iCACAa,GAAS,WACTC,GAAa,6CACbnB,CAAA,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASoB,EAAc,CAAE,UAAArB,EAAW,GAAGC,GAA6B,CACvE,OAAOC,EAACoB,GAAc,UAAWjB,EAAW,2BAA4BL,CAAS,EAAI,GAAGC,EAAO,CACnG,CAEO,SAASsB,EAAa,CAAE,UAAAvB,EAAW,GAAGC,GAAoD,CAC7F,OAAOC,EAACsB,GAAa,UAAWnB,EAAW,6CAA8CL,CAAS,EAAI,GAAGC,EAAO,CACpH,CAUO,SAASwB,EAA2B,CACvC,MAAAC,EACA,SAAAjB,EACA,QAAAkB,EACA,WAAAC,EACA,KAAAC,EACA,WAAAC,EACA,GAAG7B,CACP,EAAiB,CACb,OACIW,EAACnB,EAAA,CAAa,GAAGQ,EACb,SAAA,CAAAC,EAAC6B,GAAO,WAAAH,EAAwB,KAAK,SAAS,QAAAD,EAAkB,KAAAE,EAC3D,SAAAH,EACL,EACAxB,EAACH,EAAA,CAAY,WAAA+B,EAAwB,UAAU,gBAC3C,WAACxB,EAAA,CAAM,GAAGL,EAAQ,SAAAQ,CAAA,CAAS,CAAA,CAC/B,CAAA,EACJ,CAER"}
+{"version":3,"file":"menu.js","sources":["../../lib/components/menu.tsx"],"sourcesContent":["import { VariantProps } from 'class-variance-authority';\nimport {\n    Header as AriaHeader,\n    Keyboard as AriaKeyboard,\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    MenuItemProps as AriaMenuItemProps,\n    MenuProps as AriaMenuProps,\n    MenuTrigger as AriaMenuTrigger,\n    MenuTriggerProps as AriaMenuTriggerProps,\n    Separator as AriaSeparator,\n    SeparatorProps as AriaSeparatorProps,\n    SubmenuTrigger as AriaSubmenuTrigger,\n    composeRenderProps,\n    PopoverProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utils/primitives';\n\nimport { Button, buttonVariants } from './button';\nimport { IcCheck, IcDot, IcRight } from './icons';\nimport { ListBoxCollection } from './list-box';\nimport { SelectPopover } from './select';\n\nexport const MenuTrigger = AriaMenuTrigger;\nexport const MenuSubTrigger = AriaSubmenuTrigger;\nexport const MenuCollection = ListBoxCollection;\n\nexport function MenuPopover({ className, ...props }: PopoverProps) {\n    return <SelectPopover className={composeRenderProps(className, className => classNames(className))} {...props} />;\n}\n\nexport function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {\n    return (\n        <AriaMenu\n            className={classNames('overflow-auto p-1 outline-0 body-base', className)}\n            escapeKeyBehavior=\"none\"\n            {...props}\n        />\n    );\n}\n\n// TODO standardize the styles on this component? This is the equivalent to a ghost button\nexport function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n    return (\n        <AriaMenuItem\n            textValue={props.textValue || (typeof children === 'string' ? children : undefined)}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'btn btn-ghost relative flex justify-start input-dim',\n                    /* Selection Mode */\n                    'data-[selection-mode]:pl-input',\n                    className\n                )\n            )}\n            {...props}\n        >\n            {composeRenderProps(children, (children, renderProps) => (\n                <>\n                    <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n                        {renderProps.isSelected && (\n                            <>\n                                {renderProps.selectionMode == 'single' && <IcDot className=\"size-icon fill-current\" />}\n                                {renderProps.selectionMode == 'multiple' && <IcCheck className=\"size-icon\" />}\n                            </>\n                        )}\n                    </span>\n\n                    {children}\n\n                    {renderProps.hasSubmenu && <IcRight className=\"ml-auto size-icon\" />}\n                </>\n            ))}\n        </AriaMenuItem>\n    );\n}\n\ninterface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {\n    inset?: boolean;\n    separator?: boolean;\n}\n\nexport function MenuHeader({ className, inset, separator = true, ...props }: MenuHeaderProps) {\n    return (\n        <AriaHeader\n            className={classNames(\n                'px-3 py-1.5 body font-semibold',\n                inset && 'pl-input',\n                separator && '-mx-1 mb-1 border-b border-b-border pb-2.5',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function MenuSeparator({ className, ...props }: AriaSeparatorProps) {\n    return <AriaSeparator className={classNames('-mx-1 my-1 h-px bg-muted', className)} {...props} />;\n}\n\nexport function MenuKeyboard({ className, ...props }: React.ComponentProps<typeof AriaKeyboard>) {\n    return <AriaKeyboard className={classNames('ml-auto body-sm tracking-widest opacity-60', className)} {...props} />;\n}\ninterface MenuProps<T>\n    extends AriaMenuProps<T>,\n        VariantProps<typeof buttonVariants>,\n        Omit<AriaMenuTriggerProps, 'children'> {\n    label?: React.ReactNode;\n    isDisabled?: boolean;\n    isNonModal?: boolean;\n}\n// TODO name this better\nexport function EasyMenu<T extends object>({\n    label,\n    children,\n    variant,\n    isDisabled,\n    size,\n    isNonModal,\n    ...props\n}: MenuProps<T>) {\n    return (\n        <MenuTrigger {...props}>\n            <Button isDisabled={isDisabled} type=\"button\" variant={variant} size={size}>\n                {label}\n            </Button>\n            <MenuPopover isNonModal={isNonModal} className=\"overflow-auto\">\n                <Menu {...props}>{children}</Menu>\n            </MenuPopover>\n        </MenuTrigger>\n    );\n}\n"],"names":["MenuTrigger","AriaMenuTrigger","MenuSubTrigger","AriaSubmenuTrigger","MenuCollection","ListBoxCollection","MenuPopover","className","props","jsx","SelectPopover","composeRenderProps","classNames","Menu","AriaMenu","MenuItem","children","AriaMenuItem","renderProps","jsxs","Fragment","IcDot","IcCheck","IcRight","MenuHeader","inset","separator","AriaHeader","MenuSeparator","AriaSeparator","MenuKeyboard","AriaKeyboard","EasyMenu","label","variant","isDisabled","size","isNonModal","Button"],"mappings":"4rBAwBO,MAAMA,EAAcC,EACdC,EAAiBC,EACjBC,EAAiBC,EAEvB,SAASC,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAAuB,CAC/D,OAAOC,EAACC,EAAA,CAAc,UAAWC,EAAmBJ,EAAWA,GAAaK,EAAWL,CAAS,CAAC,EAAI,GAAGC,CAAA,CAAO,CACnH,CAEO,SAASK,EAAuB,CAAE,UAAAN,EAAW,GAAGC,GAA2B,CAC9E,OACIC,EAACK,EAAA,CACG,UAAWF,EAAW,wCAAyCL,CAAS,EACxE,kBAAkB,OACjB,GAAGC,CAAA,CAAA,CAGhB,CAGO,SAASO,EAAS,CAAE,SAAAC,EAAU,UAAAT,EAAW,GAAGC,GAAkE,CACjH,OACIC,EAACQ,EAAA,CACG,UAAWT,EAAM,YAAc,OAAOQ,GAAa,SAAWA,EAAW,QACzE,UAAWL,EAAmBJ,EAAWA,GACrCK,EACI,sDAEA,iCACAL,CAAA,CACJ,EAEH,GAAGC,EAEH,SAAAG,EAAmBK,EAAU,CAACA,EAAUE,IACrCC,EAAAC,EAAA,CACI,SAAA,CAAAX,EAAC,OAAA,CAAK,UAAU,6DACX,SAAAS,EAAY,YACTC,EAAAC,EAAA,CACK,SAAA,CAAAF,EAAY,eAAiB,UAAYT,EAACY,EAAA,CAAM,UAAU,yBAAyB,EACnFH,EAAY,eAAiB,YAAcT,EAACa,EAAA,CAAQ,UAAU,WAAA,CAAY,CAAA,CAAA,CAC/E,CAAA,CAER,EAECN,EAEAE,EAAY,YAAcT,EAACc,EAAA,CAAQ,UAAU,mBAAA,CAAoB,CAAA,EACtE,CACH,CAAA,CAAA,CAGb,CAOO,SAASC,EAAW,CAAE,UAAAjB,EAAW,MAAAkB,EAAO,UAAAC,EAAY,GAAM,GAAGlB,GAA0B,CAC1F,OACIC,EAACkB,EAAA,CACG,UAAWf,EACP,iCACAa,GAAS,WACTC,GAAa,6CACbnB,CAAA,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASoB,EAAc,CAAE,UAAArB,EAAW,GAAGC,GAA6B,CACvE,OAAOC,EAACoB,GAAc,UAAWjB,EAAW,2BAA4BL,CAAS,EAAI,GAAGC,EAAO,CACnG,CAEO,SAASsB,EAAa,CAAE,UAAAvB,EAAW,GAAGC,GAAoD,CAC7F,OAAOC,EAACsB,GAAa,UAAWnB,EAAW,6CAA8CL,CAAS,EAAI,GAAGC,EAAO,CACpH,CAUO,SAASwB,EAA2B,CACvC,MAAAC,EACA,SAAAjB,EACA,QAAAkB,EACA,WAAAC,EACA,KAAAC,EACA,WAAAC,EACA,GAAG7B,CACP,EAAiB,CACb,OACIW,EAACnB,EAAA,CAAa,GAAGQ,EACb,SAAA,CAAAC,EAAC6B,GAAO,WAAAH,EAAwB,KAAK,SAAS,QAAAD,EAAkB,KAAAE,EAC3D,SAAAH,EACL,EACAxB,EAACH,EAAA,CAAY,WAAA+B,EAAwB,UAAU,gBAC3C,WAACxB,EAAA,CAAM,GAAGL,EAAQ,SAAAQ,CAAA,CAAS,CAAA,CAC/B,CAAA,EACJ,CAER"}

package/dist/components/multi-select.js

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{FormField as d}from"./field.js";import{EasyMenu as a,MenuItem as p}from"./menu.js";import{useTfFieldContext as f}from"../utils/form-utils.js";import{getFieldErrorMessage as u}from"../utils/primitives.js";import"class-variance-authority";import"react-aria-components";import"lucide-react";import"./button.js";import"./loader.js";import"./list-box.js";import"./select.js";import"./popover.js";import"react";import"../utils/form-context.js";import"@tanstack/react-form";import"clsx";function c({items:o,value:e,onChange:t,label:l,errorMessage:n,description:m,...s}){return i("div",{className:"group form-field",children:i(d,{label:l,description:m,errorMessage:n,children:i(a,{selectionMode:"multiple",selectedKeys:e,onSelectionChange:r=>{typeof r!="string"&&t(r)},items:o,label:e.size,...s,children:r=>i(p,{id:r.id,isDisabled:r?.disabled,children:r.label},r.id)})})})}function B({...o}){const e=f({disabled:o.isDisabled});return i(c,{value:new Set(e.state.value),onChange:t=>e.setValue(Array.from(t)),onClose:e.handleBlur,errorMessage:u(e),...o})}export{c as MultiSelect,B as TfMultiSelect};
+import{jsx as i}from"react/jsx-runtime";import{FormField as d}from"./field.js";import{EasyMenu as p,MenuItem as a}from"./menu.js";import{useTfFieldContext as f}from"../utils/form-utils.js";import{getFieldErrorMessage as u}from"../utils/primitives.js";import"class-variance-authority";import"react-aria-components";import"./icons.js";import"react";import"./button.js";import"./loader.js";import"./list-box.js";import"./select.js";import"./popover.js";import"../utils/form-context.js";import"@tanstack/react-form";import"clsx";import"lodash-es";function c({items:o,value:e,onChange:t,label:l,errorMessage:n,description:m,...s}){return i("div",{className:"group form-field",children:i(d,{label:l,description:m,errorMessage:n,children:i(p,{selectionMode:"multiple",selectedKeys:e,onSelectionChange:r=>{typeof r!="string"&&t(r)},items:o,label:e.size,...s,children:r=>i(a,{id:r.id,isDisabled:r?.disabled,children:r.label},r.id)})})})}function I({...o}){const e=f({disabled:o.isDisabled});return i(c,{value:new Set(e.state.value),onChange:t=>e.setValue(Array.from(t)),onClose:e.handleBlur,errorMessage:u(e),...o})}export{c as MultiSelect,I as TfMultiSelect};
 //# sourceMappingURL=multi-select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","sources":["../../lib/components/multi-select.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, type FormFieldProps } from '../components/field';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { SelectOption } from '../components/select-options';\nimport { useTfFieldContext } from '../utils/form-utils';\nimport { getFieldErrorMessage } from '../utils/primitives';\n\ninterface MultipleSelectionProps {\n    value: Set<string | number>;\n    onChange: (v: Set<string | number>) => void;\n    buttonLabel?: React.ReactNode;\n    items: SelectOption[];\n}\n\nexport interface MultiSelectProps\n    extends MultipleSelectionProps,\n        FormFieldProps,\n        Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> {}\n\nexport function MultiSelect({\n    items,\n    value,\n    onChange: setValue,\n    label,\n    errorMessage,\n    description,\n    ...props\n}: MultiSelectProps) {\n    return (\n        <div className=\"group form-field\">\n            <FormField {...{ label, description, errorMessage }}>\n                <EasyMenu\n                    selectionMode=\"multiple\"\n                    selectedKeys={value}\n                    onSelectionChange={v => {\n                        if (typeof v === 'string') return;\n                        setValue(v);\n                    }}\n                    items={items}\n                    label={value.size}\n                    {...props}\n                >\n                    {item => (\n                        <MenuItem id={item.id} key={item.id} isDisabled={item?.disabled}>\n                            {item.label}\n                        </MenuItem>\n                    )}\n                </EasyMenu>\n            </FormField>\n        </div>\n    );\n}\n\n// TODO implement isDisabled\nexport interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {}\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n    const field = useTfFieldContext<string[]>({\n        disabled: props.isDisabled,\n    });\n\n    // TODO, perf??\n    return (\n        <MultiSelect\n            value={new Set(field.state.value)}\n            // @ts-expect-error\n            onChange={e => field.setValue(Array.from(e))}\n            onClose={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["MultiSelect","items","value","setValue","label","errorMessage","description","props","jsx","FormField","EasyMenu","v","item","MenuItem","TfMultiSelect","field","useTfFieldContext","e","getFieldErrorMessage"],"mappings":"+gBAmBO,SAASA,EAAY,CACxB,MAAAC,EACA,MAAAC,EACA,SAAUC,EACV,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,GAAGC,CACP,EAAqB,CACjB,OACIC,EAAC,MAAA,CAAI,UAAU,mBACX,SAAAA,EAACC,EAAA,CAAgB,MAAAL,EAAO,YAAAE,EAAa,aAAAD,EACjC,SAAAG,EAACE,EAAA,CACG,cAAc,WACd,aAAcR,EACd,kBAAmBS,GAAK,CAChB,OAAOA,GAAM,UACjBR,EAASQ,CAAC,CACd,EACA,MAAAV,EACA,MAAOC,EAAM,KACZ,GAAGK,EAEH,SAAAK,GACGJ,EAACK,EAAA,CAAS,GAAID,EAAK,GAAkB,WAAYA,GAAM,SAClD,SAAAA,EAAK,KAAA,EADkBA,EAAK,EAEjC,CAAA,CAAA,EAGZ,CAAA,CACJ,CAER,CAIO,SAASE,EAAc,CAAE,GAAGP,GAA6B,CAC5D,MAAMQ,EAAQC,EAA4B,CACtC,SAAUT,EAAM,UAAA,CACnB,EAGD,OACIC,EAACR,EAAA,CACG,MAAO,IAAI,IAAIe,EAAM,MAAM,KAAK,EAEhC,SAAUE,GAAKF,EAAM,SAAS,MAAM,KAAKE,CAAC,CAAC,EAC3C,QAASF,EAAM,WACf,aAAcG,EAAqBH,CAAK,EACvC,GAAGR,CAAA,CAAA,CAGhB"}
+{"version":3,"file":"multi-select.js","sources":["../../lib/components/multi-select.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, type FormFieldProps } from '../components/field';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { SelectOption } from '../components/select-options';\nimport { useTfFieldContext } from '../utils/form-utils';\nimport { getFieldErrorMessage } from '../utils/primitives';\n\ninterface MultipleSelectionProps {\n    value: Set<string | number>;\n    onChange: (v: Set<string | number>) => void;\n    buttonLabel?: React.ReactNode;\n    items: SelectOption[];\n}\n\nexport interface MultiSelectProps\n    extends MultipleSelectionProps,\n        FormFieldProps,\n        Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> {}\n\nexport function MultiSelect({\n    items,\n    value,\n    onChange: setValue,\n    label,\n    errorMessage,\n    description,\n    ...props\n}: MultiSelectProps) {\n    return (\n        <div className=\"group form-field\">\n            <FormField {...{ label, description, errorMessage }}>\n                <EasyMenu\n                    selectionMode=\"multiple\"\n                    selectedKeys={value}\n                    onSelectionChange={v => {\n                        if (typeof v === 'string') return;\n                        setValue(v);\n                    }}\n                    items={items}\n                    label={value.size}\n                    {...props}\n                >\n                    {item => (\n                        <MenuItem id={item.id} key={item.id} isDisabled={item?.disabled}>\n                            {item.label}\n                        </MenuItem>\n                    )}\n                </EasyMenu>\n            </FormField>\n        </div>\n    );\n}\n\n// TODO implement isDisabled\nexport interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {}\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n    const field = useTfFieldContext<string[]>({\n        disabled: props.isDisabled,\n    });\n\n    // TODO, perf??\n    return (\n        <MultiSelect\n            value={new Set(field.state.value)}\n            // @ts-expect-error\n            onChange={e => field.setValue(Array.from(e))}\n            onClose={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["MultiSelect","items","value","setValue","label","errorMessage","description","props","jsx","FormField","EasyMenu","v","item","MenuItem","TfMultiSelect","field","useTfFieldContext","e","getFieldErrorMessage"],"mappings":"+hBAmBO,SAASA,EAAY,CACxB,MAAAC,EACA,MAAAC,EACA,SAAUC,EACV,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,GAAGC,CACP,EAAqB,CACjB,OACIC,EAAC,MAAA,CAAI,UAAU,mBACX,SAAAA,EAACC,EAAA,CAAgB,MAAAL,EAAO,YAAAE,EAAa,aAAAD,EACjC,SAAAG,EAACE,EAAA,CACG,cAAc,WACd,aAAcR,EACd,kBAAmBS,GAAK,CAChB,OAAOA,GAAM,UACjBR,EAASQ,CAAC,CACd,EACA,MAAAV,EACA,MAAOC,EAAM,KACZ,GAAGK,EAEH,SAAAK,GACGJ,EAACK,EAAA,CAAS,GAAID,EAAK,GAAkB,WAAYA,GAAM,SAClD,SAAAA,EAAK,KAAA,EADkBA,EAAK,EAEjC,CAAA,CAAA,EAGZ,CAAA,CACJ,CAER,CAIO,SAASE,EAAc,CAAE,GAAGP,GAA6B,CAC5D,MAAMQ,EAAQC,EAA4B,CACtC,SAAUT,EAAM,UAAA,CACnB,EAGD,OACIC,EAACR,EAAA,CACG,MAAO,IAAI,IAAIe,EAAM,MAAM,KAAK,EAEhC,SAAUE,GAAKF,EAAM,SAAS,MAAM,KAAKE,CAAC,CAAC,EAC3C,QAASF,EAAM,WACf,aAAcG,EAAqBH,CAAK,EACvC,GAAGR,CAAA,CAAA,CAGhB"}

package/dist/components/numberfield.js

@@ -1,2 +1,2 @@
-import{jsx as r,jsxs as d}from"react/jsx-runtime";import{NumberField as c,composeRenderProps as n,Input as p}from"react-aria-components";import{ChevronUp as f,ChevronDown as h}from"lucide-react";import{Button as b}from"./button.js";import{useTfFieldContext as N}from"../utils/form-utils.js";import{getFieldErrorMessage as l,classNames as i}from"../utils/primitives.js";import{FormField as g,FieldGroup as F}from"./field.js";import"class-variance-authority";import"./loader.js";import"react";import"../utils/form-context.js";import"@tanstack/react-form";import"clsx";const x=c;function v({className:o,...t}){return r(p,{className:n(o,e=>i("w-fit min-w-0 flex-1 border-r border-transparent bg-popover pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",e)),...t})}function w({className:o,...t}){return d("div",{className:i("absolute right-0 flex h-full flex-col border-l",o),...t,children:[r(m,{slot:"increment",children:r(f,{"aria-hidden":!0,className:"size-icon"})}),r("div",{className:"border-b"}),r(m,{slot:"decrement",children:r(h,{"aria-hidden":!0,className:"size-icon"})})]})}function m({className:o,...t}){return r(b,{className:n(o,e=>i("w-auto grow h-3 px-0.5 text-muted-foreground",e)),variant:"ghost",size:"none",...t})}function C({label:o,description:t,errorMessage:e,className:s,...a}){return r(x,{className:n(s,u=>i("group form-field",u)),...a,children:r(g,{label:o,description:t,errorMessage:e,children:d(F,{children:[r(v,{}),r(w,{})]})})})}function R({isDisabled:o,...t}){const e=N({disabled:o});return r(C,{isInvalid:!!l(e),isDisabled:o||e.form.state.isSubmitting,value:e.state.value,id:e.name,onChange:e.handleChange,onBlur:e.handleBlur,errorMessage:l(e),...t})}export{C as NumberField,R as TfNumberField};
+import{jsx as r,jsxs as d}from"react/jsx-runtime";import{NumberField as c,composeRenderProps as n,Input as p}from"react-aria-components";import{Button as f}from"./button.js";import{useTfFieldContext as b}from"../utils/form-utils.js";import{getFieldErrorMessage as l,classNames as i}from"../utils/primitives.js";import{FormField as h,FieldGroup as N}from"./field.js";import{IcUp as g,IcDown as F}from"./icons.js";import"class-variance-authority";import"./loader.js";import"react";import"../utils/form-context.js";import"@tanstack/react-form";import"clsx";import"lodash-es";const x=c;function v({className:o,...t}){return r(p,{className:n(o,e=>i("w-fit min-w-0 flex-1 border-r border-transparent bg-popover pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",e)),...t})}function w({className:o,...t}){return d("div",{className:i("absolute right-0 flex h-full flex-col border-l",o),...t,children:[r(m,{slot:"increment",children:r(g,{"aria-hidden":!0,className:"size-icon"})}),r("div",{className:"border-b"}),r(m,{slot:"decrement",children:r(F,{"aria-hidden":!0,className:"size-icon"})})]})}function m({className:o,...t}){return r(f,{className:n(o,e=>i("w-auto grow h-3 px-0.5 text-muted-foreground",e)),variant:"ghost",size:"none",...t})}function I({label:o,description:t,errorMessage:e,className:s,...a}){return r(x,{className:n(s,u=>i("group form-field",u)),...a,children:r(h,{label:o,description:t,errorMessage:e,children:d(N,{children:[r(v,{}),r(w,{})]})})})}function U({isDisabled:o,...t}){const e=b({disabled:o});return r(I,{isInvalid:!!l(e),isDisabled:o||e.form.state.isSubmitting,value:e.state.value,id:e.name,onChange:e.handleChange,onBlur:e.handleBlur,errorMessage:l(e),...t})}export{I as NumberField,U as TfNumberField};
 //# sourceMappingURL=numberfield.js.map

package/dist/components/numberfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"numberfield.js","sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["import {\n    ButtonProps as AriaButtonProps,\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    NumberField as AriaNumberField,\n    NumberFieldProps as AriaNumberFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { Button } from '../components/button';\nimport { useTfFieldContext } from '../utils/form-utils';\nimport { classNames, getFieldErrorMessage } from '../utils/primitives';\nimport { FieldGroup, FormField, type FormFieldProps } from './field';\n\nconst ANumberField = AriaNumberField;\n\nfunction NumberFieldInput({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'w-fit min-w-0 flex-1 border-r border-transparent bg-popover pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction NumberFieldSteppers({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div className={classNames('absolute right-0 flex h-full flex-col border-l', className)} {...props}>\n            <NumberFieldStepper slot=\"increment\">\n                <ChevronUp aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n            <div className=\"border-b\" />\n            <NumberFieldStepper slot=\"decrement\">\n                <ChevronDown aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n        </div>\n    );\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n    return (\n        <Button\n            className={composeRenderProps(className, className =>\n                classNames('w-auto grow h-3 px-0.5 text-muted-foreground', className)\n            )}\n            variant={'ghost'}\n            size={'none'}\n            {...props}\n        />\n    );\n}\n\ntype NumberFieldProps = AriaNumberFieldProps & FormFieldProps;\nexport function NumberField({ label, description, errorMessage, className, ...props }: NumberFieldProps) {\n    return (\n        <ANumberField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <FieldGroup>\n                    <NumberFieldInput />\n                    <NumberFieldSteppers />\n                </FieldGroup>\n            </FormField>\n        </ANumberField>\n    );\n}\n\nexport function TfNumberField({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n    const field = useTfFieldContext<number>({ disabled: isDisabled });\n\n    return (\n        <NumberField\n            isInvalid={!!getFieldErrorMessage(field)}\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            id={field.name}\n            onChange={field.handleChange}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["ANumberField","AriaNumberField","NumberFieldInput","className","props","jsx","AriaInput","composeRenderProps","classNames","NumberFieldSteppers","jsxs","NumberFieldStepper","ChevronUp","ChevronDown","Button","NumberField","label","description","errorMessage","FormField","FieldGroup","TfNumberField","isDisabled","field","useTfFieldContext","getFieldErrorMessage"],"mappings":"sjBAeA,MAAMA,EAAeC,EAErB,SAASC,EAAiB,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CAC/D,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,wJACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAoB,CAAE,UAAAN,EAAW,GAAGC,GAAsC,CAC/E,OACIM,EAAC,OAAI,UAAWF,EAAW,iDAAkDL,CAAS,EAAI,GAAGC,EACzF,SAAA,CAAAC,EAACM,EAAA,CAAmB,KAAK,YACrB,SAAAN,EAACO,GAAU,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CACjD,EACAP,EAAC,MAAA,CAAI,UAAU,UAAA,CAAW,EAC1BA,EAACM,EAAA,CAAmB,KAAK,YACrB,SAAAN,EAACQ,GAAY,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CACnD,CAAA,EACJ,CAER,CAEA,SAASF,EAAmB,CAAE,UAAAR,EAAW,GAAGC,GAA0B,CAClE,OACIC,EAACS,EAAA,CACG,UAAWP,EAAmBJ,EAAWA,GACrCK,EAAW,+CAAgDL,CAAS,CAAA,EAExE,QAAS,QACT,KAAM,OACL,GAAGC,CAAA,CAAA,CAGhB,CAGO,SAASW,EAAY,CAAE,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,UAAAf,EAAW,GAAGC,GAA2B,CACrG,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAH,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,WAACE,EAAA,CACG,SAAA,CAAAf,EAACH,EAAA,EAAiB,IACjBO,EAAA,CAAA,CAAoB,CAAA,CAAA,CACzB,CAAA,CACJ,CAAA,CAAA,CAGZ,CAEO,SAASY,EAAc,CAC1B,WAAAC,EACA,GAAGlB,CACP,EAA2F,CACvF,MAAMmB,EAAQC,EAA0B,CAAE,SAAUF,EAAY,EAEhE,OACIjB,EAACU,EAAA,CACG,UAAW,CAAC,CAACU,EAAqBF,CAAK,EACvC,WAAYD,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,SAAUA,EAAM,aAChB,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB"}
+{"version":3,"file":"numberfield.js","sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["import {\n    ButtonProps as AriaButtonProps,\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    NumberField as AriaNumberField,\n    NumberFieldProps as AriaNumberFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { useTfFieldContext } from '../utils/form-utils';\nimport { classNames, getFieldErrorMessage } from '../utils/primitives';\nimport { FieldGroup, FormField, type FormFieldProps } from './field';\nimport { IcDown, IcUp } from './icons';\n\nconst ANumberField = AriaNumberField;\n\nfunction NumberFieldInput({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'w-fit min-w-0 flex-1 border-r border-transparent bg-popover pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction NumberFieldSteppers({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div className={classNames('absolute right-0 flex h-full flex-col border-l', className)} {...props}>\n            <NumberFieldStepper slot=\"increment\">\n                <IcUp aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n            <div className=\"border-b\" />\n            <NumberFieldStepper slot=\"decrement\">\n                <IcDown aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n        </div>\n    );\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n    return (\n        <Button\n            className={composeRenderProps(className, className =>\n                classNames('w-auto grow h-3 px-0.5 text-muted-foreground', className)\n            )}\n            variant={'ghost'}\n            size={'none'}\n            {...props}\n        />\n    );\n}\n\ntype NumberFieldProps = AriaNumberFieldProps & FormFieldProps;\nexport function NumberField({ label, description, errorMessage, className, ...props }: NumberFieldProps) {\n    return (\n        <ANumberField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <FieldGroup>\n                    <NumberFieldInput />\n                    <NumberFieldSteppers />\n                </FieldGroup>\n            </FormField>\n        </ANumberField>\n    );\n}\n\nexport function TfNumberField({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n    const field = useTfFieldContext<number>({ disabled: isDisabled });\n\n    return (\n        <NumberField\n            isInvalid={!!getFieldErrorMessage(field)}\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            id={field.name}\n            onChange={field.handleChange}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["ANumberField","AriaNumberField","NumberFieldInput","className","props","jsx","AriaInput","composeRenderProps","classNames","NumberFieldSteppers","jsxs","NumberFieldStepper","IcUp","IcDown","Button","NumberField","label","description","errorMessage","FormField","FieldGroup","TfNumberField","isDisabled","field","useTfFieldContext","getFieldErrorMessage"],"mappings":"4jBAeA,MAAMA,EAAeC,EAErB,SAASC,EAAiB,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CAC/D,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,wJACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAoB,CAAE,UAAAN,EAAW,GAAGC,GAAsC,CAC/E,OACIM,EAAC,OAAI,UAAWF,EAAW,iDAAkDL,CAAS,EAAI,GAAGC,EACzF,SAAA,CAAAC,EAACM,EAAA,CAAmB,KAAK,YACrB,SAAAN,EAACO,GAAK,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAC5C,EACAP,EAAC,MAAA,CAAI,UAAU,UAAA,CAAW,EAC1BA,EAACM,EAAA,CAAmB,KAAK,YACrB,SAAAN,EAACQ,GAAO,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAC9C,CAAA,EACJ,CAER,CAEA,SAASF,EAAmB,CAAE,UAAAR,EAAW,GAAGC,GAA0B,CAClE,OACIC,EAACS,EAAA,CACG,UAAWP,EAAmBJ,EAAWA,GACrCK,EAAW,+CAAgDL,CAAS,CAAA,EAExE,QAAS,QACT,KAAM,OACL,GAAGC,CAAA,CAAA,CAGhB,CAGO,SAASW,EAAY,CAAE,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,UAAAf,EAAW,GAAGC,GAA2B,CACrG,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAH,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,WAACE,EAAA,CACG,SAAA,CAAAf,EAACH,EAAA,EAAiB,IACjBO,EAAA,CAAA,CAAoB,CAAA,CAAA,CACzB,CAAA,CACJ,CAAA,CAAA,CAGZ,CAEO,SAASY,EAAc,CAC1B,WAAAC,EACA,GAAGlB,CACP,EAA2F,CACvF,MAAMmB,EAAQC,EAA0B,CAAE,SAAUF,EAAY,EAEhE,OACIjB,EAACU,EAAA,CACG,UAAW,CAAC,CAACU,EAAqBF,CAAK,EACvC,WAAYD,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,SAAUA,EAAM,aAChB,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB"}

package/dist/components/popover.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{Popover as n,composeRenderProps as m,DialogTrigger as p,Dialog as d}from"react-aria-components";import{classNames as a}from"../utils/primitives.js";import"clsx";const c=p,u=({className:o,offset:e=4,...i})=>t(n,{offset:e,className:m(o,r=>a("z-50 border bg-popover text-popover-foreground outline-none max-w-lg","data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95","data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95","data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",r)),...i});function v({className:o,...e}){return t(d,{className:a("p-icon outline-0",o),...e})}export{u as Popover,v as PopoverDialog,c as PopoverTrigger};
+import{jsx as t}from"react/jsx-runtime";import{Popover as n,composeRenderProps as m,DialogTrigger as p,Dialog as d}from"react-aria-components";import{classNames as a}from"../utils/primitives.js";import"clsx";import"lodash-es";const u=p,v=({className:o,offset:e=4,...i})=>t(n,{offset:e,className:m(o,r=>a("z-50 border bg-popover text-popover-foreground outline-none max-w-lg","data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95","data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95","data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",r)),...i});function x({className:o,...e}){return t(d,{className:a("p-icon outline-0",o),...e})}export{v as Popover,x as PopoverDialog,u as PopoverTrigger};
 //# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../lib/components/popover.tsx"],"sourcesContent":["import {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Popover as AriaPopover,\n    PopoverProps as AriaPopoverProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utils/primitives';\n\nexport const PopoverTrigger = AriaDialogTrigger;\n\nexport const Popover = ({ className, offset = 4, ...props }: AriaPopoverProps) => (\n    <AriaPopover\n        offset={offset}\n        className={composeRenderProps(className, className =>\n            classNames(\n                'z-50 border bg-popover text-popover-foreground outline-none max-w-lg',\n                /* Entering */\n                'data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95',\n                /* Exiting */\n                'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',\n                /* Placement */\n                'data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\nexport function PopoverDialog({ className, ...props }: AriaDialogProps) {\n    return <AriaDialog className={classNames('p-icon outline-0', className)} {...props} />;\n}\n"],"names":["PopoverTrigger","AriaDialogTrigger","Popover","className","offset","props","jsx","AriaPopover","composeRenderProps","classNames","PopoverDialog","AriaDialog"],"mappings":"gNAWO,MAAMA,EAAiBC,EAEjBC,EAAU,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAS,EAAG,GAAGC,KAChDC,EAACC,EAAA,CACG,OAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,uEAEA,kFAEA,kFAEA,kLACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR,EAGG,SAASK,EAAc,CAAE,UAAAP,EAAW,GAAGE,GAA0B,CACpE,OAAOC,EAACK,GAAW,UAAWF,EAAW,mBAAoBN,CAAS,EAAI,GAAGE,EAAO,CACxF"}
+{"version":3,"file":"popover.js","sources":["../../lib/components/popover.tsx"],"sourcesContent":["import {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Popover as AriaPopover,\n    PopoverProps as AriaPopoverProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utils/primitives';\n\nexport const PopoverTrigger = AriaDialogTrigger;\n\nexport const Popover = ({ className, offset = 4, ...props }: AriaPopoverProps) => (\n    <AriaPopover\n        offset={offset}\n        className={composeRenderProps(className, className =>\n            classNames(\n                'z-50 border bg-popover text-popover-foreground outline-none max-w-lg',\n                /* Entering */\n                'data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95',\n                /* Exiting */\n                'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',\n                /* Placement */\n                'data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\nexport function PopoverDialog({ className, ...props }: AriaDialogProps) {\n    return <AriaDialog className={classNames('p-icon outline-0', className)} {...props} />;\n}\n"],"names":["PopoverTrigger","AriaDialogTrigger","Popover","className","offset","props","jsx","AriaPopover","composeRenderProps","classNames","PopoverDialog","AriaDialog"],"mappings":"kOAWO,MAAMA,EAAiBC,EAEjBC,EAAU,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAS,EAAG,GAAGC,KAChDC,EAACC,EAAA,CACG,OAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,uEAEA,kFAEA,kFAEA,kLACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR,EAGG,SAASK,EAAc,CAAE,UAAAP,EAAW,GAAGE,GAA0B,CACpE,OAAOC,EAACK,GAAW,UAAWF,EAAW,mBAAoBN,CAAS,EAAI,GAAGE,EAAO,CACxF"}

package/dist/components/searchfield.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{SearchIcon as s,XIcon as m}from"lucide-react";import{composeRenderProps as n,SearchField as p,Input as u,Button as h}from"react-aria-components";import{classNames as t}from"../utils/primitives.js";import{FormField as f,FieldGroup as g}from"./field.js";import"clsx";import"class-variance-authority";function F({className:r,...o}){return e(p,{className:n(r,i=>t("group",i)),...o})}function b({className:r,...o}){return e(u,{className:n(r,i=>t("min-w-0 ring-0 focus-visible:outline-none flex-1 bg-popover px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",i)),...o})}function x({className:r,...o}){return e(h,{className:n(r,i=>t("mr-1 opacity-70 ring-offset-background transition-opacity","data-[hovered]:opacity-100","data-[disabled]:pointer-events-none","group-data-[empty]:invisible",i)),...o})}function w({label:r,description:o,className:i,errorMessage:a,...c}){return e(F,{className:n(i,d=>t("group form-field",d)),...c,children:e(f,{label:r,description:o,errorMessage:a,children:l(g,{children:[e(s,{"aria-hidden":!0,className:"size-icon text-muted-foreground"}),e(b,{placeholder:""}),e(x,{children:e(m,{"aria-hidden":!0,className:"size-icon"})})]})})})}export{w as SearchField};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{composeRenderProps as a,SearchField as s,Input as m,Button as p}from"react-aria-components";import{classNames as t}from"../utils/primitives.js";import{FormField as u,FieldGroup as h}from"./field.js";import{IcSearch as f,IcRemove as F}from"./icons.js";import"clsx";import"lodash-es";import"class-variance-authority";import"react";function g({className:r,...i}){return e(s,{className:a(r,o=>t("group",o)),...i})}function b({className:r,...i}){return e(m,{className:a(r,o=>t("min-w-0 ring-0 focus-visible:outline-none flex-1 bg-popover px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",o)),...i})}function N({className:r,...i}){return e(p,{className:a(r,o=>t("mr-1 opacity-70 ring-offset-background transition-opacity","data-[hovered]:opacity-100","data-[disabled]:pointer-events-none","group-data-[empty]:invisible",o)),...i})}function A({label:r,description:i,className:o,errorMessage:n,...c}){return e(g,{className:a(o,d=>t("group form-field",d)),...c,children:e(u,{label:r,description:i,errorMessage:n,children:l(h,{children:[e(f,{"aria-hidden":!0,className:"size-icon"}),e(b,{placeholder:""}),e(N,{children:e(F,{"aria-hidden":!0,className:"size-icon"})})]})})})}export{A as SearchField};
 //# sourceMappingURL=searchfield.js.map

package/dist/components/searchfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchfield.js","sources":["../../lib/components/searchfield.tsx"],"sourcesContent":["import { SearchIcon, XIcon } from 'lucide-react';\nimport {\n    Button as AriaButton,\n    ButtonProps as AriaButtonProps,\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    SearchField as AriaSearchField,\n    SearchFieldProps as AriaSearchFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utils/primitives';\n\nimport { FieldGroup, FormField, type FormFieldProps } from './field';\n\nfunction ASearchField({ className, ...props }: AriaSearchFieldProps) {\n    return (\n        <AriaSearchField\n            className={composeRenderProps(className, className => classNames('group', className))}\n            {...props}\n        />\n    );\n}\n\nfunction ASearchFieldInput({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'min-w-0 ring-0 focus-visible:outline-none flex-1 bg-popover px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SearchFieldClear({ className, ...props }: AriaButtonProps) {\n    return (\n        <AriaButton\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'mr-1 opacity-70 ring-offset-background transition-opacity',\n                    /* Hover */\n                    'data-[hovered]:opacity-100',\n                    /* Disabled */\n                    'data-[disabled]:pointer-events-none',\n                    /* Empty */\n                    'group-data-[empty]:invisible',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps {}\nexport function SearchField({ label, description, className, errorMessage, ...props }: SearchFieldProps) {\n    return (\n        <ASearchField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <FieldGroup>\n                    <SearchIcon aria-hidden className=\"size-icon text-muted-foreground\" />\n                    <ASearchFieldInput placeholder=\"\" />\n                    <SearchFieldClear>\n                        <XIcon aria-hidden className=\"size-icon\" />\n                    </SearchFieldClear>\n                </FieldGroup>\n            </FormField>\n        </ASearchField>\n    );\n}\n"],"names":["ASearchField","className","props","jsx","AriaSearchField","composeRenderProps","classNames","ASearchFieldInput","AriaInput","SearchFieldClear","AriaButton","SearchField","label","description","errorMessage","FormField","FieldGroup","SearchIcon","XIcon"],"mappings":"mWAeA,SAASA,EAAa,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACjE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GAAaK,EAAW,QAASL,CAAS,CAAC,EACnF,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAkB,CAAE,UAAAN,EAAW,GAAGC,GAAyB,CAChE,OACIC,EAACK,EAAA,CACG,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,qJACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASO,EAAiB,CAAE,UAAAR,EAAW,GAAGC,GAA0B,CAChE,OACIC,EAACO,EAAA,CACG,UAAWL,EAAmBJ,EAAWA,GACrCK,EACI,4DAEA,6BAEA,sCAEA,+BACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAGO,SAASS,EAAY,CAAE,MAAAC,EAAO,YAAAC,EAAa,UAAAZ,EAAW,aAAAa,EAAc,GAAGZ,GAA2B,CACrG,OACIC,EAACH,EAAA,CACG,UAAWK,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACa,EAAA,CAAU,MAAAH,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,WAACE,EAAA,CACG,SAAA,CAAAb,EAACc,EAAA,CAAW,cAAW,GAAC,UAAU,kCAAkC,EACpEd,EAACI,EAAA,CAAkB,YAAY,EAAA,CAAG,EAClCJ,EAACM,GACG,SAAAN,EAACe,EAAA,CAAM,cAAW,GAAC,UAAU,YAAY,CAAA,CAC7C,CAAA,CAAA,CACJ,CAAA,CACJ,CAAA,CAAA,CAGZ"}
+{"version":3,"file":"searchfield.js","sources":["../../lib/components/searchfield.tsx"],"sourcesContent":["import {\n    Button as AriaButton,\n    ButtonProps as AriaButtonProps,\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    SearchField as AriaSearchField,\n    SearchFieldProps as AriaSearchFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utils/primitives';\n\nimport { FieldGroup, FormField, type FormFieldProps } from './field';\nimport { IcRemove, IcSearch } from './icons';\n\nfunction ASearchField({ className, ...props }: AriaSearchFieldProps) {\n    return (\n        <AriaSearchField\n            className={composeRenderProps(className, className => classNames('group', className))}\n            {...props}\n        />\n    );\n}\n\nfunction ASearchFieldInput({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'min-w-0 ring-0 focus-visible:outline-none flex-1 bg-popover px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SearchFieldClear({ className, ...props }: AriaButtonProps) {\n    return (\n        <AriaButton\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'mr-1 opacity-70 ring-offset-background transition-opacity',\n                    /* Hover */\n                    'data-[hovered]:opacity-100',\n                    /* Disabled */\n                    'data-[disabled]:pointer-events-none',\n                    /* Empty */\n                    'group-data-[empty]:invisible',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps {}\nexport function SearchField({ label, description, className, errorMessage, ...props }: SearchFieldProps) {\n    return (\n        <ASearchField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <FieldGroup>\n                    <IcSearch aria-hidden className=\"size-icon\" />\n                    <ASearchFieldInput placeholder=\"\" />\n                    <SearchFieldClear>\n                        <IcRemove aria-hidden className=\"size-icon\" />\n                    </SearchFieldClear>\n                </FieldGroup>\n            </FormField>\n        </ASearchField>\n    );\n}\n"],"names":["ASearchField","className","props","jsx","AriaSearchField","composeRenderProps","classNames","ASearchFieldInput","AriaInput","SearchFieldClear","AriaButton","SearchField","label","description","errorMessage","FormField","FieldGroup","IcSearch","IcRemove"],"mappings":"kYAeA,SAASA,EAAa,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACjE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GAAaK,EAAW,QAASL,CAAS,CAAC,EACnF,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAkB,CAAE,UAAAN,EAAW,GAAGC,GAAyB,CAChE,OACIC,EAACK,EAAA,CACG,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,qJACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASO,EAAiB,CAAE,UAAAR,EAAW,GAAGC,GAA0B,CAChE,OACIC,EAACO,EAAA,CACG,UAAWL,EAAmBJ,EAAWA,GACrCK,EACI,4DAEA,6BAEA,sCAEA,+BACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAGO,SAASS,EAAY,CAAE,MAAAC,EAAO,YAAAC,EAAa,UAAAZ,EAAW,aAAAa,EAAc,GAAGZ,GAA2B,CACrG,OACIC,EAACH,EAAA,CACG,UAAWK,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACa,EAAA,CAAU,MAAAH,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,WAACE,EAAA,CACG,SAAA,CAAAb,EAACc,EAAA,CAAS,cAAW,GAAC,UAAU,YAAY,EAC5Cd,EAACI,EAAA,CAAkB,YAAY,EAAA,CAAG,EAClCJ,EAACM,GACG,SAAAN,EAACe,EAAA,CAAS,cAAW,GAAC,UAAU,YAAY,CAAA,CAChD,CAAA,CAAA,CACJ,CAAA,CACJ,CAAA,CAAA,CAGZ"}

package/dist/components/select.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as o,jsxs as c,Fragment as u}from"react/jsx-runtime";import{Select as p,composeRenderProps as i,SelectValue as f,ListBox as h}from"react-aria-components";import{ChevronDown as S}from"lucide-react";import{Button as g}from"./button.js";import{FormField as x}from"./field.js";import{useTfFieldContext as B}from"../utils/form-utils.js";import{getFieldErrorMessage as N,classNames as l}from"../utils/primitives.js";import{ListBoxItem as v,ListBoxHeader as C,ListBoxCollection as w}from"./list-box.js";import{Popover as F}from"./popover.js";import"class-variance-authority";import"./loader.js";import"clsx";import"react";import"../utils/form-context.js";import"@tanstack/react-form";const L=p,_=v,O=C,Q=w,b=({className:r,...t})=>o(f,{className:i(r,e=>l("line-clamp-1 data-[placeholder]:text-muted-foreground","[&>[slot=description]]:hidden",e)),...t});function P({className:r,children:t,...e}){return o(g,{...e,children:i(t,n=>c(u,{children:[n,o(S,{"aria-hidden":"true",className:"size-icon opacity-50"})]}))})}function T({className:r,...t}){return o(F,{className:i(r,e=>l("w-auto min-w-[--trigger-width]",e)),...t})}function V({className:r,...t}){return o(h,{className:i(r,e=>l("overflow-auto p-1 outline-none [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",e)),...t})}function j({label:r,description:t,errorMessage:e,children:n,className:s,items:a,...m}){return o(L,{className:i(s,d=>l("group form-field",d)),...m,children:c(x,{label:r,description:t,errorMessage:e,children:[o(P,{children:o(b,{})}),o(T,{children:o(V,{items:a,children:n})})]})})}function U({...r}){const t=B({disabled:r.isDisabled});return o(j,{selectedKey:t.state.value,onSelectionChange:e=>t.handleChange(e.toString()),onBlur:t.handleBlur,errorMessage:N(t),...r,children:e=>o(_,{id:e.id,children:e.label},e.id)})}export{Q as SelectCollection,O as SelectHeader,_ as SelectItem,T as SelectPopover,b as SelectValue,j as SingleSelect,U as TfSingleSelect};
+"use client";import{jsx as o,jsxs as c,Fragment as p}from"react/jsx-runtime";import{Select as u,composeRenderProps as i,SelectValue as f,ListBox as h}from"react-aria-components";import{Button as S}from"./button.js";import{FormField as g}from"./field.js";import{useTfFieldContext as x}from"../utils/form-utils.js";import{getFieldErrorMessage as B,classNames as l}from"../utils/primitives.js";import{IcDown as N}from"./icons.js";import{ListBoxItem as v,ListBoxHeader as w,ListBoxCollection as C}from"./list-box.js";import{Popover as F}from"./popover.js";import"class-variance-authority";import"./loader.js";import"clsx";import"lodash-es";import"react";import"../utils/form-context.js";import"@tanstack/react-form";const L=u,_=v,Q=w,U=C,b=({className:r,...t})=>o(f,{className:i(r,e=>l("line-clamp-1 data-[placeholder]:text-muted-foreground","[&>[slot=description]]:hidden",e)),...t});function I({className:r,children:t,...e}){return o(S,{...e,children:i(t,n=>c(p,{children:[n,o(N,{"aria-hidden":"true",className:"size-icon opacity-50"})]}))})}function P({className:r,...t}){return o(F,{className:i(r,e=>l("w-auto min-w-[--trigger-width]",e)),...t})}function T({className:r,...t}){return o(h,{className:i(r,e=>l("overflow-auto p-1 outline-none [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",e)),...t})}function V({label:r,description:t,errorMessage:e,children:n,className:s,items:a,...m}){return o(L,{className:i(s,d=>l("group form-field",d)),...m,children:c(g,{label:r,description:t,errorMessage:e,children:[o(I,{children:o(b,{})}),o(P,{children:o(T,{items:a,children:n})})]})})}function W({...r}){const t=x({disabled:r.isDisabled});return o(V,{selectedKey:t.state.value,onSelectionChange:e=>t.handleChange(e.toString()),onBlur:t.handleBlur,errorMessage:B(t),...r,children:e=>o(_,{id:e.id,children:e.label},e.id)})}export{U as SelectCollection,Q as SelectHeader,_ as SelectItem,P as SelectPopover,b as SelectValue,V as SingleSelect,W as TfSingleSelect};
 //# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../lib/components/select.tsx"],"sourcesContent":["'use client';\nimport {\n    ListBox as AriaListBox,\n    ListBoxProps as AriaListBoxProps,\n    PopoverProps as AriaPopoverProps,\n    Select as AriaSelect,\n    SelectProps as AriaSelectProps,\n    SelectValue as AriaSelectValue,\n    SelectValueProps as AriaSelectValueProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { ChevronDown } from 'lucide-react';\nimport { Button } from '../components/button';\nimport { FormField, type FormFieldProps } from '../components/field';\nimport type { SelectOption } from '../components/select-options';\nimport { useTfFieldContext } from '../utils/form-utils';\nimport { classNames, getFieldErrorMessage } from '../utils/primitives';\nimport { ListBoxCollection, ListBoxHeader, ListBoxItem } from './list-box';\nimport { Popover } from './popover';\n\nconst ASelect = AriaSelect;\nexport const SelectItem = ListBoxItem;\nexport const SelectHeader = ListBoxHeader;\nexport const SelectCollection = ListBoxCollection;\n\nexport const SelectValue = <T extends object>({ className, ...props }: AriaSelectValueProps<T>) => (\n    <AriaSelectValue\n        className={composeRenderProps(className, className =>\n            classNames(\n                'line-clamp-1 data-[placeholder]:text-muted-foreground',\n                /* Description */\n                '[&>[slot=description]]:hidden',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\nfunction SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof Button>) {\n    return (\n        <Button {...props}>\n            {composeRenderProps(children, children => (\n                <>\n                    {children}\n                    <ChevronDown aria-hidden=\"true\" className=\"size-icon opacity-50\" />\n                </>\n            ))}\n        </Button>\n    );\n}\n\nexport function SelectPopover({ className, ...props }: AriaPopoverProps) {\n    return (\n        <Popover\n            className={composeRenderProps(className, className =>\n                classNames('w-auto min-w-[--trigger-width]', className)\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SelectListBox<T extends object>({ className, ...props }: AriaListBoxProps<T>) {\n    return (\n        <AriaListBox\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'overflow-auto p-1 outline-none [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface SingleSelectProps<T extends SelectOption>\n    extends Omit<AriaSelectProps<T>, 'children'>,\n        FormFieldProps {\n    items: Iterable<T>;\n    children: React.ReactNode | ((item: T) => React.ReactNode);\n}\n\nexport function SingleSelect<T extends SelectOption>({\n    label,\n    description,\n    errorMessage,\n    children,\n    className,\n    items,\n    ...props\n}: SingleSelectProps<T>) {\n    return (\n        <ASelect\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <SelectTrigger>\n                    <SelectValue />\n                </SelectTrigger>\n                <SelectPopover>\n                    <SelectListBox items={items}>{children}</SelectListBox>\n                </SelectPopover>\n            </FormField>\n        </ASelect>\n    );\n}\n\ntype TfSingleSelectProps<T extends SelectOption> = Omit<SingleSelectProps<T>, 'value' | 'setValue' | 'children'>;\n\nexport function TfSingleSelect<T extends SelectOption>({ ...props }: TfSingleSelectProps<T>) {\n    const field = useTfFieldContext<string>({ disabled: props.isDisabled });\n\n    return (\n        <SingleSelect\n            selectedKey={field.state.value}\n            onSelectionChange={e => field.handleChange(e!.toString())}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        >\n            {item => (\n                <SelectItem id={item.id} key={item.id}>\n                    {item.label}\n                </SelectItem>\n            )}\n        </SingleSelect>\n    );\n}\n"],"names":["ASelect","AriaSelect","SelectItem","ListBoxItem","SelectHeader","ListBoxHeader","SelectCollection","ListBoxCollection","SelectValue","className","props","jsx","AriaSelectValue","composeRenderProps","classNames","SelectTrigger","children","Button","jsxs","Fragment","ChevronDown","SelectPopover","Popover","SelectListBox","AriaListBox","SingleSelect","label","description","errorMessage","items","FormField","TfSingleSelect","field","useTfFieldContext","getFieldErrorMessage","item"],"mappings":"6rBAqBA,MAAMA,EAAUC,EACHC,EAAaC,EACbC,EAAeC,EACfC,EAAmBC,EAEnBC,EAAc,CAAmB,CAAE,UAAAC,EAAW,GAAGC,KAC1DC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,wDAEA,gCACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CACR,EAGJ,SAASK,EAAc,CAAE,UAAAN,EAAW,SAAAO,EAAU,GAAGN,GAA8C,CAC3F,OACIC,EAACM,GAAQ,GAAGP,EACP,WAAmBM,EAAUA,GAC1BE,EAAAC,EAAA,CACK,SAAA,CAAAH,EACDL,EAACS,EAAA,CAAY,cAAY,OAAO,UAAU,sBAAA,CAAuB,CAAA,CAAA,CACrE,CACH,CAAA,CACL,CAER,CAEO,SAASC,EAAc,CAAE,UAAAZ,EAAW,GAAGC,GAA2B,CACrE,OACIC,EAACW,EAAA,CACG,UAAWT,EAAmBJ,EAAWA,GACrCK,EAAW,iCAAkCL,CAAS,CAAA,EAEzD,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASa,EAAgC,CAAE,UAAAd,EAAW,GAAGC,GAA8B,CACnF,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GACrCK,EACI,0FACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CASO,SAASe,EAAqC,CACjD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAZ,EACA,UAAAP,EACA,MAAAoB,EACA,GAAGnB,CACP,EAAyB,CACrB,OACIC,EAACX,EAAA,CACG,UAAWa,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAQ,EAACY,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAA,CAAAjB,EAACI,EAAA,CACG,SAAAJ,EAACH,EAAA,CAAA,CAAY,EACjB,IACCa,EAAA,CACG,SAAAV,EAACY,EAAA,CAAc,MAAAM,EAAe,SAAAb,EAAS,CAAA,CAC3C,CAAA,CAAA,CACJ,CAAA,CAAA,CAGZ,CAIO,SAASe,EAAuC,CAAE,GAAGrB,GAAiC,CACzF,MAAMsB,EAAQC,EAA0B,CAAE,SAAUvB,EAAM,WAAY,EAEtE,OACIC,EAACc,EAAA,CACG,YAAaO,EAAM,MAAM,MACzB,kBAAmB,GAAKA,EAAM,aAAa,EAAG,UAAU,EACxD,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACvC,GAAGtB,EAEH,SAAAyB,KACIjC,EAAA,CAAW,GAAIiC,EAAK,GAChB,SAAAA,EAAK,KAAA,EADoBA,EAAK,EAEnC,CAAA,CAAA,CAIhB"}
+{"version":3,"file":"select.js","sources":["../../lib/components/select.tsx"],"sourcesContent":["'use client';\nimport {\n    ListBox as AriaListBox,\n    ListBoxProps as AriaListBoxProps,\n    PopoverProps as AriaPopoverProps,\n    Select as AriaSelect,\n    SelectProps as AriaSelectProps,\n    SelectValue as AriaSelectValue,\n    SelectValueProps as AriaSelectValueProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { FormField, type FormFieldProps } from '../components/field';\nimport type { SelectOption } from '../components/select-options';\nimport { useTfFieldContext } from '../utils/form-utils';\nimport { classNames, getFieldErrorMessage } from '../utils/primitives';\nimport { IcDown } from './icons';\nimport { ListBoxCollection, ListBoxHeader, ListBoxItem } from './list-box';\nimport { Popover } from './popover';\n\nconst ASelect = AriaSelect;\nexport const SelectItem = ListBoxItem;\nexport const SelectHeader = ListBoxHeader;\nexport const SelectCollection = ListBoxCollection;\n\nexport const SelectValue = <T extends object>({ className, ...props }: AriaSelectValueProps<T>) => (\n    <AriaSelectValue\n        className={composeRenderProps(className, className =>\n            classNames(\n                'line-clamp-1 data-[placeholder]:text-muted-foreground',\n                /* Description */\n                '[&>[slot=description]]:hidden',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\nfunction SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof Button>) {\n    return (\n        <Button {...props}>\n            {composeRenderProps(children, children => (\n                <>\n                    {children}\n                    <IcDown aria-hidden=\"true\" className=\"size-icon opacity-50\" />\n                </>\n            ))}\n        </Button>\n    );\n}\n\nexport function SelectPopover({ className, ...props }: AriaPopoverProps) {\n    return (\n        <Popover\n            className={composeRenderProps(className, className =>\n                classNames('w-auto min-w-[--trigger-width]', className)\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SelectListBox<T extends object>({ className, ...props }: AriaListBoxProps<T>) {\n    return (\n        <AriaListBox\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'overflow-auto p-1 outline-none [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface SingleSelectProps<T extends SelectOption>\n    extends Omit<AriaSelectProps<T>, 'children'>,\n        FormFieldProps {\n    items: Iterable<T>;\n    children: React.ReactNode | ((item: T) => React.ReactNode);\n}\n\nexport function SingleSelect<T extends SelectOption>({\n    label,\n    description,\n    errorMessage,\n    children,\n    className,\n    items,\n    ...props\n}: SingleSelectProps<T>) {\n    return (\n        <ASelect\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <SelectTrigger>\n                    <SelectValue />\n                </SelectTrigger>\n                <SelectPopover>\n                    <SelectListBox items={items}>{children}</SelectListBox>\n                </SelectPopover>\n            </FormField>\n        </ASelect>\n    );\n}\n\ntype TfSingleSelectProps<T extends SelectOption> = Omit<SingleSelectProps<T>, 'value' | 'setValue' | 'children'>;\n\nexport function TfSingleSelect<T extends SelectOption>({ ...props }: TfSingleSelectProps<T>) {\n    const field = useTfFieldContext<string>({ disabled: props.isDisabled });\n\n    return (\n        <SingleSelect\n            selectedKey={field.state.value}\n            onSelectionChange={e => field.handleChange(e!.toString())}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        >\n            {item => (\n                <SelectItem id={item.id} key={item.id}>\n                    {item.label}\n                </SelectItem>\n            )}\n        </SingleSelect>\n    );\n}\n"],"names":["ASelect","AriaSelect","SelectItem","ListBoxItem","SelectHeader","ListBoxHeader","SelectCollection","ListBoxCollection","SelectValue","className","props","jsx","AriaSelectValue","composeRenderProps","classNames","SelectTrigger","children","Button","jsxs","Fragment","IcDown","SelectPopover","Popover","SelectListBox","AriaListBox","SingleSelect","label","description","errorMessage","items","FormField","TfSingleSelect","field","useTfFieldContext","getFieldErrorMessage","item"],"mappings":"wsBAqBA,MAAMA,EAAUC,EACHC,EAAaC,EACbC,EAAeC,EACfC,EAAmBC,EAEnBC,EAAc,CAAmB,CAAE,UAAAC,EAAW,GAAGC,KAC1DC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,wDAEA,gCACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CACR,EAGJ,SAASK,EAAc,CAAE,UAAAN,EAAW,SAAAO,EAAU,GAAGN,GAA8C,CAC3F,OACIC,EAACM,GAAQ,GAAGP,EACP,WAAmBM,EAAUA,GAC1BE,EAAAC,EAAA,CACK,SAAA,CAAAH,EACDL,EAACS,EAAA,CAAO,cAAY,OAAO,UAAU,sBAAA,CAAuB,CAAA,CAAA,CAChE,CACH,CAAA,CACL,CAER,CAEO,SAASC,EAAc,CAAE,UAAAZ,EAAW,GAAGC,GAA2B,CACrE,OACIC,EAACW,EAAA,CACG,UAAWT,EAAmBJ,EAAWA,GACrCK,EAAW,iCAAkCL,CAAS,CAAA,EAEzD,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASa,EAAgC,CAAE,UAAAd,EAAW,GAAGC,GAA8B,CACnF,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GACrCK,EACI,0FACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CASO,SAASe,EAAqC,CACjD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAZ,EACA,UAAAP,EACA,MAAAoB,EACA,GAAGnB,CACP,EAAyB,CACrB,OACIC,EAACX,EAAA,CACG,UAAWa,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAQ,EAACY,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAA,CAAAjB,EAACI,EAAA,CACG,SAAAJ,EAACH,EAAA,CAAA,CAAY,EACjB,IACCa,EAAA,CACG,SAAAV,EAACY,EAAA,CAAc,MAAAM,EAAe,SAAAb,EAAS,CAAA,CAC3C,CAAA,CAAA,CACJ,CAAA,CAAA,CAGZ,CAIO,SAASe,EAAuC,CAAE,GAAGrB,GAAiC,CACzF,MAAMsB,EAAQC,EAA0B,CAAE,SAAUvB,EAAM,WAAY,EAEtE,OACIC,EAACc,EAAA,CACG,YAAaO,EAAM,MAAM,MACzB,kBAAmB,GAAKA,EAAM,aAAa,EAAG,UAAU,EACxD,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACvC,GAAGtB,EAEH,SAAAyB,KACIjC,EAAA,CAAW,GAAIiC,EAAK,GAChB,SAAAA,EAAK,KAAA,EADoBA,EAAK,EAEnC,CAAA,CAAA,CAIhB"}

package/dist/components/sidebar.d.ts

@@ -49,4 +49,5 @@ export declare function SidebarMenuButton({ isActive, tooltip, className, ...pro
 export declare function SidebarMenuSubButton({ isActive, className, ...props }: React.ComponentProps<'button'> & {
     isActive?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/sidebar.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as a,Fragment as I,jsxs as v}from"react/jsx-runtime";import{PanelLeftClose as D,PanelLeftOpen as T}from"lucide-react";import{createContext as B,forwardRef as O,use as E,useState as w,useCallback as S,useEffect as R,useMemo as N}from"react";import{Button as A}from"./button.js";import{DialogTrigger as j,DialogOverlay as L,DialogContent as H}from"./dialog.js";import{Skeleton as y}from"./skeleton.js";import{TooltipTrigger as G,Tooltip as K}from"./tooltip.js";import{classNames as r}from"../utils/primitives.js";import{useIsMobile as P}from"../utils/use-mobile.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";const W="16rem",q="18rem",F="3rem",U="b",k=B(null);function h(){const t=E(k);if(!t)throw new Error("useSidebar must be used within a SidebarProvider.");return t}function de({defaultOpen:t=!0,open:e,onOpenChange:i,className:n,style:d,children:s,...c}){const l=P(),[p,b]=w(!1),[_,z]=w(t),f=e??_,m=S(o=>{const u=typeof o=="function"?o(f):o;i?i(u):z(u)},[i,f]),g=S(()=>l?b(o=>!o):m(o=>!o),[l,m,b]);R(()=>{const o=u=>{u.key===U&&(u.metaKey||u.ctrlKey)&&(u.preventDefault(),g())};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[g]);const x=f?"expanded":"collapsed",C=N(()=>({state:x,open:f,setOpen:m,isMobile:l,openMobile:p,setOpenMobile:b,toggleSidebar:g}),[x,f,m,l,p,b,g]);return a(k.Provider,{value:C,children:a("div",{style:{"--sidebar-width":W,"--sidebar-width-icon":F,...d},className:r("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background",n),...c,children:s})})}function se({side:t="left",variant:e="sidebar",collapsible:i="offcanvas",className:n,children:d,...s}){const{isMobile:c,state:l,openMobile:p,setOpenMobile:b}=h();return i==="none"?a("div",{className:r("flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground",n),...s,children:d}):c?a(j,{style:{"--sidebar-width":q},isOpen:p,onOpenChange:b,...s,children:a(L,{children:a(H,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>a(I,{children:d})})})}):v("div",{className:"group peer hidden text-sidebar-foreground md:block","data-state":l,"data-collapsible":l==="collapsed"?i:"","data-variant":e,"data-side":t,children:[a("div",{className:r("relative w-(--sidebar-width) bg-sidebar-background transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",e==="floating"||e==="inset"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon]")}),a("div",{className:r("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",t==="left"?"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]":"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",e==="floating"||e==="inset"?"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",n),...s,children:a("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border group-data-[variant=floating]:shadow",children:d})})]})}function le({className:t,onClick:e,...i}){const{toggleSidebar:n,open:d}=h();return a(A,{"data-sidebar":"trigger",variant:"neutral",size:"icon",onClick:s=>{e?.(s),n()},...i,children:d?a(D,{}):a(T,{})})}const V=O(({className:t,...e},i)=>{const{toggleSidebar:n}=h();return a("button",{ref:i,"data-sidebar":"rail","aria-label":"Toggle Sidebar",tabIndex:-1,onClick:n,title:"Toggle Sidebar",className:r("absolute inset-y-0 z-20 hidden w-icon -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-icon group-data-[side=right]:left-0 sm:flex","[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize","[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize","group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar-background","[[data-side=left][data-collapsible=offcanvas]_&]:-right-2","[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",t),...e})});V.displayName="SidebarRail";function ue({className:t,...e}){return a("main",{className:r("relative flex w-full flex-1 flex-col bg-background","md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",t),...e})}function ce({className:t,...e}){return a("div",{"data-sidebar":"header",className:r("flex flex-col gap-2 p-2",t),...e})}function be({className:t,...e}){return a("div",{"data-sidebar":"footer",className:r("flex flex-col gap-2 p-2",t),...e})}function fe({className:t,...e}){return a("div",{"data-sidebar":"content",className:r("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",t),...e})}function pe({className:t,...e}){return a("div",{"data-sidebar":"group",className:r("relative flex w-full min-w-0 flex-col p-2",t),...e})}function me({className:t,...e}){return a("div",{"data-sidebar":"group-label",className:r("flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0",t),...e})}function ge({className:t,...e}){return a("button",{"data-sidebar":"group-action",className:r("absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","after:absolute after:-inset-2 after:md:hidden","group-data-[collapsible=icon]:hidden",t),...e})}function he({className:t,...e}){return a("div",{"data-sidebar":"group-content",className:r("w-full body-sm",t),...e})}function ve({className:t,...e}){return a("ul",{"data-sidebar":"menu",className:r("flex w-full min-w-0 flex-col",t),...e})}function xe({className:t,...e}){return a("li",{"data-sidebar":"menu-item",className:r("group/menu-item relative list-none",t),...e})}function we({className:t,showOnHover:e=!1,...i}){return a("button",{"data-sidebar":"menu-action",className:r("absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-accent-foreground [&>svg]:size-icon [&>svg]:shrink-0","after:absolute after:-inset-2 after:md:hidden","peer-data-[size=sm]/menu-button:top-1","peer-data-[size=default]/menu-button:top-1.5","peer-data-[size=lg]/menu-button:top-2.5","group-data-[collapsible=icon]:hidden",e&&"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground md:opacity-0",t),...i})}function Se({className:t,...e}){return a("div",{"data-sidebar":"menu-badge",className:r("pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 body-sm font-medium tabular-nums text-sidebar-foreground","peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground","peer-data-[size=sm]/menu-button:top-1","peer-data-[size=default]/menu-button:top-1.5","peer-data-[size=lg]/menu-button:top-2.5","group-data-[collapsible=icon]:hidden",t),...e})}function ye({className:t,showIcon:e=!1,...i}){const n=N(()=>`${Math.floor(Math.random()*40)+50}%`,[]);return v("div",{"data-sidebar":"menu-skeleton",className:r("flex h-input items-center gap-2 px-2",t),...i,children:[e&&a(y,{className:"size-icon","data-sidebar":"menu-skeleton-icon"}),a(y,{className:"h-icon max-w-[--skeleton-width] flex-1","data-sidebar":"menu-skeleton-text",style:{"--skeleton-width":n}})]})}function Ne({className:t,...e}){return a("ul",{"data-sidebar":"menu-sub",className:r("mx-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",t),...e})}function ke({className:t,...e}){return a("li",{className:r("list-none ms-0",t),...e})}const M="w-full truncate btn btn-primary bg-transparent border-0 input-dim font-normal text-accent justify-start data-[active=true]:bg-primary/20 data-[active=true]:font-medium data-[active=true]:text-primary [&>span:last-child]:truncate";function Me({isActive:t=!1,tooltip:e,className:i,...n}){const{isMobile:d,state:s}=h(),c=a("button",{"data-sidebar":"menu-button","data-active":t,className:r("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ",M,i),...n});return e?v(G,{children:[c,a(K,{hidden:s!=="collapsed"||d,...e})]}):c}function _e({isActive:t,className:e,...i}){return a("button",{"data-sidebar":"menu-sub-button","data-active":t,className:r("-translate-x-px [&>svg]:text-accent-foreground","group-data-[collapsible=icon]:hidden",M,e),...i})}export{se as Sidebar,fe as SidebarContent,k as SidebarContext,be as SidebarFooter,pe as SidebarGroup,ge as SidebarGroupAction,he as SidebarGroupContent,me as SidebarGroupLabel,ce as SidebarHeader,ue as SidebarInset,ve as SidebarMenu,we as SidebarMenuAction,Se as SidebarMenuBadge,Me as SidebarMenuButton,xe as SidebarMenuItem,ye as SidebarMenuSkeleton,Ne as SidebarMenuSub,_e as SidebarMenuSubButton,ke as SidebarMenuSubItem,de as SidebarProvider,V as SidebarRail,le as SidebarTrigger,h as useSidebar};
+"use client";import{jsx as a,Fragment as C,jsxs as v}from"react/jsx-runtime";import{createContext as D,forwardRef as T,use as B,useState as w,useCallback as S,useEffect as O,useMemo as y}from"react";import{Button as E}from"./button.js";import{DialogTrigger as R,DialogOverlay as A,DialogContent as j}from"./dialog.js";import{Skeleton as N}from"./skeleton.js";import{TooltipTrigger as H,Tooltip as L}from"./tooltip.js";import{classNames as r}from"../utils/primitives.js";import{useIsMobile as G}from"../utils/use-mobile.js";import{IcLeft as K,IcRight as W}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"lodash-es";const q="16rem",F="18rem",P="3rem",U="b",k=D(null);function h(){const t=B(k);if(!t)throw new Error("useSidebar must be used within a SidebarProvider.");return t}function se({defaultOpen:t=!0,open:e,onOpenChange:i,className:n,style:d,children:s,...c}){const l=G(),[p,b]=w(!1),[_,z]=w(t),f=e??_,m=S(o=>{const u=typeof o=="function"?o(f):o;i?i(u):z(u)},[i,f]),g=S(()=>l?b(o=>!o):m(o=>!o),[l,m,b]);O(()=>{const o=u=>{u.key===U&&(u.metaKey||u.ctrlKey)&&(u.preventDefault(),g())};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[g]);const x=f?"expanded":"collapsed",I=y(()=>({state:x,open:f,setOpen:m,isMobile:l,openMobile:p,setOpenMobile:b,toggleSidebar:g}),[x,f,m,l,p,b,g]);return a(k.Provider,{value:I,children:a("div",{style:{"--sidebar-width":q,"--sidebar-width-icon":P,...d},className:r("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background",n),...c,children:s})})}function le({side:t="left",variant:e="sidebar",collapsible:i="offcanvas",className:n,children:d,...s}){const{isMobile:c,state:l,openMobile:p,setOpenMobile:b}=h();return i==="none"?a("div",{className:r("flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground",n),...s,children:d}):c?a(R,{style:{"--sidebar-width":F},isOpen:p,onOpenChange:b,...s,children:a(A,{children:a(j,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>a(C,{children:d})})})}):v("div",{className:"group peer hidden text-sidebar-foreground md:block","data-state":l,"data-collapsible":l==="collapsed"?i:"","data-variant":e,"data-side":t,children:[a("div",{className:r("relative w-(--sidebar-width) bg-sidebar-background transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",e==="floating"||e==="inset"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon]")}),a("div",{className:r("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",t==="left"?"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]":"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",e==="floating"||e==="inset"?"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",n),...s,children:a("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border group-data-[variant=floating]:shadow",children:d})})]})}function ue({className:t,onClick:e,...i}){const{toggleSidebar:n,open:d}=h();return a(E,{"data-sidebar":"trigger",variant:"neutral",size:"icon",onClick:s=>{e?.(s),n()},...i,children:d?a(K,{}):a(W,{})})}const V=T(({className:t,...e},i)=>{const{toggleSidebar:n}=h();return a("button",{ref:i,"data-sidebar":"rail","aria-label":"Toggle Sidebar",tabIndex:-1,onClick:n,title:"Toggle Sidebar",className:r("absolute inset-y-0 z-20 hidden w-icon -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-icon group-data-[side=right]:left-0 sm:flex","[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize","[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize","group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar-background","[[data-side=left][data-collapsible=offcanvas]_&]:-right-2","[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",t),...e})});V.displayName="SidebarRail";function ce({className:t,...e}){return a("main",{className:r("relative flex w-full flex-1 flex-col bg-background","md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",t),...e})}function be({className:t,...e}){return a("div",{"data-sidebar":"header",className:r("flex flex-col gap-2 p-2",t),...e})}function fe({className:t,...e}){return a("div",{"data-sidebar":"footer",className:r("flex flex-col gap-2 p-2",t),...e})}function pe({className:t,...e}){return a("div",{"data-sidebar":"content",className:r("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",t),...e})}function me({className:t,...e}){return a("div",{"data-sidebar":"group",className:r("relative flex w-full min-w-0 flex-col p-2",t),...e})}function ge({className:t,...e}){return a("div",{"data-sidebar":"group-label",className:r("flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0",t),...e})}function he({className:t,...e}){return a("button",{"data-sidebar":"group-action",className:r("absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","after:absolute after:-inset-2 after:md:hidden","group-data-[collapsible=icon]:hidden",t),...e})}function ve({className:t,...e}){return a("div",{"data-sidebar":"group-content",className:r("w-full body-sm",t),...e})}function xe({className:t,...e}){return a("ul",{"data-sidebar":"menu",className:r("flex w-full min-w-0 flex-col",t),...e})}function we({className:t,...e}){return a("li",{"data-sidebar":"menu-item",className:r("group/menu-item relative list-none",t),...e})}function Se({className:t,showOnHover:e=!1,...i}){return a("button",{"data-sidebar":"menu-action",className:r("absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-accent-foreground [&>svg]:size-icon [&>svg]:shrink-0","after:absolute after:-inset-2 after:md:hidden","peer-data-[size=sm]/menu-button:top-1","peer-data-[size=default]/menu-button:top-1.5","peer-data-[size=lg]/menu-button:top-2.5","group-data-[collapsible=icon]:hidden",e&&"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground md:opacity-0",t),...i})}function Ne({className:t,...e}){return a("div",{"data-sidebar":"menu-badge",className:r("pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 body-sm font-medium tabular-nums text-sidebar-foreground","peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground","peer-data-[size=sm]/menu-button:top-1","peer-data-[size=default]/menu-button:top-1.5","peer-data-[size=lg]/menu-button:top-2.5","group-data-[collapsible=icon]:hidden",t),...e})}function ye({className:t,showIcon:e=!1,...i}){const n=y(()=>`${Math.floor(Math.random()*40)+50}%`,[]);return v("div",{"data-sidebar":"menu-skeleton",className:r("flex h-input items-center gap-2 px-2",t),...i,children:[e&&a(N,{className:"size-icon","data-sidebar":"menu-skeleton-icon"}),a(N,{className:"h-icon max-w-[--skeleton-width] flex-1","data-sidebar":"menu-skeleton-text",style:{"--skeleton-width":n}})]})}function ke({className:t,...e}){return a("ul",{"data-sidebar":"menu-sub",className:r("mx-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",t),...e})}function Me({className:t,...e}){return a("li",{className:r("list-none ms-0",t),...e})}const M="w-full truncate btn btn-primary bg-transparent border-0 input-dim font-normal text-accent justify-start data-[active=true]:bg-primary/20 data-[active=true]:font-medium data-[active=true]:text-primary [&>span:last-child]:truncate";function _e({isActive:t=!1,tooltip:e,className:i,...n}){const{isMobile:d,state:s}=h(),c=a("button",{"data-sidebar":"menu-button","data-active":t,className:r("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ",M,i),...n});return e?v(H,{children:[c,a(L,{hidden:s!=="collapsed"||d,...e})]}):c}function ze({isActive:t,className:e,...i}){return a("button",{"data-sidebar":"menu-sub-button","data-active":t,className:r("-translate-x-px [&>svg]:text-accent-foreground","group-data-[collapsible=icon]:hidden",M,e),...i})}function Ie({className:t,...e}){return a("div",{className:r(t,"w-full overflow-auto"),...e})}export{le as Sidebar,pe as SidebarContent,k as SidebarContext,fe as SidebarFooter,me as SidebarGroup,he as SidebarGroupAction,ve as SidebarGroupContent,ge as SidebarGroupLabel,be as SidebarHeader,ce as SidebarInset,xe as SidebarMenu,Se as SidebarMenuAction,Ne as SidebarMenuBadge,_e as SidebarMenuButton,we as SidebarMenuItem,ye as SidebarMenuSkeleton,ke as SidebarMenuSub,ze as SidebarMenuSubButton,Me as SidebarMenuSubItem,Ie as SidebarOutlet,se as SidebarProvider,V as SidebarRail,ue as SidebarTrigger,h as useSidebar};
 //# sourceMappingURL=sidebar.js.map

package/dist/components/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { createContext, forwardRef, use, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../components/button';\nimport { DialogContent, DialogOverlay, DialogTrigger } from '../components/dialog';\nimport { Skeleton } from '../components/skeleton';\nimport { Tooltip, TooltipTrigger } from '../components/tooltip';\nimport { classNames } from '../utils/primitives';\nimport { useIsMobile } from '../utils/use-mobile';\n\n// TODO use tailwind variables\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n    state: 'expanded' | 'collapsed';\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    openMobile: boolean;\n    setOpenMobile: (open: boolean) => void;\n    isMobile: boolean;\n    toggleSidebar: () => void;\n};\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar() {\n    const context = use(SidebarContext);\n    if (!context) {\n        throw new Error('useSidebar must be used within a SidebarProvider.');\n    }\n\n    return context;\n}\n\nexport function SidebarProvider({\n    defaultOpen = true,\n    open: openProp,\n    onOpenChange: setOpenProp,\n    className,\n    style,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    defaultOpen?: boolean;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n}) {\n    const isMobile = useIsMobile();\n    const [openMobile, setOpenMobile] = useState(false);\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = useState(defaultOpen);\n    const open = openProp ?? _open;\n    const setOpen = useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const openState = typeof value === 'function' ? value(open) : value;\n            if (setOpenProp) {\n                setOpenProp(openState);\n            } else {\n                _setOpen(openState);\n            }\n\n            // TODO, use different model for persistence\n            // This sets the cookie to keep the sidebar state.\n            // document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n        },\n        [setOpenProp, open]\n    );\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = useCallback(() => {\n        return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n                event.preventDefault();\n                toggleSidebar();\n            }\n        };\n\n        window.addEventListener('keydown', handleKeyDown);\n        return () => window.removeEventListener('keydown', handleKeyDown);\n    }, [toggleSidebar]);\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? 'expanded' : 'collapsed';\n\n    const contextValue = useMemo<SidebarContextProps>(\n        () => ({\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n        }),\n        [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n    );\n\n    return (\n        <SidebarContext.Provider value={contextValue}>\n            <div\n                style={\n                    {\n                        '--sidebar-width': SIDEBAR_WIDTH,\n                        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                className={classNames(\n                    'group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background',\n                    className\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n}\n\nexport function Sidebar({\n    side = 'left',\n    variant = 'sidebar',\n    collapsible = 'offcanvas',\n    className,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    side?: 'left' | 'right';\n    variant?: 'sidebar' | 'floating' | 'inset';\n    collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n    if (collapsible === 'none') {\n        return (\n            <div\n                className={classNames(\n                    'flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground',\n                    className\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (isMobile) {\n        return (\n            <DialogTrigger\n                style={{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE } as React.CSSProperties}\n                isOpen={openMobile}\n                onOpenChange={setOpenMobile}\n                {...props}\n            >\n                <DialogOverlay>\n                    <DialogContent\n                        data-sidebar=\"sidebar\"\n                        data-mobile=\"true\"\n                        className=\"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden\"\n                        side=\"left\"\n                    >\n                        {() => <>{children}</>}\n                    </DialogContent>\n                </DialogOverlay>\n            </DialogTrigger>\n        );\n    }\n\n    return (\n        <div\n            className=\"group peer hidden text-sidebar-foreground md:block\"\n            data-state={state}\n            data-collapsible={state === 'collapsed' ? collapsible : ''}\n            data-variant={variant}\n            data-side={side}\n        >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n                className={classNames(\n                    'relative w-(--sidebar-width) bg-sidebar-background transition-[width] duration-200 ease-linear',\n                    'group-data-[collapsible=offcanvas]:w-0',\n                    'group-data-[side=right]:rotate-180',\n                    variant === 'floating' || variant === 'inset'\n                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'\n                )}\n            />\n            <div\n                className={classNames(\n                    'absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n                    side === 'left'\n                        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n                        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n                    // Adjust the padding for floating and inset variants.\n                    variant === 'floating' || variant === 'inset'\n                        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n                    className\n                )}\n                {...props}\n            >\n                <div\n                    data-sidebar=\"sidebar\"\n                    className=\"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border group-data-[variant=floating]:shadow\"\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n    const { toggleSidebar, open } = useSidebar();\n\n    return (\n        <Button\n            data-sidebar=\"trigger\"\n            variant=\"neutral\"\n            size=\"icon\"\n            onClick={event => {\n                onClick?.(event);\n                toggleSidebar();\n            }}\n            {...props}\n        >\n            {open ? <PanelLeftClose /> : <PanelLeftOpen />}\n        </Button>\n    );\n}\n\n// TODO, evaluate if we need this??\nexport const SidebarRail = forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n    ({ className, ...props }, ref) => {\n        const { toggleSidebar } = useSidebar();\n\n        return (\n            <button\n                ref={ref}\n                data-sidebar=\"rail\"\n                aria-label=\"Toggle Sidebar\"\n                tabIndex={-1}\n                onClick={toggleSidebar}\n                title=\"Toggle Sidebar\"\n                className={classNames(\n                    'absolute inset-y-0 z-20 hidden w-icon -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-icon group-data-[side=right]:left-0 sm:flex',\n                    '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n                    '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n                    'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar-background',\n                    '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n                    '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n                    className\n                )}\n                {...props}\n            />\n        );\n    }\n);\nSidebarRail.displayName = 'SidebarRail';\n\nexport function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n    return (\n        <main\n            className={classNames(\n                'relative flex w-full flex-1 flex-col bg-background',\n                'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div data-sidebar=\"header\" className={classNames('flex flex-col gap-2 p-2', className)} {...props} />;\n}\n\nexport function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div data-sidebar=\"footer\" className={classNames('flex flex-col gap-2 p-2', className)} {...props} />;\n}\n\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"content\"\n            className={classNames(\n                'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"group\"\n            className={classNames('relative flex w-full min-w-0 flex-col p-2', className)}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarGroupLabel({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"group-label\"\n            className={classNames(\n                'flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0',\n                'group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0',\n                className\n            )}\n            {...props}\n        />\n    );\n}\nexport function SidebarGroupAction({ className, ...props }: React.ComponentProps<'button'>) {\n    return (\n        <button\n            data-sidebar=\"group-action\"\n            className={classNames(\n                'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0',\n                // Increases the hit area of the button on mobile.\n                'after:absolute after:-inset-2 after:md:hidden',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div data-sidebar=\"group-content\" className={classNames('w-full body-sm', className)} {...props} />;\n}\n\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n    return <ul data-sidebar=\"menu\" className={classNames('flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n    return (\n        <li\n            data-sidebar=\"menu-item\"\n            className={classNames('group/menu-item relative list-none', className)}\n            {...props}\n        />\n    );\n}\n\n/// TODO fix positioning\nexport function SidebarMenuAction({\n    className,\n    showOnHover = false,\n    ...props\n}: React.ComponentProps<'button'> & {\n    showOnHover?: boolean;\n}) {\n    return (\n        <button\n            data-sidebar=\"menu-action\"\n            className={classNames(\n                'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-accent-foreground [&>svg]:size-icon [&>svg]:shrink-0',\n                // Increases the hit area of the button on mobile.\n                'after:absolute after:-inset-2 after:md:hidden',\n                'peer-data-[size=sm]/menu-button:top-1',\n                'peer-data-[size=default]/menu-button:top-1.5',\n                'peer-data-[size=lg]/menu-button:top-2.5',\n                'group-data-[collapsible=icon]:hidden',\n                showOnHover &&\n                    'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground md:opacity-0',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"menu-badge\"\n            className={classNames(\n                'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 body-sm font-medium tabular-nums text-sidebar-foreground',\n                'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',\n                'peer-data-[size=sm]/menu-button:top-1',\n                'peer-data-[size=default]/menu-button:top-1.5',\n                'peer-data-[size=lg]/menu-button:top-2.5',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarMenuSkeleton({\n    className,\n    showIcon = false,\n    ...props\n}: React.ComponentProps<'div'> & {\n    showIcon?: boolean;\n}) {\n    // Random width between 50 to 90%.\n    const width = useMemo(() => {\n        return `${Math.floor(Math.random() * 40) + 50}%`;\n    }, []);\n\n    return (\n        <div\n            data-sidebar=\"menu-skeleton\"\n            className={classNames('flex h-input items-center gap-2 px-2', className)}\n            {...props}\n        >\n            {showIcon && <Skeleton className=\"size-icon\" data-sidebar=\"menu-skeleton-icon\" />}\n            <Skeleton\n                className=\"h-icon max-w-[--skeleton-width] flex-1\"\n                data-sidebar=\"menu-skeleton-text\"\n                style={\n                    {\n                        '--skeleton-width': width,\n                    } as React.CSSProperties\n                }\n            />\n        </div>\n    );\n}\n\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n    return (\n        <ul\n            data-sidebar=\"menu-sub\"\n            className={classNames(\n                'mx-2 flex min-w-0 flex-col border-l border-border',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n    return <li className={classNames('list-none ms-0', className)} {...props} />;\n}\n\n// Common interaction logic for SidebarMenuButton and SidebarMenuSubButton\n// TODO, this is similar to the tab pattern, standardize the two.\nconst Cs_SidebarButton =\n    'w-full truncate btn btn-primary bg-transparent border-0 input-dim font-normal text-accent justify-start data-[active=true]:bg-primary/20 data-[active=true]:font-medium data-[active=true]:text-primary [&>span:last-child]:truncate';\nexport function SidebarMenuButton({\n    isActive = false,\n    tooltip,\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    isActive?: boolean;\n    tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n    const { isMobile, state } = useSidebar();\n\n    const button = (\n        <button\n            data-sidebar=\"menu-button\"\n            data-active={isActive}\n            className={classNames(\n                'peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ',\n                Cs_SidebarButton,\n                className\n            )}\n            {...props}\n        />\n    );\n\n    if (!tooltip) {\n        return button;\n    }\n\n    return (\n        <TooltipTrigger>\n            {button}\n            <Tooltip hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n        </TooltipTrigger>\n    );\n}\n\nexport function SidebarMenuSubButton({\n    isActive,\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    isActive?: boolean;\n}) {\n    return (\n        <button\n            data-sidebar=\"menu-sub-button\"\n            data-active={isActive}\n            className={classNames(\n                '-translate-x-px [&>svg]:text-accent-foreground',\n                'group-data-[collapsible=icon]:hidden',\n                Cs_SidebarButton,\n                className\n            )}\n            {...props}\n        />\n    );\n}\n// TODO, standardize heights here\n"],"names":["SIDEBAR_WIDTH","SIDEBAR_WIDTH_MOBILE","SIDEBAR_WIDTH_ICON","SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","createContext","useSidebar","context","use","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","useIsMobile","openMobile","setOpenMobile","useState","_open","_setOpen","open","setOpen","useCallback","value","openState","toggleSidebar","useEffect","handleKeyDown","event","state","contextValue","useMemo","jsx","classNames","Sidebar","side","variant","collapsible","DialogTrigger","DialogOverlay","DialogContent","jsxs","SidebarTrigger","onClick","Button","PanelLeftClose","PanelLeftOpen","SidebarRail","forwardRef","ref","SidebarInset","SidebarHeader","SidebarFooter","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupAction","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","showOnHover","SidebarMenuBadge","SidebarMenuSkeleton","showIcon","width","Skeleton","SidebarMenuSub","SidebarMenuSubItem","Cs_SidebarButton","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, forwardRef, use, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../components/button';\nimport { DialogContent, DialogOverlay, DialogTrigger } from '../components/dialog';\nimport { Skeleton } from '../components/skeleton';\nimport { Tooltip, TooltipTrigger } from '../components/tooltip';\nimport { classNames } from '../utils/primitives';\nimport { useIsMobile } from '../utils/use-mobile';\nimport { IcLeft, IcRight } from './icons';\n\n// TODO use tailwind variables\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n    state: 'expanded' | 'collapsed';\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    openMobile: boolean;\n    setOpenMobile: (open: boolean) => void;\n    isMobile: boolean;\n    toggleSidebar: () => void;\n};\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar() {\n    const context = use(SidebarContext);\n    if (!context) {\n        throw new Error('useSidebar must be used within a SidebarProvider.');\n    }\n\n    return context;\n}\n\nexport function SidebarProvider({\n    defaultOpen = true,\n    open: openProp,\n    onOpenChange: setOpenProp,\n    className,\n    style,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    defaultOpen?: boolean;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n}) {\n    const isMobile = useIsMobile();\n    const [openMobile, setOpenMobile] = useState(false);\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = useState(defaultOpen);\n    const open = openProp ?? _open;\n    const setOpen = useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const openState = typeof value === 'function' ? value(open) : value;\n            if (setOpenProp) {\n                setOpenProp(openState);\n            } else {\n                _setOpen(openState);\n            }\n\n            // TODO, use different model for persistence\n            // This sets the cookie to keep the sidebar state.\n            // document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n        },\n        [setOpenProp, open]\n    );\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = useCallback(() => {\n        return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n                event.preventDefault();\n                toggleSidebar();\n            }\n        };\n\n        window.addEventListener('keydown', handleKeyDown);\n        return () => window.removeEventListener('keydown', handleKeyDown);\n    }, [toggleSidebar]);\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? 'expanded' : 'collapsed';\n\n    const contextValue = useMemo<SidebarContextProps>(\n        () => ({\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n        }),\n        [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n    );\n\n    return (\n        <SidebarContext.Provider value={contextValue}>\n            <div\n                style={\n                    {\n                        '--sidebar-width': SIDEBAR_WIDTH,\n                        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                className={classNames(\n                    'group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background',\n                    className\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n}\n\nexport function Sidebar({\n    side = 'left',\n    variant = 'sidebar',\n    collapsible = 'offcanvas',\n    className,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    side?: 'left' | 'right';\n    variant?: 'sidebar' | 'floating' | 'inset';\n    collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n    if (collapsible === 'none') {\n        return (\n            <div\n                className={classNames(\n                    'flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground',\n                    className\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (isMobile) {\n        return (\n            <DialogTrigger\n                style={{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE } as React.CSSProperties}\n                isOpen={openMobile}\n                onOpenChange={setOpenMobile}\n                {...props}\n            >\n                <DialogOverlay>\n                    <DialogContent\n                        data-sidebar=\"sidebar\"\n                        data-mobile=\"true\"\n                        className=\"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden\"\n                        side=\"left\"\n                    >\n                        {() => <>{children}</>}\n                    </DialogContent>\n                </DialogOverlay>\n            </DialogTrigger>\n        );\n    }\n\n    return (\n        <div\n            className=\"group peer hidden text-sidebar-foreground md:block\"\n            data-state={state}\n            data-collapsible={state === 'collapsed' ? collapsible : ''}\n            data-variant={variant}\n            data-side={side}\n        >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n                className={classNames(\n                    'relative w-(--sidebar-width) bg-sidebar-background transition-[width] duration-200 ease-linear',\n                    'group-data-[collapsible=offcanvas]:w-0',\n                    'group-data-[side=right]:rotate-180',\n                    variant === 'floating' || variant === 'inset'\n                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'\n                )}\n            />\n            <div\n                className={classNames(\n                    'absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n                    side === 'left'\n                        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n                        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n                    // Adjust the padding for floating and inset variants.\n                    variant === 'floating' || variant === 'inset'\n                        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n                        : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n                    className\n                )}\n                {...props}\n            >\n                <div\n                    data-sidebar=\"sidebar\"\n                    className=\"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border group-data-[variant=floating]:shadow\"\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n    const { toggleSidebar, open } = useSidebar();\n\n    return (\n        <Button\n            data-sidebar=\"trigger\"\n            variant=\"neutral\"\n            size=\"icon\"\n            onClick={event => {\n                onClick?.(event);\n                toggleSidebar();\n            }}\n            {...props}\n        >\n            {/* Use transition to rotate a single icon */}\n            {open ? <IcLeft /> : <IcRight />}\n        </Button>\n    );\n}\n\n// TODO, evaluate if we need this??\nexport const SidebarRail = forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(\n    ({ className, ...props }, ref) => {\n        const { toggleSidebar } = useSidebar();\n\n        return (\n            <button\n                ref={ref}\n                data-sidebar=\"rail\"\n                aria-label=\"Toggle Sidebar\"\n                tabIndex={-1}\n                onClick={toggleSidebar}\n                title=\"Toggle Sidebar\"\n                className={classNames(\n                    'absolute inset-y-0 z-20 hidden w-icon -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border group-data-[side=left]:-right-icon group-data-[side=right]:left-0 sm:flex',\n                    '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n                    '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n                    'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar-background',\n                    '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n                    '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n                    className\n                )}\n                {...props}\n            />\n        );\n    }\n);\nSidebarRail.displayName = 'SidebarRail';\n\nexport function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n    return (\n        <main\n            className={classNames(\n                'relative flex w-full flex-1 flex-col bg-background',\n                'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div data-sidebar=\"header\" className={classNames('flex flex-col gap-2 p-2', className)} {...props} />;\n}\n\nexport function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div data-sidebar=\"footer\" className={classNames('flex flex-col gap-2 p-2', className)} {...props} />;\n}\n\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"content\"\n            className={classNames(\n                'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"group\"\n            className={classNames('relative flex w-full min-w-0 flex-col p-2', className)}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarGroupLabel({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"group-label\"\n            className={classNames(\n                'flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0',\n                'group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0',\n                className\n            )}\n            {...props}\n        />\n    );\n}\nexport function SidebarGroupAction({ className, ...props }: React.ComponentProps<'button'>) {\n    return (\n        <button\n            data-sidebar=\"group-action\"\n            className={classNames(\n                'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0',\n                // Increases the hit area of the button on mobile.\n                'after:absolute after:-inset-2 after:md:hidden',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div data-sidebar=\"group-content\" className={classNames('w-full body-sm', className)} {...props} />;\n}\n\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n    return <ul data-sidebar=\"menu\" className={classNames('flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n    return (\n        <li\n            data-sidebar=\"menu-item\"\n            className={classNames('group/menu-item relative list-none', className)}\n            {...props}\n        />\n    );\n}\n\n/// TODO fix positioning\nexport function SidebarMenuAction({\n    className,\n    showOnHover = false,\n    ...props\n}: React.ComponentProps<'button'> & {\n    showOnHover?: boolean;\n}) {\n    return (\n        <button\n            data-sidebar=\"menu-action\"\n            className={classNames(\n                'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-ring transition-transform hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-accent-foreground [&>svg]:size-icon [&>svg]:shrink-0',\n                // Increases the hit area of the button on mobile.\n                'after:absolute after:-inset-2 after:md:hidden',\n                'peer-data-[size=sm]/menu-button:top-1',\n                'peer-data-[size=default]/menu-button:top-1.5',\n                'peer-data-[size=lg]/menu-button:top-2.5',\n                'group-data-[collapsible=icon]:hidden',\n                showOnHover &&\n                    'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground md:opacity-0',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-sidebar=\"menu-badge\"\n            className={classNames(\n                'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 body-sm font-medium tabular-nums text-sidebar-foreground',\n                'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',\n                'peer-data-[size=sm]/menu-button:top-1',\n                'peer-data-[size=default]/menu-button:top-1.5',\n                'peer-data-[size=lg]/menu-button:top-2.5',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarMenuSkeleton({\n    className,\n    showIcon = false,\n    ...props\n}: React.ComponentProps<'div'> & {\n    showIcon?: boolean;\n}) {\n    // Random width between 50 to 90%.\n    const width = useMemo(() => {\n        return `${Math.floor(Math.random() * 40) + 50}%`;\n    }, []);\n\n    return (\n        <div\n            data-sidebar=\"menu-skeleton\"\n            className={classNames('flex h-input items-center gap-2 px-2', className)}\n            {...props}\n        >\n            {showIcon && <Skeleton className=\"size-icon\" data-sidebar=\"menu-skeleton-icon\" />}\n            <Skeleton\n                className=\"h-icon max-w-[--skeleton-width] flex-1\"\n                data-sidebar=\"menu-skeleton-text\"\n                style={\n                    {\n                        '--skeleton-width': width,\n                    } as React.CSSProperties\n                }\n            />\n        </div>\n    );\n}\n\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n    return (\n        <ul\n            data-sidebar=\"menu-sub\"\n            className={classNames(\n                'mx-2 flex min-w-0 flex-col border-l border-border',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n    return <li className={classNames('list-none ms-0', className)} {...props} />;\n}\n\n// Common interaction logic for SidebarMenuButton and SidebarMenuSubButton\n// TODO, this is similar to the tab pattern, standardize the two.\nconst Cs_SidebarButton =\n    'w-full truncate btn btn-primary bg-transparent border-0 input-dim font-normal text-accent justify-start data-[active=true]:bg-primary/20 data-[active=true]:font-medium data-[active=true]:text-primary [&>span:last-child]:truncate';\nexport function SidebarMenuButton({\n    isActive = false,\n    tooltip,\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    isActive?: boolean;\n    tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n    const { isMobile, state } = useSidebar();\n\n    const button = (\n        <button\n            data-sidebar=\"menu-button\"\n            data-active={isActive}\n            className={classNames(\n                'peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ',\n                Cs_SidebarButton,\n                className\n            )}\n            {...props}\n        />\n    );\n\n    if (!tooltip) {\n        return button;\n    }\n\n    return (\n        <TooltipTrigger>\n            {button}\n            <Tooltip hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n        </TooltipTrigger>\n    );\n}\n\nexport function SidebarMenuSubButton({\n    isActive,\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    isActive?: boolean;\n}) {\n    return (\n        <button\n            data-sidebar=\"menu-sub-button\"\n            data-active={isActive}\n            className={classNames(\n                '-translate-x-px [&>svg]:text-accent-foreground',\n                'group-data-[collapsible=icon]:hidden',\n                Cs_SidebarButton,\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\n}\n"],"names":["SIDEBAR_WIDTH","SIDEBAR_WIDTH_MOBILE","SIDEBAR_WIDTH_ICON","SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","createContext","useSidebar","context","use","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","useIsMobile","openMobile","setOpenMobile","useState","_open","_setOpen","open","setOpen","useCallback","value","openState","toggleSidebar","useEffect","handleKeyDown","event","state","contextValue","useMemo","jsx","classNames","Sidebar","side","variant","collapsible","DialogTrigger","DialogOverlay","DialogContent","jsxs","SidebarTrigger","onClick","Button","IcLeft","IcRight","SidebarRail","forwardRef","ref","SidebarInset","SidebarHeader","SidebarFooter","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupAction","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","showOnHover","SidebarMenuBadge","SidebarMenuSkeleton","showIcon","width","Skeleton","SidebarMenuSub","SidebarMenuSubItem","Cs_SidebarButton","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarOutlet"],"mappings":"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"}

package/dist/components/skeleton.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{classNames as o}from"../utils/primitives.js";import"clsx";function s({className:r,...m}){return e("div",{className:o("animate-pulse bg-primary/10",r),...m})}export{s as Skeleton};
+import{jsx as o}from"react/jsx-runtime";import{classNames as t}from"../utils/primitives.js";import"clsx";import"lodash-es";function s({className:r,...m}){return o("div",{className:t("animate-pulse bg-primary/10",r),...m})}export{s as Skeleton};
 //# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../lib/components/skeleton.tsx"],"sourcesContent":["import { classNames } from '../utils/primitives';\n\nexport function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={classNames('animate-pulse bg-primary/10', className)} {...props} />;\n}\n"],"names":["Skeleton","className","props","jsx","classNames"],"mappings":"yGAEO,SAASA,EAAS,CAAE,UAAAC,EAAW,GAAGC,GAAsC,CAC3E,OAAOC,EAAC,OAAI,UAAWC,EAAW,8BAA+BH,CAAS,EAAI,GAAGC,EAAO,CAC5F"}
+{"version":3,"file":"skeleton.js","sources":["../../lib/components/skeleton.tsx"],"sourcesContent":["import { classNames } from '../utils/primitives';\n\nexport function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={classNames('animate-pulse bg-primary/10', className)} {...props} />;\n}\n"],"names":["Skeleton","className","props","jsx","classNames"],"mappings":"2HAEO,SAASA,EAAS,CAAE,UAAAC,EAAW,GAAGC,GAAsC,CAC3E,OAAOC,EAAC,OAAI,UAAWC,EAAW,8BAA+BH,CAAS,EAAI,GAAGC,EAAO,CAC5F"}

package/dist/components/table-of-contents.d.ts

@@ -1,9 +1,9 @@
-export type Heading = {
+export type TableOfContentsHeading = {
     title?: React.ReactNode;
     url: string;
     depth: number;
 };
 export declare function TableOfContents({ toc, className }: {
-    toc: Heading[];
+    toc: TableOfContentsHeading[];
     className?: string;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/table-of-contents.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as m,jsx as l}from"react/jsx-runtime";import{useMemo as p,useRef as i,useEffect as f,useState as h}from"react";import{classNames as v}from"../utils/primitives.js";import"clsx";function g(o){const[c,a]=h(null);return f(()=>{const r=new IntersectionObserver(n=>{for(const e of n)e.isIntersecting&&a(e.target.id)},{rootMargin:"0% 0% -80% 0%"});for(const n of o??[]){const e=document.getElementById(n);e&&r.observe(e)}return()=>{for(const n of o??[]){const e=document.getElementById(n);e&&r.unobserve(e)}}},[o]),c}function I({toc:o,className:c}){const a=p(()=>o.map(t=>t.url.replace("#","")),[o]),r=g(a),n=i({}),e=i(null);return f(()=>{const t=n.current[`#${r}`],s=e.current;if(t&&s){const d=t.offsetTop,u=s.clientHeight;s.scrollTo({top:d-u/2,behavior:"smooth"})}},[r]),o.length?m("div",{ref:e,className:v("hidden lg:block p-icon overflow-auto sticky top-header mask-b-from-popover mask-b-from-85% mask-b-to-100% mask-b-to-transparent",c),children:[l("p",{className:"text-muted-foreground body mb-1 uppercase font-mono select-none",children:"On This Page"}),l("div",{className:"flex flex-col gap-1",children:o.map(t=>l("a",{href:t.url,ref:s=>{n.current[t.url]=s},className:"text-muted-foreground hover:text-foreground data-[active=true]:text-foreground body-sm no-underline transition-colors data-[depth=3]:pl-4 data-[depth=4]:pl-6","data-active":t.url===`#${r}`,"data-depth":t.depth,children:t.title},t.url))})]}):null}export{I as TableOfContents};
+"use client";import{jsxs as m,jsx as l}from"react/jsx-runtime";import{useMemo as p,useRef as i,useEffect as f,useState as h}from"react";import{classNames as v}from"../utils/primitives.js";import"clsx";import"lodash-es";function g(o){const[c,a]=h(null);return f(()=>{const r=new IntersectionObserver(n=>{for(const e of n)e.isIntersecting&&a(e.target.id)},{rootMargin:"0% 0% -80% 0%"});for(const n of o??[]){const e=document.getElementById(n);e&&r.observe(e)}return()=>{for(const n of o??[]){const e=document.getElementById(n);e&&r.unobserve(e)}}},[o]),c}function E({toc:o,className:c}){const a=p(()=>o.map(t=>t.url.replace("#","")),[o]),r=g(a),n=i({}),e=i(null);return f(()=>{const t=n.current[`#${r}`],s=e.current;if(t&&s){const d=t.offsetTop,u=s.clientHeight;s.scrollTo({top:d-u/2,behavior:"smooth"})}},[r]),o.length?m("div",{ref:e,className:v("hidden lg:block p-icon overflow-auto sticky top-header mask-b-from-popover mask-b-from-85% mask-b-to-100% mask-b-to-transparent",c),children:[l("p",{className:"text-muted-foreground body mb-1 uppercase font-mono select-none",children:"On This Page"}),l("div",{className:"flex flex-col gap-1",children:o.map(t=>l("a",{href:t.url,ref:s=>{n.current[t.url]=s},className:"text-muted-foreground hover:text-foreground data-[active=true]:text-foreground body-sm no-underline transition-colors data-[depth=3]:pl-4 data-[depth=4]:pl-6","data-active":t.url===`#${r}`,"data-depth":t.depth,children:t.title},t.url))})]}):null}export{E as TableOfContents};
 //# sourceMappingURL=table-of-contents.js.map

package/dist/components/table-of-contents.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-of-contents.js","sources":["../../lib/components/table-of-contents.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { classNames } from '../utils/primitives';\n\nfunction useActiveItem(itemIds: string[]) {\n    const [activeId, setActiveId] = useState<string | null>(null);\n\n    useEffect(() => {\n        const observer = new IntersectionObserver(\n            entries => {\n                for (const entry of entries) {\n                    if (entry.isIntersecting) {\n                        setActiveId(entry.target.id);\n                    }\n                }\n            },\n            { rootMargin: '0% 0% -80% 0%' }\n        );\n\n        for (const id of itemIds ?? []) {\n            const element = document.getElementById(id);\n            if (element) {\n                observer.observe(element);\n            }\n        }\n\n        return () => {\n            for (const id of itemIds ?? []) {\n                const element = document.getElementById(id);\n                if (element) {\n                    observer.unobserve(element);\n                }\n            }\n        };\n    }, [itemIds]);\n\n    return activeId;\n}\n\nexport type Heading = {\n    title?: React.ReactNode;\n    url: string;\n    depth: number;\n};\n\nexport function TableOfContents({ toc, className }: { toc: Heading[]; className?: string }) {\n    const itemIds = useMemo(() => toc.map(item => item.url.replace('#', '')), [toc]);\n    const activeHeading = useActiveItem(itemIds);\n\n    const linkRefs = useRef<Record<string, HTMLAnchorElement | null>>({});\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    // Scroll to active item\n    useEffect(() => {\n        const activeEl = linkRefs.current[`#${activeHeading}`];\n        const containerEl = containerRef.current;\n\n        if (activeEl && containerEl) {\n            const linkTop = activeEl.offsetTop;\n            const containerHeight = containerEl.clientHeight;\n            containerEl.scrollTo({\n                top: linkTop - containerHeight / 2,\n                behavior: 'smooth',\n            });\n        }\n    }, [activeHeading]);\n\n    if (!toc.length) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={containerRef}\n            className={classNames(\n                'hidden lg:block p-icon overflow-auto sticky top-header mask-b-from-popover mask-b-from-85% mask-b-to-100% mask-b-to-transparent',\n                className\n            )}\n        >\n            <p className=\"text-muted-foreground body mb-1 uppercase font-mono select-none\">On This Page</p>\n            <div className=\"flex flex-col gap-1\">\n                {toc.map(item => (\n                    // It is okay to use plain <a hrefs> here because the links all point to IDs on the same page and does not impact any routers.\n                    <a\n                        key={item.url}\n                        href={item.url}\n                        ref={el => {\n                            linkRefs.current[item.url] = el;\n                        }}\n                        className=\"text-muted-foreground hover:text-foreground data-[active=true]:text-foreground body-sm no-underline transition-colors data-[depth=3]:pl-4 data-[depth=4]:pl-6\"\n                        data-active={item.url === `#${activeHeading}`}\n                        data-depth={item.depth}\n                    >\n                        {item.title}\n                    </a>\n                ))}\n            </div>\n        </div>\n    );\n}\n"],"names":["useActiveItem","itemIds","activeId","setActiveId","useState","useEffect","observer","entries","entry","id","element","TableOfContents","toc","className","useMemo","item","activeHeading","linkRefs","useRef","containerRef","activeEl","containerEl","linkTop","containerHeight","jsxs","classNames","jsx","el"],"mappings":"yMAIA,SAASA,EAAcC,EAAmB,CACtC,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAwB,IAAI,EAE5D,OAAAC,EAAU,IAAM,CACZ,MAAMC,EAAW,IAAI,qBACjBC,GAAW,CACP,UAAWC,KAASD,EACZC,EAAM,gBACNL,EAAYK,EAAM,OAAO,EAAE,CAGvC,EACA,CAAE,WAAY,eAAA,CAAgB,EAGlC,UAAWC,KAAMR,GAAW,GAAI,CAC5B,MAAMS,EAAU,SAAS,eAAeD,CAAE,EACtCC,GACAJ,EAAS,QAAQI,CAAO,CAEhC,CAEA,MAAO,IAAM,CACT,UAAWD,KAAMR,GAAW,GAAI,CAC5B,MAAMS,EAAU,SAAS,eAAeD,CAAE,EACtCC,GACAJ,EAAS,UAAUI,CAAO,CAElC,CACJ,CACJ,EAAG,CAACT,CAAO,CAAC,EAELC,CACX,CAQO,SAASS,EAAgB,CAAE,IAAAC,EAAK,UAAAC,GAAqD,CACxF,MAAMZ,EAAUa,EAAQ,IAAMF,EAAI,IAAIG,GAAQA,EAAK,IAAI,QAAQ,IAAK,EAAE,CAAC,EAAG,CAACH,CAAG,CAAC,EACzEI,EAAgBhB,EAAcC,CAAO,EAErCgB,EAAWC,EAAiD,EAAE,EAC9DC,EAAeD,EAA8B,IAAI,EAiBvD,OAdAb,EAAU,IAAM,CACZ,MAAMe,EAAWH,EAAS,QAAQ,IAAID,CAAa,EAAE,EAC/CK,EAAcF,EAAa,QAEjC,GAAIC,GAAYC,EAAa,CACzB,MAAMC,EAAUF,EAAS,UACnBG,EAAkBF,EAAY,aACpCA,EAAY,SAAS,CACjB,IAAKC,EAAUC,EAAkB,EACjC,SAAU,QAAA,CACb,CACL,CACJ,EAAG,CAACP,CAAa,CAAC,EAEbJ,EAAI,OAKLY,EAAC,MAAA,CACG,IAAKL,EACL,UAAWM,EACP,kIACAZ,CAAA,EAGJ,SAAA,CAAAa,EAAC,IAAA,CAAE,UAAU,kEAAkE,SAAA,eAAY,EAC3FA,EAAC,MAAA,CAAI,UAAU,sBACV,WAAI,IAAIX,GAELW,EAAC,IAAA,CAEG,KAAMX,EAAK,IACX,IAAKY,GAAM,CACPV,EAAS,QAAQF,EAAK,GAAG,EAAIY,CACjC,EACA,UAAU,gKACV,cAAaZ,EAAK,MAAQ,IAAIC,CAAa,GAC3C,aAAYD,EAAK,MAEhB,SAAAA,EAAK,KAAA,EATDA,EAAK,GAAA,CAWjB,CAAA,CACL,CAAA,CAAA,CAAA,EA5BG,IA+Bf"}
+{"version":3,"file":"table-of-contents.js","sources":["../../lib/components/table-of-contents.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { classNames } from '../utils/primitives';\n\nfunction useActiveItem(itemIds: string[]) {\n    const [activeId, setActiveId] = useState<string | null>(null);\n\n    useEffect(() => {\n        const observer = new IntersectionObserver(\n            entries => {\n                for (const entry of entries) {\n                    if (entry.isIntersecting) {\n                        setActiveId(entry.target.id);\n                    }\n                }\n            },\n            { rootMargin: '0% 0% -80% 0%' }\n        );\n\n        for (const id of itemIds ?? []) {\n            const element = document.getElementById(id);\n            if (element) {\n                observer.observe(element);\n            }\n        }\n\n        return () => {\n            for (const id of itemIds ?? []) {\n                const element = document.getElementById(id);\n                if (element) {\n                    observer.unobserve(element);\n                }\n            }\n        };\n    }, [itemIds]);\n\n    return activeId;\n}\n\nexport type TableOfContentsHeading = {\n    title?: React.ReactNode;\n    url: string;\n    depth: number;\n};\n\nexport function TableOfContents({ toc, className }: { toc: TableOfContentsHeading[]; className?: string }) {\n    const itemIds = useMemo(() => toc.map(item => item.url.replace('#', '')), [toc]);\n    const activeHeading = useActiveItem(itemIds);\n\n    const linkRefs = useRef<Record<string, HTMLAnchorElement | null>>({});\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    // Scroll to active item\n    useEffect(() => {\n        const activeEl = linkRefs.current[`#${activeHeading}`];\n        const containerEl = containerRef.current;\n\n        if (activeEl && containerEl) {\n            const linkTop = activeEl.offsetTop;\n            const containerHeight = containerEl.clientHeight;\n            containerEl.scrollTo({\n                top: linkTop - containerHeight / 2,\n                behavior: 'smooth',\n            });\n        }\n    }, [activeHeading]);\n\n    if (!toc.length) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={containerRef}\n            className={classNames(\n                'hidden lg:block p-icon overflow-auto sticky top-header mask-b-from-popover mask-b-from-85% mask-b-to-100% mask-b-to-transparent',\n                className\n            )}\n        >\n            <p className=\"text-muted-foreground body mb-1 uppercase font-mono select-none\">On This Page</p>\n            <div className=\"flex flex-col gap-1\">\n                {toc.map(item => (\n                    // It is okay to use plain <a hrefs> here because the links all point to IDs on the same page and does not impact any routers.\n                    <a\n                        key={item.url}\n                        href={item.url}\n                        ref={el => {\n                            linkRefs.current[item.url] = el;\n                        }}\n                        className=\"text-muted-foreground hover:text-foreground data-[active=true]:text-foreground body-sm no-underline transition-colors data-[depth=3]:pl-4 data-[depth=4]:pl-6\"\n                        data-active={item.url === `#${activeHeading}`}\n                        data-depth={item.depth}\n                    >\n                        {item.title}\n                    </a>\n                ))}\n            </div>\n        </div>\n    );\n}\n"],"names":["useActiveItem","itemIds","activeId","setActiveId","useState","useEffect","observer","entries","entry","id","element","TableOfContents","toc","className","useMemo","item","activeHeading","linkRefs","useRef","containerRef","activeEl","containerEl","linkTop","containerHeight","jsxs","classNames","jsx","el"],"mappings":"2NAIA,SAASA,EAAcC,EAAmB,CACtC,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAwB,IAAI,EAE5D,OAAAC,EAAU,IAAM,CACZ,MAAMC,EAAW,IAAI,qBACjBC,GAAW,CACP,UAAWC,KAASD,EACZC,EAAM,gBACNL,EAAYK,EAAM,OAAO,EAAE,CAGvC,EACA,CAAE,WAAY,eAAA,CAAgB,EAGlC,UAAWC,KAAMR,GAAW,GAAI,CAC5B,MAAMS,EAAU,SAAS,eAAeD,CAAE,EACtCC,GACAJ,EAAS,QAAQI,CAAO,CAEhC,CAEA,MAAO,IAAM,CACT,UAAWD,KAAMR,GAAW,GAAI,CAC5B,MAAMS,EAAU,SAAS,eAAeD,CAAE,EACtCC,GACAJ,EAAS,UAAUI,CAAO,CAElC,CACJ,CACJ,EAAG,CAACT,CAAO,CAAC,EAELC,CACX,CAQO,SAASS,EAAgB,CAAE,IAAAC,EAAK,UAAAC,GAAoE,CACvG,MAAMZ,EAAUa,EAAQ,IAAMF,EAAI,IAAIG,GAAQA,EAAK,IAAI,QAAQ,IAAK,EAAE,CAAC,EAAG,CAACH,CAAG,CAAC,EACzEI,EAAgBhB,EAAcC,CAAO,EAErCgB,EAAWC,EAAiD,EAAE,EAC9DC,EAAeD,EAA8B,IAAI,EAiBvD,OAdAb,EAAU,IAAM,CACZ,MAAMe,EAAWH,EAAS,QAAQ,IAAID,CAAa,EAAE,EAC/CK,EAAcF,EAAa,QAEjC,GAAIC,GAAYC,EAAa,CACzB,MAAMC,EAAUF,EAAS,UACnBG,EAAkBF,EAAY,aACpCA,EAAY,SAAS,CACjB,IAAKC,EAAUC,EAAkB,EACjC,SAAU,QAAA,CACb,CACL,CACJ,EAAG,CAACP,CAAa,CAAC,EAEbJ,EAAI,OAKLY,EAAC,MAAA,CACG,IAAKL,EACL,UAAWM,EACP,kIACAZ,CAAA,EAGJ,SAAA,CAAAa,EAAC,IAAA,CAAE,UAAU,kEAAkE,SAAA,eAAY,EAC3FA,EAAC,MAAA,CAAI,UAAU,sBACV,WAAI,IAAIX,GAELW,EAAC,IAAA,CAEG,KAAMX,EAAK,IACX,IAAKY,GAAM,CACPV,EAAS,QAAQF,EAAK,GAAG,EAAIY,CACjC,EACA,UAAU,gKACV,cAAaZ,EAAK,MAAQ,IAAIC,CAAa,GAC3C,aAAYD,EAAK,MAEhB,SAAAA,EAAK,KAAA,EATDA,EAAK,GAAA,CAWjB,CAAA,CACL,CAAA,CAAA,CAAA,EA5BG,IA+Bf"}

package/dist/components/table.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{classNames as o}from"../utils/primitives.js";import"clsx";function d({className:t,...e}){return r("table",{className:o("caption-bottom [&_tr:last-child]:border-0 whitespace-nowrap",t),...e})}function b({className:t,...e}){return r("thead",{className:o("[&_tr]:border-b border-b",t),...e})}function s({className:t,...e}){return r("tbody",{className:o(t),...e})}function c({className:t,...e}){return r("tfoot",{className:o("border-t font-medium last:[&>tr]:border-b-0",t),...e})}function i({className:t,...e}){return r("tr",{className:o("border-b border-border",t),...e})}function m({className:t,...e}){return r("th",{className:o("text-left align-middle font-medium",t),...e})}function u({className:t,...e}){return r("td",{className:o("[&_tr:last-child]:border-dotted",t),...e})}function f({className:t,...e}){return r("caption",{className:o("mt-icon text-muted-foreground",t),...e})}export{d as Table,s as TableBody,f as TableCaption,u as TableCell,c as TableFooter,m as TableHead,b as TableHeader,i as TableRow};
+import{jsx as r}from"react/jsx-runtime";import{classNames as o}from"../utils/primitives.js";import"clsx";import"lodash-es";function b({className:t,...e}){return r("table",{className:o("caption-bottom [&_tr:last-child]:border-0 whitespace-nowrap",t),...e})}function s({className:t,...e}){return r("thead",{className:o("[&_tr]:border-b border-b",t),...e})}function c({className:t,...e}){return r("tbody",{className:o(t),...e})}function i({className:t,...e}){return r("tfoot",{className:o("border-t font-medium last:[&>tr]:border-b-0",t),...e})}function m({className:t,...e}){return r("tr",{className:o("border-b border-border",t),...e})}function u({className:t,...e}){return r("th",{className:o("text-left align-middle font-medium",t),...e})}function f({className:t,...e}){return r("td",{className:o("[&_tr:last-child]:border-dotted",t),...e})}function p({className:t,...e}){return r("caption",{className:o("mt-icon text-muted-foreground",t),...e})}export{b as Table,c as TableBody,p as TableCaption,f as TableCell,i as TableFooter,u as TableHead,s as TableHeader,m as TableRow};
 //# sourceMappingURL=table.js.map

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../lib/components/table.tsx"],"sourcesContent":["import { classNames } from '../utils/primitives';\n\nexport function Table({ className, ...props }: React.ComponentProps<'table'>) {\n    return (\n        <table\n            className={classNames('caption-bottom [&_tr:last-child]:border-0 whitespace-nowrap', className)}\n            {...props}\n        />\n    );\n}\n\nexport function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n    return (\n        <thead\n            className={classNames('[&_tr]:border-b border-b', className)} // Added border-b to apply a bottom border\n            {...props}\n        />\n    );\n}\n\nexport function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n    return <tbody className={classNames(className)} {...props} />;\n}\n\nexport function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n    return <tfoot className={classNames('border-t font-medium last:[&>tr]:border-b-0', className)} {...props} />;\n}\n\nexport function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {\n    return <tr className={classNames('border-b border-border', className)} {...props} />;\n}\n\nexport function TableHead({ className, ...props }: React.ComponentProps<'th'>) {\n    return <th className={classNames('text-left align-middle font-medium', className)} {...props} />;\n}\n\nexport function TableCell({ className, ...props }: React.ComponentProps<'td'>) {\n    return <td className={classNames('[&_tr:last-child]:border-dotted', className)} {...props} />;\n}\n\nexport function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {\n    return <caption className={classNames('mt-icon text-muted-foreground', className)} {...props} />;\n}\n"],"names":["Table","className","props","jsx","classNames","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"mappings":"yGAEO,SAASA,EAAM,CAAE,UAAAC,EAAW,GAAGC,GAAwC,CAC1E,OACIC,EAAC,QAAA,CACG,UAAWC,EAAW,8DAA+DH,CAAS,EAC7F,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASG,EAAY,CAAE,UAAAJ,EAAW,GAAGC,GAAwC,CAChF,OACIC,EAAC,QAAA,CACG,UAAWC,EAAW,2BAA4BH,CAAS,EAC1D,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASI,EAAU,CAAE,UAAAL,EAAW,GAAGC,GAAwC,CAC9E,SAAQ,QAAA,CAAM,UAAWE,EAAWH,CAAS,EAAI,GAAGC,EAAO,CAC/D,CAEO,SAASK,EAAY,CAAE,UAAAN,EAAW,GAAGC,GAAwC,CAChF,OAAOC,EAAC,SAAM,UAAWC,EAAW,8CAA+CH,CAAS,EAAI,GAAGC,EAAO,CAC9G,CAEO,SAASM,EAAS,CAAE,UAAAP,EAAW,GAAGC,GAAqC,CAC1E,OAAOC,EAAC,MAAG,UAAWC,EAAW,yBAA0BH,CAAS,EAAI,GAAGC,EAAO,CACtF,CAEO,SAASO,EAAU,CAAE,UAAAR,EAAW,GAAGC,GAAqC,CAC3E,OAAOC,EAAC,MAAG,UAAWC,EAAW,qCAAsCH,CAAS,EAAI,GAAGC,EAAO,CAClG,CAEO,SAASQ,EAAU,CAAE,UAAAT,EAAW,GAAGC,GAAqC,CAC3E,OAAOC,EAAC,MAAG,UAAWC,EAAW,kCAAmCH,CAAS,EAAI,GAAGC,EAAO,CAC/F,CAEO,SAASS,EAAa,CAAE,UAAAV,EAAW,GAAGC,GAA0C,CACnF,OAAOC,EAAC,WAAQ,UAAWC,EAAW,gCAAiCH,CAAS,EAAI,GAAGC,EAAO,CAClG"}
+{"version":3,"file":"table.js","sources":["../../lib/components/table.tsx"],"sourcesContent":["import { classNames } from '../utils/primitives';\n\nexport function Table({ className, ...props }: React.ComponentProps<'table'>) {\n    return (\n        <table\n            className={classNames('caption-bottom [&_tr:last-child]:border-0 whitespace-nowrap', className)}\n            {...props}\n        />\n    );\n}\n\nexport function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n    return (\n        <thead\n            className={classNames('[&_tr]:border-b border-b', className)} // Added border-b to apply a bottom border\n            {...props}\n        />\n    );\n}\n\nexport function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n    return <tbody className={classNames(className)} {...props} />;\n}\n\nexport function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n    return <tfoot className={classNames('border-t font-medium last:[&>tr]:border-b-0', className)} {...props} />;\n}\n\nexport function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {\n    return <tr className={classNames('border-b border-border', className)} {...props} />;\n}\n\nexport function TableHead({ className, ...props }: React.ComponentProps<'th'>) {\n    return <th className={classNames('text-left align-middle font-medium', className)} {...props} />;\n}\n\nexport function TableCell({ className, ...props }: React.ComponentProps<'td'>) {\n    return <td className={classNames('[&_tr:last-child]:border-dotted', className)} {...props} />;\n}\n\nexport function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {\n    return <caption className={classNames('mt-icon text-muted-foreground', className)} {...props} />;\n}\n"],"names":["Table","className","props","jsx","classNames","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"mappings":"2HAEO,SAASA,EAAM,CAAE,UAAAC,EAAW,GAAGC,GAAwC,CAC1E,OACIC,EAAC,QAAA,CACG,UAAWC,EAAW,8DAA+DH,CAAS,EAC7F,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASG,EAAY,CAAE,UAAAJ,EAAW,GAAGC,GAAwC,CAChF,OACIC,EAAC,QAAA,CACG,UAAWC,EAAW,2BAA4BH,CAAS,EAC1D,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASI,EAAU,CAAE,UAAAL,EAAW,GAAGC,GAAwC,CAC9E,SAAQ,QAAA,CAAM,UAAWE,EAAWH,CAAS,EAAI,GAAGC,EAAO,CAC/D,CAEO,SAASK,EAAY,CAAE,UAAAN,EAAW,GAAGC,GAAwC,CAChF,OAAOC,EAAC,SAAM,UAAWC,EAAW,8CAA+CH,CAAS,EAAI,GAAGC,EAAO,CAC9G,CAEO,SAASM,EAAS,CAAE,UAAAP,EAAW,GAAGC,GAAqC,CAC1E,OAAOC,EAAC,MAAG,UAAWC,EAAW,yBAA0BH,CAAS,EAAI,GAAGC,EAAO,CACtF,CAEO,SAASO,EAAU,CAAE,UAAAR,EAAW,GAAGC,GAAqC,CAC3E,OAAOC,EAAC,MAAG,UAAWC,EAAW,qCAAsCH,CAAS,EAAI,GAAGC,EAAO,CAClG,CAEO,SAASQ,EAAU,CAAE,UAAAT,EAAW,GAAGC,GAAqC,CAC3E,OAAOC,EAAC,MAAG,UAAWC,EAAW,kCAAmCH,CAAS,EAAI,GAAGC,EAAO,CAC/F,CAEO,SAASS,EAAa,CAAE,UAAAV,EAAW,GAAGC,GAA0C,CACnF,OAAOC,EAAC,WAAQ,UAAWC,EAAW,gCAAiCH,CAAS,EAAI,GAAGC,EAAO,CAClG"}

package/dist/components/tabs.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as n}from"react/jsx-runtime";import{useRef as c,useEffect as u}from"react";import{Tabs as b,composeRenderProps as o,TabList as f,Tab as m,TabPanel as d}from"react-aria-components";import{classNames as i}from"../utils/primitives.js";import"clsx";function h({className:t,...a}){return n(b,{className:o(t,e=>i("group flex flex-col gap-2","data-[orientation=vertical]:flex-row",e)),...a})}function w({className:t,...a}){const e=c(null);return u(()=>{const r=e.current;if(!r)return;const s=new MutationObserver(()=>{const l=r.querySelector("[data-selected]");l&&requestAnimationFrame(()=>{l.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})})});return s.observe(r,{attributes:!0,subtree:!0,attributeFilter:["data-selected"]}),()=>s.disconnect()},[]),n(f,{ref:e,className:o(t,r=>i("inline-flex items-center text-muted-foreground overflow-auto","data-[orientation=horizontal]:border-b data-[orientation=vertical]:h-auto data-[orientation=vertical]:border-e data-[orientation=vertical]:flex-col",r)),...a})}function N({className:t,...a}){return n(m,{className:o(t,e=>i("btn btn-ghost leading-none text-accent h-input truncate inline-flex items-center px-3 body-sm font-medium transition-all","data-[selected]:bg-primary/20 data-[selected]:text-primary","group-data-[orientation=vertical]:w-full",e)),...a})}function y({className:t,...a}){return n(d,{className:o(t,e=>i("ring-offset-background","focus-ring",e)),...a})}export{N as Tab,w as TabList,y as TabPanel,h as Tabs};
+"use client";import{jsx as n}from"react/jsx-runtime";import{useRef as c,useEffect as u}from"react";import{Tabs as b,composeRenderProps as o,TabList as f,Tab as m,TabPanel as d}from"react-aria-components";import{classNames as i}from"../utils/primitives.js";import"clsx";import"lodash-es";function w({className:t,...a}){return n(b,{className:o(t,e=>i("group flex flex-col gap-2","data-[orientation=vertical]:flex-row",e)),...a})}function N({className:t,...a}){const e=c(null);return u(()=>{const r=e.current;if(!r)return;const s=new MutationObserver(()=>{const l=r.querySelector("[data-selected]");l&&requestAnimationFrame(()=>{l.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})})});return s.observe(r,{attributes:!0,subtree:!0,attributeFilter:["data-selected"]}),()=>s.disconnect()},[]),n(f,{ref:e,className:o(t,r=>i("inline-flex items-center text-muted-foreground overflow-auto","data-[orientation=horizontal]:border-b data-[orientation=vertical]:h-auto data-[orientation=vertical]:border-e data-[orientation=vertical]:flex-col",r)),...a})}function y({className:t,...a}){return n(m,{className:o(t,e=>i("btn btn-ghost leading-none text-accent h-input truncate inline-flex items-center px-3 body-sm font-medium transition-all","data-[selected]:bg-primary/20 data-[selected]:text-primary","group-data-[orientation=vertical]:w-full",e)),...a})}function L({className:t,...a}){return n(d,{className:o(t,e=>i("ring-offset-background","focus-ring",e)),...a})}export{y as Tab,N as TabList,L as TabPanel,w as Tabs};
 //# sourceMappingURL=tabs.js.map