@cryptlex/web-components 6.6.6-alpha19 → 6.6.6-alpha20

package/dist/components/sidebar.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,Fragment as C,jsxs as S}from"react/jsx-runtime";import{createContext as O,use as _,useState as v,useCallback as x,useEffect as D,useMemo as I}from"react";import{Button as T}from"./button.js";import{DialogTrigger as B,DialogOverlay as E,DialogContent as z}from"./dialog.js";import{TooltipTrigger as G,Tooltip as K}from"./tooltip.js";import{classNames as i}from"../utilities/theme.js";import{useIsMobile as L}from"../utilities/use-mobile.js";import{IcMoreHorizontal as R,IcLeft as j,IcRight as A}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"./popover.js";const F="/",N=O(null);function h(){const e=_(N);if(!e)throw new Error("useSidebar must be used within a SidebarProvider.");return e}function ae({defaultOpen:e=!0,open:a,onOpenChange:n,className:l,style:d,children:o,...s}){const u=L(),[p,b]=v(!1),[M,y]=v(e),f=a??M,m=x(r=>{const c=typeof r=="function"?r(f):r;n?n(c):y(c)},[n,f]),g=x(()=>u?b(r=>!r):m(r=>!r),[u,m,b]);D(()=>{const r=c=>{c.key===F&&(c.metaKey||c.ctrlKey)&&(c.preventDefault(),g())};return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[g]);const w=f?"expanded":"collapsed",k=I(()=>({state:w,open:f,setOpen:m,isMobile:u,openMobile:p,setOpenMobile:b,toggleSidebar:g}),[w,f,m,u,p,b,g]);return t(N.Provider,{value:k,children:t("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background",l),...s,children:o})})}function te({side:e="left",variant:a="sidebar",collapsible:n="offcanvas",className:l,children:d,...o}){const{isMobile:s,state:u,openMobile:p,setOpenMobile:b}=h();return n==="none"?t("div",{className:i("flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground",l),...o,children:d}):s?t(B,{isOpen:p,onOpenChange:b,...o,children:t(E,{children:t(z,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>t(C,{children:d})})})}):S("div",{className:"group peer hidden text-sidebar-foreground md:block","data-state":u,"data-collapsible":u==="collapsed"?n:"","data-variant":a,"data-side":e,children:[t("div",{className:i("relative w-(--sidebar-width) bg-sidebar-background transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",a==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon]")}),t("div",{className:i("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",e==="left"?"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]":"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",a==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",l),...o,children:t("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border",children:d})})]})}function ie({className:e,onClick:a,...n}){const{toggleSidebar:l,open:d,isMobile:o}=h();return t(T,{"data-sidebar":"trigger",variant:"neutral",size:"icon",className:"rounded-full",onClick:s=>{a?.(s),l()},...n,children:o?t(R,{}):d?t(j,{}):t(A,{})})}function ne({className:e,...a}){return t("div",{"data-sidebar":"content",className:i("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",e),...a})}function re({className:e,...a}){return t("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col",e),...a})}function oe({className:e,...a}){return t("div",{"data-sidebar":"group-label",className:i("flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0",e),...a})}function le({className:e,...a}){return t("div",{"data-sidebar":"group-content",className:i("w-full body-sm",e),...a})}function de({className:e,...a}){return t("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",e),...a})}function se({className:e,...a}){return t("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none",e),...a})}function ue({className:e,...a}){return t("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input","group-data-[collapsible=icon]:hidden",e),...a})}function ce({className:e,number:a,...n}){return t("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-300 h-input select-none flex items-center justify-center body-sm tabular-nums","group-data-[collapsible=icon]:hidden",e),...n,children:new Intl.NumberFormat(navigator.language,{useGrouping:!0}).format(a)})}function be({className:e,...a}){return t("ul",{"data-sidebar":"menu-sub",className:i("ms-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",e),...a})}function fe({className:e,...a}){return t("li",{className:i("list-none ms-0",e),...a})}function pe({isActive:e=!1,tooltip:a,className:n,...l}){const{isMobile:d,state:o}=h(),s=t("button",{"data-sidebar":"menu-button","data-selected":e,className:i("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ","btn-tab w-full",n),...l});return a?S(G,{children:[s,t(K,{hidden:o!=="collapsed"||d,...a})]}):s}function me({isActive:e,className:a,...n}){return t("button",{"data-sidebar":"menu-sub-button","data-active":e,className:i("group-data-[collapsible=icon]:hidden","btn-tab w-full",a),...n})}function ge({className:e,...a}){return t("div",{className:i(e,"w-full overflow-auto"),...a})}function he(){}export{te as Sidebar,ne as SidebarContent,N as SidebarContext,he as SidebarDisclosure,re as SidebarGroup,le as SidebarGroupContent,oe as SidebarGroupLabel,de as SidebarMenu,ue as SidebarMenuAction,ce as SidebarMenuBadge,pe as SidebarMenuButton,se as SidebarMenuItem,be as SidebarMenuSub,me as SidebarMenuSubButton,fe as SidebarMenuSubItem,ge as SidebarOutlet,ae as SidebarProvider,ie as SidebarTrigger,h as useSidebar};
+"use client";import{jsx as a,Fragment as O,jsxs as S}from"react/jsx-runtime";import{createContext as k,use as _,useState as v,useCallback as x,useEffect as I,useMemo as D}from"react";import{Button as T}from"./button.js";import{DialogTrigger as z,DialogOverlay as B,DialogContent as E}from"./dialog.js";import{TooltipTrigger as G,Tooltip as K}from"./tooltip.js";import{classNames as i}from"../utilities/theme.js";import{useIsMobile as L}from"../utilities/use-mobile.js";import{IcMoreHorizontal as R,IcLeft as j,IcRight as A}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"./popover.js";const H="/",N=k(null);function h(){const e=_(N);if(!e)throw new Error("useSidebar must be used within a SidebarProvider.");return e}function te({defaultOpen:e=!0,open:t,onOpenChange:n,className:l,style:s,children:r,...d}){const u=L(),[p,b]=v(!1),[M,y]=v(e),f=t??M,m=x(o=>{const c=typeof o=="function"?o(f):o;n?n(c):y(c)},[n,f]),g=x(()=>u?b(o=>!o):m(o=>!o),[u,m,b]);I(()=>{const o=c=>{c.key===H&&(c.metaKey||c.ctrlKey)&&(c.preventDefault(),g())};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[g]);const w=f?"expanded":"collapsed",C=D(()=>({state:w,open:f,setOpen:m,isMobile:u,openMobile:p,setOpenMobile:b,toggleSidebar:g}),[w,f,m,u,p,b,g]);return a(N.Provider,{value:C,children:a("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1",l),...d,children:r})})}function ae({side:e="left",variant:t="sidebar",collapsible:n="offcanvas",className:l,children:s,...r}){const{isMobile:d,state:u,openMobile:p,setOpenMobile:b}=h();return n==="none"?a("div",{className:i("flex h-full w-[--sidebar-width] flex-col bg-elevation-1 text-foreground",l),...r,children:s}):d?a(z,{isOpen:p,onOpenChange:b,...r,children:a(B,{children:a(E,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>a(O,{children:s})})})}):S("div",{className:"group peer hidden text-foreground md:block","data-state":u,"data-collapsible":u==="collapsed"?n:"","data-variant":t,"data-side":e,children:[a("div",{className:i("relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",t==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon]")}),a("div",{className:i("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",e==="left"?"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]":"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",t==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",l),...r,children:a("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border",children:s})})]})}function ie({className:e,onClick:t,...n}){const{toggleSidebar:l,open:s,isMobile:r}=h();return a(T,{"data-sidebar":"trigger",variant:"neutral",size:"icon",className:"rounded-full",onClick:d=>{t?.(d),l()},...n,children:r?a(R,{}):s?a(j,{}):a(A,{})})}function ne({className:e,...t}){return a("div",{"data-sidebar":"content",className:i("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",e),...t})}function oe({className:e,...t}){return a("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col",e),...t})}function re({className:e,...t}){return a("div",{"data-sidebar":"group-label",className:i("flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0",e),...t})}function le({className:e,...t}){return a("div",{"data-sidebar":"group-content",className:i("w-full body-sm",e),...t})}function se({className:e,...t}){return a("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",e),...t})}function de({className:e,...t}){return a("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none",e),...t})}function ue({className:e,...t}){return a("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input","group-data-[collapsible=icon]:hidden",e),...t})}function ce({className:e,number:t,...n}){return a("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-300 h-input select-none flex items-center justify-center body-sm tabular-nums","group-data-[collapsible=icon]:hidden",e),...n,children:new Intl.NumberFormat(navigator.language,{useGrouping:!0}).format(t)})}function be({className:e,...t}){return a("ul",{"data-sidebar":"menu-sub",className:i("ms-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",e),...t})}function fe({className:e,...t}){return a("li",{className:i("list-none ms-0",e),...t})}function pe({isActive:e=!1,tooltip:t,className:n,...l}){const{isMobile:s,state:r}=h(),d=a("button",{"data-sidebar":"menu-button",...e&&{"data-selected":!0},className:i("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ","btn-tab w-full",n),...l});return t?S(G,{children:[d,a(K,{hidden:r!=="collapsed"||s,...t})]}):d}function me({isActive:e,className:t,...n}){return a("button",{"data-sidebar":"menu-sub-button","data-active":e,className:i("group-data-[collapsible=icon]:hidden","btn-tab w-full",t),...n})}function ge({className:e,...t}){return a("div",{className:i(e,"w-full overflow-auto"),...t})}function he({className:e,...t}){return a("nav",{className:i("flex items-center h-header bg-glass-1 sticky top-0 z-50 p-2 border-b",e),...t})}export{ae as Sidebar,ne as SidebarContent,N as SidebarContext,oe as SidebarGroup,le as SidebarGroupContent,re as SidebarGroupLabel,se as SidebarMenu,ue as SidebarMenuAction,ce as SidebarMenuBadge,pe as SidebarMenuButton,de as SidebarMenuItem,be as SidebarMenuSub,me as SidebarMenuSubButton,fe as SidebarMenuSubItem,ge as SidebarOutlet,he as SidebarOutletHeader,te as SidebarProvider,ie as SidebarTrigger,h as useSidebar};
 //# sourceMappingURL=sidebar.js.map

