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

package/dist/components/segmented-control/segmented-control.js

@@ -0,0 +1,262 @@
+import { jsx as g, jsxs as E } from "react/jsx-runtime";
+import * as u from "react";
+import { useRef as M, useState as k, useCallback as v, useLayoutEffect as w } from "react";
+import { Root as O, Item as X } from "../../node_modules/@radix-ui/react-radio-group/dist/index.js";
+import { shorthands as n } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as e } from "../../renderer/contract.js";
+import { makeVoltStyles as G } from "../../styles/make-styles.js";
+import { spacingElement1 as m, semAccentDefault as R, accentA8 as P, semAccentSoft as I, fontWeightSemibold as Y, textXs as _, spacingElement3 as A, body as J } from "../../tokens/index.js";
+import { mergeClasses as C } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const T = u.createContext({
+  layout: "hug"
+}), W = G({
+  group: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    ...n.gap(m),
+    ...n.borderRadius("9999px"),
+    backgroundColor: I,
+    ...n.padding(m),
+    ...n.border("0"),
+    boxShadow: "none"
+  },
+  groupStretch: {
+    display: "flex",
+    width: "100%"
+  },
+  groupVertical: {
+    flexDirection: "column",
+    display: "inline-flex",
+    width: "fit-content"
+  },
+  indicator: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    zIndex: 0,
+    ...n.borderRadius("9999px"),
+    backgroundColor: J,
+    // Tailwind `shadow-sm`
+    boxShadow: "0 1px 2px 0 #0000000d"
+  },
+  indicatorAnimated: {
+    transitionProperty: "transform, width, height",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  item: {
+    position: "relative",
+    zIndex: 1,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...n.gap(m),
+    ...n.borderRadius("9999px"),
+    minWidth: "3rem",
+    // v1 uses Tailwind's `px-3` = 0.75rem here. The semantic spacing scale has NO 0.75rem
+    // token -- it runs 0.25/0.5/0.5/1/1.5/2 -- so this is a literal by necessity.
+    // `spacingGroup1` is 0.5rem and reaching for it by name (as three components did)
+    // silently loses 4px per side. See STATUS: the scale gap is the root cause.
+    paddingLeft: A,
+    paddingRight: A,
+    paddingTop: m,
+    paddingBottom: m,
+    fontSize: _,
+    fontWeight: Y,
+    color: R,
+    cursor: "pointer",
+    userSelect: "none",
+    backgroundColor: "transparent",
+    outlineStyle: "none",
+    ...n.border("0"),
+    boxShadow: "none",
+    aspectRatio: "auto",
+    width: "auto",
+    height: "auto",
+    transitionProperty: "background-color, color",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    ":hover:not([data-checked])": {
+      backgroundColor: I
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineColor: P
+    },
+    "&[data-disabled]": {
+      pointerEvents: "none",
+      opacity: 0.5,
+      backgroundColor: "transparent"
+    },
+    "&[data-checked]": {
+      backgroundColor: "transparent",
+      color: R
+    },
+    "&[data-checked][data-disabled]": {
+      backgroundColor: "transparent"
+    },
+    [`& [${e}="radio-group-indicator"]`]: {
+      display: "none"
+    },
+    // Keyed on SLOT_ATTR, never data-slot (rule 4): the composed RadioGroup emits both, and
+    // data-slot values are shared with v1 so such a rule would also match v1-rendered DOM.
+    [`[${e}='radio-group-indicator']`]: {
+      display: "none"
+    }
+  },
+  itemStretch: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%"
+  },
+  icon: {
+    flexShrink: 0,
+    width: "1rem",
+    height: "1rem",
+    pointerEvents: "none",
+    "& svg": {
+      width: "100%",
+      height: "100%",
+      display: "block"
+    }
+  },
+  label: {
+    lineHeight: "1rem",
+    overflowX: "hidden",
+    overflowY: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }
+}), rt = u.forwardRef(function({
+  className: x,
+  layout: o = "hug",
+  orientation: s = "horizontal",
+  value: r,
+  defaultValue: p,
+  onValueChange: i,
+  children: a,
+  ...b
+}, f) {
+  const c = W(), l = M(null), [z, N] = k(p), [y, q] = k(!1), [D, F] = k({
+    opacity: 0
+  }), h = r !== void 0, L = h ? r : z, S = v(() => {
+    if (!l.current) return;
+    const t = l.current.querySelector(
+      `[${e}="segmented-control-item"][data-state="checked"]`
+    );
+    t && (F({
+      opacity: 1,
+      width: t.offsetWidth,
+      height: t.offsetHeight,
+      transform: `translate(${t.offsetLeft}px, ${t.offsetTop}px)`
+    }), q(!0));
+  }, []);
+  w(() => {
+    if (!l.current) return;
+    const t = Array.from(
+      l.current.querySelectorAll(
+        `[${e}="segmented-control-item"]`
+      )
+    );
+    if (!t.length || (t.forEach((d) => d.style.minWidth = ""), o !== "equal")) return;
+    const H = Math.max(...t.map((d) => d.offsetWidth));
+    t.forEach((d) => d.style.minWidth = `${H}px`);
+  }, [o]), w(() => {
+    if (!y) {
+      S();
+      return;
+    }
+    const t = requestAnimationFrame(S);
+    return () => cancelAnimationFrame(t);
+  }, [L, y, S]);
+  const j = v(
+    (t) => {
+      h || N(t), i == null || i(t);
+    },
+    [h, i]
+  ), V = (t) => {
+    l.current = t, typeof f == "function" ? f(t) : f && (f.current = t);
+  }, B = u.useMemo(() => ({ layout: o }), [o]);
+  return /* @__PURE__ */ g(T.Provider, { value: B, children: /* @__PURE__ */ E(
+    O,
+    {
+      ref: V,
+      "data-slot": "segmented-control",
+      [e]: "segmented-control",
+      "data-layout": o,
+      value: h ? r : void 0,
+      defaultValue: p,
+      onValueChange: j,
+      orientation: s,
+      className: C(
+        c.group,
+        o === "stretch" && c.groupStretch,
+        s === "vertical" && c.groupVertical,
+        x
+      ),
+      ...b,
+      children: [
+        /* @__PURE__ */ g(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "segmented-control-indicator",
+            [e]: "segmented-control-indicator",
+            className: C(
+              c.indicator,
+              y && c.indicatorAnimated
+            ),
+            style: D
+          }
+        ),
+        a
+      ]
+    }
+  ) });
+}), it = u.forwardRef(function({ className: x, value: o, icon: s, children: r, ...p }, i) {
+  const a = W(), { layout: b } = u.useContext(T);
+  return /* @__PURE__ */ E(
+    X,
+    {
+      ref: i,
+      value: o,
+      "data-slot": "segmented-control-item",
+      [e]: "segmented-control-item",
+      className: C(
+        a.item,
+        b === "stretch" && a.itemStretch,
+        x
+      ),
+      ...p,
+      children: [
+        s && /* @__PURE__ */ g(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "segmented-control-item-icon",
+            [e]: "segmented-control-item-icon",
+            className: a.icon,
+            children: s
+          }
+        ),
+        r && /* @__PURE__ */ g(
+          "span",
+          {
+            "data-slot": "segmented-control-item-label",
+            [e]: "segmented-control-item-label",
+            className: a.label,
+            children: r
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  rt as SegmentedControl,
+  it as SegmentedControlItem
+};
+//# sourceMappingURL=segmented-control.js.map

package/dist/components/segmented-control/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\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\"\n\nexport type SegmentedControlLayout = \"hug\" | \"equal\" | \"stretch\"\n\nexport type SegmentedControlProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Root\n> & {\n  layout?: SegmentedControlLayout\n}\n\nexport type SegmentedControlItemProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Item\n> & {\n  icon?: React.ReactNode\n}\n\ninterface SegmentedControlContextValue {\n  layout: SegmentedControlLayout\n}\n\nconst SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue>({\n    layout: \"hug\",\n  })\n\nconst useStyles = makeVoltStyles({\n  group: {\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.semAccentSoft,\n    ...shorthands.padding(tokens.spacingElement1),\n    ...shorthands.border(\"0\"),\n    boxShadow: \"none\",\n  },\n  groupStretch: {\n    display: \"flex\",\n    width: \"100%\",\n  },\n  groupVertical: {\n    flexDirection: \"column\",\n    display: \"inline-flex\",\n    width: \"fit-content\",\n  },\n  indicator: {\n    pointerEvents: \"none\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    zIndex: 0,\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.body,\n    // Tailwind `shadow-sm`\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n  },\n  indicatorAnimated: {\n    transitionProperty: \"transform, width, height\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  },\n  item: {\n    position: \"relative\",\n    zIndex: 1,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    ...shorthands.borderRadius(\"9999px\"),\n    minWidth: \"3rem\",\n    // v1 uses Tailwind's `px-3` = 0.75rem here. The semantic spacing scale has NO 0.75rem\n    // token -- it runs 0.25/0.5/0.5/1/1.5/2 -- so this is a literal by necessity.\n    // `spacingGroup1` is 0.5rem and reaching for it by name (as three components did)\n    // silently loses 4px per side. See STATUS: the scale gap is the root cause.\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    paddingTop: tokens.spacingElement1,\n    paddingBottom: tokens.spacingElement1,\n    fontSize: tokens.textXs,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semAccentDefault,\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    backgroundColor: \"transparent\",\n    outlineStyle: \"none\",\n    ...shorthands.border(\"0\"),\n    boxShadow: \"none\",\n    aspectRatio: \"auto\",\n    width: \"auto\",\n    height: \"auto\",\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":hover:not([data-checked])\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n      backgroundColor: \"transparent\",\n    },\n    \"&[data-checked]\": {\n      backgroundColor: \"transparent\",\n      color: tokens.semAccentDefault,\n    },\n    \"&[data-checked][data-disabled]\": {\n      backgroundColor: \"transparent\",\n    },\n    [`& [${SLOT_ATTR}=\"radio-group-indicator\"]`]: {\n      display: \"none\",\n    },\n    // Keyed on SLOT_ATTR, never data-slot (rule 4): the composed RadioGroup emits both, and\n    // data-slot values are shared with v1 so such a rule would also match v1-rendered DOM.\n    [`[${SLOT_ATTR}='radio-group-indicator']`]: {\n      display: \"none\",\n    },\n  },\n  itemStretch: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  icon: {\n    flexShrink: 0,\n    width: \"1rem\",\n    height: \"1rem\",\n    pointerEvents: \"none\",\n    \"& svg\": {\n      width: \"100%\",\n      height: \"100%\",\n      display: \"block\",\n    },\n  },\n  label: {\n    lineHeight: \"1rem\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nexport const SegmentedControl = React.forwardRef<\n  HTMLDivElement,\n  SegmentedControlProps\n>(function SegmentedControl(\n  {\n    className,\n    layout = \"hug\",\n    orientation = \"horizontal\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    children,\n    ...props\n  },\n  forwardedRef\n) {\n  const styles = useStyles()\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [trackedValue, setTrackedValue] = useState(defaultValue)\n  // Starts false to prevent CSS transition flash on SSR hydration\n  const [indicatorReady, setIndicatorReady] = useState(false)\n  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({\n    opacity: 0,\n  })\n\n  const isControlled = valueProp !== undefined\n  const currentValue = isControlled ? valueProp : trackedValue\n\n  const updateIndicator = useCallback(() => {\n    if (!rootRef.current) return\n    const el = rootRef.current.querySelector<HTMLElement>(\n      `[${SLOT_ATTR}=\"segmented-control-item\"][data-state=\"checked\"]`\n    )\n    if (!el) return\n    setIndicatorStyle({\n      opacity: 1,\n      width: el.offsetWidth,\n      height: el.offsetHeight,\n      transform: `translate(${el.offsetLeft}px, ${el.offsetTop}px)`,\n    })\n    setIndicatorReady(true)\n  }, [])\n\n  // Must run before indicator effect so equalized widths are measured correctly\n  useLayoutEffect(() => {\n    if (!rootRef.current) return\n    const items = Array.from(\n      rootRef.current.querySelectorAll<HTMLElement>(\n        `[${SLOT_ATTR}=\"segmented-control-item\"]`\n      )\n    )\n    if (!items.length) return\n    items.forEach((el) => (el.style.minWidth = \"\"))\n    if (layout !== \"equal\") return\n    const max = Math.max(...items.map((el) => el.offsetWidth))\n    items.forEach((el) => (el.style.minWidth = `${max}px`))\n  }, [layout])\n\n  useLayoutEffect(() => {\n    if (!indicatorReady) {\n      updateIndicator()\n      return\n    }\n    const raf = requestAnimationFrame(updateIndicator)\n    return () => cancelAnimationFrame(raf)\n  }, [currentValue, indicatorReady, updateIndicator])\n\n  const handleValueChange = useCallback(\n    (value: string) => {\n      if (!isControlled) setTrackedValue(value)\n      onValueChange?.(value)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const handleRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === \"function\") {\n      forwardedRef(node)\n    } else if (forwardedRef) {\n      forwardedRef.current = node\n    }\n  }\n\n  const contextValue = React.useMemo(() => ({ layout }), [layout])\n\n  return (\n    <SegmentedControlContext.Provider value={contextValue}>\n      <RadioGroupPrimitive.Root\n        ref={handleRef}\n        data-slot=\"segmented-control\"\n        {...{ [SLOT_ATTR]: \"segmented-control\" }}\n        data-layout={layout}\n        value={isControlled ? valueProp : undefined}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        orientation={orientation}\n        className={mergeClasses(\n          styles.group,\n          layout === \"stretch\" && styles.groupStretch,\n          orientation === \"vertical\" && styles.groupVertical,\n          className\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-indicator\"\n          {...{ [SLOT_ATTR]: \"segmented-control-indicator\" }}\n          className={mergeClasses(\n            styles.indicator,\n            indicatorReady && styles.indicatorAnimated\n          )}\n          style={indicatorStyle}\n        />\n        {children}\n      </RadioGroupPrimitive.Root>\n    </SegmentedControlContext.Provider>\n  )\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  SegmentedControlItemProps\n>(function SegmentedControlItem(\n  { className, value, icon, children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const { layout } = React.useContext(SegmentedControlContext)\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      value={value}\n      data-slot=\"segmented-control-item\"\n      {...{ [SLOT_ATTR]: \"segmented-control-item\" }}\n      className={mergeClasses(\n        styles.item,\n        layout === \"stretch\" && styles.itemStretch,\n        className\n      )}\n      {...props}\n    >\n      {icon && (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-item-icon\"\n          {...{ [SLOT_ATTR]: \"segmented-control-item-icon\" }}\n          className={styles.icon}\n        >\n          {icon}\n        </span>\n      )}\n      {children && (\n        <span\n          data-slot=\"segmented-control-item-label\"\n          {...{ [SLOT_ATTR]: \"segmented-control-item-label\" }}\n          className={styles.label}\n        >\n          {children}\n        </span>\n      )}\n    </RadioGroupPrimitive.Item>\n  )\n})\n"],"names":["SegmentedControlContext","React","useStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.semAccentSoft","tokens.body","tokens.spacingElement3","tokens.textXs","tokens.fontWeightSemibold","tokens.semAccentDefault","tokens.accentA8","SLOT_ATTR","SegmentedControl","className","layout","orientation","valueProp","defaultValue","onValueChange","children","props","forwardedRef","styles","rootRef","useRef","trackedValue","setTrackedValue","useState","indicatorReady","setIndicatorReady","indicatorStyle","setIndicatorStyle","isControlled","currentValue","updateIndicator","useCallback","el","useLayoutEffect","items","max","raf","handleValueChange","value","handleRef","node","contextValue","jsx","jsxs","RadioGroupPrimitive.Root","mergeClasses","SegmentedControlItem","icon","ref","RadioGroupPrimitive.Item"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+export type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLElement>>;
+export type SelectGroupProps = React.ComponentProps<typeof SelectPrimitive.Group>;
+export declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectValueProps = React.ComponentProps<typeof SelectPrimitive.Value>;
+export declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger>;
+export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type SelectTriggerClearProps = React.ComponentProps<"span">;
+export declare const SelectTriggerClear: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Content> & {
+    container?: React.ComponentProps<typeof SelectPrimitive.Portal>["container"];
+};
+export declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.Label>;
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>;
+export declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectSeparatorProps = React.ComponentProps<typeof SelectPrimitive.Separator>;
+export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>;
+export declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>;
+export declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;