@commercetools/nimbus 3.2.0 → 3.4.0

package/dist/components/tabs/components/tabs.root.d.ts

@@ -2,7 +2,8 @@ import { TabsProps } from '../tabs.types.js';
 /**
  * # Tabs
  *
- * A tabs component built on React Aria Components that allows users to switch between different views.
+ * A tabs component built on React Aria Components that allows users to switch
+ * between different views.
  *
  * @supportsStyleProps
  */

package/dist/components/tabs/tabs.recipe.d.ts

@@ -1,23 +1,79 @@
-/**
- * Recipe configuration for the Tabs component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- *
- * ⚠️  VISUAL TWIN — KEEP IN SYNC WITH `tab-nav.recipe.ts`
- * Tabs and TabNav are intentionally separate components with separate recipes
- * (different semantics: content-panel widget vs. navigation links). They do NOT
- * share a recipe. However, the `line` horizontal variant of Tabs is designed to
- * be visually identical to the `tabs` variant of TabNav. If you change colors,
- * spacing, typography, transitions, or focus styles in one, apply the equivalent
- * change to the other.
- */
-export declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "list" | "tab" | "trigger" | "panel" | "panels", {
+export declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "list" | "tab" | "indicator" | "panel" | "panels", {
     variant: {
-        line: {};
-        pills: {
+        line: {
+            indicator: {
+                background: "primary.9";
+                borderRadius: "0";
+            };
+            tab: {
+                '[data-animated="true"] &': {
+                    position: "relative";
+                    zIndex: "1";
+                };
+                '[data-animated="true"] &[data-selected]': {
+                    boxShadow: string;
+                };
+            };
+        };
+        rounded: {
+            root: {
+                colorPalette: "primary";
+            };
+            indicator: {
+                background: "colorPalette.3";
+                borderRadius: "200";
+            };
+            list: {
+                gap: "100";
+            };
             tab: {
+                readonly color: "neutral.11";
+                readonly borderRadius: "200";
+                readonly _hover: {
+                    readonly color: "colorPalette.11";
+                };
+                readonly _selected: {
+                    readonly color: "colorPalette.11";
+                    readonly background: "colorPalette.3";
+                };
+                readonly '[data-animated="true"] &': {
+                    readonly position: "relative";
+                    readonly zIndex: "1";
+                };
+                readonly '[data-animated="true"] &[data-selected]': {
+                    readonly background: "transparent";
+                };
+            };
+        };
+        pill: {
+            root: {
+                colorPalette: "primary";
+            };
+            indicator: {
+                background: "colorPalette.3";
                 borderRadius: "full";
+            };
+            list: {
+                gap: "100";
+            };
+            tab: {
+                borderRadius: "full";
+                paddingLeft: "calc(var(--tabs-padding-left) + {spacing.100})";
+                paddingRight: "calc(var(--tabs-padding-right) + {spacing.100})";
+                color: "neutral.11";
+                _hover: {
+                    readonly color: "colorPalette.11";
+                };
                 _selected: {
-                    backgroundColor: "primary.3";
+                    readonly color: "colorPalette.11";
+                    readonly background: "colorPalette.3";
+                };
+                '[data-animated="true"] &': {
+                    readonly position: "relative";
+                    readonly zIndex: "1";
+                };
+                '[data-animated="true"] &[data-selected]': {
+                    readonly background: "transparent";
                 };
             };
         };

package/dist/components/tabs/tabs.slots.d.ts

@@ -1,5 +1,5 @@
 import { SlotComponent } from '../../type-utils/index.js';
-import { TabsRootSlotProps, TabsListSlotProps, TabsTabSlotProps, TabsPanelsSlotProps, TabsPanelSlotProps } from './tabs.types.js';
+import { TabsRootSlotProps, TabsListSlotProps, TabsTabSlotProps, TabsPanelsSlotProps, TabsPanelSlotProps, TabsIndicatorSlotProps } from './tabs.types.js';
 /**
  * Root component that provides the styling context for the Tabs component.
  * Uses Chakra UI's recipe context system for consistent styling across instances.
@@ -9,3 +9,9 @@ export declare const TabsListSlot: SlotComponent<HTMLDivElement, TabsListSlotPro
 export declare const TabsTabSlot: SlotComponent<HTMLButtonElement, TabsTabSlotProps>;
 export declare const TabsPanelsSlot: SlotComponent<HTMLDivElement, TabsPanelsSlotProps>;
 export declare const TabsPanelSlot: SlotComponent<HTMLDivElement, TabsPanelSlotProps>;
+/**
+ * Internal slot for the sliding active-tab marker. Rendered automatically by
+ * `Tabs.Root` and positioned by `useSlidingIndicator` — not part of the public
+ * compound API.
+ */
+export declare const TabsIndicatorSlot: SlotComponent<HTMLDivElement, TabsIndicatorSlotProps>;

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

@@ -3,10 +3,22 @@ import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react/styled-system
 import { RouterOptions } from '../nimbus-provider/nimbus-provider.types.js';
 type TabsRecipeProps = {
     /**
-     * Visual style variant of the tabs
+     * Visual style variant of the tabs.
+     *
+     * - `line` — a bar marking the active tab: an underline when horizontal, an
+     *   inner side bar when vertical (default).
+     * - `rounded` — a soft rounded-rect highlight behind the active tab.
+     * - `pill` — a fully-rounded capsule highlight behind the active tab.
+     *
+     * The active highlight slides between tabs as the selection changes; the
+     * motion is disabled under `prefers-reduced-motion: reduce`.
+     *
+     * `"pills"` (→ `"pill"`) is accepted as a deprecated alias.
      * @default "line"
      */
-    variant?: SlotRecipeProps<"nimbusTabs">["variant"];
+    variant?: SlotRecipeProps<"nimbusTabs">["variant"]
+    /** @deprecated Use `"pill"` instead. */
+     | "pills";
     /**
      * Layout orientation of the tabs
      * @default "horizontal"
@@ -28,6 +40,7 @@ export type TabsListSlotProps = HTMLChakraProps<"div", TabsRecipeProps>;
 export type TabsTabSlotProps = HTMLChakraProps<"button", TabsRecipeProps>;
 export type TabsPanelsSlotProps = HTMLChakraProps<"div", TabsRecipeProps>;
 export type TabsPanelSlotProps = HTMLChakraProps<"div", TabsRecipeProps>;
+export type TabsIndicatorSlotProps = HTMLChakraProps<"div", TabsRecipeProps>;
 export type TabItemProps = {
     /** A unique key that associates this tab with its corresponding panel. */
     id: string;

package/dist/components/tabs.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/tabs-B50Cmf5h.cjs.js");exports.Tabs=e.t,exports._TabsList=e.a,exports._TabsPanel=e.i,exports._TabsPanels=e.r,exports._TabsRoot=e.n,exports._TabsTab=e.o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/tabs-DLr47HN_.cjs.js");exports.Tabs=e.t,exports._TabsList=e.a,exports._TabsPanel=e.i,exports._TabsPanels=e.r,exports._TabsRoot=e.n,exports._TabsTab=e.o;

package/dist/components/tabs.es.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/tabs-DomV4co7.esm.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/tabs-C7zLoP1D.esm.js";
 export { a as Tabs, e as _TabsList, t as _TabsPanel, i as _TabsPanels, n as _TabsRoot, r as _TabsTab };

package/dist/components/tag-group.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/tag-group-BR3LcQYM.cjs.js");exports.TagGroup=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/tag-group-JEE8r8Jl.cjs.js");exports.TagGroup=e.t;

package/dist/components/tag-group.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/tag-group-BO8mQ1Qf.esm.js";
+import { t as e } from "../chunks/tag-group-DKiwZtum.esm.js";
 export { e as TagGroup };

package/dist/components/text-input/text-input.recipe.d.ts

@@ -46,7 +46,7 @@ export declare const textInputSlotRecipe: import('@chakra-ui/react').SlotRecipeD
             root: {
                 "--border-width": "sizes.25";
                 "--border-color": "colors.neutral.7";
-                backgroundColor: "primary.1";
+                backgroundColor: "neutral.1";
             };
         };
         ghost: {};

package/dist/components/text-input-field.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/field-errors-D4_oFvCt.cjs.js"),t=require("../chunks/form-field-BqR6tlhi.cjs.js"),n=require("../chunks/text-input-BonnwXw4.cjs.js");let r=require("react/jsx-runtime");var i=({id:i,label:a,description:o,info:s,errors:c,onChange:l,renderError:u,touched:d=!1,isRequired:f=!1,isDisabled:p=!1,isReadOnly:m=!1,isInvalid:h=!1,size:g=`md`,value:_,placeholder:v,type:y=`text`,...b})=>{let x=d&&c&&Object.values(c).some(Boolean);return(0,r.jsxs)(t.t.Root,{id:i,size:g,isRequired:f,isDisabled:p,isReadOnly:m,isInvalid:x||h,children:[(0,r.jsx)(t.t.Label,{children:a}),(0,r.jsx)(t.t.Input,{children:(0,r.jsx)(n.t,{...b,size:g,type:y,placeholder:v,onChange:l,value:_})}),o&&(0,r.jsx)(t.t.Description,{children:o}),x&&(0,r.jsx)(t.t.Error,{children:(0,r.jsx)(e.t,{errors:c,renderError:u})}),s&&(0,r.jsx)(t.t.InfoBox,{children:s})]})};i.displayName=`TextInputField`,exports.TextInputField=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/field-errors-j8Gxj0gP.cjs.js"),t=require("../chunks/form-field-CaTJgt57.cjs.js"),n=require("../chunks/text-input-BttCyWCt.cjs.js");let r=require("react/jsx-runtime");var i=({id:i,label:a,description:o,info:s,errors:c,onChange:l,renderError:u,touched:d=!1,isRequired:f=!1,isDisabled:p=!1,isReadOnly:m=!1,isInvalid:h=!1,size:g=`md`,value:_,placeholder:v,type:y=`text`,...b})=>{let x=d&&c&&Object.values(c).some(Boolean);return(0,r.jsxs)(t.t.Root,{id:i,size:g,isRequired:f,isDisabled:p,isReadOnly:m,isInvalid:x||h,children:[(0,r.jsx)(t.t.Label,{children:a}),(0,r.jsx)(t.t.Input,{children:(0,r.jsx)(n.t,{...b,size:g,type:y,placeholder:v,onChange:l,value:_})}),o&&(0,r.jsx)(t.t.Description,{children:o}),x&&(0,r.jsx)(t.t.Error,{children:(0,r.jsx)(e.t,{errors:c,renderError:u})}),s&&(0,r.jsx)(t.t.InfoBox,{children:s})]})};i.displayName=`TextInputField`,exports.TextInputField=i;
 //# sourceMappingURL=text-input-field.cjs.map

package/dist/components/text-input-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-field.cjs","names":[],"sources":["../../src/patterns/fields/text-input-field/text-input-field.tsx"],"sourcesContent":["import { TextInput } from \"@/components/text-input/text-input\";\nimport type { TextInputFieldProps } from \"./text-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # TextInputField\n *\n * A pre-composed form field component that combines TextInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for common text input use cases and serves\n * as a drop-in replacement for UI-Kit's TextField, maintaining compatibility with the\n * same error format and localized error messages.\n *\n * @example\n * ```tsx\n * <TextInputField\n *   label=\"Project name\"\n *   description=\"Enter a descriptive name for your project\"\n *   placeholder=\"My Awesome Project\"\n *   value={value}\n *   onChange={setValue}\n *   errors={{ missing: true }}\n *   isRequired\n * />\n * ```\n */\n\nexport const TextInputField = ({\n  id,\n  label,\n  description,\n  info,\n  errors,\n  onChange,\n  renderError,\n  touched = false,\n  isRequired = false,\n  isDisabled = false,\n  isReadOnly = false,\n  isInvalid = false,\n  size = \"md\",\n  value,\n  placeholder,\n  type = \"text\",\n  ...rest\n}: TextInputFieldProps) => {\n  // Determine if we should show errors\n  const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n  return (\n    <FormField.Root\n      id={id}\n      size={size}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={hasErrors || isInvalid}\n    >\n      <FormField.Label>{label}</FormField.Label>\n      <FormField.Input>\n        <TextInput\n          {...rest}\n          size={size}\n          type={type}\n          placeholder={placeholder}\n          onChange={onChange}\n          value={value}\n        />\n      </FormField.Input>\n      {description && (\n        <FormField.Description>{description}</FormField.Description>\n      )}\n      {hasErrors && (\n        <FormField.Error>\n          <FieldErrors errors={errors} renderError={renderError} />\n        </FormField.Error>\n      )}\n      {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n    </FormField.Root>\n  );\n};\n\nTextInputField.displayName = \"TextInputField\";\n"],"mappings":"oQA4BA,IAAa,GAAkB,CAC7B,KACA,QACA,cACA,OACA,SACA,WACA,cACA,UAAU,GACV,aAAa,GACb,aAAa,GACb,aAAa,GACb,YAAY,GACZ,OAAO,KACP,QACA,cACA,OAAO,OACP,GAAG,KACsB,CAEzB,IAAM,EAAY,GAAW,GAAU,OAAO,OAAO,CAAM,EAAE,KAAK,OAAO,EAEzE,OACE,EAAA,EAAA,MAAC,EAAA,EAAU,KAAX,CACM,KACE,OACM,aACA,aACA,aACZ,UAAW,GAAa,WAN1B,EAQE,EAAA,EAAA,KAAC,EAAA,EAAU,MAAX,CAAA,SAAkB,CAAuB,CAAA,GACzC,EAAA,EAAA,KAAC,EAAA,EAAU,MAAX,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,GAAI,EACE,OACA,OACO,cACH,WACH,OACR,CAAA,CACc,CAAA,EAChB,IACC,EAAA,EAAA,KAAC,EAAA,EAAU,YAAX,CAAA,SAAwB,CAAmC,CAAA,EAE5D,IACC,EAAA,EAAA,KAAC,EAAA,EAAU,MAAX,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,EAAD,CAAqB,SAAqB,aAAc,CAAA,CACzC,CAAA,EAElB,IAAQ,EAAA,EAAA,KAAC,EAAA,EAAU,QAAX,CAAA,SAAoB,CAAwB,CAAA,CACvC,GAEpB,EAEA,EAAe,YAAc"}
+{"version":3,"file":"text-input-field.cjs","names":[],"sources":["../../src/patterns/fields/text-input-field/text-input-field.tsx"],"sourcesContent":["import { TextInput } from \"@/components/text-input/text-input\";\nimport type { TextInputFieldProps } from \"./text-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # TextInputField\n *\n * A pre-composed form field component that combines TextInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for common text input use cases and serves\n * as a drop-in replacement for UI-Kit's TextField, maintaining compatibility with the\n * same error format and localized error messages.\n *\n * @example\n * ```tsx\n * <TextInputField\n *   label=\"Project name\"\n *   description=\"Enter a descriptive name for your project\"\n *   placeholder=\"My Awesome Project\"\n *   value={value}\n *   onChange={setValue}\n *   errors={{ missing: true }}\n *   isRequired\n * />\n * ```\n */\n\nexport const TextInputField = ({\n  id,\n  label,\n  description,\n  info,\n  errors,\n  onChange,\n  renderError,\n  touched = false,\n  isRequired = false,\n  isDisabled = false,\n  isReadOnly = false,\n  isInvalid = false,\n  size = \"md\",\n  value,\n  placeholder,\n  type = \"text\",\n  ...rest\n}: TextInputFieldProps) => {\n  // Determine if we should show errors\n  const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n  return (\n    <FormField.Root\n      id={id}\n      size={size}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={hasErrors || isInvalid}\n    >\n      <FormField.Label>{label}</FormField.Label>\n      <FormField.Input>\n        <TextInput\n          {...rest}\n          size={size}\n          type={type}\n          placeholder={placeholder}\n          onChange={onChange}\n          value={value}\n        />\n      </FormField.Input>\n      {description && (\n        <FormField.Description>{description}</FormField.Description>\n      )}\n      {hasErrors && (\n        <FormField.Error>\n          <FieldErrors errors={errors} renderError={renderError} />\n        </FormField.Error>\n      )}\n      {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n    </FormField.Root>\n  );\n};\n\nTextInputField.displayName = \"TextInputField\";\n"],"mappings":"oQA4BA,IAAa,GAAkB,CAC7B,KACA,QACA,cACA,OACA,SACA,WACA,cACA,UAAU,GACV,aAAa,GACb,aAAa,GACb,aAAa,GACb,YAAY,GACZ,OAAO,KACP,QACA,cACA,OAAO,OACP,GAAG,KACsB,CAEzB,IAAM,EAAY,GAAW,GAAU,OAAO,OAAO,CAAM,CAAC,CAAC,KAAK,OAAO,EAEzE,OACE,EAAA,EAAA,KAAA,CAAC,EAAA,EAAU,KAAX,CACM,KACE,OACM,aACA,aACA,aACZ,UAAW,GAAa,WAN1B,EAQE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAU,MAAX,CAAA,SAAkB,CAAuB,CAAA,GACzC,EAAA,EAAA,IAAA,CAAC,EAAA,EAAU,MAAX,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,GAAI,EACE,OACA,OACO,cACH,WACH,OACR,CAAA,CACc,CAAA,EAChB,IACC,EAAA,EAAA,IAAA,CAAC,EAAA,EAAU,YAAX,CAAA,SAAwB,CAAmC,CAAA,EAE5D,IACC,EAAA,EAAA,IAAA,CAAC,EAAA,EAAU,MAAX,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAqB,SAAqB,aAAc,CAAA,CACzC,CAAA,EAElB,IAAQ,EAAA,EAAA,IAAA,CAAC,EAAA,EAAU,QAAX,CAAA,SAAoB,CAAwB,CAAA,CACvC,GAEpB,EAEA,EAAe,YAAc"}

