@moduix/react 1.1.0

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,188 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
+import Drawer_module_default from "./Drawer.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Drawer } from "@ark-ui/react/drawer";
+//#region src/components/drawer/Drawer.tsx
+const DEFAULT_CLOSE_BUTTON_LABEL = "Close drawer";
+function DrawerRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			lazyMount,
+			unmountOnExit,
+			...props
+		})
+	});
+}
+function DrawerRootProvider({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Drawer.RootProvider, {
+			lazyMount,
+			unmountOnExit,
+			...props
+		})
+	});
+}
+const DrawerStack = Drawer.Stack;
+const DrawerTrigger = forwardRef(function DrawerTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		ref,
+		asChild,
+		"data-slot": "drawer-trigger",
+		className: clsx(!asChild && Drawer_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const DrawerBackdrop = forwardRef(function DrawerBackdrop({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Drawer.Backdrop, {
+		ref,
+		"data-slot": "drawer-backdrop",
+		className: clsx(Drawer_module_default.backdrop, normalizeClassName(className)),
+		...props
+	}) });
+});
+const DrawerPositioner = forwardRef(function DrawerPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Drawer.Positioner, {
+		ref,
+		"data-slot": "drawer-positioner",
+		className: clsx(Drawer_module_default.positioner, normalizeClassName(className)),
+		...props
+	}) });
+});
+const DrawerContent = forwardRef(function DrawerContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.Content, {
+		ref,
+		"data-slot": "drawer-content",
+		className: clsx(Drawer_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const DrawerGrabber = forwardRef(function DrawerGrabber({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.Grabber, {
+		ref,
+		"data-slot": "drawer-grabber",
+		className: clsx(Drawer_module_default.grabber, normalizeClassName(className)),
+		...props
+	});
+});
+const DrawerGrabberIndicator = forwardRef(function DrawerGrabberIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.GrabberIndicator, {
+		ref,
+		"data-slot": "drawer-grabber-indicator",
+		className: clsx(Drawer_module_default.grabberIndicator, normalizeClassName(className)),
+		...props
+	});
+});
+const DrawerTitle = forwardRef(function DrawerTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		ref,
+		"data-slot": "drawer-title",
+		className: clsx(Drawer_module_default.title, normalizeClassName(className)),
+		...props
+	});
+});
+const DrawerDescription = forwardRef(function DrawerDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		ref,
+		"data-slot": "drawer-description",
+		className: clsx(Drawer_module_default.description, normalizeClassName(className)),
+		...props
+	});
+});
+const DrawerCloseTrigger = forwardRef(function DrawerCloseTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.CloseTrigger, {
+		ref,
+		asChild,
+		"data-slot": "drawer-close-trigger",
+		className: clsx(!asChild && Drawer_module_default.closeTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const DrawerCloseIcon = forwardRef(function DrawerCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.CloseTrigger, {
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			ref,
+			"data-slot": "drawer-close-icon",
+			"aria-label": ariaLabel,
+			className: clsx(Drawer_module_default.closeIcon, normalizeClassName(className)),
+			children
+		})
+	});
+});
+const DrawerSwipeArea = forwardRef(function DrawerSwipeArea({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.SwipeArea, {
+		ref,
+		"data-slot": "drawer-swipe-area",
+		className: clsx(Drawer_module_default.swipeArea, normalizeClassName(className)),
+		...props
+	});
+});
+const DrawerIndent = forwardRef(function DrawerIndent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.Indent, {
+		ref,
+		"data-slot": "drawer-indent",
+		className: clsx(Drawer_module_default.indent, normalizeClassName(className)),
+		...props
+	});
+});
+const DrawerIndentBackground = forwardRef(function DrawerIndentBackground({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Drawer.IndentBackground, {
+		ref,
+		"data-slot": "drawer-indent-background",
+		className: clsx(Drawer_module_default.indentBackground, normalizeClassName(className)),
+		...props
+	});
+});
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: clsx(Drawer_module_default.header, className),
+		...props
+	});
+}
+function DrawerBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-body",
+		className: clsx(Drawer_module_default.body, className),
+		...props
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: clsx(Drawer_module_default.footer, className),
+		...props
+	});
+}
+const Drawer$1 = Object.assign(DrawerRoot, {
+	Root: DrawerRoot,
+	RootProvider: DrawerRootProvider,
+	Stack: DrawerStack,
+	Trigger: DrawerTrigger,
+	Backdrop: DrawerBackdrop,
+	Positioner: DrawerPositioner,
+	Content: DrawerContent,
+	Grabber: DrawerGrabber,
+	GrabberIndicator: DrawerGrabberIndicator,
+	Title: DrawerTitle,
+	Description: DrawerDescription,
+	CloseTrigger: DrawerCloseTrigger,
+	CloseIcon: DrawerCloseIcon,
+	SwipeArea: DrawerSwipeArea,
+	Indent: DrawerIndent,
+	IndentBackground: DrawerIndentBackground,
+	Header: DrawerHeader,
+	Body: DrawerBody,
+	Footer: DrawerFooter
+});
+//#endregion
+export { Drawer$1 as Drawer };

