@forgedevstack/bear 1.0.0

package/dist/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,140 @@
+import { jsxs as x, jsx as b } from "react/jsx-runtime";
+import { useState as y, useRef as R, useEffect as S } from "react";
+import { cn as i } from "../../utils/cn.js";
+const q = ({
+  options: w,
+  value: k,
+  defaultValue: V = [],
+  onChange: l,
+  placeholder: j = "Select options...",
+  label: v,
+  helperText: N,
+  error: c,
+  disabled: t = !1,
+  maxSelections: d,
+  searchable: D = !0,
+  className: z,
+  testId: B
+}) => {
+  const [f, o] = y(!1), [u, m] = y(""), [I, L] = y(V), g = R(null), h = R(null), p = k !== void 0, a = p ? k : I;
+  S(() => {
+    const e = (r) => {
+      g.current && !g.current.contains(r.target) && (o(!1), m(""));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []);
+  const s = w.filter(
+    (e) => e.label.toLowerCase().includes(u.toLowerCase()) && !a.includes(e.value)
+  ), E = (e) => {
+    var n;
+    if (t || d && a.length >= d) return;
+    const r = [...a, e];
+    p || L(r), l == null || l(r), m(""), (n = h.current) == null || n.focus();
+  }, O = (e) => {
+    if (t) return;
+    const r = a.filter((n) => n !== e);
+    p || L(r), l == null || l(r);
+  }, K = (e) => {
+    e.key === "Backspace" && u === "" && a.length > 0 && O(a[a.length - 1]), e.key === "Escape" && (o(!1), m("")), e.key === "Enter" && s.length > 0 && (e.preventDefault(), E(s[0].value));
+  }, M = a.map(
+    (e) => {
+      var r;
+      return ((r = w.find((n) => n.value === e)) == null ? void 0 : r.label) || e;
+    }
+  );
+  return /* @__PURE__ */ x("div", { className: i("bear-w-full", z), ref: g, "data-testid": B, children: [
+    v && /* @__PURE__ */ b("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5", children: v }),
+    /* @__PURE__ */ x(
+      "div",
+      {
+        className: i(
+          "bear-relative bear-flex bear-flex-wrap bear-items-center bear-gap-1.5 bear-min-h-[42px] bear-px-3 bear-py-2",
+          "bear-rounded-lg bear-border bear-bg-white dark:bear-bg-gray-900",
+          "bear-transition-colors bear-cursor-text",
+          c ? "bear-border-red-500 focus-within:bear-ring-2 focus-within:bear-ring-red-500/20" : "bear-border-gray-300 dark:bear-border-gray-600 focus-within:bear-border-amber-500 focus-within:bear-ring-2 focus-within:bear-ring-amber-500/20",
+          t && "bear-opacity-50 bear-cursor-not-allowed bear-bg-gray-100 dark:bear-bg-gray-800"
+        ),
+        onClick: () => {
+          var e;
+          t || (o(!0), (e = h.current) == null || e.focus());
+        },
+        children: [
+          M.map((e, r) => /* @__PURE__ */ x(
+            "span",
+            {
+              className: "bear-inline-flex bear-items-center bear-gap-1 bear-px-2 bear-py-0.5 bear-text-sm bear-rounded-md bear-bg-amber-100 dark:bear-bg-amber-900/30 bear-text-amber-800 dark:bear-text-amber-200",
+              children: [
+                e,
+                !t && /* @__PURE__ */ b(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (n) => {
+                      n.stopPropagation(), O(a[r]);
+                    },
+                    className: "bear-ml-0.5 bear-text-amber-600 hover:bear-text-amber-800 dark:bear-text-amber-400 dark:hover:bear-text-amber-200",
+                    children: "×"
+                  }
+                )
+              ]
+            },
+            a[r]
+          )),
+          D && !t && /* @__PURE__ */ b(
+            "input",
+            {
+              ref: h,
+              type: "text",
+              value: u,
+              onChange: (e) => {
+                m(e.target.value), o(!0);
+              },
+              onFocus: () => o(!0),
+              onKeyDown: K,
+              placeholder: a.length === 0 ? j : "",
+              disabled: t || d !== void 0 && a.length >= d,
+              className: "bear-flex-1 bear-min-w-[80px] bear-bg-transparent bear-outline-none bear-text-sm bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400"
+            }
+          ),
+          /* @__PURE__ */ b(
+            "svg",
+            {
+              className: i(
+                "bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform bear-ml-auto",
+                f && "bear-rotate-180"
+              ),
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ b("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    f && !t && s.length > 0 && /* @__PURE__ */ b("div", { className: "bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-py-1 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-max-h-60 bear-overflow-auto", children: s.map((e) => /* @__PURE__ */ b(
+      "button",
+      {
+        type: "button",
+        disabled: e.disabled,
+        onClick: () => E(e.value),
+        className: i(
+          "bear-w-full bear-px-3 bear-py-2 bear-text-left bear-text-sm",
+          "hover:bear-bg-amber-50 dark:hover:bear-bg-amber-900/20",
+          "bear-text-gray-900 dark:bear-text-white",
+          e.disabled && "bear-opacity-50 bear-cursor-not-allowed"
+        ),
+        children: e.label
+      },
+      e.value
+    )) }),
+    f && !t && s.length === 0 && u && /* @__PURE__ */ b("div", { className: "bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500", children: "No options found" }),
+    (N || c) && /* @__PURE__ */ b("p", { className: i(
+      "bear-mt-1.5 bear-text-xs",
+      c ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+    ), children: c || N })
+  ] });
+};
+export {
+  q as MultiSelect
+};

package/dist/components/MultiSelect/MultiSelect.types.d.ts

@@ -0,0 +1,33 @@
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    /** Available options */
+    options: MultiSelectOption[];
+    /** Selected values */
+    value?: string[];
+    /** Default selected values (uncontrolled) */
+    defaultValue?: string[];
+    /** Called when selection changes */
+    onChange?: (values: string[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label text */
+    label?: string;
+    /** Helper text below the select */
+    helperText?: string;
+    /** Error message */
+    error?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Maximum number of selections */
+    maxSelections?: number;
+    /** Whether to show search input */
+    searchable?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { MultiSelect } from './MultiSelect';
+export type { MultiSelectProps, MultiSelectOption } from './MultiSelect.types';

package/dist/components/NumberInput/NumberInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),k=require("react"),x=require("../../utils/cn.cjs"),E=({value:b,onChange:o,min:s,max:n,step:p=1,disabled:i=!1,label:m,helperText:f,error:c,placeholder:w="0",size:v="md",variant:C="default",showButtons:u=!0,buttonPosition:d="sides",className:I,precision:M=0})=>{const[q,g]=k.useState(b??0),t=b!==void 0?b:q;k.useEffect(()=>{b!==void 0&&g(b)},[b]);const S=a=>{let e=a;return s!==void 0&&(e=Math.max(s,e)),n!==void 0&&(e=Math.min(n,e)),Number(e.toFixed(M))},l=a=>{const e=S(a);g(e),o==null||o(e)},h=()=>l(t+p),y=()=>l(t-p),F=a=>{const e=parseFloat(a.target.value);isNaN(e)?a.target.value===""&&l(0):l(e)},j={sm:{input:"bear-py-1.5 bear-text-sm",button:"bear-w-7 bear-h-7 bear-text-sm"},md:{input:"bear-py-2",button:"bear-w-9 bear-h-9"},lg:{input:"bear-py-2.5 bear-text-lg",button:"bear-w-11 bear-h-11 bear-text-lg"}},R={default:"bear-bg-zinc-800 bear-border-zinc-600",filled:"bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-500"},z=({onClick:a,children:e,disabled:N})=>r.jsx("button",{type:"button",onClick:a,disabled:i||N,className:x.cn("bear-flex bear-items-center bear-justify-center bear-rounded bear-bg-zinc-700 bear-text-zinc-300 hover:bear-bg-zinc-600 bear-transition-colors",j[v].button,(i||N)&&"bear-opacity-50 bear-cursor-not-allowed"),children:e});return r.jsxs("div",{className:I,children:[m&&r.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5",children:m}),r.jsxs("div",{className:x.cn("bear-flex bear-items-center bear-gap-2",d==="right"&&"bear-flex-row-reverse"),children:[u&&d==="sides"&&r.jsx(z,{onClick:y,disabled:s!==void 0&&t<=s,children:"−"}),r.jsx("input",{type:"text",inputMode:"decimal",value:t,onChange:F,placeholder:w,disabled:i,className:x.cn("bear-flex-1 bear-px-4 bear-rounded-lg bear-border bear-text-center bear-text-white bear-outline-none bear-transition-colors focus:bear-border-pink-500",j[v].input,R[C],c&&"bear-border-red-500",i&&"bear-opacity-50 bear-cursor-not-allowed")}),u&&d==="sides"&&r.jsx(z,{onClick:h,disabled:n!==void 0&&t>=n,children:"+"}),u&&d==="right"&&r.jsxs("div",{className:"bear-flex bear-flex-col bear-gap-0.5",children:[r.jsx("button",{type:"button",onClick:h,disabled:i||n!==void 0&&t>=n,className:"bear-px-2 bear-py-0.5 bear-bg-zinc-700 bear-text-zinc-300 hover:bear-bg-zinc-600 bear-rounded-t bear-text-xs disabled:bear-opacity-50",children:"▲"}),r.jsx("button",{type:"button",onClick:y,disabled:i||s!==void 0&&t<=s,className:"bear-px-2 bear-py-0.5 bear-bg-zinc-700 bear-text-zinc-300 hover:bear-bg-zinc-600 bear-rounded-b bear-text-xs disabled:bear-opacity-50",children:"▼"})]})]}),c&&r.jsx("p",{className:"bear-mt-1 bear-text-xs bear-text-red-400",children:c}),f&&!c&&r.jsx("p",{className:"bear-mt-1 bear-text-xs bear-text-zinc-500",children:f})]})};exports.NumberInput=E;

package/dist/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { NumberInputProps } from './NumberInput.types';
+export declare const NumberInput: FC<NumberInputProps>;

package/dist/components/NumberInput/NumberInput.js

@@ -0,0 +1,109 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { useState as A, useEffect as G } from "react";
+import { cn as x } from "../../utils/cn.js";
+const L = ({
+  value: b,
+  onChange: l,
+  min: i,
+  max: n,
+  step: m = 1,
+  disabled: s = !1,
+  label: f,
+  helperText: v,
+  error: c,
+  placeholder: C = "0",
+  size: g = "md",
+  variant: j = "default",
+  showButtons: p = !0,
+  buttonPosition: d = "sides",
+  className: I,
+  precision: M = 0
+}) => {
+  const [F, h] = A(b ?? 0), t = b !== void 0 ? b : F;
+  G(() => {
+    b !== void 0 && h(b);
+  }, [b]);
+  const E = (a) => {
+    let e = a;
+    return i !== void 0 && (e = Math.max(i, e)), n !== void 0 && (e = Math.min(n, e)), Number(e.toFixed(M));
+  }, o = (a) => {
+    const e = E(a);
+    h(e), l == null || l(e);
+  }, z = () => o(t + m), y = () => o(t - m), S = (a) => {
+    const e = parseFloat(a.target.value);
+    isNaN(e) ? a.target.value === "" && o(0) : o(e);
+  }, N = {
+    sm: { input: "bear-py-1.5 bear-text-sm", button: "bear-w-7 bear-h-7 bear-text-sm" },
+    md: { input: "bear-py-2", button: "bear-w-9 bear-h-9" },
+    lg: { input: "bear-py-2.5 bear-text-lg", button: "bear-w-11 bear-h-11 bear-text-lg" }
+  }, q = {
+    default: "bear-bg-zinc-800 bear-border-zinc-600",
+    filled: "bear-bg-zinc-700 bear-border-transparent",
+    outline: "bear-bg-transparent bear-border-zinc-500"
+  }, k = ({ onClick: a, children: e, disabled: w }) => /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      onClick: a,
+      disabled: s || w,
+      className: x(
+        "bear-flex bear-items-center bear-justify-center bear-rounded bear-bg-zinc-700 bear-text-zinc-300 hover:bear-bg-zinc-600 bear-transition-colors",
+        N[g].button,
+        (s || w) && "bear-opacity-50 bear-cursor-not-allowed"
+      ),
+      children: e
+    }
+  );
+  return /* @__PURE__ */ u("div", { className: I, children: [
+    f && /* @__PURE__ */ r("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5", children: f }),
+    /* @__PURE__ */ u("div", { className: x("bear-flex bear-items-center bear-gap-2", d === "right" && "bear-flex-row-reverse"), children: [
+      p && d === "sides" && /* @__PURE__ */ r(k, { onClick: y, disabled: i !== void 0 && t <= i, children: "−" }),
+      /* @__PURE__ */ r(
+        "input",
+        {
+          type: "text",
+          inputMode: "decimal",
+          value: t,
+          onChange: S,
+          placeholder: C,
+          disabled: s,
+          className: x(
+            "bear-flex-1 bear-px-4 bear-rounded-lg bear-border bear-text-center bear-text-white bear-outline-none bear-transition-colors focus:bear-border-pink-500",
+            N[g].input,
+            q[j],
+            c && "bear-border-red-500",
+            s && "bear-opacity-50 bear-cursor-not-allowed"
+          )
+        }
+      ),
+      p && d === "sides" && /* @__PURE__ */ r(k, { onClick: z, disabled: n !== void 0 && t >= n, children: "+" }),
+      p && d === "right" && /* @__PURE__ */ u("div", { className: "bear-flex bear-flex-col bear-gap-0.5", children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: z,
+            disabled: s || n !== void 0 && t >= n,
+            className: "bear-px-2 bear-py-0.5 bear-bg-zinc-700 bear-text-zinc-300 hover:bear-bg-zinc-600 bear-rounded-t bear-text-xs disabled:bear-opacity-50",
+            children: "▲"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: y,
+            disabled: s || i !== void 0 && t <= i,
+            className: "bear-px-2 bear-py-0.5 bear-bg-zinc-700 bear-text-zinc-300 hover:bear-bg-zinc-600 bear-rounded-b bear-text-xs disabled:bear-opacity-50",
+            children: "▼"
+          }
+        )
+      ] })
+    ] }),
+    c && /* @__PURE__ */ r("p", { className: "bear-mt-1 bear-text-xs bear-text-red-400", children: c }),
+    v && !c && /* @__PURE__ */ r("p", { className: "bear-mt-1 bear-text-xs bear-text-zinc-500", children: v })
+  ] });
+};
+export {
+  L as NumberInput
+};

package/dist/components/NumberInput/NumberInput.types.d.ts

@@ -0,0 +1,18 @@
+export interface NumberInputProps {
+    value?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label?: string;
+    helperText?: string;
+    error?: string;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'filled' | 'outline';
+    showButtons?: boolean;
+    buttonPosition?: 'sides' | 'right';
+    className?: string;
+    precision?: number;
+}

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

@@ -0,0 +1,2 @@
+export { NumberInput } from './NumberInput';
+export type { NumberInputProps } from './NumberInput.types';

package/dist/components/OTPInput/OTPInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),i=require("react"),j=require("../../utils/cn.cjs"),z=({length:t=6,value:f,onChange:l,onComplete:o,disabled:m=!1,error:k=!1,autoFocus:w=!0,mask:D=!1,size:x="md",separator:v,className:A})=>{const[u,d]=i.useState(Array(t).fill("")),s=i.useRef([]);i.useEffect(()=>{f!==void 0&&d(f.split("").concat(Array(t-f.length).fill("")).slice(0,t))},[f,t]),i.useEffect(()=>{w&&s.current[0]&&s.current[0].focus()},[w]);const p=i.useCallback(e=>{d(e);const r=e.join("");l==null||l(r),r.length===t&&e.every(a=>a!=="")&&(o==null||o(r))},[l,o,t]),P=(e,r)=>{var b;const a=r.target.value.slice(-1);if(!/^\d*$/.test(a)&&a!=="")return;const c=[...u];c[e]=a,p(c),a&&e<t-1&&((b=s.current[e+1])==null||b.focus())},R=(e,r)=>{var a,c,b;if(r.key==="Backspace")if(u[e]===""&&e>0){(a=s.current[e-1])==null||a.focus();const n=[...u];n[e-1]="",p(n)}else{const n=[...u];n[e]="",p(n)}else r.key==="ArrowLeft"&&e>0?(c=s.current[e-1])==null||c.focus():r.key==="ArrowRight"&&e<t-1&&((b=s.current[e+1])==null||b.focus())},g=e=>{var c;e.preventDefault();const r=e.clipboardData.getData("text").replace(/\D/g,"").slice(0,t),a=r.split("").concat(Array(t-r.length).fill(""));p(a),(c=s.current[Math.min(r.length,t-1)])==null||c.focus()},h={sm:"bear-w-8 bear-h-10 bear-text-lg",md:"bear-w-10 bear-h-12 bear-text-xl",lg:"bear-w-12 bear-h-14 bear-text-2xl"};return y.jsx("div",{className:j.cn("bear-flex bear-items-center bear-gap-2",A),children:u.map((e,r)=>y.jsxs("div",{className:"bear-flex bear-items-center",children:[y.jsx("input",{ref:a=>{s.current[r]=a},type:D?"password":"text",inputMode:"numeric",maxLength:1,value:e,onChange:a=>P(r,a),onKeyDown:a=>R(r,a),onPaste:g,disabled:m,className:j.cn("bear-text-center bear-font-semibold bear-rounded-lg bear-border bear-bg-zinc-800 bear-text-white bear-outline-none bear-transition-all",h[x],k?"bear-border-red-500":"bear-border-zinc-600 focus:bear-border-pink-500 focus:bear-ring-2 focus:bear-ring-pink-500/30",m&&"bear-opacity-50 bear-cursor-not-allowed")}),v&&(r+1)%v===0&&r<t-1&&y.jsx("span",{className:"bear-mx-2 bear-text-zinc-500 bear-text-xl",children:"-"})]},r))})};exports.OTPInput=z;