package/dist/components/text-input-field.es.js

@@ -1,6 +1,6 @@
-import { t as e } from "../chunks/field-errors-DQnCYbwh.esm.js";
-import { t } from "../chunks/form-field-BxbNX6MU.esm.js";
-import { t as n } from "../chunks/text-input-Da6L5AwL.esm.js";
+import { t as e } from "../chunks/field-errors-D_EXr1kO.esm.js";
+import { t } from "../chunks/form-field-B5H98u7s.esm.js";
+import { t as n } from "../chunks/text-input-4YjslLxr.esm.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/patterns/fields/text-input-field/text-input-field.tsx
 var a = ({ id: a, label: o, description: s, info: c, errors: l, onChange: u, renderError: d, touched: f = !1, isRequired: p = !1, isDisabled: m = !1, isReadOnly: h = !1, isInvalid: g = !1, size: _ = "md", value: v, placeholder: y, type: b = "text", ...x }) => {

package/dist/components/text-input-field.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-field.es.js","names":[],"sources":["../../src/patterns/fields/text-input-field/text-input-field.tsx"],"sourcesContent":["import { TextInput } from \"@/components/text-input/text-input\";\nimport type { TextInputFieldProps } from \"./text-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # TextInputField\n *\n * A pre-composed form field component that combines TextInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for common text input use cases and serves\n * as a drop-in replacement for UI-Kit's TextField, maintaining compatibility with the\n * same error format and localized error messages.\n *\n * @example\n * ```tsx\n * <TextInputField\n *   label=\"Project name\"\n *   description=\"Enter a descriptive name for your project\"\n *   placeholder=\"My Awesome Project\"\n *   value={value}\n *   onChange={setValue}\n *   errors={{ missing: true }}\n *   isRequired\n * />\n * ```\n */\n\nexport const TextInputField = ({\n  id,\n  label,\n  description,\n  info,\n  errors,\n  onChange,\n  renderError,\n  touched = false,\n  isRequired = false,\n  isDisabled = false,\n  isReadOnly = false,\n  isInvalid = false,\n  size = \"md\",\n  value,\n  placeholder,\n  type = \"text\",\n  ...rest\n}: TextInputFieldProps) => {\n  // Determine if we should show errors\n  const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n  return (\n    <FormField.Root\n      id={id}\n      size={size}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={hasErrors || isInvalid}\n    >\n      <FormField.Label>{label}</FormField.Label>\n      <FormField.Input>\n        <TextInput\n          {...rest}\n          size={size}\n          type={type}\n          placeholder={placeholder}\n          onChange={onChange}\n          value={value}\n        />\n      </FormField.Input>\n      {description && (\n        <FormField.Description>{description}</FormField.Description>\n      )}\n      {hasErrors && (\n        <FormField.Error>\n          <FieldErrors errors={errors} renderError={renderError} />\n        </FormField.Error>\n      )}\n      {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n    </FormField.Root>\n  );\n};\n\nTextInputField.displayName = \"TextInputField\";\n"],"mappings":";;;;;AA4BA,IAAa,KAAkB,EAC7B,OACA,UACA,gBACA,SACA,WACA,aACA,gBACA,aAAU,IACV,gBAAa,IACb,gBAAa,IACb,gBAAa,IACb,eAAY,IACZ,UAAO,MACP,UACA,gBACA,UAAO,QACP,GAAG,QACsB;CAEzB,IAAM,IAAY,KAAW,KAAU,OAAO,OAAO,CAAM,EAAE,KAAK,OAAO;CAEzE,OACE,kBAAC,EAAU,MAAX;EACM;EACE;EACM;EACA;EACA;EACZ,WAAW,KAAa;YAN1B;GAQE,kBAAC,EAAU,OAAX,EAAA,UAAkB,EAAuB,CAAA;GACzC,kBAAC,EAAU,OAAX,EAAA,UACE,kBAAC,GAAD;IACE,GAAI;IACE;IACA;IACO;IACH;IACH;GACR,CAAA,EACc,CAAA;GAChB,KACC,kBAAC,EAAU,aAAX,EAAA,UAAwB,EAAmC,CAAA;GAE5D,KACC,kBAAC,EAAU,OAAX,EAAA,UACE,kBAAC,GAAD;IAAqB;IAAqB;GAAc,CAAA,EACzC,CAAA;GAElB,KAAQ,kBAAC,EAAU,SAAX,EAAA,UAAoB,EAAwB,CAAA;EACvC;;AAEpB;AAEA,EAAe,cAAc"}
+{"version":3,"file":"text-input-field.es.js","names":[],"sources":["../../src/patterns/fields/text-input-field/text-input-field.tsx"],"sourcesContent":["import { TextInput } from \"@/components/text-input/text-input\";\nimport type { TextInputFieldProps } from \"./text-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # TextInputField\n *\n * A pre-composed form field component that combines TextInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for common text input use cases and serves\n * as a drop-in replacement for UI-Kit's TextField, maintaining compatibility with the\n * same error format and localized error messages.\n *\n * @example\n * ```tsx\n * <TextInputField\n *   label=\"Project name\"\n *   description=\"Enter a descriptive name for your project\"\n *   placeholder=\"My Awesome Project\"\n *   value={value}\n *   onChange={setValue}\n *   errors={{ missing: true }}\n *   isRequired\n * />\n * ```\n */\n\nexport const TextInputField = ({\n  id,\n  label,\n  description,\n  info,\n  errors,\n  onChange,\n  renderError,\n  touched = false,\n  isRequired = false,\n  isDisabled = false,\n  isReadOnly = false,\n  isInvalid = false,\n  size = \"md\",\n  value,\n  placeholder,\n  type = \"text\",\n  ...rest\n}: TextInputFieldProps) => {\n  // Determine if we should show errors\n  const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n  return (\n    <FormField.Root\n      id={id}\n      size={size}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={hasErrors || isInvalid}\n    >\n      <FormField.Label>{label}</FormField.Label>\n      <FormField.Input>\n        <TextInput\n          {...rest}\n          size={size}\n          type={type}\n          placeholder={placeholder}\n          onChange={onChange}\n          value={value}\n        />\n      </FormField.Input>\n      {description && (\n        <FormField.Description>{description}</FormField.Description>\n      )}\n      {hasErrors && (\n        <FormField.Error>\n          <FieldErrors errors={errors} renderError={renderError} />\n        </FormField.Error>\n      )}\n      {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n    </FormField.Root>\n  );\n};\n\nTextInputField.displayName = \"TextInputField\";\n"],"mappings":";;;;;AA4BA,IAAa,KAAkB,EAC7B,OACA,UACA,gBACA,SACA,WACA,aACA,gBACA,aAAU,IACV,gBAAa,IACb,gBAAa,IACb,gBAAa,IACb,eAAY,IACZ,UAAO,MACP,UACA,gBACA,UAAO,QACP,GAAG,QACsB;CAEzB,IAAM,IAAY,KAAW,KAAU,OAAO,OAAO,CAAM,CAAC,CAAC,KAAK,OAAO;CAEzE,OACE,kBAAC,EAAU,MAAX;EACM;EACE;EACM;EACA;EACA;EACZ,WAAW,KAAa;YAN1B;GAQE,kBAAC,EAAU,OAAX,EAAA,UAAkB,EAAuB,CAAA;GACzC,kBAAC,EAAU,OAAX,EAAA,UACE,kBAAC,GAAD;IACE,GAAI;IACE;IACA;IACO;IACH;IACH;GACR,CAAA,EACc,CAAA;GAChB,KACC,kBAAC,EAAU,aAAX,EAAA,UAAwB,EAAmC,CAAA;GAE5D,KACC,kBAAC,EAAU,OAAX,EAAA,UACE,kBAAC,GAAD;IAAqB;IAAqB;GAAc,CAAA,EACzC,CAAA;GAElB,KAAQ,kBAAC,EAAU,SAAX,EAAA,UAAoB,EAAwB,CAAA;EACvC;;AAEpB;AAEA,EAAe,cAAc"}

