keystone-design-bootstrap 1.0.3

package/src/design_system/elements/carousel/carousel.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import type { CSSProperties, ComponentPropsWithRef, HTMLAttributes, KeyboardEvent, ReactNode, Ref } from "react";
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useState } from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { cx } from '../../../utils/cx';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+    /** The options for the Embla carousel. */
+    opts?: CarouselOptions;
+    /** The plugins for the Embla carousel. */
+    plugins?: CarouselPlugin;
+    /** The orientation of the carousel. */
+    orientation?: "horizontal" | "vertical";
+    /** The function to set the API for the carousel. */
+    setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = CarouselProps & {
+    /** The ref of the carousel. */
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    /** The API of the carousel. */
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    /** The function to scroll the carousel to the previous slide. */
+    scrollPrev: () => void;
+    /** The function to scroll the carousel to the next slide. */
+    scrollNext: () => void;
+    /** Whether the carousel can scroll to the previous slide. */
+    canScrollPrev: boolean;
+    /** Whether the carousel can scroll to the next slide. */
+    canScrollNext: boolean;
+    /** The index of the selected slide. */
+    selectedIndex: number;
+    /** The scroll snaps of the carousel. */
+    scrollSnaps: number[];
+};
+
+export const CarouselContext = createContext<CarouselContextProps | null>(null);
+
+export const useCarousel = () => {
+    const context = useContext(CarouselContext);
+
+    if (!context) {
+        throw new Error("The `useCarousel` hook must be used within a <Carousel />");
+    }
+
+    return context;
+};
+
+const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }: ComponentPropsWithRef<"div"> & CarouselProps) => {
+    const [carouselRef, api] = useEmblaCarousel(
+        {
+            ...opts,
+            axis: orientation === "horizontal" ? "x" : "y",
+        },
+        plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+    const onInit = useCallback((api: CarouselApi) => {
+        if (!api) return;
+
+        setScrollSnaps(api.scrollSnapList());
+    }, []);
+
+    const onSelect = useCallback((api: CarouselApi) => {
+        if (!api) return;
+
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+        setSelectedIndex(api.selectedScrollSnap());
+    }, []);
+
+    const scrollPrev = useCallback(() => {
+        api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = useCallback(() => {
+        api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = useCallback(
+        (event: KeyboardEvent<HTMLDivElement>) => {
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                scrollPrev();
+            } else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                scrollNext();
+            }
+        },
+        [scrollPrev, scrollNext],
+    );
+
+    useEffect(() => {
+        if (!api || !setApi) return;
+
+        setApi(api);
+    }, [api, setApi]);
+
+    useEffect(() => {
+        if (!api) return;
+
+        onInit(api);
+        onSelect(api);
+
+        api.on("reInit", onInit);
+        api.on("reInit", onSelect);
+        api.on("select", onSelect);
+
+        return () => {
+            api?.off("select", onSelect);
+        };
+    }, [api, onInit, onSelect]);
+
+    return (
+        <CarouselContext.Provider
+            value={{
+                carouselRef,
+                api: api,
+                opts,
+                orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+                scrollPrev,
+                scrollNext,
+                canScrollPrev,
+                canScrollNext,
+                selectedIndex,
+                scrollSnaps,
+            }}
+        >
+            <div onKeyDownCapture={handleKeyDown} className={cx("relative", className)} role="region" aria-roledescription="carousel" {...props}>
+                {children}
+            </div>
+        </CarouselContext.Provider>
+    );
+};
+
+interface CarouselContentProps extends ComponentPropsWithRef<"div"> {
+    /** The class name of the content. */
+    className?: string;
+    /** Whether to hide the overflow. */
+    overflowHidden?: boolean;
+}
+
+const CarouselContent = ({ className, overflowHidden = true, ...props }: CarouselContentProps) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+        <div ref={carouselRef} className={cx("h-full w-full", overflowHidden && "overflow-hidden")}>
+            <div className={cx("flex max-h-full", orientation === "horizontal" ? "" : "flex-col", className)} {...props} />
+        </div>
+    );
+};
+
+const CarouselItem = ({ className, ...props }: ComponentPropsWithRef<"div">) => {
+    return <div role="group" aria-roledescription="slide" className={cx("min-w-0 shrink-0 grow-0 basis-full", className)} {...props} />;
+};
+
+interface TriggerRenderProps {
+    isDisabled: boolean;
+    onClick: () => void;
+}
+
+interface TriggerProps {
+    /** The ref of the trigger. */
+    ref?: Ref<HTMLButtonElement>;
+    /** If true, the child element will be cloned and passed down the prop of the trigger. */
+    asChild?: boolean;
+    /** The direction of the trigger. */
+    direction: "prev" | "next";
+    /** The children of the trigger. Can be a render prop or a valid element. */
+    children: ReactNode | ((props: TriggerRenderProps) => ReactNode);
+    /** The style of the trigger. */
+    style?: CSSProperties;
+    /** The class name of the trigger. */
+    className?: string | ((args: { isDisabled: boolean }) => string);
+}
+
+const Trigger = ({ className, children, asChild, direction, style, ...props }: TriggerProps) => {
+    const { scrollPrev, canScrollNext, scrollNext, canScrollPrev } = useCarousel();
+
+    const isDisabled = direction === "prev" ? !canScrollPrev : !canScrollNext;
+
+    const handleClick = () => {
+        if (isDisabled) return;
+
+        direction === "prev" ? scrollPrev() : scrollNext();
+    };
+
+    const computedClassName = typeof className === "function" ? className({ isDisabled }) : className;
+
+    const defaultAriaLabel = direction === "prev" ? "Previous slide" : "Next slide";
+
+    // If the children is a render prop, we need to pass the necessary props to the render prop.
+    if (typeof children === "function") {
+        return <>{children({ isDisabled, onClick: handleClick })}</>;
+    }
+
+    // If the children is a valid element, we need to clone it and pass the necessary props to the cloned element.
+    if (asChild && isValidElement(children)) {
+        return cloneElement(children, {
+            onClick: handleClick,
+            disabled: isDisabled,
+            "aria-label": defaultAriaLabel,
+            style: { ...(children.props as HTMLAttributes<HTMLElement>).style, ...style },
+            className: [computedClassName, (children.props as HTMLAttributes<HTMLElement>).className].filter(Boolean).join(" ") || undefined,
+        } as HTMLAttributes<HTMLElement>);
+    }
+
+    return (
+        <button aria-label={defaultAriaLabel} disabled={isDisabled} className={computedClassName} onClick={handleClick} {...props}>
+            {children}
+        </button>
+    );
+};
+
+const CarouselPrevTrigger = (props: Omit<TriggerProps, "direction">) => <Trigger {...props} direction="prev" />;
+
+const CarouselNextTrigger = (props: Omit<TriggerProps, "direction">) => <Trigger {...props} direction="next" />;
+
+interface CarouselIndicatorRenderProps {
+    isSelected: boolean;
+    onClick: () => void;
+}
+
+interface CarouselIndicatorProps {
+    /** The index of the indicator. */
+    index: number;
+    /** If true, the child element will be cloned and passed down the prop of the indicator. */
+    asChild?: boolean;
+    /** If true, the indicator will be selected. */
+    isSelected?: boolean;
+    /** The children of the indicator. Can be a render prop or a valid element. */
+    children?: ReactNode | ((props: CarouselIndicatorRenderProps) => ReactNode);
+    /** The style of the indicator. */
+    style?: CSSProperties;
+    /** The class name of the indicator. */
+    className?: string | ((args: { isSelected: boolean }) => string);
+}
+
+const CarouselIndicator = ({ index, isSelected = false, children, asChild, className, style }: CarouselIndicatorProps) => {
+    const { api, selectedIndex } = useCarousel();
+
+    isSelected = isSelected || selectedIndex === index;
+
+    const handleClick = () => {
+        api?.scrollTo(index);
+    };
+    const computedClassName = typeof className === "function" ? className({ isSelected }) : className;
+
+    const defaultAriaLabel = "Go to slide" + (index + 1);
+
+    // If the children is a render prop, we need to pass the necessary props to the render prop.
+    if (typeof children === "function") {
+        return <>{children({ isSelected, onClick: handleClick })}</>;
+    }
+
+    // If the children is a valid element, we need to clone it and pass the necessary props to the cloned element.
+    if (asChild && isValidElement(children)) {
+        return cloneElement(children, {
+            onClick: handleClick,
+            "aria-label": defaultAriaLabel,
+            "aria-current": isSelected ? "true" : undefined,
+            style: { ...(children.props as HTMLAttributes<HTMLElement>).style, ...style },
+            className: [computedClassName, (children.props as HTMLAttributes<HTMLElement>).className].filter(Boolean).join(" ") || undefined,
+        } as HTMLAttributes<HTMLElement>);
+    }
+
+    return (
+        <button aria-label={defaultAriaLabel} aria-current={isSelected ? "true" : undefined} className={computedClassName} onClick={handleClick}>
+            {children}
+        </button>
+    );
+};
+
+interface CarouselIndicatorGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: ReactNode | ((props: { index: number }) => ReactNode);
+    className?: string;
+}
+
+const CarouselIndicatorGroup = ({ children, ...props }: CarouselIndicatorGroupProps) => {
+    const { scrollSnaps } = useCarousel();
+
+    // If the children is a render prop, we need to pass the index to the render prop.
+    if (typeof children === "function") {
+        return <nav {...props}>{scrollSnaps.map((index) => children({ index }))}</nav>;
+    }
+
+    return <nav {...props}>{children}</nav>;
+};
+
+export const Carousel = {
+    Root: CarouselRoot,
+    Content: CarouselContent,
+    Item: CarouselItem,
+    PrevTrigger: CarouselPrevTrigger,
+    NextTrigger: CarouselNextTrigger,
+    IndicatorGroup: CarouselIndicatorGroup,
+    Indicator: CarouselIndicator,
+};

