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

package/dist/components/toast/toast.js

@@ -0,0 +1,240 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as p from "react";
+import { Toaster as h } from "../../node_modules/sonner/dist/index.js";
+import { toast as C1 } from "../../node_modules/sonner/dist/index.js";
+import { shorthands as o } from "../../node_modules/@griffel/core/src/index.js";
+import { makeVoltStyles as x } from "../../styles/make-styles.js";
+import { semErrorUi as w, semWarningUi as b, semInfoUi as v, semSuccessUi as y, spacingElement2 as i, grayA6 as s, spacingGroup2 as a, spacingElement3 as S, errorA11 as k, errorA12 as B, error4 as M, warningA11 as A, warningA12 as W, warning3 as Z, infoA11 as I, infoA12 as L, info3 as R, successA11 as V, successA12 as E, success4 as T, fontWeightMedium as c, textSm as C, semGraySoftHover as z, grayA12 as l, semGraySoft as U, grayA8 as d, gray11 as j, gray12 as G, semAccentContrast as N, textXs as H, fontWeightSemibold as X, body as g, radiusMd as D, radiusXl as $ } from "../../tokens/index.js";
+import { Spinner as q } from "../spinner/spinner.js";
+const F = (t) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    ...t,
+    children: /* @__PURE__ */ e("path", { d: "M12.0003 16.75C12.2129 16.75 12.391 16.6781 12.5345 16.5343C12.6782 16.3906 12.75 16.2125 12.75 16V11.75C12.75 11.5375 12.6781 11.3593 12.5343 11.2155C12.3904 11.0718 12.2122 11 11.9997 11C11.7871 11 11.609 11.0718 11.4655 11.2155C11.3218 11.3593 11.25 11.5375 11.25 11.75V16C11.25 16.2125 11.3219 16.3906 11.4658 16.5343C11.6096 16.6781 11.7878 16.75 12.0003 16.75ZM12 9.2885C12.2288 9.2885 12.4207 9.21108 12.5755 9.05625C12.7303 8.90142 12.8077 8.70958 12.8077 8.48075C12.8077 8.25192 12.7303 8.06008 12.5755 7.90525C12.4207 7.75058 12.2288 7.67325 12 7.67325C11.7712 7.67325 11.5793 7.75058 11.4245 7.90525C11.2697 8.06008 11.1923 8.25192 11.1923 8.48075C11.1923 8.70958 11.2697 8.90142 11.4245 9.05625C11.5793 9.21108 11.7712 9.2885 12 9.2885ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z" })
+  }
+), J = (t) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    ...t,
+    children: /* @__PURE__ */ e("path", { d: "M3.4255 20.5C3.256 20.5 3.10375 20.4586 2.96875 20.3757C2.83375 20.2929 2.72883 20.1837 2.654 20.048C2.576 19.9133 2.53308 19.7675 2.52525 19.6105C2.51742 19.4535 2.55975 19.298 2.65225 19.144L11.213 4.356C11.3057 4.202 11.4215 4.08817 11.5605 4.0145C11.6997 3.94083 11.8462 3.904 12 3.904C12.1538 3.904 12.3003 3.94083 12.4395 4.0145C12.5785 4.08817 12.6943 4.202 12.787 4.356L21.3477 19.144C21.4402 19.298 21.4826 19.4535 21.4747 19.6105C21.4669 19.7675 21.424 19.9133 21.346 20.048C21.2712 20.1837 21.1663 20.2929 21.0313 20.3757C20.8963 20.4586 20.744 20.5 20.5745 20.5H3.4255ZM12 17.8077C12.2288 17.8077 12.4207 17.7303 12.5755 17.5755C12.7303 17.4207 12.8078 17.2288 12.8078 17C12.8078 16.7712 12.7303 16.5793 12.5755 16.4245C12.4207 16.2697 12.2288 16.1923 12 16.1923C11.7712 16.1923 11.5793 16.2697 11.4245 16.4245C11.2697 16.5793 11.1923 16.7712 11.1923 17C11.1923 17.2288 11.2697 17.4207 11.4245 17.5755C11.5793 17.7303 11.7712 17.8077 12 17.8077ZM12.0003 15.1923C12.2129 15.1923 12.391 15.1204 12.5345 14.9768C12.6782 14.8329 12.75 14.6548 12.75 14.4423V10.9423C12.75 10.7298 12.6781 10.5517 12.5342 10.408C12.3904 10.2642 12.2122 10.1923 11.9997 10.1923C11.7871 10.1923 11.609 10.2642 11.4655 10.408C11.3218 10.5517 11.25 10.7298 11.25 10.9423V14.4423C11.25 14.6548 11.3219 14.8329 11.4658 14.9768C11.6096 15.1204 11.7878 15.1923 12.0003 15.1923Z" })
+  }
+), K = (t) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    ...t,
+    children: /* @__PURE__ */ e("path", { d: "M10.5808 14.1463L8.25775 11.823C8.11925 11.6847 7.94517 11.6138 7.7355 11.6105C7.526 11.6073 7.34875 11.6782 7.20375 11.823C7.05892 11.968 6.9865 12.1437 6.9865 12.35C6.9865 12.5563 7.05892 12.732 7.20375 12.877L9.948 15.6212C10.1288 15.8019 10.3398 15.8922 10.5808 15.8922C10.8218 15.8922 11.0327 15.8019 11.2135 15.6212L16.777 10.0577C16.9153 9.91925 16.9862 9.74517 16.9895 9.5355C16.9927 9.326 16.9218 9.14875 16.777 9.00375C16.632 8.85892 16.4563 8.7865 16.25 8.7865C16.0437 8.7865 15.868 8.85892 15.723 9.00375L10.5808 14.1463ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z" })
+  }
+), P = (t) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    ...t,
+    children: /* @__PURE__ */ e("path", { d: "M12 16.7307C12.2288 16.7307 12.4207 16.6533 12.5755 16.4985C12.7303 16.3437 12.8077 16.1518 12.8077 15.923C12.8077 15.6942 12.7303 15.5023 12.5755 15.3475C12.4207 15.1928 12.2288 15.1155 12 15.1155C11.7712 15.1155 11.5793 15.1928 11.4245 15.3475C11.2697 15.5023 11.1923 15.6942 11.1923 15.923C11.1923 16.1518 11.2697 16.3437 11.4245 16.4985C11.5793 16.6533 11.7712 16.7307 12 16.7307ZM12.0003 13.077C12.2129 13.077 12.391 13.0051 12.5345 12.8613C12.6782 12.7176 12.75 12.5395 12.75 12.327V7.827C12.75 7.6145 12.6781 7.43633 12.5343 7.2925C12.3904 7.14883 12.2122 7.077 11.9997 7.077C11.7871 7.077 11.609 7.14883 11.4655 7.2925C11.3218 7.43633 11.25 7.6145 11.25 7.827V12.327C11.25 12.5395 11.3219 12.7176 11.4658 12.8613C11.6096 13.0051 11.7878 13.077 12.0003 13.077ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z" })
+  }
+), Q = x({
+  toast: {
+    pointerEvents: "auto",
+    position: "relative",
+    width: "100%",
+    display: "flex",
+    alignItems: "baseline",
+    ...o.gap(i),
+    ...o.padding(a, S),
+    ...o.borderRadius($),
+    ...o.borderStyle("solid"),
+    ...o.borderWidth(0),
+    ...o.borderColor(s),
+    backgroundColor: g,
+    color: l,
+    boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineColor: d
+    }
+  },
+  default: {
+    backgroundColor: g,
+    ...o.borderColor(s),
+    ...o.gap(i),
+    color: l
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    ...o.gap("0.125rem")
+  },
+  title: {
+    fontSize: C,
+    fontWeight: X,
+    ...o.margin(0)
+  },
+  description: {
+    fontSize: C,
+    ...o.margin(0)
+  },
+  icon: {
+    alignSelf: "flex-start",
+    display: "flex",
+    width: "1.25rem",
+    height: "1.25rem",
+    position: "relative",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    flexShrink: 0,
+    marginLeft: "var(--toast-icon-margin-start)",
+    marginRight: "var(--toast-icon-margin-end)"
+  },
+  actionButton: {
+    ...o.borderRadius("9999px"),
+    flexShrink: 0,
+    alignSelf: "flex-end",
+    cursor: "pointer",
+    marginLeft: "auto",
+    marginTop: a,
+    fontSize: H,
+    fontWeight: c,
+    ...o.padding("0.3125rem", i),
+    color: N,
+    backgroundColor: G,
+    ":hover": {
+      backgroundColor: j
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: d
+    }
+  },
+  cancelButton: {
+    backgroundColor: U,
+    color: l,
+    ":hover": {
+      backgroundColor: z
+    },
+    fontSize: C,
+    fontWeight: c,
+    ...o.padding("0.3125rem", i),
+    ...o.borderRadius(D)
+  },
+  closeButton: {
+    position: "absolute",
+    right: "0.625rem",
+    top: "0.625rem",
+    ...o.borderRadius("9999px"),
+    color: "currentColor",
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    ...o.border("0"),
+    ...o.padding(0),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: "inherit"
+    },
+    "& > svg": {
+      width: "1rem",
+      height: "1rem",
+      strokeWidth: "2px"
+    }
+  },
+  success: {
+    ...o.borderColor(y),
+    backgroundColor: T,
+    color: E,
+    "& [data-icon]": {
+      color: V
+    }
+  },
+  info: {
+    ...o.borderColor(v),
+    backgroundColor: R,
+    color: L,
+    "& [data-icon]": {
+      color: I
+    }
+  },
+  warning: {
+    ...o.borderColor(b),
+    backgroundColor: Z,
+    color: W,
+    "& [data-icon]": {
+      color: A
+    }
+  },
+  error: {
+    ...o.borderColor(w),
+    backgroundColor: M,
+    color: B,
+    "& [data-icon]": {
+      color: k
+    }
+  },
+  loading: {},
+  spinner: {
+    width: "1.125rem",
+    height: "1.125rem"
+  }
+}), t1 = p.forwardRef(
+  function({ theme: u, toastOptions: n, ...f }, m) {
+    const r = Q();
+    return /* @__PURE__ */ e(
+      h,
+      {
+        ref: m,
+        closeButton: !0,
+        theme: u,
+        toastOptions: {
+          ...n,
+          unstyled: !0,
+          classNames: {
+            toast: r.toast,
+            default: r.default,
+            content: r.content,
+            title: r.title,
+            description: r.description,
+            icon: r.icon,
+            actionButton: r.actionButton,
+            cancelButton: r.cancelButton,
+            closeButton: r.closeButton,
+            success: r.success,
+            info: r.info,
+            warning: r.warning,
+            error: r.error,
+            loading: r.loading,
+            ...n == null ? void 0 : n.classNames
+          }
+        },
+        icons: {
+          success: /* @__PURE__ */ e(K, {}),
+          info: /* @__PURE__ */ e(F, {}),
+          warning: /* @__PURE__ */ e(J, {}),
+          error: /* @__PURE__ */ e(P, {}),
+          loading: /* @__PURE__ */ e(q, { className: r.spinner })
+        },
+        ...f
+      }
+    );
+  }
+);
+export {
+  t1 as Toaster,
+  C1 as toast
+};
+//# sourceMappingURL=toast.js.map

