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

package/dist/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,270 @@
+import { jsx as r, jsxs as y, Fragment as D } from "react/jsx-runtime";
+import * as i from "react";
+import { Root as x, Action as A, Cancel as h, Content as b, Description as R, Overlay as T, Portal as w, Title as C, Trigger as v } from "../../node_modules/@radix-ui/react-alert-dialog/dist/index.js";
+import { shorthands as c } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as n } from "../../renderer/contract.js";
+import { makeVoltStyles as N } from "../../styles/make-styles.js";
+import { spacingGroup2 as f, grayA1 as S, grayA11 as z, textSm as F, grayA12 as W, fontWeightSemibold as O, textXl as P, containerXl as j, containerLg as k, containerMd as X, containerSm as _, body as H, spacingElement2 as p, radiusXl as I } from "../../tokens/index.js";
+import { Button as u } from "../button/button.js";
+import { mergeClasses as d } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const g = N({
+  overlay: {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 50,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    "&[data-state='open']": {
+      animationName: {
+        from: { opacity: 0 },
+        to: { opacity: 1 }
+      },
+      animationDuration: "150ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "&[data-state='closed']": {
+      animationName: {
+        from: { opacity: 1 },
+        to: { opacity: 0 }
+      },
+      animationDuration: "100ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    }
+  },
+  content: {
+    backgroundColor: H,
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    zIndex: 50,
+    display: "grid",
+    width: "100%",
+    maxWidth: "calc(100% - 2rem)",
+    ...c.gap(f),
+    ...c.borderRadius(I),
+    ...c.border("1px", "solid", S),
+    ...c.padding(f),
+    // v1 shadow-lg
+    boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
+    outlineStyle: "none",
+    "&[data-state='open']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: "translate(-50%, -50%) scale(0.95)"
+        },
+        to: {
+          opacity: 1,
+          transform: "translate(-50%, -50%) scale(1)"
+        }
+      },
+      animationDuration: "150ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "&[data-state='closed']": {
+      animationName: {
+        from: {
+          opacity: 1,
+          transform: "translate(-50%, -50%) scale(1)"
+        },
+        to: {
+          opacity: 0,
+          transform: "translate(-50%, -50%) scale(0.95)"
+        }
+      },
+      animationDuration: "100ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    }
+  },
+  sm: {
+    maxWidth: _
+  },
+  md: {
+    maxWidth: X
+  },
+  lg: {
+    maxWidth: k
+  },
+  xl: {
+    "@media (min-width: 640px)": {
+      maxWidth: j
+    }
+  },
+  header: {
+    display: "flex",
+    flexDirection: "column",
+    ...c.gap(p),
+    textAlign: "left"
+  },
+  footer: {
+    display: "flex",
+    ...c.gap(p),
+    justifyContent: "flex-end"
+  },
+  title: {
+    fontSize: P,
+    fontWeight: O,
+    color: W
+  },
+  description: {
+    fontSize: F,
+    color: z
+  }
+}), Q = i.forwardRef(
+  function(t, a) {
+    return /* @__PURE__ */ r(x, { "data-slot": "alert-dialog", ...t });
+  }
+), U = i.forwardRef(function({ className: t, ...a }, o) {
+  return /* @__PURE__ */ r(
+    v,
+    {
+      ref: o,
+      "data-slot": "alert-dialog-trigger",
+      [n]: "alert-dialog-trigger",
+      className: t,
+      ...a
+    }
+  );
+}), Y = i.forwardRef(function(t, a) {
+  return /* @__PURE__ */ r(
+    w,
+    {
+      "data-slot": "alert-dialog-portal",
+      [n]: "alert-dialog-portal",
+      ...t
+    }
+  );
+}), L = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = g();
+  return /* @__PURE__ */ r(
+    T,
+    {
+      ref: o,
+      "data-slot": "alert-dialog-overlay",
+      [n]: "alert-dialog-overlay",
+      className: d(e.overlay, t),
+      ...a
+    }
+  );
+}), Z = i.forwardRef(function({ className: t, size: a = "xl", children: o, ...e }, m) {
+  const s = g();
+  return /* @__PURE__ */ y(D, { children: [
+    /* @__PURE__ */ r(L, {}),
+    /* @__PURE__ */ r(
+      b,
+      {
+        ref: m,
+        "data-slot": "alert-dialog-content",
+        [n]: "alert-dialog-content",
+        className: d(s.content, s[a], t),
+        ...e,
+        children: o
+      }
+    )
+  ] });
+}), $ = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = g();
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: o,
+      "data-slot": "alert-dialog-header",
+      [n]: "alert-dialog-header",
+      className: d(e.header, t),
+      ...a
+    }
+  );
+}), tt = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = g();
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: o,
+      "data-slot": "alert-dialog-footer",
+      [n]: "alert-dialog-footer",
+      className: d(e.footer, t),
+      ...a
+    }
+  );
+}), at = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = g();
+  return /* @__PURE__ */ r(
+    C,
+    {
+      ref: o,
+      "data-slot": "alert-dialog-title",
+      [n]: "alert-dialog-title",
+      className: d(e.title, t),
+      ...a
+    }
+  );
+}), ot = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = g();
+  return /* @__PURE__ */ r(
+    R,
+    {
+      ref: o,
+      "data-slot": "alert-dialog-description",
+      [n]: "alert-dialog-description",
+      className: d(e.description, t),
+      ...a
+    }
+  );
+}), et = i.forwardRef(function({
+  variant: t = "primary",
+  size: a = "base",
+  destructive: o = !1,
+  className: e,
+  ...m
+}, s) {
+  return /* @__PURE__ */ r(A, { asChild: !0, children: /* @__PURE__ */ r(
+    u,
+    {
+      ref: s,
+      "data-slot": "alert-dialog-action",
+      [n]: "alert-dialog-action",
+      variant: t,
+      size: a,
+      destructive: o,
+      className: e,
+      ...m
+    }
+  ) });
+}), rt = i.forwardRef(function({
+  variant: t = "secondary",
+  size: a = "base",
+  destructive: o = !1,
+  className: e,
+  ...m
+}, s) {
+  return /* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */ r(
+    u,
+    {
+      ref: s,
+      "data-slot": "alert-dialog-cancel",
+      [n]: "alert-dialog-cancel",
+      variant: t,
+      size: a,
+      destructive: o,
+      className: e,
+      ...m
+    }
+  ) });
+});
+export {
+  Q as AlertDialog,
+  et as AlertDialogAction,
+  rt as AlertDialogCancel,
+  Z as AlertDialogContent,
+  ot as AlertDialogDescription,
+  tt as AlertDialogFooter,
+  $ as AlertDialogHeader,
+  L as AlertDialogOverlay,
+  Y as AlertDialogPortal,
+  at as AlertDialogTitle,
+  U as AlertDialogTrigger
+};
+//# sourceMappingURL=alert-dialog.js.map

