@kushagradhawan/kookie-ui 0.1.57 → 0.1.59

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-10-08T07:00:40.012Z",
+  "generatedAt": "2025-11-11T07:34:25.392Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-10-08T07:00:40.002Z",
+      "generatedAt": "2025-11-11T07:34:25.381Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-10-08T07:00:40.007Z",
+      "generatedAt": "2025-11-11T07:34:25.387Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-10-08T07:00:40.009Z",
+      "generatedAt": "2025-11-11T07:34:25.389Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-10-08T07:00:40.011Z",
+      "generatedAt": "2025-11-11T07:34:25.390Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-10-08T07:00:40.012Z",
+      "generatedAt": "2025-11-11T07:34:25.391Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,6 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-10-08T07:00:40.011Z",
+  "generatedAt": "2025-11-11T07:34:25.390Z",
   "source": "Zod schema"
 }

package/schemas/toggle-icon-button.json

@@ -321,6 +321,6 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-10-08T07:00:40.012Z",
+  "generatedAt": "2025-11-11T07:34:25.391Z",
   "source": "Zod schema"
 }

package/src/components/_internal/shell-bottom.tsx

@@ -95,10 +95,13 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>(
     const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === BottomHandle));
 
     // Throttled/debounced emitter for onSizeChange
+    const onSizeChange = (props as any).onSizeChange;
+    const sizeUpdate = (props as any).sizeUpdate;
+    const sizeUpdateMs = (props as any).sizeUpdateMs;
     const emitSizeChange = React.useMemo(() => {
-      const cb = (props as any).onSizeChange as undefined | ((s: number, meta: BottomSizeChangeMeta) => void);
-      const strategy = (props as any).sizeUpdate as undefined | 'throttle' | 'debounce';
-      const ms = (props as any).sizeUpdateMs ?? 50;
+      const cb = onSizeChange as undefined | ((s: number, meta: BottomSizeChangeMeta) => void);
+      const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';
+      const ms = sizeUpdateMs ?? 50;
       if (!cb) return () => {};
       if (strategy === 'debounce') {
         let t: any = null;
@@ -120,7 +123,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>(
         };
       }
       return (s: number, meta: BottomSizeChangeMeta) => cb(s, meta);
-    }, [(props as any).onSizeChange, (props as any).sizeUpdate, (props as any).sizeUpdateMs]);
+    }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
 
     const didInitRef = React.useRef(false);
     const didInitFromDefaultOpenRef = React.useRef(false);
@@ -134,17 +137,15 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>(
         shell.setBottomMode(initial ? 'expanded' : 'collapsed');
         didInitFromDefaultOpenRef.current = true;
       }
-    }, [shell.currentBreakpointReady, open, defaultOpen, resolvedDefaultOpen]);
+    }, [shell, open, defaultOpen, resolvedDefaultOpen]);
 
     // Dev guards
     const wasControlledRef = React.useRef<boolean | null>(null);
     if (process.env.NODE_ENV !== 'production') {
       if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {
-        // eslint-disable-next-line no-console
         console.error('Shell.Bottom: Do not pass both `open` and `defaultOpen`. Choose one.');
       }
       if (typeof (props as any).size !== 'undefined' && typeof (props as any).defaultSize !== 'undefined') {
-        // eslint-disable-next-line no-console
         console.error('Shell.Bottom: Do not pass both `size` and `defaultSize`. Choose one.');
       }
     }
@@ -156,7 +157,6 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>(
         return;
       }
       if (wasControlledRef.current !== isControlled) {
-        // eslint-disable-next-line no-console
         console.warn('Shell.Bottom: Switching between controlled and uncontrolled `open` is not supported.');
         wasControlledRef.current = isControlled;
       }
@@ -166,7 +166,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>(
     React.useEffect(() => {
       if (typeof open === 'undefined') return;
       shell.setBottomMode(open ? 'expanded' : 'collapsed');
-    }, [open]);
+    }, [shell, open]);
 
     const responsiveNotifiedRef = React.useRef(false);
 
@@ -176,7 +176,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>(
       if (typeof resolvedOpen === 'undefined') return;
       const shouldExpand = Boolean(resolvedOpen);
       shell.setBottomMode(shouldExpand ? 'expanded' : 'collapsed');
-    }, [resolvedOpen]);
+    }, [shell, resolvedOpen]);
 
     const initNotifiedRef = React.useRef(false);
     const lastBottomModeRef = React.useRef<PaneMode | null>(null);
