@arolariu/components 0.5.0 → 1.0.0

package/dist/components/ui/radio-group.js

@@ -1,27 +1,49 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { Indicator, Item, Root } from "@radix-ui/react-radio-group";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import { useRender } from "@base-ui/react/use-render";
 import { Circle } from "lucide-react";
 import { forwardRef } from "react";
 import { cn } from "../../lib/utilities.js";
-const RadioGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
-        className: cn("grid gap-2", className),
-        ...props,
-        ref: ref
-    }));
-RadioGroup.displayName = Root.displayName;
-const RadioGroupItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Item, {
+import radio_group_module from "./radio-group.module.js";
+const radio_group_RadioGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(RadioGroup, {
         ref: ref,
-        className: cn("aspect-square h-4 w-4 rounded-full border border-neutral-200 border-neutral-900 text-neutral-900 shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-50 dark:border-neutral-800 dark:text-neutral-50 dark:focus-visible:ring-neutral-300", className),
-        ...props,
-        children: /*#__PURE__*/ jsx(Indicator, {
-            className: "flex items-center justify-center",
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            render: render,
+            props: mergeProps({
+                className: cn(radio_group_module.group, className)
+            }, {})
+        })
+    });
+});
+const RadioGroupItem = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Radio.Root, {
+        ref: ref,
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "button",
+            render: render,
+            props: mergeProps({
+                className: cn(radio_group_module.item, className)
+            }, {})
+        }),
+        children: /*#__PURE__*/ jsx(Radio.Indicator, {
+            className: radio_group_module.indicator,
             children: /*#__PURE__*/ jsx(Circle, {
-                className: "fill-primary h-3.5 w-3.5"
+                className: radio_group_module.icon
             })
         })
-    }));
-RadioGroupItem.displayName = Item.displayName;
-export { RadioGroup, RadioGroupItem };
+    });
+});
+radio_group_RadioGroup.displayName = "RadioGroup";
+RadioGroupItem.displayName = "RadioGroupItem";
+export { RadioGroupItem, radio_group_RadioGroup as RadioGroup };
 
 //# sourceMappingURL=radio-group.js.map

