@heymantle/litho 0.0.14 → 0.0.15

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];
@@ -195,6 +196,8 @@ 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 props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -308,6 +311,8 @@ var containerStyles = (0, _tailwindvariants.tv)({
                         fullWidth: fullWidth,
                         hidden: tab.hidden,
                         simple: simpleTabs,
+                        badgeCount: tab.badgeCount,
+                        badgeStatus: tab.badgeStatus,
                         children: tab.content
                     }, "tab-".concat(tab.originalIndex));
                 })
@@ -400,9 +405,30 @@ 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 {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, 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({
@@ -443,6 +469,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/playwright.config.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _test = require("@playwright/test");
+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;
+}
+var _default = (0, _test.defineConfig)({
+    testDir: './tests/visual',
+    // Run tests in parallel
+    fullyParallel: true,
+    // Fail the build on CI if you accidentally left test.only in the source code
+    forbidOnly: !!process.env.CI,
+    // Retry failed tests on CI
+    retries: process.env.CI ? 2 : 0,
+    // Limit parallel workers on CI
+    workers: process.env.CI ? 1 : undefined,
+    // Reporter configuration
+    reporter: process.env.CI ? 'github' : 'list',
+    // Shared settings for all projects
+    use: {
+        // Base URL for Storybook
+        baseURL: 'http://127.0.0.1:6006',
+        // Capture trace on failure
+        trace: 'on-first-retry'
+    },
+    // Snapshot naming - remove platform suffix for cross-platform baselines
+    snapshotPathTemplate: '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
+    // Visual comparison settings
+    expect: {
+        toHaveScreenshot: {
+            // Allow differences for anti-aliasing and sub-pixel text positioning
+            maxDiffPixelRatio: 0.04,
+            // Animation settings
+            animations: 'disabled'
+        }
+    },
+    // Configure projects for major browsers
+    projects: [
+        {
+            name: 'chromium',
+            use: _object_spread_props(_object_spread({}, _test.devices['Desktop Chrome']), {
+                // Consistent viewport
+                viewport: {
+                    width: 1280,
+                    height: 720
+                }
+            })
+        }
+    ],
+    // Web server configuration - start Storybook before running tests
+    webServer: {
+        command: 'npm run storybook -- --ci --quiet',
+        url: 'http://127.0.0.1:6006',
+        reuseExistingServer: !process.env.CI,
+        timeout: 120000
+    }
+});

package/dist/cjs/styles/Table.js

@@ -34,7 +34,7 @@ var headingStyles = (0, _tailwindvariants.tv)({
     base: "Litho-Table-Heading py-0 px-2 @md:first:pl-3 whitespace-nowrap font-semibold! text-high text-sm dark:text-normal",
     variants: {
         hidden: {
-            true: "hidden opacity-0 pointer-events-none @md:block @md:opacity-100 @md:pointer-events-auto"
+            true: "hidden opacity-0 pointer-events-none @md:table-cell @md:opacity-100 @md:pointer-events-auto"
         },
         verticalAlign: {
             top: "align-top",
@@ -474,7 +474,7 @@ var fixedColumnsStyles = (0, _tailwindvariants.tv)({
             false: ""
         },
         firstColumns: {
-            true: "left-0",
+            true: "left-0 hidden @md:block",
             false: "right-0 hidden @md:block"
         },
         selectable: {
@@ -491,11 +491,6 @@ var fixedColumnsStyles = (0, _tailwindvariants.tv)({
         }
     },
     compoundVariants: [
-        {
-            firstColumns: true,
-            selectable: false,
-            className: "hidden @md:block"
-        },
         {
             firstColumns: true,
             canScrollLeft: true,