@mbao01/common 0.8.1 → 0.9.0

package/src/components/CountdownTimer/types.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+
+export type CountdownTimerProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** Target date/time to count down to */
+  targetDate: Date;
+  /** Label to show above the timer */
+  label?: string;
+  /** Callback when countdown reaches zero */
+  onComplete?: () => void;
+  /** Whether to show seconds */
+  showSeconds?: boolean;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+};

package/src/components/DataList/DataList.tsx

@@ -0,0 +1,32 @@
+import { cn } from "../../utilities";
+import {
+  getDataListClasses,
+  getDataListItemClasses,
+  getDataListLabelClasses,
+  getDataListValueClasses,
+} from "./constants";
+import type { DataListProps } from "./types";
+
+const DataList = ({
+  items,
+  className,
+  size = "md",
+  dividers = true,
+  horizontal = false,
+  ...props
+}: DataListProps) => {
+  return (
+    <dl className={cn(getDataListClasses({ horizontal }), className)} {...props}>
+      {items.map((item, index) => (
+        <div key={index} className={getDataListItemClasses({ size, dividers, horizontal })}>
+          <dt className={getDataListLabelClasses()}>{item.label}</dt>
+          <dd className={getDataListValueClasses({ horizontal })}>{item.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+};
+
+DataList.displayName = "DataList";
+
+export { DataList };

package/src/components/DataList/constants.ts

@@ -0,0 +1,47 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getDataListClasses = cva("", {
+  variants: createVariants({
+    horizontal: {
+      true: "flex flex-wrap gap-x-6 gap-y-2",
+      false: "flex flex-col",
+    },
+  }),
+  defaultVariants: {
+    horizontal: false,
+  },
+});
+
+export const getDataListItemClasses = cva(
+  "flex justify-between gap-4 transition-colors duration-150",
+  {
+    variants: createVariants({
+      size: {
+        sm: "py-1.5 text-xs",
+        md: "py-2.5 text-sm",
+        lg: "py-3 text-base",
+      },
+      dividers: {
+        true: "border-b border-base-200 last:border-0",
+      },
+      horizontal: {
+        true: "flex-col gap-0.5",
+      },
+    }),
+    defaultVariants: {
+      size: "md",
+      dividers: true,
+    },
+  }
+);
+
+export const getDataListLabelClasses = cva("text-base-content/60 shrink-0");
+
+export const getDataListValueClasses = cva("font-medium text-right tabular-nums", {
+  variants: createVariants({
+    horizontal: {
+      true: "text-left",
+    },
+  }),
+});

package/src/components/DataList/index.ts

@@ -0,0 +1,2 @@
+export { DataList } from "./DataList";
+export type { DataListProps, DataListItem } from "./types";

package/src/components/DataList/types.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type DataListItem = {
+  label: ReactNode;
+  value: ReactNode;
+};
+
+export type DataListProps = Omit<HTMLAttributes<HTMLDListElement>, "children"> & {
+  /** Key-value items to display */
+  items: DataListItem[];
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Whether to show dividers between items */
+  dividers?: boolean;
+  /** Whether to show items in a horizontal layout */
+  horizontal?: boolean;
+};

package/src/components/DatePicker/DateRangePresetPicker.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import { type DateRange } from "react-day-picker";
+import { format, subDays, startOfMonth, startOfYear } from "date-fns";
+import { CalendarDaysIcon } from "lucide-react";
+import { cn } from "../../utilities";
+import { Button } from "../Button";
+import { Calendar } from "../Calendar";
+import { Popover } from "../Popover";
+import { type DateRangePresetPickerProps, type DateRangePreset } from "./types";
+
+const DEFAULT_PRESETS: DateRangePreset[] = [
+  { label: "Today", range: () => ({ from: new Date(), to: new Date() }) },
+  { label: "Last 7 days", range: () => ({ from: subDays(new Date(), 7), to: new Date() }) },
+  { label: "Last 30 days", range: () => ({ from: subDays(new Date(), 30), to: new Date() }) },
+  { label: "Last 90 days", range: () => ({ from: subDays(new Date(), 90), to: new Date() }) },
+  { label: "This month", range: () => ({ from: startOfMonth(new Date()), to: new Date() }) },
+  { label: "This year", range: () => ({ from: startOfYear(new Date()), to: new Date() }) },
+];
+
+export const DateRangePresetPicker = ({
+  name,
+  size,
+  wide,
+  label,
+  outline,
+  variant,
+  disabled,
+  disabledDates,
+  defaultRange,
+  presets = DEFAULT_PRESETS,
+  onRangeChange,
+  getRangeValue = (range) => ({
+    from: range?.from?.toUTCString(),
+    to: range?.to?.toUTCString(),
+  }),
+  getRangeLabel = (range) =>
+    range?.from
+      ? range.to
+        ? `${format(range.from, "LLL dd, y")} - ${format(range.to, "LLL dd, y")}`
+        : format(range.from, "LLL dd, y")
+      : undefined,
+  triggerClassName,
+  ...props
+}: DateRangePresetPickerProps) => {
+  const [range, setRange] = useState<DateRange | undefined>(defaultRange);
+  const [activePreset, setActivePreset] = useState<string | null>(null);
+
+  const handlePresetClick = (preset: DateRangePreset) => {
+    const newRange = preset.range();
+    setRange(newRange);
+    setActivePreset(preset.label);
+    onRangeChange?.(newRange, preset.label);
+  };
+
+  const handleCalendarSelect = (newRange: DateRange | undefined) => {
+    setRange(newRange);
+    setActivePreset(null);
+    onRangeChange?.(newRange, undefined);
+  };
+
+  const rangeLabel = getRangeLabel(range);
+  const rangeValue = getRangeValue(range);
+
+  return (
+    <Popover>
+      {name && (
+        <>
+          <input hidden className="hidden" aria-hidden="true" name={`${name}.from`} defaultValue={rangeValue.from} />
+          <input hidden className="hidden" aria-hidden="true" name={`${name}.to`} defaultValue={rangeValue.to} />
+        </>
+      )}
+      <Popover.Trigger asChild>
+        <Button
+          name={name}
+          size={size}
+          wide={wide}
+          outline={outline}
+          variant={variant}
+          disabled={disabled}
+          className={cn("justify-start flex-nowrap", !range && "font-normal", triggerClassName)}
+        >
+          <span className="text-left text-ellipsis overflow-hidden text-nowrap">
+            {activePreset ?? rangeLabel ?? label ?? "Select period"}
+          </span>
+          <CalendarDaysIcon className="ml-auto h-4 w-4 opacity-50" />
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content className="w-auto p-0" align="start">
+        <div className="flex">
+          <div className="flex flex-col border-r p-2 gap-0.5">
+            {presets.map((preset) => (
+              <button
+                key={preset.label}
+                type="button"
+                onClick={() => handlePresetClick(preset)}
+                className={cn(
+                  "rounded-md px-3 py-1.5 text-left text-sm transition-colors duration-150 hover:bg-base-200",
+                  activePreset === preset.label && "bg-primary text-primary-content hover:bg-primary"
+                )}
+              >
+                {preset.label}
+              </button>
+            ))}
+          </div>
+          <div className="p-2">
+            <Calendar
+              autoFocus
+              mode="range"
+              selected={range}
+              disabled={disabledDates}
+              onSelect={handleCalendarSelect}
+              captionLayout="label"
+              {...props}
+            />
+          </div>
+        </div>
+      </Popover.Content>
+    </Popover>
+  );
+};

package/src/components/DatePicker/index.ts

@@ -1,3 +1,4 @@
 export { DatePicker } from "./DatePicker";
 export { DateRangePicker } from "./DateRangePicker";
+export { DateRangePresetPicker } from "./DateRangePresetPicker";
 export { MultipleDatesPicker } from "./MultipleDatesPicker";

package/src/components/DatePicker/types.ts

@@ -33,6 +33,28 @@ export type DateRangePickerProps = BaseDatePickerProps &
     getRangeLabel?: (range: DateRange | undefined) => string | React.JSX.Element | undefined;
   };
 
+export type DateRangePreset = {
+  /** Display label for the preset */
+  label: string;
+  /** Function that returns the date range for this preset */
+  range: () => DateRange;
+};
+
+export type DateRangePresetPickerProps = BaseDatePickerProps &
+  Omit<PropsRange, "mode" | "disabled"> & {
+    defaultRange?: DateRange;
+    disabledDates?: PropsRange["disabled"];
+    /** Preset period options. Defaults to Today, Last 7/30/90 days, This month, This year */
+    presets?: DateRangePreset[];
+    /** Called when range changes, with optional preset label */
+    onRangeChange?: (range: DateRange | undefined, presetLabel?: string) => void;
+    getRangeValue?: (range: DateRange | undefined) => {
+      from: string | undefined;
+      to: string | undefined;
+    };
+    getRangeLabel?: (range: DateRange | undefined) => string | undefined;
+  };
+
 export type MultipleDatesPickerProps = BaseDatePickerProps &
   Omit<PropsMulti, "mode"> & {
     defaultDates?: Date[];

package/src/components/Description/Description.tsx

@@ -1,19 +1,81 @@
-import type { DescriptionDetailProps, DescriptionProps, DescriptionTermProps } from "./types";
+import { createContext, useContext } from "react";
 import { cn } from "../../utilities";
+import {
+  getDescriptionClasses,
+  getDescriptionDetailClasses,
+  getDescriptionPairClasses,
+  getDescriptionTermClasses,
+} from "./constants";
+import type {
+  DescriptionDetailProps,
+  DescriptionLayout,
+  DescriptionProps,
+  DescriptionSize,
+  DescriptionTermProps,
+} from "./types";
 
-const Description = (props: DescriptionProps) => {
-  return <dl {...props} />;
+type DescriptionContextValue = {
+  size: DescriptionSize;
+  layout: DescriptionLayout;
+  dividers: boolean;
+  striped: boolean;
+};
+
+const DescriptionContext = createContext<DescriptionContextValue>({
+  size: "md",
+  layout: "vertical",
+  dividers: false,
+  striped: false,
+});
+
+const useDescriptionContext = () => useContext(DescriptionContext);
+
+const Description = ({
+  className,
+  variant = "default",
+  layout = "vertical",
+  size = "md",
+  dividers = false,
+  striped = false,
+  ...props
+}: DescriptionProps) => {
+  return (
+    <DescriptionContext.Provider value={{ size, layout, dividers, striped }}>
+      <dl
+        className={cn(getDescriptionClasses({ variant, layout, size }), className)}
+        {...props}
+      />
+    </DescriptionContext.Provider>
+  );
 };
 
 const DescriptionTerm = ({ className, ...props }: DescriptionTermProps) => {
-  return <dt className={cn("py-2 text-sm font-semibold", className)} {...props} />;
+  const { size, layout } = useDescriptionContext();
+  return (
+    <dt className={cn(getDescriptionTermClasses({ size, layout }), className)} {...props} />
+  );
 };
 
 const DescriptionDetail = ({ className, ...props }: DescriptionDetailProps) => {
-  return <dd className={cn("text-base not-last:mb-1", className)} {...props} />;
+  const { size, layout, dividers } = useDescriptionContext();
+  return (
+    <dd
+      className={cn(getDescriptionDetailClasses({ size, layout, dividers }), className)}
+      {...props}
+    />
+  );
+};
+
+const DescriptionPair = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const { layout, striped } = useDescriptionContext();
+  return <div className={cn(getDescriptionPairClasses({ layout, striped }), className)} {...props} />;
 };
 
 Description.Term = DescriptionTerm;
 Description.Detail = DescriptionDetail;
+Description.Pair = DescriptionPair;
 
 export { Description };

package/src/components/Description/DescriptionGroup.tsx

@@ -0,0 +1,39 @@
+import { cn } from "../../utilities";
+import { getDescriptionGroupClasses, getDescriptionGroupItemClasses } from "./constants";
+import type { DescriptionGroupProps } from "./types";
+
+const DescriptionGroup = ({
+  className,
+  children,
+  direction = "column",
+  dividers = false,
+  title,
+  description,
+  ...props
+}: DescriptionGroupProps) => {
+  return (
+    <div className={cn("flex flex-col", className)} {...props}>
+      {(title || description) && (
+        <div className="mb-4">
+          {title && <h3 className="text-base font-semibold text-base-content">{title}</h3>}
+          {description && (
+            <p className="mt-0.5 text-sm text-base-content/60">{description}</p>
+          )}
+        </div>
+      )}
+      <div className={getDescriptionGroupClasses({ direction, dividers })}>
+        {Array.isArray(children)
+          ? children.map((child, i) => (
+              <div key={i} className={getDescriptionGroupItemClasses()}>
+                {child}
+              </div>
+            ))
+          : children}
+      </div>
+    </div>
+  );
+};
+
+DescriptionGroup.displayName = "DescriptionGroup";
+
+export { DescriptionGroup };

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: {