luan-ui 0.5.2 → 0.6.0

package/README.md

@@ -1,6 +1,6 @@
 # luan-ui
 
-Luan UI is built with Tailwind on top of Radix UI Primitives. It includes Responsive values that can be defined based on breakpoints.
+Luan UI is built with Tailwind on top of Base UI Primitives. It includes Responsive values that can be defined based on breakpoints.
 
 ## Installation
 
@@ -29,12 +29,16 @@ In your project, you have to import the custom config to enable animations and c
 
 Now you should be able to use the components in your project.
 
+## Requirements
+
+This library requires **React 19** or higher due to its use of the ref-as-prop pattern.
+
 ## Philosophy
 
 While I strive for some standardisation and enforcement of best practices, it is equally important that all components remain flexible and that they easily adapt to changing requirements among consumers. Having common design requirements shouldn't limit consumers in their way how they use the components.
 
 Therefore all the components pass on their standard HTML props. You can use and overwrite all props like id, event handlers and so on. Also all components forward their ref, hence they can be targeted by other libraries or with settings refs yourself.
 
-Radix Ui is used as a headless UI library. Using a headless ui library gives you the advantage to have full control over the styling, while the "heavy-lifting" - especially in regards to accessibility - is done for you already. Because handling focus, setting the appropriate aria attributes and similar things are a difficult task to do right.
+Base UI is used as a headless UI library. Using a headless ui library gives you the advantage to have full control over the styling, while the "heavy-lifting" - especially in regards to accessibility - is done for you already. Because handling focus, setting the appropriate aria attributes and similar things are a difficult task to do right.
 
-All of the components are built with composability and extensibility in mind.
+All of the components are built with composability and extensibility in mind.

package/dist/components/accordion/accordion.d.ts

@@ -1,12 +1,12 @@
-import { Accordion as RadixAccordion } from "radix-ui";
-import { type ComponentPropsWithoutRef } from "react";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import type { ComponentProps } from "react";
 /**
  * Accordion component that allows users to expand and collapse content sections.
- * Built on top of Radix UI's Accordion primitive.
+ * Built on top of Base UI's Accordion primitive.
  *
  * @example
  * ```tsx
- * <Accordion type="single" collapsible>
+ * <Accordion>
  *   <AccordionItem value="item-1">
  *     <AccordionTrigger>Section 1</AccordionTrigger>
  *     <AccordionContent>Content for section 1</AccordionContent>
@@ -17,18 +17,17 @@ import { type ComponentPropsWithoutRef } from "react";
  * @param {Object} props - The component props
  * @param {string} props.className - Optional class name for custom styling
  * @param {React.ReactNode} props.children - The accordion items to render
- * @param {"single" | "multiple"} [props.type="single"] - Whether to allow single or multiple items expanded
- * @param {boolean} [props.collapsible=false] - Whether the expanded item can be collapsed
- * @param {string} [props.value] - The controlled value(s) of the expanded accordion item(s)
+ * @param {boolean} [props.multiple=false] - Whether to allow multiple items expanded at once
+ * @param {any[]} [props.value] - The controlled value(s) of the expanded accordion item(s)
  * @param {function} [props.onValueChange] - Callback when value changes
  * @returns {React.ReactNode} The rendered accordion component
  */
