@heymantle/litho 0.0.15 → 0.0.16

package/dist/cjs/components/TopBar.js

@@ -26,6 +26,19 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+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 _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -58,6 +71,45 @@ function _iterable_to_array_limit(arr, i) {
 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 _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 _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();
 }
@@ -69,13 +121,21 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-var styles = (0, _tailwindvariants.tv)({
-    base: "Litho-TopBar flex items-center h-[var(--litho-header-height)] border-b border-edge-subdued dark:border-edge-alt-subdued"
-});
 /**
- * TopBar component that displays a top navigation bar with a search trigger and a user menu.
+ * @component TopBar
+ *
+ * @description An application header bar that displays branding, navigation controls, and user actions at the top of the Frame.
+ *
+ * @usage
+ * - DO: Use as the application header with logo, search, and user actions.
+ * - DON'T: Use for page-level titles (use Page).
+ *
+ * @accessibility
+ * - Renders as a `<header>` landmark; ensure the logo link has an accessible label.
+ *
+ * @alternative
+ * - If you need a page title with actions, use `Page`. If you need a side navigation, use `Navigation`.
  *
- * @component
  * @param {Object} props - The component props.
  * @param {React.ReactNode} [props.userMenu] - The user menu element.
  * @param {React.ReactNode} [props.searchTrigger] - The search trigger element.
@@ -83,7 +143,10 @@ var styles = (0, _tailwindvariants.tv)({
  * @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 {JSX.Element} The rendered TopBar component.
- */ function TopBar() {
+ */ var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-TopBar flex items-center h-[var(--litho-header-height)] border-b border-edge-subdued dark:border-edge-alt-subdued"
+});
+function TopBar() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var hasNavigation = props.hasNavigation, userMenu = props.userMenu, searchTrigger = props.searchTrigger, alwaysShowUserMenuInTopBar = props.alwaysShowUserMenuInTopBar, headerAccessory = props.headerAccessory;
     var setShowMobileNavigation = (0, _Frame.useFrame)().setShowMobileNavigation;
@@ -161,11 +224,22 @@ var activatorStyles = (0, _tailwindvariants.tv)({
         if (!hasPopover) return;
         setShowPopover(!showPopover);
     };
-    var activator = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+    var activator = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
         className: activatorStyles({
             interactive: hasPopover
         }),
-        onClick: handleActivatorClick,
+        onClick: handleActivatorClick
+    }, hasPopover ? {
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": showPopover,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleActivatorClick();
+            }
+        }
+    } : {}), {
         children: [
             image && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: "flex items-center justify-center shrink-0 w-8 h-8 rounded-md font-semibold text-xs",
@@ -189,7 +263,7 @@ var activatorStyles = (0, _tailwindvariants.tv)({
                 ]
             })
         ]
-    });
+    }));
     if (!hasPopover) {
         return activator;
     }

package/dist/cjs/components/VerticalStack.js

