@cryptlex/web-components 1.2.0 → 1.2.1

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

@@ -0,0 +1,21 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Toaster as r } from "sonner";
+const s = ({ ...t }) => /* @__PURE__ */ o(
+  r,
+  {
+    className: "toaster group",
+    toastOptions: {
+      classNames: {
+        toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+        description: "group-[.toast]:text-muted-foreground",
+        actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+        cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+      }
+    },
+    ...t
+  }
+);
+export {
+  s as Toaster
+};
+//# sourceMappingURL=sonner.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sonner.es.js","sources":["../../../lib/components/ui/sonner.tsx"],"sourcesContent":["import { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n\n\n  return (\n    <Sonner\n      className=\"toaster group\"\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n          description: \"group-[.toast]:text-muted-foreground\",\n          actionButton:\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n          cancelButton:\n            \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n"],"names":["Toaster","props","jsx","Sonner"],"mappings":";;AAIA,MAAMA,IAAU,CAAC,EAAE,GAAGC,QAIlB,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,cAAc;AAAA,MACZ,YAAY;AAAA,QACV,OACE;AAAA,QACF,aAAa;AAAA,QACb,cACE;AAAA,QACF,cACE;AAAA,MAAA;AAAA,IAEN;AAAA,IACC,GAAGF;AAAA,EAAA;AACN;"}

package/dist/index.es.d.ts

@@ -34,6 +34,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { SeparatorProps } from '@radix-ui/react-separator';
 import { SlotProps } from '@radix-ui/react-slot';
+import { Toaster as Toaster_2 } from 'sonner';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { UniqueOption } from 'recharts/types/util/payload/getUniqPayload';
 import { ValueType } from 'recharts/types/component/DefaultTooltipContent';
@@ -597,6 +598,10 @@ declare const THEMES: {
     readonly dark: ".dark";
 };
 
+export declare const Toaster: ({ ...props }: ToasterProps) => JSX_2.Element;
+
+declare type ToasterProps = React.ComponentProps<typeof Toaster_2>;
+
 export declare const Tooltip: React_2.FC<TooltipPrimitive.TooltipProps>;
 
 export declare const TooltipContent: React_2.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;

package/dist/index.es.js

@@ -2,13 +2,13 @@ import { Badge as r, badgeVariants as t } from "./components/ui/badge.es.js";
 import { Breadcrumb as n, BreadcrumbEllipsis as i, BreadcrumbItem as d, BreadcrumbLink as p, BreadcrumbList as l, BreadcrumbPage as m, BreadcrumbSeparator as u } from "./components/ui/breadcrumb.es.js";
 import { Button as g, buttonVariants as b } from "./components/ui/button.es.js";
 import { Calendar as c } from "./components/ui/calendar.es.js";
-import { Card as x, CardContent as D, CardDescription as f, CardFooter as s, CardHeader as T, CardTitle as h } from "./components/ui/card.es.js";
+import { Card as x, CardContent as f, CardDescription as D, CardFooter as s, CardHeader as T, CardTitle as h } from "./components/ui/card.es.js";
 import { ChartContainer as v, ChartLegend as w, ChartLegendContent as P, ChartStyle as B, ChartTooltip as F, ChartTooltipContent as L } from "./components/ui/chart.es.js";
 import { Checkbox as N } from "./components/ui/checkbox.es.js";
 import { Collapsible as A, CollapsibleContent as y, CollapsibleTrigger as H } from "./components/ui/collapsible.es.js";
 import { Command as V, CommandDialog as E, CommandEmpty as O, CommandGroup as U, CommandInput as j, CommandItem as q, CommandList as z, CommandSeparator as J, CommandShortcut as K } from "./components/ui/command.es.js";
 import { Dialog as W, DialogClose as X, DialogContent as Y, DialogDescription as Z, DialogFooter as _, DialogHeader as $, DialogOverlay as ee, DialogPortal as oe, DialogTitle as re, DialogTrigger as te } from "./components/ui/dialog.es.js";