-export type AccordionProps = ComponentPropsWithoutRef<typeof RadixAccordion.Root>;
-declare const Accordion: import("react").ForwardRefExoticComponent<(RadixAccordion.AccordionSingleProps | RadixAccordion.AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>>;
-export type AccordionItemProps = ComponentPropsWithoutRef<typeof RadixAccordion.Item>;
-declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<RadixAccordion.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export type AccordionTriggerProps = ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>;
-declare const AccordionTrigger: import("react").ForwardRefExoticComponent<Omit<RadixAccordion.AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export type AccordionContentProps = ComponentPropsWithoutRef<typeof RadixAccordion.Content>;
-declare const AccordionContent: import("react").ForwardRefExoticComponent<Omit<RadixAccordion.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type AccordionProps = ComponentProps<typeof BaseAccordion.Root>;
+declare const Accordion: import("react").ForwardRefExoticComponent<import("@base-ui/react/accordion").AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export type AccordionItemProps = ComponentProps<typeof BaseAccordion.Item>;
+declare function AccordionItem({ className, ref, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export type AccordionTriggerProps = ComponentProps<typeof BaseAccordion.Trigger>;
+declare function AccordionTrigger({ className, children, ref, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+export type AccordionContentProps = ComponentProps<typeof BaseAccordion.Panel>;
+declare function AccordionContent({ className, children, ref, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/accordion/accordion.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 import { Icon } from "../icon/icon";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { cn } from "../../utilities/cn/cn";
-import { Accordion as RadixAccordion } from "radix-ui";
-import { forwardRef, } from "react";
-const Accordion = RadixAccordion.Root;
-const AccordionItem = forwardRef(({ className, ...props }, ref) => (_jsx(RadixAccordion.Item, { ref: ref, className: cn("border-gray-200 border-b", className), ...props })));
-AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = forwardRef(({ className, children, ...props }, ref) => (_jsx(RadixAccordion.Header, { className: "flex", children: _jsxs(RadixAccordion.Trigger, { ref: ref, className: cn("flex flex-1 cursor-pointer items-center justify-between py-4 text-left font-medium text-sm transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(Icon, { asChild: true, size: "small", children: _jsx(ChevronDownIcon, { className: "shrink-0 cursor-pointer text-gray-500 transition-transform duration-350" }) })] }) })));
-AccordionTrigger.displayName = "AccordionTrigger";
-const AccordionContent = forwardRef(({ className, children, ...props }, ref) => (_jsx(RadixAccordion.Content, { ref: ref, className: cn("overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", className), ...props, children: _jsx("div", { className: "pt-0 pb-4", children: children }) })));
-AccordionContent.displayName = "AccordionContent";
+const Accordion = BaseAccordion.Root;
+function AccordionItem({ className, ref, ...props }) {
+    return (_jsx(BaseAccordion.Item, { ref: ref, className: cn("border-gray-200 border-b", className), ...props }));
+}
+function AccordionTrigger({ className, children, ref, ...props }) {
+    return (_jsx(BaseAccordion.Header, { className: "flex", children: _jsxs(BaseAccordion.Trigger, { ref: ref, className: cn("flex flex-1 cursor-pointer items-center justify-between py-4 text-left font-medium text-sm transition-all hover:underline [&[data-panel-open]>svg]:rotate-180", className), ...props, children: [children, _jsx(Icon, { render: _jsx(ChevronDownIcon, { className: "shrink-0 cursor-pointer text-gray-500 transition-transform duration-350" }), size: "small" })] }) }));
+}
+function AccordionContent({ className, children, ref, ...props }) {
+    return (_jsx(BaseAccordion.Panel, { ref: ref, className: cn("h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-350 ease-in-out data-ending-style:h-0 data-starting-style:h-0", className), ...props, children: _jsx("div", { className: "pt-0 pb-4", children: children }) }));
+}
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
 //# sourceMappingURL=accordion.js.map

package/dist/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"/","sources":["components/accordion/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AA6Bf,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC;AAMtC,MAAM,aAAa,GAAG,UAAU,CAG9B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,cAAc,CAAC,IAAI,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,KAChD,KAAK,GACR,CACF,CAAC,CAAC;AACH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAM5C,MAAM,gBAAgB,GAAG,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7C,KAAC,cAAc,CAAC,MAAM,IAAC,SAAS,EAAC,MAAM,YACtC,MAAC,cAAc,CAAC,OAAO,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,+JAA+J,EAC/J,SAAS,CACT,KACG,KAAK,aAER,QAAQ,EACT,KAAC,IAAI,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,YACzB,KAAC,eAAe,IAAC,SAAS,EAAC,yEAAyE,GAAG,GACjG,IACiB,GACF,CACxB,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAMlD,MAAM,gBAAgB,GAAG,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7C,KAAC,cAAc,CAAC,OAAO,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,2GAA2G,EAC3G,SAAS,CACT,KACG,KAAK,YAET,cAAK,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAO,GACnB,CACzB,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import { Icon } from \"@components/icon/icon\";\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { Accordion as RadixAccordion } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\n/**\n * Accordion component that allows users to expand and collapse content sections.\n * Built on top of Radix UI's Accordion primitive.\n *\n * @example\n * ```tsx\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content for section 1</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n *\n * @param {Object} props - The component props\n * @param {string} props.className - Optional class name for custom styling\n * @param {React.ReactNode} props.children - The accordion items to render\n * @param {\"single\" | \"multiple\"} [props.type=\"single\"] - Whether to allow single or multiple items expanded\n * @param {boolean} [props.collapsible=false] - Whether the expanded item can be collapsed\n * @param {string} [props.value] - The controlled value(s) of the expanded accordion item(s)\n * @param {function} [props.onValueChange] - Callback when value changes\n * @returns {React.ReactNode} The rendered accordion component\n */\nexport type AccordionProps = ComponentPropsWithoutRef<\n\ttypeof RadixAccordion.Root\n>;\n\nconst Accordion = RadixAccordion.Root;\n\nexport type AccordionItemProps = ComponentPropsWithoutRef<\n\ttypeof RadixAccordion.Item\n>;\n\nconst AccordionItem = forwardRef<\n\tComponentRef<typeof RadixAccordion.Item>,\n\tAccordionItemProps\n>(({ className, ...props }, ref) => (\n\t<RadixAccordion.Item\n\t\tref={ref}\n\t\tclassName={cn(\"border-gray-200 border-b\", className)}\n\t\t{...props}\n\t/>\n));\nAccordionItem.displayName = \"AccordionItem\";\n\nexport type AccordionTriggerProps = ComponentPropsWithoutRef<\n\ttypeof RadixAccordion.Trigger\n>;\n\nconst AccordionTrigger = forwardRef<\n\tComponentRef<typeof RadixAccordion.Trigger>,\n\tAccordionTriggerProps\n>(({ className, children, ...props }, ref) => (\n\t<RadixAccordion.Header className=\"flex\">\n\t\t<RadixAccordion.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-1 cursor-pointer items-center justify-between py-4 text-left font-medium text-sm transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<Icon asChild size=\"small\">\n\t\t\t\t<ChevronDownIcon className=\"shrink-0 cursor-pointer text-gray-500 transition-transform duration-350\" />\n\t\t\t</Icon>\n\t\t</RadixAccordion.Trigger>\n\t</RadixAccordion.Header>\n));\nAccordionTrigger.displayName = \"AccordionTrigger\";\n\nexport type AccordionContentProps = ComponentPropsWithoutRef<\n\ttypeof RadixAccordion.Content\n>;\n\nconst AccordionContent = forwardRef<\n\tComponentRef<typeof RadixAccordion.Content>,\n\tAccordionContentProps\n>(({ className, children, ...props }, ref) => (\n\t<RadixAccordion.Content\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<div className=\"pt-0 pb-4\">{children}</div>\n\t</RadixAccordion.Content>\n));\nAccordionContent.displayName = \"AccordionContent\";\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"/","sources":["components/accordion/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AA4BtC,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC;AAIrC,SAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAsB;IACtE,OAAO,CACN,KAAC,aAAa,CAAC,IAAI,IAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,KAChD,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACe;IACvB,OAAO,CACN,KAAC,aAAa,CAAC,MAAM,IAAC,SAAS,EAAC,MAAM,YACrC,MAAC,aAAa,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,+JAA+J,EAC/J,SAAS,CACT,KACG,KAAK,aAER,QAAQ,EACT,KAAC,IAAI,IACJ,MAAM,EACL,KAAC,eAAe,IAAC,SAAS,EAAC,yEAAyE,GAAG,EAExG,IAAI,EAAC,OAAO,GACX,IACqB,GACF,CACvB,CAAC;AACH,CAAC;AAID,SAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACe;IACvB,OAAO,CACN,KAAC,aAAa,CAAC,KAAK,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,iJAAiJ,EACjJ,SAAS,CACT,KACG,KAAK,YAET,cAAK,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAO,GACtB,CACtB,CAAC;AACH,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport { Icon } from \"@components/icon/icon\";\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * Accordion component that allows users to expand and collapse content sections.\n * Built on top of Base UI's Accordion primitive.\n *\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content for section 1</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n *\n * @param {Object} props - The component props\n * @param {string} props.className - Optional class name for custom styling\n * @param {React.ReactNode} props.children - The accordion items to render\n * @param {boolean} [props.multiple=false] - Whether to allow multiple items expanded at once\n * @param {any[]} [props.value] - The controlled value(s) of the expanded accordion item(s)\n * @param {function} [props.onValueChange] - Callback when value changes\n * @returns {React.ReactNode} The rendered accordion component\n */\n\nexport type AccordionProps = ComponentProps<typeof BaseAccordion.Root>;\n\nconst Accordion = BaseAccordion.Root;\n\nexport type AccordionItemProps = ComponentProps<typeof BaseAccordion.Item>;\n\nfunction AccordionItem({ className, ref, ...props }: AccordionItemProps) {\n\treturn (\n\t\t<BaseAccordion.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"border-gray-200 border-b\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AccordionTriggerProps = ComponentProps<\n\ttypeof BaseAccordion.Trigger\n>;\n\nfunction AccordionTrigger({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: AccordionTriggerProps) {\n\treturn (\n\t\t<BaseAccordion.Header className=\"flex\">\n\t\t\t<BaseAccordion.Trigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex flex-1 cursor-pointer items-center justify-between py-4 text-left font-medium text-sm transition-all hover:underline [&[data-panel-open]>svg]:rotate-180\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<Icon\n\t\t\t\t\trender={\n\t\t\t\t\t\t<ChevronDownIcon className=\"shrink-0 cursor-pointer text-gray-500 transition-transform duration-350\" />\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t/>\n\t\t\t</BaseAccordion.Trigger>\n\t\t</BaseAccordion.Header>\n\t);\n}\n\nexport type AccordionContentProps = ComponentProps<typeof BaseAccordion.Panel>;\n\nfunction AccordionContent({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: AccordionContentProps) {\n\treturn (\n\t\t<BaseAccordion.Panel\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-350 ease-in-out data-ending-style:h-0 data-starting-style:h-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"pt-0 pb-4\">{children}</div>\n\t\t</BaseAccordion.Panel>\n\t);\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n"]}

package/dist/components/alert/alert.d.ts

@@ -1,9 +1,9 @@
+import { useRender } from "@base-ui/react/use-render";
 import type { ResponsiveValue } from "../../utilities/responsive/responsive";
-import { type ComponentPropsWithoutRef } from "react";
-type AlertProps = ComponentPropsWithoutRef<"div"> & {
+type AlertProps = useRender.ComponentProps<"div"> & {
     variant?: "primary" | "secondary" | "error";
-    asChild?: boolean;
     size?: ResponsiveValue<"small" | "medium">;
+    className?: string;
 };
 export declare const SIZES: {
     sm: {
@@ -23,13 +23,12 @@ export declare const SIZES: {
         medium: string;
     };
 };
-declare const Alert: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    variant?: "primary" | "secondary" | "error";
-    asChild?: boolean;
-    size?: ResponsiveValue<"small" | "medium">;
-} & import("react").RefAttributes<HTMLDivElement>>;
-type AlertTitleProps = ComponentPropsWithoutRef<"div"> & {
-    asChild?: boolean;
+declare function Alert({ variant, size, className, render, children, ...props }: AlertProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace Alert {
+    var displayName: string;
+}
+type AlertTitleProps = useRender.ComponentProps<"div"> & {
+    className?: string;
 };
 export declare const TITLE_SIZES: {
     sm: {
@@ -49,11 +48,12 @@ export declare const TITLE_SIZES: {
         medium: string;
     };
 };
-declare const AlertTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
-type AlertDescriptionProps = ComponentPropsWithoutRef<"div"> & {
-    asChild?: boolean;
+declare function AlertTitle({ className, render, ...props }: AlertTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace AlertTitle {
+    var displayName: string;
+}
+type AlertDescriptionProps = useRender.ComponentProps<"div"> & {
+    className?: string;
 };
 export declare const DESCRIPTION_SIZES: {
     sm: {
@@ -73,7 +73,8 @@ export declare const DESCRIPTION_SIZES: {
         medium: string;
     };
 };
-declare const AlertDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
+declare function AlertDescription({ className, render, ...props }: AlertDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace AlertDescription {
+    var displayName: string;
+}
 export { Alert, AlertDescription, AlertTitle, type AlertDescriptionProps, type AlertProps, type AlertTitleProps, };

package/dist/components/alert/alert.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Slot } from "../slot/slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { getVariants } from "../../utilities/responsive/responsive";
-import { createContext, forwardRef, useContext, } from "react";
+import { createContext, useContext } from "react";
 const AlertContext = createContext(undefined);
 const useAlertContext = () => {
     const context = useContext(AlertContext);
@@ -42,7 +43,7 @@ const alertStyles = getVariants({
         },
     },
 });
-const { root, title, description } = alertStyles;
+const { root, title, description } = alertStyles();
 export const SIZES = {
     sm: {
         small: "sm:px-2 sm:py-1 sm:has-[>svg]:gap-x-2",
@@ -61,10 +62,17 @@ export const SIZES = {
         medium: "xl:px-3 xl:py-2 xl:has-[>svg]:gap-x-3",
     },
 };
-const Alert = forwardRef(({ variant = "primary", size = "medium", className, asChild, ...props }, ref) => {
-    const Component = asChild ? Slot : "div";
-    return (_jsx(AlertContext.Provider, { value: { variant, size }, children: _jsx(Component, { className: root({ variant, size, className }), ...props, ref: ref }) }));
-});
+function Alert({ variant = "primary", size = "medium", className, render, children, ...props }) {
+    const defaultProps = {
+        className: root({ variant, size, className }),
+        children: (_jsx(AlertContext.Provider, { value: { variant, size }, children: children })),
+    };
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
 Alert.displayName = "Alert";
 export const TITLE_SIZES = {
     sm: {
@@ -84,11 +92,17 @@ export const TITLE_SIZES = {
         medium: "xl:text-base",
     },
 };
-const AlertTitle = forwardRef(({ className, asChild, ...props }, ref) => {
+function AlertTitle({ className, render, ...props }) {
     const { size } = useAlertContext();
-    const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { ref: ref, ...props, className: title({ size, className }) }));
-});
+    const defaultProps = {
+        className: title({ size, className }),
+    };
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
 AlertTitle.displayName = "AlertTitle";
 export const DESCRIPTION_SIZES = {
     sm: {
@@ -108,11 +122,17 @@ export const DESCRIPTION_SIZES = {
         medium: "xl:text-sm",
     },
 };
-const AlertDescription = forwardRef(({ className, asChild, ...props }, ref) => {
+function AlertDescription({ className, render, ...props }) {
     const { size } = useAlertContext();
-    const Component = asChild ? Slot : "div";
-    return (_jsx(Component, { ref: ref, ...props, className: description({ size, className }) }));
-});
+    const defaultProps = {
+        className: description({ size, className }),
+    };
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
 AlertDescription.displayName = "AlertDescription";
 export { Alert, AlertDescription, AlertTitle, };
 //# sourceMappingURL=alert.js.map

package/dist/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"/","sources":["components/alert/alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n} from \"react\";\n\ntype AlertContextType = {\n\tvariant: \"primary\" | \"secondary\" | \"error\";\n\tsize: ResponsiveValue<\"small\" | \"medium\">;\n};\n\nconst AlertContext = createContext<AlertContextType | undefined>(undefined);\n\nconst useAlertContext = () => {\n\tconst context = useContext(AlertContext);\n\tif (!context) {\n\t\tthrow new Error(\"useAlertContext must be used within an Alert component\");\n\t}\n\treturn context;\n};\n\ntype AlertProps = ComponentPropsWithoutRef<\"div\"> & {\n\tvariant?: \"primary\" | \"secondary\" | \"error\";\n\tasChild?: boolean;\n\tsize?: ResponsiveValue<\"small\" | \"medium\">;\n};\n\nconst alertStyles = getVariants({\n\tslots: {\n\t\troot: \"grid w-fit grid-cols-[0_1fr] items-start gap-1 rounded-md border border-transparent has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] [&>svg]:translate-y-1\",\n\t\ttitle: \"col-start-2 font-bold\",\n\t\tdescription: \"col-start-2\",\n\t},\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: {\n\t\t\t\troot: \"bg-gray-700 text-white\",\n\t\t\t},\n\t\t\tsecondary: {\n\t\t\t\troot: \"border-gray-700 text-gray-700\",\n\t\t\t},\n\t\t\terror: {\n\t\t\t\troot: \"bg-red-500 text-white\",\n\t\t\t},\n\t\t},\n\t\tsize: {\n\t\t\tsmall: {\n\t\t\t\troot: \"px-2 py-1 has-[>svg]:gap-x-2\",\n\t\t\t\ttitle: \"text-sm\",\n\t\t\t\tdescription: \"text-xs\",\n\t\t\t},\n\t\t\tmedium: {\n\t\t\t\troot: \"px-3 py-2 has-[>svg]:gap-x-3\",\n\t\t\t\ttitle: \"text-base\",\n\t\t\t\tdescription: \"text-sm\",\n\t\t\t},\n\t\t},\n\t},\n});\n\nconst { root, title, description } = alertStyles;\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:px-2 sm:py-1 sm:has-[>svg]:gap-x-2\",\n\t\tmedium: \"sm:px-3 sm:py-2 sm:has-[>svg]:gap-x-3\",\n\t},\n\tmd: {\n\t\tsmall: \"md:px-2 md:py-1 md:has-[>svg]:gap-x-2\",\n\t\tmedium: \"md:px-3 md:py-2 md:has-[>svg]:gap-x-3\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:px-2 lg:py-1 lg:has-[>svg]:gap-x-2\",\n\t\tmedium: \"lg:px-3 lg:py-2 lg:has-[>svg]:gap-x-3\",\n\t},\n\txl: {\n\t\tsmall: \"xl:px-2 xl:py-1 xl:has-[>svg]:gap-x-2\",\n\t\tmedium: \"xl:px-3 xl:py-2 xl:has-[>svg]:gap-x-3\",\n\t},\n};\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n\t(\n\t\t{ variant = \"primary\", size = \"medium\", className, asChild, ...props },\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={{ variant, size }}>\n\t\t\t\t<Component\n\t\t\t\t\tclassName={root({ variant, size, className })}\n\t\t\t\t\t{...props}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\n\nAlert.displayName = \"Alert\";\n\ntype AlertTitleProps = ComponentPropsWithoutRef<\"div\"> & {\n\tasChild?: boolean;\n};\n\nexport const TITLE_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-sm\",\n\t\tmedium: \"sm:text-base\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-sm\",\n\t\tmedium: \"md:text-base\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-sm\",\n\t\tmedium: \"lg:text-base\",\n\t},\n\txl: {\n\t\tsmall: \"xl:text-sm\",\n\t\tmedium: \"xl:text-base\",\n\t},\n};\n\nconst AlertTitle = forwardRef<HTMLDivElement, AlertTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst { size } = useAlertContext();\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component ref={ref} {...props} className={title({ size, className })} />\n\t\t);\n\t},\n);\n\nAlertTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentPropsWithoutRef<\"div\"> & {\n\tasChild?: boolean;\n};\n\nexport const DESCRIPTION_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-xs\",\n\t\tmedium: \"sm:text-sm\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-xs\",\n\t\tmedium: \"md:text-sm\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-xs\",\n\t\tmedium: \"lg:text-sm\",\n\t},\n\txl: {\n\t\tsmall: \"xl:text-xs\",\n\t\tmedium: \"xl:text-sm\",\n\t},\n};\n\nconst AlertDescription = forwardRef<HTMLDivElement, AlertDescriptionProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst { size } = useAlertContext();\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={description({ size, className })}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nAlertDescription.displayName = \"AlertDescription\";\n\nexport {\n\tAlert,\n\tAlertDescription,\n\tAlertTitle,\n\ttype AlertDescriptionProps,\n\ttype AlertProps,\n\ttype AlertTitleProps,\n};\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"/","sources":["components/alert/alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { createContext, useContext } from \"react\";\n\ntype AlertContextType = {\n\tvariant: \"primary\" | \"secondary\" | \"error\";\n\tsize: ResponsiveValue<\"small\" | \"medium\">;\n};\n\nconst AlertContext = createContext<AlertContextType | undefined>(undefined);\n\nconst useAlertContext = () => {\n\tconst context = useContext(AlertContext);\n\tif (!context) {\n\t\tthrow new Error(\"useAlertContext must be used within an Alert component\");\n\t}\n\treturn context;\n};\n\ntype AlertProps = useRender.ComponentProps<\"div\"> & {\n\tvariant?: \"primary\" | \"secondary\" | \"error\";\n\tsize?: ResponsiveValue<\"small\" | \"medium\">;\n\tclassName?: string;\n};\n\nconst alertStyles = getVariants({\n\tslots: {\n\t\troot: \"grid w-fit grid-cols-[0_1fr] items-start gap-1 rounded-md border border-transparent has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] [&>svg]:translate-y-1\",\n\t\ttitle: \"col-start-2 font-bold\",\n\t\tdescription: \"col-start-2\",\n\t},\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: {\n\t\t\t\troot: \"bg-gray-700 text-white\",\n\t\t\t},\n\t\t\tsecondary: {\n\t\t\t\troot: \"border-gray-700 text-gray-700\",\n\t\t\t},\n\t\t\terror: {\n\t\t\t\troot: \"bg-red-500 text-white\",\n\t\t\t},\n\t\t},\n\t\tsize: {\n\t\t\tsmall: {\n\t\t\t\troot: \"px-2 py-1 has-[>svg]:gap-x-2\",\n\t\t\t\ttitle: \"text-sm\",\n\t\t\t\tdescription: \"text-xs\",\n\t\t\t},\n\t\t\tmedium: {\n\t\t\t\troot: \"px-3 py-2 has-[>svg]:gap-x-3\",\n\t\t\t\ttitle: \"text-base\",\n\t\t\t\tdescription: \"text-sm\",\n\t\t\t},\n\t\t},\n\t},\n});\n\nconst { root, title, description } = alertStyles();\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:px-2 sm:py-1 sm:has-[>svg]:gap-x-2\",\n\t\tmedium: \"sm:px-3 sm:py-2 sm:has-[>svg]:gap-x-3\",\n\t},\n\tmd: {\n\t\tsmall: \"md:px-2 md:py-1 md:has-[>svg]:gap-x-2\",\n\t\tmedium: \"md:px-3 md:py-2 md:has-[>svg]:gap-x-3\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:px-2 lg:py-1 lg:has-[>svg]:gap-x-2\",\n\t\tmedium: \"lg:px-3 lg:py-2 lg:has-[>svg]:gap-x-3\",\n\t},\n\txl: {\n\t\tsmall: \"xl:px-2 xl:py-1 xl:has-[>svg]:gap-x-2\",\n\t\tmedium: \"xl:px-3 xl:py-2 xl:has-[>svg]:gap-x-3\",\n\t},\n};\n\nfunction Alert({\n\tvariant = \"primary\",\n\tsize = \"medium\",\n\tclassName,\n\trender,\n\tchildren,\n\t...props\n}: AlertProps) {\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: root({ variant, size, className }),\n\t\tchildren: (\n\t\t\t<AlertContext.Provider value={{ variant, size }}>\n\t\t\t\t{children}\n\t\t\t</AlertContext.Provider>\n\t\t),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nAlert.displayName = \"Alert\";\n\ntype AlertTitleProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\n};\n\nexport const TITLE_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-sm\",\n\t\tmedium: \"sm:text-base\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-sm\",\n\t\tmedium: \"md:text-base\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-sm\",\n\t\tmedium: \"lg:text-base\",\n\t},\n\txl: {\n\t\tsmall: \"xl:text-sm\",\n\t\tmedium: \"xl:text-base\",\n\t},\n};\n\nfunction AlertTitle({ className, render, ...props }: AlertTitleProps) {\n\tconst { size } = useAlertContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: title({ size, className }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nAlertTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = useRender.ComponentProps<\"div\"> & {\n\tclassName?: string;\n};\n\nexport const DESCRIPTION_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-xs\",\n\t\tmedium: \"sm:text-sm\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-xs\",\n\t\tmedium: \"md:text-sm\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-xs\",\n\t\tmedium: \"lg:text-sm\",\n\t},\n\txl: {\n\t\tsmall: \"xl:text-xs\",\n\t\tmedium: \"xl:text-sm\",\n\t},\n};\n\nfunction AlertDescription({\n\tclassName,\n\trender,\n\t...props\n}: AlertDescriptionProps) {\n\tconst { size } = useAlertContext();\n\n\tconst defaultProps: useRender.ElementProps<\"div\"> = {\n\t\tclassName: description({ size, className }),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\trender,\n\t\tprops: mergeProps<\"div\">(defaultProps, props),\n\t});\n}\n\nAlertDescription.displayName = \"AlertDescription\";\n\nexport {\n\tAlert,\n\tAlertDescription,\n\tAlertTitle,\n\ttype AlertDescriptionProps,\n\ttype AlertProps,\n\ttype AlertTitleProps,\n};\n"]}

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -1,10 +1,15 @@
-import { AlertDialog as RadixAlertDialog } from "radix-ui";
-declare const AlertDialog: import("react").FC<RadixAlertDialog.AlertDialogProps>;
-declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const AlertDialogOverlay: import("react").ForwardRefExoticComponent<Omit<RadixAlertDialog.AlertDialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const AlertDialogContent: import("react").ForwardRefExoticComponent<Omit<RadixAlertDialog.AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const AlertDialogTitle: import("react").ForwardRefExoticComponent<Omit<RadixAlertDialog.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-declare const AlertDialogDescription: import("react").ForwardRefExoticComponent<Omit<RadixAlertDialog.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
-declare const AlertDialogAction: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import type { ComponentProps } from "react";
+declare const AlertDialog: typeof BaseAlertDialog.Root;
+declare const AlertDialogTrigger: BaseAlertDialog.Trigger;
+export type AlertDialogOverlayProps = ComponentProps<typeof BaseAlertDialog.Backdrop>;
+declare function AlertDialogOverlay({ className, ref, ...props }: AlertDialogOverlayProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogContentProps = ComponentProps<typeof BaseAlertDialog.Popup>;
+declare function AlertDialogContent({ className, ref, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogTitleProps = ComponentProps<typeof BaseAlertDialog.Title>;
+declare function AlertDialogTitle({ className, ref, ...props }: AlertDialogTitleProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogDescriptionProps = ComponentProps<typeof BaseAlertDialog.Description>;
+declare function AlertDialogDescription({ className, ref, ...props }: AlertDialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare const AlertDialogAction: import("react").ForwardRefExoticComponent<import("@base-ui/react/dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<import("@base-ui/react/dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogOverlay, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/alert-dialog/alert-dialog.js

@@ -1,18 +1,24 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
 import { cn } from "../../utilities/cn/cn";
-import { AlertDialog as RadixAlertDialog } from "radix-ui";
-import { forwardRef, } from "react";
-const AlertDialog = RadixAlertDialog.Root;
-const AlertDialogTrigger = RadixAlertDialog.Trigger;
-const AlertDialogOverlay = forwardRef(({ className, ...props }, ref) => (_jsx(RadixAlertDialog.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in", className), ...props })));
-AlertDialogOverlay.displayName = RadixAlertDialog.Overlay.displayName;
-const AlertDialogContent = forwardRef(({ className, ...props }, ref) => (_jsxs(_Fragment, { children: [_jsx(AlertDialogOverlay, {}), _jsx(RadixAlertDialog.Content, { ref: ref, className: cn("-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl flex-col gap-4 rounded-lg bg-white p-4", className), ...props })] })));
-AlertDialogContent.displayName = RadixAlertDialog.Content.displayName;
-const AlertDialogTitle = forwardRef(({ className, ...props }, ref) => (_jsx(RadixAlertDialog.Title, { ref: ref, className: cn("font-medium text-lg", className), ...props })));
-AlertDialogTitle.displayName = RadixAlertDialog.Title.displayName;
-const AlertDialogDescription = forwardRef(({ className, ...props }, ref) => (_jsx(RadixAlertDialog.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props })));
-AlertDialogDescription.displayName = RadixAlertDialog.Description.displayName;
-const AlertDialogAction = RadixAlertDialog.Action;
-const AlertDialogCancel = RadixAlertDialog.Cancel;
+const AlertDialog = BaseAlertDialog.Root;
+const AlertDialogTrigger = BaseAlertDialog.Trigger;
+const AlertDialogPortal = BaseAlertDialog.Portal;
+function AlertDialogOverlay({ className, ref, ...props }) {
+    return (_jsx(BaseAlertDialog.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
+}
+function AlertDialogContent({ className, ref, ...props }) {
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(BaseAlertDialog.Popup, { ref: ref, className: cn("fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-white p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props })] }));
+}
+function AlertDialogTitle({ className, ref, ...props }) {
+    return (_jsx(BaseAlertDialog.Title, { ref: ref, className: cn("font-medium text-lg", className), ...props }));
+}
+function AlertDialogDescription({ className, ref, ...props }) {
+    return (_jsx(BaseAlertDialog.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props }));
+}
+// Base UI doesn't have separate Action/Cancel components - both use Close
+// We export Close as both Action and Cancel for API compatibility
+const AlertDialogAction = BaseAlertDialog.Close;
+const AlertDialogCancel = BaseAlertDialog.Close;
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogOverlay, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
 //# sourceMappingURL=alert-dialog.js.map

package/dist/components/alert-dialog/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","sourceRoot":"/","sources":["components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC;AAE1C,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAEpD,MAAM,kBAAkB,GAAG,UAAU,CAGnC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,gBAAgB,CAAC,OAAO,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,oKAAoK,EACpK,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAC;AACH,kBAAkB,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEtE,MAAM,kBAAkB,GAAG,UAAU,CAGnC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BACC,KAAC,kBAAkB,KAAG,EACtB,KAAC,gBAAgB,CAAC,OAAO,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,0HAA0H,EAC1H,SAAS,CACT,KACG,KAAK,GACR,IACA,CACH,CAAC,CAAC;AACH,kBAAkB,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEtE,MAAM,gBAAgB,GAAG,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,gBAAgB,CAAC,KAAK,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACR,CACF,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC;AAElE,MAAM,sBAAsB,GAAG,UAAU,CAGvC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,gBAAgB,CAAC,WAAW,IAC5B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACR,CACF,CAAC,CAAC;AACH,sBAAsB,CAAC,WAAW,GAAG,gBAAgB,CAAC,WAAW,CAAC,WAAW,CAAC;AAE9E,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,MAAM,CAAC;AAElD,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,MAAM,CAAC;AAElD,OAAO,EACN,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GACjB,CAAC","sourcesContent":["import { cn } from \"@utilities/cn/cn\";\nimport { AlertDialog as RadixAlertDialog } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\nconst AlertDialog = RadixAlertDialog.Root;\n\nconst AlertDialogTrigger = RadixAlertDialog.Trigger;\n\nconst AlertDialogOverlay = forwardRef<\n\tComponentRef<typeof RadixAlertDialog.Overlay>,\n\tComponentPropsWithoutRef<typeof RadixAlertDialog.Overlay>\n>(({ className, ...props }, ref) => (\n\t<RadixAlertDialog.Overlay\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAlertDialogOverlay.displayName = RadixAlertDialog.Overlay.displayName;\n\nconst AlertDialogContent = forwardRef<\n\tComponentRef<typeof RadixAlertDialog.Content>,\n\tComponentPropsWithoutRef<typeof RadixAlertDialog.Content>\n>(({ className, ...props }, ref) => (\n\t<>\n\t\t<AlertDialogOverlay />\n\t\t<RadixAlertDialog.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl flex-col gap-4 rounded-lg bg-white p-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</>\n));\nAlertDialogContent.displayName = RadixAlertDialog.Content.displayName;\n\nconst AlertDialogTitle = forwardRef<\n\tComponentRef<typeof RadixAlertDialog.Title>,\n\tComponentPropsWithoutRef<typeof RadixAlertDialog.Title>\n>(({ className, ...props }, ref) => (\n\t<RadixAlertDialog.Title\n\t\tref={ref}\n\t\tclassName={cn(\"font-medium text-lg\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = RadixAlertDialog.Title.displayName;\n\nconst AlertDialogDescription = forwardRef<\n\tComponentRef<typeof RadixAlertDialog.Description>,\n\tComponentPropsWithoutRef<typeof RadixAlertDialog.Description>\n>(({ className, ...props }, ref) => (\n\t<RadixAlertDialog.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-gray-500 text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = RadixAlertDialog.Description.displayName;\n\nconst AlertDialogAction = RadixAlertDialog.Action;\n\nconst AlertDialogCancel = RadixAlertDialog.Cancel;\n\nexport {\n\tAlertDialog,\n\tAlertDialogTrigger,\n\tAlertDialogContent,\n\tAlertDialogOverlay,\n\tAlertDialogTitle,\n\tAlertDialogDescription,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n};\n"]}
+{"version":3,"file":"alert-dialog.js","sourceRoot":"/","sources":["components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAGtC,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC;AAEzC,MAAM,kBAAkB,GAAG,eAAe,CAAC,OAAO,CAAC;AAEnD,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC;AAMjD,SAAS,kBAAkB,CAAC,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACiB;IACzB,OAAO,CACN,KAAC,eAAe,CAAC,QAAQ,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,0HAA0H,EAC1H,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,kBAAkB,CAAC,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACiB;IACzB,OAAO,CACN,MAAC,iBAAiB,eACjB,KAAC,kBAAkB,KAAG,EACtB,KAAC,eAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,wQAAwQ,EACxQ,SAAS,CACT,KACG,KAAK,GACR,IACiB,CACpB,CAAC;AACH,CAAC;AAMD,SAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAyB;IAC5E,OAAO,CACN,KAAC,eAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,sBAAsB,CAAC,EAC/B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACqB;IAC7B,OAAO,CACN,KAAC,eAAe,CAAC,WAAW,IAC3B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,0EAA0E;AAC1E,kEAAkE;AAClE,MAAM,iBAAiB,GAAG,eAAe,CAAC,KAAK,CAAC;AAEhD,MAAM,iBAAiB,GAAG,eAAe,CAAC,KAAK,CAAC;AAEhD,OAAO,EACN,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GACjB,CAAC","sourcesContent":["import { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst AlertDialog = BaseAlertDialog.Root;\n\nconst AlertDialogTrigger = BaseAlertDialog.Trigger;\n\nconst AlertDialogPortal = BaseAlertDialog.Portal;\n\nexport type AlertDialogOverlayProps = ComponentProps<\n\ttypeof BaseAlertDialog.Backdrop\n>;\n\nfunction AlertDialogOverlay({\n\tclassName,\n\tref,\n\t...props\n}: AlertDialogOverlayProps) {\n\treturn (\n\t\t<BaseAlertDialog.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AlertDialogContentProps = ComponentProps<\n\ttypeof BaseAlertDialog.Popup\n>;\n\nfunction AlertDialogContent({\n\tclassName,\n\tref,\n\t...props\n}: AlertDialogContentProps) {\n\treturn (\n\t\t<AlertDialogPortal>\n\t\t\t<AlertDialogOverlay />\n\t\t\t<BaseAlertDialog.Popup\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-white p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</AlertDialogPortal>\n\t);\n}\n\nexport type AlertDialogTitleProps = ComponentProps<\n\ttypeof BaseAlertDialog.Title\n>;\n\nfunction AlertDialogTitle({ className, ref, ...props }: AlertDialogTitleProps) {\n\treturn (\n\t\t<BaseAlertDialog.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-medium text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AlertDialogDescriptionProps = ComponentProps<\n\ttypeof BaseAlertDialog.Description\n>;\n\nfunction AlertDialogDescription({\n\tclassName,\n\tref,\n\t...props\n}: AlertDialogDescriptionProps) {\n\treturn (\n\t\t<BaseAlertDialog.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-gray-500 text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n// Base UI doesn't have separate Action/Cancel components - both use Close\n// We export Close as both Action and Cancel for API compatibility\nconst AlertDialogAction = BaseAlertDialog.Close;\n\nconst AlertDialogCancel = BaseAlertDialog.Close;\n\nexport {\n\tAlertDialog,\n\tAlertDialogTrigger,\n\tAlertDialogContent,\n\tAlertDialogOverlay,\n\tAlertDialogTitle,\n\tAlertDialogDescription,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n};\n"]}

package/dist/components/avatar/avatar-group.d.ts

@@ -1,6 +1,7 @@
-import { type ComponentProps } from "react";
+import { type ComponentProps, type Ref } from "react";
 export type AvatarGroupProps = ComponentProps<"div"> & {
     maxAvatars?: number;
+    ref?: Ref<HTMLDivElement>;
 };
-declare const AvatarGroup: import("react").ForwardRefExoticComponent<Omit<AvatarGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function AvatarGroup({ children, maxAvatars, ref, ...props }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
 export { AvatarGroup };

package/dist/components/avatar/avatar-group.js

@@ -1,9 +1,9 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, forwardRef } from "react";
-const AvatarGroup = forwardRef(({ children, maxAvatars = 3, ...props }, ref) => {
+import { Children } from "react";
+function AvatarGroup({ children, maxAvatars = 3, ref, ...props }) {
     const elements = Children.toArray(children);
     const avatars = elements.slice(0, maxAvatars).reverse();
-    return (_jsxs("div", { className: "[&>*]:-mr-4 hover:[&>*]:-mr-1 group flex w-fit flex-row-reverse items-center [&>*]:transition-all [&>*]:duration-500 [&>*]:ease-in-out", ...props, ref: ref, children: [elements.length > maxAvatars && (_jsxs("span", { className: "mr-0 ml-2 hidden text-gray-500 text-sm group-hover:block", children: ["+", elements.length - maxAvatars] })), avatars] }));
-});
+    return (_jsxs("div", { className: "group flex w-fit flex-row-reverse items-center [&>*]:-mr-4 [&>*]:transition-all [&>*]:duration-500 [&>*]:ease-in-out hover:[&>*]:-mr-1", ...props, ref: ref, children: [elements.length > maxAvatars && (_jsxs("span", { className: "mr-0 ml-2 hidden text-gray-500 text-sm group-hover:block", children: ["+", elements.length - maxAvatars] })), avatars] }));
+}
 export { AvatarGroup };
 //# sourceMappingURL=avatar-group.js.map

package/dist/components/avatar/avatar-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.js","sourceRoot":"/","sources":["components/avatar/avatar-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMlE,MAAM,WAAW,GAAG,UAAU,CAC7B,CAAC,EAAE,QAAQ,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/C,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,OAAO,EAAE,CAAC;IAExD,OAAO,CACN,eACC,SAAS,EAAC,wIAAwI,KAC9I,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,CAAC,MAAM,GAAG,UAAU,IAAI,CAChC,gBAAM,SAAS,EAAC,0DAA0D,kBACvE,QAAQ,CAAC,MAAM,GAAG,UAAU,IACxB,CACP,EACA,OAAO,IACH,CACN,CAAC;AACH,CAAC,CACD,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { Children, type ComponentProps, forwardRef } from \"react\";\n\nexport type AvatarGroupProps = ComponentProps<\"div\"> & {\n\tmaxAvatars?: number;\n};\n\nconst AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n\t({ children, maxAvatars = 3, ...props }, ref) => {\n\t\tconst elements = Children.toArray(children);\n\n\t\tconst avatars = elements.slice(0, maxAvatars).reverse();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName=\"[&>*]:-mr-4 hover:[&>*]:-mr-1 group flex w-fit flex-row-reverse items-center [&>*]:transition-all [&>*]:duration-500 [&>*]:ease-in-out\"\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{elements.length > maxAvatars && (\n\t\t\t\t\t<span className=\"mr-0 ml-2 hidden text-gray-500 text-sm group-hover:block\">\n\t\t\t\t\t\t+{elements.length - maxAvatars}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{avatars}\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nexport { AvatarGroup };\n"]}
+{"version":3,"file":"avatar-group.js","sourceRoot":"/","sources":["components/avatar/avatar-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiC,MAAM,OAAO,CAAC;AAOhE,SAAS,WAAW,CAAC,EACpB,QAAQ,EACR,UAAU,GAAG,CAAC,EACd,GAAG,EACH,GAAG,KAAK,EACU;IAClB,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,OAAO,EAAE,CAAC;IAExD,OAAO,CACN,eACC,SAAS,EAAC,wIAAwI,KAC9I,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,CAAC,MAAM,GAAG,UAAU,IAAI,CAChC,gBAAM,SAAS,EAAC,0DAA0D,kBACvE,QAAQ,CAAC,MAAM,GAAG,UAAU,IACxB,CACP,EACA,OAAO,IACH,CACN,CAAC;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { Children, type ComponentProps, type Ref } from \"react\";\n\nexport type AvatarGroupProps = ComponentProps<\"div\"> & {\n\tmaxAvatars?: number;\n\tref?: Ref<HTMLDivElement>;\n};\n\nfunction AvatarGroup({\n\tchildren,\n\tmaxAvatars = 3,\n\tref,\n\t...props\n}: AvatarGroupProps) {\n\tconst elements = Children.toArray(children);\n\n\tconst avatars = elements.slice(0, maxAvatars).reverse();\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"group flex w-fit flex-row-reverse items-center [&>*]:-mr-4 [&>*]:transition-all [&>*]:duration-500 [&>*]:ease-in-out hover:[&>*]:-mr-1\"\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{elements.length > maxAvatars && (\n\t\t\t\t<span className=\"mr-0 ml-2 hidden text-gray-500 text-sm group-hover:block\">\n\t\t\t\t\t+{elements.length - maxAvatars}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{avatars}\n\t\t</div>\n\t);\n}\n\nexport { AvatarGroup };\n"]}

package/dist/components/avatar/avatar.d.ts

@@ -1,5 +1,9 @@
-import { Avatar as AvatarPrimitive } from "radix-ui";
-declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-declare const AvatarImage: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import type { ComponentProps } from "react";
+export type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root>;
+declare function Avatar({ className, ref, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export type AvatarImageProps = ComponentProps<typeof AvatarPrimitive.Image>;
+declare function AvatarImage({ className, ref, ...props }: AvatarImageProps): import("react/jsx-runtime").JSX.Element;
+export type AvatarFallbackProps = ComponentProps<typeof AvatarPrimitive.Fallback>;
+declare function AvatarFallback({ className, ref, ...props }: AvatarFallbackProps): import("react/jsx-runtime").JSX.Element;
 export { Avatar, AvatarFallback, AvatarImage };

package/dist/components/avatar/avatar.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import { cn } from "../../utilities/cn/cn";
-import { Avatar as AvatarPrimitive } from "radix-ui";
-import { forwardRef } from "react";
-const Avatar = forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border-2 border-white", className), ...props })));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn("absolute h-full w-full object-cover", className), ...props })));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full border border-white bg-gray-700 text-white", className), ...props })));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+function Avatar({ className, ref, ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border-2 border-white", className), ...props }));
+}
+function AvatarImage({ className, ref, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn("absolute h-full w-full object-cover", className), ...props }));
+}
+function AvatarFallback({ className, ref, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full border border-white bg-gray-700 text-white", className), ...props }));
+}
 export { Avatar, AvatarFallback, AvatarImage };
 //# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"/","sources":["components/avatar/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,MAAM,MAAM,GAAG,UAAU,CAGvB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,eAAe,CAAC,IAAI,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,qFAAqF,EACrF,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEtD,MAAM,WAAW,GAAG,UAAU,CAG5B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,eAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,SAAS,CAAC,KAC3D,KAAK,GACR,CACF,CAAC,CAAC;AAEH,WAAW,CAAC,WAAW,GAAG,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC;AAE5D,MAAM,cAAc,GAAG,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,eAAe,CAAC,QAAQ,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,wGAAwG,EACxG,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAC;AAEH,cAAc,CAAC,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,WAAW,CAAC;AAElE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { cn } from \"@utilities/cn/cn\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nconst Avatar = forwardRef<\n\tComponentRef<typeof AvatarPrimitive.Root>,\n\tComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border-2 border-white\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\n\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nconst AvatarImage = forwardRef<\n\tComponentRef<typeof AvatarPrimitive.Image>,\n\tComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Image\n\t\tref={ref}\n\t\tclassName={cn(\"absolute h-full w-full object-cover\", className)}\n\t\t{...props}\n\t/>\n));\n\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nconst AvatarFallback = forwardRef<\n\tComponentRef<typeof AvatarPrimitive.Fallback>,\n\tComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Fallback\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full items-center justify-center rounded-full border border-white bg-gray-700 text-white\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\n\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"/","sources":["components/avatar/avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAKtC,SAAS,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAe;IACxD,OAAO,CACN,KAAC,eAAe,CAAC,IAAI,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,qFAAqF,EACrF,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAoB;IAClE,OAAO,CACN,KAAC,eAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,SAAS,CAAC,KAC3D,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAuB;IACxE,OAAO,CACN,KAAC,eAAe,CAAC,QAAQ,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,wGAAwG,EACxG,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nexport type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root>;\n\nfunction Avatar({ className, ref, ...props }: AvatarProps) {\n\treturn (\n\t\t<AvatarPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border-2 border-white\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AvatarImageProps = ComponentProps<typeof AvatarPrimitive.Image>;\n\nfunction AvatarImage({ className, ref, ...props }: AvatarImageProps) {\n\treturn (\n\t\t<AvatarPrimitive.Image\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"absolute h-full w-full object-cover\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type AvatarFallbackProps = ComponentProps<\n\ttypeof AvatarPrimitive.Fallback\n>;\n\nfunction AvatarFallback({ className, ref, ...props }: AvatarFallbackProps) {\n\treturn (\n\t\t<AvatarPrimitive.Fallback\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-full w-full items-center justify-center rounded-full border border-white bg-gray-700 text-white\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"]}

package/dist/components/badge/badge.d.ts

@@ -1,17 +1,18 @@
+import { useRender } from "@base-ui/react/use-render";
 import type { ResponsiveValue } from "../../utilities/responsive/responsive";
 import type { ComponentProps } from "react";
 /**
  * Props for the Badge component
  * @interface BadgeProps
- * @extends {ComponentProps<"div">}
+ * @extends {useRender.ComponentProps<"div">}
  */
-export type BadgeProps = ComponentProps<"div"> & {
-    /** Whether to render the badge as a child component */
-    asChild?: boolean;
+export type BadgeProps = Omit<ComponentProps<"div">, "className"> & useRender.ComponentProps<"div"> & {
     /** The visual style variant of the badge */
     variant?: "primary" | "secondary" | "destructive" | "outline";
     /** The size of the badge, can be responsive */
     size?: ResponsiveValue<"small" | "medium" | "large">;
+    /** Additional CSS classes to apply */
+    className?: string;
 };
 /**
  * Badge component for displaying status, labels, or counts
@@ -20,6 +21,12 @@ export type BadgeProps = ComponentProps<"div"> & {
  * ```tsx
  * <Badge variant="primary" size="medium">New</Badge>
  * ```
+ *
+ * @example
+ * // With render prop to change the element
+ * ```tsx
+ * <Badge render={<a href="/link" />}>Link Badge</Badge>
+ * ```
  */
-declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function Badge({ className, variant, size, render, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge };