@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/components/RangeSlider.js

@@ -11,7 +11,9 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _react = require("react");
-var _index = require("../index");
+var _Label = /*#__PURE__*/ _interop_require_default(require("./Label"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _TextField = /*#__PURE__*/ _interop_require_default(require("./TextField"));
 var _tailwindvariants = require("tailwind-variants");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -21,6 +23,11 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -159,7 +166,7 @@ function useSyncedState(externalValue) {
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         className: "Litho-RangeSlider",
         children: [
-            label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Label, {
+            label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
                 id: id,
                 hidden: labelHidden,
                 disabled: disabled,
@@ -170,7 +177,7 @@ function useSyncedState(externalValue) {
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: "flex items-center gap-2",
                 children: [
-                    prefix && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                    prefix && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         color: "subdued",
                         as: "div",
                         className: prefixClasses,
@@ -209,7 +216,7 @@ function useSyncedState(externalValue) {
                     }),
                     output && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "max-w-21",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                             transparent: true,
                             type: "number",
                             disabled: disabled,

package/dist/cjs/components/ResourceList.js

@@ -10,7 +10,13 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("./VerticalStack"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-ResourceList flex flex-col min-w-72",
     variants: {
@@ -46,14 +52,14 @@ var styles = (0, _tailwindvariants.tv)({
         small: "2",
         large: "4"
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.VerticalStack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
         gap: gapMap[gap],
         className: styles({
             divider: divider
         }),
         children: loading && items.length === 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
             className: "flex justify-center items-center p-3",
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                 size: "small"
             })
         }, "".concat(resourceName.singular, "-loading")) : items.length > 0 ? items.map(function(item, index) {

package/dist/cjs/components/Select.js

@@ -137,6 +137,8 @@ var contentStyles = (0, _tailwindvariants.tv)({
  * @param {function} props.onFocus - Callback for when the select gains focus.
  * @param {function} props.onBlur - Callback for when the select loses focus.
  * @param {boolean} [props.requiredIndicator] - Whether to show a required indicator next to the label.
+ * @param {string} [props.className] - Additional CSS classes to apply to the select container.
+ * @param {string} [props.contentClassName] - Additional CSS classes to apply to the select content area.
  * @returns {JSX.Element} The rendered Select component.
  */ function Select() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};

package/dist/cjs/components/Stack.js

@@ -0,0 +1,223 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Stack flex",
+    variants: {
+        direction: {
+            vertical: "flex-col",
+            horizontal: "flex-row"
+        },
+        gap: {
+            // Semantic values (recommended)
+            none: "gap-0",
+            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",
+            "1": "gap-1",
+            "2": "gap-2",
+            "3": "gap-3",
+            "4": "gap-4",
+            "5": "gap-5",
+            "6": "gap-6",
+            "8": "gap-8",
+            "10": "gap-10"
+        },
+        align: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+            "space-between": "justify-between",
+            "space-evenly": "justify-evenly",
+            "space-around": "justify-around",
+            spaceBetween: "justify-between"
+        },
+        blockAlign: {
+            start: "items-start",
+            center: "items-center",
+            end: "items-end",
+            stretch: "items-stretch"
+        },
+        inlineAlign: {
+            start: "items-start",
+            center: "items-center",
+            end: "items-end",
+            stretch: "items-stretch"
+        },
+        wrap: {
+            true: "flex-wrap",
+            false: "flex-nowrap"
+        }
+    },
+    defaultVariants: {
+        direction: "vertical",
+        gap: "md",
+        align: "start"
+    }
+});
+/**
+ * Stack Component
+ *
+ * A flexible stack component for creating vertical or horizontal layouts with customizable spacing and alignment.
+ * By default, creates a vertical stack with medium gap spacing.
+ *
+ * @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 {boolean} [props.horizontal=false] - If true, renders a horizontal stack (flex-row). Defaults to vertical (flex-col).
+ * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap='md'] - Spacing between children. Semantic options: 'none' (0), 'xs' (1), 'sm' (2), 'md' (4), 'lg' (8). Numeric options: '0', 'px', '0.5', '1', '2', '3', '4', '5', '6', '8', '10'. Defaults to 'md'.
+ * @param {string} [props.id] - Optional ID for the component.
+ * @param {string} [props.className] - Additional custom class names to apply to the component.
+ * @param {('start'|'center'|'end'|'space-between'|'space-evenly'|'space-around'|'spaceBetween')} [props.align='start'] - Main axis alignment. Controls horizontal alignment for horizontal stacks and vertical alignment for vertical stacks.
+ * @param {('start'|'center'|'end'|'stretch')} [props.blockAlign] - Cross-axis alignment for horizontal stacks (vertical alignment). Only applicable when horizontal=true.
+ * @param {('start'|'center'|'end'|'stretch')} [props.inlineAlign] - Cross-axis alignment for vertical stacks (horizontal alignment). Only applicable when horizontal=false.
+ * @param {boolean} [props.wrap=false] - Whether children should wrap to the next line if necessary. Defaults to false.
+ * @param {Object} [restProps] - Additional props passed to the root element.
+ *
+ * @returns {JSX.Element} The rendered Stack component.
+ *
+ * @example
+ * // Vertical stack (default)
+ * <Stack gap="sm" inlineAlign="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Stack>
+ *
+ * @example
+ * // Horizontal stack
+ * <Stack horizontal gap="md" blockAlign="center" wrap={true}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Stack>
+ */ function Stack() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_as = props.as, as = _props_as === void 0 ? "div" : _props_as, children = props.children, _props_horizontal = props.horizontal, horizontal = _props_horizontal === void 0 ? false : _props_horizontal, _props_gap = props.gap, gap = _props_gap === void 0 ? "md" : _props_gap, id = props.id, className = props.className, align = props.align, blockAlign = props.blockAlign, inlineAlign = props.inlineAlign, _props_wrap = props.wrap, wrap = _props_wrap === void 0 ? false : _props_wrap, restProps = _object_without_properties(props, [
+        "as",
+        "children",
+        "horizontal",
+        "gap",
+        "id",
+        "className",
+        "align",
+        "blockAlign",
+        "inlineAlign",
+        "wrap"
+    ]);
+    var direction = horizontal ? "horizontal" : "vertical";
+    // For horizontal stacks, use blockAlign for cross-axis
+    // For vertical stacks, use inlineAlign for cross-axis
+    var crossAxisAlign = horizontal ? blockAlign : inlineAlign;
+    var classes = styles(_object_spread_props(_object_spread({
+        direction: direction,
+        gap: gap,
+        align: align
+    }, horizontal && blockAlign ? {
+        blockAlign: blockAlign
+    } : {}, !horizontal && inlineAlign ? {
+        inlineAlign: inlineAlign
+    } : {}), {
+        wrap: wrap
+    }));
+    var Element = as;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, _object_spread_props(_object_spread({
+        id: id,
+        className: "".concat(classes).concat(className ? " ".concat(className) : "")
+    }, restProps), {
+        children: children
+    }));
+}
+var _default = Stack;

package/dist/cjs/components/Table.js

@@ -13,7 +13,19 @@ var _jsxruntime = require("react/jsx-runtime");
 var _polarisicons = require("@shopify/polaris-icons");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _Modal = require("../components/Modal");
-var _index = require("../index");
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _ButtonGroup = /*#__PURE__*/ _interop_require_default(require("./ButtonGroup"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("./Card"));
+var _Checkbox = /*#__PURE__*/ _interop_require_default(require("./Checkbox"));
+var _EmptyState = /*#__PURE__*/ _interop_require_default(require("./EmptyState"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Pagination = /*#__PURE__*/ _interop_require_default(require("./Pagination"));
+var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
+var _SkeletonText = /*#__PURE__*/ _interop_require_default(require("./SkeletonText"));
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
 var _Table = require("../styles/Table");
 var _useIndexResourceState = require("../utilities/useIndexResourceState");
 var _useMounted = require("../utilities/useMounted");
@@ -291,7 +303,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
     };
     var headings = [
         selectable && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
                 checked: [
                     _useIndexResourceState.SelectionType.Page,
                     _useIndexResourceState.SelectionType.All
@@ -492,7 +504,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                     var sortIndex = selectable ? indexAdjusted - 1 : indexAdjusted;
                     var sortContent = isSortable ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "min-h-5 ".concat(sort.index === sortIndex ? "opacity-100" : "opacity-0 group-hover:opacity-100"),
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: sort.direction === "ascending" ? _polarisicons.SortAscendingMajor : _polarisicons.SortDescendingMajor
                         })
                     }) : null;
@@ -530,7 +542,8 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                             alignment: alignment,
                             verticalAlign: verticalAlign,
                             tableIsSelectable: selectable,
-                            headingStyle: headingStyle
+                            headingStyle: headingStyle,
+                            bordered: bordered
                         }),
                         style: {
                             width: width,
@@ -540,7 +553,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                             className: _Table.styles.headingLabelContainerStyles({
                                 alignment: alignment
                             }),
-                            children: heading.hidden ? null : heading.tooltip || heading.tooltipContent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                            children: heading.hidden ? null : heading.tooltip || heading.tooltipContent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
                                 content: heading.tooltip || heading.tooltipContent,
                                 preferredPosition: "above",
                                 children: labelContent
@@ -727,10 +740,10 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                     className: "flex items-center gap-5 h-full min-h-9 pl-4",
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             size: "small"
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.Text, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
                             color: "subdued",
                             fontWeight: "normal",
                             children: [
@@ -761,7 +774,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                         sticky: isHeaderSticky
                     }),
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
                             checked: isPageSelected || isAllSelected,
                             indeterminate: isSomeSelected,
                             disabled: showEmptyState,
@@ -805,7 +818,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
             ref: containerRef,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                    className: "relative overflow-hidden",
+                    className: "relative overflow-hidden ".concat(bordered ? "rounded-md" : ""),
                     children: [
                         loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                             className: "pt-9",
@@ -873,7 +886,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                                 canScrollRight: canScrollRight
                             })
                         }),