package/dist/components/OTPInput/OTPInput.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { OTPInputProps } from './OTPInput.types';
+export declare const OTPInput: FC<OTPInputProps>;

package/dist/components/OTPInput/OTPInput.js

@@ -0,0 +1,83 @@
+import { jsx as p, jsxs as R } from "react/jsx-runtime";
+import { useState as g, useRef as K, useEffect as d, useCallback as L } from "react";
+import { cn as k } from "../../utils/cn.js";
+const I = ({
+  length: t = 6,
+  value: o,
+  onChange: i,
+  onComplete: l,
+  disabled: m = !1,
+  error: D = !1,
+  autoFocus: w = !0,
+  mask: A = !1,
+  size: h = "md",
+  separator: y,
+  className: j
+}) => {
+  const [b, v] = g(Array(t).fill("")), s = K([]);
+  d(() => {
+    o !== void 0 && v(o.split("").concat(Array(t - o.length).fill("")).slice(0, t));
+  }, [o, t]), d(() => {
+    w && s.current[0] && s.current[0].focus();
+  }, [w]);
+  const n = L((e) => {
+    v(e);
+    const r = e.join("");
+    i == null || i(r), r.length === t && e.every((a) => a !== "") && (l == null || l(r));
+  }, [i, l, t]), x = (e, r) => {
+    var f;
+    const a = r.target.value.slice(-1);
+    if (!/^\d*$/.test(a) && a !== "") return;
+    const c = [...b];
+    c[e] = a, n(c), a && e < t - 1 && ((f = s.current[e + 1]) == null || f.focus());
+  }, z = (e, r) => {
+    var a, c, f;
+    if (r.key === "Backspace")
+      if (b[e] === "" && e > 0) {
+        (a = s.current[e - 1]) == null || a.focus();
+        const u = [...b];
+        u[e - 1] = "", n(u);
+      } else {
+        const u = [...b];
+        u[e] = "", n(u);
+      }
+    else r.key === "ArrowLeft" && e > 0 ? (c = s.current[e - 1]) == null || c.focus() : r.key === "ArrowRight" && e < t - 1 && ((f = s.current[e + 1]) == null || f.focus());
+  }, N = (e) => {
+    var c;
+    e.preventDefault();
+    const r = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, t), a = r.split("").concat(Array(t - r.length).fill(""));
+    n(a), (c = s.current[Math.min(r.length, t - 1)]) == null || c.focus();
+  }, P = {
+    sm: "bear-w-8 bear-h-10 bear-text-lg",
+    md: "bear-w-10 bear-h-12 bear-text-xl",
+    lg: "bear-w-12 bear-h-14 bear-text-2xl"
+  };
+  return /* @__PURE__ */ p("div", { className: k("bear-flex bear-items-center bear-gap-2", j), children: b.map((e, r) => /* @__PURE__ */ R("div", { className: "bear-flex bear-items-center", children: [
+    /* @__PURE__ */ p(
+      "input",
+      {
+        ref: (a) => {
+          s.current[r] = a;
+        },
+        type: A ? "password" : "text",
+        inputMode: "numeric",
+        maxLength: 1,
+        value: e,
+        onChange: (a) => x(r, a),
+        onKeyDown: (a) => z(r, a),
+        onPaste: N,
+        disabled: m,
+        className: k(
+          "bear-text-center bear-font-semibold bear-rounded-lg bear-border bear-bg-zinc-800 bear-text-white bear-outline-none bear-transition-all",
+          P[h],
+          D ? "bear-border-red-500" : "bear-border-zinc-600 focus:bear-border-pink-500 focus:bear-ring-2 focus:bear-ring-pink-500/30",
+          m && "bear-opacity-50 bear-cursor-not-allowed"
+        )
+      }
+    ),
+    y && (r + 1) % y === 0 && r < t - 1 && /* @__PURE__ */ p("span", { className: "bear-mx-2 bear-text-zinc-500 bear-text-xl", children: "-" })
+  ] }, r)) });
+};
+export {
+  I as OTPInput
+};

