@yoka-ui/ui 1.0.10-test → 1.1.0

package/dist/es/creative/ArcCheckbox/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type ArcCheckboxProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'className'> & {
+    className?: string;
+};
+/**
+ * 无背景；未选中为带缺口的圆环线框持续旋转（loading 感）；选中为描边对勾动画。
+ * 纯图标场景请为 `input` 传入 `aria-label`（或外层可见文案）以保证可访问性。
+ */
+export declare const ArcCheckbox: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "className" | "type"> & {
+    className?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export default ArcCheckbox;

package/dist/es/creative/ArcCheckbox/index.js

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/creative/ArcCheckbox/index.tsx
+import classNames from "classnames";
+import React, { forwardRef, useId, useMemo } from "react";
+import styles from "./index.module.less";
+var ArcCheckbox = forwardRef(function ArcCheckbox2(_a, ref) {
+  var _b = _a, { className, id: idProp, disabled } = _b, rest = __objRest(_b, ["className", "id", "disabled"]);
+  const uid = useId().replace(/:/g, "");
+  const id = useMemo(() => idProp != null ? idProp : `arc-checkbox-${uid}`, [idProp, uid]);
+  return /* @__PURE__ */ React.createElement("span", { className: classNames(styles.root, className) }, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, rest), { ref, id, type: "checkbox", className: styles.input, disabled })), /* @__PURE__ */ React.createElement("label", { htmlFor: id, className: styles.label }, /* @__PURE__ */ React.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", "aria-hidden": true }, /* @__PURE__ */ React.createElement("g", { className: styles.ringSpin }, /* @__PURE__ */ React.createElement("circle", { className: styles.ring, cx: 9, cy: 9, r: 6.75 })), /* @__PURE__ */ React.createElement("polyline", { className: styles.check, points: "1 9 7 14 15 4" }))));
+});
+ArcCheckbox.displayName = "ArcCheckbox";
+var ArcCheckbox_default = ArcCheckbox;
+export {
+  ArcCheckbox,
+  ArcCheckbox_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/es/creative/ArcCheckbox/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/creative/ArcCheckbox/index.tsx"],
+  "sourcesContent": ["import classNames from 'classnames';\nimport React, { forwardRef, useId, useMemo } from 'react';\nimport styles from './index.module.less';\n\nexport type ArcCheckboxProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'className'> & {\n  className?: string;\n};\n\n/**\n * 无背景；未选中为带缺口的圆环线框持续旋转（loading 感）；选中为描边对勾动画。\n * 纯图标场景请为 `input` 传入 `aria-label`（或外层可见文案）以保证可访问性。\n */\nexport const ArcCheckbox = forwardRef<HTMLInputElement, ArcCheckboxProps>(function ArcCheckbox(\n  { className, id: idProp, disabled, ...rest },\n  ref,\n) {\n  const uid = useId().replace(/:/g, '');\n  const id = useMemo(() => idProp ?? `arc-checkbox-${uid}`, [idProp, uid]);\n\n  return (\n    <span className={classNames(styles.root, className)}>\n      <input {...rest} ref={ref} id={id} type='checkbox' className={styles.input} disabled={disabled} />\n      <label htmlFor={id} className={styles.label}>\n        <svg width={18} height={18} viewBox='0 0 18 18' aria-hidden>\n          <g className={styles.ringSpin}>\n            <circle className={styles.ring} cx={9} cy={9} r={6.75} />\n          </g>\n          <polyline className={styles.check} points='1 9 7 14 15 4' />\n        </svg>\n      </label>\n    </span>\n  );\n});\n\nArcCheckbox.displayName = 'ArcCheckbox';\n\nexport default ArcCheckbox;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,OAAO,SAAS,YAAY,OAAO,eAAe;AAClD,OAAO,YAAY;AAUZ,IAAM,cAAc,WAA+C,SAASA,aACjF,IACA,KACA;AAFA,eAAE,aAAW,IAAI,QAAQ,SAb3B,IAaE,IAAsC,iBAAtC,IAAsC,CAApC,aAAW,MAAY;AAGzB,QAAM,MAAM,MAAM,EAAE,QAAQ,MAAM,EAAE;AACpC,QAAM,KAAK,QAAQ,MAAM,0BAAU,gBAAgB,OAAO,CAAC,QAAQ,GAAG,CAAC;AAEvE,SACE,oCAAC,UAAK,WAAW,WAAW,OAAO,MAAM,SAAS,KAChD,oCAAC,0CAAU,OAAV,EAAgB,KAAU,IAAQ,MAAK,YAAW,WAAW,OAAO,OAAO,WAAoB,GAChG,oCAAC,WAAM,SAAS,IAAI,WAAW,OAAO,SACpC,oCAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,SAAQ,aAAY,eAAW,QACzD,oCAAC,OAAE,WAAW,OAAO,YACnB,oCAAC,YAAO,WAAW,OAAO,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,MAAM,CACzD,GACA,oCAAC,cAAS,WAAW,OAAO,OAAO,QAAO,iBAAgB,CAC5D,CACF,CACF;AAEJ,CAAC;AAED,YAAY,cAAc;AAE1B,IAAO,sBAAQ;",
+  "names": ["ArcCheckbox"]
+}

package/dist/es/creative/ArcCheckbox/index.module.less

@@ -0,0 +1,102 @@
+/*基于原 checkbox 动效：去掉背景 ripple，外圈改为缺口圆环旋转 loading */
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  --arc-checkbox-accent: var(--accent-color, #a3e583);
+}
+
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.label {
+  cursor: pointer;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  -webkit-tap-highlight-color: transparent;
+  transform: translate3d(0, 0, 0);
+  flex-shrink: 0;
+}
+
+.label svg {
+  display: block;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke: #c8ccd4;
+  stroke-width: 1.5;
+  transform: translate3d(0, 0, 0);
+  transition: stroke 0.2s ease;
+}
+
+.ringSpin {
+  transform-origin: 9px 9px;
+  animation: arc-checkbox-spin 0.75s linear infinite;
+}
+
+@keyframes arc-checkbox-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ring {
+  stroke-dasharray: 31.4 11;
+  stroke-dashoffset: 0;
+}
+
+.check {
+  stroke-dasharray: 22;
+  stroke-dashoffset: 66;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.label:hover svg {
+  stroke: var(--arc-checkbox-accent);
+}
+
+.input:checked + .label .ringSpin {
+  animation: none;
+}
+
+.input:checked + .label .ring {
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.input:checked + .label .check {
+  opacity: 1;
+  stroke: var(--arc-checkbox-accent);
+  stroke-dashoffset: 42;
+  transition:
+    stroke-dashoffset 0.2s linear 0.12s,
+    opacity 0.15s ease 0.1s,
+    stroke 0.2s ease;
+}
+
+.input:focus-visible + .label {
+  outline: 2px solid var(--arc-checkbox-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.input:disabled + .label {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.input:disabled + .label .ringSpin {
+  animation-play-state: paused;
+}

package/dist/es/creative/ButtonRadioWithInfo/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/creative/ButtonRadioWithInfo/index.tsx"],
-  "sourcesContent": ["import classNames from 'classnames';\nimport React, { useId, useMemo, useState } from 'react';\n\nimport './index.less';\n\nexport interface ButtonRadioWithInfoOption {\n  label: React.ReactNode;\n  value: string;\n  /** 角标文案，如 SAVE 28% */\n  badge?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface ButtonRadioWithInfoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  options: ButtonRadioWithInfoOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n}\n\nconst ButtonRadioWithInfo = React.forwardRef<HTMLDivElement, ButtonRadioWithInfoProps>(\n  ({ options, value: valueProp, defaultValue, onChange, className, style, ...rest }, ref) => {\n    const uid = useId().replace(/:/g, '');\n    const name = `brwi-${uid}`;\n    const [inner, setInner] = useState(() => defaultValue ?? options[0]?.value ?? '');\n    const value = valueProp !== undefined ? valueProp : inner;\n\n    const selectedIndex = useMemo(() => {\n      const i = options.findIndex((o) => o.value === value);\n      return i >= 0 ? i : 0;\n    }, [options, value]);\n\n    const handleSelect = (next: string) => {\n      const opt = options.find((o) => o.value === next);\n      if (opt?.disabled) return;\n      if (valueProp === undefined) setInner(next);\n      onChange?.(next);\n    };\n\n    if (!options.length) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('button-radio-with-info', className)}\n        style={\n          {\n            ...style,\n            '--brwi-n': options.length,\n            '--brwi-i': selectedIndex,\n          } as React.CSSProperties\n        }\n        {...rest}\n      >\n        <div className=\"button-radio-with-info__tabs\" role=\"radiogroup\">\n          {options.map((opt) => (\n            <React.Fragment key={opt.value}>\n              <input\n                type=\"radio\"\n                className=\"button-radio-with-info__input\"\n                id={`${name}-${opt.value}`}\n                name={name}\n                value={opt.value}\n                checked={value === opt.value}\n                disabled={opt.disabled}\n                onChange={() => handleSelect(opt.value)}\n              />\n              <label\n                htmlFor={`${name}-${opt.value}`}\n                className={classNames('button-radio-with-info__tab', {\n                  'button-radio-with-info__tab--disabled': opt.disabled,\n                })}\n              >\n                {opt.label}\n                {opt.badge != null && opt.badge !== '' ? (\n                  <span className=\"button-radio-with-info__badge\">{opt.badge}</span>\n                ) : null}\n              </label>\n            </React.Fragment>\n          ))}\n          <span className=\"button-radio-with-info__glider\" aria-hidden />\n        </div>\n      </div>\n    );\n  },\n);\n\nButtonRadioWithInfo.displayName = 'ButtonRadioWithInfo';\n\nexport default ButtonRadioWithInfo;\n"],
+  "sourcesContent": ["import classNames from 'classnames';\nimport React, { useId, useMemo, useState } from 'react';\n\nimport './index.less';\n\nexport interface ButtonRadioWithInfoOption {\n  label: React.ReactNode;\n  value: string;\n  /** 角标文案，如 SAVE 28% */\n  badge?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface ButtonRadioWithInfoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  options: ButtonRadioWithInfoOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n}\n\nconst ButtonRadioWithInfo = React.forwardRef<HTMLDivElement, ButtonRadioWithInfoProps>(\n  ({ options, value: valueProp, defaultValue, onChange, className, style, ...rest }, ref) => {\n    const uid = useId().replace(/:/g, '');\n    const name = `brwi-${uid}`;\n    const [inner, setInner] = useState(() => defaultValue ?? options[0]?.value ?? '');\n    const value = valueProp !== undefined ? valueProp : inner;\n\n    const selectedIndex = useMemo(() => {\n      const i = options.findIndex((o) => o.value === value);\n      return i >= 0 ? i : 0;\n    }, [options, value]);\n\n    const handleSelect = (next: string) => {\n      const opt = options.find((o) => o.value === next);\n      if (opt?.disabled) return;\n      if (valueProp === undefined) setInner(next);\n      onChange?.(next);\n    };\n\n    if (!options.length) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('button-radio-with-info', className)}\n        style={\n          {\n            ...style,\n            '--brwi-n': options.length,\n            '--brwi-i': selectedIndex,\n          } as React.CSSProperties\n        }\n        {...rest}\n      >\n        <div className='button-radio-with-info__tabs' role='radiogroup'>\n          {options.map((opt) => (\n            <React.Fragment key={opt.value}>\n              <input\n                type='radio'\n                className='button-radio-with-info__input'\n                id={`${name}-${opt.value}`}\n                name={name}\n                value={opt.value}\n                checked={value === opt.value}\n                disabled={opt.disabled}\n                onChange={() => handleSelect(opt.value)}\n              />\n              <label\n                htmlFor={`${name}-${opt.value}`}\n                className={classNames('button-radio-with-info__tab', {\n                  'button-radio-with-info__tab--disabled': opt.disabled,\n                })}\n              >\n                {opt.label}\n                {opt.badge != null && opt.badge !== '' ? (\n                  <span className='button-radio-with-info__badge'>{opt.badge}</span>\n                ) : null}\n              </label>\n            </React.Fragment>\n          ))}\n          <span className='button-radio-with-info__glider' aria-hidden />\n        </div>\n      </div>\n    );\n  },\n);\n\nButtonRadioWithInfo.displayName = 'ButtonRadioWithInfo';\n\nexport default ButtonRadioWithInfo;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,OAAO,SAAS,OAAO,SAAS,gBAAgB;AAEhD,OAAO;AAiBP,IAAM,sBAAsB,MAAM;AAAA,EAChC,CAAC,IAAkF,QAAQ;AAA1F,iBAAE,WAAS,OAAO,WAAW,cAAc,UAAU,WAAW,MArBnE,IAqBG,IAA0E,iBAA1E,IAA0E,CAAxE,WAAS,SAAkB,gBAAc,YAAU,aAAW;AAC/D,UAAM,MAAM,MAAM,EAAE,QAAQ,MAAM,EAAE;AACpC,UAAM,OAAO,QAAQ;AACrB,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAG;AAxB1C,UAAAA,KAAAC;AAwB6C,cAAAA,MAAA,uCAAgBD,MAAA,QAAQ,CAAC,MAAT,gBAAAA,IAAY,UAA5B,OAAAC,MAAqC;AAAA,KAAE;AAChF,UAAM,QAAQ,cAAc,SAAY,YAAY;AAEpD,UAAM,gBAAgB,QAAQ,MAAM;AAClC,YAAM,IAAI,QAAQ,UAAU,CAAC,MAAM,EAAE,UAAU,KAAK;AACpD,aAAO,KAAK,IAAI,IAAI;AAAA,IACtB,GAAG,CAAC,SAAS,KAAK,CAAC;AAEnB,UAAM,eAAe,CAAC,SAAiB;AACrC,YAAM,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,IAAI;AAChD,UAAI,2BAAK;AAAU;AACnB,UAAI,cAAc;AAAW,iBAAS,IAAI;AAC1C,2CAAW;AAAA,IACb;AAEA,QAAI,CAAC,QAAQ,QAAQ;AACnB,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,0BAA0B,SAAS;AAAA,QACzD,OACE,iCACK,QADL;AAAA,UAEE,YAAY,QAAQ;AAAA,UACpB,YAAY;AAAA,QACd;AAAA,SAEE;AAAA,MAEJ,oCAAC,SAAI,WAAU,gCAA+B,MAAK,gBAChD,QAAQ,IAAI,CAAC,QACZ,oCAAC,MAAM,UAAN,EAAe,KAAK,IAAI,SACvB;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,IAAI,GAAG,QAAQ,IAAI;AAAA,UACnB;AAAA,UACA,OAAO,IAAI;AAAA,UACX,SAAS,UAAU,IAAI;AAAA,UACvB,UAAU,IAAI;AAAA,UACd,UAAU,MAAM,aAAa,IAAI,KAAK;AAAA;AAAA,MACxC,GACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,GAAG,QAAQ,IAAI;AAAA,UACxB,WAAW,WAAW,+BAA+B;AAAA,YACnD,yCAAyC,IAAI;AAAA,UAC/C,CAAC;AAAA;AAAA,QAEA,IAAI;AAAA,QACJ,IAAI,SAAS,QAAQ,IAAI,UAAU,KAClC,oCAAC,UAAK,WAAU,mCAAiC,IAAI,KAAM,IACzD;AAAA,MACN,CACF,CACD,GACD,oCAAC,UAAK,WAAU,kCAAiC,eAAW,MAAC,CAC/D;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAElC,IAAO,8BAAQ;",
   "names": ["_a", "_b"]
 }

package/dist/es/creative/ButtonWithProgress/index.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from 'antd';
+import { type ButtonProps } from 'antd';
 import React from 'react';
 import './index.less';
 export interface ButtonWithProgressProps extends ButtonProps {

package/dist/es/creative/ButtonWithProgress/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/creative/ButtonWithProgress/index.tsx"],
-  "sourcesContent": ["import { Button, ButtonProps } from 'antd';\nimport classNames from 'classnames';\nimport React, { useMemo } from 'react';\nimport './index.less';\n\nexport interface ButtonWithProgressProps extends ButtonProps {\n  progress?: number;\n  progressColor?: string;\n  progressing?: boolean;\n  subtitle?: string;\n}\n\nconst ButtonWithProgress: React.FC<ButtonWithProgressProps> = ({\n  children,\n  progress = 0,\n  progressColor = '#000000',\n  progressing = false,\n  subtitle = '',\n  disabled,\n  className,\n  ...props\n}) => {\n  const buttonProps = useMemo(() => {\n    return {\n      ...props,\n      disabled: disabled || progressing,\n      className: classNames('button-with-progress', className),\n    };\n  }, [props, disabled, progressing, className]);\n\n  return (\n    <Button {...buttonProps}>\n      <div className='button-content'>\n        {children && <div className='button-main-text'>{children}</div>}\n        {subtitle && <div className='button-subtitle'>{subtitle}</div>}\n      </div>\n      {progress && progressing ? (\n        <div\n          className={classNames('progress-bar', {\n            animate: progressing && !disabled,\n          })}\n          style={{\n            backgroundColor: progressColor,\n            animationDuration: `${progress / 1000}s`,\n          }}\n        />\n      ) : null}\n    </Button>\n  );\n};\n\nexport default ButtonWithProgress;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,cAA2B;AACpC,OAAO,gBAAgB;AACvB,OAAO,SAAS,eAAe;AAC/B,OAAO;AASP,IAAM,qBAAwD,CAAC,OASzD;AATyD,eAC7D;AAAA;AAAA,IACA,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAnBF,IAY+D,IAQ1D,kBAR0D,IAQ1D;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,cAAc,QAAQ,MAAM;AAChC,WAAO,iCACF,QADE;AAAA,MAEL,UAAU,YAAY;AAAA,MACtB,WAAW,WAAW,wBAAwB,SAAS;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,aAAa,SAAS,CAAC;AAE5C,SACE,oCAAC,2BAAW,cACV,oCAAC,SAAI,WAAU,oBACZ,YAAY,oCAAC,SAAI,WAAU,sBAAoB,QAAS,GACxD,YAAY,oCAAC,SAAI,WAAU,qBAAmB,QAAS,CAC1D,GACC,YAAY,cACX;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,gBAAgB;AAAA,QACpC,SAAS,eAAe,CAAC;AAAA,MAC3B,CAAC;AAAA,MACD,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,mBAAmB,GAAG,WAAW;AAAA,MACnC;AAAA;AAAA,EACF,IACE,IACN;AAEJ;AAEA,IAAO,6BAAQ;",
+  "sourcesContent": ["import { Button, type ButtonProps } from 'antd';\nimport classNames from 'classnames';\nimport React, { useMemo } from 'react';\nimport './index.less';\n\nexport interface ButtonWithProgressProps extends ButtonProps {\n  progress?: number;\n  progressColor?: string;\n  progressing?: boolean;\n  subtitle?: string;\n}\n\nconst ButtonWithProgress: React.FC<ButtonWithProgressProps> = ({\n  children,\n  progress = 0,\n  progressColor = '#000000',\n  progressing = false,\n  subtitle = '',\n  disabled,\n  className,\n  ...props\n}) => {\n  const buttonProps = useMemo(() => {\n    return {\n      ...props,\n      disabled: disabled || progressing,\n      className: classNames('button-with-progress', className),\n    };\n  }, [props, disabled, progressing, className]);\n\n  return (\n    <Button {...buttonProps}>\n      <div className='button-content'>\n        {children && <div className='button-main-text'>{children}</div>}\n        {subtitle && <div className='button-subtitle'>{subtitle}</div>}\n      </div>\n      {progress && progressing ? (\n        <div\n          className={classNames('progress-bar', {\n            animate: progressing && !disabled,\n          })}\n          style={{\n            backgroundColor: progressColor,\n            animationDuration: `${progress / 1000}s`,\n          }}\n        />\n      ) : null}\n    </Button>\n  );\n};\n\nexport default ButtonWithProgress;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,cAAgC;AACzC,OAAO,gBAAgB;AACvB,OAAO,SAAS,eAAe;AAC/B,OAAO;AASP,IAAM,qBAAwD,CAAC,OASzD;AATyD,eAC7D;AAAA;AAAA,IACA,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAnBF,IAY+D,IAQ1D,kBAR0D,IAQ1D;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,cAAc,QAAQ,MAAM;AAChC,WAAO,iCACF,QADE;AAAA,MAEL,UAAU,YAAY;AAAA,MACtB,WAAW,WAAW,wBAAwB,SAAS;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,aAAa,SAAS,CAAC;AAE5C,SACE,oCAAC,2BAAW,cACV,oCAAC,SAAI,WAAU,oBACZ,YAAY,oCAAC,SAAI,WAAU,sBAAoB,QAAS,GACxD,YAAY,oCAAC,SAAI,WAAU,qBAAmB,QAAS,CAC1D,GACC,YAAY,cACX;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,gBAAgB;AAAA,QACpC,SAAS,eAAe,CAAC;AAAA,MAC3B,CAAC;AAAA,MACD,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,mBAAmB,GAAG,WAAW;AAAA,MACnC;AAAA;AAAA,EACF,IACE,IACN;AAEJ;AAEA,IAAO,6BAAQ;",
   "names": []
 }

package/dist/es/creative/GlassSegmentedRadio/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export type GlassSegmentOption = {
+    value: string;
+    label: React.ReactNode;
+};
+export type GlassSegmentedRadioProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'role' | 'children'> & {
+    options: GlassSegmentOption[];
+    value: string;
+    onChange: (value: string) => void;
+    goldShell?: boolean;
+    disabled?: boolean;
+};
+/**
+ * 毛玻璃分段单选：滑块随选中项平移，每一档对应独立渐变配色（银/金/铂等）；容器在 `html[data-theme="light"]` 下为浅色毛玻璃。
+ * 请为分组设置 `aria-label` 或 `aria-labelledby` 以便读屏识别。
+ */
+export declare const GlassSegmentedRadio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "role" | "onChange"> & {
+    options: GlassSegmentOption[];
+    value: string;
+    onChange: (value: string) => void;
+    goldShell?: boolean;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export default GlassSegmentedRadio;

package/dist/es/creative/GlassSegmentedRadio/index.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/creative/GlassSegmentedRadio/index.tsx
+import classNames from "classnames";
+import React, { forwardRef, useId, useMemo } from "react";
+import styles from "./index.module.less";
+var GlassSegmentedRadio = forwardRef(function GlassSegmentedRadio2(_a, ref) {
+  var _b = _a, { options, value, onChange, className, goldShell, disabled, style } = _b, rest = __objRest(_b, ["options", "value", "onChange", "className", "goldShell", "disabled", "style"]);
+  const uid = useId().replace(/:/g, "");
+  const name = useMemo(() => `glass-seg-${uid}`, [uid]);
+  const count = Math.max(1, options.length);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadValues({
+      ref,
+      className: classNames(styles.root, goldShell && styles.rootAdGold, disabled && styles.rootDisabled, className),
+      style: __spreadProps(__spreadValues({}, style), {
+        ["--segment-count"]: String(count)
+      }),
+      role: "radiogroup",
+      "aria-disabled": disabled || void 0
+    }, rest),
+    options.map((opt, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: opt.value }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "radio",
+        className: styles.input,
+        name,
+        id: `${name}-${i}`,
+        value: opt.value,
+        checked: value === opt.value,
+        disabled,
+        onChange: () => onChange(opt.value)
+      }
+    ), /* @__PURE__ */ React.createElement("label", { className: styles.label, htmlFor: `${name}-${i}` }, opt.label))),
+    /* @__PURE__ */ React.createElement("div", { className: styles.glider, "aria-hidden": true })
+  );
+});
+GlassSegmentedRadio.displayName = "GlassSegmentedRadio";
+var GlassSegmentedRadio_default = GlassSegmentedRadio;
+export {
+  GlassSegmentedRadio,
+  GlassSegmentedRadio_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/es/creative/GlassSegmentedRadio/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/creative/GlassSegmentedRadio/index.tsx"],
+  "sourcesContent": ["import classNames from 'classnames';\nimport React, { forwardRef, useId, useMemo } from 'react';\nimport styles from './index.module.less';\n\nexport type GlassSegmentOption = {\n  value: string;\n  label: React.ReactNode;\n};\n\nexport type GlassSegmentedRadioProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'role' | 'children'> & {\n  options: GlassSegmentOption[];\n  value: string;\n  onChange: (value: string) => void;\n  goldShell?: boolean;\n  disabled?: boolean;\n};\n\n/**\n * 毛玻璃分段单选：滑块随选中项平移，每一档对应独立渐变配色（银/金/铂等）；容器在 `html[data-theme=\"light\"]` 下为浅色毛玻璃。\n * 请为分组设置 `aria-label` 或 `aria-labelledby` 以便读屏识别。\n */\nexport const GlassSegmentedRadio = forwardRef<HTMLDivElement, GlassSegmentedRadioProps>(function GlassSegmentedRadio(\n  { options, value, onChange, className, goldShell, disabled, style, ...rest },\n  ref,\n) {\n  const uid = useId().replace(/:/g, '');\n  const name = useMemo(() => `glass-seg-${uid}`, [uid]);\n  const count = Math.max(1, options.length);\n\n  return (\n    <div\n      ref={ref}\n      className={classNames(styles.root, goldShell && styles.rootAdGold, disabled && styles.rootDisabled, className)}\n      style={\n        {\n          ...style,\n          ['--segment-count' as string]: String(count),\n        } as React.CSSProperties\n      }\n      role='radiogroup'\n      aria-disabled={disabled || undefined}\n      {...rest}\n    >\n      {options.map((opt, i) => (\n        <React.Fragment key={opt.value}>\n          <input\n            type='radio'\n            className={styles.input}\n            name={name}\n            id={`${name}-${i}`}\n            value={opt.value}\n            checked={value === opt.value}\n            disabled={disabled}\n            onChange={() => onChange(opt.value)}\n          />\n          <label className={styles.label} htmlFor={`${name}-${i}`}>\n            {opt.label}\n          </label>\n        </React.Fragment>\n      ))}\n      <div className={styles.glider} aria-hidden />\n    </div>\n  );\n});\n\nGlassSegmentedRadio.displayName = 'GlassSegmentedRadio';\n\nexport default GlassSegmentedRadio;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,OAAO,SAAS,YAAY,OAAO,eAAe;AAClD,OAAO,YAAY;AAmBZ,IAAM,sBAAsB,WAAqD,SAASA,qBAC/F,IACA,KACA;AAFA,eAAE,WAAS,OAAO,UAAU,WAAW,WAAW,UAAU,MAtB9D,IAsBE,IAAsE,iBAAtE,IAAsE,CAApE,WAAS,SAAO,YAAU,aAAW,aAAW,YAAU;AAG5D,QAAM,MAAM,MAAM,EAAE,QAAQ,MAAM,EAAE;AACpC,QAAM,OAAO,QAAQ,MAAM,aAAa,OAAO,CAAC,GAAG,CAAC;AACpD,QAAM,QAAQ,KAAK,IAAI,GAAG,QAAQ,MAAM;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,WAAW,OAAO,MAAM,aAAa,OAAO,YAAY,YAAY,OAAO,cAAc,SAAS;AAAA,MAC7G,OACE,iCACK,QADL;AAAA,QAEE,CAAC,iBAA2B,GAAG,OAAO,KAAK;AAAA,MAC7C;AAAA,MAEF,MAAK;AAAA,MACL,iBAAe,YAAY;AAAA,OACvB;AAAA,IAEH,QAAQ,IAAI,CAAC,KAAK,MACjB,oCAAC,MAAM,UAAN,EAAe,KAAK,IAAI,SACvB;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB;AAAA,QACA,IAAI,GAAG,QAAQ;AAAA,QACf,OAAO,IAAI;AAAA,QACX,SAAS,UAAU,IAAI;AAAA,QACvB;AAAA,QACA,UAAU,MAAM,SAAS,IAAI,KAAK;AAAA;AAAA,IACpC,GACA,oCAAC,WAAM,WAAW,OAAO,OAAO,SAAS,GAAG,QAAQ,OACjD,IAAI,KACP,CACF,CACD;AAAA,IACD,oCAAC,SAAI,WAAW,OAAO,QAAQ,eAAW,MAAC;AAAA,EAC7C;AAEJ,CAAC;AAED,oBAAoB,cAAc;AAElC,IAAO,8BAAQ;",
+  "names": ["GlassSegmentedRadio"]
+}

package/dist/es/creative/GlassSegmentedRadio/index.module.less

@@ -0,0 +1,241 @@
+/* 容器：参考 glass-radio-group 暗色毛玻璃；浅色主题单独覆盖 */
+.root {
+  --segment-count: 2;
+  --glass-group-bg: rgba(255, 255, 255, 0.06);
+  --glass-group-text: #999;
+  --glass-group-text-hover: #666;
+  --glass-group-text-checked: #333;
+  --glass-group-border: rgba(255, 255, 255, 0.1);
+
+  display: flex;
+  position: relative;
+  width: fit-content;
+  max-width: 100%;
+  border-radius: 1rem;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  overflow: hidden;
+  border: 1px solid var(--glass-group-border);
+  font-family: var(--font-sans, system-ui, sans-serif);
+  background: var(--glass-group-bg);
+  box-shadow:
+    inset 1px 1px 4px rgba(255, 255, 255, 0.2),
+    inset -1px -1px 6px rgba(0, 0, 0, 0.3),
+    0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.rootDisabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+:global(html[data-theme="light"]) .root {
+  --glass-group-bg: rgba(255, 255, 255, 0.78);
+  --glass-group-text: rgba(0, 0, 0, 0.55);
+  --glass-group-text-hover: rgba(0, 0, 0, 0.88);
+  --glass-group-text-checked: rgba(0, 0, 0, 0.92);
+  --glass-group-border: var(--ln-border-subtle, rgba(0, 0, 0, 0.12));
+
+  box-shadow:
+    inset 1px 1px 3px rgba(255, 255, 255, 0.95),
+    inset -1px -1px 4px rgba(0, 0, 0, 0.05),
+    0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+/* 保留可聚焦与读屏，不用 display:none */
+.input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+
+.label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 80px;
+  font-size: 14px;
+  padding: 0.8rem 1.6rem;
+  cursor: pointer;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  color: var(--glass-group-text);
+  position: relative;
+  z-index: 2;
+  transition: color 0.3s ease-in-out;
+  user-select: none;
+}
+
+.label:hover {
+  color: var(--glass-group-text-hover);
+}
+
+.input:checked + .label {
+  color: var(--glass-group-text-checked);
+}
+
+.input:focus-visible + .label {
+  outline: 2px solid var(--ln-focus-ring, #1677ff);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+/* 滑块：宽度随段数变化；位移与配色由「第 n 个 input 选中」决定（translateX 百分比相对滑块自身宽度） */
+.glider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: calc(100% / var(--segment-count));
+  border-radius: 1rem;
+  z-index: 1;
+  pointer-events: none;
+  transform: translate3d(0%, 0, 0);
+  transition:
+    transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56),
+    background 0.4s ease-in-out,
+    box-shadow 0.4s ease-in-out;
+  background: linear-gradient(135deg, #c0c0c055, #e0e0e0);
+  box-shadow:
+    0 0 18px rgba(192, 192, 192, 0.5),
+    0 0 10px rgba(255, 255, 255, 0.4) inset;
+}
+
+/* 1 Silver */
+.input:nth-of-type(1):checked ~ .glider {
+  transform: translate3d(0%, 0, 0);
+  background: linear-gradient(135deg, #c0c0c055, #e0e0e0);
+  box-shadow:
+    0 0 18px rgba(192, 192, 192, 0.5),
+    0 0 10px rgba(255, 255, 255, 0.4) inset;
+}
+
+/* 2 Gold */
+.input:nth-of-type(2):checked ~ .glider {
+  transform: translate3d(100%, 0, 0);
+  background: linear-gradient(135deg, #ffd70055, #ffcc00);
+  box-shadow:
+    0 0 18px rgba(255, 215, 0, 0.5),
+    0 0 10px rgba(255, 235, 150, 0.4) inset;
+}
+
+/* 3 Platinum */
+.input:nth-of-type(3):checked ~ .glider {
+  transform: translate3d(200%, 0, 0);
+  background: linear-gradient(135deg, #d0e7ff55, #a0d8ff);
+  box-shadow:
+    0 0 18px rgba(160, 216, 255, 0.5),
+    0 0 10px rgba(200, 240, 255, 0.4) inset;
+}
+
+/* 4 Rose */
+.input:nth-of-type(4):checked ~ .glider {
+  transform: translate3d(300%, 0, 0);
+  background: linear-gradient(135deg, #ffb6c155, #ff7eb3);
+  box-shadow:
+    0 0 18px rgba(255, 150, 180, 0.45),
+    0 0 10px rgba(255, 220, 235, 0.35) inset;
+}
+
+/* 5 Emerald */
+.input:nth-of-type(5):checked ~ .glider {
+  transform: translate3d(400%, 0, 0);
+  background: linear-gradient(135deg, #98fb9855, #3cb371);
+  box-shadow:
+    0 0 18px rgba(80, 200, 120, 0.45),
+    0 0 10px rgba(200, 255, 220, 0.35) inset;
+}
+
+/* 6 Violet */
+.input:nth-of-type(6):checked ~ .glider {
+  transform: translate3d(500%, 0, 0);
+  background: linear-gradient(135deg, #e6e6fa55, #b388ff);
+  box-shadow:
+    0 0 18px rgba(179, 136, 255, 0.5),
+    0 0 10px rgba(230, 220, 255, 0.4) inset;
+}
+
+/* 7 Amber */
+.input:nth-of-type(7):checked ~ .glider {
+  transform: translate3d(600%, 0, 0);
+  background: linear-gradient(135deg, #ffcc8055, #ff9933);
+  box-shadow:
+    0 0 18px rgba(255, 160, 80, 0.45),
+    0 0 10px rgba(255, 230, 200, 0.35) inset;
+}
+
+/* 8 Cyan */
+.input:nth-of-type(8):checked ~ .glider {
+  transform: translate3d(700%, 0, 0);
+  background: linear-gradient(135deg, #80ffff55, #20b2aa);
+  box-shadow:
+    0 0 18px rgba(64, 200, 190, 0.45),
+    0 0 10px rgba(200, 255, 252, 0.35) inset;
+}
+
+/* 9+：与前几档区分，超出 8 项时仍可辨色 */
+.input:nth-of-type(9):checked ~ .glider {
+  transform: translate3d(800%, 0, 0);
+  background: linear-gradient(135deg, #daa52055, #cd853f);
+  box-shadow:
+    0 0 18px rgba(205, 133, 63, 0.45),
+    0 0 10px rgba(255, 230, 200, 0.35) inset;
+}
+
+.input:nth-of-type(10):checked ~ .glider {
+  transform: translate3d(900%, 0, 0);
+  background: linear-gradient(135deg, #b0c4de55, #778899);
+  box-shadow:
+    0 0 18px rgba(119, 136, 153, 0.45),
+    0 0 10px rgba(220, 230, 240, 0.35) inset;
+}
+
+/* 11–12：再两档区分色；更多分段需再扩展或接受与第 1 档同视觉未匹配（应极少见） */
+.input:nth-of-type(11):checked ~ .glider {
+  transform: translate3d(1000%, 0, 0);
+  background: linear-gradient(135deg, #f5deb355, #daa520);
+  box-shadow:
+    0 0 18px rgba(218, 165, 32, 0.45),
+    0 0 10px rgba(255, 245, 220, 0.35) inset;
+}
+
+.input:nth-of-type(12):checked ~ .glider {
+  transform: translate3d(1100%, 0, 0);
+  background: linear-gradient(135deg, #dda0dd55, #9370db);
+  box-shadow:
+    0 0 18px rgba(147, 112, 219, 0.45),
+    0 0 10px rgba(240, 230, 255, 0.35) inset;
+}
+
+/* 广告模式：只强化外框与底，不覆盖分段滑块配色（默认与暗色根一致） */
+.rootAdGold {
+  background: linear-gradient(
+    165deg,
+    rgba(201, 162, 39, 0.12) 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    rgba(230, 195, 92, 0.08) 100%
+  );
+  border-color: rgba(230, 195, 92, 0.25);
+  box-shadow:
+    inset 1px 1px 4px rgba(255, 255, 255, 0.1),
+    inset -1px -1px 6px rgba(0, 0, 0, 0.35),
+    0 4px 16px rgba(201, 162, 39, 0.15);
+}
+
+:global(html[data-theme="light"]) .rootAdGold {
+  background: linear-gradient(
+    165deg,
+    rgba(255, 248, 220, 0.55) 0%,
+    rgba(255, 255, 255, 0.82) 45%,
+    rgba(255, 252, 235, 0.75) 100%
+  );
+  border-color: rgba(201, 162, 39, 0.35);
+  box-shadow:
+    inset 1px 1px 3px rgba(255, 255, 255, 0.95),
+    inset -1px -1px 4px rgba(201, 162, 39, 0.08),
+    0 2px 10px rgba(201, 162, 39, 0.12);
+}

package/dist/es/creative/SkillsWriter/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SkillsWriter: React.FC;
+export default SkillsWriter;