@heymantle/litho 0.0.4 → 0.0.5

package/dist/cjs/stories/Tip.stories.js

@@ -43,13 +43,12 @@ _export(exports, {
 var _jsxruntime = require("react/jsx-runtime");
 var _react = require("react");
 var _transformers = require("../utilities/transformers.js");
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
 var _Tip = /*#__PURE__*/ _interop_require_default(require("../components/Tip.js"));
 var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
 var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
 var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
 var _Link = /*#__PURE__*/ _interop_require_default(require("../components/Link.js"));
-var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
-var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
 var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
 var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
 var _polarisicons = require("@shopify/polaris-icons");
@@ -230,8 +229,8 @@ var Default = {
 };
 var StatusVariants = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "1",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "xs",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tip.default, {
                     status: "info",
@@ -311,8 +310,8 @@ var DismissibleTips = {
                 tip3: true
             });
         };
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 visibleTips.tip1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tip.default, {
                     status: "info",
@@ -343,7 +342,7 @@ var DismissibleTips = {
                 }),
                 !Object.values(visibleTips).some(Boolean) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                     padding: "2",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         inlineAlign: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -372,8 +371,8 @@ var DismissibleTips = {
 };
 var WithCustomIcons = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tip.default, {
                     status: "info",
@@ -424,8 +423,8 @@ var InteractiveTips = {
             });
             setLastClicked(tipName);
         };
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tip.default, {
                     status: "info",
@@ -482,8 +481,8 @@ var InteractiveTips = {
 };
 var WithLinks = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tip.default, {
                     status: "info",
@@ -559,8 +558,8 @@ var WithLinks = {
 };
 var AlignmentVariants = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tip.default, {
                     status: "info",
@@ -596,8 +595,8 @@ var AlignmentVariants = {
 };
 var WithBorders = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tip.default, {
                     status: "info",
@@ -649,8 +648,8 @@ var InContextUsage = {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             title: "Dashboard",
             padded: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                gap: "2",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                gap: "sm",
                 children: [
                     showTips.onboarding && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tip.default, {
                         status: "info",
@@ -715,8 +714,9 @@ var InContextUsage = {
                             children: "✨ New feature: Click on any metric above to see detailed analytics and trends over time."
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-                        gap: "2",
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 primary: true,

package/dist/cjs/stories/TopBar.stories.js

@@ -37,7 +37,7 @@ _export(exports, {
 var _jsxruntime = require("react/jsx-runtime");
 var _transformers = require("../utilities/transformers.js");
 var _ = require("../");
-var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -97,8 +97,9 @@ var WithSearchTrigger = {
 };
 var WithHeaderAccessory = {
     args: {
-        headerAccessory: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-            gap: "0.5",
+        headerAccessory: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "xs",
             align: "center",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Button, {
@@ -125,8 +126,9 @@ var FullExample = {
             plain: true,
             children: "John Doe"
         }),
-        headerAccessory: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-            gap: "0.5",
+        headerAccessory: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "xs",
             align: "center",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Button, {

package/dist/esm/components/Autocomplete.js

@@ -192,17 +192,25 @@ function attachPropToTextField(children, prop) {
         var option = param.option, allowMultiple = param.allowMultiple, selected = param.selected, onSelect = param.onSelect, setShowOptionsPopover = param.setShowOptionsPopover;
         var isChecked = selected.includes(option.value);
         if (allowMultiple) {
-            return /*#__PURE__*/ _jsx(Checkbox, {
-                label: option.label,
-                checked: isChecked,
-                onChange: function() {
-                    onSelect(isChecked ? selected.filter(function(v) {
-                        return v !== option.value;
-                    }) : _to_consumable_array(selected).concat([
-                        option.value
-                    ]));
+            return /*#__PURE__*/ _jsx("div", {
+                onMouseDown: function(e) {
+                    e.preventDefault();
                 },
-                className: "px-2 py-1.5 cursor-pointer rounded-md hover-dark"
+                onClick: function(e) {
+                    e.stopPropagation();
+                },
+                children: /*#__PURE__*/ _jsx(Checkbox, {
+                    label: option.label,
+                    checked: isChecked,
+                    onChange: function() {
+                        onSelect(isChecked ? selected.filter(function(v) {
+                            return v !== option.value;
+                        }) : _to_consumable_array(selected).concat([
+                            option.value
+                        ]));
+                    },
+                    className: "px-2 py-1.5 cursor-pointer rounded-md hover-dark"
+                })
             });
         }
         return /*#__PURE__*/ _jsx("div", {
@@ -293,6 +301,8 @@ Autocomplete.displayName = "Autocomplete";
  * @param {function} [props.onFocus] - Callback fired when the TextField gains focus (native TextField event).
  * @param {string} [props.placeholder] - Placeholder text for the TextField.
  * @param {string} [props.value] - The current value of the TextField.
+ * @param {string} [props.label] - The label for the TextField.
+ * @param {string} [props.labelHidden] - Whether to hide the label.
  * @param {function} [props.onChange] - Callback fired when the TextField value changes.
  *
  * @example
@@ -300,7 +310,7 @@ Autocomplete.displayName = "Autocomplete";
  *   placeholder="Search..."
  *   onTextFieldFocus={() => console.log("Focused")}
  * />
- */ Autocomplete.TextField = function AutocompleteTextField() {
+ */ var AutocompleteTextField = function() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return /*#__PURE__*/ _jsx(TextField, _object_spread_props(_object_spread({}, props), {
         onFocus: function() {
@@ -313,5 +323,6 @@ Autocomplete.displayName = "Autocomplete";
         }
     }));
 };
-Autocomplete.TextField.displayName = "Autocomplete.TextField";
+Autocomplete.TextField = AutocompleteTextField;
+AutocompleteTextField.displayName = "Autocomplete.TextField";
 export default Autocomplete;

package/dist/esm/components/Button.js

@@ -193,6 +193,10 @@ var styles = tv({
         bordered: {
             true: "border-tint-2",
             false: ""
+        },
+        naked: {
+            true: "border-none bg-transparent p-0 hover:bg-transparent w-auto justify-start",
+            false: ""
         }
     },
     compoundVariants: [
@@ -317,6 +321,7 @@ var styles = tv({
             destructive: false,
             highlight: false,
             pressed: false,
+            naked: false,
             class: "bg-btn-secondary hover:bg-btn-secondary-low active:bg-btn-secondary-lower text-btn-secondary-fg hover:text-btn-secondary-fg-alt border-btn-secondary-border hover:border-btn-secondary-border-low active:border-btn-secondary-border-low\n        dark:outline-hidden dark:border-transparent dark:shadow-btn-dark dark:border-t-tint-alt-3 dark:hover:border-t-tint-alt-2 dark:active:border-t-tint-alt-2"
         },
         {
@@ -328,6 +333,7 @@ var styles = tv({
             destructive: false,
             highlight: false,
             pressed: true,
+            naked: false,
             class: "bg-btn-secondary hover:bg-btn-secondary-low active:bg-btn-secondary-lower text-btn-secondary-fg hover:text-btn-secondary-fg-alt border-btn-secondary-border hover:border-btn-secondary-border-low active:border-btn-secondary-border-low\n        dark:outline-hidden dark:border-tint-10 dark:shadow-btn-pressed-dark dark:hover:border-tint-10 dark:active:border-tint-10"
         },
         {
@@ -378,16 +384,19 @@ var styles = tv({
             link: true,
             disabled: false,
             loading: false,
+            naked: false,
             class: "bg-btn-link hover:bg-btn-link-low active:bg-btn-link-lower text-btn-link-fg hover:text-btn-link-fg-alt border-btn-link-border hover:border-btn-link-border-low active:border-btn-link-border-low"
         },
         {
             link: true,
             disabled: true,
+            naked: false,
             class: "bg-btn-link-disabled text-btn-link-disabled-fg"
         },
         {
             link: true,
             loading: true,
+            naked: false,
             class: "bg-btn-link-disabled text-btn-link-disabled-fg"
         },
         // Destructive buttons
@@ -454,6 +463,10 @@ var contentStyles = tv({
             small: "py-0.5",
             large: "py-3",
             medium: "py-1"
+        },
+        naked: {
+            true: "px-2",
+            false: ""
         }
     },
     compoundVariants: [
@@ -513,6 +526,7 @@ var contentStyles = tv({
             hasIcon: false,
             hasChildren: true,
             disclosure: false,
+            naked: false,
             class: "px-3"
         },
         {
@@ -562,6 +576,10 @@ var textStyles = tv({
         highlight: {
             true: "",
             false: ""
+        },
+        naked: {
+            true: "",
+            false: ""
         }
     },
     compoundVariants: [
@@ -588,6 +606,7 @@ var textStyles = tv({
             primary: false,
             plain: false,
             link: false,
+            naked: false,
             class: "text-btn-secondary-fg"
         },
         {
@@ -671,6 +690,11 @@ var textStyles = tv({
             highlight: true,
             disabled: true,
             class: "text-btn-highlight-disabled-fg"
+        },
+        {
+            link: true,
+            naked: true,
+            class: "text-blue-700 underline"
         }
     ],
     defaultVariants: {
@@ -712,6 +736,7 @@ var connectedDisclosureStyles = tv({
  * @param {boolean} [props.ariaChecked] - Whether the button is checked (for toggle buttons).
  * @param {React.Component} [props.icon] - Icon component to display within the button.
  * @param {"default" | "primary" | "secondary" | "plain" | "link" | "destructive" | "highlight"} [props.iconColor='default'] - Color of the icon.
+ * @param {"default" | "sm" | "lg" | "xl"} [props.iconSize='default'] - Size of the icon.
  * @param {boolean} [props.primary=false] - Whether to show the primary button style.
  * @param {boolean} [props.highlight=false] - Whether to show the highlight button style.
  * @param {boolean} [props.link=false] - Whether to show a link style.
@@ -719,10 +744,14 @@ var connectedDisclosureStyles = tv({
  * @param {boolean} [props.disclosure=false] - Whether to show a disclosure arrow.
  * @param {boolean} [props.disclosureRight=false] - Whether to show the disclosure on the right.
  * @param {boolean} [props.plain=false] - Whether to show plain styling without background.
+ * @param {boolean} [props.naked=false] - Whether to show the naked styling.
  * @param {"small" | "medium" | "large" | "stepper"} [props.size='medium'] - Size of the button ('small', 'medium', 'large', 'stepper').
  * @param {boolean} [props.fullWidth] - Whether the button should take full width.
  * @param {"left" | "center" | "right"} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
  * @param {string} [props.tooltip] - Tooltip to show when hovering over the button.
+ * @param {"left" | "center" | "right"} [props.tooltipAlignment='right'] - Alignment of the tooltip ('left', 'center', 'right').
+ * @param {"above" | "below" | "left" | "right"} [props.tooltipPosition='above'] - Position of the tooltip ('above', 'below', 'left', 'right').
+ * @param {"inline-block" | "block" | "inline"} [props.tooltipDisplay='inline-block'] - Display type of the tooltip ('inline-block', 'block', 'inline').
  * @param {Object} [props.connectedDisclosure] - Configuration for connected disclosure menu.
  * @param {Array<import("./ActionList").ActionListItem>} [props.connectedDisclosure.actions] - Actions to show in the disclosure menu.
  * @param {string} [props.className] - Additional CSS classes for the button.
@@ -772,7 +801,7 @@ var connectedDisclosureStyles = tv({
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var darkMode = useDarkMode().darkMode;
     var _useState = _sliced_to_array(useState(false), 2), showConnectedDisclosurePopover = _useState[0], setShowConnectedDisclosurePopover = _useState[1];
-    var id = props.id, children = props.children, url = props.url, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, external = props.external, target = props.target, submit = props.submit, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_pressed = props.pressed, pressed = _props_pressed === void 0 ? false : _props_pressed, accessibilityLabel = props.accessibilityLabel, role = props.role, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaDescribedBy = props.ariaDescribedBy, ariaChecked = props.ariaChecked, icon = props.icon, _iconColor = props.iconColor, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_primary = props.primary, primary = _props_primary === void 0 ? false : _props_primary, _props_highlight = props.highlight, highlight = _props_highlight === void 0 ? false : _props_highlight, _props_link = props.link, link = _props_link === void 0 ? false : _props_link, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_disclosureRight = props.disclosureRight, disclosureRight = _props_disclosureRight === void 0 ? false : _props_disclosureRight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_align = props.align, align = _props_align === void 0 ? "center" : _props_align, connectedDisclosure = props.connectedDisclosure, className = props.className, contentClassName = props.contentClassName, rounded = props.rounded, onClick = props.onClick, onMouseDown = props.onMouseDown, tooltip = props.tooltip, _props_tooltipAlignment = props.tooltipAlignment, tooltipAlignment = _props_tooltipAlignment === void 0 ? "right" : _props_tooltipAlignment, _props_tooltipPosition = props.tooltipPosition, tooltipPosition = _props_tooltipPosition === void 0 ? "above" : _props_tooltipPosition, shadow = props.shadow, restProps = _object_without_properties(props, [
+    var id = props.id, children = props.children, url = props.url, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, external = props.external, target = props.target, submit = props.submit, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_pressed = props.pressed, pressed = _props_pressed === void 0 ? false : _props_pressed, accessibilityLabel = props.accessibilityLabel, role = props.role, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaDescribedBy = props.ariaDescribedBy, ariaChecked = props.ariaChecked, icon = props.icon, _iconColor = props.iconColor, _props_iconSize = props.iconSize, iconSize = _props_iconSize === void 0 ? "default" : _props_iconSize, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_primary = props.primary, primary = _props_primary === void 0 ? false : _props_primary, _props_highlight = props.highlight, highlight = _props_highlight === void 0 ? false : _props_highlight, _props_link = props.link, link = _props_link === void 0 ? false : _props_link, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_disclosureRight = props.disclosureRight, disclosureRight = _props_disclosureRight === void 0 ? false : _props_disclosureRight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_naked = props.naked, naked = _props_naked === void 0 ? false : _props_naked, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_align = props.align, align = _props_align === void 0 ? "center" : _props_align, connectedDisclosure = props.connectedDisclosure, className = props.className, contentClassName = props.contentClassName, rounded = props.rounded, onClick = props.onClick, onMouseDown = props.onMouseDown, tooltip = props.tooltip, _props_tooltipAlignment = props.tooltipAlignment, tooltipAlignment = _props_tooltipAlignment === void 0 ? "right" : _props_tooltipAlignment, _props_tooltipPosition = props.tooltipPosition, tooltipPosition = _props_tooltipPosition === void 0 ? "above" : _props_tooltipPosition, _props_tooltipDisplay = props.tooltipDisplay, tooltipDisplay = _props_tooltipDisplay === void 0 ? "inline-block" : _props_tooltipDisplay, shadow = props.shadow, restProps = _object_without_properties(props, [
         "id",
         "children",
         "url",
@@ -790,6 +819,7 @@ var connectedDisclosureStyles = tv({
         "ariaChecked",
         "icon",
         "iconColor",
+        "iconSize",
         "bordered",
         "primary",
         "highlight",
@@ -798,6 +828,7 @@ var connectedDisclosureStyles = tv({
         "disclosure",
         "disclosureRight",
         "plain",
+        "naked",
         "size",
         "fullWidth",
         "align",
@@ -810,6 +841,7 @@ var connectedDisclosureStyles = tv({
         "tooltip",
         "tooltipAlignment",
         "tooltipPosition",
+        "tooltipDisplay",
         "shadow"
     ]);
     var hasIcon = !!icon;
@@ -847,14 +879,16 @@ var connectedDisclosureStyles = tv({
         shadow: shadow,
         darkMode: darkMode,
         bordered: bordered,
-        align: align
+        align: align,
+        naked: naked
     });
     var contentClasses = contentStyles({
         disclosure: disclosure,
         hasIcon: hasIcon,
         hasChildren: hasChildren,
         size: size,
-        iconOnly: iconOnly
+        iconOnly: iconOnly,
+        naked: naked
     });
     var iconClasses = iconStyles();
     var textClasses = textStyles({
@@ -865,7 +899,8 @@ var connectedDisclosureStyles = tv({
         highlight: highlight,
         pressed: pressed,
         loading: loading,
-        disabled: disabled
+        disabled: disabled,
+        naked: naked
     });
     var connectedDisclosureClasses = connectedDisclosureStyles({
         primary: primary,
@@ -913,7 +948,8 @@ var connectedDisclosureStyles = tv({
                         className: iconClasses,
                         children: /*#__PURE__*/ _jsx(Icon, {
                             source: memoizedIcon,
-                            color: disabled ? "disabled" : _iconColor || iconColor
+                            color: disabled ? "disabled" : _iconColor || iconColor,
+                            size: iconSize
                         })
                     }),
                     hasChildren && /*#__PURE__*/ _jsx("span", {
@@ -924,7 +960,8 @@ var connectedDisclosureStyles = tv({
                         className: "Litho-Button__DisclosureIcon relative -left-0.5",
                         children: /*#__PURE__*/ _jsx(Icon, {
                             source: CaretDownMinor,
-                            color: disabled ? "disabled" : _iconColor || iconColor
+                            color: disabled ? "disabled" : _iconColor || iconColor,
+                            size: iconSize
                         })
                     })
                 ]
@@ -976,6 +1013,7 @@ var connectedDisclosureStyles = tv({
             content: tooltip,
             alignment: tooltipAlignment,
             preferredPosition: tooltipPosition,
+            display: tooltipDisplay,
             children: showConnectedDisclosure ? contentWithDisclosure : content
         });
     }

package/dist/esm/components/Card.js

@@ -517,6 +517,7 @@ var clickableRowStyles = tv({
  * @param {Function} [props.onClick] - Click handler for the row.
  * @param {string} [props.id] - ID to apply to the row element.
  * @param {string} [props.url] - URL to open when the row is clicked.
+ * @param {string} [props.className] - Additional classes to apply to the row.
  * @param {boolean} [props.disabled=false] - Disables interaction with the row.
  *
  * @returns {React.ReactElement} The rendered ClickableRow component.

package/dist/esm/components/ColorField.js

@@ -47,7 +47,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { SketchPicker } from "react-color";
+import Sketch from "@uiw/react-color-sketch";
 import { tv } from "tailwind-variants";
 import Text from "./Text.js";
 var colorContainer = tv({
@@ -133,7 +133,7 @@ var colorCell = tv({
                 style: zIndexOverride ? {
                     zIndex: zIndexOverride
                 } : {},
-                children: /*#__PURE__*/ _jsx(SketchPicker, {
+                children: /*#__PURE__*/ _jsx(Sketch, {
                     color: value,
                     onChange: function(param) {
                         var hex = param.hex;

package/dist/esm/components/EmptyState.js

@@ -35,10 +35,10 @@ var styles = tv({
  * @returns {JSX.Element} The rendered EmptyState component.
  */ function EmptyState() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var description = props.description, icon = props.icon, iconSource = props.iconSource, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingXl" : _props_titleVariant, _props_descriptionVariant = props.descriptionVariant, descriptionVariant = _props_descriptionVariant === void 0 ? "bodyLg" : _props_descriptionVariant, progress = props.progress;
+    var description = props.description, icon = props.icon, iconSource = props.iconSource, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingXl" : _props_titleVariant, _props_descriptionVariant = props.descriptionVariant, descriptionVariant = _props_descriptionVariant === void 0 ? "bodyLg" : _props_descriptionVariant, progress = props.progress, className = props.className;
     var classes = styles();
     return /*#__PURE__*/ _jsxs("div", {
-        className: classes,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         children: [
             iconSource && /*#__PURE__*/ _jsx("div", {
                 className: "flex items-center justify-center w-16 h-16",

package/dist/esm/components/Filters.js

@@ -804,11 +804,11 @@ var tabActionIconStyles = tv({
  * @param {boolean} [props.subdued=false] - Whether the text field appears subdued.
  * @param {boolean} [props.disableQueryField=false] - Whether the text field is disabled.
  * @param {boolean} [props.transparent=true] - Whether the text field has a transparent background.
+ * @param {string} [props.autoComplete="on"] - Whether the text field should autocomplete.
  * @returns {JSX.Element} The text field component.
- */ Filters.TextField = function FiltersTextField() {
-    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+ */ Filters.TextField = function(props) {
     var darkMode = useDarkMode().darkMode;
-    var queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, disableQueryField = props.disableQueryField;
+    var queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, disableQueryField = props.disableQueryField, _props_autoComplete = props.autoComplete, autoComplete = _props_autoComplete === void 0 ? "on" : _props_autoComplete;
     return /*#__PURE__*/ _jsx("div", {
         className: "p-1",
         children: /*#__PURE__*/ _jsx(TextField, {
@@ -821,6 +821,7 @@ var tabActionIconStyles = tv({
             disabled: disableQueryField,
             subdued: darkMode,
             transparent: !darkMode,
+            autoComplete: autoComplete,
             clearButton: true,
             onClearButtonClick: onQueryClear
         })

package/dist/esm/components/Frame.js

@@ -159,14 +159,17 @@ var logoStyles = tv({
  * @param {number} props.logo.width - Width of the logo image.
  * @param {boolean} props.showSearchTrigger - Whether to show the search trigger.
  * @param {React.ReactNode} props.searchModal - Modal to render as the search modal.
- * @param {function} props.onToggleSearchModal - Function to toggle the search modal.
+ * @param {function} props.onToggleSearch - Function to toggle the search modal.
  * @param {string} [props.className] - Additional CSS classes for the Frame.
  * @param {React.ReactNode} props.children - Content to render within the Frame.
  * @param {boolean} [props.alwaysShowUserMenuInTopBar] - Whether to always show the user menu in the top bar.
  * @param {React.ReactNode} [props.headerAccessory] - Accessory to render in the header.
  * @returns {React.ReactElement} The rendered Frame component.
  */ var Frame = function(param) {
-    var navigation = param.navigation, announcement = param.announcement, logo = param.logo, children = param.children, className = param.className, userMenu = param.userMenu, moreActions = param.moreActions, _param_showSearchTrigger = param.showSearchTrigger, showSearchTrigger = _param_showSearchTrigger === void 0 ? true : _param_showSearchTrigger, _param_alwaysShowUserMenuInTopBar = param.alwaysShowUserMenuInTopBar, alwaysShowUserMenuInTopBar = _param_alwaysShowUserMenuInTopBar === void 0 ? false : _param_alwaysShowUserMenuInTopBar, searchModal = param.searchModal, onToggleSearchModal = param.onToggleSearchModal, headerAccessory = param.headerAccessory;
+    var navigation = param.navigation, announcement = param.announcement, logo = param.logo, children = param.children, className = param.className, userMenu = param.userMenu, moreActions = param.moreActions, _param_showSearchTrigger = param.showSearchTrigger, showSearchTrigger = _param_showSearchTrigger === void 0 ? true : _param_showSearchTrigger, _param_alwaysShowUserMenuInTopBar = param.alwaysShowUserMenuInTopBar, alwaysShowUserMenuInTopBar = _param_alwaysShowUserMenuInTopBar === void 0 ? false : _param_alwaysShowUserMenuInTopBar, _param_searchLabel = param.searchLabel, searchLabel = _param_searchLabel === void 0 ? "Search" : _param_searchLabel, _param_searchIcon = param.searchIcon, searchIcon = _param_searchIcon === void 0 ? /*#__PURE__*/ _jsx(Icon, {
+        source: SearchMajor,
+        color: "subdued"
+    }) : _param_searchIcon, searchModal = param.searchModal, onToggleSearch = param.onToggleSearch, headerAccessory = param.headerAccessory;
     var darkMode = useDarkMode().darkMode;
     var _useContext = useContext(FrameContext), contentIsInIframe = _useContext.contentIsInIframe, contentIsFullPage = _useContext.contentIsFullPage, showMobileNavigation = _useContext.showMobileNavigation, setShowMobileNavigation = _useContext.setShowMobileNavigation, modalIsOpen = _useContext.modalIsOpen, paneIsOpen = _useContext.paneIsOpen, embedded = _useContext.embedded;
     var _useState = _sliced_to_array(useState(""), 2), searchTriggerShortcutText = _useState[0], setSearchTriggerShortcutText = _useState[1];
@@ -204,7 +207,7 @@ var logoStyles = tv({
         var handleSearchShortcut = function(e) {
             if ((e.metaKey || e.ctrlKey) && e.key === "k") {
                 e.preventDefault();
-                onToggleSearchModal();
+                onToggleSearch();
             }
         };
         window.addEventListener("keydown", handleSearchShortcut);
@@ -227,18 +230,15 @@ var logoStyles = tv({
     var searchTrigger = showSearchTrigger ? /*#__PURE__*/ _jsxs("div", {
         className: "w-full pl-2 pr-3 h-8 rounded-md flex items-center gap-2 cursor-pointer bg-tint-2 hover:bg-tint-3 active:bg-tint-4 dark:bg-tint-alt-2 dark:hover:bg-tint-alt-3 dark:active:bg-tint-alt-4",
         onClick: function() {
-            return onToggleSearchModal();
+            return onToggleSearch();
         },
         children: [
-            /*#__PURE__*/ _jsx(Icon, {
-                source: SearchMajor,
-                color: "subdued"
-            }),
+            searchIcon,
             /*#__PURE__*/ _jsxs("div", {
                 className: "flex-1 text-low flex items-center justify-between gap-1",
                 children: [
                     /*#__PURE__*/ _jsx("span", {
-                        children: "Search"
+                        children: searchLabel
                     }),
                     /*#__PURE__*/ _jsx("span", {
                         className: "text-xs text-lowest hidden @md:block",

package/dist/esm/components/HorizontalStack.js

@@ -83,7 +83,13 @@ var styles = tv({
     base: "Litho-HorizontalStack flex flex-row",
     variants: {
         gap: {
-            none: "",
+            none: "gap-0",
+            // Semantic values (recommended)
+            xs: "gap-1",
+            sm: "gap-2",
+            md: "gap-4",
+            lg: "gap-8",
+            // Numeric values (backwards compatibility)
             "0": "gap-0",
             "px": "gap-px",
             "0.5": "gap-0.5",
@@ -91,6 +97,7 @@ var styles = tv({
             "2": "gap-2",
             "3": "gap-3",
             "4": "gap-4",
+            "5": "gap-5",
             "6": "gap-6",
             "8": "gap-8",
             "10": "gap-10"
@@ -126,7 +133,7 @@ var styles = tv({
  * @param {Object} [props={}] - Component props.
  * @param {string} [props.as='div'] - The HTML element to render. Defaults to `div`.
  * @param {React.ReactNode} [props.children] - Child elements to render inside the stack.
- * @param {string} [props.gap] - Spacing between children. Options: 'none', '0', 'px', '0.5', '1', '2', '3', '4', '6', '8', '10'.
+ * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap] - Spacing between children. Semantic options: 'none', 'xs' (1), 'sm' (2), 'md' (4), 'lg' (8). Numeric options: '0', 'px', '0.5', '1', '2', '3', '4', '5', '6', '8', '10'.
  * @param {string} [props.id] - Optional ID for the component.
  * @param {string} [props.className] - Additional custom class names to apply to the component.
  * @param {string} [props.align='start'] - Horizontal alignment of children. Options: 'start', 'center', 'end'.

package/dist/esm/components/Icon.js

@@ -33,6 +33,7 @@ var iconStyles = tv({
             default: "fill-higher",
             base: "fill-higher",
             subdued: "fill-low",
+            lower: "fill-lower",
             link: "fill-link",
             primary: "fill-link",
             alternate: "fill-alternate",

package/dist/esm/components/List.js

@@ -9,9 +9,9 @@ var styles = tv({
             number: "list-decimal"
         },
         spacing: {
-            loose: "space-y-2",
-            normal: "space-y-1",
-            tight: "space-y-0"
+            loose: "space-y-3",
+            normal: "space-y-2",
+            tight: "space-y-1"
         }
     }
 });