@arolariu/components 1.0.0 → 1.1.0

package/dist/rslib-runtime.js

@@ -0,0 +1,39 @@
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.d = (exports, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) Object.defineProperty(exports, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.add = function(modules) {
+        Object.assign(__webpack_require__.m, modules);
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports, '__esModule', {
+            value: true
+        });
+    };
+})();
+export { __webpack_require__ };
+
+//# sourceMappingURL=rslib-runtime.js.map

package/dist/rslib-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rslib-runtime.js","sources":["webpack/runtime/define_property_getters","webpack/runtime/esm_register_module","webpack/runtime/has_own_property","webpack/runtime/make_namespace_object"],"sourcesContent":["__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.add = function registerModules(modules) { Object.assign(__webpack_require__.m, modules) }\n","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};"],"names":["__webpack_require__","exports","definition","key","Object","modules","obj","prop","Symbol"],"mappings":";;;;;;;;;;;IAAAA,oBAAoB,CAAC,GAAG,CAACC,SAASC;QACjC,IAAI,IAAIC,OAAOD,WACR,IAAGF,oBAAoB,CAAC,CAACE,YAAYC,QAAQ,CAACH,oBAAoB,CAAC,CAACC,SAASE,MACzEC,OAAO,cAAc,CAACH,SAASE,KAAK;YAAE,YAAY;YAAM,KAAKD,UAAU,CAACC,IAAI;QAAC;IAGzF;;;ICNAH,oBAAoB,GAAG,GAAG,SAAyBK,OAAO;QAAID,OAAO,MAAM,CAACJ,oBAAoB,CAAC,EAAEK;IAAS;;;ICA5GL,oBAAoB,CAAC,GAAG,CAACM,KAAKC,OAAUH,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAACE,KAAKC;;;ICClFP,oBAAoB,CAAC,GAAG,CAACC;QACxB,IAAG,AAAkB,MAAlB,OAAOO,UAA0BA,OAAO,WAAW,EACrDJ,OAAO,cAAc,CAACH,SAASO,OAAO,WAAW,EAAE;YAAE,OAAO;QAAS;QAEtEJ,OAAO,cAAc,CAACH,SAAS,cAAc;YAAE,OAAO;QAAK;IAC5D"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arolariu/components",
   "displayName": "@arolariu/components",
-  "version": "1.0.0",
+  "version": "1.1.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": {
@@ -87,7 +87,9 @@
     "build:clean": "rimraf dist",
     "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,24 @@
     "@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 +250,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",
@@ -566,11 +580,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 +615,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

@@ -58,16 +58,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 +69,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 +119,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 +157,7 @@ function Calendar({
       {...props}
     />
   );
-}
+});
 
 function CalendarWeekNumber({week, children, ...tdProps}: Readonly<CalendarWeekNumberProps>): React.JSX.Element {
   return (

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());
     }, []);