@lazar-ui/kit 0.1.0

package/dist/drawer.d.ts

@@ -0,0 +1,128 @@
+import { AriaDialogProps } from 'react-aria';
+import { default as default_2 } from 'react';
+
+/**
+ * Drawer Content sub-component.
+ *
+ * Renders the scrollable body of the drawer.
+ * Must be used within a Drawer component.
+ *
+ * @example
+ * ```tsx
+ * <Drawer.Content>
+ *   <p>Your content here.</p>
+ * </Drawer.Content>
+ * ```
+ */
+declare const Content: default_2.FC<IContentProps>;
+
+/**
+ * Drawer component.
+ *
+ * A slide-in panel that displays additional content without navigating away.
+ * Supports four placements (`left`, `right`, `top`, `bottom`) and three sizes (`sm`, `md`, `lg`).
+ * Uses `react-aria` for accessibility and overlay management.
+ *
+ * @example
+ * ```tsx
+ * <Drawer open={open} onOpenChange={setOpen}>
+ *   <Drawer.Header>
+ *     Drawer Title
+ *   </Drawer.Header>
+ *   <Drawer.Content>
+ *     <p>Your content here.</p>
+ *   </Drawer.Content>
+ * </Drawer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Drawer
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   placement="left"
+ *   size="lg"
+ *   dismissable={false}
+ * >
+ *   <Drawer.Header>
+ *     Persistent Drawer
+ *   </Drawer.Header>
+ *   <Drawer.Content>
+ *     <p>Cannot be closed by clicking outside.</p>
+ *   </Drawer.Content>
+ * </Drawer>
+ * ```
+ */
+declare const Drawer_2: default_2.FC<IDrawerProps>;
+
+/**
+ * Drawer component.
+ *
+ * @example
+ * ```tsx
+ * <Drawer open={open} onOpenChange={setOpen}>
+ *   <Drawer.Header>
+ *     Drawer Title
+ *   </Drawer.Header>
+ *   <Drawer.Content>
+ *     <div>Content</div>
+ *   </Drawer.Content>
+ * </Drawer>
+ * ```
+ */
+declare const DrawerCompoundComponent: TDrawerCompoundComponent;
+export { DrawerCompoundComponent as Drawer }
+export default DrawerCompoundComponent;
+
+/**
+ * Drawer Header sub-component.
+ *
+ * Renders the title and a close button.
+ * Must be used within a Drawer component.
+ *
+ * @example
+ * ```tsx
+ * <Drawer.Header>
+ *   Drawer Title
+ * </Drawer.Header>
+ * ```
+ */
+declare const Header: default_2.FC<IHeaderProps>;
+
+export declare interface IContentProps extends default_2.PropsWithChildren {
+}
+
+export declare interface IDrawerProps extends default_2.PropsWithChildren, AriaDialogProps {
+    /** Whether the drawer is open. */
+    open?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Placement. Default: `'right'`. */
+    placement?: TDrawerPlacement;
+    /** Size. Default: `'md'`. */
+    size?: TDrawerSize;
+    /** Whether clicking the underlay closes the drawer. Default: `true`. */
+    dismissable?: boolean;
+    /** Portal container element. */
+    container?: HTMLElement;
+}
+
+export declare interface IHeaderProps extends default_2.PropsWithChildren {
+}
+
+declare type TDrawerCompoundComponent = typeof Drawer_2 & {
+    Content: typeof Content;
+    Header: typeof Header;
+};
+
+/**
+ * Drawer placements.
+ */
+declare type TDrawerPlacement = 'bottom' | 'left' | 'right' | 'top';
+
+/**
+ * Drawer sizes.
+ */
+declare type TDrawerSize = 'lg' | 'md' | 'sm';
+
+export { }

package/dist/drawer.js

