@arolariu/components 0.4.2 → 1.0.0

package/dist/components/ui/dot-background.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/dot-background.js","sources":["../../../src/components/ui/dot-background.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport {motion} from \"motion/react\";\r\nimport React, {useEffect, useId, useRef, useState} from \"react\";\r\n\r\n/**\r\n *  DotBackground Component Props\r\n * @param width The horizontal spacing between dots\r\n * @param height The vertical spacing between dots\r\n * @param x The x-offset of the entire pattern\r\n * @param y The y-offset of the entire pattern\r\n * @param cx The x-offset of individual dots\r\n * @param cy The y-offset of individual dots\r\n * @param cr The radius of each dot\r\n * @param className Additional CSS classes to apply to the SVG container\r\n * @param glow Whether dots should have a glowing animation effect\r\n */\r\ninterface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {\r\n  width?: number;\r\n  height?: number;\r\n  x?: number;\r\n  y?: number;\r\n  cx?: number;\r\n  cy?: number;\r\n  cr?: number;\r\n  className?: string;\r\n  glow?: boolean;\r\n  [key: string]: unknown;\r\n}\r\n\r\n/**\r\n * DotBackground Component\r\n * A React component that creates an animated or static dot pattern background using SVG.\r\n * The pattern automatically adjusts to fill its container and can optionally display glowing dots.\r\n * @see DotBackgroundProps for the props interface.\r\n * @example\r\n * // Basic usage\r\n * <DotBackground />\r\n *\r\n * // With glowing effect and custom spacing\r\n * <DotBackground\r\n *   width={20}\r\n *   height={20}\r\n *   glow={true}\r\n *   className=\"opacity-50\"\r\n * />\r\n *@summary Summary:\r\n * - The component is client-side only (\"use client\")\r\n * - Automatically responds to container size changes\r\n * - When glow is enabled, dots will animate with random delays and durations\r\n * - Uses Motion for animations\r\n * - Dots color can be controlled via the text color utility classes\r\n */\r\n\r\nexport function DotBackground({\r\n  width = 16,\r\n  height = 16,\r\n  x = 0,\r\n  y = 0,\r\n  cx = 1,\r\n  cy = 1,\r\n  cr = 1,\r\n  className,\r\n  glow = false,\r\n  ...props\r\n}: DotBackgroundProps) {\r\n  const id = useId();\r\n  const containerRef = useRef<SVGSVGElement>(null);\r\n  const [dimensions, setDimensions] = useState({width: 0, height: 0});\r\n\r\n  useEffect(() => {\r\n    const updateDimensions = () => {\r\n      if (containerRef.current) {\r\n        const {width, height} = containerRef.current.getBoundingClientRect();\r\n        setDimensions({width, height});\r\n      }\r\n    };\r\n\r\n    updateDimensions();\r\n    window.addEventListener(\"resize\", updateDimensions);\r\n    return () => window.removeEventListener(\"resize\", updateDimensions);\r\n  }, []);\r\n\r\n  const dots = Array.from(\r\n    {\r\n      length: Math.ceil(dimensions.width / width) * Math.ceil(dimensions.height / height),\r\n    },\r\n    (_, i) => {\r\n      const col = i % Math.ceil(dimensions.width / width);\r\n      const row = Math.floor(i / Math.ceil(dimensions.width / width));\r\n      return {\r\n        x: col * width + cx,\r\n        y: row * height + cy,\r\n        delay: Math.random() * 5,\r\n        duration: Math.random() * 3 + 2,\r\n      };\r\n    },\r\n  );\r\n\r\n  return (\r\n    <svg\r\n      ref={containerRef}\r\n      aria-hidden='true'\r\n      className={cn(\"pointer-events-none absolute inset-0 h-full w-full\", className)}\r\n      {...props}>\r\n      <defs>\r\n        <radialGradient id={`${id}-gradient`}>\r\n          <stop\r\n            offset='0%'\r\n            stopColor='currentColor'\r\n            stopOpacity='1'\r\n          />\r\n          <stop\r\n            offset='100%'\r\n            stopColor='currentColor'\r\n            stopOpacity='0'\r\n          />\r\n        </radialGradient>\r\n      </defs>\r\n      {dots.map((dot) => (\r\n        <motion.circle\r\n          key={`${dot.x}-${dot.y}`}\r\n          cx={dot.x}\r\n          cy={dot.y}\r\n          r={cr}\r\n          fill={glow ? `url(#${id}-gradient)` : \"currentColor\"}\r\n          className='text-neutral-400/80'\r\n          initial={glow ? {opacity: 0.4, scale: 1} : {}}\r\n          animate={\r\n            glow\r\n              ? {\r\n                  opacity: [0.4, 1, 0.4],\r\n                  scale: [1, 1.5, 1],\r\n                }\r\n              : {}\r\n          }\r\n          transition={\r\n            glow\r\n              ? {\r\n                  duration: dot.duration,\r\n                  repeat: Infinity,\r\n                  repeatType: \"reverse\",\r\n                  delay: dot.delay,\r\n                  ease: \"easeInOut\",\r\n                }\r\n              : {}\r\n          }\r\n        />\r\n      ))}\r\n    </svg>\r\n  );\r\n}\r\n"],"names":["DotBackground","width","height","x","y","cx","cy","cr","className","glow","props","id","useId","containerRef","useRef","dimensions","setDimensions","useState","useEffect","updateDimensions","window","dots","Array","Math","_","i","col","row","cn","dot","motion","Infinity"],"mappings":";;;;;AAuDO,SAASA,cAAc,EAC5BC,QAAQ,EAAE,EACVC,SAAS,EAAE,EACXC,IAAI,CAAC,EACLC,IAAI,CAAC,EACLC,KAAK,CAAC,EACNC,KAAK,CAAC,EACNC,KAAK,CAAC,EACNC,SAAS,EACTC,OAAO,KAAK,EACZ,GAAGC,OACgB;IACnB,MAAMC,KAAKC;IACX,MAAMC,eAAeC,OAAsB;IAC3C,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAS;QAAC,OAAO;QAAG,QAAQ;IAAC;IAEjEC,UAAU;QACR,MAAMC,mBAAmB;YACvB,IAAIN,aAAa,OAAO,EAAE;gBACxB,MAAM,EAACZ,KAAK,EAAEC,MAAM,EAAC,GAAGW,aAAa,OAAO,CAAC,qBAAqB;gBAClEG,cAAc;oBAACf;oBAAOC;gBAAM;YAC9B;QACF;QAEAiB;QACAC,OAAO,gBAAgB,CAAC,UAAUD;QAClC,OAAO,IAAMC,OAAO,mBAAmB,CAAC,UAAUD;IACpD,GAAG,EAAE;IAEL,MAAME,OAAOC,MAAM,IAAI,CACrB;QACE,QAAQC,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd,SAASsB,KAAK,IAAI,CAACR,WAAW,MAAM,GAAGb;IAC9E,GACA,CAACsB,GAAGC;QACF,MAAMC,MAAMD,IAAIF,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd;QAC7C,MAAM0B,MAAMJ,KAAK,KAAK,CAACE,IAAIF,KAAK,IAAI,CAACR,WAAW,KAAK,GAAGd;QACxD,OAAO;YACL,GAAGyB,MAAMzB,QAAQI;YACjB,GAAGsB,MAAMzB,SAASI;YAClB,OAAOiB,AAAgB,IAAhBA,KAAK,MAAM;YAClB,UAAUA,AAAgB,IAAhBA,KAAK,MAAM,KAAS;QAChC;IACF;IAGF,OAAO,WAAP,GACE,KAAC;QACC,KAAKV;QACL,eAAY;QACZ,WAAWe,GAAG,sDAAsDpB;QACnE,GAAGE,KAAK;;0BACT,IAAC;0BACC,mBAAC;oBAAe,IAAI,GAAGC,GAAG,SAAS,CAAC;;sCAClC,IAAC;4BACC,QAAO;4BACP,WAAU;4BACV,aAAY;;sCAEd,IAAC;4BACC,QAAO;4BACP,WAAU;4BACV,aAAY;;;;;YAIjBU,KAAK,GAAG,CAAC,CAACQ,MAAAA,WAAAA,GACT,IAACC,OAAO,MAAM;oBAEZ,IAAID,IAAI,CAAC;oBACT,IAAIA,IAAI,CAAC;oBACT,GAAGtB;oBACH,MAAME,OAAO,CAAC,KAAK,EAAEE,GAAG,UAAU,CAAC,GAAG;oBACtC,WAAU;oBACV,SAASF,OAAO;wBAAC,SAAS;wBAAK,OAAO;oBAAC,IAAI,CAAC;oBAC5C,SACEA,OACI;wBACE,SAAS;4BAAC;4BAAK;4BAAG;yBAAI;wBACtB,OAAO;4BAAC;4BAAG;4BAAK;yBAAE;oBACpB,IACA,CAAC;oBAEP,YACEA,OACI;wBACE,UAAUoB,IAAI,QAAQ;wBACtB,QAAQE;wBACR,YAAY;wBACZ,OAAOF,IAAI,KAAK;wBAChB,MAAM;oBACR,IACA,CAAC;mBAxBF,GAAGA,IAAI,CAAC,CAAC,CAAC,EAAEA,IAAI,CAAC,EAAE;;;AA8BlC"}
+{"version":3,"file":"components/ui/dot-background.js","sources":["../../../src/components/ui/dot-background.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion} from \"motion/react\";\r\nimport React, {useEffect, useId, useRef, useState} from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./dot-background.module.css\";\r\n\r\n/** Props accepted by {@link DotBackground}. */\r\nexport interface DotBackgroundProps extends React.SVGProps<SVGSVGElement> {\r\n  /** Horizontal spacing between generated dots. @default 16 */\r\n  width?: number;\r\n  /** Vertical spacing between generated dots. @default 16 */\r\n  height?: number;\r\n  /** Horizontal offset applied to the dot grid. @default 0 */\r\n  x?: number;\r\n  /** Vertical offset applied to the dot grid. @default 0 */\r\n  y?: number;\r\n  /** Horizontal center offset for each generated circle. @default 1 */\r\n  cx?: number;\r\n  /** Vertical center offset for each generated circle. @default 1 */\r\n  cy?: number;\r\n  /** Radius used for each generated dot. @default 1 */\r\n  cr?: number;\r\n  /** Additional CSS classes merged with the root SVG element. @default undefined */\r\n  className?: string;\r\n  /** Enables pulsing radial glow animation for every dot. @default false */\r\n  glow?: boolean;\r\n}\r\n\r\n/**\r\n * Renders an animated dot grid with an optional glowing pulse effect.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders an `<svg>` 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 * <DotBackground glow />\r\n * ```\r\n *\r\n * @see {@link DotBackgroundProps} for available props\r\n */\r\nconst DotBackground = React.forwardRef<SVGSVGElement, DotBackgroundProps>(\r\n  (\r\n    {width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, glow = false, ...props}: Readonly<DotBackgroundProps>,\r\n    ref,\r\n  ): React.JSX.Element => {\r\n    const id = useId();\r\n    const containerRef = useRef<SVGSVGElement>(null);\r\n    const [dimensions, setDimensions] = useState({width: 0, height: 0});\r\n\r\n    const setRefs = React.useCallback(\r\n      (node: SVGSVGElement | null): void => {\r\n        containerRef.current = node;\r\n\r\n        if (typeof ref === \"function\") {\r\n          ref(node);\r\n          return;\r\n        }\r\n\r\n        if (ref) {\r\n          ref.current = node;\r\n        }\r\n      },\r\n      [ref],\r\n    );\r\n\r\n    useEffect(() => {\r\n      const updateDimensions = (): void => {\r\n        if (!containerRef.current) {\r\n          return;\r\n        }\r\n\r\n        const rect = containerRef.current.getBoundingClientRect();\r\n        // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect -- resize observer style update is the hook's purpose\r\n        setDimensions({width: rect.width, height: rect.height});\r\n      };\r\n\r\n      updateDimensions();\r\n      globalThis.window.addEventListener(\"resize\", updateDimensions);\r\n      return () => globalThis.window.removeEventListener(\"resize\", updateDimensions);\r\n    }, []);\r\n\r\n    const totalColumns = Math.ceil(dimensions.width / width);\r\n    const dots = Array.from(\r\n      {\r\n        length: totalColumns * Math.ceil(dimensions.height / height),\r\n      },\r\n      (_, index) => {\r\n        const column = index % Math.max(totalColumns, 1);\r\n        const row = Math.floor(index / Math.max(totalColumns, 1));\r\n        return {\r\n          x: x + column * width + cx,\r\n          y: y + row * height + cy,\r\n          delay: Math.random() * 5,\r\n          duration: Math.random() * 3 + 2,\r\n        };\r\n      },\r\n    );\r\n\r\n    return (\r\n      <svg\r\n        ref={setRefs}\r\n        aria-hidden='true'\r\n        className={cn(styles.root, className)}\r\n        {...props}>\r\n        <defs>\r\n          <radialGradient id={`${id}-gradient`}>\r\n            <stop\r\n              offset='0%'\r\n              stopColor='currentColor'\r\n              stopOpacity='1'\r\n            />\r\n            <stop\r\n              offset='100%'\r\n              stopColor='currentColor'\r\n              stopOpacity='0'\r\n            />\r\n          </radialGradient>\r\n        </defs>\r\n        {dots.map((dot) => (\r\n          <motion.circle\r\n            key={`${dot.x}-${dot.y}`}\r\n            cx={dot.x}\r\n            cy={dot.y}\r\n            r={cr}\r\n            fill={glow ? `url(#${id}-gradient)` : \"currentColor\"}\r\n            className={styles.dot}\r\n            initial={glow ? {opacity: 0.4, scale: 1} : {}}\r\n            animate={\r\n              glow\r\n                ? {\r\n                    opacity: [0.4, 1, 0.4],\r\n                    scale: [1, 1.5, 1],\r\n                  }\r\n                : {}\r\n            }\r\n            transition={\r\n              glow\r\n                ? {\r\n                    duration: dot.duration,\r\n                    repeat: Infinity,\r\n                    repeatType: \"reverse\",\r\n                    delay: dot.delay,\r\n                    ease: \"easeInOut\",\r\n                  }\r\n                : {}\r\n            }\r\n          />\r\n        ))}\r\n      </svg>\r\n    );\r\n  },\r\n);\r\nDotBackground.displayName = \"DotBackground\";\r\n\r\nexport {DotBackground};\r\n"],"names":["DotBackground","React","width","height","x","y","cx","cy","cr","className","glow","props","ref","id","useId","containerRef","useRef","dimensions","setDimensions","useState","setRefs","node","useEffect","updateDimensions","rect","globalThis","totalColumns","Math","dots","Array","_","index","column","row","cn","styles","dot","motion","Infinity"],"mappings":"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"}

