@yoka-ui/ui 1.0.10-test → 1.1.0

package/dist/lib/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/lib/creative/ArcCheckbox/index.js

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/creative/ArcCheckbox/index.tsx
+var ArcCheckbox_exports = {};
+__export(ArcCheckbox_exports, {
+  ArcCheckbox: () => ArcCheckbox,
+  default: () => ArcCheckbox_default
+});
+module.exports = __toCommonJS(ArcCheckbox_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_index_module = __toESM(require("./index.module.less"));
+var ArcCheckbox = (0, import_react.forwardRef)(function ArcCheckbox2({ className, id: idProp, disabled, ...rest }, ref) {
+  const uid = (0, import_react.useId)().replace(/:/g, "");
+  const id = (0, import_react.useMemo)(() => idProp ?? `arc-checkbox-${uid}`, [idProp, uid]);
+  return /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(import_index_module.default.root, className) }, /* @__PURE__ */ import_react.default.createElement("input", { ...rest, ref, id, type: "checkbox", className: import_index_module.default.input, disabled }), /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: id, className: import_index_module.default.label }, /* @__PURE__ */ import_react.default.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", "aria-hidden": true }, /* @__PURE__ */ import_react.default.createElement("g", { className: import_index_module.default.ringSpin }, /* @__PURE__ */ import_react.default.createElement("circle", { className: import_index_module.default.ring, cx: 9, cy: 9, r: 6.75 })), /* @__PURE__ */ import_react.default.createElement("polyline", { className: import_index_module.default.check, points: "1 9 7 14 15 4" }))));
+});
+ArcCheckbox.displayName = "ArcCheckbox";
+var ArcCheckbox_default = ArcCheckbox;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ArcCheckbox
+});
+//# sourceMappingURL=index.js.map

package/dist/lib/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,mBAAkD;AAClD,0BAAmB;AAUZ,IAAM,kBAAc,yBAA+C,SAASA,aACjF,EAAE,WAAW,IAAI,QAAQ,UAAU,GAAG,KAAK,GAC3C,KACA;AACA,QAAM,UAAM,oBAAM,EAAE,QAAQ,MAAM,EAAE;AACpC,QAAM,SAAK,sBAAQ,MAAM,UAAU,gBAAgB,OAAO,CAAC,QAAQ,GAAG,CAAC;AAEvE,SACE,6BAAAC,QAAA,cAAC,UAAK,eAAW,kBAAAC,SAAW,oBAAAC,QAAO,MAAM,SAAS,KAChD,6BAAAF,QAAA,cAAC,WAAO,GAAG,MAAM,KAAU,IAAQ,MAAK,YAAW,WAAW,oBAAAE,QAAO,OAAO,UAAoB,GAChG,6BAAAF,QAAA,cAAC,WAAM,SAAS,IAAI,WAAW,oBAAAE,QAAO,SACpC,6BAAAF,QAAA,cAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,SAAQ,aAAY,eAAW,QACzD,6BAAAA,QAAA,cAAC,OAAE,WAAW,oBAAAE,QAAO,YACnB,6BAAAF,QAAA,cAAC,YAAO,WAAW,oBAAAE,QAAO,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,MAAM,CACzD,GACA,6BAAAF,QAAA,cAAC,cAAS,WAAW,oBAAAE,QAAO,OAAO,QAAO,iBAAgB,CAC5D,CACF,CACF;AAEJ,CAAC;AAED,YAAY,cAAc;AAE1B,IAAO,sBAAQ;",
+  "names": ["ArcCheckbox", "React", "classNames", "styles"]
+}

