@cryptlex/web-components 6.5.2 → 6.5.3

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":"+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"}
+{"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                    isNonModal={false}\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\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    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,WAAY,GACZ,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,CAGO,SAASE,EAAc,CAAE,GAAGP,GAA6B,CAC5D,MAAMQ,EAAQC,EAA4B,CACtC,SAAUT,EAAM,UAAA,CACnB,EAED,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/searchfield.js

@@ -1,2 +1,2 @@
-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};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{composeRenderProps as a,SearchField as s,Input as p,Button as m}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(p,{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(m,{className:a(r,o=>t("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 {\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"}
+{"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                    '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,uDAEA,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 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};
+"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 S}from"react-aria-components";import{Button as h}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 w,ListBoxHeader as C,ListBoxCollection as F}from"./list-box.js";import{Popover as L}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 v=p,b=w,U=C,W=F,I=({className:r,...t})=>o(f,{className:i(r,e=>l("line-clamp-1 data-[placeholder]:text-muted-foreground","[&>[slot=description]]:hidden",e)),...t});function M({className:r,children:t,...e}){return o(h,{...e,children:i(t,n=>c(u,{children:[n,o(N,{"aria-hidden":"true",className:"size-icon opacity-50"})]}))})}function P({className:r,...t}){return o(L,{isNonModal:!0,className:i(r,e=>l("w-auto min-w-[--trigger-width]",e)),...t})}function T({className:r,...t}){return o(S,{className:i(r,e=>l("overflow-auto p-1 outline-none",e)),...t})}function V({label:r,description:t,errorMessage:e,children:n,className:s,items:a,...m}){return o(v,{className:i(s,d=>l("group form-field",d)),...m,children:c(g,{label:r,description:t,errorMessage:e,children:[o(M,{children:o(I,{})}),o(P,{children:o(T,{items:a,children:n})})]})})}function X({...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(b,{id:e.id,children:e.label},e.id)})}export{W as SelectCollection,U as SelectHeader,b as SelectItem,P as SelectPopover,I as SelectValue,V as SingleSelect,X 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 { 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"}
+{"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            isNonModal\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('overflow-auto p-1 outline-none', className)\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,WAAU,GACV,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,EAAW,iCAAkCL,CAAS,CAAA,EAEzD,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

@@ -18,27 +18,21 @@ export declare function SidebarProvider({ defaultOpen, open: openProp, onOpenCha
 }): import("react/jsx-runtime").JSX.Element;
 export declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<'div'> & {
     side?: 'left' | 'right';
-    variant?: 'sidebar' | 'floating' | 'inset';
+    variant?: 'sidebar' | 'floating';
     collapsible?: 'offcanvas' | 'icon' | 'none';
 }): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
-export declare const SidebarRail: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-export declare function SidebarInset({ className, ...props }: React.ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarGroupLabel({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarGroupAction({ className, ...props }: React.ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarMenuAction({ className, showOnHover, ...props }: React.ComponentProps<'button'> & {
+export declare function SidebarMenuAction({ className, ...props }: React.ComponentProps<'button'> & {
     showOnHover?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
-    showIcon?: boolean;
+export declare function SidebarMenuBadge({ className, number, ...props }: Omit<React.ComponentProps<'div'>, 'children'> & {
+    number: number | bigint;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
 export declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/sidebar.js

@@ -1,2 +1,2 @@
-"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};
+"use client";import{jsx as t,Fragment as C,jsxs as S}from"react/jsx-runtime";import{createContext as O,use as _,useState as v,useCallback as x,useEffect as D,useMemo as I}from"react";import{Button as T}from"./button.js";import{DialogTrigger as B,DialogOverlay as E,DialogContent as z}from"./dialog.js";import{TooltipTrigger as G,Tooltip as K}from"./tooltip.js";import{classNames as i}from"../utils/primitives.js";import{useIsMobile as L}from"../utils/use-mobile.js";import{IcLeft as R,IcRight as j}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"lodash-es";const A="/",N=O(null);function h(){const e=_(N);if(!e)throw new Error("useSidebar must be used within a SidebarProvider.");return e}function ee({defaultOpen:e=!0,open:a,onOpenChange:n,className:l,style:d,children:o,...c}){const s=L(),[f,b]=v(!1),[M,y]=v(e),p=a??M,g=x(r=>{const u=typeof r=="function"?r(p):r;n?n(u):y(u)},[n,p]),m=x(()=>s?b(r=>!r):g(r=>!r),[s,g,b]);D(()=>{const r=u=>{u.key===A&&(u.metaKey||u.ctrlKey)&&(u.preventDefault(),m())};return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[m]);const w=p?"expanded":"collapsed",k=I(()=>({state:w,open:p,setOpen:g,isMobile:s,openMobile:f,setOpenMobile:b,toggleSidebar:m}),[w,p,g,s,f,b,m]);return t(N.Provider,{value:k,children:t("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background",l),...c,children:o})})}function ae({side:e="left",variant:a="sidebar",collapsible:n="offcanvas",className:l,children:d,...o}){const{isMobile:c,state:s,openMobile:f,setOpenMobile:b}=h();return n==="none"?t("div",{className:i("flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground",l),...o,children:d}):c?t(B,{isOpen:f,onOpenChange:b,...o,children:t(E,{children:t(z,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>t(C,{children:d})})})}):S("div",{className:"group peer hidden text-sidebar-foreground md:block","data-state":s,"data-collapsible":s==="collapsed"?n:"","data-variant":a,"data-side":e,children:[t("div",{className:i("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",a==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon]")}),t("div",{className:i("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",e==="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)]",a==="floating"?"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",l),...o,children:t("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 te({className:e,onClick:a,...n}){const{toggleSidebar:l,open:d}=h();return t(T,{"data-sidebar":"trigger",variant:"neutral",size:"icon",className:"rounded-full",onClick:o=>{a?.(o),l()},...n,children:d?t(R,{}):t(j,{})})}function ie({className:e,...a}){return t("div",{"data-sidebar":"content",className:i("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",e),...a})}function ne({className:e,...a}){return t("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col p-2",e),...a})}function re({className:e,...a}){return t("div",{"data-sidebar":"group-label",className:i("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",e),...a})}function oe({className:e,...a}){return t("div",{"data-sidebar":"group-content",className:i("w-full body-sm",e),...a})}function le({className:e,...a}){return t("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",e),...a})}function de({className:e,...a}){return t("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none",e),...a})}function se({className:e,...a}){return t("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input px-1","group-data-[collapsible=icon]:hidden",e),...a})}function ue({className:e,number:a,...n}){return t("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-300 h-input select-none px-2 flex items-center justify-center body-sm tabular-nums","group-data-[collapsible=icon]:hidden",e),...n,children:new Intl.NumberFormat(navigator.language,{useGrouping:!0}).format(a)})}function ce({className:e,...a}){return t("ul",{"data-sidebar":"menu-sub",className:i("mx-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",e),...a})}function be({className:e,...a}){return t("li",{className:i("list-none ms-0",e),...a})}function pe({isActive:e=!1,tooltip:a,className:n,...l}){const{isMobile:d,state:o}=h(),c=t("button",{"data-sidebar":"menu-button","data-selected":e,className:i("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 ","btn-tab w-full",n),...l});return a?S(G,{children:[c,t(K,{hidden:o!=="collapsed"||d,...a})]}):c}function fe({isActive:e,className:a,...n}){return t("button",{"data-sidebar":"menu-sub-button","data-active":e,className:i("-translate-x-px [&>svg]:text-accent-foreground","group-data-[collapsible=icon]:hidden","btn-tab w-full",a),...n})}function ge({className:e,...a}){return t("div",{className:i(e,"w-full overflow-auto"),...a})}export{ae as Sidebar,ie as SidebarContent,N as SidebarContext,ne as SidebarGroup,oe as SidebarGroupContent,re as SidebarGroupLabel,le as SidebarMenu,se as SidebarMenuAction,ue as SidebarMenuBadge,pe as SidebarMenuButton,de as SidebarMenuItem,ce as SidebarMenuSub,fe as SidebarMenuSubButton,be as SidebarMenuSubItem,ge as SidebarOutlet,ee as SidebarProvider,te 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';\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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"}
+{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../components/button';\nimport { DialogContent, DialogOverlay, DialogTrigger } from '../components/dialog';\nimport { Tooltip, TooltipTrigger } from '../components/tooltip';\nimport { classNames } from '../utils/primitives';\nimport { useIsMobile } from '../utils/use-mobile';\nimport { IcLeft, IcRight } from './icons';\n\nconst SIDEBAR_KEYBOARD_SHORTCUT = '/';\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        [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                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';\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 isOpen={openMobile} onOpenChange={setOpenMobile} {...props}>\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'\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 variant.\n                    variant === 'floating'\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            className={'rounded-full'}\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\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}\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\nexport function SidebarMenuAction({\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    showOnHover?: boolean;\n}) {\n    return (\n        <button\n            data-sidebar=\"menu-action\"\n            className={classNames(\n                'absolute top-0 right-0 btn btn-ghost h-input px-1',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function SidebarMenuBadge({\n    className,\n    number,\n    ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n    number: number | bigint;\n}) {\n    return (\n        <div\n            data-sidebar=\"menu-badge\"\n            className={classNames(\n                'absolute pointer-events-none top-0 right-0 font-300 h-input select-none px-2 flex items-center justify-center body-sm tabular-nums',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        >\n            {/* Format the number  */}\n            {new Intl.NumberFormat(navigator.language, { useGrouping: true }).format(number)}\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\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-selected={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                'btn-tab w-full',\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                'btn-tab w-full',\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_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","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarOutlet"],"mappings":"qnBAUA,MAAMA,EAA4B,IAYrBC,EAAiBC,EAA0C,IAAI,EAErE,SAASC,GAAa,CACzB,MAAMC,EAAUC,EAAIJ,CAAc,EAClC,GAAI,CAACG,EACD,MAAM,IAAI,MAAM,mDAAmD,EAGvE,OAAOA,CACX,CAEO,SAASE,GAAgB,CAC5B,YAAAC,EAAc,GACd,KAAMC,EACN,aAAcC,EACd,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACP,EAIG,CACC,MAAMC,EAAWC,EAAA,EACX,CAACC,EAAYC,CAAa,EAAIC,EAAS,EAAK,EAI5C,CAACC,EAAOC,CAAQ,EAAIF,EAASX,CAAW,EACxCc,EAAOb,GAAYW,EACnBG,EAAUC,EACXC,GAAmD,CAChD,MAAMC,EAAY,OAAOD,GAAU,WAAaA,EAAMH,CAAI,EAAIG,EAC1Df,EACAA,EAAYgB,CAAS,EAErBL,EAASK,CAAS,CAE1B,EACA,CAAChB,EAAaY,CAAI,CAAA,EAIhBK,EAAgBH,EAAY,IACvBT,EAAWG,EAAcI,GAAQ,CAACA,CAAI,EAAIC,EAAQD,GAAQ,CAACA,CAAI,EACvE,CAACP,EAAUQ,EAASL,CAAa,CAAC,EAGrCU,EAAU,IAAM,CACZ,MAAMC,EAAiBC,GAAyB,CACxCA,EAAM,MAAQ7B,IAA8B6B,EAAM,SAAWA,EAAM,WACnEA,EAAM,eAAA,EACNH,EAAA,EAER,EAEA,cAAO,iBAAiB,UAAWE,CAAa,EACzC,IAAM,OAAO,oBAAoB,UAAWA,CAAa,CACpE,EAAG,CAACF,CAAa,CAAC,EAIlB,MAAMI,EAAQT,EAAO,WAAa,YAE5BU,EAAeC,EACjB,KAAO,CACH,MAAAF,EACA,KAAAT,EACA,QAAAC,EACA,SAAAR,EACA,WAAAE,EACA,cAAAC,EACA,cAAAS,CAAA,GAEJ,CAACI,EAAOT,EAAMC,EAASR,EAAUE,EAAYC,EAAeS,CAAa,CAAA,EAG7E,OACIO,EAAChC,EAAe,SAAf,CAAwB,MAAO8B,EAC5B,SAAAE,EAAC,MAAA,CACG,UAAWC,EACP,qFACAxB,CAAA,EAEH,GAAGG,EAEH,SAAAD,CAAA,CAAA,EAET,CAER,CAEO,SAASuB,GAAQ,CACpB,KAAAC,EAAO,OACP,QAAAC,EAAU,UACV,YAAAC,EAAc,YACd,UAAA5B,EACA,SAAAE,EACA,GAAGC,CACP,EAIG,CACC,KAAM,CAAE,SAAAC,EAAU,MAAAgB,EAAO,WAAAd,EAAY,cAAAC,CAAA,EAAkBd,EAAA,EAEvD,OAAImC,IAAgB,OAEZL,EAAC,MAAA,CACG,UAAWC,EACP,yFACAxB,CAAA,EAEH,GAAGG,EAEH,SAAAD,CAAA,CAAA,EAKTE,EAEImB,EAACM,GAAc,OAAQvB,EAAY,aAAcC,EAAgB,GAAGJ,EAChE,SAAAoB,EAACO,EAAA,CACG,SAAAP,EAACQ,EAAA,CACG,eAAa,UACb,cAAY,OACZ,UAAU,oEACV,KAAK,OAEJ,SAAA,SAAS,SAAA7B,CAAA,CAAS,CAAA,CAAA,EAE3B,CAAA,CACJ,EAKJ8B,EAAC,MAAA,CACG,UAAU,qDACV,aAAYZ,EACZ,mBAAkBA,IAAU,YAAcQ,EAAc,GACxD,eAAcD,EACd,YAAWD,EAGX,SAAA,CAAAH,EAAC,MAAA,CACG,UAAWC,EACP,iGACA,yCACA,qCACAG,IAAY,WACN,uFACA,wDAAA,CACV,CAAA,EAEJJ,EAAC,MAAA,CACG,UAAWC,EACP,0GACAE,IAAS,OACH,iFACA,mFAENC,IAAY,WACN,gGACA,0HACN3B,CAAA,EAEH,GAAGG,EAEJ,SAAAoB,EAAC,MAAA,CACG,eAAa,UACb,UAAU,0KAET,SAAArB,CAAA,CAAA,CACL,CAAA,CACJ,CAAA,CAAA,CAGZ,CAEO,SAAS+B,GAAe,CAAE,UAAAjC,EAAW,QAAAkC,EAAS,GAAG/B,GAA8C,CAClG,KAAM,CAAE,cAAAa,EAAe,KAAAL,CAAA,EAASlB,EAAA,EAEhC,OACI8B,EAACY,EAAA,CACG,eAAa,UACb,QAAQ,UACR,KAAK,OACL,UAAW,eACX,QAAShB,GAAS,CACde,IAAUf,CAAK,EACfH,EAAA,CACJ,EACC,GAAGb,EAGH,SAAAQ,EAAOY,EAACa,EAAA,CAAA,CAAO,IAAMC,EAAA,CAAA,CAAQ,CAAA,CAAA,CAG1C,CAEO,SAASC,GAAe,CAAE,UAAAtC,EAAW,GAAGG,GAAsC,CACjF,OACIoB,EAAC,MAAA,CACG,eAAa,UACb,UAAWC,EACP,iGACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASoC,GAAa,CAAE,UAAAvC,EAAW,GAAGG,GAAsC,CAC/E,OACIoB,EAAC,MAAA,CACG,eAAa,QACb,UAAWC,EAAW,4CAA6CxB,CAAS,EAC3E,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASqC,GAAkB,CAAE,UAAAxC,EAAW,GAAGG,GAAsC,CACpF,OACIoB,EAAC,MAAA,CACG,eAAa,cACb,UAAWC,EACP,6NACA,kFACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASsC,GAAoB,CAAE,UAAAzC,EAAW,GAAGG,GAAsC,CACtF,OAAOoB,EAAC,MAAA,CAAI,eAAa,gBAAgB,UAAWC,EAAW,iBAAkBxB,CAAS,EAAI,GAAGG,CAAA,CAAO,CAC5G,CAEO,SAASuC,GAAY,CAAE,UAAA1C,EAAW,GAAGG,GAAqC,CAC7E,OAAOoB,EAAC,KAAA,CAAG,eAAa,OAAO,UAAWC,EAAW,+BAAgCxB,CAAS,EAAI,GAAGG,CAAA,CAAO,CAChH,CAEO,SAASwC,GAAgB,CAAE,UAAA3C,EAAW,GAAGG,GAAqC,CACjF,OACIoB,EAAC,KAAA,CACG,eAAa,YACb,UAAWC,EAAW,qCAAsCxB,CAAS,EACpE,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASyC,GAAkB,CAC9B,UAAA5C,EACA,GAAGG,CACP,EAEG,CACC,OACIoB,EAAC,SAAA,CACG,eAAa,cACb,UAAWC,EACP,oDACA,uCACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAAS0C,GAAiB,CAC7B,UAAA7C,EACA,OAAA8C,EACA,GAAG3C,CACP,EAEG,CACC,OACIoB,EAAC,MAAA,CACG,eAAa,aACb,UAAWC,EACP,qIACA,uCACAxB,CAAA,EAEH,GAAGG,EAGH,SAAA,IAAI,KAAK,aAAa,UAAU,SAAU,CAAE,YAAa,EAAA,CAAM,EAAE,OAAO2C,CAAM,CAAA,CAAA,CAG3F,CAEO,SAASC,GAAe,CAAE,UAAA/C,EAAW,GAAGG,GAAqC,CAChF,OACIoB,EAAC,KAAA,CACG,eAAa,WACb,UAAWC,EACP,oDACA,uCACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAAS6C,GAAmB,CAAE,UAAAhD,EAAW,GAAGG,GAAqC,CACpF,OAAOoB,EAAC,MAAG,UAAWC,EAAW,iBAAkBxB,CAAS,EAAI,GAAGG,EAAO,CAC9E,CAGO,SAAS8C,GAAkB,CAC9B,SAAAC,EAAW,GACX,QAAAC,EACA,UAAAnD,EACA,GAAGG,CACP,EAGG,CACC,KAAM,CAAE,SAAAC,EAAU,MAAAgB,CAAA,EAAU3B,EAAA,EAEtB2D,EACF7B,EAAC,SAAA,CACG,eAAa,cACb,gBAAe2B,EACf,UAAW1B,EACP,0JACA,iBACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,EAIZ,OAAKgD,IAKAE,EAAA,CACI,SAAA,CAAAD,IACAE,EAAA,CAAQ,OAAQlC,IAAU,aAAehB,EAAW,GAAG+C,CAAA,CAAS,CAAA,EACrE,EAPOC,CASf,CAEO,SAASG,GAAqB,CACjC,SAAAL,EACA,UAAAlD,EACA,GAAGG,CACP,EAEG,CACC,OACIoB,EAAC,SAAA,CACG,eAAa,kBACb,cAAa2B,EACb,UAAW1B,EACP,iDACA,uCACA,iBACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASqD,GAAc,CAAE,UAAAxD,EAAW,GAAGG,GAAsC,CAChF,OAAOoB,EAAC,OAAI,UAAWC,EAAWxB,EAAW,sBAAsB,EAAI,GAAGG,EAAO,CACrF"}

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";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};
+"use client";import{jsx as o}from"react/jsx-runtime";import{useRef as c,useEffect as u}from"react";import{Tabs as b,composeRenderProps as n,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 N({className:t,...r}){return o(b,{className:n(t,e=>i("group flex flex-col gap-2","data-[orientation=vertical]:flex-row",e)),...r})}function h({className:t,...r}){const e=c(null);return u(()=>{const a=e.current;if(!a)return;const s=new MutationObserver(()=>{const l=a.querySelector("[data-selected]");l&&requestAnimationFrame(()=>{l.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})})});return s.observe(a,{attributes:!0,subtree:!0,attributeFilter:["data-selected"]}),()=>s.disconnect()},[]),o(f,{ref:e,className:n(t,a=>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",a)),...r})}function L({className:t,...r}){return o(m,{className:n(t,e=>i("btn-tab","group-data-[orientation=vertical]:w-full",e)),...r})}function P({className:t,...r}){return o(d,{className:n(t,e=>i("ring-offset-background","focus-ring",e)),...r})}export{L as Tab,h as TabList,P as TabPanel,N as Tabs};
 //# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../lib/components/tabs.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useRef } from 'react';\nimport {\n    Tab as AriaTab,\n    TabList as AriaTabList,\n    TabListProps as AriaTabListProps,\n    TabPanel as AriaTabPanel,\n    TabPanelProps as AriaTabPanelProps,\n    TabProps as AriaTabProps,\n    Tabs as AriaTabs,\n    TabsProps as AriaTabsProps,\n    composeRenderProps,\n} from 'react-aria-components';\nimport { classNames } from '../utils/primitives';\n\nexport function Tabs({ className, ...props }: AriaTabsProps) {\n    return (\n        <AriaTabs\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'group flex flex-col gap-2',\n                    /* Orientation */\n                    'data-[orientation=vertical]:flex-row',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function TabList<T extends object>({ className, ...props }: AriaTabListProps<T>) {\n    const listRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const tabList = listRef.current;\n        if (!tabList) return;\n\n        const observer = new MutationObserver(() => {\n            const activeTab = tabList.querySelector<HTMLElement>('[data-selected]');\n\n            if (activeTab) {\n                requestAnimationFrame(() => {\n                    activeTab.scrollIntoView({\n                        behavior: 'smooth',\n                        inline: 'center',\n                        block: 'nearest',\n                    });\n                });\n            }\n        });\n\n        observer.observe(tabList, {\n            attributes: true,\n            subtree: true,\n            attributeFilter: ['data-selected'],\n        });\n\n        return () => observer.disconnect();\n    }, []);\n\n    return (\n        <AriaTabList\n            ref={listRef}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'inline-flex items-center text-muted-foreground overflow-auto',\n                    /* Orientation */\n                    'data-[orientation=horizontal]:border-b data-[orientation=vertical]:h-auto data-[orientation=vertical]:border-e data-[orientation=vertical]:flex-col',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function Tab({ className, ...props }: AriaTabProps) {\n    return (\n        <AriaTab\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'btn btn-ghost leading-none text-accent h-input truncate inline-flex items-center px-3 body-sm font-medium transition-all',\n                    /* Selected */\n                    'data-[selected]:bg-primary/20 data-[selected]:text-primary',\n                    /* Orientation */\n                    'group-data-[orientation=vertical]:w-full',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function TabPanel({ className, ...props }: AriaTabPanelProps) {\n    return (\n        <AriaTabPanel\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'ring-offset-background',\n                    /* Focus Visible */\n                    'focus-ring',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n"],"names":["Tabs","className","props","jsx","AriaTabs","composeRenderProps","classNames","TabList","listRef","useRef","useEffect","tabList","observer","activeTab","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"mappings":"+RAeO,SAASA,EAAK,CAAE,UAAAC,EAAW,GAAGC,GAAwB,CACzD,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,4BAEA,uCACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASK,EAA0B,CAAE,UAAAN,EAAW,GAAGC,GAA8B,CACpF,MAAMM,EAAUC,EAAuB,IAAI,EAE3C,OAAAC,EAAU,IAAM,CACZ,MAAMC,EAAUH,EAAQ,QACxB,GAAI,CAACG,EAAS,OAEd,MAAMC,EAAW,IAAI,iBAAiB,IAAM,CACxC,MAAMC,EAAYF,EAAQ,cAA2B,iBAAiB,EAElEE,GACA,sBAAsB,IAAM,CACxBA,EAAU,eAAe,CACrB,SAAU,SACV,OAAQ,SACR,MAAO,SAAA,CACV,CACL,CAAC,CAET,CAAC,EAED,OAAAD,EAAS,QAAQD,EAAS,CACtB,WAAY,GACZ,QAAS,GACT,gBAAiB,CAAC,eAAe,CAAA,CACpC,EAEM,IAAMC,EAAS,WAAA,CAC1B,EAAG,CAAA,CAAE,EAGDT,EAACW,EAAA,CACG,IAAKN,EACL,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,+DAEA,sJACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASa,EAAI,CAAE,UAAAd,EAAW,GAAGC,GAAuB,CACvD,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GACrCK,EACI,2HAEA,6DAEA,2CACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASe,EAAS,CAAE,UAAAhB,EAAW,GAAGC,GAA4B,CACjE,OACIC,EAACe,EAAA,CACG,UAAWb,EAAmBJ,EAAWA,GACrCK,EACI,yBAEA,aACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB"}
+{"version":3,"file":"tabs.js","sources":["../../lib/components/tabs.tsx"],"sourcesContent":["'use client';\nimport { useEffect, useRef } from 'react';\nimport {\n    Tab as AriaTab,\n    TabList as AriaTabList,\n    TabListProps as AriaTabListProps,\n    TabPanel as AriaTabPanel,\n    TabPanelProps as AriaTabPanelProps,\n    TabProps as AriaTabProps,\n    Tabs as AriaTabs,\n    TabsProps as AriaTabsProps,\n    composeRenderProps,\n} from 'react-aria-components';\nimport { classNames } from '../utils/primitives';\n\nexport function Tabs({ className, ...props }: AriaTabsProps) {\n    return (\n        <AriaTabs\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'group flex flex-col gap-2',\n                    /* Orientation */\n                    'data-[orientation=vertical]:flex-row',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function TabList<T extends object>({ className, ...props }: AriaTabListProps<T>) {\n    const listRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const tabList = listRef.current;\n        if (!tabList) return;\n\n        const observer = new MutationObserver(() => {\n            const activeTab = tabList.querySelector<HTMLElement>('[data-selected]');\n\n            if (activeTab) {\n                requestAnimationFrame(() => {\n                    activeTab.scrollIntoView({\n                        behavior: 'smooth',\n                        inline: 'center',\n                        block: 'nearest',\n                    });\n                });\n            }\n        });\n\n        observer.observe(tabList, {\n            attributes: true,\n            subtree: true,\n            attributeFilter: ['data-selected'],\n        });\n\n        return () => observer.disconnect();\n    }, []);\n\n    return (\n        <AriaTabList\n            ref={listRef}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'inline-flex items-center text-muted-foreground overflow-auto',\n                    /* Orientation */\n                    'data-[orientation=horizontal]:border-b data-[orientation=vertical]:h-auto data-[orientation=vertical]:border-e data-[orientation=vertical]:flex-col',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function Tab({ className, ...props }: AriaTabProps) {\n    return (\n        <AriaTab\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'btn-tab',\n                    /* Orientation */\n                    'group-data-[orientation=vertical]:w-full',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function TabPanel({ className, ...props }: AriaTabPanelProps) {\n    return (\n        <AriaTabPanel\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'ring-offset-background',\n                    /* Focus Visible */\n                    'focus-ring',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n"],"names":["Tabs","className","props","jsx","AriaTabs","composeRenderProps","classNames","TabList","listRef","useRef","useEffect","tabList","observer","activeTab","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"mappings":"+RAeO,SAASA,EAAK,CAAE,UAAAC,EAAW,GAAGC,GAAwB,CACzD,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,4BAEA,uCACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASK,EAA0B,CAAE,UAAAN,EAAW,GAAGC,GAA8B,CACpF,MAAMM,EAAUC,EAAuB,IAAI,EAE3C,OAAAC,EAAU,IAAM,CACZ,MAAMC,EAAUH,EAAQ,QACxB,GAAI,CAACG,EAAS,OAEd,MAAMC,EAAW,IAAI,iBAAiB,IAAM,CACxC,MAAMC,EAAYF,EAAQ,cAA2B,iBAAiB,EAElEE,GACA,sBAAsB,IAAM,CACxBA,EAAU,eAAe,CACrB,SAAU,SACV,OAAQ,SACR,MAAO,SAAA,CACV,CACL,CAAC,CAET,CAAC,EAED,OAAAD,EAAS,QAAQD,EAAS,CACtB,WAAY,GACZ,QAAS,GACT,gBAAiB,CAAC,eAAe,CAAA,CACpC,EAEM,IAAMC,EAAS,WAAA,CAC1B,EAAG,CAAA,CAAE,EAGDT,EAACW,EAAA,CACG,IAAKN,EACL,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,+DAEA,sJACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASa,EAAI,CAAE,UAAAd,EAAW,GAAGC,GAAuB,CACvD,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GACrCK,EACI,UAEA,2CACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASe,EAAS,CAAE,UAAAhB,EAAW,GAAGC,GAA4B,CACjE,OACIC,EAACe,EAAA,CACG,UAAWb,EAAmBJ,EAAWA,GACrCK,EACI,yBAEA,aACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB"}

package/dist/utils/resource-names.js

@@ -1,2 +1,2 @@
-import{jsx as s}from"react/jsx-runtime";import{createContext as n,use as i}from"react";import{toTitleCase as l}from"./primitives.js";import"clsx";import"lodash-es";const t={"product.displayName":"Product"},y=["access-token","account","activation","activation-log","admin-role","audit-log","automated-email","automated-email-event-log","card","feature-flag","invoice","license","license-template","maintenance-policy","organization","plan","product","product-version","profile","release","release-channel","release-file","release-platform","report","role","role-claim","saml-configuration","segment","sending-domain","setting","tag","team-member","trial","trial-policy","user","user-group","webhook","webhook-event-log","webhook-trigger","reseller","oidc-configuration","organization-claim","reseller-claim"],h={account:"Your organization account.",product:"Products are the software products you want to license",license:"Licenses represent a purchase of your software. These can be linked to customers, and the license key is required to use the product.","access-token":"Access Tokens are used to authenticate your API requests.",activation:"Activations, also known as devices/machines/seats are the devices consuming licenses.","activation-log":"Activation Log is a log entry of activation/deactivation of a particular license.",trial:"Trial/Trial Activation is a device that has activated a trial of your product.","audit-log":"Audit logs contain all the changes made to your account.","automated-email":"Automated Email allow you to send marketing emails based on events on the linked product.","automated-email-event-log":"Automated email event log is the log of all the automated email events for your product.",card:"The payment card for your account.","feature-flag":"Feature flags define features that make up tiers for your products.",invoice:"","license-template":"License templates are a blueprint for the licenses you create for your customers and prevent repetition when creating licenses.","maintenance-policy":"Maintenance policies represent support contracts and can be linked to licenses.",plan:"","product-version":"Product Versions are sets of Feature Flags that define the tiers of your products.","release-channel":"Release channel is the release channel for your product.","release-file":"Release files are files within your created releases.","release-platform":'Release Platforms differentiate the target platform for your release. Common platforms include "Windows", "macOS", and "Linux".',release:"Releases help you to manage different versions of your app, and secure distribute it to licensed users.",report:"Analytics data for your account","role-claim":"",role:"Roles define permissions for your team.","saml-configuration":"",segment:"Sets of filters that can be saved to filter resources.","trial-policy":"Trial policies are templates for creating trials for your products.","webhook-event-log":"Webhook Event Logs are logs of events that have occured on webhooks.","webhook-trigger":"",webhook:"Webhooks are HTTP callbacks which are triggered by specific events.",organization:"",profile:"",setting:"",tag:"Tags allow you to manage your licenses and customers on the dashboard.","team-member":"Team members can access the account based on their roles.",user:"A user refers to your customer whom you want to license your product.","sending-domain":"Allows Cryptlex to send emails on your behalf using your From Email address","admin-role":"Roles that have type admin","user-group":"Groups of users that you can assign licenses to.",reseller:"Resellers allow you to delegate user management to third parties or partners","oidc-configuration":"","organization-claim":"","reseller-claim":""},a={id:"ID",createdAt:"Creation Date",scopes:"Permissions",updatedAt:"Last Updated",expiresAt:"Expiration Date",lastSeenAt:"Last Seen",os:"OS",osVersion:"OS Version",key:"License Key",vmName:"VM Name",container:"Container",allowedIpRange:"Allowed IP Range",allowedIpRanges:"Allowed IP Ranges",allowedIpAddresses:"Allowed IP Addresses",disallowedIpAddresses:"Disallowed IP Addresses",allowVmActivation:"Allow VM Activation",disableGeoLocation:"Disable Geolocation","user.id":"User ID",userId:"User",productId:"Product",downloads:"Total Downloads",claims:"Permissions",googleSsoEnabled:"Google Login Enabled",lastAttemptedAt:"Last Attempt Date",url:"URL","trialPolicy.name":"Trial Policy Name","licensePolicy.name":"License Template Name",licensePolicy:"License Template",eventLog:"Audit Log",cc:"CC Recepients",bcc:"BCC Recepients",ipAddress:"IP Address",resellerId:"Reseller",productVersionId:"Product Version",releaseId:"Release",maintenancePolicyId:"Maintenance Policy",webhookId:"Webhook",automatedEmailId:"Automated Email","location.countryName":"Country","location.ipAddress":"IP Address","location.countryCode":"Country",organizationId:"Organization","address.country":"Country","address.addressLine1":"Address Line 1","address.addressLine2":"Address Line 2",responseStatusCode:"HTTP Status Code",resourceId:"Resource ID",Sso:"SAML SSO 2.0","reseller.name":"Reseller",sendingDomain:"Email Sending Domain"};function c(e,o){return o!=="admin-portal"&&e in t?t[e]:e in a?a[e]:l(e)}const r=n("admin-portal");function A({projectName:e,children:o}){return s(r.Provider,{value:e,children:o})}function d(){return i(r)}function v(){const e=d();return o=>c(o,e)}export{A as ProjectProvider,h as RESOURCE_DEFINITIONS,y as RESOURCE_NAMES,d as useProjectName,v as useResourceFormatter};
+import{jsx as s}from"react/jsx-runtime";import{createContext as n,use as i}from"react";import{toTitleCase as l}from"./primitives.js";import"clsx";import"lodash-es";const t={"product.displayName":"Product",product_displayName:"Product"},y=["access-token","account","activation","activation-log","admin-role","audit-log","automated-email","automated-email-event-log","card","feature-flag","invoice","license","license-template","maintenance-policy","organization","plan","product","product-version","profile","release","release-channel","release-file","release-platform","report","role","role-claim","saml-configuration","segment","sending-domain","setting","tag","team-member","trial","trial-policy","user","user-group","webhook","webhook-event-log","webhook-trigger","reseller","oidc-configuration","organization-claim","reseller-claim"],h={account:"Your organization account.",product:"Products are the software products you want to license",license:"Licenses represent a purchase of your software. These can be linked to customers, and the license key is required to use the product.","access-token":"Access Tokens are used to authenticate your API requests.",activation:"Activations, also known as devices/machines/seats are the devices consuming licenses.","activation-log":"Activation Log is a log entry of activation/deactivation of a particular license.",trial:"Trial/Trial Activation is a device that has activated a trial of your product.","audit-log":"Audit logs contain all the changes made to your account.","automated-email":"Automated Email allow you to send marketing emails based on events on the linked product.","automated-email-event-log":"Automated email event log is the log of all the automated email events for your product.",card:"The payment card for your account.","feature-flag":"Feature flags define features that make up tiers for your products.",invoice:"","license-template":"License templates are a blueprint for the licenses you create for your customers and prevent repetition when creating licenses.","maintenance-policy":"Maintenance policies represent support contracts and can be linked to licenses.",plan:"","product-version":"Product Versions are sets of Feature Flags that define the tiers of your products.","release-channel":"Release channel is the release channel for your product.","release-file":"Release files are files within your created releases.","release-platform":'Release Platforms differentiate the target platform for your release. Common platforms include "Windows", "macOS", and "Linux".',release:"Releases help you to manage different versions of your app, and secure distribute it to licensed users.",report:"Analytics data for your account","role-claim":"",role:"Roles define permissions for your team.","saml-configuration":"",segment:"Sets of filters that can be saved to filter resources.","trial-policy":"Trial policies are templates for creating trials for your products.","webhook-event-log":"Webhook Event Logs are logs of events that have occured on webhooks.","webhook-trigger":"",webhook:"Webhooks are HTTP callbacks which are triggered by specific events.",organization:"",profile:"",setting:"",tag:"Tags allow you to manage your licenses and customers on the dashboard.","team-member":"Team members can access the account based on their roles.",user:"A user refers to your customer whom you want to license your product.","sending-domain":"Allows Cryptlex to send emails on your behalf using your From Email address","admin-role":"Roles that have type admin","user-group":"Groups of users that you can assign licenses to.",reseller:"Resellers allow you to delegate user management to third parties or partners","oidc-configuration":"","organization-claim":"","reseller-claim":""},a={id:"ID",createdAt:"Creation Date",scopes:"Permissions",updatedAt:"Last Updated",expiresAt:"Expiration Date",lastSeenAt:"Last Seen",os:"OS",osVersion:"OS Version",key:"License Key",vmName:"VM Name",container:"Container",allowedIpRange:"Allowed IP Range",allowedIpRanges:"Allowed IP Ranges",allowedIpAddresses:"Allowed IP Addresses",disallowedIpAddresses:"Disallowed IP Addresses",allowVmActivation:"Allow VM Activation",disableGeoLocation:"Disable Geolocation","user.id":"User ID",userId:"User",productId:"Product",downloads:"Total Downloads",claims:"Permissions",googleSsoEnabled:"Google Login Enabled",lastAttemptedAt:"Last Attempt Date",url:"URL","trialPolicy.name":"Trial Policy Name","licensePolicy.name":"License Template Name",licensePolicy:"License Template",eventLog:"Audit Log",cc:"CC Recepients",bcc:"BCC Recepients",ipAddress:"IP Address",resellerId:"Reseller",productVersionId:"Product Version",releaseId:"Release",maintenancePolicyId:"Maintenance Policy",webhookId:"Webhook",automatedEmailId:"Automated Email","location.countryName":"Country","location.ipAddress":"IP Address","location.countryCode":"Country",organizationId:"Organization","address.country":"Country","address.addressLine1":"Address Line 1","address.addressLine2":"Address Line 2",responseStatusCode:"HTTP Status Code",resourceId:"Resource ID",Sso:"SAML SSO 2.0","reseller.name":"Reseller",sendingDomain:"Email Sending Domain"};function c(e,o){debugger;return o!=="admin-portal"&&e in t?t[e]:e in a?a[e]:l(e)}const r=n("admin-portal");function A({projectName:e,children:o}){return s(r.Provider,{value:e,children:o})}function d(){return i(r)}function v(){const e=d();return o=>c(o,e)}export{A as ProjectProvider,h as RESOURCE_DEFINITIONS,y as RESOURCE_NAMES,d as useProjectName,v as useResourceFormatter};
 //# sourceMappingURL=resource-names.js.map

package/dist/utils/resource-names.js.map

@@ -1 +1 @@
-{"version":3,"file":"resource-names.js","sources":["../../lib/utils/resource-names.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport { toTitleCase, type CtxPortals } from './primitives';\n\n// Display names specific to customer and reseller portal\nconst OTHER_PORTALS_DISPLAY_NAME: Record<string, string> = {\n    'product.displayName': 'Product',\n};\n\n/** Resource Name should ALWAYS be in singular form */\nexport const RESOURCE_NAMES = [\n    'access-token',\n    'account',\n    'activation',\n    'activation-log',\n    'admin-role',\n    'audit-log',\n    'automated-email',\n    'automated-email-event-log',\n    'card',\n    'feature-flag',\n    'invoice',\n    'license',\n    'license-template',\n    'maintenance-policy',\n    'organization',\n    'plan',\n    'product',\n    'product-version',\n    'profile',\n    'release',\n    'release-channel',\n    'release-file',\n    'release-platform',\n    'report',\n    'role',\n    'role-claim',\n    'saml-configuration',\n    'segment',\n    'sending-domain',\n    'setting',\n    'tag',\n    'team-member',\n    'trial',\n    'trial-policy',\n    'user',\n    'user-group',\n    'webhook',\n    'webhook-event-log',\n    'webhook-trigger',\n    'reseller',\n    'oidc-configuration',\n    'organization-claim',\n    'reseller-claim',\n] as const;\nexport type ResourceName = (typeof RESOURCE_NAMES)[number];\nexport const RESOURCE_DEFINITIONS: Record<ResourceName, string> = {\n    account: 'Your organization account.',\n    product: 'Products are the software products you want to license',\n    license:\n        'Licenses represent a purchase of your software. These can be linked to customers, and the license key is required to use the product.',\n    'access-token': 'Access Tokens are used to authenticate your API requests.',\n    activation: 'Activations, also known as devices/machines/seats are the devices consuming licenses.',\n    'activation-log': 'Activation Log is a log entry of activation/deactivation of a particular license.',\n    trial: 'Trial/Trial Activation is a device that has activated a trial of your product.',\n    'audit-log': 'Audit logs contain all the changes made to your account.',\n    'automated-email': 'Automated Email allow you to send marketing emails based on events on the linked product.',\n    'automated-email-event-log':\n        'Automated email event log is the log of all the automated email events for your product.',\n    card: 'The payment card for your account.',\n    'feature-flag': 'Feature flags define features that make up tiers for your products.',\n    invoice: '',\n    'license-template':\n        'License templates are a blueprint for the licenses you create for your customers and prevent repetition when creating licenses.',\n    'maintenance-policy': 'Maintenance policies represent support contracts and can be linked to licenses.',\n    plan: '',\n    'product-version': 'Product Versions are sets of Feature Flags that define the tiers of your products.',\n    'release-channel': 'Release channel is the release channel for your product.',\n    'release-file': 'Release files are files within your created releases.',\n    'release-platform':\n        'Release Platforms differentiate the target platform for your release. Common platforms include \"Windows\", \"macOS\", and \"Linux\".',\n    release: 'Releases help you to manage different versions of your app, and secure distribute it to licensed users.',\n    report: 'Analytics data for your account',\n    'role-claim': '',\n    role: 'Roles define permissions for your team.',\n    'saml-configuration': '',\n    segment: 'Sets of filters that can be saved to filter resources.',\n    'trial-policy': 'Trial policies are templates for creating trials for your products.',\n    'webhook-event-log': 'Webhook Event Logs are logs of events that have occured on webhooks.',\n    'webhook-trigger': '',\n    webhook: 'Webhooks are HTTP callbacks which are triggered by specific events.',\n    organization: '',\n    profile: '',\n    setting: '',\n    tag: 'Tags allow you to manage your licenses and customers on the dashboard.',\n    'team-member': 'Team members can access the account based on their roles.',\n    user: 'A user refers to your customer whom you want to license your product.',\n    'sending-domain': 'Allows Cryptlex to send emails on your behalf using your From Email address',\n    'admin-role': 'Roles that have type admin',\n    'user-group': 'Groups of users that you can assign licenses to.',\n    reseller: 'Resellers allow you to delegate user management to third parties or partners',\n    'oidc-configuration': '',\n    'organization-claim': '',\n    'reseller-claim': '',\n};\n\nconst RESOURCE_DISPLAY_NAMES: Record<string, string> = {\n    id: 'ID',\n    createdAt: 'Creation Date',\n    scopes: 'Permissions',\n    updatedAt: 'Last Updated',\n    expiresAt: 'Expiration Date',\n    lastSeenAt: 'Last Seen',\n    os: 'OS',\n    osVersion: 'OS Version',\n    key: 'License Key',\n    vmName: 'VM Name',\n    container: 'Container',\n    allowedIpRange: 'Allowed IP Range',\n    allowedIpRanges: 'Allowed IP Ranges',\n    allowedIpAddresses: 'Allowed IP Addresses',\n    disallowedIpAddresses: 'Disallowed IP Addresses',\n    allowVmActivation: 'Allow VM Activation',\n    disableGeoLocation: 'Disable Geolocation',\n    'user.id': 'User ID',\n    userId: 'User',\n    productId: 'Product',\n    downloads: 'Total Downloads',\n    claims: 'Permissions',\n    googleSsoEnabled: 'Google Login Enabled',\n    lastAttemptedAt: 'Last Attempt Date',\n    url: 'URL',\n    'trialPolicy.name': 'Trial Policy Name',\n    'licensePolicy.name': 'License Template Name',\n    licensePolicy: 'License Template',\n    eventLog: 'Audit Log',\n    cc: 'CC Recepients',\n    bcc: 'BCC Recepients',\n    ipAddress: 'IP Address',\n    resellerId: 'Reseller',\n    productVersionId: 'Product Version',\n    releaseId: 'Release',\n    maintenancePolicyId: 'Maintenance Policy',\n    webhookId: 'Webhook',\n    automatedEmailId: 'Automated Email',\n    'location.countryName': 'Country',\n    'location.ipAddress': 'IP Address',\n    'location.countryCode': 'Country',\n    organizationId: 'Organization',\n    'address.country': 'Country',\n    'address.addressLine1': 'Address Line 1',\n    'address.addressLine2': 'Address Line 2',\n    responseStatusCode: 'HTTP Status Code',\n    resourceId: 'Resource ID',\n    Sso: 'SAML SSO 2.0',\n    'reseller.name': 'Reseller',\n    sendingDomain: 'Email Sending Domain',\n};\n\nfunction getResourceDisplayName(resourceName: string, portal: CtxPortals) {\n    if (portal !== 'admin-portal' && resourceName in OTHER_PORTALS_DISPLAY_NAME) {\n        return OTHER_PORTALS_DISPLAY_NAME[resourceName];\n    } else if (resourceName in RESOURCE_DISPLAY_NAMES) {\n        return RESOURCE_DISPLAY_NAMES[resourceName];\n    } else {\n        return toTitleCase(resourceName);\n    }\n}\n\nconst ProjectContext = createContext<CtxPortals>('admin-portal');\n\nexport function ProjectProvider({ projectName, children }: { projectName: CtxPortals; children: React.ReactNode }) {\n    return <ProjectContext.Provider value={projectName}>{children}</ProjectContext.Provider>;\n}\n\nexport function useProjectName(): CtxPortals {\n    const projectName = use(ProjectContext);\n    return projectName;\n}\n\n// TODO, create story with complete map of resource -> formatter output\nexport function useResourceFormatter(): (resourceName: string) => string {\n    const portal = useProjectName();\n    return (resourceName: string) => getResourceDisplayName(resourceName, portal);\n}\n"],"names":["OTHER_PORTALS_DISPLAY_NAME","RESOURCE_NAMES","RESOURCE_DEFINITIONS","RESOURCE_DISPLAY_NAMES","getResourceDisplayName","resourceName","portal","toTitleCase","ProjectContext","createContext","ProjectProvider","projectName","children","useProjectName","use","useResourceFormatter"],"mappings":"oKAIA,MAAMA,EAAqD,CACvD,sBAAuB,SAC3B,EAGaC,EAAiB,CAC1B,eACA,UACA,aACA,iBACA,aACA,YACA,kBACA,4BACA,OACA,eACA,UACA,UACA,mBACA,qBACA,eACA,OACA,UACA,kBACA,UACA,UACA,kBACA,eACA,mBACA,SACA,OACA,aACA,qBACA,UACA,iBACA,UACA,MACA,cACA,QACA,eACA,OACA,aACA,UACA,oBACA,kBACA,WACA,qBACA,qBACA,gBACJ,EAEaC,EAAqD,CAC9D,QAAS,6BACT,QAAS,yDACT,QACI,wIACJ,eAAgB,4DAChB,WAAY,wFACZ,iBAAkB,oFAClB,MAAO,iFACP,YAAa,2DACb,kBAAmB,4FACnB,4BACI,2FACJ,KAAM,qCACN,eAAgB,sEAChB,QAAS,GACT,mBACI,kIACJ,qBAAsB,kFACtB,KAAM,GACN,kBAAmB,qFACnB,kBAAmB,2DACnB,eAAgB,wDAChB,mBACI,kIACJ,QAAS,0GACT,OAAQ,kCACR,aAAc,GACd,KAAM,0CACN,qBAAsB,GACtB,QAAS,yDACT,eAAgB,sEAChB,oBAAqB,uEACrB,kBAAmB,GACnB,QAAS,sEACT,aAAc,GACd,QAAS,GACT,QAAS,GACT,IAAK,yEACL,cAAe,4DACf,KAAM,wEACN,iBAAkB,8EAClB,aAAc,6BACd,aAAc,mDACd,SAAU,+EACV,qBAAsB,GACtB,qBAAsB,GACtB,iBAAkB,EACtB,EAEMC,EAAiD,CACnD,GAAI,KACJ,UAAW,gBACX,OAAQ,cACR,UAAW,eACX,UAAW,kBACX,WAAY,YACZ,GAAI,KACJ,UAAW,aACX,IAAK,cACL,OAAQ,UACR,UAAW,YACX,eAAgB,mBAChB,gBAAiB,oBACjB,mBAAoB,uBACpB,sBAAuB,0BACvB,kBAAmB,sBACnB,mBAAoB,sBACpB,UAAW,UACX,OAAQ,OACR,UAAW,UACX,UAAW,kBACX,OAAQ,cACR,iBAAkB,uBAClB,gBAAiB,oBACjB,IAAK,MACL,mBAAoB,oBACpB,qBAAsB,wBACtB,cAAe,mBACf,SAAU,YACV,GAAI,gBACJ,IAAK,iBACL,UAAW,aACX,WAAY,WACZ,iBAAkB,kBAClB,UAAW,UACX,oBAAqB,qBACrB,UAAW,UACX,iBAAkB,kBAClB,uBAAwB,UACxB,qBAAsB,aACtB,uBAAwB,UACxB,eAAgB,eAChB,kBAAmB,UACnB,uBAAwB,iBACxB,uBAAwB,iBACxB,mBAAoB,mBACpB,WAAY,cACZ,IAAK,eACL,gBAAiB,WACjB,cAAe,sBACnB,EAEA,SAASC,EAAuBC,EAAsBC,EAAoB,CACtE,OAAIA,IAAW,gBAAkBD,KAAgBL,EACtCA,EAA2BK,CAAY,EACvCA,KAAgBF,EAChBA,EAAuBE,CAAY,EAEnCE,EAAYF,CAAY,CAEvC,CAEA,MAAMG,EAAiBC,EAA0B,cAAc,EAExD,SAASC,EAAgB,CAAE,YAAAC,EAAa,SAAAC,GAAoE,CAC/G,SAAQJ,EAAe,SAAf,CAAwB,MAAOG,EAAc,SAAAC,EAAS,CAClE,CAEO,SAASC,GAA6B,CAEzC,OADoBC,EAAIN,CAAc,CAE1C,CAGO,SAASO,GAAyD,CACrE,MAAMT,EAASO,EAAA,EACf,OAAQR,GAAyBD,EAAuBC,EAAcC,CAAM,CAChF"}
+{"version":3,"file":"resource-names.js","sources":["../../lib/utils/resource-names.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport { toTitleCase, type CtxPortals } from './primitives';\n\n// Display names specific to customer and reseller portal\nconst OTHER_PORTALS_DISPLAY_NAME: Record<string, string> = {\n    'product.displayName': 'Product',\n    // TanStack Table converts . -> _ TODO\n    product_displayName: 'Product',\n};\n\n/** Resource Name should ALWAYS be in singular form */\nexport const RESOURCE_NAMES = [\n    'access-token',\n    'account',\n    'activation',\n    'activation-log',\n    'admin-role',\n    'audit-log',\n    'automated-email',\n    'automated-email-event-log',\n    'card',\n    'feature-flag',\n    'invoice',\n    'license',\n    'license-template',\n    'maintenance-policy',\n    'organization',\n    'plan',\n    'product',\n    'product-version',\n    'profile',\n    'release',\n    'release-channel',\n    'release-file',\n    'release-platform',\n    'report',\n    'role',\n    'role-claim',\n    'saml-configuration',\n    'segment',\n    'sending-domain',\n    'setting',\n    'tag',\n    'team-member',\n    'trial',\n    'trial-policy',\n    'user',\n    'user-group',\n    'webhook',\n    'webhook-event-log',\n    'webhook-trigger',\n    'reseller',\n    'oidc-configuration',\n    'organization-claim',\n    'reseller-claim',\n] as const;\nexport type ResourceName = (typeof RESOURCE_NAMES)[number];\nexport const RESOURCE_DEFINITIONS: Record<ResourceName, string> = {\n    account: 'Your organization account.',\n    product: 'Products are the software products you want to license',\n    license:\n        'Licenses represent a purchase of your software. These can be linked to customers, and the license key is required to use the product.',\n    'access-token': 'Access Tokens are used to authenticate your API requests.',\n    activation: 'Activations, also known as devices/machines/seats are the devices consuming licenses.',\n    'activation-log': 'Activation Log is a log entry of activation/deactivation of a particular license.',\n    trial: 'Trial/Trial Activation is a device that has activated a trial of your product.',\n    'audit-log': 'Audit logs contain all the changes made to your account.',\n    'automated-email': 'Automated Email allow you to send marketing emails based on events on the linked product.',\n    'automated-email-event-log':\n        'Automated email event log is the log of all the automated email events for your product.',\n    card: 'The payment card for your account.',\n    'feature-flag': 'Feature flags define features that make up tiers for your products.',\n    invoice: '',\n    'license-template':\n        'License templates are a blueprint for the licenses you create for your customers and prevent repetition when creating licenses.',\n    'maintenance-policy': 'Maintenance policies represent support contracts and can be linked to licenses.',\n    plan: '',\n    'product-version': 'Product Versions are sets of Feature Flags that define the tiers of your products.',\n    'release-channel': 'Release channel is the release channel for your product.',\n    'release-file': 'Release files are files within your created releases.',\n    'release-platform':\n        'Release Platforms differentiate the target platform for your release. Common platforms include \"Windows\", \"macOS\", and \"Linux\".',\n    release: 'Releases help you to manage different versions of your app, and secure distribute it to licensed users.',\n    report: 'Analytics data for your account',\n    'role-claim': '',\n    role: 'Roles define permissions for your team.',\n    'saml-configuration': '',\n    segment: 'Sets of filters that can be saved to filter resources.',\n    'trial-policy': 'Trial policies are templates for creating trials for your products.',\n    'webhook-event-log': 'Webhook Event Logs are logs of events that have occured on webhooks.',\n    'webhook-trigger': '',\n    webhook: 'Webhooks are HTTP callbacks which are triggered by specific events.',\n    organization: '',\n    profile: '',\n    setting: '',\n    tag: 'Tags allow you to manage your licenses and customers on the dashboard.',\n    'team-member': 'Team members can access the account based on their roles.',\n    user: 'A user refers to your customer whom you want to license your product.',\n    'sending-domain': 'Allows Cryptlex to send emails on your behalf using your From Email address',\n    'admin-role': 'Roles that have type admin',\n    'user-group': 'Groups of users that you can assign licenses to.',\n    reseller: 'Resellers allow you to delegate user management to third parties or partners',\n    'oidc-configuration': '',\n    'organization-claim': '',\n    'reseller-claim': '',\n};\n\nconst RESOURCE_DISPLAY_NAMES: Record<string, string> = {\n    id: 'ID',\n    createdAt: 'Creation Date',\n    scopes: 'Permissions',\n    updatedAt: 'Last Updated',\n    expiresAt: 'Expiration Date',\n    lastSeenAt: 'Last Seen',\n    os: 'OS',\n    osVersion: 'OS Version',\n    key: 'License Key',\n    vmName: 'VM Name',\n    container: 'Container',\n    allowedIpRange: 'Allowed IP Range',\n    allowedIpRanges: 'Allowed IP Ranges',\n    allowedIpAddresses: 'Allowed IP Addresses',\n    disallowedIpAddresses: 'Disallowed IP Addresses',\n    allowVmActivation: 'Allow VM Activation',\n    disableGeoLocation: 'Disable Geolocation',\n    'user.id': 'User ID',\n    userId: 'User',\n    productId: 'Product',\n    downloads: 'Total Downloads',\n    claims: 'Permissions',\n    googleSsoEnabled: 'Google Login Enabled',\n    lastAttemptedAt: 'Last Attempt Date',\n    url: 'URL',\n    'trialPolicy.name': 'Trial Policy Name',\n    'licensePolicy.name': 'License Template Name',\n    licensePolicy: 'License Template',\n    eventLog: 'Audit Log',\n    cc: 'CC Recepients',\n    bcc: 'BCC Recepients',\n    ipAddress: 'IP Address',\n    resellerId: 'Reseller',\n    productVersionId: 'Product Version',\n    releaseId: 'Release',\n    maintenancePolicyId: 'Maintenance Policy',\n    webhookId: 'Webhook',\n    automatedEmailId: 'Automated Email',\n    'location.countryName': 'Country',\n    'location.ipAddress': 'IP Address',\n    'location.countryCode': 'Country',\n    organizationId: 'Organization',\n    'address.country': 'Country',\n    'address.addressLine1': 'Address Line 1',\n    'address.addressLine2': 'Address Line 2',\n    responseStatusCode: 'HTTP Status Code',\n    resourceId: 'Resource ID',\n    Sso: 'SAML SSO 2.0',\n    'reseller.name': 'Reseller',\n    sendingDomain: 'Email Sending Domain',\n};\n\nfunction getResourceDisplayName(resourceName: string, portal: CtxPortals) {\n    debugger;\n    if (portal !== 'admin-portal' && resourceName in OTHER_PORTALS_DISPLAY_NAME) {\n        return OTHER_PORTALS_DISPLAY_NAME[resourceName];\n    } else if (resourceName in RESOURCE_DISPLAY_NAMES) {\n        return RESOURCE_DISPLAY_NAMES[resourceName];\n    } else {\n        return toTitleCase(resourceName);\n    }\n}\n\nconst ProjectContext = createContext<CtxPortals>('admin-portal');\n\nexport function ProjectProvider({ projectName, children }: { projectName: CtxPortals; children: React.ReactNode }) {\n    return <ProjectContext.Provider value={projectName}>{children}</ProjectContext.Provider>;\n}\n\nexport function useProjectName(): CtxPortals {\n    const projectName = use(ProjectContext);\n    return projectName;\n}\n\n// TODO, create story with complete map of resource -> formatter output\nexport function useResourceFormatter(): (resourceName: string) => string {\n    const portal = useProjectName();\n    return (resourceName: string) => getResourceDisplayName(resourceName, portal);\n}\n"],"names":["OTHER_PORTALS_DISPLAY_NAME","RESOURCE_NAMES","RESOURCE_DEFINITIONS","RESOURCE_DISPLAY_NAMES","getResourceDisplayName","resourceName","portal","toTitleCase","ProjectContext","createContext","ProjectProvider","projectName","children","useProjectName","use","useResourceFormatter"],"mappings":"oKAIA,MAAMA,EAAqD,CACvD,sBAAuB,UAEvB,oBAAqB,SACzB,EAGaC,EAAiB,CAC1B,eACA,UACA,aACA,iBACA,aACA,YACA,kBACA,4BACA,OACA,eACA,UACA,UACA,mBACA,qBACA,eACA,OACA,UACA,kBACA,UACA,UACA,kBACA,eACA,mBACA,SACA,OACA,aACA,qBACA,UACA,iBACA,UACA,MACA,cACA,QACA,eACA,OACA,aACA,UACA,oBACA,kBACA,WACA,qBACA,qBACA,gBACJ,EAEaC,EAAqD,CAC9D,QAAS,6BACT,QAAS,yDACT,QACI,wIACJ,eAAgB,4DAChB,WAAY,wFACZ,iBAAkB,oFAClB,MAAO,iFACP,YAAa,2DACb,kBAAmB,4FACnB,4BACI,2FACJ,KAAM,qCACN,eAAgB,sEAChB,QAAS,GACT,mBACI,kIACJ,qBAAsB,kFACtB,KAAM,GACN,kBAAmB,qFACnB,kBAAmB,2DACnB,eAAgB,wDAChB,mBACI,kIACJ,QAAS,0GACT,OAAQ,kCACR,aAAc,GACd,KAAM,0CACN,qBAAsB,GACtB,QAAS,yDACT,eAAgB,sEAChB,oBAAqB,uEACrB,kBAAmB,GACnB,QAAS,sEACT,aAAc,GACd,QAAS,GACT,QAAS,GACT,IAAK,yEACL,cAAe,4DACf,KAAM,wEACN,iBAAkB,8EAClB,aAAc,6BACd,aAAc,mDACd,SAAU,+EACV,qBAAsB,GACtB,qBAAsB,GACtB,iBAAkB,EACtB,EAEMC,EAAiD,CACnD,GAAI,KACJ,UAAW,gBACX,OAAQ,cACR,UAAW,eACX,UAAW,kBACX,WAAY,YACZ,GAAI,KACJ,UAAW,aACX,IAAK,cACL,OAAQ,UACR,UAAW,YACX,eAAgB,mBAChB,gBAAiB,oBACjB,mBAAoB,uBACpB,sBAAuB,0BACvB,kBAAmB,sBACnB,mBAAoB,sBACpB,UAAW,UACX,OAAQ,OACR,UAAW,UACX,UAAW,kBACX,OAAQ,cACR,iBAAkB,uBAClB,gBAAiB,oBACjB,IAAK,MACL,mBAAoB,oBACpB,qBAAsB,wBACtB,cAAe,mBACf,SAAU,YACV,GAAI,gBACJ,IAAK,iBACL,UAAW,aACX,WAAY,WACZ,iBAAkB,kBAClB,UAAW,UACX,oBAAqB,qBACrB,UAAW,UACX,iBAAkB,kBAClB,uBAAwB,UACxB,qBAAsB,aACtB,uBAAwB,UACxB,eAAgB,eAChB,kBAAmB,UACnB,uBAAwB,iBACxB,uBAAwB,iBACxB,mBAAoB,mBACpB,WAAY,cACZ,IAAK,eACL,gBAAiB,WACjB,cAAe,sBACnB,EAEA,SAASC,EAAuBC,EAAsBC,EAAoB,CACtE,SACA,OAAIA,IAAW,gBAAkBD,KAAgBL,EACtCA,EAA2BK,CAAY,EACvCA,KAAgBF,EAChBA,EAAuBE,CAAY,EAEnCE,EAAYF,CAAY,CAEvC,CAEA,MAAMG,EAAiBC,EAA0B,cAAc,EAExD,SAASC,EAAgB,CAAE,YAAAC,EAAa,SAAAC,GAAoE,CAC/G,SAAQJ,EAAe,SAAf,CAAwB,MAAOG,EAAc,SAAAC,EAAS,CAClE,CAEO,SAASC,GAA6B,CAEzC,OADoBC,EAAIN,CAAc,CAE1C,CAGO,SAASO,GAAyD,CACrE,MAAMT,EAASO,EAAA,EACf,OAAQR,GAAyBD,EAAuBC,EAAcC,CAAM,CAChF"}

package/lib/theme.css

@@ -105,6 +105,10 @@
     --spacing-icon: calc(var(--spacing-input) / 2);
     --spacing-table: calc(var(--spacing) * 100);
 
+    --sidebar-width: var(--container-3xs);
+    --sidebar-width-mobile: var(--container-2xs);
+    --sidebar-width-icon: var(--spacing(12));
+
     /* Header nav */
     --spacing-header: calc(var(--spacing) * 12);
     /* Helper for using sidebar with header */

package/lib/utilities.css

@@ -37,7 +37,9 @@
 @utility btn-ghost {
     @apply bg-transparent focus:bg-accent/20 data-[focused]:bg-accent/20 hover:bg-accent/20 data-[hovered]:bg-accent/20;
 }
-
+@utility btn-tab {
+    @apply truncate btn btn-ghost input-dim font-normal text-accent justify-start data-[selected=true]:bg-primary/20 data-[selected=true]:font-medium data-[selected=true]:text-primary;
+}
 /* Dimensions for a standard input */
 @utility input-dim {
     @apply h-input px-icon py-2 body-sm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.5.2",
+  "version": "6.5.3",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",