@kushagradhawan/kookie-ui 0.1.29 → 0.1.30

package/dist/esm/components/toggle-button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toggle-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { Button } from './button.js';\n\ninterface ToggleButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {\n  pressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  defaultPressed?: boolean;\n}\n\ntype ToggleButtonElement = React.ElementRef<typeof Button>;\n\nconst ToggleButton = React.forwardRef<ToggleButtonElement, ToggleButtonProps>(\n  ({ pressed, onPressedChange, defaultPressed, ...buttonProps }, forwardedRef) => {\n    return (\n      <Toggle.Root\n        pressed={pressed}\n        onPressedChange={onPressedChange}\n        defaultPressed={defaultPressed}\n        asChild\n      >\n        <Button {...buttonProps} ref={forwardedRef} />\n      </Toggle.Root>\n    );\n  },\n);\nToggleButton.displayName = 'ToggleButton';\n\nexport { ToggleButton };\nexport type { ToggleButtonProps };\n"],
-  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAS,UAAAC,MAAc,WACvB,OAAS,UAAAC,MAAc,cAUvB,MAAMC,EAAeH,EAAM,WACzB,CAAC,CAAE,QAAAI,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAY,EAAGC,IAE3DR,EAAA,cAACC,EAAO,KAAP,CACC,QAASG,EACT,gBAAiBC,EACjB,eAAgBC,EAChB,QAAO,IAEPN,EAAA,cAACE,EAAA,CAAQ,GAAGK,EAAa,IAAKC,EAAc,CAC9C,CAGN,EACAL,EAAa,YAAc",
-  "names": ["React", "Toggle", "Button", "ToggleButton", "pressed", "onPressedChange", "defaultPressed", "buttonProps", "forwardedRef"]
+  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { Button } from './button.js';\nimport { useLiveAnnouncer } from '../hooks/use-live-announcer.js';\n\n/**\n * ToggleButton props that extend Button with toggle-specific functionality\n *\n * The ToggleButton component provides a button that can be pressed/unpressed\n * with proper accessibility announcements and state management.\n */\ninterface ToggleButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {\n  /** Controlled pressed state */\n  pressed?: boolean;\n  /** Callback when pressed state changes */\n  onPressedChange?: (pressed: boolean) => void;\n  /** Default pressed state for uncontrolled usage */\n  defaultPressed?: boolean;\n}\n\ntype ToggleButtonElement = React.ElementRef<typeof Button>;\n\n/**\n * ToggleButton component for buttons that can be pressed/unpressed\n *\n * The ToggleButton component extends Button with toggle functionality using\n * Radix UI's Toggle primitive. It provides proper accessibility announcements,\n * controlled/uncontrolled state management, and seamless integration with\n * the existing Button component.\n *\n * Key features:\n * - Controlled and uncontrolled state management\n * - Live accessibility announcements for screen readers\n * - Automatic state validation and warnings\n * - Seamless integration with Button props and styling\n * - Proper ARIA attributes for toggle functionality\n *\n * @example\n * ```tsx\n * // Uncontrolled toggle button\n * <ToggleButton defaultPressed={false}>\n *   Toggle Me\n * </ToggleButton>\n *\n * // Controlled toggle button\n * const [pressed, setPressed] = React.useState(false);\n * <ToggleButton\n *   pressed={pressed}\n *   onPressedChange={setPressed}\n * >\n *   {pressed ? 'On' : 'Off'}\n * </ToggleButton>\n *\n * // Toggle button with all Button props\n * <ToggleButton\n *   variant=\"solid\"\n *   size=\"3\"\n *   color=\"blue\"\n *   pressed={isActive}\n *   onPressedChange={setIsActive}\n * >\n *   {isActive ? 'Active' : 'Inactive'}\n * </ToggleButton>\n * ```\n */\nconst ToggleButton = React.forwardRef<ToggleButtonElement, ToggleButtonProps>(\n  ({ pressed, onPressedChange, defaultPressed, children, ...buttonProps }, forwardedRef) => {\n    // Get the live announcer for accessibility announcements\n    const announce = useLiveAnnouncer();\n\n    /**\n     * Extract accessible name from button content for announcements\n     * This ensures screen readers announce meaningful state changes\n     */\n    const getAccessibleName = React.useCallback(() => {\n      if (typeof children === 'string') return children;\n      if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {\n        return (children.props as any).children;\n      }\n      return 'Toggle button';\n    }, [children]);\n\n    /**\n     * Memoized handler for state changes with accessibility announcements\n     * This ensures screen readers announce the new state immediately\n     */\n    const handlePressedChange = React.useCallback(\n      (newPressed: boolean) => {\n        const accessibleName = getAccessibleName();\n        // Announce the state change for screen readers\n        announce(`${accessibleName} ${newPressed ? 'pressed' : 'unpressed'}`);\n        // Call the user's change handler\n        onPressedChange?.(newPressed);\n      },\n      [announce, onPressedChange, getAccessibleName],\n    );\n\n    // Development-only warning for controlled/uncontrolled pattern\n    // This helps developers avoid common state management mistakes\n    React.useEffect(() => {\n      if (process.env.NODE_ENV === 'development' && pressed !== undefined && onPressedChange === undefined) {\n        console.warn(\n          'ToggleButton: You provided a `pressed` prop without an `onPressedChange` handler. ' +\n            'This will result in a read-only toggle button. If you want the button to be interactive, ' +\n            'you should provide an `onPressedChange` handler.',\n        );\n      }\n    }, [pressed, onPressedChange]);\n\n    // Render the toggle button using Radix UI's Toggle primitive\n    // This provides proper ARIA attributes and keyboard navigation\n    return (\n      <Toggle.Root\n        pressed={pressed}\n        onPressedChange={handlePressedChange}\n        defaultPressed={defaultPressed}\n        asChild\n      >\n        <Button {...buttonProps} ref={forwardedRef}>\n          {children}\n        </Button>\n      </Toggle.Root>\n    );\n  },\n);\nToggleButton.displayName = 'ToggleButton';\n\nexport { ToggleButton };\nexport type { ToggleButtonProps };\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAS,UAAAC,MAAc,WACvB,OAAS,UAAAC,MAAc,cACvB,OAAS,oBAAAC,MAAwB,iCA8DjC,MAAMC,EAAeJ,EAAM,WACzB,CAAC,CAAE,QAAAK,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,SAAAC,EAAU,GAAGC,CAAY,EAAGC,IAAiB,CAExF,MAAMC,EAAWR,EAAiB,EAM5BS,EAAoBZ,EAAM,YAAY,IACtC,OAAOQ,GAAa,SAAiBA,EACrCR,EAAM,eAAeQ,CAAQ,GAAK,OAAQA,EAAS,OAAe,UAAa,SACzEA,EAAS,MAAc,SAE1B,gBACN,CAACA,CAAQ,CAAC,EAMPK,EAAsBb,EAAM,YAC/Bc,GAAwB,CACvB,MAAMC,EAAiBH,EAAkB,EAEzCD,EAAS,GAAGI,CAAc,IAAID,EAAa,UAAY,WAAW,EAAE,EAEpER,IAAkBQ,CAAU,CAC9B,EACA,CAACH,EAAUL,EAAiBM,CAAiB,CAC/C,EAIA,OAAAZ,EAAM,UAAU,IAAM,CAQtB,EAAG,CAACK,EAASC,CAAe,CAAC,EAK3BN,EAAA,cAACC,EAAO,KAAP,CACC,QAASI,EACT,gBAAiBQ,EACjB,eAAgBN,EAChB,QAAO,IAEPP,EAAA,cAACE,EAAA,CAAQ,GAAGO,EAAa,IAAKC,GAC3BF,CACH,CACF,CAEJ,CACF,EACAJ,EAAa,YAAc",
+  "names": ["React", "Toggle", "Button", "useLiveAnnouncer", "ToggleButton", "pressed", "onPressedChange", "defaultPressed", "children", "buttonProps", "forwardedRef", "announce", "getAccessibleName", "handlePressedChange", "newPressed", "accessibleName"]
 }

package/dist/esm/components/toggle-icon-button.d.ts

@@ -1,7 +1,20 @@
 import * as React from 'react';
 import { Toggle } from 'radix-ui';
-import type { BaseButtonProps } from './_internal/base-button.js';
+import type { IconButtonProps } from './icon-button.js';
+/**
+ * Extract toggle-specific props from Radix Toggle
+ * These props control the toggle state and behavior
+ */
 type ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle.Root>;
+/**
+ * Required accessibility props for icon buttons (same as IconButton)
+ * Icon buttons must have an accessible name to meet WCAG guidelines
+ *
+ * Three ways to provide accessibility:
+ * 1. aria-label: Direct descriptive text
+ * 2. aria-labelledby: Reference to a label element
+ * 3. children: Visible text content (fallback)
+ */
 type AccessibilityProps = {
     'aria-label': string;
     'aria-labelledby'?: never;
@@ -13,12 +26,81 @@ type AccessibilityProps = {
     'aria-labelledby'?: never;
     children: React.ReactNode;
 };
-interface ToggleIconButtonProps extends Omit<BaseButtonProps, 'as'> {
+/**
+ * Combine IconButton props with Toggle-specific props
+ * Includes tooltip props from IconButton for comprehensive functionality
+ */
+interface ToggleIconButtonProps extends Omit<IconButtonProps, 'as'> {
+    /** Controlled pressed state */
     pressed?: ToggleProps['pressed'];
+    /** Callback when pressed state changes */
     onPressedChange?: ToggleProps['onPressedChange'];
+    /** Default pressed state for uncontrolled usage */
     defaultPressed?: ToggleProps['defaultPressed'];
 }
+/**
+ * Intersection with accessibility props to ensure compliance
+ * This type ensures all ToggleIconButton instances have proper accessibility
+ */
 type ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & AccessibilityProps;
+/**
+ * ToggleIconButton component for icon buttons that can be pressed/unpressed
+ *
+ * The ToggleIconButton component extends IconButton with toggle functionality
+ * using Radix UI's Toggle primitive. It provides proper accessibility announcements,
+ * controlled/uncontrolled state management, and seamless integration with
+ * the existing IconButton component.
+ *
+ * Key features:
+ * - Controlled and uncontrolled state management
+ * - Live accessibility announcements for screen readers
+ * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)
+ * - Automatic state validation and warnings
+ * - Seamless integration with IconButton props and styling
+ * - Proper ARIA attributes for toggle functionality
+ * - Built-in tooltip support from IconButton
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled toggle icon button
+ * <ToggleIconButton defaultPressed={false} aria-label="Toggle notifications">
+ *   <Bell />
+ * </ToggleIconButton>
+ *
+ * // Controlled toggle icon button
+ * const [pressed, setPressed] = React.useState(false);
+ * <ToggleIconButton
+ *   pressed={pressed}
+ *   onPressedChange={setPressed}
+ *   aria-label="Toggle notifications"
+ * >
+ *   <Bell />
+ * </ToggleIconButton>
+ *
+ * // Toggle icon button with tooltip
+ * <ToggleIconButton
+ *   variant="solid"
+ *   size="3"
+ *   color="blue"
+ *   pressed={isActive}
+ *   onPressedChange={setIsActive}
+ *   aria-label="Toggle feature"
+ *   tooltip="Toggle this feature on/off"
+ * >
+ *   <Star />
+ * </ToggleIconButton>
+ *
+ * // Toggle icon button with aria-labelledby
+ * <ToggleIconButton
+ *   aria-labelledby="notifications-label"
+ *   pressed={notificationsEnabled}
+ *   onPressedChange={setNotificationsEnabled}
+ * >
+ *   <Bell />
+ * </ToggleIconButton>
+ * <span id="notifications-label">Toggle notifications</span>
+ * ```
+ */
 declare const ToggleIconButton: React.ForwardRefExoticComponent<ToggleIconButtonPropsWithAccessibility & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleIconButton };
 export type { ToggleIconButtonPropsWithAccessibility as ToggleIconButtonProps };

package/dist/esm/components/toggle-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAKlE,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAGtE,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAGnF,UAAU,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;IACjE,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAGD,KAAK,sCAAsC,GAAG,qBAAqB,GAAG,kBAAkB,CAAC;AAEzF,QAAA,MAAM,gBAAgB,kHAcpB,CAAC;AAGH,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,sCAAsC,IAAI,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAIxD;;;GAGG;AACH,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAEtE;;;;;;;;GAQG;AACH,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAEnF;;;GAGG;AACH,UAAU,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;IACjE,+BAA+B;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,0CAA0C;IAC1C,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACjD,mDAAmD;IACnD,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAED;;;GAGG;AACH,KAAK,sCAAsC,GAAG,qBAAqB,GAAG,kBAAkB,CAAC;AAEzF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,QAAA,MAAM,gBAAgB,kHA8EpB,CAAC;AAGH,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,sCAAsC,IAAI,qBAAqB,EAAE,CAAC"}

package/dist/esm/components/toggle-icon-button.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Toggle as a}from"radix-ui";import{IconButton as g}from"./icon-button.js";import"./_internal/base-button.js";const o=e.forwardRef(({pressed:t,onPressedChange:s,defaultPressed:r,...n},l)=>e.createElement(a.Root,{pressed:t,onPressedChange:s,defaultPressed:r,asChild:!0},e.createElement(g,{...n,ref:l})));o.displayName="ToggleIconButton";export{o as ToggleIconButton};
+import*as e from"react";import{Toggle as u}from"radix-ui";import{IconButton as b}from"./icon-button.js";import"./_internal/base-button.js";import{useLiveAnnouncer as f}from"../hooks/use-live-announcer.js";const c=e.forwardRef(({pressed:l,onPressedChange:r,defaultPressed:g,...s},p)=>{const a=f(),i=e.useCallback(()=>{const{"aria-label":o,"aria-labelledby":n,children:t}=s;return o||(n?document.getElementById(n)?.textContent||"Toggle icon button":typeof t=="string"?t:e.isValidElement(t)&&typeof t.props?.children=="string"?t.props.children:"Toggle icon button")},[s]),d=e.useCallback(o=>{const n=i();a(`${n} ${o?"pressed":"unpressed"}`),r?.(o)},[a,r,i]);return e.useEffect(()=>{},[l,r]),e.createElement(u.Root,{pressed:l,onPressedChange:d,defaultPressed:g,asChild:!0},e.createElement(b,{...s,ref:p}))});c.displayName="ToggleIconButton";export{c as ToggleIconButton};
 //# sourceMappingURL=toggle-icon-button.js.map

package/dist/esm/components/toggle-icon-button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toggle-icon-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { IconButton } from './icon-button.js';\nimport { BaseButton } from './_internal/base-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype ToggleIconButtonElement = React.ElementRef<typeof BaseButton>;\n\n// Extract toggle-specific props from Radix Toggle\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle.Root>;\n\n// Required accessibility props for icon buttons (same as IconButton)\ntype AccessibilityProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string }\n  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n// Combine BaseButton props with Toggle-specific props and accessibility requirements\ninterface ToggleIconButtonProps extends Omit<BaseButtonProps, 'as'> {\n  pressed?: ToggleProps['pressed'];\n  onPressedChange?: ToggleProps['onPressedChange'];\n  defaultPressed?: ToggleProps['defaultPressed'];\n}\n\n// Intersection with accessibility props\ntype ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & AccessibilityProps;\n\nconst ToggleIconButton = React.forwardRef<\n  ToggleIconButtonElement,\n  ToggleIconButtonPropsWithAccessibility\n>(({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {\n  return (\n    <Toggle.Root\n      pressed={pressed}\n      onPressedChange={onPressedChange}\n      defaultPressed={defaultPressed}\n      asChild\n    >\n      <IconButton {...iconButtonProps} ref={forwardedRef} />\n    </Toggle.Root>\n  );\n});\nToggleIconButton.displayName = 'ToggleIconButton';\n\nexport { ToggleIconButton };\nexport type { ToggleIconButtonPropsWithAccessibility as ToggleIconButtonProps };\n"],
-  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAS,UAAAC,MAAc,WACvB,OAAS,cAAAC,MAAkB,mBAC3B,MAA2B,6BAwB3B,MAAMC,EAAmBH,EAAM,WAG7B,CAAC,CAAE,QAAAI,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAgB,EAAGC,IAEjER,EAAA,cAACC,EAAO,KAAP,CACC,QAASG,EACT,gBAAiBC,EACjB,eAAgBC,EAChB,QAAO,IAEPN,EAAA,cAACE,EAAA,CAAY,GAAGK,EAAiB,IAAKC,EAAc,CACtD,CAEH,EACDL,EAAiB,YAAc",
-  "names": ["React", "Toggle", "IconButton", "ToggleIconButton", "pressed", "onPressedChange", "defaultPressed", "iconButtonProps", "forwardedRef"]
+  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { IconButton } from './icon-button.js';\nimport { BaseButton } from './_internal/base-button.js';\nimport { useLiveAnnouncer } from '../hooks/use-live-announcer.js';\nimport type { IconButtonProps } from './icon-button.js';\n\ntype ToggleIconButtonElement = React.ElementRef<typeof BaseButton>;\n\n/**\n * Extract toggle-specific props from Radix Toggle\n * These props control the toggle state and behavior\n */\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle.Root>;\n\n/**\n * Required accessibility props for icon buttons (same as IconButton)\n * Icon buttons must have an accessible name to meet WCAG guidelines\n *\n * Three ways to provide accessibility:\n * 1. aria-label: Direct descriptive text\n * 2. aria-labelledby: Reference to a label element\n * 3. children: Visible text content (fallback)\n */\ntype AccessibilityProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string }\n  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n/**\n * Combine IconButton props with Toggle-specific props\n * Includes tooltip props from IconButton for comprehensive functionality\n */\ninterface ToggleIconButtonProps extends Omit<IconButtonProps, 'as'> {\n  /** Controlled pressed state */\n  pressed?: ToggleProps['pressed'];\n  /** Callback when pressed state changes */\n  onPressedChange?: ToggleProps['onPressedChange'];\n  /** Default pressed state for uncontrolled usage */\n  defaultPressed?: ToggleProps['defaultPressed'];\n}\n\n/**\n * Intersection with accessibility props to ensure compliance\n * This type ensures all ToggleIconButton instances have proper accessibility\n */\ntype ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & AccessibilityProps;\n\n/**\n * ToggleIconButton component for icon buttons that can be pressed/unpressed\n *\n * The ToggleIconButton component extends IconButton with toggle functionality\n * using Radix UI's Toggle primitive. It provides proper accessibility announcements,\n * controlled/uncontrolled state management, and seamless integration with\n * the existing IconButton component.\n *\n * Key features:\n * - Controlled and uncontrolled state management\n * - Live accessibility announcements for screen readers\n * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)\n * - Automatic state validation and warnings\n * - Seamless integration with IconButton props and styling\n * - Proper ARIA attributes for toggle functionality\n * - Built-in tooltip support from IconButton\n *\n * @example\n * ```tsx\n * // Uncontrolled toggle icon button\n * <ToggleIconButton defaultPressed={false} aria-label=\"Toggle notifications\">\n *   <Bell />\n * </ToggleIconButton>\n *\n * // Controlled toggle icon button\n * const [pressed, setPressed] = React.useState(false);\n * <ToggleIconButton\n *   pressed={pressed}\n *   onPressedChange={setPressed}\n *   aria-label=\"Toggle notifications\"\n * >\n *   <Bell />\n * </ToggleIconButton>\n *\n * // Toggle icon button with tooltip\n * <ToggleIconButton\n *   variant=\"solid\"\n *   size=\"3\"\n *   color=\"blue\"\n *   pressed={isActive}\n *   onPressedChange={setIsActive}\n *   aria-label=\"Toggle feature\"\n *   tooltip=\"Toggle this feature on/off\"\n * >\n *   <Star />\n * </ToggleIconButton>\n *\n * // Toggle icon button with aria-labelledby\n * <ToggleIconButton\n *   aria-labelledby=\"notifications-label\"\n *   pressed={notificationsEnabled}\n *   onPressedChange={setNotificationsEnabled}\n * >\n *   <Bell />\n * </ToggleIconButton>\n * <span id=\"notifications-label\">Toggle notifications</span>\n * ```\n */\nconst ToggleIconButton = React.forwardRef<\n  ToggleIconButtonElement,\n  ToggleIconButtonPropsWithAccessibility\n>(({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {\n  // Get the live announcer for accessibility announcements\n  const announce = useLiveAnnouncer();\n\n  /**\n   * Extract accessible name from various sources for announcements\n   * This ensures screen readers announce meaningful state changes\n   * Priority: aria-label > aria-labelledby > children > fallback\n   */\n  const getAccessibleName = React.useCallback(() => {\n    const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n    } = iconButtonProps;\n\n    // First priority: direct aria-label\n    if (ariaLabel) return ariaLabel;\n\n    // Second priority: referenced label element\n    if (ariaLabelledBy) {\n      const labelElement = document.getElementById(ariaLabelledBy);\n      return labelElement?.textContent || 'Toggle icon button';\n    }\n\n    // Third priority: visible text children\n    if (typeof children === 'string') return children;\n    if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {\n      return (children.props as any).children;\n    }\n\n    // Fallback for edge cases\n    return 'Toggle icon button';\n  }, [iconButtonProps]);\n\n  /**\n   * Memoized handler for state changes with accessibility announcements\n   * This ensures screen readers announce the new state immediately\n   */\n  const handlePressedChange = React.useCallback(\n    (newPressed: boolean) => {\n      const accessibleName = getAccessibleName();\n      // Announce the state change for screen readers\n      announce(`${accessibleName} ${newPressed ? 'pressed' : 'unpressed'}`);\n      // Call the user's change handler\n      onPressedChange?.(newPressed);\n    },\n    [announce, onPressedChange, getAccessibleName],\n  );\n\n  // Development-only warning for controlled/uncontrolled pattern\n  // This helps developers avoid common state management mistakes\n  React.useEffect(() => {\n    if (process.env.NODE_ENV === 'development' && pressed !== undefined && onPressedChange === undefined) {\n      console.warn(\n        'ToggleIconButton: You provided a `pressed` prop without an `onPressedChange` handler. ' +\n          'This will result in a read-only toggle button. If you want the button to be interactive, ' +\n          'you should provide an `onPressedChange` handler.',\n      );\n    }\n  }, [pressed, onPressedChange]);\n\n  // Render the toggle icon button using Radix UI's Toggle primitive\n  // This provides proper ARIA attributes and keyboard navigation\n  // The IconButton component handles accessibility validation internally\n  return (\n    <Toggle.Root\n      pressed={pressed}\n      onPressedChange={handlePressedChange}\n      defaultPressed={defaultPressed}\n      asChild\n    >\n      <IconButton {...iconButtonProps} ref={forwardedRef} />\n    </Toggle.Root>\n  );\n});\nToggleIconButton.displayName = 'ToggleIconButton';\n\nexport { ToggleIconButton };\nexport type { ToggleIconButtonPropsWithAccessibility as ToggleIconButtonProps };\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAS,UAAAC,MAAc,WACvB,OAAS,cAAAC,MAAkB,mBAC3B,MAA2B,6BAC3B,OAAS,oBAAAC,MAAwB,iCAsGjC,MAAMC,EAAmBJ,EAAM,WAG7B,CAAC,CAAE,QAAAK,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAgB,EAAGC,IAAiB,CAEpF,MAAMC,EAAWP,EAAiB,EAO5BQ,EAAoBX,EAAM,YAAY,IAAM,CAChD,KAAM,CACJ,aAAcY,EACd,kBAAmBC,EACnB,SAAAC,CACF,EAAIN,EAGJ,OAAII,IAGAC,EACmB,SAAS,eAAeA,CAAc,GACtC,aAAe,qBAIlC,OAAOC,GAAa,SAAiBA,EACrCd,EAAM,eAAec,CAAQ,GAAK,OAAQA,EAAS,OAAe,UAAa,SACzEA,EAAS,MAAc,SAI1B,qBACT,EAAG,CAACN,CAAe,CAAC,EAMdO,EAAsBf,EAAM,YAC/BgB,GAAwB,CACvB,MAAMC,EAAiBN,EAAkB,EAEzCD,EAAS,GAAGO,CAAc,IAAID,EAAa,UAAY,WAAW,EAAE,EAEpEV,IAAkBU,CAAU,CAC9B,EACA,CAACN,EAAUJ,EAAiBK,CAAiB,CAC/C,EAIA,OAAAX,EAAM,UAAU,IAAM,CAQtB,EAAG,CAACK,EAASC,CAAe,CAAC,EAM3BN,EAAA,cAACC,EAAO,KAAP,CACC,QAASI,EACT,gBAAiBU,EACjB,eAAgBR,EAChB,QAAO,IAEPP,EAAA,cAACE,EAAA,CAAY,GAAGM,EAAiB,IAAKC,EAAc,CACtD,CAEJ,CAAC,EACDL,EAAiB,YAAc",
+  "names": ["React", "Toggle", "IconButton", "useLiveAnnouncer", "ToggleIconButton", "pressed", "onPressedChange", "defaultPressed", "iconButtonProps", "forwardedRef", "announce", "getAccessibleName", "ariaLabel", "ariaLabelledBy", "children", "handlePressedChange", "newPressed", "accessibleName"]
 }

package/dist/esm/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useLiveAnnouncer } from './use-live-announcer.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/esm/hooks/index.js

@@ -0,0 +1,2 @@
+import{useLiveAnnouncer as o}from"./use-live-announcer.js";export{o as useLiveAnnouncer};
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/index.ts"],
+  "sourcesContent": ["export { useLiveAnnouncer } from './use-live-announcer.js'; "],
+  "mappings": "AAAA,OAAS,oBAAAA,MAAwB",
+  "names": ["useLiveAnnouncer"]
+}

package/dist/esm/hooks/use-live-announcer.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook for making live announcements to screen readers
+ * Creates a hidden aria-live region for announcing dynamic content changes
+ */
+export declare function useLiveAnnouncer(): (message: string) => void;
+//# sourceMappingURL=use-live-announcer.d.ts.map

package/dist/esm/hooks/use-live-announcer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-live-announcer.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-live-announcer.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,gBAAgB,cA+Be,MAAM,UAcpD"}

package/dist/esm/hooks/use-live-announcer.js

@@ -0,0 +1,10 @@
+import*as n from"react";function o(){return n.useEffect(()=>{let e=document.getElementById("rt-live-announcer");return e||(e=document.createElement("div"),e.id="rt-live-announcer",e.setAttribute("aria-live","polite"),e.setAttribute("aria-atomic","true"),e.style.cssText=`
+        position: absolute;
+        left: -10000px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+      `,document.body.appendChild(e)),()=>{e&&!e.hasChildNodes()&&e.remove()}},[]),n.useCallback(e=>{const t=document.getElementById("rt-live-announcer");t&&(t.textContent="",setTimeout(()=>{t.textContent=e},100))},[])}export{o as useLiveAnnouncer};
+//# sourceMappingURL=use-live-announcer.js.map

package/dist/esm/hooks/use-live-announcer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-live-announcer.ts"],
+  "sourcesContent": ["import * as React from 'react';\n\n/**\n * Hook for making live announcements to screen readers\n * Creates a hidden aria-live region for announcing dynamic content changes\n */\nexport function useLiveAnnouncer() {\n\n  // Create aria-live region if it doesn't exist\n  React.useEffect(() => {\n    let liveRegion = document.getElementById('rt-live-announcer');\n    \n    if (!liveRegion) {\n      liveRegion = document.createElement('div');\n      liveRegion.id = 'rt-live-announcer';\n      liveRegion.setAttribute('aria-live', 'polite');\n      liveRegion.setAttribute('aria-atomic', 'true');\n      liveRegion.style.cssText = `\n        position: absolute;\n        left: -10000px;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n      `;\n      document.body.appendChild(liveRegion);\n    }\n\n    return () => {\n      // Clean up on unmount if no other components are using it\n      if (liveRegion && !liveRegion.hasChildNodes()) {\n        liveRegion.remove();\n      }\n    };\n  }, []);\n\n  const announce = React.useCallback((message: string) => {\n    const liveRegion = document.getElementById('rt-live-announcer');\n    if (liveRegion) {\n      // Clear previous announcements\n      liveRegion.textContent = '';\n      \n      // Add new announcement with a small delay to ensure it's announced\n      setTimeout(() => {\n        liveRegion.textContent = message;\n      }, 100);\n    }\n  }, []);\n\n  return announce;\n} "],
+  "mappings": "AAAA,UAAYA,MAAW,QAMhB,SAASC,GAAmB,CAGjC,OAAAD,EAAM,UAAU,IAAM,CACpB,IAAIE,EAAa,SAAS,eAAe,mBAAmB,EAE5D,OAAKA,IACHA,EAAa,SAAS,cAAc,KAAK,EACzCA,EAAW,GAAK,oBAChBA,EAAW,aAAa,YAAa,QAAQ,EAC7CA,EAAW,aAAa,cAAe,MAAM,EAC7CA,EAAW,MAAM,QAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAS3B,SAAS,KAAK,YAAYA,CAAU,GAG/B,IAAM,CAEPA,GAAc,CAACA,EAAW,cAAc,GAC1CA,EAAW,OAAO,CAEtB,CACF,EAAG,CAAC,CAAC,EAEYF,EAAM,YAAaG,GAAoB,CACtD,MAAMD,EAAa,SAAS,eAAe,mBAAmB,EAC1DA,IAEFA,EAAW,YAAc,GAGzB,WAAW,IAAM,CACfA,EAAW,YAAcC,CAC3B,EAAG,GAAG,EAEV,EAAG,CAAC,CAAC,CAGP",
+  "names": ["React", "useLiveAnnouncer", "liveRegion", "message"]
+}

