@cryptlex/web-components 1.0.0

package/README.md

@@ -0,0 +1,39 @@
+# @cryptlex/web-components
+
+A set of React components based on shadcn/ui for the Cryptlex brand. These are to be used across all applications. Run `pnpm build` to build the component library.
+
+## Storybook
+This project uses Storybook to test and showcase components. Stories are located in the `stories` folder.
+
+`pnpm storybook` for running Storybook locally
+`pnpn build:storybook` to build a static version of Storybook
+
+
+
+tailwind.config.js
+```ts 
+import tailwindPreset from '@cryptlex/web-components/tailwind-preset';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets:[tailwindPreset],
+ content: [
+    "./index.html",
+     "./src/**/*.{js,ts,jsx,tsx}",
+      './node_modules/@cryptlex/web-components/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
+ 
+```
+index.css
+
+```css
+/* Import the index.css from the @cryptlex/web-components library */
+@import url('@cryptlex/web-components/index.css');
+
+```

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

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cva as n } from "class-variance-authority";
+import { cn as a } from "../../utils/index.es.js";
+const s = n(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function c({ className: r, variant: e, ...t }) {
+  return /* @__PURE__ */ o("div", { className: a(s({ variant: e }), r), ...t });
+}
+export {
+  c as Badge,
+  s as badgeVariants
+};
+//# sourceMappingURL=badge.es.js.map

package/dist/components/ui/badge.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.es.js","sources":["../../../lib/components/ui/badge.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  )\n}\n\nexport { Badge, badgeVariants }\n"],"names":["badgeVariants","cva","Badge","className","variant","props","jsx","cn"],"mappings":";;;AAKA,MAAMA,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAMA,SAASC,EAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,KAAqB;AAC3D,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAGP,EAAc,EAAE,SAAAI,EAAS,CAAA,GAAGD,CAAS,GAAI,GAAGE,EAAO,CAAA;AAE1E;"}

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

@@ -0,0 +1,91 @@
+import { jsx as s, jsxs as i } from "react/jsx-runtime";
+import * as t from "react";
+import { ChevronRightIcon as n, DotsHorizontalIcon as c } from "@radix-ui/react-icons";
+import { Slot as d } from "@radix-ui/react-slot";
+import { cn as o } from "../../utils/index.es.js";
+const l = t.forwardRef(({ ...r }, e) => /* @__PURE__ */ s("nav", { ref: e, "aria-label": "breadcrumb", ...r }));
+l.displayName = "Breadcrumb";
+const p = t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ s(
+  "ol",
+  {
+    ref: a,
+    className: o(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      r
+    ),
+    ...e
+  }
+));
+p.displayName = "BreadcrumbList";
+const u = t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ s(
+  "li",
+  {
+    ref: a,
+    className: o("inline-flex items-center gap-1.5", r),
+    ...e
+  }
+));
+u.displayName = "BreadcrumbItem";
+const f = t.forwardRef(({ asChild: r, className: e, ...a }, m) => /* @__PURE__ */ s(
+  r ? d : "a",
+  {
+    ref: m,
+    className: o("transition-colors hover:text-foreground", e),
+    ...a
+  }
+));
+f.displayName = "BreadcrumbLink";
+const b = t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ s(
+  "span",
+  {
+    ref: a,
+    role: "link",
+    "aria-disabled": "true",
+    "aria-current": "page",
+    className: o("font-normal text-foreground", r),
+    ...e
+  }
+));
+b.displayName = "BreadcrumbPage";
+const N = ({
+  children: r,
+  className: e,
+  ...a
+}) => /* @__PURE__ */ s(
+  "li",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: o("[&>svg]:w-3.5 [&>svg]:h-3.5", e),
+    ...a,
+    children: r ?? /* @__PURE__ */ s(n, {})
+  }
+);
+N.displayName = "BreadcrumbSeparator";
+const B = ({
+  className: r,
+  ...e
+}) => /* @__PURE__ */ i(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: o("flex h-9 w-9 items-center justify-center", r),
+    ...e,
+    children: [
+      /* @__PURE__ */ s(c, { className: "h-4 w-4" }),
+      /* @__PURE__ */ s("span", { className: "sr-only", children: "More" })
+    ]
+  }
+);
+B.displayName = "BreadcrumbElipssis";
+export {
+  l as Breadcrumb,
+  B as BreadcrumbEllipsis,
+  u as BreadcrumbItem,
+  f as BreadcrumbLink,
+  p as BreadcrumbList,
+  b as BreadcrumbPage,
+  N as BreadcrumbSeparator
+};
+//# sourceMappingURL=breadcrumb.es.js.map

