@mbao01/common 0.8.0 → 0.9.0

package/src/components/Description/constants.ts

@@ -0,0 +1,128 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getDescriptionClasses = cva("", {
+  variants: {
+    variant: {
+      default: "",
+      card: "rounded-lg border border-base-200 bg-base-100 p-4 shadow-sm",
+      subtle: "rounded-md bg-base-200/40 p-3",
+    },
+    layout: {
+      vertical: "flex flex-col",
+      horizontal: "grid grid-cols-[auto_1fr] gap-x-6",
+      inline: "flex flex-wrap gap-x-6 gap-y-1",
+    },
+    size: {
+      sm: "" as const,
+      md: "" as const,
+      lg: "" as const,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    layout: "vertical",
+    size: "md",
+  },
+});
+
+export const getDescriptionTermClasses = cva("shrink-0 font-medium text-base-content/60", {
+  variants: createVariants({
+    size: {
+      sm: "py-1 text-xs",
+      md: "py-2 text-sm",
+      lg: "py-2.5 text-base",
+    },
+    layout: {
+      vertical: "",
+      horizontal: "py-2",
+      inline: "py-0",
+    },
+  }),
+  defaultVariants: {
+    size: "md",
+    layout: "vertical",
+  },
+});
+
+export const getDescriptionDetailClasses = cva("text-base-content transition-colors duration-150", {
+  variants: createVariants({
+    size: {
+      sm: "py-1 text-xs",
+      md: "py-2 text-sm",
+      lg: "py-2.5 text-base",
+    },
+    layout: {
+      vertical: "not-last:mb-1",
+      horizontal: "py-2",
+      inline: "py-0 font-medium",
+    },
+    dividers: {
+      true: "",
+      false: "",
+    },
+  }),
+  compoundVariants: [
+    { layout: "vertical", dividers: true, className: "border-b border-base-200 last:border-0" },
+    { layout: "horizontal", dividers: true, className: "border-b border-base-200" },
+  ],
+  defaultVariants: {
+    size: "md",
+    layout: "vertical",
+    dividers: false,
+  },
+});
+
+export const getDescriptionPairClasses = cva("transition-colors duration-150", {
+  variants: createVariants({
+    layout: {
+      vertical: "",
+      horizontal: "contents",
+      inline: "flex items-baseline gap-1.5",
+    },
+    striped: {
+      true: "",
+      false: "",
+    },
+  }),
+  compoundVariants: [
+    { layout: "vertical", striped: true, className: "even:bg-base-200/30 px-2 -mx-2 rounded" },
+    { layout: "horizontal", striped: true, className: "" },
+  ],
+  defaultVariants: {
+    layout: "vertical",
+    striped: false,
+  },
+});
+
+export const getDescriptionGroupClasses = cva("flex gap-6", {
+  variants: createVariants({
+    direction: {
+      row: "flex-row flex-wrap",
+      column: "flex-col",
+    },
+    dividers: {
+      true: "",
+      false: "",
+    },
+  }),
+  compoundVariants: [
+    {
+      direction: "column",
+      dividers: true,
+      className: "[&>*+*]:border-t [&>*+*]:border-base-200 [&>*+*]:pt-6",
+    },
+    {
+      direction: "row",
+      dividers: true,
+      className:
+        "[&>*+*]:border-l [&>*+*]:border-base-200 [&>*+*]:pl-6",
+    },
+  ],
+  defaultVariants: {
+    direction: "column",
+    dividers: false,
+  },
+});
+
+export const getDescriptionGroupItemClasses = cva("flex-1 min-w-0");

package/src/components/Description/index.ts

@@ -1 +1,11 @@
 export { Description } from "./Description";
+export { DescriptionGroup } from "./DescriptionGroup";
+export type {
+  DescriptionProps,
+  DescriptionTermProps,
+  DescriptionDetailProps,
+  DescriptionGroupProps,
+  DescriptionSize,
+  DescriptionLayout,
+  DescriptionVariant,
+} from "./types";

package/src/components/Description/types.ts

@@ -1,5 +1,33 @@
-export type DescriptionProps = React.HTMLAttributes<HTMLDListElement>;
+import type { HTMLAttributes, ReactNode } from "react";
 
-export type DescriptionTermProps = React.HTMLAttributes<HTMLElement>;
+export type DescriptionSize = "sm" | "md" | "lg";
+export type DescriptionLayout = "vertical" | "horizontal" | "inline";
+export type DescriptionVariant = "default" | "card" | "subtle";
 
-export type DescriptionDetailProps = React.HTMLAttributes<HTMLElement>;
+export type DescriptionProps = HTMLAttributes<HTMLDListElement> & {
+  /** Visual variant */
+  variant?: DescriptionVariant;
+  /** Layout direction */
+  layout?: DescriptionLayout;
+  /** Size preset */
+  size?: DescriptionSize;
+  /** Show dividers between items */
+  dividers?: boolean;
+  /** Alternate row shading */
+  striped?: boolean;
+};
+
+export type DescriptionTermProps = HTMLAttributes<HTMLElement>;
+
+export type DescriptionDetailProps = HTMLAttributes<HTMLElement>;
+
+export type DescriptionGroupProps = HTMLAttributes<HTMLDivElement> & {
+  /** Direction to stack descriptions */
+  direction?: "row" | "column";
+  /** Show dividers between descriptions */
+  dividers?: boolean;
+  /** Optional heading for the group */
+  title?: ReactNode;
+  /** Optional subheading */
+  description?: ReactNode;
+};

package/src/components/Dialog/constants.ts

@@ -2,7 +2,7 @@ import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
 export const getDialogOverlayClasses = cva(
-  "fixed inset-0 z-50 bg-black/80 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-black/60 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"
 );
 
 export const getDialogContentClasses = cva(
@@ -41,5 +41,5 @@ export const getDialogTitleClasses = cva("text-lg font-semibold leading-none tra
 export const getDialogDescriptionClasses = cva("text-sm text-muted-foreground");
 
 export const getDialogCloseClasses = cva(
-  "absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+  "absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-all duration-200 hover:opacity-100 hover:rotate-90 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
 );

package/src/components/Dock/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../libs";
 import { createVariants } from "../../utilities";
 
-export const getDockClasses = cva("dock", {
+export const getDockClasses = cva("dock transition-all duration-300", {
   variants: createVariants({
     variant: {
       accent: "bg-accent text-accent-content border-accent",
@@ -40,7 +40,7 @@ export const getDockClasses = cva("dock", {
   ],
 });
 
-export const getDockButtonClasses = cva("", {
+export const getDockButtonClasses = cva("transition-all duration-200", {
   variants: createVariants({
     active: {
       true: "dock-active",

package/src/components/Drawer/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../libs";
 
 export const getDrawerContentClasses = cva(
-  "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-base-100"
+  "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-base-100 shadow-lg"
 );
 
 export const getDrawerDescriptionClasses = cva("text-sm");
@@ -10,6 +10,6 @@ export const getDrawerHeaderClasses = cva("grid gap-1.5 p-4 text-center sm:text-
 
 export const getDrawerFooterClasses = cva("mt-auto flex flex-col gap-2 p-4");
 
-export const getDrawerOverlayClasses = cva("fixed inset-0 z-50 bg-black/80");
+export const getDrawerOverlayClasses = cva("fixed inset-0 z-50 bg-black/60 backdrop-blur-sm");
 
 export const getDrawerTitleClasses = cva("text-lg font-semibold leading-none tracking-tight");

package/src/components/Form/Checkbox/constants.ts

@@ -2,7 +2,7 @@ import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
 export const getCheckboxClasses = cva(
-  "peer flex items-center justify-center h-4 w-4 shrink-0 rounded-xs border focus-visible:border-base-content focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
+  "peer flex items-center justify-center h-4 w-4 shrink-0 rounded-xs border transition-all duration-200 focus-visible:border-base-content focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: createVariants({
       variant: {

package/src/components/Form/DatetimeInput/constants.ts

@@ -37,7 +37,7 @@ export const getDatetimeCalendarIconClasses = cva("", {
 });
 
 export const getTimePickerClasses = cva(
-  "border border-neutral-content bg-base-100 shadow-xs cursor-pointer ring-0 py-2 h-8 px-3 w-full text-sm outline-0 inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-base-content disabled:pointer-events-none disabled:opacity-50 hover:bg-base-200",
+  "border border-neutral-content bg-base-100 shadow-xs cursor-pointer ring-0 py-2 h-8 px-3 w-full text-sm outline-0 inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-base-content disabled:pointer-events-none disabled:opacity-50 hover:bg-base-200",
   {
     variants: createVariants({
       selected: {

package/src/components/Form/Input/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
-export const getInputClasses = cva("input rounded-md transition-all duration-100", {
+export const getInputClasses = cva("input rounded-md transition-all duration-200", {
   variants: createVariants({
     variant: {
       default: "bg-transparent",

package/src/components/Form/MultiSelect/constants.ts

@@ -6,7 +6,7 @@ export const getMultiSelectClasses = cva("overflow-visible bg-transparent flex f
 export const getMultiSelectTriggerClasses = cva("flex-wrap h-fit w-fit py-2 overflow-hidden");
 
 export const getMultiSelectItemClasses = cva(
-  "cursor-pointer transition-colors flex justify-between aria-selected:bg-base-300 aria-selected:text-base-content rounded-xs py-1.5 px-2 text-sm outline-hidden",
+  "cursor-pointer transition-all duration-150 flex justify-between aria-selected:bg-base-300 aria-selected:text-base-content rounded-xs py-1.5 px-2 text-sm outline-hidden",
   {
     variants: createVariants({
       included: {

package/src/components/Form/NativeSelect/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
-export const getNativeSelectClasses = cva("select", {
+export const getNativeSelectClasses = cva("select transition-all duration-200", {
   variants: createVariants({
     nativeOptions: {
       true: "appearance-none",

package/src/components/Form/Radio/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
-export const getRadioClasses = cva("radio", {
+export const getRadioClasses = cva("radio transition-all duration-200", {
   variants: createVariants({
     variant: {
       primary: "radio-primary",

package/src/components/Form/Select/constants.ts

@@ -2,7 +2,7 @@ import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
 export const getSelectTriggerClasses = cva(
-  "select flex items-center justify-between rounded-md text-sm text-left disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-100",
+  "select flex items-center justify-between rounded-md text-sm text-left disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200",
   {
     variants: createVariants({
       variant: {

package/src/components/Form/Slider/constants.ts

@@ -58,7 +58,7 @@ export const getSliderClasses = cva("absolute h-full", {
 });
 
 export const getSliderThumbClasses = cva(
-  "block h-5 w-5 rounded-full border-2 ring-offset-neutral transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "block h-5 w-5 rounded-full border-2 ring-offset-neutral transition-all duration-200 hover:scale-110 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: createVariants({
       variant: {

package/src/components/Form/Switch/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
-export const getSwitchClasses = cva("toggle", {
+export const getSwitchClasses = cva("toggle transition-all duration-200", {
   variants: createVariants({
     variant: {
       primary: "toggle-primary",

package/src/components/Form/Textarea/constants.ts

@@ -1,7 +1,7 @@
 import { cva } from "../../../libs";
 import { createVariants } from "../../../utilities";
 
-export const getTextareaClasses = cva("textarea rounded-md transition-all duration-100", {
+export const getTextareaClasses = cva("textarea rounded-md transition-all duration-200", {
   variants: createVariants({
     variant: {
       default: "bg-transparent",

package/src/components/GlowCard/GlowCard.tsx

@@ -0,0 +1,46 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../utilities";
+import type { GlowCardProps } from "./types";
+
+const GlowCard = ({
+  children,
+  className,
+  gradientFrom = "oklch(0.7 0.25 250)",
+  gradientVia = "oklch(0.7 0.2 330)",
+  gradientTo = "oklch(0.7 0.25 150)",
+  ...props
+}: GlowCardProps) => {
+  return (
+    <div
+      className={cn(
+        "group relative rounded-xl p-px transition-shadow duration-500",
+        className
+      )}
+      {...props}
+    >
+      <div
+        className="absolute -inset-px rounded-xl opacity-50 blur-sm transition-opacity duration-500 group-hover:opacity-100"
+        style={
+          {
+            background: `linear-gradient(135deg, ${gradientFrom}, ${gradientVia}, ${gradientTo})`,
+          } as CSSProperties
+        }
+        aria-hidden="true"
+      />
+      <div
+        className="absolute -inset-px rounded-xl opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+        style={
+          {
+            background: `linear-gradient(135deg, ${gradientFrom}, ${gradientVia}, ${gradientTo})`,
+          } as CSSProperties
+        }
+        aria-hidden="true"
+      />
+      <div className="relative rounded-xl bg-base-100 p-6">{children}</div>
+    </div>
+  );
+};
+
+GlowCard.displayName = "GlowCard";
+
+export { GlowCard };

package/src/components/GlowCard/index.ts

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

package/src/components/GlowCard/types.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type GlowCardProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  /** Gradient colors for the glow border */
+  gradientFrom?: string;
+  gradientVia?: string;
+  gradientTo?: string;
+};

package/src/components/GradientText/GradientText.tsx

@@ -0,0 +1,36 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../utilities";
+import type { GradientTextProps } from "./types";
+
+const GradientText = ({
+  children,
+  className,
+  from = "oklch(0.7 0.25 250)",
+  via,
+  to = "oklch(0.7 0.2 330)",
+  angle = 135,
+  animated = false,
+  ...props
+}: GradientTextProps) => {
+  const gradient = via
+    ? `linear-gradient(${angle}deg, ${from}, ${via}, ${to})`
+    : `linear-gradient(${angle}deg, ${from}, ${to})`;
+
+  return (
+    <span
+      className={cn(
+        "bg-clip-text text-transparent",
+        animated && "animate-gradient bg-[length:300%_100%]",
+        className
+      )}
+      style={{ backgroundImage: gradient } as CSSProperties}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+GradientText.displayName = "GradientText";
+
+export { GradientText };

package/src/components/GradientText/index.ts

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

package/src/components/GradientText/types.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type GradientTextProps = HTMLAttributes<HTMLSpanElement> & {
+  children: ReactNode;
+  /** Gradient start color */
+  from?: string;
+  /** Gradient middle color */
+  via?: string;
+  /** Gradient end color */
+  to?: string;
+  /** Gradient direction in degrees */
+  angle?: number;
+  /** Whether to animate the gradient */
+  animated?: boolean;
+};

package/src/components/Greeting/Greeting.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from "react";
+import { cn } from "../../utilities";
+import type { GreetingProps } from "./types";
+
+const getTimeGreeting = () => {
+  const hour = new Date().getHours();
+  if (hour < 12) return "Good morning";
+  if (hour < 17) return "Good afternoon";
+  return "Good evening";
+};
+
+const Greeting = ({
+  name,
+  className,
+  subtitle,
+  greeting: customGreeting,
+  ...props
+}: GreetingProps) => {
+  const greeting = useMemo(() => customGreeting ?? getTimeGreeting(), [customGreeting]);
+
+  const dateStr = useMemo(
+    () =>
+      new Date().toLocaleDateString("en-US", {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      }),
+    []
+  );
+
+  return (
+    <div className={cn("flex flex-col gap-1", className)} {...props}>
+      <h1 className="text-2xl font-bold tracking-tight">
+        {greeting}, {name}
+      </h1>
+      <p className="text-sm text-base-content/60">
+        {subtitle ?? dateStr}
+      </p>
+    </div>
+  );
+};
+
+Greeting.displayName = "Greeting";
+
+export { Greeting };

package/src/components/Greeting/index.ts

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

package/src/components/Greeting/types.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+
+export type GreetingProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** User's name */
+  name: string;
+  /** Optional subtitle/context line */
+  subtitle?: string;
+  /** Custom greeting override (bypasses time-based greeting) */
+  greeting?: string;
+};

package/src/components/KPICard/KPICard.tsx

@@ -0,0 +1,85 @@
+import { cn } from "../../utilities";
+import { Sparkline } from "../Sparkline";
+import { TrendBadge } from "../TrendBadge";
+import type { KPICardProps } from "./types";
+
+const KPICard = ({
+  title,
+  value,
+  change,
+  description,
+  sparklineData,
+  sparklineColor,
+  sparklineFilled = true,
+  icon,
+  loading = false,
+  className,
+  ...props
+}: KPICardProps) => {
+  if (loading) {
+    return (
+      <div
+        className={cn(
+          "rounded-lg border bg-base-100 p-4 shadow-sm transition-shadow duration-300 hover:shadow-md",
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center justify-between">
+          <span className="skeleton h-4 w-24 rounded" />
+          {icon && <span className="skeleton size-8 rounded-md" />}
+        </div>
+        <div className="mt-3 flex items-end justify-between gap-4">
+          <div className="flex flex-col gap-1.5">
+            <span className="skeleton h-7 w-28 rounded" />
+            <span className="skeleton h-3.5 w-20 rounded" />
+          </div>
+          <span className="skeleton h-8 w-20 rounded" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-base-100 p-4 shadow-sm transition-shadow duration-300 hover:shadow-md",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium text-base-content/60">{title}</span>
+        {icon && (
+          <div className="flex size-8 items-center justify-center rounded-md bg-base-200/50 text-base-content/60">
+            {icon}
+          </div>
+        )}
+      </div>
+      <div className="mt-3 flex items-end justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <span className="text-2xl font-bold tracking-tight">{value}</span>
+          <div className="flex items-center gap-2">
+            {change !== undefined && <TrendBadge value={change} size="xs" />}
+            {description && (
+              <span className="text-xs text-base-content/50">{description}</span>
+            )}
+          </div>
+        </div>
+        {sparklineData && sparklineData.length >= 2 && (
+          <Sparkline
+            data={sparklineData}
+            color={sparklineColor ?? (change !== undefined && change >= 0 ? "oklch(0.7 0.2 150)" : "oklch(0.65 0.25 25)")}
+            filled={sparklineFilled}
+            width={80}
+            height={32}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+KPICard.displayName = "KPICard";
+
+export { KPICard };

package/src/components/KPICard/index.ts

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

package/src/components/KPICard/types.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type KPICardProps = HTMLAttributes<HTMLDivElement> & {
+  /** Card title/label */
+  title: string;
+  /** Primary value to display */
+  value: ReactNode;
+  /** Trend change percentage */
+  change?: number;
+  /** Description text below value */
+  description?: string;
+  /** Sparkline data points */
+  sparklineData?: number[];
+  /** Sparkline color */
+  sparklineColor?: string;
+  /** Whether sparkline is filled */
+  sparklineFilled?: boolean;
+  /** Icon to show in the card */
+  icon?: ReactNode;
+  /** Loading state */
+  loading?: boolean;
+};