@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/components/Button.js

@@ -128,9 +128,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useMemo, useState } from "react";
 import { tv } from "tailwind-variants";
 import { ButtonGroupContext } from "./ButtonGroup.js";
-import { ActionList, Icon, Popover, Spinner, Tooltip } from "../index.js";
+import ActionList from "./ActionList.js";
+import Icon from "./Icon.js";
+import Popover from "./Popover.js";
+import Spinner from "./Spinner.js";
+import Tooltip from "./Tooltip.js";
 import { CaretDownMinor } from "@shopify/polaris-icons";
-import { DarkModeContext } from "./AppProvider.js";
+import { useDarkMode } from "./AppProvider.js";
 var styles = tv({
     base: "Litho-Button relative flex items-center justify-center rounded-md border border-transparent overflow-hidden",
     variants: {
@@ -173,6 +177,7 @@ var styles = tv({
         },
         size: {
             stepper: "min-h-3.5 rounded-sm",
+            mini: "min-h-5 min-w-5",
             small: "min-h-7 min-w-7",
             medium: "min-h-8",
             large: "min-h-8"
@@ -188,6 +193,10 @@ var styles = tv({
         bordered: {
             true: "border-tint-2",
             false: ""
+        },
+        naked: {
+            true: "border-none bg-transparent p-0 hover:bg-transparent w-auto justify-start",
+            false: ""
         }
     },
     compoundVariants: [
@@ -312,6 +321,7 @@ var styles = tv({
             destructive: false,
             highlight: false,
             pressed: false,
+            naked: false,
             class: "bg-btn-secondary hover:bg-btn-secondary-low active:bg-btn-secondary-lower text-btn-secondary-fg hover:text-btn-secondary-fg-alt border-btn-secondary-border hover:border-btn-secondary-border-low active:border-btn-secondary-border-low\n        dark:outline-hidden dark:border-transparent dark:shadow-btn-dark dark:border-t-tint-alt-3 dark:hover:border-t-tint-alt-2 dark:active:border-t-tint-alt-2"
         },
         {
@@ -323,6 +333,7 @@ var styles = tv({
             destructive: false,
             highlight: false,
             pressed: true,
+            naked: false,
             class: "bg-btn-secondary hover:bg-btn-secondary-low active:bg-btn-secondary-lower text-btn-secondary-fg hover:text-btn-secondary-fg-alt border-btn-secondary-border hover:border-btn-secondary-border-low active:border-btn-secondary-border-low\n        dark:outline-hidden dark:border-tint-10 dark:shadow-btn-pressed-dark dark:hover:border-tint-10 dark:active:border-tint-10"
         },
         {
@@ -373,16 +384,19 @@ var styles = tv({
             link: true,
             disabled: false,
             loading: false,
+            naked: false,
             class: "bg-btn-link hover:bg-btn-link-low active:bg-btn-link-lower text-btn-link-fg hover:text-btn-link-fg-alt border-btn-link-border hover:border-btn-link-border-low active:border-btn-link-border-low"
         },
         {
             link: true,
             disabled: true,
+            naked: false,
             class: "bg-btn-link-disabled text-btn-link-disabled-fg"
         },
         {
             link: true,
             loading: true,
+            naked: false,
             class: "bg-btn-link-disabled text-btn-link-disabled-fg"
         },
         // Destructive buttons
@@ -445,12 +459,22 @@ var contentStyles = tv({
             false: ""
         },
         size: {
+            mini: "p-0",
             small: "py-0.5",
             large: "py-3",
             medium: "py-1"
+        },
+        naked: {
+            true: "px-2",
+            false: ""
         }
     },
     compoundVariants: [
+        {
+            size: "mini",
+            iconOnly: true,
+            class: "!px-0"
+        },
         {
             size: "small",
             iconOnly: true,
@@ -502,6 +526,7 @@ var contentStyles = tv({
             hasIcon: false,
             hasChildren: true,
             disclosure: false,
+            naked: false,
             class: "px-3"
         },
         {
@@ -551,6 +576,10 @@ var textStyles = tv({
         highlight: {
             true: "",
             false: ""
+        },
+        naked: {
+            true: "",
+            false: ""
         }
     },
     compoundVariants: [
@@ -577,6 +606,7 @@ var textStyles = tv({
             primary: false,
             plain: false,
             link: false,
+            naked: false,
             class: "text-btn-secondary-fg"
         },
         {
@@ -660,6 +690,11 @@ var textStyles = tv({
             highlight: true,
             disabled: true,
             class: "text-btn-highlight-disabled-fg"
+        },
+        {
+            link: true,
+            naked: true,
+            class: "text-blue-700 underline"
         }
     ],
     defaultVariants: {
@@ -700,7 +735,8 @@ var connectedDisclosureStyles = tv({
  * @param {string} [props.ariaDescribedBy] - ID of the element that describes the button.
  * @param {boolean} [props.ariaChecked] - Whether the button is checked (for toggle buttons).
  * @param {React.Component} [props.icon] - Icon component to display within the button.
- * @param {string} [props.iconColor='default'] - Color of the icon.
+ * @param {"default" | "primary" | "secondary" | "plain" | "link" | "destructive" | "highlight"} [props.iconColor='default'] - Color of the icon.
+ * @param {"default" | "sm" | "lg" | "xl"} [props.iconSize='default'] - Size of the icon.
  * @param {boolean} [props.primary=false] - Whether to show the primary button style.
  * @param {boolean} [props.highlight=false] - Whether to show the highlight button style.
  * @param {boolean} [props.link=false] - Whether to show a link style.
@@ -708,12 +744,16 @@ var connectedDisclosureStyles = tv({
  * @param {boolean} [props.disclosure=false] - Whether to show a disclosure arrow.
  * @param {boolean} [props.disclosureRight=false] - Whether to show the disclosure on the right.
  * @param {boolean} [props.plain=false] - Whether to show plain styling without background.
- * @param {string} [props.size='medium'] - Size of the button ('small', 'medium', 'large', 'stepper').
+ * @param {boolean} [props.naked=false] - Whether to show the naked styling.
+ * @param {"small" | "medium" | "large" | "stepper"} [props.size='medium'] - Size of the button ('small', 'medium', 'large', 'stepper').
  * @param {boolean} [props.fullWidth] - Whether the button should take full width.
- * @param {string} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
+ * @param {"left" | "center" | "right"} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
  * @param {string} [props.tooltip] - Tooltip to show when hovering over the button.
+ * @param {"left" | "center" | "right"} [props.tooltipAlignment='right'] - Alignment of the tooltip ('left', 'center', 'right').
+ * @param {"above" | "below" | "left" | "right"} [props.tooltipPosition='above'] - Position of the tooltip ('above', 'below', 'left', 'right').
+ * @param {"inline-block" | "block" | "inline"} [props.tooltipDisplay='inline-block'] - Display type of the tooltip ('inline-block', 'block', 'inline').
  * @param {Object} [props.connectedDisclosure] - Configuration for connected disclosure menu.
- * @param {Array} [props.connectedDisclosure.actions] - Actions to show in the disclosure menu.
+ * @param {Array<import("./ActionList").ActionListItem>} [props.connectedDisclosure.actions] - Actions to show in the disclosure menu.
  * @param {string} [props.className] - Additional CSS classes for the button.
  * @param {string} [props.contentClassName] - Additional CSS classes for the button content.
  * @param {boolean} [props.rounded] - Whether to show fully rounded corners.
@@ -723,12 +763,15 @@ var connectedDisclosureStyles = tv({
  * @returns {JSX.Element} The rendered Button component.
  *
  * @example
+ * ```js
  * // Basic button
  * <Button onClick={() => console.log('Clicked')}>
  *   Click me
  * </Button>
+ * ```
  *
  * @example
+ * ```js
  * // Primary button with icon and loading state
  * <Button
  *   primary
@@ -738,8 +781,10 @@ var connectedDisclosureStyles = tv({
  * >
  *   Save changes
  * </Button>
+ * ```
  *
  * @example
+ * ```js
  * // Button with connected disclosure
  * <Button
  *   connectedDisclosure={{
@@ -751,11 +796,12 @@ var connectedDisclosureStyles = tv({
  * >
  *   More actions
  * </Button>
+ * ```
  */ function Button() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var darkMode = useContext(DarkModeContext).darkMode;
+    var darkMode = useDarkMode().darkMode;
     var _useState = _sliced_to_array(useState(false), 2), showConnectedDisclosurePopover = _useState[0], setShowConnectedDisclosurePopover = _useState[1];
-    var id = props.id, children = props.children, url = props.url, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, external = props.external, target = props.target, submit = props.submit, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_pressed = props.pressed, pressed = _props_pressed === void 0 ? false : _props_pressed, accessibilityLabel = props.accessibilityLabel, role = props.role, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaDescribedBy = props.ariaDescribedBy, ariaChecked = props.ariaChecked, icon = props.icon, _iconColor = props.iconColor, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_primary = props.primary, primary = _props_primary === void 0 ? false : _props_primary, _props_highlight = props.highlight, highlight = _props_highlight === void 0 ? false : _props_highlight, _props_link = props.link, link = _props_link === void 0 ? false : _props_link, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_disclosureRight = props.disclosureRight, disclosureRight = _props_disclosureRight === void 0 ? false : _props_disclosureRight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_align = props.align, align = _props_align === void 0 ? "center" : _props_align, connectedDisclosure = props.connectedDisclosure, className = props.className, contentClassName = props.contentClassName, rounded = props.rounded, onClick = props.onClick, onMouseDown = props.onMouseDown, tooltip = props.tooltip, _props_tooltipAlignment = props.tooltipAlignment, tooltipAlignment = _props_tooltipAlignment === void 0 ? "right" : _props_tooltipAlignment, _props_tooltipPosition = props.tooltipPosition, tooltipPosition = _props_tooltipPosition === void 0 ? "above" : _props_tooltipPosition, shadow = props.shadow, restProps = _object_without_properties(props, [
+    var id = props.id, children = props.children, url = props.url, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, external = props.external, target = props.target, submit = props.submit, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_pressed = props.pressed, pressed = _props_pressed === void 0 ? false : _props_pressed, accessibilityLabel = props.accessibilityLabel, role = props.role, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaDescribedBy = props.ariaDescribedBy, ariaChecked = props.ariaChecked, icon = props.icon, _iconColor = props.iconColor, _props_iconSize = props.iconSize, iconSize = _props_iconSize === void 0 ? "default" : _props_iconSize, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_primary = props.primary, primary = _props_primary === void 0 ? false : _props_primary, _props_highlight = props.highlight, highlight = _props_highlight === void 0 ? false : _props_highlight, _props_link = props.link, link = _props_link === void 0 ? false : _props_link, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_disclosureRight = props.disclosureRight, disclosureRight = _props_disclosureRight === void 0 ? false : _props_disclosureRight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_naked = props.naked, naked = _props_naked === void 0 ? false : _props_naked, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_align = props.align, align = _props_align === void 0 ? "center" : _props_align, connectedDisclosure = props.connectedDisclosure, className = props.className, contentClassName = props.contentClassName, rounded = props.rounded, onClick = props.onClick, onMouseDown = props.onMouseDown, tooltip = props.tooltip, _props_tooltipAlignment = props.tooltipAlignment, tooltipAlignment = _props_tooltipAlignment === void 0 ? "right" : _props_tooltipAlignment, _props_tooltipPosition = props.tooltipPosition, tooltipPosition = _props_tooltipPosition === void 0 ? "above" : _props_tooltipPosition, _props_tooltipDisplay = props.tooltipDisplay, tooltipDisplay = _props_tooltipDisplay === void 0 ? "inline-block" : _props_tooltipDisplay, shadow = props.shadow, restProps = _object_without_properties(props, [
         "id",
         "children",
         "url",
@@ -773,6 +819,7 @@ var connectedDisclosureStyles = tv({
         "ariaChecked",
         "icon",
         "iconColor",
+        "iconSize",
         "bordered",
         "primary",
         "highlight",
@@ -781,6 +828,7 @@ var connectedDisclosureStyles = tv({
         "disclosure",
         "disclosureRight",
         "plain",
+        "naked",
         "size",
         "fullWidth",
         "align",
@@ -793,6 +841,7 @@ var connectedDisclosureStyles = tv({
         "tooltip",
         "tooltipAlignment",
         "tooltipPosition",
+        "tooltipDisplay",
         "shadow"
     ]);
     var hasIcon = !!icon;
@@ -830,14 +879,16 @@ var connectedDisclosureStyles = tv({
         shadow: shadow,
         darkMode: darkMode,
         bordered: bordered,
-        align: align
+        align: align,
+        naked: naked
     });
     var contentClasses = contentStyles({
         disclosure: disclosure,
         hasIcon: hasIcon,
         hasChildren: hasChildren,
         size: size,
-        iconOnly: iconOnly
+        iconOnly: iconOnly,
+        naked: naked
     });
     var iconClasses = iconStyles();
     var textClasses = textStyles({
@@ -848,7 +899,8 @@ var connectedDisclosureStyles = tv({
         highlight: highlight,
         pressed: pressed,
         loading: loading,
-        disabled: disabled
+        disabled: disabled,
+        naked: naked
     });
     var connectedDisclosureClasses = connectedDisclosureStyles({
         primary: primary,
@@ -896,7 +948,8 @@ var connectedDisclosureStyles = tv({
                         className: iconClasses,
                         children: /*#__PURE__*/ _jsx(Icon, {
                             source: memoizedIcon,
-                            color: disabled ? "disabled" : _iconColor || iconColor
+                            color: disabled ? "disabled" : _iconColor || iconColor,
+                            size: iconSize
                         })
                     }),
                     hasChildren && /*#__PURE__*/ _jsx("span", {
@@ -907,7 +960,8 @@ var connectedDisclosureStyles = tv({
                         className: "Litho-Button__DisclosureIcon relative -left-0.5",
                         children: /*#__PURE__*/ _jsx(Icon, {
                             source: CaretDownMinor,
-                            color: disabled ? "disabled" : _iconColor || iconColor
+                            color: disabled ? "disabled" : _iconColor || iconColor,
+                            size: iconSize
                         })
                     })
                 ]
@@ -959,6 +1013,7 @@ var connectedDisclosureStyles = tv({
             content: tooltip,
             alignment: tooltipAlignment,
             preferredPosition: tooltipPosition,
+            display: tooltipDisplay,
             children: showConnectedDisclosure ? contentWithDisclosure : content
         });
     }

package/dist/esm/components/Card.js

@@ -4,14 +4,14 @@ function _type_of(obj) {
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useContext } from "react";
+import React from "react";
 import { tv } from "tailwind-variants";
-import { FrameContext } from "./AppProvider.js";
 import Button from "./Button.js";
 import Icon from "./Icon.js";
 import Spinner from "./Spinner.js";
 import Text from "./Text.js";
 import Tooltip from "./Tooltip.js";
+import { useFrame } from "./Frame.js";
 var styles = tv({
     base: "Litho-Card relative",
     variants: {
@@ -173,7 +173,7 @@ var bodyStyles = tv({
  * @returns {React.ReactElement} The rendered Card component.
  */ var Card = function(param) {
     var _param_allowOverflow = param.allowOverflow, allowOverflow = _param_allowOverflow === void 0 ? false : _param_allowOverflow, _param_roundedOnMobile = param.roundedOnMobile, roundedOnMobile = _param_roundedOnMobile === void 0 ? false : _param_roundedOnMobile, children = param.children, hideOnPrint = param.hideOnPrint, title = param.title, _param_titleVariant = param.titleVariant, titleVariant = _param_titleVariant === void 0 ? "headingMd" : _param_titleVariant, description = param.description, icon = param.icon, tooltip = param.tooltip, _param_tooltipPreferredPosition = param.tooltipPreferredPosition, tooltipPreferredPosition = _param_tooltipPreferredPosition === void 0 ? "above" : _param_tooltipPreferredPosition, _param_outlined = param.outlined, outlined = _param_outlined === void 0 ? false : _param_outlined, _param_highlighted = param.highlighted, highlighted = _param_highlighted === void 0 ? false : _param_highlighted, _param_subdued = param.subdued, subdued = _param_subdued === void 0 ? false : _param_subdued, _param_alternate = param.alternate, alternate = _param_alternate === void 0 ? false : _param_alternate, _param_padded = param.padded, padded = _param_padded === void 0 ? false : _param_padded, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, _param_paddedHalf = param.paddedHalf, paddedHalf = _param_paddedHalf === void 0 ? false : _param_paddedHalf, _param_removeHeaderBottomPadding = param.removeHeaderBottomPadding, removeHeaderBottomPadding = _param_removeHeaderBottomPadding === void 0 ? false : _param_removeHeaderBottomPadding, onClick = param.onClick, _param_emptyState = param.emptyState, emptyState = _param_emptyState === void 0 ? {} : _param_emptyState, action = param.action, className = param.className, headerClassName = param.headerClassName, accessory = param.accessory, _param_fullHeightBody = param.fullHeightBody, fullHeightBody = _param_fullHeightBody === void 0 ? false : _param_fullHeightBody, _param_fullWidthOnMobile = param.fullWidthOnMobile, fullWidthOnMobile = _param_fullWidthOnMobile === void 0 ? true : _param_fullWidthOnMobile, _param_shadow = param.shadow, shadow = _param_shadow === void 0 ? "default" : _param_shadow;
-    var embedded = useContext(FrameContext).embedded;
+    var embedded = useFrame().embedded;
     var showHeader = !!(title || action);
     var isClickable = !!onClick;
     var classes = styles({
@@ -198,7 +198,8 @@ var bodyStyles = tv({
         var firstSectionDetected = false;
         function process(child) {
             if (/*#__PURE__*/ React.isValidElement(child)) {
-                if (child.type.displayName === "Card.Section" && !firstSectionDetected) {
+                var _child_type;
+                if (((_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.displayName) === "Card.Section" && !firstSectionDetected) {
                     firstSectionDetected = true;
                     return /*#__PURE__*/ React.cloneElement(child, {
                         isFirst: true,
@@ -516,6 +517,7 @@ var clickableRowStyles = tv({
  * @param {Function} [props.onClick] - Click handler for the row.
  * @param {string} [props.id] - ID to apply to the row element.
  * @param {string} [props.url] - URL to open when the row is clicked.
+ * @param {string} [props.className] - Additional classes to apply to the row.
  * @param {boolean} [props.disabled=false] - Disables interaction with the row.
  *
  * @returns {React.ReactElement} The rendered ClickableRow component.

package/dist/esm/components/Checkbox.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Icon, Label, Text } from "../index.js";
+import Icon from "./Icon.js";
+import Label from "./Label.js";
+import Text from "./Text.js";
 import { TickMinor, MinusMajor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Checkbox group flex gap-2 py-1",
@@ -61,6 +63,9 @@ var checkboxStyles = tv({
  * @param {boolean} [props.checked=false] - Indicates whether the checkbox is checked.
  * @param {boolean} [props.disabled=false] - Indicates whether the checkbox is disabled.
  * @param {string} [props.helpText] - Additional descriptive text for the checkbox.
+ * @param {React.ReactNode|import("./Tooltip").TooltipContentObject} [props.tooltip] - Tooltip content for the checkbox label.
+ * @param {boolean} [props.indeterminate=false] - Indicates whether the checkbox is in an indeterminate state (mixed/partial selection).
+ * @param {string} [props.className] - Additional CSS classes to apply to the checkbox container.
  * @param {function} [props.onChange] - Callback function called when the checkbox state changes.
  * @param {function} [props.onFocus] - Callback function called when the checkbox gains focus.
  * @param {function} [props.onBlur] - Callback function called when the checkbox loses focus.

package/dist/esm/components/ChoiceList.js

@@ -36,6 +36,12 @@ var styles = tv({
     base: "Litho-ChoiceList flex flex-col gap-1"
 });
 /**
+ * @typedef {Object} ChoiceListItem
+ * @property {string} value - The value of the choice.
+ * @property {string} label - The display label of the choice.
+ * @property {boolean} [disabled=false] - Whether the choice is disabled.
+ * @property {React.ReactNode} [renderChildren] - A function that returns a React node to render as children of the choice.
+ */ /**
  * A ChoiceList component for rendering a list of selectable options.
  *
  * @component
@@ -44,10 +50,7 @@ var styles = tv({
  * @param {string} [props.title] - The title of the choice list.
  * @param {boolean} [props.titleHidden=false] - Whether to hide the title visually.
  * @param {boolean} [props.allowMultiple=false] - Whether multiple selections are allowed.
- * @param {Array} props.choices - The available choices for selection.
- * @param {string} props.choices[].value - The value of the choice.
- * @param {string} props.choices[].label - The display label of the choice.
- * @param {boolean} [props.choices[].disabled=false] - Whether the choice is disabled.
+ * @param {Array<ChoiceListItem>} props.choices - The available choices for selection.
  * @param {Array} props.selected - The currently selected values.
  * @param {Function} props.onChange - Callback when the selection changes. Receives the updated array of selected values.
  * @param {string} [props.error] - Error message to display, if any.

package/dist/esm/components/ColorField.js

@@ -47,9 +47,9 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { SketchPicker } from "react-color";
+import Sketch from "@uiw/react-color-sketch";
 import { tv } from "tailwind-variants";
-import { Text } from "../index.js";
+import Text from "./Text.js";
 var colorContainer = tv({
     base: "Litho-ColorField relative flex items-center gap-2 cursor-pointer px-1 py-1 rounded-md w-full-plus-2 -left-1",
     variants: {
@@ -133,7 +133,7 @@ var colorCell = tv({
                 style: zIndexOverride ? {
                     zIndex: zIndexOverride
                 } : {},
-                children: /*#__PURE__*/ _jsx(SketchPicker, {
+                children: /*#__PURE__*/ _jsx(Sketch, {
                     color: value,
                     onChange: function(param) {
                         var hex = param.hex;

package/dist/esm/components/DatePicker.js

@@ -118,7 +118,12 @@ import { useEffect, useState } from "react";
 import { tv } from "tailwind-variants";
 import dayjs from "dayjs";
 import ReactDatePicker from "react-datepicker";
-import { Icon, Listbox, Popover, Text, TextField, TimePicker } from "../index.js";
+import Icon from "./Icon.js";
+import Listbox from "./Listbox.js";
+import Popover from "./Popover.js";
+import Text from "./Text.js";
+import TextField from "./TextField.js";
+import TimePicker from "./TimePicker.js";
 import { CalendarMinor, CalendarTimeMinor, ChevronLeftMinor, ChevronRightMinor } from "@shopify/polaris-icons";
 import { enUS } from "date-fns/locale";
 import { NOW_TODAY, DAY_FORMAT, DAY_TIME_FORMAT, TIME_FORMAT, MONTHS, RANGE_PRESETS, HOURLY_RANGE_PRESETS, DATE_LOCALE_MAP, isValidDate } from "../utilities/dates.js";

package/dist/esm/components/DropZone.js

@@ -60,7 +60,14 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { tv } from "tailwind-variants";
-import { Button, Icon, InlineError, Label, Link, SkeletonText, Spinner, 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 SkeletonText from "./SkeletonText.js";
+import Spinner from "./Spinner.js";
+import Text from "./Text.js";
 import { CancelMajor, CircleAlertMajor, FileMinor, ImageMajor, ImagesMajor } from "@shopify/polaris-icons";
 var dropZoneStyles = tv({
     base: "Litho-DropZone w-full flex items-center justify-center p-4 border border-form-border border-dashed rounded-md focus:outline-hidden",
@@ -122,9 +129,12 @@ var dropZoneStyles = tv({
  * @returns {JSX.Element} DropZone component.
  */ function DropZone() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var id = props.id, label = props.label, labelHidden = props.labelHidden, labelAction = props.labelAction, tooltip = props.tooltip, labelVariant = props.labelVariant, _props_type = props.type, type = _props_type === void 0 ? "file" : _props_type, _props_accept = props.accept, accept = _props_accept === void 0 ? typeof props.accept === "string" ? [
-        props.accept
-    ] : props.accept : _props_accept, _props_allowMultiple = props.allowMultiple, allowMultiple = _props_allowMultiple === void 0 ? false : _props_allowMultiple, _props_showDropZoneWhenDisabled = props.showDropZoneWhenDisabled, showDropZoneWhenDisabled = _props_showDropZoneWhenDisabled === void 0 ? true : _props_showDropZoneWhenDisabled, _disabled = props.disabled, onDrop = props.onDrop, onDropAccepted = props.onDropAccepted, onDropRejected = props.onDropRejected, helpText = props.helpText, error = props.error, _props_uploading = props.uploading, uploading = _props_uploading === void 0 ? false : _props_uploading, _props_uploadedFiles = props.uploadedFiles, uploadedFiles = _props_uploadedFiles === void 0 ? [] : _props_uploadedFiles, _props_uploadLabel = props.uploadLabel, uploadLabel = _props_uploadLabel === void 0 ? "Drag and drop files or click to upload" : _props_uploadLabel, _props_uploadingLabel = props.uploadingLabel, uploadingLabel = _props_uploadingLabel === void 0 ? "Uploading..." : _props_uploadingLabel, _props_dragLabel = props.dragLabel, dragLabel = _props_dragLabel === void 0 ? "Release to upload" : _props_dragLabel, tmp = props.showFilePreview, _showFilePreview = tmp === void 0 ? true : tmp, previewLoading = props.previewLoading, _props_previewRows = props.previewRows, previewRows = _props_previewRows === void 0 ? 2 : _props_previewRows, onRemove = props.onRemove, onFilePreviewClick = props.onFilePreviewClick, filename = props.filename;
+    var id = props.id, label = props.label, labelHidden = props.labelHidden, labelAction = props.labelAction, tooltip = props.tooltip, labelVariant = props.labelVariant, _props_type = props.type, type = _props_type === void 0 ? "file" : _props_type, _accept = props.accept, _props_allowMultiple = props.allowMultiple, allowMultiple = _props_allowMultiple === void 0 ? false : _props_allowMultiple, _props_showDropZoneWhenDisabled = props.showDropZoneWhenDisabled, showDropZoneWhenDisabled = _props_showDropZoneWhenDisabled === void 0 ? true : _props_showDropZoneWhenDisabled, _disabled = props.disabled, onDrop = props.onDrop, onDropAccepted = props.onDropAccepted, onDropRejected = props.onDropRejected, helpText = props.helpText, error = props.error, _props_uploading = props.uploading, uploading = _props_uploading === void 0 ? false : _props_uploading, _props_uploadedFiles = props.uploadedFiles, uploadedFiles = _props_uploadedFiles === void 0 ? [] : _props_uploadedFiles, _props_uploadLabel = props.uploadLabel, uploadLabel = _props_uploadLabel === void 0 ? "Drag and drop files or click to upload" : _props_uploadLabel, _props_uploadingLabel = props.uploadingLabel, uploadingLabel = _props_uploadingLabel === void 0 ? "Uploading..." : _props_uploadingLabel, _props_dragLabel = props.dragLabel, dragLabel = _props_dragLabel === void 0 ? "Release to upload" : _props_dragLabel, tmp = props.showFilePreview, _showFilePreview = tmp === void 0 ? true : tmp, previewLoading = props.previewLoading, _props_previewRows = props.previewRows, previewRows = _props_previewRows === void 0 ? 2 : _props_previewRows, onRemove = props.onRemove, onFilePreviewClick = props.onFilePreviewClick, filename = props.filename;
+    var accept = _accept ? typeof _accept === "string" ? [
+        _accept
+    ] : _accept : [
+        "*/*"
+    ];
     var inputRef = useRef(null);
     var _useState = _sliced_to_array(useState(false), 2), hasFocusWithin = _useState[0], setHasFocusWithin = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), isDraggingOver = _useState1[0], setIsDraggingOver = _useState1[1];

package/dist/esm/components/EmptyState.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Image, Text, ProgressBar } from "../index.js";
+import Button from "./Button.js";
+import Image from "./Image.js";
+import Text from "./Text.js";
+import ProgressBar from "./ProgressBar.js";
 import { tv } from "tailwind-variants";
 var styles = tv({
     base: "Litho-EmptyState py-16 px-4 flex flex-col items-center text-center gap-6"
@@ -32,10 +35,10 @@ var styles = tv({
  * @returns {JSX.Element} The rendered EmptyState component.
  */ function EmptyState() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var description = props.description, icon = props.icon, iconSource = props.iconSource, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingXl" : _props_titleVariant, _props_descriptionVariant = props.descriptionVariant, descriptionVariant = _props_descriptionVariant === void 0 ? "bodyLg" : _props_descriptionVariant, progress = props.progress;
+    var description = props.description, icon = props.icon, iconSource = props.iconSource, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingXl" : _props_titleVariant, _props_descriptionVariant = props.descriptionVariant, descriptionVariant = _props_descriptionVariant === void 0 ? "bodyLg" : _props_descriptionVariant, progress = props.progress, className = props.className;
     var classes = styles();
     return /*#__PURE__*/ _jsxs("div", {
-        className: classes,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         children: [
             iconSource && /*#__PURE__*/ _jsx("div", {
                 className: "flex items-center justify-center w-16 h-16",

package/dist/esm/components/Filters.js

@@ -112,9 +112,16 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { tv } from "tailwind-variants";
-import { ActionList, Button, Icon, Link, Popover, Text, TextField, Tooltip } from "../index.js";
+import ActionList from "./ActionList.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import Link from "./Link.js";
+import Popover from "./Popover.js";
+import Text from "./Text.js";
+import TextField from "./TextField.js";
+import Tooltip from "./Tooltip.js";
 import { CancelSmallMinor, CaretDownMinor, DeleteMinor, HorizontalDotsMinor, PlusMinor, SearchMajor, ChevronLeftMinor, ChevronRightMinor } from "@shopify/polaris-icons";
-import { DarkModeContext } from "./AppProvider.js";
+import { useDarkMode } from "./AppProvider.js";
 var styles = tv({
     base: "Litho-Filters flex items-center",
     variants: {
@@ -797,11 +804,11 @@ var tabActionIconStyles = tv({
  * @param {boolean} [props.subdued=false] - Whether the text field appears subdued.
  * @param {boolean} [props.disableQueryField=false] - Whether the text field is disabled.
  * @param {boolean} [props.transparent=true] - Whether the text field has a transparent background.
+ * @param {string} [props.autoComplete="on"] - Whether the text field should autocomplete.
  * @returns {JSX.Element} The text field component.
- */ Filters.TextField = function FiltersTextField() {
-    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var darkMode = useContext(DarkModeContext).darkMode;
-    var queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, disableQueryField = props.disableQueryField;
+ */ Filters.TextField = function(props) {
+    var darkMode = useDarkMode().darkMode;
+    var queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, disableQueryField = props.disableQueryField, _props_autoComplete = props.autoComplete, autoComplete = _props_autoComplete === void 0 ? "on" : _props_autoComplete;
     return /*#__PURE__*/ _jsx("div", {
         className: "p-1",
         children: /*#__PURE__*/ _jsx(TextField, {
@@ -814,6 +821,7 @@ var tabActionIconStyles = tv({
             disabled: disableQueryField,
             subdued: darkMode,
             transparent: !darkMode,
+            autoComplete: autoComplete,
             clearButton: true,
             onClearButtonClick: onQueryClear
         })

package/dist/esm/components/FooterHelp.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from "../index.js";
+import Icon from "./Icon.js";
 import { CircleInformationMajor } from "@shopify/polaris-icons";
 /**
  * Renders a `FooterHelp` component, which provides additional information

package/dist/esm/components/Form.js

@@ -1,11 +1,26 @@
 /**
- * A reusable Form component.
+ * A reusable Form component that provides a structured HTML form with customizable attributes and submission handling.
  *
+ * @component
  * @param {Object} [props={}] - The properties passed to the component.
- * @param {string} [props.method="get"] - The HTTP method for the form submission.
- * @param {function} [props.onSubmit] - The function to call when the form is submitted.
+ * @param {string} [props.acceptCharset] - The character encoding that the form accepts.
+ * @param {string} [props.action] - The URL where the form data should be submitted.
+ * @param {string} [props.autoComplete] - Whether the form should have autocomplete enabled. Can be "on" or "off".
  * @param {React.ReactNode} [props.children] - The child elements to be rendered inside the form.
+ * @param {string} [props.encType] - The encoding type for the form submission (e.g., "multipart/form-data", "application/x-www-form-urlencoded").
+ * @param {string} [props.method="post"] - The HTTP method for the form submission. Can be "get", "post", etc.
+ * @param {string} [props.name] - The name attribute for the form element.
+ * @param {boolean} [props.noValidate] - Whether to disable HTML5 form validation.
+ * @param {boolean} [props.preventDefault=true] - Whether to prevent the default form submission behavior.
+ * @param {string} [props.target] - The target window or frame for the form submission (e.g., "_blank", "_self").
+ * @param {Function} [props.onSubmit] - The function to call when the form is submitted. Receives the form event as a parameter.
  * @returns {JSX.Element} The rendered form component.
+ * 
+ * @example
+ * <Form onSubmit={(event) => console.log('Form submitted')}>
+ *   <TextField label="Name" />
+ *   <Button submit>Submit</Button>
+ * </Form>
  */ import { jsx as _jsx } from "react/jsx-runtime";
 function Form() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};