@@ -323,10 +323,11 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>(
     }, []);
 
     // Controlled size sync (moved above overlay return)
+    const controlledSize = (props as any).size;
     React.useEffect(() => {
       if (!localRef.current) return;
-      if (typeof (props as any).size === 'undefined') return;
-      const px = normalizeToPx((props as any).size);
+      if (typeof controlledSize === 'undefined') return;
+      const px = normalizeToPx(controlledSize);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -334,7 +335,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>(
         localRef.current.style.setProperty('--bottom-size', `${clamped}px`);
         emitSizeChange(clamped, { reason: 'controlled' });
       }
-    }, [(props as any).size, minSize, maxSize, normalizeToPx, emitSizeChange]);
+    }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);
 
     if (isOverlay) {
       const open = shell.bottomMode === 'expanded';

package/src/components/_internal/shell-inspector.tsx

@@ -92,10 +92,13 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === InspectorHandle));
 
     // Throttled/debounced emitter for onSizeChange
+    const onSizeChange = (props as any).onSizeChange;
+    const sizeUpdate = (props as any).sizeUpdate;
+    const sizeUpdateMs = (props as any).sizeUpdateMs;
     const emitSizeChange = React.useMemo(() => {
-      const cb = (props as any).onSizeChange as undefined | ((s: number, meta: InspectorSizeChangeMeta) => void);
-      const strategy = (props as any).sizeUpdate as undefined | 'throttle' | 'debounce';
-      const ms = (props as any).sizeUpdateMs ?? 50;
+      const cb = onSizeChange as undefined | ((s: number, meta: InspectorSizeChangeMeta) => void);
+      const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';
+      const ms = sizeUpdateMs ?? 50;
       if (!cb) return () => {};
       if (strategy === 'debounce') {
         let t: any = null;
@@ -117,13 +120,12 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
         };
       }
       return (s: number, meta: InspectorSizeChangeMeta) => cb(s, meta);
-    }, [(props as any).onSizeChange, (props as any).sizeUpdate, (props as any).sizeUpdateMs]);
+    }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
 
     // Dev guards
     const wasControlledRef = React.useRef<boolean | null>(null);
     if (process.env.NODE_ENV !== 'production') {
       if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {
-        // eslint-disable-next-line no-console
         console.error('Shell.Inspector: Do not pass both `open` and `defaultOpen`. Choose one.');
       }
     }
@@ -136,7 +138,6 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
         return;
       }
       if (wasControlledRef.current !== isControlled) {
-        // eslint-disable-next-line no-console
         console.warn('Shell.Inspector: Switching between controlled and uncontrolled `open` is not supported.');
         wasControlledRef.current = isControlled;
       }
@@ -154,7 +155,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
       shell.setInspectorMode(initialOpen ? 'expanded' : 'collapsed');
       if (initialOpen) onOpenChange?.(true, { reason: 'init' });
       didInitFromDefaultOpenRef.current = true;
-    }, [shell.currentBreakpointReady, resolvedDefaultOpen, defaultOpen, open, onOpenChange]);
+    }, [shell, resolvedDefaultOpen, defaultOpen, open, onOpenChange]);
 
     // Controlled responsive open
     const resolvedOpen = useResponsiveValue(open);
@@ -163,7 +164,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
       const shouldExpand = Boolean(resolvedOpen);
       if (shouldExpand && shell.inspectorMode !== 'expanded') shell.setInspectorMode('expanded');
       if (!shouldExpand && shell.inspectorMode !== 'collapsed') shell.setInspectorMode('collapsed');
-    }, [resolvedOpen, shell.inspectorMode]);
+    }, [shell, resolvedOpen]);
 
     // Removed boolean-only mount init; handled in responsive init effect above
 
@@ -305,10 +306,11 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     }, []);
 
     // Controlled size sync
+    const controlledSize = (props as any).size;
     React.useEffect(() => {
       if (!localRef.current) return;
-      if (typeof (props as any).size === 'undefined') return;
-      const px = normalizeToPx((props as any).size);
+      if (typeof controlledSize === 'undefined') return;
+      const px = normalizeToPx(controlledSize);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -316,7 +318,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
         localRef.current.style.setProperty('--inspector-size', `${clamped}px`);
         emitSizeChange(clamped, { reason: 'controlled' });
       }
-    }, [(props as any).size, minSize, maxSize, normalizeToPx, emitSizeChange]);
+    }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);
 
     if (isOverlay) {
       const open = shell.inspectorMode === 'expanded';

package/src/components/_internal/shell-sidebar.tsx

@@ -101,10 +101,13 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>(
     const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === SidebarHandle));
 
     // Throttled/debounced emitter for onSizeChange
