kiban-design-system 1.1.16-hotfix.0 → 3.1.0

package/dist/components/text-field.d.ts

@@ -0,0 +1,14 @@
+import { Input } from "./ui/input";
+import { Labelled } from "./labelled";
+type TextFieldProps = {
+    inputProps?: Omit<React.ComponentProps<typeof Input>, "id" | "disabled">;
+    disabled?: boolean;
+    action?: {
+        title?: string;
+        icon?: React.ReactNode;
+        onClick?: () => void;
+    };
+} & Omit<React.ComponentProps<typeof Labelled>, "children">;
+declare const TextField: ({ inputProps, disabled, action, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export { TextField };
+//# sourceMappingURL=text-field.d.ts.map

package/dist/components/text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/components/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAOnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,cAAc,GAAG;IACpB,UAAU,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,IAAI,GAAG,UAAU,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;CACH,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE5D,QAAA,MAAM,SAAS,GAAI,4CAKhB,cAAc,4CA0BhB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/text-field.js

@@ -0,0 +1,36 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import "./ui/input.js";
+import { InputGroupAddon as u, InputGroupButton as p, InputGroup as c, InputGroupInput as d } from "./ui/input-group.js";
+import { Labelled as m } from "./labelled.js";
+const s = ({
+  inputProps: o,
+  disabled: i,
+  action: n,
+  ...t
+}) => {
+  const e = n ? /* @__PURE__ */ r(u, { align: "inline-end", children: /* @__PURE__ */ r(
+    p,
+    {
+      size: "icon-xs",
+      title: n.title,
+      onClick: n.onClick,
+      disabled: i,
+      children: n.icon
+    }
+  ) }) : null;
+  return /* @__PURE__ */ r(m, { ...t, disabled: i, children: /* @__PURE__ */ l(c, { children: [
+    /* @__PURE__ */ r(
+      d,
+      {
+        ...o,
+        id: t.id,
+        "aria-invalid": !!t.error,
+        disabled: i
+      }
+    ),
+    e
+  ] }) });
+};
+export {
+  s as TextField
+};

package/dist/components/ui/alert.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription };
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/ui/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;8EAgBlB,CAAC;AAEF,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CASlE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/ui/alert.js

@@ -0,0 +1,68 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { cva as i } from "class-variance-authority";
+import { cn as a } from "../../lib/utils.js";
+const n = i(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-2 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-foreground",
+        destructive: "border-none bg-surface-danger text-text-danger [&>svg]:text-text-danger",
+        success: "border-none bg-surface-success text-text-success [&>svg]:text-text-success"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function g({
+  className: t,
+  variant: e,
+  ...s
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: a(n({ variant: e }), t),
+      ...s
+    }
+  );
+}
+function u({ className: t, ...e }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: a(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function f({
+  className: t,
+  ...e
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: a(
+        "text-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        t
+      ),
+      ...e
+    }
+  );
+}
+export {
+  g as Alert,
+  f as AlertDescription,
+  u as AlertTitle
+};

package/dist/components/ui/button.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EA8BnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAYF;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ui/button.js

@@ -0,0 +1,54 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { Slot as a } from "@radix-ui/react-slot";
+import { cva as s } from "class-variance-authority";
+import { cn as d } from "../../lib/utils.js";
+const u = s(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-semibold transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 transition-all duration-300",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-lg gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-lg px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function f({
+  className: t,
+  variant: e = "default",
+  size: r = "default",
+  asChild: i = !1,
+  ...n
+}) {
+  return /* @__PURE__ */ o(
+    i ? a : "button",
+    {
+      "data-slot": "button",
+      "data-variant": e,
+      "data-size": r,
+      className: d(u({ variant: e, size: r, className: t })),
+      ...n
+    }
+  );
+}
+export {
+  f as Button,
+  u as buttonVariants
+};

package/dist/components/ui/card.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
+//# sourceMappingURL=card.d.ts.map

package/dist/components/ui/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAC"}

package/dist/components/ui/card.js

@@ -0,0 +1,91 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { cn as o } from "../../lib/utils.js";
+function s({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "card",
+      className: o(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function c({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: o(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function i({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: o("leading-none font-semibold", t),
+      ...a
+    }
+  );
+}
+function l({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: o("text-text-light text-sm", t),
+      ...a
+    }
+  );
+}
+function u({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: o(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function f({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: o("px-6", t),
+      ...a
+    }
+  );
+}
+function m({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: o("flex items-center px-6 [.border-t]:pt-6", t),
+      ...a
+    }
+  );
+}
+export {
+  s as Card,
+  u as CardAction,
+  f as CardContent,
+  l as CardDescription,
+  m as CardFooter,
+  c as CardHeader,
+  i as CardTitle
+};

package/dist/components/ui/field.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from "class-variance-authority";
+import { Label } from "@/components/ui/label";
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/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({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };
+//# sourceMappingURL=field.d.ts.map

package/dist/components/ui/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/field.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAG9C,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAY1E;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,2CAcnE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,QAAA,MAAM,aAAa;;8EAsBlB,CAAC;AAEF,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CAUlE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,2CAapC;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAa3E;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAsBA;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;CAClD,kDA0CA;AAED,OAAO,EACL,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,UAAU,GACX,CAAC"}

package/dist/components/ui/field.js

@@ -0,0 +1,221 @@
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import { useMemo as u } from "react";
+import { cva as c } from "class-variance-authority";
+import { cn as l } from "../../lib/utils.js";
+import { Label as m } from "./label.js";
+import { Separator as p } from "./separator.js";
+function k({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: l(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function F({
+  className: t,
+  variant: e = "legend",
+  ...o
+}) {
+  return /* @__PURE__ */ a(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": e,
+      className: l(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        t
+      ),
+      ...o
+    }
+  );
+}
+function y({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: l(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        t
+      ),
+      ...e
+    }
+  );
+}
+const g = c(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+function L({
+  className: t,
+  orientation: e = "vertical",
+  ...o
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": e,
+      className: l(g({ orientation: e }), t),
+      ...o
+    }
+  );
+}
+function S({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: l(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function j({
+  className: t,
+  ...e
+}) {
+  return /* @__PURE__ */ a(
+    m,
+    {
+      "data-slot": "field-label",
+      className: l(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function z({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: l(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function E({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: l(
+        "text-text-light text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function M({
+  children: t,
+  className: e,
+  ...o
+}) {
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!t,
+      className: l(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        e
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ a(p, { className: "absolute inset-0 top-1/2" }),
+        t && /* @__PURE__ */ a(
+          "span",
+          {
+            className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children: t
+          }
+        )
+      ]
+    }
+  );
+}
+function V({
+  className: t,
+  children: e,
+  errors: o,
+  ...n
+}) {
+  const r = u(() => {
+    if (e)
+      return e;
+    if (!o?.length)
+      return null;
+    const i = [
+      ...new Map(o.map((d) => [d?.message, d])).values()
+    ];
+    return i?.length == 1 ? i[0]?.message : /* @__PURE__ */ a("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: i.map(
+      (d, s) => d?.message && /* @__PURE__ */ a("li", { children: d.message }, s)
+    ) });
+  }, [e, o]);
+  return r ? /* @__PURE__ */ a(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: l("text-text-danger text-sm font-normal", t),
+      ...n,
+      children: r
+    }
+  ) : null;
+}
+export {
+  L as Field,
+  S as FieldContent,
+  E as FieldDescription,
+  V as FieldError,
+  y as FieldGroup,
+  j as FieldLabel,
+  F as FieldLegend,
+  M as FieldSeparator,
+  k as FieldSet,
+  z as FieldTitle
+};

package/dist/components/ui/input-group.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Button } from "@/components/ui/button";
+declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "sm" | "icon-sm" | "xs" | "icon-xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
+//# sourceMappingURL=input-group.d.ts.map

package/dist/components/ui/input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAIhD,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CA4BvE;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,2CAgB5E;AAED,QAAA,MAAM,wBAAwB;;8EAgB7B,CAAC;AAEF,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GAClD,YAAY,CAAC,OAAO,wBAAwB,CAAC,2CAU9C;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAU5E;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAW/B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAWlC;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,CAAC"}