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

package/dist/components/select/select.js

@@ -0,0 +1,509 @@
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import * as c from "react";
+import { Root as q, Portal as R, Content as T, Viewport as N, Group as A, Item as B, ItemIndicator as D, ItemText as L, Label as $, ScrollDownButton as k, ScrollUpButton as z, Separator as W, Value as j, Trigger as X, Icon as E } from "../../node_modules/@radix-ui/react-select/dist/index.js";
+import { shorthands as d } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as l } from "../../renderer/contract.js";
+import { makeVoltStyles as M } from "../../styles/make-styles.js";
+import { spacingElement2 as s, spacingElement1 as p, semGraySoft as P, gray11 as U, fontWeightSemibold as G, textXs as V, grayA11 as u, accentA3 as x, grayA12 as S, textSm as y, spacingGroup1 as Y, body as F, accentA11 as b, accentA8 as Z, semAccentSoft as O, grayA8 as _, radiusMd as v, radius2xl as H, radiusLg as J } from "../../tokens/index.js";
+import { mergeClasses as m } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const K = (n) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px",
+    fill: "currentColor",
+    ...n,
+    children: /* @__PURE__ */ t("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" })
+  }
+), Q = (n) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px",
+    fill: "currentColor",
+    ...n,
+    children: /* @__PURE__ */ t("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" })
+  }
+), tt = (n) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px",
+    fill: "currentColor",
+    ...n,
+    children: /* @__PURE__ */ t("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" })
+  }
+), I = (n) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px",
+    fill: "currentColor",
+    ...n,
+    children: /* @__PURE__ */ t("path", { d: "M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z" })
+  }
+), f = M({
+  trigger: {
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "space-between",
+    ...d.gap(s),
+    ...d.borderRadius(J),
+    backgroundColor: "transparent",
+    fontSize: y,
+    outlineStyle: "none",
+    whiteSpace: "normal",
+    textAlign: "left",
+    cursor: "pointer",
+    transitionProperty: "color, box-shadow",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    ":disabled": {
+      cursor: "not-allowed",
+      opacity: 0.5
+    },
+    "&[data-placeholder]": {
+      color: _
+    },
+    "& svg": {
+      pointerEvents: "none",
+      flexShrink: 0
+    },
+    [`& [${l}="select-value"]`]: {
+      display: "flex",
+      alignItems: "center",
+      ...d.gap(s),
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    // The open-state chevron rotation is declared HERE, on the trigger that carries the state
+    // attribute, reaching the icon by SLOT_ATTR.
+    [`&[data-state='open'] [${l}="select-icon"] svg`]: {
+      transform: "rotate(180deg)"
+    },
+    [`&[data-state='open'] [${l}="select-icon"]`]: {
+      transform: "rotate(180deg)"
+    },
+    [`&[data-open] [${l}="select-icon"] svg`]: {
+      transform: "rotate(180deg)"
+    },
+    [`&[data-popup-open] [${l}="select-icon"] svg`]: {
+      transform: "rotate(180deg)"
+    }
+  },
+  triggerIconWrapper: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  triggerIcon: {
+    width: "1.5rem",
+    height: "1.5rem",
+    color: u,
+    transitionProperty: "transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  triggerClear: {
+    position: "absolute",
+    right: "2.75rem",
+    paddingTop: "0.125rem",
+    paddingBottom: "0.125rem",
+    paddingLeft: "0.125rem",
+    paddingRight: "0.125rem",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    color: b,
+    cursor: "pointer",
+    ...d.borderRadius(v),
+    ":hover": {
+      backgroundColor: O
+    },
+    ":focus-visible": {
+      outlineColor: Z,
+      outlineWidth: "2px",
+      outlineStyle: "solid"
+    }
+  },
+  triggerClearIcon: {
+    width: "1.25rem",
+    height: "1.25rem",
+    color: b
+  },
+  popup: {
+    backgroundColor: F,
+    ...d.padding(s),
+    ...d.gap(p),
+    color: S,
+    position: "relative",
+    zIndex: 50,
+    transformOrigin: "var(--radix-select-content-transform-origin)",
+    overflowX: "hidden",
+    overflowY: "auto",
+    ...d.borderRadius(H),
+    ...d.border("1px", "solid", "transparent"),
+    // v1 shadow-md
+    boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
+    outlineStyle: "none",
+    maxHeight: "var(--radix-popper-available-height, 20rem)",
+    "&[data-state='open']": {
+      animationName: {
+        from: { opacity: 0, transform: "scale(0.95)" },
+        to: { opacity: 1, transform: "scale(1)" }
+      },
+      animationDuration: "150ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "&[data-state='open'][data-side='bottom']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateY(-${s}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateY(0) scale(1)" }
+      }
+    },
+    "&[data-state='open'][data-side='left']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateX(${s}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateX(0) scale(1)" }
+      }
+    },
+    "&[data-state='open'][data-side='right']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateX(-${s}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateX(0) scale(1)" }
+      }
+    },
+    "&[data-state='open'][data-side='top']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateY(${s}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateY(0) scale(1)" }
+      }
+    },
+    "&[data-state='closed']": {
+      animationName: {
+        from: { opacity: 1, transform: "scale(1)" },
+        to: { opacity: 0, transform: "scale(0.95)" }
+      },
+      animationDuration: "100ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    }
+  },
+  viewport: {
+    width: "100%",
+    minWidth: "var(--radix-select-trigger-width)",
+    scrollMarginTop: p,
+    scrollMarginBottom: p
+  },
+  item: {
+    position: "relative",
+    display: "flex",
+    width: "100%",
+    cursor: "default",
+    userSelect: "none",
+    alignItems: "center",
+    ...d.gap(s),
+    ...d.borderRadius(v),
+    paddingLeft: Y,
+    paddingRight: "2rem",
+    paddingTop: "0.375rem",
+    paddingBottom: "0.375rem",
+    fontSize: y,
+    color: S,
+    outlineStyle: "none",
+    ":not(:first-child)": {
+      marginTop: "0.125rem"
+    },
+    "&[data-highlighted]": {
+      backgroundColor: x
+    },
+    "&[data-state='checked']": {
+      backgroundColor: x
+    },
+    "&[data-disabled]": {
+      pointerEvents: "none",
+      opacity: 0.5
+    },
+    "& svg": {
+      pointerEvents: "none",
+      flexShrink: 0
+    },
+    "& svg:not([class*='text-'])": {
+      color: u
+    }
+  },
+  itemIndicatorWrapper: {
+    position: "absolute",
+    right: s,
+    display: "flex",
+    width: "1rem",
+    height: "1rem",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  itemIndicatorIcon: {
+    width: "1rem",
+    height: "1rem",
+    color: u
+  },
+  label: {
+    paddingLeft: s,
+    paddingRight: s,
+    paddingTop: "0.375rem",
+    paddingBottom: "0.375rem",
+    fontSize: V,
+    fontWeight: G,
+    color: U
+  },
+  separator: {
+    pointerEvents: "none",
+    marginLeft: `calc(-1 * ${p})`,
+    marginRight: `calc(-1 * ${p})`,
+    marginTop: p,
+    marginBottom: p,
+    height: "1px",
+    backgroundColor: P
+  },
+  scrollArrow: {
+    display: "flex",
+    cursor: "default",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  scrollArrowUp: {
+    paddingBottom: p
+  },
+  scrollArrowDown: {
+    paddingTop: p
+  },
+  scrollArrowIcon: {
+    width: "1.5rem",
+    height: "1.5rem"
+  },
+  scrollArrowDownIcon: {
+    transform: "rotate(180deg)"
+  }
+}), dt = c.forwardRef(function(o, e) {
+  return /* @__PURE__ */ t(q, { "data-slot": "select", ...o });
+}), pt = c.forwardRef(function({ className: o, ...e }, a) {
+  return /* @__PURE__ */ t(
+    A,
+    {
+      ref: a,
+      "data-slot": "select-group",
+      [l]: "select-group",
+      className: o,
+      ...e
+    }
+  );
+}), mt = c.forwardRef(function({ className: o, ...e }, a) {
+  return /* @__PURE__ */ t(
+    j,
+    {
+      ref: a,
+      "data-slot": "select-value",
+      [l]: "select-value",
+      className: o,
+      ...e
+    }
+  );
+}), gt = c.forwardRef(function({ className: o, children: e, ...a }, i) {
+  const r = f();
+  return /* @__PURE__ */ h(
+    X,
+    {
+      ref: i,
+      "data-slot": "select-trigger",
+      [l]: "select-trigger",
+      className: m(r.trigger, o),
+      ...a,
+      children: [
+        e,
+        /* @__PURE__ */ t(
+          E,
+          {
+            asChild: !0,
+            "data-slot": "select-icon",
+            [l]: "select-icon",
+            className: r.triggerIconWrapper,
+            children: /* @__PURE__ */ t(tt, { className: r.triggerIcon })
+          }
+        )
+      ]
+    }
+  );
+}), ft = c.forwardRef(function({ className: o, onClick: e, ...a }, i) {
+  const r = f();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      ref: i,
+      role: "button",
+      tabIndex: 0,
+      "data-slot": "select-trigger-clear",
+      [l]: "select-trigger-clear",
+      className: m(r.triggerClear, o),
+      onPointerDown: (g) => {
+        g.preventDefault(), g.stopPropagation();
+      },
+      onClick: (g) => {
+        g.preventDefault(), g.stopPropagation(), e == null || e(g);
+      },
+      ...a,
+      children: /* @__PURE__ */ t(K, { className: r.triggerClearIcon })
+    }
+  );
+}), ut = c.forwardRef(function({
+  className: o,
+  children: e,
+  position: a = "popper",
+  align: i = "center",
+  container: r,
+  ...g
+}, C) {
+  const w = f();
+  return /* @__PURE__ */ t(R, { container: r, children: /* @__PURE__ */ h(
+    T,
+    {
+      ref: C,
+      "data-slot": "select-content",
+      [l]: "select-content",
+      position: a,
+      align: i,
+      className: m(w.popup, o),
+      ...g,
+      children: [
+        /* @__PURE__ */ t(et, {}),
+        /* @__PURE__ */ t(
+          N,
+          {
+            "data-slot": "select-viewport",
+            [l]: "select-viewport",
+            className: w.viewport,
+            children: e
+          }
+        ),
+        /* @__PURE__ */ t(ot, {})
+      ]
+    }
+  ) });
+}), ht = c.forwardRef(function({ className: o, ...e }, a) {
+  const i = f();
+  return /* @__PURE__ */ t(
+    $,
+    {
+      ref: a,
+      "data-slot": "select-label",
+      [l]: "select-label",
+      className: m(i.label, o),
+      ...e
+    }
+  );
+}), wt = c.forwardRef(function({ className: o, children: e, ...a }, i) {
+  const r = f();
+  return /* @__PURE__ */ h(
+    B,
+    {
+      ref: i,
+      "data-slot": "select-item",
+      [l]: "select-item",
+      className: m(r.item, o),
+      ...a,
+      children: [
+        /* @__PURE__ */ t("span", { className: r.itemIndicatorWrapper, children: /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(Q, { className: r.itemIndicatorIcon }) }) }),
+        /* @__PURE__ */ t(L, { children: e })
+      ]
+    }
+  );
+}), xt = c.forwardRef(function({ className: o, ...e }, a) {
+  const i = f();
+  return /* @__PURE__ */ t(
+    W,
+    {
+      ref: a,
+      "data-slot": "select-separator",
+      [l]: "select-separator",
+      className: m(i.separator, o),
+      ...e
+    }
+  );
+}), et = c.forwardRef(function({ className: o, children: e, ...a }, i) {
+  const r = f();
+  return /* @__PURE__ */ t(
+    z,
+    {
+      ref: i,
+      "data-slot": "select-scroll-up-button",
+      [l]: "select-scroll-up-button",
+      className: m(
+        r.scrollArrow,
+        r.scrollArrowUp,
+        o
+      ),
+      ...a,
+      children: e ?? /* @__PURE__ */ t(I, { className: r.scrollArrowIcon })
+    }
+  );
+}), ot = c.forwardRef(function({ className: o, children: e, ...a }, i) {
+  const r = f();
+  return /* @__PURE__ */ t(
+    k,
+    {
+      ref: i,
+      "data-slot": "select-scroll-down-button",
+      [l]: "select-scroll-down-button",
+      className: m(
+        r.scrollArrow,
+        r.scrollArrowDown,
+        o
+      ),
+      ...a,
+      children: e ?? /* @__PURE__ */ t(
+        I,
+        {
+          className: m(
+            r.scrollArrowIcon,
+            r.scrollArrowDownIcon
+          )
+        }
+      )
+    }
+  );
+});
+export {
+  dt as Select,
+  ut as SelectContent,
+  pt as SelectGroup,
+  wt as SelectItem,
+  ht as SelectLabel,
+  ot as SelectScrollDownButton,
+  et as SelectScrollUpButton,
+  xt as SelectSeparator,
+  gt as SelectTrigger,
+  ft as SelectTriggerClear,
+  mt as SelectValue
+};
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\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 CheckIcon = (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=\"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 ChevronUpIcon = (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-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  trigger: {\n    display: \"flex\",\n    width: \"100%\",\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    outlineStyle: \"none\",\n    whiteSpace: \"normal\",\n    textAlign: \"left\",\n    cursor: \"pointer\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":disabled\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n    },\n    \"&[data-placeholder]\": {\n      color: tokens.grayA8,\n    },\n    \"& svg\": {\n      pointerEvents: \"none\",\n      flexShrink: 0,\n    },\n    [`& [${SLOT_ATTR}=\"select-value\"]`]: {\n      display: \"flex\",\n      alignItems: \"center\",\n      ...shorthands.gap(tokens.spacingElement2),\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n      whiteSpace: \"nowrap\",\n    },\n\n    // The open-state chevron rotation is declared HERE, on the trigger that carries the state\n    // attribute, reaching the icon by SLOT_ATTR.\n    [`&[data-state='open'] [${SLOT_ATTR}=\"select-icon\"] svg`]: {\n      transform: \"rotate(180deg)\",\n    },\n    [`&[data-state='open'] [${SLOT_ATTR}=\"select-icon\"]`]: {\n      transform: \"rotate(180deg)\",\n    },\n    [`&[data-open] [${SLOT_ATTR}=\"select-icon\"] svg`]: {\n      transform: \"rotate(180deg)\",\n    },\n    [`&[data-popup-open] [${SLOT_ATTR}=\"select-icon\"] svg`]: {\n      transform: \"rotate(180deg)\",\n    },\n  },\n  triggerIconWrapper: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n  },\n  triggerIcon: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    color: tokens.grayA11,\n    transitionProperty: \"transform\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  },\n  triggerClear: {\n    position: \"absolute\",\n    right: \"2.75rem\",\n    paddingTop: \"0.125rem\",\n    paddingBottom: \"0.125rem\",\n    paddingLeft: \"0.125rem\",\n    paddingRight: \"0.125rem\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    backgroundColor: \"transparent\",\n    color: tokens.accentA11,\n    cursor: \"pointer\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.accentA8,\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n    },\n  },\n  triggerClearIcon: {\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    color: tokens.accentA11,\n  },\n  popup: {\n    backgroundColor: tokens.body,\n    ...shorthands.padding(tokens.spacingElement2),\n    ...shorthands.gap(tokens.spacingElement1),\n    color: tokens.grayA12,\n    position: \"relative\",\n    zIndex: 50,\n    transformOrigin: \"var(--radix-select-content-transform-origin)\",\n    overflowX: \"hidden\",\n    overflowY: \"auto\",\n    ...shorthands.borderRadius(tokens.radius2xl),\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n    // v1 shadow-md\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    outlineStyle: \"none\",\n    maxHeight: \"var(--radix-popper-available-height, 20rem)\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0, transform: \"scale(0.95)\" },\n        to: { opacity: 1, transform: \"scale(1)\" },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='open'][data-side='bottom']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='left']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='right']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='top']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1, transform: \"scale(1)\" },\n        to: { opacity: 0, transform: \"scale(0.95)\" },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  viewport: {\n    width: \"100%\",\n    minWidth: \"var(--radix-select-trigger-width)\",\n    scrollMarginTop: tokens.spacingElement1,\n    scrollMarginBottom: tokens.spacingElement1,\n  },\n  item: {\n    position: \"relative\",\n    display: \"flex\",\n    width: \"100%\",\n    cursor: \"default\",\n    userSelect: \"none\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusMd),\n    paddingLeft: tokens.spacingGroup1,\n    paddingRight: \"2rem\",\n    paddingTop: \"0.375rem\",\n    paddingBottom: \"0.375rem\",\n    fontSize: tokens.textSm,\n    color: tokens.grayA12,\n    outlineStyle: \"none\",\n    \":not(:first-child)\": {\n      marginTop: \"0.125rem\",\n    },\n    \"&[data-highlighted]\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      pointerEvents: \"none\",\n      flexShrink: 0,\n    },\n    \"& svg:not([class*='text-'])\": {\n      color: tokens.grayA11,\n    },\n  },\n  itemIndicatorWrapper: {\n    position: \"absolute\",\n    right: tokens.spacingElement2,\n    display: \"flex\",\n    width: \"1rem\",\n    height: \"1rem\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  itemIndicatorIcon: {\n    width: \"1rem\",\n    height: \"1rem\",\n    color: tokens.grayA11,\n  },\n  label: {\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement2,\n    paddingTop: \"0.375rem\",\n    paddingBottom: \"0.375rem\",\n    fontSize: tokens.textXs,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.gray11,\n  },\n  separator: {\n    pointerEvents: \"none\",\n    marginLeft: `calc(-1 * ${tokens.spacingElement1})`,\n    marginRight: `calc(-1 * ${tokens.spacingElement1})`,\n    marginTop: tokens.spacingElement1,\n    marginBottom: tokens.spacingElement1,\n    height: \"1px\",\n    backgroundColor: tokens.semGraySoft,\n  },\n  scrollArrow: {\n    display: \"flex\",\n    cursor: \"default\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  scrollArrowUp: {\n    paddingBottom: tokens.spacingElement1,\n  },\n  scrollArrowDown: {\n    paddingTop: tokens.spacingElement1,\n  },\n  scrollArrowIcon: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n  },\n  scrollArrowDownIcon: {\n    transform: \"rotate(180deg)\",\n  },\n})\n\nexport type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>\n\nexport const Select: React.ForwardRefExoticComponent<\n  SelectProps & React.RefAttributes<HTMLElement>\n> = React.forwardRef<HTMLElement, SelectProps>(function Select(props, _ref) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n})\n\nexport type SelectGroupProps = React.ComponentProps<\n  typeof SelectPrimitive.Group\n>\n\nexport const SelectGroup = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Group>,\n  SelectGroupProps\n>(function SelectGroup({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.Group\n      ref={ref}\n      data-slot=\"select-group\"\n      {...{ [SLOT_ATTR]: \"select-group\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type SelectValueProps = React.ComponentProps<\n  typeof SelectPrimitive.Value\n>\n\nexport const SelectValue = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Value>,\n  SelectValueProps\n>(function SelectValue({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.Value\n      ref={ref}\n      data-slot=\"select-value\"\n      {...{ [SLOT_ATTR]: \"select-value\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type SelectTriggerProps = React.ComponentProps<\n  typeof SelectPrimitive.Trigger\n>\n\nexport const SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  SelectTriggerProps\n>(function SelectTrigger({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <SelectPrimitive.Trigger\n      ref={ref}\n      data-slot=\"select-trigger\"\n      {...{ [SLOT_ATTR]: \"select-trigger\" }}\n      className={mergeClasses(styles.trigger, className)}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        asChild\n        data-slot=\"select-icon\"\n        {...{ [SLOT_ATTR]: \"select-icon\" }}\n        className={styles.triggerIconWrapper}\n      >\n        <ChevronDownIcon className={styles.triggerIcon} />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n})\n\nexport type SelectTriggerClearProps = React.ComponentProps<\"span\">\n\nexport const SelectTriggerClear = React.forwardRef<\n  HTMLSpanElement,\n  SelectTriggerClearProps\n>(function SelectTriggerClear({ className, onClick, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      role=\"button\"\n      tabIndex={0}\n      data-slot=\"select-trigger-clear\"\n      {...{ [SLOT_ATTR]: \"select-trigger-clear\" }}\n      className={mergeClasses(styles.triggerClear, className)}\n      onPointerDown={(event) => {\n        event.preventDefault()\n        event.stopPropagation()\n      }}\n      onClick={(event: React.MouseEvent<HTMLSpanElement>) => {\n        event.preventDefault()\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      {...props}\n    >\n      <XIcon className={styles.triggerClearIcon} />\n    </span>\n  )\n})\n\nexport type SelectContentProps = React.ComponentProps<\n  typeof SelectPrimitive.Content\n> & {\n  container?: React.ComponentProps<typeof SelectPrimitive.Portal>[\"container\"]\n}\n\nexport const SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(function SelectContent(\n  {\n    className,\n    children,\n    position = \"popper\",\n    align = \"center\",\n    container,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <SelectPrimitive.Portal container={container}>\n      <SelectPrimitive.Content\n        ref={ref}\n        data-slot=\"select-content\"\n        {...{ [SLOT_ATTR]: \"select-content\" }}\n        position={position}\n        align={align}\n        className={mergeClasses(styles.popup, className)}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-slot=\"select-viewport\"\n          {...{ [SLOT_ATTR]: \"select-viewport\" }}\n          className={styles.viewport}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n})\n\nexport type SelectLabelProps = React.ComponentProps<\n  typeof SelectPrimitive.Label\n>\n\nexport const SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(function SelectLabel({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <SelectPrimitive.Label\n      ref={ref}\n      data-slot=\"select-label\"\n      {...{ [SLOT_ATTR]: \"select-label\" }}\n      className={mergeClasses(styles.label, className)}\n      {...props}\n    />\n  )\n})\n\nexport type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>\n\nexport const SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(function SelectItem({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      data-slot=\"select-item\"\n      {...{ [SLOT_ATTR]: \"select-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    >\n      <span className={styles.itemIndicatorWrapper}>\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className={styles.itemIndicatorIcon} />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n})\n\nexport type SelectSeparatorProps = React.ComponentProps<\n  typeof SelectPrimitive.Separator\n>\n\nexport const SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(function SelectSeparator({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <SelectPrimitive.Separator\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 SelectScrollUpButtonProps = React.ComponentProps<\n  typeof SelectPrimitive.ScrollUpButton\n>\n\nexport const SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  SelectScrollUpButtonProps\n>(function SelectScrollUpButton({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <SelectPrimitive.ScrollUpButton\n      ref={ref}\n      data-slot=\"select-scroll-up-button\"\n      {...{ [SLOT_ATTR]: \"select-scroll-up-button\" }}\n      className={mergeClasses(\n        styles.scrollArrow,\n        styles.scrollArrowUp,\n        className\n      )}\n      {...props}\n    >\n      {children ?? <ChevronUpIcon className={styles.scrollArrowIcon} />}\n    </SelectPrimitive.ScrollUpButton>\n  )\n})\n\nexport type SelectScrollDownButtonProps = React.ComponentProps<\n  typeof SelectPrimitive.ScrollDownButton\n>\n\nexport const SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  SelectScrollDownButtonProps\n>(function SelectScrollDownButton({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <SelectPrimitive.ScrollDownButton\n      ref={ref}\n      data-slot=\"select-scroll-down-button\"\n      {...{ [SLOT_ATTR]: \"select-scroll-down-button\" }}\n      className={mergeClasses(\n        styles.scrollArrow,\n        styles.scrollArrowDown,\n        className\n      )}\n      {...props}\n    >\n      {children ?? (\n        <ChevronUpIcon\n          className={mergeClasses(\n            styles.scrollArrowIcon,\n            styles.scrollArrowDownIcon\n          )}\n        />\n      )}\n    </SelectPrimitive.ScrollDownButton>\n  )\n})\n"],"names":["XIcon","props","jsx","CheckIcon","ChevronDownIcon","ChevronUpIcon","useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.radiusLg","tokens.textSm","tokens.grayA8","SLOT_ATTR","tokens.grayA11","tokens.accentA11","tokens.radiusMd","tokens.semAccentSoft","tokens.accentA8","tokens.body","tokens.spacingElement1","tokens.grayA12","tokens.radius2xl","tokens.spacingGroup1","tokens.accentA3","tokens.textXs","tokens.fontWeightSemibold","tokens.gray11","tokens.semGraySoft","Select","React","_ref","SelectPrimitive.Root","SelectGroup","className","ref","SelectPrimitive.Group","SelectValue","SelectPrimitive.Value","SelectTrigger","children","styles","jsxs","SelectPrimitive.Trigger","mergeClasses","SelectPrimitive.Icon","SelectTriggerClear","onClick","event","SelectContent","position","align","container","SelectPrimitive.Portal","SelectPrimitive.Content","SelectScrollUpButton","SelectPrimitive.Viewport","SelectScrollDownButton","SelectLabel","SelectPrimitive.Label","SelectItem","SelectPrimitive.Item","SelectPrimitive.ItemIndicator","SelectPrimitive.ItemText","SelectSeparator","SelectPrimitive.Separator","SelectPrimitive.ScrollUpButton","SelectPrimitive.ScrollDownButton"],"mappings":"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"}

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * Separator — v1's `@radix-ui/react-separator` ported to Griffel atoms with no Radix dependency.
+ *
+ * A separator needs no behaviour beyond correct semantics, so it is a plain `<div>`. The two
+ * orientation variants are separate style slots selected in JS from the `orientation` prop — we
+ * deliberately do NOT style off a `data-[orientation=...]` attribute, like v1 does. v1 keyed its
+ * sizing on `data-[orientation=horizontal]`; doing that here would either key on `data-slot`-style
+ * selectors (whose values are shared with v1, so the rule also matches v1-rendered DOM) or on the
+ * custom-property slot marker. Two slots in the style object is simpler and cheaper. We still emit
+ * `data-orientation` as a plain attribute — for diagnostics and for consumers — we just never style
+ * off it.
+ *
+ * The accessibility surface is the whole point of the component, so it gets the full treatment:
+ *  - `decorative` (default `true`): the divider is purely presentational, so it is hidden from
+ *    assistive technology with `aria-hidden="true"` and carries no `role`.
+ *  - `decorative={false}`: a meaningful separator, so it gets `role="separator"` and
+ *    `aria-orientation` matching the `orientation` prop.
+ */
+export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorProps = React.ComponentProps<"div"> & {
+    orientation?: SeparatorOrientation;
+    /**
+     * When `true` the separator is purely decorative and is hidden from assistive technology
+     * (`aria-hidden="true"`, no `role`). When `false` it is a meaningful separator and gets
+     * `role="separator"` plus `aria-orientation`.
+     */
+    decorative?: boolean;
+};
+export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/separator/separator.js

@@ -0,0 +1,42 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as n from "react";
+import { SLOT_ATTR as p } from "../../renderer/contract.js";
+import { makeVoltStyles as d } from "../../styles/make-styles.js";
+import { grayA5 as a } from "../../tokens/index.js";
+import { mergeClasses as f } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const h = d({
+  horizontal: {
+    backgroundColor: a,
+    flexShrink: 0,
+    height: "1px",
+    width: "100%"
+  },
+  vertical: {
+    backgroundColor: a,
+    flexShrink: 0,
+    height: "100%",
+    width: "1px"
+  }
+}), v = n.forwardRef(
+  function({ className: e, orientation: r = "horizontal", decorative: o = !0, ...i }, s) {
+    const l = h(), t = !o;
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: s,
+        "data-slot": "separator",
+        [p]: "separator",
+        "data-orientation": r,
+        role: t ? "separator" : void 0,
+        "aria-orientation": t ? r : void 0,
+        "aria-hidden": o ? "true" : void 0,
+        className: f(l[r], e),
+        ...i
+      }
+    );
+  }
+);
+export {
+  v as Separator
+};
+//# sourceMappingURL=separator.js.map

package/dist/components/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sources":["../../../src/components/separator/separator.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Separator — v1's `@radix-ui/react-separator` ported to Griffel atoms with no Radix dependency.\n *\n * A separator needs no behaviour beyond correct semantics, so it is a plain `<div>`. The two\n * orientation variants are separate style slots selected in JS from the `orientation` prop — we\n * deliberately do NOT style off a `data-[orientation=...]` attribute, like v1 does. v1 keyed its\n * sizing on `data-[orientation=horizontal]`; doing that here would either key on `data-slot`-style\n * selectors (whose values are shared with v1, so the rule also matches v1-rendered DOM) or on the\n * custom-property slot marker. Two slots in the style object is simpler and cheaper. We still emit\n * `data-orientation` as a plain attribute — for diagnostics and for consumers — we just never style\n * off it.\n *\n * The accessibility surface is the whole point of the component, so it gets the full treatment:\n *  - `decorative` (default `true`): the divider is purely presentational, so it is hidden from\n *    assistive technology with `aria-hidden=\"true\"` and carries no `role`.\n *  - `decorative={false}`: a meaningful separator, so it gets `role=\"separator\"` and\n *    `aria-orientation` matching the `orientation` prop.\n */\n\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\"\n\nconst useStyles = makeVoltStyles({\n  horizontal: {\n    backgroundColor: tokens.grayA5,\n    flexShrink: 0,\n    height: \"1px\",\n    width: \"100%\",\n  },\n  vertical: {\n    backgroundColor: tokens.grayA5,\n    flexShrink: 0,\n    height: \"100%\",\n    width: \"1px\",\n  },\n})\n\nexport type SeparatorProps = React.ComponentProps<\"div\"> & {\n  orientation?: SeparatorOrientation\n  /**\n   * When `true` the separator is purely decorative and is hidden from assistive technology\n   * (`aria-hidden=\"true\"`, no `role`). When `false` it is a meaningful separator and gets\n   * `role=\"separator\"` plus `aria-orientation`.\n   */\n  decorative?: boolean\n}\n\nexport const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  function Separator(\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) {\n    const styles = useStyles()\n\n    const meaningful = !decorative\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"separator\"\n        {...{ [SLOT_ATTR]: \"separator\" }}\n        data-orientation={orientation}\n        role={meaningful ? \"separator\" : undefined}\n        aria-orientation={meaningful ? orientation : undefined}\n        aria-hidden={decorative ? \"true\" : undefined}\n        className={mergeClasses(styles[orientation], className)}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["useStyles","makeVoltStyles","tokens.grayA5","Separator","React","className","orientation","decorative","props","ref","styles","meaningful","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;AA6BA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,YAAY;AAAA,IACV,iBAAiBC;AAAAA,IACjB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,UAAU;AAAA,IACR,iBAAiBA;AAAAA,IACjB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC,GAYYC,IAAYC,EAAM;AAAA,EAC7B,SACE,EAAE,WAAAC,GAAW,aAAAC,IAAc,cAAc,YAAAC,IAAa,IAAM,GAAGC,EAAA,GAC/DC,GACA;AACA,UAAMC,IAASV,EAAA,GAETW,IAAa,CAACJ;AAEpB,WACE,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,aAAU;AAAA,QACJ,CAACI,CAAS,GAAG;AAAA,QACnB,oBAAkBP;AAAA,QAClB,MAAMK,IAAa,cAAc;AAAA,QACjC,oBAAkBA,IAAaL,IAAc;AAAA,QAC7C,eAAaC,IAAa,SAAS;AAAA,QACnC,WAAWO,EAAaJ,EAAOJ,CAAW,GAAGD,CAAS;AAAA,QACrD,GAAGG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}