+    const onSizeChange = (props as any).onSizeChange;
+    const sizeUpdate = (props as any).sizeUpdate;
+    const sizeUpdateMs = (props as any).sizeUpdateMs;
     const emitSizeChange = React.useMemo(() => {
-      const cb = (props as any).onSizeChange as undefined | ((s: number, meta: { reason: 'init' | 'resize' | 'controlled' }) => void);
-      const strategy = (props as any).sizeUpdate as undefined | 'throttle' | 'debounce';
-      const ms = (props as any).sizeUpdateMs ?? 50;
+      const cb = onSizeChange as undefined | ((s: number, meta: { reason: 'init' | 'resize' | 'controlled' }) => void);
+      const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';
+      const ms = sizeUpdateMs ?? 50;
       if (!cb) return () => {};
       if (strategy === 'debounce') {
         let t: any = null;
@@ -126,7 +129,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>(
         };
       }
       return (s: number, meta: { reason: 'init' | 'resize' | 'controlled' }) => cb(s, meta);
-    }, [(props as any).onSizeChange, (props as any).sizeUpdate, (props as any).sizeUpdateMs]);
+    }, [onSizeChange, sizeUpdate, sizeUpdateMs]);
 
     // Register with shell
     const sidebarId = React.useId();
@@ -141,11 +144,9 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>(
     const wasControlledRef = React.useRef<boolean | null>(null);
     if (process.env.NODE_ENV !== 'production') {
       if (typeof state !== 'undefined' && typeof defaultState !== 'undefined') {
-        // eslint-disable-next-line no-console
         console.error('Shell.Sidebar: Do not pass both `state` and `defaultState`. Choose one.');
       }
       if (typeof (props as any).size !== 'undefined' && typeof (props as any).defaultSize !== 'undefined') {
-        // eslint-disable-next-line no-console
         console.error('Shell.Sidebar: Do not pass both `size` and `defaultSize`. Choose one.');
       }
     }
@@ -158,7 +159,6 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>(
         return;
       }
       if (wasControlledRef.current !== isControlled) {
-        // eslint-disable-next-line no-console
         console.warn('Shell.Sidebar: Switching between controlled and uncontrolled `state` is not supported.');
         wasControlledRef.current = isControlled;
       }
@@ -194,7 +194,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>(
     React.useEffect(() => {
       if (resolvedState === undefined) return;
       if (shell.sidebarMode !== resolvedState) shell.setSidebarMode(resolvedState);
-    }, [resolvedState, shell.sidebarMode]);
+    }, [shell, resolvedState]);
 
     // Emit mode changes
     const lastNotifyModeRef = React.useRef<SidebarMode | null>(null);
@@ -370,11 +370,11 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>(
     }, []);
 
     // Controlled size sync
+    const controlledSize = (props as any).size;
     React.useEffect(() => {
       if (!localRef.current) return;
-      const { size } = props as any;
-      if (typeof size === 'undefined') return;
-      const px = normalizeToPx(size);
+      if (typeof controlledSize === 'undefined') return;
+      const px = normalizeToPx(controlledSize);
       if (typeof px === 'number' && Number.isFinite(px)) {
         const minPx = typeof minSize === 'number' ? minSize : undefined;
         const maxPx = typeof maxSize === 'number' ? maxSize : undefined;
@@ -382,7 +382,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>(
         localRef.current.style.setProperty('--sidebar-size', `${clamped}px`);
         emitSizeChange(clamped, { reason: 'controlled' });
       }
-    }, [(props as any).size, minSize, maxSize, normalizeToPx, emitSizeChange]);
+    }, [controlledSize, minSize, maxSize, normalizeToPx, emitSizeChange]);
 
     if (isOverlay) {
       const open = shell.sidebarMode !== 'collapsed';

package/src/components/callout.css

@@ -80,7 +80,7 @@
       row-gap: var(--space-2);
       column-gap: var(--space-2);
       padding: var(--space-3);
-      --callout-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+      --callout-border-radius: max(var(--radius-1), var(--radius-full));
       --callout-icon-height: var(--line-height-1);
       --callout-icon-size: var(--content-icon-size-1);
     }
