@heymantle/litho 0.0.9 → 0.0.12

package/dist/esm/components/ResourceList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
 import Spinner from "./Spinner.js";
-import VerticalStack from "./VerticalStack.js";
+import Stack from "./Stack.js";
 var styles = tv({
     base: "Litho-ResourceList flex flex-col min-w-72",
     variants: {
@@ -37,7 +37,7 @@ var styles = tv({
         small: "2",
         large: "4"
     };
-    return /*#__PURE__*/ _jsx(VerticalStack, {
+    return /*#__PURE__*/ _jsx(Stack, {
         gap: gapMap[gap],
         className: styles({
             divider: divider

package/dist/esm/components/TabNavigation.js

@@ -0,0 +1,285 @@
+"use client";
+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];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useLayoutEffect, useCallback, useState } from "react";
+import { CancelMinor } from "@shopify/polaris-icons";
+import { tv } from "tailwind-variants";
+import Button from "./Button.js";
+import Text from "./Text.js";
+import Spinner from "./Spinner.js";
+import Tooltip from "./Tooltip.js";
+var AVG_CHAR_WIDTH = 5.5;
+var tabStyles = tv({
+    base: "relative group cursor-pointer rounded-t-sm items-center px-2 pt-2 gap-0.5 overflow-hidden min-w-[60px] max-w-[160px] pointer-coarse:pb-1 pointer-coarse:pt-3 transition-colors",
+    variants: {
+        isActive: {
+            true: "bg-surface-lowest",
+            false: "bg-transparent hover:bg-surface-lower"
+        }
+    },
+    defaultVariants: {
+        isActive: false
+    }
+});
+var textStyles = tv({
+    base: "leading-none break-all",
+    variants: {
+        isActive: {
+            true: "",
+            false: "text-low"
+        }
+    }
+});
+var gradientOverlayStyles = tv({
+    base: "sm:opacity-0 sm:group-hover:opacity-100 transition-opacity absolute pointer-events-none pointer-coarse:hidden",
+    variants: {
+        isActive: {
+            true: "bg-surface-lowest",
+            false: "bg-surface-lower"
+        }
+    }
+});
+// Component to handle truncation detection and tooltip
+function TabTitle(param) {
+    var title = param.title, isActive = param.isActive, tabContainerRef = param.tabContainerRef;
+    var _useState = _sliced_to_array(useState(false), 2), shouldShowTooltip = _useState[0], setShouldShowTooltip = _useState[1];
+    useLayoutEffect(function() {
+        if (!title || !(tabContainerRef === null || tabContainerRef === void 0 ? void 0 : tabContainerRef.current)) {
+            setShouldShowTooltip(false);
+            return;
+        }
+        var checkOverflow = function() {
+            if (!(tabContainerRef === null || tabContainerRef === void 0 ? void 0 : tabContainerRef.current)) return;
+            var tabElement = tabContainerRef.current;
+            if (!tabElement) return;
+            // Get the actual tab width
+            var tabWidth = tabElement.offsetWidth;
+            var estimatedCharCapacity = Math.floor(tabWidth / AVG_CHAR_WIDTH);
+            // Show tooltip if title length exceeds estimated capacity
+            setShouldShowTooltip(title.length > estimatedCharCapacity);
+        };
+        var resizeObserver = null;
+        // Use requestAnimationFrame to ensure DOM is ready
+        var rafId = requestAnimationFrame(function() {
+            checkOverflow();
+            // Watch for size changes
+            if (tabContainerRef === null || tabContainerRef === void 0 ? void 0 : tabContainerRef.current) {
+                resizeObserver = new ResizeObserver(checkOverflow);
+                resizeObserver.observe(tabContainerRef.current);
+            }
+        });
+        return function() {
+            cancelAnimationFrame(rafId);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [
+        title,
+        tabContainerRef
+    ]);
+    var textElement = /*#__PURE__*/ _jsx("div", {
+        className: "overflow-hidden",
+        children: /*#__PURE__*/ _jsx(Text, {
+            variant: "bodyXs",
+            className: textStyles({
+                isActive: isActive
+            }),
+            clampLines: 1,
+            children: title
+        })
+    });
+    // Only show tooltip if text is likely truncated based on character count vs tab width
+    if (shouldShowTooltip) {
+        return /*#__PURE__*/ _jsx(Tooltip, {
+            content: title,
+            className: "align-top",
+            children: textElement
+        });
+    }
+    return textElement;
+}
+function TabNavigation() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_tabs = props.tabs, tabs = _props_tabs === void 0 ? [] : _props_tabs, activeTabId = props.activeTabId, onTabClick = props.onTabClick, onTabClose = props.onTabClose, _props_className = props.className, className = _props_className === void 0 ? "" : _props_className;
+    var scrollContainerRef = useRef(null);
+    var tabRefsMap = useRef(new Map());
+    // Function to scroll the active tab into view and center it
+    var scrollToActiveTab = useCallback(function() {
+        if (!scrollContainerRef.current || !activeTabId) return;
+        var container = scrollContainerRef.current;
+        var activeTabElement = container.querySelector('[data-tab-id="'.concat(activeTabId, '"]'));
+        if (!activeTabElement) return;
+        // Calculate the scroll position to center the tab
+        var tabOffsetLeft = activeTabElement.offsetLeft;
+        var tabWidth = activeTabElement.offsetWidth;
+        var containerWidth = container.offsetWidth;
+        // Center the tab in the container: position of tab - (container width - tab width) / 2
+        var scrollLeft = tabOffsetLeft - (containerWidth - tabWidth) / 2;
+        // Calculate max scroll to prevent over-scrolling
+        var maxScroll = container.scrollWidth - containerWidth;
+        container.scrollTo({
+            left: Math.max(0, Math.min(scrollLeft, maxScroll)),
+            behavior: 'smooth'
+        });
+    }, [
+        activeTabId
+    ]);
+    // Scroll to active tab when it changes or when tabs are updated
+    useEffect(function() {
+        if (!activeTabId || tabs.length === 0) return;
+        // Use double requestAnimationFrame to ensure DOM is fully updated and rendered
+        requestAnimationFrame(function() {
+            requestAnimationFrame(function() {
+                scrollToActiveTab();
+            });
+        });
+    }, [
+        activeTabId,
+        tabs,
+        scrollToActiveTab
+    ]);
+    // Clean up refs for removed tabs
+    useEffect(function() {
+        var currentTabIds = new Set(tabs.map(function(tab) {
+            return tab.id;
+        }));
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = tabRefsMap.current[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var _step_value = _sliced_to_array(_step.value, 1), tabId = _step_value[0];
+                if (!currentTabIds.has(tabId)) {
+                    tabRefsMap.current.delete(tabId);
+                }
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }, [
+        tabs
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        className: "Litho-TabNavigation ".concat(className),
+        children: /*#__PURE__*/ _jsx("div", {
+            ref: scrollContainerRef,
+            className: "scroll-container flex overflow-x-scroll overflow-y-hidden items-center px-1 pt-1 w-full gap-0.5 bg-tint-2",
+            children: tabs.map(function(tab) {
+                var isActive = activeTabId === tab.id;
+                // Get or create ref for this tab
+                if (!tabRefsMap.current.has(tab.id)) {
+                    tabRefsMap.current.set(tab.id, {
+                        current: null
+                    });
+                }
+                var tabRef = tabRefsMap.current.get(tab.id);
+                return /*#__PURE__*/ _jsxs("div", {
+                    ref: function(el) {
+                        tabRef.current = el;
+                    },
+                    "data-tab-id": tab.id,
+                    className: tabStyles({
+                        isActive: isActive
+                    }),
+                    onClick: function() {
+                        return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.id);
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "h-5 relative",
+                            children: [
+                                tab.loading ? /*#__PURE__*/ _jsx("div", {
+                                    className: "flex items-center justify-center h-5",
+                                    children: /*#__PURE__*/ _jsx(Spinner, {
+                                        size: "small"
+                                    })
+                                }) : /*#__PURE__*/ _jsx(TabTitle, {
+                                    title: tab.title,
+                                    isActive: isActive,
+                                    tabContainerRef: tabRef
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "".concat(gradientOverlayStyles({
+                                        isActive: isActive
+                                    }), " right-[-4px] top-[-4px] w-4.5 h-6")
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "".concat(gradientOverlayStyles({
+                                        isActive: isActive
+                                    }), " w-2 h-6 bg-gradient-to-l ").concat(isActive ? 'from-surface-lowest' : 'from-surface-lower', " right-[14px] top-[-4px]")
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "mini",
+                            iconSize: "sm",
+                            plain: true,
+                            icon: CancelMinor,
+                            onClick: function(e) {
+                                e.stopPropagation();
+                                onTabClose === null || onTabClose === void 0 ? void 0 : onTabClose(tab.id);
+                            },
+                            className: "sm:opacity-0 sm:group-hover:opacity-100 transition-all !absolute right-[3px] top-[4px] ".concat(isActive ? 'bg-surface-lowest' : 'bg-surface-lower')
+                        })
+                    ]
+                }, tab.id);
+            })
+        })
+    });
+}
+export default TabNavigation;

package/dist/esm/components/TextField.js

@@ -46,7 +46,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CancelSmallMinor, CaretDownMinor, CaretUpMinor, CircleAlertMajor } from "@shopify/polaris-icons";
+import { CancelSmallMinor, CaretDownMinor, CaretUpMinor, CircleAlertMajor, MagicMajor } from "@shopify/polaris-icons";
 import React, { useEffect, useId, useMemo, useRef, useState } from "react";
 import { tv } from "tailwind-variants";
 import Button from "./Button.js";
@@ -508,6 +508,9 @@ var clearButtonStyles = tv({
                     }),
                     labelAction && /*#__PURE__*/ _jsx(Link, {
                         onClick: labelAction.onAction,
+                        insight: labelAction.insight,
+                        icon: labelAction.insight ? MagicMajor : undefined,
+                        color: labelAction.insight ? "insight" : undefined,
                         removeUnderline: true,
                         children: labelAction.content
                     })

package/dist/esm/components/Tip.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { cloneElement, isValidElement, useMemo } from "react";
 import { tv } from "tailwind-variants";
 import Icon from "./Icon.js";
-import { AlertMinor, CancelMinor, InfoMinor } from "@shopify/polaris-icons";
+import { AlertMinor, CancelMinor, InfoMinor, MagicMajor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Tip relative flex rounded-md p-2",
     variants: {
@@ -78,6 +78,9 @@ var statusHelpers = {
     },
     attention: {},
     highlight: {},
+    insight: {
+        icon: MagicMajor
+    },
     neutral: {}
 };
 /**

package/dist/esm/components/Tooltip.js

@@ -82,7 +82,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { tv } from "tailwind-variants";
 import Text from "./Text.js";
-import VerticalStack from "./VerticalStack.js";
+import Stack from "./Stack.js";
 import List from "./List.js";
 import Icon from "./Icon.js";
 import { CircleInformationMajor } from "@shopify/polaris-icons";
@@ -92,7 +92,9 @@ var styles = tv({
         display: {
             inline: "inline",
             "inline-block": "inline-block",
-            block: "block"
+            block: "block",
+            flex: "flex",
+            "inline-flex": "inline-flex"
         },
         hasUnderline: {
             true: "Litho-TooltipContainer--HasUnderline border-b border-dotted",
@@ -124,7 +126,7 @@ var wrapperStyles = tv({
     }
 });
 var tooltipStyles = tv({
-    base: "Litho-Tooltip inline-block w-auto max-w-60 whitespace-normal overflow-hidden bg-surface-alternate text-alternate dark:text-highest py-1.5 px-3 rounded-md",
+    base: "Litho-Tooltip block w-auto max-w-60 whitespace-normal overflow-hidden bg-surface-alternate text-alternate dark:text-highest py-1.5 px-3 rounded-md",
     variants: {
         alignment: {
             center: "text-center",
@@ -137,21 +139,15 @@ var tooltipStyles = tv({
     }
 });
 var arrowStyles = tv({
-    base: "Litho-TooltipArrow absolute w-0 h-0 border-l-transparent border-r-transparent border-l-6 border-r-6",
+    base: "Litho-TooltipArrow absolute w-0 h-0 border-l-transparent border-r-transparent border-l-6 border-r-6 left-1/2 -translate-x-1/2",
     variants: {
         preferredPosition: {
             above: "Litho-TooltipArrow--Above mb-0.5 bottom-full border-b-0 border-t-6 border-t-surface-alternate",
             below: "Litho-TooltipArrow--Below mt-0.5 top-full border-t-0 border-b-6 border-b-surface-alternate"
-        },
-        alignment: {
-            center: "left-1/2 -translate-x-1/2",
-            left: "left-2.5",
-            right: "right-2.5"
         }
     },
     defaultVariants: {
-        preferredPosition: "below",
-        alignment: "center"
+        preferredPosition: "below"
     }
 });
 /**
@@ -180,6 +176,7 @@ var arrowStyles = tv({
  * @param {boolean} [props.hasUnderline=false] - Whether the activator should have an underline.
  * @param {number | boolean} [props.zIndexOverride] - Override for the z-index of the tooltip.
  * @param {"inline" | "inline-block" | "block"} [props.display="inline-block"] - The display property of the tooltip container.
+ * @param {string} [props.className] - Additional class name for the tooltip container.
  *
  * @returns {React.ReactElement} The rendered Tooltip component.
  *
@@ -202,7 +199,7 @@ var arrowStyles = tv({
  * </Tooltip>
  */ function Tooltip() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var _props_display = props.display, display = _props_display === void 0 ? "inline-block" : _props_display, children = props.children, content = props.content, _props_dismissOnMouseOut = props.dismissOnMouseOut, dismissOnMouseOut = _props_dismissOnMouseOut === void 0 ? true : _props_dismissOnMouseOut, _props_dismissOnActivatorClick = props.dismissOnActivatorClick, dismissOnActivatorClick = _props_dismissOnActivatorClick === void 0 ? true : _props_dismissOnActivatorClick, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_alignment = props.alignment, alignment = _props_alignment === void 0 ? "center" : _props_alignment, _props_hoverDelay = props.hoverDelay, hoverDelay = _props_hoverDelay === void 0 ? 0 : _props_hoverDelay, _props_hasUnderline = props.hasUnderline, hasUnderline = _props_hasUnderline === void 0 ? false : _props_hasUnderline, zIndexOverride = props.zIndexOverride;
+    var _props_display = props.display, display = _props_display === void 0 ? "inline-block" : _props_display, children = props.children, content = props.content, _props_dismissOnMouseOut = props.dismissOnMouseOut, dismissOnMouseOut = _props_dismissOnMouseOut === void 0 ? true : _props_dismissOnMouseOut, _props_dismissOnActivatorClick = props.dismissOnActivatorClick, dismissOnActivatorClick = _props_dismissOnActivatorClick === void 0 ? true : _props_dismissOnActivatorClick, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_alignment = props.alignment, alignment = _props_alignment === void 0 ? "center" : _props_alignment, _props_hoverDelay = props.hoverDelay, hoverDelay = _props_hoverDelay === void 0 ? 0 : _props_hoverDelay, _props_hasUnderline = props.hasUnderline, hasUnderline = _props_hasUnderline === void 0 ? false : _props_hasUnderline, zIndexOverride = props.zIndexOverride, className = props.className;
     var activatorRef = useRef(null);
     var tooltipRef = useRef(null);
     var _useState = _sliced_to_array(useState({
@@ -214,6 +211,7 @@ var arrowStyles = tv({
     var classes = styles({
         hasUnderline: hasUnderline,
         display: display,
+        className: className,
         alignment: alignment
     });
     var wrapperClasses = wrapperStyles({
@@ -304,9 +302,10 @@ var arrowStyles = tv({
                 children: item.content
             }, key);
         } else if (item.type == "list") {
-            return /*#__PURE__*/ _jsx(VerticalStack, {
+            return /*#__PURE__*/ _jsx(Stack, {
                 inlineAlign: "start",
                 align: "start",
+                gap: "0",
                 children: /*#__PURE__*/ _jsx(List, {
                     type: "bullet",
                     children: item.content.map(function(item) {

package/dist/esm/index.js

@@ -10,6 +10,7 @@ export { default as ButtonGroup } from "./components/ButtonGroup.js";
 export { default as Card } from "./components/Card.js";
 export { default as Checkbox } from "./components/Checkbox.js";
 export { default as ChoiceList } from "./components/ChoiceList.js";
+export { default as Code } from "./components/Code.js";
 export { default as Collapsible } from "./components/Collapsible.js";
 export { default as ColorField } from "./components/ColorField.js";
 export { default as ContextualSaveBar } from "./components/ContextualSaveBar.js";

package/dist/esm/stories/Checkbox.stories.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Card from "../components/Card.js";
 import Checkbox from "../components/Checkbox.js";
 import Stack from "../components/Stack.js";
+import Badge from "../components/Badge.js";
 import { transformStorySource } from "../utilities/transformers.js";
 export default {
     title: 'Litho/Checkbox',
@@ -32,7 +33,7 @@ export default {
     argTypes: {
         label: {
             control: 'text',
-            description: 'The text label for the checkbox'
+            description: 'The label for the checkbox. Can be a string or a React element.'
         },
         checked: {
             control: 'boolean',
@@ -217,3 +218,167 @@ export var MultipleCheckboxes = {
         }
     }
 };
+export var WithReactElementLabel = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
+            children: [
+                /*#__PURE__*/ _jsx(Checkbox, {
+                    label: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Premium Feature"
+                            }),
+                            /*#__PURE__*/ _jsx(Badge, {
+                                size: "small",
+                                tone: "success",
+                                children: "Pro"
+                            })
+                        ]
+                    }),
+                    onChange: function(checked) {
+                        return console.log('Premium feature:', checked);
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Checkbox, {
+                    label: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Beta Access"
+                            }),
+                            /*#__PURE__*/ _jsx(Badge, {
+                                size: "small",
+                                tone: "attention",
+                                children: "Beta"
+                            })
+                        ]
+                    }),
+                    checked: true,
+                    onChange: function(checked) {
+                        return console.log('Beta access:', checked);
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Checkbox, {
+                    label: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Enterprise Only"
+                            }),
+                            /*#__PURE__*/ _jsx(Badge, {
+                                size: "small",
+                                tone: "info",
+                                children: "Enterprise"
+                            })
+                        ]
+                    }),
+                    onChange: function(checked) {
+                        return console.log('Enterprise only:', checked);
+                    }
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Checkbox labels can be React elements, allowing for rich content like badges alongside text.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var WithReactElementLabelAndHelpText = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
+            children: [
+                /*#__PURE__*/ _jsx(Checkbox, {
+                    label: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Advanced Analytics"
+                            }),
+                            /*#__PURE__*/ _jsx(Badge, {
+                                size: "small",
+                                tone: "info",
+                                children: "Pro"
+                            })
+                        ]
+                    }),
+                    helpText: "Get detailed insights into your data with advanced visualization tools",
+                    onChange: function(checked) {
+                        return console.log('Advanced analytics:', checked);
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Checkbox, {
+                    label: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "API Access"
+                            }),
+                            /*#__PURE__*/ _jsx(Badge, {
+                                size: "small",
+                                tone: "attention",
+                                children: "Beta"
+                            })
+                        ]
+                    }),
+                    helpText: "Enable programmatic access to your account (currently in beta testing)",
+                    checked: true,
+                    onChange: function(checked) {
+                        return console.log('API access:', checked);
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Checkbox, {
+                    label: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Priority Support"
+                            }),
+                            /*#__PURE__*/ _jsx(Badge, {
+                                size: "small",
+                                tone: "success",
+                                children: "Enterprise"
+                            })
+                        ]
+                    }),
+                    helpText: "Get 24/7 dedicated support from our enterprise team",
+                    disabled: true,
+                    onChange: function(checked) {
+                        return console.log('Priority support:', checked);
+                    }
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'React element labels work seamlessly with help text, error states, and disabled states.'
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};