@kushagradhawan/kookie-ui 0.1.37 → 0.1.39

package/src/components/button.tsx

@@ -5,6 +5,40 @@ import { BaseButton } from './_internal/base-button.js';
 import { Tooltip } from './tooltip.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 
+/**
+ * Styles that can be overridden for a particular interaction state
+ */
+interface ButtonOverrideStateStyles {
+  color?: string;
+  background?: string;
+  backgroundColor?: string;
+  boxShadow?: string;
+  filter?: string;
+  outline?: string;
+  outlineOffset?: string;
+  opacity?: string | number;
+}
+
+/**
+ * Full set of override styles keyed by interaction state
+ */
+interface ButtonOverrideStyles {
+  /** Default/idle state styles */
+  normal?: ButtonOverrideStateStyles;
+  /** Hover state styles */
+  hover?: ButtonOverrideStateStyles;
+  /** Active (mouse down) state styles */
+  active?: ButtonOverrideStateStyles;
+  /** Toggle pressed state styles (data-state="on") */
+  pressed?: ButtonOverrideStateStyles;
+  /** Open state styles (e.g., when used as a trigger) */
+  open?: ButtonOverrideStateStyles;
+  /** Disabled state styles */
+  disabled?: ButtonOverrideStateStyles;
+  /** Focus-visible outline styles */
+  focus?: Pick<ButtonOverrideStateStyles, 'outline' | 'outlineOffset'>;
+}
+
 type ButtonElement = React.ElementRef<typeof BaseButton>;
 
 /**
@@ -28,7 +62,14 @@ interface ButtonTooltipProps {
  * Core Button props excluding the 'as' prop for polymorphic behavior
  * Combines BaseButton props with tooltip functionality
  */
-type ButtonOwnProps = Omit<BaseButtonProps, 'as'> & ButtonTooltipProps;
+type ButtonOwnProps = Omit<BaseButtonProps, 'as'> &
+  ButtonTooltipProps & {
+    /**
+     * When using variant="override", provide token-based styles per state.
+     * We propagate these into CSS variables consumed by the override variant.
+     */
+    overrideStyles?: ButtonOverrideStyles;
+  };
 
 /**
  * Polymorphic Button props that support rendering as different HTML elements
@@ -79,6 +120,7 @@ const Button = React.forwardRef(
       tooltipAlign = 'center',
       tooltipDelayDuration,
       tooltipDisableHoverableContent,
+      overrideStyles,
       ...props
     }: ButtonProps,
     forwardedRef: React.ForwardedRef<ButtonElement>,
@@ -94,12 +136,47 @@ const Button = React.forwardRef(
     );
 
     // Create the base button element with tooltip accessibility props
+    // Map overrideStyles to CSS variables consumed by the override variant rules
+    const overrideVars = React.useMemo(() => {
+      if (!overrideStyles) return undefined;
+      const vars: Record<string, string | number> = {};
+      const setVar = (key: string, value: string | number | undefined) => {
+        if (value !== undefined) vars[key] = value;
+      };
+      const apply = (prefix: string, s?: ButtonOverrideStateStyles) => {
+        if (!s) return;
+        setVar(`--button-override-${prefix}color`, s.color);
+        setVar(`--button-override-${prefix}background`, s.background);
+        setVar(`--button-override-${prefix}background-color`, s.backgroundColor);
+        setVar(`--button-override-${prefix}box-shadow`, s.boxShadow);
+        setVar(`--button-override-${prefix}filter`, s.filter);
+        setVar(`--button-override-${prefix}outline`, s.outline);
+        setVar(`--button-override-${prefix}outline-offset`, s.outlineOffset);
+        setVar(`--button-override-${prefix}opacity`, s.opacity as any);
+      };
+
+      apply('', overrideStyles.normal);
+      apply('hover-', overrideStyles.hover);
+      apply('active-', overrideStyles.active);
+      apply('pressed-', overrideStyles.pressed);
+      apply('open-', overrideStyles.open);
+      apply('disabled-', overrideStyles.disabled);
+
+      if (overrideStyles.focus) {
+        setVar('--button-override-focus-outline', overrideStyles.focus.outline);
+        setVar('--button-override-focus-outline-offset', overrideStyles.focus.outlineOffset);
+      }
+
+      return vars as unknown as React.CSSProperties;
+    }, [overrideStyles]);
+
     const button = (
       <BaseButton
         {...props}
         {...tooltipAccessibilityProps}
         ref={forwardedRef}
         className={classNames('rt-Button', className)}
+        style={overrideVars ? { ...overrideVars, ...(props as any).style } : (props as any).style}
       />
     );
 
@@ -128,4 +205,4 @@ const Button = React.forwardRef(
 Button.displayName = 'Button';
 
 export { Button };
-export type { ButtonProps };
+export type { ButtonProps, ButtonOverrideStyles, ButtonOverrideStateStyles };

package/src/components/chatbar.tsx

@@ -253,11 +253,14 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
   // Attachments state
-  const isAttachmentsControlled = attachmentsProp != null;
+  // Treat `attachments` as controlled if the prop is provided, even if its value is `undefined`.
+  // This avoids switching between controlled and uncontrolled when a consumer sets
+  // `attachments={undefined}` to clear attachments. In that case we normalize to an empty array.
+  const isAttachmentsControlled = 'attachments' in props;
   const [attachmentsUncontrolled, setAttachmentsUncontrolled] =
     React.useState<ChatbarAttachment[]>(defaultAttachments);
   const attachments = isAttachmentsControlled
-    ? (attachmentsProp as ChatbarAttachment[])
+    ? ((attachmentsProp ?? []) as ChatbarAttachment[])
     : attachmentsUncontrolled;
 
   // Track generated object URLs for cleanup

package/src/components/checkbox-cards.props.tsx

@@ -5,7 +5,7 @@ import { gridPropDefs } from './grid.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4', '5'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
 const variants = ['outline', 'classic', 'ghost', 'soft', 'surface'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 

package/src/components/checkbox-group.tsx

@@ -47,7 +47,7 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
       variant = checkboxGroupRootPropDefs.variant.default,
       ...props
     }: ScopedProps<CheckboxGroupRootProps>,
-    forwardedRef
+    forwardedRef,
   ) => {
     const { __scopeCheckboxGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxGroup);
@@ -67,7 +67,7 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
         />
       </CheckboxGroupProvider>
     );
-  }
+  },
 );
 CheckboxGroupRoot.displayName = 'CheckboxGroup.Root';
 
@@ -80,13 +80,21 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
     const { __scopeCheckboxGroup, children, className, style, ...props } = _props;
     const { size } = useCheckboxGroupContext('CheckboxGroupItem', __scopeCheckboxGroup);
 
+    // Helper to safely convert size to Text-compatible size
+    const getTextSize = (sizeValue: any): '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' => {
+      if (typeof sizeValue === 'string' && /^[1-9]$/.test(sizeValue)) {
+        return sizeValue as any;
+      }
+      return '3';
+    };
+
     // Render `<Text as="label">` if children are provided, otherwise render
     // the solo checkbox to allow building out your custom layouts with it.
     if (children) {
       return (
         <Text
           as="label"
-          size={size}
+          size={getTextSize(size)}
           className={classNames('rt-CheckboxGroupItem', className)}
           style={style}
         >
@@ -109,7 +117,7 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
         style={style}
       />
     );
-  }
+  },
 );
 CheckboxGroupItem.displayName = 'CheckboxGroup.Item';
 
@@ -125,7 +133,7 @@ const CheckboxGroupItemCheckbox = React.forwardRef<
   const { color, className } = extractProps(
     { ...props, ...context },
     checkboxGroupRootPropDefs,
-    marginPropDefs
+    marginPropDefs,
   );
   return (
     <CheckboxGroupPrimitive.Item
@@ -137,7 +145,7 @@ const CheckboxGroupItemCheckbox = React.forwardRef<
         'rt-reset',
         'rt-BaseCheckboxRoot',
         'rt-CheckboxGroupItemCheckbox',
-        className
+        className,
       )}
     >
       <CheckboxGroupPrimitive.Indicator

package/src/components/dialog.tsx

@@ -8,6 +8,7 @@ import { Text } from './text.js';
 import { Theme } from './theme.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
+import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
 import type { DialogContentOwnProps } from './dialog.props.js';
 import type {
@@ -93,6 +94,9 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
       [forwardedRef],
     );
 
+    // Cleanup stuck pointer-events on body
+    useBodyPointerEventsCleanup();
+
     // Focus trap effect
     React.useEffect(() => {
       // SSR safety - only run on client

package/src/components/radio-cards.props.tsx

@@ -5,7 +5,7 @@ import { gridPropDefs } from './grid.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4', '5'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
 const variants = ['outline', 'classic', 'ghost', 'soft', 'surface'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 

package/src/components/select.css

@@ -116,6 +116,15 @@
   &:where([data-disabled]) {
     cursor: default;
   }
+
+  /* Allow rich content to expand height */
+  &:where(.rt-SelectItemRich) {
+    height: auto;
+    min-height: var(--select-item-height);
+    align-items: flex-start;
+    padding-top: var(--space-2);
+    padding-bottom: var(--space-2);
+  }
 }
 
 .rt-SelectItemIndicator {

package/src/components/select.tsx

@@ -189,12 +189,22 @@ interface SelectItemProps
   extends ComponentPropsWithout<typeof SelectPrimitive.Item, RemovedProps> {}
 const SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>((props, forwardedRef) => {
   const { className, children, ...itemProps } = props;
+
+  // Detect if this is rich content (not just a string)
+  const isRichContent = typeof children !== 'string';
+
   return (
     <SelectPrimitive.Item
       {...itemProps}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SelectItem', className)}
+      className={classNames(
+        'rt-reset',
+        'rt-BaseMenuItem',
+        'rt-SelectItem',
+        { 'rt-SelectItemRich': isRichContent },
+        className,
+      )}
     >
       <SelectPrimitive.ItemIndicator className="rt-SelectItemIndicator">
         <ThickCheckIcon className="rt-SelectItemIndicatorIcon" />

package/src/components/shell.tsx

@@ -34,6 +34,9 @@ import { ChevronDownIcon } from './icons.js';
 import { inert } from '../helpers/inert.js';
 import * as Sheet from './sheet.js';
 import { VisuallyHidden } from './visually-hidden.js';
+import { ShellSidebarSectionContext } from './sidebar.js';
+
+import type { ShellSidebarSectionContextValue } from './sidebar.js';
 
 /** Logical document direction. Derived from document root unless `rtl` is passed. */
 type ShellDirection = 'ltr' | 'rtl';
@@ -508,7 +511,21 @@ const Rail = Object.assign(
       [shell, side],
     );
 
-    return <RailContext.Provider value={railContext}>{children}</RailContext.Provider>;
+    const sidebarSectionContext = React.useMemo<ShellSidebarSectionContextValue>(
+      () => ({
+        side,
+        section: 'rail',
+      }),
+      [side],
+    );
+
+    return (
+      <RailContext.Provider value={railContext}>
+        <ShellSidebarSectionContext.Provider value={sidebarSectionContext}>
+          {children}
+        </ShellSidebarSectionContext.Provider>
+      </RailContext.Provider>
+    );
   }),
   { displayName: 'Shell.Sidebar.Rail', __shellSlot: 'rail' as const },
 );
@@ -530,7 +547,21 @@ const Panel = Object.assign(
       [shell.activeToolBySide, shell.activeContextBySide, side],
     );
 
-    return <PanelContext.Provider value={panelContext}>{children}</PanelContext.Provider>;
+    const sidebarSectionContext = React.useMemo<ShellSidebarSectionContextValue>(
+      () => ({
+        side,
+        section: 'panel',
+      }),
+      [side],
+    );
+
+    return (
+      <PanelContext.Provider value={panelContext}>
+        <ShellSidebarSectionContext.Provider value={sidebarSectionContext}>
+          {children}
+        </ShellSidebarSectionContext.Provider>
+      </PanelContext.Provider>
+    );
   }),
   { displayName: 'Shell.Sidebar.Panel', __shellSlot: 'panel' as const },
 );
@@ -935,7 +966,7 @@ const Trigger = React.forwardRef<React.ElementRef<typeof IconButton>, GlobalTrig
       <IconButton
         {...props}
         ref={ref}
-        variant="soft"
+        variant="ghost"
         aria-controls={controlsId}
         aria-expanded={expanded}
         onClick={(e) => {

package/src/components/sidebar.css

@@ -3,15 +3,20 @@
 @import './_internal/base-sidebar-menu.css';
 
 /*
-  Compact rail presentation
-  - Pattern B (split): scope to .rt-ShellSidebarRail
-  - Pattern A (single): scope to Shell region in rail state
+  Layout-specific presentation
+  - Rail layout: compact, icon-focused
+  - Panel layout: full-width with text labels
+  - Context-aware: works with Shell.Sidebar or standalone
 */
+
+/* Rail Layout Styling */
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarContent),
 .rt-ShellSidebarRail :where(.rt-SidebarContent),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarContent) {
   padding: var(--space-2);
 }
 
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuButton),
 .rt-ShellSidebarRail :where(.rt-SidebarMenuButton),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuButton) {
   justify-content: center;
@@ -21,6 +26,8 @@
   padding: var(--space-2) var(--space-1);
 }
 
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuBadge),
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuShortcut),
 .rt-ShellSidebarRail :where(.rt-SidebarMenuBadge),
 .rt-ShellSidebarRail :where(.rt-SidebarMenuShortcut),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuBadge),
