Layers

package.json

@@ -24,6 +24,10 @@
       {
         "name": "navbar",
         "prerelease": true
+      },
+      {
+        "name": "layers",
+        "prerelease": true
       }
     ]
   },
@@ -125,6 +129,7 @@
     "react-day-picker": "^8.10.0",
     "react-icons": "^5.3.0",
     "react-resizable-panels": "^1.0.5",
+    "recharts": "^2.15.0",
     "sonner": "^1.3.1",
     "tailwind-merge": "^2.1.0",
     "vaul": "^0.8.0",

src/custom/docs/components/header/CodeCopy.tsx

@@ -13,7 +13,7 @@ export const CodeCopy = (props: {textToCopy: string, className?: string}) => {
         <Button
         variant="ghost"
         size="icon"
-        className={cn(`${copied ? ' hover:bg-transparent' : 'hover:bg-background/50 hover:text-foreground/75'} ml-1`, props.className)}
+        className={cn(`${copied ? ' hover:bg-paper' : 'hover:bg-paper/50 hover:text-foreground/75'} ml-1`, props.className)}
         onClick={() => {
           window.navigator.clipboard.writeText(props.textToCopy)
           setHasCopied(true)

src/custom/docs/components/navmenu/index.tsx

@@ -132,8 +132,8 @@ export const NavBar = (props: {
   enableModeSelector?: boolean
 }) => {
   return (
-    <div className="bg-background text-foreground border-border sticky top-0 z-[100] w-full border-b text-sm">
-      <div className=" bg-background px-3 md:px-4 mx-auto max-w-[90rem] flex h-14 items-center justify-between">
+    <div className="bg-paper text-foreground border-border sticky top-0 z-[100] w-full border-b text-sm">
+      <div className=" bg-paper px-3 md:px-4 mx-auto max-w-[90rem] flex h-14 items-center justify-between">
         <div className="mr-4 flex items-center">
           <div className='block md:hidden mr-3'>
             <MobileMenu {...navConfig}/>

src/custom/docs/components/triplecard/Card.tsx

@@ -42,7 +42,7 @@ const Card = React.forwardRef<
   return (
     <div
       className={cn(
-        ' border-border flex w-full flex-col justify-between rounded-xl overflow-hidden border p-7 pb-9 dark:bg-muted/25 bg-background',
+        ' border-border flex w-full flex-col justify-between rounded-xl overflow-hidden border p-7 pb-9 dark:bg-muted/25 bg-paper',
         className
       )}
       ref={ref}

src/index.ts

@@ -9,6 +9,7 @@ export * from "./shadcn/ui/badge";
 export * from "./shadcn/ui/button";
 export * from "./shadcn/ui/calendar";
 export * from "./shadcn/ui/card";
+export * from "./shadcn/ui/chart";
 export * from "./shadcn/ui/checkbox";
 export * from "./shadcn/ui/collapsible";
 export * from "./shadcn/ui/command";

src/shadcn/ui/alert-dialog.tsx

@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm 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-paper/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-paper p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}

src/shadcn/ui/alert.tsx

@@ -8,7 +8,7 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-paper text-foreground",
         destructive:
           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },

src/shadcn/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-paper shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",

src/shadcn/ui/calendar.tsx

@@ -27,7 +27,7 @@ function Calendar({
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-paper p-0 opacity-50 hover:opacity-100"
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",