@@ -0,0 +1,106 @@
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { createContext as S, useContext as H, useRef as d, useState as h, useEffect as I, useMemo as P } from "react";
+import { c as j } from "./clsx-OuTLNxxd.mjs";
+import { $ as B, a as F } from "./useModalOverlay-D5Bs9FCB.mjs";
+import { r as k } from "./Overlay-RmiBtqDR.mjs";
+import { a as K } from "./useOverlayTriggerState-BIo1Jcba.mjs";
+import { g as U } from "./getComponentSlots-DwAYUFNk.mjs";
+import { g as C } from "./getVariantClassName-D7Nhpuec.mjs";
+import { u as V } from "./useLocale-D2Z0JH0l.mjs";
+import './drawer.css';var s = /* @__PURE__ */ ((e) => (e.CONTENT = "Drawer.Content", e.HEADER = "Drawer.Header", e))(s || {});
+const X = "_root_jagsa_1", Y = {
+  root: X
+}, T = (e) => {
+  const { children: n } = e;
+  return /* @__PURE__ */ t("div", { className: Y.root, children: n });
+};
+T.displayName = s.CONTENT;
+const G = "Drawer", J = [s.CONTENT, s.HEADER], E = S(null), Q = () => {
+  const e = H(E);
+  if (!e)
+    throw new Error("Drawer sub-components must be used within a Drawer component.");
+  return e;
+}, W = "_underlay_7b6q3_24", Z = "_modal_7b6q3_32", ee = "_drawer_7b6q3_37", te = "_placementLeft_7b6q3_47", oe = "_entered_7b6q3_53", se = "_placementRight_7b6q3_56", ne = "_placementTop_7b6q3_65", re = "_placementBottom_7b6q3_74", ae = "_sizeSm_7b6q3_83", ce = "_sizeMd_7b6q3_90", le = "_sizeLg_7b6q3_97", ie = "_content_7b6q3_105", o = {
+  underlay: W,
+  modal: Z,
+  drawer: ee,
+  placementLeft: te,
+  entered: oe,
+  placementRight: se,
+  placementTop: ne,
+  placementBottom: re,
+  sizeSm: ae,
+  sizeMd: ce,
+  sizeLg: le,
+  content: ie
+}, me = 300, $ = (e) => {
+  const { children: n, container: a, dismissable: c = !0, onOpenChange: l, open: r, placement: x = "right", size: y = "md" } = e, f = d(null), u = d(null), { dialogProps: A } = B(e, f), p = K({ isOpen: r, onOpenChange: l }), { modalProps: R, underlayProps: z } = F(
+    { isDismissable: c, isKeyboardDismissDisabled: !1 },
+    p,
+    u
+  ), [b, N] = h(r || !1), [L, w] = h(!1), i = d(b);
+  I(() => {
+    if (r) {
+      i.current = !0, N(!0);
+      const m = requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          w(!0);
+        });
+      });
+      return () => cancelAnimationFrame(m);
+    }
+    if (i.current) {
+      w(!1);
+      const m = setTimeout(() => {
+        i.current = !1, N(!1);
+      }, me);
+      return () => clearTimeout(m);
+    }
+  }, [r]);
+  const {
+    [s.CONTENT]: D,
+    [s.HEADER]: M
+  } = P(() => U(n, J), [n]), O = j(
+    o.drawer,
+    C("size", y, o),
+    C("placement", x, o),
+    { [o.entered]: L }
+  );
+  return b ? /* @__PURE__ */ t(k, { portalContainer: a, children: /* @__PURE__ */ t("div", { className: o.underlay, ...z, children: /* @__PURE__ */ t("div", { className: o.modal, ...R, ref: u, children: /* @__PURE__ */ t(E.Provider, { value: { close: () => p.close() }, children: /* @__PURE__ */ g(
+    "div",
+    {
+      "aria-label": "Drawer",
+      "aria-modal": "true",
+      className: O,
+      role: "dialog",
+      ...A,
+      ref: f,
+      children: [
+        M,
+        D && /* @__PURE__ */ t("div", { className: o.content, children: D })
+      ]
+    }
+  ) }) }) }) }) : null;
+};
+$.displayName = G;
+const de = "_root_1fwv3_13", _e = "_title_1fwv3_21", fe = "_close_1fwv3_31", _ = {
+  root: de,
+  title: _e,
+  close: fe
+}, q = (e) => {
+  const { children: n } = e, { close: a } = Q(), c = V(), l = (r) => {
+    r.preventDefault(), a();
+  };
+  return /* @__PURE__ */ g("div", { className: _.root, children: [
+    /* @__PURE__ */ t("div", { className: _.title, children: n }),
+    /* @__PURE__ */ t("button", { "aria-label": c.dialog.close, className: _.close, onClick: l, type: "button", children: "X" })
+  ] });
+};
+q.displayName = s.HEADER;
+const v = $;
+v.Content = T;
+v.Header = q;
+export {
+  v as Drawer,
+  v as default
+};

