@neut/ui 0.0.14 → 0.0.16

package/dist/components/toast/Toaster/Toaster.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.utils.js","names":[],"sources":["../../../../src/components/toast/Toaster/Toaster.utils.ts"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport type { Position, SwipeDirection } from \"../Toast/Toast.types\";\nimport type { Offset } from \"./Toaster.types\";\n\nconst VIEWPORT_OFFSET = \"24px\";\nconst MOBILE_VIEWPORT_OFFSET = \"16px\";\n\nexport function getPositionClass(position: Position): string {\n  switch (position) {\n    case \"top-left\":\n      return \"top-0 left-0\";\n    case \"top-right\":\n      return \"top-0 right-0\";\n    case \"top-center\":\n      return \"top-0 left-1/2 -translate-x-1/2\";\n    case \"bottom-left\":\n      return \"bottom-0 left-0\";\n    case \"bottom-right\":\n      return \"bottom-0 right-0\";\n    case \"bottom-center\":\n      return \"bottom-0 left-1/2 -translate-x-1/2\";\n  }\n}\n\nfunction toPx(value: string | number): string {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport function resolveOffsetStyle(\n  position: Position,\n  offset?: Offset,\n  mobileOffset?: Offset,\n): JSX.CSSProperties {\n  const style: JSX.CSSProperties = {};\n  const [y, x] = position.split(\"-\");\n\n  const normalize = (value: Offset | undefined, fallback: string) =>\n    typeof value === \"object\" && value !== null\n      ? value\n      : {\n          top: value ?? fallback,\n          right: value ?? fallback,\n          bottom: value ?? fallback,\n          left: value ?? fallback,\n        };\n\n  const desktop = normalize(offset, VIEWPORT_OFFSET);\n  const mobile = normalize(mobileOffset, MOBILE_VIEWPORT_OFFSET);\n\n  if (y === \"top\") {\n    style.top = toPx(desktop.top ?? VIEWPORT_OFFSET);\n    style[\"--mobile-offset-top\"] = toPx(mobile.top ?? MOBILE_VIEWPORT_OFFSET);\n  } else {\n    style.bottom = toPx(desktop.bottom ?? VIEWPORT_OFFSET);\n    style[\"--mobile-offset-bottom\"] = toPx(\n      mobile.bottom ?? MOBILE_VIEWPORT_OFFSET,\n    );\n  }\n\n  if (x === \"left\") {\n    style.left = toPx(desktop.left ?? VIEWPORT_OFFSET);\n    style[\"--mobile-offset-left\"] = toPx(mobile.left ?? MOBILE_VIEWPORT_OFFSET);\n  } else if (x === \"right\") {\n    style.right = toPx(desktop.right ?? VIEWPORT_OFFSET);\n    style[\"--mobile-offset-right\"] = toPx(\n      mobile.right ?? MOBILE_VIEWPORT_OFFSET,\n    );\n  }\n\n  return style;\n}\n\nexport function getDefaultSwipeDirections(\n  position: Position,\n): SwipeDirection[] {\n  const [y, x] = position.split(\"-\");\n  const directions: SwipeDirection[] = [];\n  if (y) directions.push(y as SwipeDirection);\n  if (x) directions.push(x as SwipeDirection);\n  return directions;\n}\n\nexport function getDocumentDirection(): \"rtl\" | \"ltr\" | \"auto\" {\n  if (typeof document === \"undefined\") return \"ltr\";\n  const dir = document.documentElement.getAttribute(\"dir\");\n  if (dir === \"auto\" || !dir) {\n    return getComputedStyle(document.documentElement).direction as\n      | \"rtl\"\n      | \"ltr\"\n      | \"auto\";\n  }\n  return dir as \"rtl\" | \"ltr\" | \"auto\";\n}\n"],"mappings":";AAIA,IAAM,IAAkB,QAClB,IAAyB;AAE/B,SAAgB,EAAiB,GAA4B;CAC3D,QAAQ,GAAR;EACE,KAAK,YACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK,cACH,OAAO;EACT,KAAK,eACH,OAAO;EACT,KAAK,gBACH,OAAO;EACT,KAAK,iBACH,OAAO;CACX;AACF;AAEA,SAAS,EAAK,GAAgC;CAC5C,OAAO,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM;AACpD;AAEA,SAAgB,EACd,GACA,GACA,GACmB;CACnB,IAAM,IAA2B,CAAC,GAC5B,CAAC,GAAG,KAAK,EAAS,MAAM,GAAG,GAE3B,KAAa,GAA2B,MAC5C,OAAO,KAAU,YAAY,IACzB,IACA;EACE,KAAK,KAAS;EACd,OAAO,KAAS;EAChB,QAAQ,KAAS;EACjB,MAAM,KAAS;CACjB,GAEA,IAAU,EAAU,GAAQ,CAAe,GAC3C,IAAS,EAAU,GAAc,CAAsB;CAsB7D,OApBI,MAAM,SACR,EAAM,MAAM,EAAK,EAAQ,OAAO,CAAe,GAC/C,EAAM,yBAAyB,EAAK,EAAO,OAAO,CAAsB,MAExE,EAAM,SAAS,EAAK,EAAQ,UAAU,CAAe,GACrD,EAAM,4BAA4B,EAChC,EAAO,UAAU,CACnB,IAGE,MAAM,UACR,EAAM,OAAO,EAAK,EAAQ,QAAQ,CAAe,GACjD,EAAM,0BAA0B,EAAK,EAAO,QAAQ,CAAsB,KACjE,MAAM,YACf,EAAM,QAAQ,EAAK,EAAQ,SAAS,CAAe,GACnD,EAAM,2BAA2B,EAC/B,EAAO,SAAS,CAClB,IAGK;AACT;AAYA,SAAgB,IAA+C;CAC7D,IAAI,OAAO,WAAa,KAAa,OAAO;CAC5C,IAAM,IAAM,SAAS,gBAAgB,aAAa,KAAK;CAOvD,OANI,MAAQ,UAAU,CAAC,IACd,iBAAiB,SAAS,eAAe,CAAC,CAAC,YAK7C;AACT"}
+{"version":3,"file":"Toaster.utils.js","names":["VIEWPORT_OFFSET","MOBILE_VIEWPORT_OFFSET","getPositionClass","position","toPx","value","resolveOffsetStyle","style","y","x","normalize","fallback","desktop","offset","mobile","mobileOffset","getDocumentDirection","dir"],"sources":["../../../../src/components/toast/Toaster/Toaster.utils.ts"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport type { Position, SwipeDirection } from \"../Toast/Toast.types\";\nimport type { Offset } from \"./Toaster.types\";\n\nconst VIEWPORT_OFFSET = \"24px\";\nconst MOBILE_VIEWPORT_OFFSET = \"16px\";\n\nexport function getPositionClass(position: Position): string {\n  switch (position) {\n    case \"top-left\":\n      return \"top-0 left-0\";\n    case \"top-right\":\n      return \"top-0 right-0\";\n    case \"top-center\":\n      return \"top-0 left-1/2 -translate-x-1/2\";\n    case \"bottom-left\":\n      return \"bottom-0 left-0\";\n    case \"bottom-right\":\n      return \"bottom-0 right-0\";\n    case \"bottom-center\":\n      return \"bottom-0 left-1/2 -translate-x-1/2\";\n  }\n}\n\nfunction toPx(value: string | number): string {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport function resolveOffsetStyle(\n  position: Position,\n  offset?: Offset,\n  mobileOffset?: Offset,\n): JSX.CSSProperties {\n  const style: JSX.CSSProperties = {};\n  const [y, x] = position.split(\"-\");\n\n  const normalize = (value: Offset | undefined, fallback: string) =>\n    typeof value === \"object\" && value !== null\n      ? value\n      : {\n          top: value ?? fallback,\n          right: value ?? fallback,\n          bottom: value ?? fallback,\n          left: value ?? fallback,\n        };\n\n  const desktop = normalize(offset, VIEWPORT_OFFSET);\n  const mobile = normalize(mobileOffset, MOBILE_VIEWPORT_OFFSET);\n\n  if (y === \"top\") {\n    style.top = toPx(desktop.top ?? VIEWPORT_OFFSET);\n    style[\"--mobile-offset-top\"] = toPx(mobile.top ?? MOBILE_VIEWPORT_OFFSET);\n  } else {\n    style.bottom = toPx(desktop.bottom ?? VIEWPORT_OFFSET);\n    style[\"--mobile-offset-bottom\"] = toPx(\n      mobile.bottom ?? MOBILE_VIEWPORT_OFFSET,\n    );\n  }\n\n  if (x === \"left\") {\n    style.left = toPx(desktop.left ?? VIEWPORT_OFFSET);\n    style[\"--mobile-offset-left\"] = toPx(mobile.left ?? MOBILE_VIEWPORT_OFFSET);\n  } else if (x === \"right\") {\n    style.right = toPx(desktop.right ?? VIEWPORT_OFFSET);\n    style[\"--mobile-offset-right\"] = toPx(\n      mobile.right ?? MOBILE_VIEWPORT_OFFSET,\n    );\n  }\n\n  return style;\n}\n\nexport function getDefaultSwipeDirections(\n  position: Position,\n): SwipeDirection[] {\n  const [y, x] = position.split(\"-\");\n  const directions: SwipeDirection[] = [];\n  if (y) directions.push(y as SwipeDirection);\n  if (x) directions.push(x as SwipeDirection);\n  return directions;\n}\n\nexport function getDocumentDirection(): \"rtl\" | \"ltr\" | \"auto\" {\n  if (typeof document === \"undefined\") return \"ltr\";\n  const dir = document.documentElement.getAttribute(\"dir\");\n  if (dir === \"auto\" || !dir) {\n    return getComputedStyle(document.documentElement).direction as\n      | \"rtl\"\n      | \"ltr\"\n      | \"auto\";\n  }\n  return dir as \"rtl\" | \"ltr\" | \"auto\";\n}\n"],"mappings":";AAIA,IAAMA,IAAkB,QAClBC,IAAyB;AAE/B,SAAgBC,EAAiB,GAA4B;CAC3D,QAAQC,GAAR;EACE,KAAK,YACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK,cACH,OAAO;EACT,KAAK,eACH,OAAO;EACT,KAAK,gBACH,OAAO;EACT,KAAK,iBACH,OAAO;CACX;AACF;AAEA,SAASC,EAAK,GAAgC;CAC5C,OAAO,OAAOC,KAAU,WAAW,GAAGA,EAAM,MAAMA;AACpD;AAEA,SAAgBC,EACd,GACA,GACA,GACmB;CACnB,IAAMC,IAA2B,CAAC,GAC5B,CAACC,GAAGC,KAAKN,EAAS,MAAM,GAAG,GAE3BO,KAAa,GAA2B,MAC5C,OAAOL,KAAU,YAAYA,IACzBA,IACA;EACE,KAAKA,KAASM;EACd,OAAON,KAASM;EAChB,QAAQN,KAASM;EACjB,MAAMN,KAASM;CACjB,GAEAC,IAAUF,EAAUG,GAAQb,CAAe,GAC3Cc,IAASJ,EAAUK,GAAcd,CAAsB;CAsB7D,OApBIO,MAAM,SACR,EAAM,MAAMJ,EAAKQ,EAAQ,OAAOZ,CAAe,GAC/C,EAAM,yBAAyBI,EAAKU,EAAO,OAAOb,CAAsB,MAExE,EAAM,SAASG,EAAKQ,EAAQ,UAAUZ,CAAe,GACrD,EAAM,4BAA4BI,EAChCU,EAAO,UAAUb,CACnB,IAGEQ,MAAM,UACR,EAAM,OAAOL,EAAKQ,EAAQ,QAAQZ,CAAe,GACjD,EAAM,0BAA0BI,EAAKU,EAAO,QAAQb,CAAsB,KACjEQ,MAAM,YACf,EAAM,QAAQL,EAAKQ,EAAQ,SAASZ,CAAe,GACnD,EAAM,2BAA2BI,EAC/BU,EAAO,SAASb,CAClB,IAGKM;AACT;AAYA,SAAgBS,IAA+C;CAC7D,IAAI,OAAO,WAAa,KAAa,OAAO;CAC5C,IAAMC,IAAM,SAAS,gBAAgB,aAAa,KAAK;CAOvD,OANIA,MAAQ,UAAU,CAACA,IACd,iBAAiB,SAAS,eAAe,CAAC,CAAC,YAK7CA;AACT"}

