@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

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

@@ -1,38 +1,66 @@
+import type { ElementType, ReactNode } from 'react';
 import { TagRootProps } from '@chakra-ui/react';
+import type { SystemHue } from '@/theme/colors';
+import type { PolymorphicProps } from '../../types/polymorphic';
 /**
- * Tag color schemes - determines the semantic color of the tag.
+ * Tag tones (5.0).
  *
- * This prop overrides Chakra UI's native `colorPalette` prop to provide
- * a controlled set of color options that align with our design system.
+ * - `neutral` (default): neutral `bg.muted` with `fg.default` text (hover border `secondary.border`).
+ * - `success` / `warning` / `danger` / `info`: status family `.bg` + `.fg`.
+ *   Use them only when the tag reports a status.
+ */
+export type TagTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+/**
+ * 4.x colour palettes. Removed from `TagProps` in 5.0; still accepted at
+ * runtime (mapped to `tone` / `selected`) with a one-time dev warning.
+ * @deprecated Use `tone`, `selected` or `category`.
  */
 export type TagColorPalette = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'neutral';
 /**
- * Tag variants - determines the visual style of the tag.
- *
- * - soft: Light background tint with darker text (default)
- * - solid: Filled background with contrasting text
- * - outline: Transparent background with colored border
+ * 4.x visual variants. Removed from `TagProps` in 5.0 (`outline` is gone).
+ * @deprecated Use `tone`, `selected` or `category`.
  */
 export type TagVariant = 'soft' | 'solid' | 'outline';
+export type TagOwnProps = Omit<TagRootProps, 'colorPalette' | 'variant' | 'as'> & {
+    /**
+     * Colour role of the tag. Ignored while `selected` is true or `category`
+     * is set.
+     * @default 'neutral'
+     */
+    tone?: TagTone;
+    /**
+     * Filter-chip "on" state: black `primary.main` fill with `fg.onPrimary`
+     * text. Passing it (true OR false) marks the tag as a toggle, so it gets
+     * the interactive hover; with `as="button"` it also sets `aria-pressed`.
+     */
+    selected?: boolean;
+    /**
+     * Decorative category colour (no status meaning): `category.{hue}.surface`
+     * fill with `fg.default` text. `icon` is coloured `category.{hue}.fg`.
+     */
+    category?: SystemHue;
+    /**
+     * Leading icon / mark. Takes `category.{hue}.fg` when `category` is set,
+     * otherwise the tag's text colour.
+     */
+    icon?: ReactNode;
+    /**
+     * Disabled: fixed `disabled.bg` / `disabled.fg`, no hover, clicks ignored.
+     * With `as="button"` it sets the native `disabled` attribute.
+     */
+    disabled?: boolean;
+};
 /**
- * TagProps uses a two-dimensional variant system:
- * - `colorPalette`: What semantic color (primary, secondary, danger, etc.)
- * - `variant`: How it looks visually (soft, solid, outline)
- *
- * This matches the Button and Chip component architecture for consistency.
+ * Props for `Tag`, typed for whatever element `as` renders. Defaults to
+ * `'span'`. A filter chip should render `as="button"` (or `as="a"` when it
+ * navigates) so it is focusable and keyboard-operable.
  *
- * @example
  * ```tsx
- * <Tag colorPalette="primary" variant="soft">Category</Tag>
- * <Tag colorPalette="danger" variant="solid">Error</Tag>
- * <Tag colorPalette="success" variant="outline">
- *   Completed
- *   <TagCloseButton />
- * </Tag>
+ * <Tag>Draft</Tag>
+ * <Tag tone="success">Active</Tag>
+ * <Tag as="button" selected={on} onClick={toggle}>Images</Tag>
+ * <Tag category="blue" icon="#">design</Tag>
  * ```
  */
-export interface TagProps extends Omit<TagRootProps, 'colorPalette' | 'variant'> {
-    colorPalette?: TagColorPalette;
-    variant?: TagVariant;
-}
+export type TagProps<TElement extends ElementType = 'span'> = PolymorphicProps<TElement, TagOwnProps>;
 //# sourceMappingURL=Tag.types.d.ts.map

package/dist/components/Tag/Tag.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,QAAS,SAAQ,IAAI,CACpC,YAAY,EACZ,cAAc,GAAG,SAAS,CAC3B;IACC,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB"}
+{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;;;;;GAMG;AACH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5E;;;;GAIG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,YAAY,EACZ,cAAc,GAAG,SAAS,GAAG,IAAI,CAClC,GAAG;IACF;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,QAAQ,CAAC,QAAQ,SAAS,WAAW,GAAG,MAAM,IAAI,gBAAgB,CAC5E,QAAQ,EACR,WAAW,CACZ,CAAC"}

package/dist/components/Tag/TagCloseButton/TagCloseButton.d.ts

@@ -1,3 +1,8 @@
 import { TagCloseButtonProps } from './TagCloseButton.types';
+/**
+ * The remove (×) trigger inside a `Tag`. Inherits the tag's text colour and
+ * sits at reduced opacity until hovered, so the label stays the loudest thing
+ * in the tag.
+ */
 export declare const TagCloseButton: import("react").ForwardRefExoticComponent<TagCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=TagCloseButton.d.ts.map

package/dist/components/Tag/TagCloseButton/TagCloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagCloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAO,MAAM,cAAc,mHAQ1B,CAAC"}
+{"version":3,"file":"TagCloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,cAAc,mHAmB1B,CAAC"}

package/dist/components/Tag/TagCloseButton/TagCloseButton.js

@@ -4,9 +4,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@chakra-ui/react');
+var focusRing = require('../../../utils/focusRing.js');
 
+/**
+ * The remove (×) trigger inside a `Tag`. Inherits the tag's text colour and
+ * sits at reduced opacity until hovered, so the label stays the loudest thing
+ * in the tag.
+ */
 const TagCloseButton = React.forwardRef(({ ...rest }, ref) => {
-    return (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { cursor: "pointer", ...rest, ref: ref }) }));
+    return (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { cursor: "pointer", color: "currentColor", opacity: 0.6, transitionProperty: "opacity", transitionDuration: "fast", transitionTimingFunction: "standard", _hover: { opacity: 1 }, ...focusRing.focusRing, ...rest, ref: ref }) }));
 });
 TagCloseButton.displayName = 'TagCloseButton';
 