package/dist/components/ui/breadcrumb.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.es.js","sources":["../../../lib/components/ui/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ChevronRightIcon, DotsHorizontalIcon } from \"@radix-ui/react-icons\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:w-3.5 [&>svg]:h-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRightIcon />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <DotsHorizontalIcon className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n"],"names":["Breadcrumb","React","props","ref","jsx","BreadcrumbList","className","cn","BreadcrumbItem","BreadcrumbLink","asChild","Slot","BreadcrumbPage","BreadcrumbSeparator","children","ChevronRightIcon","BreadcrumbEllipsis","jsxs","DotsHorizontalIcon"],"mappings":";;;;;AAMA,MAAMA,IAAaC,EAAM,WAKvB,CAAC,EAAE,GAAGC,EAAM,GAAGC,MAAQ,gBAAAC,EAAC,SAAI,KAAAD,GAAU,cAAW,cAAc,GAAGD,GAAO,CAAE;AAC7EF,EAAW,cAAc;AAEnB,MAAAK,IAAiBJ,EAAM,WAG3B,CAAC,EAAE,WAAAK,GAAW,GAAGJ,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWI;AAAA,MACT;AAAA,MACAD;AAAA,IACF;AAAA,IACC,GAAGJ;AAAA,EAAA;AACN,CACD;AACDG,EAAe,cAAc;AAEvB,MAAAG,IAAiBP,EAAM,WAG3B,CAAC,EAAE,WAAAK,GAAW,GAAGJ,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWI,EAAG,oCAAoCD,CAAS;AAAA,IAC1D,GAAGJ;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAEvB,MAAAC,IAAiBR,EAAM,WAK3B,CAAC,EAAE,SAAAS,GAAS,WAAAJ,GAAW,GAAGJ,EAAM,GAAGC,MAIjC,gBAAAC;AAAA,EAHWM,IAAUC,IAAO;AAAA,EAG3B;AAAA,IACC,KAAAR;AAAA,IACA,WAAWI,EAAG,2CAA2CD,CAAS;AAAA,IACjE,GAAGJ;AAAA,EAAA;AACN,CAEH;AACDO,EAAe,cAAc;AAEvB,MAAAG,IAAiBX,EAAM,WAG3B,CAAC,EAAE,WAAAK,GAAW,GAAGJ,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,MAAK;AAAA,IACL,iBAAc;AAAA,IACd,gBAAa;AAAA,IACb,WAAWI,EAAG,+BAA+BD,CAAS;AAAA,IACrD,GAAGJ;AAAA,EAAA;AACN,CACD;AACDU,EAAe,cAAc;AAE7B,MAAMC,IAAsB,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,WAAAR;AAAA,EACA,GAAGJ;AACL,MACE,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,WAAWG,EAAG,+BAA+BD,CAAS;AAAA,IACrD,GAAGJ;AAAA,IAEH,UAAAY,uBAAaC,GAAiB,CAAA,CAAA;AAAA,EAAA;AACjC;AAEFF,EAAoB,cAAc;AAElC,MAAMG,IAAqB,CAAC;AAAA,EAC1B,WAAAV;AAAA,EACA,GAAGJ;AACL,MACE,gBAAAe;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,WAAWV,EAAG,4CAA4CD,CAAS;AAAA,IAClE,GAAGJ;AAAA,IAEJ,UAAA;AAAA,MAAC,gBAAAE,EAAAc,GAAA,EAAmB,WAAU,UAAU,CAAA;AAAA,MACvC,gBAAAd,EAAA,QAAA,EAAK,WAAU,WAAU,UAAI,OAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAChC;AAEFY,EAAmB,cAAc;"}

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