package/dist/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as Sonner from \"sonner\"\nimport { shorthands } from \"@griffel/core\"\n\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Spinner } from \"../spinner/spinner\"\n\nconst InfoIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M12.0003 16.75C12.2129 16.75 12.391 16.6781 12.5345 16.5343C12.6782 16.3906 12.75 16.2125 12.75 16V11.75C12.75 11.5375 12.6781 11.3593 12.5343 11.2155C12.3904 11.0718 12.2122 11 11.9997 11C11.7871 11 11.609 11.0718 11.4655 11.2155C11.3218 11.3593 11.25 11.5375 11.25 11.75V16C11.25 16.2125 11.3219 16.3906 11.4658 16.5343C11.6096 16.6781 11.7878 16.75 12.0003 16.75ZM12 9.2885C12.2288 9.2885 12.4207 9.21108 12.5755 9.05625C12.7303 8.90142 12.8077 8.70958 12.8077 8.48075C12.8077 8.25192 12.7303 8.06008 12.5755 7.90525C12.4207 7.75058 12.2288 7.67325 12 7.67325C11.7712 7.67325 11.5793 7.75058 11.4245 7.90525C11.2697 8.06008 11.1923 8.25192 11.1923 8.48075C11.1923 8.70958 11.2697 8.90142 11.4245 9.05625C11.5793 9.21108 11.7712 9.2885 12 9.2885ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n  </svg>\n)\n\nconst WarningIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M3.4255 20.5C3.256 20.5 3.10375 20.4586 2.96875 20.3757C2.83375 20.2929 2.72883 20.1837 2.654 20.048C2.576 19.9133 2.53308 19.7675 2.52525 19.6105C2.51742 19.4535 2.55975 19.298 2.65225 19.144L11.213 4.356C11.3057 4.202 11.4215 4.08817 11.5605 4.0145C11.6997 3.94083 11.8462 3.904 12 3.904C12.1538 3.904 12.3003 3.94083 12.4395 4.0145C12.5785 4.08817 12.6943 4.202 12.787 4.356L21.3477 19.144C21.4402 19.298 21.4826 19.4535 21.4747 19.6105C21.4669 19.7675 21.424 19.9133 21.346 20.048C21.2712 20.1837 21.1663 20.2929 21.0313 20.3757C20.8963 20.4586 20.744 20.5 20.5745 20.5H3.4255ZM12 17.8077C12.2288 17.8077 12.4207 17.7303 12.5755 17.5755C12.7303 17.4207 12.8078 17.2288 12.8078 17C12.8078 16.7712 12.7303 16.5793 12.5755 16.4245C12.4207 16.2697 12.2288 16.1923 12 16.1923C11.7712 16.1923 11.5793 16.2697 11.4245 16.4245C11.2697 16.5793 11.1923 16.7712 11.1923 17C11.1923 17.2288 11.2697 17.4207 11.4245 17.5755C11.5793 17.7303 11.7712 17.8077 12 17.8077ZM12.0003 15.1923C12.2129 15.1923 12.391 15.1204 12.5345 14.9768C12.6782 14.8329 12.75 14.6548 12.75 14.4423V10.9423C12.75 10.7298 12.6781 10.5517 12.5342 10.408C12.3904 10.2642 12.2122 10.1923 11.9997 10.1923C11.7871 10.1923 11.609 10.2642 11.4655 10.408C11.3218 10.5517 11.25 10.7298 11.25 10.9423V14.4423C11.25 14.6548 11.3219 14.8329 11.4658 14.9768C11.6096 15.1204 11.7878 15.1923 12.0003 15.1923Z\" />\n  </svg>\n)\n\nconst CheckIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M10.5808 14.1463L8.25775 11.823C8.11925 11.6847 7.94517 11.6138 7.7355 11.6105C7.526 11.6073 7.34875 11.6782 7.20375 11.823C7.05892 11.968 6.9865 12.1437 6.9865 12.35C6.9865 12.5563 7.05892 12.732 7.20375 12.877L9.948 15.6212C10.1288 15.8019 10.3398 15.8922 10.5808 15.8922C10.8218 15.8922 11.0327 15.8019 11.2135 15.6212L16.777 10.0577C16.9153 9.91925 16.9862 9.74517 16.9895 9.5355C16.9927 9.326 16.9218 9.14875 16.777 9.00375C16.632 8.85892 16.4563 8.7865 16.25 8.7865C16.0437 8.7865 15.868 8.85892 15.723 9.00375L10.5808 14.1463ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n  </svg>\n)\n\nconst ErrorIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M12 16.7307C12.2288 16.7307 12.4207 16.6533 12.5755 16.4985C12.7303 16.3437 12.8077 16.1518 12.8077 15.923C12.8077 15.6942 12.7303 15.5023 12.5755 15.3475C12.4207 15.1928 12.2288 15.1155 12 15.1155C11.7712 15.1155 11.5793 15.1928 11.4245 15.3475C11.2697 15.5023 11.1923 15.6942 11.1923 15.923C11.1923 16.1518 11.2697 16.3437 11.4245 16.4985C11.5793 16.6533 11.7712 16.7307 12 16.7307ZM12.0003 13.077C12.2129 13.077 12.391 13.0051 12.5345 12.8613C12.6782 12.7176 12.75 12.5395 12.75 12.327V7.827C12.75 7.6145 12.6781 7.43633 12.5343 7.2925C12.3904 7.14883 12.2122 7.077 11.9997 7.077C11.7871 7.077 11.609 7.14883 11.4655 7.2925C11.3218 7.43633 11.25 7.6145 11.25 7.827V12.327C11.25 12.5395 11.3219 12.7176 11.4658 12.8613C11.6096 13.0051 11.7878 13.077 12.0003 13.077ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9982 2.5C13.3122 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9982C21.5 13.3122 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  toast: {\n    pointerEvents: \"auto\",\n    position: \"relative\",\n    width: \"100%\",\n    display: \"flex\",\n    alignItems: \"baseline\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.padding(tokens.spacingGroup2, tokens.spacingElement3),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.borderStyle(\"solid\"),\n    ...shorthands.borderWidth(0),\n    ...shorthands.borderColor(tokens.grayA6),\n    backgroundColor: tokens.body,\n    color: tokens.grayA12,\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.grayA8,\n    },\n  },\n  default: {\n    backgroundColor: tokens.body,\n    ...shorthands.borderColor(tokens.grayA6),\n    ...shorthands.gap(tokens.spacingElement2),\n    color: tokens.grayA12,\n  },\n  content: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(\"0.125rem\"),\n  },\n  title: {\n    fontSize: tokens.textSm,\n    fontWeight: tokens.fontWeightSemibold,\n    ...shorthands.margin(0),\n  },\n  description: {\n    fontSize: tokens.textSm,\n    ...shorthands.margin(0),\n  },\n  icon: {\n    alignSelf: \"flex-start\",\n    display: \"flex\",\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    position: \"relative\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    flexShrink: 0,\n    marginLeft: \"var(--toast-icon-margin-start)\",\n    marginRight: \"var(--toast-icon-margin-end)\",\n  },\n  actionButton: {\n    ...shorthands.borderRadius(\"9999px\"),\n    flexShrink: 0,\n    alignSelf: \"flex-end\",\n    cursor: \"pointer\",\n    marginLeft: \"auto\",\n    marginTop: tokens.spacingGroup2,\n    fontSize: tokens.textXs,\n    fontWeight: tokens.fontWeightMedium,\n    ...shorthands.padding(\"0.3125rem\", tokens.spacingElement2),\n    color: tokens.semAccentContrast,\n    backgroundColor: tokens.gray12,\n    \":hover\": {\n      backgroundColor: tokens.gray11,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.grayA8,\n    },\n  },\n  cancelButton: {\n    backgroundColor: tokens.semGraySoft,\n    color: tokens.grayA12,\n    \":hover\": {\n      backgroundColor: tokens.semGraySoftHover,\n    },\n    fontSize: tokens.textSm,\n    fontWeight: tokens.fontWeightMedium,\n    ...shorthands.padding(\"0.3125rem\", tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusMd),\n  },\n  closeButton: {\n    position: \"absolute\",\n    right: \"0.625rem\",\n    top: \"0.625rem\",\n    ...shorthands.borderRadius(\"9999px\"),\n    color: \"currentColor\",\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    ...shorthands.border(\"0\"),\n    ...shorthands.padding(0),\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: \"inherit\",\n    },\n    \"& > svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n      strokeWidth: \"2px\",\n    },\n  },\n  success: {\n    ...shorthands.borderColor(tokens.semSuccessUi),\n    backgroundColor: tokens.success4,\n    color: tokens.successA12,\n    \"& [data-icon]\": {\n      color: tokens.successA11,\n    },\n  },\n  info: {\n    ...shorthands.borderColor(tokens.semInfoUi),\n    backgroundColor: tokens.info3,\n    color: tokens.infoA12,\n    \"& [data-icon]\": {\n      color: tokens.infoA11,\n    },\n  },\n  warning: {\n    ...shorthands.borderColor(tokens.semWarningUi),\n    backgroundColor: tokens.warning3,\n    color: tokens.warningA12,\n    \"& [data-icon]\": {\n      color: tokens.warningA11,\n    },\n  },\n  error: {\n    ...shorthands.borderColor(tokens.semErrorUi),\n    backgroundColor: tokens.error4,\n    color: tokens.errorA12,\n    \"& [data-icon]\": {\n      color: tokens.errorA11,\n    },\n  },\n  loading: {},\n  spinner: {\n    width: \"1.125rem\",\n    height: \"1.125rem\",\n  },\n})\n\nexport type ToasterProps = Sonner.ToasterProps & {\n  theme?: \"light\" | \"dark\"\n}\n\nexport const Toaster = React.forwardRef<HTMLElement, ToasterProps>(\n  function Toaster({ theme, toastOptions, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <Sonner.Toaster\n        ref={ref}\n        closeButton={true}\n        theme={theme}\n        toastOptions={{\n          ...toastOptions,\n          unstyled: true,\n          classNames: {\n            toast: styles.toast,\n            default: styles.default,\n            content: styles.content,\n            title: styles.title,\n            description: styles.description,\n            icon: styles.icon,\n            actionButton: styles.actionButton,\n            cancelButton: styles.cancelButton,\n            closeButton: styles.closeButton,\n            success: styles.success,\n            info: styles.info,\n            warning: styles.warning,\n            error: styles.error,\n            loading: styles.loading,\n            ...toastOptions?.classNames,\n          },\n        }}\n        icons={{\n          success: <CheckIcon />,\n          info: <InfoIcon />,\n          warning: <WarningIcon />,\n          error: <ErrorIcon />,\n          loading: <Spinner className={styles.spinner} />,\n        }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type ToastOptions = Parameters<typeof Sonner.toast>[1]\n\nexport { toast } from \"sonner\"\n"],"names":["InfoIcon","props","jsx","WarningIcon","CheckIcon","ErrorIcon","useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.spacingGroup2","tokens.spacingElement3","tokens.radiusXl","tokens.grayA6","tokens.body","tokens.grayA12","tokens.grayA8","tokens.textSm","tokens.fontWeightSemibold","tokens.textXs","tokens.fontWeightMedium","tokens.semAccentContrast","tokens.gray12","tokens.gray11","tokens.semGraySoft","tokens.semGraySoftHover","tokens.radiusMd","tokens.semSuccessUi","tokens.success4","tokens.successA12","tokens.successA11","tokens.semInfoUi","tokens.info3","tokens.infoA12","tokens.infoA11","tokens.semWarningUi","tokens.warning3","tokens.warningA12","tokens.warningA11","tokens.semErrorUi","tokens.error4","tokens.errorA12","tokens.errorA11","Toaster","React","theme","toastOptions","ref","styles","Sonner.Toaster","Spinner"],"mappings":";;;;;;;;AAQA,MAAMA,IAAW,CAACC,MAChB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,m8CAAA,CAAm8C;AAAA,EAAA;AAC78C,GAGIC,IAAc,CAACF,MACnB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,i1CAAA,CAAi1C;AAAA,EAAA;AAC31C,GAGIE,IAAY,CAACH,MACjB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,4uCAAA,CAA4uC;AAAA,EAAA;AACtvC,GAGIG,IAAY,CAACJ,MACjB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,s9CAAA,CAAs9C;AAAA,EAAA;AACh+C,GAGII,IAAYC,EAAe;AAAA,EAC/B,OAAO;AAAA,IACL,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,GAAGD,EAAW,QAAQE,GAAsBC,CAAsB;AAAA,IAClE,GAAGH,EAAW,aAAaI,CAAe;AAAA,IAC1C,GAAGJ,EAAW,YAAY,OAAO;AAAA,IACjC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,GAAGA,EAAW,YAAYK,CAAa;AAAA,IACvC,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,WAAW;AAAA,IACX,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,cAAcC;AAAAA,IAAO;AAAA,EACvB;AAAA,EAEF,SAAS;AAAA,IACP,iBAAiBF;AAAAA,IACjB,GAAGN,EAAW,YAAYK,CAAa;AAAA,IACvC,GAAGL,EAAW,IAAIC,CAAsB;AAAA,IACxC,OAAOM;AAAAA,EAAO;AAAA,EAEhB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,GAAGP,EAAW,IAAI,UAAU;AAAA,EAAA;AAAA,EAE9B,OAAO;AAAA,IACL,UAAUS;AAAAA,IACV,YAAYC;AAAAA,IACZ,GAAGV,EAAW,OAAO,CAAC;AAAA,EAAA;AAAA,EAExB,aAAa;AAAA,IACX,UAAUS;AAAAA,IACV,GAAGT,EAAW,OAAO,CAAC;AAAA,EAAA;AAAA,EAExB,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,EAAA;AAAA,EAEf,cAAc;AAAA,IACZ,GAAGA,EAAW,aAAa,QAAQ;AAAA,IACnC,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAWE;AAAAA,IACX,UAAUS;AAAAA,IACV,YAAYC;AAAAA,IACZ,GAAGZ,EAAW,QAAQ,aAAaC,CAAsB;AAAA,IACzD,OAAOY;AAAAA,IACP,iBAAiBC;AAAAA,IACjB,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcP;AAAAA,IAAO;AAAA,EACvB;AAAA,EAEF,cAAc;AAAA,IACZ,iBAAiBQ;AAAAA,IACjB,OAAOT;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBU;AAAAA,IAAO;AAAA,IAE1B,UAAUR;AAAAA,IACV,YAAYG;AAAAA,IACZ,GAAGZ,EAAW,QAAQ,aAAaC,CAAsB;AAAA,IACzD,GAAGD,EAAW,aAAakB,CAAe;AAAA,EAAA;AAAA,EAE5C,aAAa;AAAA,IACX,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,GAAGlB,EAAW,aAAa,QAAQ;AAAA,IACnC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,GAAGA,EAAW,OAAO,GAAG;AAAA,IACxB,GAAGA,EAAW,QAAQ,CAAC;AAAA,IACvB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,IAAA;AAAA,IAEhB,WAAW;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,GAAGA,EAAW,YAAYmB,CAAmB;AAAA,IAC7C,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,iBAAiB;AAAA,MACf,OAAOC;AAAAA,IAAO;AAAA,EAChB;AAAA,EAEF,MAAM;AAAA,IACJ,GAAGtB,EAAW,YAAYuB,CAAgB;AAAA,IAC1C,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,iBAAiB;AAAA,MACf,OAAOC;AAAAA,IAAO;AAAA,EAChB;AAAA,EAEF,SAAS;AAAA,IACP,GAAG1B,EAAW,YAAY2B,CAAmB;AAAA,IAC7C,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,iBAAiB;AAAA,MACf,OAAOC;AAAAA,IAAO;AAAA,EAChB;AAAA,EAEF,OAAO;AAAA,IACL,GAAG9B,EAAW,YAAY+B,CAAiB;AAAA,IAC3C,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,iBAAiB;AAAA,MACf,OAAOC;AAAAA,IAAO;AAAA,EAChB;AAAA,EAEF,SAAS,CAAA;AAAA,EACT,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ,CAAC,GAMYC,KAAUC,EAAM;AAAA,EAC3B,SAAiB,EAAE,OAAAC,GAAO,cAAAC,GAAc,GAAG7C,EAAA,GAAS8C,GAAK;AACvD,UAAMC,IAAS1C,EAAA;AAEf,WACE,gBAAAJ;AAAA,MAAC+C;AAAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,aAAa;AAAA,QACb,OAAAF;AAAA,QACA,cAAc;AAAA,UACZ,GAAGC;AAAA,UACH,UAAU;AAAA,UACV,YAAY;AAAA,YACV,OAAOE,EAAO;AAAA,YACd,SAASA,EAAO;AAAA,YAChB,SAASA,EAAO;AAAA,YAChB,OAAOA,EAAO;AAAA,YACd,aAAaA,EAAO;AAAA,YACpB,MAAMA,EAAO;AAAA,YACb,cAAcA,EAAO;AAAA,YACrB,cAAcA,EAAO;AAAA,YACrB,aAAaA,EAAO;AAAA,YACpB,SAASA,EAAO;AAAA,YAChB,MAAMA,EAAO;AAAA,YACb,SAASA,EAAO;AAAA,YAChB,OAAOA,EAAO;AAAA,YACd,SAASA,EAAO;AAAA,YAChB,GAAGF,KAAA,gBAAAA,EAAc;AAAA,UAAA;AAAA,QACnB;AAAA,QAEF,OAAO;AAAA,UACL,2BAAU1C,GAAA,EAAU;AAAA,UACpB,wBAAOJ,GAAA,EAAS;AAAA,UAChB,2BAAUG,GAAA,EAAY;AAAA,UACtB,yBAAQE,GAAA,EAAU;AAAA,UAClB,SAAS,gBAAAH,EAACgD,GAAA,EAAQ,WAAWF,EAAO,QAAA,CAAS;AAAA,QAAA;AAAA,QAE9C,GAAG/C;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type ToggleVariant, type ToggleSize } from "./toggle";
+export type ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root>;
+export declare const ToggleGroup: React.ForwardRefExoticComponent<(Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroupPrimitive.Item> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+export declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,49 @@
+import { jsx as g } from "react/jsx-runtime";
+import * as m from "react";
+import { Root as f, Item as i } from "../../node_modules/@radix-ui/react-toggle-group/dist/index.js";
+import { shorthands as n } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as l } from "../../renderer/contract.js";
+import { makeVoltStyles as c } from "../../styles/make-styles.js";
+import { spacingElement1 as T } from "../../tokens/index.js";
+import { useToggleStyles as d } from "./toggle.js";
+import { mergeClasses as p } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const y = c({
+  group: {
+    display: "flex",
+    ...n.gap(T)
+  }
+}), b = m.forwardRef(function({ className: o, ...t }, r) {
+  const e = y();
+  return /* @__PURE__ */ g(
+    f,
+    {
+      ref: r,
+      "data-slot": "toggle-group",
+      [l]: "toggle-group",
+      className: p(e.group, o),
+      ...t
+    }
+  );
+}), j = m.forwardRef(function({ className: o, variant: t = "default", size: r = "base", ...e }, u) {
+  const s = d();
+  return /* @__PURE__ */ g(
+    i,
+    {
+      ref: u,
+      "data-slot": "toggle-group-item",
+      [l]: "toggle-group-item",
+      className: p(
+        s.root,
+        s[t],
+        s[r],
+        o
+      ),
+      ...e
+    }
+  );
+});
+export {
+  b as ToggleGroup,
+  j as ToggleGroupItem
+};
+//# sourceMappingURL=toggle-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sources":["../../../src/components/toggle/toggle-group.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\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 { useToggleStyles, type ToggleVariant, type ToggleSize } from \"./toggle\"\n\nconst useToggleGroupStyles = makeVoltStyles({\n  group: {\n    display: \"flex\",\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n})\n\nexport type ToggleGroupProps = React.ComponentProps<\n  typeof ToggleGroupPrimitive.Root\n>\n\nexport const ToggleGroup = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  ToggleGroupProps\n>(function ToggleGroup({ className, ...props }, ref) {\n  const styles = useToggleGroupStyles()\n\n  return (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      data-slot=\"toggle-group\"\n      {...{ [SLOT_ATTR]: \"toggle-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type ToggleGroupItemProps = React.ComponentProps<\n  typeof ToggleGroupPrimitive.Item\n> & {\n  variant?: ToggleVariant\n  size?: ToggleSize\n}\n\nexport const ToggleGroupItem = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,\n  ToggleGroupItemProps\n>(function ToggleGroupItem(\n  { className, variant = \"default\", size = \"base\", ...props },\n  ref\n) {\n  const styles = useToggleStyles()\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"toggle-group-item\"\n      {...{ [SLOT_ATTR]: \"toggle-group-item\" }}\n      className={mergeClasses(\n        styles.root,\n        styles[variant],\n        styles[size],\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useToggleGroupStyles","makeVoltStyles","shorthands","tokens.spacingElement1","ToggleGroup","React","className","props","ref","styles","jsx","ToggleGroupPrimitive.Root","SLOT_ATTR","mergeClasses","ToggleGroupItem","variant","size","useToggleStyles","ToggleGroupPrimitive.Item"],"mappings":";;;;;;;;;AASA,MAAMA,IAAuBC,EAAe;AAAA,EAC1C,OAAO;AAAA,IACL,SAAS;AAAA,IACT,GAAGC,EAAW,IAAIC,CAAsB;AAAA,EAAA;AAE5C,CAAC,GAMYC,IAAcC,EAAM,WAG/B,SAAqB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AACnD,QAAMC,IAAST,EAAA;AAEf,SACE,gBAAAU;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaJ,EAAO,OAAOH,CAAS;AAAA,MAC9C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GASYO,IAAkBT,EAAM,WAGnC,SACA,EAAE,WAAAC,GAAW,SAAAS,IAAU,WAAW,MAAAC,IAAO,QAAQ,GAAGT,EAAA,GACpDC,GACA;AACA,QAAMC,IAASQ,EAAA;AAEf,SACE,gBAAAP;AAAA,IAACQ;AAAAA,IAAA;AAAA,MACC,KAAAV;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAA,QACTJ,EAAO;AAAA,QACPA,EAAOM,CAAO;AAAA,QACdN,EAAOO,CAAI;AAAA,QACXV;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+export type ToggleVariant = "default" | "destructive";
+export type ToggleSize = "sm" | "base" | "lg";
+export declare const useToggleStyles: () => Record<"base" | "sm" | "lg" | "default" | "root" | "destructive", string>;
+export type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/toggle/toggle.js