package/dist/components/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\nimport { 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/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { IcLeft, IcMoreHorizontal, 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\n/**\n * Get the current sidebar state and controls. Must be inside SidebarProvider.\n * @throws When used outside of SidebarProvider\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\n/**\n * Wraps your app layout and manages sidebar state. Handles keyboard shortcuts (Cmd/Ctrl + /)\n * and mobile vs desktop behavior.\n *\n * @example\n * <SidebarProvider>\n *   <Sidebar>...</Sidebar>\n *   <SidebarOutlet>\n *     <main>Your app content</main>\n *   </SidebarOutlet>\n * </SidebarProvider>\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    /** Initial open state. Defaults to true */\n    defaultOpen?: boolean;\n    /** Control the open state yourself */\n    open?: boolean;\n    /** Callback when sidebar opens/closes */\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\n/**\n * The actual sidebar panel. On mobile it becomes a modal dialog.\n */\nexport function Sidebar({\n    side = 'left',\n    variant = 'sidebar',\n    collapsible = 'offcanvas',\n    className,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    /** Where to dock the sidebar. Default: left */\n    side?: 'left' | 'right';\n    /** Style variant. Default: sidebar */\n    variant?: 'sidebar' | 'floating';\n    /** How it collapses. Default: offcanvas */\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                        ? '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\"\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n}\n\n/**\n * Button that toggles the sidebar. Shows arrow icons.\n */\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n    const { toggleSidebar, open, isMobile } = 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            {isMobile ? <IcMoreHorizontal /> : open ? <IcLeft /> : <IcRight />}\n        </Button>\n    );\n}\n\n/**\n * Scrollable container for sidebar content\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\n/**\n * Groups related menu items together\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', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Label for a group.\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\n/**\n * Content wrapper for a group\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\n/**\n * Container for menu items\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\n/**\n * Single menu item wrapper\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/**\n * Extra action button that appears on the right side of menu items\n */\nexport function SidebarMenuAction({\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    /** Only show on hover */\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',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Shows a number badge on menu items. Auto-formats large numbers.\n */\nexport function SidebarMenuBadge({\n    className,\n    number,\n    ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n    /** The count to display */\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 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\n/**\n * Nested submenu container\n */\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n    return (\n        <ul\n            data-sidebar=\"menu-sub\"\n            className={classNames(\n                'ms-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\n/**\n * Submenu item wrapper\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/**\n * Main menu button. Pass isActive for current page.\n */\nexport function SidebarMenuButton({\n    isActive = false,\n    tooltip,\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    /** Mark as currently active page */\n    isActive?: boolean;\n    /** Tooltip when sidebar is collapsed */\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\n/**\n * Button for submenu items\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('group-data-[collapsible=icon]:hidden', 'btn-tab w-full', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * The main content area next to the sidebar\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\n}\n\nexport function SidebarDisclosure() {}\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","IcMoreHorizontal","IcLeft","IcRight","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarOutlet","SidebarDisclosure"],"mappings":"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"}
+{"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/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { IcLeft, IcMoreHorizontal, 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\n/**\n * Get the current sidebar state and controls. Must be inside SidebarProvider.\n * @throws When used outside of SidebarProvider\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\n/**\n * Wraps your app layout and manages sidebar state. Handles keyboard shortcuts (Cmd/Ctrl + /)\n * and mobile vs desktop behavior.\n *\n * @example\n * <SidebarProvider>\n *   <Sidebar>...</Sidebar>\n *   <SidebarOutlet>\n *     <main>Your app content</main>\n *   </SidebarOutlet>\n * </SidebarProvider>\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    /** Initial open state. Defaults to true */\n    defaultOpen?: boolean;\n    /** Control the open state yourself */\n    open?: boolean;\n    /** Callback when sidebar opens/closes */\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-elevation-1',\n                    className\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n}\n\n/**\n * The actual sidebar panel. On mobile it becomes a modal dialog.\n */\nexport function Sidebar({\n    side = 'left',\n    variant = 'sidebar',\n    collapsible = 'offcanvas',\n    className,\n    children,\n    ...props\n}: React.ComponentProps<'div'> & {\n    /** Where to dock the sidebar. Default: left */\n    side?: 'left' | 'right';\n    /** Style variant. Default: sidebar */\n    variant?: 'sidebar' | 'floating';\n    /** How it collapses. Default: offcanvas */\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-elevation-1 text-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-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-elevation-1 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                        ? '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-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border\"\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n}\n\n/**\n * Button that toggles the sidebar. Shows arrow icons.\n */\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n    const { toggleSidebar, open, isMobile } = 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            {isMobile ? <IcMoreHorizontal /> : open ? <IcLeft /> : <IcRight />}\n        </Button>\n    );\n}\n\n/**\n * Scrollable container for sidebar content\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\n/**\n * Groups related menu items together\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', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Label for a group.\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\n/**\n * Content wrapper for a group\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\n/**\n * Container for menu items\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\n/**\n * Single menu item wrapper\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/**\n * Extra action button that appears on the right side of menu items\n */\nexport function SidebarMenuAction({\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    /** Only show on hover */\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',\n                'group-data-[collapsible=icon]:hidden',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Shows a number badge on menu items. Auto-formats large numbers.\n */\nexport function SidebarMenuBadge({\n    className,\n    number,\n    ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n    /** The count to display */\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 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\n/**\n * Nested submenu container\n */\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n    return (\n        <ul\n            data-sidebar=\"menu-sub\"\n            className={classNames(\n                'ms-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\n/**\n * Submenu item wrapper\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/**\n * Main menu button. Pass isActive for current page.\n */\nexport function SidebarMenuButton({\n    isActive = false,\n    tooltip,\n    className,\n    ...props\n}: React.ComponentProps<'button'> & {\n    /** Mark as currently active page */\n    isActive?: boolean;\n    /** Tooltip when sidebar is collapsed */\n    tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n    const { isMobile, state } = useSidebar();\n\n    const button = (\n        <button\n            data-sidebar=\"menu-button\"\n            {...(isActive && { 'data-selected': true })}\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\n/**\n * Button for submenu items\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('group-data-[collapsible=icon]:hidden', 'btn-tab w-full', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * The main content area next to the sidebar\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\n}\n\n/**\n *\n * @example Basic usage\n * ```tsx\n * <SidebarOutlet>\n *  <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>\n * </SidebarOutlet>\n * ```\n */\nexport function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>) {\n    return (\n        <nav\n            className={classNames('flex items-center h-header bg-glass-1 sticky top-0 z-50 p-2 border-b', className)}\n            {...props}\n        />\n    );\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","IcMoreHorizontal","IcLeft","IcRight","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarOutlet","SidebarOutletHeader"],"mappings":"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"}

package/dist/components/textfield.d.ts

@@ -4,5 +4,5 @@ export interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {
     textArea?: boolean;
     inputClassName?: string;
 }
-export declare function TextField({ label, description, errorMessage, textArea, className, inputClassName, ...props }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextField({ label, description, errorMessage, textArea, className, inputClassName, requiredIndicator, ...props }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare function TfTextField({ isDisabled, ...props }: React.ComponentProps<typeof TextField>): import("react/jsx-runtime").JSX.Element;

package/dist/components/textfield.js

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{TextField as p,composeRenderProps as o,TextArea as c,Input as x}from"react-aria-components";import{getFieldErrorMessage as m}from"../utilities/form.js";import{useFieldContext as g}from"../utilities/form-context.js";import{classNames as n}from"../utilities/theme.js";import{FormField as F,fieldGroupVariants as s}from"./form.js";import"@tanstack/react-form";import"react";import"clsx";import"class-variance-authority";import"./icons.js";const T=p;function h({className:r,...t}){return i(x,{className:o(r,e=>n(s(),"file:border-0 file:bg-transparent file:body-sm file:font-medium","disabled-muted","focus-ring",e)),...t})}function b({className:r,...t}){return i(c,{className:o(r,e=>n(s(),"h-full min-h-32",e)),...t})}function N({label:r,description:t,errorMessage:e,textArea:l,className:d,inputClassName:a,...f}){return i(T,{className:o(d,u=>n("group form-field",u)),...f,children:i(F,{label:r,errorMessage:e,description:t,children:l?i(b,{className:a}):i(h,{className:a})})})}function P({isDisabled:r,...t}){const e=g({disabled:r});return i(N,{isDisabled:r||e.form.state.isSubmitting,value:e.state.value,id:e.name,name:e.name,onBlur:e.handleBlur,onChange:e.handleChange,isInvalid:!!m(e),errorMessage:m(e),...t})}export{N as TextField,P as TfTextField};
+import{jsx as i}from"react/jsx-runtime";import{TextField as c,composeRenderProps as o,TextArea as x,Input as g}from"react-aria-components";import{getFieldErrorMessage as m}from"../utilities/form.js";import{useFieldContext as F}from"../utilities/form-context.js";import{classNames as n}from"../utilities/theme.js";import{FormField as T,fieldGroupVariants as s}from"./form.js";import"@tanstack/react-form";import"react";import"clsx";import"class-variance-authority";import"./icons.js";const h=c;function b({className:r,...t}){return i(g,{className:o(r,e=>n(s(),"file:border-0 file:bg-transparent file:body-sm file:font-medium","disabled-muted","focus-ring",e)),...t})}function N({className:r,...t}){return i(x,{className:o(r,e=>n(s(),"h-full min-h-32",e)),...t})}function A({label:r,description:t,errorMessage:e,textArea:l,className:d,inputClassName:a,requiredIndicator:f,...u}){return i(h,{className:o(d,p=>n("group form-field",p)),...u,children:i(T,{label:r,description:t,errorMessage:e,requiredIndicator:f,children:l?i(N,{className:a}):i(b,{className:a})})})}function R({isDisabled:r,...t}){const e=F({disabled:r});return i(A,{isDisabled:r||e.form.state.isSubmitting,value:e.state.value,id:e.name,name:e.name,onBlur:e.handleBlur,onChange:e.handleChange,isInvalid:!!m(e),errorMessage:m(e),...t})}export{A as TextField,R 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';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './form';\n\nconst ATextField = AriaTextField;\n\nfunction Input({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    fieldGroupVariants(),\n                    'file:border-0 file:bg-transparent file:body-sm file:font-medium',\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(fieldGroupVariants(), 'h-full min-h-32', className)\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {\n    textArea?: boolean;\n    inputClassName?: string;\n}\n\nexport function TextField({\n    label,\n    description,\n    errorMessage,\n    textArea,\n    className,\n    inputClassName,\n    ...props\n}: 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 className={inputClassName} /> : <Input className={inputClassName} />}\n            </FormField>\n        </ATextField>\n    );\n}\n\nexport function TfTextField({ isDisabled, ...props }: React.ComponentProps<typeof TextField>) {\n    const field = useFieldContext<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","fieldGroupVariants","TextArea","AriaTextArea","TextField","label","description","errorMessage","textArea","inputClassName","FormField","TfTextField","isDisabled","field","useFieldContext","getFieldErrorMessage"],"mappings":"meAcA,MAAMA,EAAaC,EAEnB,SAASC,EAAM,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACpD,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACIC,EAAA,EACA,kEAEA,iBAEA,aACAN,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASM,EAAS,CAAE,UAAAP,EAAW,GAAGC,GAA4B,CAC1D,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWC,EAAA,EAAsB,kBAAmBN,CAAS,CAAA,EAEhE,GAAGC,CAAA,CAAA,CAGhB,CAOO,SAASQ,EAAU,CACtB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAb,EACA,eAAAc,EACA,GAAGb,CACP,EAAmB,CACf,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAC,EAACa,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EAChD,SAAAE,EAAWX,EAACK,EAAA,CAAS,UAAWO,EAAgB,EAAKZ,EAACH,EAAA,CAAM,UAAWe,EAAgB,CAAA,CAC5F,CAAA,CAAA,CAGZ,CAEO,SAASE,EAAY,CAAE,WAAAC,EAAY,GAAGhB,GAAiD,CAC1F,MAAMiB,EAAQC,EAAwB,CAAE,SAAUF,EAAY,EAE9D,OACIf,EAACO,EAAA,CACG,WAAYQ,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,GAAGjB,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';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './form';\n\nconst ATextField = AriaTextField;\n\nfunction Input({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    fieldGroupVariants(),\n                    'file:border-0 file:bg-transparent file:body-sm file:font-medium',\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(fieldGroupVariants(), 'h-full min-h-32', className)\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {\n    textArea?: boolean;\n    inputClassName?: string;\n}\n\nexport function TextField({\n    label,\n    description,\n    errorMessage,\n    textArea,\n    className,\n    inputClassName,\n    requiredIndicator,\n    ...props\n}: TextFieldProps) {\n    return (\n        <ATextField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n                {textArea ? <TextArea className={inputClassName} /> : <Input className={inputClassName} />}\n            </FormField>\n        </ATextField>\n    );\n}\n\nexport function TfTextField({ isDisabled, ...props }: React.ComponentProps<typeof TextField>) {\n    const field = useFieldContext<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","fieldGroupVariants","TextArea","AriaTextArea","TextField","label","description","errorMessage","textArea","inputClassName","requiredIndicator","FormField","TfTextField","isDisabled","field","useFieldContext","getFieldErrorMessage"],"mappings":"meAcA,MAAMA,EAAaC,EAEnB,SAASC,EAAM,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACpD,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACIC,EAAA,EACA,kEAEA,iBAEA,aACAN,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASM,EAAS,CAAE,UAAAP,EAAW,GAAGC,GAA4B,CAC1D,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWC,EAAA,EAAsB,kBAAmBN,CAAS,CAAA,EAEhE,GAAGC,CAAA,CAAA,CAGhB,CAOO,SAASQ,EAAU,CACtB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAb,EACA,eAAAc,EACA,kBAAAC,EACA,GAAGd,CACP,EAAmB,CACf,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAgB,MAAAN,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAG,EAC9C,WAAWb,EAACK,EAAA,CAAS,UAAWO,EAAgB,IAAMf,EAAA,CAAM,UAAWe,EAAgB,CAAA,CAC5F,CAAA,CAAA,CAGZ,CAEO,SAASG,EAAY,CAAE,WAAAC,EAAY,GAAGjB,GAAiD,CAC1F,MAAMkB,EAAQC,EAAwB,CAAE,SAAUF,EAAY,EAE9D,OACIhB,EAACO,EAAA,CACG,WAAYS,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,GAAGlB,CAAA,CAAA,CAGhB"}

package/lib/index.css

@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@plugin 'tailwindcss-react-aria-components';
 @import './tokens.css';
 /** https://tailwindcss.com/docs/theme#theme-variable-namespaces */
 @theme inline {
@@ -70,16 +71,10 @@
     --color-success-10: var(--success-10);
 
     --color-background: var(--color-neutral-3);
+    --color-foreground: var(--color-neutral-8);
     --color-elevation-1: var(--color-neutral-2);
     --color-elevation-2: var(--color-neutral-1);
 
-    --color-foreground: var(--color-neutral-8);
-    --color-card: var(--color-elevation-1);
-    --color-card-foreground: var(--color-foreground);
-    /* Assuming popovers only show up over cards ??? */
-    --color-popover: var(--color-elevation-2);
-    --color-popover-foreground: var(--color-foreground);
-
     --color-primary: var(--color-primary-7);
     --color-primary-foreground: var(--color-primary-2);
     --color-secondary: var(--color-secondary-7);
@@ -103,9 +98,6 @@
     --color-chart-4: var(--color-secondary-4);
     --color-chart-5: var(--color-secondary-2);
 
-    --color-sidebar-background: var(--color-elevation-1);
-    --color-sidebar-foreground: var(--color-foreground);
-
     --spacing-input: --spacing(8);
     --spacing-icon: --spacing(4);
     --spacing-table: --spacing(100);
@@ -130,47 +122,51 @@
     @apply text-primary/70 focus:text-primary hover:text-primary;
 }
 
+@utility bg-glass-1 {
+    @apply bg-elevation-1/20 backdrop-blur-xl;
+}
+
 /* Fluid grid with minimum width */
 @utility grid-fluid {
     @apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-icon;
 }
 
 @utility focus-ring {
-    @apply data-[focus-visible]:outline-none focus-visible:outline-none data-[focus-visible]:ring-1 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 focus-visible:outline-hidden focus-visible:ring-offset-2 focus-visible:ring-1 focus-visible:ring-ring;
+    @apply focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden;
 }
 
 @utility disabled-muted {
-    @apply disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-70;
+    @apply disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 disabled:pointer-events-none;
 }
 @utility input {
-    @apply border border-input bg-popover px-icon py-2 body-sm placeholder:text-muted-foreground disabled-muted focus-ring;
+    @apply border border-input bg-elevation-2 px-icon py-2 body-sm placeholder:text-muted-foreground disabled-muted focus-ring;
 }
 
 /* A base set of classes for elements that can be clicked */
 @utility btn {
-    @apply inline-flex body-sm gap-1 data-[disabled]:pointer-events-none text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors cursor-pointer ring-offset-background [&_svg:not([class*='size-'])]:size-icon shrink-0 [&_svg]:shrink-0 [&_svg]:opacity-70 leading-none outline-none no-underline whitespace-nowrap select-none disabled-muted focus-ring;
+    @apply inline-flex body-sm gap-1 disabled:pointer-events-none text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors cursor-pointer ring-offset-background [&_svg:not([class*='size-'])]:size-icon shrink-0 [&_svg]:shrink-0 [&_svg]:opacity-70 leading-none outline-none no-underline whitespace-nowrap select-none disabled-muted focus-ring;
 }
 
 @utility btn-link {
     @apply btn-ghost underline underline-offset-2;
 }
 @utility btn-primary {
-    @apply border border-primary text-primary bg-primary/10 hover:bg-primary/20 data-[hovered]:bg-primary/20 focus:bg-primary/20 data-[focused]:bg-primary/20;
+    @apply border border-primary text-primary bg-primary/10 hover:bg-primary/20 focus:bg-primary/20;
 }
 @utility btn-destructive {
-    @apply border border-destructive text-destructive bg-destructive/10 hover:bg-destructive/20 data-[hovered]:bg-destructive/20 focus:bg-destructive/20 data-[focused]:bg-destructive/20;
+    @apply border border-destructive text-destructive bg-destructive/10 hover:bg-destructive/20 focus:bg-destructive/20;
 }
 @utility btn-neutral {
-    @apply border border-input text-accent bg-accent/10 hover:bg-accent/20 data-[hovered]:bg-accent/20 focus:bg-accent/20 data-[focused]:bg-accent/20;
+    @apply border border-input text-accent bg-accent/10 hover:bg-accent/20 focus:bg-accent/20;
 }
 @utility btn-secondary {
-    @apply border border-secondary text-secondary bg-secondary/10 hover:bg-secondary/20 data-[hovered]:bg-secondary/20 focus:bg-secondary/20 data-[focused]:bg-secondary/20;
+    @apply border border-secondary text-secondary bg-secondary/10 hover:bg-secondary/20 focus:bg-secondary/20;
 }
 @utility btn-ghost {
-    @apply bg-transparent focus:bg-accent/20 data-[focused]:bg-accent/20 hover:bg-accent/20 data-[hovered]:bg-accent/20;
+    @apply bg-transparent focus:bg-accent/20 hover: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;
+    @apply truncate btn btn-ghost input-dim font-normal text-accent justify-start selected:bg-primary/20 selected:font-medium selected:text-primary;
 }
 /* Dimensions for a standard input */
 @utility input-dim {
@@ -214,7 +210,7 @@
     }
 
     body {
-        @apply bg-background text-foreground;
+        @apply bg-gradient-to-t from-background to-neutral-1 text-foreground;
     }
 
     .tw-prose a {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.6.6-alpha19",
+  "version": "6.6.6-alpha20",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -93,6 +93,7 @@
     "rollup-preserve-directives": "1.1.3",
     "sass": "1.89.2",
     "storybook": "9.1.4",
+    "tailwindcss-react-aria-components": "2.0.1",
     "typescript": "5.9.2",
     "vite": "7.1.4",
     "vite-plugin-dts": "4.5.4",