@mbao01/common 0.5.2 → 0.6.0

package/src/components/Sheet/constants.ts

@@ -0,0 +1,45 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getSheetClasses = cva(
+  "fixed z-50 bg-base-100 shadow-xl transition-transform duration-300 ease-in-out",
+  {
+    variants: createVariants({
+      side: {
+        top: "top-0 left-0 right-0 border-b border-base-200",
+        bottom: "bottom-0 left-0 right-0 border-t border-base-200",
+        left: "top-0 bottom-0 left-0 border-r border-base-200 h-full",
+        right: "top-0 bottom-0 right-0 border-l border-base-200 h-full",
+      },
+      open: {
+        true: "translate-x-0 translate-y-0",
+        false: "invisible", // Base invisible state, transforms handled by compound variants
+      },
+    }),
+    compoundVariants: [
+      { side: "top", open: false, class: "-translate-y-full" },
+      { side: "bottom", open: false, class: "translate-y-full" },
+      { side: "left", open: false, class: "-translate-x-full" },
+      { side: "right", open: false, class: "translate-x-full" },
+    ],
+    defaultVariants: {
+      side: "right",
+      open: false,
+    },
+  }
+);
+
+export const getSheetOverlayClasses = cva(
+  "fixed inset-0 z-40 bg-black/50 transition-opacity duration-300",
+  {
+    variants: createVariants({
+      open: {
+        true: "opacity-100",
+        false: "opacity-0 pointer-events-none",
+      },
+    }),
+    defaultVariants: {
+      open: false,
+    },
+  }
+);

package/src/components/Sheet/index.ts

@@ -0,0 +1,9 @@
+export {
+  Sheet,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetContent,
+  SheetFooter,
+} from "./Sheet";
+export type { SheetProps } from "./types";

package/src/components/Sheet/types.ts

@@ -0,0 +1,7 @@
+import { type VariantProps } from "../../libs";
+import { getSheetClasses } from "./constants";
+
+export type SheetProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getSheetClasses> & {
+    onClose?: () => void;
+  };

package/src/components/Sidebar/Sidebar.tsx

@@ -41,7 +41,7 @@ import { SidebarContext } from "./SidebarContext";
 
 const Sidebar = ({
   side = "left",
-  variant = "sidebar",
+  type = "sidebar",
   collapsible = "offcanvas",
   className,
   children,
@@ -62,7 +62,7 @@ const Sidebar = ({
       <Dialog open={openMobile} onOpenChange={setOpenMobile} {...props}>
         <Dialog.Content
           side={side}
-          variant="sheet"
+          type="sheet"
           data-mobile="true"
           data-sidebar="sidebar"
           className={cn(getSidebarMobileClasses({ isMobile }), className)}
@@ -83,12 +83,12 @@ const Sidebar = ({
       data-side={side}
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
-      data-variant={variant}
+      data-variant={type}
       className={getSidebarOuterClasses()}
     >
       {/* This is what handles the sidebar gap on desktop */}
-      <div className={getSidebarGapClasses({ variant })} />
-      <div className={getSidebarInnerClasses({ side, variant })} {...props}>
+      <div className={getSidebarGapClasses({ type })} />
+      <div className={getSidebarInnerClasses({ side, type })} {...props}>
         <div
           data-sidebar="sidebar"
           className={cn(getSidebarMobileClasses({ isMobile }), className)}

package/src/components/Sidebar/SidebarMenu.tsx

@@ -51,8 +51,8 @@ const SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
     {
       asChild = false,
       isActive = false,
-      variant = "default",
-      size = "default",
+      outline = false,
+      size = "md",
       tooltip,
       className,
       ...props
@@ -68,7 +68,7 @@ const SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
         data-sidebar="menu-button"
         data-size={size}
         data-active={isActive}
-        className={cn(getSidebarMenuButtonClasses({ variant, size }), className)}
+        className={cn(getSidebarMenuButtonClasses({ outline, size }), className)}
         {...props}
       />
     );

package/src/components/Sidebar/constants.ts

@@ -1,4 +1,5 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const SIDEBAR_COOKIE_NAME = "sidebar:state";
 
@@ -13,21 +14,21 @@ export const SIDEBAR_WIDTH_ICON = "3rem";
 export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 export const getSidebarClasses = cva([], {
-  variants: {
+  variants: createVariants({
     collapsible: {
       none: "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
     },
-  },
+  }),
 });
 
 export const getSidebarMobileClasses = cva([], {
-  variants: {
+  variants: createVariants({
     isMobile: {
       true: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
       false:
         "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
     },
-  },
+  }),
 });
 
 export const getSidebarOuterClasses = cva("group peer hidden md:block text-sidebar-foreground");
@@ -35,12 +36,12 @@ export const getSidebarOuterClasses = cva("group peer hidden md:block text-sideb
 export const getSidebarInnerClasses = cva(
   "duration-200 fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex",
   {
-    variants: {
+    variants: createVariants({
       side: {
         left: "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
         right: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
       },
-      variant: {
+      type: {
         floating:
           "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]",
         inset:
@@ -48,7 +49,7 @@ export const getSidebarInnerClasses = cva(
         sidebar:
           "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
       },
-    },
+    }),
   }
 );
 
@@ -59,18 +60,17 @@ export const getSidebarGapClasses = cva(
     "group-data-[side=right]:rotate-180",
   ],
   {
-    variants: {
-      variant: {
+    variants: createVariants({
+      type: {
         floating:
           "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]",
-        inset:
-          "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]",
+        inset: "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]",
         sidebar: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
       },
-    },
+    }),
     compoundVariants: [
       {
-        variant: null,
+        type: null,
         className: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
       },
     ],
@@ -135,22 +135,29 @@ export const getSidebarMenuItemClasses = cva("group/menu-item relative");
 export const getSidebarMenuButtonClasses = cva(
   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
-    variants: {
+    variants: createVariants({
+      outline: {
+        true: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+        default: "",
       },
       size: {
-        default: "h-8 text-sm",
         sm: "h-7 text-xs",
+        md: "h-8 text-sm",
         lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
       },
-    },
+    }),
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      outline: false,
+      size: "md",
     },
+    compoundVariants: [
+      {
+        outline: false,
+        className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+      },
+    ],
   }
 );
 
@@ -165,11 +172,11 @@ export const getSidebarMenuActionClasses = cva(
     "group-data-[collapsible=icon]:hidden",
   ],
   {
-    variants: {
+    variants: createVariants({
       showOnHover: {
         true: "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
       },
-    },
+    }),
   }
 );
 
@@ -196,11 +203,11 @@ export const getSidebarMenuSubItemClasses = cva(
     "group-data-[collapsible=icon]:hidden",
   ],
   {
-    variants: {
+    variants: createVariants({
       size: {
         sm: "text-xs",
         md: "text-sm",
       },
-    },
+    }),
   }
 );

package/src/components/Sidebar/types.ts

@@ -17,7 +17,7 @@ export type SidebarContextProps = {
 export type SidebarProps = HTMLAttributes<HTMLDivElement> &
   Partial<{
     side: "left" | "right";
-    variant: "sidebar" | "floating" | "inset";
+    type: "sidebar" | "floating" | "inset";
     collapsible: "offcanvas" | "icon" | "none";
   }>;
 

package/src/components/Skeleton/Skeleton.tsx

@@ -2,10 +2,10 @@ import { cn } from "../../utilities";
 import { getSkeletonClasses } from "./constants";
 import { type SkeletonProps } from "./types";
 
-export const Skeleton = ({ round, width, height, variant, className, ...props }: SkeletonProps) => {
+export const Skeleton = ({ round, width, height, animate, className, ...props }: SkeletonProps) => {
   return (
     <div
-      className={cn(getSkeletonClasses({ width, height, round, variant }), className)}
+      className={cn(getSkeletonClasses({ width, height, round, animate }), className)}
       {...props}
     />
   );

package/src/components/Skeleton/constants.ts

@@ -1,8 +1,9 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getSkeletonClasses = cva("skeleton", {
-  variants: {
-    variant: { pulse: "animate-pulse" },
+  variants: createVariants({
+    animate: { pulse: "animate-pulse" },
     width: {
       2: "w-2",
       4: "w-4",
@@ -31,7 +32,7 @@ export const getSkeletonClasses = cva("skeleton", {
       true: "rounded-full",
       false: "rounded-md",
     },
-  },
+  }),
   defaultVariants: {
     width: "full",
     height: 4,

package/src/components/Sonner/Toaster.tsx

@@ -26,7 +26,7 @@ export const Toaster = ({
           cancelButton: cn(
             getToastButtonClasses({
               outline: true,
-              variant: "base",
+              variant: "default",
               ...cancelButton,
             })
           ),

package/src/components/Sonner/constants.ts

@@ -1,7 +1,8 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getToastClasses = cva("sonner group", {
-  variants: {
+  variants: createVariants({
     variant: {
       accent: "bg-accent text-accent-content border-accent",
       default: "bg-default text-default-content border-default",
@@ -17,7 +18,7 @@ export const getToastClasses = cva("sonner group", {
     outline: {
       true: "border bg-default",
     },
-  },
+  }),
   compoundVariants: [
     { outline: true, variant: "accent", className: "text-accent" },
     { outline: true, variant: "default", className: "text-default" },
@@ -36,9 +37,9 @@ export const getToastClasses = cva("sonner group", {
 });
 
 export const getToastButtonClasses = cva("", {
-  variants: {
+  variants: createVariants({
     variant: {
-      base: "group-[.sonner]:bg-base-300! group-[.sonner]:text-base-content!",
+      default: "group-[.sonner]:bg-base-300! group-[.sonner]:text-base-content!",
       accent: "group-[.sonner]:bg-accent! group-[.sonner]:text-accent-content!",
       error: "group-[.sonner]:bg-error! group-[.sonner]:text-error-content!",
       info: "group-[.sonner]:bg-info! group-[.sonner]:text-info-content!",
@@ -51,7 +52,7 @@ export const getToastButtonClasses = cva("", {
     outline: {
       true: "group-[.sonner]:border! group-[.sonner]:border-solid! group-[.sonner]:bg-transparent!",
     },
-  },
+  }),
   compoundVariants: [
     {
       outline: true,

package/src/components/Sonner/helpers.ts

@@ -15,7 +15,7 @@ export const toastClassnames = ({
     cancelButton: cn(
       getToastButtonClasses({
         outline: true,
-        variant: "base",
+        variant: "default",
         ...cancelButton,
       })
     ),

package/src/components/Spacer/Spacer.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getSpacerClasses } from "./constants";
+import { type SpacerProps } from "./types";
+
+export const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(
+  ({ className, axis, gap, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        className={cn(getSpacerClasses({ axis, gap }), className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Spacer.displayName = "Spacer";

package/src/components/Spacer/constants.ts

@@ -0,0 +1,55 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getSpacerClasses = cva("", {
+  variants: createVariants({
+    axis: {
+      horizontal: "flex-shrink-0",
+      vertical: "flex-shrink-0",
+    },
+    gap: {
+      1: "",
+      2: "",
+      3: "",
+      4: "",
+      5: "",
+      6: "",
+      8: "",
+      10: "",
+      12: "",
+      16: "",
+      20: "",
+      24: "",
+    },
+  }),
+  compoundVariants: [
+    { axis: "horizontal", gap: 1, className: "w-1" },
+    { axis: "horizontal", gap: 2, className: "w-2" },
+    { axis: "horizontal", gap: 3, className: "w-3" },
+    { axis: "horizontal", gap: 4, className: "w-4" },
+    { axis: "horizontal", gap: 5, className: "w-5" },
+    { axis: "horizontal", gap: 6, className: "w-6" },
+    { axis: "horizontal", gap: 8, className: "w-8" },
+    { axis: "horizontal", gap: 10, className: "w-10" },
+    { axis: "horizontal", gap: 12, className: "w-12" },
+    { axis: "horizontal", gap: 16, className: "w-16" },
+    { axis: "horizontal", gap: 20, className: "w-20" },
+    { axis: "horizontal", gap: 24, className: "w-24" },
+    { axis: "vertical", gap: 1, className: "h-1" },
+    { axis: "vertical", gap: 2, className: "h-2" },
+    { axis: "vertical", gap: 3, className: "h-3" },
+    { axis: "vertical", gap: 4, className: "h-4" },
+    { axis: "vertical", gap: 5, className: "h-5" },
+    { axis: "vertical", gap: 6, className: "h-6" },
+    { axis: "vertical", gap: 8, className: "h-8" },
+    { axis: "vertical", gap: 10, className: "h-10" },
+    { axis: "vertical", gap: 12, className: "h-12" },
+    { axis: "vertical", gap: 16, className: "h-16" },
+    { axis: "vertical", gap: 20, className: "h-20" },
+    { axis: "vertical", gap: 24, className: "h-24" },
+  ],
+  defaultVariants: {
+    axis: "vertical",
+    gap: 4,
+  },
+});

package/src/components/Spacer/index.ts

@@ -0,0 +1,2 @@
+export { Spacer } from "./Spacer";
+export type { SpacerProps } from "./types";

package/src/components/Spacer/types.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from "../../libs";
+import { getSpacerClasses } from "./constants";
+
+export type SpacerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> &
+  VariantProps<typeof getSpacerClasses>;

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Loader2Icon } from "lucide-react";
+import { cn } from "../../utilities";
+import { getSpinnerClasses } from "./constants";
+import { type SpinnerProps } from "./types";
+
+export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
+  ({ className, size, variant, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="status"
+        aria-label="Loading"
+        className={cn(getSpinnerClasses({ size, variant }), className)}
+        {...props}
+      >
+        <Loader2Icon className="h-full w-full" />
+        <span className="sr-only">Loading...</span>
+      </div>
+    );
+  }
+);
+
+Spinner.displayName = "Spinner";

package/src/components/Spinner/constants.ts

@@ -0,0 +1,29 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getSpinnerClasses = cva("animate-spin", {
+  variants: createVariants({
+    size: {
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      md: "h-6 w-6",
+      lg: "h-8 w-8",
+      xl: "h-12 w-12",
+    },
+    variant: {
+      default: "text-base-content",
+      primary: "text-primary",
+      secondary: "text-secondary",
+      accent: "text-accent",
+      info: "text-info",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error",
+      ghost: "text-base-content/50",
+    },
+  }),
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+  },
+});

package/src/components/Spinner/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from "./Spinner";
+export type { SpinnerProps } from "./types";

package/src/components/Spinner/types.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from "../../libs";
+import { getSpinnerClasses } from "./constants";
+
+export type SpinnerProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getSpinnerClasses>;

package/src/components/Stack/constants.ts

@@ -1,12 +1,13 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getStackClasses = cva("stack", {
-  variants: {
+  variants: createVariants({
     direction: {
       start: "stack-start",
       end: "stack-end",
       top: "stack-top",
       bottom: "stack-bottom",
     },
-  },
+  }),
 });

package/src/components/Stat/constants.ts

@@ -1,25 +1,26 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getStatsClasses = cva("stats", {
-  variants: {
+  variants: createVariants({
     direction: {
       horizontal: "stats-horizontal",
       vertical: "stats-vertical",
     },
-  },
+  }),
   defaultVariants: {
     direction: "horizontal",
   },
 });
 
 export const getStatClasses = cva("stat", {
-  variants: {
+  variants: createVariants({
     position: {
       center: "place-items-center",
       start: "place-items-start",
       end: "place-items-end",
     },
-  },
+  }),
 });
 
 export const getStatTitleClasses = cva("stat-title");

package/src/components/Status/constants.ts

@@ -1,7 +1,8 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getStatusClasses = cva("status", {
-  variants: {
+  variants: createVariants({
     variant: {
       accent: "status-accent",
       default: "",
@@ -27,5 +28,5 @@ export const getStatusClasses = cva("status", {
       pulse: "animate-pulse",
       spin: "animate-spin",
     },
-  },
+  }),
 });

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { cn } from "../../utilities";
+import { getStepClasses, getStepperClasses } from "./constants";
+import { type StepperProps, type StepProps } from "./types";
+
+export const Stepper = React.forwardRef<HTMLUListElement, StepperProps>(
+  ({ className, orientation = "horizontal", children, ...props }, ref) => {
+    return (
+      <ul ref={ref} className={cn(getStepperClasses({ orientation }), className)} {...props}>
+        {children}
+      </ul>
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+
+export const Step = React.forwardRef<HTMLLIElement, StepProps>(
+  ({ className, variant, active, children, ...props }, ref) => {
+    return (
+      <li
+        ref={ref}
+        className={cn(getStepClasses({ variant: active ? "primary" : variant }), className)}
+        {...props}
+      >
+        {children}
+      </li>
+    );
+  }
+);
+Step.displayName = "Step";

package/src/components/Stepper/constants.ts

@@ -0,0 +1,29 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getStepperClasses = cva("steps w-full", {
+  variants: createVariants({
+    orientation: {
+      horizontal: "steps-horizontal",
+      vertical: "steps-vertical",
+    },
+  }),
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export const getStepClasses = cva("step", {
+  variants: createVariants({
+    variant: {
+      primary: "step-primary",
+      secondary: "step-secondary",
+      accent: "step-accent",
+      info: "step-info",
+      success: "step-success",
+      warning: "step-warning",
+      error: "step-error",
+      neutral: "step-neutral",
+    },
+  }),
+});

package/src/components/Stepper/index.ts

@@ -0,0 +1,2 @@
+export { Stepper, Step } from "./Stepper";
+export type { StepperProps, StepProps } from "./types";

package/src/components/Stepper/types.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from "../../libs";
+import { getStepClasses, getStepperClasses } from "./constants";
+
+export type StepperProps = React.HTMLAttributes<HTMLUListElement> &
+  VariantProps<typeof getStepperClasses>;
+
+export type StepProps = React.LiHTMLAttributes<HTMLLIElement> &
+  VariantProps<typeof getStepClasses> & {
+    active?: boolean; // Convenience prop to apply primary color
+  };