@arolariu/components 1.0.0 → 2.0.0

package/dist/index.js

@@ -18,6 +18,7 @@ export { CheckboxGroup } from "./components/ui/checkbox-group.js";
 export { Area, AreaChart, Bar, BarChart, BarStack, Brush, CartesianGrid, Cell, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ComposedChart, Cross, Curve, Customized, DefaultZIndexes, Dot, ErrorBar, Funnel, FunnelChart, LabelList, Line, LineChart, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Polygon, Radar, RadarChart, RadialBar, RadialBarChart, RechartsLabel, Rectangle, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Sankey, Scatter, ScatterChart, Sector, SunburstChart, Symbols, Trapezoid, Treemap, XAxis, YAxis, ZAxis, ZIndexLayer, useActiveTooltipCoordinate, useActiveTooltipDataPoints, useActiveTooltipLabel, useChartHeight, useChartWidth, useIsTooltipActive, useMargin, useOffset, usePlotArea, useXAxisDomain, useYAxisDomain } from "./components/ui/chart.js";
 export { Checkbox } from "./components/ui/checkbox.js";
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible.js";
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxSeparator, ComboboxTrigger } from "./components/ui/combobox.js";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/ui/command.js";
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/ui/context-menu.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/dialog.js";
@@ -50,7 +51,7 @@ export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupActio
 export { Skeleton } from "./components/ui/skeleton.js";
 export { Spinner } from "./components/ui/spinner.js";
 export { Slider } from "./components/ui/slider.js";
-export { Toaster, toast } from "./components/ui/sonner.js";
+export { Toaster, toast } from "./components/ui/toast.js";
 export { Switch } from "./components/ui/switch.js";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/ui/table.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs.js";
@@ -64,12 +65,25 @@ export { Stepper } from "./components/ui/stepper.js";
 export { Timeline, TimelineContent, TimelineDot, TimelineItem } from "./components/ui/timeline.js";
 export { VisuallyHidden } from "./components/ui/visually-hidden.js";
 export { useBreakpoint } from "./hooks/useBreakpoint.js";
+export { useClipboard } from "./hooks/useClipboard.js";
 export { useColorScheme } from "./hooks/useColorScheme.js";
+export { useControllableState } from "./hooks/useControllableState.js";
+export { useDebounce } from "./hooks/useDebounce.js";
+export { useEventCallback } from "./hooks/useEventCallback.js";
 export { useFocusVisible } from "./hooks/useFocusVisible.js";