package/dist/components/toast/state/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":[],"sources":["../../../../src/components/toast/state/toast.ts"],"sourcesContent":["import { createUniqueId, type JSXElement } from \"solid-js\";\nimport { createStore, produce } from \"solid-js/store\";\nimport type {\n  ExternalToast,\n  PromiseData,\n  PromiseT,\n  ToastT,\n  ToastTypes,\n} from \"../Toast/Toast.types\";\n\nconst [toasts, setToasts] = createStore<ToastT[]>([]);\n\nexport function useSonner() {\n  return { toasts };\n}\n\nexport function getToasts() {\n  return toasts;\n}\n\nexport function getHistory() {\n  return toasts;\n}\n\nfunction createToast(\n  data: ExternalToast & {\n    message?: JSXElement;\n    type?: ToastTypes;\n    jsx?: JSXElement;\n    promise?: PromiseT;\n  },\n): string {\n  const id = data.id ?? createUniqueId();\n\n  setToasts(\n    produce((list) => {\n      const existing = list.find((toast) => toast.id === id);\n      const next: ToastT = {\n        ...data,\n        id,\n        title: data.message,\n        dismissible: data.dismissible ?? true,\n      } as ToastT;\n\n      if (existing) {\n        Object.assign(existing, next, {\n          title: data.message ?? existing.title,\n        });\n      } else {\n        list.unshift(next);\n      }\n    }),\n  );\n\n  return id;\n}\n\nfunction dismissToast(id?: string) {\n  if (id !== undefined) {\n    setToasts(\n      produce((list) => {\n        const toast = list.find((item) => item.id === id);\n        if (toast) toast.delete = true;\n      }),\n    );\n  } else {\n    setToasts(\n      produce((list) => {\n        for (const toast of list) toast.delete = true;\n      }),\n    );\n  }\n  return id;\n}\n\nfunction removeToast(id: string) {\n  setToasts(\n    produce((list) => {\n      const index = list.findIndex((toast) => toast.id === id);\n      if (index !== -1) list.splice(index, 1);\n    }),\n  );\n}\n\nconst toastFunction = (message: JSXElement, data?: ExternalToast) =>\n  createToast({ ...data, message });\n\nexport const toast = Object.assign(toastFunction, {\n  success: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, type: \"success\", message }),\n  info: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, type: \"info\", message }),\n  warning: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, type: \"warning\", message }),\n  error: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, type: \"error\", message }),\n  loading: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, type: \"loading\", message }),\n  message: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, message }),\n  custom: (jsx: (id: string) => JSXElement, data?: ExternalToast) => {\n    const id = data?.id ?? createUniqueId();\n    return createToast({ ...data, id, jsx: jsx(id) });\n  },\n  dismiss: dismissToast,\n  promise: <Data = any>(promise: PromiseT<Data>, data?: PromiseData<Data>) => {\n    if (!data) return;\n\n    let id: string | undefined;\n    if (data.loading !== undefined) {\n      id = createToast({\n        ...data,\n        type: \"loading\",\n        message: data.loading,\n      } as any);\n    }\n\n    Promise.resolve(typeof promise === \"function\" ? promise() : promise)\n      .then(async (result) => {\n        const message =\n          typeof data.success === \"function\"\n            ? await data.success(result)\n            : data.success;\n\n        if (message !== undefined) {\n          createToast({\n            id,\n            type: \"success\",\n            message: message as JSXElement,\n            description:\n              typeof data.description === \"function\"\n                ? await data.description(result)\n                : data.description,\n          } as any);\n        } else if (id !== undefined) {\n          dismissToast(id);\n        }\n      })\n      .catch(async (error) => {\n        const message =\n          typeof data.error === \"function\"\n            ? await data.error(error)\n            : data.error;\n\n        if (message !== undefined) {\n          createToast({\n            id,\n            type: \"error\",\n            message: message as JSXElement,\n            description:\n              typeof data.description === \"function\"\n                ? await data.description(error)\n                : data.description,\n          } as any);\n        } else if (id !== undefined) {\n          dismissToast(id);\n        }\n      })\n      .finally(() => {\n        data.finally?.();\n      });\n\n    return id as string;\n  },\n  getToasts,\n  getHistory,\n  remove: removeToast,\n});\n\nexport { dismissToast, removeToast };\n"],"mappings":"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"}
+{"version":3,"file":"toast.js","names":["toasts","setToasts","createStore","useSonner","getToasts","getHistory","createToast","id","data","createUniqueId","produce","existing","list","toast","next","dismissToast","item","removeToast","index","jsx","promise","message","result","error"],"sources":["../../../../src/components/toast/state/toast.ts"],"sourcesContent":["import { createUniqueId, type JSXElement } from \"solid-js\";\nimport { createStore, produce } from \"solid-js/store\";\nimport type {\n  ExternalToast,\n  PromiseData,\n  PromiseT,\n  ToastT,\n  ToastTypes,\n} from \"../Toast/Toast.types\";\n\nconst [toasts, setToasts] = createStore<ToastT[]>([]);\n\nexport function useSonner() {\n  return { toasts };\n}\n\nexport function getToasts() {\n  return toasts;\n}\n\nexport function getHistory() {\n  return toasts;\n}\n\nfunction createToast(\n  data: ExternalToast & {\n    message?: JSXElement;\n    type?: ToastTypes;\n    jsx?: JSXElement;\n    promise?: PromiseT;\n  },\n): string {\n  const id = data.id ?? createUniqueId();\n\n  setToasts(\n    produce((list) => {\n      const existing = list.find((toast) => toast.id === id);\n      const next: ToastT = {\n        ...data,\n        id,\n        title: data.message,\n        dismissible: data.dismissible ?? true,\n      } as ToastT;\n\n      if (existing) {\n        Object.assign(existing, next, {\n          title: data.message ?? existing.title,\n        });\n      } else {\n        list.unshift(next);\n      }\n    }),\n  );\n\n  return id;\n}\n\nfunction dismissToast(id?: string) {\n  if (id !== undefined) {\n    setToasts(\n      produce((list) => {\n        const toast = list.find((item) => item.id === id);\n        if (toast) toast.delete = true;\n      }),\n    );\n  } else {\n    setToasts(\n      produce((list) => {\n        for (const toast of list) toast.delete = true;\n      }),\n    );\n  }\n  return id;\n}\n\nfunction removeToast(id: string) {\n  setToasts(\n    produce((list) => {\n      const index = list.findIndex((toast) => toast.id === id);\n      if (index !== -1) list.splice(index, 1);\n    }),\n  );\n}\n\nconst toastFunction = (message: JSXElement, data?: ExternalToast) =>\n  createToast({ ...data, message });\n\nexport const toast = Object.assign(toastFunction, {\n  success: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, type: \"success\", message }),\n  info: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, type: \"info\", message }),\n  warning: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, type: \"warning\", message }),\n  error: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, type: \"error\", message }),\n  loading: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, type: \"loading\", message }),\n  message: (message: JSXElement, data?: ExternalToast) =>\n    createToast({ ...data, message }),\n  custom: (jsx: (id: string) => JSXElement, data?: ExternalToast) => {\n    const id = data?.id ?? createUniqueId();\n    return createToast({ ...data, id, jsx: jsx(id) });\n  },\n  dismiss: dismissToast,\n  promise: <Data = any>(promise: PromiseT<Data>, data?: PromiseData<Data>) => {\n    if (!data) return;\n\n    let id: string | undefined;\n    if (data.loading !== undefined) {\n      id = createToast({\n        ...data,\n        type: \"loading\",\n        message: data.loading,\n      } as any);\n    }\n\n    Promise.resolve(typeof promise === \"function\" ? promise() : promise)\n      .then(async (result) => {\n        const message =\n          typeof data.success === \"function\"\n            ? await data.success(result)\n            : data.success;\n\n        if (message !== undefined) {\n          createToast({\n            id,\n            type: \"success\",\n            message: message as JSXElement,\n            description:\n              typeof data.description === \"function\"\n                ? await data.description(result)\n                : data.description,\n          } as any);\n        } else if (id !== undefined) {\n          dismissToast(id);\n        }\n      })\n      .catch(async (error) => {\n        const message =\n          typeof data.error === \"function\"\n            ? await data.error(error)\n            : data.error;\n\n        if (message !== undefined) {\n          createToast({\n            id,\n            type: \"error\",\n            message: message as JSXElement,\n            description:\n              typeof data.description === \"function\"\n                ? await data.description(error)\n                : data.description,\n          } as any);\n        } else if (id !== undefined) {\n          dismissToast(id);\n        }\n      })\n      .finally(() => {\n        data.finally?.();\n      });\n\n    return id as string;\n  },\n  getToasts,\n  getHistory,\n  remove: removeToast,\n});\n\nexport { dismissToast, removeToast };\n"],"mappings":"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"}

package/dist/components/toggle/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["createMemo","createSignal","mergeProps","splitProps","JSX","clsx","toggleVariants","ToggleProps","Toggle","props","Element","merged","type","const","local","rest","internalPressed","setInternalPressed","defaultPressed","pressed","undefined","setPressed","next","onPressedChange","_el$","_tmpl$","$$click","e","onClick","defaultPrevented","_$spread","_$mergeProps","data-state","aria-pressed","class","variant","size","_$delegateEvents"],"sources":["../../../../src/components/toggle/Toggle/Toggle.tsx"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n  type JSX,\n} from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { toggleVariants } from \"./Toggle.styles\";\nimport type { ToggleProps } from \"./Toggle.types\";\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ type: \"button\" as const }, props);\n\n  const [local, rest] = splitProps(merged, [\n    \"pressed\",\n    \"defaultPressed\",\n    \"onPressedChange\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"value\",\n    \"type\",\n    \"onClick\",\n  ]);\n\n  const [internalPressed, setInternalPressed] = createSignal(\n    local.defaultPressed ?? false,\n  );\n  const pressed = createMemo(() =>\n    local.pressed !== undefined ? local.pressed : internalPressed(),\n  );\n\n  const setPressed = (next: boolean) => {\n    if (local.pressed === undefined) setInternalPressed(next);\n    local.onPressedChange?.(next);\n  };\n\n  return (\n    <button\n      type={local.type as \"button\"}\n      data-slot=\"toggle\"\n      data-state={pressed() ? \"on\" : \"off\"}\n      aria-pressed={pressed()}\n      class={clsx(\n        toggleVariants({\n          variant: local.variant,\n          size: local.size,\n          class: local.class,\n        }),\n      )}\n      onClick={(e) => {\n        (local.onClick as any)?.(e);\n        if (!e.defaultPrevented) setPressed(!pressed());\n      }}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAgBQ,EAAOC,GAAiC;CACtD,IAAME,IAAST,EAAW,EAAEU,MAAM,SAAkB,GAAGH,CAAK,GAEtD,CAACK,GAAOC,KAAQZ,EAAWQ,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAS,CACV,GAEK,CAACK,GAAiBC,KAAsBhB,EAC5Ca,EAAMI,kBAAkB,EAC1B,GACMC,IAAUnB,QACdc,EAAMK,YAAYC,KAAAA,IAA4BJ,EAAgB,IAAhCF,EAAMK,OACtC,GAEME,KAAcC,MAAkB;EAEpCR,AADIA,EAAMK,YAAYC,KAAAA,KAAWH,EAAmBK,CAAI,GACxDR,EAAMS,kBAAkBD,CAAI;CAC9B;CAEA,cAAA;EAAA,IAAAE,IAAAC,EAAA;EAiBY,OAjBZD,EAAAE,WAacC,MAAM;GAEd,AADA,EAAOC,UAAkBD,CAAC,GACrBA,EAAEE,oBAAkBR,EAAW,CAACF,EAAQ,CAAC;EAChD,GAACW,EAAAN,GAAAO,EAAA;GAAA,IAdDnB,OAAI;IAAA,OAAEE,EAAMF;GAAgB;GAAA,IAAA,eAAA;IAAA,OAEhBO,EAAQ,IAAI,OAAO;GAAK;GAAA,IAAA,iBAAA;IAAA,OACtBA,EAAQ;GAAC;GAAA,IAAA,QAAA;IAAA,OAChBd,EACLC,EAAe;KACb6B,SAASrB,EAAMqB;KACfC,MAAMtB,EAAMsB;KACZF,OAAOpB,EAAMoB;IACf,CAAC,CACH;GAAC;EAAA,GAKGnB,CAAI,GAAA,IAAA,EAAA,GAAAS;CAAA,EAAA,CAAA;AAGd;AAACa,EAAA,CAAA,OAAA,CAAA"}
+{"version":3,"file":"Toggle.js","names":["createMemo","createSignal","mergeProps","splitProps","JSX","clsx","toggleVariants","ToggleProps","Toggle","props","Element","merged","type","const","local","rest","internalPressed","setInternalPressed","defaultPressed","pressed","undefined","setPressed","next","onPressedChange","_el$","_tmpl$","$$click","e","onClick","defaultPrevented","_$spread","_$mergeProps","data-state","aria-pressed","class","variant","size","_$delegateEvents","mergeProps","_$mergeProps","_$delegateEvents","mergeProps$1","_tmpl$","Toggle","merged","props","local","rest","splitProps","internalPressed","setInternalPressed","createSignal","pressed","createMemo","setPressed","next","_el$","spread","mergeProps","\"class\"","clsx","toggleVariants","delegateEvents"],"sources":["../../../../src/components/toggle/Toggle/Toggle.tsx"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n  type JSX,\n} from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { toggleVariants } from \"./Toggle.styles\";\nimport type { ToggleProps } from \"./Toggle.types\";\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ type: \"button\" as const }, props);\n\n  const [local, rest] = splitProps(merged, [\n    \"pressed\",\n    \"defaultPressed\",\n    \"onPressedChange\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"value\",\n    \"type\",\n    \"onClick\",\n  ]);\n\n  const [internalPressed, setInternalPressed] = createSignal(\n    local.defaultPressed ?? false,\n  );\n  const pressed = createMemo(() =>\n    local.pressed !== undefined ? local.pressed : internalPressed(),\n  );\n\n  const setPressed = (next: boolean) => {\n    if (local.pressed === undefined) setInternalPressed(next);\n    local.onPressedChange?.(next);\n  };\n\n  return (\n    <button\n      type={local.type as \"button\"}\n      data-slot=\"toggle\"\n      data-state={pressed() ? \"on\" : \"off\"}\n      aria-pressed={pressed()}\n      class={clsx(\n        toggleVariants({\n          variant: local.variant,\n          size: local.size,\n          class: local.class,\n        }),\n      )}\n      onClick={(e) => {\n        (local.onClick as any)?.(e);\n        if (!e.defaultPrevented) setPressed(!pressed());\n      }}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAgBQ,EAAOC,GAAiC;CACtD,IAAME,IAAST,EAAW,EAAEU,MAAM,SAAkB,GAAGH,CAAK,GAEtD,CAACK,GAAOC,KAAQZ,EAAWQ,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAS,CACV,GAEK,CAACK,GAAiBC,KAAsBhB,EAC5Ca,EAAMI,kBAAkB,EAC1B,GACMC,IAAUnB,QACdc,EAAMK,YAAYC,KAAAA,IAA4BJ,EAAgB,IAAhCF,EAAMK,OACtC,GAEME,KAAcC,MAAkB;EAEpCR,AADIA,EAAMK,YAAYC,KAAAA,KAAWH,EAAmBK,CAAI,GACxDR,EAAMS,kBAAkBD,CAAI;CAC9B;CAEA,cAAA;EAAA,IAAAE,IAAAC,EAAA;EAiBY,OAjBZD,EAAAE,WAacC,MAAM;GAEd,AADAmB,EAAOlB,UAAkBD,CAAC,GACrBA,EAAEE,oBAAkBR,EAAW,CAACF,EAAQ,CAAC;EAChD,GAACW,EAAAN,GAAAO,EAAA;GAAA,IAdDnB,OAAI;IAAA,OAAEE,EAAMF;GAAgB;GAAA,IAAA,eAAA;IAAA,OAEhBO,EAAQ,IAAI,OAAO;GAAK;GAAA,IAAA,iBAAA;IAAA,OACtBA,EAAQ;GAAC;GAAA,IAAAwC,QAAA;IAAA,OAChBtD,EACLC,EAAe;KACb6B,SAASrB,EAAMqB;KACfC,MAAMtB,EAAMsB;KACZF,OAAOpB,EAAMoB;IACf,CAAC,CACH;GAAC;EAAA,GAKGnB,CAAI,GAAA,IAAA,EAAA,GAAAS;CAAA,EAAA,CAAA;AAGd;AAACa,EAAA,CAAA,OAAA,CAAA"}

