moduix 0.11.0 → 0.11.2

package/dist/components/Drawer/Drawer.d.ts

@@ -1,28 +1,96 @@
-import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
-import { ComponentProps } from 'react';
-declare function Drawer<Payload = unknown>({ modal, ...props }: DrawerPrimitive.Root.Props<Payload>): import("react").JSX.Element;
-declare const DrawerProvider: typeof DrawerPrimitive.Provider;
-declare const createDrawerHandle: typeof DrawerPrimitive.createHandle;
-declare function DrawerIndent({ className, ...props }: DrawerPrimitive.Indent.Props): import("react").JSX.Element;
-declare function DrawerIndentBackground({ className, ...props }: DrawerPrimitive.IndentBackground.Props): import("react").JSX.Element;
-declare function DrawerTrigger({ className, render, ...props }: DrawerPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function DrawerSwipeArea({ className, ...props }: DrawerPrimitive.SwipeArea.Props): import("react").JSX.Element;
-declare function DrawerPortal({ className, ...props }: DrawerPrimitive.Portal.Props): import("react").JSX.Element;
-declare function DrawerBackdrop({ className, ...props }: DrawerPrimitive.Backdrop.Props): import("react").JSX.Element;
-declare function DrawerViewport({ className, ...props }: DrawerPrimitive.Viewport.Props): import("react").JSX.Element;
-declare function DrawerPopup({ className, ...props }: DrawerPrimitive.Popup.Props): import("react").JSX.Element;
-declare function DrawerHandle({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DrawerContentInner({ className, ...props }: DrawerPrimitive.Content.Props): import("react").JSX.Element;
-declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): import("react").JSX.Element;
-declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): import("react").JSX.Element;
-declare function DrawerClose({ className, ...props }: DrawerPrimitive.Close.Props): import("react").JSX.Element;
-declare function DrawerCloseIcon({ className, children, 'aria-label': ariaLabel, render, ...props }: DrawerPrimitive.Close.Props): import("react").JSX.Element;
-declare function DrawerHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DrawerBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DrawerFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DrawerContent({ snapLayout, disableInitialAnimation, variant, className, children, ...props }: DrawerPrimitive.Popup.Props & {
-    snapLayout?: boolean;
-    disableInitialAnimation?: boolean;
-    variant?: 'default' | 'island';
+import { ComponentProps } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+
+//#region src/components/Drawer/Drawer.d.ts
+declare function Drawer$1<Payload = unknown>({
+  modal,
+  ...props
+}: Drawer.Root.Props<Payload>): import("react").JSX.Element;
+declare const DrawerProvider: typeof Drawer.Provider;
+declare const createDrawerHandle: typeof Drawer.createHandle;
+declare function DrawerIndent({
+  className,
+  ...props
+}: Drawer.Indent.Props): import("react").JSX.Element;
+declare function DrawerIndentBackground({
+  className,
+  ...props
+}: Drawer.IndentBackground.Props): import("react").JSX.Element;
+declare function DrawerTrigger({
+  className,
+  render,
+  ...props
+}: Drawer.Trigger.Props): import("react").JSX.Element;
+declare function DrawerSwipeArea({
+  className,
+  ...props
+}: Drawer.SwipeArea.Props): import("react").JSX.Element;
+declare function DrawerPortal({
+  className,
+  ...props
+}: Drawer.Portal.Props): import("react").JSX.Element;
+declare function DrawerBackdrop({
+  className,
+  ...props
+}: Drawer.Backdrop.Props): import("react").JSX.Element;
+declare function DrawerViewport({
+  className,
+  ...props
+}: Drawer.Viewport.Props): import("react").JSX.Element;
+declare function DrawerPopup({
+  className,
+  ...props
+}: Drawer.Popup.Props): import("react").JSX.Element;
+declare function DrawerHandle({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DrawerContentInner({
+  className,
+  ...props
+}: Drawer.Content.Props): import("react").JSX.Element;
+declare function DrawerTitle({
+  className,
+  ...props
+}: Drawer.Title.Props): import("react").JSX.Element;
+declare function DrawerDescription({
+  className,
+  ...props
+}: Drawer.Description.Props): import("react").JSX.Element;
+declare function DrawerClose({
+  className,
+  ...props
+}: Drawer.Close.Props): import("react").JSX.Element;
+declare function DrawerCloseIcon({
+  className,
+  children,
+  'aria-label': ariaLabel,
+  render,
+  ...props
+}: Drawer.Close.Props): import("react").JSX.Element;
+declare function DrawerHeader({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DrawerBody({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DrawerFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DrawerContent({
+  snapLayout,
+  disableInitialAnimation,
+  variant,
+  className,
+  children,
+  ...props
+}: Drawer.Popup.Props & {
+  snapLayout?: boolean;
+  disableInitialAnimation?: boolean;
+  variant?: 'default' | 'island';
 }): import("react").JSX.Element;
-export { Drawer, DrawerProvider, createDrawerHandle, DrawerIndent, DrawerIndentBackground, DrawerTrigger, DrawerSwipeArea, DrawerPortal, DrawerBackdrop, DrawerViewport, DrawerPopup, DrawerHandle, DrawerContentInner, DrawerTitle, DrawerDescription, DrawerClose, DrawerCloseIcon, DrawerHeader, DrawerBody, DrawerFooter, DrawerContent, };
+//#endregion
+export { Drawer$1 as Drawer, DrawerBackdrop, DrawerBody, DrawerClose, DrawerCloseIcon, DrawerContent, DrawerContentInner, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerPortal, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, createDrawerHandle };

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,182 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import { CloseButton } from "../CloseButton/CloseButton.js";
+import Drawer_module_default from "./Drawer.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { createContext, useContext, useEffect, useState } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/Drawer/Drawer.tsx
+const DEFAULT_CLOSE_BUTTON_LABEL = "Close drawer";
+const DrawerModeContext = createContext(true);
+function useMountReady(disableInitialAnimation) {
+	const [mountReady, setMountReady] = useState(!disableInitialAnimation);
+	useEffect(() => {
+		if (!disableInitialAnimation) {
+			setMountReady(true);
+			return;
+		}
+		setMountReady(false);
+		let frame = window.requestAnimationFrame(() => {
+			setMountReady(true);
+		});
+		return () => {
+			window.cancelAnimationFrame(frame);
+		};
+	}, [disableInitialAnimation]);
+	return mountReady;
+}
+function Drawer$1({ modal = true, ...props }) {
+	return /* @__PURE__ */ jsx(DrawerModeContext.Provider, {
+		value: modal,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			modal,
+			...props
+		})
+	});
+}
+const DrawerProvider = Drawer.Provider;
+const createDrawerHandle = Drawer.createHandle;
+function DrawerIndent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Indent, {
+		"data-slot": "drawer-indent",
+		className: mergeClassName(className, Drawer_module_default.indent),
+		...props
+	});
+}
+function DrawerIndentBackground({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.IndentBackground, {
+		"data-slot": "drawer-indent-background",
+		className: mergeClassName(className, Drawer_module_default.indentBackground),
+		...props
+	});
+}
+function DrawerTrigger({ className, render, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "drawer-trigger",
+		render,
+		className: render ? className : mergeClassName(className, Drawer_module_default.trigger),
+		...props
+	});
+}
+function DrawerSwipeArea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.SwipeArea, {
+		"data-slot": "drawer-swipe-area",
+		className: mergeClassName(className, Drawer_module_default.swipeArea),
+		...props
+	});
+}
+function DrawerPortal({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Portal, {
+		"data-slot": "drawer-portal",
+		className,
+		...props
+	});
+}
+function DrawerBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
+		"data-slot": "drawer-backdrop",
+		className: mergeClassName(className, Drawer_module_default.backdrop),
+		...props
+	});
+}
+function DrawerViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Viewport, {
+		"data-slot": "drawer-viewport",
+		className: mergeClassName(className, Drawer_module_default.viewport),
+		...props
+	});
+}
+function DrawerPopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Popup, {
+		"data-slot": "drawer-popup",
+		className: mergeClassName(className, Drawer_module_default.popup),
+		...props
+	});
+}
+function DrawerHandle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-handle",
+		className: clsx(Drawer_module_default.handle, className),
+		...props
+	});
+}
+function DrawerContentInner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Content, {
+		"data-slot": "drawer-content",
+		className: mergeClassName(className, Drawer_module_default.content),
+		...props
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		"data-slot": "drawer-title",
+		className: mergeClassName(className, Drawer_module_default.title),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		"data-slot": "drawer-description",
+		className: mergeClassName(className, Drawer_module_default.description),
+		...props
+	});
+}
+function DrawerClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close",
+		className: mergeClassName(className, Drawer_module_default.close),
+		...props
+	});
+}
+function DrawerCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, render, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close-icon",
+		render: render ?? /* @__PURE__ */ jsx(CloseButton, {
+			"aria-label": ariaLabel,
+			children
+		}),
+		className: mergeClassName(className, Drawer_module_default.closeIcon),
+		...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
+	});
+}
+function DrawerContent({ snapLayout = false, disableInitialAnimation = false, variant = "default", className, children, ...props }) {
+	const modal = useContext(DrawerModeContext);
+	const mountReady = useMountReady(disableInitialAnimation);
+	const blocksOutsidePointerInteraction = modal === true;
+	const viewportClassName = mergeClassName(blocksOutsidePointerInteraction ? void 0 : Drawer_module_default.viewportNonModal, variant === "island" ? Drawer_module_default.viewportIsland : void 0);
+	return /* @__PURE__ */ jsxs(DrawerPortal, { children: [blocksOutsidePointerInteraction ? /* @__PURE__ */ jsx(DrawerBackdrop, {}) : null, /* @__PURE__ */ jsx(DrawerViewport, {
+		className: viewportClassName,
+		children: /* @__PURE__ */ jsxs(DrawerPopup, {
+			"data-snap-layout": snapLayout ? "" : void 0,
+			"data-disable-initial-animation": disableInitialAnimation ? "true" : void 0,
+			"data-mount-ready": mountReady ? "true" : "false",
+			"data-variant": variant,
+			className,
+			...props,
+			children: [/* @__PURE__ */ jsx(DrawerHandle, {}), /* @__PURE__ */ jsx(DrawerContentInner, { children })]
+		})
+	})] });
+}
+//#endregion
+export { Drawer$1 as Drawer, DrawerBackdrop, DrawerBody, DrawerClose, DrawerCloseIcon, DrawerContent, DrawerContentInner, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerPortal, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, createDrawerHandle };

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

