@forgedevstack/bear 1.1.1 → 1.1.3

package/dist/components/FormField/FormField.const.js

@@ -0,0 +1,23 @@
+const e = {
+  sm: {
+    field: "bear-h-10 bear-text-sm bear-px-3 bear-pt-4 bear-pb-1",
+    label: "bear-text-xs",
+    labelFloat: "bear-top-1 bear-text-[10px]",
+    labelRest: "bear-top-1/2 bear-text-sm"
+  },
+  md: {
+    field: "bear-h-14 bear-text-base bear-px-4 bear-pt-5 bear-pb-2",
+    label: "bear-text-sm",
+    labelFloat: "bear-top-1.5 bear-text-xs",
+    labelRest: "bear-top-1/2 bear-text-base"
+  },
+  lg: {
+    field: "bear-h-16 bear-text-lg bear-px-5 bear-pt-6 bear-pb-2",
+    label: "bear-text-base",
+    labelFloat: "bear-top-2 bear-text-xs",
+    labelRest: "bear-top-1/2 bear-text-lg"
+  }
+};
+export {
+  e as FORMFIELD_SIZE_CLASSES
+};

package/dist/components/FormField/FormField.d.ts

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

package/dist/components/FormField/FormField.js

@@ -0,0 +1,127 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as W, useContext as X, useState as Y, useId as $, useCallback as I } from "react";
+import { cn as e } from "../../utils/cn.js";
+import { FORMFIELD_SIZE_CLASSES as V } from "./FormField.const.js";
+import { BearContext as S } from "../../context/BearProvider.js";
+const A = W(
+  ({
+    label: z,
+    helperText: R,
+    error: h,
+    success: p,
+    size: j = "md",
+    leftAddon: d,
+    rightAddon: n,
+    fullWidth: L = !1,
+    required: M = !1,
+    variant: _ = "outlined",
+    className: D,
+    disabled: g,
+    value: c,
+    defaultValue: x,
+    placeholder: O,
+    onFocus: l,
+    onBlur: o,
+    ...k
+  }, Z) => {
+    var E;
+    const f = _ === "filled", s = _ === "standard", F = X(S), r = (E = F == null ? void 0 : F.components) == null ? void 0 : E.FormField, q = r == null ? void 0 : r.root, G = r == null ? void 0 : r.input, H = r == null ? void 0 : r.label, J = r == null ? void 0 : r.helper, B = r == null ? void 0 : r.addon, K = f ? r == null ? void 0 : r.filled : s ? r == null ? void 0 : r.standard : r == null ? void 0 : r.outlined, [i, N] = Y(!1), P = $(), w = k.id ?? P, Q = c != null && c !== "" || x != null && x !== "", v = i || Q, a = !!h, b = !!p && !a, u = V[j], C = h || p || R, T = I(
+      (y) => {
+        N(!0), l == null || l(y);
+      },
+      [l]
+    ), U = I(
+      (y) => {
+        N(!1), o == null || o(y);
+      },
+      [o]
+    );
+    return /* @__PURE__ */ m("div", { className: e("Bear-FormField bear-flex bear-flex-col bear-gap-1", L && "bear-w-full"), style: q, children: [
+      /* @__PURE__ */ m("div", { className: "Bear-FormField__wrapper bear-relative bear-flex bear-items-center", children: [
+        d && /* @__PURE__ */ t("div", { className: "Bear-FormField__addon Bear-FormField__addon--left bear-absolute bear-left-3 bear-z-10 bear-text-gray-500 dark:bear-text-gray-400", style: B, children: d }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            ref: Z,
+            id: w,
+            disabled: g,
+            value: c,
+            defaultValue: x,
+            placeholder: v ? O : void 0,
+            "aria-invalid": a || void 0,
+            onFocus: T,
+            onBlur: U,
+            className: e(
+              "Bear-FormField__input bear-peer bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200",
+              f ? e(
+                "bear-bg-gray-100 bear-border-transparent bear-rounded-t-lg bear-rounded-b-none bear-border-b-2",
+                "dark:bear-bg-gray-800",
+                a ? "bear-border-b-red-500" : b ? "bear-border-b-green-500" : i ? "bear-border-b-bear-500" : "bear-border-b-gray-400 dark:bear-border-b-gray-500"
+              ) : s ? e(
+                "bear-bg-transparent bear-rounded-none bear-border-0 bear-border-b-2",
+                a ? "bear-border-b-red-500" : b ? "bear-border-b-green-500" : i ? "bear-border-b-bear-500" : "bear-border-b-gray-300 dark:bear-border-b-gray-600"
+              ) : e(
+                "bear-bg-white dark:bear-bg-gray-900",
+                a ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/30" : b ? "bear-border-green-500 focus:bear-ring-2 focus:bear-ring-green-500/30" : e(
+                  "bear-border-gray-300 dark:bear-border-gray-600",
+                  "focus:bear-border-bear-500 focus:bear-ring-2 focus:bear-ring-bear-500/30",
+                  "dark:focus:bear-border-bear-400"
+                )
+              ),
+              "bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-gray-500",
+              g && "bear-opacity-50 bear-cursor-not-allowed",
+              d && "bear-pl-10",
+              n && "bear-pr-10",
+              u.field,
+              s && "focus:bear-ring-0",
+              D
+            ),
+            style: { ...K, ...G },
+            ...k
+          }
+        ),
+        /* @__PURE__ */ m(
+          "label",
+          {
+            htmlFor: w,
+            className: e(
+              "Bear-FormField__label bear-absolute bear-left-0 bear-pointer-events-none bear-origin-top-left",
+              "bear-transition-all bear-duration-200 bear-select-none",
+              d ? "bear-ml-10" : "bear-ml-4",
+              v ? e(
+                f ? u.labelFloat : s ? "bear-top-0 bear--translate-y-1/2 bear-text-xs" : "bear-top-0 bear--translate-y-1/2 bear-text-xs bear-px-1 bear-bg-white dark:bear-bg-gray-900",
+                a ? "bear-text-red-500" : b ? "bear-text-green-500" : i ? "bear-text-bear-500 dark:bear-text-bear-400" : "bear-text-gray-500 dark:bear-text-gray-400"
+              ) : e(
+                u.labelRest,
+                "bear--translate-y-1/2",
+                "bear-text-gray-500 dark:bear-text-gray-400"
+              ),
+              g && "bear-opacity-50"
+            ),
+            style: H,
+            children: [
+              z,
+              M && /* @__PURE__ */ t("span", { className: "bear-text-red-500 bear-ml-0.5", children: "*" })
+            ]
+          }
+        ),
+        n && /* @__PURE__ */ t("div", { className: "Bear-FormField__addon Bear-FormField__addon--right bear-absolute bear-right-3 bear-z-10 bear-text-gray-500 dark:bear-text-gray-400", style: B, children: n })
+      ] }),
+      C && /* @__PURE__ */ t(
+        "p",
+        {
+          className: e(
+            "Bear-FormField__helper bear-text-xs bear-ml-4",
+            a ? "bear-text-red-500" : b ? "bear-text-green-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+          ),
+          style: J,
+          children: C
+        }
+      )
+    ] });
+  }
+);
+A.displayName = "FormField";
+export {
+  A as FormField
+};

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

@@ -0,0 +1,23 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export interface FormFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Floating label text */
+    label: string;
+    /** Helper text below the field */
+    helperText?: string;
+    /** Error message (replaces helperText, turns border red) */
+    error?: string;
+    /** Success message (turns border green) */
+    success?: string;
+    /** Field size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Left addon inside the field */
+    leftAddon?: ReactNode;
+    /** Right addon inside the field */
+    rightAddon?: ReactNode;
+    /** Full width mode */
+    fullWidth?: boolean;
+    /** Whether the field is required (shows asterisk in label) */
+    required?: boolean;
+    /** Variant of the floating label */
+    variant?: 'outlined' | 'filled' | 'standard';
+}

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

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

package/dist/components/Input/Input.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),b=require("../../utils/cn.cjs"),f={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},d=g.forwardRef(({label:s,helperText:n,error:r,size:u="md",leftAddon:a,rightAddon:t,fullWidth:c=!1,className:i,disabled:l,...p},x)=>{const o=!!r;return e.jsxs("div",{className:b.cn("Bear-Input bear-flex bear-flex-col bear-gap-1.5",c&&"bear-w-full"),children:[s&&e.jsx("label",{className:"Bear-Input__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",children:s}),e.jsxs("div",{className:"Bear-Input__wrapper bear-relative bear-flex bear-items-center",children:[a&&e.jsx("div",{className:"Bear-Input__addon Bear-Input__addon--left bear-absolute bear-left-3 bear-text-gray-500 dark:bear-text-gray-400",children:a}),e.jsx("input",{ref:x,disabled:l,className:b.cn("Bear-Input__field","bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200","bear-bg-white bear-text-gray-900 placeholder:bear-text-gray-400","bear-border-gray-300 focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white","dark:bear-bg-gray-800 dark:bear-text-white dark:placeholder:bear-text-gray-500 dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",o?"Bear-Input__field--error bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",l&&"Bear-Input__field--disabled bear-opacity-50 bear-cursor-not-allowed",a&&"bear-pl-10",t&&"bear-pr-10",f[u],i),...p}),t&&e.jsx("div",{className:"Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-text-gray-500 dark:bear-text-gray-400",children:t})]}),(n||r)&&e.jsx("p",{className:b.cn("Bear-Input__helper bear-text-sm",o?"Bear-Input__helper--error bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:r||n})]})});d.displayName="Input";exports.Input=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),j=require("react"),b=require("../../utils/cn.cjs"),G=require("../../context/BearProvider.cjs"),m=require("./components/ClearIcon/ClearIcon.cjs"),H={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},N=j.forwardRef(({label:x,helperText:v,error:g,success:f,size:w="md",leftAddon:n,rightAddon:a,fullWidth:C=!1,clearable:q=!1,onClear:p,showCharCount:_=!1,charCountMax:M,className:R,disabled:l,value:i,defaultValue:c,maxLength:h,...O},P)=>{var k;const o=j.useContext(G.BearContext),e=(k=o==null?void 0:o.components)==null?void 0:k.Input,z=e==null?void 0:e.root,E=e==null?void 0:e.input,L=e==null?void 0:e.label,T=e==null?void 0:e.helper,D=e==null?void 0:e.prefix,y=e==null?void 0:e.suffix,t=!!g,I=!!f&&!t,s=M??h,u=typeof i=="string"?i.length:typeof c=="string"?c.length:0,F=s!=null&&u>s,d=q&&!l&&u>0,B=g||f||v;return r.jsxs("div",{className:b.cn("Bear-Input bear-flex bear-flex-col bear-gap-1.5",C&&"bear-w-full"),style:z,children:[x&&r.jsx("label",{className:"Bear-Input__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",style:L,children:x}),r.jsxs("div",{className:"Bear-Input__wrapper bear-relative bear-flex bear-items-center",children:[n&&r.jsx("div",{className:"Bear-Input__addon Bear-Input__addon--left bear-absolute bear-left-3 bear-text-gray-500 dark:bear-text-gray-400",style:D,children:n}),r.jsx("input",{ref:P,disabled:l,value:i,defaultValue:c,maxLength:h,"aria-invalid":t||void 0,className:b.cn("Bear-Input__field","bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200","bear-bg-white bear-text-gray-900 placeholder:bear-text-gray-400","bear-border-gray-300 focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white","dark:bear-bg-gray-800 dark:bear-text-white dark:placeholder:bear-text-gray-500 dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",t?"Bear-Input__field--error bear-border-red-500 focus:bear-ring-red-500":I?"Bear-Input__field--success bear-border-green-500 focus:bear-ring-green-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",l&&"Bear-Input__field--disabled bear-opacity-50 bear-cursor-not-allowed",n&&"bear-pl-10",(a||d)&&"bear-pr-10",H[w],R),style:E,...O}),d&&!a&&r.jsx("div",{className:"Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-text-gray-500 dark:bear-text-gray-400",style:y,children:r.jsx(m.ClearIcon,{onClick:p})}),a&&r.jsxs("div",{className:"Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-flex bear-items-center bear-gap-1.5 bear-text-gray-500 dark:bear-text-gray-400",style:y,children:[d&&r.jsx(m.ClearIcon,{onClick:p}),a]})]}),r.jsxs("div",{className:"Bear-Input__footer bear-flex bear-items-center bear-justify-between bear-gap-2",children:[B?r.jsx("p",{className:b.cn("Bear-Input__helper bear-text-sm bear-flex-1",t?"Bear-Input__helper--error bear-text-red-500":I?"Bear-Input__helper--success bear-text-green-500":"bear-text-gray-500 dark:bear-text-gray-400"),style:T,children:B}):_?r.jsx("span",{}):null,_&&s!=null&&r.jsxs("span",{className:b.cn("Bear-Input__char-count bear-text-xs bear-tabular-nums bear-shrink-0",F?"bear-text-red-500":"bear-text-gray-400 dark:bear-text-gray-500"),children:[u,"/",s]})]})]})});N.displayName="Input";exports.Input=N;

package/dist/components/Input/Input.js

@@ -1,65 +1,102 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { cn as t } from "../../utils/cn.js";
-const x = {
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { forwardRef as H, useContext as J } from "react";
+import { cn as l } from "../../utils/cn.js";
+import { BearContext as K } from "../../context/BearProvider.js";
+import { ClearIcon as N } from "./components/ClearIcon/ClearIcon.js";
+const P = {
   sm: "bear-h-8 bear-text-sm bear-px-3",
   md: "bear-h-10 bear-text-base bear-px-4",
   lg: "bear-h-12 bear-text-lg bear-px-5"
-}, m = g(
+}, Q = H(
   ({
-    label: s,
-    helperText: l,
-    error: e,
-    size: i = "md",
-    leftAddon: a,
-    rightAddon: b,
-    fullWidth: u = !1,
-    className: p,
-    disabled: o,
-    ...c
-  }, f) => {
-    const d = !!e;
-    return /* @__PURE__ */ n("div", { className: t("Bear-Input bear-flex bear-flex-col bear-gap-1.5", u && "bear-w-full"), children: [
-      s && /* @__PURE__ */ r("label", { className: "Bear-Input__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", children: s }),
-      /* @__PURE__ */ n("div", { className: "Bear-Input__wrapper bear-relative bear-flex bear-items-center", children: [
-        a && /* @__PURE__ */ r("div", { className: "Bear-Input__addon Bear-Input__addon--left bear-absolute bear-left-3 bear-text-gray-500 dark:bear-text-gray-400", children: a }),
+    label: p,
+    helperText: w,
+    error: g,
+    success: x,
+    size: v = "md",
+    leftAddon: n,
+    rightAddon: t,
+    fullWidth: C = !1,
+    clearable: j = !1,
+    onClear: _,
+    showCharCount: h = !1,
+    charCountMax: M,
+    className: z,
+    disabled: i,
+    value: o,
+    defaultValue: c,
+    maxLength: y,
+    ...E
+  }, L) => {
+    var k;
+    const d = J(K), e = (k = d == null ? void 0 : d.components) == null ? void 0 : k.Input, O = e == null ? void 0 : e.root, R = e == null ? void 0 : e.input, q = e == null ? void 0 : e.label, D = e == null ? void 0 : e.helper, F = e == null ? void 0 : e.prefix, m = e == null ? void 0 : e.suffix, b = !!g, I = !!x && !b, s = M ?? y, u = typeof o == "string" ? o.length : typeof c == "string" ? c.length : 0, G = s != null && u > s, f = j && !i && u > 0, B = g || x || w;
+    return /* @__PURE__ */ a("div", { className: l("Bear-Input bear-flex bear-flex-col bear-gap-1.5", C && "bear-w-full"), style: O, children: [
+      p && /* @__PURE__ */ r("label", { className: "Bear-Input__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", style: q, children: p }),
+      /* @__PURE__ */ a("div", { className: "Bear-Input__wrapper bear-relative bear-flex bear-items-center", children: [
+        n && /* @__PURE__ */ r("div", { className: "Bear-Input__addon Bear-Input__addon--left bear-absolute bear-left-3 bear-text-gray-500 dark:bear-text-gray-400", style: F, children: n }),
         /* @__PURE__ */ r(
           "input",
           {
-            ref: f,
-            disabled: o,
-            className: t(
+            ref: L,
+            disabled: i,
+            value: o,
+            defaultValue: c,
+            maxLength: y,
+            "aria-invalid": b || void 0,
+            className: l(
               "Bear-Input__field",
               "bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200",
               "bear-bg-white bear-text-gray-900 placeholder:bear-text-gray-400",
               "bear-border-gray-300 focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white",
               "dark:bear-bg-gray-800 dark:bear-text-white dark:placeholder:bear-text-gray-500 dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",
-              d ? "Bear-Input__field--error bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
-              o && "Bear-Input__field--disabled bear-opacity-50 bear-cursor-not-allowed",
-              a && "bear-pl-10",
-              b && "bear-pr-10",
-              x[i],
-              p
+              b ? "Bear-Input__field--error bear-border-red-500 focus:bear-ring-red-500" : I ? "Bear-Input__field--success bear-border-green-500 focus:bear-ring-green-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
+              i && "Bear-Input__field--disabled bear-opacity-50 bear-cursor-not-allowed",
+              n && "bear-pl-10",
+              (t || f) && "bear-pr-10",
+              P[v],
+              z
             ),
-            ...c
+            style: R,
+            ...E
           }
         ),
-        b && /* @__PURE__ */ r("div", { className: "Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-text-gray-500 dark:bear-text-gray-400", children: b })
+        f && !t && /* @__PURE__ */ r("div", { className: "Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-text-gray-500 dark:bear-text-gray-400", style: m, children: /* @__PURE__ */ r(N, { onClick: _ }) }),
+        t && /* @__PURE__ */ a("div", { className: "Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-flex bear-items-center bear-gap-1.5 bear-text-gray-500 dark:bear-text-gray-400", style: m, children: [
+          f && /* @__PURE__ */ r(N, { onClick: _ }),
+          t
+        ] })
       ] }),
-      (l || e) && /* @__PURE__ */ r(
-        "p",
-        {
-          className: t(
-            "Bear-Input__helper bear-text-sm",
-            d ? "Bear-Input__helper--error bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
-          ),
-          children: e || l
-        }
-      )
+      /* @__PURE__ */ a("div", { className: "Bear-Input__footer bear-flex bear-items-center bear-justify-between bear-gap-2", children: [
+        B ? /* @__PURE__ */ r(
+          "p",
+          {
+            className: l(
+              "Bear-Input__helper bear-text-sm bear-flex-1",
+              b ? "Bear-Input__helper--error bear-text-red-500" : I ? "Bear-Input__helper--success bear-text-green-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+            ),
+            style: D,
+            children: B
+          }
+        ) : h ? /* @__PURE__ */ r("span", {}) : null,
+        h && s != null && /* @__PURE__ */ a(
+          "span",
+          {
+            className: l(
+              "Bear-Input__char-count bear-text-xs bear-tabular-nums bear-shrink-0",
+              G ? "bear-text-red-500" : "bear-text-gray-400 dark:bear-text-gray-500"
+            ),
+            children: [
+              u,
+              "/",
+              s
+            ]
+          }
+        )
+      ] })
     ] });
   }
 );
-m.displayName = "Input";
+Q.displayName = "Input";
 export {
-  m as Input
+  Q as Input
 };

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

@@ -6,6 +6,8 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     helperText?: string;
     /** Error message */
     error?: string;
+    /** Success message (green helper text) */
+    success?: string;
     /** Input size */
     size?: 'sm' | 'md' | 'lg';
     /** Left addon */
@@ -14,4 +16,12 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     rightAddon?: ReactNode;
     /** Whether input is full width */
     fullWidth?: boolean;
+    /** Show a clear (X) button when input has value */
+    clearable?: boolean;
+    /** Callback when clear button is clicked */
+    onClear?: () => void;
+    /** Show live character count (requires maxLength or charCountMax) */
+    showCharCount?: boolean;
+    /** Max chars for counter display (alternative to maxLength when you don't want native enforcement) */
+    charCountMax?: number;
 }

package/dist/components/Input/components/ClearIcon/ClearIcon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../../utils/cn.cjs");require("react");const t=({className:r,onClick:a})=>e.jsx("button",{type:"button",tabIndex:-1,onClick:a,className:n.cn("Bear-Input__clear bear-inline-flex bear-items-center bear-justify-center","bear-rounded-full bear-w-4 bear-h-4 bear-bg-gray-300 dark:bear-bg-gray-600","hover:bear-bg-gray-400 dark:hover:bear-bg-gray-500 bear-transition-colors bear-cursor-pointer",r),"aria-label":"Clear input",children:e.jsxs("svg",{width:"8",height:"8",viewBox:"0 0 8 8",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[e.jsx("line",{x1:"1",y1:"1",x2:"7",y2:"7"}),e.jsx("line",{x1:"7",y1:"1",x2:"1",y2:"7"})]})});exports.ClearIcon=t;

package/dist/components/Input/components/ClearIcon/ClearIcon.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface ClearIconProps {
+    className?: string;
+    onClick?: () => void;
+}
+export declare const ClearIcon: FC<ClearIconProps>;
+export {};

package/dist/components/Input/components/ClearIcon/ClearIcon.js

@@ -0,0 +1,25 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { cn as o } from "../../../../utils/cn.js";
+import "react";
+const l = ({ className: e, onClick: a }) => /* @__PURE__ */ r(
+  "button",
+  {
+    type: "button",
+    tabIndex: -1,
+    onClick: a,
+    className: o(
+      "Bear-Input__clear bear-inline-flex bear-items-center bear-justify-center",
+      "bear-rounded-full bear-w-4 bear-h-4 bear-bg-gray-300 dark:bear-bg-gray-600",
+      "hover:bear-bg-gray-400 dark:hover:bear-bg-gray-500 bear-transition-colors bear-cursor-pointer",
+      e
+    ),
+    "aria-label": "Clear input",
+    children: /* @__PURE__ */ t("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+      /* @__PURE__ */ r("line", { x1: "1", y1: "1", x2: "7", y2: "7" }),
+      /* @__PURE__ */ r("line", { x1: "7", y1: "1", x2: "1", y2: "7" })
+    ] })
+  }
+);
+export {
+  l as ClearIcon
+};

package/dist/components/Input/components/ClearIcon/index.d.ts

@@ -0,0 +1 @@
+export { ClearIcon } from './ClearIcon';

package/dist/components/InputGroup/InputGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../utils/cn.cjs");require("react");const r=require("../Typography/Typography.cjs"),y=({label:a,description:t,error:n,helperText:u,required:p=!1,fullWidth:c=!1,children:i,className:d,htmlFor:b,testId:x})=>{const s=!!n,o=n||u;return e.jsxs("div",{className:l.cn("Bear-InputGroup bear-flex bear-flex-col bear-gap-1.5",c&&"bear-w-full",d),"data-testid":x,children:[a&&e.jsx("label",{htmlFor:b,className:"Bear-InputGroup__label",children:e.jsxs(r.Typography,{variant:"body2",className:"bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",inline:!0,children:[a,p&&e.jsx("span",{className:"Bear-InputGroup__required bear-text-red-500 bear-ml-0.5","aria-hidden":"true",children:"*"})]})}),t&&e.jsx(r.Typography,{variant:"caption",className:"Bear-InputGroup__description bear-text-gray-500 dark:bear-text-gray-400",children:t}),e.jsx("div",{className:"Bear-InputGroup__content",children:i}),o&&e.jsx(r.Typography,{variant:"body2",className:l.cn("Bear-InputGroup__helper",s?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),role:s?"alert":void 0,children:o})]})};exports.InputGroup=y;

package/dist/components/InputGroup/InputGroup.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { InputGroupProps } from './InputGroup.types';
+export declare const InputGroup: FC<InputGroupProps>;
+export default InputGroup;

package/dist/components/InputGroup/InputGroup.js

@@ -0,0 +1,63 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { cn as p } from "../../utils/cn.js";
+import "react";
+import { Typography as r } from "../Typography/Typography.js";
+const g = ({
+  label: a,
+  description: t,
+  error: n,
+  helperText: i,
+  required: d = !1,
+  fullWidth: c = !1,
+  children: u,
+  className: b,
+  htmlFor: m,
+  testId: x
+}) => {
+  const o = !!n, l = n || i;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: p("Bear-InputGroup bear-flex bear-flex-col bear-gap-1.5", c && "bear-w-full", b),
+      "data-testid": x,
+      children: [
+        a && /* @__PURE__ */ e("label", { htmlFor: m, className: "Bear-InputGroup__label", children: /* @__PURE__ */ s(
+          r,
+          {
+            variant: "body2",
+            className: "bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",
+            inline: !0,
+            children: [
+              a,
+              d && /* @__PURE__ */ e("span", { className: "Bear-InputGroup__required bear-text-red-500 bear-ml-0.5", "aria-hidden": "true", children: "*" })
+            ]
+          }
+        ) }),
+        t && /* @__PURE__ */ e(
+          r,
+          {
+            variant: "caption",
+            className: "Bear-InputGroup__description bear-text-gray-500 dark:bear-text-gray-400",
+            children: t
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "Bear-InputGroup__content", children: u }),
+        l && /* @__PURE__ */ e(
+          r,
+          {
+            variant: "body2",
+            className: p(
+              "Bear-InputGroup__helper",
+              o ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+            ),
+            role: o ? "alert" : void 0,
+            children: l
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  g as InputGroup
+};

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface InputGroupProps {
+    /** Group label */
+    label?: string;
+    /** Description text (below label, above input) */
+    description?: string;
+    /** Error message (overrides helperText styling) */
+    error?: string;
+    /** Helper text (below input) */
+    helperText?: string;
+    /** Whether the field is required (shows asterisk) */
+    required?: boolean;
+    /** Whether the group takes full width */
+    fullWidth?: boolean;
+    /** The input element(s) */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** HTML for attribute linking label to input */
+    htmlFor?: string;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { InputGroup, default } from './InputGroup';
+export * from './InputGroup.types';

package/dist/components/PasswordInput/PasswordInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),b=require("../../utils/cn.cjs"),L=require("../Input/Input.cjs"),i=require("../Icon/icons/action.cjs"),_=b.cn("Bear-PasswordInput__shift bear-text-xs bear-font-medium bear-px-1.5 bear-py-0.5","bear-rounded bear-bg-amber-100 bear-text-amber-700","dark:bear-bg-amber-900/40 dark:bear-text-amber-400","bear-select-none bear-whitespace-nowrap"),S=({visible:t,onVisibilityChange:a,hideToggle:d=!1,toggleAriaLabel:u="Toggle password visibility",showShiftIndicator:n=!1,visibleIcon:l,hiddenIcon:p,...w})=>{const[x,m]=s.useState(!1),[f,I]=s.useState(!1),o=t!==void 0,c=o?t:x,g=s.useCallback(()=>{o?a==null||a(!t):m(e=>!e)},[o,t,a]);s.useEffect(()=>{if(!n)return;const e=j=>I(j.getModifierState("CapsLock"));return window.addEventListener("keydown",e),window.addEventListener("keyup",e),()=>{window.removeEventListener("keydown",e),window.removeEventListener("keyup",e)}},[n]);const v=r.jsx(i.VisibilityOffIcon,{className:"bear-w-4 bear-h-4"}),k=r.jsx(i.VisibilityIcon,{className:"bear-w-4 bear-h-4"}),y=d?void 0:r.jsxs("span",{className:"Bear-PasswordInput__actions bear-inline-flex bear-items-center bear-gap-1.5",children:[n&&f&&r.jsx("span",{className:_,children:"Caps"}),r.jsx("button",{type:"button",tabIndex:-1,onClick:g,className:b.cn("Bear-PasswordInput__toggle bear-inline-flex bear-items-center bear-justify-center","bear-text-gray-400 hover:bear-text-gray-600 dark:hover:bear-text-gray-300","bear-transition-colors bear-cursor-pointer"),"aria-label":u,children:c?l??v:p??k})]});return r.jsx(L.Input,{type:c?"text":"password",rightAddon:y,autoComplete:"current-password",...w})};exports.PasswordInput=S;

package/dist/components/PasswordInput/PasswordInput.d.ts

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

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,61 @@
+import { jsxs as L, jsx as r } from "react/jsx-runtime";
+import { useState as b, useCallback as _, useEffect as E } from "react";
+import { cn as c } from "../../utils/cn.js";
+import { Input as N } from "../Input/Input.js";
+import { VisibilityOffIcon as B, VisibilityIcon as C } from "../Icon/icons/action.js";
+const O = c(
+  "Bear-PasswordInput__shift bear-text-xs bear-font-medium bear-px-1.5 bear-py-0.5",
+  "bear-rounded bear-bg-amber-100 bear-text-amber-700",
+  "dark:bear-bg-amber-900/40 dark:bear-text-amber-400",
+  "bear-select-none bear-whitespace-nowrap"
+), A = ({
+  visible: a,
+  onVisibilityChange: t,
+  hideToggle: i = !1,
+  toggleAriaLabel: d = "Toggle password visibility",
+  showShiftIndicator: s = !1,
+  visibleIcon: l,
+  hiddenIcon: p,
+  ...m
+}) => {
+  const [u, f] = b(!1), [w, x] = b(!1), n = a !== void 0, o = n ? a : u, k = _(() => {
+    n ? t == null || t(!a) : f((e) => !e);
+  }, [n, a, t]);
+  E(() => {
+    if (!s) return;
+    const e = (y) => x(y.getModifierState("CapsLock"));
+    return window.addEventListener("keydown", e), window.addEventListener("keyup", e), () => {
+      window.removeEventListener("keydown", e), window.removeEventListener("keyup", e);
+    };
+  }, [s]);
+  const v = /* @__PURE__ */ r(B, { className: "bear-w-4 bear-h-4" }), I = /* @__PURE__ */ r(C, { className: "bear-w-4 bear-h-4" }), g = i ? void 0 : /* @__PURE__ */ L("span", { className: "Bear-PasswordInput__actions bear-inline-flex bear-items-center bear-gap-1.5", children: [
+    s && w && /* @__PURE__ */ r("span", { className: O, children: "Caps" }),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        onClick: k,
+        className: c(
+          "Bear-PasswordInput__toggle bear-inline-flex bear-items-center bear-justify-center",
+          "bear-text-gray-400 hover:bear-text-gray-600 dark:hover:bear-text-gray-300",
+          "bear-transition-colors bear-cursor-pointer"
+        ),
+        "aria-label": d,
+        children: o ? l ?? v : p ?? I
+      }
+    )
+  ] });
+  return /* @__PURE__ */ r(
+    N,
+    {
+      type: o ? "text" : "password",
+      rightAddon: g,
+      autoComplete: "current-password",
+      ...m
+    }
+  );
+};
+export {
+  A as PasswordInput
+};

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { InputProps } from '../Input/Input.types';
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'rightAddon'> {
+    /** Whether password is currently visible */
+    visible?: boolean;
+    /** Controlled visibility toggle */
+    onVisibilityChange?: (visible: boolean) => void;
+    /** Hide the toggle button entirely */
+    hideToggle?: boolean;
+    /** Aria label for the toggle button */
+    toggleAriaLabel?: string;
+    /** Show Caps Lock / Shift indicator when active */
+    showShiftIndicator?: boolean;
+    /** Custom icon for "visible" state (replaces default VisibilityOffIcon) */
+    visibleIcon?: ReactNode;
+    /** Custom icon for "hidden" state (replaces default VisibilityIcon) */
+    hiddenIcon?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { PasswordInput } from './PasswordInput';
+export * from './PasswordInput.types';

package/dist/components/ResizableTextarea/ResizableTextarea.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),o=require("react"),f=require("../../utils/cn.cjs"),w=require("./ResizableTextarea.const.cjs"),k=({minHeight:e=w.DEFAULT_MIN_HEIGHT,maxHeight:t=w.DEFAULT_MAX_HEIGHT,resizable:a=!0,className:x,style:y,testId:R,...T})=>{const h=o.useRef(null),[c,E]=o.useState(e),b=o.useRef(0),d=o.useRef(e),_=o.useCallback(r=>{var v,g;if(!a)return;r.preventDefault(),b.current=r.clientY,d.current=c,(g=(v=r.target).setPointerCapture)==null||g.call(v,r.pointerId);const l=s=>{const i=s.clientY-b.current;let n=d.current+i;e>0&&(n=Math.max(e,n)),t>0&&(n=Math.min(t,n)),E(n)},p=()=>{var s,i;(i=(s=r.target).releasePointerCapture)==null||i.call(s,r.pointerId),window.removeEventListener("pointermove",l),window.removeEventListener("pointerup",p)};window.addEventListener("pointermove",l),window.addEventListener("pointerup",p)},[a,c,e,t]);return u.jsxs("div",{className:f.cn("Bear-ResizableTextarea bear-relative",x),"data-testid":R,children:[u.jsx("textarea",{ref:h,className:f.cn("bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-gray-600","bear-bg-white dark:bear-bg-gray-900 bear-text-gray-900 dark:bear-text-gray-100","bear-p-3 bear-resize-none focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500/50"),style:{...y,minHeight:a?e:void 0,height:a?c:void 0,maxHeight:t>0?t:void 0},...T}),a&&u.jsx("div",{role:"separator",onPointerDown:_,className:"Bear-ResizableTextarea__handle bear-absolute bear-right-0 bear-bottom-0 bear-w-4 bear-h-4 bear-cursor-s-resize bear-opacity-50 hover:bear-opacity-100",style:{background:"linear-gradient(135deg, transparent 50%, currentColor 50%)"}})]})};exports.ResizableTextarea=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),d=require("../../utils/cn.cjs"),j=require("./ResizableTextarea.const.cjs"),I=({label:f,helperText:v,error:u,minHeight:r=j.DEFAULT_MIN_HEIGHT,maxHeight:n=j.DEFAULT_MAX_HEIGHT,resizable:s=!0,showCharCount:p=!1,charCountMax:k,className:E,style:L,testId:N,...a})=>{const x=!!u,l=k??a.maxLength,y=typeof a.value=="string"?a.value.length:typeof a.defaultValue=="string"?a.defaultValue.length:0,z=l!=null&&y>l,B=i.useRef(null),[g,M]=i.useState(r),h=i.useRef(0),m=i.useRef(r),D=i.useCallback(t=>{var w,T;if(!s)return;t.preventDefault(),h.current=t.clientY,m.current=g,(T=(w=t.target).setPointerCapture)==null||T.call(w,t.pointerId);const R=b=>{const c=b.clientY-h.current;let o=m.current+c;r>0&&(o=Math.max(r,o)),n>0&&(o=Math.min(n,o)),M(o)},_=()=>{var b,c;(c=(b=t.target).releasePointerCapture)==null||c.call(b,t.pointerId),window.removeEventListener("pointermove",R),window.removeEventListener("pointerup",_)};window.addEventListener("pointermove",R),window.addEventListener("pointerup",_)},[s,g,r,n]);return e.jsxs("div",{className:d.cn("Bear-ResizableTextarea bear-flex bear-flex-col bear-gap-1.5",E),"data-testid":N,children:[f&&e.jsx("label",{className:"Bear-ResizableTextarea__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",children:f}),e.jsxs("div",{className:"bear-relative",children:[e.jsx("textarea",{ref:B,"aria-invalid":x||void 0,className:d.cn("bear-w-full bear-rounded-lg bear-border","bear-bg-white dark:bear-bg-gray-900 bear-text-gray-900 dark:bear-text-gray-100","bear-p-3 bear-resize-none focus:bear-outline-none focus:bear-ring-2",x?"bear-border-red-500 focus:bear-ring-red-500":"bear-border-gray-300 dark:bear-border-gray-600 focus:bear-ring-pink-500/50"),style:{...L,minHeight:s?r:void 0,height:s?g:void 0,maxHeight:n>0?n:void 0},...a}),s&&e.jsx("div",{role:"separator",onPointerDown:D,className:"Bear-ResizableTextarea__handle bear-absolute bear-right-0 bear-bottom-0 bear-w-4 bear-h-4 bear-cursor-s-resize bear-opacity-50 hover:bear-opacity-100",style:{background:"linear-gradient(135deg, transparent 50%, currentColor 50%)"}})]}),e.jsxs("div",{className:"Bear-ResizableTextarea__footer bear-flex bear-items-center bear-justify-between bear-gap-2",children:[v||u?e.jsx("p",{className:d.cn("Bear-ResizableTextarea__helper bear-text-sm bear-flex-1",x?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:u||v}):p?e.jsx("span",{}):null,p&&l!=null&&e.jsxs("span",{className:d.cn("Bear-ResizableTextarea__char-count bear-text-xs bear-tabular-nums bear-shrink-0",z?"bear-text-red-500":"bear-text-gray-400 dark:bear-text-gray-500"),children:[y,"/",l]})]})]})};exports.ResizableTextarea=I;