@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

package/dist/components/field/field-combobox.js

@@ -0,0 +1,457 @@
+import { jsx as a, jsxs as F } from "react/jsx-runtime";
+import * as l from "react";
+import { shorthands as s } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as p } from "../../renderer/contract.js";
+import { makeVoltStyles as v } from "../../styles/make-styles.js";
+import { spacingElement2 as b, grayA8 as R, accentA11 as I, spacingGroup1 as x, grayA11 as f, spacingElement1 as w, semGraySoft as S, textXs as L, fontWeightSemibold as N, textSm as C, grayA12 as g, radiusMd as q, radiusLg as P } from "../../tokens/index.js";
+import { Command as T, CommandEmpty as V, CommandGroup as G, CommandInput as B, CommandItem as D, CommandList as k, CommandLoading as A, CommandSeparator as E } from "../command/command.js";
+import { Label as j } from "../label/label.js";
+import { Popover as z, PopoverPortal as M, PopoverContent as W, PopoverTrigger as Z } from "../popover/popover.js";
+import { useOptionalFieldContext as O } from "./field.js";
+import { mergeClasses as m } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const X = (n) => /* @__PURE__ */ a(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px",
+    fill: "currentColor",
+    ...n,
+    children: /* @__PURE__ */ a("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
+  }
+), _ = (n) => /* @__PURE__ */ a(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px",
+    fill: "currentColor",
+    ...n,
+    children: /* @__PURE__ */ a("path", { d: "M459-381 314-526q-3-3-4.5-6.5T308-540q0-8 5.5-14t14.5-6h304q9 0 14.5 6t5.5 14q0 2-6 14L501-381q-5 5-10 7t-11 2q-6 0-11-2t-10-7Z" })
+  }
+), y = (n) => /* @__PURE__ */ a(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px",
+    fill: "currentColor",
+    ...n,
+    children: /* @__PURE__ */ a("path", { d: "M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z" })
+  }
+), c = v({
+  trigger: {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    ...s.gap(b),
+    ...s.borderRadius(P),
+    backgroundColor: "transparent",
+    fontSize: C,
+    whiteSpace: "nowrap",
+    outlineStyle: "none",
+    ...s.border("0"),
+    ...s.padding(0),
+    ":disabled": {
+      cursor: "not-allowed",
+      opacity: 0.5
+    }
+  },
+  triggerChevron: {
+    width: "1.5rem",
+    height: "1.5rem",
+    flexShrink: 0,
+    transitionProperty: "transform",
+    transitionDuration: "150ms",
+    color: f,
+    "&[data-popup-open], &[data-open]": {
+      transform: "rotate(180deg)"
+    }
+  },
+  value: {
+    color: g,
+    width: "100%",
+    textAlign: "left",
+    flexWrap: "wrap",
+    display: "flex",
+    ...s.gap(b),
+    position: "relative",
+    whiteSpace: "normal",
+    marginRight: "1.25rem"
+  },
+  content: {
+    ...s.padding(0)
+  },
+  command: {
+    width: "100%",
+    ...s.borderRadius(0)
+  },
+  input: {
+    width: "100%"
+  },
+  list: {
+    ...s.padding(b)
+  },
+  item: {
+    paddingLeft: x,
+    paddingRight: "2rem",
+    paddingTop: "0.375rem",
+    paddingBottom: "0.375rem",
+    color: g,
+    position: "relative",
+    display: "flex",
+    width: "100%",
+    cursor: "default",
+    alignItems: "center",
+    ...s.gap(b),
+    ...s.borderRadius(q),
+    fontSize: C,
+    outlineStyle: "none",
+    userSelect: "none"
+  },
+  itemCheckIcon: {
+    position: "absolute",
+    right: b,
+    display: "flex",
+    width: "1rem",
+    height: "1rem",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkSvg: {
+    width: "1rem",
+    height: "1rem",
+    color: g
+  },
+  empty: {
+    paddingTop: "1.5rem",
+    paddingBottom: "1.5rem",
+    textAlign: "center",
+    color: g,
+    fontSize: C
+  },
+  group: {
+    ...s.padding(0)
+  },
+  groupLabel: {
+    color: f,
+    fontWeight: N,
+    paddingLeft: b,
+    paddingRight: b,
+    paddingTop: b,
+    paddingBottom: b,
+    fontSize: L
+  },
+  separator: {
+    backgroundColor: S,
+    pointerEvents: "none",
+    marginLeft: `calc(-1 * ${w})`,
+    marginRight: `calc(-1 * ${w})`,
+    marginTop: b,
+    marginBottom: b,
+    height: "1px"
+  },
+  loading: {
+    color: f,
+    paddingLeft: x,
+    paddingRight: x,
+    paddingTop: b,
+    paddingBottom: b
+  },
+  clear: {
+    position: "absolute",
+    right: "2.75rem",
+    cursor: "pointer",
+    minHeight: "auto",
+    ...s.padding("0.125rem"),
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...s.borderRadius("9999px"),
+    backgroundColor: "transparent",
+    ...s.border("0"),
+    color: I
+  },
+  clearSvg: {
+    width: "1.25rem",
+    height: "1.25rem"
+  },
+  clearValue: {
+    cursor: "pointer",
+    ":hover": {
+      opacity: 0.7
+    },
+    color: "currentColor",
+    ...s.borderRadius("9999px"),
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  clearValueSvg: {
+    width: "1rem",
+    height: "1rem",
+    color: "currentColor"
+  },
+  placeholder: {
+    color: R
+  }
+}), ao = l.forwardRef(
+  function(e, o) {
+    return /* @__PURE__ */ a(
+      z,
+      {
+        "data-slot": "combobox",
+        [p]: "combobox",
+        ...e
+      }
+    );
+  }
+), no = l.forwardRef(function({ className: e, children: o, ...r }, t) {
+  var h;
+  const d = c(), i = ((h = O()) == null ? void 0 : h.inputRef) ?? null;
+  return /* @__PURE__ */ F(
+    Z,
+    {
+      ref: (u) => {
+        i && (i.current = u), typeof t == "function" ? t(u) : t && (t.current = u);
+      },
+      "data-slot": "select-trigger",
+      [p]: "select-trigger",
+      className: m(d.trigger, e),
+      ...r,
+      children: [
+        o,
+        /* @__PURE__ */ a(_, { className: d.triggerChevron })
+      ]
+    }
+  );
+}), io = l.forwardRef(function({ className: e, children: o, container: r, ...t }, d) {
+  const i = c();
+  return /* @__PURE__ */ a(M, { container: r, children: /* @__PURE__ */ a(
+    W,
+    {
+      ref: d,
+      "data-slot": "combobox-content",
+      [p]: "combobox-content",
+      className: m(i.content, e),
+      ...t,
+      children: /* @__PURE__ */ a(
+        T,
+        {
+          "data-slot": "combobox-command",
+          [p]: "combobox-command",
+          className: i.command,
+          children: o
+        }
+      )
+    }
+  ) });
+}), lo = l.forwardRef(function({ className: e, children: o, ...r }, t) {
+  const d = c();
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: t,
+      "data-slot": "combobox-value",
+      [p]: "combobox-value",
+      className: m(d.value, e),
+      ...r,
+      children: o
+    }
+  );
+}), so = l.forwardRef(function({ className: e, ...o }, r) {
+  const t = c();
+  return /* @__PURE__ */ a(
+    B,
+    {
+      ref: r,
+      "data-slot": "combobox-command-input",
+      [p]: "combobox-command-input",
+      className: m(t.input, e),
+      ...o
+    }
+  );
+}), mo = l.forwardRef(function({ className: e, ...o }, r) {
+  const t = c();
+  return /* @__PURE__ */ a(
+    k,
+    {
+      ref: r,
+      "data-slot": "combobox-command-list",
+      [p]: "combobox-command-list",
+      className: m(t.list, e),
+      ...o
+    }
+  );
+}), co = l.forwardRef(function({ className: e, children: o, ...r }, t) {
+  const d = c();
+  return /* @__PURE__ */ a(
+    D,
+    {
+      ref: t,
+      "data-slot": "combobox-item",
+      [p]: "combobox-item",
+      className: m(d.item, e),
+      ...r,
+      children: o
+    }
+  );
+}), bo = l.forwardRef(function({ className: e, ...o }, r) {
+  const t = c();
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      ref: r,
+      className: m(t.itemCheckIcon, e),
+      ...o,
+      children: /* @__PURE__ */ a(X, { className: t.checkSvg })
+    }
+  );
+}), po = l.forwardRef(function({ className: e, ...o }, r) {
+  const t = c();
+  return /* @__PURE__ */ a(
+    V,
+    {
+      ref: r,
+      "data-slot": "combobox-empty",
+      [p]: "combobox-empty",
+      className: m(t.empty, e),
+      ...o
+    }
+  );
+}), go = l.forwardRef(function({ className: e, ...o }, r) {
+  const t = c();
+  return /* @__PURE__ */ a(
+    G,
+    {
+      ref: r,
+      "data-slot": "combobox-group",
+      [p]: "combobox-group",
+      className: m(t.group, e),
+      ...o
+    }
+  );
+}), uo = l.forwardRef(function({ className: e, ...o }, r) {
+  const t = c();
+  return /* @__PURE__ */ a(
+    j,
+    {
+      ref: r,
+      "data-slot": "combobox-group-label",
+      [p]: "combobox-group-label",
+      className: m(t.groupLabel, e),
+      ...o
+    }
+  );
+}), xo = l.forwardRef(function({ className: e, ...o }, r) {
+  const t = c();
+  return /* @__PURE__ */ a(
+    E,
+    {
+      ref: r,
+      "data-slot": "select-separator",
+      [p]: "select-separator",
+      className: m(t.separator, e),
+      ...o
+    }
+  );
+}), fo = l.forwardRef(function({ className: e, ...o }, r) {
+  const t = c();
+  return /* @__PURE__ */ a(
+    A,
+    {
+      ref: r,
+      "data-slot": "combobox-command-loading",
+      [p]: "combobox-command-loading",
+      className: m(t.loading, e),
+      ...o
+    }
+  );
+}), Co = l.forwardRef(function({ className: e, onClick: o, ...r }, t) {
+  const d = c();
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      ref: t,
+      role: "button",
+      tabIndex: 0,
+      className: m(d.clear, e),
+      onPointerDown: (i) => {
+        i.preventDefault(), i.stopPropagation();
+      },
+      onClick: (i) => {
+        i.preventDefault(), i.stopPropagation(), o == null || o(i);
+      },
+      ...r,
+      children: /* @__PURE__ */ a(y, { className: d.clearSvg })
+    }
+  );
+}), ho = l.forwardRef(function({ className: e, ...o }, r) {
+  const t = c();
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      ref: r,
+      className: m(t.placeholder, e),
+      ...o
+    }
+  );
+}), wo = l.forwardRef(function({ className: e, onClick: o, ...r }, t) {
+  const d = c();
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      ref: t,
+      role: "button",
+      tabIndex: 0,
+      className: m(d.clearValue, e),
+      onPointerDown: (i) => {
+        i.preventDefault(), i.stopPropagation();
+      },
+      onClick: (i) => {
+        i.preventDefault(), i.stopPropagation(), o == null || o(i);
+      },
+      ...r,
+      children: /* @__PURE__ */ a(y, { className: d.clearValueSvg })
+    }
+  );
+});
+export {
+  ao as Combobox,
+  Co as ComboboxClear,
+  wo as ComboboxClearValue,
+  io as ComboboxContent,
+  po as ComboboxEmpty,
+  go as ComboboxGroup,
+  uo as ComboboxGroupLabel,
+  so as ComboboxInput,
+  co as ComboboxItem,
+  bo as ComboboxItemCheckIcon,
+  mo as ComboboxList,
+  fo as ComboboxLoading,
+  ho as ComboboxPlaceholder,
+  xo as ComboboxSeparator,
+  no as ComboboxTrigger,
+  lo as ComboboxValue,
+  ao as FieldCombobox,
+  Co as FieldComboboxClear,
+  wo as FieldComboboxClearValue,
+  io as FieldComboboxContent,
+  po as FieldComboboxEmpty,
+  go as FieldComboboxGroup,
+  uo as FieldComboboxGroupLabel,
+  so as FieldComboboxInput,
+  co as FieldComboboxItem,
+  bo as FieldComboboxItemCheckIcon,
+  mo as FieldComboboxList,
+  fo as FieldComboboxLoading,
+  ho as FieldComboboxPlaceholder,
+  xo as FieldComboboxSeparator,
+  no as FieldComboboxTrigger,
+  lo as FieldComboboxValue
+};
+//# sourceMappingURL=field-combobox.js.map