@@ -88,7 +88,7 @@
       row-gap: var(--space-2);
       column-gap: var(--space-3);
       padding: var(--space-4);
-      --callout-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+      --callout-border-radius: max(var(--radius-2), var(--radius-full));
       --callout-icon-height: var(--line-height-2);
       --callout-icon-size: var(--content-icon-size-2);
     }
@@ -96,7 +96,7 @@
       row-gap: var(--space-3);
       column-gap: var(--space-4);
       padding: var(--space-5);
-      --callout-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+      --callout-border-radius: max(var(--radius-3), var(--radius-full));
       --callout-icon-height: var(--line-height-3);
       --callout-icon-size: var(--content-icon-size-3);
     }
@@ -104,7 +104,7 @@
       row-gap: var(--space-3);
       column-gap: var(--space-5);
       padding: var(--space-6);
-      --callout-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+      --callout-border-radius: max(var(--radius-4), var(--radius-full));
       --callout-icon-height: var(--line-height-4);
       --callout-icon-size: var(--content-icon-size-4);
     }
@@ -112,7 +112,7 @@
       row-gap: var(--space-4);
       column-gap: var(--space-6);
       padding: var(--space-7);
-      --callout-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+      --callout-border-radius: max(var(--radius-5), var(--radius-full));
       --callout-icon-height: var(--line-height-5);
       --callout-icon-size: var(--content-icon-size-5);
     }

package/src/components/chatbar.css

@@ -219,7 +219,7 @@
 /* outline */
 .rt-ChatbarBox:where(.rt-variant-outline) {
   --text-area-selection-color: var(--focus-a5);
-  --text-area-focus-color: var(--focus-8);
+  --text-area-focus-color: var(--focus-9);
   --text-area-border-width: 1px;
   box-shadow: inset 0 0 0 1px var(--accent-6);
   transition: var(--transition-background-blur);
@@ -248,7 +248,7 @@
 /* classic */
 .rt-ChatbarBox:where(.rt-variant-classic) {
   --text-area-selection-color: var(--focus-a5);
-  --text-area-focus-color: var(--focus-8);
+  --text-area-focus-color: var(--focus-9);
   --text-area-border-width: 0px;
   background-color: var(--color-surface-solid);
   box-shadow: var(--shadow-2);
@@ -267,7 +267,7 @@
 .rt-ChatbarBox:where(.rt-variant-classic):where(:focus-within) {
   box-shadow:
     var(--shadow-2),
-    0 0 0 2px var(--focus-8);
+    0 0 0 2px var(--focus-9);
 }
 
 /* soft */

package/src/components/chatbar.tsx

@@ -767,7 +767,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, fo
     if (process.env.NODE_ENV === 'production') return;
     const hasLabel = textareaProps['aria-label'] != null || textareaProps['aria-labelledby'] != null;
     if (!hasLabel) {
-      // eslint-disable-next-line no-console
       console.warn('[Chatbar.Textarea] Provide aria-label or aria-labelledby to ensure the control has an accessible name.');
     }
     // warn only on mount

package/src/components/icons.tsx

@@ -5,41 +5,23 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
 type IconElement = React.ElementRef<'svg'>;
 interface IconProps extends ComponentPropsWithout<'svg', RemovedProps | 'children'> {}
 
-const ThickDividerHorizontalIcon = React.forwardRef<IconElement, IconProps>(
-  (props, forwardedRef) => {
-    return (
-      <svg
-        width="9"
-        height="9"
-        viewBox="0 0 9 9"
-        fill="currentcolor"
-        xmlns="http://www.w3.org/2000/svg"
-        {...props}
-        ref={forwardedRef}
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z"
-        />
-      </svg>
-    );
-  },
-);
+const ThickDividerHorizontalIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg width="9" height="9" viewBox="0 0 9 9" fill="currentcolor" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z"
+      />
+    </svg>
+  );
+});
 
 ThickDividerHorizontalIcon.displayName = 'ThickDividerHorizontalIcon';
 
 const ThickCheckIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
   return (
-    <svg
-      width="9"
-      height="9"
-      viewBox="0 0 9 9"
-      fill="currentcolor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-      ref={forwardedRef}
-    >
+    <svg width="9" height="9" viewBox="0 0 9 9" fill="currentcolor" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -52,15 +34,7 @@ ThickCheckIcon.displayName = 'ThickCheckIcon';
 
 const ChevronDownIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
   return (
-    <svg
-      width="9"
-      height="9"
-      viewBox="0 0 9 9"
-      fill="currentcolor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-      ref={forwardedRef}
-    >
+    <svg width="9" height="9" viewBox="0 0 9 9" fill="currentcolor" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef}>
       <path d="M0.135232 3.15803C0.324102 2.95657 0.640521 2.94637 0.841971 3.13523L4.5 6.56464L8.158 3.13523C8.3595 2.94637 8.6759 2.95657 8.8648 3.15803C9.0536 3.35949 9.0434 3.67591 8.842 3.86477L4.84197 7.6148C4.64964 7.7951 4.35036 7.7951 4.15803 7.6148L0.158031 3.86477C-0.0434285 3.67591 -0.0536285 3.35949 0.135232 3.15803Z" />
     </svg>
   );
