@a-type/ui 6.1.41 → 6.1.42

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 (17) hide show
  1. package/dist/components/forms/EmojiField.js +1 -1
  2. package/dist/components/forms/EmojiField.js.map +1 -1
  3. package/dist/components/forms/Field.d.ts +5 -4
  4. package/dist/components/forms/Field.js +15 -4
  5. package/dist/components/forms/Field.js.map +1 -1
  6. package/dist/components/forms/Field.module.css +3 -0
  7. package/dist/components/forms/ToggleGroupField.js +1 -1
  8. package/dist/components/forms/ToggleGroupField.js.map +1 -1
  9. package/dist/components/forms/index.d.ts +1 -0
  10. package/dist/components/forms/index.js +1 -0
  11. package/dist/components/forms/index.js.map +1 -1
  12. package/package.json +1 -1
  13. package/src/components/forms/EmojiField.tsx +1 -0
  14. package/src/components/forms/Field.module.css +3 -0
  15. package/src/components/forms/Field.tsx +36 -14
  16. package/src/components/forms/ToggleGroupField.tsx +2 -2
  17. package/src/components/forms/index.tsx +1 -0
package/dist/components/forms/EmojiField.js CHANGED
@@ -24,7 +24,7 @@ export function EmojiField(_a) {
24
24
  const [props, _, tools] = useField({ name });
25
25
  const id = useIdOrGenerated(providedId);
26
26
  const [open, setOpen] = useState(false);
27
- return (_jsxs(Field, { horizontal: true, className: className, style: style, id: id, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Field.Control, { render: _jsx("input", Object.assign({ type: "hidden" }, props)) }), _jsx(Popover.Trigger, { render: _jsx(Button, Object.assign({ id: `${id}-trigger`, "aria-label": "Select emoji", size: "wrapper" }, rest, { children: _jsx(Button.Icon, { className: cls.triggerIcon, children: props.value || _jsx(Icon, { name: "smile" }) }) })) }), _jsx(Popover.Content, { children: _jsx(EmojiPicker, { onValueChange: (v) => {
27
+ return (_jsxs(Field, { horizontal: true, className: className, style: style, id: id, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Field.Control, { render: _jsx("input", Object.assign({ type: "hidden" }, props)) }), _jsx(Popover.Trigger, { render: _jsx(Button, Object.assign({ id: `${id}-trigger`, "aria-label": "Select emoji", size: "wrapper", emphasis: "ghost" }, rest, { children: _jsx(Button.Icon, { className: cls.triggerIcon, children: props.value || _jsx(Icon, { name: "smile" }) }) })) }), _jsx(Popover.Content, { children: _jsx(EmojiPicker, { onValueChange: (v) => {
28
28
  tools.setValue(v);
29
29
  setOpen(false);
30
30
  }, onClear: required
package/dist/components/forms/EmojiField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,UAAU,CAAC,EAST;QATS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,EACX,KAAK,OAEY,EADd,IAAI,cARmB,wEAS1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC3D,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,KAAK,CAAC,OAAO,IAAC,MAAM,EAAE,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAI,GAAI,EAC7D,KAAC,OAAO,CAAC,OAAO,IACf,MAAM,EACL,KAAC,MAAM,kBACN,EAAE,EAAE,GAAG,EAAE,UAAU,gBACR,cAAc,EACzB,IAAI,EAAC,SAAS,IACV,IAAI,cAER,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,GAAG,CAAC,WAAW,YACrC,KAAK,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GAET,EACF,KAAC,OAAO,CAAC,OAAO,cACf,KAAC,WAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;4BAChB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,UAAU,CAAC,EAST;QATS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,EACX,KAAK,OAEY,EADd,IAAI,cARmB,wEAS1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC3D,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,KAAK,CAAC,OAAO,IAAC,MAAM,EAAE,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAI,GAAI,EAC7D,KAAC,OAAO,CAAC,OAAO,IACf,MAAM,EACL,KAAC,MAAM,kBACN,EAAE,EAAE,GAAG,EAAE,UAAU,gBACR,cAAc,EACzB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAC,OAAO,IACZ,IAAI,cAER,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,GAAG,CAAC,WAAW,YACrC,KAAK,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GAET,EACF,KAAC,OAAO,CAAC,OAAO,cACf,KAAC,WAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;4BAChB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}
package/dist/components/forms/Field.d.ts CHANGED
@@ -1,6 +1,7 @@
1
+ import { UseRenderComponentProps } from '@base-ui/react';
1
2
  import { ComponentProps } from 'react';
2
- import { SlotDiv } from '../utility/SlotDiv.js';
3
- export interface FieldRootProps extends ComponentProps<'div'> {
3
+ import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
4
+ export interface FieldRootProps extends SlotDivProps {
4
5
  horizontal?: boolean;
5
6
  stretch?: boolean;
6
7
  reverse?: boolean;
@@ -11,8 +12,8 @@ export interface FieldRootProps extends ComponentProps<'div'> {
11
12
  }
12
13
  declare function FieldRoot({ className, horizontal, stretch, reverse, id, ...props }: FieldRootProps): import("react/jsx-runtime").JSX.Element;
13
14
  declare function FieldControl({ className, ref, ...props }: ComponentProps<typeof SlotDiv>): import("react/jsx-runtime").JSX.Element;
14
- declare function FieldLabel({ className, ...props }: ComponentProps<'label'>): import("react/jsx-runtime").JSX.Element;
15
- declare function FieldDescription({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
15
+ declare function FieldLabel({ className, ref, render, ...props }: UseRenderComponentProps<'label'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
16
+ declare function FieldDescription({ className, render, ref, ...props }: UseRenderComponentProps<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
16
17
  export declare const Field: typeof FieldRoot & {
17
18
  Label: typeof FieldLabel;
18
19
  Description: typeof FieldDescription;
package/dist/components/forms/Field.js CHANGED
@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { useRender } from '@base-ui/react';
13
14
  import clsx from 'clsx';
14
15
  import { createContext, useContext, useEffect, useRef, useState, } from 'react';
15
16
  import useMergedRef from '../../hooks/useMergedRef.js';
@@ -48,12 +49,17 @@ function FieldControl(_a) {
48
49
  return (_jsx(SlotDiv, Object.assign({ className: clsx(cls.control, className), id: id, ref: finalRef }, props)));
49
50
  }
50
51
  function FieldLabel(_a) {
51
- var { className } = _a, props = __rest(_a, ["className"]);
52
+ var { className, ref, render } = _a, props = __rest(_a, ["className", "ref", "render"]);
52
53
  const { id } = useContext(FieldContext);
53
- return (_jsx("label", Object.assign({ className: clsx(cls.label, className), htmlFor: id }, props)));
54
+ return useRender({
55
+ defaultTagName: 'label',
56
+ props: Object.assign({ htmlFor: id, className: clsx(cls.label, className) }, props),
57
+ ref,
58
+ render,
59
+ });
54
60
  }
55
61
  function FieldDescription(_a) {
56
- var { className } = _a, props = __rest(_a, ["className"]);
62
+ var { className, render, ref } = _a, props = __rest(_a, ["className", "render", "ref"]);
57
63
  const { id, events } = useContext(FieldContext);
58
64
  useEffect(() => {
59
65
  events.dispatchEvent(new CustomEvent('description-visible', { detail: true }));
@@ -61,7 +67,12 @@ function FieldDescription(_a) {
61
67
  events.dispatchEvent(new CustomEvent('description-visible', { detail: false }));
62
68
  };
63
69
  }, [events]);
64
- return (_jsx("div", Object.assign({ className: clsx('@mode-dense', cls.description, className), id: id ? `${id}-description` : undefined }, props)));
70
+ return useRender({
71
+ defaultTagName: 'div',
72
+ props: Object.assign({ className: clsx('@mode-dense', cls.description, className), id: id ? `${id}-description` : undefined }, props),
73
+ render,
74
+ ref,
75
+ });
65
76
  }
66
77
  export const Field = Object.assign(FieldRoot, {
67
78
  Label: FieldLabel,
package/dist/components/forms/Field.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/forms/Field.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/forms/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAA2B,MAAM,gBAAgB,CAAC;AACpE,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAEN,aAAa,EACb,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAgB,MAAM,uBAAuB,CAAC;AAC9D,OAAO,GAAG,MAAM,oBAAoB,CAAC;AAYrC,MAAM,YAAY,GAAG,aAAa,CAAuC;IACxE,MAAM,EAAE,IAAI,WAAW,EAAE;CACzB,CAAC,CAAC;AAEH,SAAS,SAAS,CAAC,EAOF;QAPE,EAClB,SAAS,EACT,UAAU,EACV,OAAO,EACP,OAAO,EACP,EAAE,OAEc,EADb,KAAK,cANU,uDAOlB,CADQ;IAER,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,CAAC;IACnD,OAAO,CACN,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,YAC3C,KAAC,OAAO,kBACP,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,qBACnB,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAC9B,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBACxB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,IAClC,KAAK,EACR,GACqB,CACxB,CAAC;AACH,CAAC;AAED,SAAS,YAAY,CAAC,EAIW;QAJX,EACrB,SAAS,EACT,GAAG,OAE6B,EAD7B,KAAK,cAHa,oBAIrB,CADQ;IAER,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC3C,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAC7C,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,SAAS,oBAAoB,CAAC,KAAkB;;YAC/C,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC3B,MAAA,QAAQ,CAAC,OAAO,0CAAE,YAAY,CAAC,kBAAkB,EAAE,GAAG,EAAE,cAAc,CAAC,CAAC;YACzE,CAAC;iBAAM,CAAC;gBACP,MAAA,QAAQ,CAAC,OAAO,0CAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;YACvD,CAAC;QACF,CAAC;QAED,MAAM,CAAC,gBAAgB,CACtB,qBAAqB,EACrB,oBAAqC,CACrC,CAAC;QACF,OAAO,GAAG,EAAE;YACX,MAAM,CAAC,mBAAmB,CACzB,qBAAqB,EACrB,oBAAqC,CACrC,CAAC;QACH,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;IAEjB,OAAO,CACN,KAAC,OAAO,kBACP,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,EACvC,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,IACT,KAAK,EACR,CACF,CAAC;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAKe;QALf,EACnB,SAAS,EACT,GAAG,EACH,MAAM,OAE4B,EAD/B,KAAK,cAJW,8BAKnB,CADQ;IAER,MAAM,EAAE,EAAE,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACxC,OAAO,SAAS,CAAC;QAChB,cAAc,EAAE,OAAO;QACvB,KAAK,kBACJ,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,IAClC,KAAK,CACR;QACD,GAAG;QACH,MAAM;KACN,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EAKO;QALP,EACzB,SAAS,EACT,MAAM,EACN,GAAG,OAE6B,EAD7B,KAAK,cAJiB,8BAKzB,CADQ;IAER,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,qBAAqB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CACxD,CAAC;QACF,OAAO,GAAG,EAAE;YACX,MAAM,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,qBAAqB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CACzD,CAAC;QACH,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,SAAS,CAAC;QAChB,cAAc,EAAE,KAAK;QACrB,KAAK,kBACJ,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,EAC1D,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,IACrC,KAAK,CACR;QACD,MAAM;QACN,GAAG;KACH,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IAC7C,KAAK,EAAE,UAAU;IACjB,WAAW,EAAE,gBAAgB;IAC7B,OAAO,EAAE,YAAY;CACrB,CAAC,CAAC"}
package/dist/components/forms/Field.module.css CHANGED
@@ -2,6 +2,9 @@
2
2
  display: grid;
3
3
  grid-template-areas: 'label' 'control' 'description';
4
4
  justify-content: start;
5
+ border: none;
6
+ padding: 0;
7
+ margin: 0;
5
8
 
6
9
  &[data-horizontal] {
7
10
  flex-direction: row;
package/dist/components/forms/ToggleGroupField.js CHANGED
@@ -18,7 +18,7 @@ function ToggleGroupFieldDefault(_a) {
18
18
  var { name, label, required, className, style, type = 'single', multiple, description, id: providedId } = _a, props = __rest(_a, ["name", "label", "required", "className", "style", "type", "multiple", "description", "id"]);
19
19
  const id = useIdOrGenerated(providedId);
20
20
  const [fieldProps, _, tools] = useField(Object.assign({ name, required }, props));
21
- return (_jsxs(Field, { id: id, className: className, style: style, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
21
+ return (_jsxs(Field, { id: id, className: className, style: style, render: _jsx("fieldset", {}), children: [label && _jsx(Field.Label, { render: _jsx("legend", {}), children: label }), _jsx(Field.Control, { render: _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
22
22
  if (multiple || type === 'multiple') {
23
23
  tools.setValue(v);
24
24
  }
package/dist/components/forms/ToggleGroupField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAgBnC,SAAS,uBAAuB,CAAC,EAWD;QAXC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,UAAU,OAEiB,EAD5B,KAAK,cAVwB,4FAWhC,CADQ;IAER,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,KAAK,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aAC/C,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,WAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;wBACpB,IAAI,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;4BACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wBACnB,CAAC;6BAAM,CAAC;4BACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACtB,CAAC;oBACF,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,UAAU,IACrC,KAAK,EACR,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,WAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}
1
+ {"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAgBnC,SAAS,uBAAuB,CAAC,EAWD;QAXC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,UAAU,OAEiB,EAD5B,KAAK,cAVwB,4FAWhC,CADQ;IAER,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,KAAK,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,oBAAY,aACrE,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,IAAC,MAAM,EAAE,kBAAU,YAAG,KAAK,GAAe,EAChE,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,WAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;wBACpB,IAAI,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;4BACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wBACnB,CAAC;6BAAM,CAAC;4BACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACtB,CAAC;oBACF,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,UAAU,IACrC,KAAK,EACR,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,WAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}
package/dist/components/forms/index.d.ts CHANGED
@@ -6,3 +6,4 @@ export * from './hooks.js';
6
6
  export * from './NumberStepperField.js';
7
7
  export * from './SubmitButton.js';
8
8
  export * from './TextField.js';
9
+ export * from './ToggleGroupField.js';
package/dist/components/forms/index.js CHANGED
@@ -6,4 +6,5 @@ export * from './hooks.js';
6
6
  export * from './NumberStepperField.js';
7
7
  export * from './SubmitButton.js';
8
8
  export * from './TextField.js';
9
+ export * from './ToggleGroupField.js';
9
10
  //# sourceMappingURL=index.js.map
package/dist/components/forms/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.1.41",
3
+ "version": "6.1.42",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/components/forms/EmojiField.tsx CHANGED
@@ -40,6 +40,7 @@ export function EmojiField({
40
40
  id={`${id}-trigger`}
41
41
  aria-label="Select emoji"
42
42
  size="wrapper"
43
+ emphasis="ghost"
43
44
  {...rest}
44
45
  >
45
46
  <Button.Icon className={cls.triggerIcon}>
package/src/components/forms/Field.module.css CHANGED
@@ -2,6 +2,9 @@
2
2
  display: grid;
3
3
  grid-template-areas: 'label' 'control' 'description';
4
4
  justify-content: start;
5
+ border: none;
6
+ padding: 0;
7
+ margin: 0;
5
8
 
6
9
  &[data-horizontal] {
7
10
  flex-direction: row;
package/src/components/forms/Field.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { useRender, UseRenderComponentProps } from '@base-ui/react';
1
2
  import clsx from 'clsx';
2
3
  import {
3
4
  ComponentProps,
@@ -8,10 +9,10 @@ import {
8
9
  useState,
9
10
  } from 'react';
10
11
  import useMergedRef from '../../hooks/useMergedRef.js';
11
- import { SlotDiv } from '../utility/SlotDiv.js';
12
+ import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
12
13
  import cls from './Field.module.css';
13
14
 
14
- export interface FieldRootProps extends ComponentProps<'div'> {
15
+ export interface FieldRootProps extends SlotDivProps {
15
16
  horizontal?: boolean;
16
17
  stretch?: boolean;
17
18
  reverse?: boolean;
@@ -89,14 +90,31 @@ function FieldControl({
89
90
  );
90
91
  }
91
92
 
92
- function FieldLabel({ className, ...props }: ComponentProps<'label'>) {
93
+ function FieldLabel({
94
+ className,
95
+ ref,
96
+ render,
97
+ ...props
98
+ }: UseRenderComponentProps<'label'>) {
93
99
  const { id } = useContext(FieldContext);
94
- return (
95
- <label className={clsx(cls.label, className)} htmlFor={id} {...props} />
96
- );
100
+ return useRender({
101
+ defaultTagName: 'label',
102
+ props: {
103
+ htmlFor: id,
104
+ className: clsx(cls.label, className),
105
+ ...props,
106
+ },
107
+ ref,
108
+ render,
109
+ });
97
110
  }
98
111
 
99
- function FieldDescription({ className, ...props }: ComponentProps<'div'>) {
112
+ function FieldDescription({
113
+ className,
114
+ render,
115
+ ref,
116
+ ...props
117
+ }: UseRenderComponentProps<'div'>) {
100
118
  const { id, events } = useContext(FieldContext);
101
119
 
102
120
  useEffect(() => {
@@ -109,13 +127,17 @@ function FieldDescription({ className, ...props }: ComponentProps<'div'>) {
109
127
  );
110
128
  };
111
129
  }, [events]);
112
- return (
113
- <div
114
- className={clsx('@mode-dense', cls.description, className)}
115
- id={id ? `${id}-description` : undefined}
116
- {...props}
117
- />
118
- );
130
+
131
+ return useRender({
132
+ defaultTagName: 'div',
133
+ props: {
134
+ className: clsx('@mode-dense', cls.description, className),
135
+ id: id ? `${id}-description` : undefined,
136
+ ...props,
137
+ },
138
+ render,
139
+ ref,
140
+ });
119
141
  }
120
142
 
121
143
  export const Field = Object.assign(FieldRoot, {
package/src/components/forms/ToggleGroupField.tsx CHANGED
@@ -34,8 +34,8 @@ function ToggleGroupFieldDefault({
34
34
  const [fieldProps, _, tools] = useField({ name, required, ...props });
35
35
 
36
36
  return (
37
- <Field id={id} className={className} style={style}>
38
- {label && <Field.Label>{label}</Field.Label>}
37
+ <Field id={id} className={className} style={style} render={<fieldset />}>
38
+ {label && <Field.Label render={<legend />}>{label}</Field.Label>}
39
39
  <Field.Control
40
40
  render={
41
41
  <ToggleGroup
package/src/components/forms/index.tsx CHANGED
@@ -6,3 +6,4 @@ export * from './hooks.js';
6
6
  export * from './NumberStepperField.js';
7
7
  export * from './SubmitButton.js';
8
8
  export * from './TextField.js';
9
+ export * from './ToggleGroupField.js';