package/dist/components/field/field-combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-combobox.js","sources":["../../../src/components/field/field-combobox.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandLoading,\n  CommandSeparator,\n  type CommandEmptyProps,\n  type CommandGroupProps,\n  type CommandInputProps,\n  type CommandItemProps,\n  type CommandListProps,\n  type CommandLoadingProps,\n  type CommandSeparatorProps,\n} from \"../command/command\"\nimport { Label, type LabelProps } from \"../label/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverPortal,\n  PopoverTrigger,\n  type PopoverContentProps,\n  type PopoverPortalProps,\n  type PopoverProps,\n  type PopoverTriggerProps,\n} from \"../popover/popover\"\nimport { useOptionalFieldContext } from \"./field\"\n\nconst CheckIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n  </svg>\n)\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M459-381 314-526q-3-3-4.5-6.5T308-540q0-8 5.5-14t14.5-6h304q9 0 14.5 6t5.5 14q0 2-6 14L501-381q-5 5-10 7t-11 2q-6 0-11-2t-10-7Z\" />\n  </svg>\n)\n\nconst XIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  trigger: {\n    width: \"100%\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    backgroundColor: \"transparent\",\n    fontSize: tokens.textSm,\n    whiteSpace: \"nowrap\",\n    outlineStyle: \"none\",\n    ...shorthands.border(\"0\"),\n    ...shorthands.padding(0),\n    \":disabled\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n    },\n  },\n  triggerChevron: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    flexShrink: 0,\n    transitionProperty: \"transform\",\n    transitionDuration: \"150ms\",\n    color: tokens.grayA11,\n    \"&[data-popup-open], &[data-open]\": {\n      transform: \"rotate(180deg)\",\n    },\n  },\n  value: {\n    color: tokens.grayA12,\n    width: \"100%\",\n    textAlign: \"left\",\n    flexWrap: \"wrap\",\n    display: \"flex\",\n    ...shorthands.gap(tokens.spacingElement2),\n    position: \"relative\",\n    whiteSpace: \"normal\",\n    marginRight: \"1.25rem\",\n  },\n  content: {\n    ...shorthands.padding(0),\n  },\n  command: {\n    width: \"100%\",\n    ...shorthands.borderRadius(0),\n  },\n  input: {\n    width: \"100%\",\n  },\n  list: {\n    ...shorthands.padding(tokens.spacingElement2),\n  },\n  item: {\n    paddingLeft: tokens.spacingGroup1,\n    paddingRight: \"2rem\",\n    paddingTop: \"0.375rem\",\n    paddingBottom: \"0.375rem\",\n    color: tokens.grayA12,\n    position: \"relative\",\n    display: \"flex\",\n    width: \"100%\",\n    cursor: \"default\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusMd),\n    fontSize: tokens.textSm,\n    outlineStyle: \"none\",\n    userSelect: \"none\",\n  },\n  itemCheckIcon: {\n    position: \"absolute\",\n    right: tokens.spacingElement2,\n    display: \"flex\",\n    width: \"1rem\",\n    height: \"1rem\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  checkSvg: {\n    width: \"1rem\",\n    height: \"1rem\",\n    color: tokens.grayA12,\n  },\n  empty: {\n    paddingTop: \"1.5rem\",\n    paddingBottom: \"1.5rem\",\n    textAlign: \"center\",\n    color: tokens.grayA12,\n    fontSize: tokens.textSm,\n  },\n  group: {\n    ...shorthands.padding(0),\n  },\n  groupLabel: {\n    color: tokens.grayA11,\n    fontWeight: tokens.fontWeightSemibold,\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement2,\n    paddingTop: tokens.spacingElement2,\n    paddingBottom: tokens.spacingElement2,\n    fontSize: tokens.textXs,\n  },\n  separator: {\n    backgroundColor: tokens.semGraySoft,\n    pointerEvents: \"none\",\n    marginLeft: `calc(-1 * ${tokens.spacingElement1})`,\n    marginRight: `calc(-1 * ${tokens.spacingElement1})`,\n    marginTop: tokens.spacingElement2,\n    marginBottom: tokens.spacingElement2,\n    height: \"1px\",\n  },\n  loading: {\n    color: tokens.grayA11,\n    paddingLeft: tokens.spacingGroup1,\n    paddingRight: tokens.spacingGroup1,\n    paddingTop: tokens.spacingElement2,\n    paddingBottom: tokens.spacingElement2,\n  },\n  clear: {\n    position: \"absolute\",\n    right: \"2.75rem\",\n    cursor: \"pointer\",\n    minHeight: \"auto\",\n    ...shorthands.padding(\"0.125rem\"),\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: \"transparent\",\n    ...shorthands.border(\"0\"),\n    color: tokens.accentA11,\n  },\n  clearSvg: {\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n  },\n  clearValue: {\n    cursor: \"pointer\",\n    \":hover\": {\n      opacity: 0.7,\n    },\n    color: \"currentColor\",\n    ...shorthands.borderRadius(\"9999px\"),\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  clearValueSvg: {\n    width: \"1rem\",\n    height: \"1rem\",\n    color: \"currentColor\",\n  },\n  placeholder: {\n    color: tokens.grayA8,\n  },\n})\n\nexport type FieldComboboxProps = PopoverProps\n\nexport const FieldCombobox = React.forwardRef<HTMLElement, FieldComboboxProps>(\n  function FieldCombobox(props, _ref) {\n    return (\n      <Popover\n        data-slot=\"combobox\"\n        {...{ [SLOT_ATTR]: \"combobox\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type FieldComboboxTriggerProps = PopoverTriggerProps\n\nexport const FieldComboboxTrigger = React.forwardRef<\n  HTMLButtonElement,\n  FieldComboboxTriggerProps\n>(function FieldComboboxTrigger(\n  { className, children, ...props },\n  forwardedRef\n) {\n  const styles = useStyles()\n  // Optional on purpose: this part is valid standalone and only picks up field wiring\n  // when nested inside one. See useOptionalFieldContext.\n  const inputRef = useOptionalFieldContext()?.inputRef ?? null\n\n  const handleRef = (el: HTMLButtonElement | null) => {\n    if (inputRef) {\n      inputRef.current = el\n    }\n    if (typeof forwardedRef === \"function\") {\n      forwardedRef(el)\n    } else if (forwardedRef) {\n      forwardedRef.current = el\n    }\n  }\n\n  return (\n    <PopoverTrigger\n      ref={handleRef}\n      data-slot=\"select-trigger\"\n      {...{ [SLOT_ATTR]: \"select-trigger\" }}\n      className={mergeClasses(styles.trigger, className)}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className={styles.triggerChevron} />\n    </PopoverTrigger>\n  )\n})\n\nexport type FieldComboboxContentProps = PopoverContentProps & {\n  container?: PopoverPortalProps[\"container\"]\n}\n\nexport const FieldComboboxContent = React.forwardRef<\n  HTMLDivElement,\n  FieldComboboxContentProps\n>(function FieldComboboxContent(\n  { className, children, container, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <PopoverPortal container={container}>\n      <PopoverContent\n        ref={ref}\n        data-slot=\"combobox-content\"\n        {...{ [SLOT_ATTR]: \"combobox-content\" }}\n        className={mergeClasses(styles.content, className)}\n        {...props}\n      >\n        <Command\n          data-slot=\"combobox-command\"\n          {...{ [SLOT_ATTR]: \"combobox-command\" }}\n          className={styles.command}\n        >\n          {children}\n        </Command>\n      </PopoverContent>\n    </PopoverPortal>\n  )\n})\n\nexport type FieldComboboxValueProps = React.ComponentProps<\"div\">\n\nexport const FieldComboboxValue = React.forwardRef<\n  HTMLDivElement,\n  FieldComboboxValueProps\n>(function FieldComboboxValue({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"combobox-value\"\n      {...{ [SLOT_ATTR]: \"combobox-value\" }}\n      className={mergeClasses(styles.value, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nexport type FieldComboboxInputProps = CommandInputProps\n\nexport const FieldComboboxInput = React.forwardRef<\n  HTMLInputElement,\n  FieldComboboxInputProps\n>(function FieldComboboxInput({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandInput\n      ref={ref}\n      data-slot=\"combobox-command-input\"\n      {...{ [SLOT_ATTR]: \"combobox-command-input\" }}\n      className={mergeClasses(styles.input, className)}\n      {...props}\n    />\n  )\n})\n\nexport type FieldComboboxListProps = CommandListProps\n\nexport const FieldComboboxList = React.forwardRef<\n  HTMLDivElement,\n  FieldComboboxListProps\n>(function FieldComboboxList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandList\n      ref={ref}\n      data-slot=\"combobox-command-list\"\n      {...{ [SLOT_ATTR]: \"combobox-command-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type FieldComboboxItemProps = CommandItemProps\n\nexport const FieldComboboxItem = React.forwardRef<\n  HTMLDivElement,\n  FieldComboboxItemProps\n>(function FieldComboboxItem({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandItem\n      ref={ref}\n      data-slot=\"combobox-item\"\n      {...{ [SLOT_ATTR]: \"combobox-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    >\n      {children}\n    </CommandItem>\n  )\n})\n\nexport type FieldComboboxItemCheckIconProps = React.ComponentProps<\"span\">\n\nexport const FieldComboboxItemCheckIcon = React.forwardRef<\n  HTMLSpanElement,\n  FieldComboboxItemCheckIconProps\n>(function FieldComboboxItemCheckIcon({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      className={mergeClasses(styles.itemCheckIcon, className)}\n      {...props}\n    >\n      <CheckIcon className={styles.checkSvg} />\n    </span>\n  )\n})\n\nexport type FieldComboboxEmptyProps = CommandEmptyProps\n\nexport const FieldComboboxEmpty = React.forwardRef<\n  HTMLDivElement,\n  FieldComboboxEmptyProps\n>(function FieldComboboxEmpty({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandEmpty\n      ref={ref}\n      data-slot=\"combobox-empty\"\n      {...{ [SLOT_ATTR]: \"combobox-empty\" }}\n      className={mergeClasses(styles.empty, className)}\n      {...props}\n    />\n  )\n})\n\nexport type FieldComboboxGroupProps = CommandGroupProps\n\nexport const FieldComboboxGroup = React.forwardRef<\n  HTMLDivElement,\n  FieldComboboxGroupProps\n>(function FieldComboboxGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandGroup\n      ref={ref}\n      data-slot=\"combobox-group\"\n      {...{ [SLOT_ATTR]: \"combobox-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type FieldComboboxGroupLabelProps = LabelProps\n\nexport const FieldComboboxGroupLabel = React.forwardRef<\n  HTMLLabelElement,\n  FieldComboboxGroupLabelProps\n>(function FieldComboboxGroupLabel({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <Label\n      ref={ref}\n      data-slot=\"combobox-group-label\"\n      {...{ [SLOT_ATTR]: \"combobox-group-label\" }}\n      className={mergeClasses(styles.groupLabel, className)}\n      {...props}\n    />\n  )\n})\n\nexport type FieldComboboxSeparatorProps = CommandSeparatorProps\n\nexport const FieldComboboxSeparator = React.forwardRef<\n  HTMLDivElement,\n  FieldComboboxSeparatorProps\n>(function FieldComboboxSeparator({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandSeparator\n      ref={ref}\n      data-slot=\"select-separator\"\n      {...{ [SLOT_ATTR]: \"select-separator\" }}\n      className={mergeClasses(styles.separator, className)}\n      {...props}\n    />\n  )\n})\n\nexport type FieldComboboxLoadingProps = CommandLoadingProps\n\nexport const FieldComboboxLoading = React.forwardRef<\n  HTMLDivElement,\n  FieldComboboxLoadingProps\n>(function FieldComboboxLoading({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandLoading\n      ref={ref}\n      data-slot=\"combobox-command-loading\"\n      {...{ [SLOT_ATTR]: \"combobox-command-loading\" }}\n      className={mergeClasses(styles.loading, className)}\n      {...props}\n    />\n  )\n})\n\nexport type FieldComboboxClearProps = React.ComponentProps<\"span\">\n\nexport const FieldComboboxClear = React.forwardRef<\n  HTMLSpanElement,\n  FieldComboboxClearProps\n>(function FieldComboboxClear({ className, onClick, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      role=\"button\"\n      tabIndex={0}\n      className={mergeClasses(styles.clear, className)}\n      onPointerDown={(event) => {\n        event.preventDefault()\n        event.stopPropagation()\n      }}\n      onClick={(event) => {\n        event.preventDefault()\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      {...props}\n    >\n      <XIcon className={styles.clearSvg} />\n    </span>\n  )\n})\n\nexport type FieldComboboxPlaceholderProps = React.ComponentProps<\"span\">\n\nexport const FieldComboboxPlaceholder = React.forwardRef<\n  HTMLSpanElement,\n  FieldComboboxPlaceholderProps\n>(function FieldComboboxPlaceholder({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      className={mergeClasses(styles.placeholder, className)}\n      {...props}\n    />\n  )\n})\n\nexport type FieldComboboxClearValueProps = React.ComponentProps<\"span\">\n\nexport const FieldComboboxClearValue = React.forwardRef<\n  HTMLSpanElement,\n  FieldComboboxClearValueProps\n>(function FieldComboboxClearValue({ className, onClick, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      role=\"button\"\n      tabIndex={0}\n      className={mergeClasses(styles.clearValue, className)}\n      onPointerDown={(event) => {\n        event.preventDefault()\n        event.stopPropagation()\n      }}\n      onClick={(event) => {\n        event.preventDefault()\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      {...props}\n    >\n      <XIcon className={styles.clearValueSvg} />\n    </span>\n  )\n})\n\nexport {\n  FieldCombobox as Combobox,\n  FieldComboboxGroup as ComboboxGroup,\n  FieldComboboxGroupLabel as ComboboxGroupLabel,\n  FieldComboboxValue as ComboboxValue,\n  FieldComboboxTrigger as ComboboxTrigger,\n  FieldComboboxContent as ComboboxContent,\n  FieldComboboxItem as ComboboxItem,\n  FieldComboboxItemCheckIcon as ComboboxItemCheckIcon,\n  FieldComboboxEmpty as ComboboxEmpty,\n  FieldComboboxSeparator as ComboboxSeparator,\n  FieldComboboxInput as ComboboxInput,\n  FieldComboboxList as ComboboxList,\n  FieldComboboxLoading as ComboboxLoading,\n  FieldComboboxClear as ComboboxClear,\n  FieldComboboxClearValue as ComboboxClearValue,\n  FieldComboboxPlaceholder as ComboboxPlaceholder,\n}\n"],"names":["CheckIcon","props","jsx","ChevronDownIcon","XIcon","useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.radiusLg","tokens.textSm","tokens.grayA11","tokens.grayA12","tokens.spacingGroup1","tokens.radiusMd","tokens.fontWeightSemibold","tokens.textXs","tokens.semGraySoft","tokens.spacingElement1","tokens.accentA11","tokens.grayA8","FieldCombobox","React","_ref","Popover","SLOT_ATTR","FieldComboboxTrigger","className","children","forwardedRef","styles","inputRef","_a","useOptionalFieldContext","jsxs","PopoverTrigger","el","mergeClasses","FieldComboboxContent","container","ref","PopoverPortal","PopoverContent","Command","FieldComboboxValue","FieldComboboxInput","CommandInput","FieldComboboxList","CommandList","FieldComboboxItem","CommandItem","FieldComboboxItemCheckIcon","FieldComboboxEmpty","CommandEmpty","FieldComboboxGroup","CommandGroup","FieldComboboxGroupLabel","Label","FieldComboboxSeparator","CommandSeparator","FieldComboboxLoading","CommandLoading","FieldComboboxClear","onClick","event","FieldComboboxPlaceholder","FieldComboboxClearValue"],"mappings":"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"}

