@choice-ui/react 1.9.7 → 1.9.8

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 (45) hide show
  1. package/dist/components/button/dist/index.d.ts +9 -2
  2. package/dist/components/button/dist/index.js +19 -45
  3. package/dist/components/checkbox/dist/index.d.ts +1 -10
  4. package/dist/components/checkbox/dist/index.js +5 -49
  5. package/dist/components/code-block/dist/index.d.ts +14 -11
  6. package/dist/components/code-block/dist/index.js +93 -120
  7. package/dist/components/colors/dist/index.d.ts +6 -39
  8. package/dist/components/colors/src/color-image-paint/color-image-paint.js +2 -2
  9. package/dist/components/dropdown/dist/index.d.ts +0 -6
  10. package/dist/components/dropdown/dist/index.js +10 -20
  11. package/dist/components/emoji-picker/dist/index.d.ts +1 -30
  12. package/dist/components/emoji-picker/dist/index.js +44 -148
  13. package/dist/components/form/src/adapters/range-adapter.js +2 -2
  14. package/dist/components/icon-button/dist/index.d.ts +1 -1
  15. package/dist/components/icon-button/dist/index.js +0 -39
  16. package/dist/components/list/dist/index.d.ts +1 -1
  17. package/dist/components/md-render/dist/index.d.ts +1 -2
  18. package/dist/components/md-render/dist/index.js +9 -5
  19. package/dist/components/menus/dist/index.d.ts +0 -5
  20. package/dist/components/menus/dist/index.js +3 -32
  21. package/dist/components/modal/dist/index.js +2 -2
  22. package/dist/components/notifications/dist/index.d.ts +5 -1
  23. package/dist/components/numeric-input/dist/index.d.ts +10 -27
  24. package/dist/components/numeric-input/dist/index.js +23 -108
  25. package/dist/components/panel/dist/index.d.ts +16 -16
  26. package/dist/components/picture-preview/dist/index.d.ts +0 -5
  27. package/dist/components/picture-preview/dist/index.js +140 -287
  28. package/dist/components/popover/dist/index.d.ts +0 -5
  29. package/dist/components/popover/dist/index.js +2 -21
  30. package/dist/components/radio/dist/index.d.ts +1 -9
  31. package/dist/components/radio/dist/index.js +6 -50
  32. package/dist/components/range/dist/index.d.ts +20 -276
  33. package/dist/components/range/dist/index.js +616 -1044
  34. package/dist/components/scroll-area/dist/index.d.ts +27 -4
  35. package/dist/components/scroll-area/dist/index.js +123 -96
  36. package/dist/components/separator/dist/index.d.ts +8 -1
  37. package/dist/components/splitter/dist/index.d.ts +1 -1
  38. package/dist/components/text-field/dist/index.d.ts +3 -2
  39. package/dist/components/text-field/dist/index.js +19 -4
  40. package/dist/components/textarea/dist/index.js +1 -3
  41. package/dist/components/tooltip/dist/index.d.ts +0 -2
  42. package/dist/components/tooltip/dist/index.js +5 -23
  43. package/package.json +1 -1
  44. package/dist/components/toast/dist/index.d.ts +0 -274
  45. package/dist/components/virtual-select/dist/index.d.ts +0 -48
@@ -1,15 +1,22 @@
1
1
  import { HTMLProps } from 'react';
2
+ import { TooltipProps } from '../../tooltip/src';
2
3
  import * as react from 'react';
3
4
 