package/dist/components/ui/dot-background.module.js

@@ -0,0 +1,8 @@
+import "./dot-background_module.css";
+const dot_background_module = {
+    root: "root-yMOWPb",
+    dot: "dot-LGut9V"
+};
+export default dot_background_module;
+
+//# sourceMappingURL=dot-background.module.js.map

package/dist/components/ui/dot-background.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/dot-background.module.js","sources":["../../../src/components/ui/dot-background.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./dot-background_module.css\"\nexport default {\"root\":\"root-yMOWPb\",\"dot\":\"dot-LGut9V\"};"],"names":[],"mappings":";AAEA,8BAAe;IAAC,MAAO;IAAc,KAAM;AAAY"}

package/dist/components/ui/dot-background_module.css

@@ -0,0 +1,15 @@
+.root-yMOWPb {
+  color: color-mix(in oklch,var(--ac-muted-foreground),transparent 20%);
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+}
+
+.dot-LGut9V {
+  color: inherit;
+}
+
+
+/*# sourceMappingURL=dot-background_module.css.map */

package/dist/components/ui/dot-background_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/dot-background.module.css","webpack://./src/components/ui/dot-background.module.css"],"names":[],"mappings":"AADA;ECEE,qEAAqE;EACrE,oBAAoB;EACpB,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,QAAQ;AACV;;AAEA;EACE,cAAc;AAChB","sourcesContent":[".root{color:color-mix(in oklch,var(--ac-muted-foreground),transparent 20%);height:100%;inset:0;pointer-events:none;position:absolute;width:100%}.dot{color:inherit}",".root {\n  color: color-mix(in oklch,var(--ac-muted-foreground),transparent 20%);\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  inset: 0;\n}\n\n.dot {\n  color: inherit;\n}\n"],"sourceRoot":""}

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

