@heymantle/litho 0.0.14 → 0.0.16

package/dist/cjs/components/Tabs.js

@@ -17,6 +17,7 @@ var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList")
 var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
 var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
 var _polarisicons = /*#__PURE__*/ _interop_require_wildcard(require("@shopify/polaris-icons"));
+var _Badge = /*#__PURE__*/ _interop_require_default(require("./Badge"));
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -161,30 +162,27 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-var styles = (0, _tailwindvariants.tv)({
-    base: "Litho-Tabs flex overflow-x-hidden whitespace-nowrap",
-    variants: {
-        borderBottom: {
-            true: "border-b",
-            false: ""
-        },
-        padded: {
-            true: "p-2",
-            false: ""
-        }
-    }
-});
-var containerStyles = (0, _tailwindvariants.tv)({
-    base: "Litho-Tabs__TabContainer flex flex-1 overflow-x-hidden whitespace-nowrap space-x-1"
-});
 /**
- * Tabs component that displays a set of tab items with selectable states.
+ * @component Tabs
+ *
+ * @description An in-page tab switcher that renders a horizontal tab bar for toggling between content panels without URL changes.
+ *
+ * @usage
+ * - DO: Switch between related content views within the same page.
+ * - DON'T: Use for URL-based routing (use TabNavigation).
+ *
+ * @accessibility
+ * - Implements tablist/tab/tabpanel ARIA roles; supports keyboard arrow navigation between tabs.
+ *
+ * @alternative
+ * - If you need URL-based tab navigation, use `TabNavigation`. If you need collapsible sections, use `Collapsible`.
  *
  * @param {Object} props - Component props.
  * @param {Object[]} props.tabs - List of tabs to display.
  * @param {string} props.tabs[].id - Unique identifier for the tab.
  * @param {string} props.tabs[].content - Content or label to display for the tab.
  * @param {string} [props.tabs[].icon] - Optional icon to display for the tab.
+ * @param {boolean} [props.tabs[].showIconOnMobile=true] - When false, the tab icon is hidden on mobile and only shown at md (≥800px) breakpoint.
  * @param {boolean} [props.tabs[].disclosure=false] - Whether the tab is part of a "More" disclosure group.
  * @param {number} props.selected - Index of the currently selected tab.
  * @param {Function} props.onSelect - Callback fired when a tab is selected, receives the tab's index.
@@ -195,8 +193,26 @@ var containerStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.padded=true] - If true, applies padding to the Tabs container.
  * @param {boolean} [props.borderBottom=true] - If true, applies a bottom border to the Tabs container.
  * @param {boolean} [props.simpleTabs=false] - If true, simplifies the styling for the selected tab.
+ * @param {number} [props.badgeCount] - The number of badges to display for the tab.
+ * @param {string} [props.badgeStatus="default"] - The status of the badge.
  * @returns {JSX.Element} The Tabs component.
- */ function Tabs() {
+ */ var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Tabs flex overflow-x-hidden whitespace-nowrap",
+    variants: {
+        borderBottom: {
+            true: "border-b",
+            false: ""
+        },
+        padded: {
+            true: "p-2",
+            false: ""
+        }
+    }
+});
+var containerStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-Tabs__TabContainer flex flex-1 overflow-x-hidden whitespace-nowrap space-x-1"
+});
+function Tabs() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var tmp = props.tabs, _tabs = tmp === void 0 ? [] : tmp, _selectedIndex = props.selected, onSelect = props.onSelect, fullWidth = props.fullWidth, _props_disclosureText = props.disclosureText, disclosureText = _props_disclosureText === void 0 ? "More" : _props_disclosureText, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_activeDisclosure = props.activeDisclosure, activeDisclosure = _props_activeDisclosure === void 0 ? false : _props_activeDisclosure, _props_padded = props.padded, padded = _props_padded === void 0 ? true : _props_padded, _props_borderBottom = props.borderBottom, borderBottom = _props_borderBottom === void 0 ? true : _props_borderBottom, _props_simpleTabs = props.simpleTabs, simpleTabs = _props_simpleTabs === void 0 ? false : _props_simpleTabs;
     var selectedIndex = parseInt(_selectedIndex);
@@ -305,9 +321,12 @@ var containerStyles = (0, _tailwindvariants.tv)({
                         },
                         disclosure: disclosure && tab.disclosure,
                         icon: tab.icon,
+                        showIconOnMobile: tab.showIconOnMobile,
                         fullWidth: fullWidth,
                         hidden: tab.hidden,
                         simple: simpleTabs,
+                        badgeCount: tab.badgeCount,
+                        badgeStatus: tab.badgeStatus,
                         children: tab.content
                     }, "tab-".concat(tab.originalIndex));
                 })
@@ -400,9 +419,31 @@ var tabStyles = (0, _tailwindvariants.tv)({
         }
     ]
 });
