@heymantle/litho 0.0.1

package/dist/cjs/components/TextField.js

@@ -0,0 +1,584 @@
+"use client";
+"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 _polarisicons = require("@shopify/polaris-icons");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _tailwindvariants = require("tailwind-variants");
+var _index = require("../index");
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-TextField group relative rounded-md border min-h-8 cursor-text",
+    variants: {
+        disabled: {
+            true: "bg-form-bg-disabled border-form-border"
+        },
+        hasError: {
+            true: "bg-form-bg-error border-form-border-error",
+            false: ""
+        },
+        subdued: {
+            true: "border-transparent",
+            false: ""
+        },
+        transparent: {
+            true: "border-transparent",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            focused: true,
+            hasError: false,
+            class: "bg-form-bg-focus ring ring-form-focus border-form-border-focus"
+        },
+        {
+            focused: true,
+            hasError: true,
+            class: "ring ring-form-focus-error"
+        },
+        {
+            disabled: false,
+            hasError: false,
+            subdued: false,
+            focused: false,
+            class: "bg-form-bg border-form-border"
+        },
+        {
+            disabled: false,
+            hasError: false,
+            subdued: false,
+            focused: false,
+            class: "bg-form-bg hover:border-form-border-hover"
+        },
+        {
+            focused: false,
+            disabled: false,
+            hasError: false,
+            subdued: true,
+            class: "bg-tint-2 border-transparent hover:bg-tint-3 active:bg-tint-4"
+        },
+        {
+            focused: false,
+            disabled: false,
+            hasError: false,
+            transparent: true,
+            class: "bg-transparent hover:border-transparent hover:bg-tint-2 dark:hover:bg-tint-12 border-transparent"
+        },
+        {
+            focused: true,
+            disabled: false,
+            hasError: false,
+            subdued: true,
+            class: "bg-form-bg"
+        }
+    ],
+    defaultVariants: {
+        disabled: false,
+        hasError: false,
+        focused: false
+    }
+});
+var inputStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-TextField__Input appearance-none block bg-transparent border-0 outline-hidden h-full w-full",
+    variants: {
+        align: {
+            left: "",
+            center: "text-center",
+            right: "text-right"
+        },
+        hasSuffix: {
+            true: "pr-2",
+            false: "pr-2"
+        },
+        hasPrefix: {
+            true: "pl-2",
+            false: "pl-3"
+        },
+        hasMultiline: {
+            true: "py-[5px] h-full resize-none leading-5",
+            false: "h-7.5 py-[5px] leading-7.5"
+        },
+        disabled: {
+            true: "text-lowest",
+            false: "text-highest dark:text-higher"
+        },
+        hasError: {
+            true: "placeholder-form-placeholder-error",
+            false: "placeholder-form-placeholder"
+        },
+        type: {
+            time: "hide-time-picker"
+        }
+    }
+});
+var iconStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-TextField__Icon pl-0.5"
+});
+var clearButtonStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-TextField__ClearButton mr-1 rounded-md h-6 w-6 flex self-center items-center justify-center cursor-pointer bg-btn-outline hover:bg-btn-outline-low active:bg-btn-outline-lower",
+    variants: {
+        visible: {
+            true: "opacity-70 hover:opacity-100 ",
+            false: "pointer-events-none opacity-0 group-hover:opacity-0"
+        }
+    }
+});
+/**
+ * Renders a TextField component.
+ *
+ * @function TextField
+ * @param {Object} props - The properties for the TextField component.
+ * @param {string} [props.prefix] - Text content to display before the input.
+ * @param {string} [props.suffix] - Text content to display after the input.
+ * @param {string} [props.placeholder] - Placeholder text for the input.
+ * @param {string} [props.value=''] - The current value of the input.
+ * @param {string} [props.helpText] - Helper text to display below the input.
+ * @param {string} [props.label] - Label text for the input field.
+ * @param {string} [props.labelVariant='bodyMd'] - Visual variant for the label text.
+ * @param {Object} [props.labelAction] - Action button to display next to the label.
+ * @param {boolean} [props.labelHidden] - Whether to visually hide the label.
+ * @param {boolean} [props.disabled=false] - Whether the input is disabled. Defaults to false.
+ * @param {boolean} [props.clearButton] - Whether to show a clear button.
+ * @param {boolean} [props.readOnly] - Whether the input is read-only.
+ * @param {boolean} [props.autoFocus] - Whether to focus the input on mount.
+ * @param {boolean} [props.focused] - Whether the input is focused.
+ * @param {number} [props.multiline=1] - Number of lines for multiline input (1 for single line). Defaults to 1.
+ * @param {boolean} [props.autoGrow=false] - Whether textarea should automatically grow with content. Only applies when multiline > 1.
+ * @param {number} [props.maxHeight] - Maximum height in pixels before scrolling starts. Only applies when autoGrow is true.
+ * @param {string} [props.error] - Error message to display.
+ * @param {ReactNode} [props.connectedRight] - React element to connect to the right of the input.
+ * @param {ReactNode} [props.connectedLeft] - React element to connect to the left of the input.
+ * @param {string} [props.type='text'] - HTML input type. Defaults to 'text'.
+ * @param {boolean} [props.subdued=false] - Whether to use subdued styling.
+ * @param {string} [props.name] - Name attribute for the input.
+ * @param {string} [props.id] - ID for the input element.
+ * @param {string} [props.role] - ARIA role.
+ * @param {number} [props.step] - Step value for number inputs.
+ * @param {number} [props.largeStep=10] - Large step value when using shift + arrows.
+ * @param {string} [props.autoComplete] - HTML autocomplete attribute.
+ * @param {number} [props.max] - Maximum value for number inputs.
+ * @param {number} [props.maxLength] - Maximum length for text input.
+ * @param {number} [props.min] - Minimum value for number inputs.
+ * @param {number} [props.minLength] - Minimum length for text input.
+ * @param {string} [props.pattern] - Input validation pattern.
+ * @param {boolean} [props.spellCheck] - Whether to enable spell checking.
+ * @param {string} [props.ariaOwns] - ARIA owns attribute.
+ * @param {string} [props.ariaControls] - ARIA controls attribute.
+ * @param {boolean} [props.ariaExpanded] - ARIA expanded attribute.
+ * @param {string} [props.ariaActiveDescendant] - ARIA active descendant attribute.
+ * @param {string} [props.ariaAutocomplete] - ARIA autocomplete attribute.
+ * @param {('left'|'center'|'right')} [props.align='left'] - Text alignment within the input.
+ * @param {boolean} [props.requiredIndicator] - Whether to show a required field indicator.
+ * @param {boolean} [props.selectTextOnFocus] - Whether to select all text when focused.
+ * @param {Function} [props.onClearButtonClick] - Handler for clear button click.
+ * @param {Function} [props.onChange] - Handler for value changes.
+ * @param {Function} [props.onFocus] - Handler for input focus.
+ * @param {Function} [props.onBlur] - Handler for input blur.
+ * @param {Function} [props.onKeyDown] - Handler for key down.
+ * @param {ReactNode} [props.tooltip] - Tooltip content for the label.
+ * @param {string} [props.className] - Additional CSS classes.
+ * @returns {JSX.Element} The rendered TextField component.
+ */ function TextField() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var prefix = props.prefix, _suffix = props.suffix, placeholder = props.placeholder, _props_value = props.value, value = _props_value === void 0 ? "" : _props_value, helpText = props.helpText, label = props.label, _props_labelVariant = props.labelVariant, labelVariant = _props_labelVariant === void 0 ? "bodyMd" : _props_labelVariant, labelAction = props.labelAction, labelHidden = props.labelHidden, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, clearButton = props.clearButton, readOnly = props.readOnly, autoFocus = props.autoFocus, _focused = props.focused, _props_multiline = props.multiline, multiline = _props_multiline === void 0 ? 1 : _props_multiline, _props_autoGrow = props.autoGrow, autoGrow = _props_autoGrow === void 0 ? false : _props_autoGrow, maxHeight = props.maxHeight, error = props.error, connectedRight = props.connectedRight, connectedLeft = props.connectedLeft, _props_type = props.type, type = _props_type === void 0 ? "text" : _props_type, _props_subdued = props.subdued, subdued = _props_subdued === void 0 ? false : _props_subdued, name = props.name, _id = props.id, role = props.role, step = props.step, _props_largeStep = props.largeStep, largeStep = _props_largeStep === void 0 ? 10 : _props_largeStep, autoComplete = props.autoComplete, max = props.max, maxLength = props.maxLength, min = props.min, minLength = props.minLength, _props_showCharacterCount = props.showCharacterCount, showCharacterCount = _props_showCharacterCount === void 0 ? false : _props_showCharacterCount, pattern = props.pattern, spellCheck = props.spellCheck, ariaOwns = props.ariaOwns, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaActiveDescendant = props.ariaActiveDescendant, ariaAutocomplete = props.ariaAutocomplete, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, requiredIndicator = props.requiredIndicator, selectTextOnFocus = props.selectTextOnFocus, onClearButtonClick = props.onClearButtonClick, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, tooltip = props.tooltip, className = props.className, _inputRef = props.inputRef, icon = props.icon, _props_transparent = props.transparent, transparent = _props_transparent === void 0 ? false : _props_transparent, _props_showNumberSteppers = props.showNumberSteppers, showNumberSteppers = _props_showNumberSteppers === void 0 ? true : _props_showNumberSteppers, onKeyDown = props.onKeyDown;
+    var suffix = maxLength && showCharacterCount ? "".concat(value.length, " / ").concat(maxLength) : _suffix;
+    var _internalRef = (0, _react.useRef)(null);
+    var inputRef = _inputRef || _internalRef;
+    var _useState = _sliced_to_array((0, _react.useState)(null), 2), textareaHeight = _useState[0], setTextareaHeight = _useState[1];
+    var _useState1 = _sliced_to_array((0, _react.useState)(_focused), 2), focused = _useState1[0], setFocused = _useState1[1];
+    var hasError = !!error;
+    var hasSuffix = !!suffix || maxLength && showCharacterCount;
+    var hasPrefix = !!prefix || !!icon;
+    var hasMultiline = multiline > 1;
+    var hasConnectedLeft = !!connectedLeft;
+    var hasConnectedRight = !!connectedRight;
+    var idValue = (0, _react.useId)();
+    var idRef = (0, _react.useRef)(_id || idValue);
+    var id = idRef.current;
+    var _useState2 = _sliced_to_array((0, _react.useState)(false), 2), isShiftPressed = _useState2[0], setIsShiftPressed = _useState2[1];
+    (0, _react.useEffect)(function() {
+        var handleKeyDown = function(e) {
+            if (e.key === "Shift") {
+                setIsShiftPressed(true);
+            }
+        };
+        var handleKeyUp = function(e) {
+            if (e.key === "Shift") {
+                setIsShiftPressed(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return function() {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, []);
+    var handleFocus = function(event) {
+        setFocused(true);
+        if (selectTextOnFocus && inputRef.current) {
+            var _inputRef_current;
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.select();
+        }
+        if (onFocus) {
+            onFocus(event);
+        }
+    };
+    (0, _react.useEffect)(function() {
+        if (autoFocus && inputRef.current) {
+            setTimeout(function() {
+                var _inputRef_current;
+                (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                if (selectTextOnFocus) {
+                    var _inputRef_current1;
+                    (_inputRef_current1 = inputRef.current) === null || _inputRef_current1 === void 0 ? void 0 : _inputRef_current1.select();
+                }
+            }, 0);
+        }
+    }, []);
+    var classes = styles({
+        disabled: Boolean(disabled || readOnly),
+        hasError: hasError,
+        focused: Boolean(focused && !readOnly),
+        subdued: subdued,
+        transparent: transparent
+    });
+    var iconClasses = iconStyles();
+    var inputClasses = inputStyles({
+        hasSuffix: hasSuffix,
+        hasPrefix: hasPrefix,
+        hasMultiline: hasMultiline,
+        disabled: disabled,
+        hasError: hasError,
+        readOnly: readOnly,
+        align: align,
+        type: type
+    });
+    var clearButtonClasses = clearButtonStyles({
+        visible: (value === null || value === void 0 ? void 0 : value.length) > 0 && !readOnly && !disabled
+    });
+    var handleBlur = function(event) {
+        setFocused(false);
+        if (onBlur) {
+            onBlur(event);
+        }
+    };
+    var InputElement = hasMultiline ? "textarea" : "input";
+    var leftContent = hasConnectedLeft ? connectedLeft : null;
+    var rightContent = hasConnectedRight ? connectedRight : null;
+    var inputHeight = parseInt(multiline) * 20 + 10;
+    var focusInput = function() {
+        var _inputRef_current;
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+    };
+    var adjustValue = function(delta) {
+        var increment = isShiftPressed ? largeStep : step || 1;
+        var newValue = Number(value || 0) + delta * increment;
+        if (!focused) {
+            var _inputRef_current;
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        }
+        if ((max === undefined || newValue <= max) && (min === undefined || newValue >= min)) {
+            onChange(String(newValue));
+        }
+    };
+    var memoizedIcon = (0, _react.useMemo)(function() {
+        return icon;
+    }, [
+        icon
+    ]);
+    (0, _react.useEffect)(function() {
+        // Handle auto-growing textarea
+        if (hasMultiline && autoGrow && inputRef.current) {
+            var updateHeight = function() {
+                // Reset height to allow proper scrollHeight calculation
+                inputRef.current.style.height = 'auto';
+                // Get the scroll height (content height)
+                var scrollHeight = inputRef.current.scrollHeight;
+                // Apply the height with a minimum based on multiline prop
+                var minHeight = parseInt(multiline) * 20 + 10;
+                var newHeight = Math.max(minHeight, scrollHeight);
+                // If maxHeight is provided, cap the height and enable scrolling
+                if (maxHeight && newHeight > maxHeight) {
+                    inputRef.current.style.height = "".concat(maxHeight, "px");
+                    inputRef.current.style.overflowY = 'auto';
+                } else {
+                    inputRef.current.style.height = "".concat(newHeight, "px");
+                    inputRef.current.style.overflowY = 'hidden';
+                }
+                setTextareaHeight(newHeight);
+            };
+            updateHeight();
+        }
+    }, [
+        value,
+        hasMultiline,
+        autoGrow,
+        multiline,
+        maxHeight
+    ]);
+    var inputContent = /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        onClick: focusInput,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "flex justify-stretch items-center",
+            onClick: focusInput,
+            children: [
+                hasPrefix && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "min-h-7.5 pl-2 flex items-center cursor-text self-start",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        color: "subdued",
+                        className: "pointer-events-none whitespace-nowrap",
+                        as: typeof prefix === "string" ? "p" : "div",
+                        children: prefix
+                    })
+                }),
+                memoizedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    className: iconClasses,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        source: memoizedIcon,
+                        color: "subdued"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(InputElement, {
+                    ref: inputRef,
+                    className: inputClasses,
+                    name: name,
+                    id: id,
+                    value: value,
+                    onChange: function(e) {
+                        if (onChange) {
+                            onChange(e.target.value);
+                        }
+                    },
+                    onKeyDownCapture: onKeyDown,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur,
+                    placeholder: placeholder,
+                    disabled: disabled,
+                    type: hasMultiline ? undefined : type,
+                    style: hasMultiline ? autoGrow ? {} // Height will be managed by the useEffect hook
+                     : {
+                        height: "".concat(inputHeight, "px")
+                    } : {},
+                    readOnly: readOnly,
+                    max: max,
+                    maxLength: maxLength,
+                    min: min,
+                    minLength: minLength,
+                    pattern: pattern,
+                    spellCheck: spellCheck,
+                    autoComplete: autoComplete,
+                    step: type === "number" ? step : undefined,
+                    "aria-owns": ariaOwns,
+                    "aria-controls": ariaControls,
+                    "aria-expanded": ariaExpanded,
+                    "aria-activedescendant": ariaActiveDescendant,
+                    "aria-autocomplete": ariaAutocomplete,
+                    role: role,
+                    onKeyDown: function(e) {
+                        if (type === "number" && !readOnly) {
+                            if (e.key === "ArrowUp") {
+                                e.preventDefault();
+                                adjustValue(1);
+                            } else if (e.key === "ArrowDown") {
+                                e.preventDefault();
+                                adjustValue(-1);
+                            }
+                        }
+                    }
+                }),
+                hasSuffix && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "min-h-7.5 pr-3 flex items-center cursor-text self-start",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        color: "subdued",
+                        className: "pointer-events-none whitespace-nowrap",
+                        children: suffix
+                    })
+                }),
+                type === "number" && showNumberSteppers && !readOnly && !disabled && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "flex flex-col h-full max-h-7.5 border border-transparent",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                            plain: true,
+                            size: "stepper",
+                            className: max !== undefined && value >= max ? "opacity-0 group-hover:opacity-20 pointer-events-none" : "opacity-0 group-hover:opacity-100",
+                            contentClassName: "px-0.5!",
+                            onMouseDown: function(e) {
+                                e.preventDefault();
+                                adjustValue(1);
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                source: _polarisicons.CaretUpMinor,
+                                color: "subdued",
+                                className: "pointer-events-none"
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                            plain: true,
+                            size: "stepper",
+                            className: min !== undefined && value <= min ? "opacity-0 group-hover:opacity-20 pointer-events-none" : "opacity-0 group-hover:opacity-100",
+                            contentClassName: "px-0.5!",
+                            onMouseDown: function(e) {
+                                e.preventDefault();
+                                adjustValue(-1);
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                source: _polarisicons.CaretDownMinor,
+                                color: "subdued",
+                                className: "pointer-events-none"
+                            })
+                        })
+                    ]
+                }),
+                clearButton && onClearButtonClick && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: clearButtonClasses,
+                    onClick: onClearButtonClick,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        source: _polarisicons.CancelSmallMinor,
+                        color: "subdued"
+                    })
+                })
+            ]
+        })
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "Litho-TextFieldContainer flex flex-col gap-1",
+        children: [
+            label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "flex justify-between items-end",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Label, {
+                        id: id,
+                        hidden: labelHidden,
+                        disabled: disabled,
+                        requiredIndicator: requiredIndicator,
+                        tooltip: tooltip,
+                        variant: labelVariant,
+                        children: label
+                    }),
+                    labelAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Link, {
+                        onClick: labelAction.onAction,
+                        removeUnderline: true,
+                        children: labelAction.content
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "flex items-center gap-1",
+                children: [
+                    leftContent,
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "flex-1",
+                        children: inputContent
+                    }),
+                    rightContent
+                ]
+            }),
+            error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.InlineError, {
+                message: error,
+                icon: _polarisicons.CircleAlertMajor
+            }),
+            helpText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                color: "subdued",
+                children: helpText
+            })
+        ]
+    });
+}
+var _default = TextField;