package/dist/lib/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/lib/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;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,mBAAgD;AAEhD,mBAAO;AAiBP,IAAM,sBAAsB,aAAAA,QAAM;AAAA,EAChC,CAAC,EAAE,SAAS,OAAO,WAAW,cAAc,UAAU,WAAW,OAAO,GAAG,KAAK,GAAG,QAAQ;AACzF,UAAM,UAAM,oBAAM,EAAE,QAAQ,MAAM,EAAE;AACpC,UAAM,OAAO,QAAQ;AACrB,UAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,MAAG;AAxB1C;AAwB6C,+BAAgB,aAAQ,CAAC,MAAT,mBAAY,UAAS;AAAA,KAAE;AAChF,UAAM,QAAQ,cAAc,SAAY,YAAY;AAEpD,UAAM,oBAAgB,sBAAQ,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,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAAC,SAAW,0BAA0B,SAAS;AAAA,QACzD,OACE;AAAA,UACE,GAAG;AAAA,UACH,YAAY,QAAQ;AAAA,UACpB,YAAY;AAAA,QACd;AAAA,QAED,GAAG;AAAA;AAAA,MAEJ,6BAAAD,QAAA,cAAC,SAAI,WAAU,gCAA+B,MAAK,gBAChD,QAAQ,IAAI,CAAC,QACZ,6BAAAA,QAAA,cAAC,aAAAA,QAAM,UAAN,EAAe,KAAK,IAAI,SACvB,6BAAAA,QAAA;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,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,GAAG,QAAQ,IAAI;AAAA,UACxB,eAAW,kBAAAC,SAAW,+BAA+B;AAAA,YACnD,yCAAyC,IAAI;AAAA,UAC/C,CAAC;AAAA;AAAA,QAEA,IAAI;AAAA,QACJ,IAAI,SAAS,QAAQ,IAAI,UAAU,KAClC,6BAAAD,QAAA,cAAC,UAAK,WAAU,mCAAiC,IAAI,KAAM,IACzD;AAAA,MACN,CACF,CACD,GACD,6BAAAA,QAAA,cAAC,UAAK,WAAU,kCAAiC,eAAW,MAAC,CAC/D;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAElC,IAAO,8BAAQ;",
   "names": ["React", "classNames"]
 }

package/dist/lib/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/lib/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;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAoC;AACpC,wBAAuB;AACvB,mBAA+B;AAC/B,mBAAO;AASP,IAAM,qBAAwD,CAAC;AAAA,EAC7D;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,kBAAc,sBAAQ,MAAM;AAChC,WAAO;AAAA,MACL,GAAG;AAAA,MACH,UAAU,YAAY;AAAA,MACtB,eAAW,kBAAAA,SAAW,wBAAwB,SAAS;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,aAAa,SAAS,CAAC;AAE5C,SACE,6BAAAC,QAAA,cAAC,sBAAQ,GAAG,eACV,6BAAAA,QAAA,cAAC,SAAI,WAAU,oBACZ,YAAY,6BAAAA,QAAA,cAAC,SAAI,WAAU,sBAAoB,QAAS,GACxD,YAAY,6BAAAA,QAAA,cAAC,SAAI,WAAU,qBAAmB,QAAS,CAC1D,GACC,YAAY,cACX,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,kBAAAD,SAAW,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;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAyC;AACzC,wBAAuB;AACvB,mBAA+B;AAC/B,mBAAO;AASP,IAAM,qBAAwD,CAAC;AAAA,EAC7D;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,kBAAc,sBAAQ,MAAM;AAChC,WAAO;AAAA,MACL,GAAG;AAAA,MACH,UAAU,YAAY;AAAA,MACtB,eAAW,kBAAAA,SAAW,wBAAwB,SAAS;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,aAAa,SAAS,CAAC;AAE5C,SACE,6BAAAC,QAAA,cAAC,sBAAQ,GAAG,eACV,6BAAAA,QAAA,cAAC,SAAI,WAAU,oBACZ,YAAY,6BAAAA,QAAA,cAAC,SAAI,WAAU,sBAAoB,QAAS,GACxD,YAAY,6BAAAA,QAAA,cAAC,SAAI,WAAU,qBAAmB,QAAS,CAC1D,GACC,YAAY,cACX,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,kBAAAD,SAAW,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": ["classNames", "React"]
 }

package/dist/lib/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/lib/creative/GlassSegmentedRadio/index.js

