@choice-ui/react 1.3.10

package/dist/esm/components/stackflow/src/stackflow.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, Children, isValidElement, Fragment } from "react";
+import { StackflowContext } from "./context.js";
+import { stackflowTv } from "./tv.js";
+import { useStackflow } from "./hooks/use-stackflow.js";
+import { StackflowPrefix } from "./components/stackflow-prefix.js";
+import { StackflowSuffix } from "./components/stackflow-suffix.js";
+import { StackflowItem } from "./components/stackflow-item.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const StackflowRoot = forwardRef(function Stackflow(props, ref) {
+  const { children, className, defaultId, initialId, ...rest } = props;
+  const [items, setItems] = useState([]);
+  const registerItem = useCallback((id, content) => {
+    setItems((prev) => {
+      const exists = prev.find((item) => item.id === id);
+      if (exists) {
+        return prev.map((item) => item.id === id ? { ...item, content } : item);
+      } else {
+        return [...prev, { id, content }];
+      }
+    });
+  }, []);
+  const controls = useStackflow(items, defaultId || initialId);
+  const tv = stackflowTv();
+  const processChildren = (children2) => {
+    const prefixElements2 = [];
+    const suffixElements2 = [];
+    const itemElements2 = [];
+    const processChild = (child) => {
+      if (!isValidElement(child)) return;
+      if (child.type === Fragment) {
+        const fragmentResult = processChildren(child.props.children);
+        prefixElements2.push(...fragmentResult.prefixElements);
+        suffixElements2.push(...fragmentResult.suffixElements);
+        itemElements2.push(...fragmentResult.itemElements);
+      } else if (child.type === StackflowPrefix) {
+        prefixElements2.push(child);
+      } else if (child.type === StackflowSuffix) {
+        suffixElements2.push(child);
+      } else if (child.type === StackflowItem) {
+        itemElements2.push(child);
+      }
+    };
+    Children.forEach(children2, processChild);
+    return { prefixElements: prefixElements2, suffixElements: suffixElements2, itemElements: itemElements2 };
+  };
+  const { prefixElements, suffixElements, itemElements } = processChildren(children);
+  return /* @__PURE__ */ jsx(
+    StackflowContext.Provider,
+    {
+      value: {
+        ...controls,
+        registerItem
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: tcx(tv.root(), className),
+          ...rest,
+          children: [
+            prefixElements,
+            /* @__PURE__ */ jsx("div", { className: tv.content(), children: itemElements }),
+            suffixElements
+          ]
+        }
+      )
+    }
+  );
+});
+StackflowRoot.displayName = "Stackflow";
+const Stackflow2 = StackflowRoot;
+Stackflow2.Item = StackflowItem;
+Stackflow2.Prefix = StackflowPrefix;
+Stackflow2.Suffix = StackflowSuffix;
+export {
+  Stackflow2 as Stackflow
+};

package/dist/esm/components/stackflow/src/tv.js

@@ -0,0 +1,42 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const stackflowTv = tcv({
+  slots: {
+    root: [
+      // Layout
+      "relative flex flex-col",
+      // Shape
+      "overflow-hidden"
+    ],
+    prefix: [
+      // Layout
+      "relative z-2"
+    ],
+    content: [
+      // Layout
+      "relative flex-1",
+      // Shape
+      "overflow-hidden"
+    ],
+    item: [
+      // Visibility
+      "opacity-0"
+    ],
+    suffix: [
+      // Layout
+      "relative z-2"
+    ]
+  },
+  variants: {
+    active: {
+      true: {
+        item: "opacity-100"
+      }
+    }
+  },
+  defaultVariants: {
+    active: false
+  }
+});
+export {
+  stackflowTv
+};

package/dist/esm/components/switch/dist/index.js