-                        showEmptyState ? emptyState ? emptyState : /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.EmptyState, {
+                        showEmptyState ? emptyState ? emptyState : /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmptyState.default, {
                             title: "No ".concat(resourceName.plural, " found"),
                             description: "Try changing the filters or search term"
                         }) : null
@@ -989,7 +1002,7 @@ Table.displayName = "Table";
         children: [
             selectable && !reverseColumns && /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.Cell, {
                 selectionCell: true,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
                     checked: isSelected,
                     onChange: handleCheckboxSelectionChange
                 })
@@ -1065,19 +1078,19 @@ Table.Cell.displayName = "Table.Cell";
  */ function Footer(param) {
     var hasNextPage = param.hasNextPage, hasPreviousPage = param.hasPreviousPage, onNext = param.onNext, onPrevious = param.onPrevious, _param_showTotalResultCount = param.showTotalResultCount, showTotalResultCount = _param_showTotalResultCount === void 0 ? false : _param_showTotalResultCount, _param_total = param.total, total = _param_total === void 0 ? 0 : _param_total, _param_paddedHalf = param.paddedHalf, paddedHalf = _param_paddedHalf === void 0 ? false : _param_paddedHalf;
     if (!hasNextPage && !hasPreviousPage) return null;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Card.Section, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default.Section, {
         borderTop: true,
         paddedHalf: paddedHalf,
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "flex justify-start",
+            className: "flex justify-start items-center gap-2",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Pagination, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pagination.default, {
                     hasPrevious: hasPreviousPage,
                     hasNext: hasNextPage,
                     onNext: onNext,
                     onPrevious: onPrevious
                 }),
-                showTotalResultCount && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.Text, {
+                showTotalResultCount && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
                     color: "subdued",
                     children: [
                         total,
@@ -1107,9 +1120,9 @@ Table.Footer.displayName = "Table.Footer";
     };
     var renderPopover = function(index, title, actions) {
         var icon = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null, disclosure = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : true;
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
             active: activeBulkAction === index,
-            activator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+            activator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                 onClick: function() {
                     return handleToggle(index);
                 },
@@ -1122,7 +1135,7 @@ Table.Footer.displayName = "Table.Footer";
             onClose: function() {
                 return setActiveBulkAction(null);
             },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ActionList, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
                 items: actions,
                 onActionAnyItem: function() {
                     return setActiveBulkAction(null);
@@ -1132,7 +1145,7 @@ Table.Footer.displayName = "Table.Footer";
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: _Table.styles.bulkActionStyles(),
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.ButtonGroup, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ButtonGroup.default, {
             segmented: true,
             children: [
                 promotedBulkActions.map(function(action, index) {
@@ -1170,7 +1183,7 @@ Table.BulkActions.displayName = "Table.BulkActions";
                 length: columns
             }, function(_, index) {
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.Cell, {
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.SkeletonText, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
                         lines: 1,
                         className: "w-96"
                     })

package/dist/cjs/components/Tabs.js

@@ -194,10 +194,11 @@ var containerStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.activeDisclosure=false] - Whether the "More" disclosure is currently active.
  * @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.
  * @returns {JSX.Element} The Tabs component.
  */ 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;
+    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);
     var containerRef = (0, _react.useRef)(null);
     var disclosureRef = (0, _react.useRef)(null);
@@ -306,6 +307,7 @@ var containerStyles = (0, _tailwindvariants.tv)({
                         icon: tab.icon,
                         fullWidth: fullWidth,
                         hidden: tab.hidden,
+                        simple: simpleTabs,
                         children: tab.content
                     }, "tab-".concat(tab.originalIndex));
                 })
@@ -356,10 +358,6 @@ var tabStyles = (0, _tailwindvariants.tv)({
             true: "pl-3 pr-1",
             false: "px-3"
         },
-        selected: {
-            true: "text-tab-active-fg bg-tab-active-bg hover:bg-tab-active-bg-hover active:bg-tab-active-bg-active",
-            false: "text-tab-inactive-fg bg-tab-inactive-bg hover:bg-tab-inactive-bg-hover active:bg-tab-inactive-bg-active"
-        },
         disabled: {
             true: "cursor-not-allowed",
             false: "cursor-pointer"
@@ -370,12 +368,41 @@ var tabStyles = (0, _tailwindvariants.tv)({
         },
         hidden: {
             true: "invisible"
+        },
+        simple: {
+            true: "flex flex-col items-center justify-center rounded-none bg-transparent hover:bg-transparent active:bg-transparent"
+        },
+        selected: {
+            true: "",
+            false: ""
         }
-    }
+    },
+    compoundVariants: [
+        {
+            selected: true,
+            simple: false,
+            class: "text-tab-active-fg bg-tab-active-bg hover:bg-tab-active-bg-hover active:bg-tab-active-bg-active"
+        },
+        {
+            selected: false,
+            simple: false,
+            class: "text-tab-inactive-fg bg-tab-inactive-bg hover:bg-tab-inactive-bg-hover active:bg-tab-inactive-bg-active"
+        },
+        {
+            selected: true,
+            simple: true,
+            class: "text-highest"
+        },
+        {
+            selected: false,
+            simple: true,
+            class: "text-lowest"
+        }
+    ]
 });
 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, _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, 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 polarisIcon = typeof icon === "string" ? _polarisicons[icon] : _polarisicons[icon === null || icon === void 0 ? void 0 : icon.displayName];
     var showDisclosure = disclosure && (selected || alwaysShowDisclosureIcon);
     var tabClasses = tabStyles({
@@ -383,7 +410,8 @@ function Tab() {
         disclosure: showDisclosure,
         disabled: disabled,
         fullWidth: fullWidth,
-        hidden: hidden
+        hidden: hidden,
+        simple: simple
     });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         id: id ? "tab-".concat(id) : undefined,
@@ -396,11 +424,12 @@ function Tab() {
                 className: "Litho-Tabs__Tab-Icon mr-1",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: polarisIcon,
-                    color: selected ? "active" : "subdued"
+                    color: selected && simple ? "default" : selected ? "primary" : "subdued",
+                    size: simple ? "lg" : undefined
                 })
             }),
             icon && !!polarisIcon === false && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                className: "Litho-Tabs__Tab-Icon mr-1",