package/dist/esm/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/index.js';
+export * from './hooks/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC"}

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export*from"./components/index.js";
+export*from"./components/index.js";export*from"./hooks/index.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './components/index.js';\n"],
-  "mappings": "AAAA,WAAc",
+  "sourcesContent": ["export * from './components/index.js';\nexport * from './hooks/index.js';\n"],
+  "mappings": "AAAA,WAAc,wBACd,WAAc",
   "names": []
 }

package/dist/esm/props/weight.prop.d.ts

@@ -2,7 +2,7 @@ declare const weightPropDef: {
     weight: {
         type: "enum";
         className: string;
-        values: readonly ["light", "regular", "medium", "bold"];
+        values: readonly ["thin", "extralight", "light", "regular", "medium", "semibold", "bold", "extrabold"];
         responsive: true;
     };
 };

package/dist/esm/props/weight.prop.js

@@ -1,2 +1,2 @@
-const e=["light","regular","medium","bold"],t={weight:{type:"enum",className:"rt-r-weight",values:e,responsive:!0}};export{t as weightPropDef};
+const e=["thin","extralight","light","regular","medium","semibold","bold","extrabold"],t={weight:{type:"enum",className:"rt-r-weight",values:e,responsive:!0}};export{t as weightPropDef};
 //# sourceMappingURL=weight.prop.js.map

package/dist/esm/props/weight.prop.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/props/weight.prop.ts"],
-  "sourcesContent": ["import type { PropDef } from './prop-def.js';\n\nconst weights = ['light', 'regular', 'medium', 'bold'] as const;\n\nconst weightPropDef = {\n  weight: {\n    type: 'enum',\n    className: 'rt-r-weight',\n    values: weights,\n    responsive: true,\n  },\n} satisfies {\n  weight: PropDef<(typeof weights)[number]>;\n};\n\nexport { weightPropDef };\n"],
-  "mappings": "AAEA,MAAMA,EAAU,CAAC,QAAS,UAAW,SAAU,MAAM,EAE/CC,EAAgB,CACpB,OAAQ,CACN,KAAM,OACN,UAAW,cACX,OAAQD,EACR,WAAY,EACd,CACF",
+  "sourcesContent": ["import type { PropDef } from './prop-def.js';\n\nconst weights = ['thin', 'extralight', 'light', 'regular', 'medium', 'semibold', 'bold', 'extrabold'] as const;\n\nconst weightPropDef = {\n  weight: {\n    type: 'enum',\n    className: 'rt-r-weight',\n    values: weights,\n    responsive: true,\n  },\n} satisfies {\n  weight: PropDef<(typeof weights)[number]>;\n};\n\nexport { weightPropDef };\n"],
+  "mappings": "AAEA,MAAMA,EAAU,CAAC,OAAQ,aAAc,QAAS,UAAW,SAAU,WAAY,OAAQ,WAAW,EAE9FC,EAAgB,CACpB,OAAQ,CACN,KAAM,OACN,UAAW,cACX,OAAQD,EACR,WAAY,EACd,CACF",
   "names": ["weights", "weightPropDef"]
 }

package/layout/components.css

@@ -138,6 +138,7 @@
     align-items: center;
     flex-shrink: 0;
     flex-grow: 1;
+    min-width: 0;
 }
 .rt-ContainerInner {
     width: 100%;

package/layout.css

@@ -162,6 +162,7 @@
     align-items: center;
     flex-shrink: 0;
     flex-grow: 1;
+    min-width: 0;
 }
 .rt-ContainerInner {
     width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
   "keywords": [
     "react",
@@ -119,6 +119,7 @@
   "dependencies": {
     "@radix-ui/colors": "^3.0.0",
     "classnames": "^2.3.2",
+    "geist": "^1.4.2",
     "radix-ui": "^1.1.3",
     "react-remove-scroll-bar": "^2.3.8"
   },