package/dist/components/alert-dialog/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Button,\n  type ButtonProps,\n  type ButtonSize,\n  type ButtonVariant,\n} from \"../button/button\"\n\nconst useStyles = makeVoltStyles({\n  overlay: {\n    position: \"fixed\",\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 50,\n    backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  content: {\n    backgroundColor: tokens.body,\n    position: \"fixed\",\n    top: \"50%\",\n    left: \"50%\",\n    transform: \"translate(-50%, -50%)\",\n    zIndex: 50,\n    display: \"grid\",\n    width: \"100%\",\n    maxWidth: \"calc(100% - 2rem)\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    ...shorthands.padding(tokens.spacingGroup2),\n    // v1 shadow-lg\n    boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n    outlineStyle: \"none\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n        to: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n        to: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  sm: {\n    maxWidth: tokens.containerSm,\n  },\n  md: {\n    maxWidth: tokens.containerMd,\n  },\n  lg: {\n    maxWidth: tokens.containerLg,\n  },\n  xl: {\n    \"@media (min-width: 640px)\": {\n      maxWidth: tokens.containerXl,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    textAlign: \"left\",\n  },\n  footer: {\n    display: \"flex\",\n    ...shorthands.gap(tokens.spacingElement2),\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    fontSize: tokens.textXl,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA12,\n  },\n  description: {\n    fontSize: tokens.textSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AlertDialogProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Root\n>\n\nexport type AlertDialogTriggerProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Trigger\n>\n\nexport type AlertDialogPortalProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Portal\n>\n\nexport type AlertDialogOverlayProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Overlay\n>\n\nexport type AlertDialogSize = \"xl\" | \"lg\" | \"md\" | \"sm\"\n\nexport type AlertDialogContentProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Content\n> & {\n  size?: AlertDialogSize\n}\n\nexport type AlertDialogHeaderProps = React.ComponentProps<\"div\">\nexport type AlertDialogFooterProps = React.ComponentProps<\"div\">\n\nexport type AlertDialogTitleProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Title\n>\n\nexport type AlertDialogDescriptionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Description\n>\n\nexport type AlertDialogActionProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport type AlertDialogCancelProps = Omit<\n  ButtonProps,\n  \"variant\" | \"size\" | \"destructive\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  destructive?: boolean\n}\n\nexport const AlertDialog = React.forwardRef<HTMLElement, AlertDialogProps>(\n  function AlertDialog(props, _ref) {\n    return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n  }\n)\n\nexport const AlertDialogTrigger = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,\n  AlertDialogTriggerProps\n>(function AlertDialogTrigger({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Trigger\n      ref={ref}\n      data-slot=\"alert-dialog-trigger\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogPortal = React.forwardRef<\n  HTMLElement,\n  AlertDialogPortalProps\n>(function AlertDialogPortal(props, _ref) {\n  return (\n    <AlertDialogPrimitive.Portal\n      data-slot=\"alert-dialog-portal\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-portal\" }}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  AlertDialogOverlayProps\n>(function AlertDialogOverlay({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"alert-dialog-overlay\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-overlay\" }}\n      className={mergeClasses(styles.overlay, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(function AlertDialogContent(\n  { className, size = \"xl\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-content\" }}\n        className={mergeClasses(styles.content, styles[size], className)}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.Content>\n    </>\n  )\n})\n\nexport const AlertDialogHeader = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogHeaderProps\n>(function AlertDialogHeader({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-header\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-header\" }}\n      className={mergeClasses(styles.header, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogFooter = React.forwardRef<\n  HTMLDivElement,\n  AlertDialogFooterProps\n>(function AlertDialogFooter({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"alert-dialog-footer\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-footer\" }}\n      className={mergeClasses(styles.footer, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  AlertDialogTitleProps\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  AlertDialogDescriptionProps\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AlertDialogPrimitive.Description\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      {...{ [SLOT_ATTR]: \"alert-dialog-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n\nexport const AlertDialogAction = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogActionProps\n>(function AlertDialogAction(\n  {\n    variant = \"primary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Action asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-action\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-action\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Action>\n  )\n})\n\nexport const AlertDialogCancel = React.forwardRef<\n  HTMLButtonElement,\n  AlertDialogCancelProps\n>(function AlertDialogCancel(\n  {\n    variant = \"secondary\",\n    size = \"base\",\n    destructive = false,\n    className,\n    ...props\n  },\n  ref\n) {\n  return (\n    <AlertDialogPrimitive.Cancel asChild>\n      <Button\n        ref={ref}\n        data-slot=\"alert-dialog-cancel\"\n        {...{ [SLOT_ATTR]: \"alert-dialog-cancel\" }}\n        variant={variant}\n        size={size}\n        destructive={destructive}\n        className={className}\n        {...props}\n      />\n    </AlertDialogPrimitive.Cancel>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.body","shorthands","tokens.spacingGroup2","tokens.radiusXl","tokens.grayA1","tokens.containerSm","tokens.containerMd","tokens.containerLg","tokens.containerXl","tokens.spacingElement2","tokens.textXl","tokens.fontWeightSemibold","tokens.grayA12","tokens.textSm","tokens.grayA11","AlertDialog","React","props","_ref","AlertDialogPrimitive.Root","AlertDialogTrigger","className","ref","jsx","AlertDialogPrimitive.Trigger","SLOT_ATTR","AlertDialogPortal","AlertDialogPrimitive.Portal","AlertDialogOverlay","styles","AlertDialogPrimitive.Overlay","mergeClasses","AlertDialogContent","size","children","jsxs","Fragment","AlertDialogPrimitive.Content","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogPrimitive.Title","AlertDialogDescription","AlertDialogPrimitive.Description","AlertDialogAction","variant","destructive","AlertDialogPrimitive.Action","Button","AlertDialogCancel","AlertDialogPrimitive.Cancel"],"mappings":"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"}

