@arcadeai/design-system 0.0.0

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

@@ -0,0 +1,66 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as i } from "../../../index-DdnpnyX2.js";
+import { c as e } from "../../../utils-Dy2WjYNJ.js";
+const l = i(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function o({
+  className: t,
+  variant: r,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: e(l({ variant: r }), t),
+      "data-slot": "alert",
+      role: "alert",
+      ...s
+    }
+  );
+}
+function g({ className: t, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: e(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        t
+      ),
+      "data-slot": "alert-title",
+      ...r
+    }
+  );
+}
+function u({
+  className: t,
+  ...r
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: e(
+        "col-start-2 grid justify-items-start gap-1 text-muted-foreground text-sm [&_p]:leading-relaxed",
+        t
+      ),
+      "data-slot": "alert-description",
+      ...r
+    }
+  );
+}
+export {
+  o as Alert,
+  u as AlertDescription,
+  g as AlertTitle
+};

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

@@ -0,0 +1,6 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import type * as React from 'react';
+declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback };

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

@@ -0,0 +1,130 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as i from "react";
+import { c as R } from "../../../index-UFb2E87s.js";
+import { u as b } from "../../../index-DwYXX2sM.js";
+import { u as f } from "../../../index-DuekHEmj.js";
+import { P as m } from "../../../index-C9KW2H79.js";
+import { r as C } from "../../../index-CJFGOBPb.js";
+import { c as v } from "../../../utils-Dy2WjYNJ.js";
+var y = C();
+function N() {
+  return y.useSyncExternalStore(
+    _,
+    () => !0,
+    () => !1
+  );
+}
+function _() {
+  return () => {
+  };
+}
+var g = "Avatar", [k, V] = R(g), [F, S] = k(g), L = i.forwardRef(
+  (a, e) => {
+    const { __scopeAvatar: n, ...r } = a, [o, t] = i.useState("idle");
+    return /* @__PURE__ */ d(
+      F,
+      {
+        scope: n,
+        imageLoadingStatus: o,
+        onImageLoadingStatusChange: t,
+        children: /* @__PURE__ */ d(m.span, { ...r, ref: e })
+      }
+    );
+  }
+);
+L.displayName = g;
+var h = "AvatarImage", E = i.forwardRef(
+  (a, e) => {
+    const { __scopeAvatar: n, src: r, onLoadingStatusChange: o = () => {
+    }, ...t } = a, l = S(h, n), s = M(r, t), u = b((c) => {
+      o(c), l.onImageLoadingStatusChange(c);
+    });
+    return f(() => {
+      s !== "idle" && u(s);
+    }, [s, u]), s === "loaded" ? /* @__PURE__ */ d(m.img, { ...t, ref: e, src: r }) : null;
+  }
+);
+E.displayName = h;
+var I = "AvatarFallback", w = i.forwardRef(
+  (a, e) => {
+    const { __scopeAvatar: n, delayMs: r, ...o } = a, t = S(I, n), [l, s] = i.useState(r === void 0);
+    return i.useEffect(() => {
+      if (r !== void 0) {
+        const u = window.setTimeout(() => s(!0), r);
+        return () => window.clearTimeout(u);
+      }
+    }, [r]), l && t.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ d(m.span, { ...o, ref: e }) : null;
+  }
+);
+w.displayName = I;
+function A(a, e) {
+  return a ? e ? (a.src !== e && (a.src = e), a.complete && a.naturalWidth > 0 ? "loaded" : "loading") : "error" : "idle";
+}
+function M(a, { referrerPolicy: e, crossOrigin: n }) {
+  const r = N(), o = i.useRef(null), t = r ? (o.current || (o.current = new window.Image()), o.current) : null, [l, s] = i.useState(
+    () => A(t, a)
+  );
+  return f(() => {
+    s(A(t, a));
+  }, [t, a]), f(() => {
+    const u = (x) => () => {
+      s(x);
+    };
+    if (!t) return;
+    const c = u("loaded"), p = u("error");
+    return t.addEventListener("load", c), t.addEventListener("error", p), e && (t.referrerPolicy = e), typeof n == "string" && (t.crossOrigin = n), () => {
+      t.removeEventListener("load", c), t.removeEventListener("error", p);
+    };
+  }, [t, n, e]), l;
+}
+var P = L, z = E, T = w;
+function W({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ d(
+    P,
+    {
+      className: v(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        a
+      ),
+      "data-slot": "avatar",
+      ...e
+    }
+  );
+}
+function D({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ d(
+    z,
+    {
+      className: v("aspect-square size-full", a),
+      "data-slot": "avatar-image",
+      ...e
+    }
+  );
+}
+function J({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ d(
+    T,
+    {
+      className: v(
+        "flex size-full items-center justify-center rounded-full bg-muted",
+        a
+      ),
+      "data-slot": "avatar-fallback",
+      ...e
+    }
+  );
+}
+export {
+  W as Avatar,
+  J as AvatarFallback,
+  D as AvatarImage
+};

package/dist/components/ui/atoms/badge.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "secondary" | "outline" | "success" | "warning" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

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

@@ -0,0 +1,41 @@
+import { jsx as n } from "react/jsx-runtime";
+import { S as i } from "../../../index-CB1Wkg0G.js";
+import { c as o } from "../../../index-DdnpnyX2.js";
+import { c as s } from "../../../utils-Dy2WjYNJ.js";
+const d = o(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 font-medium text-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        success: "border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90",
+        warning: "border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function f({
+  className: r,
+  variant: e,
+  asChild: t = !1,
+  ...a
+}) {
+  return /* @__PURE__ */ n(
+    t ? i : "span",
+    {
+      className: s(d({ variant: e }), r),
+      "data-slot": "badge",
+      ...a
+    }
+  );
+}
+export {
+  f as Badge,
+  d as badgeVariants
+};

package/dist/components/ui/atoms/breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+declare function Breadcrumb({ ...props }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

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

@@ -0,0 +1,115 @@
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import { S as i } from "../../../index-CB1Wkg0G.js";
+import { c as t } from "../../../utils-Dy2WjYNJ.js";
+import { C as n } from "../../../chevron-right-DriXIqe5.js";
+import { c as o } from "../../../createLucideIcon-B6fy1GTR.js";
+/**
+ * @license lucide-react v0.522.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const l = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
+  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
+], m = o("ellipsis", l);
+function g({ ...r }) {
+  return /* @__PURE__ */ a("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...r });
+}
+function h({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "ol",
+    {
+      className: t(
+        "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
+        r
+      ),
+      "data-slot": "breadcrumb-list",
+      ...e
+    }
+  );
+}
+function N({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      className: t("inline-flex items-center gap-1.5", r),
+      "data-slot": "breadcrumb-item",
+      ...e
+    }
+  );
+}
+function y({
+  asChild: r,
+  className: e,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    r ? i : "a",
+    {
+      className: t("transition-colors hover:text-foreground", e),
+      "data-slot": "breadcrumb-link",
+      ...s
+    }
+  );
+}
+function k({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      "aria-current": "page",
+      "aria-disabled": "true",
+      className: t("font-normal text-foreground", r),
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      tabIndex: 0,
+      ...e
+    }
+  );
+}
+function B({
+  children: r,
+  className: e,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      "aria-hidden": "true",
+      className: t("[&>svg]:size-3.5", e),
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      ...s,
+      children: r ?? /* @__PURE__ */ a(n, {})
+    }
+  );
+}
+function j({
+  className: r,
+  ...e
+}) {
+  return /* @__PURE__ */ c(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: t("flex size-9 items-center justify-center", r),
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      ...e,
+      children: [
+        /* @__PURE__ */ a(m, { className: "size-4" }),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+export {
+  g as Breadcrumb,
+  j as BreadcrumbEllipsis,
+  N as BreadcrumbItem,
+  y as BreadcrumbLink,
+  h as BreadcrumbList,
+  k as BreadcrumbPage,
+  B as BreadcrumbSeparator
+};

package/dist/components/ui/atoms/button.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "warning" | "tertiary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

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

@@ -0,0 +1,51 @@
+import { jsx as o } from "react/jsx-runtime";
+import { S as a } from "../../../index-CB1Wkg0G.js";
+import { c as s } from "../../../index-DdnpnyX2.js";
+import { c as d } from "../../../utils-Dy2WjYNJ.js";
+const g = s(
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        tertiary: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        warning: "bg-warning text-warning-foreground shadow-xs hover:bg-warning/90"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function p({
+  className: r,
+  variant: e,
+  size: t,
+  asChild: i = !1,
+  ...n
+}) {
+  return /* @__PURE__ */ o(
+    i ? a : "button",
+    {
+      className: d(g({ variant: e, size: t, className: r })),
+      "data-slot": "button",
+      ...n
+    }
+  );
+}
+export {
+  p as Button,
+  g as buttonVariants
+};

package/dist/components/ui/atoms/card.d.ts

@@ -0,0 +1,9 @@
+import type * as React from 'react';
+declare function Card({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

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

@@ -0,0 +1,90 @@
+import { jsx as r } from "react/jsx-runtime";
+import { c as o } from "../../../utils-Dy2WjYNJ.js";
+function n({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        t
+      ),
+      "data-slot": "card",
+      ...a
+    }
+  );
+}
+function s({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        t
+      ),
+      "data-slot": "card-header",
+      ...a
+    }
+  );
+}
+function c({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o("font-semibold leading-none", t),
+      "data-slot": "card-title",
+      ...a
+    }
+  );
+}
+function i({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o("text-muted-foreground text-sm", t),
+      "data-slot": "card-description",
+      ...a
+    }
+  );
+}
+function l({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        t
+      ),
+      "data-slot": "card-action",
+      ...a
+    }
+  );
+}
+function u({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o("px-6", t),
+      "data-slot": "card-content",
+      ...a
+    }
+  );
+}
+function f({ className: t, ...a }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: o("flex items-center px-6 [.border-t]:pt-6", t),
+      "data-slot": "card-footer",
+      ...a
+    }
+  );
+}
+export {
+  n as Card,
+  l as CardAction,
+  u as CardContent,
+  i as CardDescription,
+  f as CardFooter,
+  s as CardHeader,
+  c as CardTitle
+};

package/dist/components/ui/atoms/chart.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}): import("react/jsx-runtime").JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => import("react/jsx-runtime").JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+type TooltipContentProps = {
+    active?: boolean;
+    payload?: Array<{
+        value?: number | string;
+        name?: string;
+        dataKey?: string;
+        color?: string;
+        payload?: {
+            fill?: string;
+            [key: string]: unknown;
+        };
+        [key: string]: unknown;
+    }>;
+    label?: string | number;
+    labelFormatter?: (value: unknown, payload: unknown[]) => React.ReactNode;
+    formatter?: (value: unknown, name: string, props: unknown, index: number, payload: unknown) => React.ReactNode;
+    className?: string;
+    indicator?: 'line' | 'dot' | 'dashed';
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    labelClassName?: string;
+    color?: string;
+    nameKey?: string;
+    labelKey?: string;
+};
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: TooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+type LegendContentProps = {
+    className?: string;
+    hideIcon?: boolean;
+    payload?: Array<{
+        value?: string;
+        dataKey?: string;
+        color?: string;
+        [key: string]: unknown;
+    }>;
+    verticalAlign?: 'top' | 'bottom';
+    nameKey?: string;
+};
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: LegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };