@cryptlex/web-components 6.5.2 → 6.5.4

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":"8qBAYA,MAAMA,EAAgB,QAChBC,EAAuB,QACvBC,EAAqB,OACrBC,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,CAM1B,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,MACI,CACI,kBAAmBpC,EACnB,uBAAwBE,EACxB,GAAGY,CAAA,EAGX,UAAWuB,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,EAAA,CACG,MAAO,CAAE,kBAAmBzC,CAAA,EAC5B,OAAQkB,EACR,aAAcC,EACb,GAAGJ,EAEJ,WAAC2B,EAAA,CACG,SAAAP,EAACQ,EAAA,CACG,eAAa,UACb,cAAY,OACZ,UAAU,oEACV,KAAK,OAEJ,SAAA,SAAS,SAAA7B,CAAA,CAAS,CAAA,CAAA,CACvB,CACJ,CAAA,CAAA,EAMR8B,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,YAAcA,IAAY,QAChC,uFACA,wDAAA,CACV,CAAA,EAEJJ,EAAC,MAAA,CACG,UAAWC,EACP,0GACAE,IAAS,OACH,iFACA,mFAENC,IAAY,YAAcA,IAAY,QAChC,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,QAAShB,GAAS,CACde,IAAUf,CAAK,EACfH,EAAA,CACJ,EACC,GAAGb,EAGH,SAAAQ,EAAOY,EAACa,EAAA,CAAA,CAAO,IAAMC,EAAA,CAAA,CAAQ,CAAA,CAAA,CAG1C,CAGO,MAAMC,EAAcC,EACvB,CAAC,CAAE,UAAAvC,EAAW,GAAGG,CAAA,EAASqC,IAAQ,CAC9B,KAAM,CAAE,cAAAxB,CAAA,EAAkBvB,EAAA,EAE1B,OACI8B,EAAC,SAAA,CACG,IAAAiB,EACA,eAAa,OACb,aAAW,iBACX,SAAU,GACV,QAASxB,EACT,MAAM,iBACN,UAAWQ,EACP,gPACA,6EACA,yHACA,qKACA,4DACA,4DACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CACJ,EACAmC,EAAY,YAAc,cAEnB,SAASG,GAAa,CAAE,UAAAzC,EAAW,GAAGG,GAAuC,CAChF,OACIoB,EAAC,OAAA,CACG,UAAWC,EACP,qDACA,+MACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASuC,GAAc,CAAE,UAAA1C,EAAW,GAAGG,GAAsC,CAChF,OAAOoB,EAAC,MAAA,CAAI,eAAa,SAAS,UAAWC,EAAW,0BAA2BxB,CAAS,EAAI,GAAGG,CAAA,CAAO,CAC9G,CAEO,SAASwC,GAAc,CAAE,UAAA3C,EAAW,GAAGG,GAAsC,CAChF,OAAOoB,EAAC,MAAA,CAAI,eAAa,SAAS,UAAWC,EAAW,0BAA2BxB,CAAS,EAAI,GAAGG,CAAA,CAAO,CAC9G,CAEO,SAASyC,GAAe,CAAE,UAAA5C,EAAW,GAAGG,GAAsC,CACjF,OACIoB,EAAC,MAAA,CACG,eAAa,UACb,UAAWC,EACP,iGACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAAS0C,GAAa,CAAE,UAAA7C,EAAW,GAAGG,GAAsC,CAC/E,OACIoB,EAAC,MAAA,CACG,eAAa,QACb,UAAWC,EAAW,4CAA6CxB,CAAS,EAC3E,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAAS2C,GAAkB,CAAE,UAAA9C,EAAW,GAAGG,GAAsC,CACpF,OACIoB,EAAC,MAAA,CACG,eAAa,cACb,UAAWC,EACP,6NACA,kFACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CACO,SAAS4C,GAAmB,CAAE,UAAA/C,EAAW,GAAGG,GAAyC,CACxF,OACIoB,EAAC,SAAA,CACG,eAAa,eACb,UAAWC,EACP,sQAEA,gDACA,uCACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAAS6C,GAAoB,CAAE,UAAAhD,EAAW,GAAGG,GAAsC,CACtF,OAAOoB,EAAC,MAAA,CAAI,eAAa,gBAAgB,UAAWC,EAAW,iBAAkBxB,CAAS,EAAI,GAAGG,CAAA,CAAO,CAC5G,CAEO,SAAS8C,GAAY,CAAE,UAAAjD,EAAW,GAAGG,GAAqC,CAC7E,OAAOoB,EAAC,KAAA,CAAG,eAAa,OAAO,UAAWC,EAAW,+BAAgCxB,CAAS,EAAI,GAAGG,CAAA,CAAO,CAChH,CAEO,SAAS+C,GAAgB,CAAE,UAAAlD,EAAW,GAAGG,GAAqC,CACjF,OACIoB,EAAC,KAAA,CACG,eAAa,YACb,UAAWC,EAAW,qCAAsCxB,CAAS,EACpE,GAAGG,CAAA,CAAA,CAGhB,CAGO,SAASgD,GAAkB,CAC9B,UAAAnD,EACA,YAAAoD,EAAc,GACd,GAAGjD,CACP,EAEG,CACC,OACIoB,EAAC,SAAA,CACG,eAAa,cACb,UAAWC,EACP,oTAEA,gDACA,wCACA,+CACA,0CACA,uCACA4B,GACI,mLACJpD,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASkD,GAAiB,CAAE,UAAArD,EAAW,GAAGG,GAAsC,CACnF,OACIoB,EAAC,MAAA,CACG,eAAa,aACb,UAAWC,EACP,yKACA,2GACA,wCACA,+CACA,0CACA,uCACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASmD,GAAoB,CAChC,UAAAtD,EACA,SAAAuD,EAAW,GACX,GAAGpD,CACP,EAEG,CAEC,MAAMqD,EAAQlC,EAAQ,IACX,GAAG,KAAK,MAAM,KAAK,SAAW,EAAE,EAAI,EAAE,IAC9C,CAAA,CAAE,EAEL,OACIU,EAAC,MAAA,CACG,eAAa,gBACb,UAAWR,EAAW,uCAAwCxB,CAAS,EACtE,GAAGG,EAEH,SAAA,CAAAoD,GAAYhC,EAACkC,EAAA,CAAS,UAAU,YAAY,eAAa,qBAAqB,EAC/ElC,EAACkC,EAAA,CACG,UAAU,yCACV,eAAa,qBACb,MACI,CACI,mBAAoBD,CAAA,CACxB,CAAA,CAER,CAAA,CAAA,CAGZ,CAEO,SAASE,GAAe,CAAE,UAAA1D,EAAW,GAAGG,GAAqC,CAChF,OACIoB,EAAC,KAAA,CACG,eAAa,WACb,UAAWC,EACP,oDACA,uCACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASwD,GAAmB,CAAE,UAAA3D,EAAW,GAAGG,GAAqC,CACpF,OAAOoB,EAAC,MAAG,UAAWC,EAAW,iBAAkBxB,CAAS,EAAI,GAAGG,EAAO,CAC9E,CAIA,MAAMyD,EACF,uOACG,SAASC,GAAkB,CAC9B,SAAAC,EAAW,GACX,QAAAC,EACA,UAAA/D,EACA,GAAGG,CACP,EAGG,CACC,KAAM,CAAE,SAAAC,EAAU,MAAAgB,CAAA,EAAU3B,EAAA,EAEtBuE,EACFzC,EAAC,SAAA,CACG,eAAa,cACb,cAAauC,EACb,UAAWtC,EACP,0JACAoC,EACA5D,CAAA,EAEH,GAAGG,CAAA,CAAA,EAIZ,OAAK4D,IAKAE,EAAA,CACI,SAAA,CAAAD,IACAE,EAAA,CAAQ,OAAQ9C,IAAU,aAAehB,EAAW,GAAG2D,CAAA,CAAS,CAAA,EACrE,EAPOC,CASf,CAEO,SAASG,GAAqB,CACjC,SAAAL,EACA,UAAA9D,EACA,GAAGG,CACP,EAEG,CACC,OACIoB,EAAC,SAAA,CACG,eAAa,kBACb,cAAauC,EACb,UAAWtC,EACP,iDACA,uCACAoC,EACA5D,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASiE,GAAc,CAAE,UAAApE,EAAW,GAAGG,GAAsC,CAChF,OAAOoB,EAAC,OAAI,UAAWC,EAAWxB,EAAW,sBAAsB,EAAI,GAAGG,EAAO,CACrF"}
+{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\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 '../utilities/primitives';\nimport { useIsMobile } from '../utilities/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":"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"}

package/dist/components/skeleton.js

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

package/dist/components/skeleton.js.map

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

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

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

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

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

package/dist/components/table.js

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

package/dist/components/table.js.map

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

package/dist/components/tabs.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as n}from"react/jsx-runtime";import{useRef as c,useEffect as u}from"react";import{Tabs as b,composeRenderProps as o,TabList as f,Tab as m,TabPanel as d}from"react-aria-components";import{classNames as i}from"../utils/primitives.js";import"clsx";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"../utilities/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 '../utilities/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":"mSAeO,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/components/textfield.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{TextField as u,composeRenderProps as i,TextArea as f,Input as p}from"react-aria-components";import{useTfFieldContext as c}from"../utils/form-utils.js";import{getFieldErrorMessage as d,classNames as n}from"../utils/primitives.js";import{FormField as g}from"./field.js";import"react";import"../utils/form-context.js";import"@tanstack/react-form";import"clsx";import"lodash-es";import"class-variance-authority";import"./icons.js";const b=u;function x({className:r,...o}){return t(p,{className:i(r,e=>n("flex input-dim w-full border border-input bg-popover ring-offset-background file:border-0 file:bg-transparent file:body-sm file:font-medium placeholder:text-muted-foreground","disabled-muted","focus-ring",e)),...o})}function T({className:r,...o}){return t(f,{className:i(r,e=>n("flex min-h-32 w-full border border-input bg-popover px-3 py-2 body-sm ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted",e)),...o})}function h({label:r,description:o,errorMessage:e,textArea:l,className:m,...a}){return t(b,{className:i(m,s=>n("group form-field",s)),...a,children:t(g,{label:r,errorMessage:e,description:o,children:l?t(T,{}):t(x,{})})})}function j({isDisabled:r,...o}){const e=c({disabled:r});return t(h,{isDisabled:r||e.form.state.isSubmitting,value:e.state.value,id:e.name,name:e.name,onBlur:e.handleBlur,onChange:e.handleChange,isInvalid:!!d(e),errorMessage:d(e),...o})}export{h as TextField,j as TfTextField};
+import{jsx as t}from"react/jsx-runtime";import{TextField as u,composeRenderProps as i,TextArea as f,Input as p}from"react-aria-components";import{useTfFieldContext as c}from"../utilities/form-utils.js";import{getFieldErrorMessage as d,classNames as n}from"../utilities/primitives.js";import{FormField as g}from"./field.js";import"react";import"../utilities/form-context.js";import"@tanstack/react-form";import"clsx";import"lodash-es";import"class-variance-authority";import"./icons.js";const b=u;function x({className:r,...o}){return t(p,{className:i(r,e=>n("flex input-dim w-full border border-input bg-popover ring-offset-background file:border-0 file:bg-transparent file:body-sm file:font-medium placeholder:text-muted-foreground","disabled-muted","focus-ring",e)),...o})}function T({className:r,...o}){return t(f,{className:i(r,e=>n("flex min-h-32 w-full border border-input bg-popover px-3 py-2 body-sm ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted",e)),...o})}function h({label:r,description:o,errorMessage:e,textArea:l,className:m,...a}){return t(b,{className:i(m,s=>n("group form-field",s)),...a,children:t(g,{label:r,errorMessage:e,description:o,children:l?t(T,{}):t(x,{})})})}function j({isDisabled:r,...o}){const e=c({disabled:r});return t(h,{isDisabled:r||e.form.state.isSubmitting,value:e.state.value,id:e.name,name:e.name,onBlur:e.handleBlur,onChange:e.handleChange,isInvalid:!!d(e),errorMessage:d(e),...o})}export{h as TextField,j as TfTextField};
 //# sourceMappingURL=textfield.js.map

