@arolariu/components 0.5.0 → 1.0.0

package/src/hooks/useIsMobile.tsx

@@ -1,42 +1,21 @@
 "use client";
-import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768;
+import {useMediaQuery} from "./useMediaQuery";
 
 /**
  * A custom React hook that detects whether the current device is a mobile device
- * based on the screen width.
- * This hook uses a media query to check if the viewport width is less than the defined
- * mobile breakpoint (768px). It updates the state when the window size changes.
- * @returns Returns true if the viewport width is less than the mobile breakpoint,
- * false otherwise.
+ * based on the screen width (viewport < 768px).
+ *
+ * @returns `true` if the viewport width is less than 768px, `false` otherwise.
+ *
  * @example
  * ```tsx
  * function MyComponent() {
  *   const isMobile = useIsMobile();
- *
- *   return (
- *     <div>
- *       {isMobile ? 'Mobile View' : 'Desktop View'}
- *     </div>
- *   );
+ *   return <div>{isMobile ? 'Mobile View' : 'Desktop View'}</div>;
  * }
  * ```
  */
 export function useIsMobile(): boolean {
-  const [isMobile, setIsMobile] = React.useState<boolean | null>(null);
-
-  React.useEffect(() => {
-    const mql = globalThis.window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
-      setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
-    setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return Boolean(isMobile);
+  return useMediaQuery("(max-width: 767px)");
 }

package/src/hooks/useMediaQuery.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as React from "react";
+
+/**
+ * Subscribes to a CSS media query and returns whether it currently matches.
+ * SSR-safe — returns `false` on the server until hydration.
+ *
+ * @param query - A valid CSS media query string (e.g. `"(min-width: 768px)"`).
+ * @returns `true` when the media query matches, `false` otherwise.
+ *
+ * @example
+ * ```tsx
+ * const isWide = useMediaQuery("(min-width: 1024px)");
+ * ```
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = React.useState(false);
+
+  React.useEffect(() => {
+    const mql = globalThis.window.matchMedia(query);
+    const onChange = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+    setMatches(mql.matches);
+    mql.addEventListener("change", onChange);
+
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+
+  return matches;
+}

package/src/hooks/usePrefersContrast.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import {useMediaQuery} from "./useMediaQuery";
+
+/**
+ * Returns whether the user prefers higher contrast.
+ *
+ * @remarks
+ * Wraps a `prefers-contrast` media query in a semantic accessibility hook so components
+ * can adapt borders, focus states, and surface styling without repeating query strings.
+ *
+ * @returns `true` when `prefers-contrast: more` is active.
+ *
+ * @example
+ * ```tsx
+ * const highContrast = usePrefersContrast();
+ * ```
+ *
+ * @see {@link useMediaQuery} — Shared media-query subscription hook.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast | MDN prefers-contrast}
+ */
+export function usePrefersContrast(): boolean {
+  return useMediaQuery("(prefers-contrast: more)");
+}

package/src/hooks/useReducedMotion.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+/**
+ * Returns whether the user prefers reduced motion.
+ *
+ * @remarks
+ * This hook is re-exported from `motion/react` so consumers can depend on the component
+ * library for motion-aware behavior without importing Motion directly.
+ *
+ * @returns `true` when `prefers-reduced-motion: reduce` is active, or `null` until the first client measurement when Motion has not resolved the preference yet.
+ *
+ * @example
+ * ```tsx
+ * const prefersReduced = useReducedMotion();
+ * ```
+ *
+ * @see {@link https://motion.dev/docs/react-use-reduced-motion | Motion useReducedMotion}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion | MDN prefers-reduced-motion}
+ */
+export {useReducedMotion} from "motion/react";

package/src/index.css

@@ -1,73 +1,135 @@
-@import "tailwindcss";
-@config '../tailwind.config.ts';
-@custom-variant dark (&:is(.dark *));
-
 /*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-}
+ * @arolariu/components — Design Tokens
+ * Base UI + Mira-inspired style + Blue theme + Large radius (0.875rem)
+ *
+ * This file defines the CSS custom properties used across all component modules.
+ * Consumers can override any token by redefining the custom property in their own CSS.
+ */
 
 :root {
-  --sidebar: hsl(0 0% 98%);
-  --sidebar-foreground: hsl(240 5.3% 26.1%);
-  --sidebar-primary: hsl(240 5.9% 10%);
-  --sidebar-primary-foreground: hsl(0 0% 98%);
-  --sidebar-accent: hsl(240 4.8% 95.9%);
-  --sidebar-accent-foreground: hsl(240 5.9% 10%);
-  --sidebar-border: hsl(220 13% 91%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
-}
-.dark {
-  --sidebar: hsl(240 5.9% 10%);
-  --sidebar-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-primary: hsl(224.3 76.3% 48%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(240 3.7% 15.9%);
-  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-border: hsl(240 3.7% 15.9%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  /* Radius scale */
+  --ac-radius: 0.875rem;
+  --ac-radius-xs: calc(var(--ac-radius) * 0.4);
+  --ac-radius-sm: calc(var(--ac-radius) * 0.6);
+  --ac-radius-md: calc(var(--ac-radius) * 0.8);
+  --ac-radius-lg: var(--ac-radius);
+  --ac-radius-xl: calc(var(--ac-radius) * 1.4);
+
+  /* Core semantic tokens — Light mode */
+  --ac-background: oklch(1 0 0);
+  --ac-foreground: oklch(0.145 0.004 285.823);
+  --ac-card: oklch(1 0 0);
+  --ac-card-foreground: oklch(0.145 0.004 285.823);
+  --ac-popover: oklch(1 0 0);
+  --ac-popover-foreground: oklch(0.145 0.004 285.823);
+  --ac-primary: oklch(0.488 0.243 264.376);
+  --ac-primary-foreground: oklch(0.97 0.014 254.604);
+  --ac-secondary: oklch(0.967 0.001 286.375);
+  --ac-secondary-foreground: oklch(0.21 0.006 285.885);
+  --ac-muted: oklch(0.967 0.001 286.375);
+  --ac-muted-foreground: oklch(0.556 0.002 285.938);
+  --ac-accent: oklch(0.967 0.001 286.375);
+  --ac-accent-foreground: oklch(0.21 0.006 285.885);
+  --ac-destructive: oklch(0.577 0.245 27.325);
+  --ac-destructive-foreground: oklch(0.577 0.245 27.325);
+  --ac-success: oklch(0.627 0.194 149.214);
+  --ac-success-foreground: oklch(0.985 0 0);
+  --ac-warning: oklch(0.769 0.188 70.08);
+  --ac-warning-foreground: oklch(0.145 0.004 285.823);
+  --ac-info: oklch(0.488 0.243 264.376);
+  --ac-info-foreground: oklch(0.97 0.014 254.604);
+  --ac-border: oklch(0.922 0.004 286.32);
+  --ac-input: oklch(0.922 0.004 286.32);
+  --ac-ring: oklch(0.488 0.243 264.376);
+
+  /* Chart tokens */
+  --ac-chart-1: oklch(0.646 0.222 41.116);
+  --ac-chart-2: oklch(0.6 0.118 184.714);
+  --ac-chart-3: oklch(0.398 0.07 227.392);
+  --ac-chart-4: oklch(0.828 0.189 84.429);
+  --ac-chart-5: oklch(0.769 0.188 70.08);
+
+  /* Sidebar tokens */
+  --ac-sidebar: oklch(0.985 0 0);
+  --ac-sidebar-foreground: oklch(0.145 0.004 285.823);
+  --ac-sidebar-primary: oklch(0.488 0.243 264.376);
+  --ac-sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --ac-sidebar-accent: oklch(0.967 0.001 286.375);
+  --ac-sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --ac-sidebar-border: oklch(0.922 0.004 286.32);
+  --ac-sidebar-ring: oklch(0.488 0.243 264.376);
+
+  /* Mira sizing scale — compact density */
+  --ac-size-xs: 1.25rem;   /* 20px — h-5 */
+  --ac-size-sm: 1.5rem;    /* 24px — h-6 */
+  --ac-size-md: 1.75rem;   /* 28px — h-7 */
+  --ac-size-default: 2rem; /* 32px — h-8 */
+  --ac-size-lg: 2.25rem;   /* 36px */
+
+  /* Typography scale — Mira compact */
+  --ac-text-xs: 0.75rem;
+  --ac-text-sm: 0.8125rem;
+  --ac-text-base: 0.875rem;
+  --ac-text-lg: 1rem;
+  --ac-text-xl: 1.125rem;
+
+  /* Spacing scale */
+  --ac-space-1: 0.25rem;
+  --ac-space-2: 0.5rem;
+  --ac-space-3: 0.75rem;
+  --ac-space-4: 1rem;
+  --ac-space-6: 1.5rem;
+  --ac-space-8: 2rem;
+
+  /* Transitions */
+  --ac-transition-fast: 100ms ease;
+  --ac-transition-normal: 150ms ease;
+  --ac-transition-slow: 200ms ease-in-out;
 }
 
-@theme inline {
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
+/* Dark mode tokens */
+.dark,
+[data-theme="dark"] {
+  --ac-background: oklch(0.145 0.004 285.823);
+  --ac-foreground: oklch(0.985 0 0);
+  --ac-card: oklch(0.145 0.004 285.823);
+  --ac-card-foreground: oklch(0.985 0 0);
+  --ac-popover: oklch(0.145 0.004 285.823);
+  --ac-popover-foreground: oklch(0.985 0 0);
+  --ac-primary: oklch(0.424 0.199 265.638);
+  --ac-primary-foreground: oklch(0.97 0.014 254.604);
+  --ac-secondary: oklch(0.269 0.006 285.885);
+  --ac-secondary-foreground: oklch(0.985 0 0);
+  --ac-muted: oklch(0.269 0.006 285.885);
+  --ac-muted-foreground: oklch(0.708 0.002 286.067);
+  --ac-accent: oklch(0.269 0.006 285.885);
+  --ac-accent-foreground: oklch(0.985 0 0);
+  --ac-destructive: oklch(0.704 0.191 22.216);
+  --ac-destructive-foreground: oklch(0.704 0.191 22.216);
+  --ac-success: oklch(0.527 0.164 149.214);
+  --ac-success-foreground: oklch(0.985 0 0);
+  --ac-warning: oklch(0.669 0.158 70.08);
+  --ac-warning-foreground: oklch(0.145 0.004 285.823);
+  --ac-info: oklch(0.424 0.199 265.638);
+  --ac-info-foreground: oklch(0.97 0.014 254.604);
+  --ac-border: oklch(0.269 0.006 285.885);
+  --ac-input: oklch(0.269 0.006 285.885);
+  --ac-ring: oklch(0.424 0.199 265.638);
 
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
+  --ac-chart-1: oklch(0.488 0.243 264.376);
+  --ac-chart-2: oklch(0.696 0.17 162.48);
+  --ac-chart-3: oklch(0.769 0.188 70.08);
+  --ac-chart-4: oklch(0.627 0.265 303.9);
+  --ac-chart-5: oklch(0.645 0.246 16.439);
 
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
+  --ac-sidebar: oklch(0.205 0.006 285.885);
+  --ac-sidebar-foreground: oklch(0.985 0 0);
+  --ac-sidebar-primary: oklch(0.424 0.199 265.638);
+  --ac-sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --ac-sidebar-accent: oklch(0.269 0.006 285.885);
+  --ac-sidebar-accent-foreground: oklch(0.985 0 0);
+  --ac-sidebar-border: oklch(0.269 0.006 285.885);
+  --ac-sidebar-ring: oklch(0.424 0.199 265.638);
 }
+
+/* Note: No global * reset — consumers manage their own border/box-sizing defaults */

package/src/index.ts

@@ -1,3 +1,18 @@
+// @arolariu/components — Base UI + CSS Modules component library
+// Version 1.0.0 — Built on @base-ui/react primitives
+
+// ============================================================
+// Base UI Utilities (re-exported for consumer convenience)
+// ============================================================
+export {CSPProvider} from "@base-ui/react/csp-provider";
+export {DirectionProvider} from "@base-ui/react/direction-provider";
+export {mergeProps} from "@base-ui/react/merge-props";
+export {useRender} from "@base-ui/react/use-render";
+
+// ============================================================
+// Components
+// ============================================================
+
 export {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "./components/ui/accordion";
 
 export {
@@ -15,12 +30,14 @@ export {
 } from "./components/ui/alert-dialog";
 
 export {Alert, AlertDescription, AlertTitle} from "./components/ui/alert";
+export type {AlertProps, AlertVariant} from "./components/ui/alert";
 
 export {AspectRatio} from "./components/ui/aspect-ratio";
 
 export {Avatar, AvatarFallback, AvatarImage} from "./components/ui/avatar";
 
 export {Badge, badgeVariants} from "./components/ui/badge";
+export type {BadgeProps, BadgeVariant} from "./components/ui/badge";
 
 export {
   Breadcrumb,
@@ -33,23 +50,99 @@ export {
 } from "./components/ui/breadcrumb";
 
 export {Button, buttonVariants} from "./components/ui/button";
+export type {ButtonProps, ButtonSize, ButtonState, ButtonVariant} from "./components/ui/button";
 
 export {ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants} from "./components/ui/button-group";
 
 export {Calendar} from "./components/ui/calendar";
+export type {CalendarProps, DateRange, DayPickerProps, Matcher} from "./components/ui/calendar";
 
 export {Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "./components/ui/card";
 
 export {Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi} from "./components/ui/carousel";
+export type {CarouselOptions, CarouselPlugin, CarouselProps} from "./components/ui/carousel";
+
+export {CheckboxGroup} from "./components/ui/checkbox-group";
 
 export {
+  // Recharts series elements
+  Area,
+  // Recharts chart containers
+  AreaChart,
+  Bar,
+  BarChart,
+  BarStack,
+  // Recharts annotations & overlays
+  Brush,
+  // Recharts axis & grid
+  CartesianGrid,
+  // Recharts shapes
+  Cell,
   ChartContainer,
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
   ChartTooltip,
   ChartTooltipContent,
+  ComposedChart,
+  Cross,
+  Curve,
+  Customized,
+  DefaultZIndexes,
+  Dot,
+  ErrorBar,
+  Funnel,
+  FunnelChart,
+  LabelList,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Polygon,
+  Radar,
+  RadarChart,
+  RadialBar,
+  RadialBarChart,
+  RechartsLabel,
+  Rectangle,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  // Recharts layout
+  ResponsiveContainer,
+  Sankey,
+  Scatter,
+  ScatterChart,
+  Sector,
+  SunburstChart,
+  Symbols,
+  Trapezoid,
+  Treemap,
+  XAxis,
+  YAxis,
+  ZAxis,
+  // Recharts z-index (v3.4+)
+  ZIndexLayer,
+  useActiveTooltipCoordinate,
+  useActiveTooltipDataPoints,
+  useActiveTooltipLabel,
+  useChartHeight,
+  // Recharts hooks (v3+)
+  useChartWidth,
+  useIsTooltipActive,
+  useMargin,
+  useOffset,
+  usePlotArea,
+  useXAxisDomain,
+  useYAxisDomain,
   type ChartConfig,
+  type DefaultLegendContentProps,
+  // Recharts types
+  type DefaultTooltipContentProps,
+  type TooltipValueType,
 } from "./components/ui/chart";
 
 export {Checkbox} from "./components/ui/checkbox";
@@ -145,11 +238,62 @@ export {
   FieldTitle,
 } from "./components/ui/field";
 
-export {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField} from "./components/ui/form";
+export {
+  Controller,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useController,
+  useFieldArray,
+  useForm,
+  useFormContext,
+  useFormField,
+  useFormState,
+  useWatch,
+  type FormControlProps,
+} from "./components/ui/form";
+export type {
+  Control,
+  ControllerFieldState,
+  ControllerProps,
+  ControllerRenderProps,
+  DefaultValues,
+  FieldErrors,
+  FieldPath,
+  FieldValues,
+  Path,
+  FieldError as RHFFieldError,
+  RegisterOptions,
+  Resolver,
+  SubmitHandler,
+  UseControllerReturn,
+  UseFieldArrayReturn,
+  UseFormReturn,
+} from "./components/ui/form";
 
 export {HoverCard, HoverCardContent, HoverCardTrigger} from "./components/ui/hover-card";
 
-export {InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot} from "./components/ui/input-otp";
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+} from "./components/ui/input-otp";
+export type {
+  InputOTPGroupProps,
+  InputOTPProps,
+  InputOTPSeparatorProps,
+  InputOTPSlotProps,
+  OTPInputProps,
+  SlotProps,
+} from "./components/ui/input-otp";
 
 export {Input} from "./components/ui/input";
 
@@ -179,6 +323,8 @@ export {Kbd, KbdGroup} from "./components/ui/kbd";
 
 export {Label} from "./components/ui/label";
 
+export {Meter, MeterIndicator, MeterLabel, MeterTrack} from "./components/ui/meter";
+
 export {
   Menubar,
   MenubarCheckboxItem,
@@ -210,6 +356,15 @@ export {
   navigationMenuTriggerStyle,
 } from "./components/ui/navigation-menu";
 
+export {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  NumberFieldScrubArea,
+} from "./components/ui/number-field";
+
 export {
   Pagination,
   PaginationContent,
@@ -227,6 +382,13 @@ export {Progress} from "./components/ui/progress";
 export {RadioGroup, RadioGroupItem} from "./components/ui/radio-group";
 
 export {ResizableHandle, ResizablePanel, ResizablePanelGroup} from "./components/ui/resizable";
+export type {
+  ImperativePanelGroupHandle,
+  ImperativePanelHandle,
+  ResizableHandleProps,
+  ResizablePanelGroupProps,
+  ResizablePanelProps,
+} from "./components/ui/resizable";
 
 export {ScrollArea, ScrollBar} from "./components/ui/scroll-area";
 
@@ -292,6 +454,7 @@ export {Spinner} from "./components/ui/spinner";
 export {Slider} from "./components/ui/slider";
 
 export {Toaster, toast} from "./components/ui/sonner";
+export type {Toast} from "./components/ui/sonner";
 
 export {Switch} from "./components/ui/switch";
 
@@ -301,19 +464,41 @@ export {Tabs, TabsContent, TabsList, TabsTrigger} from "./components/ui/tabs";
 
 export {Textarea} from "./components/ui/textarea";
 
+export {Toolbar, ToolbarButton, ToolbarGroup, ToolbarLink, ToolbarSeparator} from "./components/ui/toolbar";
+
 export {ToggleGroup, ToggleGroupItem} from "./components/ui/toggle-group";
+export type {ToggleGroupItemProps, ToggleGroupProps} from "./components/ui/toggle-group";
 
 export {Toggle, toggleVariants} from "./components/ui/toggle";
+export type {ToggleProps, ToggleSize, ToggleVariant} from "./components/ui/toggle";
 
 export {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "./components/ui/tooltip";
 
+export {CopyButton, type CopyButtonProps} from "./components/ui/copy-button";
+export {Stepper, type StepperProps} from "./components/ui/stepper";
+export {
+  Timeline,
+  TimelineContent,
+  TimelineDot,
+  TimelineItem,
+  type TimelineContentProps,
+  type TimelineDotProps,
+  type TimelineItemProps,
+  type TimelineProps,
+} from "./components/ui/timeline";
+export {VisuallyHidden, type VisuallyHiddenProps} from "./components/ui/visually-hidden";
+
+export {useBreakpoint, type Breakpoint} from "./hooks/useBreakpoint";
+export {useColorScheme, type ColorScheme} from "./hooks/useColorScheme";
+export {useFocusVisible} from "./hooks/useFocusVisible";
 export {useIsMobile} from "./hooks/useIsMobile";
+export {useMediaQuery} from "./hooks/useMediaQuery";
+export {usePrefersContrast} from "./hooks/usePrefersContrast";
+export {useReducedMotion} from "./hooks/useReducedMotion";
 export {useWindowSize} from "./hooks/useWindowSize";
 
 export {
-  // New descriptive names
   adjustHexColorLightness,
-  // Legacy aliases (deprecated)
   adjustLightness,
   calculateComplementaryHexColor,
   convertHexToHslString,
@@ -327,25 +512,18 @@ export {
   validateHexColorFormat,
 } from "./lib/color-conversion-utilities";
 export {cn} from "./lib/utilities";
+export type {ClassValue} from "./lib/utilities";
 
 // Animate-UI exports:
-export {FlipButton, type FlipButtonProps, type FlipDirection} from "./components/ui/flip-button";
-
-export {RippleButton, type RippleButtonProps} from "./components/ui/ripple-button";
-
-export {CountingNumber, type CountingNumberProps} from "./components/ui/counting-number";
-
-export {GradientText, type GradientTextProps} from "./components/ui/gradient-text";
-
-export {HighlightText, type HighlightTextProps} from "./components/ui/highlight-text";
-
 export {BubbleBackground, type BubbleBackgroundProps} from "./components/ui/bubble-background";
-
+export {CountingNumber, type CountingNumberProps} from "./components/ui/counting-number";
 export {FireworksBackground, type FireworksBackgroundProps} from "./components/ui/fireworks-background";
-
+export {FlipButton, type FlipButtonProps, type FlipDirection} from "./components/ui/flip-button";
 export {GradientBackground, type GradientBackgroundProps} from "./components/ui/gradient-background";
-
+export {GradientText, type GradientTextProps} from "./components/ui/gradient-text";
+export {HighlightText, type HighlightTextProps} from "./components/ui/highlight-text";
 export {HoleBackground, type HoleBackgroundProps} from "./components/ui/hole-background";
+export {RippleButton, type RippleButtonProps} from "./components/ui/ripple-button";
 
 // Magic UI exports:
 export {DotBackground} from "./components/ui/dot-background";
@@ -355,7 +533,7 @@ export {Scratcher} from "./components/ui/scratcher";
 export {BackgroundBeams} from "./components/ui/background-beams";
 export {TypewriterText, TypewriterTextSmooth} from "./components/ui/typewriter";
 
-// Jia Wei Ng export (https://github.com/jiaweing/DropDrawer):
+// DropDrawer export:
 export {
   DropDrawer,
   DropDrawerContent,

package/src/lib/utilities.ts

@@ -1,12 +1,13 @@
 import {clsx, type ClassValue} from "clsx";
-import {twMerge} from "tailwind-merge";
 
 /**
- * Helper function that merges tailwindcss
- * class names in the given input array.
+ * Helper function that merges CSS class names.
+ * Uses clsx for conditional class name composition.
  * @param inputs Array of class names
- * @returns Merged class names
+ * @returns Merged class names string
  */
-export function cn(...inputs: ReadonlyArray<ClassValue>): Readonly<string> {
-  return twMerge(clsx(inputs));
+export function cn(...inputs: ReadonlyArray<ClassValue>): string {
+  return clsx(inputs);
 }
+
+export type {ClassValue};