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

package/dist/components/list/list.js

@@ -0,0 +1,770 @@
+import { jsx as t, jsxs as W } from "react/jsx-runtime";
+import * as s from "react";
+import { useSensors as Q, useSensor as K, DndContext as Y, closestCenter as tt, DragOverlay as et, KeyboardSensor as rt, PointerSensor as ot } from "../../node_modules/@dnd-kit/core/dist/core.esm.js";
+import { SortableContext as nt, verticalListSortingStrategy as it, arrayMove as st, useSortable as at } from "../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { shorthands as m } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as h } from "../../renderer/contract.js";
+import { makeVoltStyles as lt } from "../../styles/make-styles.js";
+import { spacingElement3 as P, grayA5 as ct, spacingElement2 as y, spacingElement1 as B, semSuccessLight as dt, semWarningLight as mt, semErrorLight as pt, spacingGroup2 as X, grayA12 as _, fontWeightSemibold as ut, textSm as H, grayA10 as gt, fontWeightMedium as ft, semAccentSolid as ht, accentA8 as xt, grayA11 as V, grayA8 as vt, textXs as yt, grayA2 as q, radiusMd as j, semSuccessSoftHover as bt, semWarningSoftHover as wt, semErrorSoftHover as St, semAccentSoft as It, semSuccessDefault as Ct, semSuccessSoft as Lt, semWarningDefault as kt, semWarningSoft as Dt, semErrorDefault as Tt, semErrorSoft as Wt } from "../../tokens/index.js";
+import { mergeClasses as g } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const Et = (l) => /* @__PURE__ */ W(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    ...l,
+    children: [
+      /* @__PURE__ */ t("circle", { cx: "9", cy: "5", r: "1.5" }),
+      /* @__PURE__ */ t("circle", { cx: "15", cy: "5", r: "1.5" }),
+      /* @__PURE__ */ t("circle", { cx: "9", cy: "12", r: "1.5" }),
+      /* @__PURE__ */ t("circle", { cx: "15", cy: "12", r: "1.5" }),
+      /* @__PURE__ */ t("circle", { cx: "9", cy: "19", r: "1.5" }),
+      /* @__PURE__ */ t("circle", { cx: "15", cy: "19", r: "1.5" })
+    ]
+  }
+), U = (l) => /* @__PURE__ */ W(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    ...l,
+    children: [
+      /* @__PURE__ */ t("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" }),
+      /* @__PURE__ */ t("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ t("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+    ]
+  }
+), Nt = (l) => /* @__PURE__ */ W(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    ...l,
+    children: [
+      /* @__PURE__ */ t("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+      /* @__PURE__ */ t("polyline", { points: "22 4 12 14.01 9 11.01" })
+    ]
+  }
+), At = (l) => /* @__PURE__ */ t(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    ...l,
+    children: /* @__PURE__ */ t("polyline", { points: "9 18 15 12 9 6" })
+  }
+), b = lt({
+  list: {
+    display: "flex",
+    width: "100%",
+    listStyleType: "none",
+    flexDirection: "column",
+    ...m.gap(0),
+    ...m.padding(0),
+    ...m.margin(0)
+  },
+  // ListItem base
+  item: {
+    position: "relative",
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    ...m.borderRadius(j),
+    color: _,
+    transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    "& > svg": {
+      flexShrink: 0
+    }
+  },
+  // Density variants
+  itemCompact: {
+    minHeight: "2rem",
+    ...m.gap(y),
+    ...m.padding(B, y),
+    fontSize: H,
+    "& > svg": {
+      width: "1rem",
+      height: "1rem"
+    }
+  },
+  itemRelaxed: {
+    minHeight: "2.5rem",
+    // v1 gap-3 is 0.75rem.
+    ...m.gap(P),
+    ...m.padding(y, P),
+    fontSize: H,
+    "& > svg": {
+      width: "1rem",
+      height: "1rem"
+    }
+  },
+  // Status variants
+  statusDefault: {},
+  statusError: {
+    backgroundColor: Wt,
+    color: Tt
+  },
+  statusWarning: {
+    backgroundColor: Dt,
+    color: kt
+  },
+  statusSuccess: {
+    backgroundColor: Lt,
+    color: Ct
+  },
+  // Striped variant (only neutral rows)
+  stripedEven: {
+    "&:nth-child(even)": {
+      backgroundColor: q
+    }
+  },
+  // Interactive hovers
+  interactiveDefault: {
+    ":hover": {
+      backgroundColor: It
+    }
+  },
+  interactiveError: {
+    ":hover": {
+      backgroundColor: St
+    }
+  },
+  interactiveWarning: {
+    ":hover": {
+      backgroundColor: wt
+    }
+  },
+  interactiveSuccess: {
+    ":hover": {
+      backgroundColor: bt
+    }
+  },
+  // Sortable modifiers
+  sortableItem: {
+    cursor: "grab",
+    touchAction: "none",
+    ":active": {
+      cursor: "grabbing"
+    }
+  },
+  itemDragging: {
+    opacity: 0.4
+  },
+  // Index gutter
+  indexBase: {
+    display: "flex",
+    flexShrink: 0,
+    userSelect: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "stretch",
+    borderTopLeftRadius: j,
+    borderBottomLeftRadius: j,
+    backgroundColor: q,
+    textAlign: "center",
+    color: V,
+    fontVariantNumeric: "tabular-nums"
+  },
+  indexCompact: {
+    marginTop: `-${B}`,
+    marginBottom: `-${B}`,
+    marginLeft: `-${y}`,
+    minWidth: "1.5rem",
+    paddingLeft: "0.375rem",
+    paddingRight: "0.375rem"
+  },
+  indexRelaxed: {
+    marginTop: `-${y}`,
+    marginBottom: `-${y}`,
+    marginLeft: "-0.75rem",
+    minWidth: "1.75rem",
+    paddingLeft: y,
+    paddingRight: y
+  },
+  // Content
+  content: {
+    display: "flex",
+    minWidth: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    alignItems: "center",
+    ...m.gap(y),
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    "& > svg": {
+      width: "1rem",
+      height: "1rem",
+      flexShrink: 0
+    }
+  },
+  // Actions
+  actions: {
+    position: "relative",
+    zIndex: 10,
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    ...m.gap(B)
+  },
+  // Text
+  text: {
+    display: "flex",
+    minWidth: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    flexDirection: "column",
+    ...m.gap("0.125rem")
+  },
+  // Description
+  description: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: yt,
+    color: V
+  },
+  // Drag handle button
+  dragHandle: {
+    position: "relative",
+    zIndex: 10,
+    display: "inline-flex",
+    flexShrink: 0,
+    cursor: "grab",
+    alignItems: "center",
+    color: vt,
+    backgroundColor: "transparent",
+    ...m.border("0"),
+    ...m.padding(0),
+    ":hover": {
+      color: V
+    },
+    ":active": {
+      cursor: "grabbing"
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: xt
+    },
+    "& svg": {
+      width: "1rem",
+      height: "1rem"
+    }
+  },
+  // Drop indicator line
+  dropIndicator: {
+    pointerEvents: "none",
+    position: "absolute",
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    height: "0.125rem",
+    transformOrigin: "center",
+    ...m.borderRadius("9999px"),
+    backgroundColor: ht,
+    animationName: {
+      from: {
+        transform: "scaleX(0)",
+        opacity: 0
+      },
+      to: {
+        transform: "scaleX(1)",
+        opacity: 1
+      }
+    },
+    animationDuration: "160ms",
+    animationTimingFunction: "ease-out"
+  },
+  dropIndicatorTop: {
+    top: "-0.125rem"
+  },
+  dropIndicatorBottom: {
+    bottom: "-0.125rem"
+  },
+  // DragOverlay ghost
+  dragOverlayItem: {
+    transformOrigin: "center",
+    transform: "scale(0.95)",
+    cursor: "grabbing",
+    ...m.border("1px", "solid", ct),
+    backgroundColor: "rgb(255 255 255 / 55%)",
+    boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
+    backdropFilter: "blur(12px)",
+    animationName: {
+      from: { transform: "scale(1)" },
+      to: { transform: "scale(0.95)" }
+    },
+    animationDuration: "160ms",
+    animationTimingFunction: "ease-out",
+    ":hover": {
+      backgroundColor: "rgb(255 255 255 / 55%)"
+    }
+  },
+  // Group
+  group: {
+    listStyleType: "none"
+  },
+  groupTrigger: {
+    cursor: "pointer",
+    textAlign: "left",
+    fontWeight: ft,
+    backgroundColor: "transparent",
+    ...m.border("0")
+  },
+  groupChevron: {
+    width: "1rem",
+    height: "1rem",
+    flexShrink: 0,
+    color: gt,
+    transitionProperty: "transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  groupChevronOpen: {
+    transform: "rotate(90deg)"
+  },
+  groupTriggerText: {
+    minWidth: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  standaloneGroupLabel: {
+    marginTop: X,
+    display: "block",
+    listStyleType: "none",
+    ...m.padding("0.375rem", P),
+    fontSize: H,
+    fontWeight: ut,
+    color: _,
+    "&:first-child": {
+      marginTop: 0
+    }
+  },
+  groupContentList: {
+    paddingLeft: X
+  },
+  collapseWrapper: {
+    display: "grid",
+    gridTemplateRows: "0fr",
+    transitionProperty: "grid-template-rows",
+    transitionDuration: "200ms",
+    transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
+    "&[data-state='open']": {
+      gridTemplateRows: "1fr"
+    }
+  },
+  collapseWrapperOpen: {
+    gridTemplateRows: "1fr"
+  },
+  collapseInner: {
+    minHeight: 0,
+    overflow: "hidden"
+  },
+  // Status icons
+  statusIconError: {
+    width: "1rem",
+    height: "1rem",
+    flexShrink: 0,
+    color: pt
+  },
+  statusIconWarning: {
+    width: "1rem",
+    height: "1rem",
+    flexShrink: 0,
+    color: mt
+  },
+  statusIconSuccess: {
+    width: "1rem",
+    height: "1rem",
+    flexShrink: 0,
+    color: dt
+  }
+}), Ot = ({ status: l }) => {
+  const r = b();
+  return l === "error" ? /* @__PURE__ */ t(U, { className: r.statusIconError }) : l === "warning" ? /* @__PURE__ */ t(U, { className: r.statusIconWarning }) : l === "success" ? /* @__PURE__ */ t(Nt, { className: r.statusIconSuccess }) : null;
+}, J = s.createContext({
+  density: "relaxed",
+  striped: !1,
+  showIndex: !1,
+  sortable: !1
+}), F = () => s.useContext(J), Mt = s.forwardRef(function({
+  className: r,
+  density: a = "relaxed",
+  striped: e = !1,
+  showIndex: c = !1,
+  sortable: n = !1,
+  onReorder: i,
+  children: f,
+  ...x
+}, w) {
+  const v = b(), p = s.Children.toArray(f).filter(
+    s.isValidElement
+  ), I = p.map(
+    (d, T) => d.type === Z ? s.cloneElement(d, { index: T }) : d
+  ), C = p.filter((d) => d.type === Z), u = C.map((d) => d.props.value).filter((d) => typeof d == "string"), [o, L] = s.useState(null), G = o ? u.indexOf(o) : -1, k = o != null ? C.find((d) => d.props.value === o) : void 0, D = Q(
+    K(ot, { activationConstraint: { distance: 3 } }),
+    K(rt)
+  ), z = (d) => {
+    L(d.active.id);
+  }, A = (d) => {
+    L(null);
+    const { active: T, over: N } = d;
+    if (!N || T.id === N.id) return;
+    const O = u.indexOf(T.id), R = u.indexOf(N.id);
+    O === -1 || R === -1 || i == null || i(st(u, O, R));
+  }, E = /* @__PURE__ */ t(
+    "ol",
+    {
+      ref: w,
+      "data-slot": "list",
+      [h]: "list",
+      "data-density": a,
+      className: g(v.list, r),
+      ...x,
+      children: I
+    }
+  );
+  return /* @__PURE__ */ t(J.Provider, { value: { density: a, striped: e, showIndex: c, sortable: n }, children: n ? /* @__PURE__ */ W(
+    Y,
+    {
+      sensors: D,
+      collisionDetection: tt,
+      onDragStart: z,
+      onDragEnd: A,
+      onDragCancel: () => L(null),
+      children: [
+        /* @__PURE__ */ t(
+          nt,
+          {
+            items: u,
+            strategy: it,
+            children: E
+          }
+        ),
+        /* @__PURE__ */ t(et, { children: k ? /* @__PURE__ */ t(
+          $,
+          {
+            value: k.props.value,
+            status: k.props.status,
+            index: G,
+            className: v.dragOverlayItem,
+            children: k.props.children
+          }
+        ) : null })
+      ]
+    }
+  ) : E });
+}), Rt = s.forwardRef(function({ className: r, children: a, ...e }, c) {
+  const n = b();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      ref: c,
+      "data-slot": "list-item-actions",
+      [h]: "list-item-actions",
+      onPointerDown: (i) => i.stopPropagation(),
+      className: g(n.actions, r),
+      ...e,
+      children: a
+    }
+  );
+}), Kt = s.forwardRef(function({ className: r, ...a }, e) {
+  const c = b();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      ref: e,
+      "data-slot": "list-item-text",
+      [h]: "list-item-text",
+      className: g(c.text, r),
+      ...a
+    }
+  );
+}), Xt = s.forwardRef(function({ className: r, ...a }, e) {
+  const c = b();
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      ref: e,
+      "data-slot": "list-item-description",
+      [h]: "list-item-description",
+      className: g(c.description, r),
+      ...a
+    }
+  );
+}), $ = s.forwardRef(
+  function({
+    className: r,
+    value: a,
+    status: e = "default",
+    index: c,
+    children: n,
+    setNodeRef: i,
+    setActivatorNodeRef: f,
+    style: x,
+    isDragging: w,
+    dropEdge: v,
+    listeners: p,
+    attributes: I,
+    ...C
+  }, u) {
+    const o = b(), { density: L, striped: G, showIndex: k, sortable: D } = F(), z = D && !w, A = s.Children.toArray(n), E = A.find(
+      (S) => s.isValidElement(S) && S.type === Rt
+    ), d = A.filter((S) => S !== E), T = s.useCallback(
+      (S) => {
+        i == null || i(S), typeof u == "function" ? u(S) : u && (u.current = S);
+      },
+      [i, u]
+    ), N = e === "error" ? o.statusError : e === "warning" ? o.statusWarning : e === "success" ? o.statusSuccess : o.statusDefault, O = z ? e === "error" ? o.interactiveError : e === "warning" ? o.interactiveWarning : e === "success" ? o.interactiveSuccess : o.interactiveDefault : void 0, R = L === "compact" ? o.itemCompact : o.itemRelaxed;
+    return /* @__PURE__ */ W(
+      "li",
+      {
+        ref: T,
+        style: x,
+        "data-slot": "list-item",
+        [h]: "list-item",
+        "data-status": e,
+        "data-value": a,
+        onPointerDown: D ? p == null ? void 0 : p.onPointerDown : void 0,
+        className: g(
+          o.item,
+          R,
+          N,
+          G && e === "default" && o.stripedEven,
+          O,
+          D && o.sortableItem,
+          w && o.itemDragging,
+          r
+        ),
+        ...C,
+        children: [
+          v && /* @__PURE__ */ t(
+            "span",
+            {
+              "data-slot": "list-drop-indicator",
+              [h]: "list-drop-indicator",
+              "aria-hidden": "true",
+              className: g(
+                o.dropIndicator,
+                v === "top" ? o.dropIndicatorTop : o.dropIndicatorBottom
+              )
+            }
+          ),
+          k && /* @__PURE__ */ t(
+            "span",
+            {
+              "data-slot": "list-item-index",
+              [h]: "list-item-index",
+              "aria-hidden": "true",
+              className: g(
+                o.indexBase,
+                L === "compact" ? o.indexCompact : o.indexRelaxed
+              ),
+              children: (c ?? 0) + 1
+            }
+          ),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              "data-slot": "list-item-content",
+              [h]: "list-item-content",
+              className: o.content,
+              children: d
+            }
+          ),
+          /* @__PURE__ */ t(Ot, { status: e }),
+          E,
+          D && /* @__PURE__ */ t(
+            "button",
+            {
+              ref: f,
+              type: "button",
+              "aria-label": `Drag to reorder ${a ?? "item"}`,
+              className: o.dragHandle,
+              ...I,
+              onKeyDown: p == null ? void 0 : p.onKeyDown,
+              children: /* @__PURE__ */ t(Et, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+), Bt = s.forwardRef(
+  function(r, a) {
+    const e = s.useId();
+    process.env.NODE_ENV !== "production" && r.value === void 0 && console.warn(
+      "List: a sortable `ListItem` is missing a `value`. Give each sortable item a unique `value` so it can be reordered — items without one are excluded from `onReorder`."
+    );
+    const {
+      attributes: c,
+      listeners: n,
+      setNodeRef: i,
+      setActivatorNodeRef: f,
+      isDragging: x,
+      isOver: w,
+      activeIndex: v,
+      overIndex: p
+    } = at({
+      id: r.value ?? e,
+      animateLayoutChanges: () => !1
+    }), I = w && !x && v !== -1 ? v < p ? "bottom" : "top" : null;
+    return /* @__PURE__ */ t(
+      $,
+      {
+        ref: a,
+        ...r,
+        setNodeRef: i,
+        setActivatorNodeRef: f,
+        isDragging: x,
+        dropEdge: I,
+        listeners: n,
+        attributes: c
+      }
+    );
+  }
+), Z = s.forwardRef(
+  function(r, a) {
+    const { sortable: e } = F();
+    return e ? /* @__PURE__ */ t(Bt, { ref: a, ...r }) : /* @__PURE__ */ t($, { ref: a, ...r });
+  }
+), M = s.createContext(null), _t = s.forwardRef(
+  function({
+    open: r,
+    defaultOpen: a = !1,
+    onOpenChange: e,
+    className: c,
+    children: n,
+    ...i
+  }, f) {
+    const x = b(), [w, v] = s.useState(a), p = r ?? w, I = s.useId(), C = (u) => {
+      r === void 0 && v(u), e == null || e(u);
+    };
+    return /* @__PURE__ */ t(M.Provider, { value: { open: p, setOpen: C, contentId: I }, children: /* @__PURE__ */ t(
+      "li",
+      {
+        ref: f,
+        "data-slot": "list-group",
+        [h]: "list-group",
+        "data-state": p ? "open" : "closed",
+        className: g(x.group, c),
+        ...i,
+        children: n
+      }
+    ) });
+  }
+), qt = s.forwardRef(function({ className: r, children: a, ...e }, c) {
+  const n = b(), i = s.useContext(M), { density: f } = F();
+  if (i) {
+    const x = f === "compact" ? n.itemCompact : n.itemRelaxed;
+    return /* @__PURE__ */ W(
+      "button",
+      {
+        ref: c,
+        type: "button",
+        "data-slot": "list-group-trigger",
+        [h]: "list-group-trigger",
+        "aria-expanded": i.open,
+        "aria-controls": i.contentId,
+        onClick: () => i.setOpen(!i.open),
+        className: g(
+          n.item,
+          x,
+          n.interactiveDefault,
+          n.groupTrigger,
+          r
+        ),
+        ...e,
+        children: [
+          /* @__PURE__ */ t(
+            At,
+            {
+              className: g(
+                n.groupChevron,
+                i.open && n.groupChevronOpen
+              )
+            }
+          ),
+          /* @__PURE__ */ t("span", { className: n.groupTriggerText, children: a })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ t(
+    "li",
+    {
+      ref: c,
+      "data-slot": "list-group-label",
+      [h]: "list-group-label",
+      className: g(n.standaloneGroupLabel, r),
+      children: a
+    }
+  );
+}), Ut = s.forwardRef(function({ className: r, children: a, ...e }, c) {
+  const n = b(), i = s.useContext(M), f = /* @__PURE__ */ t(
+    "ul",
+    {
+      ref: c,
+      "data-slot": "list-group-content",
+      [h]: "list-group-content",
+      className: g(n.list, n.groupContentList, r),
+      ...e,
+      children: a
+    }
+  );
+  return i ? /* @__PURE__ */ t(
+    "div",
+    {
+      id: i.contentId,
+      "data-state": i.open ? "open" : "closed",
+      className: g(
+        n.collapseWrapper,
+        i.open && n.collapseWrapperOpen
+      ),
+      children: /* @__PURE__ */ t("div", { className: n.collapseInner, children: f })
+    }
+  ) : f;
+});
+export {
+  Mt as List,
+  _t as ListGroup,
+  Ut as ListGroupContent,
+  qt as ListGroupLabel,
+  Z as ListItem,
+  Rt as ListItemActions,
+  Xt as ListItemDescription,
+  Kt as ListItemText
+};
+//# sourceMappingURL=list.js.map