@techsio/ui-kit 0.3.2 → 0.4.1

package/dist/molecules/radio-card.js

@@ -0,0 +1,517 @@
+import { jsx } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/radio-group";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { Label } from "../atoms/label.js";
+import { StatusText } from "../atoms/status-text.js";
+import { tv } from "../utils.js";
+const radioCardVariants = tv({
+    slots: {
+        root: [
+            "flex w-full flex-col"
+        ],
+        item: [
+            "relative flex min-w-0 flex-col overflow-hidden",
+            "rounded-radio-card-item",
+            "border-(length:--border-width-radio-card)",
+            "border-radio-card-item-border",
+            "bg-radio-card-item-bg",
+            "text-radio-card-item-fg",
+            "shadow-radio-card-item",
+            "transition-colors duration-200 motion-reduce:transition-none",
+            "data-hover:bg-radio-card-item-bg-hover",
+            "data-hover:border-radio-card-item-border-hover",
+            "data-disabled:cursor-not-allowed",
+            "data-disabled:bg-radio-card-item-bg-disabled",
+            "data-disabled:border-radio-card-item-border-disabled",
+            "data-disabled:text-radio-card-item-fg-disabled",
+            "data-disabled:data-[state=checked]:bg-radio-card-item-bg-disabled",
+            "data-disabled:data-[state=checked]:border-radio-card-item-border-disabled",
+            "data-disabled:data-[state=checked]:text-radio-card-item-fg-disabled",
+            "data-focus-visible:outline-(style:--default-ring-style)",
+            "data-focus-visible:outline-(length:--default-ring-width)",
+            "data-focus-visible:outline-radio-card-ring",
+            "data-focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-invalid:border-radio-card-item-border-error"
+        ],
+        itemControl: [
+            "flex min-w-0 flex-1"
+        ],
+        itemContent: [
+            "flex min-w-0 flex-col"
+        ],
+        itemText: [
+            "min-w-0",
+            "font-radio-card-item",
+            "text-radio-card-item-fg",
+            "leading-snug",
+            "data-disabled:text-radio-card-item-fg-disabled",
+            "data-disabled:data-[state=checked]:text-radio-card-item-fg-disabled"
+        ],
+        itemDescription: [
+            "min-w-0",
+            "text-radio-card-item-description-fg",
+            "leading-normal",
+            "data-disabled:text-radio-card-item-description-fg-disabled",
+            "data-disabled:data-[state=checked]:text-radio-card-item-description-fg-disabled"
+        ],
+        itemIndicator: [
+            "inline-grid shrink-0 place-items-center",
+            "rounded-radio-card-indicator",
+            "border-(length:--border-width-radio-card-indicator)",
+            "border-radio-card-item-indicator-border",
+            "bg-radio-card-item-indicator-bg",
+            "transition-colors duration-200 motion-reduce:transition-none",
+            "data-disabled:border-radio-card-item-indicator-border-disabled",
+            "data-disabled:bg-radio-card-item-indicator-bg-disabled",
+            "data-disabled:data-[state=checked]:border-radio-card-item-indicator-border-disabled",
+            "data-disabled:data-[state=checked]:bg-radio-card-item-indicator-bg-disabled"
+        ],
+        itemIndicatorContent: [
+            "inline-grid place-items-center",
+            "text-radio-card-item-indicator-content-fg",
+            "opacity-0 transition-opacity duration-200 motion-reduce:transition-none",
+            "data-[state=checked]:opacity-100",
+            "data-disabled:data-[state=checked]:text-radio-card-item-indicator-content-fg-disabled"
+        ],
+        itemIndicatorMark: [
+            "block leading-none",
+            "token-icon-radio-card-checked"
+        ],
+        itemAddon: [
+            "border-t-(length:--border-width-radio-card-addon)",
+            "border-radio-card-item-addon-border",
+            "font-radio-card-item-addon",
+            "text-radio-card-item-addon-fg",
+            "transition-colors duration-200 motion-reduce:transition-none",
+            "data-disabled:border-radio-card-item-addon-border-disabled",
+            "data-disabled:bg-radio-card-item-addon-bg-disabled",
+            "data-disabled:text-radio-card-item-addon-fg-disabled",
+            "data-disabled:data-[state=checked]:border-radio-card-item-addon-border-disabled",
+            "data-disabled:data-[state=checked]:bg-radio-card-item-addon-bg-disabled",
+            "data-disabled:data-[state=checked]:text-radio-card-item-addon-fg-disabled"
+        ],
+        hiddenInput: "sr-only"
+    },
+    variants: {
+        variant: {
+            outline: {
+                item: [
+                    "data-[state=checked]:bg-radio-card-item-bg-outline-checked",
+                    "data-[state=checked]:border-radio-card-item-border-outline-checked",
+                    "data-hover:data-[state=checked]:bg-radio-card-item-bg-outline-checked-hover",
+                    "data-hover:data-[state=checked]:border-radio-card-item-border-outline-checked-hover"
+                ],
+                itemIndicator: [
+                    "data-[state=checked]:border-radio-card-item-indicator-border-outline-checked"
+                ],
+                itemIndicatorContent: [
+                    "data-[state=checked]:text-radio-card-item-indicator-content-fg-outline-checked"
+                ]
+            },
+            subtle: {
+                item: [
+                    "data-[state=checked]:bg-radio-card-item-bg-subtle-checked",
+                    "data-[state=checked]:border-radio-card-item-border-subtle-checked",
+                    "data-hover:data-[state=checked]:bg-radio-card-item-bg-subtle-checked-hover",
+                    "data-hover:data-[state=checked]:border-radio-card-item-border-subtle-checked-hover"
+                ],
+                itemText: [
+                    "data-[state=checked]:text-radio-card-item-fg-subtle-checked"
+                ],
+                itemDescription: [
+                    "data-[state=checked]:text-radio-card-item-description-fg-subtle-checked"
+                ],
+                itemIndicator: [
+                    "data-[state=checked]:border-radio-card-item-indicator-border-subtle-checked"
+                ],
+                itemIndicatorContent: [
+                    "data-[state=checked]:text-radio-card-item-indicator-content-fg-subtle-checked"
+                ],
+                itemAddon: [
+                    "data-[state=checked]:border-radio-card-item-addon-border-subtle-checked",
+                    "data-[state=checked]:text-radio-card-item-addon-fg-subtle-checked"
+                ]
+            },
+            solid: {
+                item: [
+                    "data-[state=checked]:bg-radio-card-item-bg-solid-checked",
+                    "data-[state=checked]:border-radio-card-item-border-solid-checked",
+                    "data-hover:data-[state=checked]:bg-radio-card-item-bg-solid-checked-hover",
+                    "data-hover:data-[state=checked]:border-radio-card-item-border-solid-checked-hover"
+                ],
+                itemText: [
+                    "data-[state=checked]:text-radio-card-item-fg-solid-checked"
+                ],
+                itemDescription: [
+                    "data-[state=checked]:text-radio-card-item-description-fg-solid-checked"
+                ],
+                itemIndicator: [
+                    "data-[state=checked]:border-radio-card-item-indicator-border-solid-checked",
+                    "data-[state=checked]:bg-radio-card-item-indicator-bg-solid-checked"
+                ],
+                itemIndicatorContent: [
+                    "data-[state=checked]:text-radio-card-item-indicator-content-fg-solid-checked"
+                ],
+                itemAddon: [
+                    "data-[state=checked]:border-radio-card-item-addon-border-solid-checked",
+                    "data-[state=checked]:text-radio-card-item-addon-fg-solid-checked"
+                ]
+            }
+        },
+        size: {
+            sm: {
+                root: "gap-radio-card-root-sm",
+                itemControl: [
+                    "gap-radio-card-item-control-sm",
+                    "p-radio-card-item-control-sm"
+                ],
+                itemContent: "gap-radio-card-item-content-sm",
+                itemText: "text-radio-card-item-sm",
+                itemDescription: "text-radio-card-item-description-sm",
+                itemIndicator: "size-radio-card-indicator-sm",
+                itemIndicatorMark: "size-radio-card-indicator-mark-sm",
+                itemAddon: [
+                    "p-radio-card-item-addon-sm",
+                    "text-radio-card-item-addon-sm"
+                ]
+            },
+            md: {
+                root: "gap-radio-card-root-md",
+                itemControl: [
+                    "gap-radio-card-item-control-md",
+                    "p-radio-card-item-control-md"
+                ],
+                itemContent: "gap-radio-card-item-content-md",
+                itemText: "text-radio-card-item-md",
+                itemDescription: "text-radio-card-item-description-md",
+                itemIndicator: "size-radio-card-indicator-md",
+                itemIndicatorMark: "size-radio-card-indicator-mark-md",
+                itemAddon: [
+                    "p-radio-card-item-addon-md",
+                    "text-radio-card-item-addon-md"
+                ]
+            },
+            lg: {
+                root: "gap-radio-card-root-lg",
+                itemControl: [
+                    "gap-radio-card-item-control-lg",
+                    "p-radio-card-item-control-lg"
+                ],
+                itemContent: "gap-radio-card-item-content-lg",
+                itemText: "text-radio-card-item-lg",
+                itemDescription: "text-radio-card-item-description-lg",
+                itemIndicator: "size-radio-card-indicator-lg",
+                itemIndicatorMark: "size-radio-card-indicator-mark-lg",
+                itemAddon: [
+                    "p-radio-card-item-addon-lg",
+                    "text-radio-card-item-addon-lg"
+                ]
+            }
+        },
+        itemOrientation: {
+            horizontal: {
+                itemControl: "flex-row",
+                itemContent: "flex-1",
+                itemText: "flex-1"
+            },
+            vertical: {
+                itemControl: "flex-col"
+            }
+        },
+        align: {
+            start: {
+                itemControl: "items-start",
+                itemContent: "items-start",
+                itemText: "text-left",
+                itemDescription: "text-left",
+                itemAddon: "text-left"
+            },
+            center: {
+                itemControl: "items-center",
+                itemContent: "items-center",
+                itemText: "text-center",
+                itemDescription: "text-center",
+                itemAddon: "text-center"
+            },
+            end: {
+                itemControl: "items-end",
+                itemContent: "items-end",
+                itemText: "text-right",
+                itemDescription: "text-right",
+                itemAddon: "text-right"
+            }
+        },
+        justify: {
+            start: {
+                itemControl: "justify-start"
+            },
+            center: {
+                itemControl: "justify-center"
+            },
+            end: {
+                itemControl: "justify-end"
+            },
+            between: {
+                itemControl: "justify-between"
+            }
+        }
+    },
+    defaultVariants: {
+        variant: "outline",
+        size: "md",
+        itemOrientation: "horizontal",
+        align: "start",
+        justify: "between"
+    }
+});
+const RadioCardContext = /*#__PURE__*/ createContext(null);
+function useRadioCardContext() {
+    const context = useContext(RadioCardContext);
+    if (!context) throw new Error("RadioCard components must be used within RadioCard");
+    return context;
+}
+const RadioCardItemContext = /*#__PURE__*/ createContext(null);
+function useRadioCardItemContext() {
+    const context = useContext(RadioCardItemContext);
+    if (!context) throw new Error("RadioCard item components must be used within RadioCard.Item");
+    return context;
+}
+function RadioCard({ "aria-describedby": ariaDescribedByProp, id: providedId, disabled = false, required = false, orientation = "horizontal", itemOrientation = "horizontal", align = "start", justify = "between", validateStatus = "default", onValueChange, variant = "outline", size = "md", children, className, ref, ...machineProps }) {
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const invalid = "error" === validateStatus;
+    const service = useMachine(machine, {
+        ...machineProps,
+        id,
+        disabled,
+        required,
+        orientation,
+        invalid,
+        onValueChange: ({ value: nextValue })=>{
+            onValueChange?.(nextValue);
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const styles = radioCardVariants({
+        size,
+        variant,
+        itemOrientation,
+        align,
+        justify
+    });
+    const rootProps = mergeProps({
+        "aria-describedby": ariaDescribedByProp
+    }, api.getRootProps());
+    return /*#__PURE__*/ jsx(RadioCardContext.Provider, {
+        value: {
+            api,
+            variant,
+            size,
+            itemOrientation,
+            align,
+            justify,
+            disabled,
+            required,
+            validateStatus
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.root({
+                className
+            }),
+            ref: ref,
+            ...rootProps,
+            children: children
+        })
+    });
+}
+RadioCard.Label = function({ children, disabled, required, size: sizeProp, ...props }) {
+    const { api, size, disabled: groupDisabled, required: groupRequired } = useRadioCardContext();
+    const labelProps = mergeProps(props, api.getLabelProps());
+    return /*#__PURE__*/ jsx(Label, {
+        disabled: disabled ?? groupDisabled,
+        required: required ?? groupRequired,
+        size: sizeProp ?? size,
+        ...labelProps,
+        children: children
+    });
+};
+RadioCard.Item = function({ value, disabled, invalid, children, className, ref, ...props }) {
+    const { api, size, variant } = useRadioCardContext();
+    const styles = radioCardVariants({
+        size,
+        variant
+    });
+    const itemProps = {
+        value,
+        disabled,
+        invalid
+    };
+    const mergedItemProps = mergeProps(props, api.getItemProps(itemProps));
+    return /*#__PURE__*/ jsx(RadioCardItemContext.Provider, {
+        value: {
+            itemProps
+        },
+        children: /*#__PURE__*/ jsx("label", {
+            className: styles.item({
+                className
+            }),
+            ref: ref,
+            ...mergedItemProps,
+            children: children
+        })
+    });
+};
+RadioCard.ItemHiddenInput = function({ className, ref, ...props }) {
+    const { api, size, variant } = useRadioCardContext();
+    const { itemProps } = useRadioCardItemContext();
+    const styles = radioCardVariants({
+        size,
+        variant
+    });
+    const hiddenInputProps = mergeProps(props, api.getItemHiddenInputProps(itemProps));
+    return /*#__PURE__*/ jsx("input", {
+        className: styles.hiddenInput({
+            className
+        }),
+        ref: ref,
+        ...hiddenInputProps
+    });
+};
+RadioCard.ItemControl = function({ children, className, ref, ...props }) {
+    const { api, size, variant, itemOrientation, align, justify } = useRadioCardContext();
+    const { itemProps } = useRadioCardItemContext();
+    const styles = radioCardVariants({
+        size,
+        variant,
+        itemOrientation,
+        align,
+        justify
+    });
+    const itemControlProps = mergeProps(props, api.getItemControlProps(itemProps));
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemControl({
+            className
+        }),
+        ref: ref,
+        ...itemControlProps,
+        children: children
+    });
+};
+RadioCard.ItemContent = function({ children, className, ref, ...props }) {
+    const { size, variant, itemOrientation, align } = useRadioCardContext();
+    const styles = radioCardVariants({
+        size,
+        variant,
+        itemOrientation,
+        align
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemContent({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+RadioCard.ItemText = function({ children, className, ref, ...props }) {
+    const { api, size, variant, itemOrientation, align } = useRadioCardContext();
+    const { itemProps } = useRadioCardItemContext();
+    const styles = radioCardVariants({
+        size,
+        variant,
+        itemOrientation,
+        align
+    });
+    const itemTextProps = mergeProps(props, api.getItemTextProps(itemProps));
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemText({
+            className
+        }),
+        ref: ref,
+        ...itemTextProps,
+        children: children
+    });
+};
+RadioCard.ItemDescription = function({ children, className, ref, ...props }) {
+    const { api, size, variant, align } = useRadioCardContext();
+    const { itemProps } = useRadioCardItemContext();
+    const styles = radioCardVariants({
+        size,
+        variant,
+        align
+    });
+    const itemState = api.getItemState(itemProps);
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemDescription({
+            className
+        }),
+        "data-disabled": itemState.disabled || void 0,
+        "data-state": itemState.checked ? "checked" : "unchecked",
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+RadioCard.ItemIndicator = function({ className, ref, ...props }) {
+    const { api, size, variant } = useRadioCardContext();
+    const { itemProps } = useRadioCardItemContext();
+    const styles = radioCardVariants({
+        size,
+        variant
+    });
+    const itemState = api.getItemState(itemProps);
+    return /*#__PURE__*/ jsx("span", {
+        "aria-hidden": "true",
+        className: styles.itemIndicator(),
+        "data-disabled": itemState.disabled || void 0,
+        "data-state": itemState.checked ? "checked" : "unchecked",
+        ref: ref,
+        ...props,
+        children: /*#__PURE__*/ jsx("span", {
+            className: styles.itemIndicatorContent(),
+            "data-disabled": itemState.disabled || void 0,
+            "data-state": itemState.checked ? "checked" : "unchecked",
+            children: /*#__PURE__*/ jsx("span", {
+                className: styles.itemIndicatorMark({
+                    className
+                })
+            })
+        })
+    });
+};
+RadioCard.ItemAddon = function({ children, className, ref, ...props }) {
+    const { api, size, variant, align } = useRadioCardContext();
+    const { itemProps } = useRadioCardItemContext();
+    const styles = radioCardVariants({
+        size,
+        variant,
+        align
+    });
+    const itemState = api.getItemState(itemProps);
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemAddon({
+            className
+        }),
+        "data-disabled": itemState.disabled || void 0,
+        "data-state": itemState.checked ? "checked" : "unchecked",
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+RadioCard.StatusText = function({ status, size: sizeProp, showIcon, children, ...props }) {
+    const { size, validateStatus } = useRadioCardContext();
+    const effectiveSize = sizeProp ?? size;
+    const effectiveStatus = status ?? validateStatus;
+    return /*#__PURE__*/ jsx(StatusText, {
+        showIcon: showIcon ?? "default" !== effectiveStatus,
+        size: effectiveSize,
+        status: effectiveStatus,
+        ...props,
+        children: children
+    });
+};
+RadioCard.displayName = "RadioCard";
+export { RadioCard, radioCardVariants, useRadioCardContext };