@ztwoint/z-ui 0.2.0-beta.0 → 0.2.0-beta.2

package/dist/v2/atoms/indicators/featured-icon.js

@@ -0,0 +1,110 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as t } from "../../../lib/utils.js";
+import { cva as c } from "class-variance-authority";
+const u = c("flex items-center justify-center rounded-lg", {
+  variants: {
+    color: {
+      neutral: "",
+      gray: "",
+      success: "",
+      warning: "",
+      error: "",
+      brand: ""
+    },
+    size: {
+      small: "size-5 p-1",
+      medium: "size-6 p-1",
+      large: "size-7 p-1.5"
+    },
+    type: {
+      strong: "",
+      subtle: ""
+    }
+  },
+  compoundVariants: [
+    // Strong variants
+    {
+      color: "neutral",
+      type: "strong",
+      class: "bg-neutral-100 text-neutral-800"
+    },
+    {
+      color: "gray",
+      type: "strong",
+      class: "bg-neutral-800 text-neutral-50"
+    },
+    {
+      color: "success",
+      type: "strong",
+      class: "bg-emerald-700 text-emerald-50"
+    },
+    {
+      color: "warning",
+      type: "strong",
+      class: "bg-amber-700 text-amber-50"
+    },
+    {
+      color: "error",
+      type: "strong",
+      class: "bg-rose-700 text-rose-50"
+    },
+    {
+      color: "brand",
+      type: "strong",
+      class: "bg-blue-700 text-blue-50"
+    },
+    // Subtle variants
+    {
+      color: "neutral",
+      type: "subtle",
+      class: "bg-neutral-50 text-neutral-600"
+    },
+    {
+      color: "gray",
+      type: "subtle",
+      class: "bg-neutral-50 text-neutral-800"
+    },
+    {
+      color: "success",
+      type: "subtle",
+      class: "bg-emerald-50 text-emerald-700"
+    },
+    {
+      color: "warning",
+      type: "subtle",
+      class: "bg-amber-50 text-amber-700"
+    },
+    {
+      color: "error",
+      type: "subtle",
+      class: "bg-rose-50 text-rose-700"
+    },
+    {
+      color: "brand",
+      type: "subtle",
+      class: "bg-blue-50 text-blue-700"
+    }
+  ],
+  defaultVariants: {
+    color: "neutral",
+    size: "medium",
+    type: "strong"
+  }
+});
+function p({ className: s, color: l, size: e, type: a, icon: o, ...n }) {
+  return /* @__PURE__ */ r("span", { className: t(u({ color: l, size: e, type: a }), s), ...n, children: /* @__PURE__ */ r(
+    "span",
+    {
+      className: t(
+        "[&>svg]:aspect-square",
+        e === "small" && "[&>svg]:size-3",
+        e === "medium" && "[&>svg]:size-4",
+        e === "large" && "[&>svg]:size-4"
+      ),
+      children: o
+    }
+  ) });
+}
+export {
+  p as Z2FeaturedIcon
+};

package/dist/v2/atoms/indicators/index.d.ts

@@ -0,0 +1,4 @@
+export * from './badge';
+export * from './number-badge';
+export * from './featured-icon';
+export * from './stepper';

package/dist/v2/atoms/indicators/number-badge.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const numberBadgeVariants: (props?: ({
+    color?: "success" | "warning" | "neutral" | "brand" | "muted" | "error" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+declare function NumberBadge({ className, color, label, ...props }: Omit<React.ComponentProps<'span'>, 'children'> & VariantProps<typeof numberBadgeVariants> & {
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export { NumberBadge, numberBadgeVariants };

package/dist/v2/atoms/indicators/number-badge.js

@@ -0,0 +1,42 @@
+import { jsx as n } from "react/jsx-runtime";
+import { cva as o } from "class-variance-authority";
+import "react";
+import { cn as l } from "../../../lib/utils.js";
+const m = o(
+  "inline-flex gap-px px-1 rounded-xs items-center text-xs font-normal",
+  {
+    variants: {
+      color: {
+        neutral: "bg-neutral-100 text-neutral-600",
+        muted: "bg-neutral-100 text-neutral-400",
+        brand: "bg-blue-50 text-blue-700",
+        success: "bg-emerald-50 text-emerald-700",
+        warning: "bg-amber-50 text-amber-700",
+        error: "bg-rose-50 text-rose-700"
+      }
+    },
+    defaultVariants: {
+      color: "neutral"
+    }
+  }
+);
+function i({
+  className: e,
+  color: r,
+  label: t,
+  ...a
+}) {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      "data-slot": "number-badge",
+      className: l(m({ color: r }), e),
+      ...a,
+      children: t
+    }
+  );
+}
+export {
+  i as NumberBadge,
+  m as numberBadgeVariants
+};

package/dist/v2/atoms/indicators/stepper.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface StepperProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    label?: string;
+    progress?: 'incomplete' | 'active' | 'completed';
+    location?: 'default' | 'last';
+    disabled?: boolean;
+}
+declare function Stepper({ className, label, progress, location, disabled, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
+export { Stepper };

package/dist/v2/atoms/indicators/stepper.js

@@ -0,0 +1,86 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { cva as l } from "class-variance-authority";
+import "react";
+import { cn as r } from "../../../lib/utils.js";
+import u from "../../assets/icon.js";
+const m = l(
+  "flex items-center justify-center shrink-0 size-4 rounded-full border-2 border-solid",
+  {
+    variants: {
+      progress: {
+        incomplete: "border-neutral-500",
+        active: "border-blue-700",
+        completed: "border-blue-700 bg-blue-700"
+      }
+    },
+    defaultVariants: {
+      progress: "incomplete"
+    }
+  }
+), h = l("text-sm font-medium leading-5 tracking-normal whitespace-nowrap", {
+  variants: {
+    progress: {
+      incomplete: "text-neutral-500 group-hover:shadow-[inset_0_-1.5px_0_0_var(--color-neutral-500)]",
+      active: "text-neutral-900 group-hover:shadow-[inset_0_-1.5px_0_0_var(--color-neutral-900)]",
+      completed: "text-neutral-900 group-hover:text-blue-700 group-hover:shadow-[inset_0_-1.5px_0_0_var(--color-blue-700)]"
+    }
+  },
+  defaultVariants: {
+    progress: "incomplete"
+  }
+});
+function b({
+  className: i,
+  label: s = "Step name",
+  progress: t = "incomplete",
+  location: n = "default",
+  disabled: a = !1,
+  ...o
+}) {
+  const c = () => /* @__PURE__ */ e("div", { className: r(m({ progress: t })), children: t === "completed" ? /* @__PURE__ */ e("span", { className: "w-3.5 h-3.5 flex items-center justify-center text-white [&>svg]:size-3.5 [&>svg]:text-white [&>svg]:aspect-square", children: /* @__PURE__ */ e(u, { name: "circleCheckFilled", fill: "var(--blue-700)" }) }) : null }), d = () => n === "last" ? null : /* @__PURE__ */ e("div", { className: "w-3 min-h-4 flex pt-0.5 flex-col items-center justify-center self-stretch", children: /* @__PURE__ */ e(
+    "svg",
+    {
+      width: "12",
+      height: "2",
+      viewBox: "0 0 12 2",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ e(
+        "line",
+        {
+          x1: "1",
+          y1: "1",
+          x2: "11",
+          y2: "1",
+          stroke: "#E5E5E5",
+          strokeWidth: 2,
+          strokeLinecap: "round"
+        }
+      )
+    }
+  ) });
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      "data-slot": "stepper",
+      "data-progress": t,
+      "data-location": n,
+      className: r(
+        "inline-flex items-center cursor-pointer gap-2 text-neutral-500 group",
+        a && "cursor-not-allowed opacity-50 pointer-events-none",
+        i
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-center px-0 py-0.5 relative shrink-0", children: c() }),
+        /* @__PURE__ */ e("div", { className: "flex items-center relative shrink-0 ", children: /* @__PURE__ */ e("p", { className: r(h({ progress: t })), children: s }) }),
+        d()
+      ]
+    }
+  );
+}
+export {
+  b as Stepper
+};

package/dist/v2/atoms/inputs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './input';
+export * from './label';

package/dist/v2/atoms/inputs/input.d.ts

@@ -0,0 +1,16 @@
+type Z2InputRoundness = 'FULL' | 'NONE' | 'LEFT' | 'RIGHT';
+type Z2Semantic = 'info' | 'warning' | 'success' | 'danger';
+interface Z2InputProps extends React.ComponentProps<'input'> {
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    roundness?: Z2InputRoundness;
+    semantic?: Z2Semantic;
+    dimension?: 'small' | 'medium' | 'large';
+}
+declare const inputContainerVariants: (props?: ({
+    dimension?: "small" | "large" | "medium" | null | undefined;
+    roundness?: "LEFT" | "RIGHT" | "FULL" | "NONE" | null | undefined;
+    semantic?: "success" | "warning" | "danger" | "info" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+declare function Z2Input({ className, type, leadingIcon, trailingIcon, dimension, roundness, semantic, ...props }: Z2InputProps): import("react/jsx-runtime").JSX.Element;
+export { Z2Input, type Z2InputProps, type Z2InputRoundness, type Z2Semantic, inputContainerVariants, };

package/dist/v2/atoms/inputs/input.js

@@ -0,0 +1,94 @@
+import { jsx as e, Fragment as u, jsxs as m } from "react/jsx-runtime";
+import { cva as c } from "class-variance-authority";
+import "react";
+import { cn as a } from "../../../lib/utils.js";
+const p = c(
+  [
+    // Base layout and structure
+    "flex items-center self-stretch gap-1",
+    // Default state
+    "border border-solid border-neutral-200 bg-white",
+    "text-sm font-normal text-neutral-900",
+    "placeholder:text-neutral-400",
+    "outline-none",
+    // Disabled state
+    "data-[disabled=true]:bg-neutral-100 data-[disabled=true]:text-neutral-400 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
+    // Hover state
+    "hover:bg-neutral-50 hover:border-neutral-300",
+    // Active state
+    "active:bg-neutral-50 active:border-neutral-600",
+    // Focus state
+    "focus-within:bg-neutral-50 focus-within:border-neutral-600 focus-within:hover:border-neutral-600"
+  ],
+  {
+    variants: {
+      // Size variants
+      dimension: {
+        small: "py-1 px-2 h-6",
+        medium: "py-1.5 px-2 h-7",
+        large: "py-2 px-2.5 h-8"
+      },
+      // Border radius variants
+      roundness: {
+        FULL: "rounded-lg",
+        NONE: "rounded-none",
+        LEFT: "rounded-l-lg",
+        RIGHT: "rounded-r-lg"
+      },
+      semantic: {
+        info: "",
+        warning: "border-amber-700",
+        success: "border-emerald-700",
+        danger: "border-rose-700"
+      }
+    },
+    defaultVariants: {
+      dimension: "medium",
+      roundness: "FULL"
+    }
+  }
+);
+function g({
+  className: d,
+  type: l,
+  leadingIcon: r,
+  trailingIcon: t,
+  dimension: o,
+  roundness: s,
+  semantic: i,
+  ...n
+}) {
+  return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ m(
+    "div",
+    {
+      "data-disabled": n.disabled,
+      className: a(
+        p({
+          dimension: o,
+          roundness: s,
+          semantic: i,
+          className: d
+        })
+      ),
+      children: [
+        r && /* @__PURE__ */ e("span", { className: "flex items-center justify-center py-px text-neutral-500 h-3.5 w-3.5", children: r }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            type: l,
+            "data-slot": "input",
+            className: a(
+              "px-0.5 bg-transparent text-sm font-normal text-neutral-900 placeholder:text-neutral-400 border-none outline-none flex-1"
+            ),
+            ...n
+          }
+        ),
+        t && /* @__PURE__ */ e("span", { className: "flex items-center justify-center py-px text-neutral-500 h-3.5 w-3.5", children: t })
+      ]
+    }
+  ) });
+}
+export {
+  g as Z2Input,
+  p as inputContainerVariants
+};

package/dist/v2/atoms/inputs/label.d.ts

@@ -0,0 +1,18 @@
+declare const labelVariants: (props?: ({
+    type?: "data" | "input" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+interface LabelProps {
+    htmlFor?: string;
+    className?: string;
+    type: 'input' | 'data';
+    label: string;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    helperText?: string | {
+        title: string;
+        description?: string;
+    };
+}
+declare function Label({ htmlFor, className, type, label, description, required, disabled, helperText, }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export { Label, type LabelProps, labelVariants };

package/dist/v2/atoms/inputs/label.js

@@ -0,0 +1,66 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { cva as u } from "class-variance-authority";
+import "react";
+import { cn as n } from "../../../lib/utils.js";
+import c from "../../assets/icon.js";
+import { Tooltip as m } from "../actions/tooltip.js";
+const b = u("flex flex-col items-start gap-px group/label", {
+  variants: {
+    type: {
+      input: "text-neutral-500 data-[disabled=true]:text-neutral-400 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none data-[active=true]:text-neutral-700 active:text-neutral-700 hover:text-neutral-600",
+      data: "text-neutral-500"
+    }
+  },
+  defaultVariants: {
+    type: "input"
+  }
+});
+function h({
+  htmlFor: o,
+  className: p,
+  type: e,
+  label: d,
+  description: l,
+  required: s,
+  disabled: i,
+  helperText: t
+}) {
+  return /* @__PURE__ */ r(
+    "label",
+    {
+      "data-slot": "label",
+      "data-type": e,
+      htmlFor: o,
+      "data-disabled": i,
+      className: n(b({ type: e }), p),
+      children: [
+        /* @__PURE__ */ a("span", { className: "flex items-center gap-1 self-stretch", children: /* @__PURE__ */ r(
+          "span",
+          {
+            className: n(
+              "flex items-center gap-1 group-data-[type=input]/label:text-sm group-data-[type=input]/label:font-medium",
+              "group-data-[type=data]/label:text-sm group-data-[type=data]/label:font-normal"
+            ),
+            children: [
+              d,
+              s && /* @__PURE__ */ a("span", { className: "text-rose-700", children: "*" }),
+              t && /* @__PURE__ */ a(
+                m,
+                {
+                  title: typeof t == "object" ? t.title : t,
+                  description: typeof t == "object" ? t.description : void 0,
+                  children: /* @__PURE__ */ a("span", { className: "flex px-0.5 py-1 items-center group-data-[type=data]/label:text-neutral-600", children: /* @__PURE__ */ a(c, { name: "circleQuestion" }) })
+                }
+              )
+            ]
+          }
+        ) }),
+        l && /* @__PURE__ */ a("span", { className: "group-data-[type=input]/label:text-xs group-data-[type=input]/label:font-normal group-data-[type=data]/label:truncate group-data-[type=data]/label:line-clamp-2 group-data-[type=data]/label:text-neutral-700 group-data-[type=data]/label:font-semibold group-data-[type=data]/label:text-sm", children: l })
+      ]
+    }
+  );
+}
+export {
+  h as Label,
+  b as labelVariants
+};

package/dist/v2/index.d.ts

@@ -0,0 +1,4 @@
+export * from './assets';
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';

package/dist/v2/molecules/actions/breadcrumb-group.d.ts

@@ -0,0 +1,6 @@
+import { BreadcrumbLinkProps } from '../../atoms/actions/breadcrumb-link';
+interface Z2BreadcrumbGroupProps {
+    links: BreadcrumbLinkProps[];
+}
+declare const Z2BreadcrumbGroup: ({ links }: Z2BreadcrumbGroupProps) => import("react/jsx-runtime").JSX.Element;
+export { Z2BreadcrumbGroup, type Z2BreadcrumbGroupProps };

package/dist/v2/molecules/actions/breadcrumb-group.js

@@ -0,0 +1,6 @@
+import { jsx as r } from "react/jsx-runtime";
+import { BreadcrumbLink as i } from "../../atoms/actions/breadcrumb-link.js";
+const n = ({ links: a }) => /* @__PURE__ */ r("nav", { role: "navigation", "aria-label": "Breadcrumb", children: /* @__PURE__ */ r("ol", { className: "inline-flex items-center", children: a.map((e) => /* @__PURE__ */ r(i, { ...e }, e.label)) }) });
+export {
+  n as Z2BreadcrumbGroup
+};

package/dist/v2/molecules/actions/index.d.ts

@@ -0,0 +1 @@
+export * from './breadcrumb-group';

package/dist/v2/molecules/actions/tab-group.d.ts

@@ -0,0 +1,6 @@
+import { TabButtonProps } from '../../atoms';
+interface TabGroupProps {
+    tabs: TabButtonProps[];
+}
+declare function TabGroup({ tabs }: TabGroupProps): import("react/jsx-runtime").JSX.Element;
+export { TabGroup, type TabGroupProps };

package/dist/v2/molecules/actions/tab-group.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import "../../atoms/inputs/input.js";
+import "../../atoms/inputs/label.js";
+import "../../atoms/indicators/badge.js";
+import "../../atoms/indicators/number-badge.js";
+import "../../atoms/indicators/featured-icon.js";
+import "../../atoms/indicators/stepper.js";
+import "../../atoms/actions/button.js";
+import "../../atoms/actions/breadcrumb-link.js";
+import { TabButton as i } from "../../atoms/actions/tab-button.js";
+function x({ tabs: t }) {
+  return /* @__PURE__ */ o("div", { className: "flex flex-row items-center gap-6 shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]", children: t.map((r) => /* @__PURE__ */ o(i, { ...r }, r.label)) });
+}
+export {
+  x as TabGroup
+};

package/dist/v2/molecules/index.d.ts

@@ -0,0 +1,2 @@
+export * from './kpi-card';
+export * from './actions';

package/dist/v2/molecules/kpi-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './kpi-card';
+export * from './kpi-card.type';

package/dist/v2/molecules/kpi-card/kpi-card.d.ts

@@ -0,0 +1,3 @@
+import { Z2KpiCardProps } from './kpi-card.type';
+declare const Z2KpiCard: ({ header, footer, ...props }: Z2KpiCardProps) => import("react/jsx-runtime").JSX.Element;
+export { Z2KpiCard };

package/dist/v2/molecules/kpi-card/kpi-card.js

@@ -0,0 +1,82 @@
+import { jsxs as s, jsx as e, Fragment as o } from "react/jsx-runtime";
+import "react";
+import { cn as d } from "../../../lib/utils.js";
+import c from "../../assets/icon.js";
+import { Z2Button as m } from "../../atoms/actions/button.js";
+import { Z2FeaturedIcon as f } from "../../atoms/indicators/featured-icon.js";
+const x = ({
+  className: r,
+  active: l = !1,
+  ...a
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-active": l,
+    className: d(
+      "flex items-start flex-col gap-3.5 p-3.5 border border-solid border-neutral-200 rounded-xl",
+      // Hover state
+      "hover:border-neutral-300 hover:shadow",
+      // Active state
+      "data-[active=true]:border-blue-700",
+      r
+    ),
+    ...a
+  }
+);
+function p({
+  className: r,
+  title: l,
+  description: a,
+  children: i,
+  infoButton: t,
+  moreActions: n
+}) {
+  return /* @__PURE__ */ s("div", { className: d("flex items-start self-stretch gap-2", r), children: [
+    /* @__PURE__ */ s("div", { className: "flex flex-col items-start gap-0 flex-1", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-700 text-sm font-medium", children: l }),
+      a && /* @__PURE__ */ e("span", { className: "text-neutral-600 text-xs font-normal", children: a })
+    ] }),
+    /* @__PURE__ */ e("span", { className: "flex justify-end items-center gap-1", children: i || /* @__PURE__ */ s(o, { children: [
+      t && /* @__PURE__ */ e(
+        m,
+        {
+          variant: t.variant || "ghost",
+          size: t.size || "small",
+          leadingIcon: t.leadingIcon || /* @__PURE__ */ e(c, { name: "circleInfo" }),
+          ...t
+        }
+      ),
+      n && /* @__PURE__ */ e(
+        m,
+        {
+          variant: n.variant || "ghost",
+          size: n.size || "small",
+          leadingIcon: n.leadingIcon || /* @__PURE__ */ e(c, { name: "dots" }),
+          ...n
+        }
+      )
+    ] }) })
+  ] });
+}
+function h({
+  className: r,
+  text: l,
+  icon: a = /* @__PURE__ */ e(c, { name: "percentage" }),
+  showIcon: i = !1,
+  featuredIcon: t
+}) {
+  return /* @__PURE__ */ s("div", { className: d("flex items-center gap-2 self-stretch", r), children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center gap-px flex-1", children: [
+      /* @__PURE__ */ e("span", { className: "text-neutral-950 text-lg font-bold", children: l }),
+      i && /* @__PURE__ */ e("div", { className: "font-sans flex items-center justify-center text-neutral-600 text-sm font-bold leading-3 tracking-normal", children: /* @__PURE__ */ e("span", { className: "flex items-center justify-center h-3 w-3", children: a }) })
+    ] }),
+    t && /* @__PURE__ */ e(f, { ...t })
+  ] });
+}
+const Z = ({ header: r, footer: l, ...a }) => /* @__PURE__ */ s(x, { ...a, children: [
+  /* @__PURE__ */ e(p, { ...r }),
+  /* @__PURE__ */ e(h, { ...l })
+] });
+export {
+  Z as Z2KpiCard
+};

package/dist/v2/molecules/kpi-card/kpi-card.type.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { Z2FeaturedIconProps } from '../../atoms/indicators/featured-icon';
+import { Z2ButtonProps } from '../../atoms/actions/button';
+export interface Z2KpiCardProps extends React.ComponentProps<'div'> {
+    header: Z2KpiCardHeaderProps;
+    footer: Z2KpiCardFooterProps;
+    active?: boolean;
+}
+export interface Z2KpiCardFooterProps extends React.ComponentProps<'div'> {
+    text: string;
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+    featuredIcon?: Z2FeaturedIconProps;
+}
+export interface Z2KpiCardHeaderProps extends React.ComponentProps<'div'> {
+    title: string;
+    description?: string;
+    infoButton?: Z2ButtonProps;
+    moreActions?: Z2ButtonProps;
+}

package/dist/v2/organisms/field/field-error.d.ts

@@ -0,0 +1,6 @@
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<'div'> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { FieldError };

package/dist/v2/organisms/field/field-group.d.ts

@@ -0,0 +1,2 @@
+declare function FieldGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { FieldGroup };

package/dist/v2/organisms/field/field-set.d.ts

@@ -0,0 +1,2 @@
+declare function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>): import("react/jsx-runtime").JSX.Element;
+export { FieldSet };

package/dist/v2/organisms/field/field.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import { LabelProps } from '../../atoms/inputs/label';
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function FieldLabel({ label, description, required, disabled, helperText, className, }: Omit<LabelProps, 'type'>): import("react/jsx-runtime").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<'div'> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { Field, FieldLabel, FieldSeparator, FieldContent };