@@ -0,0 +1,322 @@
+import { motion } from "framer-motion";
+import { memo, forwardRef, useId } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
+var switchTv = tcv({
+  slots: {
+    root: ["relative flex items-center gap-2 flex-shrink-0", "select-none"],
+    track: [
+      "relative flex-shrink-0",
+      "rounded-full",
+      "border border-solid",
+      "h-(--switch-height) w-(--switch-width)"
+    ],
+    thumb: [
+      "absolute",
+      "rounded-full",
+      "h-(--thumb-height) w-(--thumb-width)",
+      "top-(--thumb-margin) left-(--thumb-margin)"
+    ],
+    input: [
+      "peer pointer-events-auto appearance-none",
+      "absolute inset-0 cursor-default opacity-0"
+    ]
+  },
+  variants: {
+    size: {
+      small: {},
+      medium: {}
+    },
+    variant: {
+      default: {},
+      accent: {},
+      outline: {}
+    },
+    checked: {
+      true: {},
+      false: {}
+    },
+    disabled: {
+      true: {
+        root: "text-secondary-foreground",
+        track: "bg-disabled-background border-transparent",
+        thumb: "bg-white"
+      },
+      false: {
+        root: "text-default-foreground"
+      }
+    },
+    focused: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    // Base states - 未选中
+    {
+      checked: false,
+      disabled: false,
+      focused: false,
+      variant: ["default", "accent"],
+      class: {
+        track: "bg-tertiary-background border-transparent",
+        thumb: "shadow-sm bg-white"
+      }
+    },
+    {
+      variant: "outline",
+      checked: false,
+      disabled: false,
+      focused: false,
+      class: {
+        track: "border-default-foreground bg-transparent",
+        thumb: "bg-default-foreground shadow-none"
+      }
+    },
+    // Base states - 选中
+    {
+      variant: ["default", "outline"],
+      checked: true,
+      disabled: false,
+      focused: false,
+      class: {
+        track: "bg-default-foreground border-transparent",
+        thumb: "shadow-sm bg-default-background"
+      }
+    },
+    {
+      variant: "accent",
+      checked: true,
+      disabled: false,
+      focused: false,
+      class: {
+        track: "bg-accent-background border-transparent",
+        thumb: "shadow-sm bg-white"
+      }
+    },
+    // Hover states - 未选中
+    {
+      variant: ["default", "accent"],
+      checked: false,
+      disabled: false,
+      focused: false,
+      class: {
+        track: "hover:bg-tertiary-background"
+      }
+    },
+    {
+      variant: "outline",
+      checked: false,
+      disabled: false,
+      focused: false,
+      class: {
+        track: "hover:bg-secondary-background"
+      }
+    },
+    // Focused states - 未选中
+    {
+      focused: true,
+      checked: false,
+      disabled: false,
+      variant: ["default", "accent"],
+      class: {
+        track: "bg-tertiary-background border-selected-boundary",
+        thumb: "shadow-none bg-white"
+      }
+    },
+    {
+      focused: true,
+      checked: false,
+      disabled: false,
+      variant: "outline",
+      class: {
+        track: "border-selected-boundary bg-transparent",
+        thumb: "bg-default-foreground shadow-none"
+      }
+    },
+    // Focused states - 选中
+    {
+      focused: true,
+      checked: true,
+      disabled: false,
+      variant: ["default", "outline"],
+      class: {
+        track: "border-selected-boundary shadow-switch-focused",
+        thumb: "shadow-border-white-inset bg-default-background"
+      }
+    },
+    {
+      focused: true,
+      checked: true,
+      disabled: false,
+      variant: "accent",
+      class: {
+        track: "bg-accent-background border-selected-boundary shadow-checked-focused",
+        thumb: "shadow-border-white-inset bg-white"
+      }
+    },
+    // Focus-visible states (keyboard focus) - 未选中
+    {
+      focused: false,
+      checked: false,
+      disabled: false,
+      variant: ["default", "accent", "outline"],
+      class: {
+        track: "peer-focus-visible:border-selected-boundary",
+        thumb: "peer-focus-visible:shadow-none"
+      }
+    },
+    // Focus-visible states (keyboard focus) - 选中
+    {
+      focused: false,
+      checked: true,
+      disabled: false,
+      variant: ["default", "outline"],
+      class: {
+        track: [
+          "peer-focus-visible:border-selected-boundary",
+          "peer-focus-visible:shadow-switch-focused"
+        ],
+        thumb: "peer-focus-visible:shadow-border-white-inset"
+      }
+    },
+    {
+      focused: false,
+      checked: true,
+      disabled: false,
+      variant: "accent",
+      class: {
+        track: [
+          "peer-focus-visible:border-selected-boundary",
+          "peer-focus-visible:shadow-checked-focused"
+        ],
+        thumb: "peer-focus-visible:shadow-border-white-inset"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "medium",
+    variant: "default",
+    checked: false,
+    disabled: false,
+    focused: false
+  }
+});
+var SwitchLabel = memo(function SwitchLabel2({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className, children });
+});
+SwitchLabel.displayName = "Switch.Label";
+var switch_sizes = {
+  small: {
+    style: {
+      "--switch-height": "12px",
+      "--thumb-height": "9px",
+      "--thumb-width": "14px",
+      "--thumb-margin": "0.5px",
+      "--switch-width": "26px"
+    }
+  },
+  medium: {
+    style: {
+      "--switch-height": "16px",
+      "--thumb-height": "13px",
+      "--thumb-width": "21px",
+      "--thumb-margin": "0.5px",
+      "--switch-width": "36px"
+    }
+  }
+};
+var SwitchBase = forwardRef(function Switch(props, ref) {
+  const {
+    value,
+    onChange,
+    label,
+    children,
+    disabled,
+    readOnly = false,
+    size = "medium",
+    variant = "default",
+    className,
+    focused,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    ...rest
+  } = props;
+  const internalId = useId();
+  const descriptionId = useId();
+  const styles = switchTv({ size, variant, disabled, checked: value, focused });
+  const style = {
+    "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - var(--thumb-margin) * 4 - 1px)",
+    ...switch_sizes[size].style
+  };
+  const renderLabel = () => {
+    if (children) {
+      if (typeof children === "string" || typeof children === "number") {
+        return /* @__PURE__ */ jsx("span", { id: descriptionId, children: /* @__PURE__ */ jsx(SwitchLabel, { children }) });
+      }
+      return /* @__PURE__ */ jsx("span", { id: descriptionId, children });
+    }
+    if (label) {
+      return /* @__PURE__ */ jsx("span", { id: descriptionId, children: label });
+    }
+    return null;
+  };
+  const labelContent = renderLabel();
+  const hasLabel = children || label;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: tcx(styles.root(), className),
+      htmlFor: props.id || internalId,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: value ? "Enabled" : "Disabled" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            className: styles.input(),
+            type: "checkbox",
+            id: props.id || internalId,
+            checked: value,
+            disabled: disabled || readOnly,
+            onChange: (e) => {
+              if (readOnly) return;
+              onChange(e.target.checked);
+            },
+            "aria-label": ariaLabel || (typeof children === "string" ? children : label == null ? void 0 : label.toString()),
+            "aria-describedby": ariaDescribedby || (hasLabel ? descriptionId : void 0),
+            "aria-checked": value,
+            "aria-disabled": disabled || readOnly,
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.track(),
+            style,
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: styles.thumb(),
+                initial: false,
+                animate: { x: value ? "var(--thumb-translate)" : 0 },
+                transition: { duration: 0.1 },
+                "aria-hidden": "true"
+              }
+            )
+          }
+        ),
+        labelContent
+      ]
+    }
+  );
+});
+var MemoizedSwitch = memo(SwitchBase);
+var Switch2 = MemoizedSwitch;
+Switch2.Label = SwitchLabel;
+Switch2.displayName = "Switch";
+export {
+  Switch2 as Switch,
+  SwitchLabel
+};

