@yoka-ui/ui 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (232) hide show
  1. package/@Docs-yoka/exports.generated.md +71 -63
  2. package/README.md +6 -4
  3. package/dist/es/business/AiChat/index.js.map +1 -1
  4. package/dist/es/business/AiChat/intentRecognizer.js.map +1 -1
  5. package/dist/es/business/AiChat/navigationManager.js +6 -6
  6. package/dist/es/business/AiChat/navigationManager.js.map +2 -2
  7. package/dist/es/business/DrawerPageInfo/index.js +2 -2
  8. package/dist/es/business/DrawerPageInfo/index.js.map +2 -2
  9. package/dist/es/business/Editor/index.d.ts +1 -1
  10. package/dist/es/business/Editor/index.js.map +2 -2
  11. package/dist/es/business/Empty/index.js +1 -1
  12. package/dist/es/business/Empty/index.js.map +1 -1
  13. package/dist/es/business/ModCommonFilter/components/PopoverContent/Category.js +2 -2
  14. package/dist/es/business/ModCommonFilter/components/PopoverContent/Category.js.map +2 -2
  15. package/dist/es/business/ModCommonFilter/components/PopoverContent/Content.js +3 -3
  16. package/dist/es/business/ModCommonFilter/components/PopoverContent/Content.js.map +2 -2
  17. package/dist/es/business/ModCommonFilter/components/PopoverContent/Selected.js +2 -2
  18. package/dist/es/business/ModCommonFilter/components/PopoverContent/Selected.js.map +2 -2
  19. package/dist/es/business/ModCommonFilter/index.d.ts +1 -1
  20. package/dist/es/business/ModCommonFilter/index.js.map +2 -2
  21. package/dist/es/business/YkPorjectSelect/index.d.ts +1 -1
  22. package/dist/es/business/YkPorjectSelect/index.js +2 -2
  23. package/dist/es/business/YkPorjectSelect/index.js.map +2 -2
  24. package/dist/es/components/DebounceInput/index.js.map +2 -2
  25. package/dist/es/components/MultipleSelect/index.d.ts +14 -0
  26. package/dist/es/components/MultipleSelect/index.js +1 -1
  27. package/dist/es/components/MultipleSelect/index.js.map +2 -2
  28. package/dist/es/components/RefreshButton/index.js.map +2 -2
  29. package/dist/es/components/SearchWithHistory/index.js +1 -1
  30. package/dist/es/components/SearchWithHistory/index.js.map +2 -2
  31. package/dist/es/components/TextWithToolTip/index.d.ts +1 -1
  32. package/dist/es/components/TextWithToolTip/index.js.map +2 -2
  33. package/dist/es/components/TreeTransfer/components/TreeTransferPanel/index.d.ts +1 -24
  34. package/dist/es/components/TreeTransfer/components/TreeTransferPanel/index.js +2 -2
  35. package/dist/es/components/TreeTransfer/components/TreeTransferPanel/index.js.map +2 -2
  36. package/dist/es/components/TreeTransfer/index.d.ts +1 -24
  37. package/dist/es/components/TreeTransfer/index.js +8 -8
  38. package/dist/es/components/TreeTransfer/index.js.map +2 -2
  39. package/dist/es/components/TreeTransfer/utils/index.d.ts +1 -1
  40. package/dist/es/components/TreeTransfer/utils/index.js.map +2 -2
  41. package/dist/es/components/YkDateRangePicker/index.d.ts +1 -1
  42. package/dist/es/components/YkDateRangePicker/index.js +1 -1
  43. package/dist/es/components/YkDateRangePicker/index.js.map +2 -2
  44. package/dist/es/components/YkDateRangePicker/index.module.less +2 -1
  45. package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.d.ts +1 -1
  46. package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.js +3 -2
  47. package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.js.map +2 -2
  48. package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSRange.d.ts +1 -1
  49. package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSRange.js +60 -9
  50. package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSRange.js.map +3 -3
  51. package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSSelect.d.ts +1 -1
  52. package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSSelect.js.map +2 -2
  53. package/dist/es/components/YkRangeDateWithVS/index.d.ts +4 -4
  54. package/dist/es/components/YkRangeDateWithVS/index.js +2 -3
  55. package/dist/es/components/YkRangeDateWithVS/index.js.map +2 -2
  56. package/dist/es/components/YkRangeDateWithVS/index.module.less +23 -4
  57. package/dist/es/components/YkRangeTimeWithRecent/index.d.ts +1 -18
  58. package/dist/es/components/YkRangeTimeWithRecent/index.js +27 -7
  59. package/dist/es/components/YkRangeTimeWithRecent/index.js.map +2 -2
  60. package/dist/es/creative/ArcCheckbox/index.d.ts +12 -0
  61. package/dist/es/creative/ArcCheckbox/index.js +49 -0
  62. package/dist/es/creative/ArcCheckbox/index.js.map +7 -0
  63. package/dist/es/creative/ArcCheckbox/index.module.less +102 -0
  64. package/dist/es/creative/ButtonRadioWithInfo/index.js.map +1 -1
  65. package/dist/es/creative/ButtonWithProgress/index.d.ts +1 -1
  66. package/dist/es/creative/ButtonWithProgress/index.js.map +2 -2
  67. package/dist/es/creative/GlassSegmentedRadio/index.d.ts +24 -0
  68. package/dist/es/creative/GlassSegmentedRadio/index.js +75 -0
  69. package/dist/es/creative/GlassSegmentedRadio/index.js.map +7 -0
  70. package/dist/es/creative/GlassSegmentedRadio/index.module.less +241 -0
  71. package/dist/es/index.d.ts +30 -26
  72. package/dist/es/index.js +86 -82
  73. package/dist/es/index.js.map +2 -2
  74. package/dist/es/index.less +3 -1
  75. package/dist/es/layout/FlexGrid/index.d.ts +1 -1
  76. package/dist/es/layout/FlexGrid/index.js.map +2 -2
  77. package/dist/es/layout/YkContainer/index.js.map +1 -1
  78. package/dist/es/layout/YkDrawer/index.d.ts +1 -1
  79. package/dist/es/layout/YkDrawer/index.js +2 -1
  80. package/dist/es/layout/YkDrawer/index.js.map +2 -2
  81. package/dist/es/ui/LabelSelect/demo.js +1 -1
  82. package/dist/es/ui/LabelSelect/demo.js.map +2 -2
  83. package/dist/es/ui/LabelSelect/index.d.ts +1 -1
  84. package/dist/es/ui/LabelSelect/index.js +1 -1
  85. package/dist/es/ui/LabelSelect/index.js.map +2 -2
  86. package/dist/es/ui/LogicOperator/index.d.ts +1 -1
  87. package/dist/es/ui/LogicOperator/index.js.map +2 -2
  88. package/dist/es/ui/YkButton/index.d.ts +1 -1
  89. package/dist/es/ui/YkButton/index.js.map +2 -2
  90. package/dist/es/ui/YkCard/index.d.ts +1 -1
  91. package/dist/es/ui/YkCard/index.js +1 -1
  92. package/dist/es/ui/YkCard/index.js.map +2 -2
  93. package/dist/es/ui/YkCheckbox/index.d.ts +1 -1
  94. package/dist/es/ui/YkCheckbox/index.js.map +2 -2
  95. package/dist/es/ui/YkDescriptions/index.d.ts +1 -1
  96. package/dist/es/ui/YkDescriptions/index.js.map +2 -2
  97. package/dist/es/ui/YkPagination/index.d.ts +1 -1
  98. package/dist/es/ui/YkPagination/index.js.map +2 -2
  99. package/dist/es/ui/YkRadio/index.d.ts +1 -1
  100. package/dist/es/ui/YkRadio/index.js.map +2 -2
  101. package/dist/es/ui/YkSegmented/index.d.ts +1 -1
  102. package/dist/es/ui/YkSegmented/index.js.map +2 -2
  103. package/dist/es/ui/YkSelect/index.d.ts +1 -1
  104. package/dist/es/ui/YkSelect/index.js.map +2 -2
  105. package/dist/es/ui/YkSpin/index.d.ts +1 -1
  106. package/dist/es/ui/YkSpin/index.js.map +2 -2
  107. package/dist/es/ui/YkStatistic/index.d.ts +1 -1
  108. package/dist/es/ui/YkStatistic/index.js.map +2 -2
  109. package/dist/es/ui/YkSwitch/index.d.ts +1 -1
  110. package/dist/es/ui/YkSwitch/index.js.map +2 -2
  111. package/dist/es/ui/YkTabs/index.d.ts +1 -1
  112. package/dist/es/ui/YkTabs/index.js.map +2 -2
  113. package/dist/es/ui/YkTooltip/index.d.ts +1 -1
  114. package/dist/es/ui/YkTooltip/index.js.map +2 -2
  115. package/dist/es/utils/styleUtils.js.map +2 -2
  116. package/dist/es/utils/ykStorybookDoc.js +1 -1
  117. package/dist/es/utils/ykStorybookDoc.js.map +1 -1
  118. package/dist/lib/business/AiChat/index.js.map +1 -1
  119. package/dist/lib/business/AiChat/intentRecognizer.js.map +1 -1
  120. package/dist/lib/business/AiChat/navigationManager.js +6 -6
  121. package/dist/lib/business/AiChat/navigationManager.js.map +2 -2
  122. package/dist/lib/business/DrawerPageInfo/index.js +1 -1
  123. package/dist/lib/business/DrawerPageInfo/index.js.map +2 -2
  124. package/dist/lib/business/Editor/index.d.ts +1 -1
  125. package/dist/lib/business/Editor/index.js.map +2 -2
  126. package/dist/lib/business/Empty/index.js +1 -1
  127. package/dist/lib/business/Empty/index.js.map +1 -1
  128. package/dist/lib/business/ModCommonFilter/components/PopoverContent/Category.js +3 -3
  129. package/dist/lib/business/ModCommonFilter/components/PopoverContent/Category.js.map +2 -2
  130. package/dist/lib/business/ModCommonFilter/components/PopoverContent/Content.js +4 -4
  131. package/dist/lib/business/ModCommonFilter/components/PopoverContent/Content.js.map +2 -2
  132. package/dist/lib/business/ModCommonFilter/components/PopoverContent/Selected.js +3 -3
  133. package/dist/lib/business/ModCommonFilter/components/PopoverContent/Selected.js.map +2 -2
  134. package/dist/lib/business/ModCommonFilter/index.d.ts +1 -1
  135. package/dist/lib/business/ModCommonFilter/index.js.map +2 -2
  136. package/dist/lib/business/YkPorjectSelect/index.d.ts +1 -1
  137. package/dist/lib/business/YkPorjectSelect/index.js +3 -3
  138. package/dist/lib/business/YkPorjectSelect/index.js.map +2 -2
  139. package/dist/lib/components/DebounceInput/index.js.map +2 -2
  140. package/dist/lib/components/MultipleSelect/index.d.ts +14 -0
  141. package/dist/lib/components/MultipleSelect/index.js +1 -1
  142. package/dist/lib/components/MultipleSelect/index.js.map +2 -2
  143. package/dist/lib/components/RefreshButton/index.js.map +2 -2
  144. package/dist/lib/components/SearchWithHistory/index.js +1 -1
  145. package/dist/lib/components/SearchWithHistory/index.js.map +2 -2
  146. package/dist/lib/components/TextWithToolTip/index.d.ts +1 -1
  147. package/dist/lib/components/TextWithToolTip/index.js.map +2 -2
  148. package/dist/lib/components/TreeTransfer/components/TreeTransferPanel/index.d.ts +1 -24
  149. package/dist/lib/components/TreeTransfer/components/TreeTransferPanel/index.js +2 -2
  150. package/dist/lib/components/TreeTransfer/components/TreeTransferPanel/index.js.map +2 -2
  151. package/dist/lib/components/TreeTransfer/index.d.ts +1 -24
  152. package/dist/lib/components/TreeTransfer/index.js +3 -3
  153. package/dist/lib/components/TreeTransfer/index.js.map +2 -2
  154. package/dist/lib/components/TreeTransfer/utils/index.d.ts +1 -1
  155. package/dist/lib/components/TreeTransfer/utils/index.js.map +2 -2
  156. package/dist/lib/components/YkDateRangePicker/index.d.ts +1 -1
  157. package/dist/lib/components/YkDateRangePicker/index.js +1 -1
  158. package/dist/lib/components/YkDateRangePicker/index.js.map +2 -2
  159. package/dist/lib/components/YkDateRangePicker/index.module.less +2 -1
  160. package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.d.ts +1 -1
  161. package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.js +3 -2
  162. package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSCompare.js.map +2 -2
  163. package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSRange.d.ts +1 -1
  164. package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSRange.js +59 -8
  165. package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSRange.js.map +3 -3
  166. package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSSelect.d.ts +1 -1
  167. package/dist/lib/components/YkRangeDateWithVS/YkRangeDateWithVSSelect.js.map +2 -2
  168. package/dist/lib/components/YkRangeDateWithVS/index.d.ts +4 -4
  169. package/dist/lib/components/YkRangeDateWithVS/index.js +4 -5
  170. package/dist/lib/components/YkRangeDateWithVS/index.js.map +3 -3
  171. package/dist/lib/components/YkRangeDateWithVS/index.module.less +23 -4
  172. package/dist/lib/components/YkRangeTimeWithRecent/index.d.ts +1 -18
  173. package/dist/lib/components/YkRangeTimeWithRecent/index.js +27 -7
  174. package/dist/lib/components/YkRangeTimeWithRecent/index.js.map +2 -2
  175. package/dist/lib/creative/ArcCheckbox/index.d.ts +12 -0
  176. package/dist/lib/creative/ArcCheckbox/index.js +50 -0
  177. package/dist/lib/creative/ArcCheckbox/index.js.map +7 -0
  178. package/dist/lib/creative/ArcCheckbox/index.module.less +102 -0
  179. package/dist/lib/creative/ButtonRadioWithInfo/index.js.map +1 -1
  180. package/dist/lib/creative/ButtonWithProgress/index.d.ts +1 -1
  181. package/dist/lib/creative/ButtonWithProgress/index.js.map +2 -2
  182. package/dist/lib/creative/GlassSegmentedRadio/index.d.ts +24 -0
  183. package/dist/lib/creative/GlassSegmentedRadio/index.js +78 -0
  184. package/dist/lib/creative/GlassSegmentedRadio/index.js.map +7 -0
  185. package/dist/lib/creative/GlassSegmentedRadio/index.module.less +241 -0
  186. package/dist/lib/index.d.ts +30 -26
  187. package/dist/lib/index.js +31 -25
  188. package/dist/lib/index.js.map +2 -2
  189. package/dist/lib/index.less +3 -1
  190. package/dist/lib/layout/FlexGrid/index.d.ts +1 -1
  191. package/dist/lib/layout/FlexGrid/index.js.map +2 -2
  192. package/dist/lib/layout/YkContainer/index.js.map +1 -1
  193. package/dist/lib/layout/YkDrawer/index.d.ts +1 -1
  194. package/dist/lib/layout/YkDrawer/index.js +2 -1
  195. package/dist/lib/layout/YkDrawer/index.js.map +2 -2
  196. package/dist/lib/ui/LabelSelect/demo.js +1 -1
  197. package/dist/lib/ui/LabelSelect/demo.js.map +2 -2
  198. package/dist/lib/ui/LabelSelect/index.d.ts +1 -1
  199. package/dist/lib/ui/LabelSelect/index.js +1 -1
  200. package/dist/lib/ui/LabelSelect/index.js.map +2 -2
  201. package/dist/lib/ui/LogicOperator/index.d.ts +1 -1
  202. package/dist/lib/ui/LogicOperator/index.js.map +2 -2
  203. package/dist/lib/ui/YkButton/index.d.ts +1 -1
  204. package/dist/lib/ui/YkButton/index.js.map +2 -2
  205. package/dist/lib/ui/YkCard/index.d.ts +1 -1
  206. package/dist/lib/ui/YkCard/index.js.map +2 -2
  207. package/dist/lib/ui/YkCheckbox/index.d.ts +1 -1
  208. package/dist/lib/ui/YkCheckbox/index.js.map +2 -2
  209. package/dist/lib/ui/YkDescriptions/index.d.ts +1 -1
  210. package/dist/lib/ui/YkDescriptions/index.js.map +2 -2
  211. package/dist/lib/ui/YkPagination/index.d.ts +1 -1
  212. package/dist/lib/ui/YkPagination/index.js.map +2 -2
  213. package/dist/lib/ui/YkRadio/index.d.ts +1 -1
  214. package/dist/lib/ui/YkRadio/index.js.map +2 -2
  215. package/dist/lib/ui/YkSegmented/index.d.ts +1 -1
  216. package/dist/lib/ui/YkSegmented/index.js.map +2 -2
  217. package/dist/lib/ui/YkSelect/index.d.ts +1 -1
  218. package/dist/lib/ui/YkSelect/index.js.map +2 -2
  219. package/dist/lib/ui/YkSpin/index.d.ts +1 -1
  220. package/dist/lib/ui/YkSpin/index.js.map +2 -2
  221. package/dist/lib/ui/YkStatistic/index.d.ts +1 -1
  222. package/dist/lib/ui/YkStatistic/index.js.map +2 -2
  223. package/dist/lib/ui/YkSwitch/index.d.ts +1 -1
  224. package/dist/lib/ui/YkSwitch/index.js.map +2 -2
  225. package/dist/lib/ui/YkTabs/index.d.ts +1 -1
  226. package/dist/lib/ui/YkTabs/index.js.map +2 -2
  227. package/dist/lib/ui/YkTooltip/index.d.ts +1 -1
  228. package/dist/lib/ui/YkTooltip/index.js.map +2 -2
  229. package/dist/lib/utils/styleUtils.js.map +2 -2
  230. package/dist/lib/utils/ykStorybookDoc.js +1 -1
  231. package/dist/lib/utils/ykStorybookDoc.js.map +1 -1
  232. package/package.json +137 -144
@@ -0,0 +1,102 @@
1
+ /*基于原 checkbox 动效:去掉背景 ripple,外圈改为缺口圆环旋转 loading */
2
+
3
+ .root {
4
+ display: inline-flex;
5
+ align-items: center;
6
+ vertical-align: middle;
7
+ --arc-checkbox-accent: var(--accent-color, #a3e583);
8
+ }
9
+
10
+ .input {
11
+ position: absolute;
12
+ width: 1px;
13
+ height: 1px;
14
+ padding: 0;
15
+ margin: -1px;
16
+ overflow: hidden;
17
+ clip: rect(0, 0, 0, 0);
18
+ white-space: nowrap;
19
+ border: 0;
20
+ }
21
+
22
+ .label {
23
+ cursor: pointer;
24
+ position: relative;
25
+ width: 18px;
26
+ height: 18px;
27
+ -webkit-tap-highlight-color: transparent;
28
+ transform: translate3d(0, 0, 0);
29
+ flex-shrink: 0;
30
+ }
31
+
32
+ .label svg {
33
+ display: block;
34
+ fill: none;
35
+ stroke-linecap: round;
36
+ stroke-linejoin: round;
37
+ stroke: #c8ccd4;
38
+ stroke-width: 1.5;
39
+ transform: translate3d(0, 0, 0);
40
+ transition: stroke 0.2s ease;
41
+ }
42
+
43
+ .ringSpin {
44
+ transform-origin: 9px 9px;
45
+ animation: arc-checkbox-spin 0.75s linear infinite;
46
+ }
47
+
48
+ @keyframes arc-checkbox-spin {
49
+ to {
50
+ transform: rotate(360deg);
51
+ }
52
+ }
53
+
54
+ .ring {
55
+ stroke-dasharray: 31.4 11;
56
+ stroke-dashoffset: 0;
57
+ }
58
+
59
+ .check {
60
+ stroke-dasharray: 22;
61
+ stroke-dashoffset: 66;
62
+ opacity: 0;
63
+ transition: opacity 0.15s ease;
64
+ }
65
+
66
+ .label:hover svg {
67
+ stroke: var(--arc-checkbox-accent);
68
+ }
69
+
70
+ .input:checked + .label .ringSpin {
71
+ animation: none;
72
+ }
73
+
74
+ .input:checked + .label .ring {
75
+ opacity: 0;
76
+ transition: opacity 0.12s ease;
77
+ }
78
+
79
+ .input:checked + .label .check {
80
+ opacity: 1;
81
+ stroke: var(--arc-checkbox-accent);
82
+ stroke-dashoffset: 42;
83
+ transition:
84
+ stroke-dashoffset 0.2s linear 0.12s,
85
+ opacity 0.15s ease 0.1s,
86
+ stroke 0.2s ease;
87
+ }
88
+
89
+ .input:focus-visible + .label {
90
+ outline: 2px solid var(--arc-checkbox-accent);
91
+ outline-offset: 2px;
92
+ border-radius: 4px;
93
+ }
94
+
95
+ .input:disabled + .label {
96
+ cursor: not-allowed;
97
+ opacity: 0.45;
98
+ }
99
+
100
+ .input:disabled + .label .ringSpin {
101
+ animation-play-state: paused;
102
+ }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/creative/ButtonRadioWithInfo/index.tsx"],
4
- "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"],
4
+ "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"],
5
5
  "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;",
6
6
  "names": ["_a", "_b"]
7
7
  }
@@ -1,4 +1,4 @@
1
- import { ButtonProps } from 'antd';
1
+ import { type ButtonProps } from 'antd';
2
2
  import React from 'react';
3
3
  import './index.less';
4
4
  export interface ButtonWithProgressProps extends ButtonProps {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/creative/ButtonWithProgress/index.tsx"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ export type GlassSegmentOption = {
3
+ value: string;
4
+ label: React.ReactNode;
5
+ };
6
+ export type GlassSegmentedRadioProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'role' | 'children'> & {
7
+ options: GlassSegmentOption[];
8
+ value: string;
9
+ onChange: (value: string) => void;
10
+ goldShell?: boolean;
11
+ disabled?: boolean;
12
+ };
13
+ /**
14
+ * 毛玻璃分段单选:滑块随选中项平移,每一档对应独立渐变配色(银/金/铂等);容器在 `html[data-theme="light"]` 下为浅色毛玻璃。
15
+ * 请为分组设置 `aria-label` 或 `aria-labelledby` 以便读屏识别。
16
+ */
17
+ export declare const GlassSegmentedRadio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onChange" | "role"> & {
18
+ options: GlassSegmentOption[];
19
+ value: string;
20
+ onChange: (value: string) => void;
21
+ goldShell?: boolean;
22
+ disabled?: boolean;
23
+ } & React.RefAttributes<HTMLDivElement>>;
24
+ export default GlassSegmentedRadio;
@@ -0,0 +1,75 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+
33
+ // src/creative/GlassSegmentedRadio/index.tsx
34
+ import classNames from "classnames";
35
+ import React, { forwardRef, useId, useMemo } from "react";
36
+ import styles from "./index.module.less";
37
+ var GlassSegmentedRadio = forwardRef(function GlassSegmentedRadio2(_a, ref) {
38
+ var _b = _a, { options, value, onChange, className, goldShell, disabled, style } = _b, rest = __objRest(_b, ["options", "value", "onChange", "className", "goldShell", "disabled", "style"]);
39
+ const uid = useId().replace(/:/g, "");
40
+ const name = useMemo(() => `glass-seg-${uid}`, [uid]);
41
+ const count = Math.max(1, options.length);
42
+ return /* @__PURE__ */ React.createElement(
43
+ "div",
44
+ __spreadValues({
45
+ ref,
46
+ className: classNames(styles.root, goldShell && styles.rootAdGold, disabled && styles.rootDisabled, className),
47
+ style: __spreadProps(__spreadValues({}, style), {
48
+ ["--segment-count"]: String(count)
49
+ }),
50
+ role: "radiogroup",
51
+ "aria-disabled": disabled || void 0
52
+ }, rest),
53
+ options.map((opt, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: opt.value }, /* @__PURE__ */ React.createElement(
54
+ "input",
55
+ {
56
+ type: "radio",
57
+ className: styles.input,
58
+ name,
59
+ id: `${name}-${i}`,
60
+ value: opt.value,
61
+ checked: value === opt.value,
62
+ disabled,
63
+ onChange: () => onChange(opt.value)
64
+ }
65
+ ), /* @__PURE__ */ React.createElement("label", { className: styles.label, htmlFor: `${name}-${i}` }, opt.label))),
66
+ /* @__PURE__ */ React.createElement("div", { className: styles.glider, "aria-hidden": true })
67
+ );
68
+ });
69
+ GlassSegmentedRadio.displayName = "GlassSegmentedRadio";
70
+ var GlassSegmentedRadio_default = GlassSegmentedRadio;
71
+ export {
72
+ GlassSegmentedRadio,
73
+ GlassSegmentedRadio_default as default
74
+ };
75
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/creative/GlassSegmentedRadio/index.tsx"],
4
+ "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"],
5
+ "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;",
6
+ "names": ["GlassSegmentedRadio"]
7
+ }
@@ -0,0 +1,241 @@
1
+ /* 容器:参考 glass-radio-group 暗色毛玻璃;浅色主题单独覆盖 */
2
+ .root {
3
+ --segment-count: 2;
4
+ --glass-group-bg: rgba(255, 255, 255, 0.06);
5
+ --glass-group-text: #999;
6
+ --glass-group-text-hover: #666;
7
+ --glass-group-text-checked: #333;
8
+ --glass-group-border: rgba(255, 255, 255, 0.1);
9
+
10
+ display: flex;
11
+ position: relative;
12
+ width: fit-content;
13
+ max-width: 100%;
14
+ border-radius: 1rem;
15
+ backdrop-filter: blur(12px);
16
+ -webkit-backdrop-filter: blur(12px);
17
+ overflow: hidden;
18
+ border: 1px solid var(--glass-group-border);
19
+ font-family: var(--font-sans, system-ui, sans-serif);
20
+ background: var(--glass-group-bg);
21
+ box-shadow:
22
+ inset 1px 1px 4px rgba(255, 255, 255, 0.2),
23
+ inset -1px -1px 6px rgba(0, 0, 0, 0.3),
24
+ 0 4px 12px rgba(0, 0, 0, 0.15);
25
+ }
26
+
27
+ .rootDisabled {
28
+ opacity: 0.55;
29
+ pointer-events: none;
30
+ }
31
+
32
+ :global(html[data-theme="light"]) .root {
33
+ --glass-group-bg: rgba(255, 255, 255, 0.78);
34
+ --glass-group-text: rgba(0, 0, 0, 0.55);
35
+ --glass-group-text-hover: rgba(0, 0, 0, 0.88);
36
+ --glass-group-text-checked: rgba(0, 0, 0, 0.92);
37
+ --glass-group-border: var(--ln-border-subtle, rgba(0, 0, 0, 0.12));
38
+
39
+ box-shadow:
40
+ inset 1px 1px 3px rgba(255, 255, 255, 0.95),
41
+ inset -1px -1px 4px rgba(0, 0, 0, 0.05),
42
+ 0 2px 8px rgba(0, 0, 0, 0.06);
43
+ }
44
+
45
+ /* 保留可聚焦与读屏,不用 display:none */
46
+ .input {
47
+ position: absolute;
48
+ opacity: 0;
49
+ width: 0;
50
+ height: 0;
51
+ margin: 0;
52
+ pointer-events: none;
53
+ }
54
+
55
+ .label {
56
+ flex: 1;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ min-width: 80px;
61
+ font-size: 14px;
62
+ padding: 0.8rem 1.6rem;
63
+ cursor: pointer;
64
+ font-weight: 600;
65
+ letter-spacing: 0.3px;
66
+ color: var(--glass-group-text);
67
+ position: relative;
68
+ z-index: 2;
69
+ transition: color 0.3s ease-in-out;
70
+ user-select: none;
71
+ }
72
+
73
+ .label:hover {
74
+ color: var(--glass-group-text-hover);
75
+ }
76
+
77
+ .input:checked + .label {
78
+ color: var(--glass-group-text-checked);
79
+ }
80
+
81
+ .input:focus-visible + .label {
82
+ outline: 2px solid var(--ln-focus-ring, #1677ff);
83
+ outline-offset: 2px;
84
+ border-radius: 6px;
85
+ }
86
+
87
+ /* 滑块:宽度随段数变化;位移与配色由「第 n 个 input 选中」决定(translateX 百分比相对滑块自身宽度) */
88
+ .glider {
89
+ position: absolute;
90
+ top: 0;
91
+ bottom: 0;
92
+ left: 0;
93
+ width: calc(100% / var(--segment-count));
94
+ border-radius: 1rem;
95
+ z-index: 1;
96
+ pointer-events: none;
97
+ transform: translate3d(0%, 0, 0);
98
+ transition:
99
+ transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56),
100
+ background 0.4s ease-in-out,
101
+ box-shadow 0.4s ease-in-out;
102
+ background: linear-gradient(135deg, #c0c0c055, #e0e0e0);
103
+ box-shadow:
104
+ 0 0 18px rgba(192, 192, 192, 0.5),
105
+ 0 0 10px rgba(255, 255, 255, 0.4) inset;
106
+ }
107
+
108
+ /* 1 Silver */
109
+ .input:nth-of-type(1):checked ~ .glider {
110
+ transform: translate3d(0%, 0, 0);
111
+ background: linear-gradient(135deg, #c0c0c055, #e0e0e0);
112
+ box-shadow:
113
+ 0 0 18px rgba(192, 192, 192, 0.5),
114
+ 0 0 10px rgba(255, 255, 255, 0.4) inset;
115
+ }
116
+
117
+ /* 2 Gold */
118
+ .input:nth-of-type(2):checked ~ .glider {
119
+ transform: translate3d(100%, 0, 0);
120
+ background: linear-gradient(135deg, #ffd70055, #ffcc00);
121
+ box-shadow:
122
+ 0 0 18px rgba(255, 215, 0, 0.5),
123
+ 0 0 10px rgba(255, 235, 150, 0.4) inset;
124
+ }
125
+
126
+ /* 3 Platinum */
127
+ .input:nth-of-type(3):checked ~ .glider {
128
+ transform: translate3d(200%, 0, 0);
129
+ background: linear-gradient(135deg, #d0e7ff55, #a0d8ff);
130
+ box-shadow:
131
+ 0 0 18px rgba(160, 216, 255, 0.5),
132
+ 0 0 10px rgba(200, 240, 255, 0.4) inset;
133
+ }
134
+
135
+ /* 4 Rose */
136
+ .input:nth-of-type(4):checked ~ .glider {
137
+ transform: translate3d(300%, 0, 0);
138
+ background: linear-gradient(135deg, #ffb6c155, #ff7eb3);
139
+ box-shadow:
140
+ 0 0 18px rgba(255, 150, 180, 0.45),
141
+ 0 0 10px rgba(255, 220, 235, 0.35) inset;
142
+ }
143
+
144
+ /* 5 Emerald */
145
+ .input:nth-of-type(5):checked ~ .glider {
146
+ transform: translate3d(400%, 0, 0);
147
+ background: linear-gradient(135deg, #98fb9855, #3cb371);
148
+ box-shadow:
149
+ 0 0 18px rgba(80, 200, 120, 0.45),
150
+ 0 0 10px rgba(200, 255, 220, 0.35) inset;
151
+ }
152
+
153
+ /* 6 Violet */
154
+ .input:nth-of-type(6):checked ~ .glider {
155
+ transform: translate3d(500%, 0, 0);
156
+ background: linear-gradient(135deg, #e6e6fa55, #b388ff);
157
+ box-shadow:
158
+ 0 0 18px rgba(179, 136, 255, 0.5),
159
+ 0 0 10px rgba(230, 220, 255, 0.4) inset;
160
+ }
161
+
162
+ /* 7 Amber */
163
+ .input:nth-of-type(7):checked ~ .glider {
164
+ transform: translate3d(600%, 0, 0);
165
+ background: linear-gradient(135deg, #ffcc8055, #ff9933);
166
+ box-shadow:
167
+ 0 0 18px rgba(255, 160, 80, 0.45),
168
+ 0 0 10px rgba(255, 230, 200, 0.35) inset;
169
+ }
170
+
171
+ /* 8 Cyan */
172
+ .input:nth-of-type(8):checked ~ .glider {
173
+ transform: translate3d(700%, 0, 0);
174
+ background: linear-gradient(135deg, #80ffff55, #20b2aa);
175
+ box-shadow:
176
+ 0 0 18px rgba(64, 200, 190, 0.45),
177
+ 0 0 10px rgba(200, 255, 252, 0.35) inset;
178
+ }
179
+
180
+ /* 9+:与前几档区分,超出 8 项时仍可辨色 */
181
+ .input:nth-of-type(9):checked ~ .glider {
182
+ transform: translate3d(800%, 0, 0);
183
+ background: linear-gradient(135deg, #daa52055, #cd853f);
184
+ box-shadow:
185
+ 0 0 18px rgba(205, 133, 63, 0.45),
186
+ 0 0 10px rgba(255, 230, 200, 0.35) inset;
187
+ }
188
+
189
+ .input:nth-of-type(10):checked ~ .glider {
190
+ transform: translate3d(900%, 0, 0);
191
+ background: linear-gradient(135deg, #b0c4de55, #778899);
192
+ box-shadow:
193
+ 0 0 18px rgba(119, 136, 153, 0.45),
194
+ 0 0 10px rgba(220, 230, 240, 0.35) inset;
195
+ }
196
+
197
+ /* 11–12:再两档区分色;更多分段需再扩展或接受与第 1 档同视觉未匹配(应极少见) */
198
+ .input:nth-of-type(11):checked ~ .glider {
199
+ transform: translate3d(1000%, 0, 0);
200
+ background: linear-gradient(135deg, #f5deb355, #daa520);
201
+ box-shadow:
202
+ 0 0 18px rgba(218, 165, 32, 0.45),
203
+ 0 0 10px rgba(255, 245, 220, 0.35) inset;
204
+ }
205
+
206
+ .input:nth-of-type(12):checked ~ .glider {
207
+ transform: translate3d(1100%, 0, 0);
208
+ background: linear-gradient(135deg, #dda0dd55, #9370db);
209
+ box-shadow:
210
+ 0 0 18px rgba(147, 112, 219, 0.45),
211
+ 0 0 10px rgba(240, 230, 255, 0.35) inset;
212
+ }
213
+
214
+ /* 广告模式:只强化外框与底,不覆盖分段滑块配色(默认与暗色根一致) */
215
+ .rootAdGold {
216
+ background: linear-gradient(
217
+ 165deg,
218
+ rgba(201, 162, 39, 0.12) 0%,
219
+ rgba(255, 255, 255, 0.05) 50%,
220
+ rgba(230, 195, 92, 0.08) 100%
221
+ );
222
+ border-color: rgba(230, 195, 92, 0.25);
223
+ box-shadow:
224
+ inset 1px 1px 4px rgba(255, 255, 255, 0.1),
225
+ inset -1px -1px 6px rgba(0, 0, 0, 0.35),
226
+ 0 4px 16px rgba(201, 162, 39, 0.15);
227
+ }
228
+
229
+ :global(html[data-theme="light"]) .rootAdGold {
230
+ background: linear-gradient(
231
+ 165deg,
232
+ rgba(255, 248, 220, 0.55) 0%,
233
+ rgba(255, 255, 255, 0.82) 45%,
234
+ rgba(255, 252, 235, 0.75) 100%
235
+ );
236
+ border-color: rgba(201, 162, 39, 0.35);
237
+ box-shadow:
238
+ inset 1px 1px 3px rgba(255, 255, 255, 0.95),
239
+ inset -1px -1px 4px rgba(201, 162, 39, 0.08),
240
+ 0 2px 10px rgba(201, 162, 39, 0.12);
241
+ }
@@ -1,4 +1,34 @@
1
1
  import 'antd/dist/reset.css';
2
+ export { default as AiChat } from './business/AiChat';
3
+ export { default as DrawerPageInfo } from './business/DrawerPageInfo';
4
+ export { default as Editor } from './business/Editor';
5
+ export { default as Empty } from './business/Empty';
6
+ export { default as ModCommonFilter } from './business/ModCommonFilter';
7
+ export { default as YkPorjectSelect } from './business/YkPorjectSelect';
8
+ export { default as Clock } from './components/Clock';
9
+ export { default as DebounceInput } from './components/DebounceInput';
10
+ export { default as MultipleSelect } from './components/MultipleSelect';
11
+ export { default as NumericInput } from './components/NumericInput';
12
+ export { default as RefreshButton } from './components/RefreshButton';
13
+ export { default as SearchWithHistory } from './components/SearchWithHistory';
14
+ export { default as TextWithInput } from './components/TextWithInput';
15
+ export { default as TextWithToolTip } from './components/TextWithToolTip';
16
+ export { default as TreeTransfer } from './components/TreeTransfer';
17
+ export type { DateRangeValue, YkDateRangePickerProps, YkDateRangePickerRef } from './components/YkDateRangePicker';
18
+ export { default as YkDateRangePicker } from './components/YkDateRangePicker';
19
+ export { default as YkRangeDateWithVS } from './components/YkRangeDateWithVS';
20
+ export { default as YkRangeTimeWithRecent } from './components/YkRangeTimeWithRecent';
21
+ export type { ArcCheckboxProps } from './creative/ArcCheckbox';
22
+ export { default as ArcCheckbox } from './creative/ArcCheckbox';
23
+ export { default as ButtonRadioWithInfo } from './creative/ButtonRadioWithInfo';
24
+ export { default as ButtonWithProgress } from './creative/ButtonWithProgress';
25
+ export type { GlassSegmentedRadioProps, GlassSegmentOption } from './creative/GlassSegmentedRadio';
26
+ export { default as GlassSegmentedRadio } from './creative/GlassSegmentedRadio';
27
+ export { default as FlexGrid } from './layout/FlexGrid';
28
+ export { default as YkContainer } from './layout/YkContainer';
29
+ export { default as YkDrawer } from './layout/YkDrawer';
30
+ export { default as InputTheme } from './Themes/InputTheme';
31
+ export { default as TableTheme } from './Themes/TableTheme';
2
32
  export { default as LabelSelect } from './ui/LabelSelect';
3
33
  export { default as LogicOperator } from './ui/LogicOperator';
4
34
  export { default as YkButton } from './ui/YkButton';
@@ -15,29 +45,3 @@ export { default as YkStatistic } from './ui/YkStatistic';
15
45
  export { default as YkSwitch } from './ui/YkSwitch';
16
46
  export { default as YkTabs } from './ui/YkTabs';
17
47
  export { default as YkTooltip } from './ui/YkTooltip';
18
- export { default as DrawerPageInfo } from './business/DrawerPageInfo';
19
- export { default as Editor } from './business/Editor';
20
- export { default as Empty } from './business/Empty';
21
- export { default as ModCommonFilter } from './business/ModCommonFilter';
22
- export { default as YkPorjectSelect } from './business/YkPorjectSelect';
23
- export { default as YkDateRangePicker } from './components/YkDateRangePicker';
24
- export type { DateRangeValue, YkDateRangePickerProps, YkDateRangePickerRef } from './components/YkDateRangePicker';
25
- export { default as YkRangeDateWithVS } from './components/YkRangeDateWithVS';
26
- export { default as YkRangeTimeWithRecent } from './components/YkRangeTimeWithRecent';
27
- export { default as ButtonRadioWithInfo } from './creative/ButtonRadioWithInfo';
28
- export { default as ButtonWithProgress } from './creative/ButtonWithProgress';
29
- export { default as InputTheme } from './Themes/InputTheme';
30
- export { default as TableTheme } from './Themes/TableTheme';
31
- export { default as FlexGrid } from './layout/FlexGrid';
32
- export { default as YkContainer } from './layout/YkContainer';
33
- export { default as YkDrawer } from './layout/YkDrawer';
34
- export { default as Clock } from './components/Clock';
35
- export { default as DebounceInput } from './components/DebounceInput';
36
- export { default as MultipleSelect } from './components/MultipleSelect';
37
- export { default as NumericInput } from './components/NumericInput';
38
- export { default as RefreshButton } from './components/RefreshButton';
39
- export { default as SearchWithHistory } from './components/SearchWithHistory';
40
- export { default as TextWithInput } from './components/TextWithInput';
41
- export { default as TextWithToolTip } from './components/TextWithToolTip';
42
- export { default as TreeTransfer } from './components/TreeTransfer';
43
- export { default as AiChat } from './business/AiChat';