-import { DropdownMenu as ne, DropdownMenuCheckboxItem as ie, DropdownMenuContent as de, DropdownMenuGroup as pe, DropdownMenuItem as le, DropdownMenuLabel as me, DropdownMenuPortal as ue, DropdownMenuRadioGroup as Se, DropdownMenuRadioItem as ge, DropdownMenuSeparator as be, DropdownMenuShortcut as Ce, DropdownMenuSub as ce, DropdownMenuSubContent as Me, DropdownMenuSubTrigger as xe, DropdownMenuTrigger as De } from "./components/ui/dropdown-menu.es.js";
+import { DropdownMenu as ne, DropdownMenuCheckboxItem as ie, DropdownMenuContent as de, DropdownMenuGroup as pe, DropdownMenuItem as le, DropdownMenuLabel as me, DropdownMenuPortal as ue, DropdownMenuRadioGroup as Se, DropdownMenuRadioItem as ge, DropdownMenuSeparator as be, DropdownMenuShortcut as Ce, DropdownMenuSub as ce, DropdownMenuSubContent as Me, DropdownMenuSubTrigger as xe, DropdownMenuTrigger as fe } from "./components/ui/dropdown-menu.es.js";
 import { Form as se, FormControl as Te, FormDescription as he, FormField as Ie, FormItem as ve, FormLabel as we, FormMessage as Pe, useFormField as Be } from "./components/ui/form.es.js";
 import { Input as Le } from "./components/ui/input.es.js";
 import { Label as Ne } from "./components/ui/label.es.js";