@@ -0,0 +1,24 @@
+import './Drawer.css';
+//#region src/components/Drawer/Drawer.module.css
+var Drawer_module_default = {
+	"backdrop": "DGe4oW_backdrop",
+	"body": "DGe4oW_body",
+	"close": "DGe4oW_close",
+	"closeIcon": "DGe4oW_closeIcon",
+	"content": "DGe4oW_content",
+	"description": "DGe4oW_description",
+	"footer": "DGe4oW_footer",
+	"handle": "DGe4oW_handle",
+	"header": "DGe4oW_header",
+	"indent": "DGe4oW_indent",
+	"indentBackground": "DGe4oW_indentBackground",
+	"popup": "DGe4oW_popup",
+	"swipeArea": "DGe4oW_swipeArea",
+	"title": "DGe4oW_title",
+	"trigger": "DGe4oW_trigger",
+	"viewport": "DGe4oW_viewport",
+	"viewportIsland": "DGe4oW_viewportIsland",
+	"viewportNonModal": "DGe4oW_viewportNonModal"
+};
+//#endregion
+export { Drawer_module_default as default };

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

@@ -1 +1 @@
-export { Drawer, DrawerProvider, createDrawerHandle, DrawerIndent, DrawerIndentBackground, DrawerTrigger, DrawerSwipeArea, DrawerPortal, DrawerBackdrop, DrawerViewport, DrawerPopup, DrawerHandle, DrawerContentInner, DrawerTitle, DrawerDescription, DrawerClose, DrawerCloseIcon, DrawerHeader, DrawerBody, DrawerFooter, DrawerContent, } from './Drawer';
+import { Drawer, DrawerBackdrop, DrawerBody, DrawerClose, DrawerCloseIcon, DrawerContent, DrawerContentInner, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerPortal, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, createDrawerHandle } from "./Drawer.js";