-function Tab() {
+/**
+ * Individual tab item component used within the Tabs component.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.id] - Unique identifier for the tab, used to generate the DOM element ID.
+ * @param {boolean} [props.active] - Whether the tab's disclosure popover is currently active/open.
+ * @param {boolean} [props.selected] - Whether this tab is currently selected.
+ * @param {number} [props.index] - The index position of this tab in the tabs array.
+ * @param {string|React.ReactNode} [props.icon] - Icon to display. Can be a Polaris icon name string or a custom React node.
+ * @param {boolean} [props.showIconOnMobile=true] - When false, the tab icon is hidden on mobile and only shown at md (≥800px) breakpoint.
+ * @param {Function} [props.onSelect] - Callback fired when the tab is selected, receives the tab's index.
+ * @param {Function} [props.onClick] - Custom click handler that overrides the default onSelect behavior.
+ * @param {React.ReactNode} [props.children] - The content/label to display inside the tab.
+ * @param {boolean} [props.fullWidth] - Whether the tab should expand to fill available space.
+ * @param {boolean} [props.hidden] - Whether the tab should be visually hidden (used for overflow handling).
+ * @param {boolean} [props.simple] - Whether to use simplified styling (no background, column layout).
+ * @param {boolean} [props.disclosure=false] - Whether to show a disclosure caret icon when selected.
+ * @param {boolean} [props.alwaysShowDisclosureIcon=false] - Whether to always show the disclosure icon regardless of selection state.
+ * @param {boolean} [props.disabled=false] - Whether the tab is disabled.
+ * @param {string} [props.badgeStatus="default"] - The status variant of the badge (e.g., "default", "success", "warning").
+ * @param {number} [props.badgeCount] - If provided (>= 0), displays a badge with this count.
+ * @returns {JSX.Element} The Tab component.
+ */ function Tab() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var id = props.id, active = props.active, selected = props.selected, index = props.index, icon = props.icon, onSelect = props.onSelect, onClick = props.onClick, children = props.children, fullWidth = props.fullWidth, hidden = props.hidden, simple = props.simple, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_alwaysShowDisclosureIcon = props.alwaysShowDisclosureIcon, alwaysShowDisclosureIcon = _props_alwaysShowDisclosureIcon === void 0 ? false : _props_alwaysShowDisclosureIcon, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled;
+    var id = props.id, active = props.active, selected = props.selected, index = props.index, icon = props.icon, _props_showIconOnMobile = props.showIconOnMobile, showIconOnMobile = _props_showIconOnMobile === void 0 ? true : _props_showIconOnMobile, onSelect = props.onSelect, onClick = props.onClick, children = props.children, fullWidth = props.fullWidth, hidden = props.hidden, simple = props.simple, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_alwaysShowDisclosureIcon = props.alwaysShowDisclosureIcon, alwaysShowDisclosureIcon = _props_alwaysShowDisclosureIcon === void 0 ? false : _props_alwaysShowDisclosureIcon, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_badgeStatus = props.badgeStatus, badgeStatus = _props_badgeStatus === void 0 ? "default" : _props_badgeStatus, badgeCount = props.badgeCount;
     var polarisIcon = typeof icon === "string" ? _polarisicons[icon] : _polarisicons[icon === null || icon === void 0 ? void 0 : icon.displayName];
     var showDisclosure = disclosure && (selected || alwaysShowDisclosureIcon);
     var tabClasses = tabStyles({
@@ -419,18 +460,32 @@ function Tab() {
         onClick: onClick ? onClick : onSelect ? function() {
             return onSelect(index);
         } : undefined,
+        role: "tab",
+        tabIndex: disabled ? -1 : 0,
+        "aria-selected": selected,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                if (onClick) onClick();
+                else if (onSelect) onSelect(index);
+            }
+        },
         children: [
             icon && !!polarisIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                className: "Litho-Tabs__Tab-Icon mr-1",
+                className: "Litho-Tabs__Tab-Icon mr-1 ".concat(showIconOnMobile ? "" : "hidden @md:inline-flex"),
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: polarisIcon,
                     color: selected && simple ? "default" : selected ? "primary" : "subdued",
                     size: simple ? "lg" : undefined
                 })
             }),
-            icon && !!polarisIcon === false && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                className: "Litho-Tabs__Tab-Icon ".concat(simple ? "mr-0" : "mr-1"),
-                children: icon
+            icon && !polarisIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "Litho-Tabs__Tab-Icon ".concat(simple ? "mr-0" : "mr-1", " ").concat(showIconOnMobile ? "" : "hidden @md:inline-flex"),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                    source: icon,
+                    color: selected && simple ? "default" : selected ? "primary" : "subdued",
+                    size: simple ? "lg" : undefined
+                })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                 className: "Litho-Tabs__Tab-Content block min-h-5 leading-5",
@@ -443,6 +498,11 @@ function Tab() {
                     color: selected && simple ? "default" : selected ? "active" : "subdued",
                     size: simple ? "lg" : undefined
                 })