@@ -69,15 +43,7 @@ ChevronDownIcon.displayName = 'ChevronDownIcon';
 
 const ThickChevronRightIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
   return (
-    <svg
-      width="9"
-      height="9"
-      viewBox="0 0 9 9"
-      fill="currentcolor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-      ref={forwardedRef}
-    >
+    <svg width="9" height="9" viewBox="0 0 9 9" fill="currentcolor" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -90,28 +56,14 @@ ThickChevronRightIcon.displayName = 'ThickChevronRightIcon';
 
 const ThickDotIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
   return (
-    <svg
-      width="9"
-      height="9"
-      viewBox="0 0 9 9"
-      fill="currentcolor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-      ref={forwardedRef}
-    >
+    <svg width="9" height="9" viewBox="0 0 9 9" fill="currentcolor" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef}>
       <circle cx="4.5" cy="4.5" r="2" />
     </svg>
   );
 });
 ThickDotIcon.displayName = 'ThickDotIcon';
 
-export {
-  ChevronDownIcon,
-  ThickCheckIcon,
-  ThickChevronRightIcon,
-  ThickDividerHorizontalIcon,
-  ThickDotIcon,
-};
+export { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDividerHorizontalIcon, ThickDotIcon };
 export type { IconProps };
 
 // Additional minimal icons
@@ -158,19 +110,9 @@ const PaperclipIcon = React.forwardRef<IconElement, IconProps>((props, forwarded
 });
 PaperclipIcon.displayName = 'PaperclipIcon';
 