package/dist/components/textfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.js","sources":["../../lib/components/textfield.tsx"],"sourcesContent":["import {\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    TextArea as AriaTextArea,\n    TextAreaProps as AriaTextAreaProps,\n    TextField as AriaTextField,\n    TextFieldProps as AriaTextFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { useTfFieldContext } from '../utils/form-utils';\nimport { classNames, getFieldErrorMessage } from '../utils/primitives';\nimport { FormField, type FormFieldProps } from './field';\n\nconst ATextField = AriaTextField;\n\nfunction Input({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'flex input-dim w-full border border-input bg-popover ring-offset-background file:border-0 file:bg-transparent file:body-sm file:font-medium placeholder:text-muted-foreground',\n                    /* Disabled */\n                    'disabled-muted',\n                    /* Focused */\n                    'focus-ring',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TextArea({ className, ...props }: AriaTextAreaProps) {\n    return (\n        <AriaTextArea\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'flex min-h-32 w-full border border-input bg-popover px-3 py-2 body-sm ring-offset-background placeholder:text-muted-foreground',\n                    /* Focused */\n                    'focus-ring',\n                    /* Disabled */\n                    'disabled-muted',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {\n    textArea?: boolean;\n}\n\nexport function TextField({ label, description, errorMessage, textArea, className, ...props }: TextFieldProps) {\n    return (\n        <ATextField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} errorMessage={errorMessage} description={description}>\n                {textArea ? <TextArea /> : <Input />}\n            </FormField>\n        </ATextField>\n    );\n}\n\nexport function TfTextField({ isDisabled, ...props }: React.ComponentProps<typeof TextField>) {\n    const field = useTfFieldContext<string>({ disabled: isDisabled });\n\n    return (\n        <TextField\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            id={field.name}\n            name={field.name}\n            onBlur={field.handleBlur}\n            onChange={field.handleChange}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["ATextField","AriaTextField","Input","className","props","jsx","AriaInput","composeRenderProps","classNames","TextArea","AriaTextArea","TextField","label","description","errorMessage","textArea","FormField","TfTextField","isDisabled","field","useTfFieldContext","getFieldErrorMessage"],"mappings":"0dAcA,MAAMA,EAAaC,EAEnB,SAASC,EAAM,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACpD,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,gLAEA,iBAEA,aACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAS,CAAE,UAAAN,EAAW,GAAGC,GAA4B,CAC1D,OACIC,EAACK,EAAA,CACG,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,iIAEA,aAEA,iBACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAMO,SAASO,EAAU,CAAE,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,SAAAC,EAAU,UAAAZ,EAAW,GAAGC,GAAyB,CAC3G,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAC,EAACW,EAAA,CAAU,MAAAJ,EAAc,aAAAE,EAA4B,YAAAD,EAChD,SAAAE,EAAWV,EAACI,EAAA,CAAA,CAAS,EAAKJ,EAACH,EAAA,CAAA,CAAM,CAAA,CACtC,CAAA,CAAA,CAGZ,CAEO,SAASe,EAAY,CAAE,WAAAC,EAAY,GAAGd,GAAiD,CAC1F,MAAMe,EAAQC,EAA0B,CAAE,SAAUF,EAAY,EAEhE,OACIb,EAACM,EAAA,CACG,WAAYO,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,KAAMA,EAAM,KACZ,OAAQA,EAAM,WACd,SAAUA,EAAM,aAChB,UAAW,CAAC,CAACE,EAAqBF,CAAK,EACvC,aAAcE,EAAqBF,CAAK,EACvC,GAAGf,CAAA,CAAA,CAGhB"}
+{"version":3,"file":"textfield.js","sources":["../../lib/components/textfield.tsx"],"sourcesContent":["import {\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    TextArea as AriaTextArea,\n    TextAreaProps as AriaTextAreaProps,\n    TextField as AriaTextField,\n    TextFieldProps as AriaTextFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { useTfFieldContext } from '../utilities/form-utils';\nimport { classNames, getFieldErrorMessage } from '../utilities/primitives';\nimport { FormField, type FormFieldProps } from './field';\n\nconst ATextField = AriaTextField;\n\nfunction Input({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'flex input-dim w-full border border-input bg-popover ring-offset-background file:border-0 file:bg-transparent file:body-sm file:font-medium placeholder:text-muted-foreground',\n                    /* Disabled */\n                    'disabled-muted',\n                    /* Focused */\n                    'focus-ring',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TextArea({ className, ...props }: AriaTextAreaProps) {\n    return (\n        <AriaTextArea\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'flex min-h-32 w-full border border-input bg-popover px-3 py-2 body-sm ring-offset-background placeholder:text-muted-foreground',\n                    /* Focused */\n                    'focus-ring',\n                    /* Disabled */\n                    'disabled-muted',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {\n    textArea?: boolean;\n}\n\nexport function TextField({ label, description, errorMessage, textArea, className, ...props }: TextFieldProps) {\n    return (\n        <ATextField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} errorMessage={errorMessage} description={description}>\n                {textArea ? <TextArea /> : <Input />}\n            </FormField>\n        </ATextField>\n    );\n}\n\nexport function TfTextField({ isDisabled, ...props }: React.ComponentProps<typeof TextField>) {\n    const field = useTfFieldContext<string>({ disabled: isDisabled });\n\n    return (\n        <TextField\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            id={field.name}\n            name={field.name}\n            onBlur={field.handleBlur}\n            onChange={field.handleChange}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["ATextField","AriaTextField","Input","className","props","jsx","AriaInput","composeRenderProps","classNames","TextArea","AriaTextArea","TextField","label","description","errorMessage","textArea","FormField","TfTextField","isDisabled","field","useTfFieldContext","getFieldErrorMessage"],"mappings":"seAcA,MAAMA,EAAaC,EAEnB,SAASC,EAAM,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACpD,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,gLAEA,iBAEA,aACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAS,CAAE,UAAAN,EAAW,GAAGC,GAA4B,CAC1D,OACIC,EAACK,EAAA,CACG,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,iIAEA,aAEA,iBACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAMO,SAASO,EAAU,CAAE,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,SAAAC,EAAU,UAAAZ,EAAW,GAAGC,GAAyB,CAC3G,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAC,EAACW,EAAA,CAAU,MAAAJ,EAAc,aAAAE,EAA4B,YAAAD,EAChD,SAAAE,EAAWV,EAACI,EAAA,CAAA,CAAS,EAAKJ,EAACH,EAAA,CAAA,CAAM,CAAA,CACtC,CAAA,CAAA,CAGZ,CAEO,SAASe,EAAY,CAAE,WAAAC,EAAY,GAAGd,GAAiD,CAC1F,MAAMe,EAAQC,EAA0B,CAAE,SAAUF,EAAY,EAEhE,OACIb,EAACM,EAAA,CACG,WAAYO,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,KAAMA,EAAM,KACZ,OAAQA,EAAM,WACd,SAAUA,EAAM,aAChB,UAAW,CAAC,CAACE,EAAqBF,CAAK,EACvC,aAAcE,EAAqBF,CAAK,EACvC,GAAGf,CAAA,CAAA,CAGhB"}

package/dist/components/timeline.js

@@ -1,2 +1,2 @@
-import{jsx as i,jsxs as c}from"react/jsx-runtime";import{cva as a}from"class-variance-authority";import{classNames as n}from"../utils/primitives.js";import"clsx";import"lodash-es";function p({className:t,...e}){return i("ol",{className:n("grid grid-col-1 gap-icon",t),...e})}function v({className:t,...e}){return i("li",{className:n("grid grid-cols-[4rem_2rem_1fr] grid-rows-subgrid list-none gap-icon",t),...e})}const l=a("p-1 rounded-full",{variants:{variant:{destructive:"text-destructive-foreground bg-destructive",success:"text-success-foreground bg-success",muted:"text-muted-foreground bg-muted"}},defaultVariants:{variant:"muted"}});function x({icon:t,className:e,variant:r,...s}){return c("div",{...s,className:"flex flex-col items-center gap-2",children:[i("div",{className:n(l({variant:r,className:e})),children:i(t,{className:"size-icon "})}),i("div",{className:"h-full w-[1px]"})]})}function N({className:t,date:e,dateFormatter:r,...s}){const o=`${(e.getMonth()+1).toString().padStart(2,"0")}-${e.getFullYear()}`;return i("time",{...s,dateTime:e.toISOString(),className:n("font-mono leading-none text-muted",t),children:r?r(e):o})}function T({className:t,...e}){return i("section",{className:n("",t),...e})}export{p as Timeline,T as TimelineContent,N as TimelineDate,x as TimelineIcon,v as TimelineItem,l as timelineIconVariants};
+import{jsx as i,jsxs as c}from"react/jsx-runtime";import{cva as a}from"class-variance-authority";import{classNames as n}from"../utilities/primitives.js";import"clsx";import"lodash-es";function p({className:t,...e}){return i("ol",{className:n("grid grid-col-1 gap-icon",t),...e})}function v({className:t,...e}){return i("li",{className:n("grid grid-cols-[4rem_2rem_1fr] grid-rows-subgrid list-none gap-icon",t),...e})}const l=a("p-1 rounded-full",{variants:{variant:{destructive:"text-destructive-foreground bg-destructive",success:"text-success-foreground bg-success",muted:"text-muted-foreground bg-muted"}},defaultVariants:{variant:"muted"}});function x({icon:t,className:e,variant:r,...s}){return c("div",{...s,className:"flex flex-col items-center gap-2",children:[i("div",{className:n(l({variant:r,className:e})),children:i(t,{className:"size-icon "})}),i("div",{className:"h-full w-[1px]"})]})}function N({className:t,date:e,dateFormatter:r,...s}){const o=`${(e.getMonth()+1).toString().padStart(2,"0")}-${e.getFullYear()}`;return i("time",{...s,dateTime:e.toISOString(),className:n("font-mono leading-none text-muted",t),children:r?r(e):o})}function T({className:t,...e}){return i("section",{className:n("",t),...e})}export{p as Timeline,T as TimelineContent,N as TimelineDate,x as TimelineIcon,v as TimelineItem,l as timelineIconVariants};
 //# sourceMappingURL=timeline.js.map

package/dist/components/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../lib/components/timeline.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { classNames } from '../utils/primitives';\nimport type { CtxIcon } from './icons';\n\nexport function Timeline({ className, ...props }: React.ComponentProps<'ol'>) {\n    return <ol className={classNames('grid grid-col-1 gap-icon', className)} {...props} />;\n}\n\nexport function TimelineItem({ className, ...props }: React.ComponentProps<'li'> & {}) {\n    return (\n        <li\n            className={classNames('grid grid-cols-[4rem_2rem_1fr] grid-rows-subgrid list-none gap-icon', className)}\n            {...props}\n        />\n    );\n}\n\nexport const timelineIconVariants = cva(`p-1 rounded-full`, {\n    variants: {\n        variant: {\n            destructive: 'text-destructive-foreground bg-destructive',\n            success: 'text-success-foreground bg-success',\n            muted: 'text-muted-foreground bg-muted',\n        },\n    },\n    defaultVariants: {\n        variant: 'muted',\n    },\n});\n\nexport function TimelineIcon({\n    icon: Icon,\n    className,\n    variant,\n    ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> &\n    VariantProps<typeof timelineIconVariants> & {\n        icon: CtxIcon;\n    }) {\n    return (\n        <div {...props} className=\"flex flex-col items-center gap-2\">\n            <div className={classNames(timelineIconVariants({ variant, className }))}>\n                <Icon className=\"size-icon \" />\n            </div>\n            <div className=\"h-full w-[1px]\" />\n        </div>\n    );\n}\n\nexport function TimelineDate({\n    className,\n    date,\n    dateFormatter,\n    ...props\n}: Omit<React.ComponentProps<'time'>, 'dateTime' | 'children'> & {\n    date: Date;\n    dateFormatter?: (d: Date) => string;\n}) {\n    const defaultDateDisplay = `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getFullYear()}`;\n    return (\n        <time\n            {...props}\n            dateTime={date.toISOString()}\n            className={classNames('font-mono leading-none text-muted', className)}\n        >\n            {dateFormatter ? dateFormatter(date) : defaultDateDisplay}\n        </time>\n    );\n}\n\nexport function TimelineContent({ className, ...props }: React.ComponentProps<'section'>) {\n    return <section className={classNames('', className)} {...props} />;\n}\n"],"names":["Timeline","className","props","jsx","classNames","TimelineItem","timelineIconVariants","cva","TimelineIcon","Icon","variant","jsxs","TimelineDate","date","dateFormatter","defaultDateDisplay","TimelineContent"],"mappings":"oLAIO,SAASA,EAAS,CAAE,UAAAC,EAAW,GAAGC,GAAqC,CAC1E,OAAOC,EAAC,MAAG,UAAWC,EAAW,2BAA4BH,CAAS,EAAI,GAAGC,EAAO,CACxF,CAEO,SAASG,EAAa,CAAE,UAAAJ,EAAW,GAAGC,GAA0C,CACnF,OACIC,EAAC,KAAA,CACG,UAAWC,EAAW,sEAAuEH,CAAS,EACrG,GAAGC,CAAA,CAAA,CAGhB,CAEO,MAAMI,EAAuBC,EAAI,mBAAoB,CACxD,SAAU,CACN,QAAS,CACL,YAAa,6CACb,QAAS,qCACT,MAAO,gCAAA,CACX,EAEJ,gBAAiB,CACb,QAAS,OAAA,CAEjB,CAAC,EAEM,SAASC,EAAa,CACzB,KAAMC,EACN,UAAAR,EACA,QAAAS,EACA,GAAGR,CACP,EAGO,CACH,OACIS,EAAC,MAAA,CAAK,GAAGT,EAAO,UAAU,mCACtB,SAAA,CAAAC,EAAC,MAAA,CAAI,UAAWC,EAAWE,EAAqB,CAAE,QAAAI,EAAS,UAAAT,CAAA,CAAW,CAAC,EACnE,SAAAE,EAACM,EAAA,CAAK,UAAU,aAAa,EACjC,EACAN,EAAC,MAAA,CAAI,UAAU,gBAAA,CAAiB,CAAA,EACpC,CAER,CAEO,SAASS,EAAa,CACzB,UAAAX,EACA,KAAAY,EACA,cAAAC,EACA,GAAGZ,CACP,EAGG,CACC,MAAMa,EAAqB,IAAIF,EAAK,SAAA,EAAa,GAAG,SAAA,EAAW,SAAS,EAAG,GAAG,CAAC,IAAIA,EAAK,aAAa,GACrG,OACIV,EAAC,OAAA,CACI,GAAGD,EACJ,SAAUW,EAAK,YAAA,EACf,UAAWT,EAAW,oCAAqCH,CAAS,EAEnE,SAAAa,EAAgBA,EAAcD,CAAI,EAAIE,CAAA,CAAA,CAGnD,CAEO,SAASC,EAAgB,CAAE,UAAAf,EAAW,GAAGC,GAA0C,CACtF,OAAOC,EAAC,WAAQ,UAAWC,EAAW,GAAIH,CAAS,EAAI,GAAGC,EAAO,CACrE"}
+{"version":3,"file":"timeline.js","sources":["../../lib/components/timeline.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { classNames } from '../utilities/primitives';\nimport type { CtxIcon } from './icons';\n\nexport function Timeline({ className, ...props }: React.ComponentProps<'ol'>) {\n    return <ol className={classNames('grid grid-col-1 gap-icon', className)} {...props} />;\n}\n\nexport function TimelineItem({ className, ...props }: React.ComponentProps<'li'> & {}) {\n    return (\n        <li\n            className={classNames('grid grid-cols-[4rem_2rem_1fr] grid-rows-subgrid list-none gap-icon', className)}\n            {...props}\n        />\n    );\n}\n\nexport const timelineIconVariants = cva(`p-1 rounded-full`, {\n    variants: {\n        variant: {\n            destructive: 'text-destructive-foreground bg-destructive',\n            success: 'text-success-foreground bg-success',\n            muted: 'text-muted-foreground bg-muted',\n        },\n    },\n    defaultVariants: {\n        variant: 'muted',\n    },\n});\n\nexport function TimelineIcon({\n    icon: Icon,\n    className,\n    variant,\n    ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> &\n    VariantProps<typeof timelineIconVariants> & {\n        icon: CtxIcon;\n    }) {\n    return (\n        <div {...props} className=\"flex flex-col items-center gap-2\">\n            <div className={classNames(timelineIconVariants({ variant, className }))}>\n                <Icon className=\"size-icon \" />\n            </div>\n            <div className=\"h-full w-[1px]\" />\n        </div>\n    );\n}\n\nexport function TimelineDate({\n    className,\n    date,\n    dateFormatter,\n    ...props\n}: Omit<React.ComponentProps<'time'>, 'dateTime' | 'children'> & {\n    date: Date;\n    dateFormatter?: (d: Date) => string;\n}) {\n    const defaultDateDisplay = `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getFullYear()}`;\n    return (\n        <time\n            {...props}\n            dateTime={date.toISOString()}\n            className={classNames('font-mono leading-none text-muted', className)}\n        >\n            {dateFormatter ? dateFormatter(date) : defaultDateDisplay}\n        </time>\n    );\n}\n\nexport function TimelineContent({ className, ...props }: React.ComponentProps<'section'>) {\n    return <section className={classNames('', className)} {...props} />;\n}\n"],"names":["Timeline","className","props","jsx","classNames","TimelineItem","timelineIconVariants","cva","TimelineIcon","Icon","variant","jsxs","TimelineDate","date","dateFormatter","defaultDateDisplay","TimelineContent"],"mappings":"wLAIO,SAASA,EAAS,CAAE,UAAAC,EAAW,GAAGC,GAAqC,CAC1E,OAAOC,EAAC,MAAG,UAAWC,EAAW,2BAA4BH,CAAS,EAAI,GAAGC,EAAO,CACxF,CAEO,SAASG,EAAa,CAAE,UAAAJ,EAAW,GAAGC,GAA0C,CACnF,OACIC,EAAC,KAAA,CACG,UAAWC,EAAW,sEAAuEH,CAAS,EACrG,GAAGC,CAAA,CAAA,CAGhB,CAEO,MAAMI,EAAuBC,EAAI,mBAAoB,CACxD,SAAU,CACN,QAAS,CACL,YAAa,6CACb,QAAS,qCACT,MAAO,gCAAA,CACX,EAEJ,gBAAiB,CACb,QAAS,OAAA,CAEjB,CAAC,EAEM,SAASC,EAAa,CACzB,KAAMC,EACN,UAAAR,EACA,QAAAS,EACA,GAAGR,CACP,EAGO,CACH,OACIS,EAAC,MAAA,CAAK,GAAGT,EAAO,UAAU,mCACtB,SAAA,CAAAC,EAAC,MAAA,CAAI,UAAWC,EAAWE,EAAqB,CAAE,QAAAI,EAAS,UAAAT,CAAA,CAAW,CAAC,EACnE,SAAAE,EAACM,EAAA,CAAK,UAAU,aAAa,EACjC,EACAN,EAAC,MAAA,CAAI,UAAU,gBAAA,CAAiB,CAAA,EACpC,CAER,CAEO,SAASS,EAAa,CACzB,UAAAX,EACA,KAAAY,EACA,cAAAC,EACA,GAAGZ,CACP,EAGG,CACC,MAAMa,EAAqB,IAAIF,EAAK,SAAA,EAAa,GAAG,SAAA,EAAW,SAAS,EAAG,GAAG,CAAC,IAAIA,EAAK,aAAa,GACrG,OACIV,EAAC,OAAA,CACI,GAAGD,EACJ,SAAUW,EAAK,YAAA,EACf,UAAWT,EAAW,oCAAqCH,CAAS,EAEnE,SAAAa,EAAgBA,EAAcD,CAAI,EAAIE,CAAA,CAAA,CAGnD,CAEO,SAASC,EAAgB,CAAE,UAAAf,EAAW,GAAGC,GAA0C,CACtF,OAAOC,EAAC,WAAQ,UAAWC,EAAW,GAAIH,CAAS,EAAI,GAAGC,EAAO,CACrE"}

package/dist/components/tooltip.js

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import{TooltipTrigger as r,Tooltip as m,composeRenderProps as p}from"react-aria-components";import{classNames as n}from"../utils/primitives.js";import"clsx";import"lodash-es";const c=r,T=({className:o,offset:t=4,...e})=>a(m,{offset:t,className:p(o,i=>n("z-50 overflow-hidden border bg-popover px-3 py-1.5 body-sm text-popover-foreground shadow-md animate-in fade-in-0","data-[entering]:zoom-in-95","data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95","data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",i)),...e});export{T as Tooltip,c as TooltipTrigger};
+import{jsx as a}from"react/jsx-runtime";import{TooltipTrigger as r,Tooltip as m,composeRenderProps as p}from"react-aria-components";import{classNames as n}from"../utilities/primitives.js";import"clsx";import"lodash-es";const c=r,T=({className:o,offset:t=4,...e})=>a(m,{offset:t,className:p(o,i=>n("z-50 overflow-hidden border bg-popover px-3 py-1.5 body-sm text-popover-foreground shadow-md animate-in fade-in-0","data-[entering]:zoom-in-95","data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95","data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",i)),...e});export{T as Tooltip,c as TooltipTrigger};
 //# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../lib/components/tooltip.tsx"],"sourcesContent":["import {\n    Tooltip as AriaTooltip,\n    TooltipTrigger as AriaTooltipTrigger,\n    composeRenderProps,\n    type TooltipProps as AriaTooltipProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utils/primitives';\n\nconst TooltipTrigger = AriaTooltipTrigger;\nconst Tooltip = ({ className, offset = 4, ...props }: AriaTooltipProps) => (\n    <AriaTooltip\n        offset={offset}\n        className={composeRenderProps(className, className =>\n            classNames(\n                'z-50 overflow-hidden border bg-popover px-3 py-1.5 body-sm text-popover-foreground shadow-md animate-in fade-in-0',\n                /* Entering */\n                'data-[entering]:zoom-in-95',\n                /* Exiting */\n                'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',\n                /* Placement */\n                'data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\nexport { Tooltip, TooltipTrigger };\n"],"names":["TooltipTrigger","AriaTooltipTrigger","Tooltip","className","offset","props","jsx","AriaTooltip","composeRenderProps","classNames"],"mappings":"uNASA,MAAMA,EAAiBC,EACjBC,EAAU,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAS,EAAG,GAAGC,KACzCC,EAACC,EAAA,CACG,OAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,oHAEA,6BAEA,kFAEA,kLACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR"}
+{"version":3,"file":"tooltip.js","sources":["../../lib/components/tooltip.tsx"],"sourcesContent":["import {\n    Tooltip as AriaTooltip,\n    TooltipTrigger as AriaTooltipTrigger,\n    composeRenderProps,\n    type TooltipProps as AriaTooltipProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/primitives';\n\nconst TooltipTrigger = AriaTooltipTrigger;\nconst Tooltip = ({ className, offset = 4, ...props }: AriaTooltipProps) => (\n    <AriaTooltip\n        offset={offset}\n        className={composeRenderProps(className, className =>\n            classNames(\n                'z-50 overflow-hidden border bg-popover px-3 py-1.5 body-sm text-popover-foreground shadow-md animate-in fade-in-0',\n                /* Entering */\n                'data-[entering]:zoom-in-95',\n                /* Exiting */\n                'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',\n                /* Placement */\n                'data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\nexport { Tooltip, TooltipTrigger };\n"],"names":["TooltipTrigger","AriaTooltipTrigger","Tooltip","className","offset","props","jsx","AriaTooltip","composeRenderProps","classNames"],"mappings":"2NASA,MAAMA,EAAiBC,EACjBC,EAAU,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAS,EAAG,GAAGC,KACzCC,EAACC,EAAA,CACG,OAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,oHAEA,6BAEA,kFAEA,kLACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR"}

package/dist/utilities/date.d.ts

@@ -0,0 +1,2 @@
+export declare function secondsToDuration(seconds: number): string;
+export declare function formatDate(date?: string | null): string | null;

package/dist/utilities/date.js

@@ -0,0 +1,2 @@
+function o(n){const t=intervalToDuration({start:0,end:n*1e3});return[t.years&&`${t.years}y`,t.months&&`${t.months}m`,t.days&&`${t.days}d`,t.hours&&`${t.hours}h`].filter(Boolean).join(" ").trim()}function a(n){if(!n)return null;const t=new Date(n);return Intl.DateTimeFormat(navigator.language,{dateStyle:"medium",timeStyle:"short"}).format(t)}export{a as formatDate,o as secondsToDuration};
+//# sourceMappingURL=date.js.map

package/dist/utilities/date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","sources":["../../lib/utilities/date.ts"],"sourcesContent":["export function secondsToDuration(seconds: number): string {\n    //@ts-ignore\n    const duration = intervalToDuration({\n        start: 0,\n        end: seconds * 1000,\n    });\n\n    const parts = [\n        duration.years && `${duration.years}y`,\n        duration.months && `${duration.months}m`,\n        duration.days && `${duration.days}d`,\n        duration.hours && `${duration.hours}h`,\n    ];\n\n    // Filter out undefined values and join\n    return parts.filter(Boolean).join(' ').trim();\n}\n\nexport function formatDate(date?: string | null) {\n    if (!date) return null;\n    const _date = new Date(date);\n    return Intl.DateTimeFormat(navigator.language, {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n    }).format(_date);\n}\n"],"names":["secondsToDuration","seconds","duration","formatDate","date","_date"],"mappings":"AAAO,SAASA,EAAkBC,EAAyB,CAEvD,MAAMC,EAAW,mBAAmB,CAChC,MAAO,EACP,IAAKD,EAAU,GAAA,CAClB,EAUD,MARc,CACVC,EAAS,OAAS,GAAGA,EAAS,KAAK,IACnCA,EAAS,QAAU,GAAGA,EAAS,MAAM,IACrCA,EAAS,MAAQ,GAAGA,EAAS,IAAI,IACjCA,EAAS,OAAS,GAAGA,EAAS,KAAK,GAAA,EAI1B,OAAO,OAAO,EAAE,KAAK,GAAG,EAAE,KAAA,CAC3C,CAEO,SAASC,EAAWC,EAAsB,CAC7C,GAAI,CAACA,EAAM,OAAO,KAClB,MAAMC,EAAQ,IAAI,KAAKD,CAAI,EAC3B,OAAO,KAAK,eAAe,UAAU,SAAU,CAC3C,UAAW,SACX,UAAW,OAAA,CACd,EAAE,OAAOC,CAAK,CACnB"}

package/dist/utilities/form-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-context.js","sources":["../../lib/utilities/form-context.tsx"],"sourcesContent":["import { createFormHookContexts } from '@tanstack/react-form';\n\n/**\n * useFieldContext is used in custom components\n */\nexport const { fieldContext, formContext, useFieldContext } = createFormHookContexts();\n"],"names":["fieldContext","formContext","useFieldContext","createFormHookContexts"],"mappings":"8DAKO,KAAM,CAAE,aAAAA,EAAc,YAAAC,EAAa,gBAAAC,CAAA,EAAoBC,EAAA"}

package/dist/utilities/form-hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-hook.js","sources":["../../lib/utilities/form-hook.tsx"],"sourcesContent":["import { createFormHook } from '@tanstack/react-form';\nimport { Button } from '../components/button';\nimport { TfCheckbox } from '../components/checkbox';\nimport { TfMultiSelect } from '../components/multi-select';\nimport { TfNumberField } from '../components/numberfield';\nimport { TfSingleSelect } from '../components/select';\nimport { TfTextField } from '../components/textfield';\nimport { fieldContext, formContext } from '../utilities/form-context';\n\n/** Don't put this in the same file as form-context.tsx, this causes circular dependencies. */\n/** TODO, lazy loading when fieldComponents are large */\n/**\n * Builder for form logic and user interfaces\n */\nexport const { useAppForm } = createFormHook({\n    fieldComponents: {\n        TfTextField,\n        TfNumberField,\n        TfMultiSelect,\n        TfSingleSelect,\n        TfCheckbox,\n    },\n    formComponents: {\n        Button,\n    },\n    fieldContext,\n    formContext,\n});\n"],"names":["useAppForm","createFormHook","TfTextField","TfNumberField","TfMultiSelect","TfSingleSelect","TfCheckbox","Button","fieldContext","formContext"],"mappings":"k0BAcO,KAAM,CAAE,WAAAA,CAAA,EAAeC,EAAe,CACzC,gBAAiB,CACb,YAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,WAAAC,CAAA,EAEJ,eAAgB,CACZ,OAAAC,CAAA,EAEJ,aAAAC,EACA,YAAAC,CACJ,CAAC"}

package/dist/utilities/form-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-utils.js","sources":["../../lib/utilities/form-utils.tsx"],"sourcesContent":["import { type AnyFieldMeta, type FormApi } from '@tanstack/react-form';\nimport React from 'react';\nimport { useFieldContext } from './form-context';\n\ntype FieldContextProps = {\n    disabled?: boolean;\n};\n\n/**\n * Custom hook to handle disabled state for form fields\n * @param {boolean} disabled - The disabled prop passed to the component\n * @returns The field context with disabled state properly managed\n */\nexport const useTfFieldContext = <T,>({ disabled }: FieldContextProps) => {\n    const field = useFieldContext<T>();\n\n    React.useEffect(() => {\n        field.setMeta(meta => ({\n            ...meta,\n            disabled: !!disabled,\n        }));\n    }, [disabled, field]);\n\n    return field;\n};\n\n/** Utility type to simplify FormApi usage */\nexport type AppFormApi<TValues> = FormApi<TValues, any, any, any, any, any, any, any, any, any>;\n\n/**\n * Utility function to submit a form with a handler that receives the values and the formApi.\n * @param onSubmit - The handler function to call with the values and the formApi.\n * @returns A function that can be used to submit the form. It will filter out disabled fields from the values.\n */\nexport function tfOnSubmit<TValues>(\n    onSubmit: ({ values, formApi }: { values: TValues; formApi: AppFormApi<TValues> }) => Promise<any> | any\n) {\n    return async ({ formApi }: { formApi: AppFormApi<TValues> }): Promise<any> => {\n        const values = pickEnabledFields(formApi.state.values, formApi);\n\n        await onSubmit({ values, formApi });\n    };\n}\nfunction pickEnabledFields<TValues>(rawValues: TValues, formApi: AppFormApi<TValues>): TValues {\n    const result: TValues = {} as TValues;\n\n    //TODO: Nested objects are not supported yet\n    for (const key in rawValues) {\n        const meta = formApi.getFieldMeta(key) as AnyFieldMeta & {\n            disabled?: boolean;\n        };\n        if (!meta?.disabled) {\n            result[key] = rawValues[key];\n        }\n    }\n\n    return result;\n}\n"],"names":["useTfFieldContext","disabled","field","useFieldContext","React","meta","tfOnSubmit","onSubmit","formApi","values","pickEnabledFields","rawValues","result","key"],"mappings":"sGAaO,MAAMA,EAAoB,CAAK,CAAE,SAAAC,KAAkC,CACtE,MAAMC,EAAQC,EAAA,EAEd,OAAAC,EAAM,UAAU,IAAM,CAClBF,EAAM,QAAQG,IAAS,CACnB,GAAGA,EACH,SAAU,CAAC,CAACJ,CAAA,EACd,CACN,EAAG,CAACA,EAAUC,CAAK,CAAC,EAEbA,CACX,EAUO,SAASI,EACZC,EACF,CACE,MAAO,OAAO,CAAE,QAAAC,KAA8D,CAC1E,MAAMC,EAASC,EAAkBF,EAAQ,MAAM,OAAQA,CAAO,EAE9D,MAAMD,EAAS,CAAE,OAAAE,EAAQ,QAAAD,EAAS,CACtC,CACJ,CACA,SAASE,EAA2BC,EAAoBH,EAAuC,CAC3F,MAAMI,EAAkB,CAAA,EAGxB,UAAWC,KAAOF,EACDH,EAAQ,aAAaK,CAAG,GAG1B,WACPD,EAAOC,CAAG,EAAIF,EAAUE,CAAG,GAInC,OAAOD,CACX"}

package/dist/utilities/numbers.d.ts

@@ -0,0 +1 @@
+export declare function formatNumber(num: number | bigint): string;

package/dist/utilities/numbers.js

@@ -0,0 +1,2 @@
+function t(r){return Intl.NumberFormat().format(r)}export{t as formatNumber};
+//# sourceMappingURL=numbers.js.map

package/dist/utilities/numbers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numbers.js","sources":["../../lib/utilities/numbers.ts"],"sourcesContent":["export function formatNumber(num: number | bigint) {\n    return Intl.NumberFormat().format(num);\n}\n"],"names":["formatNumber","num"],"mappings":"AAAO,SAASA,EAAaC,EAAsB,CAC/C,OAAO,KAAK,eAAe,OAAOA,CAAG,CACzC"}

package/dist/utilities/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sources":["../../lib/utilities/primitives.ts"],"sourcesContent":["import type { FieldApi } from '@tanstack/react-form';\nimport { clsx, type ClassValue } from 'clsx';\nimport { startCase } from 'lodash-es';\n\n/** Classnames */\nexport function classNames(...inputs: ClassValue[]) {\n    return clsx(inputs);\n}\n\n/**\n * This is the variable name representing the primary hue.\n * Referenced in tokens.scss -> token.css\n */\nconst PRIMARY_HUE_PROPERTY = '--primary-hue';\n\n/**\n *\n * @returns\n */\nexport function getThemeHue() {\n    return document.documentElement.style.getPropertyValue(PRIMARY_HUE_PROPERTY);\n}\n\n/**\n * @param hue the hue value to set in the document style\n */\nexport function setThemeHue(hue: number) {\n    document.documentElement.style.setProperty(\n        PRIMARY_HUE_PROPERTY,\n        // In this case, it must be a number.\n        hue as unknown as string\n    );\n}\n\nconst ACCESS_TOKEN = 'AT';\nconst REFRESH_TOKEN = 'RT';\nexport function logout() {\n    if (typeof window !== 'undefined' && window.localStorage) {\n        try {\n            localStorage.removeItem(REFRESH_TOKEN);\n            localStorage.removeItem(ACCESS_TOKEN);\n            window.location.replace('/auth/login');\n        } catch (error) {\n            console.error('Logout failed:', error);\n        }\n    }\n}\n\nexport type JwtDecode = {\n    aud: string;\n    email: string;\n    exp: number;\n    iat: number;\n    jti: string;\n    region: string;\n    role: string;\n    role_type: string;\n    scope: string[];\n    sub: string;\n    teat: number;\n    tenantid: string;\n    token_usage: string;\n    sadmin?: string;\n};\n\nexport type CtxPortals = 'customer-portal' | 'system-portal' | 'reseller-portal' | 'admin-portal';\n\n/**\n *\n */\nexport function toTitleCase(input?: string): string {\n    return startCase(input);\n}\n\nexport function pluralizeTimes(resourceName: string, count: number) {\n    if (count > 1) {\n        if (/y$/.test(resourceName)) {\n            if (resourceName === 'Day') return 'Days';\n            return resourceName.replace(/y$/, 'ies');\n        }\n        return resourceName.concat('s');\n    }\n    return resourceName;\n}\n\nexport function getFieldErrorMessage(\n    field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>\n): string {\n    return field?.state.meta.errors.map(e => e?.message).join(',');\n}\n"],"names":["classNames","inputs","clsx","PRIMARY_HUE_PROPERTY","getThemeHue","setThemeHue","hue","ACCESS_TOKEN","REFRESH_TOKEN","logout","error","toTitleCase","input","startCase","pluralizeTimes","resourceName","count","getFieldErrorMessage","field","e"],"mappings":"kEAKO,SAASA,KAAcC,EAAsB,CAChD,OAAOC,EAAKD,CAAM,CACtB,CAMA,MAAME,EAAuB,gBAMtB,SAASC,GAAc,CAC1B,OAAO,SAAS,gBAAgB,MAAM,iBAAiBD,CAAoB,CAC/E,CAKO,SAASE,EAAYC,EAAa,CACrC,SAAS,gBAAgB,MAAM,YAC3BH,EAEAG,CAAA,CAER,CAEA,MAAMC,EAAe,KACfC,EAAgB,KACf,SAASC,GAAS,CACrB,GAAI,OAAO,OAAW,KAAe,OAAO,aACxC,GAAI,CACA,aAAa,WAAWD,CAAa,EACrC,aAAa,WAAWD,CAAY,EACpC,OAAO,SAAS,QAAQ,aAAa,CACzC,OAASG,EAAO,CACZ,QAAQ,MAAM,iBAAkBA,CAAK,CACzC,CAER,CAwBO,SAASC,EAAYC,EAAwB,CAChD,OAAOC,EAAUD,CAAK,CAC1B,CAEO,SAASE,EAAeC,EAAsBC,EAAe,CAChE,OAAIA,EAAQ,EACJ,KAAK,KAAKD,CAAY,EAClBA,IAAiB,MAAc,OAC5BA,EAAa,QAAQ,KAAM,KAAK,EAEpCA,EAAa,OAAO,GAAG,EAE3BA,CACX,CAEO,SAASE,EACZC,EACM,CACN,OAAOA,GAAO,MAAM,KAAK,OAAO,OAASC,GAAG,OAAO,EAAE,KAAK,GAAG,CACjE"}

package/dist/{utils/resource-names.d.ts → utilities/resources.d.ts}

@@ -9,3 +9,13 @@ export declare function ProjectProvider({ projectName, children }: {
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useProjectName(): CtxPortals;
 export declare function useResourceFormatter(): (resourceName: string) => string;
+export declare const CTX_RESOURCES: readonly ["account", "activation", "automatedEmail", "billingAddress", "entitlementSet", "feature", "featureEntitlement", "featureFlag", "license", "licenseTemplate", "maintenancePolicy", "oidcConfiguration", "oidcRoleMapping", "organization", "paymentMethod", "personalAccessToken", "plan", "product", "productVersion", "release", "releaseChannel", "releaseFile", "releasePlatform", "reseller", "role", "samlConfiguration", "segment", "sendingDomain", "tag", "trialActivation", "trialPolicy", "user", "userGroup", "webhook"];
+export type CtxResourceName = (typeof CTX_RESOURCES)[number];
+/**
+ * Format multiple license parameters (expired, suspended, revoked) into a single status
+ */
+export declare function getLicenseStatus(license: any): string;
+export declare function getValidityDisplay(validity: number | undefined): string;
+export declare const ALL_OS: {
+    [key: string]: string;
+};

package/dist/utilities/resources.js

@@ -0,0 +1,2 @@
+import{jsx as s}from"react/jsx-runtime";import{createContext as n,use as i}from"react";import{secondsToDuration as l}from"./date.js";import{toTitleCase as c}from"./primitives.js";import"clsx";import"lodash-es";const t={"product.displayName":"Product",product_displayName:"Product"},A=["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"],v={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 d(e,o){return o!=="admin-portal"&&e in t?t[e]:e in a?a[e]:c(e)}const r=n("admin-portal");function w({projectName:e,children:o}){return s(r.Provider,{value:e,children:o})}function u(){return i(r)}function P(){const e=u();return o=>d(o,e)}const R=["account","activation","automatedEmail","billingAddress","entitlementSet","feature","featureEntitlement","featureFlag","license","licenseTemplate","maintenancePolicy","oidcConfiguration","oidcRoleMapping","organization","paymentMethod","personalAccessToken","plan","product","productVersion","release","releaseChannel","releaseFile","releasePlatform","reseller","role","samlConfiguration","segment","sendingDomain","tag","trialActivation","trialPolicy","user","userGroup","webhook"];function S(e){const o=e.expiresAt&&new Date(e.expiresAt)<new Date;switch(!0){case(e.revoked&&e.suspended&&o):return"Revoked, Suspended, Expired";case(e.revoked&&e.suspended):return"Revoked, Suspended";case(e.revoked&&o):return"Revoked, Expired";case(e.suspended&&o):return"Suspended, Expired";case e.suspended:return"Suspended";case e.revoked:return"Revoked";case o:return"Expired";default:return"Active"}}function k(e){return e===0||!e?"Lifetime":l(e)}const b={windows:"Windows",macos:"macOS",linux:"Linux",ios:"iOS",android:"Android"};export{b as ALL_OS,R as CTX_RESOURCES,w as ProjectProvider,v as RESOURCE_DEFINITIONS,A as RESOURCE_NAMES,S as getLicenseStatus,k as getValidityDisplay,u as useProjectName,P as useResourceFormatter};
+//# sourceMappingURL=resources.js.map

package/dist/utilities/resources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resources.js","sources":["../../lib/utilities/resources.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport { secondsToDuration } from './date';\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    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\nexport const CTX_RESOURCES = [\n    'account',\n    'activation',\n    'automatedEmail',\n    'billingAddress',\n    'entitlementSet',\n    'feature',\n    'featureEntitlement',\n    'featureFlag',\n    'license',\n    'licenseTemplate',\n    'maintenancePolicy',\n    'oidcConfiguration',\n    'oidcRoleMapping',\n    'organization',\n    'paymentMethod',\n    'personalAccessToken',\n    'plan',\n    'product',\n    'productVersion',\n    'release',\n    'releaseChannel',\n    'releaseFile',\n    'releasePlatform',\n    'reseller',\n    'role',\n    'samlConfiguration',\n    'segment',\n    'sendingDomain',\n    'tag',\n    'trialActivation',\n    'trialPolicy',\n    'user',\n    'userGroup',\n    'webhook',\n] as const;\n\nexport type CtxResourceName = (typeof CTX_RESOURCES)[number];\n\n/**\n * Format multiple license parameters (expired, suspended, revoked) into a single status\n */\nexport function getLicenseStatus(license: any): string {\n    const licenseExpired = license.expiresAt && new Date(license.expiresAt) < new Date();\n    // Status Column\n    switch (true) {\n        case license.revoked && license.suspended && licenseExpired:\n            return 'Revoked, Suspended, Expired';\n        case license.revoked && license.suspended:\n            return 'Revoked, Suspended';\n        case license.revoked && licenseExpired:\n            return 'Revoked, Expired';\n        case license.suspended && licenseExpired:\n            return 'Suspended, Expired';\n        case license.suspended:\n            return 'Suspended';\n        case license.revoked:\n            return 'Revoked';\n        case licenseExpired:\n            return 'Expired';\n        default:\n            return 'Active';\n    }\n}\n\nexport function getValidityDisplay(validity: number | undefined) {\n    if (validity === 0 || !validity) {\n        return 'Lifetime';\n    } else {\n        return secondsToDuration(validity);\n    }\n}\n\nexport const ALL_OS: { [key: string]: string } = {\n    windows: 'Windows',\n    macos: 'macOS',\n    linux: 'Linux',\n    ios: 'iOS',\n    android: 'Android',\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","CTX_RESOURCES","getLicenseStatus","license","licenseExpired","getValidityDisplay","validity","secondsToDuration","ALL_OS"],"mappings":"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"}

package/dist/utilities/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","sources":["../../lib/utilities/use-mobile.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n    const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);\n\n    useEffect(() => {\n        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n        const onChange = () => {\n            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n        };\n        mql.addEventListener('change', onChange);\n        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n        return () => mql.removeEventListener('change', onChange);\n    }, []);\n\n    return !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","useState","useEffect","mql","onChange"],"mappings":"gDAEA,MAAMA,EAAoB,IAEnB,SAASC,GAAc,CAC1B,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAA8B,MAAS,EAEvE,OAAAC,EAAU,IAAM,CACZ,MAAMC,EAAM,OAAO,WAAW,eAAeN,EAAoB,CAAC,KAAK,EACjEO,EAAW,IAAM,CACnBJ,EAAY,OAAO,WAAaH,CAAiB,CACrD,EACA,OAAAM,EAAI,iBAAiB,SAAUC,CAAQ,EACvCJ,EAAY,OAAO,WAAaH,CAAiB,EAC1C,IAAMM,EAAI,oBAAoB,SAAUC,CAAQ,CAC3D,EAAG,CAAA,CAAE,EAEE,CAAC,CAACL,CACb"}

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,10 +37,12 @@
 @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;
+    @apply h-input px-icon py-2 body-sm leading-none;
 }
 
 @utility form-column {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.5.2",
+  "version": "6.5.4",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -10,9 +10,9 @@
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
     },
-    "./utils/*": {
-      "import": "./dist/utils/*.js",
-      "types": "./dist/utils/*.d.ts"
+    "./utilities/*": {
+      "import": "./dist/utilities/*.js",
+      "types": "./dist/utilities/*.d.ts"
     },
     "./*.css": "./lib/*.css"
   },

package/dist/utils/form-context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-context.js","sources":["../../lib/utils/form-context.tsx"],"sourcesContent":["import { createFormHookContexts } from '@tanstack/react-form';\n\n/**\n * useFieldContext is used in custom components\n */\nexport const { fieldContext, formContext, useFieldContext } = createFormHookContexts();\n"],"names":["fieldContext","formContext","useFieldContext","createFormHookContexts"],"mappings":"8DAKO,KAAM,CAAE,aAAAA,EAAc,YAAAC,EAAa,gBAAAC,CAAA,EAAoBC,EAAA"}

package/dist/utils/form-hook.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-hook.js","sources":["../../lib/utils/form-hook.tsx"],"sourcesContent":["import { createFormHook } from '@tanstack/react-form';\nimport { Button } from '../components/button';\nimport { TfCheckbox } from '../components/checkbox';\nimport { TfMultiSelect } from '../components/multi-select';\nimport { TfNumberField } from '../components/numberfield';\nimport { TfSingleSelect } from '../components/select';\nimport { TfTextField } from '../components/textfield';\nimport { fieldContext, formContext } from '../utils/form-context';\n\n/** Don't put this in the same file as form-context.tsx, this causes circular dependencies. */\n/** TODO, lazy loading when fieldComponents are large */\n/**\n * Builder for form logic and user interfaces\n */\nexport const { useAppForm } = createFormHook({\n    fieldComponents: {\n        TfTextField,\n        TfNumberField,\n        TfMultiSelect,\n        TfSingleSelect,\n        TfCheckbox,\n    },\n    formComponents: {\n        Button,\n    },\n    fieldContext,\n    formContext,\n});\n"],"names":["useAppForm","createFormHook","TfTextField","TfNumberField","TfMultiSelect","TfSingleSelect","TfCheckbox","Button","fieldContext","formContext"],"mappings":"k0BAcO,KAAM,CAAE,WAAAA,CAAA,EAAeC,EAAe,CACzC,gBAAiB,CACb,YAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,WAAAC,CAAA,EAEJ,eAAgB,CACZ,OAAAC,CAAA,EAEJ,aAAAC,EACA,YAAAC,CACJ,CAAC"}

package/dist/utils/form-utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-utils.js","sources":["../../lib/utils/form-utils.tsx"],"sourcesContent":["import { type AnyFieldMeta, type FormApi } from '@tanstack/react-form';\nimport React from 'react';\nimport { useFieldContext } from './form-context';\n\ntype FieldContextProps = {\n    disabled?: boolean;\n};\n\n/**\n * Custom hook to handle disabled state for form fields\n * @param {boolean} disabled - The disabled prop passed to the component\n * @returns The field context with disabled state properly managed\n */\nexport const useTfFieldContext = <T,>({ disabled }: FieldContextProps) => {\n    const field = useFieldContext<T>();\n\n    React.useEffect(() => {\n        field.setMeta(meta => ({\n            ...meta,\n            disabled: !!disabled,\n        }));\n    }, [disabled, field]);\n\n    return field;\n};\n\n/** Utility type to simplify FormApi usage */\nexport type AppFormApi<TValues> = FormApi<TValues, any, any, any, any, any, any, any, any, any>;\n\n/**\n * Utility function to submit a form with a handler that receives the values and the formApi.\n * @param onSubmit - The handler function to call with the values and the formApi.\n * @returns A function that can be used to submit the form. It will filter out disabled fields from the values.\n */\nexport function tfOnSubmit<TValues>(\n    onSubmit: ({ values, formApi }: { values: TValues; formApi: AppFormApi<TValues> }) => Promise<any> | any\n) {\n    return async ({ formApi }: { formApi: AppFormApi<TValues> }): Promise<any> => {\n        const values = pickEnabledFields(formApi.state.values, formApi);\n\n        await onSubmit({ values, formApi });\n    };\n}\nfunction pickEnabledFields<TValues>(rawValues: TValues, formApi: AppFormApi<TValues>): TValues {\n    const result: TValues = {} as TValues;\n\n    //TODO: Nested objects are not supported yet\n    for (const key in rawValues) {\n        const meta = formApi.getFieldMeta(key) as AnyFieldMeta & {\n            disabled?: boolean;\n        };\n        if (!meta?.disabled) {\n            result[key] = rawValues[key];\n        }\n    }\n\n    return result;\n}\n"],"names":["useTfFieldContext","disabled","field","useFieldContext","React","meta","tfOnSubmit","onSubmit","formApi","values","pickEnabledFields","rawValues","result","key"],"mappings":"sGAaO,MAAMA,EAAoB,CAAK,CAAE,SAAAC,KAAkC,CACtE,MAAMC,EAAQC,EAAA,EAEd,OAAAC,EAAM,UAAU,IAAM,CAClBF,EAAM,QAAQG,IAAS,CACnB,GAAGA,EACH,SAAU,CAAC,CAACJ,CAAA,EACd,CACN,EAAG,CAACA,EAAUC,CAAK,CAAC,EAEbA,CACX,EAUO,SAASI,EACZC,EACF,CACE,MAAO,OAAO,CAAE,QAAAC,KAA8D,CAC1E,MAAMC,EAASC,EAAkBF,EAAQ,MAAM,OAAQA,CAAO,EAE9D,MAAMD,EAAS,CAAE,OAAAE,EAAQ,QAAAD,EAAS,CACtC,CACJ,CACA,SAASE,EAA2BC,EAAoBH,EAAuC,CAC3F,MAAMI,EAAkB,CAAA,EAGxB,UAAWC,KAAOF,EACDH,EAAQ,aAAaK,CAAG,GAG1B,WACPD,EAAOC,CAAG,EAAIF,EAAUE,CAAG,GAInC,OAAOD,CACX"}

package/dist/utils/primitives.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"primitives.js","sources":["../../lib/utils/primitives.ts"],"sourcesContent":["import type { FieldApi } from '@tanstack/react-form';\nimport { clsx, type ClassValue } from 'clsx';\nimport { startCase } from 'lodash-es';\n\n/** Classnames */\nexport function classNames(...inputs: ClassValue[]) {\n    return clsx(inputs);\n}\n\n/**\n * This is the variable name representing the primary hue.\n * Referenced in tokens.scss -> token.css\n */\nconst PRIMARY_HUE_PROPERTY = '--primary-hue';\n\n/**\n *\n * @returns\n */\nexport function getThemeHue() {\n    return document.documentElement.style.getPropertyValue(PRIMARY_HUE_PROPERTY);\n}\n\n/**\n * @param hue the hue value to set in the document style\n */\nexport function setThemeHue(hue: number) {\n    document.documentElement.style.setProperty(\n        PRIMARY_HUE_PROPERTY,\n        // In this case, it must be a number.\n        hue as unknown as string\n    );\n}\n\nconst ACCESS_TOKEN = 'AT';\nconst REFRESH_TOKEN = 'RT';\nexport function logout() {\n    if (typeof window !== 'undefined' && window.localStorage) {\n        try {\n            localStorage.removeItem(REFRESH_TOKEN);\n            localStorage.removeItem(ACCESS_TOKEN);\n            window.location.replace('/auth/login');\n        } catch (error) {\n            console.error('Logout failed:', error);\n        }\n    }\n}\n\nexport type JwtDecode = {\n    aud: string;\n    email: string;\n    exp: number;\n    iat: number;\n    jti: string;\n    region: string;\n    role: string;\n    role_type: string;\n    scope: string[];\n    sub: string;\n    teat: number;\n    tenantid: string;\n    token_usage: string;\n    sadmin?: string;\n};\n\nexport type CtxPortals = 'customer-portal' | 'system-portal' | 'reseller-portal' | 'admin-portal';\n\n/**\n *\n */\nexport function toTitleCase(input?: string): string {\n    return startCase(input);\n}\n\nexport function pluralizeTimes(resourceName: string, count: number) {\n    if (count > 1) {\n        if (/y$/.test(resourceName)) {\n            if (resourceName === 'Day') return 'Days';\n            return resourceName.replace(/y$/, 'ies');\n        }\n        return resourceName.concat('s');\n    }\n    return resourceName;\n}\n\nexport function getFieldErrorMessage(\n    field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>\n): string {\n    return field?.state.meta.errors.map(e => e?.message).join(',');\n}\n"],"names":["classNames","inputs","clsx","PRIMARY_HUE_PROPERTY","getThemeHue","setThemeHue","hue","ACCESS_TOKEN","REFRESH_TOKEN","logout","error","toTitleCase","input","startCase","pluralizeTimes","resourceName","count","getFieldErrorMessage","field","e"],"mappings":"kEAKO,SAASA,KAAcC,EAAsB,CAChD,OAAOC,EAAKD,CAAM,CACtB,CAMA,MAAME,EAAuB,gBAMtB,SAASC,GAAc,CAC1B,OAAO,SAAS,gBAAgB,MAAM,iBAAiBD,CAAoB,CAC/E,CAKO,SAASE,EAAYC,EAAa,CACrC,SAAS,gBAAgB,MAAM,YAC3BH,EAEAG,CAAA,CAER,CAEA,MAAMC,EAAe,KACfC,EAAgB,KACf,SAASC,GAAS,CACrB,GAAI,OAAO,OAAW,KAAe,OAAO,aACxC,GAAI,CACA,aAAa,WAAWD,CAAa,EACrC,aAAa,WAAWD,CAAY,EACpC,OAAO,SAAS,QAAQ,aAAa,CACzC,OAASG,EAAO,CACZ,QAAQ,MAAM,iBAAkBA,CAAK,CACzC,CAER,CAwBO,SAASC,EAAYC,EAAwB,CAChD,OAAOC,EAAUD,CAAK,CAC1B,CAEO,SAASE,EAAeC,EAAsBC,EAAe,CAChE,OAAIA,EAAQ,EACJ,KAAK,KAAKD,CAAY,EAClBA,IAAiB,MAAc,OAC5BA,EAAa,QAAQ,KAAM,KAAK,EAEpCA,EAAa,OAAO,GAAG,EAE3BA,CACX,CAEO,SAASE,EACZC,EACM,CACN,OAAOA,GAAO,MAAM,KAAK,OAAO,OAASC,GAAG,OAAO,EAAE,KAAK,GAAG,CACjE"}