@heymantle/litho 0.0.1

package/dist/cjs/components/RadioButton.js

@@ -0,0 +1,172 @@
+"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"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-RadioButton group flex gap-2",
+    variants: {
+        disabled: {
+            false: "cursor-pointer"
+        },
+        alignItems: {
+            stretch: "items-stretch",
+            center: "items-center"
+        }
+    },
+    defaultVariants: {
+        alignItems: "stretch"
+    }
+});
+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"
+        }
+    ]
+});
+/**
+ * RadioButton Component
+ * 
+ * A custom radio button component with support for labels, help text, and extensive styling using Tailwind Variants (tv).
+ * 
+ * @component
+ * 
+ * @param {Object} props - Props for the RadioButton component.
+ * @param {string} [props.label] - The text label for the radio button.
+ * @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it available for screen readers.
+ * @param {string} [props.id] - The unique identifier for the radio input.
+ * @param {string} [props.name] - The name attribute for the radio input (must be the same for grouped buttons).
+ * @param {string} [props.value] - The value attribute for the radio input.
+ * @param {string} [props.error] - An error message associated with the radio button, if any.
+ * @param {boolean} [props.checked=false] - Indicates whether the radio button is checked.
+ * @param {boolean} [props.disabled=false] - Indicates whether the radio button is disabled.
+ * @param {string} [props.helpText] - Additional descriptive text for the radio button.
+ * @param {function} [props.onChange] - Callback function called when the radio button state changes.
+ * @param {function} [props.onFocus] - Callback function called when the radio button gains focus.
+ * @param {function} [props.onBlur] - Callback function called when the radio button loses focus.
+ * 
+ * @returns {JSX.Element} The rendered RadioButton component.
+ */ function RadioButton() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var label = props.label, tooltip = props.tooltip, labelHidden = props.labelHidden, id = props.id, name = props.name, value = props.value, error = props.error, _props_checked = props.checked, checked = _props_checked === void 0 ? false : _props_checked, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, _props_alignItems = props.alignItems, alignItems = _props_alignItems === void 0 ? "stretch" : _props_alignItems;
+    var hasError = !!error;
+    var classes = styles({
+        disabled: disabled,
+        alignItems: alignItems
+    });
+    var radioClasses = radioStyles({
+        checked: checked,
+        disabled: disabled,
+        hasError: hasError
+    });
+    var handleChange = function(event) {
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    var handleFocus = function(event) {
+        if (onFocus) {
+            onFocus(event);
+        }
+    };
+    var handleBlur = function(event) {
+        if (onBlur) {
+            onBlur(event);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "Litho-RadioButtonContainer py-1",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
+                className: classes,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                        type: "radio",
+                        id: id,
+                        name: name,
+                        value: value,
+                        checked: checked,
+                        disabled: disabled,
+                        onChange: handleChange,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        className: "sr-only"
+                    }),
+                    /*#__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: [
+                                checked && !hasError && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "rounded-full w-1.5 h-1.5 ".concat(disabled ? "bg-form-input-fg-disabled" : "bg-form-input-fg-light")
+                                }),
+                                checked && hasError && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "rounded-full w-1.5 h-1.5 ".concat(disabled ? "bg-form-input-fg-disabled" : "bg-form-bg")
+                                })
+                            ]
+                        })
+                    }),
+                    label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                        tooltip: tooltip,
+                        disabled: disabled,
+                        as: "p",
+                        children: label
+                    })
+                ]
+            }),
+            helpText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                color: "subdued",
+                className: "pl-7",
+                children: helpText
+            }),
+            error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                color: "critical",
+                className: "pl-7",
+                children: error
+            })
+        ]
+    });
+}
+var _default = RadioButton;

package/dist/cjs/components/RadioButtonCard.js

@@ -0,0 +1,193 @@
+"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"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-RadioButtonCardContainer border border-transparent rounded-lg p-3 pl-4 flex justify-between gap-2",
+    variants: {
+        disabled: {
+            true: "bg-tint-1",
+            false: "cursor-pointer"
+        },
+        checked: {
+            true: "",
+            false: "border-edge-subdued"
+        }
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            checked: true,
+            class: "border-form-border-focus ring-1 ring-inset ring-form-border-focus"
+        },
+        {
+            disabled: false,
+            checked: false,
+            class: "hover:border-edge-default"
+        }
+    ]
+});
+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"
+        }
+    ]
+});
+/**
+ * RadioButton Component
+ * 
+ * A custom radio button component with support for labels, help text, and extensive styling using Tailwind Variants (tv).
+ * 
+ * @component
+ * 
+ * @param {Object} props - Props for the RadioButton component.
+ * @param {string} [props.label] - The text label for the radio button.
+ * @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it available for screen readers.
+ * @param {string} [props.id] - The unique identifier for the radio input.
+ * @param {string} [props.name] - The name attribute for the radio input (must be the same for grouped buttons).
+ * @param {string} [props.description] - A description of the radio button.
+ * @param {string} [props.value] - The value attribute for the radio input.
+ * @param {string} [props.error] - An error message associated with the radio button, if any.
+ * @param {boolean} [props.checked=false] - Indicates whether the radio button is checked.
+ * @param {boolean} [props.disabled=false] - Indicates whether the radio button is disabled.
+ * @param {string} [props.helpText] - Additional descriptive text for the radio button.
+ * @param {function} [props.onChange] - Callback function called when the radio button state changes.
+ * @param {function} [props.onFocus] - Callback function called when the radio button gains focus.
+ * @param {function} [props.onBlur] - Callback function called when the radio button loses focus.
+ * 
+ * @returns {JSX.Element} The rendered RadioButton component.
+ */ function RadioButtonCard() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var label = props.label, tooltip = props.tooltip, labelHidden = props.labelHidden, id = props.id, name = props.name, description = props.description, value = props.value, error = props.error, _props_checked = props.checked, checked = _props_checked === void 0 ? false : _props_checked, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur;
+    var hasError = !!error;
+    var classes = styles({
+        checked: checked,
+        disabled: disabled,
+        hasError: hasError
+    });
+    var radioClasses = radioStyles({
+        checked: checked,
+        disabled: disabled,
+        hasError: hasError
+    });
+    var handleChange = function(event) {
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    var handleFocus = function(event) {
+        if (onFocus) {
+            onFocus(event);
+        }
+    };
+    var handleBlur = function(event) {
+        if (onBlur) {
+            onBlur(event);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "flex flex-col gap-1",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("label", {
+                className: classes,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "flex flex-col gap-1",
+                        children: [
+                            label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
+                                tooltip: tooltip,
+                                disabled: disabled,
+                                fontWeight: "semibold",
+                                as: "p",
+                                children: label
+                            }),
+                            description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                color: disabled ? "disabled" : "subdued",
+                                children: description
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                type: "radio",
+                                id: id,
+                                name: name,
+                                value: value,
+                                checked: checked,
+                                disabled: disabled,
+                                onChange: handleChange,
+                                onFocus: handleFocus,
+                                onBlur: handleBlur,
+                                className: "sr-only"
+                            }),
+                            /*#__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: [
+                                        checked && !hasError && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                            className: "rounded-full w-1.5 h-1.5 ".concat(disabled ? "bg-form-input-fg-disabled" : "bg-form-input-fg-light")
+                                        }),
+                                        checked && hasError && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                            className: "rounded-full w-1.5 h-1.5 ".concat(disabled ? "bg-form-input-fg-disabled" : "bg-form-bg")
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            helpText && typeof helpText === "string" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                color: disabled ? "disabled" : "subdued",
+                children: helpText
+            }),
+            helpText && typeof helpText !== "string" && helpText
+        ]
+    });
+}
+var _default = RadioButtonCard;

package/dist/cjs/components/RangeSlider.js

@@ -0,0 +1,235 @@
+"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 _react = require("react");
+var _index = require("../index");
+var _tailwindvariants = require("tailwind-variants");
+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 _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 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: {
+            true: "bg-surface-lowest",
+            false: "bg-form-accent"
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});
+var inactiveRangeStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-RangeSlider__InActiveRange absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full w-full h-1 bg-tint-2 dark:bg-tint-alt-2 pointer-events-none",
+    variants: {
+        disabled: {
+            true: "",
+            false: "group-hover:bg-tint-3 group-active:bg-tint-4 group-focus:bg-tint-4 dark:group-hover:bg-tint-alt-3 dark:group-active:bg-tint-alt-4 dark:group-focus:bg-tint-alt-4"
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});
+function useSyncedState(externalValue) {
+    var _useState = _sliced_to_array((0, _react.useState)(externalValue), 2), value = _useState[0], setValue = _useState[1];
+    (0, _react.useEffect)(function() {
+        setValue(externalValue);
+    }, [
+        externalValue
+    ]);
+    return [
+        value,
+        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() {
+    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)();
+    var idRef = (0, _react.useRef)(_id || idValue);
+    var id = idRef.current;
+    var _useSyncedState = _sliced_to_array(useSyncedState(initialValue !== null && initialValue !== void 0 ? initialValue : min), 2), value = _useSyncedState[0], setValue = _useSyncedState[1];
+    var _useSyncedState1 = _sliced_to_array(useSyncedState(initialValue !== null && initialValue !== void 0 ? initialValue : min), 2), tempValue = _useSyncedState1[0], setTempValue = _useSyncedState1[1];
+    var handleChange = function(v) {
+        var updateOnPartialChange = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+        if (v === null || v === "") {
+            setTempValue(min);
+            setValue(min);
+            if (onChange) {
+                onChange(min);
+            }
+            return;
+        }
+        var stringValue = String(v);
+        var strippedValue = stringValue.replace(/^0+(?=\d)/, "");
+        var numericValue = Number(strippedValue);
+        var tempNumericValue = Number(strippedValue);
+        if (isNaN(numericValue)) {
+            return;
+        }
+        if (updateOnPartialChange) {
+            numericValue = Math.max(min, Math.min(max, numericValue));
+            numericValue = Math.round(numericValue / step) * step;
+        }
+        tempNumericValue = Math.max(min, Math.min(max, tempNumericValue));
+        tempNumericValue = Math.round(tempNumericValue / step) * step;
+        setTempValue(tempNumericValue);
+        setValue(numericValue);
+        if (onChange) {
+            onChange(numericValue);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "Litho-RangeSlider",
+        children: [
+            label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Label, {
+                id: id,
+                hidden: labelHidden,
+                disabled: disabled,
+                tooltip: tooltip,
+                variant: labelVariant,
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    prefix && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        color: "subdued",
+                        as: "div",
+                        className: prefixClasses,
+                        children: prefix
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "Litho-RangeSlider__Container group relative w-full h-8 overflow-hidden",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: inactiveRangeStyles({
+                                    disabled: disabled
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: rangeStyles({
+                                    disabled: disabled
+                                }),
+                                style: {
+                                    width: "".concat((tempValue - min) / (max - min) * 100, "%")
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                                id: id,
+                                type: "range",
+                                className: "Litho-RangeSlider__Slider relative w-full appearance-none bg-transparent h-8 ".concat(disabled ? "cursor-not-allowed" : "cursor-pointer"),
+                                disabled: disabled,
+                                min: min,
+                                max: max,
+                                step: step,
+                                value: value,
+                                onChange: function(e) {
+                                    return handleChange(e.target.value, true);
+                                }
+                            })
+                        ]
+                    }),
+                    output && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "max-w-21",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+                            transparent: true,
+                            type: "number",
+                            disabled: disabled,
+                            placeholder: value,
+                            value: value,
+                            suffix: suffix,
+                            onChange: function(value) {
+                                return handleChange(value);
+                            },
+                            onBlur: function(e) {
+                                return handleChange(e.target.value, true);
+                            },
+                            selectTextOnFocus: true,
+                            align: "right",
+                            showNumberSteppers: false
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+var _default = RangeSlider;