package/dist/components/field/field-select.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTriggerClear, SelectValue, type SelectContentProps, type SelectGroupProps, type SelectItemProps, type SelectLabelProps, type SelectProps, type SelectScrollDownButtonProps, type SelectScrollUpButtonProps, type SelectSeparatorProps, type SelectTriggerClearProps, type SelectTriggerProps, type SelectValueProps } from "../select/select";
+export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-select").SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTriggerClear, SelectValue, type SelectContentProps, type SelectGroupProps, type SelectItemProps, type SelectLabelProps, type SelectProps, type SelectScrollDownButtonProps, type SelectScrollUpButtonProps, type SelectSeparatorProps, type SelectTriggerClearProps, type SelectTriggerProps, type SelectValueProps, };

package/dist/components/field/field-select.js

@@ -0,0 +1,26 @@
+import { jsx as c } from "react/jsx-runtime";
+import * as n from "react";
+import { SelectTrigger as i } from "../select/select.js";
+import { Select as x, SelectContent as C, SelectGroup as R, SelectItem as h, SelectLabel as B, SelectScrollDownButton as b, SelectScrollUpButton as j, SelectSeparator as y, SelectTriggerClear as D, SelectValue as F } from "../select/select.js";
+import { useOptionalFieldContext as S } from "./field.js";
+const a = n.forwardRef(function({ ...o }, e) {
+  var l;
+  const r = ((l = S()) == null ? void 0 : l.inputRef) ?? null;
+  return /* @__PURE__ */ c(i, { ref: (t) => {
+    r && (r.current = t), typeof e == "function" ? e(t) : e && (e.current = t);
+  }, ...o });
+});
+export {
+  x as Select,
+  C as SelectContent,
+  R as SelectGroup,
+  h as SelectItem,
+  B as SelectLabel,
+  b as SelectScrollDownButton,
+  j as SelectScrollUpButton,
+  y as SelectSeparator,
+  a as SelectTrigger,
+  D as SelectTriggerClear,
+  F as SelectValue
+};
+//# sourceMappingURL=field-select.js.map

package/dist/components/field/field-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-select.js","sources":["../../../src/components/field/field-select.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger as SelectTriggerBase,\n  SelectTriggerClear,\n  SelectValue,\n  type SelectContentProps,\n  type SelectGroupProps,\n  type SelectItemProps,\n  type SelectLabelProps,\n  type SelectProps,\n  type SelectScrollDownButtonProps,\n  type SelectScrollUpButtonProps,\n  type SelectSeparatorProps,\n  type SelectTriggerClearProps,\n  type SelectTriggerProps,\n  type SelectValueProps,\n} from \"../select/select\"\nimport { useOptionalFieldContext } from \"./field\"\n\nexport const SelectTrigger = React.forwardRef<\n  HTMLButtonElement,\n  SelectTriggerProps\n>(function SelectTrigger({ ...props }, forwardedRef) {\n  // Optional on purpose: this part is valid standalone and only picks up field wiring\n  // when nested inside one. See useOptionalFieldContext.\n  const inputRef = useOptionalFieldContext()?.inputRef ?? null\n\n  const handleRef = (el: HTMLButtonElement | null) => {\n    if (inputRef) {\n      inputRef.current = el\n    }\n    if (typeof forwardedRef === \"function\") {\n      forwardedRef(el)\n    } else if (forwardedRef) {\n      forwardedRef.current = el\n    }\n  }\n\n  return <SelectTriggerBase ref={handleRef} {...props} />\n})\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTriggerClear,\n  SelectValue,\n  type SelectContentProps,\n  type SelectGroupProps,\n  type SelectItemProps,\n  type SelectLabelProps,\n  type SelectProps,\n  type SelectScrollDownButtonProps,\n  type SelectScrollUpButtonProps,\n  type SelectSeparatorProps,\n  type SelectTriggerClearProps,\n  type SelectTriggerProps,\n  type SelectValueProps,\n}\n"],"names":["SelectTrigger","React","props","forwardedRef","inputRef","_a","useOptionalFieldContext","jsx","SelectTriggerBase","el"],"mappings":";;;;;AA4BO,MAAMA,IAAgBC,EAAM,WAGjC,SAAuB,EAAE,GAAGC,EAAA,GAASC,GAAc;;AAGnD,QAAMC,MAAWC,IAAAC,QAAA,gBAAAD,EAA2B,aAAY;AAaxD,SAAO,gBAAAE,EAACC,GAAA,EAAkB,KAXR,CAACC,MAAiC;AAClD,IAAIL,MACFA,EAAS,UAAUK,IAEjB,OAAON,KAAiB,aAC1BA,EAAaM,CAAE,IACNN,MACTA,EAAa,UAAUM;AAAA,EAE3B,GAE2C,GAAGP,GAAO;AACvD,CAAC;"}

package/dist/components/field/field.d.ts

@@ -0,0 +1,76 @@
+import * as React from "react";
+export type FieldInputRef = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement | null;
+export interface FieldContextValue {
+    inputRef: React.RefObject<FieldInputRef>;
+}
+export declare const useFieldContext: () => FieldContextValue;
+/**
+ * Field context when there is one, `null` otherwise — for parts that work both inside and outside a
+ * Field.
+ *
+ * `useFieldContext` throws by design, which is right for FieldInput (it is meaningless on its own)
+ * and wrong for SelectTrigger and the combobox trigger, which are legitimate standalone components
+ * that merely pick up field wiring when nested. Those were calling the throwing hook inside a
+ * try/catch, i.e. using an exception for control flow on every render of a perfectly valid tree.
+ */
+export declare const useOptionalFieldContext: () => FieldContextValue | null;
+export type FieldVariant = "default" | "highlight" | "readonly" | "destructive";
+export declare const fieldVariants: ({ variant, }?: {
+    variant?: FieldVariant;
+}) => FieldVariant;
+export type FieldProps = Omit<React.ComponentProps<"div">, "className"> & {
+    className?: string;
+    variant?: FieldVariant;
+};
+export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type FieldSetProps = React.ComponentProps<"fieldset">;
+export declare const FieldSet: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+export type FieldGroupProps = React.ComponentProps<"div"> & {
+    direction?: "column" | "row";
+};
+export declare const FieldGroup: React.ForwardRefExoticComponent<Omit<FieldGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type FieldContentProps = React.ComponentProps<"div">;
+export declare const FieldContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type FieldLabelProps = Omit<React.ComponentProps<"label">, "className"> & {
+    className?: string;
+};
+export declare const FieldLabel: React.ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export type FieldLabelContentProps = React.ComponentProps<"div"> & {
+    showOnHover?: boolean;
+};
+export declare const FieldLabelContent: React.ForwardRefExoticComponent<Omit<FieldLabelContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type FieldDescriptionVariant = "default" | "helper";
+export declare const fieldDescriptionVariants: ({ variant, }?: {
+    variant?: FieldDescriptionVariant;
+}) => FieldDescriptionVariant;
+export type FieldDescriptionProps = Omit<React.ComponentProps<"p">, "className"> & {
+    className?: string;
+    variant?: FieldDescriptionVariant;
+};
+export declare const FieldDescription: React.ForwardRefExoticComponent<Omit<FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export type FieldErrorProps = Omit<React.ComponentProps<"div">, "className"> & {
+    className?: string;
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+};
+export declare const FieldError: React.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type FieldInputProps = Omit<React.ComponentProps<"input">, "className"> & {
+    className?: string;
+};
+export declare const FieldInput: React.ForwardRefExoticComponent<Omit<FieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export type FieldInputGroupProps = React.ComponentProps<"div">;
+export declare const FieldInputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type FieldTextareaResize = "none" | "vertical" | "horizontal";
+export type FieldTextareaProps = React.ComponentProps<"textarea"> & {
+    resize?: FieldTextareaResize;
+};
+export declare const FieldTextarea: React.ForwardRefExoticComponent<Omit<FieldTextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export type FieldGroupAddonAlign = "start" | "end";
+export declare const inputGroupAddonVariants: ({ align, }?: {
+    align?: FieldGroupAddonAlign;
+}) => FieldGroupAddonAlign;
+export type FieldGroupAddonProps = React.ComponentProps<"div"> & {
+    align?: FieldGroupAddonAlign;
+};
+export declare const FieldGroupAddon: React.ForwardRefExoticComponent<Omit<FieldGroupAddonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;