package/dist/components/drawer/Drawer.module.js

@@ -0,0 +1,32 @@
+import './Drawer.css';
+//#region src/components/drawer/Drawer.module.css
+var Drawer_module_default = {
+	"backdrop": "OP_kSq_backdrop",
+	"body": "OP_kSq_body",
+	"closeIcon": "OP_kSq_closeIcon",
+	"closeTrigger": "OP_kSq_closeTrigger",
+	"content": "OP_kSq_content",
+	"description": "OP_kSq_description",
+	"drawer-backdrop-in": "OP_kSq_drawer-backdrop-in",
+	"drawer-backdrop-out": "OP_kSq_drawer-backdrop-out",
+	"drawer-content-in-down": "OP_kSq_drawer-content-in-down",
+	"drawer-content-in-left": "OP_kSq_drawer-content-in-left",
+	"drawer-content-in-right": "OP_kSq_drawer-content-in-right",
+	"drawer-content-in-up": "OP_kSq_drawer-content-in-up",
+	"drawer-content-out-down": "OP_kSq_drawer-content-out-down",
+	"drawer-content-out-left": "OP_kSq_drawer-content-out-left",
+	"drawer-content-out-right": "OP_kSq_drawer-content-out-right",
+	"drawer-content-out-up": "OP_kSq_drawer-content-out-up",
+	"footer": "OP_kSq_footer",
+	"grabber": "OP_kSq_grabber",
+	"grabberIndicator": "OP_kSq_grabberIndicator",
+	"header": "OP_kSq_header",
+	"indent": "OP_kSq_indent",
+	"indentBackground": "OP_kSq_indentBackground",
+	"positioner": "OP_kSq_positioner",
+	"swipeArea": "OP_kSq_swipeArea",
+	"title": "OP_kSq_title",
+	"trigger": "OP_kSq_trigger"
+};
+//#endregion
+export { Drawer_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Drawer } from "./Drawer.js";
+export { Drawer };

package/dist/components/editable/Editable.css

