moduix 0.11.0 → 0.11.2

package/dist/components/Card/Card.d.ts

@@ -1,18 +1,48 @@
-import { ComponentProps, ComponentPropsWithoutRef } from 'react';
-import { useRender } from '@base-ui/react/use-render';
+import { ComponentProps, ComponentPropsWithoutRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/Card/Card.d.ts
 type CardSize = 'default' | 'sm';
 type CardTitleElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-declare function Card({ className, render, size, ...props }: useRender.ComponentProps<'div'> & {
-    size?: CardSize;
-}): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-declare function CardHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function CardContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function CardFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function CardTitle({ as: Root, className, ...props }: ComponentPropsWithoutRef<'h3'> & {
-    as?: CardTitleElement;
+declare function Card({
+  className,
+  render,
+  size,
+  ...props
+}: useRender.ComponentProps<'div'> & {
+  size?: CardSize;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function CardHeader({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CardContent({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CardFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CardTitle({
+  as: Root,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'h3'> & {
+  as?: CardTitleElement;
 }): import("react").JSX.Element;
-declare function CardDescription({ className, ...props }: ComponentProps<'p'>): import("react").JSX.Element;
-declare function CardAction({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function CardLink({ className, render, ...props }: useRender.ComponentProps<'a'>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription, CardAction, CardLink, };
-export type { CardSize, CardTitleElement };
+declare function CardDescription({
+  className,
+  ...props
+}: ComponentProps<'p'>): import("react").JSX.Element;
+declare function CardAction({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CardLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<'a'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardLink, type CardSize, CardTitle, type CardTitleElement };

package/dist/components/Card/Card.js

@@ -0,0 +1,72 @@
+import Card_module_default from "./Card.module.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Card/Card.tsx
+function Card({ className, render, size = "default", ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-slot": "card",
+			"data-size": size,
+			className: clsx$1(Card_module_default.root, className)
+		}
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: clsx$1(Card_module_default.header, className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: clsx$1(Card_module_default.content, className),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: clsx$1(Card_module_default.footer, className),
+		...props
+	});
+}
+function CardTitle({ as: Root = "h3", className, ...props }) {
+	return /* @__PURE__ */ jsx(Root, {
+		"data-slot": "card-title",
+		className: clsx$1(Card_module_default.title, className),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "card-description",
+		className: clsx$1(Card_module_default.description, className),
+		...props
+	});
+}
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: clsx$1(Card_module_default.action, className),
+		...props
+	});
+}
+function CardLink({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		render,
+		props: {
+			...props,
+			"data-slot": "card-link",
+			className: clsx$1(Card_module_default.link, className)
+		}
+	});
+}
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardLink, CardTitle };

package/dist/components/Card/Card.module.js

@@ -0,0 +1,14 @@
+import './Card.css';
+//#region src/components/Card/Card.module.css
+var Card_module_default = {
+	"action": "_06ECia_action",
+	"content": "_06ECia_content",
+	"description": "_06ECia_description",
+	"footer": "_06ECia_footer",
+	"header": "_06ECia_header",
+	"link": "_06ECia_link",
+	"root": "_06ECia_root",
+	"title": "_06ECia_title"
+};
+//#endregion
+export { Card_module_default as default };

package/dist/components/Card/index.d.ts

@@ -1,2 +1 @@
-export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription, CardAction, CardLink, } from './Card';
-export type { CardSize, CardTitleElement } from './Card';
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardLink, CardSize, CardTitle, CardTitleElement } from "./Card.js";

package/dist/components/Checkbox/Checkbox.css

@@ -0,0 +1,131 @@
+@layer ui.components {
+  ._00Q5eW_field {
+    align-items: center;
+    gap: var(--checkbox-gap, var(--spacing-2));
+    vertical-align: middle;
+    cursor: pointer;
+    display: inline-flex;
+
+    &:has(._00Q5eW_root[data-disabled]), &:has(._00Q5eW_root[data-readonly]) {
+      cursor: default;
+    }
+  }
+
+  ._00Q5eW_root {
+    box-sizing: border-box;
+    width: var(--_checkbox-size, 1.25rem);
+    height: var(--_checkbox-size, 1.25rem);
+    border: var(--checkbox-border-width, var(--border-width-sm)) solid
+      var(--checkbox-border-color, var(--color-border));
+    border-radius: var(--checkbox-radius, var(--radius-xs));
+    background-color: var(--checkbox-bg, var(--color-background));
+    color: var(--checkbox-color, var(--color-primary-foreground));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--checkbox-transition, var(--transition-default)),
+      border-color var(--checkbox-transition, var(--transition-default)),
+      color var(--checkbox-transition, var(--transition-default)),
+      opacity var(--checkbox-transition, var(--transition-default));
+    outline: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    display: inline-flex;
+
+    &[data-checked], &[data-indeterminate] {
+      border-color: var(--checkbox-border-color-checked, var(--color-primary));
+      background-color: var(--checkbox-bg-checked, var(--color-primary));
+    }
+
+    &:focus-visible {
+      outline: var(--checkbox-focus-ring-width, var(--border-width-sm)) solid
+        var(--checkbox-focus-ring-color, var(--color-ring));
+      outline-offset: var(--checkbox-focus-ring-offset, var(--border-width-sm));
+    }
+
+    @media (hover: hover) {
+      &[data-unchecked]:not([data-readonly]):hover {
+        background-color: var(--checkbox-bg-hover, var(--color-accent));
+      }
+    }
+
+    &[data-readonly] {
+      cursor: default;
+    }
+
+    &[data-disabled] {
+      opacity: var(--checkbox-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    &[data-size="xs"] {
+      --_checkbox-size: var(--checkbox-size-xs, .875rem);
+      --_checkbox-icon-size: var(--checkbox-icon-size-xs, .5rem);
+    }
+
+    &[data-size="sm"] {
+      --_checkbox-size: var(--checkbox-size-sm, 1rem);
+      --_checkbox-icon-size: var(--checkbox-icon-size-sm, .625rem);
+    }
+
+    &[data-size="md"] {
+      --_checkbox-size: var(--checkbox-size-md, 1.25rem);
+      --_checkbox-icon-size: var(--checkbox-icon-size-md, .75rem);
+    }
+
+    &[data-size="lg"] {
+      --_checkbox-size: var(--checkbox-size-lg, 1.5rem);
+      --_checkbox-icon-size: var(--checkbox-icon-size-lg, .875rem);
+    }
+
+    &[data-size="xl"] {
+      --_checkbox-size: var(--checkbox-size-xl, 1.75rem);
+      --_checkbox-icon-size: var(--checkbox-icon-size-xl, 1rem);
+    }
+  }
+
+  ._00Q5eW_indicator {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+
+    &[data-indeterminate] ._00Q5eW_iconChecked, &[data-checked] ._00Q5eW_iconIndeterminate, &[data-unchecked] ._00Q5eW_iconChecked, &[data-unchecked] ._00Q5eW_iconIndeterminate {
+      display: none;
+    }
+  }
+
+  ._00Q5eW_icon {
+    width: var(--_checkbox-icon-size, .75rem);
+    height: var(--_checkbox-icon-size, .75rem);
+    color: inherit;
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    display: flex;
+  }
+
+  ._00Q5eW_iconChecked, ._00Q5eW_iconIndeterminate {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  ._00Q5eW_label {
+    color: var(--checkbox-label-color, var(--color-foreground));
+    font-size: var(--checkbox-label-font-size, var(--text-sm));
+    font-weight: var(--checkbox-label-font-weight, var(--weight-medium));
+    line-height: var(--checkbox-label-line-height, var(--line-height-text-sm));
+  }
+}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,11 +1,28 @@
-import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
-import { ComponentProps } from 'react';
+import { ComponentProps } from "react";
+import { Checkbox } from "@base-ui/react/checkbox";
+
+//#region src/components/Checkbox/Checkbox.d.ts
 type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').CheckboxRootProps & {
-    size?: CheckboxSize;
-}, "ref"> & import('react').RefAttributes<HTMLElement>>;
-declare function CheckboxIndicator({ className, children, ...props }: CheckboxPrimitive.Indicator.Props): import("react").JSX.Element;
-declare function CheckboxIndicatorIcon({ className, children, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function CheckboxField({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;
-declare function CheckboxLabel({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-export { Checkbox, CheckboxIndicator, CheckboxIndicatorIcon, CheckboxField, CheckboxLabel };
+declare const Checkbox$1: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").CheckboxRootProps & {
+  size?: CheckboxSize;
+}, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare function CheckboxIndicator({
+  className,
+  children,
+  ...props
+}: Checkbox.Indicator.Props): import("react").JSX.Element;
+declare function CheckboxIndicatorIcon({
+  className,
+  children,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function CheckboxField({
+  className,
+  ...props
+}: ComponentProps<'label'>): import("react").JSX.Element;
+declare function CheckboxLabel({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxField, CheckboxIndicator, CheckboxIndicatorIcon, CheckboxLabel };

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,59 @@
+import { CheckIcon, IndeterminateIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Checkbox_module_default from "./Checkbox.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/components/Checkbox/Checkbox.tsx
+const Checkbox$1 = forwardRef(function Checkbox$2({ className, size = "md", children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		ref,
+		"data-slot": "checkbox-root",
+		"data-size": size,
+		className: mergeClassName(className, Checkbox_module_default.root),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckboxIndicator, {})
+	});
+});
+function CheckboxIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		"data-slot": "checkbox-indicator",
+		className: mergeClassName(className, Checkbox_module_default.indicator),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckboxIndicatorIcon, {})
+	});
+}
+function CheckboxIndicatorIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "checkbox-indicator-icon",
+		className: clsx(Checkbox_module_default.icon, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "checkbox-indicator-checked-icon",
+			className: Checkbox_module_default.iconChecked,
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "checkbox-indicator-indeterminate-icon",
+			className: Checkbox_module_default.iconIndeterminate,
+			children: /* @__PURE__ */ jsx(IndeterminateIcon, {})
+		})] })
+	});
+}
+function CheckboxField({ className, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "checkbox-field",
+		className: clsx(Checkbox_module_default.field, className),
+		...props
+	});
+}
+function CheckboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "checkbox-label",
+		className: clsx(Checkbox_module_default.label, className),
+		...props
+	});
+}
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxField, CheckboxIndicator, CheckboxIndicatorIcon, CheckboxLabel };

