@mbao01/common 0.5.2 → 0.6.0

package/src/components/Table/constants.ts

@@ -1,7 +1,8 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getTableClasses = cva("table", {
-  variants: {
+  variants: createVariants({
     caption: {
       top: "caption-top",
       bottom: "caption-bottom",
@@ -21,7 +22,7 @@ export const getTableClasses = cva("table", {
       md: "table-md",
       lg: "table-lg",
     },
-  },
+  }),
 });
 
 export const getTableHeaderClasses = cva("[&_tr]:border-b");

package/src/components/Text/constants.ts

@@ -1,7 +1,8 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getTextClasses = cva("", {
-  variants: {
+  variants: createVariants({
     variant: {
       info: "text-info",
       error: "text-error",
@@ -15,13 +16,9 @@ export const getTextClasses = cva("", {
     size: {
       xs: "text-xs",
       sm: "text-sm",
-      base: "text-base",
+      md: "text-base",
       lg: "text-lg",
       xl: "text-xl",
-      "2xl": "text-2xl",
-      "3xl": "text-3xl",
-      "4xl": "text-4xl",
-      "5xl": "text-5xl",
     },
-  },
+  }),
 });

package/src/components/Timeline/Timeline.example.tsx

@@ -29,7 +29,7 @@ export const TimelineExample = ({
   return (
     <Timeline {...timeline}>
       <Timeline.Item variant="success" {...item}>
-        <Timeline.Heading variant="content" {...heading}>
+        <Timeline.Heading variant="default" {...heading}>
           Plan!
         </Timeline.Heading>
         <Timeline.Dot border="primary" status="success" variant="success" {...dot} />

package/src/components/Timeline/constants.ts

@@ -1,20 +1,21 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getTimelineClasses = cva("grid", {
-  variants: {
+  variants: createVariants({
     positions: {
       left: "[&>li]:grid-cols-[0_min-content_1fr]",
       right: "[&>li]:grid-cols-[1fr_min-content]",
       center: "[&>li]:grid-cols-[1fr_min-content_1fr]",
     },
-  },
+  }),
   defaultVariants: {
     positions: "left",
   },
 });
 
 export const getTimelineItemClasses = cva("grid items-center gap-x-2", {
-  variants: {
+  variants: createVariants({
     variant: {
       info: "text-info",
       error: "text-error",
@@ -24,15 +25,15 @@ export const getTimelineItemClasses = cva("grid items-center gap-x-2", {
       secondary: "text-secondary",
       accent: "text-accent",
       neutral: "text-neutral",
-      content: "text-base-content",
+      default: "text-base-content",
     },
-  },
+  }),
 });
 
 export const getTimelineDotClasses = cva(
   "timeline-dot col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border",
   {
-    variants: {
+    variants: createVariants({
       status: {
         default: "*:hidden",
         active: "[&>*:not(.lucide-circle)]:hidden",
@@ -70,10 +71,10 @@ export const getTimelineDotClasses = cva(
           "[&>.lucide-check]:text-accent [&>.lucide-circle]:text-accent [&>.lucide-circle]:fill-accent [&>.lucide-x]:text-accent",
         neutral:
           "[&>.lucide-check]:text-neutral [&>.lucide-circle]:text-neutral [&>.lucide-circle]:fill-neutral [&>.lucide-x]:text-neutral",
-        content:
+        default:
           "[&>.lucide-check]:text-base-content [&>.lucide-circle]:text-base-content [&>.lucide-circle]:fill-base-content [&>.lucide-x]:text-base-content",
       },
-    },
+    }),
     defaultVariants: {
       status: "default",
     },
@@ -137,7 +138,7 @@ export const getTimelineDotClasses = cva(
       },
       {
         fill: true,
-        variant: "content",
+        variant: "default",
         className:
           "border-base-100 bg-base-100 [&>.lucide-check]:text-base-content [&>.lucide-circle]:fill-base-content [&>.lucide-x]:text-base-content",
       },
@@ -146,12 +147,12 @@ export const getTimelineDotClasses = cva(
 );
 
 export const getTimelineContentClasses = cva("row-start-2 row-end-2 pb-8 text-muted-foreground", {
-  variants: {
+  variants: createVariants({
     side: {
       right: "col-start-3 col-end-4 mr-auto text-left",
       left: "col-start-1 col-end-2 ml-auto text-right",
     },
-  },
+  }),
   defaultVariants: {
     side: "right",
   },
@@ -160,7 +161,7 @@ export const getTimelineContentClasses = cva("row-start-2 row-end-2 pb-8 text-mu
 export const getTimelineHeadingClasses = cva(
   "row-start-1 row-end-1 line-clamp-1 max-w-full truncate",
   {
-    variants: {
+    variants: createVariants({
       side: {
         right: "col-start-3 col-end-4 mr-auto text-left",
         left: "col-start-1 col-end-2 ml-auto text-right",
@@ -174,20 +175,16 @@ export const getTimelineHeadingClasses = cva(
         secondary: "text-secondary",
         accent: "text-accent",
         neutral: "text-neutral",
-        content: "text-base-content",
+        default: "text-base-content",
       },
       size: {
         xs: "text-xs",
         sm: "text-sm",
-        base: "text-base",
+        md: "text-base",
         lg: "text-lg",
         xl: "text-xl",
-        "2xl": "text-2xl",
-        "3xl": "text-3xl",
-        "4xl": "text-4xl",
-        "5xl": "text-5xl",
       },
-    },
+    }),
     defaultVariants: {
       side: "right",
     },
@@ -197,7 +194,7 @@ export const getTimelineHeadingClasses = cva(
 export const getTimelineLineClasses = cva(
   "bg-base-300 border-none col-start-2 col-end-3 row-start-2 row-end-2 mx-auto flex h-full min-h-16 w-0.5 justify-center rounded-full",
   {
-    variants: {
+    variants: createVariants({
       variant: {
         info: "bg-info",
         error: "bg-error",
@@ -207,8 +204,8 @@ export const getTimelineLineClasses = cva(
         secondary: "bg-secondary",
         accent: "bg-accent",
         neutral: "bg-neutral",
-        content: "bg-base-content",
+        default: "bg-base-content",
       },
-    },
+    }),
   }
 );

package/src/components/Toggle/Toggle.tsx

@@ -8,12 +8,12 @@ import { getToggleClasses } from "./constants";
 import { type ToggleProps } from "./types";
 
 const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(
-  ({ className, variant = "default", size, wide, outline, ...props }, ref) => (
+  ({ className, variant = "default", link, size, wide, outline, ...props }, ref) => (
     <TogglePrimitive.Root
       ref={ref}
       className={cn(
-        getButtonClasses({ size, wide, outline }),
-        getToggleClasses({ variant, outline }),
+        getButtonClasses({ link, size, wide, outline }),
+        getToggleClasses({ link, variant, outline }),
         className
       )}
       {...props}

package/src/components/Toggle/constants.ts

@@ -1,15 +1,18 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getToggleClasses = cva(
   "transition-colors disabled:pointer-events-none disabled:opacity-50 data-[state=off]:btn-ghost",
   {
-    variants: {
+    variants: createVariants({
+      link: {
+        true: "data-[state=on]:btn-link",
+      },
       variant: {
         accent: "data-[state=on]:btn-accent",
         default: "data-[state=on]:btn-default",
         error: "data-[state=on]:btn-error",
         info: "data-[state=on]:btn-info",
-        link: "data-[state=on]:btn-link",
         neutral: "data-[state=on]:btn-neutral",
         primary: "data-[state=on]:btn-primary",
         secondary: "data-[state=on]:btn-secondary",
@@ -19,7 +22,7 @@ export const getToggleClasses = cva(
       outline: {
         true: "data-[state=on]:btn-outline",
       },
-    },
+    }),
     compoundVariants: [
       {
         outline: true,

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -21,15 +21,17 @@ const ToggleGroup = ({ className, variant, children, ...props }: ToggleGroupProp
 const ToggleGroupItem = forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
   ToggleGroupItemProps
->(({ className, children, variant, size, wide, outline, ...props }, ref) => {
+>(({ className, children, variant, size, link, wide, outline, ...props }, ref) => {
   const context = useContext(ToggleGroupContext);
 
   return (
     <ToggleGroupPrimitive.Item
       ref={ref}
       className={cn(
-        getButtonClasses({ size, wide, outline }),
+        getButtonClasses({ link, size, wide, outline }),
         getToggleClasses({
+          link,
+          outline,
           variant: context.variant ?? variant,
         }),
         className

package/src/components/Tooltip/constants.ts

@@ -1,9 +1,10 @@
 import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
 
 export const getTooltipContentClasses = cva(
   "bg-base-200 text-base-content z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
   {
-    variants: {
+    variants: createVariants({
       variant: {
         primary: "bg-primary text-primary-content",
         secondary: "bg-secondary text-secondary-content",
@@ -14,12 +15,12 @@ export const getTooltipContentClasses = cva(
         warning: "bg-warning text-warning-content",
         error: "bg-error text-error-content",
       },
-    },
+    }),
   }
 );
 
 export const getTooltipArrowClasses = cva("fill-base-200", {
-  variants: {
+  variants: createVariants({
     variant: {
       primary: "fill-primary",
       secondary: "fill-secondary",
@@ -30,5 +31,5 @@ export const getTooltipArrowClasses = cva("fill-base-200", {
       warning: "fill-warning",
       error: "fill-error",
     },
-  },
+  }),
 });

package/src/index.ts

@@ -8,6 +8,25 @@ export * from "./components/ThemeSwitch";
 export * from "./components/Toggle";
 export * from "./components/ToggleGroup";
 
+/** layout */
+export * from "./components/Box";
+export * from "./components/Center";
+export * from "./components/Container";
+export * from "./components/Flex";
+export * from "./components/Grid";
+export * from "./components/Spacer";
+
+/** typography */
+export * from "./components/Blockquote";
+export * from "./components/Code";
+export * from "./components/Heading";
+export * from "./components/Paragraph";
+
+/** utility & atoms */
+export * from "./components/AspectRatio";
+export * from "./components/Image";
+export * from "./components/Spinner";
+
 /** data display */
 export * from "./components/Accordion";
 export * from "./components/Alert";
@@ -58,4 +77,12 @@ export * from "./components/Slot";
 export * from "./components/Widget";
 
 /** molecules */
+export * from "./components/Banner";
+export * from "./components/Empty";
 export * from "./components/Sidebar";
+export * from "./components/Stepper";
+/** organisms */
+export * from "./components/Footer";
+export * from "./components/Header";
+export * from "./components/Panel";
+export * from "./components/Sheet";

package/src/utilities/createVariants/createVariants.ts

@@ -0,0 +1,5 @@
+import type { CreateVariantsArgs } from "./type";
+
+export const createVariants = <T extends CreateVariantsArgs<T>>(variants: T): T => {
+  return variants;
+};

package/src/utilities/createVariants/index.ts

@@ -0,0 +1 @@
+export { createVariants } from "./createVariants";

package/src/utilities/createVariants/type.ts

@@ -0,0 +1,29 @@
+type ValidateKeys<V, Allowed extends string> = keyof V extends Allowed
+  ? V
+  : { [K in keyof V]: K extends Allowed ? V[K] : never };
+
+type VariantConstraint<T, K extends keyof T, Allowed extends string> =
+  T extends Record<K, infer V>
+    ? V extends Partial<Record<Allowed, unknown>>
+      ? ValidateKeys<V, Allowed>
+      : Partial<Record<Allowed, unknown>>
+    : Partial<Record<Allowed, unknown>>;
+
+export type CreateVariantsArgs<T extends Record<string, unknown>> = {
+  variant?: VariantConstraint<
+    T,
+    "variant",
+    | "accent"
+    | "default"
+    | "error"
+    | "ghost"
+    | "info"
+    | "neutral"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+  >;
+  outline?: VariantConstraint<T, "outline", "true" | "false">;
+  size?: VariantConstraint<T, "size", "xs" | "sm" | "md" | "lg" | "xl">;
+} & Omit<T, "variant" | "outline" | "size">;

package/src/utilities/index.ts

@@ -1,3 +1,4 @@
 export * from "./theme";
 export { cn } from "./cn";
+export { createVariants } from "./createVariants";
 export { getSubpaths } from "./getSubpaths";

package/vitest-setup.ts

@@ -31,6 +31,10 @@ Object.defineProperty(window, "matchMedia", {
   })),
 });
 
+beforeAll(() => {
+  process.env.TZ = "UTC";
+});
+
 // runs a cleanup after each test case (e.g. clearing jsdom)
 afterEach(() => {
   cleanup();