package/dist/components/text-input.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/text-input-BonnwXw4.cjs.js");exports.TextInput=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/text-input-BttCyWCt.cjs.js");exports.TextInput=e.t;

package/dist/components/text-input.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/text-input-Da6L5AwL.esm.js";
+import { t as e } from "../chunks/text-input-4YjslLxr.esm.js";
 export { e as TextInput };

package/dist/components/text.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/text-DfLr2yJS.cjs.js");exports.Text=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/text-B6GuUYfw.cjs.js");exports.Text=e.t;

package/dist/components/text.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/text-BMfRfxWU.esm.js";
+import { t as e } from "../chunks/text-B8bxcVHh.esm.js";
 export { e as Text };

package/dist/components/time-input.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/time-input-DV-1pekk.cjs.js");exports.TimeInput=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/time-input-Cv-8dl-n.cjs.js");exports.TimeInput=e.t;

package/dist/components/time-input.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/time-input-BLYoCrZH.esm.js";
+import { t as e } from "../chunks/time-input-CJcXuGHH.esm.js";
 export { e as TimeInput };

package/dist/components/toast.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toast.manager-CC9sI9jg.cjs.js"),t=require("../chunks/toast.outlet-7YvQdNf_.cjs.js");exports.ToastOutlet=t.t,exports.toast=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toast.manager-CC9sI9jg.cjs.js"),t=require("../chunks/toast.outlet-BGy4NZoL.cjs.js");exports.ToastOutlet=t.t,exports.toast=e.n;