@@ -89,7 +89,36 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-var styles = (0, _tailwindvariants.tv)({
+/**
+ * @component VerticalStack
+ *
+ * @description A vertical flex layout component for stacking children in a column with consistent spacing and alignment.
+ *
+* @deprecated Use `Stack` instead. This component will be removed in a future release.
+ *
+ * @usage
+ * - DO: Stack elements vertically with consistent spacing.
+ * - DON'T: Use for horizontal layouts (use `HorizontalStack` instead).
+ *
+ * @accessibility
+ * - Maintains natural document flow; screen readers read content in DOM order.
+ *
+ * @alternative
+ * - If you need horizontal layout, use `HorizontalStack`.
+ * - If you need flexible direction, use `Stack`.
+ *
+ * @param {object} props - The properties for the VerticalStack component.
+ * @param {string} [props.as="div"] - The HTML tag or component to render as the root element.
+ * @param {React.ReactNode} [props.children] - The child elements to render within the stack.
+ * @param {string} [props.align] - Vertical alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
+ * @param {string} [props.inlineAlign] - Horizontal alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
+ * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap="none"] - Spacing between child elements. 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] - The id for the root element of the stack.
+ * @param {string} [props.className] - Additional CSS classes to append to the generated styles.
+ * @param {object} [props.restProps] - Any additional properties to spread onto the root element.
+ *
+ * @returns {JSX.Element} The rendered `VerticalStack` component.
+ */ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-VerticalStack flex flex-col",
     variants: {
         gap: {
@@ -126,21 +155,7 @@ var styles = (0, _tailwindvariants.tv)({
         }
     }
 });
-/**
- * A flexible vertical stack component for consistent layout styling.
- *
- * @param {object} props - The properties for the VerticalStack component.
- * @param {string} [props.as="div"] - The HTML tag or component to render as the root element.
- * @param {React.ReactNode} [props.children] - The child elements to render within the stack.
- * @param {string} [props.align] - Vertical alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
- * @param {string} [props.inlineAlign] - Horizontal alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
- * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap="none"] - Spacing between child elements. 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] - The id for the root element of the stack.
- * @param {string} [props.className] - Additional CSS classes to append to the generated styles.
- * @param {object} [props.restProps] - Any additional properties to spread onto the root element.
- *
- * @returns {JSX.Element} The rendered `VerticalStack` component.
- */ function VerticalStack() {
+function VerticalStack() {
     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, align = props.align, inlineAlign = props.inlineAlign, gap = props.gap, id = props.id, className = props.className, restProps = _object_without_properties(props, [
         "as",

package/dist/cjs/index.js

@@ -15,6 +15,9 @@ _export(exports, {
     get AnnouncementBar () {
         return _AnnouncementBar.default;
     },
+    get AnnouncementCard () {
+        return _AnnouncementCard.default;
+    },
     get AppProvider () {
         return _AppProvider.default;
     },
@@ -42,6 +45,12 @@ _export(exports, {
     get Checkbox () {
         return _Checkbox.default;
     },
+    get CheckboxCard () {
+        return _CheckboxCard.default;
+    },
+    get CheckboxCardGroup () {
+        return _CheckboxCardGroup.default;
+    },
     get ChoiceList () {
         return _ChoiceList.default;
     },
@@ -147,6 +156,12 @@ _export(exports, {
     get RadioButton () {
         return _RadioButton.default;
     },
+    get RadioButtonCard () {
+        return _RadioButtonCard.default;
+    },
+    get RadioButtonCardGroup () {
+        return _RadioButtonCardGroup.default;
+    },
     get RangeSlider () {
         return _RangeSlider.default;
     },
@@ -168,6 +183,9 @@ _export(exports, {
     get Stack () {
         return _Stack.default;
     },
+    get TabNavigation () {
+        return _TabNavigation.default;
+    },
     get Table () {
         return _Table.default;
     },
@@ -219,6 +237,7 @@ _export(exports, {
 });
 var _ActionList = /*#__PURE__*/ _interop_require_default(require("./components/ActionList"));
 var _AnnouncementBar = /*#__PURE__*/ _interop_require_default(require("./components/AnnouncementBar"));
+var _AnnouncementCard = /*#__PURE__*/ _interop_require_default(require("./components/AnnouncementCard"));
 var _AppProvider = /*#__PURE__*/ _interop_require_wildcard(require("./components/AppProvider"));
 var _Autocomplete = /*#__PURE__*/ _interop_require_default(require("./components/Autocomplete"));
 var _Badge = /*#__PURE__*/ _interop_require_default(require("./components/Badge"));
@@ -228,6 +247,8 @@ var _Button = /*#__PURE__*/ _interop_require_default(require("./components/Butto
 var _ButtonGroup = /*#__PURE__*/ _interop_require_default(require("./components/ButtonGroup"));
 var _Card = /*#__PURE__*/ _interop_require_default(require("./components/Card"));
 var _Checkbox = /*#__PURE__*/ _interop_require_default(require("./components/Checkbox"));
+var _CheckboxCard = /*#__PURE__*/ _interop_require_default(require("./components/CheckboxCard"));
+var _CheckboxCardGroup = /*#__PURE__*/ _interop_require_default(require("./components/CheckboxCardGroup"));
 var _ChoiceList = /*#__PURE__*/ _interop_require_default(require("./components/ChoiceList"));
 var _Code = /*#__PURE__*/ _interop_require_default(require("./components/Code"));
 var _Collapsible = /*#__PURE__*/ _interop_require_default(require("./components/Collapsible"));
@@ -263,6 +284,8 @@ var _Pane = /*#__PURE__*/ _interop_require_default(require("./components/Pane"))
 var _Popover = /*#__PURE__*/ _interop_require_default(require("./components/Popover"));
 var _ProgressBar = /*#__PURE__*/ _interop_require_default(require("./components/ProgressBar"));
 var _RadioButton = /*#__PURE__*/ _interop_require_default(require("./components/RadioButton"));
+var _RadioButtonCard = /*#__PURE__*/ _interop_require_default(require("./components/RadioButtonCard"));
+var _RadioButtonCardGroup = /*#__PURE__*/ _interop_require_default(require("./components/RadioButtonCardGroup"));
 var _RangeSlider = /*#__PURE__*/ _interop_require_default(require("./components/RangeSlider"));
 var _ResourceList = /*#__PURE__*/ _interop_require_default(require("./components/ResourceList"));
 var _Select = /*#__PURE__*/ _interop_require_default(require("./components/Select"));
@@ -270,6 +293,7 @@ var _SkeletonText = /*#__PURE__*/ _interop_require_default(require("./components
 var _Spinner = /*#__PURE__*/ _interop_require_default(require("./components/Spinner"));
 var _Stack = /*#__PURE__*/ _interop_require_default(require("./components/Stack"));
 var _Table = /*#__PURE__*/ _interop_require_default(require("./components/Table"));
+var _TabNavigation = /*#__PURE__*/ _interop_require_default(require("./components/TabNavigation"));
 var _Tabs = /*#__PURE__*/ _interop_require_default(require("./components/Tabs"));
 var _Tag = /*#__PURE__*/ _interop_require_default(require("./components/Tag"));
 var _Text = /*#__PURE__*/ _interop_require_default(require("./components/Text"));

package/dist/cjs/stories/Autocomplete.stories.js

@@ -823,7 +823,7 @@ var CustomerSearch = {
                                     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                         horizontal: true,
                                         gap: "sm",
-                                        blockAlign: "center",
+                                        align: "center",
                                         children: [
                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                                                 size: "small"
@@ -862,7 +862,7 @@ var WithReactElementLabels = {
                 label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                             children: "Basic Plan"
@@ -880,7 +880,7 @@ var WithReactElementLabels = {
                 label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                             children: "Pro Plan"
@@ -899,7 +899,7 @@ var WithReactElementLabels = {
                 label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                             children: "Enterprise Plan"
@@ -918,7 +918,7 @@ var WithReactElementLabels = {
                 label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                             children: "Starter Plan"
@@ -1007,7 +1007,7 @@ var WithReactElementLabelsMultiple = {
                 label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                             children: "Advanced Analytics"
@@ -1026,7 +1026,7 @@ var WithReactElementLabelsMultiple = {
                 label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                             children: "Custom Branding"
@@ -1045,7 +1045,7 @@ var WithReactElementLabelsMultiple = {
                 label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                             children: "API Access"
@@ -1064,7 +1064,7 @@ var WithReactElementLabelsMultiple = {
                 label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                             children: "Priority Support"
@@ -1083,7 +1083,7 @@ var WithReactElementLabelsMultiple = {
                 label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                             children: "Team Collaboration"

package/dist/cjs/stories/Checkbox.stories.js

@@ -274,13 +274,12 @@ var MultipleCheckboxes = {
 var WithReactElementLabel = {
     render: function() {
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
-            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
                     label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
                         gap: "xs",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                 children: "Premium Feature"
@@ -300,7 +299,7 @@ var WithReactElementLabel = {
                     label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
                         gap: "xs",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                 children: "Beta Access"
@@ -321,7 +320,7 @@ var WithReactElementLabel = {
                     label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
                         gap: "xs",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                 children: "Enterprise Only"
@@ -354,13 +353,12 @@ var WithReactElementLabel = {
 var WithReactElementLabelAndHelpText = {
     render: function() {
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
-            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
                     label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
                         gap: "xs",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                 children: "Advanced Analytics"
@@ -381,7 +379,7 @@ var WithReactElementLabelAndHelpText = {
                     label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
                         gap: "xs",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                 children: "API Access"
@@ -403,7 +401,7 @@ var WithReactElementLabelAndHelpText = {
                     label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
                         gap: "xs",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                 children: "Priority Support"