package/dist/components/Checkbox/Checkbox.module.js

@@ -0,0 +1,13 @@
+import './Checkbox.css';
+//#region src/components/Checkbox/Checkbox.module.css
+var Checkbox_module_default = {
+	"field": "_00Q5eW_field",
+	"icon": "_00Q5eW_icon",
+	"iconChecked": "_00Q5eW_iconChecked",
+	"iconIndeterminate": "_00Q5eW_iconIndeterminate",
+	"indicator": "_00Q5eW_indicator",
+	"label": "_00Q5eW_label",
+	"root": "_00Q5eW_root"
+};
+//#endregion
+export { Checkbox_module_default as default };

package/dist/components/Checkbox/index.d.ts

@@ -1 +1 @@
-export { Checkbox, CheckboxIndicator, CheckboxIndicatorIcon, CheckboxField, CheckboxLabel, } from './Checkbox';
+import { Checkbox, CheckboxField, CheckboxIndicator, CheckboxIndicatorIcon, CheckboxLabel } from "./Checkbox.js";

package/dist/components/CheckboxGroup/CheckboxGroup.css

@@ -0,0 +1,33 @@
+@layer ui.components {
+  ._6iNGhG_root {
+    gap: var(--checkbox-group-gap, var(--spacing-2));
+    color: var(--checkbox-group-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  ._6iNGhG_label {
+    color: var(--checkbox-group-label-color, var(--checkbox-group-color, var(--color-foreground)));
+    font-size: var(--checkbox-group-label-font-size, var(--text-sm));
+    font-weight: var(--checkbox-group-label-font-weight, var(--weight-semibold));
+    line-height: var(--checkbox-group-label-line-height, var(--line-height-text-sm));
+  }
+
+  ._6iNGhG_list {
+    align-items: flex-start;
+    gap: var(--checkbox-group-list-gap, var(--spacing-2));
+    flex-direction: column;
+    display: flex;
+  }
+
+  ._6iNGhG_item {
+    gap: var(--checkbox-group-item-gap, var(--checkbox-gap, var(--spacing-2)));
+  }
+
+  ._6iNGhG_itemLabel {
+    color: var(--checkbox-group-item-label-color, var(--checkbox-label-color, var(--color-foreground)));
+    font-size: var(--checkbox-group-item-label-font-size, var(--checkbox-label-font-size, var(--text-sm)));
+    font-weight: var(--checkbox-group-item-label-font-weight, var(--checkbox-label-font-weight, var(--weight-medium)));
+    line-height: var(--checkbox-group-item-label-line-height, var(--checkbox-label-line-height, var(--line-height-text-sm)));
+  }
+}

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,10 +1,28 @@
-import { ComponentProps } from 'react';
-import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';
-import { Checkbox, CheckboxField, CheckboxLabel } from '../Checkbox';
-declare function CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props): import("react").JSX.Element;
-declare function CheckboxGroupLabel({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function CheckboxGroupList({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function CheckboxGroupItem({ className, ...props }: ComponentProps<typeof CheckboxField>): import("react").JSX.Element;
+import { Checkbox, CheckboxField, CheckboxLabel } from "../Checkbox/Checkbox.js";
+import { ComponentProps } from "react";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+
+//#region src/components/CheckboxGroup/CheckboxGroup.d.ts
+declare function CheckboxGroup$1({
+  className,
+  ...props
+}: CheckboxGroup.Props): import("react").JSX.Element;
+declare function CheckboxGroupLabel({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CheckboxGroupList({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CheckboxGroupItem({
+  className,
+  ...props
+}: ComponentProps<typeof CheckboxField>): import("react").JSX.Element;
 declare function CheckboxGroupItemControl(props: ComponentProps<typeof Checkbox>): import("react").JSX.Element;
-declare function CheckboxGroupItemLabel({ className, ...props }: ComponentProps<typeof CheckboxLabel>): import("react").JSX.Element;
-export { CheckboxGroup, CheckboxGroupLabel, CheckboxGroupList, CheckboxGroupItem, CheckboxGroupItemControl, CheckboxGroupItemLabel, };
+declare function CheckboxGroupItemLabel({
+  className,
+  ...props
+}: ComponentProps<typeof CheckboxLabel>): import("react").JSX.Element;
+//#endregion
+export { CheckboxGroup$1 as CheckboxGroup, CheckboxGroupItem, CheckboxGroupItemControl, CheckboxGroupItemLabel, CheckboxGroupLabel, CheckboxGroupList };

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,50 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import { Checkbox, CheckboxField, CheckboxLabel } from "../Checkbox/Checkbox.js";
+import CheckboxGroup_module_default from "./CheckboxGroup.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+//#region src/components/CheckboxGroup/CheckboxGroup.tsx
+function CheckboxGroup$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxGroup, {
+		"data-slot": "checkbox-group-root",
+		className: mergeClassName(className, CheckboxGroup_module_default.root),
+		...props
+	});
+}
+function CheckboxGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "checkbox-group-label",
+		className: clsx(CheckboxGroup_module_default.label, className),
+		...props
+	});
+}
+function CheckboxGroupList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "checkbox-group-list",
+		className: clsx(CheckboxGroup_module_default.list, className),
+		...props
+	});
+}
+function CheckboxGroupItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxField, {
+		"data-slot": "checkbox-group-item",
+		className: clsx(CheckboxGroup_module_default.item, className),
+		...props
+	});
+}
+function CheckboxGroupItemControl(props) {
+	return /* @__PURE__ */ jsx(Checkbox, {
+		"data-slot": "checkbox-group-item-control",
+		...props
+	});
+}
+function CheckboxGroupItemLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxLabel, {
+		"data-slot": "checkbox-group-item-label",
+		className: clsx(CheckboxGroup_module_default.itemLabel, className),
+		...props
+	});
+}
+//#endregion
+export { CheckboxGroup$1 as CheckboxGroup, CheckboxGroupItem, CheckboxGroupItemControl, CheckboxGroupItemLabel, CheckboxGroupLabel, CheckboxGroupList };

