@open-dy/vibecoding-sdk-taro 0.0.1-beta.5 → 0.0.1-beta.6

package/src/ui/theme.css

@@ -0,0 +1,234 @@
+/* stylelint-disable selector-type-no-unknown */
+/* stylelint-disable at-rule-no-unknown */
+/* stylelint-disable number-max-precision */
+
+:root,
+page,
+root-portal {
+  --background: lab(100% 0 0);
+  --foreground: lab(2.75381% 0 0);
+  --card: lab(100% 0 0);
+  --card-foreground: lab(2.75381% 0 0);
+  --popover: lab(100% 0 0);
+  --popover-foreground: lab(2.75381% 0 0);
+  --primary: #9333ea;
+  --primary-foreground: #ffffff;
+  --secondary: lab(96.52% -0.0000298023 0.0000119209);
+  --secondary-foreground: lab(7.78201% -0.0000149012 0);
+  --muted: lab(96.52% -0.0000298023 0.0000119209);
+  --muted-foreground: lab(48.496% 0 0);
+  --accent: lab(96.52% -0.0000298023 0.0000119209);
+  --accent-foreground: lab(7.78201% -0.0000149012 0);
+  --destructive: lab(48.4493% 77.4328 61.5452);
+  --destructive-foreground: lab(96.4152% 3.22586 1.14673);
+  --border: lab(90.952% 0 -0.0000119209);
+  --input: lab(90.952% 0 -0.0000119209);
+  --ring: lab(66.128% -0.0000298023 0.0000119209);
+  --sidebar: lab(98.26% 0 0);
+  --sidebar-foreground: lab(2.75381% 0 0);
+  --sidebar-primary: lab(7.78201% -0.0000149012 0);
+  --sidebar-primary-foreground: lab(98.26% 0 0);
+  --sidebar-accent: lab(96.52% -0.0000298023 0.0000119209);
+  --sidebar-accent-foreground: lab(7.78201% -0.0000149012 0);
+  --sidebar-border: lab(90.952% 0 -0.0000119209);
+  --sidebar-ring: lab(66.128% -0.0000298023 0.0000119209);
+  --surface: lab(97.68% -0.0000298023 0.0000119209);
+  --code: var(--surface);
+  --code-highlight: lab(95.36% 0 0);
+  --code-number: lab(48.96% 0 0);
+  --selection: lab(2.75381% 0 0);
+  --selection-foreground: lab(100% 0 0);
+  --chart-1: #6366f1;
+  --chart-2: #22c55e;
+  --chart-3: #eab308;
+  --chart-4: #a855f7;
+  --chart-5: #ec4899;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-color: initial;
+  --tw-shadow-alpha: 100%;
+  --tw-inset-shadow: 0 0 #0000;
+  --tw-inset-shadow-color: initial;
+  --tw-inset-shadow-alpha: 100%;
+  --tw-ring-color: initial;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-inset-ring-color: initial;
+  --tw-inset-ring-shadow: 0 0 #0000;
+  --tw-ring-inset: initial;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-offset-shadow: 0 0 #0000;
+}
+
+.dark {
+  --background: lab(2.75381% 0 0);
+  --foreground: lab(98.26% 0 0);
+  --card: lab(7.78201% -0.0000149012 0);
+  --card-foreground: lab(98.26% 0 0);
+  --popover: lab(7.78201% -0.0000149012 0);
+  --popover-foreground: lab(98.26% 0 0);
+  --primary: lab(90.952% 0 -0.0000119209);
+  --primary-foreground: lab(7.78201% -0.0000149012 0);
+  --secondary: lab(15.204% 0 -0.00000596046);
+  --secondary-foreground: lab(98.26% 0 0);
+  --muted: lab(15.204% 0 -0.00000596046);
+  --muted-foreground: lab(66.128% -0.0000298023 0.0000119209);
+  --accent: lab(27.036% 0 0);
+  --accent-foreground: lab(98.26% 0 0);
+  --destructive: lab(63.7053% 60.745 31.3109);
+  --destructive-foreground: lab(49.0747% 69.3434 49.6251);
+  --border: lab(100% 0 0 / 10%);
+  --input: lab(100% 0 0 / 15%);
+  --ring: lab(48.496% 0 0);
+  --sidebar: lab(7.78201% -0.0000149012 0);
+  --sidebar-foreground: lab(98.26% 0 0);
+  --sidebar-primary: lab(36.9089% 35.0961 -85.6872);
+  --sidebar-primary-foreground: lab(98.26% 0 0);
+  --sidebar-accent: lab(15.204% 0 -0.00000596046);
+  --sidebar-accent-foreground: lab(98.26% 0 0);
+  --sidebar-border: lab(100% 0 0 / 10%);
+  --sidebar-ring: lab(34.924% 0 0);
+  --surface: lab(7.22637% -0.0000149012 0);
+  --surface-foreground: lab(66.128% -0.0000298023 0.0000119209);
+  --code: var(--surface);
+  --code-highlight: lab(15.32% 0 0);
+  --code-number: lab(67.52% -0.0000298023 0);
+  --selection: lab(90.952% 0 -0.0000119209);
+  --selection-foreground: lab(7.78201% -0.0000149012 0);
+  --chart-1: #818cf8;
+  --chart-2: #4ade80;
+  --chart-3: #facc15;
+  --chart-4: #c084fc;
+  --chart-5: #f472b6;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+  --color-code: var(--code);
+  --radius-full: 9999px;
+}
+
+::selection {
+  background-color: var(--selection);
+  color: var(--selection-foreground);
+}
+
+/* ============================================================================
+   H5 端 Taro Image / 图标居中修复
+   根因：weapp-tailwindcss 会裁掉 taro-image-core 元素选择器，只能用类选择器。
+   img 渲染为 position:absolute（Taro H5 内部行为），父容器 taro-image-core 为
+   position:relative。使用 top/left + translate 实现无论父容器 display 类型如何
+   都能精确居中。（小程序端不受影响）
+   ============================================================================ */
+
+/* aspectFit 模式（@open-dy/lucide-taro 图标默认使用此模式）
+   用 img.taro-img__mode-aspectfit（specificity 0,1,1）覆盖 Taro 内置 CSS
+   （specificity 0,1,0）的 top:50% + transform:translate(-50%,-50%)。
+   inset:0 + margin:auto 填满 taro-image-core，transform:none 清除残留 translate。
+   彻底消除：
+   - text-center 父容器导致的图标偏右问题
+   - inline-block baseline 导致的垂直偏移                                */
+img.taro-img__mode-aspectfit {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  object-fit: contain;
+  transform: none;
+}
+
+/* aspectFill 模式：填满容器，保持比例裁剪 */
+.taro-img__mode-aspectfill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* scaleToFill 模式 */
+.taro-img__mode-scaletofill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+}
+
+/* widthFix 模式 */
+.taro-img__mode-widthfix {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/* ============================================================================
+   Canvas 小游戏一屏布局工具
+   - 页面根容器禁止出现纵向滚动条，所有 HUD/按钮/画布都在一屏内完成。
+   - 如果页面处在 Taro tabBar 面板内，使用父容器已计算好的 h-full。
+   - overlay 默认透传事件，只让按钮/弹窗等交互区域显式接管事件。
+   ============================================================================ */
+.game-one-screen {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-height: 100vh;
+  overflow: hidden;
+}
+
+.taro-tabbar__panel .game-one-screen {
+  height: 100%;
+  max-height: 100%;
+}
+
+.game-stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.game-canvas-fill {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.game-overlay-pass-through {
+  pointer-events: none;
+}
+
+.game-overlay-interactive {
+  pointer-events: auto;
+}

package/src/ui/toggle-group.tsx

@@ -0,0 +1,215 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { collectDataIconState } from "./helpers"
+import { toggleVariants } from "./toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+    disabled?: boolean
+    value: string[]
+    toggle: (value: string) => void
+    type: "single" | "multiple"
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal",
+  disabled: false,
+  value: [],
+  toggle: () => {},
+  type: "single",
+})
+
+/**
+ * @desc 切换按钮组组件。
+ * @param {Parameters<typeof ToggleGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof ToggleGroup>[0]["variant"]} props.variant 整组的样式变体；未提供时各项默认 default。提供非空值时优先于 ToggleGroupItem.variant。
+ * @param {Parameters<typeof ToggleGroup>[0]["size"]} props.size 整组的尺寸；未提供时各项默认 default。提供非空值时优先于 ToggleGroupItem.size。
+ * @return {ReturnType<typeof ToggleGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ToggleGroup } from '@open-dy/vibecoding-sdk-taro/ui/toggle-group'
+ * <ToggleGroup />
+ * ```
+ */
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  type = "single",
+  multiple = false,
+  disabled = false,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  children,
+  ...props
+}: ViewProps &
+  VariantProps<typeof toggleVariants> & {
+    /** @desc 项目间隔的 Tailwind spacing 单位，默认 0；0 时显示相连的按钮边框和圆角，不是直接的像素值。 */
+    spacing?: number
+    /** @desc 按钮组排列方向：horizontal 横排、vertical 竖排，默认 horizontal；决定相连边框和首尾圆角。 */
+    orientation?: "horizontal" | "vertical"
+    /** @desc 选择模式：single 单选、multiple 多选，默认 single；multiple 为 true 时强制多选。 */
+    type?: "single" | "multiple"
+    /** @desc 多选快捷开关，默认 false；为 true 时优先于 type，允许同时选中多项。 */
+    multiple?: boolean
+    /** @desc 是否禁止整组切换，默认 false；禁用后各项不能通过内部操作改变选中状态。 */
+    disabled?: boolean
+    /** @desc 受控选中项；字符串表示单项，数组表示多项。传入后需在 onValueChange 中同步，省略时由内部状态管理。 */
+    value?: string | string[]
+    /** @desc 非受控模式的初始选中项；默认无选中项，字符串表示单项、数组表示多项。仅初始化时读取，传入 value 后不生效。 */
+    defaultValue?: string | string[]
+    /** @desc 用户切换选中项时调用；单选返回字符串（取消后为空字符串），多选返回字符串数组（清空后为空数组）。 */
+    onValueChange?: (value: string | string[]) => void
+  }) {
+  const normalizeValue = React.useCallback((nextValue?: string | string[]) => {
+    if (nextValue === undefined) return []
+    return Array.isArray(nextValue) ? nextValue : nextValue ? [nextValue] : []
+  }, [])
+
+  const [internal, setInternal] = React.useState<string[]>(() => normalizeValue(defaultValue))
+  const controlled = valueProp !== undefined
+  const value = controlled ? normalizeValue(valueProp) : internal
+  const isMultiple = multiple || type === "multiple"
+  const resolvedType = isMultiple ? "multiple" : "single"
+
+  const toggle = React.useCallback(
+    (itemValue: string) => {
+      if (disabled) return
+
+      let next: string[]
+      if (isMultiple) {
+        next = value.includes(itemValue)
+          ? value.filter((v) => v !== itemValue)
+          : [...value, itemValue]
+      } else {
+        next = value.includes(itemValue) ? [] : [itemValue]
+      }
+      if (!controlled) setInternal(next)
+      onValueChange?.(isMultiple ? next : next[0] ?? "")
+    },
+    [value, isMultiple, controlled, onValueChange, disabled]
+  )
+
+  return (
+    <View
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      aria-disabled={disabled}
+      data-disabled={disabled ? "" : undefined}
+      style={{ "--gap": String(spacing) } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg",
+        size === "sm" && "rounded-[min(var(--radius-md),10px)]",
+        orientation === "vertical" && "flex-col items-stretch",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation, disabled, value, toggle, type: resolvedType }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </View>
+  )
+}
+
+/**
+ * @desc 切换按钮组条目。
+ * @param {Parameters<typeof ToggleGroupItem>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof ToggleGroupItem>[0]["variant"]} props.variant 当前按钮的外观，默认 default；父 ToggleGroup.variant 为非空值时优先使用父配置。
+ * @param {Parameters<typeof ToggleGroupItem>[0]["size"]} props.size 当前按钮的尺寸，默认 default；父 ToggleGroup.size 为非空值时优先使用父配置。
+ * @return {ReturnType<typeof ToggleGroupItem>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ToggleGroup, ToggleGroupItem } from '@open-dy/vibecoding-sdk-taro/ui/toggle-group'
+ * <ToggleGroup><ToggleGroupItem value="one" /></ToggleGroup>
+ * ```
+ */
+function ToggleGroupItem({
+  className,
+  children,
+  value,
+  variant = "default",
+  size = "default",
+  disabled = false,
+  ...props
+}: ViewProps &
+  VariantProps<typeof toggleVariants> & {
+    /** @desc 当前项目的唯一标识；必须与父组件的 value/defaultValue 对应，不同项目使用不同值。 */
+    value: string
+    /** @desc 是否禁用当前项目，默认 false；禁用后不执行内部切换。父组件禁用时此项也不可操作。 */
+    disabled?: boolean
+  }) {
+  const context = React.useContext(ToggleGroupContext)
+  const pressed = context.value.includes(value)
+  const isDisabled = context.disabled || disabled
+  const { onClick, ...restProps } = props
+  const resolvedVariant = context.variant || variant
+  const resolvedSize = context.size || size
+  const isConnected = (context.spacing ?? 0) === 0
+  const isHorizontal = context.orientation !== "vertical"
+  const { hasInlineStartIcon, hasInlineEndIcon } = React.useMemo(
+    () => collectDataIconState(children),
+    [children]
+  )
+
+  return (
+    <View
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      aria-pressed={pressed}
+      aria-disabled={isDisabled}
+      data-state={pressed ? "on" : "off"}
+      data-disabled={isDisabled ? "" : undefined}
+      className={cn(
+        "shrink-0 focus:z-10 focus-visible:z-10",
+        isConnected && "rounded-none px-2",
+        isConnected && hasInlineStartIcon && "pl-1.5",
+        isConnected && hasInlineEndIcon && "pr-1.5",
+        isConnected && isHorizontal && "first:rounded-l-lg last:rounded-r-lg",
+        isConnected && !isHorizontal && "first:rounded-t-lg last:rounded-b-lg",
+        isConnected &&
+          isHorizontal &&
+          resolvedVariant === "outline" &&
+          "border-l-0 first:border-l",
+        isConnected &&
+          !isHorizontal &&
+          resolvedVariant === "outline" &&
+          "border-t-0 first:border-t",
+        toggleVariants({
+          variant: resolvedVariant,
+          size: resolvedSize,
+        }),
+        pressed && "bg-muted",
+        isDisabled && "pointer-events-none opacity-50",
+        className
+      )}
+      onClick={(event) => {
+        if (isDisabled) return
+        context.toggle(value)
+        onClick?.(event)
+      }}
+      {...restProps}
+    >
+      {children}
+    </View>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/ui/toggle.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { collectDataIconState } from "./helpers"
+
+/**
+ * @desc 生成切换按钮的样式类名；接受其声明的样式变体。
+ * @param {Parameters<typeof toggleVariants>[0]} props 样式变体以及附加的 class 或 className。
+ * @param {Parameters<typeof toggleVariants>[0]["variant"]} props.variant 外观，默认 default（透明背景），outline 增加描边；按下时另加选中背景。
+ * @param {Parameters<typeof toggleVariants>[0]["size"]} props.size 尺寸，默认 default（h-8/min-w-8），sm 为 h-7/min-w-7，lg 为 h-9/min-w-9。
+ * @return {string} 合并后的样式类名。
+ * @example
+ * ```tsx
+ * import { toggleVariants } from '@open-dy/vibecoding-sdk-taro/ui/toggle'
+ * toggleVariants()
+ * ```
+ */
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default: "h-8 min-w-8 px-2.5",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 min-w-9 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+/**
+ * @desc 切换按钮组件。
+ * @param {Parameters<typeof Toggle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof Toggle>[0]["variant"]} props.variant 外观，默认 default（透明背景），outline 增加描边；按下时另加选中背景。
+ * @param {Parameters<typeof Toggle>[0]["size"]} props.size 尺寸，默认 default（h-8/min-w-8），sm 为 h-7/min-w-7，lg 为 h-9/min-w-9。
+ * @return {ReturnType<typeof Toggle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Toggle } from '@open-dy/vibecoding-sdk-taro/ui/toggle'
+ * <Toggle />
+ * ```
+ */
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  pressed: pressedProp,
+  defaultPressed,
+  onPressedChange,
+  disabled = false,
+  children,
+  ...props
+}: ViewProps &
+  VariantProps<typeof toggleVariants> & {
+    /** @desc 受控按下状态；传入后以该值为准，需在 onPressedChange 中更新。省略时由内部状态管理。 */
+    pressed?: boolean
+    /** @desc 非受控模式的初始按下状态，默认 false；仅初始化时读取，传入 pressed 后不生效。 */
+    defaultPressed?: boolean
+    /** @desc 用户点击切换时调用，参数为下一按下状态；禁用时不触发，受控模式需同步 pressed。 */
+    onPressedChange?: (pressed: boolean) => void
+    /** @desc 是否禁止按下状态切换，默认 false；为 true 时不执行内部切换和点击回调。 */
+    disabled?: boolean
+  }) {
+  const [internalPressed, setInternalPressed] = React.useState(defaultPressed ?? false)
+  const isControlled = pressedProp !== undefined
+  const pressed = isControlled ? pressedProp : internalPressed
+  const { onClick, ...restProps } = props
+  const { hasInlineStartIcon, hasInlineEndIcon } = React.useMemo(
+    () => collectDataIconState(children),
+    [children]
+  )
+
+  return (
+    <View
+      data-slot="toggle"
+      aria-pressed={pressed}
+      aria-disabled={disabled}
+      data-state={pressed ? "on" : "off"}
+      data-disabled={disabled ? "" : undefined}
+      className={cn(
+        toggleVariants({ variant, size }),
+        pressed && "bg-muted",
+        hasInlineStartIcon && (size === "sm" ? "pl-1.5" : "pl-2"),
+        hasInlineEndIcon && (size === "sm" ? "pr-1.5" : "pr-2"),
+        disabled && "pointer-events-none opacity-50"
+        ,
+        className
+      )}
+      onClick={(event) => {
+        if (disabled) return
+        const next = !pressed
+        if (!isControlled) setInternalPressed(next)
+        onPressedChange?.(next)
+        onClick?.(event)
+      }}
+      {...restProps}
+    >
+      {children}
+    </View>
+  )
+}
+
+export { Toggle, toggleVariants }