@kushagradhawan/kookie-ui 0.1.49 → 0.1.51
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/components.css +880 -243
- package/dist/cjs/components/_internal/shell-bottom.d.ts +31 -5
- package/dist/cjs/components/_internal/shell-bottom.d.ts.map +1 -1
- package/dist/cjs/components/_internal/shell-bottom.js +1 -1
- package/dist/cjs/components/_internal/shell-bottom.js.map +3 -3
- package/dist/cjs/components/_internal/shell-handles.d.ts.map +1 -1
- package/dist/cjs/components/_internal/shell-handles.js +1 -1
- package/dist/cjs/components/_internal/shell-handles.js.map +3 -3
- package/dist/cjs/components/_internal/shell-inspector.d.ts +23 -5
- package/dist/cjs/components/_internal/shell-inspector.d.ts.map +1 -1
- package/dist/cjs/components/_internal/shell-inspector.js +1 -1
- package/dist/cjs/components/_internal/shell-inspector.js.map +3 -3
- package/dist/cjs/components/_internal/shell-sidebar.d.ts +24 -6
- package/dist/cjs/components/_internal/shell-sidebar.d.ts.map +1 -1
- package/dist/cjs/components/_internal/shell-sidebar.js +1 -1
- package/dist/cjs/components/_internal/shell-sidebar.js.map +3 -3
- package/dist/cjs/components/chatbar.d.ts +9 -2
- package/dist/cjs/components/chatbar.d.ts.map +1 -1
- package/dist/cjs/components/chatbar.js +1 -1
- package/dist/cjs/components/chatbar.js.map +3 -3
- package/dist/cjs/components/shell.context.d.ts +88 -0
- package/dist/cjs/components/shell.context.d.ts.map +1 -1
- package/dist/cjs/components/shell.context.js +1 -1
- package/dist/cjs/components/shell.context.js.map +3 -3
- package/dist/cjs/components/shell.d.ts +51 -13
- package/dist/cjs/components/shell.d.ts.map +1 -1
- package/dist/cjs/components/shell.hooks.d.ts +7 -1
- package/dist/cjs/components/shell.hooks.d.ts.map +1 -1
- package/dist/cjs/components/shell.hooks.js +1 -1
- package/dist/cjs/components/shell.hooks.js.map +3 -3
- package/dist/cjs/components/shell.js +1 -1
- package/dist/cjs/components/shell.js.map +3 -3
- package/dist/cjs/components/shell.types.d.ts +1 -0
- package/dist/cjs/components/shell.types.d.ts.map +1 -1
- package/dist/cjs/components/shell.types.js +1 -1
- package/dist/cjs/components/shell.types.js.map +2 -2
- package/dist/cjs/components/sidebar.d.ts +7 -1
- package/dist/cjs/components/sidebar.d.ts.map +1 -1
- package/dist/cjs/components/sidebar.js +1 -1
- package/dist/cjs/components/sidebar.js.map +3 -3
- package/dist/esm/components/_internal/shell-bottom.d.ts +31 -5
- package/dist/esm/components/_internal/shell-bottom.d.ts.map +1 -1
- package/dist/esm/components/_internal/shell-bottom.js +1 -1
- package/dist/esm/components/_internal/shell-bottom.js.map +3 -3
- package/dist/esm/components/_internal/shell-handles.d.ts.map +1 -1
- package/dist/esm/components/_internal/shell-handles.js +1 -1
- package/dist/esm/components/_internal/shell-handles.js.map +3 -3
- package/dist/esm/components/_internal/shell-inspector.d.ts +23 -5
- package/dist/esm/components/_internal/shell-inspector.d.ts.map +1 -1
- package/dist/esm/components/_internal/shell-inspector.js +1 -1
- package/dist/esm/components/_internal/shell-inspector.js.map +3 -3
- package/dist/esm/components/_internal/shell-sidebar.d.ts +24 -6
- package/dist/esm/components/_internal/shell-sidebar.d.ts.map +1 -1
- package/dist/esm/components/_internal/shell-sidebar.js +1 -1
- package/dist/esm/components/_internal/shell-sidebar.js.map +3 -3
- package/dist/esm/components/chatbar.d.ts +9 -2
- package/dist/esm/components/chatbar.d.ts.map +1 -1
- package/dist/esm/components/chatbar.js +1 -1
- package/dist/esm/components/chatbar.js.map +3 -3
- package/dist/esm/components/shell.context.d.ts +88 -0
- package/dist/esm/components/shell.context.d.ts.map +1 -1
- package/dist/esm/components/shell.context.js +1 -1
- package/dist/esm/components/shell.context.js.map +3 -3
- package/dist/esm/components/shell.d.ts +51 -13
- package/dist/esm/components/shell.d.ts.map +1 -1
- package/dist/esm/components/shell.hooks.d.ts +7 -1
- package/dist/esm/components/shell.hooks.d.ts.map +1 -1
- package/dist/esm/components/shell.hooks.js +1 -1
- package/dist/esm/components/shell.hooks.js.map +3 -3
- package/dist/esm/components/shell.js +1 -1
- package/dist/esm/components/shell.js.map +3 -3
- package/dist/esm/components/shell.types.d.ts +1 -0
- package/dist/esm/components/shell.types.d.ts.map +1 -1
- package/dist/esm/components/shell.types.js.map +2 -2
- package/dist/esm/components/sidebar.d.ts +7 -1
- package/dist/esm/components/sidebar.d.ts.map +1 -1
- package/dist/esm/components/sidebar.js +1 -1
- package/dist/esm/components/sidebar.js.map +3 -3
- package/package.json +14 -3
- package/schemas/base-button.json +1 -1
- package/schemas/button.json +1 -1
- package/schemas/icon-button.json +1 -1
- package/schemas/index.json +6 -6
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/_internal/base-menu.css +17 -18
- package/src/components/_internal/base-sidebar-menu.css +23 -21
- package/src/components/_internal/base-sidebar.css +20 -0
- package/src/components/_internal/shell-bottom.tsx +176 -49
- package/src/components/_internal/shell-handles.tsx +29 -4
- package/src/components/_internal/shell-inspector.tsx +175 -43
- package/src/components/_internal/shell-sidebar.tsx +176 -69
- package/src/components/chatbar.css +240 -21
- package/src/components/chatbar.tsx +246 -290
- package/src/components/sheet.css +8 -16
- package/src/components/shell.context.tsx +79 -0
- package/src/components/shell.css +28 -2
- package/src/components/shell.hooks.ts +35 -0
- package/src/components/shell.tsx +574 -214
- package/src/components/shell.types.ts +2 -0
- package/src/components/sidebar.css +233 -33
- package/src/components/sidebar.tsx +247 -213
- package/styles.css +841 -204
|
@@ -4,6 +4,7 @@ export type PaneMode = 'expanded' | 'collapsed';
|
|
|
4
4
|
export type SidebarMode = 'collapsed' | 'thin' | 'expanded';
|
|
5
5
|
export type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;
|
|
6
6
|
export type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;
|
|
7
|
+
export type Responsive<T> = T | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', T>>;
|
|
7
8
|
export type PaneSizePersistence = {
|
|
8
9
|
load?: () => number | Promise<number | undefined> | undefined;
|
|
9
10
|
save?: (size: number) => void | Promise<void>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell.types.d.ts","sourceRoot":"","sources":["../../../src/components/shell.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhE,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAE1I,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;AAEhH,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;AAE7H,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;IAC9D,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"shell.types.d.ts","sourceRoot":"","sources":["../../../src/components/shell.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhE,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAE1I,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;AAEhH,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;AAE7H,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;AAEjG,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;IAC9D,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/shell.types.ts"],
|
|
4
|
-
"sourcesContent": ["export type PresentationValue = 'fixed' | 'overlay' | 'stacked';\n\nexport type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;\n\nexport type PaneMode = 'expanded' | 'collapsed';\nexport type SidebarMode = 'collapsed' | 'thin' | 'expanded';\n\nexport type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;\n\nexport type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;\n\nexport type PaneSizePersistence = {\n load?: () => number | Promise<number | undefined> | undefined;\n save?: (size: number) => void | Promise<void>;\n};\n\nexport const BREAKPOINTS = {\n xs: '(min-width: 520px)',\n sm: '(min-width: 768px)',\n md: '(min-width: 1024px)',\n lg: '(min-width: 1280px)',\n xl: '(min-width: 1640px)',\n} as const;\n\nexport type Breakpoint = 'initial' | keyof typeof BREAKPOINTS;\n\nexport type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export type PresentationValue = 'fixed' | 'overlay' | 'stacked';\n\nexport type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;\n\nexport type PaneMode = 'expanded' | 'collapsed';\nexport type SidebarMode = 'collapsed' | 'thin' | 'expanded';\n\nexport type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;\n\nexport type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;\n\nexport type Responsive<T> = T | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', T>>;\n\nexport type PaneSizePersistence = {\n load?: () => number | Promise<number | undefined> | undefined;\n save?: (size: number) => void | Promise<void>;\n};\n\nexport const BREAKPOINTS = {\n xs: '(min-width: 520px)',\n sm: '(min-width: 768px)',\n md: '(min-width: 1024px)',\n lg: '(min-width: 1280px)',\n xl: '(min-width: 1640px)',\n} as const;\n\nexport type Breakpoint = 'initial' | keyof typeof BREAKPOINTS;\n\nexport type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n"],
|
|
5
|
+
"mappings": "AAkBO,MAAMA,EAAc,CACzB,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN",
|
|
6
6
|
"names": ["BREAKPOINTS"]
|
|
7
7
|
}
|
|
@@ -15,6 +15,12 @@ type BadgeConfig = {
|
|
|
15
15
|
};
|
|
16
16
|
type SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;
|
|
17
17
|
interface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {
|
|
18
|
+
/**
|
|
19
|
+
* Presentational mode independent of Shell.
|
|
20
|
+
* 'thin' renders a rail-style sidebar, 'expanded' renders a panel-style sidebar.
|
|
21
|
+
* If both `presentation` and `layout` are provided, `presentation` takes precedence.
|
|
22
|
+
*/
|
|
23
|
+
presentation?: 'thin' | 'expanded';
|
|
18
24
|
}
|
|
19
25
|
declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
|
|
20
26
|
interface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
@@ -129,5 +135,5 @@ export { Sidebar as Root, SidebarContent as Content, SidebarHeader as Header, Si
|
|
|
129
135
|
* - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end
|
|
130
136
|
* - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4
|
|
131
137
|
*/
|
|
132
|
-
export type { SidebarProps as RootProps, SidebarContentProps as ContentProps, SidebarHeaderProps as HeaderProps, SidebarFooterProps as FooterProps, BadgeConfig
|
|
138
|
+
export type { SidebarProps as RootProps, SidebarContentProps as ContentProps, SidebarHeaderProps as HeaderProps, SidebarFooterProps as FooterProps, BadgeConfig };
|
|
133
139
|
//# sourceMappingURL=sidebar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import*as e from"react";import
|
|
1
|
+
"use client";import*as e from"react";import l from"classnames";import{Slot as z}from"./slot.js";import*as P from"@radix-ui/react-accordion";import*as y from"./dropdown-menu.js";import{sidebarPropDefs as C}from"./sidebar.props.js";import{useThemeContext as Q}from"./theme.js";import{ScrollArea as X}from"./scroll-area.js";import{Separator as Y}from"./separator.js";import{ThickChevronRightIcon as Z}from"./icons.js";import{extractProps as ee}from"../helpers/extract-props.js";import{Kbd as R}from"./kbd.js";import{Badge as w}from"./badge.js";const D=e.createContext(null);function v(){return e.useContext(D)}const I=e.forwardRef((o,n)=>{const t=Q(),{size:r=C.size.default,variant:s=C.variant.default,menuVariant:m=C.menuVariant.default,layout:u=C.layout.default,presentation:c,panelBackground:a,color:f,highContrast:d=C.highContrast.default}=o,{className:g,children:N,...L}=ee(o,C),{asChild:b,panelBackground:H,presentation:B,...E}=L,M=f||t.accentColor,S=c==="thin"?"rail":c==="expanded"?"panel":u||"panel",T=typeof r=="object"?r.initial||"2":r;return e.createElement("div",{...E,ref:n,"data-accent-color":M,className:l("rt-SidebarRoot",g)},e.createElement(D.Provider,{value:{size:T,menuVariant:m,presentation:c,color:M}},e.createElement("div",{className:l("rt-SidebarContainer",`rt-variant-${s}`,`rt-r-size-${T}`,`rt-menu-variant-${m}`,S&&`rt-layout-${S}`),"data-accent-color":M,"data-high-contrast":d||void 0,"data-panel-background":a,"data-presentation":c,"data-layout":S},N)))});I.displayName="Sidebar.Root";const G=e.forwardRef(({className:o,children:n,role:t="navigation","aria-label":r="Main navigation",id:s,...m},u)=>{const c=v(),a=c?.size??"2",f=c?.menuVariant??"soft";return e.createElement(X,{type:"hover"},e.createElement("div",{...m,ref:u,id:s,role:t,"aria-label":r,className:l("rt-BaseMenuContent","rt-SidebarContent",`rt-r-size-${a}`,`rt-menu-variant-${f}`,o)},e.createElement("div",{className:"rt-BaseMenuViewport"},n)))});G.displayName="Sidebar.Content";const V=e.forwardRef(({className:o,asContainer:n=!0,...t},r)=>{const s=v(),m=s?.size??"2",u=s?.menuVariant??"soft";return e.createElement("div",{...t,ref:r,className:l("rt-SidebarHeader",`rt-r-size-${m}`,`rt-menu-variant-${u}`,{"rt-SidebarHeader--container":n},o)})});V.displayName="Sidebar.Header";const A=e.forwardRef(({className:o,asContainer:n=!0,...t},r)=>{const s=v(),m=s?.size??"2",u=s?.menuVariant??"soft";return e.createElement("div",{...t,ref:r,className:l("rt-SidebarFooter",`rt-r-size-${m}`,`rt-menu-variant-${u}`,{"rt-SidebarFooter--container":n},o)})});A.displayName="Sidebar.Footer";const W=e.forwardRef(({className:o,...n},t)=>e.createElement(Y,{...n,ref:t,className:l("rt-SidebarSeparator",o)}));W.displayName="Sidebar.Separator";const k=e.forwardRef(({className:o,...n},t)=>e.createElement("ul",{...n,ref:t,role:"menu",className:l("rt-SidebarMenu",o)}));k.displayName="Sidebar.Menu";const F=e.forwardRef(({className:o,...n},t)=>e.createElement("li",{...n,ref:t,className:l("rt-SidebarMenuItem",o)}));F.displayName="Sidebar.MenuItem";const $=e.forwardRef(({asChild:o=!1,isActive:n=!1,shortcut:t,badge:r,className:s,children:m,onMouseEnter:u,onMouseLeave:c,onKeyDown:a,...f},d)=>{const[g,N]=e.useState(!1),b=v()?.size??"2",H=o?z:"button",{onClick:B}=f,E=e.useCallback(i=>{switch(i.key){case"Enter":case" ":i.preventDefault(),B&&B(i);break;case"ArrowDown":{i.preventDefault();const p=i.currentTarget.nextElementSibling?.querySelector('[role="menuitem"]');p&&p.focus();break}case"ArrowUp":{i.preventDefault();const p=i.currentTarget.previousElementSibling?.querySelector('[role="menuitem"]');p&&p.focus();break}}a?.(i)},[B,a]),M=i=>{if(typeof i=="string"||typeof i=="number")return e.createElement("span",{className:"rt-SidebarMenuLabel"},i);if(Array.isArray(i))return i.map((p,h)=>e.createElement(e.Fragment,{key:h},M(p)));if(e.isValidElement(i)){const p=i,h=p.props&&p.props.className||"";if(typeof p.type=="string"&&h.split(" ").includes("rt-SidebarMenuLabel"))return p;const J=M(p.props?.children);return e.cloneElement(p,{...p.props},J)}return i},S=M(m),T=e.useMemo(()=>{if(!o)return null;try{const i=e.Children.only(S),p=i.props?.children,h=e.createElement(e.Fragment,null,p,r&&e.createElement("div",{className:"rt-SidebarMenuBadge"},typeof r=="string"?e.createElement(w,{size:b,variant:"soft"},r):e.createElement(w,{size:r.size||b,variant:r.variant||"soft",color:r.color,highContrast:r.highContrast,radius:r.radius},r.content)),t&&e.createElement("div",{className:"rt-BaseMenuShortcut rt-SidebarMenuShortcut"},e.createElement(R,{size:b},t)));return e.cloneElement(i,{...i.props},h)}catch{return S}},[o,S,r,t,b]);return e.createElement(H,{...f,ref:d,role:"menuitem","aria-current":n?"page":void 0,className:l("rt-reset","rt-BaseMenuItem","rt-SidebarMenuButton",s),"data-active":n||void 0,"data-highlighted":g||void 0,onKeyDown:E,onMouseEnter:i=>{N(!0),u?.(i)},onMouseLeave:i=>{N(!1),c?.(i)}},o?T:e.createElement(e.Fragment,null,S,r&&e.createElement("div",{className:"rt-SidebarMenuBadge"},typeof r=="string"?e.createElement(w,{size:b,variant:"soft"},r):e.createElement(w,{size:r.size||b,variant:r.variant||"soft",color:r.color,highContrast:r.highContrast,radius:r.radius},r.content)),t&&e.createElement("div",{className:"rt-BaseMenuShortcut rt-SidebarMenuShortcut"},e.createElement(R,{size:b},t))))});$.displayName="Sidebar.MenuButton";const x=e.createContext("accordion"),_=e.forwardRef(({defaultOpen:o=!1,children:n,...t},r)=>(v()?.presentation==="thin"?"dropdown":"accordion")==="dropdown"?e.createElement("div",{...t,ref:r},e.createElement(y.Root,null,e.createElement(x.Provider,{value:"dropdown"},n))):e.createElement("div",{...t,ref:r},e.createElement(x.Provider,{value:"accordion"},e.createElement(P.Root,{type:"single",collapsible:!0,defaultValue:o?"item":void 0},e.createElement(P.Item,{value:"item"},n)))));_.displayName="Sidebar.MenuSub";const K=e.forwardRef(({asChild:o=!1,className:n,children:t,onMouseEnter:r,onMouseLeave:s,...m},u)=>{const[c,a]=e.useState(!1);return e.useContext(x)==="dropdown"?e.createElement(y.Trigger,null,e.createElement("button",{...m,ref:u,type:"button",role:"menuitem","aria-haspopup":"menu",className:l("rt-reset","rt-BaseMenuItem","rt-SidebarMenuButton","rt-SidebarMenuSubTrigger",n),"data-highlighted":c||void 0,onMouseEnter:d=>{a(!0),r?.(d)},onMouseLeave:d=>{a(!1),s?.(d)}},t)):e.createElement(P.Header,{asChild:!0},e.createElement("div",null,e.createElement(P.Trigger,{...m,ref:u,asChild:o,role:"menuitem","aria-haspopup":"true",className:l("rt-reset","rt-BaseMenuItem","rt-SidebarMenuButton","rt-SidebarMenuSubTrigger",n),"data-highlighted":c||void 0,onMouseEnter:d=>{a(!0),r?.(d)},onMouseLeave:d=>{a(!1),s?.(d)}},o?t:e.createElement(e.Fragment,null,t,e.createElement(Z,{className:l("rt-BaseMenuSubTriggerIcon","rt-SidebarMenuSubTriggerIcon")})))))});K.displayName="Sidebar.MenuSubTrigger";const j=e.forwardRef(({className:o,children:n,...t},r)=>{const s=v();if(e.useContext(x)==="dropdown"){const u=a=>{if(Array.isArray(a))return a.map((f,d)=>e.createElement(e.Fragment,{key:d},u(f)));if(e.isValidElement(a)){if(a.type?.displayName==="Sidebar.MenuButton")return a.props?.children;const d=a.props?.children;if(d!==void 0)return e.cloneElement(a,{...a.props,children:u(d)})}return a},c=e.Children.map(n,(a,f)=>{if(e.isValidElement(a)&&a.type?.displayName==="Sidebar.MenuItem"){const d=a.props?.children,g=u(d);return e.createElement(y.Item,{key:f,asChild:!0},g)}return e.createElement(y.Item,{key:f,asChild:!0},u(a))});return e.createElement(y.Content,{size:s?.size,variant:s?.menuVariant,className:l(o)},e.createElement(y.Group,null,c))}return e.createElement(P.Content,{...t,ref:r,className:l("rt-SidebarMenuSubContent",o)},e.createElement("div",{className:"rt-SidebarMenuSubList"},n))});j.displayName="Sidebar.MenuSubContent";const O=e.forwardRef(({className:o,...n},t)=>e.createElement("div",{...n,ref:t,className:l("rt-BaseMenuGroup","rt-SidebarGroup",o)}));O.displayName="Sidebar.Group";const q=e.forwardRef(({asChild:o=!1,className:n,...t},r)=>e.createElement(o?z:"div",{...t,ref:r,role:"group",className:l("rt-BaseMenuLabel","rt-SidebarGroupLabel",n)}));q.displayName="Sidebar.GroupLabel";const U=e.forwardRef(({className:o,...n},t)=>e.createElement("div",{...n,ref:t,className:l("rt-SidebarGroupContent",o)}));U.displayName="Sidebar.GroupContent";export{G as Content,A as Footer,O as Group,U as GroupContent,q as GroupLabel,V as Header,k as Menu,$ as MenuButton,F as MenuItem,_ as MenuSub,j as MenuSubContent,K as MenuSubTrigger,I as Root,W as Separator};
|
|
2
2
|
//# sourceMappingURL=sidebar.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/sidebar.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot.js';\nimport * as Accordion from '@radix-ui/react-accordion';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\nimport { useThemeContext } from './theme.js';\n// import { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { ThickChevronRightIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { Kbd } from './kbd.js';\nimport { Badge } from './badge.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { BadgeProps } from './badge.js';\n\n// Badge configuration type for sidebar menu buttons\ntype BadgeConfig = {\n content: React.ReactNode;\n variant?: BadgeProps['variant'];\n size?: BadgeProps['size'];\n color?: BadgeProps['color'];\n highContrast?: BadgeProps['highContrast'];\n radius?: BadgeProps['radius'];\n};\n\n// Internal presentational context (not exported) for size/menu variant\ntype SidebarVisualContextValue = {\n size: '1' | '2';\n menuVariant: 'solid' | 'soft';\n};\nconst SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);\nfunction useSidebarVisual() {\n return React.useContext(SidebarVisualContext);\n}\n\n// Sidebar is now independent of Shell - no integration needed\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {\n const themeContext = useThemeContext();\n\n const {\n size = sidebarPropDefs.size.default,\n variant = sidebarPropDefs.variant.default,\n menuVariant = sidebarPropDefs.menuVariant.default,\n layout = sidebarPropDefs.layout.default,\n // type = sidebarPropDefs.type.default,\n // side = sidebarPropDefs.side.default,\n // collapsible = sidebarPropDefs.collapsible.default,\n panelBackground,\n color,\n highContrast = sidebarPropDefs.highContrast.default,\n } = props;\n\n const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props\n const resolvedColor = color || themeContext.accentColor;\n\n // Resolve layout (default to 'panel')\n const resolvedLayout = layout || 'panel';\n\n // Update context with current props - we'll pass the resolved values\n const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n return (\n <div\n {...safeRootProps}\n ref={forwardedRef}\n data-accent-color={resolvedColor}\n className={classNames('rt-SidebarRoot', className)}\n >\n <SidebarVisualContext.Provider value={{ size: resolvedSize, menuVariant }}>\n <div\n className={classNames(\n 'rt-SidebarContainer',\n `rt-variant-${variant}`,\n `rt-r-size-${resolvedSize}`,\n `rt-menu-variant-${menuVariant}`,\n resolvedLayout && `rt-layout-${resolvedLayout}`,\n )}\n data-accent-color={resolvedColor}\n data-high-contrast={highContrast || undefined}\n data-panel-background={panelBackground}\n data-layout={resolvedLayout}\n >\n {children}\n </div>\n </SidebarVisualContext.Provider>\n </div>\n );\n});\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {\n id?: string;\n role?: 'navigation' | 'none';\n 'aria-label'?: string;\n}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n (\n {\n className,\n children,\n role = 'navigation',\n 'aria-label': ariaLabel = 'Main navigation',\n id,\n ...props\n },\n forwardedRef,\n ) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <ScrollArea type=\"hover\">\n <div\n {...props}\n ref={forwardedRef}\n id={id}\n role={role}\n aria-label={ariaLabel}\n className={classNames(\n 'rt-BaseMenuContent',\n 'rt-SidebarContent',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n className,\n )}\n >\n <div className=\"rt-BaseMenuViewport\">{children}</div>\n </div>\n </ScrollArea>\n );\n },\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n ({ className, asContainer = true, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarHeader',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarHeader--container': asContainer,\n },\n className,\n )}\n />\n );\n },\n);\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n ({ className, asContainer = true, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarFooter',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarFooter--container': asContainer,\n },\n className,\n )}\n />\n );\n },\n);\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\n// removed Trigger in presentational-only Sidebar\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<\n React.ComponentRef<typeof Separator>,\n SidebarSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n <Separator\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarSeparator', className)}\n />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(\n ({ className, ...props }, forwardedRef) => (\n <ul\n {...props}\n ref={forwardedRef}\n role=\"menu\"\n className={classNames('rt-SidebarMenu', className)}\n />\n ),\n);\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n ({ className, ...props }, forwardedRef) => (\n <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />\n ),\n);\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n asChild?: boolean;\n isActive?: boolean;\n shortcut?: React.ReactNode;\n badge?: string | BadgeConfig;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n (\n {\n asChild = false,\n isActive = false,\n shortcut,\n badge,\n className,\n children,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n forwardedRef,\n ) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n const visual = useSidebarVisual();\n const sidebarSize = visual?.size ?? '2';\n\n const Comp = asChild ? Slot : 'button';\n\n const { onClick } = props;\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (onClick) onClick(event as any);\n break;\n case 'ArrowDown': {\n event.preventDefault();\n // Focus next menu item\n const nextItem = (event.currentTarget as HTMLElement).nextElementSibling?.querySelector(\n '[role=\"menuitem\"]',\n ) as HTMLElement;\n if (nextItem) nextItem.focus();\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n // Focus previous menu item\n const prevItem = (\n event.currentTarget as HTMLElement\n ).previousElementSibling?.querySelector('[role=\"menuitem\"]') as HTMLElement;\n if (prevItem) prevItem.focus();\n break;\n }\n }\n onKeyDown?.(event);\n },\n [onClick, onKeyDown],\n );\n\n return (\n <Comp\n {...props}\n ref={forwardedRef}\n role=\"menuitem\"\n aria-current={isActive ? 'page' : undefined}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}\n data-active={isActive || undefined}\n data-highlighted={isHighlighted || undefined}\n onKeyDown={handleKeyDown}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n {/* Badge with soft variant default and size mapping to sidebar size */}\n {badge && (\n <div className=\"rt-SidebarMenuBadge\">\n {typeof badge === 'string' ? (\n <Badge size={sidebarSize} variant=\"soft\">\n {badge}\n </Badge>\n ) : (\n <Badge\n size={badge.size || sidebarSize}\n variant={badge.variant || 'soft'}\n color={badge.color}\n highContrast={badge.highContrast}\n radius={badge.radius}\n >\n {badge.content}\n </Badge>\n )}\n </div>\n )}\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n <Kbd size={sidebarSize}>{shortcut}</Kbd>\n </div>\n )}\n </>\n )}\n </Comp>\n );\n },\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components using Radix Accordion\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(\n ({ defaultOpen = false, children, ...props }, forwardedRef) => {\n return (\n <div {...props} ref={forwardedRef}>\n <Accordion.Root type=\"single\" collapsible defaultValue={defaultOpen ? 'item' : undefined}>\n <Accordion.Item value=\"item\">{children}</Accordion.Item>\n </Accordion.Root>\n </div>\n );\n },\n);\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps\n extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof Accordion.Trigger>,\n SidebarMenuSubTriggerProps\n>(\n (\n { asChild = false, className, children, onMouseEnter, onMouseLeave, ...props },\n forwardedRef,\n ) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n\n return (\n <Accordion.Header asChild>\n <div>\n <Accordion.Trigger\n {...props}\n ref={forwardedRef}\n asChild={asChild}\n role=\"menuitem\"\n aria-haspopup=\"true\"\n className={classNames(\n 'rt-reset',\n 'rt-BaseMenuItem',\n 'rt-SidebarMenuButton',\n 'rt-SidebarMenuSubTrigger',\n className,\n )}\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <ThickChevronRightIcon\n className={classNames(\n 'rt-BaseMenuSubTriggerIcon',\n 'rt-SidebarMenuSubTriggerIcon',\n )}\n />\n </>\n )}\n </Accordion.Trigger>\n </div>\n </Accordion.Header>\n );\n },\n);\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps\n extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<\n React.ElementRef<typeof Accordion.Content>,\n SidebarMenuSubContentProps\n>(({ className, children, ...props }, forwardedRef) => {\n return (\n <Accordion.Content\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarMenuSubContent', className)}\n >\n <div className=\"rt-SidebarMenuSubList\">{children}</div>\n </Accordion.Content>\n );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n ({ className, ...props }, forwardedRef) => (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)}\n />\n ),\n);\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(\n ({ asChild = false, className, ...props }, forwardedRef) => {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n {...props}\n ref={forwardedRef}\n role=\"group\"\n className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)}\n />\n );\n },\n);\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(\n ({ className, ...props }, forwardedRef) => (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarGroupContent', className)}\n />\n ),\n);\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n Sidebar as Root,\n SidebarContent as Content,\n SidebarHeader as Header,\n SidebarFooter as Footer,\n SidebarSeparator as Separator,\n SidebarMenu as Menu,\n SidebarMenuItem as MenuItem,\n SidebarMenuButton as MenuButton,\n SidebarMenuSub as MenuSub,\n SidebarMenuSubTrigger as MenuSubTrigger,\n SidebarMenuSubContent as MenuSubContent,\n SidebarGroup as Group,\n SidebarGroupLabel as GroupLabel,\n SidebarGroupContent as GroupContent,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n *\n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n * <Logo />\n * <span>App Name</span>\n * </Sidebar.Header>\n *\n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n * <Logo />\n * <Sidebar.MenuButton>\n * <SettingsIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n * <div className=\"rt-flex rt-items-center rt-gap-2\">\n * <Logo />\n * <span>App Name</span>\n * </div>\n * <Sidebar.MenuButton>\n * <UserAvatar />\n * <span>John Doe</span>\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n * <Sidebar.MenuButton>\n * <UserIcon />\n * <span>Settings</span>\n * <ChevronUpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n * <span>v1.0.0</span>\n * <Sidebar.MenuButton>\n * <HelpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type {\n SidebarProps as RootProps,\n SidebarContentProps as ContentProps,\n SidebarHeaderProps as HeaderProps,\n SidebarFooterProps as FooterProps,\n BadgeConfig,\n};\n"],
|
|
5
|
-
"mappings": "aAEA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,QAAAC,MAAY,YACrB,UAAYC,MAAe,
|
|
6
|
-
"names": ["React", "classNames", "Slot", "Accordion", "sidebarPropDefs", "useThemeContext", "ScrollArea", "Separator", "ThickChevronRightIcon", "extractProps", "Kbd", "Badge", "SidebarVisualContext", "useSidebarVisual", "Sidebar", "props", "forwardedRef", "themeContext", "size", "variant", "menuVariant", "layout", "panelBackground", "color", "highContrast", "className", "children", "rootProps", "_", "__", "safeRootProps", "resolvedColor", "resolvedLayout", "resolvedSize", "SidebarContent", "role", "ariaLabel", "id", "visual", "SidebarHeader", "asContainer", "SidebarFooter", "SidebarSeparator", "SidebarMenu", "SidebarMenuItem", "SidebarMenuButton", "asChild", "isActive", "shortcut", "badge", "onMouseEnter", "onMouseLeave", "onKeyDown", "isHighlighted", "setIsHighlighted", "sidebarSize", "Comp", "onClick", "handleKeyDown", "event", "nextItem", "prevItem", "SidebarMenuSub", "defaultOpen", "SidebarMenuSubTrigger", "SidebarMenuSubContent", "SidebarGroup", "SidebarGroupLabel", "SidebarGroupContent"]
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot.js';\nimport * as Accordion from '@radix-ui/react-accordion';\nimport * as DropdownMenu from './dropdown-menu.js';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\nimport { useThemeContext } from './theme.js';\n// import { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { ThickChevronRightIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { Kbd } from './kbd.js';\nimport { Badge } from './badge.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { BadgeProps } from './badge.js';\n\n// Badge configuration type for sidebar menu buttons\ntype BadgeConfig = {\n content: React.ReactNode;\n variant?: BadgeProps['variant'];\n size?: BadgeProps['size'];\n color?: BadgeProps['color'];\n highContrast?: BadgeProps['highContrast'];\n radius?: BadgeProps['radius'];\n};\n\n// Internal presentational context (not exported) for size/menu variant\ntype SidebarVisualContextValue = {\n size: '1' | '2';\n menuVariant: 'solid' | 'soft';\n presentation?: 'thin' | 'expanded';\n color?: string;\n};\nconst SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);\nfunction useSidebarVisual() {\n return React.useContext(SidebarVisualContext);\n}\n\n// Sidebar is now independent of Shell - no integration needed\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {\n /**\n * Presentational mode independent of Shell.\n * 'thin' renders a rail-style sidebar, 'expanded' renders a panel-style sidebar.\n * If both `presentation` and `layout` are provided, `presentation` takes precedence.\n */\n presentation?: 'thin' | 'expanded';\n}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {\n const themeContext = useThemeContext();\n\n const {\n size = sidebarPropDefs.size.default,\n variant = sidebarPropDefs.variant.default,\n menuVariant = sidebarPropDefs.menuVariant.default,\n layout = sidebarPropDefs.layout.default,\n presentation,\n // type = sidebarPropDefs.type.default,\n // side = sidebarPropDefs.side.default,\n // collapsible = sidebarPropDefs.collapsible.default,\n panelBackground,\n color,\n highContrast = sidebarPropDefs.highContrast.default,\n } = props;\n\n const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n // Remove internal-only props from DOM\n const { asChild: _, panelBackground: __, presentation: ___, ...safeRootProps } = rootProps;\n const resolvedColor = color || themeContext.accentColor;\n\n // Resolve layout (default to 'panel'). `presentation` takes precedence over `layout`.\n const resolvedLayout = presentation === 'thin' ? 'rail' : presentation === 'expanded' ? 'panel' : layout || 'panel';\n\n // Update context with current props - we'll pass the resolved values\n const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n return (\n <div {...safeRootProps} ref={forwardedRef} data-accent-color={resolvedColor} className={classNames('rt-SidebarRoot', className)}>\n <SidebarVisualContext.Provider value={{ size: resolvedSize, menuVariant, presentation, color: resolvedColor }}>\n <div\n className={classNames('rt-SidebarContainer', `rt-variant-${variant}`, `rt-r-size-${resolvedSize}`, `rt-menu-variant-${menuVariant}`, resolvedLayout && `rt-layout-${resolvedLayout}`)}\n data-accent-color={resolvedColor}\n data-high-contrast={highContrast || undefined}\n data-panel-background={panelBackground}\n data-presentation={presentation}\n data-layout={resolvedLayout}\n >\n {children}\n </div>\n </SidebarVisualContext.Provider>\n </div>\n );\n});\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {\n id?: string;\n role?: 'navigation' | 'none';\n 'aria-label'?: string;\n}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n ({ className, children, role = 'navigation', 'aria-label': ariaLabel = 'Main navigation', id, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <ScrollArea type=\"hover\">\n <div\n {...props}\n ref={forwardedRef}\n id={id}\n role={role}\n aria-label={ariaLabel}\n className={classNames('rt-BaseMenuContent', 'rt-SidebarContent', `rt-r-size-${size}`, `rt-menu-variant-${menuVariant}`, className)}\n >\n <div className=\"rt-BaseMenuViewport\">{children}</div>\n </div>\n </ScrollArea>\n );\n },\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(({ className, asContainer = true, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarHeader',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarHeader--container': asContainer,\n },\n className,\n )}\n />\n );\n});\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(({ className, asContainer = true, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarFooter',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarFooter--container': asContainer,\n },\n className,\n )}\n />\n );\n});\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\n// removed Trigger in presentational-only Sidebar\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, SidebarSeparatorProps>(({ className, ...props }, forwardedRef) => (\n <Separator {...props} ref={forwardedRef} className={classNames('rt-SidebarSeparator', className)} />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(({ className, ...props }, forwardedRef) => (\n <ul {...props} ref={forwardedRef} role=\"menu\" className={classNames('rt-SidebarMenu', className)} />\n));\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(({ className, ...props }, forwardedRef) => (\n <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />\n));\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n asChild?: boolean;\n isActive?: boolean;\n shortcut?: React.ReactNode;\n badge?: string | BadgeConfig;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n ({ asChild = false, isActive = false, shortcut, badge, className, children, onMouseEnter, onMouseLeave, onKeyDown, ...props }, forwardedRef) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n const visual = useSidebarVisual();\n const sidebarSize = visual?.size ?? '2';\n\n const Comp = asChild ? Slot : 'button';\n\n const { onClick } = props;\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (onClick) onClick(event as any);\n break;\n case 'ArrowDown': {\n event.preventDefault();\n // Focus next menu item\n const nextItem = (event.currentTarget as HTMLElement).nextElementSibling?.querySelector('[role=\"menuitem\"]') as HTMLElement;\n if (nextItem) nextItem.focus();\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n // Focus previous menu item\n const prevItem = (event.currentTarget as HTMLElement).previousElementSibling?.querySelector('[role=\"menuitem\"]') as HTMLElement;\n if (prevItem) prevItem.focus();\n break;\n }\n }\n onKeyDown?.(event);\n },\n [onClick, onKeyDown],\n );\n\n // Wrap bare text nodes so CSS can target labels (e.g., for truncation in thin mode)\n const wrapTextNodes = (node: React.ReactNode): React.ReactNode => {\n if (typeof node === 'string' || typeof node === 'number') {\n return <span className=\"rt-SidebarMenuLabel\">{node}</span>;\n }\n if (Array.isArray(node)) {\n return node.map((child, index) => <React.Fragment key={index}>{wrapTextNodes(child)}</React.Fragment>);\n }\n if (React.isValidElement(node)) {\n const el = node as React.ReactElement<any>;\n const className: string = (el.props && (el.props as any).className) || '';\n const isAlreadyLabel = typeof el.type === 'string' && className.split(' ').includes('rt-SidebarMenuLabel');\n if (isAlreadyLabel) return el;\n const newChildren = wrapTextNodes((el.props as any)?.children);\n return React.cloneElement(el, { ...(el.props as any) }, newChildren);\n }\n return node;\n };\n\n const processedChildren = wrapTextNodes(children);\n\n // When rendering asChild, Slot expects a single child element. We still want to\n // append optional badge/shortcut inside that element so they render with Link.\n const slottedChildren = React.useMemo(() => {\n if (!asChild) return null;\n try {\n const onlyChild = React.Children.only(processedChildren as React.ReactElement<any>) as React.ReactElement<any>;\n const originalInnerChildren = (onlyChild.props as any)?.children;\n const enhancedInnerChildren = (\n <>\n {originalInnerChildren}\n {badge && (\n <div className=\"rt-SidebarMenuBadge\">\n {typeof badge === 'string' ? (\n <Badge size={sidebarSize} variant=\"soft\">\n {badge}\n </Badge>\n ) : (\n <Badge size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} highContrast={badge.highContrast} radius={badge.radius}>\n {badge.content}\n </Badge>\n )}\n </div>\n )}\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n <Kbd size={sidebarSize}>{shortcut}</Kbd>\n </div>\n )}\n </>\n );\n return React.cloneElement(onlyChild, { ...(onlyChild.props as any) }, enhancedInnerChildren);\n } catch {\n // Fallback: if multiple children were passed incorrectly, just return processedChildren\n return processedChildren as React.ReactNode;\n }\n }, [asChild, processedChildren, badge, shortcut, sidebarSize]);\n\n return (\n <Comp\n {...props}\n ref={forwardedRef}\n role=\"menuitem\"\n aria-current={isActive ? 'page' : undefined}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}\n data-active={isActive || undefined}\n data-highlighted={isHighlighted || undefined}\n onKeyDown={handleKeyDown}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n slottedChildren\n ) : (\n <>\n {processedChildren}\n {/* Badge with soft variant default and size mapping to sidebar size */}\n {badge && (\n <div className=\"rt-SidebarMenuBadge\">\n {typeof badge === 'string' ? (\n <Badge size={sidebarSize} variant=\"soft\">\n {badge}\n </Badge>\n ) : (\n <Badge size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} highContrast={badge.highContrast} radius={badge.radius}>\n {badge.content}\n </Badge>\n )}\n </div>\n )}\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n <Kbd size={sidebarSize}>{shortcut}</Kbd>\n </div>\n )}\n </>\n )}\n </Comp>\n );\n },\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components: Accordion in expanded, Dropdown in thin\nconst SidebarSubMenuModeContext = React.createContext<'accordion' | 'dropdown'>('accordion');\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(({ defaultOpen = false, children, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const mode: 'accordion' | 'dropdown' = visual?.presentation === 'thin' ? 'dropdown' : 'accordion';\n\n if (mode === 'dropdown') {\n return (\n <div {...props} ref={forwardedRef}>\n <DropdownMenu.Root>\n <SidebarSubMenuModeContext.Provider value=\"dropdown\">{children}</SidebarSubMenuModeContext.Provider>\n </DropdownMenu.Root>\n </div>\n );\n }\n\n return (\n <div {...props} ref={forwardedRef}>\n <SidebarSubMenuModeContext.Provider value=\"accordion\">\n <Accordion.Root type=\"single\" collapsible defaultValue={defaultOpen ? 'item' : undefined}>\n <Accordion.Item value=\"item\">{children}</Accordion.Item>\n </Accordion.Root>\n </SidebarSubMenuModeContext.Provider>\n </div>\n );\n});\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion.Trigger>, SidebarMenuSubTriggerProps>(\n ({ asChild = false, className, children, onMouseEnter, onMouseLeave, ...props }, forwardedRef) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n const mode = React.useContext(SidebarSubMenuModeContext);\n\n if (mode === 'dropdown') {\n return (\n <DropdownMenu.Trigger>\n <button\n {...(props as any)}\n ref={forwardedRef as any}\n type=\"button\"\n role=\"menuitem\"\n aria-haspopup=\"menu\"\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', 'rt-SidebarMenuSubTrigger', className)}\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event as any);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event as any);\n }}\n >\n {children}\n </button>\n </DropdownMenu.Trigger>\n );\n }\n\n return (\n <Accordion.Header asChild>\n <div>\n <Accordion.Trigger\n {...props}\n ref={forwardedRef}\n asChild={asChild}\n role=\"menuitem\"\n aria-haspopup=\"true\"\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', 'rt-SidebarMenuSubTrigger', className)}\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <ThickChevronRightIcon className={classNames('rt-BaseMenuSubTriggerIcon', 'rt-SidebarMenuSubTriggerIcon')} />\n </>\n )}\n </Accordion.Trigger>\n </div>\n </Accordion.Header>\n );\n },\n);\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion.Content>, SidebarMenuSubContentProps>(({ className, children, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const mode = React.useContext(SidebarSubMenuModeContext);\n\n if (mode === 'dropdown') {\n const unwrapMenuButton = (node: React.ReactNode): React.ReactNode => {\n if (Array.isArray(node)) {\n return node.map((n, i) => <React.Fragment key={i}>{unwrapMenuButton(n)}</React.Fragment>);\n }\n if (React.isValidElement(node)) {\n const typeDisplay = (node.type as any)?.displayName;\n if (typeDisplay === 'Sidebar.MenuButton') {\n return (node.props as any)?.children;\n }\n const child = (node.props as any)?.children;\n if (child !== undefined) {\n return React.cloneElement(node as any, { ...(node.props as any), children: unwrapMenuButton(child) });\n }\n }\n return node;\n };\n\n const normalized = React.Children.map(children as React.ReactNode, (child, index) => {\n if (React.isValidElement(child) && (child.type as any)?.displayName === 'Sidebar.MenuItem') {\n const itemChildren = (child.props as any)?.children;\n const content = unwrapMenuButton(itemChildren);\n return (\n <DropdownMenu.Item key={index} asChild>\n {content as any}\n </DropdownMenu.Item>\n );\n }\n // Fallback: wrap raw nodes too for consistent menu styling\n return (\n <DropdownMenu.Item key={index} asChild>\n {unwrapMenuButton(child) as any}\n </DropdownMenu.Item>\n );\n });\n\n return (\n <DropdownMenu.Content size={visual?.size} variant={visual?.menuVariant} className={classNames(className)}>\n <DropdownMenu.Group>{normalized}</DropdownMenu.Group>\n </DropdownMenu.Content>\n );\n }\n\n return (\n <Accordion.Content {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuSubContent', className)}>\n <div className=\"rt-SidebarMenuSubList\">{children}</div>\n </Accordion.Content>\n );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(({ className, ...props }, forwardedRef) => (\n <div {...props} ref={forwardedRef} className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)} />\n));\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(({ asChild = false, className, ...props }, forwardedRef) => {\n const Comp = asChild ? Slot : 'div';\n\n return <Comp {...props} ref={forwardedRef} role=\"group\" className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)} />;\n});\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(({ className, ...props }, forwardedRef) => (\n <div {...props} ref={forwardedRef} className={classNames('rt-SidebarGroupContent', className)} />\n));\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n Sidebar as Root,\n SidebarContent as Content,\n SidebarHeader as Header,\n SidebarFooter as Footer,\n SidebarSeparator as Separator,\n SidebarMenu as Menu,\n SidebarMenuItem as MenuItem,\n SidebarMenuButton as MenuButton,\n SidebarMenuSub as MenuSub,\n SidebarMenuSubTrigger as MenuSubTrigger,\n SidebarMenuSubContent as MenuSubContent,\n SidebarGroup as Group,\n SidebarGroupLabel as GroupLabel,\n SidebarGroupContent as GroupContent,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n *\n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n * <Logo />\n * <span>App Name</span>\n * </Sidebar.Header>\n *\n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n * <Logo />\n * <Sidebar.MenuButton>\n * <SettingsIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n * <div className=\"rt-flex rt-items-center rt-gap-2\">\n * <Logo />\n * <span>App Name</span>\n * </div>\n * <Sidebar.MenuButton>\n * <UserAvatar />\n * <span>John Doe</span>\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n * <Sidebar.MenuButton>\n * <UserIcon />\n * <span>Settings</span>\n * <ChevronUpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n * <span>v1.0.0</span>\n * <Sidebar.MenuButton>\n * <HelpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type { SidebarProps as RootProps, SidebarContentProps as ContentProps, SidebarHeaderProps as HeaderProps, SidebarFooterProps as FooterProps, BadgeConfig };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "classNames", "Slot", "Accordion", "DropdownMenu", "sidebarPropDefs", "useThemeContext", "ScrollArea", "Separator", "ThickChevronRightIcon", "extractProps", "Kbd", "Badge", "SidebarVisualContext", "useSidebarVisual", "Sidebar", "props", "forwardedRef", "themeContext", "size", "variant", "menuVariant", "layout", "presentation", "panelBackground", "color", "highContrast", "className", "children", "rootProps", "_", "__", "___", "safeRootProps", "resolvedColor", "resolvedLayout", "resolvedSize", "SidebarContent", "role", "ariaLabel", "id", "visual", "SidebarHeader", "asContainer", "SidebarFooter", "SidebarSeparator", "SidebarMenu", "SidebarMenuItem", "SidebarMenuButton", "asChild", "isActive", "shortcut", "badge", "onMouseEnter", "onMouseLeave", "onKeyDown", "isHighlighted", "setIsHighlighted", "sidebarSize", "Comp", "onClick", "handleKeyDown", "event", "nextItem", "prevItem", "wrapTextNodes", "node", "child", "index", "el", "newChildren", "processedChildren", "slottedChildren", "onlyChild", "originalInnerChildren", "enhancedInnerChildren", "SidebarSubMenuModeContext", "SidebarMenuSub", "defaultOpen", "SidebarMenuSubTrigger", "SidebarMenuSubContent", "unwrapMenuButton", "n", "i", "normalized", "itemChildren", "content", "SidebarGroup", "SidebarGroupLabel", "SidebarGroupContent"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kushagradhawan/kookie-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.51",
|
|
4
4
|
"description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -130,7 +130,11 @@
|
|
|
130
130
|
"release": "node scripts/release.js",
|
|
131
131
|
"release:patch": "node scripts/release.js patch",
|
|
132
132
|
"release:minor": "node scripts/release.js minor",
|
|
133
|
-
"release:major": "node scripts/release.js major"
|
|
133
|
+
"release:major": "node scripts/release.js major",
|
|
134
|
+
"test": "vitest run",
|
|
135
|
+
"test:watch": "vitest",
|
|
136
|
+
"test:ui": "vitest --ui",
|
|
137
|
+
"test:types": "pnpm build:js:esm:types && tsd --typings tests/types/typings.d.ts --files \"tests/types/**/*.test-d.ts\""
|
|
134
138
|
},
|
|
135
139
|
"dependencies": {
|
|
136
140
|
"@radix-ui/colors": "^3.0.0",
|
|
@@ -161,6 +165,10 @@
|
|
|
161
165
|
},
|
|
162
166
|
"devDependencies": {
|
|
163
167
|
"@eslint/js": "^9.18.0",
|
|
168
|
+
"@testing-library/jest-dom": "^6.8.0",
|
|
169
|
+
"@testing-library/react": "^16.3.0",
|
|
170
|
+
"@testing-library/user-event": "^14.6.1",
|
|
171
|
+
"@types/jsdom": "^21.1.7",
|
|
164
172
|
"autoprefixer": "10.4.19",
|
|
165
173
|
"esbuild": "0.20.0",
|
|
166
174
|
"eslint": "^9.18.0",
|
|
@@ -168,6 +176,7 @@
|
|
|
168
176
|
"eslint-plugin-react": "^7.37.4",
|
|
169
177
|
"eslint-plugin-react-hooks": "^5.1.0",
|
|
170
178
|
"globals": "^15.14.0",
|
|
179
|
+
"jsdom": "^25.0.1",
|
|
171
180
|
"postcss": "8.4.33",
|
|
172
181
|
"postcss-cli": "11.0.0",
|
|
173
182
|
"postcss-combine-duplicated-selectors": "10.0.3",
|
|
@@ -178,8 +187,10 @@
|
|
|
178
187
|
"react": "^19.0.0",
|
|
179
188
|
"react-dom": "^19.0.0",
|
|
180
189
|
"stylelint": "16.6.1",
|
|
190
|
+
"tsd": "^0.33.0",
|
|
181
191
|
"typescript": "^5.7.2",
|
|
182
|
-
"typescript-eslint": "^8.18.1"
|
|
192
|
+
"typescript-eslint": "^8.18.1",
|
|
193
|
+
"vitest": "^2.1.9"
|
|
183
194
|
},
|
|
184
195
|
"homepage": "https://github.com/kushagradhawan/kookie-ui",
|
|
185
196
|
"repository": {
|
package/schemas/base-button.json
CHANGED
|
@@ -279,6 +279,6 @@
|
|
|
279
279
|
"title": "Base-button Component Props",
|
|
280
280
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
281
281
|
"version": "1.0.0",
|
|
282
|
-
"generatedAt": "2025-09-
|
|
282
|
+
"generatedAt": "2025-09-18T07:02:55.887Z",
|
|
283
283
|
"source": "Zod schema"
|
|
284
284
|
}
|
package/schemas/button.json
CHANGED
|
@@ -530,6 +530,6 @@
|
|
|
530
530
|
"title": "Button Component Props",
|
|
531
531
|
"description": "Props schema for the button component in Kookie UI",
|
|
532
532
|
"version": "1.0.0",
|
|
533
|
-
"generatedAt": "2025-09-
|
|
533
|
+
"generatedAt": "2025-09-18T07:02:55.892Z",
|
|
534
534
|
"source": "Zod schema"
|
|
535
535
|
}
|
package/schemas/icon-button.json
CHANGED
|
@@ -313,6 +313,6 @@
|
|
|
313
313
|
"title": "Icon-button Component Props",
|
|
314
314
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
315
315
|
"version": "1.0.0",
|
|
316
|
-
"generatedAt": "2025-09-
|
|
316
|
+
"generatedAt": "2025-09-18T07:02:55.893Z",
|
|
317
317
|
"source": "Zod schema"
|
|
318
318
|
}
|
package/schemas/index.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"title": "Kookie UI Button Components",
|
|
4
4
|
"description": "Complete JSON Schema collection for all button components in Kookie UI",
|
|
5
5
|
"version": "1.0.0",
|
|
6
|
-
"generatedAt": "2025-09-
|
|
6
|
+
"generatedAt": "2025-09-18T07:02:55.896Z",
|
|
7
7
|
"source": "Zod schemas",
|
|
8
8
|
"components": {
|
|
9
9
|
"base-button": {
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
"title": "Base-button Component Props",
|
|
288
288
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
289
289
|
"version": "1.0.0",
|
|
290
|
-
"generatedAt": "2025-09-
|
|
290
|
+
"generatedAt": "2025-09-18T07:02:55.887Z",
|
|
291
291
|
"source": "Zod schema"
|
|
292
292
|
},
|
|
293
293
|
"button": {
|
|
@@ -822,7 +822,7 @@
|
|
|
822
822
|
"title": "Button Component Props",
|
|
823
823
|
"description": "Props schema for the button component in Kookie UI",
|
|
824
824
|
"version": "1.0.0",
|
|
825
|
-
"generatedAt": "2025-09-
|
|
825
|
+
"generatedAt": "2025-09-18T07:02:55.892Z",
|
|
826
826
|
"source": "Zod schema"
|
|
827
827
|
},
|
|
828
828
|
"icon-button": {
|
|
@@ -1140,7 +1140,7 @@
|
|
|
1140
1140
|
"title": "Icon-button Component Props",
|
|
1141
1141
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
1142
1142
|
"version": "1.0.0",
|
|
1143
|
-
"generatedAt": "2025-09-
|
|
1143
|
+
"generatedAt": "2025-09-18T07:02:55.893Z",
|
|
1144
1144
|
"source": "Zod schema"
|
|
1145
1145
|
},
|
|
1146
1146
|
"toggle-button": {
|
|
@@ -1683,7 +1683,7 @@
|
|
|
1683
1683
|
"title": "Toggle-button Component Props",
|
|
1684
1684
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
1685
1685
|
"version": "1.0.0",
|
|
1686
|
-
"generatedAt": "2025-09-
|
|
1686
|
+
"generatedAt": "2025-09-18T07:02:55.895Z",
|
|
1687
1687
|
"source": "Zod schema"
|
|
1688
1688
|
},
|
|
1689
1689
|
"toggle-icon-button": {
|
|
@@ -2009,7 +2009,7 @@
|
|
|
2009
2009
|
"title": "Toggle-icon-button Component Props",
|
|
2010
2010
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
2011
2011
|
"version": "1.0.0",
|
|
2012
|
-
"generatedAt": "2025-09-
|
|
2012
|
+
"generatedAt": "2025-09-18T07:02:55.895Z",
|
|
2013
2013
|
"source": "Zod schema"
|
|
2014
2014
|
}
|
|
2015
2015
|
}
|
|
@@ -538,6 +538,6 @@
|
|
|
538
538
|
"title": "Toggle-button Component Props",
|
|
539
539
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
540
540
|
"version": "1.0.0",
|
|
541
|
-
"generatedAt": "2025-09-
|
|
541
|
+
"generatedAt": "2025-09-18T07:02:55.895Z",
|
|
542
542
|
"source": "Zod schema"
|
|
543
543
|
}
|
|
@@ -321,6 +321,6 @@
|
|
|
321
321
|
"title": "Toggle-icon-button Component Props",
|
|
322
322
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
323
323
|
"version": "1.0.0",
|
|
324
|
-
"generatedAt": "2025-09-
|
|
324
|
+
"generatedAt": "2025-09-18T07:02:55.895Z",
|
|
325
325
|
"source": "Zod schema"
|
|
326
326
|
}
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
box-sizing: border-box;
|
|
52
52
|
|
|
53
53
|
:where(.rt-BaseMenuContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
|
|
54
|
-
padding-
|
|
54
|
+
padding-inline-end: var(--space-3);
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
min-height: var(--base-menu-item-height);
|
|
63
63
|
padding-top: var(--base-menu-item-padding-y);
|
|
64
64
|
padding-bottom: var(--base-menu-item-padding-y);
|
|
65
|
-
padding-
|
|
66
|
-
padding-
|
|
65
|
+
padding-inline-start: var(--base-menu-item-padding-left);
|
|
66
|
+
padding-inline-end: var(--base-menu-item-padding-right);
|
|
67
67
|
box-sizing: border-box;
|
|
68
68
|
position: relative;
|
|
69
69
|
outline: none;
|
|
@@ -95,19 +95,19 @@
|
|
|
95
95
|
.rt-BaseMenuShortcut {
|
|
96
96
|
display: flex;
|
|
97
97
|
align-items: center;
|
|
98
|
-
margin-
|
|
99
|
-
padding-
|
|
100
|
-
margin-
|
|
98
|
+
margin-inline-start: auto;
|
|
99
|
+
padding-inline-start: var(--space-4);
|
|
100
|
+
margin-inline-end: calc(-2px * var(--scaling)); /* Pulls closer to edge */
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.rt-BaseMenuSubTriggerIcon {
|
|
104
104
|
color: var(--gray-12);
|
|
105
|
-
margin-
|
|
105
|
+
margin-inline-end: calc(-2px * var(--scaling));
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
.rt-BaseMenuItemIndicator {
|
|
109
109
|
position: absolute;
|
|
110
|
-
|
|
110
|
+
inset-inline-start: 0;
|
|
111
111
|
width: var(--base-menu-item-padding-left);
|
|
112
112
|
display: inline-flex;
|
|
113
113
|
align-items: center;
|
|
@@ -118,8 +118,8 @@
|
|
|
118
118
|
height: 1px;
|
|
119
119
|
margin-top: var(--space-2);
|
|
120
120
|
margin-bottom: var(--space-2);
|
|
121
|
-
margin-
|
|
122
|
-
margin-
|
|
121
|
+
margin-inline-start: var(--base-menu-item-padding-left);
|
|
122
|
+
margin-inline-end: var(--base-menu-item-padding-right);
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.rt-BaseMenuLabel {
|
|
@@ -128,8 +128,8 @@
|
|
|
128
128
|
min-height: var(--base-menu-item-height);
|
|
129
129
|
padding-top: var(--base-menu-item-padding-y);
|
|
130
130
|
padding-bottom: var(--base-menu-item-padding-y);
|
|
131
|
-
padding-
|
|
132
|
-
padding-
|
|
131
|
+
padding-inline-start: var(--base-menu-item-padding-left);
|
|
132
|
+
padding-inline-end: var(--base-menu-item-padding-right);
|
|
133
133
|
box-sizing: border-box;
|
|
134
134
|
color: var(--gray-a10);
|
|
135
135
|
user-select: none;
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
--base-menu-content-padding: var(--space-2);
|
|
166
166
|
--base-menu-item-padding-left: calc(var(--space-5) / 1.2);
|
|
167
167
|
--base-menu-item-padding-right: var(--space-2);
|
|
168
|
-
--base-menu-item-padding-y:
|
|
168
|
+
--base-menu-item-padding-y: var(--space-1);
|
|
169
169
|
--base-menu-item-height: var(--space-5);
|
|
170
170
|
border-radius: var(--radius-3);
|
|
171
171
|
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
font-size: var(--font-size-1);
|
|
189
189
|
line-height: var(--line-height-1);
|
|
190
190
|
letter-spacing: var(--letter-spacing-1);
|
|
191
|
-
padding-
|
|
191
|
+
padding-inline-start: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
|
|
192
192
|
}
|
|
193
193
|
|
|
194
194
|
& :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
|
|
@@ -253,8 +253,8 @@
|
|
|
253
253
|
--base-menu-content-padding: var(--space-3);
|
|
254
254
|
--base-menu-item-padding-left: var(--space-3);
|
|
255
255
|
--base-menu-item-padding-right: var(--space-3);
|
|
256
|
-
--base-menu-item-padding-y: var(--space-
|
|
257
|
-
--base-menu-item-height: var(--space-
|
|
256
|
+
--base-menu-item-padding-y: var(--space-2);
|
|
257
|
+
--base-menu-item-height: var(--space-7);
|
|
258
258
|
border-radius: var(--radius-6);
|
|
259
259
|
|
|
260
260
|
& :where(.rt-BaseMenuItem) {
|
|
@@ -311,8 +311,7 @@
|
|
|
311
311
|
}
|
|
312
312
|
|
|
313
313
|
/* Ensure gray text appears muted in non-highlighted state */
|
|
314
|
-
.rt-BaseMenuItem
|
|
315
|
-
:where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
|
|
314
|
+
.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
|
|
316
315
|
color: var(--gray-a10);
|
|
317
316
|
}
|
|
318
317
|
.rt-BaseMenuItem:where([data-disabled], [data-highlighted]),
|