@forgedevstack/bear 1.2.3 → 1.2.4

package/dist/components/Flex/Flex.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={row:"bear-flex-row","row-reverse":"bear-flex-row-reverse",column:"bear-flex-col","column-reverse":"bear-flex-col-reverse"},r={nowrap:"bear-flex-nowrap",wrap:"bear-flex-wrap","wrap-reverse":"bear-flex-wrap-reverse"},a={start:"bear-items-start",center:"bear-items-center",end:"bear-items-end",stretch:"bear-items-stretch",baseline:"bear-items-baseline"},t={start:"bear-justify-start",center:"bear-justify-center",end:"bear-justify-end",between:"bear-justify-between",around:"bear-justify-around",evenly:"bear-justify-evenly"},b={0:"bear-gap-0",1:"bear-gap-1",2:"bear-gap-2",3:"bear-gap-3",4:"bear-gap-4",5:"bear-gap-5",6:"bear-gap-6",8:"bear-gap-8",10:"bear-gap-10",12:"bear-gap-12",16:"bear-gap-16"};exports.FLEX_ALIGN_CLASSES=a;exports.FLEX_DIRECTION_CLASSES=e;exports.FLEX_GAP_CLASSES=b;exports.FLEX_JUSTIFY_CLASSES=t;exports.FLEX_WRAP_CLASSES=r;

package/dist/components/Flex/Flex.const.d.ts

@@ -0,0 +1,6 @@
+import { FlexAlign, FlexDirection, FlexGap, FlexJustify, FlexWrap } from './Flex.types';
+export declare const FLEX_DIRECTION_CLASSES: Record<FlexDirection, string>;
+export declare const FLEX_WRAP_CLASSES: Record<FlexWrap, string>;
+export declare const FLEX_ALIGN_CLASSES: Record<FlexAlign, string>;
+export declare const FLEX_JUSTIFY_CLASSES: Record<FlexJustify, string>;
+export declare const FLEX_GAP_CLASSES: Record<FlexGap, string>;

package/dist/components/Flex/Flex.const.js

@@ -0,0 +1,42 @@
+const e = {
+  row: "bear-flex-row",
+  "row-reverse": "bear-flex-row-reverse",
+  column: "bear-flex-col",
+  "column-reverse": "bear-flex-col-reverse"
+}, r = {
+  nowrap: "bear-flex-nowrap",
+  wrap: "bear-flex-wrap",
+  "wrap-reverse": "bear-flex-wrap-reverse"
+}, a = {
+  start: "bear-items-start",
+  center: "bear-items-center",
+  end: "bear-items-end",
+  stretch: "bear-items-stretch",
+  baseline: "bear-items-baseline"
+}, t = {
+  start: "bear-justify-start",
+  center: "bear-justify-center",
+  end: "bear-justify-end",
+  between: "bear-justify-between",
+  around: "bear-justify-around",
+  evenly: "bear-justify-evenly"
+}, b = {
+  0: "bear-gap-0",
+  1: "bear-gap-1",
+  2: "bear-gap-2",
+  3: "bear-gap-3",
+  4: "bear-gap-4",
+  5: "bear-gap-5",
+  6: "bear-gap-6",
+  8: "bear-gap-8",
+  10: "bear-gap-10",
+  12: "bear-gap-12",
+  16: "bear-gap-16"
+};
+export {
+  a as FLEX_ALIGN_CLASSES,
+  e as FLEX_DIRECTION_CLASSES,
+  b as FLEX_GAP_CLASSES,
+  t as FLEX_JUSTIFY_CLASSES,
+  r as FLEX_WRAP_CLASSES
+};

package/dist/components/Flex/Flex.d.ts

@@ -1,13 +1,2 @@
 import { FlexProps } from './Flex.types';
-/**
- * Flex container component for flexible layouts
- *
- * @example
- * ```tsx
- * <Flex direction="row" align="center" justify="between" gap={4}>
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Flex>
- * ```
- */
 export declare const Flex: import('react').ForwardRefExoticComponent<FlexProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/Flex.js