package/dist/components/Empty/Empty.css

@@ -0,0 +1,78 @@
+@layer ui.components {
+  .PlHusq_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;
+  }
+
+  .PlHusq_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;
+    }
+  }
+
+  .PlHusq_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;
+  }
+
+  .PlHusq_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;
+  }
+
+  .PlHusq_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;
+    }
+  }
+
+  .PlHusq_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

@@ -1,11 +1,33 @@
-import { ComponentProps, ComponentPropsWithoutRef } from 'react';
+import { ComponentProps, ComponentPropsWithoutRef } from "react";
+
+//#region src/components/Empty/Empty.d.ts
 type EmptyTitleElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-declare function Empty({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function EmptyIcon({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function EmptyContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function EmptyTitle({ as: Root, className, ...props }: ComponentPropsWithoutRef<'h3'> & {
-    as?: EmptyTitleElement;
+declare function Empty({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function EmptyIcon({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function EmptyContent({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function EmptyTitle({
+  as: Root,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'h3'> & {
+  as?: EmptyTitleElement;
 }): import("react").JSX.Element;
-declare function EmptyDescription({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function EmptyActions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-export { Empty, EmptyIcon, EmptyContent, EmptyTitle, EmptyDescription, EmptyActions };
+declare function EmptyDescription({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function EmptyActions({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { Empty, EmptyActions, EmptyContent, EmptyDescription, EmptyIcon, EmptyTitle };

package/dist/components/Empty/Empty.js

@@ -0,0 +1,48 @@
+import Empty_module_default from "./Empty.module.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/Empty/Empty.tsx
+function Empty({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-root",
+		className: clsx$1(Empty_module_default.root, className),
+		...props
+	});
+}
+function EmptyIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-icon",
+		className: clsx$1(Empty_module_default.icon, className),
+		...props
+	});
+}
+function EmptyContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-content",
+		className: clsx$1(Empty_module_default.content, className),
+		...props
+	});
+}
+function EmptyTitle({ as: Root = "h3", className, ...props }) {
+	return /* @__PURE__ */ jsx(Root, {
+		"data-slot": "empty-title",
+		className: clsx$1(Empty_module_default.title, className),
+		...props
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-description",
+		className: clsx$1(Empty_module_default.description, className),
+		...props
+	});
+}
+function EmptyActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-actions",
+		className: clsx$1(Empty_module_default.actions, className),
+		...props
+	});
+}
+//#endregion
+export { Empty, EmptyActions, EmptyContent, EmptyDescription, EmptyIcon, EmptyTitle };

package/dist/components/Empty/Empty.module.js

@@ -0,0 +1,12 @@
+import './Empty.css';
+//#region src/components/Empty/Empty.module.css
+var Empty_module_default = {
+	"actions": "PlHusq_actions",
+	"content": "PlHusq_content",
+	"description": "PlHusq_description",
+	"icon": "PlHusq_icon",
+	"root": "PlHusq_root",
+	"title": "PlHusq_title"
+};
+//#endregion
+export { Empty_module_default as default };

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

@@ -1 +1 @@
-export { Empty, EmptyActions, EmptyContent, EmptyDescription, EmptyIcon, EmptyTitle, } from './Empty';
+import { Empty, EmptyActions, EmptyContent, EmptyDescription, EmptyIcon, EmptyTitle } from "./Empty.js";

package/dist/components/Field/Field.css

@@ -0,0 +1,86 @@
+@layer ui.components {
+  .otdAoW_root {
+    box-sizing: border-box;
+    align-items: flex-start;
+    gap: var(--field-gap, var(--spacing-1));
+    width: var(--field-width, 100%);
+    max-width: var(--field-max-width, none);
+    color: var(--field-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  :is(.otdAoW_item, .otdAoW_label, .otdAoW_description, .otdAoW_control, .otdAoW_error)[data-disabled] {
+    opacity: var(--field-disabled-opacity, var(--opacity-disabled));
+  }
+
+  .otdAoW_item {
+    gap: var(--field-item-gap, var(--spacing-1));
+    display: grid;
+  }
+
+  .otdAoW_label {
+    align-items: center;
+    gap: var(--field-label-gap, var(--spacing-2));
+    color: var(--field-label-color, var(--color-foreground));
+    font-size: var(--field-label-font-size, var(--text-sm));
+    font-weight: var(--field-label-font-weight, var(--weight-medium));
+    line-height: var(--field-label-line-height, var(--line-height-text-sm));
+    display: inline-flex;
+  }
+
+  .otdAoW_description {
+    color: var(--field-description-color, var(--color-muted-foreground));
+    font-size: var(--field-description-font-size, var(--text-sm));
+    line-height: var(--field-description-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+
+  .otdAoW_control {
+    box-sizing: border-box;
+    width: var(--field-control-width, 100%);
+    min-height: var(--field-control-height, var(--size-lg));
+    border: var(--field-control-border-width, var(--border-width-sm))
+      var(--field-control-border-style, solid)
+      var(--field-control-border-color, var(--color-border));
+    border-radius: var(--field-control-radius, var(--radius-md));
+    padding: var(--field-control-padding-y, .5rem) var(--field-control-padding-x, .875rem);
+    background-color: var(--field-control-bg, var(--color-background));
+    color: var(--field-control-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--field-control-font-size, var(--text-md));
+    line-height: var(--field-control-line-height, var(--line-height-text-md));
+    outline: var(--field-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: var(--field-focus-ring-offset, -1px);
+    transition: border-color var(--field-control-transition, var(--transition-default)),
+      opacity var(--field-control-transition, var(--transition-default));
+    margin: 0;
+
+    &::placeholder {
+      color: var(--field-control-placeholder-color, var(--color-muted-foreground));
+    }
+
+    &:focus-visible {
+      outline-color: var(--field-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-invalid] {
+      border-color: var(--field-control-border-color-invalid, var(--color-destructive));
+    }
+
+    &[data-invalid]:focus-visible {
+      outline-color: var(--field-control-border-color-invalid, var(--color-destructive));
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+
+  .otdAoW_error {
+    color: var(--field-error-color, var(--color-destructive));
+    font-size: var(--field-error-font-size, var(--text-sm));
+    line-height: var(--field-error-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+}

package/dist/components/Field/Field.d.ts

@@ -1,9 +1,30 @@
-import { Field as FieldPrimitive } from '@base-ui/react/field';
-declare function Field({ className, ...props }: FieldPrimitive.Root.Props): import("react").JSX.Element;
-declare function FieldItem({ className, ...props }: FieldPrimitive.Item.Props): import("react").JSX.Element;
-declare function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props): import("react").JSX.Element;
-declare function FieldControl({ className, ...props }: FieldPrimitive.Control.Props): import("react").JSX.Element;
-declare function FieldDescription({ className, ...props }: FieldPrimitive.Description.Props): import("react").JSX.Element;
-declare function FieldError({ className, ...props }: FieldPrimitive.Error.Props): import("react").JSX.Element;
-declare const FieldValidity: import('react').FC<import('@base-ui/react').FieldValidityProps>;
-export { Field, FieldItem, FieldLabel, FieldControl, FieldDescription, FieldError, FieldValidity };
+import { Field } from "@base-ui/react/field";
+
+//#region src/components/Field/Field.d.ts
+declare function Field$1({
+  className,
+  ...props
+}: Field.Root.Props): import("react").JSX.Element;
+declare function FieldItem({
+  className,
+  ...props
+}: Field.Item.Props): import("react").JSX.Element;
+declare function FieldLabel({
+  className,
+  ...props
+}: Field.Label.Props): import("react").JSX.Element;
+declare function FieldControl({
+  className,
+  ...props
+}: Field.Control.Props): import("react").JSX.Element;
+declare function FieldDescription({
+  className,
+  ...props
+}: Field.Description.Props): import("react").JSX.Element;
+declare function FieldError({
+  className,
+  ...props
+}: Field.Error.Props): import("react").JSX.Element;
+declare const FieldValidity: import("react").FC<import("@base-ui/react").FieldValidityProps>;
+//#endregion
+export { Field$1 as Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };