@fragments-sdk/ui 0.11.1 → 0.13.0

package/dist/components/NavigationMenu/useNavigationMenu.cjs

@@ -43,6 +43,7 @@ function useNavigationMenu({
   const skipDelayTimerRef = React__namespace.useRef(null);
   const triggerRefs = React__namespace.useRef(/* @__PURE__ */ new Map());
   const triggerOrder = React__namespace.useRef([]);
+  const itemOrder = React__namespace.useRef([]);
   const itemInfoMap = React__namespace.useRef(/* @__PURE__ */ new Map());
   const [viewportSize, setViewportSize] = React__namespace.useState({ width: 0, height: 0 });
   const viewportRef = React__namespace.useRef(null);
@@ -68,6 +69,7 @@ function useNavigationMenu({
     skipDelayTimerRef,
     triggerRefs,
     triggerOrder,
+    itemOrder,
     itemInfoMap,
     viewportSize,
     setViewportSize,

package/dist/components/NavigationMenu/useNavigationMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigationMenu.cjs","sources":["../../../src/components/NavigationMenu/useNavigationMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { NavigationMenuItemInfo } from './NavigationMenuContext';\n\nexport interface UseNavigationMenuOptions {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  delayDuration?: number;\n  skipDelayDuration?: number;\n}\n\nexport function useNavigationMenu({\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  delayDuration = 200,\n  skipDelayDuration = 300,\n}: UseNavigationMenuOptions) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const setValue = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange]\n  );\n\n  // Hover delay timers\n  const openTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Skip-delay: when moving between triggers, open instantly\n  const isRecentlyOpenRef = React.useRef(false);\n  const skipDelayTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Trigger registry for keyboard nav\n  const triggerRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());\n  const triggerOrder = React.useRef<string[]>([]);\n\n  // Item info registry for mobile drawer\n  const itemInfoMap = React.useRef<Map<string, NavigationMenuItemInfo>>(new Map());\n\n  // Viewport sizing\n  const [viewportSize, setViewportSize] = React.useState({ width: 0, height: 0 });\n  const viewportRef = React.useRef<HTMLDivElement>(null);\n\n  // Track previous value for animation direction\n  const previousValue = React.useRef(value);\n\n  // Mobile state\n  const [mobileOpen, setMobileOpen] = React.useState(false);\n  const [mobileContentChildren, setMobileContentChildren] = React.useState<React.ReactNode>(null);\n  const [mobileBrandChildren, setMobileBrandChildren] = React.useState<React.ReactNode>(null);\n\n  // Clean up timers on unmount\n  React.useEffect(() => {\n    return () => {\n      if (openTimerRef.current) clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);\n      if (skipDelayTimerRef.current) clearTimeout(skipDelayTimerRef.current);\n    };\n  }, []);\n\n  return {\n    value,\n    setValue,\n    delayDuration,\n    skipDelayDuration,\n    openTimerRef,\n    closeTimerRef,\n    isRecentlyOpenRef,\n    skipDelayTimerRef,\n    triggerRefs,\n    triggerOrder,\n    itemInfoMap,\n    viewportSize,\n    setViewportSize,\n    viewportRef,\n    previousValue,\n    mobileOpen,\n    setMobileOpen,\n    mobileContentChildren,\n    setMobileContentChildren,\n    mobileBrandChildren,\n    setMobileBrandChildren,\n  };\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaO,SAAS,kBAAkB;AAAA,EAChC,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA,gBAAgB;AAAA,EAChB,oBAAoB;AACtB,GAA6B;AAC3B,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,iBAAM,SAAS,YAAY;AAC7E,QAAM,eAAe,oBAAoB;AACzC,QAAM,QAAQ,eAAe,kBAAkB;AAE/C,QAAM,WAAWA,iBAAM;AAAA,IACrB,CAAC,aAAqB;AACpB,UAAI,CAAC,cAAc;AACjB,6BAAqB,QAAQ;AAAA,MAC/B;AACA,qDAAgB;AAAA,IAClB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAAA;AAI9B,QAAM,eAAeA,iBAAM,OAA6C,IAAI;AAC5E,QAAM,gBAAgBA,iBAAM,OAA6C,IAAI;AAG7E,QAAM,oBAAoBA,iBAAM,OAAO,KAAK;AAC5C,QAAM,oBAAoBA,iBAAM,OAA6C,IAAI;AAGjF,QAAM,cAAcA,iBAAM,OAAuC,oBAAI,KAAK;AAC1E,QAAM,eAAeA,iBAAM,OAAiB,EAAE;AAG9C,QAAM,cAAcA,iBAAM,OAA4C,oBAAI,KAAK;AAG/E,QAAM,CAAC,cAAc,eAAe,IAAIA,iBAAM,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG;AAC9E,QAAM,cAAcA,iBAAM,OAAuB,IAAI;AAGrD,QAAM,gBAAgBA,iBAAM,OAAO,KAAK;AAGxC,QAAM,CAAC,YAAY,aAAa,IAAIA,iBAAM,SAAS,KAAK;AACxD,QAAM,CAAC,uBAAuB,wBAAwB,IAAIA,iBAAM,SAA0B,IAAI;AAC9F,QAAM,CAAC,qBAAqB,sBAAsB,IAAIA,iBAAM,SAA0B,IAAI;AAG1FA,mBAAM,UAAU,MAAM;AACpB,WAAO,MAAM;AACX,UAAI,aAAa,QAAS,cAAa,aAAa,OAAO;AAC3D,UAAI,cAAc,QAAS,cAAa,cAAc,OAAO;AAC7D,UAAI,kBAAkB,QAAS,cAAa,kBAAkB,OAAO;AAAA,IACvE;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;;"}
+{"version":3,"file":"useNavigationMenu.cjs","sources":["../../../src/components/NavigationMenu/useNavigationMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { NavigationMenuItemInfo } from './NavigationMenuContext';\n\nexport interface UseNavigationMenuOptions {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  delayDuration?: number;\n  skipDelayDuration?: number;\n}\n\nexport function useNavigationMenu({\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  delayDuration = 200,\n  skipDelayDuration = 300,\n}: UseNavigationMenuOptions) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const setValue = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange]\n  );\n\n  // Hover delay timers\n  const openTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Skip-delay: when moving between triggers, open instantly\n  const isRecentlyOpenRef = React.useRef(false);\n  const skipDelayTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Trigger registry for keyboard nav\n  const triggerRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());\n  const triggerOrder = React.useRef<string[]>([]);\n\n  // Full item order registry (includes link-only items)\n  const itemOrder = React.useRef<string[]>([]);\n\n  // Item info registry for mobile drawer\n  const itemInfoMap = React.useRef<Map<string, NavigationMenuItemInfo>>(new Map());\n\n  // Viewport sizing\n  const [viewportSize, setViewportSize] = React.useState({ width: 0, height: 0 });\n  const viewportRef = React.useRef<HTMLDivElement>(null);\n\n  // Track previous value for animation direction\n  const previousValue = React.useRef(value);\n\n  // Mobile state\n  const [mobileOpen, setMobileOpen] = React.useState(false);\n  const [mobileContentChildren, setMobileContentChildren] = React.useState<React.ReactNode>(null);\n  const [mobileBrandChildren, setMobileBrandChildren] = React.useState<React.ReactNode>(null);\n\n  // Clean up timers on unmount\n  React.useEffect(() => {\n    return () => {\n      if (openTimerRef.current) clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);\n      if (skipDelayTimerRef.current) clearTimeout(skipDelayTimerRef.current);\n    };\n  }, []);\n\n  return {\n    value,\n    setValue,\n    delayDuration,\n    skipDelayDuration,\n    openTimerRef,\n    closeTimerRef,\n    isRecentlyOpenRef,\n    skipDelayTimerRef,\n    triggerRefs,\n    triggerOrder,\n    itemOrder,\n    itemInfoMap,\n    viewportSize,\n    setViewportSize,\n    viewportRef,\n    previousValue,\n    mobileOpen,\n    setMobileOpen,\n    mobileContentChildren,\n    setMobileContentChildren,\n    mobileBrandChildren,\n    setMobileBrandChildren,\n  };\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaO,SAAS,kBAAkB;AAAA,EAChC,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA,gBAAgB;AAAA,EAChB,oBAAoB;AACtB,GAA6B;AAC3B,QAAM,CAAC,mBAAmB,oBAAoB,IAAIA,iBAAM,SAAS,YAAY;AAC7E,QAAM,eAAe,oBAAoB;AACzC,QAAM,QAAQ,eAAe,kBAAkB;AAE/C,QAAM,WAAWA,iBAAM;AAAA,IACrB,CAAC,aAAqB;AACpB,UAAI,CAAC,cAAc;AACjB,6BAAqB,QAAQ;AAAA,MAC/B;AACA,qDAAgB;AAAA,IAClB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAAA;AAI9B,QAAM,eAAeA,iBAAM,OAA6C,IAAI;AAC5E,QAAM,gBAAgBA,iBAAM,OAA6C,IAAI;AAG7E,QAAM,oBAAoBA,iBAAM,OAAO,KAAK;AAC5C,QAAM,oBAAoBA,iBAAM,OAA6C,IAAI;AAGjF,QAAM,cAAcA,iBAAM,OAAuC,oBAAI,KAAK;AAC1E,QAAM,eAAeA,iBAAM,OAAiB,EAAE;AAG9C,QAAM,YAAYA,iBAAM,OAAiB,EAAE;AAG3C,QAAM,cAAcA,iBAAM,OAA4C,oBAAI,KAAK;AAG/E,QAAM,CAAC,cAAc,eAAe,IAAIA,iBAAM,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG;AAC9E,QAAM,cAAcA,iBAAM,OAAuB,IAAI;AAGrD,QAAM,gBAAgBA,iBAAM,OAAO,KAAK;AAGxC,QAAM,CAAC,YAAY,aAAa,IAAIA,iBAAM,SAAS,KAAK;AACxD,QAAM,CAAC,uBAAuB,wBAAwB,IAAIA,iBAAM,SAA0B,IAAI;AAC9F,QAAM,CAAC,qBAAqB,sBAAsB,IAAIA,iBAAM,SAA0B,IAAI;AAG1FA,mBAAM,UAAU,MAAM;AACpB,WAAO,MAAM;AACX,UAAI,aAAa,QAAS,cAAa,aAAa,OAAO;AAC3D,UAAI,cAAc,QAAS,cAAa,cAAc,OAAO;AAC7D,UAAI,kBAAkB,QAAS,cAAa,kBAAkB,OAAO;AAAA,IACvE;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;;"}

package/dist/components/NavigationMenu/useNavigationMenu.d.ts

@@ -18,6 +18,7 @@ export declare function useNavigationMenu({ value: controlledValue, defaultValue
     skipDelayTimerRef: React.RefObject<NodeJS.Timeout | null>;
     triggerRefs: React.RefObject<Map<string, HTMLButtonElement>>;
     triggerOrder: React.RefObject<string[]>;
+    itemOrder: React.RefObject<string[]>;
     itemInfoMap: React.RefObject<Map<string, NavigationMenuItemInfo>>;
     viewportSize: {
         width: number;

package/dist/components/NavigationMenu/useNavigationMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigationMenu.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationMenu/useNavigationMenu.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EAAE,eAAe,EACtB,YAAiB,EACjB,aAAa,EACb,aAAmB,EACnB,iBAAuB,GACxB,EAAE,wBAAwB;;yBAMZ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEpB"}
+{"version":3,"file":"useNavigationMenu.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationMenu/useNavigationMenu.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EAAE,eAAe,EACtB,YAAiB,EACjB,aAAa,EACb,aAAmB,EACnB,iBAAuB,GACxB,EAAE,wBAAwB;;yBAMZ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwEpB"}

package/dist/components/NavigationMenu/useNavigationMenu.js

@@ -24,6 +24,7 @@ function useNavigationMenu({
   const skipDelayTimerRef = React.useRef(null);
   const triggerRefs = React.useRef(/* @__PURE__ */ new Map());
   const triggerOrder = React.useRef([]);
+  const itemOrder = React.useRef([]);
   const itemInfoMap = React.useRef(/* @__PURE__ */ new Map());
   const [viewportSize, setViewportSize] = React.useState({ width: 0, height: 0 });
   const viewportRef = React.useRef(null);
@@ -49,6 +50,7 @@ function useNavigationMenu({
     skipDelayTimerRef,
     triggerRefs,
     triggerOrder,
+    itemOrder,
     itemInfoMap,
     viewportSize,
     setViewportSize,

package/dist/components/NavigationMenu/useNavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigationMenu.js","sources":["../../../src/components/NavigationMenu/useNavigationMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { NavigationMenuItemInfo } from './NavigationMenuContext';\n\nexport interface UseNavigationMenuOptions {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  delayDuration?: number;\n  skipDelayDuration?: number;\n}\n\nexport function useNavigationMenu({\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  delayDuration = 200,\n  skipDelayDuration = 300,\n}: UseNavigationMenuOptions) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const setValue = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange]\n  );\n\n  // Hover delay timers\n  const openTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Skip-delay: when moving between triggers, open instantly\n  const isRecentlyOpenRef = React.useRef(false);\n  const skipDelayTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Trigger registry for keyboard nav\n  const triggerRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());\n  const triggerOrder = React.useRef<string[]>([]);\n\n  // Item info registry for mobile drawer\n  const itemInfoMap = React.useRef<Map<string, NavigationMenuItemInfo>>(new Map());\n\n  // Viewport sizing\n  const [viewportSize, setViewportSize] = React.useState({ width: 0, height: 0 });\n  const viewportRef = React.useRef<HTMLDivElement>(null);\n\n  // Track previous value for animation direction\n  const previousValue = React.useRef(value);\n\n  // Mobile state\n  const [mobileOpen, setMobileOpen] = React.useState(false);\n  const [mobileContentChildren, setMobileContentChildren] = React.useState<React.ReactNode>(null);\n  const [mobileBrandChildren, setMobileBrandChildren] = React.useState<React.ReactNode>(null);\n\n  // Clean up timers on unmount\n  React.useEffect(() => {\n    return () => {\n      if (openTimerRef.current) clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);\n      if (skipDelayTimerRef.current) clearTimeout(skipDelayTimerRef.current);\n    };\n  }, []);\n\n  return {\n    value,\n    setValue,\n    delayDuration,\n    skipDelayDuration,\n    openTimerRef,\n    closeTimerRef,\n    isRecentlyOpenRef,\n    skipDelayTimerRef,\n    triggerRefs,\n    triggerOrder,\n    itemInfoMap,\n    viewportSize,\n    setViewportSize,\n    viewportRef,\n    previousValue,\n    mobileOpen,\n    setMobileOpen,\n    mobileContentChildren,\n    setMobileContentChildren,\n    mobileBrandChildren,\n    setMobileBrandChildren,\n  };\n}\n"],"names":[],"mappings":";AAaO,SAAS,kBAAkB;AAAA,EAChC,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA,gBAAgB;AAAA,EAChB,oBAAoB;AACtB,GAA6B;AAC3B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAS,YAAY;AAC7E,QAAM,eAAe,oBAAoB;AACzC,QAAM,QAAQ,eAAe,kBAAkB;AAE/C,QAAM,WAAW,MAAM;AAAA,IACrB,CAAC,aAAqB;AACpB,UAAI,CAAC,cAAc;AACjB,6BAAqB,QAAQ;AAAA,MAC/B;AACA,qDAAgB;AAAA,IAClB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAAA;AAI9B,QAAM,eAAe,MAAM,OAA6C,IAAI;AAC5E,QAAM,gBAAgB,MAAM,OAA6C,IAAI;AAG7E,QAAM,oBAAoB,MAAM,OAAO,KAAK;AAC5C,QAAM,oBAAoB,MAAM,OAA6C,IAAI;AAGjF,QAAM,cAAc,MAAM,OAAuC,oBAAI,KAAK;AAC1E,QAAM,eAAe,MAAM,OAAiB,EAAE;AAG9C,QAAM,cAAc,MAAM,OAA4C,oBAAI,KAAK;AAG/E,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG;AAC9E,QAAM,cAAc,MAAM,OAAuB,IAAI;AAGrD,QAAM,gBAAgB,MAAM,OAAO,KAAK;AAGxC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AACxD,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,MAAM,SAA0B,IAAI;AAC9F,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,MAAM,SAA0B,IAAI;AAG1F,QAAM,UAAU,MAAM;AACpB,WAAO,MAAM;AACX,UAAI,aAAa,QAAS,cAAa,aAAa,OAAO;AAC3D,UAAI,cAAc,QAAS,cAAa,cAAc,OAAO;AAC7D,UAAI,kBAAkB,QAAS,cAAa,kBAAkB,OAAO;AAAA,IACvE;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useNavigationMenu.js","sources":["../../../src/components/NavigationMenu/useNavigationMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { NavigationMenuItemInfo } from './NavigationMenuContext';\n\nexport interface UseNavigationMenuOptions {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  delayDuration?: number;\n  skipDelayDuration?: number;\n}\n\nexport function useNavigationMenu({\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  delayDuration = 200,\n  skipDelayDuration = 300,\n}: UseNavigationMenuOptions) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const setValue = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange]\n  );\n\n  // Hover delay timers\n  const openTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Skip-delay: when moving between triggers, open instantly\n  const isRecentlyOpenRef = React.useRef(false);\n  const skipDelayTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Trigger registry for keyboard nav\n  const triggerRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());\n  const triggerOrder = React.useRef<string[]>([]);\n\n  // Full item order registry (includes link-only items)\n  const itemOrder = React.useRef<string[]>([]);\n\n  // Item info registry for mobile drawer\n  const itemInfoMap = React.useRef<Map<string, NavigationMenuItemInfo>>(new Map());\n\n  // Viewport sizing\n  const [viewportSize, setViewportSize] = React.useState({ width: 0, height: 0 });\n  const viewportRef = React.useRef<HTMLDivElement>(null);\n\n  // Track previous value for animation direction\n  const previousValue = React.useRef(value);\n\n  // Mobile state\n  const [mobileOpen, setMobileOpen] = React.useState(false);\n  const [mobileContentChildren, setMobileContentChildren] = React.useState<React.ReactNode>(null);\n  const [mobileBrandChildren, setMobileBrandChildren] = React.useState<React.ReactNode>(null);\n\n  // Clean up timers on unmount\n  React.useEffect(() => {\n    return () => {\n      if (openTimerRef.current) clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);\n      if (skipDelayTimerRef.current) clearTimeout(skipDelayTimerRef.current);\n    };\n  }, []);\n\n  return {\n    value,\n    setValue,\n    delayDuration,\n    skipDelayDuration,\n    openTimerRef,\n    closeTimerRef,\n    isRecentlyOpenRef,\n    skipDelayTimerRef,\n    triggerRefs,\n    triggerOrder,\n    itemOrder,\n    itemInfoMap,\n    viewportSize,\n    setViewportSize,\n    viewportRef,\n    previousValue,\n    mobileOpen,\n    setMobileOpen,\n    mobileContentChildren,\n    setMobileContentChildren,\n    mobileBrandChildren,\n    setMobileBrandChildren,\n  };\n}\n"],"names":[],"mappings":";AAaO,SAAS,kBAAkB;AAAA,EAChC,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA,gBAAgB;AAAA,EAChB,oBAAoB;AACtB,GAA6B;AAC3B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAS,YAAY;AAC7E,QAAM,eAAe,oBAAoB;AACzC,QAAM,QAAQ,eAAe,kBAAkB;AAE/C,QAAM,WAAW,MAAM;AAAA,IACrB,CAAC,aAAqB;AACpB,UAAI,CAAC,cAAc;AACjB,6BAAqB,QAAQ;AAAA,MAC/B;AACA,qDAAgB;AAAA,IAClB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAAA;AAI9B,QAAM,eAAe,MAAM,OAA6C,IAAI;AAC5E,QAAM,gBAAgB,MAAM,OAA6C,IAAI;AAG7E,QAAM,oBAAoB,MAAM,OAAO,KAAK;AAC5C,QAAM,oBAAoB,MAAM,OAA6C,IAAI;AAGjF,QAAM,cAAc,MAAM,OAAuC,oBAAI,KAAK;AAC1E,QAAM,eAAe,MAAM,OAAiB,EAAE;AAG9C,QAAM,YAAY,MAAM,OAAiB,EAAE;AAG3C,QAAM,cAAc,MAAM,OAA4C,oBAAI,KAAK;AAG/E,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG;AAC9E,QAAM,cAAc,MAAM,OAAuB,IAAI;AAGrD,QAAM,gBAAgB,MAAM,OAAO,KAAK;AAGxC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AACxD,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,MAAM,SAA0B,IAAI;AAC9F,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,MAAM,SAA0B,IAAI;AAG1F,QAAM,UAAU,MAAM;AACpB,WAAO,MAAM;AACX,UAAI,aAAa,QAAS,cAAa,aAAa,OAAO;AAC3D,UAAI,cAAc,QAAS,cAAa,cAAc,OAAO;AAC7D,UAAI,kBAAkB,QAAS,cAAa,kBAAkB,OAAO;AAAA,IACvE;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/components/Popover/index.cjs

@@ -42,11 +42,11 @@ function PopoverRoot({
     }
   );
 }
-function PopoverTrigger({ children, asChild, className }) {
+function PopoverTrigger({ children, asChild, className, ...htmlProps }) {
   if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { className, render: children, children: null });
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { ...htmlProps, className, render: children, children: null });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { className, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { ...htmlProps, className, children });
 }
 function PopoverContent({
   children,
@@ -77,13 +77,13 @@ function PopoverContent({
     }
   ) });
 }
-function PopoverTitle({ children, className }) {
+function PopoverTitle({ children, className, ...htmlProps }) {
   const classes = [Popover_module.default.title, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Title, { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Title, { ...htmlProps, className: classes, children });
 }
-function PopoverDescription({ children, className }) {
+function PopoverDescription({ children, className, ...htmlProps }) {
   const classes = [Popover_module.default.description, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Description, { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Description, { ...htmlProps, className: classes, children });
 }
 function PopoverBody({ children, className, ...htmlProps }) {
   const classes = [Popover_module.default.body, className].filter(Boolean).join(" ");
@@ -93,11 +93,12 @@ function PopoverFooter({ children, className, ...htmlProps }) {
   const classes = [Popover_module.default.footer, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
 }
-function PopoverClose({ children, asChild, className }) {
+function PopoverClose({ children, asChild, className, ...htmlProps }) {
   if (!children) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       popover.Popover.Close,
       {
+        ...htmlProps,
         "aria-label": "Close popover",
         className: [Popover_module.default.close, className].filter(Boolean).join(" "),
         children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
@@ -105,9 +106,9 @@ function PopoverClose({ children, asChild, className }) {
     );
   }
   if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Close, { className, render: children, children: null });
+    return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Close, { ...htmlProps, className, render: children, children: null });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Close, { className, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Close, { ...htmlProps, className, children });
 }
 const Popover = Object.assign(PopoverRoot, {
   Trigger: PopoverTrigger,

package/dist/components/Popover/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport styles from './Popover.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface PopoverProps {\n  children: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n}\n\nexport interface PopoverTriggerProps {\n  children: React.ReactNode;\n  asChild?: boolean;\n  className?: string;\n}\n\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  align?: 'start' | 'center' | 'end';\n  sideOffset?: number;\n  arrow?: boolean;\n}\n\nexport interface PopoverTitleProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface PopoverDescriptionProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverCloseProps {\n  children?: React.ReactNode;\n  asChild?: boolean;\n  className?: string;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction PopoverRoot({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = false,\n}: PopoverProps) {\n  return (\n    <BasePopover.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      {children}\n    </BasePopover.Root>\n  );\n}\n\nfunction PopoverTrigger({ children, asChild, className }: PopoverTriggerProps) {\n  if (asChild) {\n    return (\n      <BasePopover.Trigger className={className} render={children as React.ReactElement}>\n        {null}\n      </BasePopover.Trigger>\n    );\n  }\n\n  return (\n    <BasePopover.Trigger className={className}>\n      {children}\n    </BasePopover.Trigger>\n  );\n}\n\nfunction PopoverContent({\n  children,\n  size = 'md',\n  side = 'bottom',\n  align = 'center',\n  sideOffset = 8,\n  arrow = false,\n  className,\n  ...htmlProps\n}: PopoverContentProps) {\n  const popupClasses = [\n    styles.popup,\n    size !== 'md' && styles[size],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <BasePopover.Portal>\n      <BasePopover.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className={styles.positioner}\n      >\n        <BasePopover.Popup {...htmlProps} className={popupClasses}>\n          {children}\n          {arrow && <BasePopover.Arrow className={styles.arrow} />}\n        </BasePopover.Popup>\n      </BasePopover.Positioner>\n    </BasePopover.Portal>\n  );\n}\n\nfunction PopoverTitle({ children, className }: PopoverTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <BasePopover.Title className={classes}>{children}</BasePopover.Title>;\n}\n\nfunction PopoverDescription({ children, className }: PopoverDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return (\n    <BasePopover.Description className={classes}>\n      {children}\n    </BasePopover.Description>\n  );\n}\n\nfunction PopoverBody({ children, className, ...htmlProps }: PopoverBodyProps) {\n  const classes = [styles.body, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverFooter({ children, className, ...htmlProps }: PopoverFooterProps) {\n  const classes = [styles.footer, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverClose({ children, asChild, className }: PopoverCloseProps) {\n  // Default close button (X icon)\n  if (!children) {\n    return (\n      <BasePopover.Close\n        aria-label=\"Close popover\"\n        className={[styles.close, className].filter(Boolean).join(' ')}\n      >\n        <CloseIcon />\n      </BasePopover.Close>\n    );\n  }\n\n  if (asChild) {\n    return (\n      <BasePopover.Close className={className} render={children as React.ReactElement}>\n        {null}\n      </BasePopover.Close>\n    );\n  }\n\n  return (\n    <BasePopover.Close className={className}>\n      {children}\n    </BasePopover.Close>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Body: PopoverBody,\n  Footer: PopoverFooter,\n  Close: PopoverClose,\n});\n\n// Re-export individual components\nexport {\n  PopoverRoot,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverBody,\n  PopoverFooter,\n  PopoverClose,\n};\n"],"names":["jsxs","jsx","BasePopover","styles"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport styles from './Popover.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Popover for floating content attached to a trigger element.\n * @see https://usefragments.com/components/popover\n */\nexport interface PopoverProps {\n  children: React.ReactNode;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the popover blocks interaction with the rest of the page.\n   * @default false */\n  modal?: boolean;\n}\n\nexport interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  align?: 'start' | 'center' | 'end';\n  sideOffset?: number;\n  arrow?: boolean;\n}\n\nexport interface PopoverTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  asChild?: boolean;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction PopoverRoot({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = false,\n}: PopoverProps) {\n  return (\n    <BasePopover.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      {children}\n    </BasePopover.Root>\n  );\n}\n\nfunction PopoverTrigger({ children, asChild, className, ...htmlProps }: PopoverTriggerProps) {\n  if (asChild) {\n    return (\n      <BasePopover.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>\n        {null}\n      </BasePopover.Trigger>\n    );\n  }\n\n  return (\n    <BasePopover.Trigger {...htmlProps} className={className}>\n      {children}\n    </BasePopover.Trigger>\n  );\n}\n\nfunction PopoverContent({\n  children,\n  size = 'md',\n  side = 'bottom',\n  align = 'center',\n  sideOffset = 8,\n  arrow = false,\n  className,\n  ...htmlProps\n}: PopoverContentProps) {\n  const popupClasses = [\n    styles.popup,\n    size !== 'md' && styles[size],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <BasePopover.Portal>\n      <BasePopover.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className={styles.positioner}\n      >\n        <BasePopover.Popup {...htmlProps} className={popupClasses}>\n          {children}\n          {arrow && <BasePopover.Arrow className={styles.arrow} />}\n        </BasePopover.Popup>\n      </BasePopover.Positioner>\n    </BasePopover.Portal>\n  );\n}\n\nfunction PopoverTitle({ children, className, ...htmlProps }: PopoverTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <BasePopover.Title {...htmlProps} className={classes}>{children}</BasePopover.Title>;\n}\n\nfunction PopoverDescription({ children, className, ...htmlProps }: PopoverDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return (\n    <BasePopover.Description {...htmlProps} className={classes}>\n      {children}\n    </BasePopover.Description>\n  );\n}\n\nfunction PopoverBody({ children, className, ...htmlProps }: PopoverBodyProps) {\n  const classes = [styles.body, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverFooter({ children, className, ...htmlProps }: PopoverFooterProps) {\n  const classes = [styles.footer, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverClose({ children, asChild, className, ...htmlProps }: PopoverCloseProps) {\n  // Default close button (X icon)\n  if (!children) {\n    return (\n      <BasePopover.Close\n        {...htmlProps}\n        aria-label=\"Close popover\"\n        className={[styles.close, className].filter(Boolean).join(' ')}\n      >\n        <CloseIcon />\n      </BasePopover.Close>\n    );\n  }\n\n  if (asChild) {\n    return (\n      <BasePopover.Close {...htmlProps} className={className} render={children as React.ReactElement}>\n        {null}\n      </BasePopover.Close>\n    );\n  }\n\n  return (\n    <BasePopover.Close {...htmlProps} className={className}>\n      {children}\n    </BasePopover.Close>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Body: PopoverBody,\n  Footer: PopoverFooter,\n  Close: PopoverClose,\n});\n\n// Re-export individual components\nexport {\n  PopoverRoot,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverBody,\n  PopoverFooter,\n  PopoverClose,\n};\n"],"names":["jsxs","jsx","BasePopover","styles"],"mappings":"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"}

package/dist/components/Popover/index.d.ts

@@ -1,15 +1,23 @@
 import * as React from 'react';
+/**
+ * Popover for floating content attached to a trigger element.
+ * @see https://usefragments.com/components/popover
+ */
 export interface PopoverProps {
     children: React.ReactNode;
+    /** Controlled open state */
     open?: boolean;
+    /** Default open state */
     defaultOpen?: boolean;
+    /** Called when open state changes */
     onOpenChange?: (open: boolean) => void;
+    /** Whether the popover blocks interaction with the rest of the page.
+     * @default false */
     modal?: boolean;
 }
-export interface PopoverTriggerProps {
+export interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
     asChild?: boolean;
-    className?: string;
 }
 export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -19,13 +27,11 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
     sideOffset?: number;
     arrow?: boolean;
 }
-export interface PopoverTitleProps {
+export interface PopoverTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     children: React.ReactNode;
-    className?: string;
 }
-export interface PopoverDescriptionProps {
+export interface PopoverDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
     children: React.ReactNode;
-    className?: string;
 }
 export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -33,19 +39,18 @@ export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
-export interface PopoverCloseProps {
+export interface PopoverCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children?: React.ReactNode;
     asChild?: boolean;
-    className?: string;
 }
 declare function PopoverRoot({ children, open, defaultOpen, onOpenChange, modal, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
-declare function PopoverTrigger({ children, asChild, className }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ children, asChild, className, ...htmlProps }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare function PopoverContent({ children, size, side, align, sideOffset, arrow, className, ...htmlProps }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
-declare function PopoverTitle({ children, className }: PopoverTitleProps): import("react/jsx-runtime").JSX.Element;
-declare function PopoverDescription({ children, className }: PopoverDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTitle({ children, className, ...htmlProps }: PopoverTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverDescription({ children, className, ...htmlProps }: PopoverDescriptionProps): import("react/jsx-runtime").JSX.Element;
 declare function PopoverBody({ children, className, ...htmlProps }: PopoverBodyProps): import("react/jsx-runtime").JSX.Element;
 declare function PopoverFooter({ children, className, ...htmlProps }: PopoverFooterProps): import("react/jsx-runtime").JSX.Element;
-declare function PopoverClose({ children, asChild, className }: PopoverCloseProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverClose({ children, asChild, className, ...htmlProps }: PopoverCloseProps): import("react/jsx-runtime").JSX.Element;
 export declare const Popover: typeof PopoverRoot & {
     Trigger: typeof PopoverTrigger;
     Content: typeof PopoverContent;

package/dist/components/Popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Popover/index.js

@@ -40,11 +40,11 @@ function PopoverRoot({
     }
   );
 }
-function PopoverTrigger({ children, asChild, className }) {
+function PopoverTrigger({ children, asChild, className, ...htmlProps }) {
   if (asChild) {
-    return /* @__PURE__ */ jsx(Popover$1.Trigger, { className, render: children, children: null });
+    return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...htmlProps, className, render: children, children: null });
   }
-  return /* @__PURE__ */ jsx(Popover$1.Trigger, { className, children });
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...htmlProps, className, children });
 }
 function PopoverContent({
   children,
@@ -75,13 +75,13 @@ function PopoverContent({
     }
   ) });
 }
-function PopoverTitle({ children, className }) {
+function PopoverTitle({ children, className, ...htmlProps }) {
   const classes = [styles.title, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(Popover$1.Title, { className: classes, children });
+  return /* @__PURE__ */ jsx(Popover$1.Title, { ...htmlProps, className: classes, children });
 }
-function PopoverDescription({ children, className }) {
+function PopoverDescription({ children, className, ...htmlProps }) {
   const classes = [styles.description, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(Popover$1.Description, { className: classes, children });
+  return /* @__PURE__ */ jsx(Popover$1.Description, { ...htmlProps, className: classes, children });
 }
 function PopoverBody({ children, className, ...htmlProps }) {
   const classes = [styles.body, className].filter(Boolean).join(" ");
@@ -91,11 +91,12 @@ function PopoverFooter({ children, className, ...htmlProps }) {
   const classes = [styles.footer, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
 }
-function PopoverClose({ children, asChild, className }) {
+function PopoverClose({ children, asChild, className, ...htmlProps }) {
   if (!children) {
     return /* @__PURE__ */ jsx(
       Popover$1.Close,
       {
+        ...htmlProps,
         "aria-label": "Close popover",
         className: [styles.close, className].filter(Boolean).join(" "),
         children: /* @__PURE__ */ jsx(CloseIcon, {})
@@ -103,9 +104,9 @@ function PopoverClose({ children, asChild, className }) {
     );
   }
   if (asChild) {
-    return /* @__PURE__ */ jsx(Popover$1.Close, { className, render: children, children: null });
+    return /* @__PURE__ */ jsx(Popover$1.Close, { ...htmlProps, className, render: children, children: null });
   }
-  return /* @__PURE__ */ jsx(Popover$1.Close, { className, children });
+  return /* @__PURE__ */ jsx(Popover$1.Close, { ...htmlProps, className, children });
 }
 const Popover = Object.assign(PopoverRoot, {
   Trigger: PopoverTrigger,

package/dist/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport styles from './Popover.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface PopoverProps {\n  children: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n}\n\nexport interface PopoverTriggerProps {\n  children: React.ReactNode;\n  asChild?: boolean;\n  className?: string;\n}\n\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  align?: 'start' | 'center' | 'end';\n  sideOffset?: number;\n  arrow?: boolean;\n}\n\nexport interface PopoverTitleProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface PopoverDescriptionProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverCloseProps {\n  children?: React.ReactNode;\n  asChild?: boolean;\n  className?: string;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction PopoverRoot({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = false,\n}: PopoverProps) {\n  return (\n    <BasePopover.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      {children}\n    </BasePopover.Root>\n  );\n}\n\nfunction PopoverTrigger({ children, asChild, className }: PopoverTriggerProps) {\n  if (asChild) {\n    return (\n      <BasePopover.Trigger className={className} render={children as React.ReactElement}>\n        {null}\n      </BasePopover.Trigger>\n    );\n  }\n\n  return (\n    <BasePopover.Trigger className={className}>\n      {children}\n    </BasePopover.Trigger>\n  );\n}\n\nfunction PopoverContent({\n  children,\n  size = 'md',\n  side = 'bottom',\n  align = 'center',\n  sideOffset = 8,\n  arrow = false,\n  className,\n  ...htmlProps\n}: PopoverContentProps) {\n  const popupClasses = [\n    styles.popup,\n    size !== 'md' && styles[size],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <BasePopover.Portal>\n      <BasePopover.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className={styles.positioner}\n      >\n        <BasePopover.Popup {...htmlProps} className={popupClasses}>\n          {children}\n          {arrow && <BasePopover.Arrow className={styles.arrow} />}\n        </BasePopover.Popup>\n      </BasePopover.Positioner>\n    </BasePopover.Portal>\n  );\n}\n\nfunction PopoverTitle({ children, className }: PopoverTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <BasePopover.Title className={classes}>{children}</BasePopover.Title>;\n}\n\nfunction PopoverDescription({ children, className }: PopoverDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return (\n    <BasePopover.Description className={classes}>\n      {children}\n    </BasePopover.Description>\n  );\n}\n\nfunction PopoverBody({ children, className, ...htmlProps }: PopoverBodyProps) {\n  const classes = [styles.body, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverFooter({ children, className, ...htmlProps }: PopoverFooterProps) {\n  const classes = [styles.footer, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverClose({ children, asChild, className }: PopoverCloseProps) {\n  // Default close button (X icon)\n  if (!children) {\n    return (\n      <BasePopover.Close\n        aria-label=\"Close popover\"\n        className={[styles.close, className].filter(Boolean).join(' ')}\n      >\n        <CloseIcon />\n      </BasePopover.Close>\n    );\n  }\n\n  if (asChild) {\n    return (\n      <BasePopover.Close className={className} render={children as React.ReactElement}>\n        {null}\n      </BasePopover.Close>\n    );\n  }\n\n  return (\n    <BasePopover.Close className={className}>\n      {children}\n    </BasePopover.Close>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Body: PopoverBody,\n  Footer: PopoverFooter,\n  Close: PopoverClose,\n});\n\n// Re-export individual components\nexport {\n  PopoverRoot,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverBody,\n  PopoverFooter,\n  PopoverClose,\n};\n"],"names":["BasePopover"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport styles from './Popover.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Popover for floating content attached to a trigger element.\n * @see https://usefragments.com/components/popover\n */\nexport interface PopoverProps {\n  children: React.ReactNode;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the popover blocks interaction with the rest of the page.\n   * @default false */\n  modal?: boolean;\n}\n\nexport interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  align?: 'start' | 'center' | 'end';\n  sideOffset?: number;\n  arrow?: boolean;\n}\n\nexport interface PopoverTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface PopoverCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  asChild?: boolean;\n}\n\n// ============================================\n// Icons\n// ============================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction PopoverRoot({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = false,\n}: PopoverProps) {\n  return (\n    <BasePopover.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      {children}\n    </BasePopover.Root>\n  );\n}\n\nfunction PopoverTrigger({ children, asChild, className, ...htmlProps }: PopoverTriggerProps) {\n  if (asChild) {\n    return (\n      <BasePopover.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>\n        {null}\n      </BasePopover.Trigger>\n    );\n  }\n\n  return (\n    <BasePopover.Trigger {...htmlProps} className={className}>\n      {children}\n    </BasePopover.Trigger>\n  );\n}\n\nfunction PopoverContent({\n  children,\n  size = 'md',\n  side = 'bottom',\n  align = 'center',\n  sideOffset = 8,\n  arrow = false,\n  className,\n  ...htmlProps\n}: PopoverContentProps) {\n  const popupClasses = [\n    styles.popup,\n    size !== 'md' && styles[size],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <BasePopover.Portal>\n      <BasePopover.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className={styles.positioner}\n      >\n        <BasePopover.Popup {...htmlProps} className={popupClasses}>\n          {children}\n          {arrow && <BasePopover.Arrow className={styles.arrow} />}\n        </BasePopover.Popup>\n      </BasePopover.Positioner>\n    </BasePopover.Portal>\n  );\n}\n\nfunction PopoverTitle({ children, className, ...htmlProps }: PopoverTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <BasePopover.Title {...htmlProps} className={classes}>{children}</BasePopover.Title>;\n}\n\nfunction PopoverDescription({ children, className, ...htmlProps }: PopoverDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return (\n    <BasePopover.Description {...htmlProps} className={classes}>\n      {children}\n    </BasePopover.Description>\n  );\n}\n\nfunction PopoverBody({ children, className, ...htmlProps }: PopoverBodyProps) {\n  const classes = [styles.body, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverFooter({ children, className, ...htmlProps }: PopoverFooterProps) {\n  const classes = [styles.footer, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction PopoverClose({ children, asChild, className, ...htmlProps }: PopoverCloseProps) {\n  // Default close button (X icon)\n  if (!children) {\n    return (\n      <BasePopover.Close\n        {...htmlProps}\n        aria-label=\"Close popover\"\n        className={[styles.close, className].filter(Boolean).join(' ')}\n      >\n        <CloseIcon />\n      </BasePopover.Close>\n    );\n  }\n\n  if (asChild) {\n    return (\n      <BasePopover.Close {...htmlProps} className={className} render={children as React.ReactElement}>\n        {null}\n      </BasePopover.Close>\n    );\n  }\n\n  return (\n    <BasePopover.Close {...htmlProps} className={className}>\n      {children}\n    </BasePopover.Close>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Popover = Object.assign(PopoverRoot, {\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Body: PopoverBody,\n  Footer: PopoverFooter,\n  Close: PopoverClose,\n});\n\n// Re-export individual components\nexport {\n  PopoverRoot,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverBody,\n  PopoverFooter,\n  PopoverClose,\n};\n"],"names":["BasePopover"],"mappings":"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"}

package/dist/components/RadioGroup/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/RadioGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport styles from './RadioGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n  /** Orientation of the radio group */\n  orientation?: 'horizontal' | 'vertical';\n  /** Whether the group is disabled */\n  disabled?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Label for the group */\n  label?: string;\n  /** Error message */\n  error?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Children (Radio.Item components) */\n  children: React.ReactNode;\n}\n\nexport interface RadioItemProps {\n  /** The value for this radio item */\n  value: string;\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Accessible name for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Context for size\n// ============================================\n\nconst RadioSizeContext = React.createContext<'sm' | 'md' | 'lg'>('md');\n\n// ============================================\n// Radio Item Component\n// ============================================\n\nfunction RadioItem({\n  value,\n  label,\n  description,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  className,\n}: RadioItemProps) {\n  const size = React.useContext(RadioSizeContext);\n  const id = React.useId();\n  const labelId = label ? `radio-label-${id}` : undefined;\n  const descriptionId = description ? `radio-desc-${id}` : undefined;\n\n  const radioClasses = [\n    styles.radio,\n    size === 'sm' && styles.radioSm,\n    size === 'lg' && styles.radioLg,\n  ].filter(Boolean).join(' ');\n\n  const labelClasses = [\n    styles.label,\n    size === 'sm' && styles.labelSm,\n    size === 'lg' && styles.labelLg,\n  ].filter(Boolean).join(' ');\n\n  const wrapperClasses = [styles.itemWrapper, className].filter(Boolean).join(' ');\n\n  // If no label/description, render just the radio\n  if (!label && !description) {\n    return (\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        className={[radioClasses, className].filter(Boolean).join(' ')}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n    );\n  }\n\n  return (\n    <label\n      className={wrapperClasses}\n      data-disabled={disabled || undefined}\n      data-has-description={description ? true : undefined}\n    >\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n        aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n        className={radioClasses}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n      <div className={styles.content}>\n        <span id={labelId} className={labelClasses}>{label}</span>\n        {description && (\n          <span id={descriptionId} className={styles.description}>{description}</span>\n        )}\n      </div>\n    </label>\n  );\n}\n\n// ============================================\n// Radio Group Component\n// ============================================\n\nfunction RadioGroupRoot({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  label,\n  error,\n  size = 'md',\n  children,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...htmlProps\n}: RadioGroupProps) {\n  const groupId = React.useId();\n  const labelId = label ? `radio-group-label-${groupId}` : undefined;\n  const errorId = error ? `radio-group-error-${groupId}` : undefined;\n\n  const groupClasses = [\n    styles.group,\n    styles[orientation],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <RadioSizeContext.Provider value={size}>\n      <div {...htmlProps} className={styles.wrapper}>\n        {label && <span id={labelId} className={styles.groupLabel}>{label}</span>}\n        <BaseRadioGroup\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, errorId)}\n          className={groupClasses}\n        >\n          {children}\n        </BaseRadioGroup>\n        {error && <span id={errorId} className={styles.error}>{error}</span>}\n      </div>\n    </RadioSizeContext.Provider>\n  );\n}\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const RadioGroup = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport type { RadioGroupProps as RadioGroupRootProps };\n"],"names":["React","styles","jsx","BaseRadio.Root","BaseRadio.Indicator","jsxs","BaseRadioGroup"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/RadioGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport styles from './RadioGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Radio group for selecting one option from a set.\n * @see https://usefragments.com/components/radiogroup\n */\nexport interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n  /** Orientation of the radio group */\n  orientation?: 'horizontal' | 'vertical';\n  /** Whether the group is disabled */\n  disabled?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Label for the group */\n  label?: string;\n  /** Error message */\n  error?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Children (Radio.Item components) */\n  children: React.ReactNode;\n}\n\nexport interface RadioItemProps {\n  /** The value for this radio item */\n  value: string;\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Accessible name for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Context for size\n// ============================================\n\nconst RadioSizeContext = React.createContext<'sm' | 'md' | 'lg'>('md');\n\n// ============================================\n// Radio Item Component\n// ============================================\n\nfunction RadioItem({\n  value,\n  label,\n  description,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  className,\n}: RadioItemProps) {\n  const size = React.useContext(RadioSizeContext);\n  const id = React.useId();\n  const labelId = label ? `radio-label-${id}` : undefined;\n  const descriptionId = description ? `radio-desc-${id}` : undefined;\n\n  const radioClasses = [\n    styles.radio,\n    size === 'sm' && styles.radioSm,\n    size === 'lg' && styles.radioLg,\n  ].filter(Boolean).join(' ');\n\n  const labelClasses = [\n    styles.label,\n    size === 'sm' && styles.labelSm,\n    size === 'lg' && styles.labelLg,\n  ].filter(Boolean).join(' ');\n\n  const wrapperClasses = [styles.itemWrapper, className].filter(Boolean).join(' ');\n\n  // If no label/description, render just the radio\n  if (!label && !description) {\n    return (\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        className={[radioClasses, className].filter(Boolean).join(' ')}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n    );\n  }\n\n  return (\n    <label\n      className={wrapperClasses}\n      data-disabled={disabled || undefined}\n      data-has-description={description ? true : undefined}\n    >\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n        aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n        className={radioClasses}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n      <div className={styles.content}>\n        <span id={labelId} className={labelClasses}>{label}</span>\n        {description && (\n          <span id={descriptionId} className={styles.description}>{description}</span>\n        )}\n      </div>\n    </label>\n  );\n}\n\n// ============================================\n// Radio Group Component\n// ============================================\n\nfunction RadioGroupRoot({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  label,\n  error,\n  size = 'md',\n  children,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...htmlProps\n}: RadioGroupProps) {\n  const groupId = React.useId();\n  const labelId = label ? `radio-group-label-${groupId}` : undefined;\n  const errorId = error ? `radio-group-error-${groupId}` : undefined;\n\n  const groupClasses = [\n    styles.group,\n    styles[orientation],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <RadioSizeContext.Provider value={size}>\n      <div {...htmlProps} className={styles.wrapper}>\n        {label && <span id={labelId} className={styles.groupLabel}>{label}</span>}\n        <BaseRadioGroup\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, errorId)}\n          className={groupClasses}\n        >\n          {children}\n        </BaseRadioGroup>\n        {error && <span id={errorId} className={styles.error}>{error}</span>}\n      </div>\n    </RadioSizeContext.Provider>\n  );\n}\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const RadioGroup = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport type { RadioGroupProps as RadioGroupRootProps };\n"],"names":["React","styles","jsx","BaseRadio.Root","BaseRadio.Indicator","jsxs","BaseRadioGroup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAS,gBAAgB,KAAoD;AAC3E,QAAM,SAAS,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,EAAE,KAAA;AAC7C,SAAO,OAAO,SAAS,IAAI,SAAS;AACtC;AAMA,MAAM,mBAAmBA,iBAAM,cAAkC,IAAI;AAMrE,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB;AACF,GAAmB;AACjB,QAAM,OAAOA,iBAAM,WAAW,gBAAgB;AAC9C,QAAM,KAAKA,iBAAM,MAAA;AACjB,QAAM,UAAU,QAAQ,eAAe,EAAE,KAAK;AAC9C,QAAM,gBAAgB,cAAc,cAAc,EAAE,KAAK;AAEzD,QAAM,eAAe;AAAA,IACnBC,kBAAAA,QAAO;AAAA,IACP,SAAS,QAAQA,kBAAAA,QAAO;AAAA,IACxB,SAAS,QAAQA,0BAAO;AAAA,EAAA,EACxB,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,eAAe;AAAA,IACnBA,kBAAAA,QAAO;AAAA,IACP,SAAS,QAAQA,kBAAAA,QAAO;AAAA,IACxB,SAAS,QAAQA,0BAAO;AAAA,EAAA,EACxB,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,iBAAiB,CAACA,kBAAAA,QAAO,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAG/E,MAAI,CAAC,SAAS,CAAC,aAAa;AAC1B,WACEC,2BAAAA;AAAAA,MAACC,UAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAE7D,yCAACC,eAAAA,gBAAA,EAAoB,WAAWH,kBAAAA,QAAO,UAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxD;AAEA,SACEI,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,iBAAe,YAAY;AAAA,MAC3B,wBAAsB,cAAc,OAAO;AAAA,MAE3C,UAAA;AAAA,QAAAH,2BAAAA;AAAAA,UAACC,UAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,mBAAiB,aAAa,gBAAgB,OAAO;AAAA,YACrD,oBAAkB,aAAa,iBAAiB,aAAa;AAAA,YAC7D,WAAW;AAAA,YAEX,yCAACC,eAAAA,gBAAA,EAAoB,WAAWH,kBAAAA,QAAO,UAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpDI,2BAAAA,KAAC,OAAA,EAAI,WAAWJ,kBAAAA,QAAO,SACrB,UAAA;AAAA,UAAAC,+BAAC,QAAA,EAAK,IAAI,SAAS,WAAW,cAAe,UAAA,OAAM;AAAA,UAClD,8CACE,QAAA,EAAK,IAAI,eAAe,WAAWD,0BAAO,aAAc,UAAA,YAAA,CAAY;AAAA,QAAA,EAAA,CAEzE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAMA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,GAAG;AACL,GAAoB;AAClB,QAAM,UAAUD,iBAAM,MAAA;AACtB,QAAM,UAAU,QAAQ,qBAAqB,OAAO,KAAK;AACzD,QAAM,UAAU,QAAQ,qBAAqB,OAAO,KAAK;AAEzD,QAAM,eAAe;AAAA,IACnBC,kBAAAA,QAAO;AAAA,IACPA,kBAAAA,QAAO,WAAW;AAAA,IAClB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACEC,2BAAAA,IAAC,iBAAiB,UAAjB,EAA0B,OAAO,MAChC,UAAAG,2BAAAA,KAAC,OAAA,EAAK,GAAG,WAAW,WAAWJ,kBAAAA,QAAO,SACnC,UAAA;AAAA,IAAA,wCAAU,QAAA,EAAK,IAAI,SAAS,WAAWA,0BAAO,YAAa,UAAA,MAAA,CAAM;AAAA,IAClEC,2BAAAA;AAAAA,MAACI,WAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB,aAAa,gBAAgB,OAAO;AAAA,QACrD,oBAAkB,aAAa,iBAAiB,OAAO;AAAA,QACvD,WAAW;AAAA,QAEV;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,wCAAU,QAAA,EAAK,IAAI,SAAS,WAAWL,0BAAO,OAAQ,UAAA,MAAA,CAAM;AAAA,EAAA,EAAA,CAC/D,EAAA,CACF;AAEJ;AAMO,MAAM,aAAa,OAAO,OAAO,gBAAgB;AAAA,EACtD,MAAM;AACR,CAAC;;"}

package/dist/components/RadioGroup/index.d.ts

@@ -1,4 +1,8 @@
 import * as React from 'react';
+/**
+ * Radio group for selecting one option from a set.
+ * @see https://usefragments.com/components/radiogroup
+ */
 export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
     /** Current value (controlled) */
     value?: string;

package/dist/components/RadioGroup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC9G,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qCAAqC;IACrC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,SAAS,GACV,EAAE,cAAc,2CA4DhB;AAMD,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAwB,EACxB,QAAgB,EAChB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,SAAS,EACb,EAAE,eAAe,2CAgCjB;AAMD,eAAO,MAAM,UAAU;;CAErB,CAAC;AAEH,YAAY,EAAE,eAAe,IAAI,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC9G,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qCAAqC;IACrC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,SAAS,GACV,EAAE,cAAc,2CA4DhB;AAMD,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAwB,EACxB,QAAgB,EAChB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,SAAS,EACb,EAAE,eAAe,2CAgCjB;AAMD,eAAO,MAAM,UAAU;;CAErB,CAAC;AAEH,YAAY,EAAE,eAAe,IAAI,mBAAmB,EAAE,CAAC"}

package/dist/components/RadioGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/RadioGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport styles from './RadioGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n  /** Orientation of the radio group */\n  orientation?: 'horizontal' | 'vertical';\n  /** Whether the group is disabled */\n  disabled?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Label for the group */\n  label?: string;\n  /** Error message */\n  error?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Children (Radio.Item components) */\n  children: React.ReactNode;\n}\n\nexport interface RadioItemProps {\n  /** The value for this radio item */\n  value: string;\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Accessible name for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Context for size\n// ============================================\n\nconst RadioSizeContext = React.createContext<'sm' | 'md' | 'lg'>('md');\n\n// ============================================\n// Radio Item Component\n// ============================================\n\nfunction RadioItem({\n  value,\n  label,\n  description,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  className,\n}: RadioItemProps) {\n  const size = React.useContext(RadioSizeContext);\n  const id = React.useId();\n  const labelId = label ? `radio-label-${id}` : undefined;\n  const descriptionId = description ? `radio-desc-${id}` : undefined;\n\n  const radioClasses = [\n    styles.radio,\n    size === 'sm' && styles.radioSm,\n    size === 'lg' && styles.radioLg,\n  ].filter(Boolean).join(' ');\n\n  const labelClasses = [\n    styles.label,\n    size === 'sm' && styles.labelSm,\n    size === 'lg' && styles.labelLg,\n  ].filter(Boolean).join(' ');\n\n  const wrapperClasses = [styles.itemWrapper, className].filter(Boolean).join(' ');\n\n  // If no label/description, render just the radio\n  if (!label && !description) {\n    return (\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        className={[radioClasses, className].filter(Boolean).join(' ')}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n    );\n  }\n\n  return (\n    <label\n      className={wrapperClasses}\n      data-disabled={disabled || undefined}\n      data-has-description={description ? true : undefined}\n    >\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n        aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n        className={radioClasses}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n      <div className={styles.content}>\n        <span id={labelId} className={labelClasses}>{label}</span>\n        {description && (\n          <span id={descriptionId} className={styles.description}>{description}</span>\n        )}\n      </div>\n    </label>\n  );\n}\n\n// ============================================\n// Radio Group Component\n// ============================================\n\nfunction RadioGroupRoot({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  label,\n  error,\n  size = 'md',\n  children,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...htmlProps\n}: RadioGroupProps) {\n  const groupId = React.useId();\n  const labelId = label ? `radio-group-label-${groupId}` : undefined;\n  const errorId = error ? `radio-group-error-${groupId}` : undefined;\n\n  const groupClasses = [\n    styles.group,\n    styles[orientation],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <RadioSizeContext.Provider value={size}>\n      <div {...htmlProps} className={styles.wrapper}>\n        {label && <span id={labelId} className={styles.groupLabel}>{label}</span>}\n        <BaseRadioGroup\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, errorId)}\n          className={groupClasses}\n        >\n          {children}\n        </BaseRadioGroup>\n        {error && <span id={errorId} className={styles.error}>{error}</span>}\n      </div>\n    </RadioSizeContext.Provider>\n  );\n}\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const RadioGroup = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport type { RadioGroupProps as RadioGroupRootProps };\n"],"names":["BaseRadio.Root","BaseRadio.Indicator","BaseRadioGroup"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/RadioGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport styles from './RadioGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Radio group for selecting one option from a set.\n * @see https://usefragments.com/components/radiogroup\n */\nexport interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n  /** Orientation of the radio group */\n  orientation?: 'horizontal' | 'vertical';\n  /** Whether the group is disabled */\n  disabled?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Label for the group */\n  label?: string;\n  /** Error message */\n  error?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Children (Radio.Item components) */\n  children: React.ReactNode;\n}\n\nexport interface RadioItemProps {\n  /** The value for this radio item */\n  value: string;\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Accessible name for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Context for size\n// ============================================\n\nconst RadioSizeContext = React.createContext<'sm' | 'md' | 'lg'>('md');\n\n// ============================================\n// Radio Item Component\n// ============================================\n\nfunction RadioItem({\n  value,\n  label,\n  description,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  className,\n}: RadioItemProps) {\n  const size = React.useContext(RadioSizeContext);\n  const id = React.useId();\n  const labelId = label ? `radio-label-${id}` : undefined;\n  const descriptionId = description ? `radio-desc-${id}` : undefined;\n\n  const radioClasses = [\n    styles.radio,\n    size === 'sm' && styles.radioSm,\n    size === 'lg' && styles.radioLg,\n  ].filter(Boolean).join(' ');\n\n  const labelClasses = [\n    styles.label,\n    size === 'sm' && styles.labelSm,\n    size === 'lg' && styles.labelLg,\n  ].filter(Boolean).join(' ');\n\n  const wrapperClasses = [styles.itemWrapper, className].filter(Boolean).join(' ');\n\n  // If no label/description, render just the radio\n  if (!label && !description) {\n    return (\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        className={[radioClasses, className].filter(Boolean).join(' ')}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n    );\n  }\n\n  return (\n    <label\n      className={wrapperClasses}\n      data-disabled={disabled || undefined}\n      data-has-description={description ? true : undefined}\n    >\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n        aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n        className={radioClasses}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n      <div className={styles.content}>\n        <span id={labelId} className={labelClasses}>{label}</span>\n        {description && (\n          <span id={descriptionId} className={styles.description}>{description}</span>\n        )}\n      </div>\n    </label>\n  );\n}\n\n// ============================================\n// Radio Group Component\n// ============================================\n\nfunction RadioGroupRoot({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  label,\n  error,\n  size = 'md',\n  children,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...htmlProps\n}: RadioGroupProps) {\n  const groupId = React.useId();\n  const labelId = label ? `radio-group-label-${groupId}` : undefined;\n  const errorId = error ? `radio-group-error-${groupId}` : undefined;\n\n  const groupClasses = [\n    styles.group,\n    styles[orientation],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <RadioSizeContext.Provider value={size}>\n      <div {...htmlProps} className={styles.wrapper}>\n        {label && <span id={labelId} className={styles.groupLabel}>{label}</span>}\n        <BaseRadioGroup\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, errorId)}\n          className={groupClasses}\n        >\n          {children}\n        </BaseRadioGroup>\n        {error && <span id={errorId} className={styles.error}>{error}</span>}\n      </div>\n    </RadioSizeContext.Provider>\n  );\n}\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const RadioGroup = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport type { RadioGroupProps as RadioGroupRootProps };\n"],"names":["BaseRadio.Root","BaseRadio.Indicator","BaseRadioGroup"],"mappings":"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"}

package/dist/components/Select/index.cjs

@@ -156,7 +156,7 @@ function SelectContent({
     }
   ) });
 }
-function SelectItem({ children, value, disabled, className }) {
+function SelectItem({ children, value, disabled, className, ...htmlProps }) {
   const { itemsRef, incrementItemsVersion } = React__namespace.useContext(SelectContext);
   const classes = [Select_module.default.item, className].filter(Boolean).join(" ");
   React__namespace.useEffect(() => {
@@ -165,20 +165,21 @@ function SelectItem({ children, value, disabled, className }) {
     incrementItemsVersion();
     return () => {
       items.delete(value);
+      incrementItemsVersion();
     };
   }, [itemsRef, incrementItemsVersion, value, children]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(select.Select.Item, { value, disabled, className: classes, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(select.Select.Item, { ...htmlProps, value, disabled, className: classes, children: [
     /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { children }),
     /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemIndicator, { className: Select_module.default.itemIndicator, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
   ] });
 }
-function SelectGroup({ children, className }) {
+function SelectGroup({ children, className, ...htmlProps }) {
   const classes = [Select_module.default.group, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Group, { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Group, { ...htmlProps, className: classes, children });
 }
-function SelectGroupLabel({ children, className }) {
+function SelectGroupLabel({ children, className, ...htmlProps }) {
   const classes = [Select_module.default.groupLabel, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.GroupLabel, { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.GroupLabel, { ...htmlProps, className: classes, children });
 }
 const Select = Object.assign(SelectRoot, {
   Trigger: SelectTrigger,