+export { useId } from "./hooks/useId.js";
+export { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
+export { useInterval } from "./hooks/useInterval.js";
 export { useIsMobile } from "./hooks/useIsMobile.js";
+export { useLocalStorage } from "./hooks/useLocalStorage.js";
 export { useMediaQuery } from "./hooks/useMediaQuery.js";
+export { useMergedRefs } from "./hooks/useMergedRefs.js";
+export { useOnClickOutside } from "./hooks/useOnClickOutside.js";
 export { usePrefersContrast } from "./hooks/usePrefersContrast.js";
+export { usePrevious } from "./hooks/usePrevious.js";
 export { useReducedMotion } from "./hooks/useReducedMotion.js";
+export { useThrottle } from "./hooks/useThrottle.js";
+export { useTimeout } from "./hooks/useTimeout.js";
 export { useWindowSize } from "./hooks/useWindowSize.js";
 export { adjustHexColorLightness, adjustLightness, calculateComplementaryHexColor, convertHexToHslString, convertHslToHexString, getComplementaryColor, hexToHsl, hslToHex, isValidHexColor, parseHslString, parseHslStringToComponents, validateHexColorFormat } from "./lib/color-conversion-utilities.js";
 export { cn } from "./lib/utilities.js";

package/dist/lib/utilities.d.ts

@@ -1,10 +1,9 @@
-import { type ClassValue } from "clsx";
+export type { ClassValue } from "clsx";
 /**
  * Helper function that merges CSS class names.
  * Uses clsx for conditional class name composition.
  * @param inputs Array of class names
  * @returns Merged class names string
  */
-export declare function cn(...inputs: ReadonlyArray<ClassValue>): string;
-export type { ClassValue };
+export declare function cn(...inputs: ReadonlyArray<import("clsx").ClassValue>): string;
 //# sourceMappingURL=utilities.d.ts.map

package/dist/lib/utilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../src/lib/utilities.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,UAAU,EAAC,MAAM,MAAM,CAAC;AAE3C;;;;;GAKG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,UAAU,CAAC,GAAG,MAAM,CAE/D;AAED,YAAY,EAAC,UAAU,EAAC,CAAC"}
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../src/lib/utilities.ts"],"names":[],"mappings":"AAEA,YAAY,EAAC,UAAU,EAAC,MAAM,MAAM,CAAC;AAErC;;;;;GAKG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,MAAM,EAAE,UAAU,CAAC,GAAG,MAAM,CAE9E"}

package/dist/lib/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"lib/utilities.js","sources":["../../src/lib/utilities.ts"],"sourcesContent":["import {clsx, type ClassValue} from \"clsx\";\r\n\r\n/**\r\n * Helper function that merges CSS class names.\r\n * Uses clsx for conditional class name composition.\r\n * @param inputs Array of class names\r\n * @returns Merged class names string\r\n */\r\nexport function cn(...inputs: ReadonlyArray<ClassValue>): string {\r\n  return clsx(inputs);\r\n}\r\n\r\nexport type {ClassValue};\r\n"],"names":["cn","inputs","clsx"],"mappings":";AAQO,SAASA,GAAG,GAAGC,MAAiC;IACrD,OAAOC,KAAKD;AACd"}
+{"version":3,"file":"lib/utilities.js","sources":["../../src/lib/utilities.ts"],"sourcesContent":["import {clsx} from \"clsx\";\r\n\r\nexport type {ClassValue} from \"clsx\";\r\n\r\n/**\r\n * Helper function that merges CSS class names.\r\n * Uses clsx for conditional class name composition.\r\n * @param inputs Array of class names\r\n * @returns Merged class names string\r\n */\r\nexport function cn(...inputs: ReadonlyArray<import(\"clsx\").ClassValue>): string {\r\n  return clsx(inputs);\r\n}\r\n"],"names":["cn","inputs","clsx"],"mappings":";AAUO,SAASA,GAAG,GAAGC,MAAgD;IACpE,OAAOC,KAAKD;AACd"}

package/dist/motion/Collapse.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../lib/utilities.js";
 import Collapse_module from "./Collapse.module.js";