package/dist/components/Tag/TagCloseButton/TagCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagCloseButton.js","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","Tag"],"mappings":";;;;;;;AAKO,MAAM,cAAc,GAAGA,gBAAU,CACtC,CAAC,EAAE,GAAG,IAAI,EAAuB,EAAE,GAAqC,KAAI;IAC1E,QACEC,eAACC,SAAG,CAAC,UAAU,EAAA,EAAA,QAAA,EACbD,cAAA,CAACC,SAAG,CAAC,YAAY,EAAA,EAAC,MAAM,EAAC,SAAS,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,EAAA,CAC1C;AAErB,CAAC;AAGH,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"TagCloseButton.js","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","Tag","focusRing"],"mappings":";;;;;;;;AAOA;;;;AAIG;AACI,MAAM,cAAc,GAAGA,gBAAU,CACtC,CAAC,EAAE,GAAG,IAAI,EAAuB,EAAE,GAAqC,KAAI;IAC1E,QACEC,cAAA,CAACC,SAAG,CAAC,UAAU,cACbD,cAAA,CAACC,SAAG,CAAC,YAAY,EAAA,EACf,MAAM,EAAC,SAAS,EAChB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EACZ,kBAAkB,EAAC,SAAS,EAC5B,kBAAkB,EAAC,MAAM,EACzB,wBAAwB,EAAC,UAAU,EACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAA,GAClBC,mBAAS,EAAA,GACT,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR,EAAA,CACa;AAErB,CAAC;AAGH,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/dist/components/Tag/TagCloseButton/TagCloseButton.mjs

@@ -2,9 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Tag } from '@chakra-ui/react';
+import { focusRing } from '../../../utils/focusRing.mjs';
 
+/**
+ * The remove (×) trigger inside a `Tag`. Inherits the tag's text colour and
+ * sits at reduced opacity until hovered, so the label stays the loudest thing
+ * in the tag.
+ */
 const TagCloseButton = forwardRef(({ ...rest }, ref) => {
-    return (jsx(Tag.EndElement, { children: jsx(Tag.CloseTrigger, { cursor: "pointer", ...rest, ref: ref }) }));
+    return (jsx(Tag.EndElement, { children: jsx(Tag.CloseTrigger, { cursor: "pointer", color: "currentColor", opacity: 0.6, transitionProperty: "opacity", transitionDuration: "fast", transitionTimingFunction: "standard", _hover: { opacity: 1 }, ...focusRing, ...rest, ref: ref }) }));
 });
 TagCloseButton.displayName = 'TagCloseButton';
 