@@ -1,79 +1,40 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { cn as m } from "../../utils/cn.js";
-const d = {
-  row: "bear-flex-row",
-  "row-reverse": "bear-flex-row-reverse",
-  column: "bear-flex-col",
-  "column-reverse": "bear-flex-col-reverse"
-}, g = {
-  nowrap: "bear-flex-nowrap",
-  wrap: "bear-flex-wrap",
-  "wrap-reverse": "bear-flex-wrap-reverse"
-}, u = {
-  start: "bear-items-start",
-  center: "bear-items-center",
-  end: "bear-items-end",
-  stretch: "bear-items-stretch",
-  baseline: "bear-items-baseline"
-}, x = {
-  start: "bear-justify-start",
-  center: "bear-justify-center",
-  end: "bear-justify-end",
-  between: "bear-justify-between",
-  around: "bear-justify-around",
-  evenly: "bear-justify-evenly"
-}, y = {
-  0: "bear-gap-0",
-  1: "bear-gap-1",
-  2: "bear-gap-2",
-  3: "bear-gap-3",
-  4: "bear-gap-4",
-  5: "bear-gap-5",
-  6: "bear-gap-6",
-  8: "bear-gap-8",
-  10: "bear-gap-10",
-  12: "bear-gap-12",
-  16: "bear-gap-16"
-}, r = (e, a) => {
-  if (e === void 0) return "";
-  if (typeof e == "object") {
-    const s = [];
-    return e.base !== void 0 && s.push(a[e.base]), s.join(" ");
-  }
-  return a[e] || "";
-}, j = w(
+import { jsx as _ } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { cn as p } from "../../utils/cn.js";
+import { getResponsiveClass as r } from "../../utils/getResponsiveClass.utils.js";
+import { FLEX_GAP_CLASSES as A, FLEX_JUSTIFY_CLASSES as F, FLEX_ALIGN_CLASSES as n, FLEX_WRAP_CLASSES as C, FLEX_DIRECTION_CLASSES as x } from "./Flex.const.js";
+const d = l(
   ({
     direction: e = "row",
-    wrap: a = "nowrap",
-    align: s = "stretch",
-    justify: t = "start",
-    gap: n = 0,
-    inline: b = !1,
-    className: o,
+    wrap: o = "nowrap",
+    align: t = "stretch",
+    justify: S = "start",
+    gap: a = 0,
+    inline: s = !1,
+    className: m,
     children: i,
-    testId: p,
-    ...f
-  }, l) => /* @__PURE__ */ c(
+    testId: E,
+    ...L
+  }, f) => /* @__PURE__ */ _(
     "div",
     {
-      ref: l,
-      className: m(
-        b ? "bear-inline-flex" : "bear-flex",
-        r(e, d),
-        r(a, g),
-        r(s, u),
-        r(t, x),
-        r(n, y),
-        o
+      ref: f,
+      className: p(
+        s ? "bear-inline-flex" : "bear-flex",
+        r(e, x),
+        r(o, C),
+        r(t, n),
+        r(S, F),
+        r(a, A),
+        m
       ),
-      "data-testid": p,
-      ...f,
+      "data-testid": E,
+      ...L,
       children: i
     }
   )
 );
-j.displayName = "Flex";
+d.displayName = "Flex";
 export {
-  j as Flex
+  d as Flex
 };

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

@@ -6,6 +6,7 @@ export type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
 export type FlexGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
 export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+    id?: string;
     /** Flex direction */
     direction?: ResponsiveProp<FlexDirection>;
     /** Flex wrap */

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { ChatMessage } from '../Chat/Chat.types';
 export interface FloatingChatProps {
+    id?: string;
     /** Chat messages */
     messages: ChatMessage[];
     /** Callback when user sends a message */

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

@@ -105,6 +105,7 @@ export type FormLayout = 'vertical' | 'horizontal' | 'inline';
  * Form component props
  */
 export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onError'> {
+    id?: string;
     /** Child elements */
     children: ReactNode;
     /** Initial form values */

package/dist/components/FormControl/FormControl.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs");require("react");const F=require("../../utils/generateBearId.utils.cjs"),y=require("../../utils/useBearId.cjs"),L=require("../Box/Box.cjs"),q=require("../Flex/Flex.cjs"),u=require("../Typography/Typography.cjs"),v=require("./FormControl.context.cjs"),r=require("./FormControl.const.cjs"),T=m=>{const{label:o,helperText:n,error:s=!1,disabled:l=!1,required:c=!1,fullWidth:b=!1,className:x,children:O,id:R,testId:_,...p}=m,C=y.useBearId("FormControl"),a=F.resolveBearId(R,C),d=o?`${a}-label`:void 0,i=n?`${a}-helper`:void 0,h={disabled:l,error:s,required:c,labelId:d,helperId:i};return e.jsx(v.FormControlContext.Provider,{value:h,children:e.jsxs(q.Flex,{id:a,"data-testid":_,direction:"column",gap:2,className:t.cn(r.FORM_CONTROL_ROOT_CLASS,b&&"bear-w-full",l&&"bear-opacity-60 bear-pointer-events-none",x),...p,children:[o&&e.jsxs(u.Typography,{component:"label",id:d,variant:"body2",className:t.cn(r.FORM_CONTROL_LABEL_CLASS,"bear-font-medium bear-text-[var(--bear-text-secondary)]"),children:[o,c&&e.jsx(L.Box,{as:"span",className:"bear-text-red-500 bear-ml-0.5","aria-hidden":"true",children:r.FORM_CONTROL_REQUIRED_MARK})]}),O,n&&e.jsx(u.Typography,{component:"p",id:i,variant:"body2",className:t.cn(r.FORM_CONTROL_HELPER_CLASS,s?t.cn(r.FORM_CONTROL_ERROR_CLASS,"bear-text-red-500"):"bear-text-[var(--bear-text-muted)]"),children:n})]})})};exports.FormControl=T;

package/dist/components/FormControl/FormControl.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O="Bear-FormControl",R="Bear-FormControl__label",_="Bear-FormControl__helper",L="Bear-FormControl__helper--error",o="*";exports.FORM_CONTROL_ERROR_CLASS=L;exports.FORM_CONTROL_HELPER_CLASS=_;exports.FORM_CONTROL_LABEL_CLASS=R;exports.FORM_CONTROL_REQUIRED_MARK=o;exports.FORM_CONTROL_ROOT_CLASS=O;

package/dist/components/FormControl/FormControl.const.d.ts

@@ -0,0 +1,5 @@
+export declare const FORM_CONTROL_ROOT_CLASS = "Bear-FormControl";
+export declare const FORM_CONTROL_LABEL_CLASS = "Bear-FormControl__label";
+export declare const FORM_CONTROL_HELPER_CLASS = "Bear-FormControl__helper";
+export declare const FORM_CONTROL_ERROR_CLASS = "Bear-FormControl__helper--error";
+export declare const FORM_CONTROL_REQUIRED_MARK = "*";

package/dist/components/FormControl/FormControl.const.js

@@ -0,0 +1,8 @@
+const _ = "Bear-FormControl", o = "Bear-FormControl__label", r = "Bear-FormControl__helper", O = "Bear-FormControl__helper--error", R = "*";
+export {
+  O as FORM_CONTROL_ERROR_CLASS,
+  r as FORM_CONTROL_HELPER_CLASS,
+  o as FORM_CONTROL_LABEL_CLASS,
+  R as FORM_CONTROL_REQUIRED_MARK,
+  _ as FORM_CONTROL_ROOT_CLASS
+};

package/dist/components/FormControl/FormControl.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null);exports.FormControlContext=e;

package/dist/components/FormControl/FormControl.context.d.ts

@@ -0,0 +1,2 @@
+import { FormControlContextValue } from './FormControl.types';
+export declare const FormControlContext: import('react').Context<FormControlContextValue | null>;

package/dist/components/FormControl/FormControl.context.js

@@ -0,0 +1,5 @@
+import { createContext as o } from "react";
+const r = o(null);
+export {
+  r as FormControlContext
+};

package/dist/components/FormControl/FormControl.d.ts

@@ -0,0 +1,2 @@
+import { FormControlProps } from './FormControl.types';
+export declare const FormControl: (props: FormControlProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormControl/FormControl.js

@@ -0,0 +1,90 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { cn as e } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as L } from "../../utils/generateBearId.utils.js";
+import { useBearId as u } from "../../utils/useBearId.js";
+import { Box as v } from "../Box/Box.js";
+import { Flex as N } from "../Flex/Flex.js";
+import { Typography as c } from "../Typography/Typography.js";
+import { FormControlContext as F } from "./FormControl.context.js";
+import { FORM_CONTROL_REQUIRED_MARK as I, FORM_CONTROL_LABEL_CLASS as S, FORM_CONTROL_ERROR_CLASS as T, FORM_CONTROL_HELPER_CLASS as y, FORM_CONTROL_ROOT_CLASS as A } from "./FormControl.const.js";
+const H = (p) => {
+  const {
+    label: r,
+    helperText: o,
+    error: l = !1,
+    disabled: d = !1,
+    required: n = !1,
+    fullWidth: b = !1,
+    className: O,
+    children: R,
+    id: f,
+    testId: _,
+    ...x
+  } = p, C = u("FormControl"), t = L(f, C), i = r ? `${t}-label` : void 0, m = o ? `${t}-helper` : void 0, h = {
+    disabled: d,
+    error: l,
+    required: n,
+    labelId: i,
+    helperId: m
+  };
+  return /* @__PURE__ */ a(F.Provider, { value: h, children: /* @__PURE__ */ s(
+    N,
+    {
+      id: t,
+      "data-testid": _,
+      direction: "column",
+      gap: 2,
+      className: e(
+        A,
+        b && "bear-w-full",
+        d && "bear-opacity-60 bear-pointer-events-none",
+        O
+      ),
+      ...x,
+      children: [
+        r && /* @__PURE__ */ s(
+          c,
+          {
+            component: "label",
+            id: i,
+            variant: "body2",
+            className: e(
+              S,
+              "bear-font-medium bear-text-[var(--bear-text-secondary)]"
+            ),
+            children: [
+              r,
+              n && /* @__PURE__ */ a(
+                v,
+                {
+                  as: "span",
+                  className: "bear-text-red-500 bear-ml-0.5",
+                  "aria-hidden": "true",
+                  children: I
+                }
+              )
+            ]
+          }
+        ),
+        R,
+        o && /* @__PURE__ */ a(
+          c,
+          {
+            component: "p",
+            id: m,
+            variant: "body2",
+            className: e(
+              y,
+              l ? e(T, "bear-text-red-500") : "bear-text-[var(--bear-text-muted)]"
+            ),
+            children: o
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  H as FormControl
+};

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

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface FormControlProps extends HTMLAttributes<HTMLDivElement> {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    id?: string;
+    testId?: string;
+    children?: ReactNode;
+}
+export interface FormControlContextValue {
+    disabled: boolean;
+    error: boolean;
+    required: boolean;
+    labelId?: string;
+    helperId?: string;
+}

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

@@ -0,0 +1,4 @@
+export { FormControl } from './FormControl';
+export { FormControlContext } from './FormControl.context';
+export { useFormControl } from '../../hooks/useFormControl';
+export type { FormControlProps, FormControlContextValue } from './FormControl.types';

package/dist/components/FormField/FormField.cjs

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

package/dist/components/FormField/FormField.js

@@ -1,127 +1,130 @@
-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 { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { forwardRef as V, useContext as S, useState as A, useCallback as z } 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(
+import { resolveBearId as rr } from "../../utils/generateBearId.utils.js";
+import { useBearId as er } from "../../utils/useBearId.js";
+import { FORMFIELD_SIZE_CLASSES as ar } from "./FormField.const.js";
+import { BearContext as br } from "../../context/BearProvider.js";
+import { useFormControl as dr } from "../../hooks/useFormControl/useFormControl.js";
+const tr = V(
   ({
-    label: z,
-    helperText: R,
-    error: h,
-    success: p,
-    size: j = "md",
-    leftAddon: d,
-    rightAddon: n,
+    label: j,
+    helperText: q,
+    error: p,
+    success: _,
+    size: D = "md",
+    leftAddon: l,
+    rightAddon: g,
     fullWidth: L = !1,
     required: M = !1,
-    variant: _ = "outlined",
-    className: D,
-    disabled: g,
-    value: c,
-    defaultValue: x,
+    variant: k = "outlined",
+    className: C,
+    disabled: c,
+    value: x,
+    defaultValue: m,
     placeholder: O,
-    onFocus: l,
-    onBlur: o,
-    ...k
+    onFocus: o,
+    onBlur: s,
+    ...B
   }, 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(
+    var R;
+    const a = dr(), F = k === "filled", i = k === "standard", u = S(br), r = (R = u == null ? void 0 : u.components) == null ? void 0 : R.FormField, G = r == null ? void 0 : r.root, H = r == null ? void 0 : r.input, J = r == null ? void 0 : r.label, K = r == null ? void 0 : r.helper, N = r == null ? void 0 : r.addon, P = F ? r == null ? void 0 : r.filled : i ? r == null ? void 0 : r.standard : r == null ? void 0 : r.outlined, [n, v] = A(!1), Q = er("FormField"), w = rr(B.id, Q), T = c ?? (a == null ? void 0 : a.disabled), U = M ?? (a == null ? void 0 : a.required), W = !!p || (a == null ? void 0 : a.error), X = x != null && x !== "" || m != null && m !== "", I = n || X, b = W, d = !!_ && !b, f = ar[D], E = p || _ || q, Y = z(
       (y) => {
-        N(!0), l == null || l(y);
+        v(!0), o == null || o(y);
       },
-      [l]
-    ), U = I(
+      [o]
+    ), $ = z(
       (y) => {
-        N(!1), o == null || o(y);
+        v(!1), s == null || s(y);
       },
-      [o]
+      [s]
     );
-    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 }),
+    return /* @__PURE__ */ h("div", { className: e("Bear-FormField bear-flex bear-flex-col bear-gap-1", L && "bear-w-full"), style: G, children: [
+      /* @__PURE__ */ h("div", { className: "Bear-FormField__wrapper bear-relative bear-flex bear-items-center", children: [
+        l && /* @__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: N, children: l }),
         /* @__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,
+            disabled: T,
+            value: x,
+            defaultValue: m,
+            placeholder: I ? O : void 0,
+            "aria-invalid": b || void 0,
+            onFocus: Y,
+            onBlur: $,
             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(
+              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(
+                b ? "bear-border-b-red-500" : d ? "bear-border-b-green-500" : n ? "bear-border-b-bear-500" : "bear-border-b-gray-400 dark:bear-border-b-gray-500"
+              ) : i ? 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"
+                b ? "bear-border-b-red-500" : d ? "bear-border-b-green-500" : n ? "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(
+                b ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/30" : d ? "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
+              c && "bear-opacity-50 bear-cursor-not-allowed",
+              l && "bear-pl-10",
+              g && "bear-pr-10",
+              f.field,
+              i && "focus:bear-ring-0",
+              C
             ),
-            style: { ...K, ...G },
-            ...k
+            style: { ...P, ...H },
+            ...B
           }
         ),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ h(
           "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"
+              l ? "bear-ml-10" : "bear-ml-4",
+              I ? e(
+                F ? f.labelFloat : i ? "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",
+                b ? "bear-text-red-500" : d ? "bear-text-green-500" : n ? "bear-text-bear-500 dark:bear-text-bear-400" : "bear-text-gray-500 dark:bear-text-gray-400"
               ) : e(
-                u.labelRest,
+                f.labelRest,
                 "bear--translate-y-1/2",
                 "bear-text-gray-500 dark:bear-text-gray-400"
               ),
-              g && "bear-opacity-50"
+              c && "bear-opacity-50"
             ),
-            style: H,
+            style: J,
             children: [
-              z,
-              M && /* @__PURE__ */ t("span", { className: "bear-text-red-500 bear-ml-0.5", children: "*" })
+              j,
+              U && /* @__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 })
+        g && /* @__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: N, children: g })
       ] }),
-      C && /* @__PURE__ */ t(
+      E && /* @__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"
+            b ? "bear-text-red-500" : d ? "bear-text-green-500" : "bear-text-gray-500 dark:bear-text-gray-400"
           ),
-          style: J,
-          children: C
+          style: K,
+          children: E
         }
       )
     ] });
   }
 );
-A.displayName = "FormField";
+tr.displayName = "FormField";
 export {
-  A as FormField
+  tr as FormField
 };

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

@@ -1,5 +1,7 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 export interface FormFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    testId?: string;
+    id?: string;
     /** Floating label text */
     label: string;
     /** Helper text below the field */

package/dist/components/FormSkeleton/FormSkeleton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("../../utils/cn.cjs");require("react");const S=require("../../utils/generateBearId.utils.cjs"),E=require("../../utils/useBearId.cjs"),o=require("../Skeleton/Skeleton.cjs"),e=require("./FormSkeleton.const.cjs"),u=({fields:s=e.FORM_SKELETON_DEFAULT_FIELDS,animation:t="pulse",id:l,testId:n,className:_})=>{const a=E.useBearId("FormSkeleton"),i=S.resolveBearId(l,a);return r.jsx("div",{id:i,"data-testid":n,className:c.cn(e.FORM_SKELETON_ROOT_CLASS,"bear-flex bear-flex-col",_),style:{gap:e.FORM_SKELETON_FIELD_GAP_PX},children:Array.from({length:s}).map((F,d)=>r.jsxs("div",{className:"Bear-FormSkeleton__field bear-flex bear-flex-col bear-gap-2",children:[r.jsx(o.Skeleton,{animation:t,width:"30%",height:e.FORM_SKELETON_LABEL_HEIGHT_PX}),r.jsx(o.Skeleton,{animation:t,width:"100%",height:e.FORM_SKELETON_FIELD_HEIGHT_PX})]},`field-${d}`))})};exports.FormSkeleton=u;

package/dist/components/FormSkeleton/FormSkeleton.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="Bear-FormSkeleton",E=3,O=14,L=40,F=16;exports.FORM_SKELETON_DEFAULT_FIELDS=E;exports.FORM_SKELETON_FIELD_GAP_PX=F;exports.FORM_SKELETON_FIELD_HEIGHT_PX=L;exports.FORM_SKELETON_LABEL_HEIGHT_PX=O;exports.FORM_SKELETON_ROOT_CLASS=_;

package/dist/components/FormSkeleton/FormSkeleton.const.d.ts

@@ -0,0 +1,5 @@
+export declare const FORM_SKELETON_ROOT_CLASS = "Bear-FormSkeleton";
+export declare const FORM_SKELETON_DEFAULT_FIELDS = 3;
+export declare const FORM_SKELETON_LABEL_HEIGHT_PX = 14;
+export declare const FORM_SKELETON_FIELD_HEIGHT_PX = 40;
+export declare const FORM_SKELETON_FIELD_GAP_PX = 16;

package/dist/components/FormSkeleton/FormSkeleton.const.js

@@ -0,0 +1,8 @@
+const _ = "Bear-FormSkeleton", E = 3, L = 14, O = 40, F = 16;
+export {
+  E as FORM_SKELETON_DEFAULT_FIELDS,
+  F as FORM_SKELETON_FIELD_GAP_PX,
+  O as FORM_SKELETON_FIELD_HEIGHT_PX,
+  L as FORM_SKELETON_LABEL_HEIGHT_PX,
+  _ as FORM_SKELETON_ROOT_CLASS
+};