package/dist/components/toggle/Toggle/Toggle.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.styles.js","names":[],"sources":["../../../../src/components/toggle/Toggle/Toggle.styles.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const toggleVariants = cva(\n  \"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 data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default:\n          \"h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n"],"mappings":";;AAEA,IAAa,IAAiB,EAC5B,uhBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;EACX;EACA,MAAM;GACJ,SACE;GACF,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF"}
+{"version":3,"file":"Toggle.styles.js","names":["toggleVariants","cva"],"sources":["../../../../src/components/toggle/Toggle/Toggle.styles.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const toggleVariants = cva(\n  \"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 data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default:\n          \"h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n"],"mappings":";;AAEA,IAAaA,IAAiBC,EAC5B,uhBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;EACX;EACA,MAAM;GACJ,SACE;GACF,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF"}

package/dist/components/toggle-group/ToggleGroup/ToggleGroup.context.d.ts

@@ -1,16 +1,21 @@
-import { ToggleGroupChangeEventDetails, ToggleGroupContextValue, ToggleGroupOrientation, ToggleGroupSize, ToggleGroupValue, ToggleGroupVariant } from './ToggleGroup.types';
+import { ToggleGroupChangeHandler, ToggleGroupContextValue, ToggleGroupOrientation, ToggleGroupSize, ToggleGroupValue, ToggleGroupVariant } from './ToggleGroup.types';
 declare const ToggleGroupContext: import('solid-js').Context<ToggleGroupContextValue<ToggleGroupValue> | undefined>;
-/** createToggleGroupState 的输入:与 ToggleGroupProps 的运行时字段一致 */
+/**
+ * createToggleGroupState 的输入:ToggleGroupProps 的运行时形态。
+ *
+ * 受控值时单选给标量、多选给数组,内部统一规范化成数组;
+ * `multiple` 同时决定 onValueChange 用哪种签名回调。
+ */
 export interface ToggleGroupStateProps<TValue extends ToggleGroupValue = ToggleGroupValue> {
-    value?: readonly TValue[];
-    defaultValue?: readonly TValue[];
-    onValueChange?: (value: TValue[], eventDetails: ToggleGroupChangeEventDetails) => void;
-    multiple: boolean;
-    disabled: boolean;
-    orientation: ToggleGroupOrientation;
-    loopFocus: boolean;
+    value?: TValue | readonly TValue[];
+    defaultValue?: TValue | readonly TValue[];
+    onValueChange?: ToggleGroupChangeHandler<TValue>;
+    multiple?: boolean;
+    disabled?: boolean;
+    orientation?: ToggleGroupOrientation;
+    loopFocus?: boolean;
     dir?: "ltr" | "rtl" | "auto";
-    spacing: number;
+    spacing?: number;
     variant?: ToggleGroupVariant;
     size?: ToggleGroupSize;
 }
@@ -18,7 +23,7 @@ export interface ToggleGroupStateProps<TValue extends ToggleGroupValue = ToggleG
  * ToggleGroup 的唯一状态源:选中值(受控/非受控)、焦点高亮、item 注册表。
  *
  * 返回的 context 值里所有字段都是 accessor,因此传入的 `props` 可以是
- * splitProps/mergeProps 得到的响应式代理,读取始终是最新值。
+ * splitProps 得到的响应式代理,读取始终是最新值。
  * 组件根只负责输出 DOM 与 data-* 样式钩子,状态与交互算法收敛在这里。
  *
  * 值类型由泛型参数决定;内部只用 `===` / `includes` 做同一性比较,

package/dist/components/toggle-group/ToggleGroup/ToggleGroup.context.js

