@arcadeai/design-system 1.5.1 → 1.7.0

package/dist/components/ui/atoms/alert-dialog.d.ts

@@ -0,0 +1,14 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import type * as React from 'react';
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

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

@@ -0,0 +1,248 @@
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import * as i from "react";
+import { c as $ } from "../../../index-DFZozV_h.js";
+import { u as m, a as M } from "../../../index-5Bhkapwi.js";
+import { c as A, R as I, P as z, O as F, T as L, W as j, C as G, b as W, D as k, a as D } from "../../../index-Dkey23PG.js";
+import { c as H } from "../../../index-B695uy69.js";
+import { buttonVariants as v } from "./button.js";
+import { c as s } from "../../../utils-Db4QWi-E.js";
+var N = "AlertDialog", [V, De] = $(N, [
+  A
+]), n = A(), y = (e) => {
+  const { __scopeAlertDialog: t, ...o } = e, r = n(t);
+  return /* @__PURE__ */ a(I, { ...r, ...o, modal: !0 });
+};
+y.displayName = N;
+var Y = "AlertDialogTrigger", _ = i.forwardRef(
+  (e, t) => {
+    const { __scopeAlertDialog: o, ...r } = e, l = n(o);
+    return /* @__PURE__ */ a(L, { ...l, ...r, ref: t });
+  }
+);
+_.displayName = Y;
+var q = "AlertDialogPortal", x = (e) => {
+  const { __scopeAlertDialog: t, ...o } = e, r = n(t);
+  return /* @__PURE__ */ a(z, { ...r, ...o });
+};
+x.displayName = q;
+var B = "AlertDialogOverlay", h = i.forwardRef(
+  (e, t) => {
+    const { __scopeAlertDialog: o, ...r } = e, l = n(o);
+    return /* @__PURE__ */ a(F, { ...l, ...r, ref: t });
+  }
+);
+h.displayName = B;
+var c = "AlertDialogContent", [J, K] = V(c), Q = M("AlertDialogContent"), C = i.forwardRef(
+  (e, t) => {
+    const { __scopeAlertDialog: o, children: r, ...l } = e, p = n(o), g = i.useRef(null), O = m(t, g), u = i.useRef(null);
+    return /* @__PURE__ */ a(
+      j,
+      {
+        contentName: c,
+        titleName: R,
+        docsSlug: "alert-dialog",
+        children: /* @__PURE__ */ a(J, { scope: o, cancelRef: u, children: /* @__PURE__ */ f(
+          G,
+          {
+            role: "alertdialog",
+            ...p,
+            ...l,
+            ref: O,
+            onOpenAutoFocus: H(l.onOpenAutoFocus, (d) => {
+              d.preventDefault(), u.current?.focus({ preventScroll: !0 });
+            }),
+            onPointerDownOutside: (d) => d.preventDefault(),
+            onInteractOutside: (d) => d.preventDefault(),
+            children: [
+              /* @__PURE__ */ a(Q, { children: r }),
+              /* @__PURE__ */ a(X, { contentRef: g })
+            ]
+          }
+        ) })
+      }
+    );
+  }
+);
+C.displayName = c;
+var R = "AlertDialogTitle", b = i.forwardRef(
+  (e, t) => {
+    const { __scopeAlertDialog: o, ...r } = e, l = n(o);
+    return /* @__PURE__ */ a(W, { ...l, ...r, ref: t });
+  }
+);
+b.displayName = R;
+var E = "AlertDialogDescription", P = i.forwardRef((e, t) => {
+  const { __scopeAlertDialog: o, ...r } = e, l = n(o);
+  return /* @__PURE__ */ a(k, { ...l, ...r, ref: t });
+});
+P.displayName = E;
+var U = "AlertDialogAction", S = i.forwardRef(
+  (e, t) => {
+    const { __scopeAlertDialog: o, ...r } = e, l = n(o);
+    return /* @__PURE__ */ a(D, { ...l, ...r, ref: t });
+  }
+);
+S.displayName = U;
+var T = "AlertDialogCancel", w = i.forwardRef(
+  (e, t) => {
+    const { __scopeAlertDialog: o, ...r } = e, { cancelRef: l } = K(T, o), p = n(o), g = m(t, l);
+    return /* @__PURE__ */ a(D, { ...p, ...r, ref: g });
+  }
+);
+w.displayName = T;
+var X = ({ contentRef: e }) => {
+  const t = `\`${c}\` requires a description for the component to be accessible for screen reader users.
+
+You can add a description to the \`${c}\` by passing a \`${E}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
+
+Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${c}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
+
+For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
+  return i.useEffect(() => {
+    document.getElementById(
+      e.current?.getAttribute("aria-describedby")
+    ) || console.warn(t);
+  }, [t, e]), null;
+}, Z = y, ee = _, te = x, ae = h, oe = C, re = S, le = w, ie = b, ne = P;
+function ve({
+  ...e
+}) {
+  return /* @__PURE__ */ a(Z, { "data-slot": "alert-dialog", ...e });
+}
+function Ne({
+  ...e
+}) {
+  return /* @__PURE__ */ a(ee, { "data-slot": "alert-dialog-trigger", ...e });
+}
+function se({
+  ...e
+}) {
+  return /* @__PURE__ */ a(te, { "data-slot": "alert-dialog-portal", ...e });
+}
+function ce({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    ae,
+    {
+      className: s(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in",
+        e
+      ),
+      "data-slot": "alert-dialog-overlay",
+      ...t
+    }
+  );
+}
+function ye({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ f(se, { children: [
+    /* @__PURE__ */ a(ce, {}),
+    /* @__PURE__ */ a(
+      oe,
+      {
+        className: s(
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
+          e
+        ),
+        "data-slot": "alert-dialog-content",
+        ...t
+      }
+    )
+  ] });
+}
+function _e({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: s("flex flex-col gap-2 text-center sm:text-left", e),
+      "data-slot": "alert-dialog-header",
+      ...t
+    }
+  );
+}
+function xe({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: s(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        e
+      ),
+      "data-slot": "alert-dialog-footer",
+      ...t
+    }
+  );
+}
+function he({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    ie,
+    {
+      className: s("font-semibold text-lg", e),
+      "data-slot": "alert-dialog-title",
+      ...t
+    }
+  );
+}
+function Ce({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    ne,
+    {
+      className: s("text-muted-foreground text-sm", e),
+      "data-slot": "alert-dialog-description",
+      ...t
+    }
+  );
+}
+function Re({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    re,
+    {
+      className: s(v(), e),
+      ...t
+    }
+  );
+}
+function be({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    le,
+    {
+      className: s(v({ variant: "outline" }), e),
+      ...t
+    }
+  );
+}
+export {
+  ve as AlertDialog,
+  Re as AlertDialogAction,
+  be as AlertDialogCancel,
+  ye as AlertDialogContent,
+  Ce as AlertDialogDescription,
+  xe as AlertDialogFooter,
+  _e as AlertDialogHeader,
+  ce as AlertDialogOverlay,
+  se as AlertDialogPortal,
+  he as AlertDialogTitle,
+  Ne as AlertDialogTrigger
+};

package/dist/components/ui/atoms/command.js

@@ -1,5 +1,5 @@
 import { jsx as C, jsxs as ne } from "react/jsx-runtime";
-import { R as Se, P as Ie, O as Re, C as Ae } from "../../../index-BzU0xzeS.js";
+import { R as Se, P as Ie, O as Re, C as Ae } from "../../../index-Dkey23PG.js";
 import * as l from "react";
 import { P as A } from "../../../index-CpDnqHCm.js";
 import { u as j } from "../../../index-Cv867SGx.js";

package/dist/components/ui/atoms/dialog.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as n } from "react/jsx-runtime";
-import { R as r, T as d, C as c, a as s, b as g, D as u, P as f, O as m } from "../../../index-BzU0xzeS.js";
+import { R as r, T as d, C as c, a as s, b as g, D as u, P as f, O as m } from "../../../index-Dkey23PG.js";
 import { XIcon as p } from "lucide-react";
 import { c as o } from "../../../utils-Db4QWi-E.js";
 function N({

package/dist/components/ui/atoms/icons/codesandbox.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+export declare const Codesandbox: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Codesandbox;

package/dist/components/ui/atoms/icons/codesandbox.js

@@ -0,0 +1,26 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+const n = (l) => /* @__PURE__ */ o(
+  "svg",
+  {
+    fill: "none",
+    viewBox: "0 0 600 600",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...l,
+    children: [
+      /* @__PURE__ */ e("title", { children: "Codesandbox" }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          clipRule: "evenodd",
+          d: "M150 150h299.832v300H150V150Zm269.168 30.682v238.636H180.665V180.682h238.503Z",
+          fill: "#DCFF50",
+          fillRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+export {
+  n as Codesandbox,
+  n as default
+};

package/dist/components/ui/atoms/icons/index.d.ts

@@ -22,6 +22,7 @@ export * from './calendly';
 export * from './clickhouse';
 export * from './clickup';
 export * from './closeio';
+export * from './codesandbox';
 export * from './coinbase';
 export * from './confluence';
 export * from './datadog';