package/dist/components/toast.es.js

@@ -1,3 +1,3 @@
 import { n as e } from "../chunks/toast.manager-BzHzyuxg.esm.js";
-import { t } from "../chunks/toast.outlet-CrnB4Dsg.esm.js";
+import { t } from "../chunks/toast.outlet-DQ7Z1sG7.esm.js";
 export { t as ToastOutlet, e as toast };

package/dist/components/toggle-button/toggle-button.recipe.d.ts

@@ -50,6 +50,17 @@ export declare const toggleButtonRecipe: import('@chakra-ui/react').RecipeDefini
                 height: "600";
             };
         } | undefined;
+        xl?: {
+            h: "1200";
+            minW: "1200";
+            textStyle: "md";
+            px: "500";
+            gap: "250";
+            _icon: {
+                width: "700";
+                height: "700";
+            };
+        } | undefined;
     };
     variant: {
         outline: {

package/dist/components/toggle-button-group.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toggle-button-group-BHnNsAKE.cjs.js");exports.ToggleButtonGroup=e.t,exports._ToggleButtonGroupButton=e.n,exports._ToggleButtonGroupRoot=e.r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toggle-button-group-CX1M7CQN.cjs.js");exports.ToggleButtonGroup=e.t,exports._ToggleButtonGroupButton=e.n,exports._ToggleButtonGroupRoot=e.r;

package/dist/components/toggle-button-group.es.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../chunks/toggle-button-group-B5vV-_5v.esm.js";
+import { n as e, r as t, t as n } from "../chunks/toggle-button-group-CTzzGLVs.esm.js";
 export { n as ToggleButtonGroup, e as _ToggleButtonGroupButton, t as _ToggleButtonGroupRoot };

package/dist/components/toggle-button.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toggle-button-BAIsUjKm.cjs.js");exports.ToggleButton=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toggle-button-B9m2DON6.cjs.js");exports.ToggleButton=e.t;

