@heymantle/litho 0.0.15 → 0.0.16

package/dist/esm/components/Checkbox.js

@@ -5,54 +5,20 @@ import Icon from "./Icon.js";
 import Label from "./Label.js";
 import Text from "./Text.js";
 import { TickMinor, MinusMajor } from "@shopify/polaris-icons";
-var styles = tv({
-    base: "Litho-Checkbox group flex gap-2 py-1",
-    variants: {
-        disabled: {
-            false: "cursor-pointer"
-        }
-    }
-});
-var checkboxStyles = tv({
-    base: "Litho-Checkbox__Control w-4.5 h-4.5 pt-px rounded-sm 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"
-        }
-    ]
-});
 /**
- * Checkbox Component
+ * @component Checkbox
+ *
+ * @description A boolean toggle input rendered as a checkbox with label, help text, and error state.
  *
- * A custom checkbox component with support for labels, help text, and extensive styling using Tailwind Variants (tv).
+ * @usage
+ * - DO: Use for toggling a single boolean option or within a group for multi-select.
+ * - DON'T: Use for mutually exclusive options (use RadioButton).
  *
- * @component
+ * @accessibility
+ * - Always provide a `label` prop associated with the checkbox input. Supports keyboard toggling via Space key.
+ *
+ * @alternative
+ * - If you need a rich card-style checkbox, use `CheckboxCard`. If you need grouped options, use `ChoiceList`.
  *
  * @param {Object} props - Props for the Checkbox component.
  * @param {string|React.ReactNode} [props.label] - The label for the checkbox. Can be a string or a React element (e.g., text with a badge).
@@ -88,11 +54,53 @@ var checkboxStyles = tv({
  * @example
  * // With React element label (e.g., text with badge)
  * <Checkbox
- *   label={<Stack horizontal gap="xs" blockAlign="center"><span>Premium Feature</span><Badge>Pro</Badge></Stack>}
+ *   label={<Stack horizontal gap="xs" align="center"><span>Premium Feature</span><Badge>Pro</Badge></Stack>}
  *   checked={false}
  *   onChange={(checked) => console.log('Checkbox changed:', checked)}
  * />
- */ function Checkbox() {
+ */ var styles = tv({
+    base: "Litho-Checkbox group flex gap-2 py-1",
+    variants: {
+        disabled: {
+            false: "cursor-pointer"
+        }
+    }
+});
+var checkboxStyles = tv({
+    base: "Litho-Checkbox__Control w-4.5 h-4.5 pt-px rounded-sm 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 Checkbox() {
     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, tmp = props.checked, _checked = tmp === void 0 ? false : tmp, _props_indeterminate = props.indeterminate, indeterminate = _props_indeterminate === void 0 ? false : _props_indeterminate, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, className = props.className;
     var checked = !!_checked;

package/dist/esm/components/CheckboxCard.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { isValidElement } from "react";
+import Icon from "./Icon.js";
+import Text from "./Text.js";
+import Label from "./Label.js";
+import { TickMinor } from "@shopify/polaris-icons";
+/**
+ * @component CheckboxCard
+ *
+ * @description A card-styled checkbox input that displays a title, description, and optional children within a selectable card container.
+ *
+ * @usage
+ * - DO: Use for visually prominent boolean selections with descriptive content.
+ * - DON'T: Use for simple inline toggles (use Checkbox).
+ *
+ * @accessibility
+ * - The entire card is clickable and keyboard accessible; ensure title clearly describes the option.
+ *
+ * @alternative
+ * - If you need a simple inline checkbox, use `Checkbox`. If you need a radio-style card, use `RadioButtonCard`.
+ *
+ * @param {Object} props - Props for the CheckboxCard component.
+ * @param {string|React.ReactNode} [props.label] - The text label for the checkbox. Can be a string or a React element.
+ * @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 checkbox input.
+ * @param {string} [props.name] - The name attribute for the checkbox input.
+ * @param {string} [props.description] - A description of the checkbox.
+ * @param {string} [props.value] - The value attribute for the checkbox input.
+ * @param {string} [props.error] - An error message associated with the checkbox, if any.
+ * @param {boolean} [props.checked=false] - Indicates whether the checkbox is checked.
+ * @param {boolean} [props.disabled=false] - Indicates whether the checkbox is disabled.
+ * @param {string} [props.helpText] - Additional descriptive text for the checkbox.
+ * @param {React.ReactNode|import("./Tooltip").TooltipContentObject} [props.tooltip] - Tooltip content for the checkbox label.
+ * @param {"left"|"right"} [props.checkboxPosition="left"] - Position of the checkbox relative to the label.
+ * @param {function} [props.onChange] - Callback function called when the checkbox state changes.
+ * @param {function} [props.onFocus] - Callback function called when the checkbox gains focus.
+ * @param {function} [props.onBlur] - Callback function called when the checkbox loses focus.
+ *
+ * @returns {JSX.Element} The rendered CheckboxCard component.
+ */ var styles = tv({
+    base: "Litho-CheckboxCardContainer border border-transparent rounded-lg p-3 flex gap-2 hover:border-form-border-focus hover:ring hover:ring-form-focus",
+    variants: {
+        disabled: {
+            true: "bg-tint-1",
+            false: "cursor-pointer"
+        },
+        checked: {
+            true: "",
+            false: "border-edge-subdued"
+        },
+        checkboxPosition: {
+            left: "pr-4",
+            right: "pl-4 justify-between"
+        }
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            checked: true,
+            class: "border-form-border-focus bg-surface-selected"
+        },
+        {
+            disabled: false,
+            checked: false,
+            class: ""
+        }
+    ],
+    defaultVariants: {
+        checkboxPosition: "left"
+    }
+});
+var checkboxStyles = tv({
+    base: "Litho-Checkbox__Control w-4.5 h-4.5 pt-px rounded-sm 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 CheckboxCard() {
+    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, tmp = props.checked, _checked = tmp === void 0 ? false : tmp, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, _props_checkboxPosition = props.checkboxPosition, checkboxPosition = _props_checkboxPosition === void 0 ? "left" : _props_checkboxPosition, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur;
+    var checked = !!_checked;
+    var hasError = !!error;
+    var labelIsReactElement = /*#__PURE__*/ isValidElement(label);
+    var classes = styles({
+        checked: checked,
+        disabled: disabled,
+        hasError: hasError,
+        checkboxPosition: checkboxPosition
+    });
+    var checkboxClasses = checkboxStyles({
+        checked: checked,
+        disabled: disabled,
+        hasError: hasError
+    });
+    var handleChange = function() {
+        if (onChange) {
+            onChange(!checked);
+        }
+    };
+    var handleFocus = function(event) {
+        if (onFocus) {
+            onFocus(event);
+        }
+    };
+    var handleBlur = function(event) {
+        if (onBlur) {
+            onBlur(event);
+        }
+    };
+    var labelContent = /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-1",
+        children: [
+            label && !labelHidden && /*#__PURE__*/ _jsx(Label, {
+                tooltip: tooltip,
+                disabled: disabled,
+                as: labelIsReactElement ? "div" : "p",
+                children: label
+            }),
+            description && /*#__PURE__*/ _jsx(Text, {
+                color: disabled ? "disabled" : "subdued",
+                children: description
+            })
+        ]
+    });
+    var checkboxControl = /*#__PURE__*/ _jsxs("div", {
+        className: "pointer-events-none",
+        children: [
+            /*#__PURE__*/ _jsx("input", {
+                type: "checkbox",
+                id: id,
+                name: name,
+                value: value,
+                checked: checked,
+                disabled: disabled,
+                onChange: handleChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                className: "sr-only"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "Litho-Checkbox__ControlContainer w-5 h-5 flex items-center justify-center",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: checkboxClasses,
+                    children: checked && /*#__PURE__*/ _jsx(Icon, {
+                        color: disabled ? "inputFgDisabled" : hasError ? "white" : "inputFg",
+                        source: TickMinor,
+                        className: "pointer-events-none"
+                    })
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-1",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                className: classes,
+                children: checkboxPosition === "left" ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        checkboxControl,
+                        labelContent
+                    ]
+                }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        labelContent,
+                        checkboxControl
+                    ]
+                })
+            }),
+            helpText && typeof helpText === "string" && /*#__PURE__*/ _jsx(Text, {
+                color: disabled ? "disabled" : "subdued",
+                children: helpText
+            }),
+            helpText && typeof helpText !== "string" && helpText
+        ]
+    });
+}
+export default CheckboxCard;