@@ -0,0 +1,124 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as l from "react";
+import { Root as d } from "../../node_modules/@radix-ui/react-toggle/dist/index.js";
+import { shorthands as o } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as m } from "../../renderer/contract.js";
+import { makeVoltStyles as g } from "../../styles/make-styles.js";
+import { errorA4 as c, errorA3 as u, errorA8 as h, semErrorSoft as f, semErrorLight as p, accentA4 as b, accentA3 as v, accentA8 as C, semAccentSoft as k, semAccentLight as S, fontWeightSemibold as y, radius2xl as A, spacingElement2 as x, radiusXl as R, radiusLg as T, spacingElement1 as W } from "../../tokens/index.js";
+import { mergeClasses as E } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const w = g({
+  root: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...o.gap(W),
+    flexShrink: 0,
+    cursor: "pointer",
+    fontWeight: y,
+    transitionProperty: "all",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    ...o.borderStyle("none"),
+    ...o.borderWidth(0),
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineOffset: "2px",
+      outlineStyle: "solid"
+    },
+    ":disabled, &[data-disabled]": {
+      pointerEvents: "none",
+      opacity: 0.5
+    },
+    "& svg": {
+      flexShrink: 0,
+      pointerEvents: "none",
+      color: "currentColor"
+    }
+  },
+  // Variants
+  default: {
+    backgroundColor: "transparent",
+    color: S,
+    ":hover": {
+      backgroundColor: k
+    },
+    ":focus-visible": {
+      outlineColor: C
+    },
+    "&[data-state='on']": {
+      backgroundColor: v
+    },
+    "&[data-state='on']:hover": {
+      backgroundColor: b
+    }
+  },
+  destructive: {
+    backgroundColor: "transparent",
+    color: p,
+    ":hover": {
+      backgroundColor: f
+    },
+    ":focus-visible": {
+      outlineColor: h
+    },
+    "&[data-state='on']": {
+      backgroundColor: u
+    },
+    "&[data-state='on']:hover": {
+      backgroundColor: c
+    }
+  },
+  // Sizes
+  sm: {
+    height: "1.5rem",
+    minWidth: "1.5rem",
+    ...o.borderRadius(T),
+    ...o.paddingInline("0.375rem"),
+    "& svg": {
+      width: "0.875rem",
+      height: "0.875rem"
+    }
+  },
+  base: {
+    height: "2rem",
+    minWidth: "2rem",
+    ...o.borderRadius(R),
+    ...o.paddingInline(x),
+    "& svg": {
+      width: "1rem",
+      height: "1rem"
+    }
+  },
+  lg: {
+    height: "2.5rem",
+    minWidth: "2.5rem",
+    ...o.borderRadius(A),
+    ...o.paddingInline("0.625rem"),
+    "& svg": {
+      width: "1.25rem",
+      height: "1.25rem"
+    }
+  }
+}), P = l.forwardRef(function({ className: r, variant: t = "default", size: i = "base", ...n }, a) {
+  const e = w();
+  return /* @__PURE__ */ s(
+    d,
+    {
+      ref: a,
+      "data-slot": "toggle",
+      [m]: "toggle",
+      className: E(
+        e.root,
+        e[t],
+        e[i],
+        r
+      ),
+      ...n
+    }
+  );
+});
+export {
+  P as Toggle,
+  w as useToggleStyles
+};
+//# sourceMappingURL=toggle.js.map