package/dist/components/toggle-button.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/toggle-button-D8K1JATa.esm.js";
+import { t as e } from "../chunks/toggle-button-D3UZNm_4.esm.js";
 export { e as ToggleButton };

package/dist/components/toolbar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toolbar-DIHORWTk.cjs.js");exports.Toolbar=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/toolbar-CxYGox-m.cjs.js");exports.Toolbar=e.t;

package/dist/components/toolbar.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/toolbar-CSwGqSf8.esm.js";
+import { t as e } from "../chunks/toolbar-BUb2xcXt.esm.js";
 export { e as Toolbar };

package/dist/components/tooltip/components/tooltip.root.d.ts

@@ -6,7 +6,7 @@ import { TooltipTriggerComponentProps } from 'react-aria-components';
  * A contextual popup that displays a description for an element.
  *
  */
-export declare function TooltipRoot({ delay, closeDelay, ...props }: TooltipTriggerComponentProps): React.JSX.Element;
+export declare function TooltipRoot({ delay, closeDelay, isDisabled, ...props }: TooltipTriggerComponentProps): React.JSX.Element;
 export declare namespace TooltipRoot {
     var displayName: string;
 }

package/dist/components/tooltip/tooltip.d.ts

@@ -24,6 +24,7 @@ export declare const Tooltip: {
      *
      * The root component that provides state management and positioning logic.
      * Wraps the trigger element and tooltip content, handling hover and focus interactions.
+     * Pass `isDisabled` to suppress the tooltip without removing the trigger from the tree.
      *
      * @example
      * ```tsx

package/dist/components/tooltip.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/tooltip-BRcJaG5T.cjs.js"),t=require("../chunks/make-element-focusable-C9gMsJ9U.cjs.js");exports.MakeElementFocusable=t.t,exports.Tooltip=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/tooltip-BeOLEOf6.cjs.js"),t=require("../chunks/make-element-focusable-BuHQPO7h.cjs.js");exports.MakeElementFocusable=t.t,exports.Tooltip=e.t;

package/dist/components/tooltip.es.js

@@ -1,3 +1,3 @@
-import { t as e } from "../chunks/tooltip-CIrPCE0d.esm.js";
-import { t } from "../chunks/make-element-focusable-7aEYoh_8.esm.js";
+import { t as e } from "../chunks/tooltip-BuWKSmHt.esm.js";
+import { t } from "../chunks/make-element-focusable-OSQcKuJr.esm.js";
 export { t as MakeElementFocusable, e as Tooltip };

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

@@ -0,0 +1,5 @@
+export { TreeRoot } from './tree.root.js';
+export { TreeItem } from './tree.item.js';
+export { TreeItemContent } from './tree.item-content.js';
+export { TreeIndicator } from './tree.indicator.js';
+export { TreeSubTree } from './tree.sub-tree.js';

package/dist/components/tree/components/tree.indicator.d.ts

@@ -0,0 +1,15 @@
+import { TreeIndicatorProps } from '../tree.types.js';
+/**
+ * Tree.Indicator
+ *
+ * The expand/collapse chevron button. React Aria wires it to the row's
+ * expansion state via the `chevron` slot, and provides a localized accessible
+ * name. The recipe hides it for leaf items and rotates it when expanded.
+ * Renders a default chevron icon that can be overridden via `children`.
+ *
+ * @supportsStyleProps
+ */
+export declare const TreeIndicator: {
+    ({ children, ref, ...props }: TreeIndicatorProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/tree/components/tree.item-content.d.ts

@@ -0,0 +1,16 @@
+import { TreeItemContentProps } from '../tree.types.js';
+/**
+ * Tree.ItemContent
+ *
+ * The content row of a tree item. Lays out, in leading order, an optional drag
+ * handle (rendered automatically when the tree allows dragging), an optional
+ * selection checkbox (rendered automatically in multiple-selection mode), the
+ * expand/collapse indicator, and the item's label. Indentation by nesting level
+ * is applied here.
+ *
+ * @supportsStyleProps
+ */
+export declare const TreeItemContent: {
+    ({ children, ref, ...props }: TreeItemContentProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/tree/components/tree.item.d.ts

@@ -0,0 +1,14 @@
+import { TreeItemProps } from '../tree.types.js';
+/**
+ * Tree.Item
+ *
+ * A single node in the tree (`role="row"`). Contains a `Tree.ItemContent`
+ * and, optionally, nested `Tree.Item` elements (or a React Aria `Collection`
+ * for dynamic children).
+ *
+ * @supportsStyleProps
+ */
+export declare const TreeItem: {
+    <T extends object>({ children, textValue, ref, ...props }: TreeItemProps<T>): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/tree/components/tree.root.d.ts

@@ -0,0 +1,14 @@
+import { TreeRootProps } from '../tree.types.js';
+/**
+ * Tree.Root
+ *
+ * The root container for the tree. Wraps React Aria's `Tree`, providing the
+ * recipe context, keyboard navigation, expand/collapse, type-ahead, selection
+ * and opt-in drag-and-drop (via the `dragAndDropHooks` prop).
+ *
+ * @supportsStyleProps
+ */
+export declare const TreeRoot: {
+    <T extends object>(props: TreeRootProps<T>): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/components/tree/components/tree.sub-tree.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { TreeSubTreeProps } from '../tree.types.js';
+/**
+ * Tree.SubTree
+ *
+ * Renders an item's nested children. Supports both static composition (nested
+ * `Tree.Item` elements as `children`) and dynamic collections (an `items` array
+ * plus a render function). Internally wraps React Aria's `Collection` so
+ * consumers never import it from `react-aria-components` directly.
+ *
+ * Renders nothing when `items` is an empty iterable, so callers don't need a
+ * `children?.length` guard.
+ */
+export declare function TreeSubTree<T extends object>({ items, children, }: TreeSubTreeProps<T>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare namespace TreeSubTree {
+    var displayName: string;
+}

package/dist/components/tree/hooks/use-tree.d.ts

@@ -0,0 +1,65 @@
+import { Key } from 'react-aria-components';
+import { TreeOptions, TreeData } from 'react-stately';
+import { TreeRootProps } from '../tree.types.js';
+/**
+ * Tree.Root configuration that `useTree` accepts and echoes back so the whole
+ * result can be spread onto `Tree.Root`.
+ */
+type ForwardableRootProps<T extends object> = Pick<TreeRootProps<T>, "selectionMode" | "disabledKeys" | "defaultExpandedKeys" | "expandedKeys" | "onExpandedChange" | "defaultSelectedKeys" | "selectedKeys" | "onSelectionChange">;
+/** Imperative tree-data operations exposed on the `useTree` result. */
+type TreeController<T extends object> = Pick<TreeData<T>, "getItem" | "insert" | "insertBefore" | "insertAfter" | "append" | "prepend" | "remove" | "move" | "moveBefore" | "moveAfter" | "update">;
+/** Options for opting into drag-and-drop on a tree. */
+export type UseTreeDragAndDropOptions = {
+    /**
+     * Build the drag data for the dragged keys. Defaults to a `text/plain`
+     * representation of each key.
+     */
+    getItems?: (keys: Set<Key>) => Array<Record<string, string>>;
+    /** Drag types accepted from external sources. */
+    acceptedDragTypes?: Array<string | symbol>;
+};
+/**
+ * Options for {@link useTree}. Combines React Stately's tree-data options with
+ * the `Tree.Root` configuration you want forwarded and opt-in drag-and-drop.
+ */
+export type UseTreeOptions<T extends object> = TreeOptions<T> & ForwardableRootProps<T> & {
+    /**
+     * Enable drag-and-drop. `true` wires sensible reorder + re-parent handlers;
+     * pass an object to customize the drag data or accepted external types.
+     */
+    dragAndDrop?: boolean | UseTreeDragAndDropOptions;
+};
+/**
+ * The value returned by {@link useTree}. Spread it onto `Tree.Root` to wire up
+ * items, drag-and-drop, and selection/expansion config; the imperative
+ * controller methods are available on the same object for programmatic edits.
+ */
+export type UseTreeResult<T extends object> = ForwardableRootProps<T> & TreeController<T> & {
+    /** The current root nodes — pass to `Tree.Root`'s `items`. */
+    items: TreeData<T>["items"];
+    /** Drag-and-drop hooks for `Tree.Root` (present only when enabled). */
+    dragAndDropHooks?: TreeRootProps<T>["dragAndDropHooks"];
+};
+/**
+ * `useTree` — the single entry point for a data-driven, optionally draggable
+ * Nimbus tree. It owns the hierarchical state (via React Stately's
+ * `useTreeData`) and, when enabled, drag-and-drop (reorder between siblings and
+ * re-parent by dropping onto a group). The result is designed to be spread
+ * straight onto `Tree.Root`, so consumers never import from
+ * `react-aria-components` or `react-stately` themselves.
+ *
+ * @example
+ * ```tsx
+ * const tree = useTree({
+ *   initialItems: data,
+ *   getKey: (item) => item.id,
+ *   getChildren: (item) => item.children ?? [],
+ *   selectionMode: "multiple",
+ *   dragAndDrop: true,
+ * });
+ *
+ * return <Tree.Root aria-label="Files" {...tree}>{renderItem}</Tree.Root>;
+ * ```
+ */
+export declare function useTree<T extends object>(options: UseTreeOptions<T>): UseTreeResult<T>;
+export {};

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

@@ -0,0 +1,4 @@
+export * from './tree.js';
+export * from './tree.types.js';
+export * from './hooks/use-tree.js';
+export type { Key, Selection } from 'react-aria-components';