@@ -1,23 +1,292 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import { useRender } from "@base-ui/react/use-render";
 import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul";
-declare const Drawer: {
-    ({ shouldScaleBackground, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+interface DrawerProps extends React.ComponentPropsWithRef<typeof BaseDrawer.Root> {
+}
+interface DrawerTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Trigger>, "className"> {
+    /**
+     * Applies additional CSS classes to the component root element.
+     * @default undefined
+     */
+    className?: string;
+}
+interface DrawerOverlayProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Backdrop>, "className"> {
+    /**
+     * Applies additional CSS classes to the component root element.
+     * @default undefined
+     */
+    className?: string;
+}
+interface DrawerContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Popup>, "className"> {
+    /**
+     * Applies additional CSS classes to the component root element.
+     * @default undefined
+     */
+    className?: string;
+}
+interface DrawerHeaderProps extends React.ComponentPropsWithRef<"div"> {
+    /**
+     * Applies additional CSS classes to the component root element.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Overrides the default rendered element while preserving component behavior.
+     * @default undefined
+     */
+    render?: useRender.RenderProp<Record<string, never>>;
+    /**
+     * Enables child element composition instead of rendering the default wrapper.
+     * @default false
+     * @deprecated Prefer Base UI's `render` prop.
+     */
+    asChild?: boolean;
+}
+interface DrawerFooterProps extends React.ComponentPropsWithRef<"div"> {
+    /**
+     * Applies additional CSS classes to the component root element.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Overrides the default rendered element while preserving component behavior.
+     * @default undefined
+     */
+    render?: useRender.RenderProp<Record<string, never>>;
+    /**
+     * Enables child element composition instead of rendering the default wrapper.
+     * @default false
+     * @deprecated Prefer Base UI's `render` prop.
+     */
+    asChild?: boolean;
+}
+interface DrawerTitleProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Title>, "className"> {
+    /**
+     * Applies additional CSS classes to the component root element.
+     * @default undefined
+     */
+    className?: string;
+}
+interface DrawerDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof BaseDrawer.Description>, "className"> {
+    /**
+     * Applies additional CSS classes to the component root element.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * Coordinates drawer state and accessibility behavior.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <Drawer>Content</Drawer>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+declare function Drawer(props: Readonly<Drawer.Props>): React.ReactElement;
+declare namespace Drawer {
+    var displayName: string;
+}
+/**
+ * Renders the drawer trigger.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerTrigger>Content</DrawerTrigger>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<DrawerTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Provides the drawer portal container.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerPortal>Content</DrawerPortal>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+declare const DrawerPortal: typeof BaseDrawer.Portal & {
+    displayName?: string;
 };
-declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const DrawerPortal: typeof import("vaul").Portal;
-declare const DrawerClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DrawerHeader: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+/**
+ * Renders the drawer close.
+ *
+ * @remarks
+ * - Delegates structure and state to the underlying Base UI primitive
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Preserves the underlying primitive API for advanced composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerClose>Content</DrawerClose>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+declare const DrawerClose: typeof BaseDrawer.Close & {
+    displayName?: string;
 };
-declare const DrawerFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Renders the drawer overlay.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerOverlay>Content</DrawerOverlay>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+declare function DrawerOverlay(props: Readonly<DrawerOverlay.Props>): React.ReactElement;
+declare namespace DrawerOverlay {
+    var displayName: string;
+}
+/**
+ * Renders the drawer content.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerContent>Content</DrawerContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders the drawer header.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerHeader>Content</DrawerHeader>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+declare function DrawerHeader(props: Readonly<DrawerHeader.Props>): React.ReactElement;
+declare namespace DrawerHeader {
+    var displayName: string;
+}
+/**
+ * Renders the drawer footer.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerFooter>Content</DrawerFooter>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+declare function DrawerFooter(props: Readonly<DrawerFooter.Props>): React.ReactElement;
+declare namespace DrawerFooter {
+    var displayName: string;
+}
+/**
+ * Renders the drawer title.
+ *
+ * @remarks
+ * - Renders a `<h2>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerTitle>Content</DrawerTitle>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+declare function DrawerTitle(props: Readonly<DrawerTitle.Props>): React.ReactElement;
+declare namespace DrawerTitle {
+    var displayName: string;
+}
+/**
+ * Renders the drawer description.
+ *
+ * @remarks
+ * - Renders a `<p>` element by default
+ * - Built on {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <DrawerDescription>Content</DrawerDescription>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
+ */
+declare function DrawerDescription(props: Readonly<DrawerDescription.Props>): React.ReactElement;
+declare namespace DrawerDescription {
+    var displayName: string;
+}
+declare namespace Drawer {
+    type Props = DrawerProps;
+    type State = BaseDrawer.Root.State;
+}
+declare namespace DrawerTrigger {
+    type Props = DrawerTriggerProps;
+    type State = BaseDrawer.Trigger.State;
+}
+declare namespace DrawerOverlay {
+    type Props = DrawerOverlayProps;
+    type State = BaseDrawer.Backdrop.State;
+}
+declare namespace DrawerContent {
+    type Props = DrawerContentProps;
+    type State = BaseDrawer.Popup.State;
+}
+declare namespace DrawerHeader {
+    type Props = DrawerHeaderProps;
+    type State = Record<string, never>;
+}
+declare namespace DrawerFooter {
+    type Props = DrawerFooterProps;
+    type State = Record<string, never>;
+}
+declare namespace DrawerTitle {
+    type Props = DrawerTitleProps;
+    type State = BaseDrawer.Title.State;
+}
+declare namespace DrawerDescription {
+    type Props = DrawerDescriptionProps;
+    type State = BaseDrawer.Description.State;
+}
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };
 //# sourceMappingURL=drawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,MAAM,IAAI,eAAe,EAAC,MAAM,MAAM,CAAC;AAI/C,QAAA,MAAM,MAAM;0CAA8C,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;;CAK1G,CAAC;AAGF,QAAA,MAAM,aAAa,+HAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,8BAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,6HAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,kOASjB,CAAC;AAGH,QAAA,MAAM,aAAa,kOAiBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAA2B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKhF,CAAC;AAGF,QAAA,MAAM,YAAY;8BAA2B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKhF,CAAC;AAGF,QAAA,MAAM,WAAW,qLASf,CAAC;AAGH,QAAA,MAAM,iBAAiB,+LASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/drawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/drawer.js

@@ -1,61 +1,138 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Drawer } from "vaul";
+import { Drawer } from "@base-ui/react/drawer";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { forwardRef, isValidElement } from "react";
 import { cn } from "../../lib/utilities.js";
-const drawer_Drawer = ({ shouldScaleBackground = true, ...props })=>/*#__PURE__*/ jsx(Drawer.Root, {
-        shouldScaleBackground: shouldScaleBackground,
+import drawer_module from "./drawer.module.js";
+function drawer_Drawer(props) {
+    return /*#__PURE__*/ jsx(Drawer.Root, {
         ...props
     });
-drawer_Drawer.displayName = "Drawer";
-const DrawerTrigger = Drawer.Trigger;
+}
+const DrawerTrigger = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Drawer.Trigger, {
+        ref: ref,
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "button",
+            render: render,
+            props: mergeProps({
+                className
+            }, {})
+        }),
+        children: children
+    });
+});
 const DrawerPortal = Drawer.Portal;
 const DrawerClose = Drawer.Close;