package/dist/empty-state.css

@@ -0,0 +1 @@
+._actions_1pohs_1{align-items:center;display:flex;gap:var(--space-2);margin-top:var(--space-2)}._content_laixm_1{width:100%}:root{--empty-state-icon-size: 48px}._root_131ay_5{align-items:center;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-10) var(--space-5);text-align:center}._icon_131ay_14{font-size:var(--empty-state-icon-size);line-height:1;margin-bottom:var(--space-2)}._title_131ay_20{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-lg);margin:0}._description_131ay_28{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-sm);margin:0;max-width:400px}

package/dist/empty-state.d.ts

@@ -0,0 +1,33 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Wrapper for action buttons inside EmptyState.
+ * Accepts only `<Button>` components as children.
+ * Auto-assigns variant based on position:
+ * - first child → `primary`
+ * - subsequent children → `secondary`
+ * unless the Button already has an explicit `variant` prop.
+ */
+declare const Actions: default_2.FC<default_2.PropsWithChildren>;
+
+declare const Content: default_2.FC<IProps>;
+
+export declare const EmptyState: TEmptyStateCompoundComponent;
+
+declare const EmptyState_2: default_2.FC<IEmptyStateProps>;
+
+export declare interface IEmptyStateProps extends default_2.PropsWithChildren {
+    description?: string;
+    icon?: default_2.ReactNode;
+    title?: string;
+}
+
+declare interface IProps extends default_2.PropsWithChildren {
+}
+
+declare type TEmptyStateCompoundComponent = typeof EmptyState_2 & {
+    Actions: typeof Actions;
+    Content: typeof Content;
+};
+
+export { }

package/dist/empty-state.js

@@ -0,0 +1,52 @@
+import { jsx as c, jsxs as C } from "react/jsx-runtime";
+import T, { cloneElement as S } from "react";
+import { i as A } from "./isValidReactNode-CmYwTWCE.mjs";
+import "./camelCase-PtIYufW8.mjs";
+import { c as h } from "./clsx-OuTLNxxd.mjs";
+import { g as u } from "./getComponentSlots-DwAYUFNk.mjs";
+import './empty-state.css';const l = "EmptyState";
+var o = ((t) => (t.ACTIONS = `${l}.Actions`, t.CONTENT = `${l}.Content`, t))(o || {});
+const E = "_actions_1pohs_1", O = {
+  actions: E
+}, p = ({ children: t }) => {
+  const s = T.Children.toArray(t), r = s.map((n, e) => {
+    if (!A("Button", n))
+      return n;
+    const i = n.props.variant;
+    return S(n, {
+      key: e,
+      ...i ? {} : { variant: i ?? (e === 0 ? "primary" : "secondary") }
+    });
+  });
+  return s.length === 0 ? null : /* @__PURE__ */ c("div", { className: O.actions, children: r });
+};
+p.displayName = o.ACTIONS;
+const v = "_content_laixm_1", f = {
+  content: v
+}, N = (t) => {
+  const { children: s } = t;
+  return /* @__PURE__ */ c("div", { className: f.content, children: s });
+};
+N.displayName = o.CONTENT;
+const I = "_root_131ay_5", $ = "_icon_131ay_14", x = "_title_131ay_20", g = "_description_131ay_28", a = {
+  root: I,
+  icon: $,
+  title: x,
+  description: g
+}, L = [o.ACTIONS, o.CONTENT], d = (t) => {
+  const { children: s, description: r, icon: n, title: e } = t, i = h(a.root), { [o.ACTIONS]: m, [o.CONTENT]: y } = u(s, L);
+  return /* @__PURE__ */ C("div", { className: i, children: [
+    n && /* @__PURE__ */ c("div", { className: a.icon, children: n }),
+    e && /* @__PURE__ */ c("h3", { className: a.title, children: e }),
+    r && /* @__PURE__ */ c("p", { className: a.description, children: r }),
+    y,
+    m
+  ] });
+};
+d.displayName = l;
+const _ = d;
+_.Actions = p;
+_.Content = N;
+export {
+  _ as EmptyState
+};