package/dist/cjs/components/Thumbnail.js

@@ -0,0 +1,73 @@
+"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 _index = require("../index");
+var _polarisicons = require("@shopify/polaris-icons");
+var imageContainerStyles = (0, _tailwindvariants.tv)({
+    base: "relative flex items-center justify-center overflow-hidden rounded-lg border border-tint-4 bg-surface-higher group",
+    variants: {
+        size: {
+            small: "w-6 h-6",
+            medium: "w-10 h-10",
+            large: "w-12 h-12"
+        },
+        skeleton: {
+            true: "Litho-Thumbnail-Skeleton"
+        }
+    }
+});
+var imageStyles = (0, _tailwindvariants.tv)({
+    base: "w-full max-w-full max-h-full h-auto object-cover object-top transition-transform duration-500 group-hover:translate-y-[-20%]",
+    defaultVariants: {
+        size: "medium"
+    }
+});
+/**
+ * Thumbnail component to display an image or a placeholder icon.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} [props.src] - The image source URL.
+ * @param {string} [props.alt] - The alternative text for the image.
+ * @param {("small"|"medium"|"large"|number)} [props.size="medium"] - The size of the thumbnail. Can be "small", "medium", "large", or a numeric pixel value.
+ * @param {boolean} [props.skeleton=false] - Whether to show a skeleton loader instead of the image.
+ * @returns {JSX.Element} The rendered Thumbnail component.
+ */ function Thumbnail() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var src = props.src, alt = props.alt, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, _props_skeleton = props.skeleton, skeleton = _props_skeleton === void 0 ? false : _props_skeleton;
+    var sizeIsInteger = Number.isInteger(size);
+    var hasImage = Boolean(src);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: imageContainerStyles({
+            skeleton: skeleton,
+            size: sizeIsInteger ? undefined : size
+        }),
+        style: sizeIsInteger ? {
+            width: "".concat(size, "px"),
+            height: "".concat(size, "px")
+        } : {},
+        children: skeleton ? null : hasImage ? /*#__PURE__*/ (0, _jsxruntime.jsx)("img", {
+            src: src,
+            alt: alt,
+            className: imageStyles({
+                size: sizeIsInteger ? undefined : size
+            }),
+            style: sizeIsInteger ? {
+                width: "".concat(size, "px"),
+                height: "".concat(size, "px")
+            } : {}
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+            source: _polarisicons.ImageMajor,
+            color: "subdued"
+        })
+    });
+}
+var _default = Thumbnail;

package/dist/cjs/components/TimePicker.js

@@ -0,0 +1,23 @@
+"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 _index = require("../index");
+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;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+        type: "time",
+        prefix: labelInline ? label : null,
+        value: value,
+        onChange: onChange
+    });
+}
+var _default = TimePicker;