@@ -19,15 +19,16 @@ import { Popover as Ke, PopoverAnchor as Qe, PopoverContent as We, PopoverTrigge
 import { RadioGroup as Ze, RadioGroupItem as _e } from "./components/ui/radio-group.es.js";
 import { Select as eo, SelectContent as oo, SelectGroup as ro, SelectItem as to, SelectLabel as ao, SelectScrollDownButton as no, SelectScrollUpButton as io, SelectSeparator as po, SelectTrigger as lo, SelectValue as mo } from "./components/ui/select.es.js";
 import { Separator as So } from "./components/ui/separator.es.js";
-import { Sheet as bo, SheetClose as Co, SheetContent as co, SheetDescription as Mo, SheetFooter as xo, SheetHeader as Do, SheetOverlay as fo, SheetPortal as so, SheetTitle as To, SheetTrigger as ho } from "./components/ui/sheet.es.js";
+import { Sheet as bo, SheetClose as Co, SheetContent as co, SheetDescription as Mo, SheetFooter as xo, SheetHeader as fo, SheetOverlay as Do, SheetPortal as so, SheetTitle as To, SheetTrigger as ho } from "./components/ui/sheet.es.js";
 import { Sidebar as vo, SidebarContent as wo, SidebarFooter as Po, SidebarGroup as Bo, SidebarGroupAction as Fo, SidebarGroupContent as Lo, SidebarGroupLabel as Go, SidebarHeader as No, SidebarInput as ko, SidebarInset as Ao, SidebarMenu as yo, SidebarMenuAction as Ho, SidebarMenuBadge as Ro, SidebarMenuButton as Vo, SidebarMenuItem as Eo, SidebarMenuSkeleton as Oo, SidebarMenuSub as Uo, SidebarMenuSubButton as jo, SidebarMenuSubItem as qo, SidebarProvider as zo, SidebarRail as Jo, SidebarSeparator as Ko, SidebarTrigger as Qo, useSidebar as Wo } from "./components/ui/sidebar.es.js";
 import { Skeleton as Yo } from "./components/ui/skeleton.es.js";
 import { Table as _o, TableBody as $o, TableCaption as er, TableCell as or, TableFooter as rr, TableHead as tr, TableHeader as ar, TableRow as nr } from "./components/ui/table.es.js";
 import { Tooltip as dr, TooltipContent as pr, TooltipProvider as lr, TooltipTrigger as mr } from "./components/ui/tooltip.es.js";
 import { Accordion as Sr, AccordionContent as gr, AccordionItem as br, AccordionTrigger as Cr } from "./components/ui/accordion.es.js";
-import { NavigationMenu as Mr, NavigationMenuContent as xr, NavigationMenuIndicator as Dr, NavigationMenuItem as fr, NavigationMenuLink as sr, NavigationMenuList as Tr, NavigationMenuListItem as hr, NavigationMenuTrigger as Ir, NavigationMenuViewport as vr, navigationMenuTriggerStyle as wr } from "./components/ui/navigation-menu.es.js";
-import { useIsMobile as Br } from "./hooks/use-mobile.es.js";
-import { cn as Lr } from "./utils/index.es.js";
+import { NavigationMenu as Mr, NavigationMenuContent as xr, NavigationMenuIndicator as fr, NavigationMenuItem as Dr, NavigationMenuLink as sr, NavigationMenuList as Tr, NavigationMenuListItem as hr, NavigationMenuTrigger as Ir, NavigationMenuViewport as vr, navigationMenuTriggerStyle as wr } from "./components/ui/navigation-menu.es.js";
+import { Toaster as Br } from "./components/ui/sonner.es.js";
+import { useIsMobile as Lr } from "./hooks/use-mobile.es.js";
+import { cn as Nr } from "./utils/index.es.js";
 export {
   Sr as Accordion,
   gr as AccordionContent,
@@ -44,8 +45,8 @@ export {
   g as Button,
   c as Calendar,
   x as Card,
-  D as CardContent,
-  f as CardDescription,
+  f as CardContent,
+  D as CardDescription,
   s as CardFooter,
   T as CardHeader,
   h as CardTitle,
@@ -92,7 +93,7 @@ export {
   ce as DropdownMenuSub,
   Me as DropdownMenuSubContent,
   xe as DropdownMenuSubTrigger,
-  De as DropdownMenuTrigger,
+  fe as DropdownMenuTrigger,
   se as Form,
   Te as FormControl,
   he as FormDescription,
@@ -105,8 +106,8 @@ export {
   Ae as Loader,
   Mr as NavigationMenu,
   xr as NavigationMenuContent,
-  Dr as NavigationMenuIndicator,
-  fr as NavigationMenuItem,
+  fr as NavigationMenuIndicator,
+  Dr as NavigationMenuItem,
   sr as NavigationMenuLink,
   Tr as NavigationMenuList,
   hr as NavigationMenuListItem,
@@ -142,8 +143,8 @@ export {
   co as SheetContent,
   Mo as SheetDescription,
   xo as SheetFooter,
-  Do as SheetHeader,
-  fo as SheetOverlay,
+  fo as SheetHeader,
+  Do as SheetOverlay,
   so as SheetPortal,
   To as SheetTitle,
   ho as SheetTrigger,
@@ -179,16 +180,17 @@ export {
   tr as TableHead,
   ar as TableHeader,
   nr as TableRow,
+  Br as Toaster,
   dr as Tooltip,
   pr as TooltipContent,
   lr as TooltipProvider,
   mr as TooltipTrigger,
   t as badgeVariants,
   b as buttonVariants,
-  Lr as cn,
+  Nr as cn,
   wr as navigationMenuTriggerStyle,
   Be as useFormField,
-  Br as useIsMobile,
+  Lr as useIsMobile,
   Wo as useSidebar
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/index.css

@@ -61,6 +61,10 @@
     @apply border-border;
   }
 
+  a {
+    @apply link;
+  }
+
   h1 {
     @apply text-heading-1 my-v3;
   }
@@ -93,4 +97,10 @@
     @apply bg-background text-foreground;
   }
 
+}
+
+@layer components {
+  .link {
+    @apply text-primary underline hover:underline-offset-2 hover:text-primary/70;
+  }
 }

package/lib/tokens.css

@@ -12,8 +12,8 @@
   --xprimary-6: 0.5 0.13 var(--primary-hue);
   --xprimary-7: 0.35 0.13 var(--primary-hue);
   --xprimary-8: 0.25 0.13 var(--primary-hue);
-  --xprimary-9: 0.13 0.13 var(--primary-hue);
-  --xprimary-10: 0.05 0.13 var(--primary-hue);
+  --xprimary-9: 0.20 0.09 var(--primary-hue);
+  --xprimary-10: 0.10 0.03 var(--primary-hue);
   --primary-1: var(--xprimary-1);
   --primary-2: var(--xprimary-2);
   --primary-3: var(--xprimary-3);
@@ -33,8 +33,8 @@
   --xsecondary-6: 0.5 0.13 var(--secondary-hue);
   --xsecondary-7: 0.35 0.13 var(--secondary-hue);
   --xsecondary-8: 0.25 0.13 var(--secondary-hue);
-  --xsecondary-9: 0.13 0.13 var(--secondary-hue);
-  --xsecondary-10: 0.05 0.13 var(--secondary-hue);
+  --xsecondary-9: 0.20 0.09 var(--secondary-hue);
+  --xsecondary-10: 0.10 0.03 var(--secondary-hue);
   --secondary-1: var(--xsecondary-1);
   --secondary-2: var(--xsecondary-2);
   --secondary-3: var(--xsecondary-3);
@@ -54,8 +54,8 @@
   --xdestructive-6: 0.5 0.13 var(--destructive-hue);
   --xdestructive-7: 0.35 0.13 var(--destructive-hue);
   --xdestructive-8: 0.25 0.13 var(--destructive-hue);
-  --xdestructive-9: 0.13 0.13 var(--destructive-hue);
-  --xdestructive-10: 0.05 0.13 var(--destructive-hue);
+  --xdestructive-9: 0.20 0.09 var(--destructive-hue);
+  --xdestructive-10: 0.10 0.03 var(--destructive-hue);
   --destructive-1: var(--xdestructive-1);
   --destructive-2: var(--xdestructive-2);
   --destructive-3: var(--xdestructive-3);
@@ -75,8 +75,8 @@
   --xsuccess-6: 0.5 0.13 var(--success-hue);
   --xsuccess-7: 0.35 0.13 var(--success-hue);
   --xsuccess-8: 0.25 0.13 var(--success-hue);
-  --xsuccess-9: 0.13 0.13 var(--success-hue);
-  --xsuccess-10: 0.05 0.13 var(--success-hue);
+  --xsuccess-9: 0.20 0.09 var(--success-hue);
+  --xsuccess-10: 0.10 0.03 var(--success-hue);
   --success-1: var(--xsuccess-1);
   --success-2: var(--xsuccess-2);
   --success-3: var(--xsuccess-3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -49,13 +49,14 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
-    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "sonner": "^1.7.0",
     "@tanstack/react-table": "^8.20.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

package/tailwind.preset.ts

@@ -1,5 +1,12 @@
 import type { Config } from 'tailwindcss';
 
+const tokenRamps = (paletteName: string) => {
+  const ramps = {};
+  for (let i = 1; i <= 10; i++) {
+    ramps[i] = `oklch(var(--${paletteName}-${i}) / <alpha-value>)`
+  }
+  return ramps;
+}
 export default {
   // Enable dark mode based on class.
   darkMode: ['class'],
@@ -29,10 +36,15 @@ export default {
       primary: {
         DEFAULT: 'oklch(var(--primary) / <alpha-value>)',
         foreground: 'oklch(var(--primary-foreground) / <alpha-value>)',
+        ...tokenRamps('primary')
       },
       secondary: {
         DEFAULT: 'oklch(var(--secondary) / <alpha-value>)',
         foreground: 'oklch(var(--secondary-foreground) / <alpha-value>)',
+        ...tokenRamps('secondary')
+      },
+      neutral: {
+        ...tokenRamps('neutral')
       },
       muted: {
         DEFAULT: 'oklch(var(--muted) / <alpha-value>)',
@@ -45,10 +57,12 @@ export default {
       destructive: {
         DEFAULT: 'oklch(var(--destructive) / <alpha-value>)',
         foreground: 'oklch(var(--destructive-foreground) / <alpha-value>)',
+        ...tokenRamps('destructive')
       },
       success: {
         DEFAULT: 'oklch(var(--success) / <alpha-value>)',
         foreground: 'oklch(var(--success-foreground) / <alpha-value>)',
+        ...tokenRamps('success')
       },
       border: 'oklch(var(--border) / <alpha-value>)',
       input: 'oklch(var(--input) / <alpha-value>)',