package/dist/error-boundary.css

@@ -0,0 +1 @@
+._root_1q4b8_1{align-items:center;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-10) var(--space-5);text-align:center}._title_1q4b8_10{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-lg);margin:0}._description_1q4b8_18{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-sm);margin:0;max-width:400px}

package/dist/error-boundary.d.ts

@@ -0,0 +1,55 @@
+import { default as default_2 } from 'react';
+
+/**
+ * React Error Boundary component.
+ *
+ * Catches JavaScript errors anywhere in its child component tree, logs those
+ * errors, and displays a fallback UI instead of the crashed component tree.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary
+ *   fallback={(error, reset) => (
+ *     <div>
+ *       <p>Something went wrong: {error.message}</p>
+ *       <button onClick={reset}>Try again</button>
+ *     </div>
+ *   )}
+ *   onError={(error) => console.error(error)}
+ * >
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+export declare class ErrorBoundary extends default_2.Component<IErrorBoundaryProps, IErrorBoundaryState> {
+    static displayName: string;
+    constructor(props: IErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): IErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: default_2.ErrorInfo): void;
+    componentDidUpdate(prevProps: IErrorBoundaryProps): void;
+    private handleReset;
+    render(): default_2.ReactNode;
+}
+
+export declare interface IErrorBoundaryProps extends default_2.PropsWithChildren {
+    /** Custom fallback element or render function `(error, reset) => ReactNode`. */
+    fallback?: default_2.ReactNode | ((error: Error, reset: () => void) => default_2.ReactNode);
+    /** Called when an error is caught. */
+    onError?: (error: Error, errorInfo: default_2.ErrorInfo) => void;
+    /** Resets the error boundary when the value changes. */
+    resetKey?: unknown;
+}
+
+declare interface IErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+
+export { }

package/dist/error-boundary.js

@@ -0,0 +1,37 @@
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import i from "react";
+import './error-boundary.css';const n = "ErrorBoundary", a = "_root_1q4b8_1", c = "_title_1q4b8_10", p = "_description_1q4b8_18", e = {
+  root: a,
+  title: c,
+  description: p
+};
+class u extends i.Component {
+  static displayName = n;
+  constructor(r) {
+    super(r), this.state = { hasError: !1, error: null };
+  }
+  static getDerivedStateFromError(r) {
+    return { hasError: !0, error: r };
+  }
+  componentDidCatch(r, t) {
+    this.props.onError?.(r, t);
+  }
+  componentDidUpdate(r) {
+    this.props.resetKey !== void 0 && this.props.resetKey !== r.resetKey && this.handleReset();
+  }
+  handleReset = () => {
+    this.setState({ hasError: !1, error: null });
+  };
+  render() {
+    if (!this.state.hasError)
+      return this.props.children;
+    const { fallback: r } = this.props, { error: t } = this.state;
+    return r !== void 0 ? typeof r == "function" ? r(t, this.handleReset) : r : /* @__PURE__ */ o("div", { className: e.root, children: [
+      /* @__PURE__ */ s("h3", { className: e.title, children: "Something went wrong" }),
+      /* @__PURE__ */ s("p", { className: e.description, children: t?.message ?? "An unexpected error occurred." })
+    ] });
+  }
+}
+export {
+  u as ErrorBoundary
+};

package/dist/flex.css

@@ -0,0 +1 @@
+:root{--flex-gap: 0;--flex-px: 0;--flex-py: 0}._root_1mp2w_7{display:flex;gap:var(--flex-gap);padding-block:var(--flex-py);padding-inline:var(--flex-px)}._directionRow_1mp2w_14{flex-direction:row}._directionColumn_1mp2w_18{flex-direction:column}._directionRowReverse_1mp2w_22{flex-direction:row-reverse}._directionColumnReverse_1mp2w_26{flex-direction:column-reverse}._alignFlexStart_1mp2w_30{align-items:flex-start}._alignCenter_1mp2w_34{align-items:center}._alignFlexEnd_1mp2w_38{align-items:flex-end}._alignStretch_1mp2w_42{align-items:stretch}._alignBaseline_1mp2w_46{align-items:baseline}._justifyFlexStart_1mp2w_50{justify-content:flex-start}._justifyCenter_1mp2w_54{justify-content:center}._justifyFlexEnd_1mp2w_58{justify-content:flex-end}._justifySpaceBetween_1mp2w_62{justify-content:space-between}._justifySpaceAround_1mp2w_66{justify-content:space-around}._justifySpaceEvenly_1mp2w_70{justify-content:space-evenly}._fullWidth_1mp2w_74{width:100%}._wrap_1mp2w_78{flex-wrap:wrap}._grow_1mp2w_82{flex-grow:1}._shrink_1mp2w_86{flex-shrink:1}

