@heymantle/litho 0.0.15 → 0.0.16

package/dist/esm/components/TopBar.js

@@ -7,6 +7,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 _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -34,6 +47,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();
 }
@@ -54,13 +106,21 @@ import Button from "./Button.js";
 import Popover from "./Popover.js";
 import Text from "./Text.js";
 import { useFrame } from "./Frame.js";
-var styles = 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.
@@ -68,7 +128,10 @@ var styles = 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 = 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 = useFrame().setShowMobileNavigation;
@@ -146,11 +209,22 @@ var activatorStyles = tv({
         if (!hasPopover) return;
         setShowPopover(!showPopover);
     };
-    var activator = /*#__PURE__*/ _jsxs("div", {
+    var activator = /*#__PURE__*/ _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__*/ _jsx("div", {
                 className: "flex items-center justify-center shrink-0 w-8 h-8 rounded-md font-semibold text-xs",
@@ -174,7 +248,7 @@ var activatorStyles = tv({
                 ]
             })
         ]
-    });
+    }));
     if (!hasPopover) {
         return activator;
     }

package/dist/esm/components/VerticalStack.js

@@ -79,7 +79,36 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-var styles = 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 = tv({
     base: "Litho-VerticalStack flex flex-col",
     variants: {
         gap: {
@@ -116,21 +145,7 @@ var styles = 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/esm/index.js

@@ -1,5 +1,6 @@
 export { default as ActionList } from "./components/ActionList.js";
 export { default as AnnouncementBar } from "./components/AnnouncementBar.js";
+export { default as AnnouncementCard } from "./components/AnnouncementCard.js";
 export { default as AppProvider, useDarkMode } from "./components/AppProvider.js";
 export { default as Autocomplete } from "./components/Autocomplete.js";
 export { default as Badge } from "./components/Badge.js";
@@ -9,6 +10,8 @@ export { default as Button } from "./components/Button.js";
 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 CheckboxCard } from "./components/CheckboxCard.js";
+export { default as CheckboxCardGroup } from "./components/CheckboxCardGroup.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";
@@ -44,6 +47,8 @@ export { default as Pane } from "./components/Pane.js";
 export { default as Popover } from "./components/Popover.js";
 export { default as ProgressBar } from "./components/ProgressBar.js";
 export { default as RadioButton } from "./components/RadioButton.js";
+export { default as RadioButtonCard } from "./components/RadioButtonCard.js";
+export { default as RadioButtonCardGroup } from "./components/RadioButtonCardGroup.js";
 export { default as RangeSlider } from "./components/RangeSlider.js";
 export { default as ResourceList } from "./components/ResourceList.js";
 export { default as Select } from "./components/Select.js";
@@ -51,6 +56,7 @@ export { default as SkeletonText } from "./components/SkeletonText.js";
 export { default as Spinner } from "./components/Spinner.js";
 export { default as Stack } from "./components/Stack.js";
 export { default as Table } from "./components/Table.js";
+export { default as TabNavigation } from "./components/TabNavigation.js";
 export { default as Tabs } from "./components/Tabs.js";
 export { default as Tag } from "./components/Tag.js";
 export { default as Text } from "./components/Text.js";

package/dist/esm/stories/Autocomplete.stories.js

@@ -779,7 +779,7 @@ export var CustomerSearch = {
                                     return /*#__PURE__*/ _jsxs(Stack, {
                                         horizontal: true,
                                         gap: "sm",
-                                        blockAlign: "center",
+                                        align: "center",
                                         children: [
                                             /*#__PURE__*/ _jsx(Thumbnail, {
                                                 size: "small"
@@ -818,7 +818,7 @@ export var WithReactElementLabels = {
                 label: /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx("span", {
                             children: "Basic Plan"
@@ -836,7 +836,7 @@ export var WithReactElementLabels = {
                 label: /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx("span", {
                             children: "Pro Plan"
@@ -855,7 +855,7 @@ export var WithReactElementLabels = {
                 label: /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx("span", {
                             children: "Enterprise Plan"
@@ -874,7 +874,7 @@ export var WithReactElementLabels = {
                 label: /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx("span", {
                             children: "Starter Plan"
@@ -963,7 +963,7 @@ export var WithReactElementLabelsMultiple = {
                 label: /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx("span", {
                             children: "Advanced Analytics"
@@ -982,7 +982,7 @@ export var WithReactElementLabelsMultiple = {
                 label: /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx("span", {
                             children: "Custom Branding"
@@ -1001,7 +1001,7 @@ export var WithReactElementLabelsMultiple = {
                 label: /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx("span", {
                             children: "API Access"
@@ -1020,7 +1020,7 @@ export var WithReactElementLabelsMultiple = {
                 label: /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx("span", {
                             children: "Priority Support"
@@ -1039,7 +1039,7 @@ export var WithReactElementLabelsMultiple = {
                 label: /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "xs",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx("span", {
                             children: "Team Collaboration"

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

@@ -221,13 +221,12 @@ 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",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx("span", {
                                 children: "Premium Feature"
@@ -247,7 +246,7 @@ export var WithReactElementLabel = {
                     label: /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
                         gap: "xs",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx("span", {
                                 children: "Beta Access"
@@ -268,7 +267,7 @@ export var WithReactElementLabel = {
                     label: /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
                         gap: "xs",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx("span", {
                                 children: "Enterprise Only"
@@ -301,13 +300,12 @@ export var WithReactElementLabel = {
 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",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx("span", {
                                 children: "Advanced Analytics"
@@ -328,7 +326,7 @@ export var WithReactElementLabelAndHelpText = {
                     label: /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
                         gap: "xs",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx("span", {
                                 children: "API Access"
@@ -350,7 +348,7 @@ export var WithReactElementLabelAndHelpText = {
                     label: /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
                         gap: "xs",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx("span", {
                                 children: "Priority Support"