-const Collapse = /*#__PURE__*/ forwardRef(({ open, children, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+import * as __rspack_external_react from "react";
+const Collapse = /*#__PURE__*/ __rspack_external_react.forwardRef(({ open, children, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
         ref: ref,
         "data-state": open ? "open" : "closed",
         className: cn(Collapse_module.collapse, className),

package/dist/motion/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"motion/Collapse.js","sources":["../../src/motion/Collapse.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./Collapse.module.css\";\r\n\r\n/**\r\n * Represents the configurable props for the {@link Collapse} component.\r\n *\r\n * @remarks\r\n * Extends native `<div>` attributes so consumers can provide ARIA metadata,\r\n * testing hooks, and custom classes while keeping the animated container typed.\r\n */\r\ninterface CollapseProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /**\r\n   * Whether the content is expanded.\r\n   */\r\n  open: boolean;\r\n  /**\r\n   * Content to show or hide with animation.\r\n   */\r\n  children: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Animated height collapse and expand using CSS grid-template-rows.\r\n *\r\n * @remarks\r\n * Supports reduced motion through a CSS `prefers-reduced-motion` media query and keeps\r\n * content mounted so assistive technologies and measurement logic remain stable.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Collapse open={isExpanded}>\r\n *   <p>Collapsible content</p>\r\n * </Collapse>\r\n * ```\r\n */\r\nconst Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(({open, children, className, ...props}, ref) => (\r\n  <div\r\n    ref={ref}\r\n    data-state={open ? \"open\" : \"closed\"}\r\n    className={cn(styles.collapse, className)}\r\n    {...props}>\r\n    <div className={styles.inner}>{children}</div>\r\n  </div>\r\n));\r\nCollapse.displayName = \"Collapse\";\r\n\r\nexport {Collapse};\r\nexport type {CollapseProps};\r\n"],"names":["Collapse","React","open","children","className","props","ref","cn","styles"],"mappings":";;;;;AAuCA,MAAMA,WAAW,WAAHA,GAAGC,WAAgD,CAAC,EAACC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACvG,IAAC;QACC,KAAKA;QACL,cAAYJ,OAAO,SAAS;QAC5B,WAAWK,GAAGC,gBAAAA,QAAe,EAAEJ;QAC9B,GAAGC,KAAK;kBACT,kBAAC;YAAI,WAAWG,gBAAAA,KAAY;sBAAGL;;;AAGnCH,SAAS,WAAW,GAAG"}
+{"version":3,"file":"motion/Collapse.js","sources":["../../src/motion/Collapse.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./Collapse.module.css\";\r\n\r\n/**\r\n * Represents the configurable props for the {@link Collapse} component.\r\n *\r\n * @remarks\r\n * Extends native `<div>` attributes so consumers can provide ARIA metadata,\r\n * testing hooks, and custom classes while keeping the animated container typed.\r\n */\r\ninterface CollapseProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /**\r\n   * Whether the content is expanded.\r\n   */\r\n  open: boolean;\r\n  /**\r\n   * Content to show or hide with animation.\r\n   */\r\n  children: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Animated height collapse and expand using CSS grid-template-rows.\r\n *\r\n * @remarks\r\n * Supports reduced motion through a CSS `prefers-reduced-motion` media query and keeps\r\n * content mounted so assistive technologies and measurement logic remain stable.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Collapse open={isExpanded}>\r\n *   <p>Collapsible content</p>\r\n * </Collapse>\r\n * ```\r\n */\r\nconst Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(({open, children, className, ...props}, ref) => (\r\n  <div\r\n    ref={ref}\r\n    data-state={open ? \"open\" : \"closed\"}\r\n    className={cn(styles.collapse, className)}\r\n    {...props}>\r\n    <div className={styles.inner}>{children}</div>\r\n  </div>\r\n));\r\nCollapse.displayName = \"Collapse\";\r\n\r\nexport {Collapse};\r\nexport type {CollapseProps};\r\n"],"names":["Collapse","React","open","children","className","props","ref","cn","styles"],"mappings":";;;;;AAuCA,MAAMA,WAAW,WAAHA,GAAGC,wBAAAA,UAAgB,CAAgC,CAAC,EAACC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACvG,IAAC;QACC,KAAKA;QACL,cAAYJ,OAAO,SAAS;QAC5B,WAAWK,GAAGC,gBAAAA,QAAe,EAAEJ;QAC9B,GAAGC,KAAK;kBACT,kBAAC;YAAI,WAAWG,gBAAAA,KAAY;sBAAGL;;;AAGnCH,SAAS,WAAW,GAAG"}

package/dist/motion/Collapse_module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/motion/Collapse.module.css","webpack://./src/motion/Collapse.module.css"],"names":[],"mappings":"AADA;ECEE,UAAU;EACV,8FAA8F;EAC9F,uBAAuB;EACvB,aAAa;EACb,gBAAgB;AAClB;;AAEA;EACE,UAAU;EACV,uBAAuB;AACzB;;AAEA;EACE,aAAa;AACf;;AAEA;EACE;IACE,gBAAgB;EAClB;AACF","sourcesContent":[".collapse{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;transition:grid-template-rows var(--ac-transition-normal),opacity var(--ac-transition-normal)}.collapse[data-state=open]{grid-template-rows:1fr;opacity:1}.inner{min-height:0}@media (prefers-reduced-motion:reduce){.collapse{transition:none}}",".collapse {\n  opacity: 0;\n  transition: grid-template-rows var(--ac-transition-normal),opacity var(--ac-transition-normal);\n  grid-template-rows: 0fr;\n  display: grid;\n  overflow: hidden;\n}\n\n.collapse[data-state=\"open\"] {\n  opacity: 1;\n  grid-template-rows: 1fr;\n}\n\n.inner {\n  min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .collapse {\n    transition: none;\n  }\n}\n"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./../../node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].oneOf[2].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].oneOf[2].use[2]!/home/runner/work/arolariu.ro/arolariu.ro/node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/postcss-loader/index.js??ruleSet[1].rules[1].oneOf[2].use[3]!/home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/motion/Collapse.module.css","webpack://./src/motion/Collapse.module.css"],"names":[],"mappings":"AAAA;ECCE,UAAU;EACV,8FAA8F;EAC9F,uBAAuB;EACvB,aAAa;EACb,gBAAgB;AAClB;;ADNsK;ECSpK,UAAU;EACV,uBAAuB;AACzB;;ADXkO;ECchO,aAAa;AACf;;ADfsP;EAAuC;ICmBzR,gBAAgB;EAClB;AACF","sourcesContent":[".collapse{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;transition:grid-template-rows var(--ac-transition-normal),opacity var(--ac-transition-normal)}.collapse[data-state=open]{grid-template-rows:1fr;opacity:1}.inner{min-height:0}@media (prefers-reduced-motion:reduce){.collapse{transition:none}}",".collapse {\n  opacity: 0;\n  transition: grid-template-rows var(--ac-transition-normal),opacity var(--ac-transition-normal);\n  grid-template-rows: 0fr;\n  display: grid;\n  overflow: hidden;\n}\n\n.collapse[data-state=\"open\"] {\n  opacity: 1;\n  grid-template-rows: 1fr;\n}\n\n.inner {\n  min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .collapse {\n    transition: none;\n  }\n}\n"],"sourceRoot":""}

package/dist/motion/tokens.js

@@ -10,25 +10,25 @@ const easings = {
         0.25,
         0.1,
         0.25,
-        1.0
+        1
     ],
     easeIn: [
         0.42,
         0,
-        1.0,
-        1.0
+        1,
+        1
     ],
     easeOut: [
         0,
         0,
         0.58,
-        1.0
+        1
     ],
     easeInOut: [
         0.42,
         0,
         0.58,
-        1.0
+        1
     ],
     spring: {
         type: "spring",

package/dist/motion/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"motion/tokens.js","sources":["../../src/motion/tokens.ts"],"sourcesContent":["/**\r\n * Standard motion duration constants in seconds.\r\n * Aligned with `--ac-transition-*` CSS custom properties in `index.css`.\r\n *\r\n * @example\r\n * ```tsx\r\n * <motion.div animate={{opacity: 1}} transition={{duration: durations.normal}} />\r\n * ```\r\n */\r\nexport const durations = {\r\n  fast: 0.1,\r\n  normal: 0.15,\r\n  slow: 0.2,\r\n  slower: 0.3,\r\n  slowest: 0.5,\r\n} as const;\r\n\r\n/**\r\n * Standard easing curves for consistent motion across the library.\r\n */\r\nexport const easings = {\r\n  ease: [0.25, 0.1, 0.25, 1.0],\r\n  easeIn: [0.42, 0, 1.0, 1.0],\r\n  easeOut: [0, 0, 0.58, 1.0],\r\n  easeInOut: [0.42, 0, 0.58, 1.0],\r\n  spring: {type: \"spring\" as const, stiffness: 300, damping: 24},\r\n} as const;\r\n\r\n/**\r\n * Represents a named motion duration token.\r\n */\r\nexport type Duration = keyof typeof durations;\r\n\r\n/**\r\n * Represents a named motion easing token.\r\n */\r\nexport type Easing = keyof typeof easings;\r\n"],"names":["durations","easings"],"mappings":"AASO,MAAMA,YAAY;IACvB,MAAM;IACN,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,SAAS;AACX;AAKO,MAAMC,UAAU;IACrB,MAAM;QAAC;QAAM;QAAK;QAAM;KAAI;IAC5B,QAAQ;QAAC;QAAM;QAAG;QAAK;KAAI;IAC3B,SAAS;QAAC;QAAG;QAAG;QAAM;KAAI;IAC1B,WAAW;QAAC;QAAM;QAAG;QAAM;KAAI;IAC/B,QAAQ;QAAC,MAAM;QAAmB,WAAW;QAAK,SAAS;IAAE;AAC/D"}
+{"version":3,"file":"motion/tokens.js","sources":["../../src/motion/tokens.ts"],"sourcesContent":["/**\r\n * Standard motion duration constants in seconds.\r\n * Aligned with `--ac-transition-*` CSS custom properties in `index.css`.\r\n *\r\n * @example\r\n * ```tsx\r\n * <motion.div animate={{opacity: 1}} transition={{duration: durations.normal}} />\r\n * ```\r\n */\r\nexport const durations = {\r\n  fast: 0.1,\r\n  normal: 0.15,\r\n  slow: 0.2,\r\n  slower: 0.3,\r\n  slowest: 0.5,\r\n} as const;\r\n\r\n/**\r\n * Standard easing curves for consistent motion across the library.\r\n */\r\nexport const easings = {\r\n  ease: [0.25, 0.1, 0.25, 1],\r\n  easeIn: [0.42, 0, 1, 1],\r\n  easeOut: [0, 0, 0.58, 1],\r\n  easeInOut: [0.42, 0, 0.58, 1],\r\n  spring: {type: \"spring\" as const, stiffness: 300, damping: 24},\r\n} as const;\r\n\r\n/**\r\n * Represents a named motion duration token.\r\n */\r\nexport type Duration = keyof typeof durations;\r\n\r\n/**\r\n * Represents a named motion easing token.\r\n */\r\nexport type Easing = keyof typeof easings;\r\n"],"names":["durations","easings"],"mappings":"AASO,MAAMA,YAAY;IACvB,MAAM;IACN,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,SAAS;AACX;AAKO,MAAMC,UAAU;IACrB,MAAM;QAAC;QAAM;QAAK;QAAM;KAAE;IAC1B,QAAQ;QAAC;QAAM;QAAG;QAAG;KAAE;IACvB,SAAS;QAAC;QAAG;QAAG;QAAM;KAAE;IACxB,WAAW;QAAC;QAAM;QAAG;QAAM;KAAE;IAC7B,QAAQ;QAAC,MAAM;QAAmB,WAAW;QAAK,SAAS;IAAE;AAC/D"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arolariu/components",
   "displayName": "@arolariu/components",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡",
   "homepage": "https://arolariu.ro",
   "repository": {
@@ -84,10 +84,12 @@
     "build": "npm run build:before && rslib build && npm run build:after",
     "build:before": "node scripts/beforeBuild.ts",
     "build:after": "node scripts/afterBuild.ts",
-    "build:clean": "rimraf dist",
+    "build:clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
     "build:exports": "node scripts/generate-exports.ts",
     "test": "npm run test:unit",
-    "test:unit": "vitest run"
+    "test:unit": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "clsx": "*",
@@ -110,17 +112,23 @@
     "@rsbuild/core": "*",
     "@rsbuild/plugin-react": "*",
     "@rslib/core": "*",
+    "@storybook/addon-a11y": "*",
+    "@storybook/addon-docs": "*",
+    "@storybook/addon-links": "*",
+    "@storybook/addon-themes": "*",
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-dom": "*",
     "motion": "*",
-    "postcss": "*",
     "playwright": "*",
+    "postcss": "*",
     "react": "*",
     "react-dom": "*",
     "react-hook-form": "*",
     "recharts": "*",
-    "rimraf": "*",
+    "storybook": "*",
+    "storybook-addon-rslib": "*",
+    "storybook-react-rsbuild": "*",
     "typescript": "*"
   },
   "publishConfig": {
@@ -241,6 +249,11 @@
       "import": "./dist/components/ui/collapsible.js",
       "default": "./dist/components/ui/collapsible.js"
     },
+    "./combobox": {
+      "types": "./dist/components/ui/combobox.d.ts",
+      "import": "./dist/components/ui/combobox.js",
+      "default": "./dist/components/ui/combobox.js"
+    },
     "./command": {
       "types": "./dist/components/ui/command.d.ts",
       "import": "./dist/components/ui/command.js",
@@ -481,11 +494,6 @@
       "import": "./dist/components/ui/slider.js",
       "default": "./dist/components/ui/slider.js"
     },
-    "./sonner": {
-      "types": "./dist/components/ui/sonner.d.ts",
-      "import": "./dist/components/ui/sonner.js",
-      "default": "./dist/components/ui/sonner.js"
-    },
     "./spinner": {
       "types": "./dist/components/ui/spinner.d.ts",
       "import": "./dist/components/ui/spinner.js",
@@ -526,6 +534,11 @@
       "import": "./dist/components/ui/timeline.js",
       "default": "./dist/components/ui/timeline.js"
     },
+    "./toast": {
+      "types": "./dist/components/ui/toast.d.ts",
+      "import": "./dist/components/ui/toast.js",
+      "default": "./dist/components/ui/toast.js"
+    },
     "./toggle-group": {
       "types": "./dist/components/ui/toggle-group.d.ts",
       "import": "./dist/components/ui/toggle-group.js",
@@ -566,11 +579,31 @@
       "import": "./dist/hooks/useBreakpoint.js",
       "default": "./dist/hooks/useBreakpoint.js"
     },
+    "./useClipboard": {
+      "types": "./dist/hooks/useClipboard.d.ts",
+      "import": "./dist/hooks/useClipboard.js",
+      "default": "./dist/hooks/useClipboard.js"
+    },
     "./useColorScheme": {
       "types": "./dist/hooks/useColorScheme.d.ts",
       "import": "./dist/hooks/useColorScheme.js",
       "default": "./dist/hooks/useColorScheme.js"
     },
+    "./useControllableState": {
+      "types": "./dist/hooks/useControllableState.d.ts",
+      "import": "./dist/hooks/useControllableState.js",
+      "default": "./dist/hooks/useControllableState.js"
+    },
+    "./useDebounce": {
+      "types": "./dist/hooks/useDebounce.d.ts",
+      "import": "./dist/hooks/useDebounce.js",
+      "default": "./dist/hooks/useDebounce.js"
+    },
+    "./useEventCallback": {
+      "types": "./dist/hooks/useEventCallback.d.ts",
+      "import": "./dist/hooks/useEventCallback.js",
+      "default": "./dist/hooks/useEventCallback.js"
+    },
     "./useFocusManager": {
       "types": "./dist/hooks/useFocusManager.d.ts",
       "import": "./dist/hooks/useFocusManager.js",
@@ -581,26 +614,71 @@
       "import": "./dist/hooks/useFocusVisible.js",
       "default": "./dist/hooks/useFocusVisible.js"
     },
+    "./useId": {
+      "types": "./dist/hooks/useId.d.ts",
+      "import": "./dist/hooks/useId.js",
+      "default": "./dist/hooks/useId.js"
+    },
+    "./useIntersectionObserver": {
+      "types": "./dist/hooks/useIntersectionObserver.d.ts",
+      "import": "./dist/hooks/useIntersectionObserver.js",
+      "default": "./dist/hooks/useIntersectionObserver.js"
+    },
+    "./useInterval": {
+      "types": "./dist/hooks/useInterval.d.ts",
+      "import": "./dist/hooks/useInterval.js",
+      "default": "./dist/hooks/useInterval.js"
+    },
     "./useIsMobile": {
       "types": "./dist/hooks/useIsMobile.d.ts",
       "import": "./dist/hooks/useIsMobile.js",
       "default": "./dist/hooks/useIsMobile.js"
     },
+    "./useLocalStorage": {
+      "types": "./dist/hooks/useLocalStorage.d.ts",
+      "import": "./dist/hooks/useLocalStorage.js",
+      "default": "./dist/hooks/useLocalStorage.js"
+    },
     "./useMediaQuery": {
       "types": "./dist/hooks/useMediaQuery.d.ts",
       "import": "./dist/hooks/useMediaQuery.js",
       "default": "./dist/hooks/useMediaQuery.js"
     },
+    "./useMergedRefs": {
+      "types": "./dist/hooks/useMergedRefs.d.ts",
+      "import": "./dist/hooks/useMergedRefs.js",
+      "default": "./dist/hooks/useMergedRefs.js"
+    },
+    "./useOnClickOutside": {
+      "types": "./dist/hooks/useOnClickOutside.d.ts",
+      "import": "./dist/hooks/useOnClickOutside.js",
+      "default": "./dist/hooks/useOnClickOutside.js"
+    },
     "./usePrefersContrast": {
       "types": "./dist/hooks/usePrefersContrast.d.ts",
       "import": "./dist/hooks/usePrefersContrast.js",
       "default": "./dist/hooks/usePrefersContrast.js"
     },
+    "./usePrevious": {
+      "types": "./dist/hooks/usePrevious.d.ts",
+      "import": "./dist/hooks/usePrevious.js",
+      "default": "./dist/hooks/usePrevious.js"
+    },
     "./useReducedMotion": {
       "types": "./dist/hooks/useReducedMotion.d.ts",
       "import": "./dist/hooks/useReducedMotion.js",
       "default": "./dist/hooks/useReducedMotion.js"
     },
+    "./useThrottle": {
+      "types": "./dist/hooks/useThrottle.d.ts",
+      "import": "./dist/hooks/useThrottle.js",
+      "default": "./dist/hooks/useThrottle.js"
+    },
+    "./useTimeout": {
+      "types": "./dist/hooks/useTimeout.d.ts",
+      "import": "./dist/hooks/useTimeout.js",
+      "default": "./dist/hooks/useTimeout.js"
+    },
     "./useWindowSize": {
       "types": "./dist/hooks/useWindowSize.d.ts",
       "import": "./dist/hooks/useWindowSize.js",

package/src/components/ui/alert-dialog.tsx

@@ -108,13 +108,15 @@ AlertDialog.displayName = "AlertDialog";
  *
  * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
  */
-function AlertDialogTrigger(props: Readonly<AlertDialogTrigger.Props>): React.ReactElement {
+const AlertDialogTrigger = React.forwardRef<HTMLButtonElement, AlertDialogTrigger.Props>(function AlertDialogTrigger(props, forwardedRef) {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 
   return (
     <BaseAlertDialog.Trigger
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "button",
         render: renderProp as never,
@@ -123,7 +125,7 @@ function AlertDialogTrigger(props: Readonly<AlertDialogTrigger.Props>): React.Re
       {renderProp ? undefined : children}
     </BaseAlertDialog.Trigger>
   );
-}
+});
 AlertDialogTrigger.displayName = "AlertDialogTrigger";
 
 /**
@@ -198,7 +200,7 @@ AlertDialogOverlay.displayName = "AlertDialogOverlay";
  *
  * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
  */
-function AlertDialogContent(props: Readonly<AlertDialogContent.Props>): React.ReactElement {
+const AlertDialogContent = React.forwardRef<HTMLDivElement, AlertDialogContent.Props>(function AlertDialogContent(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
@@ -206,6 +208,7 @@ function AlertDialogContent(props: Readonly<AlertDialogContent.Props>): React.Re
       <AlertDialogOverlay />
       <BaseAlertDialog.Popup
         {...otherProps}
+        ref={forwardedRef}
         render={useRender({
           defaultTagName: "div",
           render: render as never,
@@ -215,7 +218,7 @@ function AlertDialogContent(props: Readonly<AlertDialogContent.Props>): React.Re
       </BaseAlertDialog.Popup>
     </AlertDialogPortal>
   );
-}
+});
 AlertDialogContent.displayName = "AlertDialogContent";
 
 /**
@@ -237,6 +240,7 @@ AlertDialogContent.displayName = "AlertDialogContent";
  * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
  */
 function AlertDialogHeader(props: Readonly<AlertDialogHeader.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 
@@ -269,6 +273,7 @@ AlertDialogHeader.displayName = "AlertDialogHeader";
  * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
  */
 function AlertDialogFooter(props: Readonly<AlertDialogFooter.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 
@@ -364,12 +369,13 @@ AlertDialogDescription.displayName = "AlertDialogDescription";
  *
  * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
  */
-function AlertDialogAction(props: Readonly<AlertDialogAction.Props>): React.ReactElement {
+const AlertDialogAction = React.forwardRef<HTMLButtonElement, AlertDialogAction.Props>(function AlertDialogAction(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseAlertDialog.Close
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "button",
         render: render as never,
@@ -383,7 +389,7 @@ function AlertDialogAction(props: Readonly<AlertDialogAction.Props>): React.Reac
       {children}
     </BaseAlertDialog.Close>
   );
-}
+});
 AlertDialogAction.displayName = "AlertDialogAction";
 
 /**
@@ -402,12 +408,13 @@ AlertDialogAction.displayName = "AlertDialogAction";
  *
  * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
  */
-function AlertDialogCancel(props: Readonly<AlertDialogCancel.Props>): React.ReactElement {
+const AlertDialogCancel = React.forwardRef<HTMLButtonElement, AlertDialogCancel.Props>(function AlertDialogCancel(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseAlertDialog.Close
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "button",
         render: render as never,
@@ -421,7 +428,7 @@ function AlertDialogCancel(props: Readonly<AlertDialogCancel.Props>): React.Reac
       {children}
     </BaseAlertDialog.Close>
   );
-}
+});
 AlertDialogCancel.displayName = "AlertDialogCancel";
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API

package/src/components/ui/avatar.tsx

@@ -51,12 +51,13 @@ interface AvatarFallbackProps extends Omit<React.ComponentPropsWithRef<typeof Ba
  *
  * @see {@link https://base-ui.com/react/components/avatar | Base UI Documentation}
  */
-function Avatar(props: Readonly<Avatar.Props>): React.ReactElement {
+const Avatar = React.forwardRef<HTMLSpanElement, Avatar.Props>(function Avatar(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseAvatar.Root
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "span",
         render: render as never,
@@ -65,7 +66,7 @@ function Avatar(props: Readonly<Avatar.Props>): React.ReactElement {
       {children}
     </BaseAvatar.Root>
   );
-}
+});
 Avatar.displayName = "Avatar";
 
 /**
@@ -84,12 +85,13 @@ Avatar.displayName = "Avatar";
  *
  * @see {@link https://base-ui.com/react/components/avatar | Base UI Documentation}
  */
-function AvatarImage(props: Readonly<AvatarImage.Props>): React.ReactElement {
+const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImage.Props>(function AvatarImage(props, forwardedRef) {
   const {className, render, ...otherProps} = props;
 
   return (
     <BaseAvatar.Image
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "img",
         render: render as never,
@@ -97,7 +99,7 @@ function AvatarImage(props: Readonly<AvatarImage.Props>): React.ReactElement {
       })}
     />
   );
-}
+});
 AvatarImage.displayName = "AvatarImage";
 
 /**
@@ -116,12 +118,13 @@ AvatarImage.displayName = "AvatarImage";
  *
  * @see {@link https://base-ui.com/react/components/avatar | Base UI Documentation}
  */
-function AvatarFallback(props: Readonly<AvatarFallback.Props>): React.ReactElement {
+const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallback.Props>(function AvatarFallback(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseAvatar.Fallback
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "span",
         render: render as never,
@@ -130,7 +133,7 @@ function AvatarFallback(props: Readonly<AvatarFallback.Props>): React.ReactEleme
       {children}
     </BaseAvatar.Fallback>
   );
-}
+});
 AvatarFallback.displayName = "AvatarFallback";
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API

package/src/components/ui/calendar.tsx

@@ -4,6 +4,7 @@
 
 import {ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon} from "lucide-react";
 import * as React from "react";
+import type {DateRange, DayPickerProps, Matcher} from "react-day-picker";
 import {DayButton, DayPicker} from "react-day-picker";
 
 import {Button} from "@/components/ui/button";
@@ -58,16 +59,10 @@ const calendarButtonVariantStyles: Record<CalendarButtonVariant, string> = {
  *
  * @see {@link https://daypicker.dev | React Day Picker Docs}
  */
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: Readonly<CalendarProps>): React.JSX.Element {
+const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
+  {className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props},
+  forwardedRef,
+) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
@@ -75,7 +70,7 @@ function Calendar({
       captionLayout={captionLayout}
       formatters={{
         formatMonthDropdown: (date) => {
-          const locale = props.locale;
+          const {locale} = props;
 
           return date.toLocaleString(locale?.code ?? "default", {month: "short"});
         },
@@ -125,7 +120,7 @@ function Calendar({
         Root: ({className: rootClassName, rootRef, ...rootProps}) => (
           <div
             data-slot='calendar'
-            ref={rootRef}
+            ref={rootRef ?? forwardedRef}
             className={cn(styles.calendarRoot, rootClassName)}
             {...rootProps}
           />
@@ -163,7 +158,7 @@ function Calendar({
       {...props}
     />
   );
-}
+});
 
 function CalendarWeekNumber({week, children, ...tdProps}: Readonly<CalendarWeekNumberProps>): React.JSX.Element {
   return (
@@ -202,6 +197,6 @@ function CalendarDayButton({className, day, modifiers, ...props}: Readonly<React
 
 Calendar.displayName = "Calendar";
 
-export type {DateRange, DayPickerProps, Matcher} from "react-day-picker";
+export type {DateRange, DayPickerProps, Matcher};
 export {Calendar};
 export type {CalendarProps};

package/src/components/ui/carousel.tsx

@@ -127,7 +127,9 @@ const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivEl
         return;
       }
 
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
       setCanScrollPrev(emblaApi.canScrollPrev());
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
       setCanScrollNext(emblaApi.canScrollNext());
     }, []);