package/dist/components/Tag/TagCloseButton/TagCloseButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagCloseButton.mjs","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAKO,MAAM,cAAc,GAAG,UAAU,CACtC,CAAC,EAAE,GAAG,IAAI,EAAuB,EAAE,GAAqC,KAAI;IAC1E,QACEA,IAAC,GAAG,CAAC,UAAU,EAAA,EAAA,QAAA,EACbA,GAAA,CAAC,GAAG,CAAC,YAAY,EAAA,EAAC,MAAM,EAAC,SAAS,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,EAAA,CAC1C;AAErB,CAAC;AAGH,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"TagCloseButton.mjs","sources":["../../../../src/components/Tag/TagCloseButton/TagCloseButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAOA;;;;AAIG;AACI,MAAM,cAAc,GAAG,UAAU,CACtC,CAAC,EAAE,GAAG,IAAI,EAAuB,EAAE,GAAqC,KAAI;IAC1E,QACEA,GAAA,CAAC,GAAG,CAAC,UAAU,cACbA,GAAA,CAAC,GAAG,CAAC,YAAY,EAAA,EACf,MAAM,EAAC,SAAS,EAChB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EACZ,kBAAkB,EAAC,SAAS,EAC5B,kBAAkB,EAAC,MAAM,EACzB,wBAAwB,EAAC,UAAU,EACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAA,GAClB,SAAS,EAAA,GACT,IAAI,EACR,GAAG,EAAE,GAAG,EAAA,CACR,EAAA,CACa;AAErB,CAAC;AAGH,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

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

@@ -1,7 +1,8 @@
 import { Icon } from '@chakra-ui/react';
 export { Tag } from './Tag';
-export { getTagStyles, tagColorPalettes, tagColorPaletteStyles, tagVariants, } from './Tag.styles';
-export type { TagColorPalette, TagProps, TagVariant } from './Tag.types';
+export type { LegacyTagResolution, TagStyleOptions } from './Tag.styles';
+export { getTagStyles, mapLegacyTagProps, tagTones, tagToneStyles, } from './Tag.styles';
+export type { TagColorPalette, TagOwnProps, TagProps, TagTone, TagVariant, } from './Tag.types';
 export * from './TagCloseButton';
 export * from './TagLabel';
 /**

package/dist/components/Tag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzE,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAE3B;;GAEG;AACH,OAAO,EAAE,IAAI,IAAI,WAAW,EAAE,CAAC;AAE/B;;GAEG;AACH,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,eAAe,EACf,WAAW,EACX,QAAQ,EACR,OAAO,EACP,UAAU,GACX,MAAM,aAAa,CAAC;AACrB,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAE3B;;GAEG;AACH,OAAO,EAAE,IAAI,IAAI,WAAW,EAAE,CAAC;AAE/B;;GAEG;AACH,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,QAAQ,+GAiGpB,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,QAAQ,+GAmGpB,CAAC"}

package/dist/components/Textarea/Textarea.js

@@ -4,6 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@chakra-ui/react');
+var formControls = require('../../theme/formControls.js');
+var disabledControl = require('../../utils/disabledControl.js');
 var mergeCss = require('../../utils/mergeCss.js');
 
 const Textarea = React.forwardRef(({ placeholder, onChange, value: propValue, _focusVisible, _hover, _focus, disabled, invalid, readOnly, borderColor, css, ...props }, ref) => {
@@ -23,19 +25,22 @@ const Textarea = React.forwardRef(({ placeholder, onChange, value: propValue, _f
         // `Textarea` recipe does not — so the focus ring defaults to
         // `colorPalette.focusRing` (gray.400) and ends up visibly
         // different from Input/Select. Mirror Input's chain explicitly.
-        focusRingColor: invalid ? 'danger.main' : 'primary.main', borderColor: borderColor ?? (invalid ? 'danger.main' : 'border.default'), _hover: {
-            borderColor: invalid ? 'danger.main' : 'primary.lighter',
+        focusRingColor: invalid ? 'danger.solid' : 'primary.main', borderColor: borderColor ?? (invalid ? 'danger.solid' : 'border.control'), _hover: {
+            borderColor: invalid ? 'danger.solid' : 'fg.icon',
             ..._hover,
         }, _focus: {
-            borderColor: invalid ? 'danger.main' : 'primary.main',
+            borderColor: invalid ? 'danger.solid' : 'primary.main',
+            boxShadow: invalid
+                ? 'none'
+                : '0 0 0 1px var(--chakra-colors-primary-main)',
             ..._focus,
         }, _invalid: {
-            borderColor: 'danger.main',
+            borderColor: 'danger.solid',
             _hover: {
-                borderColor: 'danger.main',
+                borderColor: 'danger.solid',
             },
             _focus: {
-                borderColor: 'danger.main',
+                borderColor: 'danger.solid',
             },
         }, _readOnly: {
             opacity: 1,
@@ -44,14 +49,12 @@ const Textarea = React.forwardRef(({ placeholder, onChange, value: propValue, _f
             color: 'fg.muted',
             borderColor: 'border.subtle',
         }, _disabled: {
-            opacity: 1,
+            ...disabledControl.disabledControl,
             cursor: 'not-allowed',
-            bg: 'bg.subtle',
-            color: { base: 'gray.1000', _dark: 'gray.400' },
             fontWeight: 'semibold',
-        }, ...props, css: mergeCss.mergeCss({
+        }, ...props, css: mergeCss.mergeCss(formControls.noZoomOnFocus, {
             '--focus-color': 'var(--chakra-colors-primary-main)',
-            '--error-color': 'var(--chakra-colors-danger-main)',
+            '--error-color': 'var(--chakra-colors-danger-solid)',
         }, css) }));
 });
 Textarea.displayName = 'Textarea';

package/dist/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":["forwardRef","useState","useEffect","_jsx","ChakraTextarea","mergeCss"],"mappings":";;;;;;;;AAOO,MAAM,QAAQ,GAAGA,gBAAU,CAChC,CACE,EACE,WAAW,EACX,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,WAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGC,cAAQ,CAE9C,SAAS,CAAC;IAEZC,eAAS,CAAC,MAAK;QACb,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,YAAY,GAAG,CAAC,CAAmC,KAAI;AAC3D,QAAA,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAE/B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC;QACb;AACF,IAAA,CAAC;AAED,IAAA,QACEC,cAAA,CAACC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,IAAI,SAAS,EAClC,MAAM,EAAC,MAAM,EACb,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY;;;;;;AAMlB,QAAA,cAAc,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,EACxD,WAAW,EACT,WAAW,KAAK,OAAO,GAAG,aAAa,GAAG,gBAAgB,CAAC,EAE7D,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,aAAa,GAAG,iBAAiB;AACxD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc;AACrD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,QAAQ,EAAE;AACR,YAAA,WAAW,EAAE,aAAa;AAC1B,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,aAAa;AAC3B,aAAA;AACD,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,aAAa;AAC3B,aAAA;AACF,SAAA,EACD,SAAS,EAAE;AACT,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,WAAW,EAAE,eAAe;AAC7B,SAAA,EACD,SAAS,EAAE;AACT,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,EAAE,EAAE,WAAW;YACf,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE;AAC/C,YAAA,UAAU,EAAE,UAAU;AACvB,SAAA,EAAA,GACG,KAAK,EACT,GAAG,EAAEC,iBAAQ,CACX;AACE,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,eAAe,EAAE,kCAAkC;AACpD,SAAA,EACD,GAAG,CACJ,EAAA,CACD;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":["forwardRef","useState","useEffect","_jsx","ChakraTextarea","disabledControl","mergeCss","noZoomOnFocus"],"mappings":";;;;;;;;;;AASO,MAAM,QAAQ,GAAGA,gBAAU,CAChC,CACE,EACE,WAAW,EACX,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,WAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGC,cAAQ,CAE9C,SAAS,CAAC;IAEZC,eAAS,CAAC,MAAK;QACb,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,YAAY,GAAG,CAAC,CAAmC,KAAI;AAC3D,QAAA,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAE/B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC;QACb;AACF,IAAA,CAAC;AAED,IAAA,QACEC,cAAA,CAACC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,IAAI,SAAS,EAClC,MAAM,EAAC,MAAM,EACb,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY;;;;;;AAMlB,QAAA,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,cAAc,EACzD,WAAW,EACT,WAAW,KAAK,OAAO,GAAG,cAAc,GAAG,gBAAgB,CAAC,EAE9D,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,cAAc,GAAG,SAAS;AACjD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,cAAc,GAAG,cAAc;AACtD,YAAA,SAAS,EAAE;AACT,kBAAE;AACF,kBAAE,6CAA6C;AACjD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,QAAQ,EAAE;AACR,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,cAAc;AAC5B,aAAA;AACD,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,cAAc;AAC5B,aAAA;AACF,SAAA,EACD,SAAS,EAAE;AACT,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,WAAW,EAAE,eAAe;AAC7B,SAAA,EACD,SAAS,EAAE;AACT,YAAA,GAAGC,+BAAe;AAClB,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,UAAU,EAAE,UAAU;AACvB,SAAA,EAAA,GACG,KAAK,EACT,GAAG,EAAEC,iBAAQ,CACXC,0BAAa,EACb;AACE,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,eAAe,EAAE,mCAAmC;AACrD,SAAA,EACD,GAAG,CACJ,EAAA,CACD;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/Textarea/Textarea.mjs

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect } from 'react';
 import { Textarea as Textarea$1 } from '@chakra-ui/react';
+import { noZoomOnFocus } from '../../theme/formControls.mjs';
+import { disabledControl } from '../../utils/disabledControl.mjs';
 import { mergeCss } from '../../utils/mergeCss.mjs';
 
 const Textarea = forwardRef(({ placeholder, onChange, value: propValue, _focusVisible, _hover, _focus, disabled, invalid, readOnly, borderColor, css, ...props }, ref) => {
@@ -21,19 +23,22 @@ const Textarea = forwardRef(({ placeholder, onChange, value: propValue, _focusVi
         // `Textarea` recipe does not — so the focus ring defaults to
         // `colorPalette.focusRing` (gray.400) and ends up visibly
         // different from Input/Select. Mirror Input's chain explicitly.
-        focusRingColor: invalid ? 'danger.main' : 'primary.main', borderColor: borderColor ?? (invalid ? 'danger.main' : 'border.default'), _hover: {
-            borderColor: invalid ? 'danger.main' : 'primary.lighter',
+        focusRingColor: invalid ? 'danger.solid' : 'primary.main', borderColor: borderColor ?? (invalid ? 'danger.solid' : 'border.control'), _hover: {
+            borderColor: invalid ? 'danger.solid' : 'fg.icon',
             ..._hover,
         }, _focus: {
-            borderColor: invalid ? 'danger.main' : 'primary.main',
+            borderColor: invalid ? 'danger.solid' : 'primary.main',
+            boxShadow: invalid
+                ? 'none'
+                : '0 0 0 1px var(--chakra-colors-primary-main)',
             ..._focus,
         }, _invalid: {
-            borderColor: 'danger.main',
+            borderColor: 'danger.solid',
             _hover: {
-                borderColor: 'danger.main',
+                borderColor: 'danger.solid',
             },
             _focus: {
-                borderColor: 'danger.main',
+                borderColor: 'danger.solid',
             },
         }, _readOnly: {
             opacity: 1,
@@ -42,14 +47,12 @@ const Textarea = forwardRef(({ placeholder, onChange, value: propValue, _focusVi
             color: 'fg.muted',
             borderColor: 'border.subtle',
         }, _disabled: {
-            opacity: 1,
+            ...disabledControl,
             cursor: 'not-allowed',
-            bg: 'bg.subtle',
-            color: { base: 'gray.1000', _dark: 'gray.400' },
             fontWeight: 'semibold',
-        }, ...props, css: mergeCss({
+        }, ...props, css: mergeCss(noZoomOnFocus, {
             '--focus-color': 'var(--chakra-colors-primary-main)',
-            '--error-color': 'var(--chakra-colors-danger-main)',
+            '--error-color': 'var(--chakra-colors-danger-solid)',
         }, css) }));
 });
 Textarea.displayName = 'Textarea';

package/dist/components/Textarea/Textarea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.mjs","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraTextarea"],"mappings":";;;;;;AAOO,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,WAAW,EACX,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,WAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAE9C,SAAS,CAAC;IAEZ,SAAS,CAAC,MAAK;QACb,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,YAAY,GAAG,CAAC,CAAmC,KAAI;AAC3D,QAAA,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAE/B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC;QACb;AACF,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAACC,UAAc,IACb,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,IAAI,SAAS,EAClC,MAAM,EAAC,MAAM,EACb,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY;;;;;;AAMlB,QAAA,cAAc,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,EACxD,WAAW,EACT,WAAW,KAAK,OAAO,GAAG,aAAa,GAAG,gBAAgB,CAAC,EAE7D,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,aAAa,GAAG,iBAAiB;AACxD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc;AACrD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,QAAQ,EAAE;AACR,YAAA,WAAW,EAAE,aAAa;AAC1B,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,aAAa;AAC3B,aAAA;AACD,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,aAAa;AAC3B,aAAA;AACF,SAAA,EACD,SAAS,EAAE;AACT,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,WAAW,EAAE,eAAe;AAC7B,SAAA,EACD,SAAS,EAAE;AACT,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,EAAE,EAAE,WAAW;YACf,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE;AAC/C,YAAA,UAAU,EAAE,UAAU;AACvB,SAAA,EAAA,GACG,KAAK,EACT,GAAG,EAAE,QAAQ,CACX;AACE,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,eAAe,EAAE,kCAAkC;AACpD,SAAA,EACD,GAAG,CACJ,EAAA,CACD;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Textarea.mjs","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraTextarea"],"mappings":";;;;;;;;AASO,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,WAAW,EACX,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,WAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAE9C,SAAS,CAAC;IAEZ,SAAS,CAAC,MAAK;QACb,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,YAAY,GAAG,CAAC,CAAmC,KAAI;AAC3D,QAAA,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAE/B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC;QACb;AACF,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAACC,UAAc,IACb,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,OAAO,IAAI,SAAS,EAClC,MAAM,EAAC,MAAM,EACb,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY;;;;;;AAMlB,QAAA,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,cAAc,EACzD,WAAW,EACT,WAAW,KAAK,OAAO,GAAG,cAAc,GAAG,gBAAgB,CAAC,EAE9D,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,cAAc,GAAG,SAAS;AACjD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,MAAM,EAAE;YACN,WAAW,EAAE,OAAO,GAAG,cAAc,GAAG,cAAc;AACtD,YAAA,SAAS,EAAE;AACT,kBAAE;AACF,kBAAE,6CAA6C;AACjD,YAAA,GAAG,MAAM;AACV,SAAA,EACD,QAAQ,EAAE;AACR,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,cAAc;AAC5B,aAAA;AACD,YAAA,MAAM,EAAE;AACN,gBAAA,WAAW,EAAE,cAAc;AAC5B,aAAA;AACF,SAAA,EACD,SAAS,EAAE;AACT,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,WAAW,EAAE,eAAe;AAC7B,SAAA,EACD,SAAS,EAAE;AACT,YAAA,GAAG,eAAe;AAClB,YAAA,MAAM,EAAE,aAAa;AACrB,YAAA,UAAU,EAAE,UAAU;AACvB,SAAA,EAAA,GACG,KAAK,EACT,GAAG,EAAE,QAAQ,CACX,aAAa,EACb;AACE,YAAA,eAAe,EAAE,mCAAmC;AACpD,YAAA,eAAe,EAAE,mCAAmC;AACrD,SAAA,EACD,GAAG,CACJ,EAAA,CACD;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/Toast/Toast.d.ts

@@ -2,8 +2,12 @@ import { ToastProps } from './Toast.types';
 /**
  * Toast component using Chakra UI v3 composition pattern
  *
- * Uses Toast.Root, Toast.Title, Toast.Description, and Toast.CloseTrigger
- * for better composition and customization.
+ * Uses Toast.Root, Toast.Title, Toast.Description, Toast.ActionTrigger and
+ * Toast.CloseTrigger for better composition and customization.
+ *
+ * `action` renders under the description as a text action in the status
+ * color, aligned with the text column. Don't put a `<Button>` in
+ * `description` — use `action`.
  */
-export declare const Toast: ({ title, description, status, onClose, ...rest }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toast: ({ title, description, status, onClose, action, ...rest }: ToastProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Toast.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAAI,kDAMnB,UAAU,4CA+BZ,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,GAAI,0DAOnB,UAAU,4CAuCZ,CAAC"}

package/dist/components/Toast/Toast.js

@@ -9,10 +9,14 @@ var ToastIcon = require('./ToastIcon/ToastIcon.js');
 /**
  * Toast component using Chakra UI v3 composition pattern
  *
- * Uses Toast.Root, Toast.Title, Toast.Description, and Toast.CloseTrigger
- * for better composition and customization.
+ * Uses Toast.Root, Toast.Title, Toast.Description, Toast.ActionTrigger and
+ * Toast.CloseTrigger for better composition and customization.
+ *
+ * `action` renders under the description as a text action in the status
+ * color, aligned with the text column. Don't put a `<Button>` in
+ * `description` — use `action`.
  */
-const Toast = ({ title, description, status = 'success', onClose, ...rest }) => (jsxRuntime.jsxs(react.Toast.Root, { width: { md: 'sm' }, borderWidth: "1px", borderRadius: "md", boxShadow: "lg", pointerEvents: "auto", ...rest, children: [jsxRuntime.jsxs(react.Flex, { align: "center", gap: 2, children: [jsxRuntime.jsx(ToastIcon.ToastIcon, { status: status }), jsxRuntime.jsxs(react.Stack, { gap: 1, flex: 1, maxWidth: "100%", children: [title && (jsxRuntime.jsx(react.Toast.Title, { fontWeight: "bold", fontSize: "h5", children: title })), description && (jsxRuntime.jsx(react.Toast.Description, { color: "inherit", fontWeight: "semibold", children: description }))] })] }), jsxRuntime.jsx(react.Toast.CloseTrigger, { onClick: onClose, cursor: "pointer", ...Toast_styles.closeButtonStyles[status] })] }));
+const Toast = ({ title, description, status = 'neutral', onClose, action, ...rest }) => (jsxRuntime.jsxs(react.Toast.Root, { width: { md: 'sm' }, borderWidth: "1px", borderRadius: "md", boxShadow: "lg", pointerEvents: "auto", ...rest, children: [jsxRuntime.jsxs(react.Flex, { align: "center", gap: 2, children: [jsxRuntime.jsx(ToastIcon.ToastIcon, { status: status }), jsxRuntime.jsxs(react.Stack, { gap: 1, flex: 1, maxWidth: "100%", children: [title && (jsxRuntime.jsx(react.Toast.Title, { fontWeight: "bold", fontSize: "h5", children: title })), description && (jsxRuntime.jsx(react.Toast.Description, { color: "inherit", fontWeight: "semibold", children: description })), action && (jsxRuntime.jsx(react.Toast.ActionTrigger, { onClick: action.onClick, ...Toast_styles.actionStyles[status], children: action.label }))] })] }), jsxRuntime.jsx(react.Toast.CloseTrigger, { onClick: onClose, cursor: "pointer", ...Toast_styles.closeButtonStyles[status] })] }));
 
 exports.Toast = Toast;
 //# sourceMappingURL=Toast.js.map

package/dist/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraToast","Flex","_jsx","ToastIcon","Stack","closeButtonStyles"],"mappings":";;;;;;;;AAMA;;;;;AAKG;AACI,MAAM,KAAK,GAAG,CAAC,EACpB,KAAK,EACL,WAAW,EACX,MAAM,GAAG,SAAS,EAClB,OAAO,EACP,GAAG,IAAI,EACI,MACXA,gBAACC,WAAW,CAAC,IAAI,EAAA,EACf,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EACnB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,IAAI,EACd,aAAa,EAAC,MAAM,EAAA,GAChB,IAAI,EAAA,QAAA,EAAA,CAERD,eAAA,CAACE,UAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAEzBC,cAAA,CAACC,mBAAS,IAAC,MAAM,EAAE,MAAM,EAAA,CAAI,EAC7BJ,eAAA,CAACK,WAAK,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAA,QAAA,EAAA,CACpC,KAAK,KACJF,eAACF,WAAW,CAAC,KAAK,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAA,QAAA,EAC/C,KAAK,GACY,CACrB,EACA,WAAW,KACVE,cAAA,CAACF,WAAW,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,SAAS,EAAC,UAAU,EAAC,UAAU,EAAA,QAAA,EAC3D,WAAW,EAAA,CACY,CAC3B,CAAA,EAAA,CACK,CAAA,EAAA,CACH,EACPE,cAAA,CAACF,WAAW,CAAC,YAAY,IACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,SAAS,EAAA,GACXK,8BAAiB,CAAC,MAAM,CAAS,EAAA,CACtC,CAAA,EAAA,CACe;;;;"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraToast","Flex","_jsx","ToastIcon","Stack","actionStyles","closeButtonStyles"],"mappings":";;;;;;;;AAMA;;;;;;;;;AASG;AACI,MAAM,KAAK,GAAG,CAAC,EACpB,KAAK,EACL,WAAW,EACX,MAAM,GAAG,SAAS,EAClB,OAAO,EACP,MAAM,EACN,GAAG,IAAI,EACI,MACXA,gBAACC,WAAW,CAAC,IAAI,EAAA,EACf,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EACnB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,IAAI,EACd,aAAa,EAAC,MAAM,EAAA,GAChB,IAAI,EAAA,QAAA,EAAA,CAERD,gBAACE,UAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAEzBC,eAACC,mBAAS,EAAA,EAAC,MAAM,EAAE,MAAM,GAAI,EAC7BJ,eAAA,CAACK,WAAK,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAA,QAAA,EAAA,CACpC,KAAK,KACJF,eAACF,WAAW,CAAC,KAAK,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAA,QAAA,EAC/C,KAAK,GACY,CACrB,EACA,WAAW,KACVE,cAAA,CAACF,WAAW,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,SAAS,EAAC,UAAU,EAAC,UAAU,EAAA,QAAA,EAC3D,WAAW,GACY,CAC3B,EACA,MAAM,KACLE,cAAA,CAACF,WAAW,CAAC,aAAa,EAAA,EACxB,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,GAClBK,yBAAY,CAAC,MAAM,CAAS,EAAA,QAAA,EAEhC,MAAM,CAAC,KAAK,EAAA,CACa,CAC7B,CAAA,EAAA,CACK,CAAA,EAAA,CACH,EACPH,cAAA,CAACF,WAAW,CAAC,YAAY,IACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,SAAS,EAAA,GACXM,8BAAiB,CAAC,MAAM,CAAS,EAAA,CACtC,CAAA,EAAA,CACe;;;;"}

package/dist/components/Toast/Toast.mjs

@@ -1,16 +1,20 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Toast as Toast$1, Flex, Stack } from '@chakra-ui/react';
-import { closeButtonStyles } from './Toast.styles.mjs';
+import { actionStyles, closeButtonStyles } from './Toast.styles.mjs';
 import { ToastIcon } from './ToastIcon/ToastIcon.mjs';
 
 /**
  * Toast component using Chakra UI v3 composition pattern
  *
- * Uses Toast.Root, Toast.Title, Toast.Description, and Toast.CloseTrigger
- * for better composition and customization.
+ * Uses Toast.Root, Toast.Title, Toast.Description, Toast.ActionTrigger and
+ * Toast.CloseTrigger for better composition and customization.
+ *
+ * `action` renders under the description as a text action in the status
+ * color, aligned with the text column. Don't put a `<Button>` in
+ * `description` — use `action`.
  */
