@cryptlex/web-components 6.6.39 → 6.6.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/alert.js +1 -1
- package/dist/components/alert.js.map +1 -1
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/calendar.js +1 -1
- package/dist/components/charts.js +1 -1
- package/dist/components/data-table.js +1 -1
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/datefield.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/disclosure.js +1 -1
- package/dist/components/icons.js +1 -456
- package/dist/components/icons.js.map +1 -1
- package/dist/components/id-search.js +1 -1
- package/dist/components/menu.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sidebar.d.ts +9 -7
- package/dist/components/sidebar.js +1 -1
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/tabs.js +1 -1
- package/lib/index.css +7 -9
- package/package.json +16 -16
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as n,jsxs as C}from"react/jsx-runtime";import{useQuery as w}from"@tanstack/react-query";import{useId as L,useState as K}from"react";import{Select as R,Autocomplete as _}from"react-aria-components";import{Loader as P}from"./loader.js";import{Menu as V,MenuItem as D}from"./menu.js";import{PopoverTrigger as G}from"./popover.js";import{SearchField as Q}from"./searchfield.js";import{useCtxClient as k}from"../utilities/ctx-client.js";import{
|
|
1
|
+
"use client";import{jsx as n,jsxs as C}from"react/jsx-runtime";import{useQuery as w}from"@tanstack/react-query";import{useId as L,useState as K}from"react";import{Select as R,Autocomplete as _}from"react-aria-components";import{Loader as P}from"./loader.js";import{Menu as V,MenuItem as D}from"./menu.js";import{PopoverTrigger as G}from"./popover.js";import{SearchField as Q}from"./searchfield.js";import{useCtxClient as k}from"../utilities/ctx-client.js";import{getEmptyLabel as F,isEmptyValue as z}from"../utilities/empty-option.js";import{getFieldErrorMessage as c}from"../utilities/form.js";import{useFieldContext as M}from"../utilities/form-context.js";import{FormField as H}from"./form.js";import{SelectTrigger as J,SelectPopover as U}from"./select.js";import"../utilities/theme.js";import"clsx";import"./icons.js";import"@icons-pack/react-simple-icons";import"./list-box.js";import"./button.js";import"class-variance-authority";import"@tanstack/react-form";import"./card.js";function W(r){return Array.isArray(r)&&r.every(i=>i&&typeof i=="object"&&"id"in i&&"name"in i)}function N({label:r,description:i,errorMessage:e,requiredIndicator:t,isDisabled:o,isInvalid:s,onBlur:u,path:a,onChange:h,value:f,renderLabel:q,accessor:p,defaultParams:g,className:x,emptyOption:E,...y}){if(a==="/v3/me")throw Error('Path "/v3/me" is not supported with IdSearch since it is not a searchable resource.');const A=L(),S=y.id||A,B=k(),[d,T]=K(""),{data:I,isError:v,isFetching:b,error:j}=w({queryKey:["get",a,d],queryFn:async()=>{const m=(await B.GET(a,{params:{query:{search:d,...g?.query,limit:50,page:1},path:{...g?.path}}})).data;return m&&W(m)?m:[]}});return n("div",{className:"group form-field","data-invalid":s?"":void 0,children:n(H,{label:r,description:i,errorMessage:e,requiredIndicator:t,htmlFor:S,children:n(R,{isInvalid:s,children:C(G,{onOpenChange:l=>{l||u?.(f)},children:[n(J,{id:S,isDisabled:o,className:x??"w-full",children:q(f,I,E)}),n(U,{placement:"bottom start",children:C(_,{inputValue:d,onInputChange:T,children:[n(Q,{className:"p-2",autoFocus:!0}),b&&n("div",{className:"p-input",children:n(P,{className:"mx-auto"})}),!b&&!v&&n(V,{...y,className:"max-h-48",items:I,renderEmptyState:()=>n("div",{className:"body-sm p-2",children:"No results found."}),children:l=>n(D,{id:l[p],children:l.name},l[p])}),v&&n("div",{className:"text-destructive p-icon body-sm",children:j.message})]})})]})})})})}function X({...r}){const i=r.value?[r.value]:[];return n(N,{selectedKeys:i,onSelectionChange:e=>{const t=Array.from(e).filter(o=>typeof o=="string")[0];r.onChange(t)},renderLabel:(e,t,o)=>o&&z(e)?F(o):t?.find(s=>s.id===e)?.name??"",selectionMode:"single",...r})}function Y({...r}){const i=r.value;return n(N,{selectedKeys:i,onSelectionChange:e=>{const t=Array.from(e).filter(o=>typeof o=="string");r.onChange(t.length>0?t:[])},selectionMode:"multiple",renderLabel:(e,t,o)=>{if(o&&(!e||e.length===0))return F(o);const u=(e??[]).map(a=>t?.find(h=>h.id===a)?.name??a);return u.length>0?u.join(","):""},...r})}function ve({isDisabled:r,...i}){const e=M({disabled:r});return n(X,{requiredIndicator:e.isRequired,isDisabled:r||e.isSubmitting,value:e.state.value,onBlur:t=>e.handleBlur(),onChange:t=>e.handleChange(t),isInvalid:!!c(e),errorMessage:c(e),...i})}function be({isDisabled:r,...i}){const e=M({disabled:r});return n(Y,{requiredIndicator:e.isRequired,isDisabled:r||e.isSubmitting,value:e.state.value,onBlur:t=>e.handleBlur(),onChange:t=>e.handleChange(t),isInvalid:!!c(e),errorMessage:c(e),...i})}export{Y as MultipleIdSearchInput,X as SingleIdSearchInput,be as TfMultipleIdSearchInput,ve as TfSingleIdSearchInput};
|
|
2
2
|
//# sourceMappingURL=id-search.js.map
|
package/dist/components/menu.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as u,jsx as o,Fragment as c}from"react/jsx-runtime";import{MenuTrigger as d,MenuItem as b,composeRenderProps as m,Menu as f,SubmenuTrigger as M,Header as g,
|
|
1
|
+
import{jsxs as u,jsx as o,Fragment as c}from"react/jsx-runtime";import{MenuTrigger as d,MenuItem as b,composeRenderProps as m,Menu as f,SubmenuTrigger as M,Header as g,Keyboard as y,Separator as N}from"react-aria-components";import{classNames as a}from"../utilities/theme.js";import{IcDot as x,IcCheck as h,IcRight as S}from"./icons.js";import{ListBoxCollection as v}from"./list-box.js";import{SelectTrigger as I,SelectPopover as T}from"./select.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";import"./button.js";import"class-variance-authority";import"./loader.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./form.js";import"./card.js";import"./popover.js";const j=d,U=M,W=v;function z({className:e,...t}){return o(T,{className:m(e,r=>a(r)),...t})}function w({className:e,...t}){return o(f,{className:a("overflow-auto p-1 outline-0 body-base",e),escapeKeyBehavior:"none",...t})}function X({children:e,className:t,...r}){return o(b,{textValue:r.textValue||(typeof e=="string"?e:void 0),className:m(t,i=>a("btn btn-ghost relative flex justify-start input-dim","data-[selection-mode]:pl-input",i)),...r,children:m(e,(i,n)=>u(c,{children:[o("span",{className:"absolute left-2 flex size-icon items-center justify-center",children:n.isSelected&&u(c,{children:[n.selectionMode=="single"&&o(x,{className:"size-icon fill-current"}),n.selectionMode=="multiple"&&o(h,{className:"size-icon"})]})}),i,n.hasSubmenu&&o(S,{className:"ml-auto size-icon"})]}))})}function Y({className:e,inset:t,separator:r=!0,...i}){return o(g,{className:a("px-3 py-1.5 body font-semibold",t&&"pl-input",r&&"-mx-1 mb-1 border-b border-b-border pb-2.5",e),...i})}function Z({className:e,...t}){return o(N,{className:a("-mx-1 my-1 h-px bg-muted",e),...t})}function _({className:e,...t}){return o(y,{className:a("ml-auto body-sm tracking-widest opacity-60",e),...t})}function ee({label:e,children:t,variant:r,isDisabled:i,size:n,isNonModal:C,id:l,"aria-label":p="Menu",...s}){return u(j,{...s,children:[o(I,{id:l,isDisabled:i,autoFocus:!!s.autoFocus,variant:r,size:n,"aria-label":p,children:e}),o(z,{className:"overflow-auto",children:o(w,{...s,children:t})})]})}export{ee as EasyMenu,w as Menu,W as MenuCollection,Y as MenuHeader,X as MenuItem,_ as MenuKeyboard,z as MenuPopover,Z as MenuSeparator,U as MenuSubTrigger,j as MenuTrigger};
|
|
2
2
|
//# sourceMappingURL=menu.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as i,jsxs as a,Fragment as p}from"react/jsx-runtime";import{useId as g}from"react";import{Select as h,composeRenderProps as l,SelectValue as S,ListBox as x}from"react-aria-components";import{Button as N}from"./button.js";import{getFieldErrorMessage as b}from"../utilities/form.js";import{useFieldContext as B}from"../utilities/form-context.js";import{classNames as o}from"../utilities/theme.js";import{FormField as w}from"./form.js";import{IcDown as I}from"./icons.js";import{ListBoxItem as F,
|
|
1
|
+
"use client";import{jsx as i,jsxs as a,Fragment as p}from"react/jsx-runtime";import{useId as g}from"react";import{Select as h,composeRenderProps as l,SelectValue as S,ListBox as x}from"react-aria-components";import{Button as N}from"./button.js";import{getFieldErrorMessage as b}from"../utilities/form.js";import{useFieldContext as B}from"../utilities/form-context.js";import{classNames as o}from"../utilities/theme.js";import{FormField as w}from"./form.js";import{IcDown as I}from"./icons.js";import{ListBoxItem as F,ListBoxCollection as v,ListBoxHeader as C}from"./list-box.js";import{Popover as L}from"./popover.js";import"class-variance-authority";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";import"@tanstack/react-form";import"./card.js";const D=h,j=F,Z=C,_=v,y=({className:r,...e})=>i(S,{className:l(r,t=>o("line-clamp-1 data-[placeholder]:text-muted-foreground","[&>[slot=description]]:hidden",t)),...e});function P({className:r,children:e,...t}){return i(N,{type:"button",...t,className:o("justify-between px-2",r),children:l(e,n=>a(p,{children:[i("span",{className:"inline-flex gap-1",children:n}),i(I,{"aria-hidden":"true"})]}))})}function V({className:r,...e}){return i(L,{className:l(r,t=>o("w-auto min-w-(--trigger-width)",t)),...e})}function q({className:r,...e}){return i(x,{className:l(r,t=>o("overflow-auto p-1 outline-none",t)),...e})}function H({label:r,description:e,errorMessage:t,children:n,className:d,requiredIndicator:m,items:u,...s}){const f=g(),c=s.id||f;return i("div",{className:o("group form-field",d),children:i(w,{label:r,description:e,errorMessage:t,requiredIndicator:m,htmlFor:c,children:a(D,{...s,children:[i(P,{className:"w-full",id:c,children:i(y,{className:"inline-flex gap-1 items-center"})}),i(V,{children:i(q,{items:u,children:n})})]})})})}function ee({...r}){const e=B({disabled:r.isDisabled});return i(H,{requiredIndicator:e.isRequired,selectedKey:e.state.value,onSelectionChange:t=>e.handleChange(t.toString()),onBlur:e.handleBlur,errorMessage:b(e),...r,isDisabled:r.isDisabled||e.isSubmitting,children:t=>i(j,{id:t.id,children:t.label},t.id)})}export{_ as SelectCollection,Z as SelectHeader,j as SelectItem,V as SelectPopover,P as SelectTrigger,y as SelectValue,H as SingleSelect,ee as TfSingleSelect};
|
|
2
2
|
//# sourceMappingURL=select.js.map
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Button } from '../components/button';
|
|
2
|
+
import { CtxIcon } from './icons';
|
|
2
3
|
type SidebarContextProps = {
|
|
3
4
|
state: 'expanded' | 'collapsed';
|
|
4
5
|
open: boolean;
|
|
@@ -95,12 +96,13 @@ export declare function SidebarMenuSub({ className, ...props }: React.ComponentP
|
|
|
95
96
|
* Submenu item wrapper
|
|
96
97
|
*/
|
|
97
98
|
export declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
|
|
98
|
-
export declare const sidebarMenuButtonClasses = "btn-
|
|
99
|
+
export declare const sidebarMenuButtonClasses = "btn-selected rounded-none border-0 justify-start w-full group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:justify-center";
|
|
99
100
|
/**
|
|
100
101
|
* Main menu button. Pass isActive for current page.
|
|
101
102
|
*/
|
|
102
|
-
export declare function SidebarMenuButton({ isActive, className, children, ...props }: Omit<React.ComponentProps<typeof Button>, 'children'> & {
|
|
103
|
+
export declare function SidebarMenuButton({ isActive, className, children, icon: Icon, ...props }: Omit<React.ComponentProps<typeof Button>, 'children'> & {
|
|
103
104
|
/** Mark as currently active page */
|
|
105
|
+
icon?: CtxIcon;
|
|
104
106
|
isActive?: boolean;
|
|
105
107
|
children?: React.ReactNode;
|
|
106
108
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -113,22 +115,22 @@ export declare function SidebarMenuSubButton({ isActive, className, ...props }:
|
|
|
113
115
|
/**
|
|
114
116
|
* Sticky header at the top of the sidebar. Displays a square logo slot aligned with the outlet header.
|
|
115
117
|
*/
|
|
116
|
-
export declare function SidebarHeader({ className, logo, children, ...props }: React.ComponentProps<'div'> & {
|
|
118
|
+
export declare function SidebarHeader({ className, logo, children, showTrigger, ...props }: React.ComponentProps<'div'> & {
|
|
117
119
|
/** Square logo/icon to display */
|
|
118
120
|
logo?: React.ReactNode;
|
|
121
|
+
showTrigger?: boolean;
|
|
119
122
|
}): import("react/jsx-runtime").JSX.Element;
|
|
120
|
-
/**
|
|
121
|
-
* The main content area next to the sidebar
|
|
122
|
-
*/
|
|
123
|
-
export declare function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
124
123
|
/**
|
|
125
124
|
*
|
|
126
125
|
* @example Basic usage
|
|
127
126
|
* ```tsx
|
|
128
127
|
* <SidebarOutlet>
|
|
129
128
|
* <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>
|
|
129
|
+
* <SidebarOutletContent><Outlet/></SidebarOutletContent>
|
|
130
130
|
* </SidebarOutlet>
|
|
131
131
|
* ```
|
|
132
132
|
*/
|
|
133
|
+
export declare function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
134
|
+
export declare function SidebarOutletContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
133
135
|
export declare function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element;
|
|
134
136
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as a,Fragment as _,jsxs as h}from"react/jsx-runtime";import{createContext as D,useState as x,useCallback as S,useEffect as j,useMemo as z,use as B}from"react";import{Button as N}from"./button.js";import{DialogTrigger as I,DialogOverlay as T,DialogContent as E}from"./dialog.js";import{TooltipTrigger as G,Tooltip as H}from"./tooltip.js";import{classNames as i}from"../utilities/theme.js";import{useIsMobile as K}from"../utilities/use-mobile.js";import{IcMoreHorizontal as L,IcLeft as R,IcRight as A}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";const F="/",M=D(null);function v(){const e=B(M);if(!e)throw new Error("useSidebar must be used within a SidebarProvider.");return e}function ie({defaultOpen:e=!0,open:t,onOpenChange:n,className:o,style:r,children:s,...d}){const u=K(),[f,b]=x(!1),[C,O]=x(e),p=t??C,m=S(l=>{const c=typeof l=="function"?l(p):l;n?n(c):O(c)},[n,p]),g=S(()=>u?b(l=>!l):m(l=>!l),[u,m,b]);j(()=>{const l=c=>{c.key===F&&(c.metaKey||c.ctrlKey)&&(c.preventDefault(),g())};return window.addEventListener("keydown",l),()=>window.removeEventListener("keydown",l)},[g]);const w=p?"expanded":"collapsed",k=z(()=>({state:w,open:p,setOpen:m,isMobile:u,openMobile:f,setOpenMobile:b,toggleSidebar:g}),[w,p,m,u,f,b,g]);return a(M.Provider,{value:k,children:a("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1",o),...d,children:s})})}function ne({side:e="left",variant:t="sidebar",collapsible:n="icon",className:o,children:r,...s}){const{isMobile:d,state:u,openMobile:f,setOpenMobile:b}=v();return n==="none"?a("div",{className:i("flex h-full w-(--sidebar-width) flex-col bg-elevation-1 text-foreground",o),...s,children:r}):d?a(I,{isOpen:f,onOpenChange:b,...s,children:a(T,{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(_,{children:r})})})}):h("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",o),...s,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:r})})]})}function P({className:e,onClick:t,...n}){const{toggleSidebar:o,open:r,isMobile:s}=v();return a(N,{"data-sidebar":"trigger",variant:"neutral",size:"icon-sm",className:i(e,"!rounded-full"),onClick:d=>{t?.(d),o()},...n,children:s?a(L,{}):r?a(R,{}):a(A,{})})}function oe({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 re({className:e,...t}){return a("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2",e),...t})}function le({className:e,...t}){return a("div",{"data-sidebar":"group-label",className:i("flex h-input shrink-0 items-center px-2 text-xs select-none font-medium uppercase text-muted-foreground 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 se({className:e,...t}){return a("div",{"data-sidebar":"group-content",className:i("w-full body-sm",e),...t})}function de({className:e,...t}){return a("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",e),...t})}function ue({className:e,...t}){return a("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden",e),...t})}function ce({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 be({className:e,number:t,...n}){return a("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-light 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 pe({className:e,...t}){return a("ul",{"data-sidebar":"menu-sub",className:i("ms-2 flex min-w-0 flex-col","group-data-[collapsible=icon]:hidden",e),...t})}function fe({className:e,...t}){return a("li",{className:i("list-none ms-0",e),...t})}const y="btn-selected rounded-none border-0 justify-start w-full group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:justify-center";function me({isActive:e=!1,className:t,children:n,icon:o,...r}){const{isMobile:s,state:d}=v();return h(G,{isDisabled:s||d!=="collapsed",children:[h(N,{size:d==="collapsed"?"icon":void 0,"data-sidebar":"menu-button",...e&&{"data-selected":!0},className:i("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input",y,t),...r,children:[o&&a(o,{}),d!=="collapsed"&&n]}),a(H,{placement:"right",children:a("span",{className:"flex items-center gap-2",children:n})})]})}function ge({isActive:e,className:t,...n}){return a("button",{"data-sidebar":"menu-sub-button","data-active":e,className:i(y,t),...n})}function he({className:e,logo:t,children:n,showTrigger:o=!0,...r}){return h("div",{"data-sidebar":"header",className:i("flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0",e),...r,children:[t&&a("div",{className:"flex items-center justify-center size-input shrink-0",children:t}),n&&a("div",{className:"flex-1 min-w-0 group-data-[collapsible=icon]:hidden",children:n}),o&&a(P,{className:"hidden bg-elevation-1 lg:flex lg:absolute lg:-right-4 lg:z-50"})]})}function ve({className:e,...t}){return a("div",{className:i(e,"flex flex-col flex-1 overflow-auto"),...t})}function we({className:e,...t}){return a("div",{className:i(e,"flex-1 overflow-auto"),...t})}function xe({className:e,...t}){return a("nav",{className:i("flex items-center h-header bg-elevation-1 p-2 border-b",e),...t})}export{ne as Sidebar,oe as SidebarContent,M as SidebarContext,re as SidebarGroup,se as SidebarGroupContent,le as SidebarGroupLabel,he as SidebarHeader,de as SidebarMenu,ce as SidebarMenuAction,be as SidebarMenuBadge,me as SidebarMenuButton,ue as SidebarMenuItem,pe as SidebarMenuSub,ge as SidebarMenuSubButton,fe as SidebarMenuSubItem,ve as SidebarOutlet,we as SidebarOutletContent,xe as SidebarOutletHeader,ie as SidebarProvider,P as SidebarTrigger,y as sidebarMenuButtonClasses,v as useSidebar};
|
|
2
2
|
//# sourceMappingURL=sidebar.js.map
|
|
@@ -1 +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-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 = 'icon',\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(\n 'relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2',\n className\n )}\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 text-xs select-none font-medium uppercase text-muted-foreground 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(\n 'group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden',\n className\n )}\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-light 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('ms-2 flex min-w-0 flex-col', 'group-data-[collapsible=icon]:hidden', className)}\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\nexport const sidebarMenuButtonClasses =\n 'btn-tab rounded-none border-0 justify-start w-full selected:shadow-[inset_2px_0_0_0_var(--color-primary)] group-data-[collapsible=icon]:![font-size:0] group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:selected:shadow-none';\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 className,\n children,\n ...props\n}: Omit<React.ComponentProps<typeof Button>, 'children'> & {\n /** Mark as currently active page */\n isActive?: boolean;\n children?: React.ReactNode;\n}) {\n const { isMobile, state } = useSidebar();\n\n return (\n <TooltipTrigger isDisabled={isMobile || state !== 'collapsed'}>\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',\n sidebarMenuButtonClasses,\n className\n )}\n {...props}\n >\n {children}\n </Button>\n <Tooltip placement=\"right\">\n <span className=\"flex items-center gap-2\">{children}</span>\n </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(sidebarMenuButtonClasses, className)}\n {...props}\n />\n );\n}\n\n/**\n * Sticky header at the top of the sidebar. Displays a square logo slot aligned with the outlet header.\n */\nexport function SidebarHeader({\n className,\n logo,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Square logo/icon to display */\n logo?: React.ReactNode;\n}) {\n return (\n <div\n data-sidebar=\"header\"\n className={classNames(\n 'flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0',\n className\n )}\n {...props}\n >\n {logo && <div className=\"flex items-center justify-center size-input shrink-0\">{logo}</div>}\n {children && <div className=\"flex-1 min-w-0 group-data-[collapsible=icon]:hidden\">{children}</div>}\n </div>\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(\n 'flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b',\n className\n )}\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","sidebarMenuButtonClasses","SidebarMenuButton","isActive","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarHeader","logo","SidebarOutlet","SidebarOutletHeader"],"mappings":"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"}
|
|
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, type CtxIcon } 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 = 'icon',\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-sm\"\n className={classNames(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(\n 'relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2',\n className\n )}\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 text-xs select-none font-medium uppercase text-muted-foreground 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(\n 'group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden',\n className\n )}\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-light 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('ms-2 flex min-w-0 flex-col', 'group-data-[collapsible=icon]:hidden', className)}\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\nexport const sidebarMenuButtonClasses =\n 'btn-selected rounded-none border-0 justify-start w-full group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:justify-center';\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 className,\n children,\n icon: Icon,\n ...props\n}: Omit<React.ComponentProps<typeof Button>, 'children'> & {\n /** Mark as currently active page */\n icon?: CtxIcon;\n isActive?: boolean;\n children?: React.ReactNode;\n}) {\n const { isMobile, state } = useSidebar();\n\n return (\n <TooltipTrigger isDisabled={isMobile || state !== 'collapsed'}>\n <Button\n size={state === 'collapsed' ? 'icon' : undefined}\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',\n sidebarMenuButtonClasses,\n className\n )}\n {...props}\n >\n {Icon && <Icon />}\n {state !== 'collapsed' && children}\n </Button>\n <Tooltip placement=\"right\">\n <span className=\"flex items-center gap-2\">{children}</span>\n </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(sidebarMenuButtonClasses, className)}\n {...props}\n />\n );\n}\n\n/**\n * Sticky header at the top of the sidebar. Displays a square logo slot aligned with the outlet header.\n */\nexport function SidebarHeader({\n className,\n logo,\n children,\n showTrigger = true,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Square logo/icon to display */\n logo?: React.ReactNode;\n showTrigger?: boolean;\n}) {\n return (\n <div\n data-sidebar=\"header\"\n className={classNames(\n 'flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0',\n className\n )}\n {...props}\n >\n {logo && <div className=\"flex items-center justify-center size-input shrink-0\">{logo}</div>}\n {children && <div className=\"flex-1 min-w-0 group-data-[collapsible=icon]:hidden\">{children}</div>}\n {showTrigger && (\n <SidebarTrigger className={'hidden bg-elevation-1 lg:flex lg:absolute lg:-right-4 lg:z-50'} />\n )}\n </div>\n );\n}\n\n/**\n *\n * @example Basic usage\n * ```tsx\n * <SidebarOutlet>\n * <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>\n * <SidebarOutletContent><Outlet/></SidebarOutletContent>\n * </SidebarOutlet>\n * ```\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'flex flex-col flex-1 overflow-auto')} {...props} />;\n}\n\nexport function SidebarOutletContent({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'flex-1 overflow-auto')} {...props} />;\n}\n\nexport function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>) {\n return (\n <nav className={classNames('flex items-center h-header bg-elevation-1 p-2 border-b', className)} {...props} />\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","sidebarMenuButtonClasses","SidebarMenuButton","isActive","Icon","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarHeader","logo","showTrigger","SidebarOutlet","SidebarOutletContent","SidebarOutletHeader"],"mappings":"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"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as o}from"react/jsx-runtime";import{useRef as c,useEffect as u}from"react";import{
|
|
1
|
+
"use client";import{jsx as o}from"react/jsx-runtime";import{useRef as c,useEffect as u}from"react";import{Tab as b,composeRenderProps as n,TabList as f,TabPanel as m,Tabs as d}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import"clsx";function w({className:t,...a}){return o(d,{className:n(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()},[]),o(f,{ref:e,className:n(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 h({className:t,...a}){return o(b,{className:n(t,e=>i("btn-tab","group-data-[orientation=vertical]:w-full",e)),...a})}function L({className:t,...a}){return o(m,{className:n(t,e=>i("ring-offset-background","focus-ring",e)),...a})}export{h as Tab,N as TabList,L as TabPanel,w as Tabs};
|
|
2
2
|
//# sourceMappingURL=tabs.js.map
|
package/lib/index.css
CHANGED
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
--color-foreground: var(--color-neutral-900);
|
|
79
79
|
--color-background: var(--color-neutral-100);
|
|
80
80
|
--color-elevation-1: var(--color-neutral-50);
|
|
81
|
+
--color-elevation-mid: color-mix(in oklch, var(--color-background) 70%, var(--color-neutral-200) 30%);
|
|
81
82
|
|
|
82
83
|
--color-primary: var(--color-primary-700);
|
|
83
84
|
--color-primary-foreground: var(--color-elevation-1);
|
|
@@ -279,14 +280,6 @@
|
|
|
279
280
|
@apply text-primary/70 focus:text-primary hover:text-primary;
|
|
280
281
|
}
|
|
281
282
|
|
|
282
|
-
@utility bg-glass-1 {
|
|
283
|
-
@apply bg-elevation-1/20 backdrop-blur-xl;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
@utility bg-elevation-mid {
|
|
287
|
-
background: color-mix(in oklch, var(--color-background) 70%, var(--color-neutral-200) 30%);
|
|
288
|
-
}
|
|
289
|
-
|
|
290
283
|
/* Fluid grid with minimum width */
|
|
291
284
|
@utility grid-fluid {
|
|
292
285
|
@apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-icon;
|
|
@@ -329,8 +322,13 @@
|
|
|
329
322
|
@utility btn-ghost {
|
|
330
323
|
@apply bg-transparent focus:bg-accent/20 hover:bg-accent/20;
|
|
331
324
|
}
|
|
325
|
+
|
|
326
|
+
@utility btn-selected {
|
|
327
|
+
@apply selected:bg-primary/20 selected:font-medium selected:text-primary;
|
|
328
|
+
}
|
|
329
|
+
|
|
332
330
|
@utility btn-tab {
|
|
333
|
-
@apply truncate btn btn-ghost input-dim font-normal text-accent justify-start
|
|
331
|
+
@apply btn-selected truncate btn btn-ghost input-dim font-normal text-accent justify-start;
|
|
334
332
|
}
|
|
335
333
|
/* Dimensions for a standard input */
|
|
336
334
|
@utility input-dim {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cryptlex/web-components",
|
|
3
|
-
"version": "6.6.
|
|
3
|
+
"version": "6.6.41",
|
|
4
4
|
"description": "React component library for Cryptlex web applications",
|
|
5
5
|
"author": "Cryptlex",
|
|
6
6
|
"type": "module",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@fontsource-variable/dm-sans": "5.2.8",
|
|
56
56
|
"@fontsource/dm-mono": "5.2.7",
|
|
57
57
|
"@icons-pack/react-simple-icons": "^13.13.0",
|
|
58
|
-
"@internationalized/date": "3.
|
|
58
|
+
"@internationalized/date": "3.12.1",
|
|
59
59
|
"@shikijs/colorized-brackets": "^4.0.2",
|
|
60
60
|
"@tanstack/react-form": "1.27.7",
|
|
61
61
|
"@tanstack/react-query": "5.90.2",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"class-variance-authority": "0.7.1",
|
|
66
66
|
"clsx": "2.1.1",
|
|
67
67
|
"date-fns": "3.0.0",
|
|
68
|
-
"lodash-es": "4.
|
|
68
|
+
"lodash-es": "4.18.1",
|
|
69
69
|
"openapi-fetch": "0.15.0",
|
|
70
70
|
"react": "^19.1.0",
|
|
71
71
|
"react-aria-components": "1.12.0",
|
|
@@ -79,32 +79,32 @@
|
|
|
79
79
|
"devDependencies": {
|
|
80
80
|
"@icons-pack/react-simple-icons": "^13.13.0",
|
|
81
81
|
"@rollup/plugin-node-resolve": "16.0.1",
|
|
82
|
-
"@storybook/addon-a11y": "
|
|
83
|
-
"@storybook/addon-docs": "
|
|
84
|
-
"@storybook/addon-links": "
|
|
85
|
-
"@storybook/addon-onboarding": "
|
|
86
|
-
"@storybook/addon-vitest": "
|
|
87
|
-
"@storybook/react-vite": "
|
|
82
|
+
"@storybook/addon-a11y": "10.3.5",
|
|
83
|
+
"@storybook/addon-docs": "10.3.5",
|
|
84
|
+
"@storybook/addon-links": "10.3.5",
|
|
85
|
+
"@storybook/addon-onboarding": "10.3.5",
|
|
86
|
+
"@storybook/addon-vitest": "10.3.5",
|
|
87
|
+
"@storybook/react-vite": "10.3.5",
|
|
88
88
|
"@tailwindcss/cli": "4.1.12",
|
|
89
89
|
"@tailwindcss/vite": "4.1.12",
|
|
90
90
|
"@tariq007/storybook-addon-html-validator-w3c": "5.0.1",
|
|
91
|
-
"@types/node": "^22.
|
|
92
|
-
"@types/react": "^19.
|
|
93
|
-
"@types/react-dom": "^19.
|
|
91
|
+
"@types/node": "^22.19.17",
|
|
92
|
+
"@types/react": "^19.2.14",
|
|
93
|
+
"@types/react-dom": "^19.2.3",
|
|
94
94
|
"@vitejs/plugin-react": "5.0.1",
|
|
95
95
|
"@vitest/browser": "^3.2.4",
|
|
96
96
|
"@vitest/coverage-v8": "^3.2.4",
|
|
97
97
|
"husky": "^9.1.7",
|
|
98
|
-
"lint-staged": "^16.
|
|
98
|
+
"lint-staged": "^16.4.0",
|
|
99
99
|
"lucide-react": "0.541.0",
|
|
100
|
-
"playwright": "^1.
|
|
100
|
+
"playwright": "^1.59.1",
|
|
101
101
|
"prettier": "3.6.2",
|
|
102
102
|
"rollup-preserve-directives": "1.1.3",
|
|
103
103
|
"sass": "1.89.2",
|
|
104
|
-
"storybook": "
|
|
104
|
+
"storybook": "10.3.5",
|
|
105
105
|
"tailwindcss-react-aria-components": "2.0.1",
|
|
106
106
|
"typescript": "5.9.2",
|
|
107
|
-
"vite": "7.
|
|
107
|
+
"vite": "7.3.2",
|
|
108
108
|
"vite-plugin-dts": "4.5.4",
|
|
109
109
|
"vite-tsconfig-paths": "5.1.4",
|
|
110
110
|
"vitest": "^3.2.4"
|