@@ -0,0 +1,64 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import * as g from "react";
+import { Slot as b } from "@radix-ui/react-slot";
+import { cva as p } from "class-variance-authority";
+import { cn as v } from "../../utils/index.es.js";
+import { Loader as h } from "./loader.es.js";
+const x = p(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+), y = g.forwardRef(
+  ({
+    className: i,
+    variant: s,
+    size: a,
+    loading: t,
+    disabled: d,
+    asChild: c = !1,
+    icon: o,
+    children: e,
+    ...u
+  }, f) => {
+    const l = c ? b : "button", n = o;
+    return /* @__PURE__ */ m(
+      l,
+      {
+        className: v(x({ variant: s, size: a, className: i })),
+        ref: f,
+        disabled: t || d,
+        ...u,
+        children: [
+          t ? /* @__PURE__ */ r(h, {}) : n ? /* @__PURE__ */ r(n, { className: "h-4 w-4" }) : null,
+          e ? /* @__PURE__ */ r("div", { className: o && e ? "ml-2" : "", children: e }) : null
+        ]
+      }
+    );
+  }
+);
+y.displayName = "Button";
+export {
+  y as Button,
+  x as buttonVariants
+};
+//# sourceMappingURL=button.es.js.map

package/dist/components/ui/button.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.es.js","sources":["../../../lib/components/ui/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\nimport { Loader } from \"./loader\";\nimport { LucideIcon } from \"lucide-react\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  loading?: boolean;\n  icon?: LucideIcon;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      loading,\n      disabled,\n      asChild = false,\n      icon,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const Icon = icon;\n\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        disabled={loading || disabled}\n        {...props}\n      >\n        {/* Shows loading when `loading:true` irrespective of icon present or not; otherwise shows button icon if present */}\n        {loading ? <Loader /> : Icon ? <Icon className=\"h-4 w-4\" /> : null}\n        {/* Margin left only when both icon and children (button text) are present */}\n        {children ? (\n          <div className={icon && children ? \"ml-2\" : \"\"}>{children}</div>\n        ) : null}\n      </Comp>\n    );\n  }\n);\n\nButton.displayName = \"Button\"; // Set display name for better debugging\n\nexport { Button, buttonVariants };\n"],"names":["buttonVariants","cva","Button","React","className","variant","size","loading","disabled","asChild","icon","children","props","ref","Comp","Slot","Icon","jsxs","cn","jsx","Loader"],"mappings":";;;;;;AAQA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAUMC,IAASC,EAAM;AAAA,EACnB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACG,UAAAC,IAAOL,IAAUM,IAAO,UACxBC,IAAON;AAGX,WAAA,gBAAAO;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,WAAWI,EAAGlB,EAAe,EAAE,SAAAK,GAAS,MAAAC,GAAM,WAAAF,EAAA,CAAW,CAAC;AAAA,QAC1D,KAAAS;AAAA,QACA,UAAUN,KAAWC;AAAA,QACpB,GAAGI;AAAA,QAGH,UAAA;AAAA,UAAUL,IAAA,gBAAAY,EAACC,KAAO,IAAKJ,sBAAQA,GAAK,EAAA,WAAU,WAAU,IAAK;AAAA,UAE7DL,sBACE,OAAI,EAAA,WAAWD,KAAQC,IAAW,SAAS,IAAK,UAAAA,EAAA,CAAS,IACxD;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAEAT,EAAO,cAAc;"}

package/dist/components/ui/calendar.es.js

