@rockshin/tao-ui 0.0.1

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './switch.css';
+export type SwitchSemanticPart = 'root' | 'handle';
+export interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    loading?: boolean;
+    size?: 'small' | 'medium';
+    checkedChildren?: ReactNode;
+    unCheckedChildren?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    classNames?: SemanticClassNames<SwitchSemanticPart>;
+    styles?: SemanticStyles<SwitchSemanticPart>;
+}
+export declare function Switch({ checked, onChange, disabled, loading, size, checkedChildren, unCheckedChildren, className, style, classNames, styles, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/switch/switch.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import "./switch.css";
+function Switch(t0) {
+    const $ = c(32);
+    const { checked, onChange, disabled, loading, size: t1, checkedChildren, unCheckedChildren, className, style, classNames, styles } = t0;
+    const size = void 0 === t1 ? "medium" : t1;
+    const ctx = useTaoConfig();
+    const resolvedDisabled = disabled ?? ctx.disabled ?? false;
+    const isDisabled = resolvedDisabled || loading;
+    const t2 = !!checked;
+    const t3 = classNames?.root;
+    let t4;
+    if ($[0] !== className || $[1] !== t3) {
+        t4 = cx(t3, className);
+        $[0] = className;
+        $[1] = t3;
+        $[2] = t4;
+    } else t4 = $[2];
+    const t5 = styles?.root;
+    let t6;
+    if ($[3] !== style || $[4] !== t5) {
+        t6 = {
+            ...t5,
+            ...style
+        };
+        $[3] = style;
+        $[4] = t5;
+        $[5] = t6;
+    } else t6 = $[5];
+    const t7 = checked || void 0;
+    let t8;
+    if ($[6] !== checked || $[7] !== onChange) {
+        t8 = ()=>onChange?.(!checked);
+        $[6] = checked;
+        $[7] = onChange;
+        $[8] = t8;
+    } else t8 = $[8];
+    const t9 = classNames?.handle;
+    const t10 = styles?.handle;
+    let t11;
+    if ($[9] !== loading) {
+        t11 = loading && /*#__PURE__*/ jsx(LoadingIcon, {});
+        $[9] = loading;
+        $[10] = t11;
+    } else t11 = $[10];
+    let t12;
+    if ($[11] !== t10 || $[12] !== t11 || $[13] !== t9) {
+        t12 = /*#__PURE__*/ jsx("div", {
+            className: t9,
+            style: t10,
+            "data-tao-switch-handle": "",
+            children: t11
+        });
+        $[11] = t10;
+        $[12] = t11;
+        $[13] = t9;
+        $[14] = t12;
+    } else t12 = $[14];
+    let t13;
+    if ($[15] !== checkedChildren) {
+        t13 = /*#__PURE__*/ jsx("span", {
+            "data-tao-switch-inner-checked": "",
+            children: checkedChildren
+        });
+        $[15] = checkedChildren;
+        $[16] = t13;
+    } else t13 = $[16];
+    let t14;
+    if ($[17] !== unCheckedChildren) {
+        t14 = /*#__PURE__*/ jsx("span", {
+            "data-tao-switch-inner-unchecked": "",
+            children: unCheckedChildren
+        });
+        $[17] = unCheckedChildren;
+        $[18] = t14;
+    } else t14 = $[18];
+    let t15;
+    if ($[19] !== t13 || $[20] !== t14) {
+        t15 = /*#__PURE__*/ jsxs("span", {
+            "data-tao-switch-inner": "",
+            children: [
+                t13,
+                t14
+            ]
+        });
+        $[19] = t13;
+        $[20] = t14;
+        $[21] = t15;
+    } else t15 = $[21];
+    let t16;
+    if ($[22] !== isDisabled || $[23] !== size || $[24] !== t12 || $[25] !== t15 || $[26] !== t2 || $[27] !== t4 || $[28] !== t6 || $[29] !== t7 || $[30] !== t8) {
+        t16 = /*#__PURE__*/ jsxs("button", {
+            type: "button",
+            role: "switch",
+            "aria-checked": t2,
+            disabled: isDisabled,
+            className: t4,
+            style: t6,
+            "data-tao-switch": "",
+            "data-tao-size": size,
+            "data-tao-checked": t7,
+            onClick: t8,
+            children: [
+                t12,
+                t15
+            ]
+        });
+        $[22] = isDisabled;
+        $[23] = size;
+        $[24] = t12;
+        $[25] = t15;
+        $[26] = t2;
+        $[27] = t4;
+        $[28] = t6;
+        $[29] = t7;
+        $[30] = t8;
+        $[31] = t16;
+    } else t16 = $[31];
+    return t16;
+}
+function LoadingIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            "data-tao-switch-loading": "",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M21 12a9 9 0 1 1-6.219-8.56"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+export { Switch };