package/dist/esm/components/switch/src/switch.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { memo, forwardRef, useId } from "react";
+import { switchTv } from "./tv.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const SwitchLabel = memo(function SwitchLabel2({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className, children });
+});
+SwitchLabel.displayName = "Switch.Label";
+const switch_sizes = {
+  small: {
+    style: {
+      "--switch-height": "12px",
+      "--thumb-height": "9px",
+      "--thumb-width": "14px",
+      "--thumb-margin": "0.5px",
+      "--switch-width": "26px"
+    }
+  },
+  medium: {
+    style: {
+      "--switch-height": "16px",
+      "--thumb-height": "13px",
+      "--thumb-width": "21px",
+      "--thumb-margin": "0.5px",
+      "--switch-width": "36px"
+    }
+  }
+};
+const SwitchBase = forwardRef(function Switch2(props, ref) {
+  const {
+    value,
+    onChange,
+    label,
+    children,
+    disabled,
+    readOnly = false,
+    size = "medium",
+    variant = "default",
+    className,
+    focused,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    ...rest
+  } = props;
+  const internalId = useId();
+  const descriptionId = useId();
+  const styles = switchTv({ size, variant, disabled, checked: value, focused });
+  const style = {
+    "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - var(--thumb-margin) * 4 - 1px)",
+    ...switch_sizes[size].style
+  };
+  const renderLabel = () => {
+    if (children) {
+      if (typeof children === "string" || typeof children === "number") {
+        return /* @__PURE__ */ jsx("span", { id: descriptionId, children: /* @__PURE__ */ jsx(SwitchLabel, { children }) });
+      }
+      return /* @__PURE__ */ jsx("span", { id: descriptionId, children });
+    }
+    if (label) {
+      return /* @__PURE__ */ jsx("span", { id: descriptionId, children: label });
+    }
+    return null;
+  };
+  const labelContent = renderLabel();
+  const hasLabel = children || label;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: tcx(styles.root(), className),
+      htmlFor: props.id || internalId,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: value ? "Enabled" : "Disabled" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            className: styles.input(),
+            type: "checkbox",
+            id: props.id || internalId,
+            checked: value,
+            disabled: disabled || readOnly,
+            onChange: (e) => {
+              if (readOnly) return;
+              onChange(e.target.checked);
+            },
+            "aria-label": ariaLabel || (typeof children === "string" ? children : label == null ? void 0 : label.toString()),
+            "aria-describedby": ariaDescribedby || (hasLabel ? descriptionId : void 0),
+            "aria-checked": value,
+            "aria-disabled": disabled || readOnly,
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.track(),
+            style,
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: styles.thumb(),
+                initial: false,
+                animate: { x: value ? "var(--thumb-translate)" : 0 },
+                transition: { duration: 0.1 },
+                "aria-hidden": "true"
+              }
+            )
+          }
+        ),
+        labelContent
+      ]
+    }
+  );
+});
+const MemoizedSwitch = memo(SwitchBase);
+const Switch = MemoizedSwitch;
+Switch.Label = SwitchLabel;
+Switch.displayName = "Switch";
+export {
+  Switch,
+  SwitchLabel
+};