@@ -0,0 +1,63 @@
+import { jsx as a } from "react/jsx-runtime";
+import { ChevronLeftIcon as c, ChevronRightIcon as i } from "@radix-ui/react-icons";
+import { DayPicker as l } from "react-day-picker";
+import { cn as e } from "../../utils/index.es.js";
+import { buttonVariants as r } from "./button.es.js";
+function m({
+  className: o,
+  classNames: d,
+  showOutsideDays: n = !0,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    l,
+    {
+      showOutsideDays: n,
+      className: e("p-3", o),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: e(
+          r({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: e(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          t.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: e(
+          r({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...d
+      },
+      components: {
+        IconLeft: ({ ...s }) => /* @__PURE__ */ a(c, { className: "h-4 w-4" }),
+        IconRight: ({ ...s }) => /* @__PURE__ */ a(i, { className: "h-4 w-4" })
+      },
+      ...t
+    }
+  );
+}
+m.displayName = "Calendar";
+export {
+  m as Calendar
+};
+//# sourceMappingURL=calendar.es.js.map

package/dist/components/ui/calendar.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.es.js","sources":["../../../lib/components/ui/calendar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"],"names":["Calendar","className","classNames","showOutsideDays","props","jsx","DayPicker","cn","buttonVariants","ChevronLeftIcon","ChevronRightIcon"],"mappings":";;;;;AASA,SAASA,EAAS;AAAA,EAChB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,GAAkB;AAEd,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,iBAAAH;AAAA,MACA,WAAWI,EAAG,OAAON,CAAS;AAAA,MAC9B,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAYM;AAAA,UACVC,EAAe,EAAE,SAAS,WAAW;AAAA,UACrC;AAAA,QACF;AAAA,QACA,qBAAqB;AAAA,QACrB,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WACE;AAAA,QACF,KAAK;AAAA,QACL,MAAMD;AAAA,UACJ;AAAA,UACAH,EAAM,SAAS,UACX,yKACA;AAAA,QACN;AAAA,QACA,KAAKG;AAAA,UACHC,EAAe,EAAE,SAAS,SAAS;AAAA,UACnC;AAAA,QACF;AAAA,QACA,iBAAiB;AAAA,QACjB,eAAe;AAAA,QACf,cACE;AAAA,QACF,WAAW;AAAA,QACX,aACE;AAAA,QACF,cAAc;AAAA,QACd,kBACE;AAAA,QACF,YAAY;AAAA,QACZ,GAAGN;AAAA,MACL;AAAA,MACA,YAAY;AAAA,QACV,UAAU,CAAC,EAAE,GAAGE,EAAY,MAAA,gBAAAC,EAACI,GAAgB,EAAA,WAAU,WAAU;AAAA,QACjE,WAAW,CAAC,EAAE,GAAGL,EAAY,MAAA,gBAAAC,EAACK,GAAiB,EAAA,WAAU,UAAU,CAAA;AAAA,MACrE;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ;AACAJ,EAAS,cAAc;"}

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

@@ -0,0 +1,68 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as o } from "../../utils/index.es.js";
+const s = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: r,
+    className: o(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      a
+    ),
+    ...e
+  }
+));
+s.displayName = "Card";
+const i = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: r,
+    className: o("flex flex-col space-y-1.5 p-6", a),
+    ...e
+  }
+));
+i.displayName = "CardHeader";
+const l = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+  "h3",
+  {
+    ref: r,
+    className: o(
+      "text-2xl font-semibold leading-none tracking-tight",
+      a
+    ),
+    ...e
+  }
+));
+l.displayName = "CardTitle";
+const f = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+  "p",
+  {
+    ref: r,
+    className: o("text-sm text-muted-foreground", a),
+    ...e
+  }
+));
+f.displayName = "CardDescription";
+const m = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d("div", { ref: r, className: o("p-6 pt-0", a), ...e }));
+m.displayName = "CardContent";
+const n = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: r,
+    className: o(
+      "flex items-center p-6 pt-0  w-full gap-4 justify-end",
+      a
+    ),
+    ...e
+  }
+));
+n.displayName = "CardFooter";
+export {
+  s as Card,
+  m as CardContent,
+  f as CardDescription,
+  n as CardFooter,
+  i as CardHeader,
+  l as CardTitle
+};
+//# sourceMappingURL=card.es.js.map