package/dist/components/ui/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/radio-group.js","sources":["../../../src/components/ui/radio-group.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\r\nimport {Circle} from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst RadioGroup = React.forwardRef<\r\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\r\n>(({className, ...props}, ref) => {\r\n  return (\r\n    <RadioGroupPrimitive.Root\r\n      className={cn(\"grid gap-2\", className)}\r\n      {...props}\r\n      ref={ref}\r\n    />\r\n  );\r\n});\r\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\r\n\r\nconst RadioGroupItem = React.forwardRef<\r\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\r\n>(({className, ...props}, ref) => {\r\n  return (\r\n    <RadioGroupPrimitive.Item\r\n      ref={ref}\r\n      className={cn(\r\n        \"aspect-square h-4 w-4 rounded-full border border-neutral-200 border-neutral-900 text-neutral-900 shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-50 dark:border-neutral-800 dark:text-neutral-50 dark:focus-visible:ring-neutral-300\",\r\n        className,\r\n      )}\r\n      {...props}>\r\n      <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>\r\n        <Circle className='fill-primary h-3.5 w-3.5' />\r\n      </RadioGroupPrimitive.Indicator>\r\n    </RadioGroupPrimitive.Item>\r\n  );\r\n});\r\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\r\n\r\nexport {RadioGroup, RadioGroupItem};\r\n"],"names":["RadioGroup","React","className","props","ref","RadioGroupPrimitive","cn","RadioGroupItem","Circle"],"mappings":";;;;;;AAQA,MAAMA,aAAa,WAAbA,GAAaC,WAGjB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MACjB,WAAP,GACE,IAACC,MAAwB;QACvB,WAAWC,GAAG,cAAcJ;QAC3B,GAAGC,KAAK;QACT,KAAKC;;AAIXJ,WAAW,WAAW,GAAGK,KAAAA,WAAoC;AAE7D,MAAME,iBAAiB,WAAjBA,GAAiBN,WAGrB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MACjB,WAAP,GACE,IAACC,MAAwB;QACvB,KAAKD;QACL,WAAWE,GACT,0UACAJ;QAED,GAAGC,KAAK;kBACT,kBAACE,WAA6B;YAAC,WAAU;sBACvC,kBAACG,QAAMA;gBAAC,WAAU;;;;AAK1BD,eAAe,WAAW,GAAGF,KAAAA,WAAoC"}
+{"version":3,"file":"components/ui/radio-group.js","sources":["../../../src/components/ui/radio-group.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {mergeProps} from \"@base-ui/react/merge-props\";\r\nimport {Radio} from \"@base-ui/react/radio\";\r\nimport {RadioGroup as BaseRadioGroup} from \"@base-ui/react/radio-group\";\r\nimport {useRender} from \"@base-ui/react/use-render\";\r\nimport {Circle} from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./radio-group.module.css\";\r\n\r\ntype RadioGroupProps = React.ComponentPropsWithRef<typeof BaseRadioGroup>;\r\ntype RadioGroupItemProps = React.ComponentPropsWithRef<typeof Radio.Root>;\r\n\r\n/**\r\n * Coordinates radio group state and selection behavior.\r\n *\r\n * @remarks\r\n * - Renders a `<div>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}\r\n * - Supports the `render` prop for element composition\r\n *\r\n * @example\r\n * ```tsx\r\n * <RadioGroup>Content</RadioGroup>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/radio-group | Base UI Documentation}\r\n */\r\nconst RadioGroup = React.forwardRef<React.ComponentRef<typeof BaseRadioGroup>, RadioGroup.Props>(\r\n  (props: Readonly<RadioGroup.Props>, ref): React.ReactElement => {\r\n    const {className, render, ...otherProps} = props;\r\n\r\n    return (\r\n      <BaseRadioGroup\r\n        ref={ref}\r\n        {...otherProps}\r\n        render={useRender({\r\n          defaultTagName: \"div\",\r\n          render: render as never,\r\n          props: mergeProps({className: cn(styles.group, className)}, {}),\r\n        })}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\n/**\r\n * Renders the radio group item.\r\n *\r\n * @remarks\r\n * - Renders a `<button>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/radio-group | Base UI Radio Group}\r\n * - Supports the `render` prop for element composition\r\n *\r\n * @example\r\n * ```tsx\r\n * <RadioGroupItem>Content</RadioGroupItem>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/radio-group | Base UI Documentation}\r\n */\r\nconst RadioGroupItem = React.forwardRef<React.ComponentRef<typeof Radio.Root>, RadioGroupItem.Props>(\r\n  (props: Readonly<RadioGroupItem.Props>, ref): React.ReactElement => {\r\n    const {className, render, ...otherProps} = props;\r\n\r\n    return (\r\n      <Radio.Root\r\n        ref={ref}\r\n        {...otherProps}\r\n        render={useRender({\r\n          defaultTagName: \"button\",\r\n          render: render as never,\r\n          props: mergeProps({className: cn(styles.item, className)}, {}),\r\n        })}>\r\n        <Radio.Indicator className={styles.indicator}>\r\n          <Circle className={styles.icon} />\r\n        </Radio.Indicator>\r\n      </Radio.Root>\r\n    );\r\n  },\r\n);\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace RadioGroup {\r\n  export type Props = RadioGroupProps;\r\n  export type State = BaseRadioGroup.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace RadioGroupItem {\r\n  export type Props = RadioGroupItemProps;\r\n  export type State = Radio.Root.State;\r\n}\r\n\r\nRadioGroup.displayName = \"RadioGroup\";\r\nRadioGroupItem.displayName = \"RadioGroupItem\";\r\n\r\nexport {RadioGroup, RadioGroupItem};\r\n"],"names":["RadioGroup","React","props","ref","className","render","otherProps","BaseRadioGroup","useRender","mergeProps","cn","styles","RadioGroupItem","Radio","Circle"],"mappings":";;;;;;;;;;AA8BA,MAAMA,yBAAa,WAAHA,GAAGC,WACjB,CAACC,OAAmCC;IAClC,MAAM,EAACC,SAAS,EAAEC,MAAM,EAAE,GAAGC,YAAW,GAAGJ;IAE3C,OAAO,WAAP,GACE,IAACK,YAAcA;QACb,KAAKJ;QACJ,GAAGG,UAAU;QACd,QAAQE,UAAU;YAChB,gBAAgB;YAChB,QAAQH;YACR,OAAOI,WAAW;gBAAC,WAAWC,GAAGC,mBAAAA,KAAY,EAAEP;YAAU,GAAG,CAAC;QAC/D;;AAGN;AAkBF,MAAMQ,iBAAiB,WAAHA,GAAGX,WACrB,CAACC,OAAuCC;IACtC,MAAM,EAACC,SAAS,EAAEC,MAAM,EAAE,GAAGC,YAAW,GAAGJ;IAE3C,OAAO,WAAP,GACE,IAACW,MAAM,IAAI;QACT,KAAKV;QACJ,GAAGG,UAAU;QACd,QAAQE,UAAU;YAChB,gBAAgB;YAChB,QAAQH;YACR,OAAOI,WAAW;gBAAC,WAAWC,GAAGC,mBAAAA,IAAW,EAAEP;YAAU,GAAG,CAAC;QAC9D;kBACA,kBAACS,MAAM,SAAS;YAAC,WAAWF,mBAAAA,SAAgB;sBAC1C,kBAACG,QAAMA;gBAAC,WAAWH,mBAAAA,IAAW;;;;AAItC;AAeFX,uBAAW,WAAW,GAAG;AACzBY,eAAe,WAAW,GAAG"}

package/dist/components/ui/radio-group.module.js

@@ -0,0 +1,10 @@
+import "./radio-group_module.css";
+const radio_group_module = {
+    group: "group-pdU0M9",
+    item: "item-RwPhcM",
+    indicator: "indicator-y5Uthw",
+    icon: "icon-ZtI68F"
+};
+export default radio_group_module;
+
+//# sourceMappingURL=radio-group.module.js.map

package/dist/components/ui/radio-group.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/radio-group.module.js","sources":["../../../src/components/ui/radio-group.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./radio-group_module.css\"\nexport default {\"group\":\"group-pdU0M9\",\"item\":\"item-RwPhcM\",\"indicator\":\"indicator-y5Uthw\",\"icon\":\"icon-ZtI68F\"};"],"names":[],"mappings":";AAEA,2BAAe;IAAC,OAAQ;IAAe,MAAO;IAAc,WAAY;IAAmB,MAAO;AAAa"}

package/dist/components/ui/radio-group_module.css

@@ -0,0 +1,44 @@
+.group-pdU0M9 {
+  gap: var(--ac-space-2);
+  display: grid;
+}
+
+.item-RwPhcM {
+  background-color: var(--ac-background);
+  border: 1px solid var(--ac-primary);
+  color: var(--ac-primary);
+  cursor: pointer;
+  height: 1rem;
+  transition: border-color var(--ac-transition-fast),background-color var(--ac-transition-fast);
+  border-radius: 999px;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  width: 1rem;
+  display: inline-flex;
+
+  &:focus-visible {
+    outline: 2px solid var(--ac-ring);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+}
+
+.indicator-y5Uthw {
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.icon-ZtI68F {
+  fill: currentColor;
+  width: .625rem;
+  height: .625rem;
+}
+
+
+/*# sourceMappingURL=radio-group_module.css.map */

package/dist/components/ui/radio-group_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/radio-group.module.css","webpack://./src/components/ui/radio-group.module.css"],"names":[],"mappings":"AADA;ECEE,sBAAsB;EACtB,aAAa;AACf;;AAEA;EACE,sCAAsC;EACtC,mCAAmC;EACnC,wBAAwB;EACxB,eAAe;EACf,YAAY;EACZ,6FAA6F;EAC7F,oBAAoB;EACpB,aAAa;EACb,uBAAuB;EACvB,mBAAmB;EACnB,WAAW;EACX,oBAAoB;;EAEpB;IACE,iCAAiC;IACjC,mBAAmB;EACrB;;EAEA;IACE,mBAAmB;IACnB,WAAW;EACb;AACF;;AAEA;EACE,uBAAuB;EACvB,mBAAmB;EACnB,oBAAoB;AACtB;;AAEA;EACE,kBAAkB;EAClB,cAAc;EACd,eAAe;AACjB","sourcesContent":[".group{display:grid;gap:var(--ac-space-2)}.item{align-items:center;background-color:var(--ac-background);border:1px solid var(--ac-primary);border-radius:999px;color:var(--ac-primary);cursor:pointer;display:inline-flex;height:1rem;justify-content:center;outline:none;transition:border-color var(--ac-transition-fast),background-color var(--ac-transition-fast);width:1rem;&:focus-visible{outline:2px solid var(--ac-ring);outline-offset:2px}&[data-disabled]{cursor:not-allowed;opacity:.5}}.indicator{align-items:center;display:inline-flex;justify-content:center}.icon{fill:currentcolor;height:.625rem;width:.625rem}",".group {\n  gap: var(--ac-space-2);\n  display: grid;\n}\n\n.item {\n  background-color: var(--ac-background);\n  border: 1px solid var(--ac-primary);\n  color: var(--ac-primary);\n  cursor: pointer;\n  height: 1rem;\n  transition: border-color var(--ac-transition-fast),background-color var(--ac-transition-fast);\n  border-radius: 999px;\n  outline: none;\n  justify-content: center;\n  align-items: center;\n  width: 1rem;\n  display: inline-flex;\n\n  &:focus-visible {\n    outline: 2px solid var(--ac-ring);\n    outline-offset: 2px;\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: .5;\n  }\n}\n\n.indicator {\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n}\n\n.icon {\n  fill: currentColor;\n  width: .625rem;\n  height: .625rem;\n}\n"],"sourceRoot":""}

package/dist/components/ui/resizable.d.ts

@@ -1,7 +1,63 @@
 import * as React from "react";
+import type { ImperativePanelGroupHandle, ImperativePanelHandle } from "react-resizable-panels";
 import * as ResizablePrimitive from "react-resizable-panels";
-declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => import("react/jsx-runtime").JSX.Element;
-declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLMapElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSelectElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLinkElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+export type { ImperativePanelGroupHandle, ImperativePanelHandle };
+/**
+ * Props for the {@link ResizablePanelGroup} component.
+ */
+export type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.PanelGroup>;
+/**
+ * Props for the {@link ResizablePanel} component.
+ */
+export type ResizablePanelProps = React.ComponentProps<typeof ResizablePrimitive.Panel>;
+/**
+ * Props for the {@link ResizableHandle} component.
+ *
+ * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
+ */
+export interface ResizableHandleProps extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
+    /**
+     * Renders a visual drag grip inside the resize handle to indicate that adjacent panels can be resized.
+     *
+     * @default false
+     * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
+     */
+    withHandle?: boolean;
+}
+/**
+ * Wraps `react-resizable-panels` panel groups with shared styles.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction='horizontal'>...</ResizablePanelGroup>
+ * ```
+ *
+ * @see {@link ResizablePanelGroupProps} for available props
+ * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
+ * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}
+ */
+declare const ResizablePanelGroup: React.ForwardRefExoticComponent<ResizablePanelGroupProps & React.RefAttributes<ImperativePanelGroupHandle>>;
+/**
+ * Re-exports the underlying resizable panel primitive for consistent composition.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Styling is applied by parent panel group and handles
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanel defaultSize={50}>Content</ResizablePanel>
+ * ```
+ *
+ * @see {@link ResizablePanelProps} for available props
+ * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
+ * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}
+ */
+declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -17,9 +73,26 @@ declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAtt
     tagName?: keyof HTMLElementTagNameMap | undefined;
 } & {
     children?: import("react").ReactNode | undefined;
-} & React.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
-declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-    withHandle?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+} & React.RefAttributes<ImperativePanelHandle>>;
+/**
+ * Renders a draggable resize handle between resizable panels.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <ResizableHandle withHandle />
+ * ```
+ *
+ * @see {@link ResizableHandleProps} for available props
+ * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
+ * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}
+ */
+declare function ResizableHandle({ withHandle, className, children, ...props }: Readonly<ResizableHandleProps>): React.JSX.Element;
+declare namespace ResizableHandle {
+    var displayName: string;
+}
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
 //# sourceMappingURL=resizable.d.ts.map