@@ -28,6 +35,7 @@
   display: none;
 }
 
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarGroupLabel),
 .rt-ShellSidebarRail :where(.rt-SidebarGroupLabel),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarGroupLabel) {
   display: block;
@@ -39,11 +47,13 @@
 }
 
 /* Hide submenu chevrons and flatten sublists in rail */
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuSubTriggerIcon),
 .rt-ShellSidebarRail :where(.rt-SidebarMenuSubTriggerIcon),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubTriggerIcon) {
   display: none;
 }
 
+:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuSubList),
 .rt-ShellSidebarRail :where(.rt-SidebarMenuSubList),
 :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubList) {
   padding-left: 0;
@@ -51,6 +61,8 @@
   margin-left: 0;
 }
 
+/* Panel Layout Styling (default) - inherits existing styles */
+
 /* Note: label styling omitted to avoid type-selector-specificity; use Text component for fine control */
 
 /* Container Variants */

package/src/components/sidebar.props.tsx

@@ -19,6 +19,7 @@ const menuVariants = ['solid', 'soft'] as const;
 const types = ['sidebar', 'floating'] as const;
 const sides = ['left', 'right'] as const;
 const collapsibleModes = ['offcanvas', 'icon', 'none'] as const;
+const layouts = ['rail', 'panel'] as const;
 
 const sidebarPropDefs = {
   ...asChildPropDef,
@@ -38,6 +39,7 @@ const sidebarPropDefs = {
     values: collapsibleModes,
     default: 'offcanvas',
   },
+  layout: { type: 'enum', className: 'rt-layout', values: layouts, default: undefined },
   panelBackground: { type: 'enum', values: ['solid', 'translucent'], default: undefined },
   ...colorPropDef,
   ...highContrastPropDef,
@@ -48,6 +50,7 @@ const sidebarPropDefs = {
   type: PropDef<(typeof types)[number]>;
   side: PropDef<(typeof sides)[number]>;
   collapsible: PropDef<(typeof collapsibleModes)[number]>;
+  layout: PropDef<(typeof layouts)[number]>;
   panelBackground: PropDef<'solid' | 'translucent'>;
 };
 

package/src/components/sidebar.tsx

@@ -39,6 +39,22 @@ function useSidebarVisual() {
   return React.useContext(SidebarVisualContext);
 }
 
+// Context detection for Shell.Sidebar integration
+type ShellSidebarSectionContextValue = {
+  side: 'start' | 'end';
+  section: 'rail' | 'panel';
+};
+
+// Create a context that Shell.Sidebar can provide
+const ShellSidebarSectionContext = React.createContext<ShellSidebarSectionContextValue | null>(
+  null,
+);
+
+// This context comes from Shell.Sidebar when Sidebar is used within Shell
+function useShellSidebarSection(): ShellSidebarSectionContextValue | null {
+  return React.useContext(ShellSidebarSectionContext);
+}
+
 // Main Sidebar component
 type SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;
 interface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}
@@ -50,6 +66,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwarded
     size = sidebarPropDefs.size.default,
     variant = sidebarPropDefs.variant.default,
     menuVariant = sidebarPropDefs.menuVariant.default,
+    layout = sidebarPropDefs.layout.default,
     // type = sidebarPropDefs.type.default,
     // side = sidebarPropDefs.side.default,
     // collapsible = sidebarPropDefs.collapsible.default,
@@ -62,6 +79,10 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwarded
   const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props
   const resolvedColor = color || themeContext.accentColor;
 
+  // Detect Shell.Sidebar context to auto-resolve layout
+  const shellSection = useShellSidebarSection();
+  const resolvedLayout = layout || shellSection?.section || 'panel'; // Default to 'panel' if no context
+
   // Update context with current props - we'll pass the resolved values
   const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;
   return (
@@ -78,10 +99,12 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwarded
             `rt-variant-${variant}`,
             `rt-r-size-${resolvedSize}`,
             `rt-menu-variant-${menuVariant}`,
+            resolvedLayout && `rt-layout-${resolvedLayout}`,
           )}
           data-accent-color={resolvedColor}
           data-high-contrast={highContrast || undefined}
           data-panel-background={panelBackground}
+          data-layout={resolvedLayout}
         >
           {children}
         </div>
@@ -592,4 +615,8 @@ export type {
   SidebarHeaderProps as HeaderProps,
   SidebarFooterProps as FooterProps,
   BadgeConfig,
+  ShellSidebarSectionContextValue,
 };
+
+// Export context for Shell.Sidebar integration
+export { ShellSidebarSectionContext };

package/src/hooks/index.ts