-const DrawerOverlay = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Overlay, {
-        ref: ref,
-        className: cn("fixed inset-0 z-50 bg-black/80", className),
-        ...props
-    }));
-DrawerOverlay.displayName = Drawer.Overlay.displayName;
-const DrawerContent = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(DrawerPortal, {
+function DrawerOverlay(props) {
+    const { className, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Drawer.Backdrop, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            render: render,
+            props: mergeProps({
+                className: cn(drawer_module.backdrop, className)
+            }, {})
+        })
+    });
+}
+const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsxs(DrawerPortal, {
         children: [
             /*#__PURE__*/ jsx(DrawerOverlay, {}),
-            /*#__PURE__*/ jsxs(Drawer.Content, {
+            /*#__PURE__*/ jsxs(Drawer.Popup, {
                 ref: ref,
-                className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950", className),
-                ...props,
+                ...otherProps,
+                render: useRender({
+                    defaultTagName: "div",
+                    render: render,
+                    props: mergeProps({
+                        className: cn(drawer_module.popup, className)
+                    }, {})
+                }),
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-neutral-100 dark:bg-neutral-800"
+                        className: drawer_module.handle
                     }),
-                    children
+                    /*#__PURE__*/ jsx(Drawer.Content, {
+                        className: drawer_module.content,
+                        children: children
+                    })
                 ]
             })
         ]
-    }));
-DrawerContent.displayName = "DrawerContent";
-const DrawerHeader = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
-        className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
-        ...props
     });