-const Toast = ({ title, description, status = 'success', onClose, ...rest }) => (jsxs(Toast$1.Root, { width: { md: 'sm' }, borderWidth: "1px", borderRadius: "md", boxShadow: "lg", pointerEvents: "auto", ...rest, children: [jsxs(Flex, { align: "center", gap: 2, children: [jsx(ToastIcon, { status: status }), jsxs(Stack, { gap: 1, flex: 1, maxWidth: "100%", children: [title && (jsx(Toast$1.Title, { fontWeight: "bold", fontSize: "h5", children: title })), description && (jsx(Toast$1.Description, { color: "inherit", fontWeight: "semibold", children: description }))] })] }), jsx(Toast$1.CloseTrigger, { onClick: onClose, cursor: "pointer", ...closeButtonStyles[status] })] }));
+const Toast = ({ title, description, status = 'neutral', onClose, action, ...rest }) => (jsxs(Toast$1.Root, { width: { md: 'sm' }, borderWidth: "1px", borderRadius: "md", boxShadow: "lg", pointerEvents: "auto", ...rest, children: [jsxs(Flex, { align: "center", gap: 2, children: [jsx(ToastIcon, { status: status }), jsxs(Stack, { gap: 1, flex: 1, maxWidth: "100%", children: [title && (jsx(Toast$1.Title, { fontWeight: "bold", fontSize: "h5", children: title })), description && (jsx(Toast$1.Description, { color: "inherit", fontWeight: "semibold", children: description })), action && (jsx(Toast$1.ActionTrigger, { onClick: action.onClick, ...actionStyles[status], children: action.label }))] })] }), jsx(Toast$1.CloseTrigger, { onClick: onClose, cursor: "pointer", ...closeButtonStyles[status] })] }));
 
 export { Toast };
 //# sourceMappingURL=Toast.mjs.map