package/dist/flex.d.ts

@@ -0,0 +1,68 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Flex component. A utility container for flexbox layouts.
+ *
+ * Maps common flexbox properties to props, eliminating inline `display: flex` styles.
+ * Supports direction, alignment, justification, gap, padding, wrap, grow, and shrink.
+ * Renders as a configurable HTML tag via the `as` prop.
+ *
+ * @example
+ * ```tsx
+ * <Flex direction="column" gap={4} align="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Flex>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Flex justify="space-between" align="center" px={4} py={2}>
+ *   <span>Left</span>
+ *   <span>Right</span>
+ * </Flex>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Flex as="nav" gap={3} wrap>
+ *   <a href="#">Link</a>
+ *   <a href="#">Link</a>
+ * </Flex>
+ * ```
+ */
+export declare const Flex: default_2.FC<IFlexProps>;
+
+export declare interface IFlexProps extends default_2.PropsWithChildren {
+    /** Flex direction. Default: `'row'`. */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /** Align-items. */
+    align?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    /** Justify-content. */
+    justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Gap between children (maps to `--space-{n}`). */
+    gap?: TSpaceToken;
+    /** Flex-wrap. */
+    wrap?: boolean;
+    /** Padding horizontal (maps to `--space-{n}`). */
+    px?: TSpaceToken;
+    /** Padding vertical (maps to `--space-{n}`). */
+    py?: TSpaceToken;
+    /** Full width. */
+    fullWidth?: boolean;
+    /** Flex-grow. */
+    grow?: boolean;
+    /** Flex-shrink. */
+    shrink?: boolean;
+    /** Tag to render. Default: `'div'`. */
+    as?: 'div' | 'span' | 'section' | 'article' | 'nav' | 'header' | 'footer' | 'main' | 'aside';
+    /** HTML id. */
+    id?: string;
+    /** Inline styles override. */
+    style?: default_2.CSSProperties;
+}
+
+/** Space token values that map to `--space-{n}` CSS variables. */
+export declare type TSpaceToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10;
+
+export { }

package/dist/flex.js

@@ -0,0 +1,73 @@
+import { jsx as g } from "react/jsx-runtime";
+import { c as x } from "./clsx-OuTLNxxd.mjs";
+import { c as j } from "./camelCase-PtIYufW8.mjs";
+import './flex.css';const S = "Flex", v = "_root_1mp2w_7", C = "_directionRow_1mp2w_14", F = "_directionColumn_1mp2w_18", h = "_directionRowReverse_1mp2w_22", R = "_directionColumnReverse_1mp2w_26", E = "_alignFlexStart_1mp2w_30", B = "_alignCenter_1mp2w_34", k = "_alignFlexEnd_1mp2w_38", A = "_alignStretch_1mp2w_42", W = "_alignBaseline_1mp2w_46", $ = "_justifyFlexStart_1mp2w_50", N = "_justifyCenter_1mp2w_54", D = "_justifyFlexEnd_1mp2w_58", I = "_justifySpaceBetween_1mp2w_62", L = "_justifySpaceAround_1mp2w_66", M = "_justifySpaceEvenly_1mp2w_70", P = "_fullWidth_1mp2w_74", Y = "_wrap_1mp2w_78", b = "_grow_1mp2w_82", q = "_shrink_1mp2w_86", e = {
+  root: v,
+  directionRow: C,
+  directionColumn: F,
+  directionRowReverse: h,
+  directionColumnReverse: R,
+  alignFlexStart: E,
+  alignCenter: B,
+  alignFlexEnd: k,
+  alignStretch: A,
+  alignBaseline: W,
+  justifyFlexStart: $,
+  justifyCenter: N,
+  justifyFlexEnd: D,
+  justifySpaceBetween: I,
+  justifySpaceAround: L,
+  justifySpaceEvenly: M,
+  fullWidth: P,
+  wrap: Y,
+  grow: b,
+  shrink: q
+};
+function i(n, t) {
+  return e[j(`${n}-${t}`)];
+}
+const z = (n) => {
+  const {
+    align: t,
+    as: c = "div",
+    children: _,
+    direction: a = "row",
+    fullWidth: p,
+    gap: o,
+    grow: u,
+    id: w,
+    justify: s,
+    px: l,
+    py: r,
+    shrink: m,
+    style: d,
+    wrap: f
+  } = n, y = x(
+    e.root,
+    i("direction", a),
+    t != null && i("align", t),
+    s != null && i("justify", s),
+    f && e.wrap,
+    p && e.fullWidth,
+    u && e.grow,
+    m && e.shrink
+  );
+  return /* @__PURE__ */ g(
+    c,
+    {
+      className: y,
+      id: w,
+      style: {
+        "--flex-gap": o != null ? `var(--space-${o})` : void 0,
+        "--flex-px": l != null ? `var(--space-${l})` : void 0,
+        "--flex-py": r != null ? `var(--space-${r})` : void 0,
+        ...d
+      },
+      children: _
+    }
+  );
+};
+z.displayName = S;
+export {
+  z as Flex
+};

