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

package/README.md

@@ -0,0 +1,90 @@
+# Kiban Design System
+
+A React component library built with TypeScript, Tailwind CSS, and Vite.
+
+## Installation
+
+```bash
+npm install kiban-design-system
+```
+
+## Peer Dependencies
+
+This library requires the following peer dependencies:
+
+- `react` (^18.0.0 || ^19.0.0)
+- `react-dom` (^18.0.0 || ^19.0.0)
+- `tailwindcss` (^4.0.0)
+
+## Usage
+
+### Import Components
+
+```typescript
+import { Button, Input, OTPForm } from "kiban-design-system";
+```
+
+### Import Utilities
+
+```typescript
+import { isEmailValid } from "kiban-design-system/lib";
+```
+
+### Import Types
+
+```typescript
+import type { TErrorAlert } from "kiban-design-system/types";
+```
+
+### Import Styles
+
+```typescript
+// In your main entry file (e.g., main.tsx or App.tsx)
+import "kiban-design-system/style.css";
+```
+
+## Development
+
+### Setup
+
+```bash
+npm install
+```
+
+### Build
+
+```bash
+npm run build
+```
+
+### Development Server
+
+```bash
+npm run dev
+```
+
+### Storybook
+
+```bash
+npm run storybook
+```
+
+## Commit Guidelines
+
+This project uses [Conventional Commits](https://www.conventionalcommits.org/) for automatic versioning and publishing.
+
+**Important:** See [docs/commit-rules-and-versioning.md](./docs/commit-rules-and-versioning.md) for detailed commit guidelines.
+
+### Quick Reference
+
+- `feat:` - New features (minor version bump)
+- `fix:` - Bug fixes (patch version bump)
+- `feat!:` or `BREAKING CHANGE:` - Breaking changes (major version bump)
+
+## Versioning
+
+This project follows [Semantic Versioning](https://semver.org/) and automatically publishes to npm when changes are pushed to the `main` branch.
+
+## License
+
+MIT

package/dist/components/auth-card.d.ts

@@ -0,0 +1,22 @@
+import type { TErrorAlert } from "@/types/common";
+import { FieldDescription } from "./ui/field";
+interface AuthCardProps extends React.ComponentProps<"div"> {
+    title?: string;
+    description?: string;
+    error?: TErrorAlert;
+    logo?: string;
+    onSubmit?: () => void;
+    renderForm: () => React.ReactNode;
+    renderFooter?: () => React.ReactNode;
+    extraAction?: {
+        text?: string;
+        onClick?: () => void;
+        disabled?: boolean;
+    };
+}
+export declare const AuthCardFooter: ({ children, className, ...props }: {
+    children: React.ReactNode;
+} & React.ComponentProps<typeof FieldDescription>) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthCard: ({ title, description, logo, error, className, onSubmit, renderForm, renderFooter, extraAction, ...props }: AuthCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=auth-card.d.ts.map

package/dist/components/auth-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-card.d.ts","sourceRoot":"","sources":["../../src/components/auth-card.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAG9C,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE;QACZ,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,cAAc,GAAI,mCAI5B;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,cAAc,CACrD,OAAO,gBAAgB,CACxB,4CAMA,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,2GAWtB,aAAa,4CAiEf,CAAC"}

package/dist/components/auth-card.js

@@ -0,0 +1,69 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { cn as n } from "../lib/utils.js";
+import { CardHeader as C, CardTitle as N, CardDescription as v, Card as k, CardContent as b } from "./ui/card.js";
+import { Alert as D, AlertTitle as w, AlertDescription as A } from "./ui/alert.js";
+import { OctagonXIcon as M } from "lucide-react";
+import { FieldDescription as j } from "./ui/field.js";
+import { Button as F } from "./ui/button.js";
+const L = ({
+  children: l,
+  className: r,
+  ...a
+}) => /* @__PURE__ */ e(j, { className: n("text-left text-xs", r), ...a, children: l }), O = ({
+  title: l,
+  description: r,
+  logo: a,
+  error: i,
+  className: s,
+  onSubmit: d,
+  renderForm: o,
+  renderFooter: m,
+  extraAction: c,
+  ...p
+}) => {
+  const x = (g) => {
+    g.preventDefault(), d?.();
+  }, f = a || l || r ? /* @__PURE__ */ t(C, { className: "text-center gap-8", children: [
+    a && /* @__PURE__ */ e("img", { src: a, alt: "Logo", width: 100, height: 100 }),
+    (l || r)?.trim() && /* @__PURE__ */ t("div", { className: "flex flex-col", children: [
+      l && /* @__PURE__ */ e(N, { className: "text-3xl text-left tracking-[-0.04em]", children: l }),
+      r && /* @__PURE__ */ e(v, { className: "text-left", children: r })
+    ] })
+  ] }) : null, h = i ? /* @__PURE__ */ t(D, { variant: "destructive", children: [
+    /* @__PURE__ */ e(M, {}),
+    /* @__PURE__ */ e(w, { children: i.title }),
+    /* @__PURE__ */ e(A, { children: i.description })
+  ] }) : null, u = c ? /* @__PURE__ */ e(
+    F,
+    {
+      variant: "ghost",
+      size: "lg",
+      onClick: c.onClick,
+      "aria-label": c.text,
+      disabled: c.disabled,
+      children: c.text
+    }
+  ) : null;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: n("flex flex-col gap-6 w-full max-w-[482px]", s),
+      ...p,
+      children: /* @__PURE__ */ t(k, { className: "gap-8 px-4 py-10 rounded-[20px]", children: [
+        f,
+        /* @__PURE__ */ t(b, { className: "flex flex-col gap-8", children: [
+          h,
+          /* @__PURE__ */ t("div", { className: "flex flex-col gap-[6px]", children: [
+            /* @__PURE__ */ e("form", { onSubmit: x, children: o() }),
+            u
+          ] }),
+          m?.() ?? null
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  O as AuthCard,
+  L as AuthCardFooter
+};

package/dist/components/choice-card.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=choice-card.d.ts.map

package/dist/components/choice-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-card.d.ts","sourceRoot":"","sources":["../../src/components/choice-card.tsx"],"names":[],"mappings":""}

package/dist/components/forgot-password-form.d.ts

@@ -0,0 +1,33 @@
+import type { TErrorAlert } from "@/types/common";
+interface ForgotPasswordFormProps extends React.ComponentProps<"div"> {
+    logo?: string;
+    title?: string;
+    description?: string;
+    onSubmit?: () => void;
+    submitButtonText?: string;
+    footerLinks?: {
+        text?: string;
+        href?: string;
+    }[];
+    error?: TErrorAlert;
+    isLoading?: boolean;
+    emailFieldLabel?: string;
+    emailFieldPlaceholder?: string;
+    email?: string;
+    onEmailChange?: (email: string) => void;
+    createAccountButtonProps?: {
+        text?: string;
+        onClick?: () => void;
+    };
+    signUpButtonProps?: {
+        text?: string;
+        onClick?: () => void;
+    };
+    successMessage?: {
+        title?: string;
+        description?: string;
+    };
+}
+export declare function ForgotPasswordForm({ logo, title, description, onSubmit, submitButtonText, footerLinks, error, isLoading, className, email, onEmailChange, emailFieldLabel, emailFieldPlaceholder, createAccountButtonProps, signUpButtonProps, successMessage, ...props }: ForgotPasswordFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=forgot-password-form.d.ts.map

package/dist/components/forgot-password-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forgot-password-form.d.ts","sourceRoot":"","sources":["../../src/components/forgot-password-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAQlD,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE;QACZ,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wBAAwB,CAAC,EAAE;QACzB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,iBAAiB,CAAC,EAAE;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,cAAc,CAAC,EAAE;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAgB,EAChB,KAAK,EACL,SAAS,EACT,SAAS,EACT,KAAK,EACL,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,wBAAwB,EACxB,iBAAiB,EACjB,cAAc,EACd,GAAG,KAAK,EACT,EAAE,uBAAuB,2CA8EzB"}

package/dist/components/forgot-password-form.js

@@ -0,0 +1,87 @@
+import { jsxs as i, jsx as e, Fragment as k } from "react/jsx-runtime";
+import { Button as d } from "./ui/button.js";
+import { FieldGroup as c } from "./ui/field.js";
+import { Spinner as w } from "./ui/spinner.js";
+import { AuthCardFooter as y, AuthCard as z } from "./auth-card.js";
+import { TextField as D } from "./text-field.js";
+import { isEmailValid as S } from "../lib/utils.js";
+import { Alert as T, AlertTitle as E, AlertDescription as G } from "./ui/alert.js";
+import { CheckCircle2Icon as I } from "lucide-react";
+function X({
+  logo: h,
+  title: f,
+  description: p,
+  onSubmit: x,
+  submitButtonText: s,
+  footerLinks: o = [],
+  error: u,
+  isLoading: r,
+  className: C,
+  email: n,
+  onEmailChange: b,
+  emailFieldLabel: F,
+  emailFieldPlaceholder: v,
+  createAccountButtonProps: m,
+  signUpButtonProps: t,
+  successMessage: a,
+  ...N
+}) {
+  const A = r || !n || !S(n), g = o.length > 0 || t ? /* @__PURE__ */ i(y, { className: "flex flex-col gap-4 items-start", children: [
+    t ? /* @__PURE__ */ e(
+      d,
+      {
+        type: "button",
+        size: "lg",
+        disabled: r,
+        onClick: t.onClick,
+        variant: "link",
+        className: "p-0 text-text-light font-normal cursor-pointer",
+        children: t.text
+      }
+    ) : null,
+    o.length > 0 ? /* @__PURE__ */ e("div", { className: "flex gap-4 flex-wrap", children: o.map((l) => /* @__PURE__ */ e("a", { href: l.href, className: "hover:underline", children: l.text }, l.text)) }) : null
+  ] }) : null, j = a ? /* @__PURE__ */ i(T, { variant: "success", children: [
+    /* @__PURE__ */ e(I, {}),
+    /* @__PURE__ */ e(E, { children: a?.title }),
+    /* @__PURE__ */ e(G, { children: a?.description })
+  ] }) : /* @__PURE__ */ i(k, { children: [
+    /* @__PURE__ */ e(
+      D,
+      {
+        label: F,
+        inputProps: {
+          value: n,
+          onChange: (l) => b?.(l.target.value),
+          placeholder: v
+        },
+        disabled: r
+      }
+    ),
+    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(d, { type: "submit", size: "lg", disabled: A, children: [
+      r ? /* @__PURE__ */ e(w, {}) : null,
+      s
+    ] }) })
+  ] });
+  return /* @__PURE__ */ e(
+    z,
+    {
+      className: C,
+      title: f,
+      description: p,
+      logo: h,
+      error: u,
+      renderForm: () => /* @__PURE__ */ e(c, { className: "flex flex-col gap-3", children: j }),
+      extraAction: m ? {
+        text: m.text,
+        onClick: m.onClick,
+        disabled: r
+      } : void 0,
+      renderFooter: () => g,
+      onSubmit: x,
+      ...N
+    }
+  );
+}
+export {
+  X as ForgotPasswordForm
+};

package/dist/components/labelled.d.ts

@@ -0,0 +1,17 @@
+import { Field } from "./ui/field";
+type LabelledProps = {
+    label?: string;
+    labelAction?: {
+        text?: string;
+        onClick?: () => void;
+        disabled?: boolean;
+    };
+    id?: string;
+    helpText?: string;
+    error?: boolean | string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+} & Omit<React.ComponentProps<typeof Field>, "onChange" | "disabled">;
+declare const Labelled: ({ label, labelAction, id, helpText, error, children, disabled, ...props }: LabelledProps) => import("react/jsx-runtime").JSX.Element;
+export { Labelled };
+//# sourceMappingURL=labelled.d.ts.map

package/dist/components/labelled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelled.d.ts","sourceRoot":"","sources":["../../src/components/labelled.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAA4C,MAAM,YAAY,CAAC;AAE7E,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE;QACZ,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAEtE,QAAA,MAAM,QAAQ,GAAI,2EASf,aAAa,4CAwCf,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/labelled.js

@@ -0,0 +1,41 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { CircleAlertIcon as m } from "lucide-react";
+import { Button as p } from "./ui/button.js";
+import { FieldLabel as u, Field as f, FieldError as h, FieldDescription as k } from "./ui/field.js";
+const j = ({
+  label: a,
+  labelAction: e,
+  id: t,
+  helpText: i,
+  error: l,
+  children: o,
+  disabled: n,
+  ...c
+}) => {
+  const d = a ? /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ r(u, { htmlFor: t, className: "flex-1", children: a }),
+    e && /* @__PURE__ */ r(
+      p,
+      {
+        variant: "link",
+        className: "p-0 font-normal",
+        onClick: e.onClick,
+        disabled: n || e.disabled,
+        "aria-disabled": n || e.disabled,
+        children: e.text
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ s(f, { ...c, children: [
+    d,
+    o,
+    l && typeof l == "string" ? /* @__PURE__ */ s(h, { className: "flex gap-2", children: [
+      /* @__PURE__ */ r(m, { className: "size-4 mt-0.5" }),
+      l
+    ] }) : null,
+    i ? /* @__PURE__ */ r(k, { className: "w-full", children: i }) : null
+  ] });
+};
+export {
+  j as Labelled
+};

package/dist/components/login-form.d.ts

@@ -0,0 +1,29 @@
+import type { TErrorAlert } from "@/types/common";
+interface ILoginFormProps extends React.ComponentProps<"div"> {
+    logo?: string;
+    title?: string;
+    description?: string;
+    onSubmit?: () => void;
+    email?: string;
+    password?: string;
+    onEmailChange?: (email: string) => void;
+    onPasswordChange?: (password: string) => void;
+    submitButtonText?: string;
+    createAccountButtonProps?: {
+        text?: string;
+        onClick?: () => void;
+    };
+    forgotPasswordButtonProps?: {
+        text?: string;
+        onClick?: () => void;
+    };
+    footerLinks?: {
+        text?: string;
+        href?: string;
+    }[];
+    error?: TErrorAlert;
+    isLoading?: boolean;
+}
+export declare function LoginForm({ className, logo, title, description, onSubmit, email, password, onEmailChange, onPasswordChange, submitButtonText, createAccountButtonProps, forgotPasswordButtonProps, footerLinks, error, isLoading, ...props }: ILoginFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=login-form.d.ts.map

package/dist/components/login-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"login-form.d.ts","sourceRoot":"","sources":["../../src/components/login-form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB,CAAC,EAAE;QACzB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,yBAAyB,CAAC,EAAE;QAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,wBAAwB,EACxB,yBAAyB,EACzB,WAAgB,EAChB,KAAK,EACL,SAAiB,EACjB,GAAG,KAAK,EACT,EAAE,eAAe,2CAqFjB"}

package/dist/components/login-form.js

@@ -0,0 +1,96 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { isEmailValid as P } from "../lib/utils.js";
+import { Button as S } from "./ui/button.js";
+import { FieldGroup as E, Field as N } from "./ui/field.js";
+import { TextField as m } from "./text-field.js";
+import { useState as j } from "react";
+import { EyeOffIcon as A, EyeIcon as I } from "lucide-react";
+import { Spinner as V } from "./ui/spinner.js";
+import { AuthCard as z, AuthCardFooter as D } from "./auth-card.js";
+function M({
+  className: n,
+  logo: p,
+  title: c,
+  description: f,
+  onSubmit: h,
+  email: o,
+  password: a,
+  onEmailChange: x,
+  onPasswordChange: u,
+  submitButtonText: b,
+  createAccountButtonProps: t,
+  forgotPasswordButtonProps: w,
+  footerLinks: s = [],
+  error: v,
+  isLoading: r = !1,
+  ...g
+}) {
+  const [i, C] = j(!1), F = () => C(!i), y = !o?.trim() || !a?.trim() || !P(o ?? "") || r;
+  return /* @__PURE__ */ e(
+    z,
+    {
+      className: n,
+      title: c,
+      description: f,
+      logo: p,
+      error: v,
+      renderForm: () => /* @__PURE__ */ d(E, { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            label: "Email",
+            disabled: r,
+            inputProps: {
+              placeholder: "email@example.com",
+              type: "email",
+              value: o,
+              onChange: (l) => x?.(l.target.value)
+            }
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            label: "Password",
+            disabled: r,
+            labelAction: w,
+            inputProps: {
+              placeholder: "Password",
+              type: i ? "text" : "password",
+              value: a,
+              onChange: (l) => u?.(l.target.value)
+            },
+            action: {
+              title: "Show and hide password",
+              onClick: F,
+              icon: i ? /* @__PURE__ */ e(A, {}) : /* @__PURE__ */ e(I, {})
+            }
+          }
+        ),
+        /* @__PURE__ */ e(N, { className: "flex flex-col", children: /* @__PURE__ */ d(S, { type: "submit", size: "lg", disabled: y, children: [
+          r ? /* @__PURE__ */ e(V, {}) : null,
+          b
+        ] }) })
+      ] }),
+      renderFooter: s.length > 0 ? () => /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e("div", { className: "flex gap-4 flex-wrap", children: s.map((l) => /* @__PURE__ */ e(
+        "a",
+        {
+          href: l.href,
+          className: "hover:underline",
+          children: l.text
+        },
+        l.text
+      )) }) }) : void 0,
+      extraAction: t ? {
+        text: t.text,
+        onClick: t.onClick,
+        disabled: r
+      } : void 0,
+      onSubmit: h,
+      ...g
+    }
+  );
+}
+export {
+  M as LoginForm
+};

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

@@ -0,0 +1,11 @@
+import { Labelled } from "./labelled";
+type OTPFieldProps = {
+    length?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    pattern?: string;
+} & React.ComponentProps<typeof Labelled>;
+export declare const OTPField: ({ length, value, onChange, disabled, pattern, ...props }: OTPFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=otp-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-field.d.ts","sourceRoot":"","sources":["../../src/components/otp-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE1C,eAAO,MAAM,QAAQ,GAAI,0DAOtB,aAAa,4CA4Bf,CAAC"}

package/dist/components/otp-field.js

@@ -0,0 +1,40 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as p } from "../lib/utils.js";
+import { InputOTPSlot as u, InputOTP as m, InputOTPGroup as b } from "./ui/input-otp.js";
+import { Labelled as f } from "./labelled.js";
+const O = ({
+  length: l = 6,
+  value: r,
+  onChange: d,
+  disabled: s,
+  pattern: e,
+  ...o
+}) => {
+  const i = Array.from({ length: l }, (a, n) => n).map((a) => /* @__PURE__ */ t(u, { index: a }, a));
+  return /* @__PURE__ */ t(f, { ...o, disabled: s, children: /* @__PURE__ */ t(
+    m,
+    {
+      id: o.id,
+      "aria-invalid": !!o.error,
+      maxLength: l,
+      value: r,
+      onChange: d,
+      disabled: s,
+      pattern: e,
+      className: "w-full",
+      containerClassName: "w-full [&:has(:disabled)_*[data-slot=input-otp-slot]]:bg-input-bg-disabled [&:has(:disabled)_*[data-slot=input-otp-slot]]:text-input-fg-disabled! [&:has(:disabled)_*[data-slot=input-otp-slot]]:border-input-border-disabled!",
+      children: /* @__PURE__ */ t(
+        b,
+        {
+          className: p(
+            "gap-2 w-full *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:flex-1 *:data-[slot=input-otp-slot]:rounded-lg *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:border-input-border *:data-[slot=input-otp-slot]:text-xl *:data-[slot=input-otp-slot]:font-semibold *:data-[active=true]:ring-primary *:data-[active=true]:ring-offset-2 *:data-[active=true]:border-input-border-focus"
+          ),
+          children: i
+        }
+      )
+    }
+  ) });
+};
+export {
+  O as OTPField
+};

package/dist/components/otp-form.d.ts

@@ -0,0 +1,22 @@
+import type { TErrorAlert } from "@/types/common";
+interface OTPFormProps extends React.ComponentProps<"div"> {
+    logo?: string;
+    title?: string;
+    description?: string;
+    onSubmit?: () => void;
+    submitButtonText?: string;
+    footerLinks?: {
+        text?: string;
+        href?: string;
+    }[];
+    error?: TErrorAlert;
+    isLoading?: boolean;
+    otpFieldLabel?: string;
+    verificationCode?: string;
+    onVerificationCodeChange?: (verificationCode: string) => void;
+    verificationCodeLength?: number;
+    verificationCodePattern?: string;
+}
+export declare function OTPForm({ logo, title, description, onSubmit, submitButtonText, footerLinks, error, isLoading, className, otpFieldLabel, verificationCode, onVerificationCodeChange, verificationCodeLength, verificationCodePattern, ...props }: OTPFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=otp-form.d.ts.map

package/dist/components/otp-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-form.d.ts","sourceRoot":"","sources":["../../src/components/otp-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKlD,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE;QACZ,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,wBAAwB,EACxB,sBAA0B,EAC1B,uBAAuB,EACvB,GAAG,KAAK,EACT,EAAE,YAAY,2CAoDd"}

package/dist/components/otp-form.js

@@ -0,0 +1,67 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { Button as v } from "./ui/button.js";
+import { FieldGroup as n } from "./ui/field.js";
+import { Spinner as N } from "./ui/spinner.js";
+import { AuthCard as j, AuthCardFooter as A } from "./auth-card.js";
+import { OTPField as B } from "./otp-field.js";
+function z({
+  logo: a,
+  title: i,
+  description: p,
+  onSubmit: h,
+  submitButtonText: u,
+  footerLinks: r,
+  error: c,
+  isLoading: l,
+  className: s,
+  otpFieldLabel: f,
+  verificationCode: m,
+  onVerificationCodeChange: x,
+  verificationCodeLength: o = 6,
+  verificationCodePattern: b,
+  ...F
+}) {
+  const g = l || m?.length !== o;
+  return /* @__PURE__ */ e(
+    j,
+    {
+      className: s,
+      title: i,
+      description: p,
+      logo: a,
+      error: c,
+      renderForm: () => /* @__PURE__ */ d(n, { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ e(
+          B,
+          {
+            label: f,
+            value: m,
+            onChange: x,
+            length: o,
+            pattern: b,
+            disabled: l,
+            id: "verification-code-input"
+          }
+        ),
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ d(v, { type: "submit", size: "lg", disabled: g, children: [
+          l ? /* @__PURE__ */ e(N, {}) : null,
+          u
+        ] }) })
+      ] }),
+      renderFooter: r && r.length > 0 ? () => /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { className: "flex gap-4 flex-wrap", children: r.map((t) => /* @__PURE__ */ e(
+        "a",
+        {
+          href: t.href,
+          className: "hover:underline",
+          children: t.text
+        },
+        t.text
+      )) }) }) : void 0,
+      onSubmit: h,
+      ...F
+    }
+  );
+}
+export {
+  z as OTPForm
+};