@epilot/volt-ui-experimental-griffel 0.1.2 → 0.2.0

package/dist/components/list/list.js

@@ -1,13 +1,13 @@
 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(
+import { useSensors as Y, useSensor as K, DndContext as tt, closestCenter as et, DragOverlay as rt, KeyboardSensor as ot, PointerSensor as nt } from "../../vendor/@dnd-kit/core/dist/core.esm.js";
+import { SortableContext as it, verticalListSortingStrategy as st, arrayMove as at, useSortable as lt } from "../../vendor/@dnd-kit/sortable/dist/sortable.esm.js";
+import { shorthands as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as h } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as g } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as ct } from "../../styles/make-styles.js";
+import { spacingElement3 as z, grayA5 as dt, spacingElement2 as y, spacingElement1 as B, semSuccessLight as mt, semWarningLight as pt, semErrorLight as ut, spacingGroup2 as _, grayA12 as q, fontWeightSemibold as gt, leadingSm as P, textSm as V, grayA10 as ft, fontWeightMedium as ht, semAccentSolid as xt, accentA8 as vt, grayA11 as j, grayA8 as yt, leadingXs as bt, textXs as wt, grayA2 as Q, radiusMd as F, semSuccessSoftHover as St, semWarningSoftHover as It, semErrorSoftHover as Ct, semAccentSoft as Lt, semSuccessDefault as kt, semSuccessSoft as Dt, semWarningDefault as Tt, semWarningSoft as Wt, semErrorDefault as Et, semErrorSoft as Nt } from "../../tokens/index.js";
+const At = (l) => /* @__PURE__ */ W(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -44,7 +44,7 @@ const Et = (l) => /* @__PURE__ */ W(
       /* @__PURE__ */ t("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
     ]
   }
-), Nt = (l) => /* @__PURE__ */ W(
+), Ot = (l) => /* @__PURE__ */ W(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -61,7 +61,7 @@ const Et = (l) => /* @__PURE__ */ W(
       /* @__PURE__ */ t("polyline", { points: "22 4 12 14.01 9 11.01" })
     ]
   }
-), At = (l) => /* @__PURE__ */ t(
+), Rt = (l) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -75,7 +75,7 @@ const Et = (l) => /* @__PURE__ */ W(
     ...l,
     children: /* @__PURE__ */ t("polyline", { points: "9 18 15 12 9 6" })
   }
-), b = lt({
+), b = ct({
   list: {
     display: "flex",
     width: "100%",
@@ -91,8 +91,8 @@ const Et = (l) => /* @__PURE__ */ W(
     display: "flex",
     width: "100%",
     alignItems: "center",
-    ...m.borderRadius(j),
-    color: _,
+    ...m.borderRadius(F),
+    color: q,
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -105,7 +105,8 @@ const Et = (l) => /* @__PURE__ */ W(
     minHeight: "2rem",
     ...m.gap(y),
     ...m.padding(B, y),
-    fontSize: H,
+    fontSize: V,
+    lineHeight: P,
     "& > svg": {
       width: "1rem",
       height: "1rem"
@@ -114,9 +115,10 @@ const Et = (l) => /* @__PURE__ */ W(
   itemRelaxed: {
     minHeight: "2.5rem",
     // v1 gap-3 is 0.75rem.
-    ...m.gap(P),
-    ...m.padding(y, P),
-    fontSize: H,
+    ...m.gap(z),
+    ...m.padding(y, z),
+    fontSize: V,
+    lineHeight: P,
     "& > svg": {
       width: "1rem",
       height: "1rem"
@@ -125,42 +127,42 @@ const Et = (l) => /* @__PURE__ */ W(
   // Status variants
   statusDefault: {},
   statusError: {
+    backgroundColor: Nt,
+    color: Et
+  },
+  statusWarning: {
     backgroundColor: Wt,
     color: Tt
   },
-  statusWarning: {
+  statusSuccess: {
     backgroundColor: Dt,
     color: kt
   },
-  statusSuccess: {
-    backgroundColor: Lt,
-    color: Ct
-  },
   // Striped variant (only neutral rows)
   stripedEven: {
     "&:nth-child(even)": {
-      backgroundColor: q
+      backgroundColor: Q
     }
   },
   // Interactive hovers
   interactiveDefault: {
     ":hover": {
-      backgroundColor: It
+      backgroundColor: Lt
     }
   },
   interactiveError: {
     ":hover": {
-      backgroundColor: St
+      backgroundColor: Ct
     }
   },
   interactiveWarning: {
     ":hover": {
-      backgroundColor: wt
+      backgroundColor: It
     }
   },
   interactiveSuccess: {
     ":hover": {
-      backgroundColor: bt
+      backgroundColor: St
     }
   },
   // Sortable modifiers
@@ -182,11 +184,11 @@ const Et = (l) => /* @__PURE__ */ W(
     alignItems: "center",
     justifyContent: "center",
     alignSelf: "stretch",
-    borderTopLeftRadius: j,
-    borderBottomLeftRadius: j,
-    backgroundColor: q,
+    borderTopLeftRadius: F,
+    borderBottomLeftRadius: F,
+    backgroundColor: Q,
     textAlign: "center",
-    color: V,
+    color: j,
     fontVariantNumeric: "tabular-nums"
   },
   indexCompact: {
@@ -247,8 +249,9 @@ const Et = (l) => /* @__PURE__ */ W(
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    fontSize: yt,
-    color: V
+    fontSize: wt,
+    lineHeight: bt,
+    color: j
   },
   // Drag handle button
   dragHandle: {
@@ -258,12 +261,12 @@ const Et = (l) => /* @__PURE__ */ W(
     flexShrink: 0,
     cursor: "grab",
     alignItems: "center",
-    color: vt,
+    color: yt,
     backgroundColor: "transparent",
     ...m.border("0"),
     ...m.padding(0),
     ":hover": {
-      color: V
+      color: j
     },
     ":active": {
       cursor: "grabbing"
@@ -272,7 +275,7 @@ const Et = (l) => /* @__PURE__ */ W(
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: xt
+      outlineColor: vt
     },
     "& svg": {
       width: "1rem",
@@ -289,7 +292,7 @@ const Et = (l) => /* @__PURE__ */ W(
     height: "0.125rem",
     transformOrigin: "center",
     ...m.borderRadius("9999px"),
-    backgroundColor: ht,
+    backgroundColor: xt,
     animationName: {
       from: {
         transform: "scaleX(0)",
@@ -314,7 +317,7 @@ const Et = (l) => /* @__PURE__ */ W(
     transformOrigin: "center",
     transform: "scale(0.95)",
     cursor: "grabbing",
-    ...m.border("1px", "solid", ct),
+    ...m.border("1px", "solid", dt),
     backgroundColor: "rgb(255 255 255 / 55%)",
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
     backdropFilter: "blur(12px)",
@@ -335,7 +338,7 @@ const Et = (l) => /* @__PURE__ */ W(
   groupTrigger: {
     cursor: "pointer",
     textAlign: "left",
-    fontWeight: ft,
+    fontWeight: ht,
     backgroundColor: "transparent",
     ...m.border("0")
   },
@@ -343,7 +346,7 @@ const Et = (l) => /* @__PURE__ */ W(
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    color: gt,
+    color: ft,
     transitionProperty: "transform",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
@@ -361,19 +364,20 @@ const Et = (l) => /* @__PURE__ */ W(
     whiteSpace: "nowrap"
   },
   standaloneGroupLabel: {
-    marginTop: X,
+    marginTop: _,
     display: "block",
     listStyleType: "none",
-    ...m.padding("0.375rem", P),
-    fontSize: H,
-    fontWeight: ut,
-    color: _,
+    ...m.padding("0.375rem", z),
+    fontSize: V,
+    lineHeight: P,
+    fontWeight: gt,
+    color: q,
     "&:first-child": {
       marginTop: 0
     }
   },
   groupContentList: {
-    paddingLeft: X
+    paddingLeft: _
   },
   collapseWrapper: {
     display: "grid",
@@ -397,29 +401,29 @@ const Et = (l) => /* @__PURE__ */ W(
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    color: pt
+    color: ut
   },
   statusIconWarning: {
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    color: mt
+    color: pt
   },
   statusIconSuccess: {
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    color: dt
+    color: mt
   }
-}), Ot = ({ status: l }) => {
+}), Bt = ({ 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;
+  return l === "error" ? /* @__PURE__ */ t(U, { className: r.statusIconError }) : l === "warning" ? /* @__PURE__ */ t(U, { className: r.statusIconWarning }) : l === "success" ? /* @__PURE__ */ t(Ot, { className: r.statusIconSuccess }) : null;
 }, J = s.createContext({
   density: "relaxed",
   striped: !1,
   showIndex: !1,
   sortable: !1
-}), F = () => s.useContext(J), Mt = s.forwardRef(function({
+}), $ = () => s.useContext(J), Kt = s.forwardRef(function({
   className: r,
   density: a = "relaxed",
   striped: e = !1,
@@ -433,17 +437,17 @@ const Et = (l) => /* @__PURE__ */ W(
     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) => {
+  ), 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 = Y(
+    K(nt, { activationConstraint: { distance: 3 } }),
+    K(ot)
+  ), H = (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));
+    O === -1 || R === -1 || i == null || i(at(u, O, R));
   }, E = /* @__PURE__ */ t(
     "ol",
     {
@@ -457,24 +461,24 @@ const Et = (l) => /* @__PURE__ */ W(
     }
   );
   return /* @__PURE__ */ t(J.Provider, { value: { density: a, striped: e, showIndex: c, sortable: n }, children: n ? /* @__PURE__ */ W(
-    Y,
+    tt,
     {
       sensors: D,
-      collisionDetection: tt,
-      onDragStart: z,
+      collisionDetection: et,
+      onDragStart: H,
       onDragEnd: A,
       onDragCancel: () => L(null),
       children: [
         /* @__PURE__ */ t(
-          nt,
+          it,
           {
             items: u,
-            strategy: it,
+            strategy: st,
             children: E
           }
         ),
-        /* @__PURE__ */ t(et, { children: k ? /* @__PURE__ */ t(
-          $,
+        /* @__PURE__ */ t(rt, { children: k ? /* @__PURE__ */ t(
+          M,
           {
             value: k.props.value,
             status: k.props.status,
@@ -486,7 +490,7 @@ const Et = (l) => /* @__PURE__ */ W(
       ]
     }
   ) : E });
-}), Rt = s.forwardRef(function({ className: r, children: a, ...e }, c) {
+}), Gt = s.forwardRef(function({ className: r, children: a, ...e }, c) {
   const n = b();
   return /* @__PURE__ */ t(
     "span",
@@ -500,7 +504,7 @@ const Et = (l) => /* @__PURE__ */ W(
       children: a
     }
   );
-}), Kt = s.forwardRef(function({ className: r, ...a }, e) {
+}), _t = s.forwardRef(function({ className: r, ...a }, e) {
   const c = b();
   return /* @__PURE__ */ t(
     "span",
@@ -512,7 +516,7 @@ const Et = (l) => /* @__PURE__ */ W(
       ...a
     }
   );
-}), Xt = s.forwardRef(function({ className: r, ...a }, e) {
+}), qt = s.forwardRef(function({ className: r, ...a }, e) {
   const c = b();
   return /* @__PURE__ */ t(
     "span",
@@ -524,7 +528,7 @@ const Et = (l) => /* @__PURE__ */ W(
       ...a
     }
   );
-}), $ = s.forwardRef(
+}), M = s.forwardRef(
   function({
     className: r,
     value: a,
@@ -540,14 +544,14 @@ const Et = (l) => /* @__PURE__ */ W(
     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
+    const o = b(), { density: L, striped: G, showIndex: k, sortable: D } = $(), H = D && !w, A = s.Children.toArray(n), E = A.find(
+      (S) => s.isValidElement(S) && S.type === Gt
     ), 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;
+    ), N = e === "error" ? o.statusError : e === "warning" ? o.statusWarning : e === "success" ? o.statusSuccess : o.statusDefault, O = H ? 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",
       {
@@ -604,7 +608,7 @@ const Et = (l) => /* @__PURE__ */ W(
               children: d
             }
           ),
-          /* @__PURE__ */ t(Ot, { status: e }),
+          /* @__PURE__ */ t(Bt, { status: e }),
           E,
           D && /* @__PURE__ */ t(
             "button",
@@ -615,14 +619,14 @@ const Et = (l) => /* @__PURE__ */ W(
               className: o.dragHandle,
               ...I,
               onKeyDown: p == null ? void 0 : p.onKeyDown,
-              children: /* @__PURE__ */ t(Et, {})
+              children: /* @__PURE__ */ t(At, {})
             }
           )
         ]
       }
     );
   }
-), Bt = s.forwardRef(
+), Ht = s.forwardRef(
   function(r, a) {
     const e = s.useId();
     process.env.NODE_ENV !== "production" && r.value === void 0 && console.warn(
@@ -637,12 +641,12 @@ const Et = (l) => /* @__PURE__ */ W(
       isOver: w,
       activeIndex: v,
       overIndex: p
-    } = at({
+    } = lt({
       id: r.value ?? e,
       animateLayoutChanges: () => !1
     }), I = w && !x && v !== -1 ? v < p ? "bottom" : "top" : null;
     return /* @__PURE__ */ t(
-      $,
+      M,
       {
         ref: a,
         ...r,
@@ -657,10 +661,10 @@ const Et = (l) => /* @__PURE__ */ W(
   }
 ), Z = s.forwardRef(
   function(r, a) {
-    const { sortable: e } = F();
-    return e ? /* @__PURE__ */ t(Bt, { ref: a, ...r }) : /* @__PURE__ */ t($, { ref: a, ...r });
+    const { sortable: e } = $();
+    return e ? /* @__PURE__ */ t(Ht, { ref: a, ...r }) : /* @__PURE__ */ t(M, { ref: a, ...r });
   }
-), M = s.createContext(null), _t = s.forwardRef(
+), X = s.createContext(null), Qt = s.forwardRef(
   function({
     open: r,
     defaultOpen: a = !1,
@@ -672,7 +676,7 @@ const Et = (l) => /* @__PURE__ */ W(
     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(
+    return /* @__PURE__ */ t(X.Provider, { value: { open: p, setOpen: C, contentId: I }, children: /* @__PURE__ */ t(
       "li",
       {
         ref: f,
@@ -685,8 +689,8 @@ const Et = (l) => /* @__PURE__ */ W(
       }
     ) });
   }
-), qt = s.forwardRef(function({ className: r, children: a, ...e }, c) {
-  const n = b(), i = s.useContext(M), { density: f } = F();
+), Ut = s.forwardRef(function({ className: r, children: a, ...e }, c) {
+  const n = b(), i = s.useContext(X), { density: f } = $();
   if (i) {
     const x = f === "compact" ? n.itemCompact : n.itemRelaxed;
     return /* @__PURE__ */ W(
@@ -709,7 +713,7 @@ const Et = (l) => /* @__PURE__ */ W(
         ...e,
         children: [
           /* @__PURE__ */ t(
-            At,
+            Rt,
             {
               className: g(
                 n.groupChevron,
@@ -732,8 +736,8 @@ const Et = (l) => /* @__PURE__ */ W(
       children: a
     }
   );
-}), Ut = s.forwardRef(function({ className: r, children: a, ...e }, c) {
-  const n = b(), i = s.useContext(M), f = /* @__PURE__ */ t(
+}), Zt = s.forwardRef(function({ className: r, children: a, ...e }, c) {
+  const n = b(), i = s.useContext(X), f = /* @__PURE__ */ t(
     "ul",
     {
       ref: c,
@@ -758,13 +762,13 @@ const Et = (l) => /* @__PURE__ */ W(
   ) : f;
 });
 export {
-  Mt as List,
-  _t as ListGroup,
-  Ut as ListGroupContent,
-  qt as ListGroupLabel,
+  Kt as List,
+  Qt as ListGroup,
+  Zt as ListGroupContent,
+  Ut as ListGroupLabel,
   Z as ListItem,
-  Rt as ListItemActions,
-  Xt as ListItemDescription,
-  Kt as ListItemText
+  Gt as ListItemActions,
+  qt as ListItemDescription,
+  _t as ListItemText
 };
 //# sourceMappingURL=list.js.map