@@ -3,30 +3,30 @@ import { createContext as t, createSignal as n, useContext as r } from "solid-js
 //#region src/components/toggle-group/ToggleGroup/ToggleGroup.context.ts
 var i = t();
 function a(t) {
-	let [r, i] = n([...t.defaultValue ?? []]), [a, o] = n(), [s, c] = n([]), l = () => t.value !== void 0, u = () => l() ? t.value : r();
+	let r = () => t.multiple === !0, i = (e) => e === void 0 ? [] : Array.isArray(e) ? [...e] : [e], [a, o] = n(i(t.defaultValue)), [s, c] = n(), [l, u] = n([]), d = () => t.value !== void 0, f = () => d() ? i(t.value) : a();
 	return {
-		value: u,
-		multiple: () => t.multiple,
-		disabled: () => t.disabled,
-		orientation: () => t.orientation,
-		loopFocus: () => t.loopFocus,
+		value: f,
+		multiple: r,
+		disabled: () => t.disabled === !0,
+		orientation: () => t.orientation ?? "horizontal",
+		loopFocus: () => t.loopFocus ?? !0,
 		dir: () => t.dir,
-		spacing: () => t.spacing,
+		spacing: () => t.spacing ?? 2,
 		variant: () => t.variant,
 		size: () => t.size,
-		highlightedValue: a,
-		isPressed: (e) => u().includes(e),
-		toggleItem: (n, r, a) => {
-			let o = u(), s = o.includes(n), c;
-			c = t.multiple ? s ? o.filter((e) => e !== n) : [...o, n] : s ? [] : [n];
-			let d = e(r, a);
-			t.onValueChange?.(c, d), !d.isCanceled && (l() || i(c));
+		highlightedValue: s,
+		isPressed: (e) => f().includes(e),
+		toggleItem: (n, i, a) => {
+			let s = f(), c = s.includes(n), l;
+			l = r() ? c ? s.filter((e) => e !== n) : [...s, n] : c ? [] : [n];
+			let u = e(i, a);
+			r() ? t.onValueChange?.(l, u) : t.onValueChange?.(l[0], u), !u.isCanceled && (d() || o(l));
 		},
-		setHighlightedValue: o,
-		registerItem: (e) => (c((t) => [...t, e]), () => c((t) => t.filter((t) => t !== e))),
-		getItems: () => s(),
-		isFirstEnabled: (e) => s().find((e) => !e.disabled())?.value === e,
-		isUsable: (e) => s().some((t) => t.value === e && !t.disabled())
+		setHighlightedValue: c,
+		registerItem: (e) => (u((t) => [...t, e]), () => u((t) => t.filter((t) => t !== e))),
+		getItems: () => l(),
+		isFirstEnabled: (e) => l().find((e) => !e.disabled())?.value === e,
+		isUsable: (e) => l().some((t) => t.value === e && !t.disabled())
 	};
 }
 function o(e) {

package/dist/components/toggle-group/ToggleGroup/ToggleGroup.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.context.js","names":[],"sources":["../../../../src/components/toggle-group/ToggleGroup/ToggleGroup.context.ts"],"sourcesContent":["import { createContext, createSignal, useContext } from \"solid-js\";\nimport { createChangeEventDetails } from \"./create-change-event-details\";\nimport type {\n  ToggleGroupChangeEventDetails,\n  ToggleGroupContextValue,\n  ToggleGroupItemEntry,\n  ToggleGroupOrientation,\n  ToggleGroupSize,\n  ToggleGroupValue,\n  ToggleGroupVariant,\n} from \"./ToggleGroup.types\";\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue>();\n\n/** createToggleGroupState 的输入:与 ToggleGroupProps 的运行时字段一致 */\nexport interface ToggleGroupStateProps<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n> {\n  value?: readonly TValue[];\n  defaultValue?: readonly TValue[];\n  onValueChange?: (\n    value: TValue[],\n    eventDetails: ToggleGroupChangeEventDetails,\n  ) => void;\n  multiple: boolean;\n  disabled: boolean;\n  orientation: ToggleGroupOrientation;\n  loopFocus: boolean;\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n  spacing: number;\n  variant?: ToggleGroupVariant;\n  size?: ToggleGroupSize;\n}\n\n/**\n * ToggleGroup 的唯一状态源:选中值(受控/非受控)、焦点高亮、item 注册表。\n *\n * 返回的 context 值里所有字段都是 accessor,因此传入的 `props` 可以是\n * splitProps/mergeProps 得到的响应式代理,读取始终是最新值。\n * 组件根只负责输出 DOM 与 data-* 样式钩子,状态与交互算法收敛在这里。\n *\n * 值类型由泛型参数决定;内部只用 `===` / `includes` 做同一性比较,\n * 因此 string 与 number 都能正常工作。\n */\nexport function createToggleGroupState<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(props: ToggleGroupStateProps<TValue>): ToggleGroupContextValue<TValue> {\n  const [internalValue, setInternalValue] = createSignal<TValue[]>([\n    ...(props.defaultValue ?? []),\n  ]);\n  const [highlightedValue, setHighlightedValue] = createSignal<\n    TValue | undefined\n  >();\n  const [itemOrder, setItemOrder] = createSignal<\n    ToggleGroupItemEntry<TValue>[]\n  >([]);\n\n  const isControlled = () => props.value !== undefined;\n  // 受控优先:props.value 存在时读外部值,否则读内部状态\n  const value = (): readonly TValue[] =>\n    isControlled() ? (props.value as readonly TValue[]) : internalValue();\n\n  const isPressed = (v: TValue) => value().includes(v);\n\n  const toggleItem = (\n    itemValue: TValue,\n    event: Event,\n    trigger?: Element,\n  ): void => {\n    const current = value();\n    const pressed = current.includes(itemValue);\n\n    // 对齐 base-ui:单选时再次点击已按下项会取消选中(next = [])\n    let next: TValue[];\n    if (props.multiple) {\n      next = pressed\n        ? current.filter((v) => v !== itemValue)\n        : [...current, itemValue];\n    } else {\n      next = pressed ? [] : [itemValue];\n    }\n\n    // 先通知外部:onValueChange 中 cancel() 可阻止组件提交本次变更\n    const details = createChangeEventDetails(event, trigger);\n    props.onValueChange?.(next, details);\n    if (details.isCanceled) return;\n\n    // 受控模式只通知外部,不改内部状态\n    if (!isControlled()) setInternalValue(next);\n  };\n\n  const registerItem = (entry: ToggleGroupItemEntry<TValue>) => {\n    setItemOrder((prev) => [...prev, entry]);\n    return () => setItemOrder((prev) => prev.filter((item) => item !== entry));\n  };\n\n  const isFirstEnabled = (v: TValue) =>\n    itemOrder().find((item) => !item.disabled())?.value === v;\n\n  const isUsable = (v: TValue) =>\n    itemOrder().some((item) => item.value === v && !item.disabled());\n\n  return {\n    value,\n    multiple: () => props.multiple,\n    disabled: () => props.disabled,\n    orientation: () => props.orientation,\n    loopFocus: () => props.loopFocus,\n    dir: () => props.dir,\n    spacing: () => props.spacing,\n    variant: () => props.variant,\n    size: () => props.size,\n    highlightedValue,\n    isPressed,\n    toggleItem,\n    setHighlightedValue,\n    registerItem,\n    getItems: () => itemOrder(),\n    isFirstEnabled,\n    isUsable,\n  };\n}\n\n/**\n * 读取 ToggleGroup 的 context。\n *\n * 泛型参数是**调用方标注**:组件本身无法从子节点推导所属 group 的值类型,\n * 自定义 item 时请显式传入与 ToggleGroup 一致的类型,例如\n * `useToggleGroupContext<\"bold\" | \"italic\">(\"MyToggle\")`。\n */\nexport function useToggleGroupContext<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(component: string): ToggleGroupContextValue<TValue> {\n  const ctx = useContext(ToggleGroupContext);\n  if (!ctx) {\n    throw new Error(`<${component}> 必须渲染在 <ToggleGroup> 内部`);\n  }\n  return ctx as ToggleGroupContextValue<TValue>;\n}\n\nexport { ToggleGroupContext };\n"],"mappings":";;;AAYA,IAAM,IAAqB,EAAuC;AAgClE,SAAgB,EAEd,GAAuE;CACvE,IAAM,CAAC,GAAe,KAAoB,EAAuB,CAC/D,GAAI,EAAM,gBAAgB,CAAC,CAC7B,CAAC,GACK,CAAC,GAAkB,KAAuB,EAE9C,GACI,CAAC,GAAW,KAAgB,EAEhC,CAAC,CAAC,GAEE,UAAqB,EAAM,UAAU,KAAA,GAErC,UACJ,EAAa,IAAK,EAAM,QAA8B,EAAc;CA0CtE,OAAO;EACL;EACA,gBAAgB,EAAM;EACtB,gBAAgB,EAAM;EACtB,mBAAmB,EAAM;EACzB,iBAAiB,EAAM;EACvB,WAAW,EAAM;EACjB,eAAe,EAAM;EACrB,eAAe,EAAM;EACrB,YAAY,EAAM;EAClB;EACA,YAnDiB,MAAc,EAAM,CAAC,CAAC,SAAS,CAAC;EAoDjD,aAjDA,GACA,GACA,MACS;GACT,IAAM,IAAU,EAAM,GAChB,IAAU,EAAQ,SAAS,CAAS,GAGtC;GACJ,AAKE,IALE,EAAM,WACD,IACH,EAAQ,QAAQ,MAAM,MAAM,CAAS,IACrC,CAAC,GAAG,GAAS,CAAS,IAEnB,IAAU,CAAC,IAAI,CAAC,CAAS;GAIlC,IAAM,IAAU,EAAyB,GAAO,CAAO;GACvD,EAAM,gBAAgB,GAAM,CAAO,GAC/B,GAAQ,eAGP,EAAa,KAAG,EAAiB,CAAI;EAC5C;EA0BE;EACA,eAzBoB,OACpB,GAAc,MAAS,CAAC,GAAG,GAAM,CAAK,CAAC,SAC1B,GAAc,MAAS,EAAK,QAAQ,MAAS,MAAS,CAAK,CAAC;EAwBzE,gBAAgB,EAAU;EAC1B,iBAtBsB,MACtB,EAAU,CAAC,CAAC,MAAM,MAAS,CAAC,EAAK,SAAS,CAAC,CAAC,EAAE,UAAU;EAsBxD,WApBgB,MAChB,EAAU,CAAC,CAAC,MAAM,MAAS,EAAK,UAAU,KAAK,CAAC,EAAK,SAAS,CAAC;CAoBjE;AACF;AASA,SAAgB,EAEd,GAAoD;CACpD,IAAM,IAAM,EAAW,CAAkB;CACzC,IAAI,CAAC,GACH,MAAU,MAAM,IAAI,EAAU,yBAAyB;CAEzD,OAAO;AACT"}
+{"version":3,"file":"ToggleGroup.context.js","names":["ToggleGroupContext","createContext","createToggleGroupState","multiple","props","toArray","v","internalValue","setInternalValue","createSignal","highlightedValue","setHighlightedValue","itemOrder","setItemOrder","isControlled","value","current","pressed","itemValue","next","details","createChangeEventDetails","event","trigger","prev","entry","item","useToggleGroupContext","ctx","useContext","component"],"sources":["../../../../src/components/toggle-group/ToggleGroup/ToggleGroup.context.ts"],"sourcesContent":["import { createContext, createSignal, useContext } from \"solid-js\";\nimport { createChangeEventDetails } from \"./create-change-event-details\";\nimport type {\n  ToggleGroupChangeHandler,\n  ToggleGroupContextValue,\n  ToggleGroupItemEntry,\n  ToggleGroupMultipleProps,\n  ToggleGroupOrientation,\n  ToggleGroupSingleProps,\n  ToggleGroupSize,\n  ToggleGroupValue,\n  ToggleGroupVariant,\n} from \"./ToggleGroup.types\";\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue>();\n\n/** 单选/多选的 onValueChange 签名(从 props 类型派生,保持单一事实来源) */\ntype SingleChangeHandler<TValue extends ToggleGroupValue> = NonNullable<\n  ToggleGroupSingleProps<TValue>[\"onValueChange\"]\n>;\ntype MultipleChangeHandler<TValue extends ToggleGroupValue> = NonNullable<\n  ToggleGroupMultipleProps<TValue>[\"onValueChange\"]\n>;\n\n/**\n * createToggleGroupState 的输入:ToggleGroupProps 的运行时形态。\n *\n * 受控值时单选给标量、多选给数组,内部统一规范化成数组;\n * `multiple` 同时决定 onValueChange 用哪种签名回调。\n */\nexport interface ToggleGroupStateProps<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n> {\n  value?: TValue | readonly TValue[];\n  defaultValue?: TValue | readonly TValue[];\n  onValueChange?: ToggleGroupChangeHandler<TValue>;\n  multiple?: boolean;\n  disabled?: boolean;\n  orientation?: ToggleGroupOrientation;\n  loopFocus?: boolean;\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n  spacing?: number;\n  variant?: ToggleGroupVariant;\n  size?: ToggleGroupSize;\n}\n\n/**\n * ToggleGroup 的唯一状态源:选中值(受控/非受控)、焦点高亮、item 注册表。\n *\n * 返回的 context 值里所有字段都是 accessor,因此传入的 `props` 可以是\n * splitProps 得到的响应式代理,读取始终是最新值。\n * 组件根只负责输出 DOM 与 data-* 样式钩子,状态与交互算法收敛在这里。\n *\n * 值类型由泛型参数决定;内部只用 `===` / `includes` 做同一性比较,\n * 因此 string 与 number 都能正常工作。\n */\nexport function createToggleGroupState<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(props: ToggleGroupStateProps<TValue>): ToggleGroupContextValue<TValue> {\n  const multiple = () => props.multiple === true;\n\n  /** 单选传标量、多选传数组,内部统一成数组 */\n  const toArray = (v: TValue | readonly TValue[] | undefined): TValue[] => {\n    if (v === undefined) return [];\n    return Array.isArray(v) ? [...(v as readonly TValue[])] : [v as TValue];\n  };\n\n  const [internalValue, setInternalValue] = createSignal<TValue[]>(\n    toArray(props.defaultValue),\n  );\n  const [highlightedValue, setHighlightedValue] = createSignal<\n    TValue | undefined\n  >();\n  const [itemOrder, setItemOrder] = createSignal<\n    ToggleGroupItemEntry<TValue>[]\n  >([]);\n\n  const isControlled = () => props.value !== undefined;\n  // 受控优先:props.value 存在时读外部值,否则读内部状态\n  const value = (): readonly TValue[] =>\n    isControlled() ? toArray(props.value) : internalValue();\n\n  const isPressed = (v: TValue) => value().includes(v);\n\n  const toggleItem = (\n    itemValue: TValue,\n    event: Event,\n    trigger?: Element,\n  ): void => {\n    const current = value();\n    const pressed = current.includes(itemValue);\n\n    // 单选时再次点击已按下项会取消选中(next = [])\n    let next: TValue[];\n    if (multiple()) {\n      next = pressed\n        ? current.filter((v) => v !== itemValue)\n        : [...current, itemValue];\n    } else {\n      next = pressed ? [] : [itemValue];\n    }\n\n    // 先通知外部:onValueChange 中 cancel() 可阻止组件提交本次变更\n    // 单选回调标量(取消时是 undefined),多选回调数组\n    const details = createChangeEventDetails(event, trigger);\n    if (multiple()) {\n      (props.onValueChange as MultipleChangeHandler<TValue> | undefined)?.(\n        next,\n        details,\n      );\n    } else {\n      (props.onValueChange as SingleChangeHandler<TValue> | undefined)?.(\n        next[0],\n        details,\n      );\n    }\n    if (details.isCanceled) return;\n\n    // 受控模式只通知外部,不改内部状态\n    if (!isControlled()) setInternalValue(next);\n  };\n\n  const registerItem = (entry: ToggleGroupItemEntry<TValue>) => {\n    setItemOrder((prev) => [...prev, entry]);\n    return () => setItemOrder((prev) => prev.filter((item) => item !== entry));\n  };\n\n  const isFirstEnabled = (v: TValue) =>\n    itemOrder().find((item) => !item.disabled())?.value === v;\n\n  const isUsable = (v: TValue) =>\n    itemOrder().some((item) => item.value === v && !item.disabled());\n\n  return {\n    value,\n    multiple,\n    disabled: () => props.disabled === true,\n    orientation: () => props.orientation ?? \"horizontal\",\n    loopFocus: () => props.loopFocus ?? true,\n    dir: () => props.dir,\n    spacing: () => props.spacing ?? 2,\n    variant: () => props.variant,\n    size: () => props.size,\n    highlightedValue,\n    isPressed,\n    toggleItem,\n    setHighlightedValue,\n    registerItem,\n    getItems: () => itemOrder(),\n    isFirstEnabled,\n    isUsable,\n  };\n}\n\n/**\n * 读取 ToggleGroup 的 context。\n *\n * 泛型参数是**调用方标注**:组件本身无法从子节点推导所属 group 的值类型,\n * 自定义 item 时请显式传入与 ToggleGroup 一致的类型,例如\n * `useToggleGroupContext<\"bold\" | \"italic\">(\"MyToggle\")`。\n */\nexport function useToggleGroupContext<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(component: string): ToggleGroupContextValue<TValue> {\n  const ctx = useContext(ToggleGroupContext);\n  if (!ctx) {\n    throw new Error(`<${component}> 必须渲染在 <ToggleGroup> 内部`);\n  }\n  return ctx as ToggleGroupContextValue<TValue>;\n}\n\nexport { ToggleGroupContext };\n"],"mappings":";;;AAcA,IAAMA,IAAqBC,EAAuC;AA0ClE,SAAgBC,EAEd,GAAuE;CACvE,IAAMC,UAAiBC,EAAM,aAAa,IAGpCC,KAAW,MACXC,MAAM,KAAA,IAAkB,CAAC,IACtB,MAAM,QAAQA,CAAC,IAAI,CAAC,GAAIA,CAAuB,IAAI,CAACA,CAAW,GAGlE,CAACC,GAAeC,KAAoBC,EACxCJ,EAAQD,EAAM,YAAY,CAC5B,GACM,CAACM,GAAkBC,KAAuBF,EAE9C,GACI,CAACG,GAAWC,KAAgBJ,EAEhC,CAAC,CAAC,GAEEK,UAAqBV,EAAM,UAAU,KAAA,GAErCW,UACJD,EAAa,IAAIT,EAAQD,EAAM,KAAK,IAAIG,EAAc;CAqDxD,OAAO;EACL;EACA;EACA,gBAAgBH,EAAM,aAAa;EACnC,mBAAmBA,EAAM,eAAe;EACxC,iBAAiBA,EAAM,aAAa;EACpC,WAAWA,EAAM;EACjB,eAAeA,EAAM,WAAW;EAChC,eAAeA,EAAM;EACrB,YAAYA,EAAM;EAClB;EACA,YA9DiB,MAAcW,EAAM,CAAC,CAAC,SAAST,CAAC;EA+DjD,aA5DA,GACA,GACA,MACS;GACT,IAAMU,IAAUD,EAAM,GAChBE,IAAUD,EAAQ,SAASE,CAAS,GAGtCC;GACJ,AAKEA,IALEhB,EAAS,IACJc,IACHD,EAAQ,QAAQ,MAAMV,MAAMY,CAAS,IACrC,CAAC,GAAGF,GAASE,CAAS,IAEnBD,IAAU,CAAC,IAAI,CAACC,CAAS;GAKlC,IAAME,IAAUC,EAAyBC,GAAOC,CAAO;GAYvD,AAXIpB,EAAS,IACXC,EAAO,gBACLe,GACAC,CACF,IAEAhB,EAAO,gBACLe,EAAK,IACLC,CACF,GAEE,GAAQ,eAGPN,EAAa,KAAGN,EAAiBW,CAAI;EAC5C;EA0BE;EACA,eAzBoB,OACpBN,GAAc,MAAS,CAAC,GAAGW,GAAMC,CAAK,CAAC,SAC1BZ,GAAc,MAASW,EAAK,QAAQ,MAASE,MAASD,CAAK,CAAC;EAwBzE,gBAAgBb,EAAU;EAC1B,iBAtBsB,MACtBA,EAAU,CAAC,CAAC,MAAM,MAAS,CAACc,EAAK,SAAS,CAAC,CAAC,EAAE,UAAUpB;EAsBxD,WApBgB,MAChBM,EAAU,CAAC,CAAC,MAAM,MAASc,EAAK,UAAUpB,KAAK,CAACoB,EAAK,SAAS,CAAC;CAoBjE;AACF;AASA,SAAgBC,EAEd,GAAoD;CACpD,IAAMC,IAAMC,EAAW7B,CAAkB;CACzC,IAAI,CAAC4B,GACH,MAAU,MAAM,IAAIE,EAAU,yBAAyB;CAEzD,OAAOF;AACT"}

package/dist/components/toggle-group/ToggleGroup/ToggleGroup.d.ts

@@ -6,12 +6,18 @@ import { ToggleGroupProps, ToggleGroupValue } from './ToggleGroup.types';
  * / `data-disabled` / `data-spacing` / `data-variant` / `data-size`),
  * 并挂载 roving focus 键盘导航。
  *
+ * 单选模式(默认)的 value 是标量,多选模式(`multiple`)才是数组:
+ *
  * @example
  * ```tsx
- * <ToggleGroup variant="outline" defaultValue={["bold"]}>
- *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
- *     <Bold />
- *   </ToggleGroupItem>
+ * // 单选
+ * <ToggleGroup defaultValue="bold" onValueChange={(v) => ...}>
+ *   <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * // 多选
+ * <ToggleGroup multiple value={["bold"]} onValueChange={(v) => ...}>
+ *   <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  * </ToggleGroup>
  * ```
  */

package/dist/components/toggle-group/ToggleGroup/ToggleGroup.js

@@ -4,17 +4,11 @@ import { ToggleGroupContext as n, createToggleGroupState as r } from "./ToggleGr
 import { toggleGroupVariants as i } from "./ToggleGroup.styles.js";
 import { useToggleGroupKeyboard as a } from "./useToggleGroupKeyboard.js";
 import { createComponent as o, delegateEvents as s, insert as c, mergeProps as l, spread as u, template as d } from "solid-js/web";
-import { mergeProps as f, splitProps as p } from "solid-js";
+import { splitProps as f } from "solid-js";
 //#region src/components/toggle-group/ToggleGroup/ToggleGroup.tsx
