@heymantle/litho 0.0.15 → 0.0.16

package/dist/cjs/components/RadioButtonCardGroup.js

@@ -0,0 +1,379 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Label = /*#__PURE__*/ _interop_require_default(require("./Label"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _polarisicons = require("@shopify/polaris-icons");
+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
+    };
+}
+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 _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+/**
+ * @component RadioButtonCardGroup
+ *
+ * @description A grouped radio selection component that renders options in a single bordered container with dividers between items, using card-styled radio inputs.
+ *
+ * @usage
+ * - DO: Use for single-select options that benefit from a compact grouped list layout with descriptions and icons.
+ * - DON'T: Use when each option needs its own standalone card appearance (use RadioButtonCard individually).
+ *
+ * @accessibility
+ * - Each option uses a native radio input (sr-only) wrapped in a label for keyboard accessibility and screen reader support.
+ * - All radio inputs share the same `name` attribute for native radio group behavior.
+ * - Focus-visible ring appears on keyboard navigation.
+ *
+ * @alternative
+ * - If you need standalone card-styled radio inputs, use `RadioButtonCard`.
+ * - If you need a simple inline radio/checkbox list, use `ChoiceList`.
+ *
+ * @param {Object} [props={}] - Component props.
+ * @param {string} [props.title] - Optional title rendered above the group.
+ * @param {React.ReactNode} [props.tooltip] - Tooltip content for the title.
+ * @param {boolean} [props.titleHidden=false] - Visually hides the title while keeping it accessible to screen readers.
+ * @param {Array<RadioButtonCardGroupOption>} [props.options=[]] - Array of option objects to render.
+ * @param {string} props.options[].value - The value of the option.
+ * @param {string} props.options[].label - The display label of the option.
+ * @param {string} [props.options[].description] - A description displayed below the label.
+ * @param {React.ReactNode} [props.options[].icon] - Optional icon JSX displayed on the left.
+ * @param {boolean} [props.options[].disabled=false] - Whether this specific option is disabled.
+ * @param {string|React.ReactNode} [props.options[].helpText] - Additional descriptive text for the option.
+ * @param {React.ReactNode} [props.options[].tooltip] - Tooltip content for this option's label.
+ * @param {Array<string>} [props.selected=[]] - Currently selected values. Array for API consistency with ChoiceList.
+ * @param {Function} [props.onChange] - Callback when selection changes. Receives updated array of selected values.
+ * @param {string} [props.name] - The name attribute for the radio inputs (groups them together).
+ * @param {string} [props.error] - Error message displayed below the group.
+ * @param {boolean} [props.disabled=false] - Disables all options.
+ * @param {boolean} [props.hideRadioButton=false] - Hides the radio button controls.
+ * @param {boolean} [props.allowDeselect=false] - When true, clicking a selected option deselects it.
+ * @param {"left"|"right"} [props.radioPosition="right"] - Position of the radio button control relative to the content.
+ * @param {Object} [restProps] - Additional props passed to the root element.
+ *
+ * @returns {JSX.Element} The rendered RadioButtonCardGroup component.
+ *
+ * @example
+ * <RadioButtonCardGroup
+ *   title="Select a plan"
+ *   name="plan"
+ *   options={[
+ *     { value: "basic", label: "Basic", description: "For individuals" },
+ *     { value: "pro", label: "Pro", description: "For teams" },
+ *     { value: "enterprise", label: "Enterprise", description: "For organizations" },
+ *   ]}
+ *   selected={["basic"]}
+ *   onChange={(selected) => setSelected(selected)}
+ * />
+ */ var containerStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-RadioButtonCardGroup border rounded-lg overflow-hidden",
+    variants: {
+        hasError: {
+            true: "border-form-border-error",
+            false: "border-edge-light"
+        }
+    },
+    defaultVariants: {
+        hasError: false
+    }
+});
+var itemStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-RadioButtonCardGroup__Item p-3 pl-4 flex items-center gap-3 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-form-focus has-[:focus-visible]:ring-inset",
+    variants: {
+        checked: {
+            true: "",
+            false: ""
+        },
+        disabled: {
+            true: "bg-tint-1",
+            false: "cursor-pointer hover"
+        },
+        isLast: {
+            true: "",
+            false: "border-b border-edge-subdued"
+        },
+        radioPosition: {
+            right: "justify-between",
+            left: ""
+        }
+    },
+    defaultVariants: {
+        radioPosition: "right"
+    }
+});
+// Replicated from RadioButtonCard — the radio circle control styles
+var radioStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-RadioButton__Control w-4.5 h-4.5 rounded-full border border-form-border flex items-center justify-center",
+    variants: {
+        disabled: {
+            true: "bg-form-bg-disabled border-form-border"
+        }
+    },
+    compoundVariants: [
+        {
+            hasError: true,
+            disabled: false,
+            checked: false,
+            class: "bg-form-bg-error border-form-border-error hover:bg-form-bg-error-low hover:ring hover:ring-form-focus-error"
+        },
+        {
+            hasError: true,
+            disabled: false,
+            checked: true,
+            class: "bg-critical border-form-border-error hover:ring hover:ring-form-focus-error"
+        },
+        {
+            hasError: false,
+            disabled: false,
+            checked: false,
+            class: "bg-form-bg border-form-border hover:border-form-border-focus hover:ring hover:ring-form-focus"
+        },
+        {
+            hasError: false,
+            disabled: false,
+            checked: true,
+            class: "bg-form-accent border-form-border-focus hover:border-form-border-focus hover:ring hover:ring-form-focus"
+        }
+    ]
+});
+function RadioButtonCardGroup() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var title = props.title, tooltip = props.tooltip, _props_titleHidden = props.titleHidden, titleHidden = _props_titleHidden === void 0 ? false : _props_titleHidden, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_selected = props.selected, selected = _props_selected === void 0 ? [] : _props_selected, onChange = props.onChange, name = props.name, error = props.error, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_hideRadioButton = props.hideRadioButton, hideRadioButton = _props_hideRadioButton === void 0 ? false : _props_hideRadioButton, _props_allowDeselect = props.allowDeselect, allowDeselect = _props_allowDeselect === void 0 ? false : _props_allowDeselect, _props_radioPosition = props.radioPosition, radioPosition = _props_radioPosition === void 0 ? "left" : _props_radioPosition, _props_labelFontWeight = props.labelFontWeight, labelFontWeight = _props_labelFontWeight === void 0 ? "semibold" : _props_labelFontWeight, restProps = _object_without_properties(props, [
+        "title",
+        "tooltip",
+        "titleHidden",
+        "options",
+        "selected",
+        "onChange",
+        "name",
+        "error",
+        "disabled",
+        "hideRadioButton",
+        "allowDeselect",
+        "radioPosition",
+        "labelFontWeight"
+    ]);
+    var hasError = !!error;
+    var containerClasses = containerStyles({
+        hasError: hasError
+    });
+    var handleOptionChange = function(optionValue) {
+        if (allowDeselect && selected.includes(optionValue)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange([]);
+        } else {
+            onChange === null || onChange === void 0 ? void 0 : onChange([
+                optionValue
+            ]);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+        className: "Litho-RadioButtonCardGroupContainer flex flex-col gap-1"
+    }, restProps), {
+        children: [
+            title && !titleHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                as: "p",
+                tooltip: tooltip,
+                children: title
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: containerClasses,
+                children: options.map(function(option, index) {
+                    var isChecked = selected.includes(option.value);
+                    var isDisabled = disabled || option.disabled;
+                    var isLast = index === options.length - 1;
+                    var itemClasses = itemStyles({
+                        checked: isChecked,
+                        disabled: isDisabled,
+                        isLast: isLast,
+                        radioPosition: radioPosition
+                    });
+                    var radioClasses = radioStyles({
+                        checked: isChecked,
+                        disabled: isDisabled,
+                        hasError: hasError
+                    });
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
+                        className: itemClasses,
+                        onClick: function() {
+                            if (allowDeselect && isChecked && !isDisabled) {
+                                onChange === null || onChange === void 0 ? void 0 : onChange([]);
+                            }
+                        },
+                        children: [
+                            !hideRadioButton && radioPosition === "left" && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "Litho-RadioButton__ControlContainer w-5 h-5 flex items-center flex-shrink-0",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                    className: radioClasses,
+                                    children: [
+                                        isChecked && !hasError && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                            className: "rounded-full w-1.5 h-1.5 ".concat(isDisabled ? "bg-form-input-fg-disabled" : "bg-form-input-fg-light")
+                                        }),
+                                        isChecked && hasError && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                            className: "rounded-full w-1.5 h-1.5 ".concat(isDisabled ? "bg-form-input-fg-disabled" : "bg-form-bg")
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: "flex items-center gap-4",
+                                children: [
+                                    option.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "flex-shrink-0",
+                                        children: option.icon
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                        children: [
+                                            option.label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                                tooltip: option.tooltip,
+                                                disabled: isDisabled,
+                                                fontWeight: labelFontWeight,
+                                                as: "p",
+                                                children: option.label
+                                            }),
+                                            option.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                color: isDisabled ? "disabled" : "subdued",
+                                                children: option.description
+                                            }),
+                                            option.helpText && typeof option.helpText === "string" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                                color: isDisabled ? "disabled" : "subdued",
+                                                variant: "bodySm",
+                                                children: option.helpText
+                                            }),
+                                            option.helpText && typeof option.helpText !== "string" && option.helpText
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                type: "radio",
+                                name: name,
+                                value: option.value,
+                                checked: isChecked,
+                                disabled: isDisabled,
+                                onChange: function() {
+                                    return handleOptionChange(option.value);
+                                },
+                                className: "sr-only"
+                            }),
+                            !hideRadioButton && radioPosition === "right" && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "Litho-RadioButton__ControlContainer w-5 h-5 flex items-center",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                    className: radioClasses,
+                                    children: [
+                                        isChecked && !hasError && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                            className: "rounded-full w-1.5 h-1.5 ".concat(isDisabled ? "bg-form-input-fg-disabled" : "bg-form-input-fg-light")
+                                        }),
+                                        isChecked && hasError && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                            className: "rounded-full w-1.5 h-1.5 ".concat(isDisabled ? "bg-form-input-fg-disabled" : "bg-form-bg")
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }, option.value);
+                })
+            }),
+            error && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "flex gap-2 items-center",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                        source: _polarisicons.CircleAlertMajor,
+                        color: "critical"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        color: "critical",
+                        children: error
+                    })
+                ]
+            })
+        ]
+    }));
+}
+var _default = RadioButtonCardGroup;