package/dist/components/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\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 ToggleVariant = \"default\" | \"destructive\"\nexport type ToggleSize = \"sm\" | \"base\" | \"lg\"\n\nexport const useToggleStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    flexShrink: 0,\n    cursor: \"pointer\",\n    fontWeight: tokens.fontWeightSemibold,\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  // Variants\n  default: {\n    backgroundColor: \"transparent\",\n    color: tokens.semAccentLight,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n  },\n  destructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.semErrorLight,\n    \":hover\": {\n      backgroundColor: tokens.semErrorSoft,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.errorA3,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n  },\n  // Sizes\n  sm: {\n    height: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingInline(\"0.375rem\"),\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  base: {\n    height: \"2rem\",\n    minWidth: \"2rem\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    \"& svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  lg: {\n    height: \"2.5rem\",\n    minWidth: \"2.5rem\",\n    ...shorthands.borderRadius(tokens.radius2xl),\n    ...shorthands.paddingInline(\"0.625rem\"),\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n})\n\nexport type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & {\n  variant?: ToggleVariant\n  size?: ToggleSize\n}\n\nexport const Toggle = React.forwardRef<\n  React.ComponentRef<typeof TogglePrimitive.Root>,\n  ToggleProps\n>(function Toggle(\n  { className, variant = \"default\", size = \"base\", ...props },\n  ref\n) {\n  const styles = useToggleStyles()\n\n  return (\n    <TogglePrimitive.Root\n      ref={ref}\n      data-slot=\"toggle\"\n      {...{ [SLOT_ATTR]: \"toggle\" }}\n      className={mergeClasses(\n        styles.root,\n        styles[variant],\n        styles[size],\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useToggleStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semAccentLight","tokens.semAccentSoft","tokens.accentA8","tokens.accentA3","tokens.accentA4","tokens.semErrorLight","tokens.semErrorSoft","tokens.errorA8","tokens.errorA3","tokens.errorA4","tokens.radiusLg","tokens.radiusXl","tokens.spacingElement2","tokens.radius2xl","Toggle","React","className","variant","size","props","ref","styles","jsx","TogglePrimitive.Root","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;;AAWO,MAAMA,IAAkBC,EAAe;AAAA,EAC5C,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAYC;AAAAA,IACZ,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,GAAGF,EAAW,YAAY,MAAM;AAAA,IAChC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,IAAA;AAAA,IAEhB,+BAA+B;AAAA,MAC7B,eAAe;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAAA;AAAA,EAGF,SAAS;AAAA,IACP,iBAAiB;AAAA,IACjB,OAAOG;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA;AAAA,EAGF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGZ,EAAW,aAAaa,CAAe;AAAA,IAC1C,GAAGb,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGA,EAAW,aAAac,CAAe;AAAA,IAC1C,GAAGd,EAAW,cAAce,CAAsB;AAAA,IAClD,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGf,EAAW,aAAagB,CAAgB;AAAA,IAC3C,GAAGhB,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC,GAOYiB,IAASC,EAAM,WAG1B,SACA,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GACpDC,GACA;AACA,QAAMC,IAAS1B,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAA,QACTJ,EAAO;AAAA,QACPA,EAAOJ,CAAO;AAAA,QACdI,EAAOH,CAAI;AAAA,QACXF;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+export type TooltipProviderProps = React.ComponentProps<typeof TooltipPrimitive.Provider>;
+export declare const TooltipProvider: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipProviderProps & React.RefAttributes<HTMLElement>>;
+export type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipProps & React.RefAttributes<HTMLElement>>;
+export type TooltipTriggerProps = React.ComponentProps<typeof TooltipPrimitive.Trigger>;
+export declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type TooltipPortalProps = React.ComponentProps<typeof TooltipPrimitive.Portal>;
+export declare const TooltipPortal: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipPortalProps & React.RefAttributes<HTMLElement>>;
+export type TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Content> & {
+    hideArrow?: boolean;
+    variant?: "default" | "destructive";
+};
+export declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;