-var m = /*#__PURE__*/ d("<div role=group data-slot=toggle-group>");
-function h(s) {
-	let d = f({
-		multiple: !1,
-		disabled: !1,
-		orientation: "horizontal",
-		loopFocus: !0,
-		spacing: 2
-	}, s), [h, g] = p(d, [
+var p = /*#__PURE__*/ d("<div role=group data-slot=toggle-group>");
+function m(s) {
+	let [d, m] = f(s, [
 		"value",
 		"defaultValue",
 		"onValueChange",
@@ -31,64 +25,64 @@ function h(s) {
 		"dir",
 		"onKeyDown",
 		"children"
-	]), _ = r(h), { handleKeyDown: v } = a(_), y = () => h.orientation === "vertical";
+	]), h = r(d), { handleKeyDown: g } = a(h), _ = () => h.orientation() === "vertical";
 	return (() => {
-		var r = m();
+		var r = p();
 		return r.$$keydown = (e) => {
-			t(h.onKeyDown, e), e.defaultPrevented || v(e);
+			t(d.onKeyDown, e), e.defaultPrevented || g(e);
 		}, u(r, l({
 			get "data-variant"() {
-				return h.variant;
+				return h.variant();
 			},
 			get "data-size"() {
-				return h.size;
+				return h.size();
 			},
 			get "data-spacing"() {
-				return h.spacing;
+				return h.spacing();
 			},
 			get "data-orientation"() {
-				return h.orientation;
+				return h.orientation();
 			},
 			get "data-vertical"() {
-				return y() ? "" : null;
+				return _() ? "" : null;
 			},
 			get "data-horizontal"() {
-				return y() ? null : "";
+				return _() ? null : "";
 			},
 			get "data-multiple"() {
-				return h.multiple ? "" : null;
+				return h.multiple() ? "" : null;
 			},
 			get "data-disabled"() {
-				return h.disabled ? "" : null;
+				return h.disabled() ? "" : null;
 			},
 			get "aria-disabled"() {
-				return h.disabled ? "true" : void 0;
+				return h.disabled() ? "true" : void 0;
 			},
 			get dir() {
-				return h.dir;
+				return d.dir;
 			},
 			get style() {
 				return {
-					"--gap": h.spacing,
-					...h.style
+					"--gap": h.spacing(),
+					...d.style
 				};
 			},
 			get class() {
-				return e(i(), h.class);
+				return e(i(), d.class);
 			},
 			get classList() {
-				return h.classList;
+				return d.classList;
 			}
-		}, g), !1, !0), c(r, o(n.Provider, {
-			value: _,
+		}, m), !1, !0), c(r, o(n.Provider, {
+			value: h,
 			get children() {
-				return h.children;
+				return d.children;
 			}
 		})), r;
 	})();
 }
 s(["keydown"]);
 //#endregion
-export { h as ToggleGroup };
+export { m as ToggleGroup };
 
 //# sourceMappingURL=ToggleGroup.js.map

package/dist/components/toggle-group/ToggleGroup/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","names":["mergeProps","splitProps","JSX","clsx","callEventHandler","createToggleGroupState","ToggleGroupContext","toggleGroupVariants","ToggleGroupProps","ToggleGroupValue","useToggleGroupKeyboard","ToggleGroup","props","TValue","Element","merged","multiple","disabled","orientation","const","loopFocus","spacing","local","rest","ctx","handleKeyDown","isVertical","_el$","_tmpl$","$$keydown","e","onKeyDown","defaultPrevented","_$spread","_$mergeProps","data-variant","variant","data-size","size","data-spacing","data-orientation","data-vertical","data-horizontal","data-multiple","data-disabled","aria-disabled","undefined","dir","style","CSSProperties","class","classList","_$insert","_$createComponent","Provider","value","children","_$delegateEvents"],"sources":["../../../../src/components/toggle-group/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { mergeProps, splitProps, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { callEventHandler } from \"../call-event-handler\";\nimport {\n  createToggleGroupState,\n  ToggleGroupContext,\n} from \"./ToggleGroup.context\";\nimport { toggleGroupVariants } from \"./ToggleGroup.styles\";\nimport type { ToggleGroupProps, ToggleGroupValue } from \"./ToggleGroup.types\";\nimport { useToggleGroupKeyboard } from \"./useToggleGroupKeyboard\";\n\n/**\n * ToggleGroup 根组件:渲染 `<div role=\"group\">`,输出样式与语义钩子\n * (`data-orientation` / `data-vertical` / `data-horizontal` / `data-multiple`\n * / `data-disabled` / `data-spacing` / `data-variant` / `data-size`),\n * 并挂载 roving focus 键盘导航。\n *\n * @example\n * ```tsx\n * <ToggleGroup variant=\"outline\" defaultValue={[\"bold\"]}>\n *   <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n *     <Bold />\n *   </ToggleGroupItem>\n * </ToggleGroup>\n * ```\n */\nexport function ToggleGroup<TValue extends ToggleGroupValue = ToggleGroupValue>(\n  props: ToggleGroupProps<TValue>,\n): JSX.Element {\n  const merged = mergeProps(\n    {\n      multiple: false,\n      disabled: false,\n      orientation: \"horizontal\" as const,\n      loopFocus: true,\n      spacing: 2,\n    },\n    props,\n  );\n\n  const [local, rest] = splitProps(merged, [\n    \"value\",\n    \"defaultValue\",\n    \"onValueChange\",\n    \"multiple\",\n    \"disabled\",\n    \"orientation\",\n    \"loopFocus\",\n    \"spacing\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"classList\",\n    \"style\",\n    \"dir\",\n    \"onKeyDown\",\n    \"children\",\n  ]);\n\n  const ctx = createToggleGroupState<TValue>(local);\n  const { handleKeyDown } = useToggleGroupKeyboard(ctx);\n  const isVertical = () => local.orientation === \"vertical\";\n\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"toggle-group\"\n      data-variant={local.variant}\n      data-size={local.size}\n      data-spacing={local.spacing}\n      data-orientation={local.orientation}\n      // 现有样式依赖 data-vertical / data-horizontal(与 tabs 根保持一致)\n      data-vertical={isVertical() ? \"\" : null}\n      data-horizontal={isVertical() ? null : \"\"}\n      data-multiple={local.multiple ? \"\" : null}\n      data-disabled={local.disabled ? \"\" : null}\n      aria-disabled={local.disabled ? \"true\" : undefined}\n      dir={local.dir}\n      // --gap 作为 spacing 的样式入口,用户 style 可覆盖\n      style={{ \"--gap\": local.spacing, ...local.style } as JSX.CSSProperties}\n      class={clsx(toggleGroupVariants(), local.class)}\n      classList={local.classList}\n      onKeyDown={(e) => {\n        callEventHandler(local.onKeyDown, e);\n        if (!e.defaultPrevented) handleKeyDown(e);\n      }}\n      {...rest}\n    >\n      <ToggleGroupContext.Provider value={ctx}>\n        {local.children}\n      </ToggleGroupContext.Provider>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AA0BA,SAAgBW,EACdC,GACa;CACb,IAAMG,IAASf,EACb;EACEgB,UAAU;EACVC,UAAU;EACVC,aAAa;EACbE,WAAW;EACXC,SAAS;CACX,GACAT,CACF,GAEM,CAACU,GAAOC,KAAQtB,EAAWc,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEKS,IAAMnB,EAA+BiB,CAAK,GAC1C,EAAEG,qBAAkBf,EAAuBc,CAAG,GAC9CE,UAAmBJ,EAAMJ,gBAAgB;CAE/C,cAAA;EAAA,IAAAS,IAAAC,EAAA;EA0BqB,OA1BrBD,EAAAE,aAmBgBC,MAAM;GAEhB,AADA1B,EAAiBkB,EAAMS,WAAWD,CAAC,GAC9BA,EAAEE,oBAAkBP,EAAcK,CAAC;EAC1C,GAACG,EAAAN,GAAAO,EAAA;GAAA,IAAA,iBAAA;IAAA,OAlBaZ,EAAMc;GAAO;GAAA,IAAA,cAAA;IAAA,OAChBd,EAAMgB;GAAI;GAAA,IAAA,iBAAA;IAAA,OACPhB,EAAMD;GAAO;GAAA,IAAA,qBAAA;IAAA,OACTC,EAAMJ;GAAW;GAAA,IAAA,kBAAA;IAAA,OAEpBQ,EAAW,IAAI,KAAK;GAAI;GAAA,IAAA,oBAAA;IAAA,OACtBA,EAAW,IAAI,OAAO;GAAE;GAAA,IAAA,kBAAA;IAAA,OAC1BJ,EAAMN,WAAW,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OAC1BM,EAAML,WAAW,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OAC1BK,EAAML,WAAW,SAAS6B,KAAAA;GAAS;GAAA,IAClDC,MAAG;IAAA,OAAEzB,EAAMyB;GAAG;GAAA,IAEdC,QAAK;IAAA,OAAE;KAAE,SAAS1B,EAAMD;KAAS,GAAGC,EAAM0B;IAAM;GAAsB;GAAA,IAAA,QAAA;IAAA,OAC/D7C,EAAKI,EAAoB,GAAGe,EAAM4B,KAAK;GAAC;GAAA,IAC/CC,YAAS;IAAA,OAAE7B,EAAM6B;GAAS;EAAA,GAKtB5B,CAAI,GAAA,IAAA,EAAA,GAAA6B,EAAAzB,GAAA0B,EAEP/C,EAAmBgD,UAAQ;GAACC,OAAO/B;GAAG,IAAAgC,WAAA;IAAA,OACpClC,EAAMkC;GAAQ;EAAA,CAAA,CAAA,GAAA7B;CAAA,EAAA,CAAA;AAIvB;AAAC8B,EAAA,CAAA,SAAA,CAAA"}
+{"version":3,"file":"ToggleGroup.js","names":["splitProps","JSX","clsx","callEventHandler","createToggleGroupState","ToggleGroupContext","toggleGroupVariants","ToggleGroupProps","ToggleGroupValue","useToggleGroupKeyboard","ToggleGroup","props","TValue","Element","local","rest","ctx","handleKeyDown","isVertical","orientation","_el$","_tmpl$","$$keydown","e","onKeyDown","defaultPrevented","_$spread","_$mergeProps","data-variant","variant","data-size","size","data-spacing","spacing","data-orientation","data-vertical","data-horizontal","data-multiple","multiple","data-disabled","disabled","aria-disabled","undefined","dir","style","CSSProperties","class","classList","_$insert","_$createComponent","Provider","value","children","_$delegateEvents","_$mergeProps","_$createComponent","_$delegateEvents","_tmpl$","ToggleGroup","local","rest","splitProps","props","ctx","createToggleGroupState","useToggleGroupKeyboard","isVertical","_el$","callEventHandler","handleKeyDown","spread","mergeProps","\"class\"","clsx","toggleGroupVariants","insert","createComponent","ToggleGroupContext","delegateEvents"],"sources":["../../../../src/components/toggle-group/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { splitProps, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { callEventHandler } from \"../call-event-handler\";\nimport {\n  createToggleGroupState,\n  ToggleGroupContext,\n} from \"./ToggleGroup.context\";\nimport { toggleGroupVariants } from \"./ToggleGroup.styles\";\nimport type { ToggleGroupProps, ToggleGroupValue } from \"./ToggleGroup.types\";\nimport { useToggleGroupKeyboard } from \"./useToggleGroupKeyboard\";\n\n/**\n * ToggleGroup 根组件:渲染 `<div role=\"group\">`,输出样式与语义钩子\n * (`data-orientation` / `data-vertical` / `data-horizontal` / `data-multiple`\n * / `data-disabled` / `data-spacing` / `data-variant` / `data-size`),\n * 并挂载 roving focus 键盘导航。\n *\n * 单选模式(默认)的 value 是标量,多选模式(`multiple`)才是数组:\n *\n * @example\n * ```tsx\n * // 单选\n * <ToggleGroup defaultValue=\"bold\" onValueChange={(v) => ...}>\n *   <ToggleGroupItem value=\"bold\">Bold</ToggleGroupItem>\n * </ToggleGroup>\n *\n * // 多选\n * <ToggleGroup multiple value={[\"bold\"]} onValueChange={(v) => ...}>\n *   <ToggleGroupItem value=\"bold\">Bold</ToggleGroupItem>\n * </ToggleGroup>\n * ```\n */\nexport function ToggleGroup<TValue extends ToggleGroupValue = ToggleGroupValue>(\n  props: ToggleGroupProps<TValue>,\n): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"defaultValue\",\n    \"onValueChange\",\n    \"multiple\",\n    \"disabled\",\n    \"orientation\",\n    \"loopFocus\",\n    \"spacing\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"classList\",\n    \"style\",\n    \"dir\",\n    \"onKeyDown\",\n    \"children\",\n  ]);\n\n  // 默认值与单选/多选的差异统一由状态层处理,渲染用 ctx 里的已解析值\n  const ctx = createToggleGroupState<TValue>(local);\n  const { handleKeyDown } = useToggleGroupKeyboard(ctx);\n  const isVertical = () => ctx.orientation() === \"vertical\";\n\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"toggle-group\"\n      data-variant={ctx.variant()}\n      data-size={ctx.size()}\n      data-spacing={ctx.spacing()}\n      data-orientation={ctx.orientation()}\n      // 拼接态样式依赖 data-vertical / data-horizontal(与 tabs 根保持一致)\n      data-vertical={isVertical() ? \"\" : null}\n      data-horizontal={isVertical() ? null : \"\"}\n      data-multiple={ctx.multiple() ? \"\" : null}\n      data-disabled={ctx.disabled() ? \"\" : null}\n      aria-disabled={ctx.disabled() ? \"true\" : undefined}\n      dir={local.dir}\n      // --gap 作为 spacing 的样式入口,用户 style 可覆盖\n      style={{ \"--gap\": ctx.spacing(), ...local.style } as JSX.CSSProperties}\n      class={clsx(toggleGroupVariants(), local.class)}\n      classList={local.classList}\n      onKeyDown={(e) => {\n        callEventHandler(local.onKeyDown, e);\n        if (!e.defaultPrevented) handleKeyDown(e);\n      }}\n      {...rest}\n    >\n      <ToggleGroupContext.Provider value={ctx}>\n        {local.children}\n      </ToggleGroupContext.Provider>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAgCA,SAAgBU,EACdC,GACa;CACb,IAAM,CAACG,GAAOC,KAAQf,EAAWW,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAGKK,IAAMZ,EAA+BU,CAAK,GAC1C,EAAEG,qBAAkBR,EAAuBO,CAAG,GAC9CE,UAAmBF,EAAIG,YAAY,MAAM;CAE/C,cAAA;EAAA,IAAAC,IAAAC,EAAA;EA0BqB,OA1BrBD,EAAAE,aAmBgBC,MAAM;GAEhB,AADApB,EAAiBW,EAAMU,WAAWD,CAAC,GAC9BA,EAAEE,oBAAkBR,EAAcM,CAAC;EAC1C,GAACG,EAAAN,GAAAO,EAAA;GAAA,IAAA,iBAAA;IAAA,OAlBaX,EAAIa,QAAQ;GAAC;GAAA,IAAA,cAAA;IAAA,OAChBb,EAAIe,KAAK;GAAC;GAAA,IAAA,iBAAA;IAAA,OACPf,EAAIiB,QAAQ;GAAC;GAAA,IAAA,qBAAA;IAAA,OACTjB,EAAIG,YAAY;GAAC;GAAA,IAAA,kBAAA;IAAA,OAEpBD,EAAW,IAAI,KAAK;GAAI;GAAA,IAAA,oBAAA;IAAA,OACtBA,EAAW,IAAI,OAAO;GAAE;GAAA,IAAA,kBAAA;IAAA,OAC1BF,EAAIsB,SAAS,IAAI,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OAC1BtB,EAAIwB,SAAS,IAAI,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OAC1BxB,EAAIwB,SAAS,IAAI,SAASE,KAAAA;GAAS;GAAA,IAClDC,MAAG;IAAA,OAAE7B,EAAM6B;GAAG;GAAA,IAEdC,QAAK;IAAA,OAAE;KAAE,SAAS5B,EAAIiB,QAAQ;KAAG,GAAGnB,EAAM8B;IAAM;GAAsB;GAAA,IAAA4B,QAAA;IAAA,OAC/DtE,EAAKI,EAAoB,GAAGQ,EAAMgC,KAAK;GAAC;GAAA,IAC/CC,YAAS;IAAA,OAAEjC,EAAMiC;GAAS;EAAA,GAKtBhC,CAAI,GAAA,IAAA,EAAA,GAAAiC,EAAA5B,GAAA6B,EAEP5C,EAAmB6C,UAAQ;GAACC,OAAOnC;GAAG,IAAAoC,WAAA;IAAA,OACpCtC,EAAMsC;GAAQ;EAAA,CAAA,CAAA,GAAAhC;CAAA,EAAA,CAAA;AAIvB;AAACiC,EAAA,CAAA,SAAA,CAAA"}

package/dist/components/toggle-group/ToggleGroup/ToggleGroup.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.styles.js","names":[],"sources":["../../../../src/components/toggle-group/ToggleGroup/ToggleGroup.styles.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * ToggleGroup 根容器样式。\n *\n * 根元素同时输出 `data-vertical` / `data-horizontal`(见 ToggleGroup.tsx),\n * 使 `data-vertical:*`、`group-data-vertical/toggle-group:*` 这类选择器生效 ——\n * item 的“拼接态”样式依赖后两者。\n */\nexport const toggleGroupVariants = cva(\n  \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch\",\n);\n"],"mappings":";;AASA,IAAa,IAAsB,EACjC,mMACF"}
+{"version":3,"file":"ToggleGroup.styles.js","names":["toggleGroupVariants","cva"],"sources":["../../../../src/components/toggle-group/ToggleGroup/ToggleGroup.styles.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * ToggleGroup 根容器样式。\n *\n * 根元素同时输出 `data-vertical` / `data-horizontal`(见 ToggleGroup.tsx),\n * 使 `data-vertical:*`、`group-data-vertical/toggle-group:*` 这类选择器生效 ——\n * item 的“拼接态”样式依赖后两者。\n */\nexport const toggleGroupVariants = cva(\n  \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch\",\n);\n"],"mappings":";;AASA,IAAaA,IAAsBC,EACjC,mMACF"}

package/dist/components/toggle-group/ToggleGroup/ToggleGroup.types.d.ts

@@ -28,15 +28,8 @@ export interface ToggleGroupChangeEventDetails {
     readonly isPropagationAllowed: boolean;
     trigger: Element | undefined;
 }
-interface BaseToggleGroupProps<TValue extends ToggleGroupValue> extends BaseProps {
-    /** 受控选中值(数组);不传则内部自管理 */
-    value?: readonly TValue[];
-    /** 非受控模式下的初始选中值 */
-    defaultValue?: readonly TValue[];
-    /** 选中值变化回调(受控与非受控都会触发) */
-    onValueChange?: (value: TValue[], eventDetails: ToggleGroupChangeEventDetails) => void;
-    /** 是否允许同时选中多个,默认 false;单选时再次点击会取消选中(对齐 base-ui) */
-    multiple?: boolean;
+/** 单选与多选共用的 props */
+interface ToggleGroupCommonProps extends BaseProps {
     /** 整组禁用,item 会继承该状态 */
     disabled?: boolean;
     /** 布局方向,默认 "horizontal";同时决定方向键映射与排列方向 */
@@ -53,14 +46,48 @@ interface BaseToggleGroupProps<TValue extends ToggleGroupValue> extends BaseProp
     /** 组级 size,item 未单独指定时继承 */
     size?: ToggleGroupSize;
 }
+/**
+ * 单选模式(默认):`value` / `defaultValue` / `onValueChange` 都是**标量**。
+ *
+ * 这是本项目对 base-ui 的一处有意偏离 —— base-ui 单选时也要求传数组,用起来别扭。
+ * 取消选中时回调收到 `undefined`。
+ *
+ * 注意:`value === undefined` 视为非受控,所以受控的单选组请让信号有确定值
+ * (信号类型建议 `TValue | undefined`,并在传参前用 `??` 兜底,或改用多选数组模式)。
+ */
+export interface ToggleGroupSingleProps<TValue extends ToggleGroupValue = ToggleGroupValue> extends ToggleGroupCommonProps {
+    /** 单选模式标记(默认),不需要显式传 */
+    multiple?: false;
+    /** 受控选中值;不传则内部自管理 */
+    value?: TValue;
+    /** 非受控模式下的初始选中值 */
+    defaultValue?: TValue;
+    /** 选中值变化回调(受控与非受控都会触发) */
+    onValueChange?: (value: TValue | undefined, eventDetails: ToggleGroupChangeEventDetails) => void;
+}
+/** 多选模式(`multiple`):值是数组,未选中时为空数组 */
+export interface ToggleGroupMultipleProps<TValue extends ToggleGroupValue = ToggleGroupValue> extends ToggleGroupCommonProps {
+    /** 多选模式标记 */
+    multiple: true;
+    /** 受控选中值;不传则内部自管理 */
+    value?: readonly TValue[];
+    /** 非受控模式下的初始选中值 */
+    defaultValue?: readonly TValue[];
+    /** 选中值变化回调(受控与非受控都会触发) */
+    onValueChange?: (value: TValue[], eventDetails: ToggleGroupChangeEventDetails) => void;
+}
 /**
  * 值类型由泛型参数决定:
  * - 不传时是宽类型 `ToggleGroupValue`(string | number)
  * - `defaultValue` / `value` / `onValueChange` 中任意一处给出具体类型即可推导,
- *   例如 `defaultValue={[1]}` 会推导出 `number[]`
+ *   例如 `defaultValue={1}` 会推导出 `number`
  * - 也可显式指定:`<ToggleGroup<"bold" | "italic"> />`
+ *
+ * `multiple` 决定值的形状:单选是标量,多选是数组(传错会被类型拦住)。
  */
-export type ToggleGroupProps<TValue extends ToggleGroupValue = ToggleGroupValue> = PolymorphicProps<"div", BaseToggleGroupProps<TValue>, false>;
+export type ToggleGroupProps<TValue extends ToggleGroupValue = ToggleGroupValue> = PolymorphicProps<"div", ToggleGroupSingleProps<TValue> | ToggleGroupMultipleProps<TValue>, false>;
+/** 两种模式下 onValueChange 的联合类型(供内部状态实现使用) */
+export type ToggleGroupChangeHandler<TValue extends ToggleGroupValue> = NonNullable<ToggleGroupSingleProps<TValue>["onValueChange"]> | NonNullable<ToggleGroupMultipleProps<TValue>["onValueChange"]>;
 /** 已注册的 item,供 roving focus 与键盘导航使用 */
 export interface ToggleGroupItemEntry<TValue extends ToggleGroupValue = ToggleGroupValue> {
     value: TValue;
@@ -69,7 +96,10 @@ export interface ToggleGroupItemEntry<TValue extends ToggleGroupValue = ToggleGr
     disabled: () => boolean;
 }
 export interface ToggleGroupContextValue<TValue extends ToggleGroupValue = ToggleGroupValue> {
-    /** 当前选中值(受控优先,否则内部状态) */
+    /**
+     * 当前选中值,**已规范化成数组**:单选模式是 0 或 1 个元素。
+     * 判断某个 item 是否选中请用 `isPressed`。
+     */
     value: Accessor<readonly TValue[]>;
     multiple: Accessor<boolean>;
     disabled: Accessor<boolean>;
@@ -89,7 +119,7 @@ export interface ToggleGroupContextValue<TValue extends ToggleGroupValue = Toggl
      */
     /** 该 value 当前是否处于按下状态 */
     isPressed(value: TValue): boolean;
-    /** 切换某个 item 的按下状态,并派发 onValueChange(value, details) */
+    /** 切换某个 item 的按下状态,并按模式派发 onValueChange */
     toggleItem(value: TValue, event: Event, trigger?: Element): void;
     setHighlightedValue(value: TValue): void;
     /** 按挂载顺序注册 item,返回注销函数 */

package/dist/components/toggle-group/ToggleGroup/create-change-event-details.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-change-event-details.js","names":[],"sources":["../../../../src/components/toggle-group/ToggleGroup/create-change-event-details.ts"],"sourcesContent":["import type { ToggleGroupChangeEventDetails } from \"./ToggleGroup.types\";\n\n/**\n * 构造 onValueChange 的事件详情(对齐 base-ui 的 `ChangeEventDetails`)。\n *\n * `isCanceled` / `isPropagationAllowed` 用 getter 暴露:回调内部可以即时读到\n * `cancel()` / `allowPropagation()` 之后的最新值,而不是创建时的快照。\n */\nexport function createChangeEventDetails(\n  event: Event,\n  trigger?: Element,\n): ToggleGroupChangeEventDetails {\n  let canceled = false;\n  let propagationAllowed = false;\n\n  return {\n    reason: \"none\",\n    event,\n    trigger,\n    cancel: () => {\n      canceled = true;\n    },\n    allowPropagation: () => {\n      propagationAllowed = true;\n    },\n    get isCanceled() {\n      return canceled;\n    },\n    get isPropagationAllowed() {\n      return propagationAllowed;\n    },\n  };\n}\n"],"mappings":";AAQA,SAAgB,EACd,GACA,GAC+B;CAC/B,IAAI,IAAW,IACX,IAAqB;CAEzB,OAAO;EACL,QAAQ;EACR;EACA;EACA,cAAc;GACZ,IAAW;EACb;EACA,wBAAwB;GACtB,IAAqB;EACvB;EACA,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,uBAAuB;GACzB,OAAO;EACT;CACF;AACF"}
+{"version":3,"file":"create-change-event-details.js","names":["createChangeEventDetails","canceled","propagationAllowed"],"sources":["../../../../src/components/toggle-group/ToggleGroup/create-change-event-details.ts"],"sourcesContent":["import type { ToggleGroupChangeEventDetails } from \"./ToggleGroup.types\";\n\n/**\n * 构造 onValueChange 的事件详情(对齐 base-ui 的 `ChangeEventDetails`)。\n *\n * `isCanceled` / `isPropagationAllowed` 用 getter 暴露:回调内部可以即时读到\n * `cancel()` / `allowPropagation()` 之后的最新值,而不是创建时的快照。\n */\nexport function createChangeEventDetails(\n  event: Event,\n  trigger?: Element,\n): ToggleGroupChangeEventDetails {\n  let canceled = false;\n  let propagationAllowed = false;\n\n  return {\n    reason: \"none\",\n    event,\n    trigger,\n    cancel: () => {\n      canceled = true;\n    },\n    allowPropagation: () => {\n      propagationAllowed = true;\n    },\n    get isCanceled() {\n      return canceled;\n    },\n    get isPropagationAllowed() {\n      return propagationAllowed;\n    },\n  };\n}\n"],"mappings":";AAQA,SAAgBA,EACd,GACA,GAC+B;CAC/B,IAAIC,IAAW,IACXC,IAAqB;CAEzB,OAAO;EACL,QAAQ;EACR;EACA;EACA,cAAc;GACZ,IAAW;EACb;EACA,wBAAwB;GACtB,IAAqB;EACvB;EACA,IAAI,aAAa;GACf,OAAOD;EACT;EACA,IAAI,uBAAuB;GACzB,OAAOC;EACT;CACF;AACF"}

package/dist/components/toggle-group/ToggleGroup/index.d.ts

@@ -1,3 +1,3 @@
 export { ToggleGroup } from './ToggleGroup';
 export { ToggleGroupContext, useToggleGroupContext, } from './ToggleGroup.context';
-export type { ToggleGroupProps, ToggleGroupValue, ToggleGroupContextValue, ToggleGroupItemEntry, ToggleGroupOrientation, ToggleGroupVariant, ToggleGroupSize, ToggleGroupChangeEventDetails, ToggleGroupChangeEventReason, } from './ToggleGroup.types';
+export type { ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupValue, ToggleGroupContextValue, ToggleGroupItemEntry, ToggleGroupOrientation, ToggleGroupVariant, ToggleGroupSize, ToggleGroupChangeEventDetails, ToggleGroupChangeEventReason, } from './ToggleGroup.types';

package/dist/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToggleGroupKeyboard.js","names":[],"sources":["../../../../src/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.ts"],"sourcesContent":["import type {\n  ToggleGroupContextValue,\n  ToggleGroupValue,\n} from \"./ToggleGroup.types\";\n\n/** 键盘导航按键:方向键 + Home/End(对齐 base-ui CompositeRoot 的 enableHomeAndEndKeys) */\nconst NAV_KEYS = new Set([\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowUp\",\n  \"ArrowDown\",\n  \"Home\",\n  \"End\",\n]);\n\n/**\n * ToggleGroup 的 roving focus 键盘导航(纯逻辑,可独立单测)。\n *\n * 方向映射:\n * - horizontal + ltr: ArrowRight → next, ArrowLeft → prev\n * - horizontal + rtl: 左右反转\n * - vertical:          ArrowDown → next, ArrowUp → prev\n * - Home → 第一个,End → 最后一个\n * - loopFocus=true 环绕,false 边界停止;跳过 disabled 的 item\n *\n * 只有焦点已经在某个 item 上时才接管按键,避免影响外部其它元素;\n * 移动焦点后由 item 的 onFocus 更新高亮。\n */\nexport function useToggleGroupKeyboard<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(ctx: ToggleGroupContextValue<TValue>) {\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (ctx.disabled()) return;\n    if (!NAV_KEYS.has(e.key)) return;\n\n    const activeEl = document.activeElement as HTMLElement | null;\n    const items = ctx.getItems().filter((item) => !item.disabled());\n    if (items.length === 0) return;\n\n    const currentIndex = items.findIndex((item) => item.element === activeEl);\n    if (currentIndex === -1) return;\n\n    const isVertical = ctx.orientation() === \"vertical\";\n    // dir 未指定/auto 时,按根元素的实际书写方向判断(兼容祖先节点上的 dir)\n    const dir = ctx.dir();\n    const isRTL =\n      dir === \"rtl\" ||\n      (dir !== \"ltr\" &&\n        typeof document !== \"undefined\" &&\n        getComputedStyle(e.currentTarget as Element).direction === \"rtl\");\n\n    let nextIndex: number | undefined;\n    switch (e.key) {\n      case \"Home\":\n        nextIndex = 0;\n        break;\n      case \"End\":\n        nextIndex = items.length - 1;\n        break;\n      case \"ArrowLeft\":\n        if (isVertical) return;\n        nextIndex = currentIndex + (isRTL ? 1 : -1);\n        break;\n      case \"ArrowRight\":\n        if (isVertical) return;\n        nextIndex = currentIndex + (isRTL ? -1 : 1);\n        break;\n      case \"ArrowUp\":\n        if (!isVertical) return;\n        nextIndex = currentIndex - 1;\n        break;\n      case \"ArrowDown\":\n        if (!isVertical) return;\n        nextIndex = currentIndex + 1;\n        break;\n    }\n\n    if (nextIndex === undefined) return;\n\n    // 方向键与当前布局匹配,接管默认滚动行为\n    e.preventDefault();\n\n    if (ctx.loopFocus()) {\n      nextIndex = (nextIndex + items.length) % items.length;\n    } else {\n      nextIndex = Math.min(items.length - 1, Math.max(0, nextIndex));\n    }\n\n    items[nextIndex].element.focus();\n    ctx.setHighlightedValue(items[nextIndex].value);\n  };\n\n  return { handleKeyDown };\n}\n"],"mappings":";AAMA,IAAM,oBAAW,IAAI,IAAI;CACvB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAeD,SAAgB,EAEd,GAAsC;CA8DtC,OAAO,EAAE,gBA7Dc,MAAqB;EAE1C,IADI,EAAI,SAAS,KACb,CAAC,EAAS,IAAI,EAAE,GAAG,GAAG;EAE1B,IAAM,IAAW,SAAS,eACpB,IAAQ,EAAI,SAAS,CAAC,CAAC,QAAQ,MAAS,CAAC,EAAK,SAAS,CAAC;EAC9D,IAAI,EAAM,WAAW,GAAG;EAExB,IAAM,IAAe,EAAM,WAAW,MAAS,EAAK,YAAY,CAAQ;EACxE,IAAI,MAAiB,IAAI;EAEzB,IAAM,IAAa,EAAI,YAAY,MAAM,YAEnC,IAAM,EAAI,IAAI,GACd,IACJ,MAAQ,SACP,MAAQ,SACP,OAAO,WAAa,OACpB,iBAAiB,EAAE,aAAwB,CAAC,CAAC,cAAc,OAE3D;EACJ,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,IAAY;IACZ;GACF,KAAK;IACH,IAAY,EAAM,SAAS;IAC3B;GACF,KAAK;IACH,IAAI,GAAY;IAChB,IAAY,KAAgB,IAAQ,IAAI;IACxC;GACF,KAAK;IACH,IAAI,GAAY;IAChB,IAAY,KAAgB,IAAQ,KAAK;IACzC;GACF,KAAK;IACH,IAAI,CAAC,GAAY;IACjB,IAAY,IAAe;IAC3B;GACF,KAAK;IACH,IAAI,CAAC,GAAY;IACjB,IAAY,IAAe;EAE/B;EAEI,MAAc,KAAA,MAGlB,EAAE,eAAe,GAEjB,AAGE,IAHE,EAAI,UAAU,KACH,IAAY,EAAM,UAAU,EAAM,SAEnC,KAAK,IAAI,EAAM,SAAS,GAAG,KAAK,IAAI,GAAG,CAAS,CAAC,GAG/D,EAAM,EAAU,CAAC,QAAQ,MAAM,GAC/B,EAAI,oBAAoB,EAAM,EAAU,CAAC,KAAK;CAChD,EAEuB;AACzB"}
+{"version":3,"file":"useToggleGroupKeyboard.js","names":["NAV_KEYS","useToggleGroupKeyboard","ctx","e","activeEl","items","item","currentIndex","isVertical","dir","isRTL","nextIndex"],"sources":["../../../../src/components/toggle-group/ToggleGroup/useToggleGroupKeyboard.ts"],"sourcesContent":["import type {\n  ToggleGroupContextValue,\n  ToggleGroupValue,\n} from \"./ToggleGroup.types\";\n\n/** 键盘导航按键:方向键 + Home/End(对齐 base-ui CompositeRoot 的 enableHomeAndEndKeys) */\nconst NAV_KEYS = new Set([\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowUp\",\n  \"ArrowDown\",\n  \"Home\",\n  \"End\",\n]);\n\n/**\n * ToggleGroup 的 roving focus 键盘导航(纯逻辑,可独立单测)。\n *\n * 方向映射:\n * - horizontal + ltr: ArrowRight → next, ArrowLeft → prev\n * - horizontal + rtl: 左右反转\n * - vertical:          ArrowDown → next, ArrowUp → prev\n * - Home → 第一个,End → 最后一个\n * - loopFocus=true 环绕,false 边界停止;跳过 disabled 的 item\n *\n * 只有焦点已经在某个 item 上时才接管按键,避免影响外部其它元素;\n * 移动焦点后由 item 的 onFocus 更新高亮。\n */\nexport function useToggleGroupKeyboard<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(ctx: ToggleGroupContextValue<TValue>) {\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (ctx.disabled()) return;\n    if (!NAV_KEYS.has(e.key)) return;\n\n    const activeEl = document.activeElement as HTMLElement | null;\n    const items = ctx.getItems().filter((item) => !item.disabled());\n    if (items.length === 0) return;\n\n    const currentIndex = items.findIndex((item) => item.element === activeEl);\n    if (currentIndex === -1) return;\n\n    const isVertical = ctx.orientation() === \"vertical\";\n    // dir 未指定/auto 时,按根元素的实际书写方向判断(兼容祖先节点上的 dir)\n    const dir = ctx.dir();\n    const isRTL =\n      dir === \"rtl\" ||\n      (dir !== \"ltr\" &&\n        typeof document !== \"undefined\" &&\n        getComputedStyle(e.currentTarget as Element).direction === \"rtl\");\n\n    let nextIndex: number | undefined;\n    switch (e.key) {\n      case \"Home\":\n        nextIndex = 0;\n        break;\n      case \"End\":\n        nextIndex = items.length - 1;\n        break;\n      case \"ArrowLeft\":\n        if (isVertical) return;\n        nextIndex = currentIndex + (isRTL ? 1 : -1);\n        break;\n      case \"ArrowRight\":\n        if (isVertical) return;\n        nextIndex = currentIndex + (isRTL ? -1 : 1);\n        break;\n      case \"ArrowUp\":\n        if (!isVertical) return;\n        nextIndex = currentIndex - 1;\n        break;\n      case \"ArrowDown\":\n        if (!isVertical) return;\n        nextIndex = currentIndex + 1;\n        break;\n    }\n\n    if (nextIndex === undefined) return;\n\n    // 方向键与当前布局匹配,接管默认滚动行为\n    e.preventDefault();\n\n    if (ctx.loopFocus()) {\n      nextIndex = (nextIndex + items.length) % items.length;\n    } else {\n      nextIndex = Math.min(items.length - 1, Math.max(0, nextIndex));\n    }\n\n    items[nextIndex].element.focus();\n    ctx.setHighlightedValue(items[nextIndex].value);\n  };\n\n  return { handleKeyDown };\n}\n"],"mappings":";AAMA,IAAMA,oBAAW,IAAI,IAAI;CACvB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAeD,SAAgBC,EAEd,GAAsC;CA8DtC,OAAO,EAAE,gBA7Dc,MAAqB;EAE1C,IADIC,EAAI,SAAS,KACb,CAACF,EAAS,IAAIG,EAAE,GAAG,GAAG;EAE1B,IAAMC,IAAW,SAAS,eACpBC,IAAQH,EAAI,SAAS,CAAC,CAAC,QAAQ,MAAS,CAACI,EAAK,SAAS,CAAC;EAC9D,IAAID,EAAM,WAAW,GAAG;EAExB,IAAME,IAAeF,EAAM,WAAW,MAASC,EAAK,YAAYF,CAAQ;EACxE,IAAIG,MAAiB,IAAI;EAEzB,IAAMC,IAAaN,EAAI,YAAY,MAAM,YAEnCO,IAAMP,EAAI,IAAI,GACdQ,IACJD,MAAQ,SACPA,MAAQ,SACP,OAAO,WAAa,OACpB,iBAAiBN,EAAE,aAAwB,CAAC,CAAC,cAAc,OAE3DQ;EACJ,QAAQR,EAAE,KAAV;GACE,KAAK;IACH,IAAY;IACZ;GACF,KAAK;IACH,IAAYE,EAAM,SAAS;IAC3B;GACF,KAAK;IACH,IAAIG,GAAY;IAChB,IAAYD,KAAgBG,IAAQ,IAAI;IACxC;GACF,KAAK;IACH,IAAIF,GAAY;IAChB,IAAYD,KAAgBG,IAAQ,KAAK;IACzC;GACF,KAAK;IACH,IAAI,CAACF,GAAY;IACjB,IAAYD,IAAe;IAC3B;GACF,KAAK;IACH,IAAI,CAACC,GAAY;IACjB,IAAYD,IAAe;EAE/B;EAEA,AAAII,MAAc,KAAA,MAGlBR,EAAE,eAAe,GAEjB,AAGEQ,IAHET,EAAI,UAAU,KACHS,IAAYN,EAAM,UAAUA,EAAM,SAEnC,KAAK,IAAIA,EAAM,SAAS,GAAG,KAAK,IAAI,GAAGM,CAAS,CAAC,GAG/DN,EAAMM,EAAU,CAAC,QAAQ,MAAM,GAC/BT,EAAI,oBAAoBG,EAAMM,EAAU,CAAC,KAAK;CAChD,EAEuB;AACzB"}