package/dist/cjs/components/RangeSlider.js

@@ -66,7 +66,39 @@ 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 rangeStyles = (0, _tailwindvariants.tv)({
+/**
+ * @component RangeSlider
+ *
+ * @description A slider input for selecting a numeric value within a defined range, with optional label, prefix, suffix, and numeric text field output.
+ *
+ * @usage
+ * - DO: Use for selecting a numeric value within a continuous range (e.g., volume, price, percentage).
+ * - DON'T: Use for discrete option selection (use Select or Listbox).
+ *
+ * @accessibility
+ * - Renders a native `<input type="range">` element; ensure a descriptive label is provided via the `label` prop.
+ *
+ * @alternative
+ * - If you need a text-only numeric input, use `TextField` with `type="number"`.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.id] - The ID for the range input element.
+ * @param {string} [props.label] - Label displayed above the slider.
+ * @param {boolean} [props.labelHidden] - Whether the label is visually hidden.
+ * @param {string} [props.labelVariant] - Typography variant for the label.
+ * @param {string} [props.tooltip] - Tooltip content for the label.
+ * @param {boolean} [props.disabled] - Whether the slider is disabled.
+ * @param {number} [props.step=1] - Step increment for the slider.
+ * @param {React.ReactNode} [props.prefix] - Content displayed before the slider.
+ * @param {string} [props.prefixClasses=""] - Additional CSS classes for the prefix.
+ * @param {React.ReactNode} [props.suffix] - Content displayed in the output text field suffix.
+ * @param {number} [props.value] - The current value of the slider.
+ * @param {number} [props.min=0] - Minimum value of the slider.
+ * @param {number} [props.max=100] - Maximum value of the slider.
+ * @param {boolean} [props.output=true] - Whether to show the numeric output text field.
+ * @param {Function} [props.onChange] - Callback fired when the value changes.
+ * @returns {JSX.Element} The rendered RangeSlider component.
+ */ var rangeStyles = (0, _tailwindvariants.tv)({
     base: "Litho-RangeSlider__ActiveRange absolute left-0 top-1/2 -translate-y-1/2 rounded-l-full h-1 pointer-events-none",
     variants: {
         disabled: {
@@ -102,31 +134,7 @@ function useSyncedState(externalValue) {
         setValue
     ];
 }
-/**
- * RangeSlider Component
- *
- * A range slider component that allows users to select a numeric value within a defined range.
- *
- * @component
- * @param {Object} props - The properties for the RangeSlider component.
- * @param {string} [props.id] - The unique ID for the slider. If not provided, a UUID will be generated.
- * @param {string} [props.label] - The label text displayed for the slider.
- * @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it accessible for screen readers.
- * @param {string} [props.labelVariant] - Variant of the label style.
- * @param {string} [props.tooltip] - Tooltip text for the label.
- * @param {boolean} [props.disabled=false] - Disables the slider if true.
- * @param {number} [props.step=1] - Step value for the slider increments.
- * @param {string} [props.prefix] - Text to display before the slider input.
- * @param {string} [props.prefixClasses=""] - Additional classes for the prefix text.
- * @param {string} [props.suffix] - Text to display after the slider value input.
- * @param {number} [props.value] - Initial value for the slider. Defaults to the minimum value.
- * @param {number} [props.min=0] - Minimum value of the slider.
- * @param {number} [props.max=100] - Maximum value of the slider.
- * @param {boolean} [props.output=true] - Whether to display an output field for the slider value.
- * @param {function} [props.onChange] - Callback function triggered when the slider value changes.
- *
- * @returns {JSX.Element} The rendered RangeSlider component.
- */ function RangeSlider() {
+function RangeSlider() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _id = props.id, label = props.label, labelHidden = props.labelHidden, labelVariant = props.labelVariant, tooltip = props.tooltip, disabled = props.disabled, _props_step = props.step, step = _props_step === void 0 ? 1 : _props_step, prefix = props.prefix, _props_prefixClasses = props.prefixClasses, prefixClasses = _props_prefixClasses === void 0 ? "" : _props_prefixClasses, suffix = props.suffix, initialValue = props.value, _props_min = props.min, min = _props_min === void 0 ? 0 : _props_min, _props_max = props.max, max = _props_max === void 0 ? 100 : _props_max, _props_output = props.output, output = _props_output === void 0 ? true : _props_output, onChange = props.onChange;
     var idValue = (0, _react.useId)();

package/dist/cjs/components/ResourceList.js

@@ -17,19 +17,22 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-var styles = (0, _tailwindvariants.tv)({
-    base: "Litho-ResourceList flex flex-col min-w-72",
-    variants: {
-        divider: {
-            true: "divide-y divide-edge-default",
-            false: ""
-        }
-    }
-});
 /**
- * ResourceList component displays a list of items with loading and empty states.
+ * @component ResourceList
+ *
+ * @description A structured list component for displaying collections of similar resources with optional selection, bulk actions, and pagination.
+ *
+ * @usage
+ * - DO: Display collections of similar resources with selection and bulk actions.
+ * - DON'T: Use for simple text lists (use List).
+ *
+ * @accessibility
+ * - Supports keyboard selection; ensure each item has a descriptive label for screen readers.
+ *
+ * @alternative
+ * - If you need a data table with sorting and columns, use `Table`.
+ * - If you need a simple list, use `List`.
  *
- * @component
  * @param {Object} props - The component props.
  * @param {Array} [props.items=[]] - List of items to display.
  * @param {boolean} [props.loading=false] - Whether the list is in a loading state.
@@ -41,7 +44,16 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.divider=true] - Whether to show dividers between items.
  * @param {"none"|"small"|"large"} [props.gap="none"] - Gap size between items.
  * @returns {JSX.Element} The rendered component.
- */ function ResourceList() {
+ */ var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-ResourceList flex flex-col min-w-72",
+    variants: {
+        divider: {
+            true: "divide-y divide-edge-default",
+            false: ""
+        }
+    }
+});
+function ResourceList() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_items = props.items, items = _props_items === void 0 ? [] : _props_items, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_emptyState = props.emptyState, emptyState = _props_emptyState === void 0 ? "No results found." : _props_emptyState, renderItem = props.renderItem, _props_resourceName = props.resourceName, resourceName = _props_resourceName === void 0 ? {
         singular: "item",
@@ -80,9 +92,11 @@ var itemStyles = (0, _tailwindvariants.tv)({
     }
 });
 /**
- * Item component represents a single item in the ResourceList.
+ * @component ResourceList.Item
+ *
+ * @usage
+ * - DO: Use as direct children of ResourceList for each resource entry.
  *
- * @component
  * @param {Object} props - The component props.
  * @param {string} [props.id] - The ID of the item.
  * @param {string} [props.accessibilityLabel] - Accessibility label for the item.

package/dist/cjs/components/Select.js

@@ -68,7 +68,43 @@ 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)({
+/**
+ * @component Select
+ *
+ * @description A dropdown select input that renders native HTML select with label, help text, and error state support.
+ *
+ * @usage
+ * - DO: Use for choosing one option from a predefined list.
+ * - DON'T: Use when the list is very long or needs filtering (use Autocomplete).
+ *
+ * @accessibility
+ * - Renders a native `<select>` element with full keyboard and screen reader support. Always provide a `label`.
+ *
+ * @alternative
+ * - If you need searchable/filterable selection, use `Autocomplete`. If you need multi-select, use `ChoiceList`.
+ *
+ * @param {Object} props - The properties for the Select component.
+ * @param {Array} props.options - Array of option objects for the select dropdown. Options can include groups.
+ * @param {string} [props.label] - Label for the select input.
+ * @param {Object} [props.labelAction] - An action object for the label. Includes `onAction` and `content`.
+ * @param {boolean} [props.labelHidden] - Whether to hide the label visually.
+ * @param {boolean} [props.labelInline] - Whether to display the label inline with the select.
+ * @param {boolean} [props.disabled=false] - Whether the select is disabled.
+ * @param {string} [props.helpText] - Optional help text displayed below the select.
+ * @param {string} [props.placeholder] - Placeholder text for the select input.
+ * @param {string} props.id - The ID for the select input.
+ * @param {string} props.name - The name for the select input.
+ * @param {string} props.value - The selected value.
+ * @param {React.ReactNode|import("./Tooltip").TooltipContentObject} props.tooltip - Tooltip content for the select.
+ * @param {string|boolean} [props.error] - Error message or flag indicating the select has an error.
+ * @param {function} props.onChange - Callback for when the selected value changes.
+ * @param {function} props.onFocus - Callback for when the select gains focus.
+ * @param {function} props.onBlur - Callback for when the select loses focus.
+ * @param {boolean} [props.requiredIndicator] - Whether to show a required indicator next to the label.
+ * @param {string} [props.className] - Additional CSS classes to apply to the select container.
+ * @param {string} [props.contentClassName] - Additional CSS classes to apply to the select content area.
+ * @returns {JSX.Element} The rendered Select component.
+ */ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Select relative border border-form-border rounded-md",
     variants: {
         disabled: {
@@ -116,31 +152,7 @@ var styles = (0, _tailwindvariants.tv)({
 var contentStyles = (0, _tailwindvariants.tv)({
     base: "Litho-Select__Content min-h-7.5 pl-3 pr-2 flex items-center justify-between gap-2"
 });
-/**
- * @function Select
- * @description A dropdown component that allows users to select an option from a list.
- * @param {Object} props - The properties for the Select component.
- * @param {Array} props.options - Array of option objects for the select dropdown. Options can include groups.
- * @param {string} [props.label] - Label for the select input.
- * @param {Object} [props.labelAction] - An action object for the label. Includes `onAction` and `content`.
- * @param {boolean} [props.labelHidden] - Whether to hide the label visually.
- * @param {boolean} [props.labelInline] - Whether to display the label inline with the select.
- * @param {boolean} [props.disabled=false] - Whether the select is disabled.
- * @param {string} [props.helpText] - Optional help text displayed below the select.
- * @param {string} [props.placeholder] - Placeholder text for the select input.
- * @param {string} props.id - The ID for the select input.
- * @param {string} props.name - The name for the select input.
- * @param {string} props.value - The selected value.
- * @param {React.ReactNode|import("./Tooltip").TooltipContentObject} props.tooltip - Tooltip content for the select.
- * @param {string|boolean} [props.error] - Error message or flag indicating the select has an error.
- * @param {function} props.onChange - Callback for when the selected value changes.
- * @param {function} props.onFocus - Callback for when the select gains focus.
- * @param {function} props.onBlur - Callback for when the select loses focus.
- * @param {boolean} [props.requiredIndicator] - Whether to show a required indicator next to the label.
- * @param {string} [props.className] - Additional CSS classes to apply to the select container.
- * @param {string} [props.contentClassName] - Additional CSS classes to apply to the select content area.
- * @returns {JSX.Element} The rendered Select component.
- */ function Select() {
+function Select() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var options = props.options, label = props.label, tooltip = props.tooltip, labelAction = props.labelAction, labelHidden = props.labelHidden, labelInline = props.labelInline, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, placeholder = props.placeholder, id = props.id, name = props.name, value = props.value, error = props.error, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, requiredIndicator = props.requiredIndicator, className = props.className, contentClassName = props.contentClassName;
     var _useState = _sliced_to_array((0, _react.useState)(false), 2), focused = _useState[0], setFocused = _useState[1];

package/dist/cjs/components/SkeletonText.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -11,7 +12,37 @@ Object.defineProperty(exports, "default", {
 var _jsxruntime = require("react/jsx-runtime");
 var _tailwindvariants = require("tailwind-variants");
 var _react = require("react");
-var styles = (0, _tailwindvariants.tv)({
+/**
+ * @component SkeletonText
+ *
+ * @description A placeholder component that renders animated skeleton lines to represent loading text content.
+ *
+ * @usage
+ * - DO: Use as a content placeholder while text data is loading, matching the expected layout with `lines` and `type`.
+ * - DON'T: Use for non-text placeholders like images or charts; build custom skeleton layouts for those.
+ *
+ * @accessibility
+ * - Skeleton content is decorative; ensure the parent loading region has `aria-busy="true"`.
+ * - Do not use skeleton text as a replacement for meaningful content once data is available.
+ *
+ * @alternative
+ * - If you need a spinning indicator rather than a content placeholder, use `Spinner` instead.
+ * - If you need a page-level loading bar, use `Loading` instead.
+ *
+ * @param {Object} props - The component properties.
+ * @param {number} [props.lines=3] - The number of lines to render. Defaults to 3 for body text.
+ * @param {"body"|"heading"} [props.type="body"] - The type of skeleton text
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"} [props.size="md"] - The size of the skeleton text
+ * @param {number} [props.width] - The width of the skeleton text lines. If not provided, random widths are generated.
+ * @param {boolean} [props.fullWidth=false] - Whether the skeleton text lines should be full width.
+ * @param {"start"|"center"|"end"} [props.align="start"] - The alignment of the skeleton text lines.
+ * @param {string} [props.className] - Additional class names to apply to the root element.
+ *
+ * @returns {JSX.Element} A JSX element rendering a skeleton placeholder text block.
+ *
+ * @example
+ * <SkeletonText lines={5} type="heading" size="lg" width={80} className="custom-class" />
+ */ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-SkeletonText flex flex-col",
     variants: {
         gap: {
@@ -71,23 +102,7 @@ var lineStyles = (0, _tailwindvariants.tv)({
         }
     ]
 });
-/**
- * SkeletonText component for displaying placeholder text content.
- * 
- * @param {Object} props - The component properties.
- * @param {number} [props.lines=3] - The number of lines to render. Defaults to 3 for body text.
- * @param {"body"|"heading"} [props.type="body"] - The type of skeleton text
- * @param {"xs"|"sm"|"md"|"lg"|"xl"} [props.size="md"] - The size of the skeleton text
- * @param {number} [props.width] - The width of the skeleton text lines. If not provided, random widths are generated.
- * @param {boolean} [props.fullWidth=false] - Whether the skeleton text lines should be full width.
- * @param {"start"|"center"|"end"} [props.align="start"] - The alignment of the skeleton text lines.
- * @param {string} [props.className] - Additional class names to apply to the root element.
- * 
- * @returns {JSX.Element} A JSX element rendering a skeleton placeholder text block.
- * 
- * @example
- * <SkeletonText lines={5} type="heading" size="lg" width={80} className="custom-class" />
- */ function SkeletonText() {
+function SkeletonText() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var tmp = props.lines, _lines = tmp === void 0 ? 3 : tmp, _props_type = props.type, type = _props_type === void 0 ? "body" : _props_type, _props_size = props.size, size = _props_size === void 0 ? "md" : _props_size, _width = props.width, _props_fullWidth = props.fullWidth, fullWidth = _props_fullWidth === void 0 ? false : _props_fullWidth, className = props.className, _props_gap = props.gap, gap = _props_gap === void 0 ? "medium" : _props_gap, _props_align = props.align, align = _props_align === void 0 ? "start" : _props_align;
     var lines = type === "heading" ? 1 : _lines;