package/dist/components/OTPInput/OTPInput.types.d.ts

@@ -0,0 +1,13 @@
+export interface OTPInputProps {
+    length?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    error?: boolean;
+    autoFocus?: boolean;
+    mask?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    separator?: number;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { OTPInput } from './OTPInput';
+export type { OTPInputProps } from './OTPInput.types';

package/dist/components/Pagination/Pagination.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),v=require("react"),b=require("../../utils/cn.cjs"),I=()=>r.jsx("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:r.jsx("polyline",{points:"15 18 9 12 15 6"})}),B=()=>r.jsx("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:r.jsx("polyline",{points:"9 18 15 12 9 6"})}),E=()=>r.jsxs("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[r.jsx("polyline",{points:"11 18 5 12 11 6"}),r.jsx("line",{x1:"19",y1:"6",x2:"19",y2:"18"})]}),L=()=>r.jsxs("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[r.jsx("polyline",{points:"13 18 19 12 13 6"}),r.jsx("line",{x1:"5",y1:"6",x2:"5",y2:"18"})]}),R={xs:"bear-h-6 bear-min-w-6 bear-text-xs",sm:"bear-h-8 bear-min-w-8 bear-text-sm",md:"bear-h-10 bear-min-w-10 bear-text-base",lg:"bear-h-12 bear-min-w-12 bear-text-lg",xl:"bear-h-14 bear-min-w-14 bear-text-xl"},W={text:(e,a)=>b.cn("bear-bg-transparent",a&&e==="primary"&&"bear-text-bear-600 bear-bg-bear-50 dark:bear-bg-bear-900/20",a&&e==="secondary"&&"bear-text-gray-600 bear-bg-gray-100 dark:bear-bg-gray-800",!a&&"hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800"),outlined:(e,a)=>b.cn("bear-border",a&&e==="primary"&&"bear-border-bear-500 bear-text-bear-600 bear-bg-bear-50 dark:bear-bg-bear-900/20",a&&e==="secondary"&&"bear-border-gray-400 bear-text-gray-600 bear-bg-gray-100",!a&&"bear-border-gray-300 dark:bear-border-gray-600 hover:bear-bg-gray-50 dark:hover:bear-bg-gray-800"),contained:(e,a)=>b.cn(a&&e==="primary"&&"bear-bg-bear-500 bear-text-white",a&&e==="secondary"&&"bear-bg-gray-600 bear-text-white",!a&&"bear-bg-gray-100 dark:bear-bg-gray-800 hover:bear-bg-gray-200 dark:hover:bear-bg-gray-700")},q=(e,a,t,c)=>v.useMemo(()=>{const o=(l,s)=>Array.from({length:s-l+1},(m,j)=>l+j),k=o(1,Math.min(t,e)),h=o(Math.max(e-t+1,t+1),e),d=Math.max(Math.min(a-c,e-t-c*2-1),t+2),y=Math.min(Math.max(a+c,t+c*2+2),h.length>0?h[0]-2:e-1),i=[];return i.push(...k),d>t+2?i.push("ellipsis"):t+1<e-t&&i.push(t+1),i.push(...o(d,y)),y<e-t-1?i.push("ellipsis"):e-t>t&&i.push(e-t),i.push(...h),[...new Set(i)].sort((l,s)=>l==="ellipsis"||s==="ellipsis"?0:l-s)},[e,a,t,c]),_=({count:e,page:a,defaultPage:t=1,boundaryCount:c=1,siblingCount:o=1,size:k="md",variant:h="text",color:d="primary",shape:y="circular",showFirstLast:i=!1,showPrevNext:l=!0,disabled:s=!1,onChange:m,className:j,testId:w,...S})=>{const[u,P]=v.useState(t),g=a??u,M=q(e,g,c,o),p=n=>{n<1||n>e||s||(P(n),m==null||m(n))},x=b.cn("bear-inline-flex bear-items-center bear-justify-center bear-transition-colors","bear-cursor-pointer bear-select-none",y==="circular"?"bear-rounded-full":"bear-rounded-lg",R[k],s&&"bear-opacity-50 bear-cursor-not-allowed");return r.jsxs("nav",{"aria-label":"Pagination",className:b.cn("bear-flex bear-items-center bear-gap-1",j),"data-testid":w,...S,children:[i&&r.jsx("button",{type:"button",onClick:()=>p(1),disabled:g===1||s,className:b.cn(x,"bear-text-gray-600 dark:bear-text-gray-400"),"aria-label":"First page",children:r.jsx(E,{})}),l&&r.jsx("button",{type:"button",onClick:()=>p(g-1),disabled:g===1||s,className:b.cn(x,"bear-text-gray-600 dark:bear-text-gray-400"),"aria-label":"Previous page",children:r.jsx(I,{})}),M.map((n,N)=>{if(n==="ellipsis")return r.jsx("span",{className:b.cn(x,"bear-cursor-default bear-text-gray-400"),children:"..."},`ellipsis-${N}`);const f=n===g;return r.jsx("button",{type:"button",onClick:()=>p(n),disabled:s,className:b.cn(x,W[h](d,f),"bear-text-gray-700 dark:bear-text-gray-300"),"aria-current":f?"page":void 0,children:n},n)}),l&&r.jsx("button",{type:"button",onClick:()=>p(g+1),disabled:g===e||s,className:b.cn(x,"bear-text-gray-600 dark:bear-text-gray-400"),"aria-label":"Next page",children:r.jsx(B,{})}),i&&r.jsx("button",{type:"button",onClick:()=>p(e),disabled:g===e||s,className:b.cn(x,"bear-text-gray-600 dark:bear-text-gray-400"),"aria-label":"Last page",children:r.jsx(L,{})})]})};exports.Pagination=_;

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { PaginationProps } from './Pagination.types';
+/**
+ * Pagination component for navigating through pages
+ *
+ * @example
+ * ```tsx
+ * <Pagination count={10} page={1} onChange={(page) => console.log(page)} />
+ * <Pagination count={20} variant="outlined" showFirstLast />
+ * ```
+ */
+export declare const Pagination: FC<PaginationProps>;
+export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,156 @@
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import { useState as E, useMemo as L } from "react";
+import { cn as i } from "../../utils/cn.js";
+const W = () => /* @__PURE__ */ r("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ r("polyline", { points: "15 18 9 12 15 6" }) }), j = () => /* @__PURE__ */ r("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ r("polyline", { points: "9 18 15 12 9 6" }) }), u = () => /* @__PURE__ */ v("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  /* @__PURE__ */ r("polyline", { points: "11 18 5 12 11 6" }),
+  /* @__PURE__ */ r("line", { x1: "19", y1: "6", x2: "19", y2: "18" })
+] }), _ = () => /* @__PURE__ */ v("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  /* @__PURE__ */ r("polyline", { points: "13 18 19 12 13 6" }),
+  /* @__PURE__ */ r("line", { x1: "5", y1: "6", x2: "5", y2: "18" })
+] }), R = {
+  xs: "bear-h-6 bear-min-w-6 bear-text-xs",
+  sm: "bear-h-8 bear-min-w-8 bear-text-sm",
+  md: "bear-h-10 bear-min-w-10 bear-text-base",
+  lg: "bear-h-12 bear-min-w-12 bear-text-lg",
+  xl: "bear-h-14 bear-min-w-14 bear-text-xl"
+}, F = {
+  text: (e, a) => i(
+    "bear-bg-transparent",
+    a && e === "primary" && "bear-text-bear-600 bear-bg-bear-50 dark:bear-bg-bear-900/20",
+    a && e === "secondary" && "bear-text-gray-600 bear-bg-gray-100 dark:bear-bg-gray-800",
+    !a && "hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800"
+  ),
+  outlined: (e, a) => i(
+    "bear-border",
+    a && e === "primary" && "bear-border-bear-500 bear-text-bear-600 bear-bg-bear-50 dark:bear-bg-bear-900/20",
+    a && e === "secondary" && "bear-border-gray-400 bear-text-gray-600 bear-bg-gray-100",
+    !a && "bear-border-gray-300 dark:bear-border-gray-600 hover:bear-bg-gray-50 dark:hover:bear-bg-gray-800"
+  ),
+  contained: (e, a) => i(
+    a && e === "primary" && "bear-bg-bear-500 bear-text-white",
+    a && e === "secondary" && "bear-bg-gray-600 bear-text-white",
+    !a && "bear-bg-gray-100 dark:bear-bg-gray-800 hover:bear-bg-gray-200 dark:hover:bear-bg-gray-700"
+  )
+}, T = (e, a, t, o) => L(() => {
+  const c = (n, s) => Array.from({ length: s - n + 1 }, (m, f) => n + f), k = c(1, Math.min(t, e)), p = c(Math.max(e - t + 1, t + 1), e), d = Math.max(
+    Math.min(a - o, e - t - o * 2 - 1),
+    t + 2
+  ), y = Math.min(
+    Math.max(a + o, t + o * 2 + 2),
+    p.length > 0 ? p[0] - 2 : e - 1
+  ), b = [];
+  return b.push(...k), d > t + 2 ? b.push("ellipsis") : t + 1 < e - t && b.push(t + 1), b.push(...c(d, y)), y < e - t - 1 ? b.push("ellipsis") : e - t > t && b.push(e - t), b.push(...p), [...new Set(b)].sort((n, s) => n === "ellipsis" || s === "ellipsis" ? 0 : n - s);
+}, [e, a, t, o]), q = ({
+  count: e,
+  page: a,
+  defaultPage: t = 1,
+  boundaryCount: o = 1,
+  siblingCount: c = 1,
+  size: k = "md",
+  variant: p = "text",
+  color: d = "primary",
+  shape: y = "circular",
+  showFirstLast: b = !1,
+  showPrevNext: n = !0,
+  disabled: s = !1,
+  onChange: m,
+  className: f,
+  testId: S,
+  ...N
+}) => {
+  const [I, M] = E(t), g = a ?? I, P = T(e, g, o, c), x = (l) => {
+    l < 1 || l > e || s || (M(l), m == null || m(l));
+  }, h = i(
+    "bear-inline-flex bear-items-center bear-justify-center bear-transition-colors",
+    "bear-cursor-pointer bear-select-none",
+    y === "circular" ? "bear-rounded-full" : "bear-rounded-lg",
+    R[k],
+    s && "bear-opacity-50 bear-cursor-not-allowed"
+  );
+  return /* @__PURE__ */ v(
+    "nav",
+    {
+      "aria-label": "Pagination",
+      className: i("bear-flex bear-items-center bear-gap-1", f),
+      "data-testid": S,
+      ...N,
+      children: [
+        b && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => x(1),
+            disabled: g === 1 || s,
+            className: i(h, "bear-text-gray-600 dark:bear-text-gray-400"),
+            "aria-label": "First page",
+            children: /* @__PURE__ */ r(u, {})
+          }
+        ),
+        n && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => x(g - 1),
+            disabled: g === 1 || s,
+            className: i(h, "bear-text-gray-600 dark:bear-text-gray-400"),
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ r(W, {})
+          }
+        ),
+        P.map((l, B) => {
+          if (l === "ellipsis")
+            return /* @__PURE__ */ r(
+              "span",
+              {
+                className: i(h, "bear-cursor-default bear-text-gray-400"),
+                children: "..."
+              },
+              `ellipsis-${B}`
+            );
+          const w = l === g;
+          return /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: () => x(l),
+              disabled: s,
+              className: i(
+                h,
+                F[p](d, w),
+                "bear-text-gray-700 dark:bear-text-gray-300"
+              ),
+              "aria-current": w ? "page" : void 0,
+              children: l
+            },
+            l
+          );
+        }),
+        n && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => x(g + 1),
+            disabled: g === e || s,
+            className: i(h, "bear-text-gray-600 dark:bear-text-gray-400"),
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ r(j, {})
+          }
+        ),
+        b && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => x(e),
+            disabled: g === e || s,
+            className: i(h, "bear-text-gray-600 dark:bear-text-gray-400"),
+            "aria-label": "Last page",
+            children: /* @__PURE__ */ r(_, {})
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  q as Pagination
+};

package/dist/components/Pagination/Pagination.types.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes } from 'react';
+import { BearSize, BearVariant } from '../../types';
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Total number of pages */
+    count: number;
+    /** Current page (1-indexed) */
+    page?: number;
+    /** Default page for uncontrolled mode */
+    defaultPage?: number;
+    /** Number of pages to show at the boundaries */
+    boundaryCount?: number;
+    /** Number of pages to show around current page */
+    siblingCount?: number;
+    /** Size of pagination buttons */
+    size?: BearSize;
+    /** Variant style */
+    variant?: 'text' | 'outlined' | 'contained';
+    /** Color theme */
+    color?: BearVariant;
+    /** Shape of buttons */
+    shape?: 'circular' | 'rounded';
+    /** Show first/last buttons */
+    showFirstLast?: boolean;
+    /** Show previous/next buttons */
+    showPrevNext?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Callback when page changes */
+    onChange?: (page: number) => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination.types';