package/dist/components/Toast/Toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.mjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraToast","_jsx"],"mappings":";;;;;;AAMA;;;;;AAKG;AACI,MAAM,KAAK,GAAG,CAAC,EACpB,KAAK,EACL,WAAW,EACX,MAAM,GAAG,SAAS,EAClB,OAAO,EACP,GAAG,IAAI,EACI,MACXA,KAACC,OAAW,CAAC,IAAI,EAAA,EACf,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EACnB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,IAAI,EACd,aAAa,EAAC,MAAM,EAAA,GAChB,IAAI,EAAA,QAAA,EAAA,CAERD,IAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAEzBE,GAAA,CAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAA,CAAI,EAC7BF,IAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAA,QAAA,EAAA,CACpC,KAAK,KACJE,IAACD,OAAW,CAAC,KAAK,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAA,QAAA,EAC/C,KAAK,GACY,CACrB,EACA,WAAW,KACVC,GAAA,CAACD,OAAW,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,SAAS,EAAC,UAAU,EAAC,UAAU,EAAA,QAAA,EAC3D,WAAW,EAAA,CACY,CAC3B,CAAA,EAAA,CACK,CAAA,EAAA,CACH,EACPC,GAAA,CAACD,OAAW,CAAC,YAAY,IACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,SAAS,EAAA,GACX,iBAAiB,CAAC,MAAM,CAAS,EAAA,CACtC,CAAA,EAAA,CACe;;;;"}
+{"version":3,"file":"Toast.mjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraToast","_jsx"],"mappings":";;;;;;AAMA;;;;;;;;;AASG;AACI,MAAM,KAAK,GAAG,CAAC,EACpB,KAAK,EACL,WAAW,EACX,MAAM,GAAG,SAAS,EAClB,OAAO,EACP,MAAM,EACN,GAAG,IAAI,EACI,MACXA,KAACC,OAAW,CAAC,IAAI,EAAA,EACf,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EACnB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,IAAI,EACd,aAAa,EAAC,MAAM,EAAA,GAChB,IAAI,EAAA,QAAA,EAAA,CAERD,KAAC,IAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAEzBE,IAAC,SAAS,EAAA,EAAC,MAAM,EAAE,MAAM,GAAI,EAC7BF,IAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAA,QAAA,EAAA,CACpC,KAAK,KACJE,IAACD,OAAW,CAAC,KAAK,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAA,QAAA,EAC/C,KAAK,GACY,CACrB,EACA,WAAW,KACVC,GAAA,CAACD,OAAW,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,SAAS,EAAC,UAAU,EAAC,UAAU,EAAA,QAAA,EAC3D,WAAW,GACY,CAC3B,EACA,MAAM,KACLC,GAAA,CAACD,OAAW,CAAC,aAAa,EAAA,EACxB,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,GAClB,YAAY,CAAC,MAAM,CAAS,EAAA,QAAA,EAEhC,MAAM,CAAC,KAAK,EAAA,CACa,CAC7B,CAAA,EAAA,CACK,CAAA,EAAA,CACH,EACPC,GAAA,CAACD,OAAW,CAAC,YAAY,IACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,SAAS,EAAA,GACX,iBAAiB,CAAC,MAAM,CAAS,EAAA,CACtC,CAAA,EAAA,CACe;;;;"}

