@moduix/react 1.1.0

package/dist/components/command-palette/CommandPalette.js

@@ -0,0 +1,383 @@
+import { CheckIcon, CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
+import { Kbd } from "../kbd/Kbd.js";
+import { ScrollArea } from "../scroll-area/ScrollArea.js";
+import CommandPalette_module_default from "./CommandPalette.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef, useEffect } from "react";
+import { Combobox } from "@ark-ui/react/combobox";
+import { Dialog, useDialog, useDialogContext } from "@ark-ui/react/dialog";
+//#region src/components/command-palette/CommandPalette.tsx
+const DEFAULT_CLOSE_TRIGGER_LABEL = "Close command palette";
+const DEFAULT_CLOSE_ICON_LABEL = "Close command palette";
+const DEFAULT_CLEAR_TRIGGER_LABEL = "Clear search";
+function isShortcutMatch(event, shortcut) {
+	const parts = shortcut.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
+	const [modifier, key] = parts;
+	if (!modifier || !key || parts.length !== 2 || event.shiftKey) return false;
+	const eventKey = event.key.toLowerCase();
+	const eventCode = event.code.startsWith("Key") || event.code.startsWith("Digit") ? event.code.slice(event.code.startsWith("Key") ? 3 : 5).toLowerCase() : event.code.toLowerCase();
+	if (eventKey !== key && eventCode !== key) return false;
+	if (modifier === "mod") return (event.metaKey || event.ctrlKey) && !event.altKey;
+	if (modifier === "ctrl" || modifier === "control") return event.ctrlKey && !event.metaKey && !event.altKey;
+	if (modifier === "meta" || modifier === "cmd" || modifier === "command") return event.metaKey && !event.ctrlKey && !event.altKey;
+	if (modifier === "alt" || modifier === "option") return event.altKey && !event.metaKey && !event.ctrlKey;
+	return false;
+}
+function isEditableTarget(target) {
+	if (!(target instanceof Element)) return false;
+	return target.closest("input, textarea, select, [contenteditable], [contenteditable=\"true\"]") !== null;
+}
+function CommandPaletteRoot({ shortcut = false, shortcutTarget, lazyMount = true, unmountOnExit = true, immediate, onExitComplete, portalled, present, portalRef, skipAnimationOnMount, children, ...props }) {
+	const dialog = useDialog(props);
+	useEffect(() => {
+		if (!shortcut || shortcutTarget === null) return;
+		const target = shortcutTarget ?? document;
+		const handleKeyDown = (event) => {
+			if (event.defaultPrevented || event.isComposing || isEditableTarget(event.target) || !isShortcutMatch(event, shortcut)) return;
+			event.preventDefault();
+			dialog.setOpen(true);
+		};
+		const eventListener = handleKeyDown;
+		target.addEventListener("keydown", eventListener);
+		return () => target.removeEventListener("keydown", eventListener);
+	}, [
+		dialog,
+		shortcut,
+		shortcutTarget
+	]);
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Dialog.RootProvider, {
+			value: dialog,
+			immediate,
+			lazyMount,
+			onExitComplete,
+			present,
+			skipAnimationOnMount,
+			unmountOnExit,
+			children
+		})
+	});
+}
+function CommandPaletteRootProvider({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Dialog.RootProvider, {
+			lazyMount,
+			unmountOnExit,
+			...props
+		})
+	});
+}
+const CommandPaletteTrigger = forwardRef(function CommandPaletteTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		ref,
+		asChild,
+		"data-slot": "command-palette-trigger",
+		className: clsx(!asChild && CommandPalette_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteBackdrop = forwardRef(function CommandPaletteBackdrop({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		ref,
+		"data-slot": "command-palette-backdrop",
+		className: clsx(CommandPalette_module_default.backdrop, normalizeClassName(className)),
+		...props
+	}) });
+});
+const CommandPalettePositioner = forwardRef(function CommandPalettePositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Dialog.Positioner, {
+		ref,
+		"data-slot": "command-palette-positioner",
+		className: clsx(CommandPalette_module_default.positioner, normalizeClassName(className)),
+		...props
+	}) });
+});
+const CommandPaletteContent = forwardRef(function CommandPaletteContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Content, {
+		ref,
+		"data-slot": "command-palette-content",
+		className: clsx(CommandPalette_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteTitle = forwardRef(function CommandPaletteTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		ref,
+		"data-slot": "command-palette-title",
+		className: clsx(CommandPalette_module_default.title, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteDescription = forwardRef(function CommandPaletteDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		ref,
+		"data-slot": "command-palette-description",
+		className: clsx(CommandPalette_module_default.description, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteCloseTrigger = forwardRef(function CommandPaletteCloseTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+		ref,
+		asChild,
+		"data-slot": "command-palette-close-trigger",
+		"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLOSE_TRIGGER_LABEL : void 0),
+		"aria-labelledby": ariaLabelledBy,
+		className: clsx(!asChild && CommandPalette_module_default.closeTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? (!asChild ? /* @__PURE__ */ jsx(CloseIcon, { className: CommandPalette_module_default.iconSvg }) : void 0)
+	});
+});
+const CommandPaletteCloseIcon = forwardRef(function CommandPaletteCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_ICON_LABEL, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			ref,
+			"data-slot": "command-palette-close-icon",
+			"aria-label": ariaLabel,
+			className: clsx(CommandPalette_module_default.closeIcon, normalizeClassName(className)),
+			children
+		})
+	});
+});
+const CommandPaletteHeader = forwardRef(function CommandPaletteHeader({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-slot": "command-palette-header",
+		className: clsx(CommandPalette_module_default.header, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteBody = forwardRef(function CommandPaletteBody({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-slot": "command-palette-body",
+		className: clsx(CommandPalette_module_default.body, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteCombobox = forwardRef(function CommandPaletteCombobox({ className, open = true, inputBehavior = "autohighlight", selectionBehavior = "preserve", closeOnSelect = true, disableLayer = true, onSelect, ...props }, ref) {
+	const dialog = useDialogContext();
+	const handleSelect = (details) => {
+		onSelect?.(details);
+		if (closeOnSelect) dialog.setOpen(false);
+	};
+	return /* @__PURE__ */ jsx(Combobox.Root, {
+		ref,
+		"data-slot": "command-palette-combobox",
+		className: clsx(CommandPalette_module_default.combobox, normalizeClassName(className)),
+		open,
+		inputBehavior,
+		selectionBehavior,
+		closeOnSelect,
+		disableLayer,
+		onSelect: handleSelect,
+		...props
+	});
+});
+const CommandPaletteControl = forwardRef(function CommandPaletteControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.Control, {
+		ref,
+		"data-slot": "command-palette-control",
+		className: clsx(CommandPalette_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteInput = forwardRef(function CommandPaletteInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.Input, {
+		ref,
+		"data-slot": "command-palette-input",
+		className: clsx(CommandPalette_module_default.input, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteClearTrigger = forwardRef(function CommandPaletteClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.ClearTrigger, {
+		ref,
+		asChild,
+		"data-slot": "command-palette-clear-trigger",
+		"aria-label": ariaLabel ?? (!asChild && children == null && ariaLabelledBy == null ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0),
+		"aria-labelledby": ariaLabelledBy,
+		className: clsx(!asChild && CommandPalette_module_default.clearTrigger, normalizeClassName(className)),
+		...props,
+		children: children ?? (!asChild ? /* @__PURE__ */ jsx(CloseIcon, { className: CommandPalette_module_default.iconSvg }) : void 0)
+	});
+});
+const CommandPaletteList = forwardRef(function CommandPaletteList({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.Content, {
+		ref,
+		"data-slot": "command-palette-list",
+		className: clsx(CommandPalette_module_default.list, normalizeClassName(className)),
+		...props,
+		children: /* @__PURE__ */ jsxs(ScrollArea, {
+			"data-slot": "command-palette-scroll-area",
+			className: CommandPalette_module_default.scrollArea,
+			children: [
+				/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+					"data-slot": "command-palette-scroll-viewport",
+					className: CommandPalette_module_default.scrollViewport,
+					children: /* @__PURE__ */ jsx(ScrollArea.Content, {
+						"data-slot": "command-palette-scroll-content",
+						className: CommandPalette_module_default.scrollContent,
+						children
+					})
+				}),
+				/* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+					"data-slot": "command-palette-scrollbar",
+					className: CommandPalette_module_default.scrollbar,
+					children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})
+				}),
+				/* @__PURE__ */ jsx(ScrollArea.Corner, {})
+			]
+		})
+	});
+});
+const CommandPaletteEmpty = forwardRef(function CommandPaletteEmpty({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		ref,
+		"data-slot": "command-palette-empty",
+		className: clsx(CommandPalette_module_default.empty, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteItemGroup = forwardRef(function CommandPaletteItemGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.ItemGroup, {
+		ref,
+		"data-slot": "command-palette-item-group",
+		className: clsx(CommandPalette_module_default.itemGroup, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteItemGroupLabel = forwardRef(function CommandPaletteItemGroupLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.ItemGroupLabel, {
+		ref,
+		"data-slot": "command-palette-item-group-label",
+		className: clsx(CommandPalette_module_default.itemGroupLabel, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteItem = forwardRef(function CommandPaletteItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.Item, {
+		ref,
+		"data-slot": "command-palette-item",
+		className: clsx(CommandPalette_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteItemText = forwardRef(function CommandPaletteItemText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.ItemText, {
+		ref,
+		"data-slot": "command-palette-item-text",
+		className: clsx(CommandPalette_module_default.itemText, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteItemIndicator = forwardRef(function CommandPaletteItemIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+		ref,
+		"data-slot": "command-palette-item-indicator",
+		className: clsx(CommandPalette_module_default.itemIndicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+});
+const CommandPaletteItemIcon = forwardRef(function CommandPaletteItemIcon({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		"data-slot": "command-palette-item-icon",
+		className: clsx(CommandPalette_module_default.itemIcon, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteItemLabel = forwardRef(function CommandPaletteItemLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		"data-slot": "command-palette-item-label",
+		className: clsx(CommandPalette_module_default.itemLabel, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteItemDescription = forwardRef(function CommandPaletteItemDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		"data-slot": "command-palette-item-description",
+		className: clsx(CommandPalette_module_default.itemDescription, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteItemMeta = forwardRef(function CommandPaletteItemMeta({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		"data-slot": "command-palette-item-meta",
+		className: clsx(CommandPalette_module_default.itemMeta, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteSeparator = forwardRef(function CommandPaletteSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		role: "separator",
+		"data-slot": "command-palette-separator",
+		className: clsx(CommandPalette_module_default.separator, normalizeClassName(className)),
+		...props
+	});
+});
+const CommandPaletteFooter = forwardRef(function CommandPaletteFooter({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-slot": "command-palette-footer",
+		className: clsx(CommandPalette_module_default.footer, normalizeClassName(className)),
+		...props
+	});
+});
+function CommandPaletteKbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Kbd.Root, {
+		"data-slot": "command-palette-kbd",
+		className: clsx(CommandPalette_module_default.kbd, normalizeClassName(className)),
+		...props
+	});
+}
+const CommandPalette = Object.assign(CommandPaletteRoot, {
+	Root: CommandPaletteRoot,
+	RootProvider: CommandPaletteRootProvider,
+	Trigger: CommandPaletteTrigger,
+	Backdrop: CommandPaletteBackdrop,
+	Positioner: CommandPalettePositioner,
+	Content: CommandPaletteContent,
+	Title: CommandPaletteTitle,
+	Description: CommandPaletteDescription,
+	CloseTrigger: CommandPaletteCloseTrigger,
+	CloseIcon: CommandPaletteCloseIcon,
+	Header: CommandPaletteHeader,
+	Body: CommandPaletteBody,
+	Combobox: CommandPaletteCombobox,
+	Control: CommandPaletteControl,
+	Input: CommandPaletteInput,
+	ClearTrigger: CommandPaletteClearTrigger,
+	List: CommandPaletteList,
+	Empty: CommandPaletteEmpty,
+	ItemGroup: CommandPaletteItemGroup,
+	ItemGroupLabel: CommandPaletteItemGroupLabel,
+	Item: CommandPaletteItem,
+	ItemText: CommandPaletteItemText,
+	ItemIndicator: CommandPaletteItemIndicator,
+	ItemIcon: CommandPaletteItemIcon,
+	ItemLabel: CommandPaletteItemLabel,
+	ItemDescription: CommandPaletteItemDescription,
+	ItemMeta: CommandPaletteItemMeta,
+	Separator: CommandPaletteSeparator,
+	Footer: CommandPaletteFooter,
+	Kbd: CommandPaletteKbd
+});
+//#endregion
+export { CommandPalette };

package/dist/components/command-palette/CommandPalette.module.js

@@ -0,0 +1,43 @@
+import './CommandPalette.css';
+//#region src/components/command-palette/CommandPalette.module.css
+var CommandPalette_module_default = {
+	"backdrop": "v74_Gq_backdrop",
+	"body": "v74_Gq_body",
+	"clearTrigger": "v74_Gq_clearTrigger",
+	"closeIcon": "v74_Gq_closeIcon",
+	"closeTrigger": "v74_Gq_closeTrigger",
+	"combobox": "v74_Gq_combobox",
+	"command-palette-backdrop-in": "v74_Gq_command-palette-backdrop-in",
+	"command-palette-backdrop-out": "v74_Gq_command-palette-backdrop-out",
+	"command-palette-content-in": "v74_Gq_command-palette-content-in",
+	"command-palette-content-out": "v74_Gq_command-palette-content-out",
+	"content": "v74_Gq_content",
+	"control": "v74_Gq_control",
+	"description": "v74_Gq_description",
+	"empty": "v74_Gq_empty",
+	"footer": "v74_Gq_footer",
+	"header": "v74_Gq_header",
+	"iconSvg": "v74_Gq_iconSvg",
+	"input": "v74_Gq_input",
+	"item": "v74_Gq_item",
+	"itemDescription": "v74_Gq_itemDescription",
+	"itemGroup": "v74_Gq_itemGroup",
+	"itemGroupLabel": "v74_Gq_itemGroupLabel",
+	"itemIcon": "v74_Gq_itemIcon",
+	"itemIndicator": "v74_Gq_itemIndicator",
+	"itemLabel": "v74_Gq_itemLabel",
+	"itemMeta": "v74_Gq_itemMeta",
+	"itemText": "v74_Gq_itemText",
+	"kbd": "v74_Gq_kbd",
+	"list": "v74_Gq_list",
+	"positioner": "v74_Gq_positioner",
+	"scrollArea": "v74_Gq_scrollArea",
+	"scrollbar": "v74_Gq_scrollbar",
+	"scrollContent": "v74_Gq_scrollContent",
+	"scrollViewport": "v74_Gq_scrollViewport",
+	"separator": "v74_Gq_separator",
+	"title": "v74_Gq_title",
+	"trigger": "v74_Gq_trigger"
+};
+//#endregion
+export { CommandPalette_module_default as default };

package/dist/components/command-palette/index.d.ts

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

package/dist/components/container/Container.css

@@ -0,0 +1,45 @@
+@layer ui.components {
+  .C_WyAG_root {
+    --container-gutter: var(--container-gutter-md, clamp(1rem, 4vw, 2rem));
+    --container-max-width: var(--container-max-width-lg, 72rem);
+    box-sizing: border-box;
+    width: 100%;
+    max-width: calc(var(--container-max-width) + (var(--container-gutter) * 2));
+    min-width: 0;
+    padding-inline: var(--container-gutter);
+    margin-inline: auto;
+    display: block;
+
+    &[data-size="xs"] {
+      --container-max-width: var(--container-max-width-xs, 40rem);
+    }
+
+    &[data-size="sm"] {
+      --container-max-width: var(--container-max-width-sm, 48rem);
+    }
+
+    &[data-size="md"] {
+      --container-max-width: var(--container-max-width-md, 64rem);
+    }
+
+    &[data-size="xl"] {
+      --container-max-width: var(--container-max-width-xl, 90rem);
+    }
+
+    &[data-size="full"] {
+      max-width: none;
+    }
+
+    &[data-gutter="none"] {
+      --container-gutter: 0;
+    }
+
+    &[data-gutter="sm"] {
+      --container-gutter: var(--container-gutter-sm, clamp(.75rem, 3vw, 1.5rem));
+    }
+
+    &[data-gutter="lg"] {
+      --container-gutter: var(--container-gutter-lg, clamp(1.5rem, 5vw, 3rem));
+    }
+  }
+}

package/dist/components/container/Container.d.ts

@@ -0,0 +1,14 @@
+//#region src/components/container/Container.d.ts
+type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ContainerGutter = 'none' | 'sm' | 'md' | 'lg';
+declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  size?: ContainerSize;
+  gutter?: ContainerGutter;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    size?: ContainerSize;
+    gutter?: ContainerGutter;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Container };

package/dist/components/container/Container.js

@@ -0,0 +1,22 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Container_module_default from "./Container.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/container/Container.tsx
+const ContainerRoot = forwardRef(function ContainerRoot({ size = "lg", gutter = "md", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		...props,
+		ref,
+		"data-scope": "container",
+		"data-part": "root",
+		"data-slot": "container-root",
+		"data-size": size,
+		"data-gutter": gutter,
+		className: clsx(Container_module_default.root, normalizeClassName(className))
+	});
+});
+const Container = Object.assign(ContainerRoot, { Root: ContainerRoot });
+//#endregion
+export { Container };

package/dist/components/container/Container.module.js

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

package/dist/components/date-input/DateInput.css

@@ -0,0 +1,104 @@
+@layer ui.components {
+  .B0AkVa_root {
+    align-items: flex-start;
+    gap: var(--date-input-gap, var(--spacing-1));
+    width: var(--date-input-width, auto);
+    max-width: var(--date-input-max-width, none);
+    flex-direction: column;
+    display: inline-flex;
+
+    &[data-disabled] {
+      opacity: var(--date-input-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .B0AkVa_label {
+    color: var(--date-input-label-color, var(--color-foreground));
+    font-size: var(--date-input-label-font-size, var(--text-sm));
+    font-weight: var(--date-input-label-font-weight, var(--weight-medium));
+    line-height: var(--date-input-label-line-height, var(--line-height-text-sm));
+  }
+
+  .B0AkVa_control {
+    min-height: var(--date-input-control-height, var(--size-lg));
+    border: var(--date-input-border-width, var(--border-width-sm))
+      var(--date-input-border-style, solid) var(--date-input-border-color, var(--color-border));
+    border-radius: var(--date-input-radius, var(--radius-md));
+    padding: var(--date-input-padding-y, .5rem) var(--date-input-padding-x, .75rem);
+    background-color: var(--date-input-bg, var(--color-background));
+    color: var(--date-input-color, var(--color-foreground));
+    outline: var(--date-input-focus-ring-width, var(--date-input-border-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: var(--date-input-focus-ring-offset, -1px);
+    transition: border-color var(--date-input-transition, var(--transition-default)),
+      outline-color var(--date-input-transition, var(--transition-default)),
+      opacity var(--date-input-transition, var(--transition-default));
+    align-items: center;
+    display: inline-flex;
+
+    &:focus-within, &[data-focus] {
+      outline-color: var(--date-input-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-invalid] {
+      border-color: var(--date-input-border-color-invalid, var(--color-destructive));
+
+      &:focus-within, &[data-focus] {
+        outline-color: var(--date-input-border-color-invalid, var(--color-destructive));
+      }
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+
+  .B0AkVa_segmentGroup {
+    align-items: center;
+    gap: var(--date-input-segment-gap, var(--border-width-md));
+    font-variant-numeric: tabular-nums;
+    display: inline-flex;
+  }
+
+  .B0AkVa_segment {
+    min-width: var(--date-input-segment-min-width, 2ch);
+    border-radius: var(--date-input-segment-radius, var(--radius-sm));
+    padding: var(--date-input-segment-padding-y, 0)
+      var(--date-input-segment-padding-x, var(--spacing-1));
+    color: var(--date-input-segment-color, currentColor);
+    font: inherit;
+    line-height: var(--date-input-segment-line-height, var(--line-height-text-md));
+    text-align: center;
+    cursor: text;
+    transition: background-color var(--date-input-transition, var(--transition-default)),
+      color var(--date-input-transition, var(--transition-default));
+    outline: 0;
+
+    &[data-placeholder-shown] {
+      color: var(--date-input-placeholder-color, var(--color-muted-foreground));
+    }
+
+    &:focus-visible {
+      background-color: var(--date-input-segment-bg-focus, color-mix(in oklab, var(--color-ring) 18%, transparent));
+      color: var(--date-input-segment-color-focus, var(--color-foreground));
+    }
+
+    &:is([data-readonly], [data-disabled]) {
+      cursor: default;
+    }
+
+    &[data-type="literal"] {
+      min-width: auto;
+      box-shadow: none;
+      color: var(--date-input-separator-color, var(--color-muted-foreground));
+      pointer-events: none;
+      background: none;
+      padding-inline: 0;
+    }
+  }
+
+  .B0AkVa_separator {
+    color: var(--date-input-separator-color, var(--color-muted-foreground));
+    user-select: none;
+  }
+}

package/dist/components/date-input/DateInput.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from "react";
+import { DateInput } from "@ark-ui/react/date-input";
+
+//#region src/components/date-input/DateInput.d.ts
+declare function DateInputSeparator({
+  className,
+  'aria-hidden': ariaHidden,
+  role,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare const DateInput$1: import("react").ForwardRefExoticComponent<Omit<DateInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<DateInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<DateInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<DateInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<DateInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  SegmentGroup: import("react").ForwardRefExoticComponent<Omit<DateInput.SegmentGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Segment: import("react").ForwardRefExoticComponent<Omit<DateInput.SegmentProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<Omit<DateInput.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Separator: typeof DateInputSeparator;
+};
+//#endregion
+export { DateInput$1 as DateInput };