package/dist/components/ui/resizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAI7D,QAAA,MAAM,mBAAmB,GAAI,yBAAuB,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,4CAK7G,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;kEAA2B,CAAC;AAEhD,QAAA,MAAM,eAAe,GAAI,qCAItB,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC,GAAG;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,4CAaA,CAAC;AAEF,OAAO,EAAC,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAC,CAAC"}
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,0BAA0B,EAAE,qBAAqB,EAAC,MAAM,wBAAwB,CAAC;AAC9F,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAM7D,YAAY,EAAC,0BAA0B,EAAE,qBAAqB,EAAC,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAElG;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAC;AAExF;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC;IAC7G;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAAC,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAOjI,CAAC;AAEL;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;+CAA2B,CAAC;AAEhD;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,eAAe,CAAC,EAAC,UAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,QAAQ,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAa/H;kBAbQ,eAAe;;;AAmBxB,OAAO,EAAC,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAC,CAAC"}

package/dist/components/ui/resizable.js

@@ -1,24 +1,34 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { GripVertical } from "lucide-react";
-import "react";
+import { forwardRef } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { cn } from "../../lib/utilities.js";
-const ResizablePanelGroup = ({ className, ...props })=>/*#__PURE__*/ jsx(PanelGroup, {
-        className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className),
+import resizable_module from "./resizable.module.js";
+const ResizablePanelGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PanelGroup, {
+        ref: ref,
+        className: cn(resizable_module.group, className),
         ...props
-    });
+    }));
 const ResizablePanel = Panel;