package/dist/components/toggle-group/ToggleGroupItem/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","names":["mergeProps","onCleanup","onMount","splitProps","JSX","clsx","toggleVariants","callEventHandler","useToggleGroupContext","ToggleGroupValue","toggleGroupItemVariants","ToggleGroupItemProps","ToggleGroupItem","props","TValue","Element","ctx","merged","type","const","local","rest","elementRef","HTMLButtonElement","variant","size","pressed","isPressed","value","disabled","tabIndex","highlighted","highlightedValue","isUsable","undefined","isFirstEnabled","registerItem","element","_el$","_tmpl$","addEventListener","e","setHighlightedValue","onFocus","$$click","onClick","defaultPrevented","toggleItem","currentTarget","_$use","el","_$spread","_$mergeProps","tabindex","data-variant","data-size","data-spacing","spacing","data-pressed","data-disabled","data-state","aria-pressed","class","classList","_$insert","children","_$delegateEvents"],"sources":["../../../../src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.tsx"],"sourcesContent":["import { mergeProps, onCleanup, onMount, splitProps, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { toggleVariants } from \"~/components/toggle/Toggle/Toggle.styles\";\nimport { callEventHandler } from \"../call-event-handler\";\nimport { useToggleGroupContext } from \"../ToggleGroup/ToggleGroup.context\";\nimport type { ToggleGroupValue } from \"../ToggleGroup/ToggleGroup.types\";\nimport { toggleGroupItemVariants } from \"./ToggleGroupItem.styles\";\nimport type { ToggleGroupItemProps } from \"./ToggleGroupItem.types\";\n\n/**\n * ToggleGroupItem:ToggleGroup 内的两态按钮。\n *\n * - 选中值由 ToggleGroup 统一持有,点击通过 `ctx.toggleItem` 触发变更\n * - disabled 继承整组状态,可在 item 上单独禁用\n * - roving tabindex:整组只有一个 tab 停靠点,方向键在同组内移动焦点\n */\nexport function ToggleGroupItem<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(props: ToggleGroupItemProps<TValue>): JSX.Element {\n  // context 用宽值类型读取:item 无法从父级推导 group 的值类型,\n  // 自己的 TValue 始终可以传给宽类型参数\n  const ctx = useToggleGroupContext(\"ToggleGroupItem\");\n  const merged = mergeProps({ type: \"button\" as const }, props);\n\n  const [local, rest] = splitProps(merged, [\n    \"value\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"classList\",\n    \"disabled\",\n    \"type\",\n    \"onClick\",\n    \"onFocus\",\n    \"children\",\n  ]);\n\n  let elementRef: HTMLButtonElement | undefined;\n\n  // 组级未显式指定 variant/size 时,item 可单独覆盖\n  const variant = () => ctx.variant() ?? local.variant ?? \"default\";\n  const size = () => ctx.size() ?? local.size ?? \"default\";\n  const pressed = () => ctx.isPressed(local.value);\n  const disabled = () => ctx.disabled() || !!local.disabled;\n\n  // roving tabindex:高亮 item 持 0;高亮缺失或指向不可用 item(disabled/卸载)时,\n  // 首个可用 item 持 0 作为键盘起点,避免整组键盘不可达\n  const tabIndex = () => {\n    if (disabled()) return -1;\n    const highlighted = ctx.highlightedValue();\n    if (highlighted === local.value && ctx.isUsable(local.value)) return 0;\n    if (\n      (highlighted === undefined || !ctx.isUsable(highlighted)) &&\n      ctx.isFirstEnabled(local.value)\n    ) {\n      return 0;\n    }\n    return -1;\n  };\n\n  onMount(() => {\n    onCleanup(\n      ctx.registerItem({\n        value: local.value,\n        disabled,\n        element: elementRef!,\n      }),\n    );\n  });\n\n  return (\n    <button\n      ref={(el) => {\n        elementRef = el;\n      }}\n      type={local.type}\n      disabled={disabled()}\n      tabindex={tabIndex()}\n      data-slot=\"toggle-group-item\"\n      data-variant={variant()}\n      data-size={size()}\n      data-spacing={ctx.spacing()}\n      data-pressed={pressed() ? \"\" : null}\n      data-disabled={disabled() ? \"\" : null}\n      data-state={pressed() ? \"on\" : \"off\"}\n      aria-pressed={pressed()}\n      class={clsx(\n        toggleVariants({ variant: variant(), size: size() }),\n        toggleGroupItemVariants(),\n        local.class,\n      )}\n      classList={local.classList}\n      onClick={(e) => {\n        // 用户回调优先,可用 preventDefault() 阻止本次选中\n        callEventHandler(local.onClick, e);\n        if (!e.defaultPrevented && !disabled()) {\n          ctx.toggleItem(local.value, e, e.currentTarget);\n        }\n      }}\n      onFocus={(e) => {\n        // 聚焦更新高亮(roving focus 起点)\n        if (!disabled()) ctx.setHighlightedValue(local.value);\n        callEventHandler(local.onFocus, e);\n      }}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgBY,EAEdC,GAAkD;CAGlD,IAAMG,IAAMR,EAAsB,iBAAiB,GAC7CS,IAASjB,EAAW,EAAEkB,MAAM,SAAkB,GAAGL,CAAK,GAEtD,CAACO,GAAOC,KAAQlB,EAAWc,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEGK,GAGEE,UAAgBR,EAAIQ,QAAQ,KAAKJ,EAAMI,WAAW,WAClDC,UAAaT,EAAIS,KAAK,KAAKL,EAAMK,QAAQ,WACzCC,UAAgBV,EAAIW,UAAUP,EAAMQ,KAAK,GACzCC,UAAiBb,EAAIa,SAAS,KAAK,CAAC,CAACT,EAAMS,UAI3CC,UAAiB;EACrB,IAAID,EAAS,GAAG,OAAO;EACvB,IAAME,IAAcf,EAAIgB,iBAAiB;EAQzC,OAPID,MAAgBX,EAAMQ,SAASZ,EAAIiB,SAASb,EAAMQ,KAAK,MAExDG,MAAgBG,KAAAA,KAAa,CAAClB,EAAIiB,SAASF,CAAW,MACvDf,EAAImB,eAAef,EAAMQ,KAAK,IAEvB,IAEF;CACT;CAYA,OAVA1B,QAAc;EACZD,EACEe,EAAIoB,aAAa;GACfR,OAAOR,EAAMQ;GACbC;GACAQ,SAASf;EACX,CAAC,CACH;CACF,CAAC,UAED;EAAA,IAAAgB,IAAAC,EAAA;EAoCmB,OApCnBD,EAAAE,iBAAA,UA6BcC,MAAM;GAGdlC,AADKsB,EAAS,KAAGb,EAAI0B,oBAAoBtB,EAAMQ,KAAK,GACpDrB,EAAiBa,EAAMuB,SAASF,CAAC;EACnC,CAAC,GAAAH,EAAAM,WAXSH,MAAM;GAGd,AADAlC,EAAiBa,EAAMyB,SAASJ,CAAC,GAC7B,CAACA,EAAEK,oBAAoB,CAACjB,EAAS,KACnCb,EAAI+B,WAAW3B,EAAMQ,OAAOa,GAAGA,EAAEO,aAAa;EAElD,GAACC,GA1BKC,MAAO;GACX5B,IAAa4B;EACf,GAACZ,CAAA,GAAAa,EAAAb,GAAAc,EAAA;GAAA,IACDlC,OAAI;IAAA,OAAEE,EAAMF;GAAI;GAAA,IAChBW,WAAQ;IAAA,OAAEA,EAAS;GAAC;GAAA,IACpBwB,WAAQ;IAAA,OAAEvB,EAAS;GAAC;GAAA,IAAA,iBAAA;IAAA,OAENN,EAAQ;GAAC;GAAA,IAAA,cAAA;IAAA,OACZC,EAAK;GAAC;GAAA,IAAA,iBAAA;IAAA,OACHT,EAAIyC,QAAQ;GAAC;GAAA,IAAA,iBAAA;IAAA,OACb/B,EAAQ,IAAI,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OACpBG,EAAS,IAAI,KAAK;GAAI;GAAA,IAAA,eAAA;IAAA,OACzBH,EAAQ,IAAI,OAAO;GAAK;GAAA,IAAA,iBAAA;IAAA,OACtBA,EAAQ;GAAC;GAAA,IAAA,QAAA;IAAA,OAChBrB,EACLC,EAAe;KAAEkB,SAASA,EAAQ;KAAGC,MAAMA,EAAK;IAAE,CAAC,GACnDf,EAAwB,GACxBU,EAAM0C,KACR;GAAC;GAAA,IACDC,YAAS;IAAA,OAAE3C,EAAM2C;GAAS;EAAA,GAatB1C,CAAI,GAAA,IAAA,EAAA,GAAA2C,EAAA1B,SAEPlB,EAAM6C,QAAQ,GAAA3B;CAAA,EAAA,CAAA;AAGrB;AAAC4B,EAAA,CAAA,OAAA,CAAA"}
+{"version":3,"file":"ToggleGroupItem.js","names":["mergeProps","onCleanup","onMount","splitProps","JSX","clsx","toggleVariants","callEventHandler","useToggleGroupContext","ToggleGroupValue","toggleGroupItemVariants","ToggleGroupItemProps","ToggleGroupItem","props","TValue","Element","ctx","merged","type","const","local","rest","elementRef","HTMLButtonElement","variant","size","pressed","isPressed","value","disabled","tabIndex","highlighted","highlightedValue","isUsable","undefined","isFirstEnabled","registerItem","element","_el$","_tmpl$","addEventListener","e","setHighlightedValue","onFocus","$$click","onClick","defaultPrevented","toggleItem","currentTarget","_$use","el","_$spread","_$mergeProps","tabindex","data-variant","data-size","data-spacing","spacing","data-pressed","data-disabled","data-state","aria-pressed","class","classList","_$insert","children","_$delegateEvents","mergeProps","_$mergeProps","_$delegateEvents","mergeProps$1","_tmpl$","ToggleGroupItem","ctx","useToggleGroupContext","merged","props","local","rest","splitProps","elementRef","variant","size","pressed","disabled","tabIndex","highlighted","onMount","_el$","callEventHandler","use","el","spread","mergeProps","\"class\"","clsx","toggleVariants","toggleGroupItemVariants","insert","delegateEvents"],"sources":["../../../../src/components/toggle-group/ToggleGroupItem/ToggleGroupItem.tsx"],"sourcesContent":["import { mergeProps, onCleanup, onMount, splitProps, type JSX } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { toggleVariants } from \"~/components/toggle/Toggle/Toggle.styles\";\nimport { callEventHandler } from \"../call-event-handler\";\nimport { useToggleGroupContext } from \"../ToggleGroup/ToggleGroup.context\";\nimport type { ToggleGroupValue } from \"../ToggleGroup/ToggleGroup.types\";\nimport { toggleGroupItemVariants } from \"./ToggleGroupItem.styles\";\nimport type { ToggleGroupItemProps } from \"./ToggleGroupItem.types\";\n\n/**\n * ToggleGroupItem:ToggleGroup 内的两态按钮。\n *\n * - 选中值由 ToggleGroup 统一持有,点击通过 `ctx.toggleItem` 触发变更\n * - disabled 继承整组状态,可在 item 上单独禁用\n * - roving tabindex:整组只有一个 tab 停靠点,方向键在同组内移动焦点\n */\nexport function ToggleGroupItem<\n  TValue extends ToggleGroupValue = ToggleGroupValue,\n>(props: ToggleGroupItemProps<TValue>): JSX.Element {\n  // context 用宽值类型读取:item 无法从父级推导 group 的值类型,\n  // 自己的 TValue 始终可以传给宽类型参数\n  const ctx = useToggleGroupContext(\"ToggleGroupItem\");\n  const merged = mergeProps({ type: \"button\" as const }, props);\n\n  const [local, rest] = splitProps(merged, [\n    \"value\",\n    \"variant\",\n    \"size\",\n    \"class\",\n    \"classList\",\n    \"disabled\",\n    \"type\",\n    \"onClick\",\n    \"onFocus\",\n    \"children\",\n  ]);\n\n  let elementRef: HTMLButtonElement | undefined;\n\n  // 组级未显式指定 variant/size 时,item 可单独覆盖\n  const variant = () => ctx.variant() ?? local.variant ?? \"default\";\n  const size = () => ctx.size() ?? local.size ?? \"default\";\n  const pressed = () => ctx.isPressed(local.value);\n  const disabled = () => ctx.disabled() || !!local.disabled;\n\n  // roving tabindex:高亮 item 持 0;高亮缺失或指向不可用 item(disabled/卸载)时,\n  // 首个可用 item 持 0 作为键盘起点,避免整组键盘不可达\n  const tabIndex = () => {\n    if (disabled()) return -1;\n    const highlighted = ctx.highlightedValue();\n    if (highlighted === local.value && ctx.isUsable(local.value)) return 0;\n    if (\n      (highlighted === undefined || !ctx.isUsable(highlighted)) &&\n      ctx.isFirstEnabled(local.value)\n    ) {\n      return 0;\n    }\n    return -1;\n  };\n\n  onMount(() => {\n    onCleanup(\n      ctx.registerItem({\n        value: local.value,\n        disabled,\n        element: elementRef!,\n      }),\n    );\n  });\n\n  return (\n    <button\n      ref={(el) => {\n        elementRef = el;\n      }}\n      type={local.type}\n      disabled={disabled()}\n      tabindex={tabIndex()}\n      data-slot=\"toggle-group-item\"\n      data-variant={variant()}\n      data-size={size()}\n      data-spacing={ctx.spacing()}\n      data-pressed={pressed() ? \"\" : null}\n      data-disabled={disabled() ? \"\" : null}\n      data-state={pressed() ? \"on\" : \"off\"}\n      aria-pressed={pressed()}\n      class={clsx(\n        toggleVariants({ variant: variant(), size: size() }),\n        toggleGroupItemVariants(),\n        local.class,\n      )}\n      classList={local.classList}\n      onClick={(e) => {\n        // 用户回调优先,可用 preventDefault() 阻止本次选中\n        callEventHandler(local.onClick, e);\n        if (!e.defaultPrevented && !disabled()) {\n          ctx.toggleItem(local.value, e, e.currentTarget);\n        }\n      }}\n      onFocus={(e) => {\n        // 聚焦更新高亮(roving focus 起点)\n        if (!disabled()) ctx.setHighlightedValue(local.value);\n        callEventHandler(local.onFocus, e);\n      }}\n      {...rest}\n    >\n      {local.children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgBY,EAEdC,GAAkD;CAGlD,IAAMG,IAAMR,EAAsB,iBAAiB,GAC7CS,IAASjB,EAAW,EAAEkB,MAAM,SAAkB,GAAGL,CAAK,GAEtD,CAACO,GAAOC,KAAQlB,EAAWc,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEGK,GAGEE,UAAgBR,EAAIQ,QAAQ,KAAKJ,EAAMI,WAAW,WAClDC,UAAaT,EAAIS,KAAK,KAAKL,EAAMK,QAAQ,WACzCC,UAAgBV,EAAIW,UAAUP,EAAMQ,KAAK,GACzCC,UAAiBb,EAAIa,SAAS,KAAK,CAAC,CAACT,EAAMS,UAI3CC,UAAiB;EACrB,IAAID,EAAS,GAAG,OAAO;EACvB,IAAME,IAAcf,EAAIgB,iBAAiB;EAQzC,OAPID,MAAgBX,EAAMQ,SAASZ,EAAIiB,SAASb,EAAMQ,KAAK,MAExDG,MAAgBG,KAAAA,KAAa,CAAClB,EAAIiB,SAASF,CAAW,MACvDf,EAAImB,eAAef,EAAMQ,KAAK,IAEvB,IAEF;CACT;CAYA,OAVA1B,QAAc;EACZD,EACEe,EAAIoB,aAAa;GACfR,OAAOR,EAAMQ;GACbC;GACAQ,SAASf;EACX,CAAC,CACH;CACF,CAAC,UAED;EAAA,IAAAgB,IAAAC,EAAA;EAoCmB,OApCnBD,EAAAE,iBAAA,UA6BcC,MAAM;GAGdlC,AADKsB,EAAS,KAAGb,EAAI0B,oBAAoBtB,EAAMQ,KAAK,GACpDrB,EAAiBa,EAAMuB,SAASF,CAAC;EACnC,CAAC,GAAAH,EAAAM,WAXSH,MAAM;GAGd,AADAlC,EAAiBa,EAAMyB,SAASJ,CAAC,GAC7B,CAACA,EAAEK,oBAAoB,CAACjB,EAAS,KACnCb,EAAI+B,WAAW3B,EAAMQ,OAAOa,GAAGA,EAAEO,aAAa;EAElD,GAACC,GA1BKC,MAAO;GACX5B,IAAa4B;EACf,GAACZ,CAAA,GAAAa,EAAAb,GAAAc,EAAA;GAAA,IACDlC,OAAI;IAAA,OAAEE,EAAMF;GAAI;GAAA,IAChBW,WAAQ;IAAA,OAAEA,EAAS;GAAC;GAAA,IACpBwB,WAAQ;IAAA,OAAEvB,EAAS;GAAC;GAAA,IAAA,iBAAA;IAAA,OAENN,EAAQ;GAAC;GAAA,IAAA,cAAA;IAAA,OACZC,EAAK;GAAC;GAAA,IAAA,iBAAA;IAAA,OACHT,EAAIyC,QAAQ;GAAC;GAAA,IAAA,iBAAA;IAAA,OACb/B,EAAQ,IAAI,KAAK;GAAI;GAAA,IAAA,kBAAA;IAAA,OACpBG,EAAS,IAAI,KAAK;GAAI;GAAA,IAAA,eAAA;IAAA,OACzBH,EAAQ,IAAI,OAAO;GAAK;GAAA,IAAA,iBAAA;IAAA,OACtBA,EAAQ;GAAC;GAAA,IAAAoE,QAAA;IAAA,OAChBzF,EACLC,EAAe;KAAEkB,SAASA,EAAQ;KAAGC,MAAMA,EAAK;IAAE,CAAC,GACnDf,EAAwB,GACxBU,EAAM0C,KACR;GAAC;GAAA,IACDC,YAAS;IAAA,OAAE3C,EAAM2C;GAAS;EAAA,GAatB1C,CAAI,GAAA,IAAA,EAAA,GAAA2C,EAAA1B,SAEPlB,EAAM6C,QAAQ,GAAA3B;CAAA,EAAA,CAAA;AAGrB;AAAC4B,EAAA,CAAA,OAAA,CAAA"}