package/dist/form-field.css

@@ -0,0 +1 @@
+:root{--formfield-gap: var(--space-1)}._root_pcv8m_5{display:flex;flex-direction:column;gap:var(--space-1)}._label_pcv8m_11{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-sm)}._required_pcv8m_18{color:var(--color-text-error)}._error_pcv8m_22{color:var(--color-text-error);font-size:var(--font-size-xs);line-height:var(--line-height-xs);margin:0}

package/dist/form-field.d.ts

@@ -0,0 +1,27 @@
+import { default as default_2 } from 'react';
+
+/**
+ * FormField component. Wraps form inputs with label, required indicator, and error message.
+ *
+ * @example
+ * ```tsx
+ * <FormField label="Name" required>
+ *   <input />
+ * </FormField>
+ * <FormField label="Email" error="Invalid email">
+ *   <input />
+ * </FormField>
+ * ```
+ */
+export declare const FormField: default_2.FC<IFormFieldProps>;
+
+export declare interface IFormFieldProps extends default_2.PropsWithChildren {
+    /** Label text displayed above the field. */
+    label?: string;
+    /** Error message displayed below the field. */
+    error?: string;
+    /** Whether the field is required. Default: false. */
+    required?: boolean;
+}
+
+export { }

package/dist/form-field.js

@@ -0,0 +1,22 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { c as n } from "./clsx-OuTLNxxd.mjs";
+import './form-field.css';const d = "FormField", m = "_root_pcv8m_5", _ = "_label_pcv8m_11", p = "_required_pcv8m_18", u = "_error_pcv8m_22", r = {
+  root: m,
+  label: _,
+  required: p,
+  error: u
+}, N = (a) => {
+  const { children: c, error: e, label: o, required: t = !1 } = a, i = n(r.root);
+  return /* @__PURE__ */ l("div", { className: i, children: [
+    o && /* @__PURE__ */ l("label", { className: r.label, children: [
+      o,
+      t && /* @__PURE__ */ s("span", { className: r.required, "aria-hidden": "true", children: " *" })
+    ] }),
+    c,
+    e && /* @__PURE__ */ s("p", { className: r.error, role: "alert", children: e })
+  ] });
+};
+N.displayName = d;
+export {
+  N as FormField
+};

package/dist/getComponentSlots-DwAYUFNk.mjs

@@ -0,0 +1,16 @@
+import i from "react";
+import { i as n } from "./isValidReactNode-CmYwTWCE.mjs";
+const c = (f, o) => {
+  const e = { children: [] };
+  return o.forEach((r) => {
+    e[r] = null;
+  }), i.Children.forEach(f, (r) => {
+    let t = !1;
+    o.forEach((a) => {
+      n(a, r, !1) && (e[a] = r, t = !0), t || e.children.push(r);
+    });
+  }), e;
+};
+export {
+  c as g
+};

