@g4rcez/components 4.0.2 → 4.1.1

package/ai/docs/Notifications.md

@@ -25,11 +25,11 @@ Wrap your app (or the subtree that needs toasts) with `Notifications`:
 import { Notifications } from "@g4rcez/components/notifications";
 
 function App() {
-  return (
-    <Notifications max={5} timeout={5000}>
-      <YourApp />
-    </Notifications>
-  );
+    return (
+        <Notifications max={5} timeout={5000}>
+            <YourApp />
+        </Notifications>
+    );
 }
 ```
 
@@ -37,11 +37,11 @@ function App() {
 
 ### Notifications (Provider)
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `max` | `number` | `5` | Maximum notifications displayed at once |
-| `timeout` | `number` | `5000` | Default auto-dismiss duration in milliseconds |
-| `children` | `React.ReactNode` | — | Subtree that can use `useNotification` |
+| Prop       | Type              | Default | Description                                   |
+| ---------- | ----------------- | ------- | --------------------------------------------- |
+| `max`      | `number`          | `5`     | Maximum notifications displayed at once       |
+| `timeout`  | `number`          | `5000`  | Default auto-dismiss duration in milliseconds |
+| `children` | `React.ReactNode` | —       | Subtree that can use `useNotification`        |
 
 ### useNotification — notify function
 
@@ -52,53 +52,53 @@ const subscription = notify(message, options);
 
 **Parameters**
 
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `message` | `Label` | Notification body text (string or React node) |
-| `options` | `NotificationOptions` | Optional configuration (see below) |
+| Parameter | Type                  | Description                                   |
+| --------- | --------------------- | --------------------------------------------- |
+| `message` | `Label`               | Notification body text (string or React node) |
+| `options` | `NotificationOptions` | Optional configuration (see below)            |
 
 **NotificationOptions**
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `id` | `string` | — | Stable ID; if provided and a toast with this ID exists, it will be updated instead of duplicated |
-| `title` | `Label` | — | Optional notification title |
-| `theme` | `NotificationTheme` | `"default"` | Visual theme variant |
-| `timeout` | `number` | Provider default | Override auto-dismiss duration in ms |
-| `closable` | `boolean` | `true` | Show close button |
-| `loading` | `boolean` | `false` | Replaces icon with spinning `Loader2Icon` |
+| Option     | Type                | Default          | Description                                                                                      |
+| ---------- | ------------------- | ---------------- | ------------------------------------------------------------------------------------------------ |
+| `id`       | `string`            | —                | Stable ID; if provided and a toast with this ID exists, it will be updated instead of duplicated |
+| `title`    | `Label`             | —                | Optional notification title                                                                      |
+| `theme`    | `NotificationTheme` | `"default"`      | Visual theme variant                                                                             |
+| `timeout`  | `number`            | Provider default | Override auto-dismiss duration in ms                                                             |
+| `closable` | `boolean`           | `true`           | Show close button                                                                                |
+| `loading`  | `boolean`           | `false`          | Replaces icon with spinning `Loader2Icon`                                                        |
 
 **Return value — NotificationSubscriber**
 
-| Method | Description |
-|--------|-------------|
+| Method    | Description                        |
+| --------- | ---------------------------------- |
 | `close()` | Dismiss this specific notification |
-| `clear()` | Dismiss all visible notifications |
+| `clear()` | Dismiss all visible notifications  |
 
 ## Themes
 
-| Value | Appearance |
-|-------|-----------|
-| `"default"` | Card background with foreground text |
-| `"info"` | `bg-alert-info-bg` / `text-alert-info-text` / `border-alert-info-border` |
-| `"success"` | `bg-alert-success-bg` / `text-alert-success-text` / `border-alert-success-border` |
-| `"warn"` | `bg-alert-warn-bg` / `text-alert-warn-text` / `border-alert-warn-border` |
-| `"danger"` | `bg-alert-danger-bg` / `text-alert-danger-text` / `border-alert-danger-border` |
+| Value         | Appearance                                                                              |
+| ------------- | --------------------------------------------------------------------------------------- |
+| `"default"`   | Card background with foreground text                                                    |
+| `"info"`      | `bg-alert-info-bg` / `text-alert-info-text` / `border-alert-info-border`                |
+| `"success"`   | `bg-alert-success-bg` / `text-alert-success-text` / `border-alert-success-border`       |
+| `"warn"`      | `bg-alert-warn-bg` / `text-alert-warn-text` / `border-alert-warn-border`                |
+| `"danger"`    | `bg-alert-danger-bg` / `text-alert-danger-text` / `border-alert-danger-border`          |
 | `"secondary"` | `bg-alert-secondary-bg` / `text-alert-secondary-text` / `border-alert-secondary-border` |
-| `"muted"` | `bg-alert-muted-bg` / `text-alert-muted-text` / `border-alert-muted-border` |
+| `"muted"`     | `bg-alert-muted-bg` / `text-alert-muted-text` / `border-alert-muted-border`             |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-card-background` | `--card-background` | Default notification background |
-| `border-card-border` | `--card-border` | Default notification border |
-| `text-foreground` | `--foreground` | Default notification text |
-| `bg-alert-{theme}-bg` | `--alert-{theme}-bg` | Themed background |
-| `text-alert-{theme}-text` | `--alert-{theme}-text` | Themed text |
-| `border-alert-{theme}-border` | `--alert-{theme}-border` | Themed border |
+| Token                         | CSS Variable             | Purpose                         |
+| ----------------------------- | ------------------------ | ------------------------------- |
+| `bg-card-background`          | `--card-background`      | Default notification background |
+| `border-card-border`          | `--card-border`          | Default notification border     |
+| `text-foreground`             | `--foreground`           | Default notification text       |
+| `bg-alert-{theme}-bg`         | `--alert-{theme}-bg`     | Themed background               |
+| `text-alert-{theme}-text`     | `--alert-{theme}-text`   | Themed text                     |
+| `border-alert-{theme}-border` | `--alert-{theme}-border` | Themed border                   |
 
 ## Examples
 