package/src/design_system/elements/checkbox/checkbox.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import type { ReactNode, Ref } from "react";
+import { Checkbox as AriaCheckbox, type CheckboxProps as AriaCheckboxProps } from "react-aria-components";
+import { cx } from '../../../utils/cx';
+
+export interface CheckboxBaseProps {
+    size?: "sm" | "md";
+    className?: string;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    isIndeterminate?: boolean;
+}
+
+export const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = "sm", isFocusVisible = false }: CheckboxBaseProps) => {
+    return (
+        <div
+            className={cx(
+                "flex size-4 shrink-0 cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset",
+                size === "md" && "size-5 rounded-md",
+                (isSelected || isIndeterminate) && "bg-brand-solid ring-bg-brand-solid",
+                isDisabled && "cursor-not-allowed bg-disabled_subtle ring-disabled",
+                isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                className,
+            )}
+        >
+            <svg
+                aria-hidden="true"
+                viewBox="0 0 14 14"
+                fill="none"
+                className={cx(
+                    "pointer-events-none absolute h-3 w-2.5 text-fg-white opacity-0 transition-inherit-all",
+                    size === "md" && "size-3.5",
+                    isIndeterminate && "opacity-100",
+                    isDisabled && "text-fg-disabled_subtle",
+                )}
+            >
+                <path d="M2.91675 7H11.0834" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+
+            <svg
+                aria-hidden="true"
+                viewBox="0 0 14 14"
+                fill="none"
+                className={cx(
+                    "pointer-events-none absolute size-3 text-fg-white opacity-0 transition-inherit-all",
+                    size === "md" && "size-3.5",
+                    isSelected && !isIndeterminate && "opacity-100",
+                    isDisabled && "text-fg-disabled_subtle",
+                )}
+            >
+                <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+        </div>
+    );
+};
+CheckboxBase.displayName = "CheckboxBase";
+
+interface CheckboxProps extends AriaCheckboxProps {
+    ref?: Ref<HTMLLabelElement>;
+    size?: "sm" | "md";
+    label?: ReactNode;
+    hint?: ReactNode;
+}
+
+export const Checkbox = ({ label, hint, size = "sm", className, ...ariaCheckboxProps }: CheckboxProps) => {
+    const sizes = {
+        sm: {
+            root: "gap-2",
+            textWrapper: "",
+            label: "text-sm font-medium",
+            hint: "text-sm",
+        },
+        md: {
+            root: "gap-3",
+            textWrapper: "gap-0.5",
+            label: "text-md font-medium",
+            hint: "text-md",
+        },
+    };
+
+    return (
+        <AriaCheckbox
+            {...ariaCheckboxProps}
+            className={(state) =>
+                cx(
+                    "flex items-start",
+                    state.isDisabled && "cursor-not-allowed",
+                    sizes[size].root,
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        >
+            {({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (
+                <>
+                    <CheckboxBase
+                        size={size}
+                        isSelected={isSelected}
+                        isIndeterminate={isIndeterminate}
+                        isDisabled={isDisabled}
+                        isFocusVisible={isFocusVisible}
+                        className={label || hint ? "mt-0.5" : ""}
+                    />
+                    {(label || hint) && (
+                        <div className={cx("inline-flex flex-col", sizes[size].textWrapper)}>
+                            {label && <p className={cx("text-secondary select-none", sizes[size].label)}>{label}</p>}
+                            {hint && (
+                                <span className={cx("text-tertiary", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>
+                                    {hint}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </>
+            )}
+        </AriaCheckbox>
+    );
+};
+Checkbox.displayName = "Checkbox";

package/src/design_system/elements/date-picker/calendar.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import type { HTMLAttributes, PropsWithChildren } from "react";
+import { Fragment, useContext, useState } from "react";
+import { type CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import { ChevronLeft, ChevronRight } from "@untitledui/icons";
+import type { CalendarProps as AriaCalendarProps, DateValue } from "react-aria-components";
+import {
+    Calendar as AriaCalendar,
+    CalendarContext as AriaCalendarContext,
+    CalendarGrid as AriaCalendarGrid,
+    CalendarGridBody as AriaCalendarGridBody,
+    CalendarGridHeader as AriaCalendarGridHeader,
+    CalendarHeaderCell as AriaCalendarHeaderCell,
+    CalendarStateContext as AriaCalendarStateContext,
+    Heading as AriaHeading,
+    useSlottedContext,
+} from "react-aria-components";
+import { Button } from '../buttons/button';
+import { cx } from '../../../utils/cx';
+import { CalendarCell } from "./cell";
+import { DateInput } from "./date-input";
+
+export const CalendarContextProvider = ({ children }: PropsWithChildren) => {
+    const [value, onChange] = useState<DateValue | null>(null);
+    const [focusedValue, onFocusChange] = useState<DateValue | undefined>();
+
+    return <AriaCalendarContext.Provider value={{ value, onChange, focusedValue, onFocusChange }}>{children}</AriaCalendarContext.Provider>;
+};
+
+const PresetButton = ({ value, children, ...props }: HTMLAttributes<HTMLButtonElement> & { value: CalendarDate }) => {
+    const context = useContext(AriaCalendarStateContext);
+
+    if (!context) {
+        throw new Error("Preset must be used within a Calendar component");
+    }
+
+    const handleClick = () => {
+        context.setValue(value);
+        context.setFocusedDate(value);
+    };
+
+    return (
+        <Button
+            {...props}
+            // It's important to give `null` explicitly to the `slot` prop
+            // otherwise the button will throw an error due to not using one of
+            // the required slots inside the Calendar component.
+            // Passing `null` will tell the button to not use a slot context.
+            slot={null}
+            size="md"
+            color="secondary"
+            onClick={handleClick}
+        >
+            {children}
+        </Button>
+    );
+};
+
+interface CalendarProps extends AriaCalendarProps<DateValue> {
+    /** The dates to highlight. */
+    highlightedDates?: DateValue[];
+}
+
+export const Calendar = ({ highlightedDates, className, ...props }: CalendarProps) => {
+    const context = useSlottedContext(AriaCalendarContext)!;
+
+    const ContextWrapper = context ? Fragment : CalendarContextProvider;
+
+    return (
+        <ContextWrapper>
+            <AriaCalendar {...props} className={(state) => cx("flex flex-col gap-3", typeof className === "function" ? className(state) : className)}>
+                <header className="flex items-center justify-between">
+                    <Button slot="previous" iconLeading={ChevronLeft} size="sm" color="tertiary" className="size-8" />
+                    <AriaHeading className="text-sm font-semibold text-fg-secondary" />
+                    <Button slot="next" iconLeading={ChevronRight} size="sm" color="tertiary" className="size-8" />
+                </header>
+
+                <div className="flex gap-3">
+                    <DateInput className="flex-1" />
+                    <PresetButton value={today(getLocalTimeZone())}>Today</PresetButton>
+                </div>
+
+                <AriaCalendarGrid weekdayStyle="short" className="w-max">
+                    <AriaCalendarGridHeader className="border-b-4 border-transparent">
+                        {(day) => (
+                            <AriaCalendarHeaderCell className="p-0">
+                                <div className="flex size-10 items-center justify-center text-sm font-medium text-secondary">{day.slice(0, 2)}</div>
+                            </AriaCalendarHeaderCell>
+                        )}
+                    </AriaCalendarGridHeader>
+                    <AriaCalendarGridBody className="[&_td]:p-0 [&_tr]:border-b-4 [&_tr]:border-transparent [&_tr:last-of-type]:border-none">
+                        {(date) => (
+                            <CalendarCell date={date} isHighlighted={highlightedDates?.some((highlightedDate) => date.compare(highlightedDate) === 0)} />
+                        )}
+                    </AriaCalendarGridBody>
+                </AriaCalendarGrid>
+            </AriaCalendar>
+        </ContextWrapper>
+    );
+};

package/src/design_system/elements/date-picker/cell.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { getDayOfWeek, getLocalTimeZone, isToday } from "@internationalized/date";
+import type { CalendarCellProps as AriaCalendarCellProps } from "react-aria-components";
+import { CalendarCell as AriaCalendarCell, RangeCalendarContext, useLocale, useSlottedContext } from "react-aria-components";
+import { cx } from '../../../utils/cx';
+
+interface CalendarCellProps extends AriaCalendarCellProps {
+    /** Whether the calendar is a range calendar. */
+    isRangeCalendar?: boolean;
+    /** Whether the cell is highlighted. */
+    isHighlighted?: boolean;
+}
+
+export const CalendarCell = ({ date, isHighlighted, ...props }: CalendarCellProps) => {
+    const { locale } = useLocale();
+    const dayOfWeek = getDayOfWeek(date, locale);
+    const rangeCalendarContext = useSlottedContext(RangeCalendarContext);
+
+    const isRangeCalendar = !!rangeCalendarContext;
+
+    const start = rangeCalendarContext?.value?.start;
+    const end = rangeCalendarContext?.value?.end;
+
+    const isAfterStart = start ? date.compare(start) > 0 : true;
+    const isBeforeEnd = end ? date.compare(end) < 0 : true;
+
+    const isAfterOrOnStart = start && date.compare(start) >= 0;
+    const isBeforeOrOnEnd = end && date.compare(end) <= 0;
+    const isInRange = isAfterOrOnStart && isBeforeOrOnEnd;
+
+    const lastDayOfMonth = new Date(date.year, date.month, 0).getDate();
+    const isLastDayOfMonth = date.day === lastDayOfMonth;
+    const isFirstDayOfMonth = date.day === 1;
+
+    const isTodayDate = isToday(date, getLocalTimeZone());
+
+    return (
+        <AriaCalendarCell
+            {...props}
+            date={date}
+            className={({ isDisabled, isFocusVisible, isSelectionStart, isSelectionEnd, isSelected, isOutsideMonth }) => {
+                const isRoundedLeft = isSelectionStart || dayOfWeek === 0;
+                const isRoundedRight = isSelectionEnd || dayOfWeek === 6;
+
+                return cx(
+                    "relative size-10 focus:outline-none",
+                    isRoundedLeft && "rounded-l-full",
+                    isRoundedRight && "rounded-r-full",
+                    isInRange && isDisabled && "bg-active",
+                    isSelected && isRangeCalendar && "bg-active",
+                    isDisabled ? "pointer-events-none" : "cursor-pointer",
+                    isFocusVisible ? "z-10" : "z-0",
+                    isRangeCalendar && isOutsideMonth && "hidden",
+
+                    // Show gradient on last day of month if it's within the selected range.
+                    isLastDayOfMonth &&
+                        isSelected &&
+                        isBeforeEnd &&
+                        isRangeCalendar &&
+                        "after:absolute after:inset-0 after:translate-x-full after:bg-gradient-to-l after:from-transparent after:to-bg-active in-[[role=gridcell]:last-child]:after:hidden",
+
+                    // Show gradient on first day of month if it's within the selected range.
+                    isFirstDayOfMonth &&
+                        isSelected &&
+                        isAfterStart &&
+                        isRangeCalendar &&
+                        "after:absolute after:inset-0 after:-translate-x-full after:bg-gradient-to-r after:from-transparent after:to-bg-active in-[[role=gridcell]:first-child]:after:hidden",
+                );
+            }}
+        >
+            {({ isDisabled, isFocusVisible, isSelectionStart, isSelectionEnd, isSelected, formattedDate }) => {
+                const markedAsSelected = isSelectionStart || isSelectionEnd || (isSelected && !isDisabled && !isRangeCalendar);
+
+                return (
+                    <div
+                        className={cx(
+                            "relative flex size-full items-center justify-center rounded-full text-sm",
+                            // Disabled state.
+                            isDisabled ? "text-disabled" : "text-secondary hover:text-secondary_hover",
+                            // Focus ring, visible while the cell has keyboard focus.
+                            isFocusVisible ? "outline-2 outline-offset-2 outline-focus-ring" : "",
+                            // Hover state for cells in the middle of the range.
+                            isSelected && !isDisabled && isRangeCalendar ? "font-medium" : "",
+                            markedAsSelected && "bg-brand-solid font-medium text-white hover:bg-brand-solid_hover hover:text-white",
+                            // Hover state for non-selected cells.
+                            !isSelected && !isDisabled ? "hover:bg-primary_hover hover:font-medium!" : "",
+                            !isSelected && isTodayDate ? "bg-active font-medium hover:bg-secondary_hover" : "",
+                        )}
+                    >
+                        {formattedDate}
+
+                        {(isHighlighted || isTodayDate) && (
+                            <div
+                                className={cx(
+                                    "absolute bottom-1 left-1/2 size-1.25 -translate-x-1/2 rounded-full",
+                                    isDisabled ? "bg-fg-disabled" : markedAsSelected ? "bg-fg-white" : "bg-fg-brand-primary",
+                                )}
+                            />
+                        )}
+                    </div>
+                );
+            }}
+        </AriaCalendarCell>
+    );
+};

package/src/design_system/elements/date-picker/date-input.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import type { DateInputProps as AriaDateInputProps } from "react-aria-components";
+import { DateInput as AriaDateInput, DateSegment as AriaDateSegment } from "react-aria-components";
+import { cx } from '../../../utils/cx';
+
+interface DateInputProps extends Omit<AriaDateInputProps, "children"> {}
+
+export const DateInput = (props: DateInputProps) => {
+    return (
+        <AriaDateInput
+            {...props}
+            className={cx(
+                "flex rounded-lg bg-primary px-2.5 py-2 text-md shadow-xs ring-1 ring-primary ring-inset focus-within:ring-2 focus-within:ring-brand",
+                typeof props.className === "string" && props.className,
+            )}
+        >
+            {(segment) => (
+                <AriaDateSegment
+                    segment={segment}
+                    className={cx(
+                        "rounded px-0.5 text-primary tabular-nums caret-transparent focus:bg-brand-solid focus:font-medium focus:text-white focus:outline-hidden",
+                        // The placeholder segment.
+                        segment.isPlaceholder && "text-placeholder uppercase",
+                        // The separator "/" segment.
+                        segment.type === "literal" && "text-fg-quaternary",
+                    )}
+                />
+            )}
+        </AriaDateInput>
+    );
+};