@@ -0,0 +1,171 @@
+@layer ui.components {
+  .oHzDHG_root {
+    box-sizing: border-box;
+    align-items: center;
+    row-gap: var(--editable-gap, var(--spacing-1));
+    column-gap: var(--editable-control-gap, var(--spacing-1));
+    width: var(--editable-width, auto);
+    max-width: var(--editable-max-width, 100%);
+    color: var(--editable-color, var(--color-foreground));
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: inline-grid;
+
+    &:has(.oHzDHG_area[data-disabled]) {
+      opacity: var(--editable-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .oHzDHG_label {
+    align-items: center;
+    gap: var(--editable-label-gap, var(--spacing-1));
+    color: var(--editable-label-color, var(--color-foreground));
+    font-size: var(--editable-label-font-size, var(--text-sm));
+    font-weight: var(--editable-label-font-weight, var(--weight-medium));
+    line-height: var(--editable-label-line-height, var(--line-height-text-sm));
+    grid-column: 1 / -1;
+    display: inline-flex;
+
+    &[data-invalid] {
+      color: var(--editable-label-color-invalid, var(--color-destructive));
+    }
+  }
+
+  .oHzDHG_area {
+    --_editable-focus-ring-width: var(--editable-focus-ring-width, var(--editable-border-width, var(--border-width-sm)));
+    box-sizing: border-box;
+    width: var(--editable-area-width, 100%);
+    min-width: 0;
+    min-height: var(--editable-area-height, var(--size-lg));
+    border: var(--editable-border-width, var(--border-width-sm)) var(--editable-border-style, solid)
+      var(--editable-border-color, var(--color-border));
+    border-radius: var(--editable-radius, var(--radius-md));
+    padding: var(--editable-padding-y, .5rem) var(--editable-padding-x, .875rem);
+    background-color: var(--editable-bg, var(--color-background));
+    color: var(--editable-color, var(--color-foreground));
+    outline: var(--_editable-focus-ring-width) solid transparent;
+    outline-offset: calc(var(--_editable-focus-ring-width) * -1);
+    transition: border-color var(--editable-transition, var(--transition-default)),
+      outline-color var(--editable-transition, var(--transition-default)),
+      opacity var(--editable-transition, var(--transition-default));
+    grid-column: 1;
+    align-items: center;
+    display: inline-flex;
+
+    &[data-focus] {
+      outline-color: var(--editable-focus-ring-color, var(--color-ring));
+    }
+
+    &:has(.oHzDHG_input:is([data-invalid], [aria-invalid="true"]), .oHzDHG_preview:is([data-invalid], [aria-invalid="true"])) {
+      border-color: var(--editable-border-color-invalid, var(--color-destructive));
+
+      &[data-focus] {
+        outline-color: var(--editable-border-color-invalid, var(--color-destructive));
+      }
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+
+  .oHzDHG_input, .oHzDHG_preview {
+    box-sizing: border-box;
+    width: var(--editable-input-width, 100%);
+    min-width: 0;
+    color: inherit;
+    font: inherit;
+    font-size: var(--editable-font-size, var(--text-md));
+    line-height: var(--editable-line-height, var(--line-height-text-md));
+    background: none;
+    border: 0;
+    outline: 0;
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
+  .oHzDHG_input {
+    appearance: none;
+
+    &::placeholder {
+      color: var(--editable-placeholder-color, var(--color-muted-foreground));
+    }
+
+    &:is(textarea) {
+      min-height: var(--editable-textarea-min-height, 6rem);
+      resize: var(--editable-textarea-resize, vertical);
+    }
+  }
+
+  .oHzDHG_preview {
+    min-height: var(--editable-preview-min-height, 1lh);
+    cursor: text;
+
+    &[data-placeholder-shown] {
+      color: var(--editable-placeholder-color, var(--color-muted-foreground));
+    }
+
+    &:is([data-disabled], [data-readonly], [aria-readonly="true"]) {
+      cursor: default;
+    }
+  }
+
+  .oHzDHG_control {
+    align-items: center;
+    align-self: var(--editable-control-align, center);
+    gap: var(--editable-control-gap, var(--spacing-1));
+    grid-column: 2;
+    display: inline-flex;
+  }
+
+  .oHzDHG_trigger {
+    box-sizing: border-box;
+    width: var(--editable-trigger-size, var(--editable-area-height, var(--size-lg)));
+    min-width: var(--editable-trigger-size, var(--editable-area-height, var(--size-lg)));
+    height: var(--editable-trigger-size, var(--editable-area-height, var(--size-lg)));
+    border: var(--editable-trigger-border-width, var(--border-width-sm))
+      var(--editable-trigger-border-style, solid)
+      var(--editable-trigger-border-color, var(--color-border));
+    border-radius: var(--editable-trigger-radius, var(--radius-sm));
+    background-color: var(--editable-trigger-bg, var(--color-background));
+    color: var(--editable-trigger-color, var(--color-foreground));
+    outline: var(--editable-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: calc(0px - var(--editable-focus-ring-width, var(--border-width-sm)));
+    cursor: pointer;
+    transition: background-color var(--editable-transition, var(--transition-default)),
+      border-color var(--editable-transition, var(--transition-default)),
+      color var(--editable-transition, var(--transition-default)),
+      outline-color var(--editable-transition, var(--transition-default)),
+      opacity var(--editable-transition, var(--transition-default));
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--editable-trigger-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active {
+      background-color: var(--editable-trigger-bg-active, var(--editable-trigger-bg-hover, var(--color-accent)));
+    }
+
+    &:focus-visible, &[data-focus] {
+      outline-color: var(--editable-focus-ring-color, var(--color-ring));
+    }
+
+    &:is([data-disabled], :disabled) {
+      pointer-events: none;
+      opacity: var(--editable-disabled-opacity, var(--opacity-disabled));
+    }
+
+    & > svg {
+      width: var(--editable-trigger-icon-size, .875rem);
+      height: var(--editable-trigger-icon-size, .875rem);
+      flex-shrink: 0;
+    }
+  }
+}

package/dist/components/editable/Editable.d.ts

@@ -0,0 +1,17 @@
+import { Editable } from "@ark-ui/react/editable";
+
+//#region src/components/editable/Editable.d.ts
+declare const Editable$1: import("react").ForwardRefExoticComponent<Omit<Editable.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Editable.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<Editable.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<Editable.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  Area: import("react").ForwardRefExoticComponent<Omit<Editable.AreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Input: import("react").ForwardRefExoticComponent<Omit<Editable.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Preview: import("react").ForwardRefExoticComponent<Omit<Editable.PreviewProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<Editable.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  EditTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.EditTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  SubmitTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.SubmitTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  CancelTrigger: import("react").ForwardRefExoticComponent<Omit<Editable.CancelTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Editable$1 as Editable };

package/dist/components/editable/Editable.js

@@ -0,0 +1,106 @@
+import { CheckIcon, CloseIcon, PencilIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Editable_module_default from "./Editable.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Editable } from "@ark-ui/react/editable";
+//#region src/components/editable/Editable.tsx
+const EditableRoot = forwardRef(function EditableRoot({ activationMode = "dblclick", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Editable.Root, {
+		ref,
+		"data-slot": "editable-root",
+		activationMode,
+		className: clsx(Editable_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const EditableRootProvider = forwardRef(function EditableRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Editable.RootProvider, {
+		ref,
+		"data-slot": "editable-root-provider",
+		className: clsx(Editable_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const EditableLabel = forwardRef(function EditableLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Editable.Label, {
+		ref,
+		"data-slot": "editable-label",
+		className: clsx(Editable_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const EditableArea = forwardRef(function EditableArea({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Editable.Area, {
+		ref,
+		"data-slot": "editable-area",
+		className: clsx(Editable_module_default.area, normalizeClassName(className)),
+		...props
+	});
+});
+const EditableInput = forwardRef(function EditableInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Editable.Input, {
+		ref,
+		"data-slot": "editable-input",
+		className: clsx(Editable_module_default.input, normalizeClassName(className)),
+		...props
+	});
+});
+const EditablePreview = forwardRef(function EditablePreview({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Editable.Preview, {
+		ref,
+		"data-slot": "editable-preview",
+		className: clsx(Editable_module_default.preview, normalizeClassName(className)),
+		...props
+	});
+});
+const EditableControl = forwardRef(function EditableControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Editable.Control, {
+		ref,
+		"data-slot": "editable-control",
+		className: clsx(Editable_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const EditableEditTrigger = forwardRef(function EditableEditTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Editable.EditTrigger, {
+		ref,
+		"data-slot": "editable-edit-trigger",
+		className: clsx(Editable_module_default.trigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PencilIcon, {})
+	});
+});
+const EditableSubmitTrigger = forwardRef(function EditableSubmitTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Editable.SubmitTrigger, {
+		ref,
+		"data-slot": "editable-submit-trigger",
+		className: clsx(Editable_module_default.trigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+});
+const EditableCancelTrigger = forwardRef(function EditableCancelTrigger({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Editable.CancelTrigger, {
+		ref,
+		"data-slot": "editable-cancel-trigger",
+		className: clsx(Editable_module_default.trigger, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+	});
+});
+const Editable$1 = Object.assign(EditableRoot, {
+	Root: EditableRoot,
+	RootProvider: EditableRootProvider,
+	Label: EditableLabel,
+	Area: EditableArea,
+	Input: EditableInput,
+	Preview: EditablePreview,
+	Control: EditableControl,
+	EditTrigger: EditableEditTrigger,
+	SubmitTrigger: EditableSubmitTrigger,
+	CancelTrigger: EditableCancelTrigger
+});
+//#endregion
+export { Editable$1 as Editable };

package/dist/components/editable/Editable.module.js

@@ -0,0 +1,13 @@
+import './Editable.css';
+//#region src/components/editable/Editable.module.css
+var Editable_module_default = {
+	"area": "oHzDHG_area",
+	"control": "oHzDHG_control",
+	"input": "oHzDHG_input",
+	"label": "oHzDHG_label",
+	"preview": "oHzDHG_preview",
+	"root": "oHzDHG_root",
+	"trigger": "oHzDHG_trigger"
+};
+//#endregion
+export { Editable_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Editable } from "./Editable.js";
+export { Editable };

package/dist/components/empty/Empty.css

@@ -0,0 +1,78 @@
+@layer ui.components {
+  .uHDs1G_root {
+    box-sizing: border-box;
+    justify-items: center;
+    gap: var(--empty-gap, var(--spacing-4));
+    width: 100%;
+    min-width: 0;
+    padding: var(--empty-padding, var(--spacing-8));
+    border: var(--empty-border-width, var(--border-width-sm)) solid
+      var(--empty-border-color, var(--color-border));
+    border-radius: var(--empty-radius, var(--radius-xl));
+    background-color: var(--empty-bg, color-mix(in oklab, var(--color-card) 92%, var(--color-muted)));
+    color: var(--empty-color, var(--color-card-foreground));
+    box-shadow: var(--empty-shadow, none);
+    text-align: center;
+    display: grid;
+  }
+
+  .uHDs1G_icon {
+    min-width: 0;
+    padding: var(--empty-icon-padding, var(--spacing-3));
+    border-radius: var(--radius-full);
+    background-color: var(--empty-icon-bg, var(--color-muted));
+    color: var(--empty-icon-color, var(--color-muted-foreground));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    &:where(svg), & :where(svg) {
+      width: var(--empty-icon-size, 1.5rem);
+      height: var(--empty-icon-size, 1.5rem);
+      pointer-events: none;
+      flex-shrink: 0;
+    }
+  }
+
+  .uHDs1G_content {
+    justify-items: center;
+    gap: var(--empty-content-gap, var(--spacing-1));
+    min-width: 0;
+    max-width: var(--empty-content-max-width, 28rem);
+    display: grid;
+  }
+
+  .uHDs1G_title {
+    min-width: 0;
+    color: var(--empty-title-color, currentColor);
+    font-size: var(--empty-title-font-size, var(--text-xl));
+    font-weight: var(--empty-title-font-weight, var(--weight-semibold));
+    line-height: var(--empty-title-line-height, var(--line-height-text-xl));
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .uHDs1G_description {
+    min-width: 0;
+    color: var(--empty-description-color, var(--color-muted-foreground));
+    font-size: var(--empty-description-font-size, var(--text-sm));
+    line-height: var(--empty-description-line-height, var(--line-height-text-sm));
+    overflow-wrap: anywhere;
+
+    & > :first-child {
+      margin-top: 0;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .uHDs1G_actions {
+    justify-content: center;
+    align-items: center;
+    gap: var(--empty-actions-gap, var(--spacing-2));
+    flex-wrap: wrap;
+    display: flex;
+  }
+}

package/dist/components/empty/Empty.d.ts

@@ -0,0 +1,11 @@
+//#region src/components/empty/Empty.d.ts
+declare const Empty: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Icon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLHeadingElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+  Actions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Empty };