@@ -106,17 +106,17 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 
 ```tsx
 function NotificationExamples() {
-  const notify = useNotification();
-
-  return (
-    <div className="space-y-2">
-      <button onClick={() => notify("Default notification")}>Default</button>
-      <button onClick={() => notify("Info message", { theme: "info" })}>Info</button>
-      <button onClick={() => notify("Success!", { theme: "success" })}>Success</button>
-      <button onClick={() => notify("Warning", { theme: "warn" })}>Warning</button>
-      <button onClick={() => notify("Error occurred", { theme: "danger" })}>Error</button>
-    </div>
-  );
+    const notify = useNotification();
+
+    return (
+        <div className="space-y-2">
+            <button onClick={() => notify("Default notification")}>Default</button>
+            <button onClick={() => notify("Info message", { theme: "info" })}>Info</button>
+            <button onClick={() => notify("Success!", { theme: "success" })}>Success</button>
+            <button onClick={() => notify("Warning", { theme: "warn" })}>Warning</button>
+            <button onClick={() => notify("Error occurred", { theme: "danger" })}>Error</button>
+        </div>
+    );
 }
 ```
 
@@ -124,17 +124,17 @@ function NotificationExamples() {
 
 ```tsx
 function SaveButton() {
-  const notify = useNotification();
+    const notify = useNotification();
 
-  const handleSave = () => {
-    notify("Your changes have been saved to the server.", {
-      title: "Changes Saved",
-      theme: "success",
-      timeout: 3000,
-    });
-  };
+    const handleSave = () => {
+        notify("Your changes have been saved to the server.", {
+            title: "Changes Saved",
+            theme: "success",
+            timeout: 3000,
+        });
+    };
 
-  return <button onClick={handleSave}>Save</button>;
+    return <button onClick={handleSave}>Save</button>;
 }
 ```
 
@@ -142,24 +142,24 @@ function SaveButton() {
 
 ```tsx
 function ProcessButton() {
-  const notify = useNotification();
-
-  const startProcess = () => {
-    const subscription = notify("Processing your request…", {
-      title: "In Progress",
-      theme: "info",
-      timeout: Infinity,
-      closable: false,
-      loading: true,
-    });
-
-    doWork().then(() => {
-      subscription.close();
-      notify("Process completed successfully!", { theme: "success" });
-    });
-  };
-
-  return <button onClick={startProcess}>Start</button>;
+    const notify = useNotification();
+
+    const startProcess = () => {
+        const subscription = notify("Processing your request…", {
+            title: "In Progress",
+            theme: "info",
+            timeout: Infinity,
+            closable: false,
+            loading: true,
+        });
+
+        doWork().then(() => {
+            subscription.close();
+            notify("Process completed successfully!", { theme: "success" });
+        });
+    };
+
+    return <button onClick={startProcess}>Start</button>;
 }
 ```
 
@@ -167,23 +167,23 @@ function ProcessButton() {
 
 ```tsx
 function ContactForm() {
-  const notify = useNotification();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      await submitForm();
-      notify("Message sent successfully.", { title: "Done", theme: "success" });
-    } catch {
-      notify("Failed to send. Please try again.", {
-        title: "Error",
-        theme: "danger",
-        timeout: 7000,
-      });
-    }
-  };
-
-  return <form onSubmit={handleSubmit}>{/* fields */}</form>;
+    const notify = useNotification();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        try {
+            await submitForm();
+            notify("Message sent successfully.", { title: "Done", theme: "success" });
+        } catch {
+            notify("Failed to send. Please try again.", {
+                title: "Error",
+                theme: "danger",
+                timeout: 7000,
+            });
+        }
+    };
+
+    return <form onSubmit={handleSubmit}>{/* fields */}</form>;
 }
 ```
 

package/ai/docs/PageCalendar.md

@@ -19,19 +19,19 @@ import { PageCalendar } from "@g4rcez/components";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `events` | `CalendarEvent<T>[]` | — | Array of event objects to display across all views. |
-| `filters` | `CalendarFilter[]` | `[]` | Filter tag definitions. Each filter can be toggled to hide/show matching events. |
-| `defaultView` | `"month" \| "week" \| "day"` | `"month"` | Initial view rendered when the component mounts. |
-| `defaultDate` | `Date` | `new Date()` | Initial date the calendar focuses on. |
-| `onEventClick` | `(event: CalendarEvent) => void` | — | Called when the user clicks an event pill. |
-| `onSlotClick` | `(date: Date) => void` | — | Called when the user clicks an empty time slot (week and day views). |
-| `onAddEvent` | `() => void` | — | Called when the "Add event" button in the header is clicked. Omit to hide the button. |
-| `onChangeFilters` | `(filters: CalendarFilter[]) => void` | — | Called whenever a filter is toggled, receiving the updated filter array. |
-| `renderEvent` | `(event: CalendarEvent<T>) => ReactNode` | — | Custom renderer for the selected event detail panel in day view. |
-| `filterArea` | `ReactNode` | — | Replaces the default filter tag row in the header with custom content. |
-| `getFilterId` | `() => void` | — | Custom accessor to extract a `filterId` from an event. Defaults to `event.filterId`. |
+| Prop              | Type                                     | Default      | Description                                                                           |
+| ----------------- | ---------------------------------------- | ------------ | ------------------------------------------------------------------------------------- |
+| `events`          | `CalendarEvent<T>[]`                     | —            | Array of event objects to display across all views.                                   |
+| `filters`         | `CalendarFilter[]`                       | `[]`         | Filter tag definitions. Each filter can be toggled to hide/show matching events.      |
+| `defaultView`     | `"month" \| "week" \| "day"`             | `"month"`    | Initial view rendered when the component mounts.                                      |
+| `defaultDate`     | `Date`                                   | `new Date()` | Initial date the calendar focuses on.                                                 |
+| `onEventClick`    | `(event: CalendarEvent) => void`         | —            | Called when the user clicks an event pill.                                            |
+| `onSlotClick`     | `(date: Date) => void`                   | —            | Called when the user clicks an empty time slot (week and day views).                  |
+| `onAddEvent`      | `() => void`                             | —            | Called when the "Add event" button in the header is clicked. Omit to hide the button. |
+| `onChangeFilters` | `(filters: CalendarFilter[]) => void`    | —            | Called whenever a filter is toggled, receiving the updated filter array.              |
+| `renderEvent`     | `(event: CalendarEvent<T>) => ReactNode` | —            | Custom renderer for the selected event detail panel in day view.                      |
+| `filterArea`      | `ReactNode`                              | —            | Replaces the default filter tag row in the header with custom content.                |
+| `getFilterId`     | `() => void`                             | —            | Custom accessor to extract a `filterId` from an event. Defaults to `event.filterId`.  |
 
 ## Type Definitions
 
@@ -39,8 +39,8 @@ import { PageCalendar } from "@g4rcez/components";
 
 ```ts
 type CalendarEventBase = {
-  id: string;
-  date: Date;
+    id: string;
+    date: Date;
 };
 ```
 
@@ -48,9 +48,9 @@ type CalendarEventBase = {
 
 ```ts
 type CalendarEvent<T extends CalendarEventBase = CalendarEventBase> = T & {
-  title: string;
-  filterId?: string;
-  className?: string;
+    title: string;
+    filterId?: string;
+    className?: string;
 };
 ```
 
@@ -60,10 +60,10 @@ type CalendarEvent<T extends CalendarEventBase = CalendarEventBase> = T & {
 
 ```ts
 type CalendarFilter = {
-  id: string;
-  label: string;
-  enabled: boolean;
-  theme: TagProps["theme"]; // "primary" | "success" | "warn" | "danger" | "info" | "neutral" | "secondary" | "muted"
+    id: string;
+    label: string;
+    enabled: boolean;
+    theme: TagProps["theme"]; // "primary" | "success" | "warn" | "danger" | "info" | "neutral" | "secondary" | "muted"
 };
 ```
 
@@ -77,18 +77,18 @@ type ViewMode = "month" | "week" | "day";
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-primary` | `--primary` | Today indicator background, selected day highlight |
-| `text-primary-foreground` | `--primary-foreground` | Text on today / selected day indicator |
-| `bg-card` | `--card` | Non-today day indicator background in header |
-| `text-foreground` | `--foreground` | Default text in day cells and header |
-| `text-muted-foreground` | `--muted-foreground` | Week label, hour labels, secondary text |
-| `border-border` | `--border` | Grid cell borders, day view hour-slot dividers |
-| `border-card-border` | `--card-border` | Day and week view column borders |
-| `bg-muted` | `--muted` | Hover background on time slots |
-| `z-calendar` | `--z-calendar` | `z-index` for the column resizer handle (value: 2) |
-| `z-floating` | `--z-floating` | `z-index` for floating overlays (value: 22) |
+| Token                     | CSS Variable           | Purpose                                            |
+| ------------------------- | ---------------------- | -------------------------------------------------- |
+| `bg-primary`              | `--primary`            | Today indicator background, selected day highlight |
+| `text-primary-foreground` | `--primary-foreground` | Text on today / selected day indicator             |
+| `bg-card`                 | `--card`               | Non-today day indicator background in header       |
+| `text-foreground`         | `--foreground`         | Default text in day cells and header               |
+| `text-muted-foreground`   | `--muted-foreground`   | Week label, hour labels, secondary text            |
+| `border-border`           | `--border`             | Grid cell borders, day view hour-slot dividers     |
+| `border-card-border`      | `--card-border`        | Day and week view column borders                   |
+| `bg-muted`                | `--muted`              | Hover background on time slots                     |
+| `z-calendar`              | `--z-calendar`         | `z-index` for the column resizer handle (value: 2) |
+| `z-floating`              | `--z-floating`         | `z-index` for floating overlays (value: 22)        |
 
 ## Views
 
@@ -113,17 +113,10 @@ import { PageCalendar } from "@g4rcez/components";
 
 type MyEvent = { id: string; date: Date; title: string };
 
-const events: MyEvent[] = [
-  { id: "1", date: new Date(), title: "Team standup" },
-];
+const events: MyEvent[] = [{ id: "1", date: new Date(), title: "Team standup" }];
 
 export function MyCalendar() {
-  return (
-    <PageCalendar
-      events={events}
-      onEventClick={(event) => console.log(event)}
-    />
-  );
+    return <PageCalendar events={events} onEventClick={(event) => console.log(event)} />;
 }
 ```
 
@@ -134,23 +127,17 @@ import { PageCalendar } from "@g4rcez/components";
 import type { CalendarFilter } from "@g4rcez/components";
 
 const filters: CalendarFilter[] = [
-  { id: "work", label: "Work", enabled: true, theme: "primary" },
-  { id: "personal", label: "Personal", enabled: true, theme: "success" },
+    { id: "work", label: "Work", enabled: true, theme: "primary" },
+    { id: "personal", label: "Personal", enabled: true, theme: "success" },
 ];
 
 const events = [
-  { id: "1", date: new Date(), title: "Sprint planning", filterId: "work" },
-  { id: "2", date: new Date(), title: "Gym", filterId: "personal" },
+    { id: "1", date: new Date(), title: "Sprint planning", filterId: "work" },
+    { id: "2", date: new Date(), title: "Gym", filterId: "personal" },
 ];
 
 export function FilteredCalendar() {
-  return (
-    <PageCalendar
-      events={events}
-      filters={filters}
-      onChangeFilters={(updated) => console.log(updated)}
-    />
-  );
+    return <PageCalendar events={events} filters={filters} onChangeFilters={(updated) => console.log(updated)} />;
 }
 ```
 
@@ -161,21 +148,21 @@ import { PageCalendar } from "@g4rcez/components";
 import { MapPinIcon } from "@phosphor-icons/react";
 
 export function DetailCalendar() {
-  return (
-    <PageCalendar
-      events={events}
-      defaultView="day"
-      renderEvent={(event) => (
-        <div className="flex flex-col gap-1 p-2 bg-muted rounded-card">
-          <span className="font-semibold text-foreground">{event.title}</span>
-          <span className="flex items-center gap-1 text-sm text-muted-foreground">
-            <MapPinIcon size={12} />
-            {event.location}
-          </span>
-        </div>
-      )}
-    />
-  );
+    return (
+        <PageCalendar
+            events={events}
+            defaultView="day"
+            renderEvent={(event) => (
+                <div className="flex flex-col gap-1 p-2 bg-muted rounded-card">
+                    <span className="font-semibold text-foreground">{event.title}</span>
+                    <span className="flex items-center gap-1 text-sm text-muted-foreground">
+                        <MapPinIcon size={12} />
+                        {event.location}
+                    </span>
+                </div>
+            )}
+        />
+    );
 }
 ```
 
@@ -186,22 +173,22 @@ import { useState } from "react";
 import { PageCalendar } from "@g4rcez/components";
 
 export function EditableCalendar() {
-  const [showForm, setShowForm] = useState(false);
-  const [slotDate, setSlotDate] = useState<Date | null>(null);
-
-  return (
-    <>
-      <PageCalendar
-        events={events}
-        onAddEvent={() => setShowForm(true)}
-        onSlotClick={(date) => {
-          setSlotDate(date);
-          setShowForm(true);
-        }}
-      />
-      {showForm && <EventForm defaultDate={slotDate} onClose={() => setShowForm(false)} />}
-    </>
-  );
+    const [showForm, setShowForm] = useState(false);
+    const [slotDate, setSlotDate] = useState<Date | null>(null);
+
+    return (
+        <>
+            <PageCalendar
+                events={events}
+                onAddEvent={() => setShowForm(true)}
+                onSlotClick={(date) => {
+                    setSlotDate(date);
+                    setShowForm(true);
+                }}
+            />
+            {showForm && <EventForm defaultDate={slotDate} onClose={() => setShowForm(false)} />}
+        </>
+    );
 }
 ```
 
@@ -212,17 +199,21 @@ import { PageCalendar } from "@g4rcez/components";
 import { Button } from "@g4rcez/components/button";
 
 export function CustomFilterCalendar() {
-  return (
-    <PageCalendar
-      events={events}
-      filterArea={
-        <div className="flex items-center gap-2 rounded-card bg-muted px-3 py-1.5">
-          <Button theme="ghost-muted" size="small">All</Button>
-          <Button theme="primary" size="small">Mine</Button>
-        </div>
-      }
-    />
-  );
+    return (
+        <PageCalendar
+            events={events}
+            filterArea={
+                <div className="flex items-center gap-2 rounded-card bg-muted px-3 py-1.5">
+                    <Button theme="ghost-muted" size="small">
+                        All
+                    </Button>
+                    <Button theme="primary" size="small">
+                        Mine
+                    </Button>
+                </div>
+            }
+        />
+    );
 }
 ```
 
@@ -258,7 +249,7 @@ export function CustomFilterCalendar() {
 
 ```css
 [data-component="day-view-scroller"] {
-  height: calc(100dvh - 200px);
+    height: calc(100dvh - 200px);
 }
 ```
 

package/ai/docs/Polymorph.md

@@ -19,20 +19,20 @@ import { Polymorph } from "@g4rcez/components";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `as` | `React.ElementType` | `"span"` | The HTML element or React component to render as |
-| `ref` | `React.Ref` | - | Forwarded ref to the rendered element |
-| `...props` | `React.ComponentPropsWithoutRef<T>` | - | All props valid for the chosen element type |
+| Prop       | Type                                | Default  | Description                                      |
+| ---------- | ----------------------------------- | -------- | ------------------------------------------------ |
+| `as`       | `React.ElementType`                 | `"span"` | The HTML element or React component to render as |
+| `ref`      | `React.Ref`                         | -        | Forwarded ref to the rendered element            |
+| `...props` | `React.ComponentPropsWithoutRef<T>` | -        | All props valid for the chosen element type      |
 
 ## Type Definitions
 
 ```tsx
 export type PolymorphicProps<Props, T extends React.ElementType> = Props & {
-  as?: T;
+    as?: T;
 } & Omit<React.ComponentPropsWithoutRef<T>, keyof Props | "as" | "ref"> & {
-  ref?: React.ComponentProps<T>["ref"];
-};
+        ref?: React.ComponentProps<T>["ref"];
+    };
 ```
 
 ## Design Tokens
@@ -61,17 +61,13 @@ None — Polymorph itself applies no styles. It is a structural primitive only.
 import { useRef } from "react";
 
 const MyComponent = () => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
 
-  return (
-    <Polymorph
-      as="button"
-      ref={buttonRef}
-      onClick={() => buttonRef.current?.focus()}
-    >
-      Focus Me
-    </Polymorph>
-  );
+    return (
+        <Polymorph as="button" ref={buttonRef} onClick={() => buttonRef.current?.focus()}>
+            Focus Me
+        </Polymorph>
+    );
 };
 ```
 
@@ -79,13 +75,9 @@ const MyComponent = () => {
 
 ```tsx
 const DynamicItem = ({ isLink, href }: { isLink: boolean; href?: string }) => (
-  <Polymorph
-    as={isLink ? "a" : "button"}
-    href={isLink ? href : undefined}
-    className="text-foreground"
-  >
-    {isLink ? "Visit Link" : "Click Button"}
-  </Polymorph>
+    <Polymorph as={isLink ? "a" : "button"} href={isLink ? href : undefined} className="text-foreground">
+        {isLink ? "Visit Link" : "Click Button"}
+    </Polymorph>
 );
 ```
 
@@ -94,22 +86,14 @@ const DynamicItem = ({ isLink, href }: { isLink: boolean; href?: string }) => (
 ```tsx
 import { Polymorph, PolymorphicProps } from "@g4rcez/components";
 
-type CardProps<T extends React.ElementType = "div"> = PolymorphicProps<
-  { variant?: "default" | "muted" },
-  T
->;
-
-const Card = <T extends React.ElementType = "div">({
-  as,
-  variant = "default",
-  className,
-  ...props
-}: CardProps<T>) => (
-  <Polymorph
-    as={as ?? "div"}
-    className={`rounded-card border border-border ${variant === "muted" ? "bg-muted" : "bg-card-background"} ${className ?? ""}`}
-    {...props}
-  />
+type CardProps<T extends React.ElementType = "div"> = PolymorphicProps<{ variant?: "default" | "muted" }, T>;
+
+const Card = <T extends React.ElementType = "div">({ as, variant = "default", className, ...props }: CardProps<T>) => (
+    <Polymorph
+        as={as ?? "div"}
+        className={`rounded-card border border-border ${variant === "muted" ? "bg-muted" : "bg-card-background"} ${className ?? ""}`}
+        {...props}
+    />
 );
 ```