4
- interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement | HTMLAnchorElement>, "size" | "as"> {
5
+ interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, "size"> {
5
6
  active?: boolean;
6
- as?: React.ElementType;
7
7
  asChild?: boolean;
8
8
  className?: string;
9
9
  focused?: boolean;
10
10
  loading?: boolean;
11
11
  readOnly?: boolean;
12
+ /**
13
+ * @default "default"
14
+ */
12
15
  size?: "default" | "large";
16
+ tooltip?: TooltipProps;
17
+ /**
18
+ * @default "primary"
19
+ */
13
20
  variant?: "primary" | "secondary" | "solid" | "destructive" | "secondary-destruct" | "inverse" | "success" | "link" | "link-danger" | "ghost" | "dark" | "reset";
14
21
  }
15
22
  declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
@@ -1,9 +1,10 @@
1
- import { Slot } from "../../slot/dist/index.js";
2
1
  import { LoaderCircle } from "@choiceform/icons-react";
3
- import { forwardRef, useMemo, isValidElement, cloneElement } from "react";
2
+ import { Slot } from "../../slot/dist/index.js";
3
+ import { Tooltip } from "../../tooltip/dist/index.js";
4
+ import { forwardRef, isValidElement, cloneElement, useMemo } from "react";
4
5
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
5
- import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
6
6
  import { isMultiElement } from "../../../shared/utils/assertion.js";
7
+ import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
7
8
  var buttonTv = tcv({
8
9
  slots: {
9
10
  button: [
@@ -74,10 +75,6 @@ var buttonTv = tcv({
74
75
  focused: {
75
76
  true: "",
76
77
  false: ""
77
- },
78
- multiElement: {
79
- true: "",
80
- false: ""
81
78
  }
82
79
  },
83
80
  compoundVariants: [
@@ -126,15 +123,10 @@ var buttonTv = tcv({
126
123
  variant: ["link", "link-danger", "ghost"],
127
124
  disabled: true,
128
125
  class: {
129
- button: ["text-disabled-foreground pointer-events-none"]
130
- }
131
- },
132
- {
133
- variant: ["link", "link-danger", "ghost"],
134
- disabled: true,
135
- multiElement: true,
136
- class: {
137
- button: ["border-default-boundary"]
126
+ button: [
127
+ "text-disabled-foreground pointer-events-none",
128
+ "data-[multi-element=true]:border-default-boundary"
129
+ ]
138
130
  }
139
131
  },
140
132
  {
@@ -244,13 +236,6 @@ var buttonTv = tcv({
244
236
  loading: false,
245
237
  variant: "dark",
246
238
  class: { button: "active:bg-gray-600" }
247
- },
248
- {
249
- disabled: false,
250
- loading: false,
251
- variant: "secondary",
252
- active: false,
253
- class: { button: "hover:bg-secondary-background" }
254
239
  }
255
240
  ],
256
241
  defaultVariants: {
@@ -259,8 +244,7 @@ var buttonTv = tcv({
259
244
  active: false,
260
245
  disabled: false,
261
246
  loading: false,
262
- focused: false,
263
- multiElement: false
247
+ focused: false
264
248
  }
265
249
  });
266
250
  var Button = forwardRef(function Button2(props, ref) {
@@ -275,25 +259,13 @@ var Button = forwardRef(function Button2(props, ref) {
275
259
  loading,
276
260
  asChild,
277
261
  children,
278
- as,
262
+ tooltip,
279
263
  "aria-label": ariaLabel,
280
264
  onClick,
281
265
  ...rest
282
266
  } = props;
283
- const As = as ?? "button";
284
- const AsComponent = asChild ? Slot : As;
285
- const elementProps = !asChild && As === "button" ? { type: rest.type ?? "button" } : {};
286
- const tv = useMemo(
287
- () => buttonTv({
288
- variant,
289
- size,
290
- active,
291
- disabled,
292
- loading,
293
- focused
294
- }),
295
- [variant, size, active, disabled, loading, focused]
296
- );
267
+ const Button3 = asChild ? Slot : "button";
268
+ const tv = buttonTv({ variant, size, active, disabled, loading, focused, className });
297
269
  const content = isValidElement(children) ? cloneElement(children, {
298
270
  children: children.props.children
299
271
  }) : loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -307,21 +279,23 @@ var Button = forwardRef(function Button2(props, ref) {
307
279
  return props["aria-label"];
308
280
  }, [children, props]);
309
281
  const handleClick = readOnly ? void 0 : onClick;
310
- return /* @__PURE__ */ jsx(
311
- AsComponent,
282
+ const button = /* @__PURE__ */ jsx(
283
+ Button3,
312
284
  {
313
- ref,
314
- className: tcx(tv.button({ multiElement: isMultiElement(content) }), className),
315
- ...elementProps,
316
285
  ...rest,
286
+ ref,
287
+ type: rest.type || "button",
317
288
  disabled: disabled || loading,
318
289
  onClick: handleClick,
290
+ className: tcx(tv.button(), className),
291
+ "data-multi-element": isMultiElement(content),
319
292
  "aria-disabled": disabled || loading,
320
293
  "aria-busy": loading,
321
294
  "aria-label": ariaLabelProps,
322
295
  children: content
323
296
  }
324
297
  );
298
+ return tooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: button }) : button;
325
299
  });
326
300
  Button.displayName = "Button";
327
301
  export {
@@ -1,14 +1,6 @@
1
1
  import { HTMLProps, ReactNode } from 'react';
2
2
  import * as react from 'react';
3
3
 
4
- interface CheckboxIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
5
- children?: ReactNode | ((props: {
6
- value?: boolean;
7
- mixed?: boolean;
8
- }) => ReactNode);
9
- }
10
- declare const CheckboxIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CheckboxIconProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
11
-
12
4
  interface CheckboxLabelProps extends Omit<HTMLProps<HTMLLabelElement>, "htmlFor" | "id" | "disabled"> {
13
5
  children: ReactNode;
14
6
  }
@@ -28,10 +20,9 @@ interface CheckboxType {
28
20
  (props: CheckboxProps & {
29
21
  ref?: React.Ref<HTMLInputElement>;
30
22
  }): JSX.Element;
31
- Icon: typeof CheckboxIcon;
32
23
  Label: typeof CheckboxLabel;
33
24
  displayName?: string;
34
25
  }
35
26
  declare const Checkbox: CheckboxType;
36
27
 
37
- export { Checkbox, type CheckboxIconProps, type CheckboxLabelProps, type CheckboxProps };
28
+ export { Checkbox, type CheckboxProps };
@@ -1,5 +1,5 @@
1
1
  import { Indeterminate, Check } from "@choiceform/icons-react";
2
- import { memo, forwardRef, useId, Children, isValidElement, createContext, useContext } from "react";
2
+ import { memo, forwardRef, useId, createContext, useContext } from "react";
3
3
  import { useEventCallback } from "usehooks-ts";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -137,38 +137,6 @@ var checkboxTv = tcv({
137
137
  focused: false
138
138
  }
139
139
  });
140
- var CheckboxIcon = memo(
141
- forwardRef(function CheckboxIcon2(props, ref) {
142
- const { className, children, ...rest } = props;
143
- const { value, mixed, disabled, variant } = useCheckboxContext();
144
- const tv = checkboxTv({
145
- type: "checkbox",
146
- variant,
147
- disabled,
148
- checked: value || mixed
149
- });
150
- const renderIcon = () => {
151
- if (typeof children === "function") {
152
- return children({ value, mixed });
153
- }
154
- if (children !== void 0) {
155
- return children;
156
- }
157
- return mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null;
158
- };
159
- return /* @__PURE__ */ jsx(
160
- "div",
161
- {
162
- ref,
163
- className: tcx(tv.box(), className),
164
- "data-active": value,
165
- ...rest,
166
- children: renderIcon()
167
- }
168
- );
169
- })
170
- );
171
- CheckboxIcon.displayName = "Checkbox.Icon";
172
140
  var CheckboxLabel = memo(
173
141
  forwardRef(function CheckboxLabel2(props, ref) {
174
142
  const { children, className, ...rest } = props;
@@ -227,23 +195,12 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
227
195
  }
228
196
  onKeyDown == null ? void 0 : onKeyDown(e);
229
197
  });
230
- const isIconElement = (child) => {
231
- var _a;
232
- return isValidElement(child) && (child.type === CheckboxIcon || ((_a = child.type) == null ? void 0 : _a.displayName) === "Checkbox.Icon");
233
- };
234
- const childArray = Children.toArray(children);
235
- const iconChild = childArray.find(isIconElement);
236
- const otherChildren = childArray.filter((child) => !isIconElement(child));
237
198
  const renderChildren = () => {
238
- if (otherChildren.length === 1) {
239
- const child = otherChildren[0];
240
- if (typeof child === "string" || typeof child === "number") {
241
- return /* @__PURE__ */ jsx(CheckboxLabel, { children: child });
242
- }
199
+ if (typeof children === "string" || typeof children === "number") {
200
+ return /* @__PURE__ */ jsx(CheckboxLabel, { children });
243
201
  }
244
- return otherChildren;
202
+ return children;
245
203
  };
246
- const renderDefaultIcon = () => /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null });
247
204
  return /* @__PURE__ */ jsx(
248
205
  CheckboxContext.Provider,
249
206
  {
@@ -277,7 +234,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
277
234
  ...rest
278
235
  }
279
236
  ),
280
- iconChild ?? renderDefaultIcon()
237
+ /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
281
238
  ] }),
282
239
  renderChildren()
283
240
  ] })
@@ -286,7 +243,6 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
286
243
  });
287
244
  var MemoizedCheckbox = memo(CheckboxBase);
288
245
  var Checkbox2 = MemoizedCheckbox;
289
- Checkbox2.Icon = CheckboxIcon;
290
246
  Checkbox2.Label = CheckboxLabel;
291
247
  Checkbox2.displayName = "Checkbox";
292
248
  export {
@@ -1,5 +1,6 @@
1
1
  import { default as React__default, ReactNode, HTMLProps, RefObject } from 'react';
2
2
  import * as React from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
4
 
4
5
  interface CodeBlockContextValue {
5
6
  codeExpanded: boolean;
@@ -13,7 +14,7 @@ interface CodeBlockContextValue {
13
14
  isExpanded: boolean;
14
15
  language: string;
15
16
  lineCount: number;
16
- lineThreshold?: number;
17
+ lineThreshold: number;
17
18
  needsScroll: boolean;
18
19
  scrollRef?: RefObject<HTMLDivElement>;
19
20
  variant?: "default" | "light" | "dark";
@@ -50,33 +51,35 @@ interface CodeBlockFooterProps extends CodeBlockInjectedProps {
50
51
  }
51
52
  interface CodeBlockContentProps extends CodeBlockInjectedProps {
52
53
  className?: string;
54
+ code: string;
53
55
  language?: string;
54
56
  withScrollArea?: boolean;
55
- children?: string;
56
57
  }
57
58
  interface CodeBlockCodeProps extends HTMLProps<HTMLDivElement> {
58
59
  className?: string;
59
- children?: string;
60
+ code: string;
61
+ /** 从 CodeBlock 传递的 context */
60
62
  codeBlock?: CodeBlockContextValue;
61
63
  codeBlockId?: string;
62
64
  language?: string;
65
+ /** 手动指定主题,覆盖自动检测 */
63
66
  variant?: "light" | "dark";
64
67
  }
65
68
 
66
- declare const CodeBlock: React__default.NamedExoticComponent<CodeBlockProps> & {
67
- Code: React__default.NamedExoticComponent<CodeBlockCodeProps>;
68
- Content: React__default.NamedExoticComponent<CodeBlockContentProps>;
69
- Footer: React__default.NamedExoticComponent<CodeBlockFooterProps>;
70
- Header: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
71
- };
72
-
73
69
  declare const CodeBlockCode: React.NamedExoticComponent<CodeBlockCodeProps>;
74
70
 
75
71
  declare const CodeBlockHeader: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
76
72
 
77
73
  declare const CodeBlockFooter: React.NamedExoticComponent<CodeBlockFooterProps>;
78
74
 
79
- declare const CodeBlockContent: React.NamedExoticComponent<CodeBlockContentProps>;
75
+ declare function CodeBlockContent(props: CodeBlockContentProps): react_jsx_runtime.JSX.Element | null;
76
+
77
+ declare const CodeBlock: React__default.NamedExoticComponent<CodeBlockProps> & {
78
+ Code: React__default.NamedExoticComponent<CodeBlockCodeProps>;
79
+ Content: typeof CodeBlockContent;
80
+ Footer: React__default.NamedExoticComponent<CodeBlockFooterProps>;
81
+ Header: React__default.NamedExoticComponent<CodeBlockHeaderProps>;
82
+ };
80
83
 
81
84
  declare function getDefaultFilenameForLanguage(language: string): string;
82
85