@arolariu/components 0.5.0 → 1.0.0

package/src/components/ui/calendar.module.css

@@ -0,0 +1,250 @@
+.container {
+  --ac-cell-size: var(--ac-size-default);
+  width: fit-content;
+  padding: var(--ac-space-3);
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  border-radius: var(--ac-radius-lg);
+}
+
+.calendarRoot {
+  width: fit-content;
+}
+
+.root {
+  width: fit-content;
+}
+
+.months {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-4);
+}
+
+@media (min-width: 768px) {
+  .months {
+    flex-direction: row;
+  }
+}
+
+.month {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--ac-space-4);
+}
+
+.nav {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ac-space-1);
+}
+
+.navButton {
+  width: var(--ac-cell-size);
+  height: var(--ac-cell-size);
+  padding: 0;
+
+  &[disabled],
+  &[aria-disabled="true"] {
+    opacity: 0.5;
+  }
+}
+
+.monthCaption {
+  display: flex;
+  width: 100%;
+  height: var(--ac-cell-size);
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--ac-cell-size);
+}
+
+.dropdowns {
+  display: flex;
+  width: 100%;
+  height: var(--ac-cell-size);
+  align-items: center;
+  justify-content: center;
+  gap: var(--ac-space-2);
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+}
+
+.dropdownRoot {
+  position: relative;
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-background);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+
+  &:focus-within {
+    outline: 3px solid color-mix(in oklch, var(--ac-ring), transparent 65%);
+    outline-offset: 0;
+    border-color: var(--ac-ring);
+  }
+}
+
+.dropdown {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+}
+
+.captionLabel {
+  user-select: none;
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+}
+
+.captionLabelDropdown {
+  display: flex;
+  height: 2rem;
+  align-items: center;
+  gap: var(--ac-space-1);
+  padding-inline: var(--ac-space-2);
+  border-radius: var(--ac-radius-md);
+}
+
+.monthGrid {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.weekdays {
+  display: flex;
+}
+
+.weekday {
+  flex: 1;
+  border-radius: var(--ac-radius-md);
+  color: var(--ac-muted-foreground);
+  font-size: 0.8rem;
+  font-weight: 400;
+  text-align: center;
+  user-select: none;
+}
+
+.week {
+  display: flex;
+  width: 100%;
+  margin-top: var(--ac-space-2);
+}
+
+.weekNumberHeader,
+.weekNumber {
+  width: var(--ac-cell-size);
+  color: var(--ac-muted-foreground);
+  font-size: 0.8rem;
+  text-align: center;
+  user-select: none;
+}
+
+.weekNumberCell {
+  display: flex;
+  width: var(--ac-cell-size);
+  height: var(--ac-cell-size);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.day {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  text-align: center;
+  user-select: none;
+}
+
+.rangeStart {
+  border-top-left-radius: var(--ac-radius-md);
+  border-bottom-left-radius: var(--ac-radius-md);
+  background-color: var(--ac-muted);
+}
+
+.rangeMiddle {
+  border-radius: 0;
+}
+
+.rangeEnd {
+  border-top-right-radius: var(--ac-radius-md);
+  border-bottom-right-radius: var(--ac-radius-md);
+  background-color: var(--ac-muted);
+}
+
+.today {
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-muted);
+  color: var(--ac-foreground);
+}
+
+.outside {
+  color: var(--ac-muted-foreground);
+}
+
+.day[data-disabled="true"] {
+  opacity: 0.5;
+  color: var(--ac-muted-foreground);
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.chevron {
+  width: 1rem;
+  height: 1rem;
+}
+
+.dayButton {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  width: 100%;
+  min-width: var(--ac-cell-size);
+  height: auto;
+  aspect-ratio: 1;
+  flex-direction: column;
+  gap: var(--ac-space-1);
+  font-weight: 400;
+  line-height: 1;
+
+  &:focus-visible,
+  .day[data-focused="true"] & {
+    z-index: 1;
+    outline: 3px solid color-mix(in oklch, var(--ac-ring), transparent 65%);
+    outline-offset: -1px;
+  }
+
+  &[data-selected-single="true"],
+  &[data-range-start="true"],
+  &[data-range-end="true"] {
+    background-color: var(--ac-foreground);
+    color: var(--ac-background);
+  }
+
+  &[data-range-middle="true"] {
+    border-radius: 0;
+    background-color: var(--ac-muted);
+    color: var(--ac-foreground);
+  }
+
+  &[data-range-start="true"],
+  &[data-range-end="true"] {
+    border-radius: var(--ac-radius-md);
+  }
+
+  & > span {
+    font-size: var(--ac-text-xs);
+    opacity: 0.7;
+  }
+}
+

package/src/components/ui/calendar.tsx

@@ -1,14 +1,63 @@
 "use client";
 
-/* eslint-disable */
+/* eslint-disable complexity, react/no-unstable-nested-components, react-x/no-nested-component-definitions, react/prop-types */
 
 import {ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon} from "lucide-react";
 import * as React from "react";
-import {DayButton, DayPicker, getDefaultClassNames} from "react-day-picker";
+import {DayButton, DayPicker} from "react-day-picker";
 
-import {Button, buttonVariants} from "@/components/ui/button";
+import {Button} from "@/components/ui/button";
 import {cn} from "@/lib/utilities";
 
+import buttonStyles from "./button.module.css";
+import styles from "./calendar.module.css";
+
+type CalendarButtonVariant = NonNullable<React.ComponentProps<typeof Button>["variant"]>;
+type DayPickerComponents = NonNullable<React.ComponentProps<typeof DayPicker>["components"]>;
+type CalendarWeekNumberProps = React.ComponentProps<NonNullable<DayPickerComponents["WeekNumber"]>>;
+
+/**
+ * Props for the shared calendar component.
+ */
+type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  /**
+   * Visual variant applied to the navigation buttons.
+   * @default "ghost"
+   */
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+};
+
+const calendarButtonVariantStyles: Record<CalendarButtonVariant, string> = {
+  default: buttonStyles.default,
+  destructive: buttonStyles.destructive,
+  ghost: buttonStyles.ghost,
+  link: buttonStyles.link,
+  outline: buttonStyles.outline,
+  secondary: buttonStyles.secondary,
+};
+
+/**
+ * Renders a styled calendar built on top of `react-day-picker`.
+ *
+ * @remarks
+ * - Renders the `DayPicker` calendar root
+ * - Built on `react-day-picker` with shared button styling from the component library
+ * - Preserves the V1 public API while aligning visuals with the current design system
+ * - Overrides the default DayPicker `Root`, `Chevron`, `DayButton`, and `WeekNumber`
+ *   components while still allowing consumers to replace them through the `components` prop
+ * - Override the default chevron icons with `components={{Chevron: YourChevronComponent}}`
+ *
+ * @example
+ * ```tsx
+ * <Calendar
+ *   mode='single'
+ *   selected={new Date()}
+ *   onSelect={(date) => console.log(date)}
+ * />
+ * ```
+ *
+ * @see {@link https://daypicker.dev | React Day Picker Docs}
+ */
 function Calendar({
   className,
   classNames,
@@ -18,99 +67,75 @@ function Calendar({
   formatters,
   components,
   ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
-}) {
-  const defaultClassNames = getDefaultClassNames();
-
+}: Readonly<CalendarProps>): React.JSX.Element {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn(
-        "group/calendar bg-white p-3 [--cell-size:2rem] dark:bg-neutral-950 [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className,
-      )}
+      className={cn(styles.container, className)}
       captionLayout={captionLayout}
       formatters={{
-        formatMonthDropdown: (date) => date.toLocaleString("default", {month: "short"}),
+        formatMonthDropdown: (date) => {
+          const locale = props.locale;
+
+          return date.toLocaleString(locale?.code ?? "default", {month: "short"});
+        },
         ...formatters,
       }}
       classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+        ...classNames,
+        root: cn(styles.root, classNames?.root),
+        months: cn(styles.months, classNames?.months),
+        month: cn(styles.month, classNames?.month),
+        nav: cn(styles.nav, classNames?.nav),
         button_previous: cn(
-          buttonVariants({variant: buttonVariant}),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_previous,
+          buttonStyles.button,
+          buttonStyles.sizeIcon,
+          calendarButtonVariantStyles[buttonVariant],
+          styles.navButton,
+          classNames?.button_previous,
         ),
         button_next: cn(
-          buttonVariants({variant: buttonVariant}),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_next,
-        ),
-        month_caption: cn("flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]", defaultClassNames.month_caption),
-        dropdowns: cn("flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
-        dropdown_root: cn(
-          "has-focus:border-neutral-950 border-neutral-200 shadow-xs has-focus:ring-neutral-950/50 has-focus:ring-[3px] relative rounded-md border dark:has-focus:border-neutral-300 dark:border-neutral-800 dark:has-focus:ring-neutral-300/50",
-          defaultClassNames.dropdown_root,
-        ),
-        dropdown: cn("bg-white absolute inset-0 opacity-0 dark:bg-neutral-950", defaultClassNames.dropdown),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "[&>svg]:text-neutral-500 flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5 dark:[&>svg]:text-neutral-400",
-          defaultClassNames.caption_label,
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-neutral-500 flex-1 select-none rounded-md text-[0.8rem] font-normal dark:text-neutral-400",
-          defaultClassNames.weekday,
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn("w-[--cell-size] select-none", defaultClassNames.week_number_header),
-        week_number: cn("text-neutral-500 select-none text-[0.8rem] dark:text-neutral-400", defaultClassNames.week_number),
-        day: cn(
-          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
-          defaultClassNames.day,
-        ),
-        range_start: cn("bg-neutral-100 rounded-l-md dark:bg-neutral-800", defaultClassNames.range_start),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-neutral-100 rounded-r-md dark:bg-neutral-800", defaultClassNames.range_end),
-        today: cn(
-          "bg-neutral-100 text-neutral-900 rounded-md data-[selected=true]:rounded-none dark:bg-neutral-800 dark:text-neutral-50",
-          defaultClassNames.today,
+          buttonStyles.button,
+          buttonStyles.sizeIcon,
+          calendarButtonVariantStyles[buttonVariant],
+          styles.navButton,
+          classNames?.button_next,
         ),
-        outside: cn(
-          "text-neutral-500 aria-selected:text-neutral-500 dark:text-neutral-400 dark:aria-selected:text-neutral-400",
-          defaultClassNames.outside,
-        ),
-        disabled: cn("text-neutral-500 opacity-50 dark:text-neutral-400", defaultClassNames.disabled),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
+        month_caption: cn(styles.monthCaption, classNames?.month_caption),
+        dropdowns: cn(styles.dropdowns, classNames?.dropdowns),
+        dropdown_root: cn(styles.dropdownRoot, classNames?.dropdown_root),
+        dropdown: cn(styles.dropdown, classNames?.dropdown),
+        caption_label: cn(styles.captionLabel, captionLayout !== "label" && styles.captionLabelDropdown, classNames?.caption_label),
+        month_grid: cn(styles.monthGrid, classNames?.month_grid),
+        weekdays: cn(styles.weekdays, classNames?.weekdays),
+        weekday: cn(styles.weekday, classNames?.weekday),
+        week: cn(styles.week, classNames?.week),
+        week_number_header: cn(styles.weekNumberHeader, classNames?.week_number_header),
+        week_number: cn(styles.weekNumber, classNames?.week_number),
+        day: cn(styles.day, classNames?.day),
+        range_start: cn(styles.rangeStart, classNames?.range_start),
+        range_middle: cn(styles.rangeMiddle, classNames?.range_middle),
+        range_end: cn(styles.rangeEnd, classNames?.range_end),
+        today: cn(styles.today, classNames?.today),
+        outside: cn(styles.outside, classNames?.outside),
+        disabled: classNames?.disabled,
+        hidden: cn(styles.hidden, classNames?.hidden),
       }}
       components={{
-        Root: ({className, rootRef, ...props}) => {
-          return (
-            <div
-              data-slot='calendar'
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          );
-        },
-        Chevron: ({className, orientation, ...props}) => {
+        Root: ({className: rootClassName, rootRef, ...rootProps}) => (
+          <div
+            data-slot='calendar'
+            ref={rootRef}
+            className={cn(styles.calendarRoot, rootClassName)}
+            {...rootProps}
+          />
+        ),
+        Chevron: ({className: chevronClassName, orientation, ...chevronProps}) => {
           if (orientation === "left") {
             return (
               <ChevronLeftIcon
-                className={cn("size-4", className)}
-                {...props}
+                className={cn(styles.chevron, chevronClassName)}
+                {...chevronProps}
               />
             );
           }
@@ -118,27 +143,21 @@ function Calendar({
           if (orientation === "right") {
             return (
               <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
+                className={cn(styles.chevron, chevronClassName)}
+                {...chevronProps}
               />
             );
           }
 
           return (
             <ChevronDownIcon
-              className={cn("size-4", className)}
-              {...props}
+              className={cn(styles.chevron, chevronClassName)}
+              {...chevronProps}
             />
           );
         },
         DayButton: CalendarDayButton,
-        WeekNumber: ({children, ...props}) => {
-          return (
-            <td {...props}>
-              <div className='flex size-[--cell-size] items-center justify-center text-center'>{children}</div>
-            </td>
-          );
-        },
+        WeekNumber: CalendarWeekNumber,
         ...components,
       }}
       {...props}
@@ -146,13 +165,22 @@ function Calendar({
   );
 }
 
-function CalendarDayButton({className, day, modifiers, ...props}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames();
+function CalendarWeekNumber({week, children, ...tdProps}: Readonly<CalendarWeekNumberProps>): React.JSX.Element {
+  return (
+    <td {...tdProps}>
+      <div className={styles.weekNumberCell}>{children}</div>
+    </td>
+  );
+}
 
+function CalendarDayButton({className, day, modifiers, ...props}: Readonly<React.ComponentProps<typeof DayButton>>): React.JSX.Element {
   const ref = React.useRef<HTMLButtonElement>(null);
+
   React.useEffect(() => {
-    if (modifiers["focused"]) ref.current?.focus();
-  }, [modifiers["focused"]]);
+    if (modifiers["focused"]) {
+      ref.current?.focus();
+    }
+  }, [modifiers]);
 
   return (
     <Button
@@ -160,18 +188,20 @@ function CalendarDayButton({className, day, modifiers, ...props}: React.Componen
       variant='ghost'
       size='icon'
       data-day={day.date.toLocaleDateString()}
-      data-selected-single={modifiers["selected"] && !modifiers["range_start"] && !modifiers["range_end"] && !modifiers["range_middle"]}
-      data-range-start={modifiers["range_start"]}
-      data-range-end={modifiers["range_end"]}
-      data-range-middle={modifiers["range_middle"]}
-      className={cn(
-        "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:bg-neutral-900 data-[range-end=true]:text-neutral-50 data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-neutral-100 data-[range-middle=true]:text-neutral-900 data-[range-start=true]:rounded-md data-[range-start=true]:bg-neutral-900 data-[range-start=true]:text-neutral-50 data-[selected-single=true]:bg-neutral-900 data-[selected-single=true]:text-neutral-50 dark:data-[range-end=true]:bg-neutral-50 dark:data-[range-end=true]:text-neutral-900 dark:data-[range-middle=true]:bg-neutral-800 dark:data-[range-middle=true]:text-neutral-50 dark:data-[range-start=true]:bg-neutral-50 dark:data-[range-start=true]:text-neutral-900 dark:data-[selected-single=true]:bg-neutral-50 dark:data-[selected-single=true]:text-neutral-900 [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className,
+      data-selected-single={Boolean(
+        modifiers["selected"] && !modifiers["range_start"] && !modifiers["range_end"] && !modifiers["range_middle"],
       )}
+      data-range-start={Boolean(modifiers["range_start"])}
+      data-range-end={Boolean(modifiers["range_end"])}
+      data-range-middle={Boolean(modifiers["range_middle"])}
+      className={cn(styles.dayButton, className)}
       {...props}
     />
   );
 }
 
-export {Calendar, CalendarDayButton};
+Calendar.displayName = "Calendar";
+
+export type {DateRange, DayPickerProps, Matcher} from "react-day-picker";
+export {Calendar};
+export type {CalendarProps};

package/src/components/ui/card-skeleton.module.css

@@ -0,0 +1,50 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-4);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-lg);
+  padding: var(--ac-space-6);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-2);
+}
+
+.title {
+  width: 60%;
+  height: 1.25rem;
+}
+
+.subtitle {
+  width: 40%;
+  height: 0.875rem;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-2);
+}
+
+.line {
+  width: 100%;
+  height: 0.875rem;
+}
+
+.lineShort {
+  width: 75%;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.button {
+  width: 6rem;
+  height: 2.25rem;
+  border-radius: var(--ac-radius-md);
+}

package/src/components/ui/card-skeleton.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+import styles from "./card-skeleton.module.css";
+import {Skeleton} from "./skeleton";
+
+/**
+ * Represents the configurable props for the {@link CardSkeleton} component.
+ *
+ * @remarks
+ * Extends native `<div>` attributes so card-shaped loading placeholders can be composed
+ * in semantic regions, annotated for accessibility, and sized with custom class names.
+ */
+interface CardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Number of body placeholder lines rendered in the card content area.
+   *
+   * @default 3
+   */
+  lines?: number;
+}
+
+/**
+ * Renders a skeleton placeholder shaped like a card surface.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Mimics the visual structure of the library's card primitive with a header, stacked
+ * content lines, and a trailing footer action placeholder to reduce layout shift while
+ * data-backed card content is loading.
+ *
+ * @example
+ * ```tsx
+ * <CardSkeleton lines={4} aria-label="Loading billing summary" />
+ * ```
+ *
+ * @see {@link CardSkeletonProps} for available props
+ */
+const CardSkeleton = React.forwardRef<HTMLDivElement, CardSkeletonProps>(
+  ({lines = 3, className, ...props}: Readonly<CardSkeletonProps>, ref): React.JSX.Element => (
+    <div
+      ref={ref}
+      className={cn(styles.card, className)}
+      {...props}>
+      <div className={styles.header}>
+        <Skeleton className={styles.title} />
+        <Skeleton className={styles.subtitle} />
+      </div>
+      <div className={styles.content}>
+        {Array.from({length: lines}, (_, index) => (
+          <Skeleton
+            key={index}
+            className={cn(styles.line, index === lines - 1 && styles.lineShort)}
+          />
+        ))}
+      </div>
+      <div className={styles.footer}>
+        <Skeleton className={styles.button} />
+      </div>
+    </div>
+  ),
+);
+
+CardSkeleton.displayName = "CardSkeleton";
+
+export {CardSkeleton};
+export type {CardSkeletonProps};