+                className: "Litho-Tabs__Tab-Icon ".concat(simple ? "mr-0" : "mr-1"),
                 children: icon
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
@@ -411,7 +440,8 @@ function Tab() {
                 className: "Litho-Tabs__Tab-Disclosure",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: active ? _polarisicons.CaretUpMinor : _polarisicons.CaretDownMinor,
-                    color: selected ? "active" : "subdued"
+                    color: selected && simple ? "default" : selected ? "active" : "subdued",
+                    size: simple ? "lg" : undefined
                 })
             })
         ]

package/dist/cjs/components/Text.js

@@ -138,7 +138,7 @@ var styles = (0, _tailwindvariants.tv)({
             "btn-secondary-fg": "text-btn-secondary-fg",
             "tab-active-fg": "text-tab-active-fg",
             "tab-active-fg-low": "text-tab-active-fg-low",
-            "FrameSaveBar": "text-alternate dark:text-black"
+            FrameSaveBar: "text-alternate dark:text-black"
         },
         truncate: {
             true: "truncate",
@@ -241,10 +241,11 @@ var styles = (0, _tailwindvariants.tv)({
  * @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() {
     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, rest = _object_without_properties(props, [
+    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",
         "as",
         "className",
@@ -254,7 +255,8 @@ var styles = (0, _tailwindvariants.tv)({
         "variant",
         "visuallyHidden",
         "clampLines",
-        "strike"
+        "strike",
+        "children"
     ]);
     var classes = styles({
         alignment: alignment,
@@ -266,9 +268,10 @@ var styles = (0, _tailwindvariants.tv)({
         clampLines: clampLines,
         strike: strike
     });
-    var Element = as || (visuallyHidden ? 'span' : 'p');
+    var Element = as || (visuallyHidden ? "span" : "p");
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, _object_spread_props(_object_spread({}, rest), {
-        className: "".concat(classes).concat(className ? " ".concat(className) : '')
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: children
     }));
 }
 var _default = Text;