package/dist/components/ui/card.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.es.js","sources":["../../../lib/components/ui/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/utils\";\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n));\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"flex items-center p-6 pt-0  w-full gap-4 justify-end\",\n      className\n    )}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n};\n"],"names":["Card","React","className","props","ref","jsx","cn","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;AAGM,MAAAA,IAAOC,EAAM,WAGjB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAK,cAAc;AAEb,MAAAO,IAAaN,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAW,cAAc;AAEnB,MAAAC,IAAYP,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAU,cAAc;AAElB,MAAAC,IAAkBR,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAgB,cAAc;AAExB,MAAAC,IAAcT,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAS,GAAAC,wBACzB,OAAI,EAAA,KAAAA,GAAU,WAAWE,EAAG,YAAYJ,CAAS,GAAI,GAAGC,GAAO,CACjE;AACDO,EAAY,cAAc;AAEpB,MAAAC,IAAaV,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAW,cAAc;"}

package/dist/components/ui/chart.es.js

@@ -0,0 +1,211 @@
+import { jsx as s, jsxs as v, Fragment as P } from "react/jsx-runtime";
+import * as g from "react";
+import * as C from "recharts";
+import { cn as i } from "../../utils/index.es.js";
+const I = { light: "", dark: ".dark" }, j = g.createContext(null);
+function $() {
+  const c = g.useContext(j);
+  if (!c)
+    throw new Error("useChart must be used within a <ChartContainer />");
+  return c;
+}
+const S = g.forwardRef(({ id: c, className: e, children: t, config: n, ...o }, f) => {
+  const l = g.useId(), a = `chart-${c || l.replace(/:/g, "")}`;
+  return /* @__PURE__ */ s(j.Provider, { value: { config: n }, children: /* @__PURE__ */ v(
+    "div",
+    {
+      "data-chart": a,
+      ref: f,
+      className: i(
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+        e
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ s(E, { id: a, config: n }),
+        /* @__PURE__ */ s(C.ResponsiveContainer, { children: t })
+      ]
+    }
+  ) });
+});
+S.displayName = "Chart";
+const E = ({ id: c, config: e }) => {
+  const t = Object.entries(e).filter(
+    ([n, o]) => o.theme || o.color
+  );
+  return t.length ? /* @__PURE__ */ s(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(I).map(
+          ([n, o]) => `
+${o} [data-chart=${c}] {
+${t.map(([f, l]) => {
+            var h;
+            const a = ((h = l.theme) == null ? void 0 : h[n]) || l.color;
+            return a ? `  --color-${f}: ${a};` : null;
+          }).join(`
+`)}
+}
+`
+        ).join(`
+`)
+      }
+    }
+  ) : null;
+}, q = C.Tooltip, K = g.forwardRef(
+  ({
+    active: c,
+    payload: e,
+    className: t,
+    indicator: n = "dot",
+    hideLabel: o = !1,
+    hideIndicator: f = !1,
+    label: l,
+    labelFormatter: a,
+    labelClassName: h,
+    formatter: u,
+    color: L,
+    nameKey: R,
+    labelKey: _
+  }, T) => {
+    const { config: p } = $(), N = g.useMemo(() => {
+      var x;
+      if (o || !(e != null && e.length))
+        return null;
+      const [r] = e, w = `${_ || r.dataKey || r.name || "value"}`, m = k(p, r, w), d = !_ && typeof l == "string" ? ((x = p[l]) == null ? void 0 : x.label) || l : m == null ? void 0 : m.label;
+      return a ? /* @__PURE__ */ s("div", { className: i("font-medium", h), children: a(d, e) }) : d ? /* @__PURE__ */ s("div", { className: i("font-medium", h), children: d }) : null;
+    }, [
+      l,
+      a,
+      e,
+      o,
+      h,
+      p,
+      _
+    ]);
+    if (!c || !(e != null && e.length))
+      return null;
+    const b = e.length === 1 && n !== "dot";
+    return /* @__PURE__ */ v(
+      "div",
+      {
+        ref: T,
+        className: i(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          t
+        ),
+        children: [
+          b ? null : N,
+          /* @__PURE__ */ s("div", { className: "grid gap-1.5", children: e.map((r, w) => {
+            const m = `${R || r.name || r.dataKey || "value"}`, d = k(p, r, m), x = L || r.payload.fill || r.color;
+            return /* @__PURE__ */ s(
+              "div",
+              {
+                className: i(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  n === "dot" && "items-center"
+                ),
+                children: u && (r == null ? void 0 : r.value) !== void 0 && r.name ? u(r.value, r.name, r, w, r.payload) : /* @__PURE__ */ v(P, { children: [
+                  d != null && d.icon ? /* @__PURE__ */ s(d.icon, {}) : !f && /* @__PURE__ */ s(
+                    "div",
+                    {
+                      className: i(
+                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                        {
+                          "h-2.5 w-2.5": n === "dot",
+                          "w-1": n === "line",
+                          "w-0 border-[1.5px] border-dashed bg-transparent": n === "dashed",
+                          "my-0.5": b && n === "dashed"
+                        }
+                      ),
+                      style: {
+                        "--color-bg": x,
+                        "--color-border": x
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ v(
+                    "div",
+                    {
+                      className: i(
+                        "flex flex-1 justify-between leading-none",
+                        b ? "items-end" : "items-center"
+                      ),
+                      children: [
+                        /* @__PURE__ */ v("div", { className: "grid gap-1.5", children: [
+                          b ? N : null,
+                          /* @__PURE__ */ s("span", { className: "text-muted-foreground", children: (d == null ? void 0 : d.label) || r.name })
+                        ] }),
+                        r.value && /* @__PURE__ */ s("span", { className: "font-mono font-medium tabular-nums text-foreground", children: r.value.toLocaleString() })
+                      ]
+                    }
+                  )
+                ] })
+              },
+              r.dataKey
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+K.displayName = "ChartTooltip";
+const y = C.Legend, M = g.forwardRef(
+  ({ className: c, hideIcon: e = !1, payload: t, verticalAlign: n = "bottom", nameKey: o }, f) => {
+    const { config: l } = $();
+    return t != null && t.length ? /* @__PURE__ */ s(
+      "div",
+      {
+        ref: f,
+        className: i(
+          "flex items-center justify-center gap-4",
+          n === "top" ? "pb-3" : "pt-3",
+          c
+        ),
+        children: t.map((a) => {
+          const h = `${o || a.dataKey || "value"}`, u = k(l, a, h);
+          return /* @__PURE__ */ v(
+            "div",
+            {
+              className: i(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              ),
+              children: [
+                u != null && u.icon && !e ? /* @__PURE__ */ s(u.icon, {}) : /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: "h-2 w-2 shrink-0 rounded-[2px]",
+                    style: {
+                      backgroundColor: a.color
+                    }
+                  }
+                ),
+                u == null ? void 0 : u.label
+              ]
+            },
+            a.value
+          );
+        })
+      }
+    ) : null;
+  }
+);
+M.displayName = "ChartLegend";
+function k(c, e, t) {
+  if (typeof e != "object" || e === null)
+    return;
+  const n = "payload" in e && typeof e.payload == "object" && e.payload !== null ? e.payload : void 0;
+  let o = t;
+  return t in e && typeof e[t] == "string" ? o = e[t] : n && t in n && typeof n[t] == "string" && (o = n[t]), o in c ? c[o] : c[t];
+}
+export {
+  S as ChartContainer,
+  y as ChartLegend,
+  M as ChartLegendContent,
+  E as ChartStyle,
+  q as ChartTooltip,
+  K as ChartTooltipContent
+};
+//# sourceMappingURL=chart.es.js.map