+            }),
+            badgeCount >= 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                status: badgeStatus,
+                className: "ml-1",
+                children: badgeCount
             })
         ]
     });

package/dist/cjs/components/Tag.js

@@ -17,7 +17,33 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-var styles = (0, _tailwindvariants.tv)({
+/**
+ * @component Tag
+ *
+ * @description A removable label component used to display active filters, selected categories, or user-applied tags.
+ *
+ * @usage
+ * - DO: Display removable filters, categories, or labels.
+ * - DON'T: Use for non-removable status indicators (use Badge).
+ *
+ * @accessibility
+ * - Tag renders a button for removal; ensure the remove action is accessible via keyboard.
+ *
+ * @alternative
+ * - If you need a non-interactive status label, use `Badge`.
+ * - If you need a selectable option, use `ChoiceList`.
+ *
+ * @param {Object} props - The properties for the Tag component.
+ * @param {React.ReactNode} props.children - The content to be displayed inside the Tag.
+ * @param {boolean} [props.disabled=false] - Whether the tag is disabled.
+ * @param {Function} [props.onClick] - The callback function to execute on tag click.
+ * @param {Function} [props.onRemove] - The callback function to execute when the remove icon is clicked.
+ * @param {string} [props.accessibilityLabel] - The accessibility label for the tag.
+ * @param {string} [props.url] - The URL to open when the tag is clicked.
+ * @param {string} [props.target="_self"] - Specifies where to open the URL.
+ *
+ * @returns {JSX.Element} The rendered Tag component.
+ */ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Tag text-xs rounded-md inline-grid pl-1 whitespace-nowrap",
     variants: {
         disabled: {
@@ -90,21 +116,7 @@ var actionStyles = (0, _tailwindvariants.tv)({
         }
     }
 });
-/**
- * Renders a Tag component with optional interactive and removable features.
- *
- * @function Tag
- * @param {Object} props - The properties for the Tag component.
- * @param {React.ReactNode} props.children - The content to be displayed inside the Tag.
- * @param {boolean} [props.disabled=false] - Whether the tag is disabled.
- * @param {Function} [props.onClick] - The callback function to execute on tag click.
- * @param {Function} [props.onRemove] - The callback function to execute when the remove icon is clicked.
- * @param {string} [props.accessibilityLabel] - The accessibility label for the tag.
- * @param {string} [props.url] - The URL to open when the tag is clicked.
- * @param {string} [props.target="_self"] - Specifies where to open the URL.
- *
- * @returns {JSX.Element} The rendered Tag component.
- */ function Tag() {
+function Tag() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, icon = props.icon, onClick = props.onClick, onRemove = props.onRemove, accessibilityLabel = props.accessibilityLabel, url = props.url, _props_target = props.target, target = _props_target === void 0 ? "_self" : _props_target, className = props.className, _props_selected = props.selected, selected = _props_selected === void 0 ? false : _props_selected;
     var interactive = !!url || !!onClick;
@@ -151,6 +163,15 @@ var actionStyles = (0, _tailwindvariants.tv)({
                 hasRemoveAction && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                     className: actionClasses,
                     onClick: onRemove,
+                    role: "button",
+                    tabIndex: disabled ? -1 : 0,
+                    "aria-label": "Remove",
+                    onKeyDown: function(e) {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                        }
+                    },
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                         source: _polarisicons.CancelSmallMinor,
                         color: disabled ? "disabled" : "default",

package/dist/cjs/components/Text.js

@@ -89,7 +89,37 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-var styles = (0, _tailwindvariants.tv)({
+/**
+ * @component Text
+ *
+ * @description A typography component that renders text content with consistent heading and body variants, alignment, weight, and color options.
+ *
+ * @usage
+ * - DO: Use for all text content with consistent typography variants (headings, body, captions).
+ * - DON'T: Use raw HTML heading or paragraph tags; always use Text with the appropriate `variant` prop.
+ *
+ * @accessibility
+ * - Use the `as` prop to render semantically correct heading levels (h1-h6) matching the visual hierarchy.
+ * - Use `visuallyHidden` to provide screen-reader-only text without hiding content from assistive tech.
+ *
+ * @alternative
+ * - If you need a code block, use `Code` instead.
+ * - If you need a clickable text element, use `Link` or `Button` with `link` variant instead.
+ *
+ * @param {Object} props - Properties to customize the text component.
+ * @param {'left' | 'center' | 'right' | 'end' | 'start'} [props.alignment] - Text alignment.
+ * @param {'normal' | 'regular' | 'medium' | 'semibold' | 'bold'} [props.fontWeight] - Font weight.
+ * @param {'default' | 'subdued' | 'critical' | 'success' | 'warning' | 'alternate' | 'link' | 'disabled'} [props.color] - Text color variant.
+ * @param {boolean} [props.truncate] - Whether to truncate text with ellipsis.
+ * @param {'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs'} [props.variant] - Text size and style variant.
+ * @param {boolean} [props.visuallyHidden] - Visually hides text for accessibility.
+ * @param {string} [props.className] - Additional CSS class names.
+ * @param {string} [props.as] - Element type (e.g., 'p' or 'span').
+ * @param {number} [props.clampLines] - Number of lines to clamp.
+ * @param {boolean} [props.strike] - Whether to strike through the text.
+ * @param {React.ReactNode} [props.children] - The content to be displayed within the text component. Defaults to an empty string.
+ * @returns {JSX.Element} Rendered text component with applied styles.
+ */ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Text block",
     variants: {
         alignment: {
@@ -228,23 +258,7 @@ var styles = (0, _tailwindvariants.tv)({
         }
     ]
 });
-/**
- * A text component that renders styled text based on provided props.
- *
- * @param {Object} props - Properties to customize the text component.
- * @param {'left' | 'center' | 'right' | 'end' | 'start'} [props.alignment] - Text alignment.
- * @param {'normal' | 'regular' | 'medium' | 'semibold' | 'bold'} [props.fontWeight] - Font weight.
- * @param {'default' | 'subdued' | 'critical' | 'success' | 'warning' | 'alternate' | 'link' | 'disabled'} [props.color] - Text color variant.
- * @param {boolean} [props.truncate] - Whether to truncate text with ellipsis.
- * @param {'headingXl' | 'headingLg' | 'headingMd' | 'headingSm' | 'headingXs' | 'bodyXl' | 'bodyLg' | 'bodyMd' | 'bodySm' | 'bodyXs'} [props.variant] - Text size and style variant.
- * @param {boolean} [props.visuallyHidden] - Visually hides text for accessibility.
- * @param {string} [props.className] - Additional CSS class names.
- * @param {string} [props.as] - Element type (e.g., 'p' or 'span').
- * @param {number} [props.clampLines] - Number of lines to clamp.
- * @param {boolean} [props.strike] - Whether to strike through the text.
- * @param {React.ReactNode} [props.children] - The content to be displayed within the text component. Defaults to an empty string.
- * @returns {JSX.Element} Rendered text component with applied styles.
- */ function Text() {
+function Text() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var alignment = props.alignment, as = props.as, className = props.className, color = props.color, fontWeight = props.fontWeight, truncate = props.truncate, variant = props.variant, visuallyHidden = props.visuallyHidden, clampLines = props.clampLines, strike = props.strike, children = props.children, rest = _object_without_properties(props, [
         "alignment",

package/dist/cjs/components/TextField.js

@@ -111,7 +111,78 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-var styles = (0, _tailwindvariants.tv)({
+/**
+ * @component TextField
+ *
+ * @description A text input component with label, help text, error handling, prefix/suffix, and character count support.
+ *
+ * @usage
+ * - DO: Use for single-line or multi-line text input with built-in labeling and validation.
+ * - DON'T: Use for selection from a fixed list (use Select or Autocomplete).
+ *
+ * @accessibility
+ * - Always provide a `label` prop; the label is programmatically associated with the input via `htmlFor`.
+ *
+ * @alternative
+ * - If you need a dropdown selection, use `Select`. If you need searchable selection, use `Autocomplete`.
+ *
+ * @param {Object} props - The properties for the TextField component.
+ * @param {string} [props.prefix] - Text content to display before the input.
+ * @param {string} [props.suffix] - Text content to display after the input.
+ * @param {string} [props.placeholder] - Placeholder text for the input.
+ * @param {string} [props.value=''] - The current value of the input.
+ * @param {string} [props.helpText] - Helper text to display below the input.
+ * @param {string} [props.label] - Label text for the input field.
+ * @param {string} [props.labelVariant='bodyMd'] - Visual variant for the label text.
+ * @param {Object} [props.labelAction] - Action button to display next to the label.
+ * @param {boolean} [props.labelHidden] - Whether to visually hide the label.
+ * @param {boolean} [props.disabled=false] - Whether the input is disabled. Defaults to false.
+ * @param {boolean} [props.clearButton] - Whether to show a clear button.
+ * @param {boolean} [props.readOnly] - Whether the input is read-only.
+ * @param {boolean} [props.autoFocus] - Whether to focus the input on mount.
+ * @param {boolean} [props.focused] - Whether the input is focused.
+ * @param {number} [props.multiline=1] - Number of lines for multiline input (1 for single line). Defaults to 1.
+ * @param {boolean} [props.autoGrow=false] - Whether textarea should automatically grow with content. Only applies when multiline > 1.
+ * @param {number} [props.maxHeight] - Maximum height in pixels before scrolling starts. Only applies when autoGrow is true.
+ * @param {string} [props.error] - Error message to display.
+ * @param {ReactNode} [props.connectedRight] - React element to connect to the right of the input.
+ * @param {ReactNode} [props.connectedLeft] - React element to connect to the left of the input.
+ * @param {string} [props.type='text'] - HTML input type. Defaults to 'text'.
+ * @param {boolean} [props.subdued=false] - Whether to use subdued styling.
+ * @param {string} [props.name] - Name attribute for the input.
+ * @param {string} [props.id] - ID for the input element.
+ * @param {string} [props.role] - ARIA role.
+ * @param {number} [props.step] - Step value for number inputs.
+ * @param {number} [props.largeStep=10] - Large step value when using shift + arrows.
+ * @param {string} [props.autoComplete] - HTML autocomplete attribute.
+ * @param {number} [props.max] - Maximum value for number inputs.
+ * @param {number} [props.maxLength] - Maximum length for text input.
+ * @param {number} [props.min] - Minimum value for number inputs.
+ * @param {number} [props.minLength] - Minimum length for text input.
+ * @param {string} [props.pattern] - Input validation pattern.
+ * @param {boolean} [props.spellCheck] - Whether to enable spell checking.
+ * @param {string} [props.ariaOwns] - ARIA owns attribute.
+ * @param {string} [props.ariaControls] - ARIA controls attribute.
+ * @param {boolean} [props.ariaExpanded] - ARIA expanded attribute.
+ * @param {string} [props.ariaActiveDescendant] - ARIA active descendant attribute.
+ * @param {string} [props.ariaAutocomplete] - ARIA autocomplete attribute.
+ * @param {('left'|'center'|'right')} [props.align='left'] - Text alignment within the input.
+ * @param {boolean} [props.requiredIndicator] - Whether to show a required field indicator.
+ * @param {boolean} [props.selectTextOnFocus] - Whether to select all text when focused.
+ * @param {Function} [props.onClearButtonClick] - Handler for clear button click.
+ * @param {Function} [props.onChange] - Handler for value changes.
+ * @param {Function} [props.onFocus] - Handler for input focus.
+ * @param {Function} [props.onBlur] - Handler for input blur.
+ * @param {Function} [props.onKeyDown] - Handler for key down.
+ * @param {ReactNode} [props.tooltip] - Tooltip content for the label.
+ * @param {string} [props.className] - Additional CSS classes.
+ * @param {string} [props.containerClassName] - Additional CSS classes for the outer container (Litho-TextFieldContainer).
+ * @param {ReactNode} [props.icon] - Icon to display before the input.
+ * @param {string} [props.iconColor='subdued'] - Color of the icon. Defaults to 'subdued'.
+ * @param {boolean} [props.disableFocusStyles=false] - Whether to disable focused styles when the input is focused.
+ * @param {boolean} [props.insight=false] - Whether to use insight/AI styling with insight-alt background, border, and text colors.
+ * @returns {JSX.Element} The rendered TextField component.
+ */ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-TextField group relative rounded-md border min-h-8 cursor-text",
     variants: {
         disabled: {
@@ -128,6 +199,10 @@ var styles = (0, _tailwindvariants.tv)({
         transparent: {
             true: "border-transparent",
             false: ""
+        },
+        insight: {
+            true: "",
+            false: ""
         }
     },
     compoundVariants: [
@@ -175,12 +250,27 @@ var styles = (0, _tailwindvariants.tv)({
             hasError: false,
             subdued: true,
             class: "bg-form-bg"
+        },
+        {
+            focused: false,
+            disabled: false,
+            hasError: false,
+            insight: true,
+            class: "bg-form-bg-insight border-form-border-insight"
+        },
+        {
+            focused: true,
+            disabled: false,
+            hasError: false,
+            insight: true,
+            class: "bg-form-bg-insight-low border-form-border-insight ring ring-form-focus-insight"
         }
     ],
     defaultVariants: {
         disabled: false,
         hasError: false,
-        focused: false
+        focused: false,
+        insight: false
     }
 });
 var inputStyles = (0, _tailwindvariants.tv)({
@@ -211,13 +301,23 @@ var inputStyles = (0, _tailwindvariants.tv)({
             true: "placeholder-form-placeholder-error",
             false: "placeholder-form-placeholder"
         },
+        insight: {
+            true: "text-insight-alt-fg placeholder-insight-alt-fg/50",
+            false: ""
+        },
         type: {
             time: "hide-time-picker"
         }
     }
 });
 var iconStyles = (0, _tailwindvariants.tv)({
-    base: "Litho-TextField__Icon pl-0.5"
+    base: "Litho-TextField__Icon pl-0.5",
+    variants: {
+        hasMultiline: {
+            true: "self-start pt-1",
+            false: ""
+        }
+    }
 });
 var clearButtonStyles = (0, _tailwindvariants.tv)({
     base: "Litho-TextField__ClearButton mr-1 rounded-md h-6 w-6 flex self-center items-center justify-center cursor-pointer bg-btn-outline hover:bg-btn-outline-low active:bg-btn-outline-lower",
@@ -228,65 +328,11 @@ var clearButtonStyles = (0, _tailwindvariants.tv)({
         }
     }
 });
-/**
- * Renders a TextField component.
- *
- * @function TextField
- * @param {Object} props - The properties for the TextField component.
- * @param {string} [props.prefix] - Text content to display before the input.
- * @param {string} [props.suffix] - Text content to display after the input.
- * @param {string} [props.placeholder] - Placeholder text for the input.
- * @param {string} [props.value=''] - The current value of the input.
- * @param {string} [props.helpText] - Helper text to display below the input.
- * @param {string} [props.label] - Label text for the input field.
- * @param {string} [props.labelVariant='bodyMd'] - Visual variant for the label text.
- * @param {Object} [props.labelAction] - Action button to display next to the label.
- * @param {boolean} [props.labelHidden] - Whether to visually hide the label.
- * @param {boolean} [props.disabled=false] - Whether the input is disabled. Defaults to false.
- * @param {boolean} [props.clearButton] - Whether to show a clear button.
- * @param {boolean} [props.readOnly] - Whether the input is read-only.
- * @param {boolean} [props.autoFocus] - Whether to focus the input on mount.
- * @param {boolean} [props.focused] - Whether the input is focused.
- * @param {number} [props.multiline=1] - Number of lines for multiline input (1 for single line). Defaults to 1.
- * @param {boolean} [props.autoGrow=false] - Whether textarea should automatically grow with content. Only applies when multiline > 1.
- * @param {number} [props.maxHeight] - Maximum height in pixels before scrolling starts. Only applies when autoGrow is true.
- * @param {string} [props.error] - Error message to display.
- * @param {ReactNode} [props.connectedRight] - React element to connect to the right of the input.
- * @param {ReactNode} [props.connectedLeft] - React element to connect to the left of the input.
- * @param {string} [props.type='text'] - HTML input type. Defaults to 'text'.
- * @param {boolean} [props.subdued=false] - Whether to use subdued styling.
- * @param {string} [props.name] - Name attribute for the input.
- * @param {string} [props.id] - ID for the input element.
- * @param {string} [props.role] - ARIA role.
- * @param {number} [props.step] - Step value for number inputs.
- * @param {number} [props.largeStep=10] - Large step value when using shift + arrows.
- * @param {string} [props.autoComplete] - HTML autocomplete attribute.
- * @param {number} [props.max] - Maximum value for number inputs.
- * @param {number} [props.maxLength] - Maximum length for text input.
- * @param {number} [props.min] - Minimum value for number inputs.
- * @param {number} [props.minLength] - Minimum length for text input.
- * @param {string} [props.pattern] - Input validation pattern.
- * @param {boolean} [props.spellCheck] - Whether to enable spell checking.
- * @param {string} [props.ariaOwns] - ARIA owns attribute.
- * @param {string} [props.ariaControls] - ARIA controls attribute.
- * @param {boolean} [props.ariaExpanded] - ARIA expanded attribute.
- * @param {string} [props.ariaActiveDescendant] - ARIA active descendant attribute.
- * @param {string} [props.ariaAutocomplete] - ARIA autocomplete attribute.
- * @param {('left'|'center'|'right')} [props.align='left'] - Text alignment within the input.
- * @param {boolean} [props.requiredIndicator] - Whether to show a required field indicator.
- * @param {boolean} [props.selectTextOnFocus] - Whether to select all text when focused.
- * @param {Function} [props.onClearButtonClick] - Handler for clear button click.
- * @param {Function} [props.onChange] - Handler for value changes.
- * @param {Function} [props.onFocus] - Handler for input focus.
- * @param {Function} [props.onBlur] - Handler for input blur.
- * @param {Function} [props.onKeyDown] - Handler for key down.
- * @param {ReactNode} [props.tooltip] - Tooltip content for the label.
- * @param {string} [props.className] - Additional CSS classes.
- * @param {boolean} [props.disableFocusStyles=false] - Whether to disable focused styles when the input is focused.
- * @returns {JSX.Element} The rendered TextField component.
- */ function TextField() {
+function TextField() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var prefix = props.prefix, _suffix = props.suffix, placeholder = props.placeholder, _props_value = props.value, value = _props_value === void 0 ? "" : _props_value, helpText = props.helpText, label = props.label, _props_labelVariant = props.labelVariant, labelVariant = _props_labelVariant === void 0 ? "bodyMd" : _props_labelVariant, labelAction = props.labelAction, labelHidden = props.labelHidden, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, clearButton = props.clearButton, readOnly = props.readOnly, autoFocus = props.autoFocus, _focused = props.focused, _props_multiline = props.multiline, multiline = _props_multiline === void 0 ? 1 : _props_multiline, _props_autoGrow = props.autoGrow, autoGrow = _props_autoGrow === void 0 ? false : _props_autoGrow, maxHeight = props.maxHeight, error = props.error, connectedRight = props.connectedRight, connectedLeft = props.connectedLeft, _props_type = props.type, type = _props_type === void 0 ? "text" : _props_type, _props_subdued = props.subdued, subdued = _props_subdued === void 0 ? false : _props_subdued, name = props.name, _id = props.id, role = props.role, step = props.step, _props_largeStep = props.largeStep, largeStep = _props_largeStep === void 0 ? 10 : _props_largeStep, autoComplete = props.autoComplete, max = props.max, maxLength = props.maxLength, min = props.min, minLength = props.minLength, _props_showCharacterCount = props.showCharacterCount, showCharacterCount = _props_showCharacterCount === void 0 ? false : _props_showCharacterCount, pattern = props.pattern, spellCheck = props.spellCheck, ariaOwns = props.ariaOwns, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaActiveDescendant = props.ariaActiveDescendant, ariaAutocomplete = props.ariaAutocomplete, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, requiredIndicator = props.requiredIndicator, selectTextOnFocus = props.selectTextOnFocus, onClearButtonClick = props.onClearButtonClick, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, tooltip = props.tooltip, className = props.className, _inputRef = props.inputRef, icon = props.icon, _props_transparent = props.transparent, transparent = _props_transparent === void 0 ? false : _props_transparent, _props_showNumberSteppers = props.showNumberSteppers, showNumberSteppers = _props_showNumberSteppers === void 0 ? true : _props_showNumberSteppers, onKeyDown = props.onKeyDown, _props_disableFocusStyles = props.disableFocusStyles, disableFocusStyles = _props_disableFocusStyles === void 0 ? false : _props_disableFocusStyles;
+    var prefix = props.prefix, _suffix = props.suffix, placeholder = props.placeholder, _props_value = props.value, value = _props_value === void 0 ? "" : _props_value, helpText = props.helpText, label = props.label, _props_labelVariant = props.labelVariant, labelVariant = _props_labelVariant === void 0 ? "bodyMd" : _props_labelVariant, labelAction = props.labelAction, labelHidden = props.labelHidden, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, clearButton = props.clearButton, readOnly = props.readOnly, autoFocus = props.autoFocus, _focused = props.focused, _props_multiline = props.multiline, multiline = _props_multiline === void 0 ? 1 : _props_multiline, _props_autoGrow = props.autoGrow, autoGrow = _props_autoGrow === void 0 ? false : _props_autoGrow, maxHeight = props.maxHeight, error = props.error, connectedRight = props.connectedRight, connectedLeft = props.connectedLeft, _props_type = props.type, type = _props_type === void 0 ? "text" : _props_type, _props_subdued = props.subdued, subdued = _props_subdued === void 0 ? false : _props_subdued, name = props.name, _id = props.id, role = props.role, step = props.step, _props_largeStep = props.largeStep, largeStep = _props_largeStep === void 0 ? 10 : _props_largeStep, autoComplete = props.autoComplete, max = props.max, maxLength = props.maxLength, min = props.min, minLength = props.minLength, _props_showCharacterCount = props.showCharacterCount, showCharacterCount = _props_showCharacterCount === void 0 ? false : _props_showCharacterCount, pattern = props.pattern, spellCheck = props.spellCheck, ariaOwns = props.ariaOwns, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaActiveDescendant = props.ariaActiveDescendant, ariaAutocomplete = props.ariaAutocomplete, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, requiredIndicator = props.requiredIndicator, selectTextOnFocus = props.selectTextOnFocus, onClearButtonClick = props.onClearButtonClick, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, tooltip = props.tooltip, className = props.className, containerClassName = props.containerClassName, _inputRef = props.inputRef, icon = props.icon, _iconColor = props.iconColor, _props_transparent = props.transparent, transparent = _props_transparent === void 0 ? false : _props_transparent, _props_insight = props.insight, insight = _props_insight === void 0 ? false : _props_insight, _props_showNumberSteppers = props.showNumberSteppers, showNumberSteppers = _props_showNumberSteppers === void 0 ? true : _props_showNumberSteppers, onKeyDown = props.onKeyDown, _props_disableFocusStyles = props.disableFocusStyles, disableFocusStyles = _props_disableFocusStyles === void 0 ? false : _props_disableFocusStyles;
+    var effectiveIcon = insight && !icon ? _polarisicons.MagicMajor : icon;
+    var effectiveIconColor = insight ? _iconColor || "insight-icon" : _iconColor || "subdued";
     var suffix = maxLength && showCharacterCount ? "".concat(value.length, " / ").concat(maxLength) : _suffix;
     var _internalRef = (0, _react.useRef)(null);
     var inputRef = _inputRef || _internalRef;
@@ -294,7 +340,7 @@ var clearButtonStyles = (0, _tailwindvariants.tv)({
     var _useState1 = _sliced_to_array((0, _react.useState)(_focused), 2), focused = _useState1[0], setFocused = _useState1[1];
     var hasError = !!error;
     var hasSuffix = !!suffix || maxLength && showCharacterCount;
-    var hasPrefix = !!prefix || !!icon;
+    var hasPrefix = !!prefix || !!effectiveIcon;
     var hasMultiline = multiline > 1;
     var hasConnectedLeft = !!connectedLeft;
     var hasConnectedRight = !!connectedRight;
@@ -347,9 +393,12 @@ var clearButtonStyles = (0, _tailwindvariants.tv)({
         hasError: hasError,
         focused: Boolean(focused && !readOnly && !disableFocusStyles),
         subdued: subdued,
-        transparent: transparent
+        transparent: transparent,
+        insight: insight
+    });
+    var iconClasses = iconStyles({
+        hasMultiline: hasMultiline
     });
-    var iconClasses = iconStyles();
     var inputClasses = inputStyles({
         hasSuffix: hasSuffix,
         hasPrefix: hasPrefix,
@@ -358,7 +407,8 @@ var clearButtonStyles = (0, _tailwindvariants.tv)({
         hasError: hasError,
         readOnly: readOnly,
         align: align,
-        type: type
+        type: type,
+        insight: insight
     });
     var clearButtonClasses = clearButtonStyles({
         visible: (value === null || value === void 0 ? void 0 : value.length) > 0 && !readOnly && !disabled
@@ -389,9 +439,9 @@ var clearButtonStyles = (0, _tailwindvariants.tv)({
         }
     };
     var memoizedIcon = (0, _react.useMemo)(function() {
-        return icon;
+        return effectiveIcon;
     }, [
-        icon
+        effectiveIcon
     ]);
     (0, _react.useEffect)(function() {
         // Handle auto-growing textarea
@@ -443,7 +493,7 @@ var clearButtonStyles = (0, _tailwindvariants.tv)({
                     className: iconClasses,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                         source: memoizedIcon,
-                        color: "subdued"
+                        color: effectiveIconColor
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(InputElement, {
@@ -549,7 +599,7 @@ var clearButtonStyles = (0, _tailwindvariants.tv)({
         })
     });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        className: "Litho-TextFieldContainer flex flex-col gap-1",
+        className: "Litho-TextFieldContainer flex flex-col gap-1".concat(containerClassName ? " ".concat(containerClassName) : ""),
         children: [
             label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: "flex justify-between items-end",

package/dist/cjs/components/Thumbnail.js

@@ -17,7 +17,30 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-var imageContainerStyles = (0, _tailwindvariants.tv)({
+/**
+ * @component Thumbnail
+ *
+ * @description A small, fixed-size image preview component with automatic placeholder fallback when no source is provided.
+ *
+ * @usage
+ * - DO: Use for small, fixed-size image previews in lists, tables, or resource items.
+ * - DON'T: Use for large content images or hero banners; use `Image` for those cases.
+ *
+ * @accessibility
+ * - Always provide an `alt` prop describing the image content for screen readers.
+ * - When no image is available, the component renders a placeholder icon automatically.
+ *
+ * @alternative
+ * - If you need a full-size responsive image, use `Image` instead.
+ * - If you need an icon without an image container, use `Icon` instead.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} [props.src] - The image source URL.
+ * @param {string} [props.alt] - The alternative text for the image.
+ * @param {("small"|"medium"|"large"|number)} [props.size="medium"] - The size of the thumbnail. Can be "small", "medium", "large", or a numeric pixel value.
+ * @param {boolean} [props.skeleton=false] - Whether to show a skeleton loader instead of the image.
+ * @returns {JSX.Element} The rendered Thumbnail component.
+ */ var imageContainerStyles = (0, _tailwindvariants.tv)({
     base: "relative flex items-center justify-center overflow-hidden rounded-lg border border-tint-4 bg-surface-higher group",
     variants: {
         size: {
@@ -36,16 +59,7 @@ var imageStyles = (0, _tailwindvariants.tv)({
         size: "medium"
     }
 });
-/**
- * Thumbnail component to display an image or a placeholder icon.
- *
- * @param {Object} props - The component props.
- * @param {string} [props.src] - The image source URL.
- * @param {string} [props.alt] - The alternative text for the image.
- * @param {("small"|"medium"|"large"|number)} [props.size="medium"] - The size of the thumbnail. Can be "small", "medium", "large", or a numeric pixel value.
- * @param {boolean} [props.skeleton=false] - Whether to show a skeleton loader instead of the image.
- * @returns {JSX.Element} The rendered Thumbnail component.
- */ function Thumbnail() {
+function Thumbnail() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var src = props.src, alt = props.alt, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, _props_skeleton = props.skeleton, skeleton = _props_skeleton === void 0 ? false : _props_skeleton;
     var sizeIsInteger = Number.isInteger(size);