@@ -1 +1,2 @@
-export { useLiveAnnouncer } from './use-live-announcer.js'; 
+export { useLiveAnnouncer } from './use-live-announcer.js';
+export { useBodyPointerEventsCleanup } from './use-body-pointer-events-cleanup.js';

package/src/hooks/use-body-pointer-events-cleanup.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+
+let bodyCleanupInstalled = false;
+
+/**
+ * Hook to cleanup stuck pointer-events: none on document.body
+ *
+ * This addresses an issue where react-remove-scroll (used by Radix UI Dialog)
+ * sometimes fails to restore body pointer-events after dialog closes,
+ * leaving the page unclickable.
+ */
+export function useBodyPointerEventsCleanup() {
+  React.useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    let timeoutId: number | undefined;
+
+    const hasOpenModal = (): boolean => {
+      // Detect any open modal dialogs/alertdialogs
+      return Boolean(
+        document.querySelector(
+          '[role="dialog"][aria-modal="true"], [role="alertdialog"][aria-modal="true"]',
+        ),
+      );
+    };
+
+    const cleanup = () => {
+      if (document.body.style.pointerEvents === 'none' && !hasOpenModal()) {
+        document.body.style.pointerEvents = '';
+      }
+    };
+
+    const scheduleCleanup = (delay = 50) => {
+      if (timeoutId) window.clearTimeout(timeoutId);
+      timeoutId = window.setTimeout(cleanup, delay);
+    };
+
+    // Initial run to catch already-stuck state
+    scheduleCleanup(100);
+
+    // If already installed globally, don't re-register listeners/observers
+    if (bodyCleanupInstalled) {
+      return () => {
+        if (timeoutId) window.clearTimeout(timeoutId);
+      };
+    }
+
+    bodyCleanupInstalled = true;
+
+    const onPointer = () => scheduleCleanup(50);
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' || event.key === 'Enter' || event.key === ' ') scheduleCleanup(50);
+    };
+    const onVisibility = () => {
+      if (!document.hidden) scheduleCleanup(50);
+    };
+    const onTransitionEnd = () => scheduleCleanup(0);
+    const onAnimationEnd = () => scheduleCleanup(0);
+
+    // Listen for common interactions that close overlays/menus
+    document.addEventListener('pointerup', onPointer, true);
+    document.addEventListener('click', onPointer, true);
+    document.addEventListener('keydown', onKey, true);
+    document.addEventListener('keyup', onKey, true);
+    document.addEventListener('visibilitychange', onVisibility);
+    document.addEventListener('transitionend', onTransitionEnd, true);
+    document.addEventListener('animationend', onAnimationEnd, true);
+
+    // Observe body style changes (where pointer-events is applied) and DOM mutations
+    const bodyObserver = new MutationObserver(() => scheduleCleanup(0));
+    bodyObserver.observe(document.body, { attributes: true, attributeFilter: ['style'] });
+
+    const domObserver = new MutationObserver(() => scheduleCleanup(0));
+    domObserver.observe(document, { childList: true, subtree: true });
+
+    // Keep listeners/observers for the app lifetime to ensure cleanup even after overlays unmount
+    return () => {
+      if (timeoutId) window.clearTimeout(timeoutId);
+    };
+  }, []);
+}

package/src/props/gap.props.ts

@@ -1,6 +1,6 @@
 import type { PropDef } from './prop-def.js';
 
-const gapValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+const gapValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
 
 const gapPropDefs = {
   /**

package/src/props/margin.props.ts

@@ -1,7 +1,7 @@
 import type { PropDef, GetPropDefTypes } from './prop-def.js';
 
 // prettier-ignore
-const marginValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9'] as const;
+const marginValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9', '-10', '-11', '-12'] as const;
 
 const marginPropDefs = {
   /**

package/src/props/padding.props.ts

@@ -1,6 +1,6 @@
 import type { GetPropDefTypes, PropDef } from './prop-def.js';
 
-const paddingValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+const paddingValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
 
 const paddingPropDefs = {
   /**

package/src/styles/tokens/blur.css

@@ -9,6 +9,9 @@
   --blur-7: calc(28px * var(--scaling) * var(--blur-factor));
   --blur-8: calc(36px * var(--scaling) * var(--blur-factor));
   --blur-9: calc(44px * var(--scaling) * var(--blur-factor));
+  --blur-10: calc(52px * var(--scaling) * var(--blur-factor));
+  --blur-11: calc(60px * var(--scaling) * var(--blur-factor));
+  --blur-12: calc(68px * var(--scaling) * var(--blur-factor));
 }
 
 [data-blur='none'] {