-DrawerHeader.displayName = "DrawerHeader";
-const DrawerFooter = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
-        className: cn("mt-auto flex flex-col gap-2 p-4", className),
-        ...props
+});
+function DrawerHeader(props) {
+    const { asChild = false, children, className, render, ...otherProps } = props;
+    const renderProp = asChild && /*#__PURE__*/ isValidElement(children) ? children : render;
+    return useRender({
+        defaultTagName: "div",
+        render: renderProp,
+        props: mergeProps({
+            className: cn(drawer_module.header, className)
+        }, otherProps, {
+            children: renderProp ? void 0 : children
+        })
     });
+}
+function DrawerFooter(props) {
+    const { asChild = false, children, className, render, ...otherProps } = props;
+    const renderProp = asChild && /*#__PURE__*/ isValidElement(children) ? children : render;
+    return useRender({
+        defaultTagName: "div",
+        render: renderProp,
+        props: mergeProps({
+            className: cn(drawer_module.footer, className)
+        }, otherProps, {
+            children: renderProp ? void 0 : children
+        })
+    });
+}
+function DrawerTitle(props) {
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Drawer.Title, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "h2",
+            render: render,
+            props: mergeProps({
+                className: cn(drawer_module.title, className)
+            }, {})
+        }),
+        children: children
+    });
+}
+function DrawerDescription(props) {
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Drawer.Description, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "p",
+            render: render,
+            props: mergeProps({
+                className: cn(drawer_module.description, className)
+            }, {})
+        }),
+        children: children
+    });
+}
+drawer_Drawer.displayName = "Drawer";
+DrawerTrigger.displayName = "DrawerTrigger";
+DrawerPortal.displayName = "DrawerPortal";
+DrawerClose.displayName = "DrawerClose";
+DrawerOverlay.displayName = "DrawerOverlay";
+DrawerContent.displayName = "DrawerContent";
+DrawerHeader.displayName = "DrawerHeader";
 DrawerFooter.displayName = "DrawerFooter";
-const DrawerTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Title, {
-        ref: ref,
-        className: cn("text-lg leading-none font-semibold tracking-tight", className),
-        ...props
-    }));
-DrawerTitle.displayName = Drawer.Title.displayName;
-const DrawerDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Description, {
-        ref: ref,
-        className: cn("text-sm text-neutral-500 dark:text-neutral-400", className),
-        ...props
-    }));
-DrawerDescription.displayName = Drawer.Description.displayName;
-export { drawer_Drawer as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
+DrawerTitle.displayName = "DrawerTitle";
+DrawerDescription.displayName = "DrawerDescription";
+export { DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, drawer_Drawer as Drawer };
 
 //# sourceMappingURL=drawer.js.map