@rockshin/tao-ui 0.0.1

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,34 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+import { type TaoSize } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './radio.css';
+export type RadioSemanticPart = 'root' | 'indicator' | 'label';
+export interface RadioProps {
+    value?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    children?: ReactNode;
+    name?: string;
+    classNames?: SemanticClassNames<RadioSemanticPart>;
+    styles?: SemanticStyles<RadioSemanticPart>;
+}
+export declare function Radio({ value, checked, disabled, onChange, children, name, classNames, styles, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export type RadioOptionType = {
+    label: ReactNode;
+    value: string;
+    disabled?: boolean;
+} | string;
+export interface RadioGroupProps {
+    options?: RadioOptionType[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    size?: TaoSize;
+    direction?: 'horizontal' | 'vertical';
+    name?: string;
+    children?: ReactNode;
+}
+export declare function RadioGroup({ options, value, onChange, disabled, direction, name, children, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/radio/radio.js

@@ -0,0 +1,215 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import "./radio.css";
+const RadioGroupContext = /*#__PURE__*/ createContext(null);
+function Radio(t0) {
+    const $ = c(29);
+    const { value, checked, disabled, onChange, children, name, classNames, styles } = t0;
+    const ctx = useTaoConfig();
+    const groupCtx = useContext(RadioGroupContext);
+    const resolvedDisabled = disabled ?? groupCtx?.disabled ?? ctx.disabled ?? false;
+    const resolvedChecked = groupCtx ? groupCtx.value === value : checked;
+    const resolvedName = groupCtx?.name ?? name;
+    let t1;
+    if ($[0] !== groupCtx || $[1] !== onChange || $[2] !== value) {
+        t1 = (e)=>{
+            if (groupCtx && null != value) groupCtx.onChange(value);
+            else onChange?.(e);
+        };
+        $[0] = groupCtx;
+        $[1] = onChange;
+        $[2] = value;
+        $[3] = t1;
+    } else t1 = $[3];
+    const handleChange = t1;
+    const t2 = resolvedDisabled || void 0;
+    const t3 = classNames?.root;
+    let t4;
+    if ($[4] !== t3) {
+        t4 = cx(t3);
+        $[4] = t3;
+        $[5] = t4;
+    } else t4 = $[5];
+    const t5 = styles?.root;
+    let t6;
+    if ($[6] !== handleChange || $[7] !== resolvedChecked || $[8] !== resolvedDisabled || $[9] !== resolvedName || $[10] !== value) {
+        t6 = /*#__PURE__*/ jsx("input", {
+            type: "radio",
+            name: resolvedName,
+            value: value,
+            checked: resolvedChecked,
+            disabled: resolvedDisabled,
+            onChange: handleChange,
+            "data-tao-radio-input": ""
+        });
+        $[6] = handleChange;
+        $[7] = resolvedChecked;
+        $[8] = resolvedDisabled;
+        $[9] = resolvedName;
+        $[10] = value;
+        $[11] = t6;
+    } else t6 = $[11];
+    const t7 = resolvedChecked || void 0;
+    const t8 = classNames?.indicator;
+    let t9;
+    if ($[12] !== t8) {
+        t9 = cx(t8);
+        $[12] = t8;
+        $[13] = t9;
+    } else t9 = $[13];
+    const t10 = styles?.indicator;
+    let t11;
+    if ($[14] !== t10 || $[15] !== t7 || $[16] !== t9) {
+        t11 = /*#__PURE__*/ jsx("span", {
+            "data-tao-radio": "",
+            "data-tao-checked": t7,
+            className: t9,
+            style: t10
+        });
+        $[14] = t10;
+        $[15] = t7;
+        $[16] = t9;
+        $[17] = t11;
+    } else t11 = $[17];
+    let t12;
+    if ($[18] !== children || $[19] !== classNames?.label || $[20] !== styles?.label) {
+        t12 = null != children && /*#__PURE__*/ jsx("span", {
+            "data-tao-radio-label": "",
+            className: cx(classNames?.label),
+            style: styles?.label,
+            children: children
+        });
+        $[18] = children;
+        $[19] = classNames?.label;
+        $[20] = styles?.label;
+        $[21] = t12;
+    } else t12 = $[21];
+    let t13;
+    if ($[22] !== t11 || $[23] !== t12 || $[24] !== t2 || $[25] !== t4 || $[26] !== t5 || $[27] !== t6) {
+        t13 = /*#__PURE__*/ jsxs("label", {
+            "data-tao-radio-wrapper": "",
+            "data-tao-disabled": t2,
+            className: t4,
+            style: t5,
+            children: [
+                t6,
+                t11,
+                t12
+            ]
+        });
+        $[22] = t11;
+        $[23] = t12;
+        $[24] = t2;
+        $[25] = t4;
+        $[26] = t5;
+        $[27] = t6;
+        $[28] = t13;
+    } else t13 = $[28];
+    return t13;
+}
+function RadioGroup(t0) {
+    const $ = c(26);
+    const { options, value, onChange, disabled, direction: t1, name, children } = t0;
+    const direction = void 0 === t1 ? "horizontal" : t1;
+    const ctx = useTaoConfig();
+    const resolvedDisabled = disabled ?? ctx.disabled ?? false;
+    let t2;
+    if ($[0] !== onChange) {
+        t2 = (itemValue)=>{
+            onChange?.(itemValue);
+        };
+        $[0] = onChange;
+        $[1] = t2;
+    } else t2 = $[1];
+    const handleChange = t2;
+    let t3;
+    if ($[2] !== handleChange || $[3] !== name || $[4] !== resolvedDisabled || $[5] !== value) {
+        t3 = {
+            name,
+            value,
+            disabled: resolvedDisabled,
+            onChange: handleChange
+        };
+        $[2] = handleChange;
+        $[3] = name;
+        $[4] = resolvedDisabled;
+        $[5] = value;
+        $[6] = t3;
+    } else t3 = $[6];
+    const groupCtxValue = t3;
+    let T0;
+    let t4;
+    let t5;
+    let t6;
+    let t7;
+    let t8;
+    if ($[7] !== children || $[8] !== direction || $[9] !== groupCtxValue || $[10] !== options) {
+        const normalizedOptions = options?.map(_temp);
+        T0 = RadioGroupContext.Provider;
+        t8 = groupCtxValue;
+        t4 = "";
+        t5 = direction;
+        t6 = "radiogroup";
+        t7 = normalizedOptions ? normalizedOptions.map(_temp2) : children;
+        $[7] = children;
+        $[8] = direction;
+        $[9] = groupCtxValue;
+        $[10] = options;
+        $[11] = T0;
+        $[12] = t4;
+        $[13] = t5;
+        $[14] = t6;
+        $[15] = t7;
+        $[16] = t8;
+    } else {
+        T0 = $[11];
+        t4 = $[12];
+        t5 = $[13];
+        t6 = $[14];
+        t7 = $[15];
+        t8 = $[16];
+    }
+    let t9;
+    if ($[17] !== t4 || $[18] !== t5 || $[19] !== t6 || $[20] !== t7) {
+        t9 = /*#__PURE__*/ jsx("div", {
+            "data-tao-radio-group": t4,
+            "data-tao-direction": t5,
+            role: t6,
+            children: t7
+        });
+        $[17] = t4;
+        $[18] = t5;
+        $[19] = t6;
+        $[20] = t7;
+        $[21] = t9;
+    } else t9 = $[21];
+    let t10;
+    if ($[22] !== T0 || $[23] !== t8 || $[24] !== t9) {
+        t10 = /*#__PURE__*/ jsx(T0, {
+            value: t8,
+            children: t9
+        });
+        $[22] = T0;
+        $[23] = t8;
+        $[24] = t9;
+        $[25] = t10;
+    } else t10 = $[25];
+    return t10;
+}
+function _temp2(opt_0) {
+    return /*#__PURE__*/ jsx(Radio, {
+        value: opt_0.value,
+        disabled: opt_0.disabled,
+        children: opt_0.label
+    }, opt_0.value);
+}
+function _temp(opt) {
+    return "string" == typeof opt ? {
+        label: opt,
+        value: opt
+    } : opt;
+}
+export { Radio, RadioGroup };