-const ResizableHandle = ({ withHandle, className, ...props })=>/*#__PURE__*/ jsx(PanelResizeHandle, {
-        className: cn("relative flex w-px items-center justify-center bg-neutral-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:ring-offset-1 focus-visible:outline-none data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 dark:bg-neutral-800 dark:focus-visible:ring-neutral-300 [&[data-panel-group-direction=vertical]>div]:rotate-90", className),
+function ResizableHandle({ withHandle = false, className, children, ...props }) {
+    return /*#__PURE__*/ jsxs(PanelResizeHandle, {
+        className: cn(resizable_module.handle, className),
         ...props,
-        children: Boolean(withHandle) && /*#__PURE__*/ jsx("div", {
-            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-neutral-200 bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-800",
-            children: /*#__PURE__*/ jsx(GripVertical, {
-                className: "h-2.5 w-2.5"
-            })
-        })
+        children: [
+            Boolean(withHandle) && /*#__PURE__*/ jsx("div", {
+                className: resizable_module.handleGrip,
+                children: /*#__PURE__*/ jsx(GripVertical, {
+                    className: resizable_module.handleGripIcon
+                })
+            }),
+            children
+        ]
     });
+}
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+ResizablePanel.displayName = "ResizablePanel";
+ResizableHandle.displayName = "ResizableHandle";
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
 
 //# sourceMappingURL=resizable.js.map

package/dist/components/ui/resizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/resizable.js","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {GripVertical} from \"lucide-react\";\r\nimport * as React from \"react\";\r\nimport * as ResizablePrimitive from \"react-resizable-panels\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst ResizablePanelGroup = ({className, ...props}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\r\n  <ResizablePrimitive.PanelGroup\r\n    className={cn(\"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\", className)}\r\n    {...props}\r\n  />\r\n);\r\n\r\nconst ResizablePanel = ResizablePrimitive.Panel;\r\n\r\nconst ResizableHandle = ({\r\n  withHandle,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\r\n  withHandle?: boolean;\r\n}) => (\r\n  <ResizablePrimitive.PanelResizeHandle\r\n    className={cn(\r\n      \"relative flex w-px items-center justify-center bg-neutral-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:ring-offset-1 focus-visible:outline-none data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 dark:bg-neutral-800 dark:focus-visible:ring-neutral-300 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\r\n      className,\r\n    )}\r\n    {...props}>\r\n    {Boolean(withHandle) && (\r\n      <div className='z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-neutral-200 bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-800'>\r\n        <GripVertical className='h-2.5 w-2.5' />\r\n      </div>\r\n    )}\r\n  </ResizablePrimitive.PanelResizeHandle>\r\n);\r\n\r\nexport {ResizableHandle, ResizablePanel, ResizablePanelGroup};\r\n"],"names":["ResizablePanelGroup","className","props","ResizablePrimitive","cn","ResizablePanel","ResizableHandle","withHandle","Boolean","GripVertical"],"mappings":";;;;;;AAQA,MAAMA,sBAAsB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAkE,iBAC5G,IAACC,YAA6B;QAC5B,WAAWC,GAAG,qEAAqEH;QAClF,GAAGC,KAAK;;AAIb,MAAMG,iBAAiBF;AAEvB,MAAMG,kBAAkB,CAAC,EACvBC,UAAU,EACVN,SAAS,EACT,GAAGC,OAGJ,iBACC,IAACC,mBAAoC;QACnC,WAAWC,GACT,+sBACAH;QAED,GAAGC,KAAK;kBACRM,QAAQD,eAAe,WAAfA,GACP,IAAC;YAAI,WAAU;sBACb,kBAACE,cAAYA;gBAAC,WAAU"}
+{"version":3,"file":"components/ui/resizable.js","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/* eslint-disable react/jsx-handler-names */\r\n\r\nimport {GripVertical} from \"lucide-react\";\r\nimport * as React from \"react\";\r\nimport type {ImperativePanelGroupHandle, ImperativePanelHandle} from \"react-resizable-panels\";\r\nimport * as ResizablePrimitive from \"react-resizable-panels\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nimport styles from \"./resizable.module.css\";\r\n\r\nexport type {ImperativePanelGroupHandle, ImperativePanelHandle};\r\n\r\n/**\r\n * Props for the {@link ResizablePanelGroup} component.\r\n */\r\nexport type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.PanelGroup>;\r\n\r\n/**\r\n * Props for the {@link ResizablePanel} component.\r\n */\r\nexport type ResizablePanelProps = React.ComponentProps<typeof ResizablePrimitive.Panel>;\r\n\r\n/**\r\n * Props for the {@link ResizableHandle} component.\r\n *\r\n * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}\r\n */\r\nexport interface ResizableHandleProps extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {\r\n  /**\r\n   * Renders a visual drag grip inside the resize handle to indicate that adjacent panels can be resized.\r\n   *\r\n   * @default false\r\n   * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}\r\n   */\r\n  withHandle?: boolean;\r\n}\r\n\r\n/**\r\n * Wraps `react-resizable-panels` panel groups with shared styles.\r\n *\r\n * @remarks\r\n * - Third-party wrapper component\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ResizablePanelGroup direction='horizontal'>...</ResizablePanelGroup>\r\n * ```\r\n *\r\n * @see {@link ResizablePanelGroupProps} for available props\r\n * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}\r\n * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}\r\n */\r\nconst ResizablePanelGroup: React.ForwardRefExoticComponent<ResizablePanelGroupProps & React.RefAttributes<ImperativePanelGroupHandle>> =\r\n  React.forwardRef<ImperativePanelGroupHandle, ResizablePanelGroupProps>(({className, ...props}, ref) => (\r\n    <ResizablePrimitive.PanelGroup\r\n      ref={ref}\r\n      className={cn(styles.group, className)}\r\n      {...props}\r\n    />\r\n  ));\r\n\r\n/**\r\n * Re-exports the underlying resizable panel primitive for consistent composition.\r\n *\r\n * @remarks\r\n * - Third-party wrapper component\r\n * - Styling is applied by parent panel group and handles\r\n *\r\n * @example\r\n * ```tsx\r\n * <ResizablePanel defaultSize={50}>Content</ResizablePanel>\r\n * ```\r\n *\r\n * @see {@link ResizablePanelProps} for available props\r\n * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}\r\n * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}\r\n */\r\nconst ResizablePanel = ResizablePrimitive.Panel;\r\n\r\n/**\r\n * Renders a draggable resize handle between resizable panels.\r\n *\r\n * @remarks\r\n * - Third-party wrapper component\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ResizableHandle withHandle />\r\n * ```\r\n *\r\n * @see {@link ResizableHandleProps} for available props\r\n * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}\r\n * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}\r\n */\r\nfunction ResizableHandle({withHandle = false, className, children, ...props}: Readonly<ResizableHandleProps>): React.JSX.Element {\r\n  return (\r\n    <ResizablePrimitive.PanelResizeHandle\r\n      className={cn(styles.handle, className)}\r\n      {...props}>\r\n      {Boolean(withHandle) && (\r\n        <div className={styles.handleGrip}>\r\n          <GripVertical className={styles.handleGripIcon} />\r\n        </div>\r\n      )}\r\n      {children}\r\n    </ResizablePrimitive.PanelResizeHandle>\r\n  );\r\n}\r\n\r\nResizablePanelGroup.displayName = \"ResizablePanelGroup\";\r\nResizablePanel.displayName = \"ResizablePanel\";\r\nResizableHandle.displayName = \"ResizableHandle\";\r\n\r\nexport {ResizableHandle, ResizablePanel, ResizablePanelGroup};\r\n"],"names":["ResizablePanelGroup","React","className","props","ref","ResizablePrimitive","cn","styles","ResizablePanel","ResizableHandle","withHandle","children","Boolean","GripVertical"],"mappings":";;;;;;;AAwDA,MAAMA,sBAAmBA,WAAAA,GACvBC,WAAuE,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GAC7F,IAACC,YAA6B;QAC5B,KAAKD;QACL,WAAWE,GAAGC,iBAAAA,KAAY,EAAEL;QAC3B,GAAGC,KAAK;;AAoBf,MAAMK,iBAAiBH;AAkBvB,SAASI,gBAAgB,EAACC,aAAa,KAAK,EAAER,SAAS,EAAES,QAAQ,EAAE,GAAGR,OAAsC;IAC1G,OAAO,WAAP,GACE,KAACE,mBAAoC;QACnC,WAAWC,GAAGC,iBAAAA,MAAa,EAAEL;QAC5B,GAAGC,KAAK;;YACRS,QAAQF,eAAe,WAAfA,GACP,IAAC;gBAAI,WAAWH,iBAAAA,UAAiB;0BAC/B,kBAACM,cAAYA;oBAAC,WAAWN,iBAAAA,cAAqB;;;YAGjDI;;;AAGP;AAEAX,oBAAoB,WAAW,GAAG;AAClCQ,eAAe,WAAW,GAAG;AAC7BC,gBAAgB,WAAW,GAAG"}

