@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/components/Tabs.js

@@ -139,10 +139,11 @@ var containerStyles = 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 = useRef(null);
     var disclosureRef = useRef(null);
@@ -251,6 +252,7 @@ var containerStyles = tv({
                         icon: tab.icon,
                         fullWidth: fullWidth,
                         hidden: tab.hidden,
+                        simple: simpleTabs,
                         children: tab.content
                     }, "tab-".concat(tab.originalIndex));
                 })
@@ -301,10 +303,6 @@ var tabStyles = 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"
@@ -315,12 +313,41 @@ var tabStyles = 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({
@@ -328,7 +355,8 @@ function Tab() {
         disclosure: showDisclosure,
         disabled: disabled,
         fullWidth: fullWidth,
-        hidden: hidden
+        hidden: hidden,
+        simple: simple
     });
     return /*#__PURE__*/ _jsxs("div", {
         id: id ? "tab-".concat(id) : undefined,
@@ -341,11 +369,12 @@ function Tab() {
                 className: "Litho-Tabs__Tab-Icon mr-1",
                 children: /*#__PURE__*/ _jsx(Icon, {
                     source: polarisIcon,
-                    color: selected ? "active" : "subdued"
+                    color: selected && simple ? "default" : selected ? "primary" : "subdued",
+                    size: simple ? "lg" : undefined
                 })
             }),
             icon && !!polarisIcon === false && /*#__PURE__*/ _jsx("span", {
-                className: "Litho-Tabs__Tab-Icon mr-1",
+                className: "Litho-Tabs__Tab-Icon ".concat(simple ? "mr-0" : "mr-1"),
                 children: icon
             }),
             /*#__PURE__*/ _jsx("span", {
@@ -356,7 +385,8 @@ function Tab() {
                 className: "Litho-Tabs__Tab-Disclosure",
                 children: /*#__PURE__*/ _jsx(Icon, {
                     source: active ? CaretUpMinor : CaretDownMinor,
-                    color: selected ? "active" : "subdued"
+                    color: selected && simple ? "default" : selected ? "active" : "subdued",
+                    size: simple ? "lg" : undefined
                 })
             })
         ]

package/dist/esm/components/Text.js

@@ -128,7 +128,7 @@ var styles = 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",
@@ -231,10 +231,11 @@ var styles = 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",
@@ -244,7 +245,8 @@ var styles = tv({
         "variant",
         "visuallyHidden",
         "clampLines",
-        "strike"
+        "strike",
+        "children"
     ]);
     var classes = styles({
         alignment: alignment,
@@ -256,10 +258,10 @@ var styles = tv({
         clampLines: clampLines,
         strike: strike
     });
-    var Element = as || (visuallyHidden ? 'span' : 'p');
+    var Element = as || (visuallyHidden ? "span" : "p");
     return /*#__PURE__*/ _jsx(Element, _object_spread_props(_object_spread({}, rest), {
-        className: "".concat(classes).concat(className ? " ".concat(className) : '')
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: children
     }));
 }
-;
 export default Text;

package/dist/esm/components/TextField.js

@@ -49,7 +49,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CancelSmallMinor, CaretDownMinor, CaretUpMinor, CircleAlertMajor } from "@shopify/polaris-icons";
 import React, { useEffect, useId, useMemo, useRef, useState } from "react";
 import { tv } from "tailwind-variants";
-import { Button, Icon, InlineError, Label, Link, Text } from "../index.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import InlineError from "./InlineError.js";
+import Label from "./Label.js";
+import Link from "./Link.js";
+import Text from "./Text.js";
 var styles = tv({
     base: "Litho-TextField group relative rounded-md border min-h-8 cursor-text",
     variants: {

package/dist/esm/components/Thumbnail.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Icon } from "../index.js";
+import Icon from "./Icon.js";
 import { ImageMajor } from "@shopify/polaris-icons";
 var imageContainerStyles = tv({
     base: "relative flex items-center justify-center overflow-hidden rounded-lg border border-tint-4 bg-surface-higher group",

package/dist/esm/components/TimePicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TextField } from "../index.js";
+import TextField from "./TextField.js";
 function TimePicker() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_label = props.label, label = _props_label === void 0 ? "Time:" : _props_label, _props_labelInline = props.labelInline, labelInline = _props_labelInline === void 0 ? true : _props_labelInline, value = props.value, onChange = props.onChange;

package/dist/esm/components/Tip.js

@@ -1,7 +1,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 "../index.js";
+import Icon from "./Icon.js";
 import { AlertMinor, CancelMinor, InfoMinor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Tip relative flex rounded-md p-2",
@@ -118,8 +118,9 @@ var statusHelpers = {
     var processedChildren = useMemo(function() {
         var processChildren = function(children) {
             return React.Children.toArray(children).map(function(child) {
+                var _child_type;
                 if (!/*#__PURE__*/ isValidElement(child)) return child;
-                if (child.type.displayName === "Link") {
+                if (((_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.displayName) === "Link") {
                     return /*#__PURE__*/ cloneElement(child, {
                         color: status
                     });

package/dist/esm/components/Tooltip.js

@@ -81,7 +81,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { tv } from "tailwind-variants";
-import { Text, VerticalStack, List, Icon } from "../index.js";
+import Text from "./Text.js";
+import VerticalStack from "./VerticalStack.js";
+import List from "./List.js";
+import Icon from "./Icon.js";
 import { CircleInformationMajor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-TooltipContainer relative w-auto h-auto",

package/dist/esm/components/TopBar.js

@@ -46,11 +46,14 @@ 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 { useContext, useState } from "react";
-import { FrameContext } from "./AppProvider.js";
+import { useState } from "react";
 import { MobileHamburgerMajor } from "@shopify/polaris-icons";
 import { tv } from "tailwind-variants";
-import { ActionList, Button, Popover, Text } from "../index.js";
+import ActionList from "./ActionList.js";
+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"
 });
@@ -68,7 +71,7 @@ var styles = tv({
  */ 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 = useContext(FrameContext).setShowMobileNavigation;
+    var setShowMobileNavigation = useFrame().setShowMobileNavigation;
     var classes = styles();
     return /*#__PURE__*/ _jsxs("div", {
         className: classes,

package/dist/esm/components/VerticalStack.js

@@ -83,7 +83,13 @@ var styles = tv({
     base: "Litho-VerticalStack flex flex-col",
     variants: {
         gap: {
-            none: "",
+            none: "gap-0",
+            // Semantic values (recommended)
+            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",
@@ -118,7 +124,7 @@ var styles = tv({
  * @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 {string} [props.gap="none"] - Spacing between child elements. Options: "none", "0", "px", "0.5", "1", "2", "3", "4", "6", "8", "10".
+ * @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.

package/dist/esm/dev/verify-publish.js

@@ -18,25 +18,58 @@ function _templateObject() {
     };
     return data;
 }
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "npm view @heymantle/litho dist.shasum"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "npm run build && npm pack --dry-run"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
 import semver from "semver";
 var packageJson = JSON.parse(fs.readFileSync("package.json", "utf8"));
 var currentVersion = packageJson.version;
 var npmVersion = await $(_templateObject()).text();
+var npmShaSum = await $(_templateObject1()).text();
+var packResult = await $(_templateObject2()).text();
+var localShaSum = packResult.match(/shasum\: (.*)\n/)[1];
+if (npmShaSum === localShaSum) {
+    var continuePublish = await question("NPM and local shasums match. Continue with publish? (y/n) ", {
+        choices: [
+            "y",
+            "n"
+        ]
+    });
+    if (continuePublish === "n") {
+        process.exit(0);
+    }
+}
 if (semver.gte(npmVersion, currentVersion)) {
-    var shouldIncrement = await question("npm version is greater than package.json version. Increment local version? (y/n)", {
+    var shouldIncrement = await question("npm version is greater than package.json version. Increment local version? (y/n) ", {
         choices: [
             "y",
             "n"
         ]
     });
     if (shouldIncrement === "y") {
-        var versionType = await question("Which type of release is this? (patch/minor/major)", {
+        var defaultVersionType = "patch";
+        var versionType = await question("Which type of release is this (default: patch)? (patch/minor/major) ", {
             choices: [
                 "patch",
                 "minor",
                 "major"
             ]
-        });
+        }) || defaultVersionType;
         if (![
             "patch",
             "minor",
@@ -48,7 +81,7 @@ if (semver.gte(npmVersion, currentVersion)) {
         var newVersion = semver.inc(currentVersion, versionType);
         packageJson.version = newVersion;
         await fs.writeFile("package.json", JSON.stringify(packageJson, null, 2));
-        echo("Incremented version to ".concat(newVersion));
+        echo("Incremented version to ".concat(newVersion, ". Remember to commit and push the version update."));
         process.exit(0);
     } else {
         echo("Cannot publish if npm version is greater or equal to local version");

package/dist/esm/index.js

@@ -47,6 +47,7 @@ export { default as ResourceList } from "./components/ResourceList.js";
 export { default as Select } from "./components/Select.js";
 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 Tabs } from "./components/Tabs.js";
 export { default as Tag } from "./components/Tag.js";

package/dist/esm/postcss.config.js

@@ -0,0 +1,6 @@
+import tailwind from "@tailwindcss/postcss";
+export default {
+    plugins: [
+        tailwind
+    ]
+};