package/dist/components/CheckboxGroup/CheckboxGroup.module.js

@@ -0,0 +1,11 @@
+import './CheckboxGroup.css';
+//#region src/components/CheckboxGroup/CheckboxGroup.module.css
+var CheckboxGroup_module_default = {
+	"item": "_6iNGhG_item",
+	"itemLabel": "_6iNGhG_itemLabel",
+	"label": "_6iNGhG_label",
+	"list": "_6iNGhG_list",
+	"root": "_6iNGhG_root"
+};
+//#endregion
+export { CheckboxGroup_module_default as default };

package/dist/components/CheckboxGroup/index.d.ts

@@ -1 +1 @@
-export { CheckboxGroup, CheckboxGroupLabel, CheckboxGroupList, CheckboxGroupItem, CheckboxGroupItemControl, CheckboxGroupItemLabel, } from './CheckboxGroup';
+import { CheckboxGroup, CheckboxGroupItem, CheckboxGroupItemControl, CheckboxGroupItemLabel, CheckboxGroupLabel, CheckboxGroupList } from "./CheckboxGroup.js";

package/dist/components/CloseButton/CloseButton.css

@@ -0,0 +1,49 @@
+@layer ui.components {
+  .yxg1Ha_root {
+    box-sizing: border-box;
+    width: var(--close-button-size, 28px);
+    height: var(--close-button-size, 28px);
+    background-color: var(--close-button-bg, transparent);
+    border-radius: var(--close-button-radius, var(--radius-sm));
+    color: var(--close-button-color, var(--color-muted-foreground));
+    appearance: none;
+    font: inherit;
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--close-button-transition, var(--transition-default)),
+      color var(--close-button-transition, var(--transition-default)),
+      opacity var(--close-button-transition, var(--transition-default));
+    border: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+
+    & > :where(svg) {
+      width: var(--close-button-icon-size, 12px);
+      height: var(--close-button-icon-size, 12px);
+      flex-shrink: 0;
+    }
+
+    @media (hover: hover) {
+      &:hover:not(:disabled):not([data-disabled]) {
+        background-color: var(--close-button-bg-hover, var(--color-muted));
+        color: var(--close-button-color-hover, var(--color-foreground));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--close-button-focus-ring-width, var(--border-width-md)) solid
+        var(--close-button-focus-ring-color, var(--color-ring));
+      outline-offset: var(--close-button-focus-ring-offset, 2px);
+    }
+
+    &:disabled, &[data-disabled] {
+      cursor: default;
+      pointer-events: none;
+      opacity: var(--close-button-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+}

package/dist/components/CloseButton/CloseButton.d.ts

@@ -1,2 +1,4 @@
-declare const CloseButton: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').ButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export { CloseButton };
+//#region src/components/CloseButton/CloseButton.d.ts
+declare const CloseButton: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { CloseButton };

package/dist/components/CloseButton/CloseButton.js

@@ -0,0 +1,22 @@
+import { CloseIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import CloseButton_module_default from "./CloseButton.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Button } from "@base-ui/react/button";
+//#region src/components/CloseButton/CloseButton.tsx
+const DEFAULT_CLOSE_BUTTON_LABEL = "Close";
+const CloseButton = forwardRef(function CloseButton({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		"data-slot": "close-button",
+		className: mergeClassName(className, CloseButton_module_default.root),
+		"aria-label": ariaLabel ?? (children == null && ariaLabelledBy == null ? DEFAULT_CLOSE_BUTTON_LABEL : void 0),
+		"aria-labelledby": ariaLabelledBy,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+	});
+});
+//#endregion
+export { CloseButton };

package/dist/components/CloseButton/CloseButton.module.js

@@ -0,0 +1,5 @@
+import './CloseButton.css';
+//#region src/components/CloseButton/CloseButton.module.css
+var CloseButton_module_default = { "root": "yxg1Ha_root" };
+//#endregion
+export { CloseButton_module_default as default };