package/dist/components/avatar/avatar-group.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type AvatarSize } from "./avatar";
+export type AvatarGroupProps = Omit<React.ComponentProps<"div">, "color"> & {
+    max?: number;
+    size?: AvatarSize;
+};
+export declare const AvatarGroup: React.ForwardRefExoticComponent<Omit<AvatarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/avatar/avatar-group.js

@@ -0,0 +1,143 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import * as a from "react";
+import { shorthands as N } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as m } from "../../renderer/contract.js";
+import { makeVoltStyles as S } from "../../styles/make-styles.js";
+import { grayA11 as I, textSm as E, spacingElement2 as g, spacingElement1 as L, radiusMd as P, body as k } from "../../tokens/index.js";
+import { AvatarGroupContext as C, Avatar as z } from "./avatar.js";
+import { mergeClasses as w } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const D = S({
+  root: {
+    display: "flex",
+    alignItems: "center"
+  },
+  item: {
+    position: "relative",
+    marginLeft: "-0.5rem",
+    transitionProperty: "transform",
+    transitionDuration: "200ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    ":first-child": { marginLeft: "0" }
+  },
+  itemBeforeActive: {
+    transform: "translateX(-0.75rem)"
+  },
+  itemAfterActive: {
+    transform: "translateX(0.75rem)"
+  },
+  itemActive: {
+    zIndex: 10
+  },
+  overflow: {
+    position: "relative",
+    zIndex: 0,
+    ...N.border("0", "solid", "transparent"),
+    cursor: "pointer"
+  },
+  overflowPanel: {
+    position: "absolute",
+    top: "100%",
+    left: "0",
+    zIndex: 20,
+    width: "max-content",
+    maxWidth: "20rem",
+    padding: g,
+    backgroundColor: k,
+    borderRadius: P,
+    boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
+  },
+  overflowList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: L
+  },
+  overflowItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: g
+  },
+  overflowName: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: E,
+    color: I
+  }
+}), X = a.forwardRef(
+  function({ max: f, size: v, className: h, children: A, ...b }, y) {
+    const o = D(), s = a.Children.toArray(A).filter(a.isValidElement), d = typeof f == "number" ? s.slice(0, f) : s, p = s.length - d.length, [l, n] = a.useState(null), [x, u] = a.useState(!1);
+    return /* @__PURE__ */ t(C.Provider, { value: { size: v }, children: /* @__PURE__ */ c(
+      "div",
+      {
+        ref: y,
+        "data-slot": "avatar-group",
+        [m]: "avatar-group",
+        className: w(o.root, h),
+        ...b,
+        children: [
+          d.map((e, r) => /* @__PURE__ */ t(
+            "div",
+            {
+              "data-slot": "avatar-group-item",
+              [m]: "avatar-group-item",
+              onPointerEnter: () => n(r),
+              onPointerLeave: () => n((i) => i === r ? null : i),
+              onFocus: () => n(r),
+              onBlur: () => n((i) => i === r ? null : i),
+              className: w(
+                o.item,
+                l !== null && r < l && o.itemBeforeActive,
+                l !== null && r > l && o.itemAfterActive,
+                l === r && o.itemActive
+              ),
+              children: e
+            },
+            r
+          )),
+          p > 0 && /* @__PURE__ */ c(
+            "div",
+            {
+              "data-slot": "avatar-group-overflow-wrapper",
+              [m]: "avatar-group-overflow-wrapper",
+              className: o.item,
+              children: [
+                /* @__PURE__ */ t(
+                  z,
+                  {
+                    size: v,
+                    color: "gray",
+                    initials: `+${p}`,
+                    "aria-label": `${p} more`,
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: () => u((e) => !e),
+                    onKeyDown: (e) => {
+                      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), u((r) => !r));
+                    },
+                    className: o.overflow
+                  }
+                ),
+                x && /* @__PURE__ */ t(
+                  "div",
+                  {
+                    "data-slot": "avatar-group-overflow",
+                    [m]: "avatar-group-overflow",
+                    className: o.overflowPanel,
+                    children: /* @__PURE__ */ t("ul", { className: o.overflowList, children: s.map((e, r) => /* @__PURE__ */ c("li", { className: o.overflowItem, children: [
+                      e,
+                      a.isValidElement(e) && e.props.alt && /* @__PURE__ */ t("span", { className: o.overflowName, children: e.props.alt })
+                    ] }, r)) })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+export {
+  X as AvatarGroup
+};
+//# sourceMappingURL=avatar-group.js.map

package/dist/components/avatar/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","sources":["../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Avatar,\n  AvatarGroupContext,\n  type AvatarColor,\n  type AvatarSize,\n} from \"./avatar\"\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  item: {\n    position: \"relative\",\n    marginLeft: \"-0.5rem\",\n    transitionProperty: \"transform\",\n    transitionDuration: \"200ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":first-child\": { marginLeft: \"0\" },\n  },\n  itemBeforeActive: {\n    transform: \"translateX(-0.75rem)\",\n  },\n  itemAfterActive: {\n    transform: \"translateX(0.75rem)\",\n  },\n  itemActive: {\n    zIndex: 10,\n  },\n  overflow: {\n    position: \"relative\",\n    zIndex: 0,\n    ...shorthands.border(\"0\", \"solid\", \"transparent\"),\n    cursor: \"pointer\",\n  },\n  overflowPanel: {\n    position: \"absolute\",\n    top: \"100%\",\n    left: \"0\",\n    zIndex: 20,\n    width: \"max-content\",\n    maxWidth: \"20rem\",\n    padding: tokens.spacingElement2,\n    backgroundColor: tokens.body,\n    borderRadius: tokens.radiusMd,\n    boxShadow: \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n  },\n  overflowList: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: tokens.spacingElement1,\n  },\n  overflowItem: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingElement2,\n  },\n  overflowName: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    fontSize: tokens.textSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AvatarGroupProps = Omit<React.ComponentProps<\"div\">, \"color\"> & {\n  max?: number\n  size?: AvatarSize\n}\n\nexport const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup({ max, size, className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n    const visible = typeof max === \"number\" ? items.slice(0, max) : items\n    const overflow = items.length - visible.length\n    const [active, setActive] = React.useState<number | null>(null)\n    const [open, setOpen] = React.useState(false)\n\n    return (\n      <AvatarGroupContext.Provider value={{ size }}>\n        <div\n          ref={ref}\n          data-slot=\"avatar-group\"\n          {...{ [SLOT_ATTR]: \"avatar-group\" }}\n          className={mergeClasses(styles.root, className)}\n          {...props}\n        >\n          {visible.map((child, index) => (\n            <div\n              key={index}\n              data-slot=\"avatar-group-item\"\n              {...{ [SLOT_ATTR]: \"avatar-group-item\" }}\n              onPointerEnter={() => setActive(index)}\n              onPointerLeave={() =>\n                setActive((current) => (current === index ? null : current))\n              }\n              onFocus={() => setActive(index)}\n              onBlur={() =>\n                setActive((current) => (current === index ? null : current))\n              }\n              className={mergeClasses(\n                styles.item,\n                active !== null && index < active && styles.itemBeforeActive,\n                active !== null && index > active && styles.itemAfterActive,\n                active === index && styles.itemActive\n              )}\n            >\n              {child}\n            </div>\n          ))}\n          {overflow > 0 && (\n            <div\n              data-slot=\"avatar-group-overflow-wrapper\"\n              {...{ [SLOT_ATTR]: \"avatar-group-overflow-wrapper\" }}\n              className={styles.item}\n            >\n              <Avatar\n                size={size}\n                color={\"gray\" as AvatarColor}\n                initials={`+${overflow}`}\n                aria-label={`${overflow} more`}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => setOpen((current) => !current)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault()\n                    setOpen((current) => !current)\n                  }\n                }}\n                className={styles.overflow}\n              />\n              {open && (\n                <div\n                  data-slot=\"avatar-group-overflow\"\n                  {...{ [SLOT_ATTR]: \"avatar-group-overflow\" }}\n                  className={styles.overflowPanel}\n                >\n                  <ul className={styles.overflowList}>\n                    {items.map((item, index) => (\n                      <li key={index} className={styles.overflowItem}>\n                        {item}\n                        {React.isValidElement<{ alt?: string }>(item) &&\n                          item.props.alt && (\n                            <span className={styles.overflowName}>\n                              {item.props.alt}\n                            </span>\n                          )}\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </AvatarGroupContext.Provider>\n    )\n  }\n)\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.body","tokens.radiusMd","tokens.spacingElement1","tokens.textSm","tokens.grayA11","AvatarGroup","React","max","size","className","children","props","ref","styles","items","visible","overflow","active","setActive","open","setOpen","AvatarGroupContext","jsxs","SLOT_ATTR","mergeClasses","child","index","jsx","current","Avatar","event","item"],"mappings":"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"}

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+export type AvatarColor = "gray" | "blue" | "sky" | "cyan" | "teal" | "mint" | "green" | "lime" | "yellow" | "orange" | "bronze" | "red" | "pink" | "purple" | "indigo";
+export type AvatarSize = "sm" | "base" | "lg";
+declare const AvatarGroupContext: React.Context<{
+    size?: AvatarSize;
+} | null>;
+export type AvatarProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, "className" | "color" | "children"> & {
+    className?: string;
+    src?: string;
+    alt?: string;
+    initials?: string;
+    color?: AvatarColor;
+    size?: AvatarSize;
+};
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { AvatarGroupContext };

package/dist/components/avatar/avatar.js

@@ -0,0 +1,173 @@
+import { jsxs as h, jsx as g } from "react/jsx-runtime";
+import * as i from "react";
+import { Root as p, Image as y, Fallback as A } from "../../node_modules/@radix-ui/react-avatar/dist/index.js";
+import { SLOT_ATTR as n } from "../../renderer/contract.js";
+import { makeVoltStyles as x } from "../../styles/make-styles.js";
+import { ensurePaletteTokens as w } from "../../tokens/install.js";
+import { indigoA12 as S, indigo3 as C, purpleA12 as z, purple3 as R, pinkA12 as T, pink3 as j, redA12 as O, red3 as F, bronzeA12 as I, bronze3 as N, orangeA12 as L, orange3 as V, yellowA12 as W, yellow3 as X, limeA12 as _, lime3 as B, greenA12 as G, green3 as M, mintA12 as P, mint3 as U, tealA12 as Y, teal3 as q, cyanA12 as D, cyan3 as E, skyA12 as H, sky3 as J, blueA12 as K, blue3 as Q, grayA12 as Z, gray3 as $, textBase as aa, textSm as ra, textXs as ea, fontWeightMedium as ta } from "../../tokens/index.js";
+import { mergeClasses as oa } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+typeof document < "u" && w();
+const s = [
+  "blue",
+  "sky",
+  "cyan",
+  "teal",
+  "mint",
+  "green",
+  "lime",
+  "orange",
+  "bronze",
+  "pink",
+  "purple",
+  "indigo"
+], na = (t) => {
+  let a = 0;
+  for (let r = 0; r < t.length; r++)
+    a = a * 31 + t.charCodeAt(r) >>> 0;
+  return s[a % s.length];
+}, ia = {
+  gray: {
+    "--avatar-background": $,
+    "--avatar-foreground": Z
+  },
+  blue: {
+    "--avatar-background": Q,
+    "--avatar-foreground": K
+  },
+  sky: {
+    "--avatar-background": J,
+    "--avatar-foreground": H
+  },
+  cyan: {
+    "--avatar-background": E,
+    "--avatar-foreground": D
+  },
+  teal: {
+    "--avatar-background": q,
+    "--avatar-foreground": Y
+  },
+  mint: {
+    "--avatar-background": U,
+    "--avatar-foreground": P
+  },
+  green: {
+    "--avatar-background": M,
+    "--avatar-foreground": G
+  },
+  lime: {
+    "--avatar-background": B,
+    "--avatar-foreground": _
+  },
+  yellow: {
+    "--avatar-background": X,
+    "--avatar-foreground": W
+  },
+  orange: {
+    "--avatar-background": V,
+    "--avatar-foreground": L
+  },
+  bronze: {
+    "--avatar-background": N,
+    "--avatar-foreground": I
+  },
+  red: {
+    "--avatar-background": F,
+    "--avatar-foreground": O
+  },
+  pink: {
+    "--avatar-background": j,
+    "--avatar-foreground": T
+  },
+  purple: {
+    "--avatar-background": R,
+    "--avatar-foreground": z
+  },
+  indigo: {
+    "--avatar-background": C,
+    "--avatar-foreground": S
+  }
+}, la = i.createContext(
+  null
+), da = x({
+  root: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    overflowX: "hidden",
+    overflowY: "hidden",
+    borderRadius: "9999px",
+    backgroundColor: "var(--avatar-background)",
+    color: "var(--avatar-foreground)",
+    fontWeight: ta,
+    textTransform: "uppercase"
+  },
+  sm: {
+    width: "1.5rem",
+    height: "1.5rem",
+    fontSize: ea
+  },
+  base: {
+    width: "2rem",
+    height: "2rem",
+    fontSize: ra
+  },
+  lg: {
+    width: "2.5rem",
+    height: "2.5rem",
+    fontSize: aa
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  fallback: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%"
+  }
+}), ba = i.forwardRef(function({ className: a, src: r, alt: l, initials: d, color: c, size: u, style: v, ...f }, m) {
+  const e = da(), o = i.useContext(la), b = u ?? (o == null ? void 0 : o.size) ?? "base", k = c ?? na(l ?? d ?? "");
+  return /* @__PURE__ */ h(
+    p,
+    {
+      ref: m,
+      "data-slot": "avatar",
+      [n]: "avatar",
+      className: oa(e.root, e[b], a),
+      style: { ...ia[k], ...v },
+      ...f,
+      children: [
+        /* @__PURE__ */ g(
+          y,
+          {
+            "data-slot": "avatar-image",
+            [n]: "avatar-image",
+            src: r,
+            alt: l,
+            className: e.image
+          }
+        ),
+        /* @__PURE__ */ g(
+          A,
+          {
+            "data-slot": "avatar-fallback",
+            [n]: "avatar-fallback",
+            className: e.fallback,
+            "aria-hidden": "true",
+            children: d
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  ba as Avatar,
+  la as AvatarGroupContext
+};
+//# sourceMappingURL=avatar.js.map