package/dist/components/ui/resizable.module.js

@@ -0,0 +1,10 @@
+import "./resizable_module.css";
+const resizable_module = {
+    group: "group-Z8B1di",
+    handle: "handle-Vo0EtS",
+    handleGrip: "handleGrip-KiXxXo",
+    handleGripIcon: "handleGripIcon-fRBOU2"
+};
+export default resizable_module;
+
+//# sourceMappingURL=resizable.module.js.map

package/dist/components/ui/resizable.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/resizable.module.js","sources":["../../../src/components/ui/resizable.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./resizable_module.css\"\nexport default {\"group\":\"group-Z8B1di\",\"handle\":\"handle-Vo0EtS\",\"handleGrip\":\"handleGrip-KiXxXo\",\"handleGripIcon\":\"handleGripIcon-fRBOU2\"};"],"names":[],"mappings":";AAEA,yBAAe;IAAC,OAAQ;IAAe,QAAS;IAAgB,YAAa;IAAoB,gBAAiB;AAAuB"}

package/dist/components/ui/resizable_module.css

@@ -0,0 +1,70 @@
+.group-Z8B1di {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.group-Z8B1di[data-panel-group-direction="vertical"] {
+  flex-direction: column;
+}
+
+.handle-Vo0EtS {
+  background-color: var(--ac-border);
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  width: 1px;
+  display: flex;
+  position: relative;
+}
+
+.handle-Vo0EtS:after {
+  content: "";
+  inset-block: 0;
+  width: .25rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.handle-Vo0EtS:focus-visible {
+  box-shadow: 0 0 0 1px var(--ac-ring),0 0 0 2px var(--ac-background);
+}
+
+.handle-Vo0EtS[data-panel-group-direction="vertical"] {
+  width: 100%;
+  height: 1px;
+}
+
+.handle-Vo0EtS[data-panel-group-direction="vertical"]:after {
+  width: 100%;
+  height: .25rem;
+  top: 0;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.handleGrip-KiXxXo {
+  background-color: var(--ac-background);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-sm);
+  z-index: 1;
+  justify-content: center;
+  align-items: center;
+  width: .75rem;
+  height: 1rem;
+  display: flex;
+  position: relative;
+}
+
+.handle-Vo0EtS[data-panel-group-direction="vertical"] .handleGrip-KiXxXo {
+  transform: rotate(90deg);
+}
+
+.handleGripIcon-fRBOU2 {
+  width: .625rem;
+  height: .625rem;
+}
+
+
+/*# sourceMappingURL=resizable_module.css.map */

package/dist/components/ui/resizable_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/resizable.module.css","webpack://./src/components/ui/resizable.module.css"],"names":[],"mappings":"AADA;ECEE,WAAW;EACX,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,sBAAsB;AACxB;;AAEA;EACE,kCAAkC;EAClC,aAAa;EACb,uBAAuB;EACvB,mBAAmB;EACnB,UAAU;EACV,aAAa;EACb,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,cAAc;EACd,aAAa;EACb,kBAAkB;EAClB,SAAS;EACT,2BAA2B;AAC7B;;AAEA;EACE,mEAAmE;AACrE;;AAEA;EACE,WAAW;EACX,WAAW;AACb;;AAEA;EACE,WAAW;EACX,cAAc;EACd,MAAM;EACN,OAAO;EACP,2BAA2B;AAC7B;;AAEA;EACE,sCAAsC;EACtC,kCAAkC;EAClC,kCAAkC;EAClC,UAAU;EACV,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,YAAY;EACZ,aAAa;EACb,kBAAkB;AACpB;;AAEA;EACE,wBAAwB;AAC1B;;AAEA;EACE,cAAc;EACd,eAAe;AACjB","sourcesContent":[".group{display:flex;height:100%;width:100%}.group[data-panel-group-direction=vertical]{flex-direction:column}.handle{align-items:center;background-color:var(--ac-border);display:flex;justify-content:center;outline:none;position:relative;width:1px}.handle:after{content:\"\";inset-block:0;left:50%;position:absolute;transform:translateX(-50%);width:.25rem}.handle:focus-visible{box-shadow:0 0 0 1px var(--ac-ring),0 0 0 2px var(--ac-background)}.handle[data-panel-group-direction=vertical]{height:1px;width:100%}.handle[data-panel-group-direction=vertical]:after{height:.25rem;left:0;top:0;transform:translateY(-50%);width:100%}.handleGrip{align-items:center;background-color:var(--ac-background);border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);display:flex;height:1rem;justify-content:center;position:relative;width:.75rem;z-index:1}.handle[data-panel-group-direction=vertical] .handleGrip{transform:rotate(90deg)}.handleGripIcon{height:.625rem;width:.625rem}",".group {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.group[data-panel-group-direction=\"vertical\"] {\n  flex-direction: column;\n}\n\n.handle {\n  background-color: var(--ac-border);\n  outline: none;\n  justify-content: center;\n  align-items: center;\n  width: 1px;\n  display: flex;\n  position: relative;\n}\n\n.handle:after {\n  content: \"\";\n  inset-block: 0;\n  width: .25rem;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.handle:focus-visible {\n  box-shadow: 0 0 0 1px var(--ac-ring),0 0 0 2px var(--ac-background);\n}\n\n.handle[data-panel-group-direction=\"vertical\"] {\n  width: 100%;\n  height: 1px;\n}\n\n.handle[data-panel-group-direction=\"vertical\"]:after {\n  width: 100%;\n  height: .25rem;\n  top: 0;\n  left: 0;\n  transform: translateY(-50%);\n}\n\n.handleGrip {\n  background-color: var(--ac-background);\n  border: 1px solid var(--ac-border);\n  border-radius: var(--ac-radius-sm);\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  width: .75rem;\n  height: 1rem;\n  display: flex;\n  position: relative;\n}\n\n.handle[data-panel-group-direction=\"vertical\"] .handleGrip {\n  transform: rotate(90deg);\n}\n\n.handleGripIcon {\n  width: .625rem;\n  height: .625rem;\n}\n"],"sourceRoot":""}

package/dist/components/ui/ripple-button.d.ts

@@ -1,11 +1,32 @@
 import { type HTMLMotionProps, type Transition } from "motion/react";
 import * as React from "react";
-interface RippleButtonProps extends HTMLMotionProps<"button"> {
+/** Props accepted by {@link RippleButton}. */
+export interface RippleButtonProps extends HTMLMotionProps<"button"> {
+    /** Button contents rendered above the ripple layer. @default undefined */
     children: React.ReactNode;
+    /** Additional CSS classes merged with each generated ripple. @default undefined */
     rippleClassName?: string;
+    /** Final expansion scale applied to each ripple animation. @default 10 */
     scale?: number;
+    /** Motion timing used for each ripple animation. @default {duration: 0.6, ease: "easeOut"} */
     transition?: Transition;
 }
+/**
+ * Renders a pressable button that emits animated ripples from the click position.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<button>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <RippleButton>Click me</RippleButton>
+ * ```
+ *
+ * @see {@link RippleButtonProps} for available props
+ */
 declare const RippleButton: React.ForwardRefExoticComponent<Omit<RippleButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { RippleButton, type RippleButtonProps };
+export { RippleButton };
 //# sourceMappingURL=ripple-button.d.ts.map

package/dist/components/ui/ripple-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ripple-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ripple-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,eAAe,EAAU,KAAK,UAAU,EAAC,MAAM,cAAc,CAAC;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,UAAU,iBAAkB,SAAQ,eAAe,CAAC,QAAQ,CAAC;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,0GAiEjB,CAAC;AAIF,OAAO,EAAC,YAAY,EAAE,KAAK,iBAAiB,EAAC,CAAC"}
+{"version":3,"file":"ripple-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ripple-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,eAAe,EAAE,KAAK,UAAU,EAAC,MAAM,cAAc,CAAC;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,8CAA8C;AAC9C,MAAM,WAAW,iBAAkB,SAAQ,eAAe,CAAC,QAAQ,CAAC;IAClE,0EAA0E;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mFAAmF;IACnF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,YAAY,0GA6EjB,CAAC;AAIF,OAAO,EAAC,YAAY,EAAC,CAAC"}

package/dist/components/ui/ripple-button.js

@@ -1,15 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "motion/react";
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { cn } from "../../lib/utilities.js";
+import ripple_button_module from "./ripple-button.module.js";
 const RippleButton = /*#__PURE__*/ forwardRef(({ children, onClick, className, rippleClassName, scale = 10, transition = {
     duration: 0.6,
     ease: "easeOut"
 }, ...props }, ref)=>{
+    const { key: _ignoredKey, ...restProps } = props;
     const [ripples, setRipples] = useState([]);
     const buttonRef = useRef(null);
-    useImperativeHandle(ref, ()=>buttonRef.current);
+    const timeoutIdsRef = useRef([]);
+    useImperativeHandle(ref, ()=>buttonRef.current, []);
+    useEffect(()=>()=>{
+            timeoutIdsRef.current.forEach((timeoutId)=>{
+                globalThis.window.clearTimeout(timeoutId);
+            });
+        }, []);
     const createRipple = useCallback((event)=>{
         const button = buttonRef.current;
         if (!button) return;
@@ -21,17 +29,21 @@ const RippleButton = /*#__PURE__*/ forwardRef(({ children, onClick, className, r
             x,
             y
         };
-        setRipples((prev)=>[
-                ...prev,
+        setRipples((previousRipples)=>[
+                ...previousRipples,
                 newRipple
             ]);
-        setTimeout(()=>{
-            setRipples((prev)=>prev.filter((r)=>r.id !== newRipple.id));
+        const timeoutId = globalThis.window.setTimeout(()=>{
+            setRipples((previousRipples)=>previousRipples.filter((ripple)=>ripple.id !== newRipple.id));
         }, 600);
+        timeoutIdsRef.current = [
+            ...timeoutIdsRef.current,
+            timeoutId
+        ];
     }, []);
     const handleClick = useCallback((event)=>{
         createRipple(event);
-        if (onClick) onClick(event);
+        onClick?.(event);
     }, [
         createRipple,
         onClick
@@ -45,10 +57,13 @@ const RippleButton = /*#__PURE__*/ forwardRef(({ children, onClick, className, r
         whileHover: {
             scale: 1.05
         },
-        className: cn("text-primary-foreground bg-primary relative h-10 cursor-pointer overflow-hidden rounded-lg px-4 py-2 text-sm font-medium focus:outline-none", className),
-        ...props,
+        className: cn(ripple_button_module.button, className),
+        ...restProps,
         children: [
-            children,
+            /*#__PURE__*/ jsx("span", {
+                className: ripple_button_module.content,
+                children: children
+            }),
             ripples.map((ripple)=>/*#__PURE__*/ jsx(motion.span, {
                     initial: {
                         scale: 0,
@@ -59,7 +74,7 @@ const RippleButton = /*#__PURE__*/ forwardRef(({ children, onClick, className, r
                         opacity: 0
                     },
                     transition: transition,
-                    className: cn("bg-primary-foreground pointer-events-none absolute size-5 rounded-full", rippleClassName),
+                    className: cn(ripple_button_module.ripple, rippleClassName),
                     style: {
                         top: ripple.y - 10,
                         left: ripple.x - 10

package/dist/components/ui/ripple-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/ripple-button.js","sources":["../../../src/components/ui/ripple-button.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {type HTMLMotionProps, motion, type Transition} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\ninterface Ripple {\r\n  id: number;\r\n  x: number;\r\n  y: number;\r\n}\r\n\r\ninterface RippleButtonProps extends HTMLMotionProps<\"button\"> {\r\n  children: React.ReactNode;\r\n  rippleClassName?: string;\r\n  scale?: number;\r\n  transition?: Transition;\r\n}\r\n\r\nconst RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(\r\n  ({children, onClick, className, rippleClassName, scale = 10, transition = {duration: 0.6, ease: \"easeOut\"}, ...props}, ref) => {\r\n    const [ripples, setRipples] = React.useState<Ripple[]>([]);\r\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n    React.useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement);\r\n\r\n    const createRipple = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\r\n      const button = buttonRef.current;\r\n      if (!button) return;\r\n\r\n      const rect = button.getBoundingClientRect();\r\n      const x = event.clientX - rect.left;\r\n      const y = event.clientY - rect.top;\r\n\r\n      const newRipple: Ripple = {\r\n        id: Date.now(),\r\n        x,\r\n        y,\r\n      };\r\n\r\n      setRipples((prev) => [...prev, newRipple]);\r\n\r\n      setTimeout(() => {\r\n        setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));\r\n      }, 600);\r\n    }, []);\r\n\r\n    const handleClick = React.useCallback(\r\n      (event: React.MouseEvent<HTMLButtonElement>) => {\r\n        createRipple(event);\r\n        if (onClick) {\r\n          onClick(event);\r\n        }\r\n      },\r\n      [createRipple, onClick],\r\n    );\r\n\r\n    return (\r\n      <motion.button\r\n        ref={buttonRef}\r\n        onClick={handleClick}\r\n        whileTap={{scale: 0.95}}\r\n        whileHover={{scale: 1.05}}\r\n        className={cn(\r\n          \"text-primary-foreground bg-primary relative h-10 cursor-pointer overflow-hidden rounded-lg px-4 py-2 text-sm font-medium focus:outline-none\",\r\n          className,\r\n        )}\r\n        {...props}>\r\n        {children}\r\n        {ripples.map((ripple) => (\r\n          <motion.span\r\n            key={ripple.id}\r\n            initial={{scale: 0, opacity: 0.5}}\r\n            animate={{scale, opacity: 0}}\r\n            transition={transition}\r\n            className={cn(\"bg-primary-foreground pointer-events-none absolute size-5 rounded-full\", rippleClassName)}\r\n            style={{\r\n              top: ripple.y - 10,\r\n              left: ripple.x - 10,\r\n            }}\r\n          />\r\n        ))}\r\n      </motion.button>\r\n    );\r\n  },\r\n);\r\n\r\nRippleButton.displayName = \"RippleButton\";\r\n\r\nexport {RippleButton, type RippleButtonProps};\r\n"],"names":["RippleButton","React","children","onClick","className","rippleClassName","scale","transition","props","ref","ripples","setRipples","buttonRef","createRipple","event","button","rect","x","y","newRipple","Date","prev","setTimeout","r","handleClick","motion","cn","ripple"],"mappings":";;;;;AAoBA,MAAMA,eAAe,WAAfA,GAAeC,WACnB,CAAC,EAACC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,EAAEC,eAAe,EAAEC,QAAQ,EAAE,EAAEC,aAAa;IAAC,UAAU;IAAK,MAAM;AAAS,CAAC,EAAE,GAAGC,OAAM,EAAEC;IACrH,MAAM,CAACC,SAASC,WAAW,GAAGV,SAAyB,EAAE;IACzD,MAAMW,YAAYX,OAAgC;IAClDA,oBAA0BQ,KAAK,IAAMG,UAAU,OAAO;IAEtD,MAAMC,eAAeZ,YAAkB,CAACa;QACtC,MAAMC,SAASH,UAAU,OAAO;QAChC,IAAI,CAACG,QAAQ;QAEb,MAAMC,OAAOD,OAAO,qBAAqB;QACzC,MAAME,IAAIH,MAAM,OAAO,GAAGE,KAAK,IAAI;QACnC,MAAME,IAAIJ,MAAM,OAAO,GAAGE,KAAK,GAAG;QAElC,MAAMG,YAAoB;YACxB,IAAIC,KAAK,GAAG;YACZH;YACAC;QACF;QAEAP,WAAW,CAACU,OAAS;mBAAIA;gBAAMF;aAAU;QAEzCG,WAAW;YACTX,WAAW,CAACU,OAASA,KAAK,MAAM,CAAC,CAACE,IAAMA,EAAE,EAAE,KAAKJ,UAAU,EAAE;QAC/D,GAAG;IACL,GAAG,EAAE;IAEL,MAAMK,cAAcvB,YAClB,CAACa;QACCD,aAAaC;QACb,IAAIX,SACFA,QAAQW;IAEZ,GACA;QAACD;QAAcV;KAAQ;IAGzB,OAAO,WAAP,GACE,KAACsB,OAAO,MAAM;QACZ,KAAKb;QACL,SAASY;QACT,UAAU;YAAC,OAAO;QAAI;QACtB,YAAY;YAAC,OAAO;QAAI;QACxB,WAAWE,GACT,+IACAtB;QAED,GAAGI,KAAK;;YACRN;YACAQ,QAAQ,GAAG,CAAC,CAACiB,SAAAA,WAAAA,GACZ,IAACF,OAAO,IAAI;oBAEV,SAAS;wBAAC,OAAO;wBAAG,SAAS;oBAAG;oBAChC,SAAS;wBAACnB;wBAAO,SAAS;oBAAC;oBAC3B,YAAYC;oBACZ,WAAWmB,GAAG,0EAA0ErB;oBACxF,OAAO;wBACL,KAAKsB,OAAO,CAAC,GAAG;wBAChB,MAAMA,OAAO,CAAC,GAAG;oBACnB;mBARKA,OAAO,EAAE;;;AAaxB;AAGF3B,aAAa,WAAW,GAAG"}
+{"version":3,"file":"components/ui/ripple-button.js","sources":["../../../src/components/ui/ripple-button.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion, type HTMLMotionProps, type Transition} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./ripple-button.module.css\";\r\n\r\ninterface Ripple {\r\n  id: number;\r\n  x: number;\r\n  y: number;\r\n}\r\n\r\n/** Props accepted by {@link RippleButton}. */\r\nexport interface RippleButtonProps extends HTMLMotionProps<\"button\"> {\r\n  /** Button contents rendered above the ripple layer. @default undefined */\r\n  children: React.ReactNode;\r\n  /** Additional CSS classes merged with each generated ripple. @default undefined */\r\n  rippleClassName?: string;\r\n  /** Final expansion scale applied to each ripple animation. @default 10 */\r\n  scale?: number;\r\n  /** Motion timing used for each ripple animation. @default {duration: 0.6, ease: \"easeOut\"} */\r\n  transition?: Transition;\r\n}\r\n\r\n/**\r\n * Renders a pressable button that emits animated ripples from the click position.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders a `<button>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n * - Client-side only (`\"use client\"` directive)\r\n *\r\n * @example\r\n * ```tsx\r\n * <RippleButton>Click me</RippleButton>\r\n * ```\r\n *\r\n * @see {@link RippleButtonProps} for available props\r\n */\r\nconst RippleButton = React.forwardRef<HTMLButtonElement, RippleButtonProps>(\r\n  ({children, onClick, className, rippleClassName, scale = 10, transition = {duration: 0.6, ease: \"easeOut\"}, ...props}, ref) => {\r\n    // eslint-disable-next-line sonarjs/no-unused-vars -- removing React key avoids implicit key spreading\r\n    const {key: _ignoredKey, ...restProps} = props;\r\n    const [ripples, setRipples] = React.useState<ReadonlyArray<Ripple>>([]);\r\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n    const timeoutIdsRef = React.useRef<ReadonlyArray<number>>([]);\r\n\r\n    React.useImperativeHandle(ref, () => buttonRef.current!, []);\r\n\r\n    React.useEffect(\r\n      () => () => {\r\n        timeoutIdsRef.current.forEach((timeoutId) => {\r\n          globalThis.window.clearTimeout(timeoutId);\r\n        });\r\n      },\r\n      [],\r\n    );\r\n\r\n    const createRipple = React.useCallback((event: React.MouseEvent<HTMLButtonElement>): void => {\r\n      const button = buttonRef.current;\r\n      if (!button) {\r\n        return;\r\n      }\r\n\r\n      const rect = button.getBoundingClientRect();\r\n      const x = event.clientX - rect.left;\r\n      const y = event.clientY - rect.top;\r\n\r\n      const newRipple: Ripple = {\r\n        id: Date.now(),\r\n        x,\r\n        y,\r\n      };\r\n\r\n      setRipples((previousRipples) => [...previousRipples, newRipple]);\r\n\r\n      const timeoutId = globalThis.window.setTimeout(() => {\r\n        setRipples((previousRipples) => previousRipples.filter((ripple) => ripple.id !== newRipple.id));\r\n      }, 600);\r\n\r\n      timeoutIdsRef.current = [...timeoutIdsRef.current, timeoutId];\r\n    }, []);\r\n\r\n    const handleClick = React.useCallback(\r\n      (event: React.MouseEvent<HTMLButtonElement>): void => {\r\n        createRipple(event);\r\n        onClick?.(event);\r\n      },\r\n      [createRipple, onClick],\r\n    );\r\n\r\n    return (\r\n      <motion.button\r\n        ref={buttonRef}\r\n        onClick={handleClick}\r\n        whileTap={{scale: 0.95}}\r\n        whileHover={{scale: 1.05}}\r\n        className={cn(styles.button, className)}\r\n        {...restProps}>\r\n        <span className={styles.content}>{children}</span>\r\n        {ripples.map((ripple) => (\r\n          <motion.span\r\n            key={ripple.id}\r\n            initial={{scale: 0, opacity: 0.5}}\r\n            animate={{scale, opacity: 0}}\r\n            transition={transition}\r\n            className={cn(styles.ripple, rippleClassName)}\r\n            style={{\r\n              top: ripple.y - 10,\r\n              left: ripple.x - 10,\r\n            }}\r\n          />\r\n        ))}\r\n      </motion.button>\r\n    );\r\n  },\r\n);\r\n\r\nRippleButton.displayName = \"RippleButton\";\r\n\r\nexport {RippleButton};\r\n"],"names":["RippleButton","React","children","onClick","className","rippleClassName","scale","transition","props","ref","_ignoredKey","restProps","ripples","setRipples","buttonRef","timeoutIdsRef","timeoutId","globalThis","createRipple","event","button","rect","x","y","newRipple","Date","previousRipples","ripple","handleClick","motion","cn","styles"],"mappings":";;;;;;AA0CA,MAAMA,eAAe,WAAHA,GAAGC,WACnB,CAAC,EAACC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,EAAEC,eAAe,EAAEC,QAAQ,EAAE,EAAEC,aAAa;IAAC,UAAU;IAAK,MAAM;AAAS,CAAC,EAAE,GAAGC,OAAM,EAAEC;IAErH,MAAM,EAAC,KAAKC,WAAW,EAAE,GAAGC,WAAU,GAAGH;IACzC,MAAM,CAACI,SAASC,WAAW,GAAGZ,SAAsC,EAAE;IACtE,MAAMa,YAAYb,OAAgC;IAClD,MAAMc,gBAAgBd,OAAoC,EAAE;IAE5DA,oBAA0BQ,KAAK,IAAMK,UAAU,OAAO,EAAG,EAAE;IAE3Db,UACE,IAAM;YACJc,cAAc,OAAO,CAAC,OAAO,CAAC,CAACC;gBAC7BC,WAAW,MAAM,CAAC,YAAY,CAACD;YACjC;QACF,GACA,EAAE;IAGJ,MAAME,eAAejB,YAAkB,CAACkB;QACtC,MAAMC,SAASN,UAAU,OAAO;QAChC,IAAI,CAACM,QACH;QAGF,MAAMC,OAAOD,OAAO,qBAAqB;QACzC,MAAME,IAAIH,MAAM,OAAO,GAAGE,KAAK,IAAI;QACnC,MAAME,IAAIJ,MAAM,OAAO,GAAGE,KAAK,GAAG;QAElC,MAAMG,YAAoB;YACxB,IAAIC,KAAK,GAAG;YACZH;YACAC;QACF;QAEAV,WAAW,CAACa,kBAAoB;mBAAIA;gBAAiBF;aAAU;QAE/D,MAAMR,YAAYC,WAAW,MAAM,CAAC,UAAU,CAAC;YAC7CJ,WAAW,CAACa,kBAAoBA,gBAAgB,MAAM,CAAC,CAACC,SAAWA,OAAO,EAAE,KAAKH,UAAU,EAAE;QAC/F,GAAG;QAEHT,cAAc,OAAO,GAAG;eAAIA,cAAc,OAAO;YAAEC;SAAU;IAC/D,GAAG,EAAE;IAEL,MAAMY,cAAc3B,YAClB,CAACkB;QACCD,aAAaC;QACbhB,UAAUgB;IACZ,GACA;QAACD;QAAcf;KAAQ;IAGzB,OAAO,WAAP,GACE,KAAC0B,OAAO,MAAM;QACZ,KAAKf;QACL,SAASc;QACT,UAAU;YAAC,OAAO;QAAI;QACtB,YAAY;YAAC,OAAO;QAAI;QACxB,WAAWE,GAAGC,qBAAAA,MAAa,EAAE3B;QAC5B,GAAGO,SAAS;;0BACb,IAAC;gBAAK,WAAWoB,qBAAAA,OAAc;0BAAG7B;;YACjCU,QAAQ,GAAG,CAAC,CAACe,SAAAA,WAAAA,GACZ,IAACE,OAAO,IAAI;oBAEV,SAAS;wBAAC,OAAO;wBAAG,SAAS;oBAAG;oBAChC,SAAS;wBAACvB;wBAAO,SAAS;oBAAC;oBAC3B,YAAYC;oBACZ,WAAWuB,GAAGC,qBAAAA,MAAa,EAAE1B;oBAC7B,OAAO;wBACL,KAAKsB,OAAO,CAAC,GAAG;wBAChB,MAAMA,OAAO,CAAC,GAAG;oBACnB;mBARKA,OAAO,EAAE;;;AAaxB;AAGF3B,aAAa,WAAW,GAAG"}

package/dist/components/ui/ripple-button.module.js

@@ -0,0 +1,9 @@
+import "./ripple-button_module.css";
+const ripple_button_module = {
+    button: "button-IxGPjV",
+    content: "content-yAWmOo",
+    ripple: "ripple-GAek8g"
+};
+export default ripple_button_module;
+
+//# sourceMappingURL=ripple-button.module.js.map

package/dist/components/ui/ripple-button.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/ripple-button.module.js","sources":["../../../src/components/ui/ripple-button.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./ripple-button_module.css\"\nexport default {\"button\":\"button-IxGPjV\",\"content\":\"content-yAWmOo\",\"ripple\":\"ripple-GAek8g\"};"],"names":[],"mappings":";AAEA,6BAAe;IAAC,QAAS;IAAgB,SAAU;IAAiB,QAAS;AAAe"}