keystone-design-bootstrap 1.0.3

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

@@ -0,0 +1,86 @@
+"use client";
+
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { useControlledState } from "@react-stately/utils";
+import { Calendar as CalendarIcon } from "@untitledui/icons";
+import { useDateFormatter } from "react-aria";
+import type { DatePickerProps as AriaDatePickerProps, DateValue } from "react-aria-components";
+import { DatePicker as AriaDatePicker, Dialog as AriaDialog, Group as AriaGroup, Popover as AriaPopover } from "react-aria-components";
+import { Button } from '../buttons/button';
+import { cx } from '../../../utils/cx';
+import { Calendar } from "./calendar";
+
+const highlightedDates = [today(getLocalTimeZone())];
+
+interface DatePickerProps extends AriaDatePickerProps<DateValue> {
+    /** The function to call when the apply button is clicked. */
+    onApply?: () => void;
+    /** The function to call when the cancel button is clicked. */
+    onCancel?: () => void;
+}
+
+export const DatePicker = ({ value: valueProp, defaultValue, onChange, onApply, onCancel, ...props }: DatePickerProps) => {
+    const formatter = useDateFormatter({
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+    const [value, setValue] = useControlledState(valueProp, defaultValue || null, onChange);
+
+    const formattedDate = value ? formatter.format(value.toDate(getLocalTimeZone())) : "Select date";
+
+    return (
+        <AriaDatePicker shouldCloseOnSelect={false} {...props} value={value} onChange={setValue}>
+            <AriaGroup>
+                <Button size="md" color="secondary" iconLeading={CalendarIcon}>
+                    {formattedDate}
+                </Button>
+            </AriaGroup>
+            <AriaPopover
+                offset={8}
+                placement="bottom right"
+                className={({ isEntering, isExiting }) =>
+                    cx(
+                        "origin-(--trigger-anchor-point) will-change-transform",
+                        isEntering &&
+                            "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+                        isExiting &&
+                            "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+                    )
+                }
+            >
+                <AriaDialog className="rounded-2xl bg-primary shadow-xl ring ring-secondary_alt">
+                    {({ close }) => (
+                        <>
+                            <div className="flex px-6 py-5">
+                                <Calendar highlightedDates={highlightedDates} />
+                            </div>
+                            <div className="grid grid-cols-2 gap-3 border-t border-secondary p-4">
+                                <Button
+                                    size="md"
+                                    color="secondary"
+                                    onClick={() => {
+                                        onCancel?.();
+                                        close();
+                                    }}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button
+                                    size="md"
+                                    color="primary"
+                                    onClick={() => {
+                                        onApply?.();
+                                        close();
+                                    }}
+                                >
+                                    Apply
+                                </Button>
+                            </div>
+                        </>
+                    )}
+                </AriaDialog>
+            </AriaPopover>
+        </AriaDatePicker>
+    );
+};

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

@@ -0,0 +1,163 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { endOfMonth, endOfWeek, getLocalTimeZone, startOfMonth, startOfWeek, today } from "@internationalized/date";
+import { useControlledState } from "@react-stately/utils";
+import { Calendar as CalendarIcon } from "@untitledui/icons";
+import { useDateFormatter } from "react-aria";
+import type { DateRangePickerProps as AriaDateRangePickerProps, DateValue } from "react-aria-components";
+import { DateRangePicker as AriaDateRangePicker, Dialog as AriaDialog, Group as AriaGroup, Popover as AriaPopover, useLocale } from "react-aria-components";
+import { Button } from '../buttons/button';
+import { cx } from '../../../utils/cx';
+import { DateInput } from "./date-input";
+import { RangeCalendar } from "./range-calendar";
+import { RangePresetButton } from "./range-preset";
+
+const now = today(getLocalTimeZone());
+
+const highlightedDates = [today(getLocalTimeZone())];
+
+interface DateRangePickerProps extends AriaDateRangePickerProps<DateValue> {
+    /** The function to call when the apply button is clicked. */
+    onApply?: () => void;
+    /** The function to call when the cancel button is clicked. */
+    onCancel?: () => void;
+}
+
+export const DateRangePicker = ({ value: valueProp, defaultValue, onChange, onApply, onCancel, ...props }: DateRangePickerProps) => {
+    const { locale } = useLocale();
+    const formatter = useDateFormatter({
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+    const [value, setValue] = useControlledState(valueProp, defaultValue || null, onChange);
+    const [focusedValue, setFocusedValue] = useState<DateValue | null>(null);
+
+    const formattedStartDate = value?.start ? formatter.format(value.start.toDate(getLocalTimeZone())) : "Select date";
+    const formattedEndDate = value?.end ? formatter.format(value.end.toDate(getLocalTimeZone())) : "Select date";
+
+    const presets = useMemo(
+        () => ({
+            today: { label: "Today", value: { start: now, end: now } },
+            yesterday: { label: "Yesterday", value: { start: now.subtract({ days: 1 }), end: now.subtract({ days: 1 }) } },
+            thisWeek: { label: "This week", value: { start: startOfWeek(now, locale), end: endOfWeek(now, locale) } },
+            lastWeek: {
+                label: "Last week",
+                value: {
+                    start: startOfWeek(now, locale).subtract({ weeks: 1 }),
+                    end: endOfWeek(now, locale).subtract({ weeks: 1 }),
+                },
+            },
+            thisMonth: { label: "This month", value: { start: startOfMonth(now), end: endOfMonth(now) } },
+            lastMonth: {
+                label: "Last month",
+                value: {
+                    start: startOfMonth(now).subtract({ months: 1 }),
+                    end: endOfMonth(now).subtract({ months: 1 }),
+                },
+            },
+            thisYear: { label: "This year", value: { start: startOfMonth(now.set({ month: 1 })), end: endOfMonth(now.set({ month: 12 })) } },
+            lastYear: {
+                label: "Last year",
+                value: {
+                    start: startOfMonth(now.set({ month: 1 }).subtract({ years: 1 })),
+                    end: endOfMonth(now.set({ month: 12 }).subtract({ years: 1 })),
+                },
+            },
+            allTime: {
+                label: "All time",
+                value: {
+                    start: now.set({ year: 2000, month: 1, day: 1 }),
+                    end: now,
+                },
+            },
+        }),
+        [locale],
+    );
+
+    return (
+        <AriaDateRangePicker aria-label="Date range picker" shouldCloseOnSelect={false} {...props} value={value} onChange={setValue}>
+            <AriaGroup>
+                <Button size="md" color="secondary" iconLeading={CalendarIcon}>
+                    {!value ? <span className="text-placeholder">Select dates</span> : `${formattedStartDate} – ${formattedEndDate}`}
+                </Button>
+            </AriaGroup>
+            <AriaPopover
+                placement="bottom right"
+                offset={8}
+                className={({ isEntering, isExiting }) =>
+                    cx(
+                        "origin-(--trigger-anchor-point) will-change-transform",
+                        isEntering &&
+                            "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+                        isExiting &&
+                            "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+                    )
+                }
+            >
+                <AriaDialog className="flex rounded-2xl bg-primary shadow-xl ring ring-secondary_alt focus:outline-hidden">
+                    {({ close }) => (
+                        <>
+                            <div className="hidden w-38 flex-col gap-0.5 border-r border-solid border-secondary p-3 lg:flex">
+                                {Object.values(presets).map((preset) => (
+                                    <RangePresetButton
+                                        key={preset.label}
+                                        value={preset.value}
+                                        onClick={() => {
+                                            setValue(preset.value);
+                                            setFocusedValue(preset.value.start);
+                                        }}
+                                    >
+                                        {preset.label}
+                                    </RangePresetButton>
+                                ))}
+                            </div>
+                            <div className="flex flex-col">
+                                <RangeCalendar
+                                    focusedValue={focusedValue}
+                                    onFocusChange={setFocusedValue}
+                                    highlightedDates={highlightedDates}
+                                    presets={{
+                                        lastWeek: presets.lastWeek,
+                                        lastMonth: presets.lastMonth,
+                                        lastYear: presets.lastYear,
+                                    }}
+                                />
+                                <div className="flex justify-between gap-3 border-t border-secondary p-4">
+                                    <div className="hidden items-center gap-3 md:flex">
+                                        <DateInput slot="start" className="w-36" />
+                                        <div className="text-md text-quaternary">–</div>
+                                        <DateInput slot="end" className="w-36" />
+                                    </div>
+                                    <div className="grid w-full grid-cols-2 gap-3 md:flex md:w-auto">
+                                        <Button
+                                            size="md"
+                                            color="secondary"
+                                            onClick={() => {
+                                                onCancel?.();
+                                                close();
+                                            }}
+                                        >
+                                            Cancel
+                                        </Button>
+                                        <Button
+                                            size="md"
+                                            color="primary"
+                                            onClick={() => {
+                                                onApply?.();
+                                                close();
+                                            }}
+                                        >
+                                            Apply
+                                        </Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </AriaDialog>
+            </AriaPopover>
+        </AriaDateRangePicker>
+    );
+};

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

@@ -0,0 +1,161 @@
+"use client";
+
+import type { HTMLAttributes, PropsWithChildren } from "react";
+import { Fragment, useContext, useState } from "react";
+import type { CalendarDate } from "@internationalized/date";
+import { ChevronLeft, ChevronRight } from "@untitledui/icons";
+import { useDateFormatter } from "react-aria";
+import type { RangeCalendarProps as AriaRangeCalendarProps, DateValue } from "react-aria-components";
+import {
+    CalendarGrid as AriaCalendarGrid,
+    CalendarGridBody as AriaCalendarGridBody,
+    CalendarGridHeader as AriaCalendarGridHeader,
+    CalendarHeaderCell as AriaCalendarHeaderCell,
+    RangeCalendar as AriaRangeCalendar,
+    RangeCalendarContext,
+    RangeCalendarStateContext,
+    useSlottedContext,
+} from "react-aria-components";
+import { Button } from '../buttons/button';
+import { useBreakpoint } from '../../../lib/hooks/use-breakpoint';
+import { CalendarCell } from "./cell";
+import { DateInput } from "./date-input";
+
+export const RangeCalendarContextProvider = ({ children }: PropsWithChildren) => {
+    const [value, onChange] = useState<{ start: DateValue; end: DateValue } | null>(null);
+    const [focusedValue, onFocusChange] = useState<DateValue | undefined>();
+
+    return <RangeCalendarContext.Provider value={{ value, onChange, focusedValue, onFocusChange }}>{children}</RangeCalendarContext.Provider>;
+};
+
+const RangeCalendarTitle = ({ part }: { part: "start" | "end" }) => {
+    const context = useContext(RangeCalendarStateContext);
+
+    if (!context) {
+        throw new Error("<RangeCalendarTitle /> must be used within a <RangeCalendar /> component.");
+    }
+
+    const formatter = useDateFormatter({
+        month: "long",
+        year: "numeric",
+        calendar: context.visibleRange.start.calendar.identifier,
+        timeZone: context.timeZone,
+    });
+
+    return part === "start"
+        ? formatter.format(context.visibleRange.start.toDate(context.timeZone))
+        : formatter.format(context.visibleRange.end.toDate(context.timeZone));
+};
+
+const MobilePresetButton = ({ value, children, ...props }: HTMLAttributes<HTMLButtonElement> & { value: { start: DateValue; end: DateValue } }) => {
+    const context = useContext(RangeCalendarStateContext);
+
+    return (
+        <Button
+            {...props}
+            slot={null}
+            size="sm"
+            color="link-color"
+            onClick={() => {
+                context?.setValue(value);
+                context?.setFocusedDate(value.start as CalendarDate);
+            }}
+        >
+            {children}
+        </Button>
+    );
+};
+
+interface RangeCalendarProps extends AriaRangeCalendarProps<DateValue> {
+    /** The dates to highlight. */
+    highlightedDates?: DateValue[];
+    /** The date presets to display. */
+    presets?: Record<string, { label: string; value: { start: DateValue; end: DateValue } }>;
+}
+
+export const RangeCalendar = ({ presets, ...props }: RangeCalendarProps) => {
+    const isDesktop = useBreakpoint("md");
+    const context = useSlottedContext(RangeCalendarContext);
+
+    const ContextWrapper = context ? Fragment : RangeCalendarContextProvider;
+
+    return (
+        <ContextWrapper>
+            <AriaRangeCalendar
+                className="flex items-start"
+                visibleDuration={{
+                    months: isDesktop ? 2 : 1,
+                }}
+                {...props}
+            >
+                <div className="flex flex-col gap-3 px-6 py-5">
+                    <header className="relative flex items-center justify-between md:justify-start">
+                        <Button slot="previous" iconLeading={ChevronLeft} size="sm" color="tertiary" className="size-8" />
+
+                        <h2 className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-semibold text-fg-secondary">
+                            <RangeCalendarTitle part="start" />
+                        </h2>
+
+                        <Button slot="next" iconLeading={ChevronRight} size="sm" color="tertiary" className="size-8 md:hidden" />
+                    </header>
+
+                    {!isDesktop && (
+                        <div className="flex items-center gap-2 md:hidden">
+                            <DateInput slot="start" className="flex-1" />
+                            <div className="text-md text-quaternary">–</div>
+                            <DateInput slot="end" className="flex-1" />
+                        </div>
+                    )}
+
+                    {!isDesktop && presets && (
+                        <div className="mt-1 flex justify-between gap-3 px-2 md:hidden">
+                            {Object.values(presets).map((preset) => (
+                                <MobilePresetButton key={preset.label} value={preset.value}>
+                                    {preset.label}
+                                </MobilePresetButton>
+                            ))}
+                        </div>
+                    )}
+
+                    <AriaCalendarGrid weekdayStyle="short" className="w-max">
+                        <AriaCalendarGridHeader>
+                            {(day) => (
+                                <AriaCalendarHeaderCell className="border-b-4 border-transparent 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} />}
+                        </AriaCalendarGridBody>
+                    </AriaCalendarGrid>
+                </div>
+
+                {isDesktop && (
+                    <div className="flex flex-col gap-3 border-l border-secondary px-6 py-5">
+                        <header className="relative flex items-center justify-end">
+                            <h2 className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-semibold text-fg-secondary">
+                                <RangeCalendarTitle part="end" />
+                            </h2>
+
+                            <Button slot="next" iconLeading={ChevronRight} size="sm" color="tertiary" className="size-8" />
+                        </header>
+
+                        <AriaCalendarGrid weekdayStyle="short" offset={{ months: 1 }} className="w-max">
+                            <AriaCalendarGridHeader>
+                                {(day) => (
+                                    <AriaCalendarHeaderCell className="border-b-4 border-transparent 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} />}
+                            </AriaCalendarGridBody>
+                        </AriaCalendarGrid>
+                    </div>
+                )}
+            </AriaRangeCalendar>
+        </ContextWrapper>
+    );
+};

package/src/design_system/elements/date-picker/range-preset.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { type HTMLAttributes } from "react";
+import { type DateValue, RangeCalendarContext, useSlottedContext } from "react-aria-components";
+import { cx } from '../../../utils/cx';
+
+interface RangePresetButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    value: { start: DateValue; end: DateValue };
+}
+
+export const RangePresetButton = ({ value, className, children, ...props }: RangePresetButtonProps) => {
+    const context = useSlottedContext(RangeCalendarContext);
+
+    const isSelected = context?.value?.start?.compare(value.start) === 0 && context?.value?.end?.compare(value.end) === 0;
+
+    return (
+        <button
+            {...props}
+            className={cx(
+                "cursor-pointer rounded-md px-3 py-2 text-left text-sm font-medium outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2",
+                isSelected ? "bg-active text-secondary_hover hover:bg-secondary_hover" : "text-secondary hover:bg-primary_hover hover:text-secondary_hover",
+                className,
+            )}
+        >
+            {children}
+        </button>
+    );
+};

package/src/design_system/elements/featured-icon/featured-icon.tsx

@@ -0,0 +1,154 @@
+import type { FC, ReactNode, Ref } from "react";
+import { isValidElement } from "react";
+import { cx, sortCx } from '../../../utils/cx';
+import { isReactComponent } from '../../../utils/is-react-component';
+
+const iconsSizes = {
+    sm: "*:data-icon:size-4",
+    md: "*:data-icon:size-5",
+    lg: "*:data-icon:size-6",
+    xl: "*:data-icon:size-7",
+};
+
+const styles = sortCx({
+    light: {
+        base: "rounded-full",
+        sizes: {
+            sm: "size-8",
+            md: "size-10",
+            lg: "size-12",
+            xl: "size-14",
+        },
+        colors: {
+            brand: "bg-brand-secondary text-featured-icon-light-fg-brand",
+            gray: "bg-tertiary text-featured-icon-light-fg-gray",
+            error: "bg-error-secondary text-featured-icon-light-fg-error",
+            warning: "bg-warning-secondary text-featured-icon-light-fg-warning",
+            success: "bg-success-secondary text-featured-icon-light-fg-success",
+        },
+    },
+
+    gradient: {
+        base: "rounded-full text-fg-white before:absolute before:inset-0 before:size-full before:rounded-full before:border before:mask-b-from-0% after:absolute after:block after:rounded-full",
+        sizes: {
+            sm: "size-8 after:size-6 *:data-icon:size-4",
+            md: "size-10 after:size-7 *:data-icon:size-4",
+            lg: "size-12 after:size-8 *:data-icon:size-5",
+            xl: "size-14 after:size-10 *:data-icon:size-5",
+        },
+        colors: {
+            brand: "before:border-utility-brand-200 before:bg-utility-brand-50 after:bg-brand-solid",
+            gray: "before:border-utility-gray-200 before:bg-utility-gray-50 after:bg-secondary-solid",
+            error: "before:border-utility-error-200 before:bg-utility-error-50 after:bg-error-solid",
+            warning: "before:border-utility-warning-200 before:bg-utility-warning-50 after:bg-warning-solid",
+            success: "before:border-utility-success-200 before:bg-utility-success-50 after:bg-success-solid",
+        },
+    },
+
+    dark: {
+        base: "text-fg-white shadow-xs-skeumorphic before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+        sizes: {
+            sm: "size-8 rounded-md before:rounded-[5px]",
+            md: "size-10 rounded-lg before:rounded-[7px]",
+            lg: "size-12 rounded-[10px] before:rounded-[9px]",
+            xl: "size-14 rounded-xl before:rounded-[11px]",
+        },
+        colors: {
+            brand: "bg-brand-solid before:border-utility-brand-200/12",
+            gray: "bg-secondary-solid before:border-utility-gray-200/12",
+            error: "bg-error-solid before:border-utility-error-200/12",
+            warning: "bg-warning-solid before:border-utility-warning-200/12",
+            success: "bg-success-solid before:border-utility-success-200/12",
+        },
+    },
+
+    modern: {
+        base: "bg-primary shadow-xs-skeumorphic ring-1 ring-inset",
+        sizes: {
+            sm: "size-8 rounded-md",
+            md: "size-10 rounded-lg",
+            lg: "size-12 rounded-[10px]",
+            xl: "size-14 rounded-xl",
+        },
+        colors: {
+            brand: "",
+            gray: "text-fg-secondary ring-primary",
+            error: "",
+            warning: "",
+            success: "",
+        },
+    },
+    "modern-neue": {
+        base: [
+            "bg-primary_alt ring-1 ring-inset before:absolute before:inset-1",
+            // Shadow
+            "before:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1),0px_3px_3px_0px_rgba(0,0,0,0.09),1px_8px_5px_0px_rgba(0,0,0,0.05),2px_21px_6px_0px_rgba(0,0,0,0),0px_0px_0px_1px_rgba(0,0,0,0.08),1px_13px_5px_0px_rgba(0,0,0,0.01),0px_-2px_2px_0px_rgba(0,0,0,0.13)_inset] before:ring-1 before:ring-secondary_alt",
+        ].join(" "),
+        sizes: {
+            sm: "size-8 rounded-[8px] before:rounded-[4px]",
+            md: "size-10 rounded-[10px] before:rounded-[6px]",
+            lg: "size-12 rounded-[12px] before:rounded-[8px]",
+            xl: "size-14 rounded-[14px] before:rounded-[10px]",
+        },
+        colors: {
+            brand: "",
+            gray: "text-fg-secondary ring-primary",
+            error: "",
+            warning: "",
+            success: "",
+        },
+    },
+
+    outline: {
+        base: "before:absolute before:rounded-full before:border-2 after:absolute after:rounded-full after:border-2",
+        sizes: {
+            sm: "size-4 before:size-6 after:size-8.5",
+            md: "size-5 before:size-7 after:size-9.5",
+            lg: "size-6 before:size-8 after:size-10.5",
+            xl: "size-7 before:size-9 after:size-11.5",
+        },
+        colors: {
+            brand: "text-fg-brand-primary before:border-fg-brand-primary/30 after:border-fg-brand-primary/10",
+            gray: "text-fg-tertiary before:border-fg-tertiary/30 after:border-fg-tertiary/10",
+            error: "text-fg-error-primary before:border-fg-error-primary/30 after:border-fg-error-primary/10",
+            warning: "text-fg-warning-primary before:border-fg-warning-primary/30 after:border-fg-warning-primary/10",
+            success: "text-fg-success-primary before:border-fg-success-primary/30 after:border-fg-success-primary/10",
+        },
+    },
+});
+
+interface FeaturedIconProps {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    className?: string;
+    icon?: FC<{ className?: string }> | ReactNode;
+    size?: "sm" | "md" | "lg" | "xl";
+    color: "brand" | "gray" | "success" | "warning" | "error";
+    theme?: "light" | "gradient" | "dark" | "outline" | "modern" | "modern-neue";
+}
+
+export const FeaturedIcon = (props: FeaturedIconProps) => {
+    const { size = "sm", theme: variant = "light", color = "brand", icon: Icon, ...otherProps } = props;
+
+    return (
+        <div
+            {...otherProps}
+            data-featured-icon
+            className={cx(
+                "relative flex shrink-0 items-center justify-center",
+
+                iconsSizes[size],
+                styles[variant].base,
+                styles[variant].sizes[size],
+                styles[variant].colors[color],
+
+                props.className,
+            )}
+        >
+            {isReactComponent(Icon) && <Icon data-icon className="z-1" />}
+            {isValidElement(Icon) && <div className="z-1">{Icon}</div>}
+
+            {props.children}
+        </div>
+    );
+};

package/src/design_system/elements/form/form.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import type { ComponentPropsWithRef } from "react";
+import { Form as AriaForm } from "react-aria-components";
+
+export const Form = (props: ComponentPropsWithRef<typeof AriaForm>) => {
+    return <AriaForm {...props} />;
+};
+
+Form.displayName = "Form";