package/dist/components/Toast/Toast.styles.d.ts

@@ -1,10 +1,12 @@
 import { BoxProps } from '@chakra-ui/react';
 import type { ToastStatus } from './Toast.types';
 /**
- * Toast variant styles using the Golden Ratio color system.
+ * Toast variant styles on the BAZE token set.
  *
- * Uses `lightest` backgrounds with `lighter` borders and `dark` text
- * for optimal readability and WCAG AA compliance.
+ * Each status is bg `{s}.bg` + text `{s}.fg` + a 1px `{s}.border` outline —
+ * `info` reads its own `info.*` family instead of borrowing `primary.*`.
+ * `neutral` carries no status (it is the default when none is given):
+ * `border.default` / `bg.surface` / `fg.default`.
  */
 export declare const toastStyles: Record<ToastStatus, BoxProps>;
 /**
@@ -13,4 +15,12 @@ export declare const toastStyles: Record<ToastStatus, BoxProps>;
  * Uses BoxProps for flexibility with Toast.CloseTrigger
  */
 export declare const closeButtonStyles: Record<ToastStatus, BoxProps>;
+export declare const actionStyles: Record<ToastStatus, BoxProps>;
+/** Default duration (ms) of a toast without an action, when none is given */
+export declare const TOAST_DEFAULT_DURATION = 5000;
+/**
+ * Default duration (ms) of a toast that carries an action, when none is given.
+ * The reader needs time to read the message *and* decide to act.
+ */
+export declare const TOAST_ACTION_DURATION = 8000;
 //# sourceMappingURL=Toast.styles.d.ts.map