-const FileIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+const FileIcon = React.forwardRef<IconElement, IconProps>((_props, _forwardedRef) => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
       <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
       <path d="M14 2v4a2 2 0 0 0 2 2h4" />
     </svg>
@@ -180,17 +122,7 @@ FileIcon.displayName = 'FileIcon';
 
 const FileTextIcon = React.forwardRef<IconElement, IconProps>((_props, _forwardedRef) => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
       <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
       <path d="M14 2v4a2 2 0 0 0 2 2h4" />
       <path d="M10 9H8" />

package/src/components/schemas/shell.schema.ts

@@ -23,15 +23,9 @@ import { z } from 'zod';
 // Common types
 const PaneModeSchema = z.enum(['expanded', 'collapsed']).describe('Pane state mode');
 const SidebarModeSchema = z.enum(['collapsed', 'thin', 'expanded']).describe('Sidebar state mode');
-const PresentationValueSchema = z
-  .enum(['fixed', 'overlay', 'stacked'])
-  .describe('Presentation mode');
-const BreakpointSchema = z
-  .enum(['initial', 'xs', 'sm', 'md', 'lg', 'xl'])
-  .describe('Responsive breakpoint');
-const PaneTargetSchema = z
-  .enum(['left', 'rail', 'panel', 'sidebar', 'inspector', 'bottom'])
-  .describe('Pane target');
+const PresentationValueSchema = z.enum(['fixed', 'overlay', 'stacked']).describe('Presentation mode');
+const _BreakpointSchema = z.enum(['initial', 'xs', 'sm', 'md', 'lg', 'xl']).describe('Responsive breakpoint');
+const PaneTargetSchema = z.enum(['left', 'rail', 'panel', 'sidebar', 'inspector', 'bottom']).describe('Pane target');
 const TriggerActionSchema = z.enum(['toggle', 'expand', 'collapse']).describe('Trigger action');
 
 // Responsive schemas
@@ -184,10 +178,7 @@ export const ShellPanelSchema = PanePropsSchema.extend({
   minSize: z.number().default(200).describe('Minimum width when resizing'),
   maxSize: z.number().default(800).describe('Maximum width when resizing'),
   resizable: z.boolean().default(false).describe('Whether the panel can be resized'),
-  collapsible: z
-    .boolean()
-    .default(true)
-    .describe('Whether the panel can be collapsed via resize handle'),
+  collapsible: z.boolean().default(true).describe('Whether the panel can be collapsed via resize handle'),
 }).strict();
 
 /**
@@ -202,10 +193,7 @@ export const ShellSidebarSchema = PanePropsSchema.extend({
   thinSize: z.number().default(64).describe('Width in thin mode'),
   toggleModes: z.enum(['both', 'single']).optional().describe('Available modes in toggle sequence'),
   resizable: z.boolean().default(false).describe('Whether the sidebar can be resized'),
-  collapsible: z
-    .boolean()
-    .default(true)
-    .describe('Whether the sidebar can be collapsed via resize handle'),
+  collapsible: z.boolean().default(true).describe('Whether the sidebar can be collapsed via resize handle'),
 }).strict();
 
 /**
@@ -226,17 +214,12 @@ export const ShellContentSchema = z
  * Shell.Inspector component schema
  */
 export const ShellInspectorSchema = PanePropsSchema.extend({
-  presentation: ResponsivePresentationSchema.default({ initial: 'overlay', lg: 'fixed' }).describe(
-    'Presentation mode',
-  ),
+  presentation: ResponsivePresentationSchema.default({ initial: 'overlay', lg: 'fixed' }).describe('Presentation mode'),
   expandedSize: z.number().default(320).describe('Default width in pixels'),
   minSize: z.number().default(200).describe('Minimum width when resizing'),
   maxSize: z.number().default(500).describe('Maximum width when resizing'),
   resizable: z.boolean().default(false).describe('Whether the inspector can be resized'),
-  collapsible: z
-    .boolean()
-    .default(true)
-    .describe('Whether the inspector can be collapsed via resize handle'),
+  collapsible: z.boolean().default(true).describe('Whether the inspector can be collapsed via resize handle'),
 }).strict();
 
 /**
@@ -248,10 +231,7 @@ export const ShellBottomSchema = PanePropsSchema.extend({
   minSize: z.number().default(100).describe('Minimum height when resizing'),
   maxSize: z.number().default(400).describe('Maximum height when resizing'),
   resizable: z.boolean().default(false).describe('Whether the bottom panel can be resized'),
-  collapsible: z
-    .boolean()
-    .default(true)
-    .describe('Whether the bottom panel can be collapsed via resize handle'),
+  collapsible: z.boolean().default(true).describe('Whether the bottom panel can be collapsed via resize handle'),
 }).strict();
 
 /**
@@ -261,10 +241,7 @@ export const ShellTriggerSchema = z
   .object({
     target: PaneTargetSchema.describe('Which pane to control'),
     action: TriggerActionSchema.default('toggle').describe('Action to perform'),
-    peekOnHover: z
-      .boolean()
-      .default(false)
-      .describe('Whether to show peek preview on hover when collapsed'),
+    peekOnHover: z.boolean().default(false).describe('Whether to show peek preview on hover when collapsed'),
     className: z.string().optional().describe('Additional CSS class name'),
     style: z
       .record(z.string(), z.union([z.string(), z.number()]))
@@ -310,7 +287,7 @@ export type ShellHandleProps = z.infer<typeof ShellHandleSchema>;
 export type PaneMode = z.infer<typeof PaneModeSchema>;
 export type SidebarMode = z.infer<typeof SidebarModeSchema>;
 export type PresentationValue = z.infer<typeof PresentationValueSchema>;
-export type Breakpoint = z.infer<typeof BreakpointSchema>;
+export type Breakpoint = z.infer<typeof _BreakpointSchema>;
 export type PaneTarget = z.infer<typeof PaneTargetSchema>;
 export type TriggerAction = z.infer<typeof TriggerActionSchema>;
 export type ResponsiveMode = z.infer<typeof ResponsiveModeSchema>;