package/dist/getVariantClassName-D7Nhpuec.mjs

@@ -0,0 +1,8 @@
+import { c as r } from "./camelCase-PtIYufW8.mjs";
+const m = (s, e, t) => {
+  const a = r(`${s}-${e}`);
+  return t[a] || a;
+};
+export {
+  m as g
+};

package/dist/input.css

@@ -0,0 +1 @@
+:root{--input-bg: var(--color-background-primary);--input-bg-hover: var(--color-background-secondary);--input-border: var(--color-border-primary);--input-border-hover: var(--color-text-tertiary);--input-border-focus: var(--color-border-focus);--input-border-error: var(--color-border-focus-error);--input-text: var(--color-text-primary);--input-text-disabled: var(--color-text-disabled);--input-placeholder: var(--color-text-tertiary);--input-icon: var(--color-text-tertiary);--input-radius: var(--radius-1);--input-shadow: var(--shadow-xs);--input-gap: var(--space-2)}._root_p1h72_17{align-items:center;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--input-shadow);display:inline-flex;gap:var(--input-gap);position:relative;transition:border-color .15s,box-shadow .15s;width:100%}._root_p1h72_17:hover{border-color:var(--input-border-hover)}._root_p1h72_17:focus-within{border-color:var(--input-border-focus);box-shadow:0 0 0 1px var(--input-border-focus)}._root_p1h72_17._invalid_p1h72_36{border-color:var(--input-border-error)}._root_p1h72_17._invalid_p1h72_36:focus-within{box-shadow:0 0 0 1px var(--input-border-error)}._root_p1h72_17._disabled_p1h72_42{background:var(--color-background-disabled);border-color:var(--color-border-disabled);box-shadow:none;cursor:not-allowed}._root_p1h72_17._disabled_p1h72_42:hover{border-color:var(--color-border-disabled)}._root_p1h72_17._disabled_p1h72_42:focus-within{border-color:var(--color-border-disabled);box-shadow:none}._sizeSm_p1h72_56{padding:var(--space-1) var(--space-2)}._sizeMd_p1h72_60{padding:var(--space-2) var(--space-3)}._sizeLg_p1h72_64{padding:var(--space-3) var(--space-4)}._control_p1h72_68{background:none;border:none;color:var(--input-text);flex:1;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0;outline:none;padding:0}._control_p1h72_68::placeholder{color:var(--input-placeholder)}._control_p1h72_68:disabled{color:var(--input-text-disabled);cursor:not-allowed}._control_p1h72_68:disabled::placeholder{color:var(--input-text-disabled)}._control_p1h72_68[type=number]::-webkit-outer-spin-button,._control_p1h72_68[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}._control_p1h72_68[type=number]{appearance:textfield}._before_p1h72_99,._after_p1h72_100{align-items:center;color:var(--input-icon);display:flex;flex-shrink:0;line-height:0}._togglePassword_p1h72_108{align-items:center;background:none;border:none;color:var(--input-icon);cursor:pointer;display:flex;flex-shrink:0;line-height:0;padding:0}._togglePassword_p1h72_108:hover{color:var(--color-text-secondary)}._sizeSm_p1h72_56 ._control_p1h72_68{font-size:var(--font-size-sm);line-height:var(--line-height-sm)}._sizeSm_p1h72_56 ._before_p1h72_99,._sizeSm_p1h72_56 ._after_p1h72_100,._sizeSm_p1h72_56 ._togglePassword_p1h72_108{height:14px;width:14px}._sizeMd_p1h72_60 ._control_p1h72_68{font-size:var(--font-size-md);line-height:var(--line-height-md)}._sizeMd_p1h72_60 ._before_p1h72_99,._sizeMd_p1h72_60 ._after_p1h72_100,._sizeMd_p1h72_60 ._togglePassword_p1h72_108{height:16px;width:16px}._sizeLg_p1h72_64 ._control_p1h72_68{font-size:var(--font-size-lg);line-height:var(--line-height-lg)}._sizeLg_p1h72_64 ._before_p1h72_99,._sizeLg_p1h72_64 ._after_p1h72_100,._sizeLg_p1h72_64 ._togglePassword_p1h72_108{height:18px;width:18px}