@@ -0,0 +1,78 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/creative/GlassSegmentedRadio/index.tsx
+var GlassSegmentedRadio_exports = {};
+__export(GlassSegmentedRadio_exports, {
+  GlassSegmentedRadio: () => GlassSegmentedRadio,
+  default: () => GlassSegmentedRadio_default
+});
+module.exports = __toCommonJS(GlassSegmentedRadio_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_index_module = __toESM(require("./index.module.less"));
+var GlassSegmentedRadio = (0, import_react.forwardRef)(function GlassSegmentedRadio2({ options, value, onChange, className, goldShell, disabled, style, ...rest }, ref) {
+  const uid = (0, import_react.useId)().replace(/:/g, "");
+  const name = (0, import_react.useMemo)(() => `glass-seg-${uid}`, [uid]);
+  const count = Math.max(1, options.length);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref,
+      className: (0, import_classnames.default)(import_index_module.default.root, goldShell && import_index_module.default.rootAdGold, disabled && import_index_module.default.rootDisabled, className),
+      style: {
+        ...style,
+        ["--segment-count"]: String(count)
+      },
+      role: "radiogroup",
+      "aria-disabled": disabled || void 0,
+      ...rest
+    },
+    options.map((opt, i) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: opt.value }, /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      {
+        type: "radio",
+        className: import_index_module.default.input,
+        name,
+        id: `${name}-${i}`,
+        value: opt.value,
+        checked: value === opt.value,
+        disabled,
+        onChange: () => onChange(opt.value)
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("label", { className: import_index_module.default.label, htmlFor: `${name}-${i}` }, opt.label))),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.glider, "aria-hidden": true })
+  );
+});
+GlassSegmentedRadio.displayName = "GlassSegmentedRadio";
+var GlassSegmentedRadio_default = GlassSegmentedRadio;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlassSegmentedRadio
+});
+//# sourceMappingURL=index.js.map

package/dist/lib/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,mBAAkD;AAClD,0BAAmB;AAmBZ,IAAM,0BAAsB,yBAAqD,SAASA,qBAC/F,EAAE,SAAS,OAAO,UAAU,WAAW,WAAW,UAAU,OAAO,GAAG,KAAK,GAC3E,KACA;AACA,QAAM,UAAM,oBAAM,EAAE,QAAQ,MAAM,EAAE;AACpC,QAAM,WAAO,sBAAQ,MAAM,aAAa,OAAO,CAAC,GAAG,CAAC;AACpD,QAAM,QAAQ,KAAK,IAAI,GAAG,QAAQ,MAAM;AAExC,SACE,6BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,kBAAAC,SAAW,oBAAAC,QAAO,MAAM,aAAa,oBAAAA,QAAO,YAAY,YAAY,oBAAAA,QAAO,cAAc,SAAS;AAAA,MAC7G,OACE;AAAA,QACE,GAAG;AAAA,QACH,CAAC,iBAA2B,GAAG,OAAO,KAAK;AAAA,MAC7C;AAAA,MAEF,MAAK;AAAA,MACL,iBAAe,YAAY;AAAA,MAC1B,GAAG;AAAA;AAAA,IAEH,QAAQ,IAAI,CAAC,KAAK,MACjB,6BAAAF,QAAA,cAAC,aAAAA,QAAM,UAAN,EAAe,KAAK,IAAI,SACvB,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,oBAAAE,QAAO;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,6BAAAF,QAAA,cAAC,WAAM,WAAW,oBAAAE,QAAO,OAAO,SAAS,GAAG,QAAQ,OACjD,IAAI,KACP,CACF,CACD;AAAA,IACD,6BAAAF,QAAA,cAAC,SAAI,WAAW,oBAAAE,QAAO,QAAQ,eAAW,MAAC;AAAA,EAC7C;AAEJ,CAAC;AAED,oBAAoB,cAAc;AAElC,IAAO,8BAAQ;",
+  "names": ["GlassSegmentedRadio", "React", "classNames", "styles"]
+}

package/dist/lib/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/lib/creative/SkillsWriter/index.d.ts

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