@inspirecn/react 1.0.0

package/README.md

@@ -0,0 +1,46 @@
+# Inspirecn UI Library
+
+[![Documentation](https://img.shields.io/badge/Documentation-Live-green)](https://inspirecn.vercel.app)
+
+A custom React component library built with **Radix UI** and **Tailwind CSS**.
+
+## Overview
+
+This package (`@inspirecn/ui`) serves as the design system foundation for the Inspirecn project. While inspired by **shadcn/ui**'s headless approach, this library is built from the ground up to support our specific design requirements and token system.
+
+## Key Features
+
+- **Radix UI Primitives:** Ensures robust accessibility and keyboard navigation.
+- **Tailwind CSS:** Utility-first styling with a custom configuration.
+- **Custom Design Tokens:** Driven by a `tokens.json` source of truth, generating CSS variables for consistent theming (Colors, Typography, Spacing, Radius).
+- **No External Dependencies:** We do not rely on the `shadcn-ui` package or CLI. Every component is owned and maintained within this package.
+
+## Usage
+
+Import components directly from the package:
+
+```tsx
+import { Button } from '@inspirecn/ui/components/button';
+import { Card } from '@inspirecn/ui/components/card';
+
+export default function MyComponent() {
+  return (
+    <Card>
+      <Button variant="default">Click Me</Button>
+    </Card>
+  );
+}
+```
+
+## Developing Components
+
+1.  **Create Component:** Add new components in `src/components/`.
+2.  **Style:** Use Tailwind CSS classes. Refer to `src/styles/tokens.css` for available custom variables.
+3.  **Storybook:** Add a `.stories.tsx` file to document and test the component in Storybook.
+
+## Token System
+
+Our design tokens are defined in `src/styles/tokens.json`.
+To update tokens:
+1.  Modify `src/styles/tokens.json`.
+2.  Run the generation script (if configured) or ensure `generate-tokens.ts` is executed to update `src/styles/tokens.css`.

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { type VariantProps } from 'class-variance-authority';
+declare const accordionTriggerVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const accordionContentVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+interface AccordionTriggerProps extends React.ComponentProps<typeof AccordionPrimitive.Trigger>, VariantProps<typeof accordionTriggerVariants> {
+}
+declare function AccordionTrigger({ className, children, size, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+interface AccordionContentProps extends React.ComponentProps<typeof AccordionPrimitive.Content>, VariantProps<typeof accordionContentVariants> {
+}
+declare function AccordionContent({ className, children, size, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,wBAAwB;;8EAc7B,CAAC;AAEF,QAAA,MAAM,wBAAwB;;8EAW5B,CAAC;AAEH,iBAAS,SAAS,CAAC,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAEtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAQtD;AAED,UAAU,qBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,EAC7D,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAavB;AAED,UAAU,qBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,EAC7D,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAkBvB;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,90 @@
+import * as r from "@radix-ui/react-accordion";
+import { ChevronDownIcon as d } from "lucide-react";
+import { cva as s } from "class-variance-authority";
+import { cn as i } from "@inspirecn/ui/lib/utils";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+const l = s("flex flex-1 items-start justify-between gap-4 rounded-md text-left font-semibold transition-all outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", {
+  variants: {
+    size: {
+      default: "py-4 text-base",
+      sm: "py-3 text-sm",
+      lg: "py-5 text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+}), m = s("text-muted-foreground/90", {
+  variants: {
+    size: {
+      default: "text-base",
+      sm: "text-sm",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function b({
+  ...t
+}) {
+  return /* @__PURE__ */ e(r.Root, {
+    "data-slot": "accordion",
+    ...t
+  });
+}
+function x({
+  className: t,
+  ...o
+}) {
+  return /* @__PURE__ */ e(r.Item, {
+    "data-slot": "accordion-item",
+    className: i("border-border/50 border-b last:border-b-0", t),
+    ...o
+  });
+}
+function v({
+  className: t,
+  children: o,
+  size: n,
+  ...a
+}) {
+  return /* @__PURE__ */ e(r.Header, {
+    className: "flex",
+    children: /* @__PURE__ */ c(r.Trigger, {
+      "data-slot": "accordion-trigger",
+      className: i(l({
+        size: n
+      }), t),
+      ...a,
+      children: [o, /* @__PURE__ */ e(d, {
+        className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+      })]
+    })
+  });
+}
+function h({
+  className: t,
+  children: o,
+  size: n,
+  ...a
+}) {
+  return /* @__PURE__ */ e(r.Content, {
+    "data-slot": "accordion-content",
+    className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden",
+    ...a,
+    children: /* @__PURE__ */ e("div", {
+      className: i(m({
+        size: n
+      }), "pb-4 pt-0", t),
+      children: o
+    })
+  });
+}
+export {
+  b as Accordion,
+  h as AccordionContent,
+  x as AccordionItem,
+  v as AccordionTrigger
+};

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const alertVariants: (props?: ({
+    variant?: "default" | "info" | "warning" | "success" | "danger" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    title: string;
+    description?: string;
+    onClose?: () => void;
+}
+declare function Alert({ className, variant, title, description, onClose, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export { Alert };
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAclE,QAAA,MAAM,aAAa;;8EAmBlB,CAAC;AAcF,UAAU,UACR,SACE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,EACP,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,2CAmDZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/alert/Alert.js

@@ -0,0 +1,100 @@
+import { cva as i } from "class-variance-authority";
+import { X as c, AlertCircle as g, CheckCircle2 as x, AlertTriangle as u, Info as f } from "lucide-react";
+import { cn as s } from "@inspirecn/ui/lib/utils";
+import { Button as k } from "../button/Button.js";
+import { Heading as v } from "../heading/Heading.js";
+import { BodyText as h } from "../body-text/BodyText.js";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+const N = i("relative w-full rounded-lg border p-4 [&>svg]:size-4 [&>svg]:shrink-0", {
+  variants: {
+    variant: {
+      default: "bg-background/50 text-foreground border-border",
+      info: "bg-blue-500/10 text-blue-900 border-blue-500 dark:bg-blue-400/10 dark:text-blue-50 dark:border-blue-400 [&>svg]:text-blue-500 dark:[&>svg]:text-blue-400",
+      warning: "bg-amber-500/10 text-amber-900 border-amber-500 dark:bg-amber-400/10 dark:text-amber-50 dark:border-amber-400 [&>svg]:text-amber-500 dark:[&>svg]:text-amber-400",
+      success: "bg-emerald-500/10 text-emerald-900 border-emerald-500 dark:bg-emerald-400/10 dark:text-emerald-50 dark:border-emerald-400 [&>svg]:text-emerald-500 dark:[&>svg]:text-emerald-400",
+      danger: "bg-red-500/10 text-red-900 border-red-500 dark:bg-red-400/10 dark:text-red-50 dark:border-red-400 [&>svg]:text-red-500 dark:[&>svg]:text-red-400"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), p = i("size-4 shrink-0 mt-0.5", {
+  variants: {
+    variant: {
+      default: "text-foreground",
+      info: "text-blue-500",
+      warning: "text-amber-500",
+      success: "text-emerald-500",
+      danger: "text-red-500"
+    }
+  }
+});
+function B({
+  className: m,
+  variant: r,
+  title: n,
+  description: a,
+  onClose: t,
+  children: o,
+  ...b
+}) {
+  const d = {
+    default: null,
+    info: /* @__PURE__ */ e(f, {
+      className: "size-4"
+    }),
+    warning: /* @__PURE__ */ e(u, {
+      className: "size-4"
+    }),
+    success: /* @__PURE__ */ e(x, {
+      className: "size-4"
+    }),
+    danger: /* @__PURE__ */ e(g, {
+      className: "size-4"
+    })
+  }[r || "default"];
+  return /* @__PURE__ */ e("div", {
+    "data-slot": "alert",
+    role: "alert",
+    className: s(N({
+      variant: r
+    }), m),
+    ...b,
+    children: /* @__PURE__ */ l("div", {
+      className: "flex items-start gap-4",
+      children: [d && /* @__PURE__ */ e("div", {
+        className: s(p({
+          variant: r
+        })),
+        children: d
+      }), /* @__PURE__ */ l("div", {
+        className: "flex-1 space-y-1",
+        children: [/* @__PURE__ */ e(v, {
+          as: "h5",
+          size: "xs",
+          weight: "medium",
+          className: "text-inherit!",
+          children: n
+        }), a && /* @__PURE__ */ e(h, {
+          as: "div",
+          size: "sm",
+          muted: !0,
+          className: "text-inherit! opacity-90",
+          children: a
+        }), o]
+      }), t && /* @__PURE__ */ e(k, {
+        variant: "ghost",
+        size: "icon",
+        onClick: t,
+        "aria-label": "Close",
+        className: "-mt-1 h-8 w-8",
+        children: /* @__PURE__ */ e(c, {
+          className: "size-4"
+        })
+      })]
+    })
+  });
+}
+export {
+  B as Alert
+};

package/dist/components/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { buttonVariants } from "../button/Button";
+import { VariantProps } from "class-variance-authority";
+declare function AlertDialogBase({ ...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, variant, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & VariantProps<typeof buttonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, variant, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & VariantProps<typeof buttonVariants>): import("react/jsx-runtime").JSX.Element;
+export interface AlertDialogProps {
+    title: string;
+    description?: string;
+    onConfirm: () => void;
+    onCancel?: () => void;
+    confirmText?: string;
+    cancelText?: string;
+    confirmVariant?: VariantProps<typeof buttonVariants>["variant"];
+    cancelVariant?: VariantProps<typeof buttonVariants>["variant"];
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    dir?: "ltr" | "rtl";
+}
+/**
+ * Simplified AlertDialog component with an easy-to-use API
+ *
+ * @example
+ * <AlertDialog
+ *  title="Confirm"
+ *  description="Are you sure you want to confirm this action?"
+ *  onConfirm={() => console.log('Confirmed')}
+ * >
+ *  <Button>Confirm</Button> // trigger
+ * </AlertDialog>
+ */
+declare function AlertDialog({ title, description, onConfirm, onCancel, confirmText, cancelText, confirmVariant, cancelVariant, children, open, onOpenChange, dir, }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+export { AlertDialogBase, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialog, };
+//# sourceMappingURL=AlertDialog.d.ts.map

package/dist/components/alert-dialog/AlertDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,174 @@
+import * as l from "@radix-ui/react-alert-dialog";
+import { cn as r } from "@inspirecn/ui/lib/utils";
+import { buttonVariants as n } from "../button/Button.js";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+function D({
+  ...t
+}) {
+  return /* @__PURE__ */ e(l.Root, {
+    "data-slot": "alert-dialog",
+    ...t
+  });
+}
+function v({
+  ...t
+}) {
+  return /* @__PURE__ */ e(l.Trigger, {
+    "data-slot": "alert-dialog-trigger",
+    ...t
+  });
+}
+function p({
+  ...t
+}) {
+  return /* @__PURE__ */ e(l.Portal, {
+    "data-slot": "alert-dialog-portal",
+    ...t
+  });
+}
+function N({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(l.Overlay, {
+    "data-slot": "alert-dialog-overlay",
+    className: r("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", t),
+    ...a
+  });
+}
+function y({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ d(p, {
+    children: [/* @__PURE__ */ e(N, {}), /* @__PURE__ */ e(l.Content, {
+      "data-slot": "alert-dialog-content",
+      className: r("bg-surface-tertiary data-[state=open]:animate-in data-[state=closed]:animate-out 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 left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", t),
+      ...a
+    })]
+  });
+}
+function b({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e("div", {
+    "data-slot": "alert-dialog-header",
+    className: r("flex flex-col gap-2 text-center sm:text-start", t),
+    ...a
+  });
+}
+function h({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e("div", {
+    "data-slot": "alert-dialog-footer",
+    className: r("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
+    ...a
+  });
+}
+function w({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(l.Title, {
+    "data-slot": "alert-dialog-title",
+    className: r("text-lg font-semibold", t),
+    ...a
+  });
+}
+function z({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(l.Description, {
+    "data-slot": "alert-dialog-description",
+    className: r("text-text-secondary! text-text-sm", t),
+    ...a
+  });
+}
+function T({
+  className: t,
+  variant: a = "default",
+  ...i
+}) {
+  return /* @__PURE__ */ e(l.Action, {
+    className: r(n({
+      variant: a
+    }), t),
+    ...i
+  });
+}
+function j({
+  className: t,
+  variant: a = "outline",
+  ...i
+}) {
+  return /* @__PURE__ */ e(l.Cancel, {
+    className: r(n({
+      variant: a
+    }), t),
+    ...i
+  });
+}
+function R({
+  title: t,
+  description: a,
+  onConfirm: i,
+  onCancel: s,
+  confirmText: c = "Confirm",
+  cancelText: f = "Cancel",
+  confirmVariant: u = "default",
+  cancelVariant: m = "outline",
+  children: g,
+  open: x,
+  onOpenChange: o,
+  dir: A
+}) {
+  return /* @__PURE__ */ d(D, {
+    open: x,
+    onOpenChange: o,
+    children: [/* @__PURE__ */ e(v, {
+      asChild: !0,
+      children: g
+    }), /* @__PURE__ */ d(y, {
+      dir: A,
+      children: [/* @__PURE__ */ d(b, {
+        children: [/* @__PURE__ */ e(w, {
+          children: t
+        }), a && /* @__PURE__ */ e(z, {
+          children: a
+        })]
+      }), /* @__PURE__ */ d(h, {
+        children: [/* @__PURE__ */ e(j, {
+          variant: m,
+          onClick: () => {
+            s == null || s(), o == null || o(!1);
+          },
+          children: f
+        }), /* @__PURE__ */ e(T, {
+          variant: u,
+          onClick: () => {
+            i(), o == null || o(!1);
+          },
+          children: c
+        })]
+      })]
+    })]
+  });
+}
+export {
+  R as AlertDialog,
+  T as AlertDialogAction,
+  D as AlertDialogBase,
+  j as AlertDialogCancel,
+  y as AlertDialogContent,
+  z as AlertDialogDescription,
+  h as AlertDialogFooter,
+  b as AlertDialogHeader,
+  N as AlertDialogOverlay,
+  p as AlertDialogPortal,
+  w as AlertDialogTitle,
+  v as AlertDialogTrigger
+};

package/dist/components/aspect-ratio/AspectRatio.d.ts

@@ -0,0 +1,4 @@
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { AspectRatio };
+//# sourceMappingURL=AspectRatio.d.ts.map

package/dist/components/aspect-ratio/AspectRatio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../../src/components/aspect-ratio/AspectRatio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAErE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/aspect-ratio/AspectRatio.js

@@ -0,0 +1,13 @@
+import * as o from "@radix-ui/react-aspect-ratio";
+import { jsx as i } from "react/jsx-runtime";
+function a({
+  ...t
+}) {
+  return /* @__PURE__ */ i(o.Root, {
+    "data-slot": "aspect-ratio",
+    ...t
+  });
+}
+export {
+  a as AspectRatio
+};

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { type VariantProps } from 'class-variance-authority';
+declare function AvatarBase({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarBaseImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarBaseFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "lg" | "xl" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AvatarProps extends VariantProps<typeof avatarVariants> {
+    name: string;
+    src?: string;
+    alt?: string;
+    isPremium?: boolean;
+    className?: string;
+}
+declare function Avatar({ name, src, alt, isPremium, size, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarBase, AvatarBaseImage, AvatarBaseFallback };
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAMlE,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAWnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAWvD;AAGD,QAAA,MAAM,cAAc;;8EAYlB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,MAAM,CAAC,EACd,IAAI,EACJ,GAAG,EACH,GAAG,EACH,SAAiB,EACjB,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,2CAoBb;AAED,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,86 @@
+import * as s from "@radix-ui/react-avatar";
+import { Crown as u } from "lucide-react";
+import { cva as v } from "class-variance-authority";
+import { cn as r } from "@inspirecn/ui/lib/utils";
+import { getInitials as b } from "@inspirecn/ui/lib/string";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+function g({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(s.Root, {
+    "data-slot": "avatar",
+    className: r("relative flex shrink-0 overflow-hidden rounded-full", a),
+    ...e
+  });
+}
+function h({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(s.Image, {
+    "data-slot": "avatar-image",
+    className: r("aspect-square size-full", a),
+    ...e
+  });
+}
+function p({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(s.Fallback, {
+    "data-slot": "avatar-fallback",
+    className: r("bg-muted flex size-full items-center justify-center rounded-full", a),
+    ...e
+  });
+}
+const z = v("border-2 border-border", {
+  variants: {
+    size: {
+      sm: "size-9",
+      md: "size-10",
+      lg: "size-11",
+      xl: "size-12"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function j({
+  name: a,
+  src: e,
+  alt: l,
+  isPremium: o = !1,
+  size: n,
+  className: m,
+  ...c
+}) {
+  const d = b(a), f = l || `${a}'s avatar`;
+  return /* @__PURE__ */ i("div", {
+    className: "relative",
+    children: [/* @__PURE__ */ i(g, {
+      className: r(z({
+        size: n
+      }), m),
+      ...c,
+      children: [/* @__PURE__ */ t(h, {
+        src: e,
+        alt: f
+      }), /* @__PURE__ */ t(p, {
+        children: d
+      })]
+    }), o && /* @__PURE__ */ t("div", {
+      className: "absolute bottom-0 right-0 rounded-full bg-orange-500 p-0.5 shadow-md",
+      children: /* @__PURE__ */ t(u, {
+        className: "size-3 text-white"
+      })
+    })]
+  });
+}
+export {
+  j as Avatar,
+  g as AvatarBase,
+  p as AvatarBaseFallback,
+  h as AvatarBaseImage
+};

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    radius?: "sm" | "lg" | "none" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface BadgeProps extends React.ComponentProps<"span"> {
+    variant?: VariantProps<typeof badgeVariants>["variant"];
+    radius?: VariantProps<typeof badgeVariants>["radius"];
+    asChild?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function Badge({ className, variant, radius, asChild, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;;8EAyBlB,CAAC;AAEF,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IACvD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,MAAa,EACb,OAAe,EACf,GAAG,KAAK,EACT,EAAE,UAAU,2CAUZ;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}