package/dist/components/Toast/Toast.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CAqBrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CAyB3D,CAAC"}
+{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CA0BrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CA+B3D,CAAC;AA0BF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CA+BtD,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,qBAAqB,OAAO,CAAC"}

package/dist/components/Toast/Toast.styles.js

@@ -2,31 +2,38 @@
 'use strict';
 
 /**
- * Toast variant styles using the Golden Ratio color system.
+ * Toast variant styles on the BAZE token set.
  *
- * Uses `lightest` backgrounds with `lighter` borders and `dark` text
- * for optimal readability and WCAG AA compliance.
+ * Each status is bg `{s}.bg` + text `{s}.fg` + a 1px `{s}.border` outline —
+ * `info` reads its own `info.*` family instead of borrowing `primary.*`.
+ * `neutral` carries no status (it is the default when none is given):
+ * `border.default` / `bg.surface` / `fg.default`.
  */
 const toastStyles = {
     info: {
-        bg: 'primary.extralight', // #E8EEFB
-        color: 'primary.dark', // #0D317D
-        borderColor: 'primary.lighter', // #B9CBF3
+        bg: 'info.bg',
+        color: 'info.fg',
+        borderColor: 'info.border',
     },
     warning: {
-        bg: 'warning.extralight', // #FBF6E8
-        color: 'warning.dark', // #7D610D
-        borderColor: 'warning.lighter', // #F3E4B9
+        bg: 'warning.bg',
+        color: 'warning.fg',
+        borderColor: 'warning.border',
     },
     success: {
-        bg: 'success.extralight', // #E9FBE8
-        color: 'success.dark', // #147D0D
-        borderColor: 'success.lighter', // #BDF3B9
+        bg: 'success.bg',
+        color: 'success.fg',
+        borderColor: 'success.border',
     },
     error: {
-        bg: 'danger.extralight', // #FBE8E9
-        color: 'danger.dark', // #7D0D14
-        borderColor: 'danger.lighter', // #F3B9BD
+        bg: 'danger.bg',
+        color: 'danger.fg',
+        borderColor: 'danger.border',
+    },
+    neutral: {
+        bg: 'bg.surface',
+        color: 'fg.default',
+        borderColor: 'border.default',
     },
 };
 /**
@@ -36,31 +43,102 @@ const toastStyles = {
  */
 const closeButtonStyles = {
     info: {
-        color: 'primary.darker',
+        color: 'info.fg',
         _hover: {
-            bg: 'primary.lighter',
+            bg: 'info.border',
         },
     },
     warning: {
-        color: 'warning.darker',
+        color: 'warning.fg',
         _hover: {
-            bg: 'warning.lighter',
+            bg: 'warning.border',
         },
     },
     success: {
-        color: 'success.darker',
+        color: 'success.fg',
         _hover: {
-            bg: 'success.lighter',
+            bg: 'success.border',
         },
     },
     error: {
-        color: 'danger.darker',
+        color: 'danger.fg',
+        _hover: {
+            bg: 'danger.border',
+        },
+    },
+    neutral: {
+        color: 'fg.default',
         _hover: {
-            bg: 'danger.lighter',
+            bg: 'bg.muted',
         },
     },
 };
+/**
+ * Action styles for each toast status.
+ *
+ * A toast's action is a text action in the toast's own text color — the same
+ * palette as `toastStyles[status].color` — with the hover tint of the close ×.
+ * No border and no fill: a neutral or outlined button inside a tinted toast
+ * reads as a separate card dropped on top of it.
+ *
+ * `ml: -2` cancels the horizontal padding so the label lines up with the
+ * description text above it.
+ */
+const actionBase = {
+    fontWeight: 'bold',
+    px: 2,
+    py: 1,
+    ml: -2,
+    height: 'auto',
+    alignSelf: 'flex-start',
+    borderRadius: 'sm',
+    borderWidth: 0,
+    bg: 'transparent',
+    cursor: 'pointer',
+};
+const actionStyles = {
+    info: {
+        ...actionBase,
+        color: 'info.fg',
+        _hover: { bg: 'info.border' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'info.fg' },
+    },
+    warning: {
+        ...actionBase,
+        color: 'warning.fg',
+        _hover: { bg: 'warning.border' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'warning.fg' },
+    },
+    success: {
+        ...actionBase,
+        color: 'success.fg',
+        _hover: { bg: 'success.border' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'success.fg' },
+    },
+    error: {
+        ...actionBase,
+        color: 'danger.fg',
+        _hover: { bg: 'danger.border' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'danger.fg' },
+    },
+    neutral: {
+        ...actionBase,
+        color: 'fg.default',
+        _hover: { bg: 'bg.muted' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'fg.default' },
+    },
+};
+/** Default duration (ms) of a toast without an action, when none is given */
+const TOAST_DEFAULT_DURATION = 5000;
+/**
+ * Default duration (ms) of a toast that carries an action, when none is given.
+ * The reader needs time to read the message *and* decide to act.
+ */
+const TOAST_ACTION_DURATION = 8000;
 
+exports.TOAST_ACTION_DURATION = TOAST_ACTION_DURATION;
+exports.TOAST_DEFAULT_DURATION = TOAST_DEFAULT_DURATION;
+exports.actionStyles = actionStyles;
 exports.closeButtonStyles = closeButtonStyles;
 exports.toastStyles = toastStyles;
 //# sourceMappingURL=Toast.styles.js.map