create-nexst-monorepo 0.1.0

package/template/apps/web/src/components/tabs/tabs.stories.tsx

@@ -0,0 +1,209 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Ban, Building2, Users } from "lucide-react";
+import { expect, userEvent, within } from "storybook/test";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByText("12 total tasks")).toBeInTheDocument();
+
+    await userEvent.click(canvas.getByRole("tab", { name: "Active" }));
+    await expect(canvas.getByText("8 active tasks")).toBeInTheDocument();
+  },
+  render: () => (
+    <Tabs className="w-[400px]" defaultValue="all">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="all">All</TabsTrigger>
+        <TabsTrigger value="active">Active</TabsTrigger>
+        <TabsTrigger value="completed">Completed</TabsTrigger>
+      </TabsList>
+      <TabsContent className="mt-4 space-y-2" value="all">
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-sm">12 total tasks</p>
+        </div>
+      </TabsContent>
+      <TabsContent className="mt-4 space-y-2" value="active">
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-sm">8 active tasks</p>
+        </div>
+      </TabsContent>
+      <TabsContent className="mt-4 space-y-2" value="completed">
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-sm">4 completed tasks</p>
+        </div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <Tabs className="w-[350px]" defaultValue="friends">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="friends">
+          <Users className="mr-2 h-4 w-4" />
+          Friends
+        </TabsTrigger>
+        <TabsTrigger value="institution">
+          <Building2 className="mr-2 h-4 w-4" />
+          Institution
+        </TabsTrigger>
+        <TabsTrigger value="blocked">
+          <Ban className="mr-2 h-4 w-4" />
+          Blocked
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent className="mt-4" value="friends">
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-sm font-medium">23 Friends</p>
+          <p className="text-muted-foreground mt-1 text-xs">People you follow</p>
+        </div>
+      </TabsContent>
+      <TabsContent className="mt-4" value="institution">
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-sm font-medium">156 Members</p>
+          <p className="text-muted-foreground mt-1 text-xs">From your institution</p>
+        </div>
+      </TabsContent>
+      <TabsContent className="mt-4" value="blocked">
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-sm font-medium">2 Blocked</p>
+          <p className="text-muted-foreground mt-1 text-xs">Users you've blocked</p>
+        </div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const IconOnly: Story = {
+  render: () => (
+    <Tabs className="w-[250px]" defaultValue="friends">
+      <TabsList className="grid h-8 w-full grid-cols-3 rounded-full p-0">
+        <TabsTrigger
+          aria-label="Friends"
+          className="data-[state=active]:bg-brand-500 data-[state=inactive]:hover:bg-brand-500/10 h-8 rounded-full data-[state=active]:text-white data-[state=active]:shadow-none"
+          value="friends"
+        >
+          <Users className="h-4 w-4" />
+        </TabsTrigger>
+        <TabsTrigger
+          aria-label="Institution"
+          className="data-[state=active]:bg-brand-500 data-[state=inactive]:hover:bg-brand-500/10 h-8 rounded-full data-[state=active]:text-white data-[state=active]:shadow-none"
+          value="institution"
+        >
+          <Building2 className="h-4 w-4" />
+        </TabsTrigger>
+        <TabsTrigger
+          aria-label="Blocked"
+          className="h-8 rounded-full data-[state=active]:bg-red-500 data-[state=active]:text-white data-[state=active]:shadow-none data-[state=inactive]:hover:bg-red-500/10"
+          value="blocked"
+        >
+          <Ban className="h-4 w-4" />
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="friends">
+        <p className="text-muted-foreground text-sm">23 friends</p>
+      </TabsContent>
+      <TabsContent value="institution">
+        <p className="text-muted-foreground text-sm">156 members</p>
+      </TabsContent>
+      <TabsContent value="blocked">
+        <p className="text-muted-foreground text-sm">2 blocked</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const CustomColors: Story = {
+  render: () => (
+    <Tabs className="w-[400px]" defaultValue="success">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger
+          className="data-[state=active]:bg-green-700 data-[state=active]:text-white"
+          value="success"
+        >
+          Success
+        </TabsTrigger>
+        <TabsTrigger
+          className="data-[state=active]:bg-amber-700 data-[state=active]:text-white"
+          value="warning"
+        >
+          Warning
+        </TabsTrigger>
+        <TabsTrigger
+          className="data-[state=active]:bg-red-700 data-[state=active]:text-white"
+          value="error"
+        >
+          Error
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent className="mt-4" value="success">
+        <div className="rounded-lg border border-green-500/20 bg-green-500/10 p-4">
+          <p className="text-sm font-medium text-green-800 dark:text-green-400">
+            Operation successful
+          </p>
+          <p className="mt-1 text-xs text-green-800 dark:text-green-500">All systems operational</p>
+        </div>
+      </TabsContent>
+      <TabsContent className="mt-4" value="warning">
+        <div className="rounded-lg border border-amber-500/20 bg-amber-500/10 p-4">
+          <p className="text-sm font-medium text-amber-800 dark:text-amber-400">Warning detected</p>
+          <p className="mt-1 text-xs text-amber-800 dark:text-amber-500">
+            Some issues need attention
+          </p>
+        </div>
+      </TabsContent>
+      <TabsContent className="mt-4" value="error">
+        <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4">
+          <p className="text-sm font-medium text-red-800 dark:text-red-400">Error occurred</p>
+          <p className="mt-1 text-xs text-red-800 dark:text-red-500">Action required</p>
+        </div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const WithDisabledTab: Story = {
+  render: () => (
+    <Tabs className="w-[400px]" defaultValue="profile">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="profile">Profile</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+        <TabsTrigger disabled value="billing">
+          Billing
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent className="mt-4" value="profile">
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-sm font-medium">Your Profile</p>
+          <p className="text-muted-foreground mt-1 text-xs">Manage your personal information</p>
+        </div>
+      </TabsContent>
+      <TabsContent className="mt-4" value="settings">
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-sm font-medium">Settings</p>
+          <p className="text-muted-foreground mt-1 text-xs">Configure your preferences</p>
+        </div>
+      </TabsContent>
+      <TabsContent className="mt-4" value="billing">
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-sm font-medium">Billing</p>
+          <p className="text-muted-foreground mt-1 text-xs">Upgrade to access billing</p>
+        </div>
+      </TabsContent>
+    </Tabs>
+  ),
+};

package/template/apps/web/src/components/tabs/tabs.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+function TabsList({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+  ref?: React.RefObject<null | React.ComponentRef<typeof TabsPrimitive.List>>;
+}) {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        "flex items-center justify-center rounded-full bg-muted/70 p-1 text-muted-foreground",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+}
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+function TabsTrigger({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+  ref?: React.RefObject<null | React.ComponentRef<typeof TabsPrimitive.Trigger>>;
+}) {
+  return (
+    <TabsPrimitive.Trigger
+      className={cn(
+        "inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-full px-3.5 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-card",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+}
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+function TabsContent({
+  className,
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
+  ref?: React.RefObject<null | React.ComponentRef<typeof TabsPrimitive.Content>>;
+}) {
+  return (
+    <TabsPrimitive.Content
+      className={cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+}
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/template/apps/web/src/components/tabs/url-tabs.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { TabsContent, TabsList, TabsTrigger } from "./tabs";
+import { UrlTabs } from "./url-tabs";
+
+const TABS = ["overview", "activity", "settings"] as const;
+
+function UrlTabsExample() {
+  return (
+    <UrlTabs className="w-96" defaultValue="overview" tabs={TABS}>
+      <TabsList className="w-full">
+        {TABS.map((tab) => (
+          <TabsTrigger className="flex-1 capitalize" key={tab} value={tab}>
+            {tab}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {TABS.map((tab) => (
+        <TabsContent className="text-muted-foreground p-4 text-sm capitalize" key={tab} value={tab}>
+          {tab} panel
+        </TabsContent>
+      ))}
+    </UrlTabs>
+  );
+}
+
+/**
+ * `Tabs` that mirror the active tab into `?tab=` so it survives reload and is
+ * shareable. The default tab keeps the URL clean.
+ */
+const meta = {
+  component: UrlTabsExample,
+  parameters: {
+    layout: "centered",
+    nextjs: { navigation: { pathname: "/institutions/kit", query: {} } },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof UrlTabsExample>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getAllByRole("tab")).toHaveLength(3);
+    await expect(canvas.getByRole("tab", { name: "overview" })).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+
+    await userEvent.click(canvas.getByRole("tab", { name: "activity" }));
+  },
+};
+
+export const DeepLinkedTab: Story = {
+  parameters: {
+    nextjs: { navigation: { pathname: "/institutions/kit", query: { tab: "settings" } } },
+  },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("tab", { name: "settings" })).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+  },
+};

package/template/apps/web/src/components/tabs/url-tabs.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import type { ComponentPropsWithoutRef } from "react";
+import { Tabs } from "./tabs";
+
+type Props = Omit<ComponentPropsWithoutRef<typeof Tabs>, "onValueChange" | "value"> & {
+  defaultValue: string;
+  paramName?: string;
+  tabs: readonly string[];
+};
+
+/**
+ * Drop-in replacement for `Tabs` that mirrors the active tab into the URL
+ * (`?tab=...`) so switching tabs is shareable/back-button-able and survives a
+ * reload, while keeping the default tab's URL clean.
+ */
+export function UrlTabs({ defaultValue, paramName = "tab", tabs, ...props }: Props) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const tabParam = searchParams.get(paramName);
+  const value = tabParam && tabs.includes(tabParam) ? tabParam : defaultValue;
+
+  return (
+    <Tabs
+      {...props}
+      onValueChange={(next) => {
+        const params = new URLSearchParams(searchParams);
+        if (next === defaultValue) {
+          params.delete(paramName);
+        } else {
+          params.set(paramName, next);
+        }
+        const query = params.toString();
+        router.replace(`${pathname}${query ? `?${query}` : ""}`, { scroll: false });
+      }}
+      value={value}
+    />
+  );
+}

package/template/apps/web/src/components/textarea/textarea.stories.tsx

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import { Textarea } from "./textarea";
+
+const meta: Meta<typeof Textarea> = {
+  component: Textarea,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const field = within(canvasElement).getByPlaceholderText("Type your message here...");
+
+    await userEvent.type(field, "Hello there");
+    await expect(field).toHaveValue("Hello there");
+  },
+  render: () => <Textarea className="w-[400px]" placeholder="Type your message here..." />,
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <Textarea className="w-[400px]" label="Message" placeholder="Type your message here..." />
+  ),
+};
+
+export const WithHint: Story = {
+  render: () => (
+    <Textarea
+      className="w-[400px]"
+      hint="This will be displayed on your public profile."
+      label="Bio"
+      placeholder="Tell us about yourself..."
+    />
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <Textarea
+      className="w-[400px]"
+      error="Description must be at least 10 characters long."
+      label="Description"
+      placeholder="Enter a description..."
+    />
+  ),
+};
+
+export const Success: Story = {
+  render: () => (
+    <Textarea
+      className="w-[400px]"
+      defaultValue="This product exceeded my expectations! The quality is outstanding."
+      hint="Your review looks great!"
+      isSuccess
+      label="Review"
+      placeholder="Write your review..."
+    />
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Textarea
+      className="w-[400px]"
+      defaultValue="This textarea is disabled and cannot be edited."
+      disabled
+      label="Readonly Message"
+      placeholder="Type your message here..."
+    />
+  ),
+};
+
+export const SmallSize: Story = {
+  render: () => (
+    <Textarea
+      className="w-[400px]"
+      label="Quick Note"
+      placeholder="Add a quick note..."
+      size="sm"
+    />
+  ),
+};
+
+export const WithRows: Story = {
+  render: () => (
+    <Textarea
+      className="w-[500px]"
+      hint="Minimum 500 words required."
+      label="Essay"
+      placeholder="Write your essay here..."
+      rows={10}
+    />
+  ),
+};
+
+export const WithCharacterCount: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    const maxLength = 200;
+
+    return (
+      <Textarea
+        className="w-[400px]"
+        hint={`${value.length}/${maxLength} characters`}
+        label="Tweet"
+        maxLength={maxLength}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="What's happening?"
+        value={value}
+      />
+    );
+  },
+};
+
+export const InForm: Story = {
+  render: () => (
+    <div className="w-[500px] space-y-6">
+      <div className="space-y-4 rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
+        <h3 className="text-lg font-semibold">Contact Form</h3>
+
+        <Textarea
+          hint="Please provide as much detail as possible."
+          label="Message"
+          placeholder="How can we help you?"
+          rows={4}
+        />
+
+        <Textarea
+          label="Additional Notes"
+          placeholder="Any additional information..."
+          rows={3}
+          size="sm"
+        />
+      </div>
+    </div>
+  ),
+};

package/template/apps/web/src/components/textarea/textarea.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import type { TextareaHTMLAttributes } from "react";
+import { useId } from "react";
+import { cn } from "@/lib/utils";
+
+type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "ref"> & {
+  containerClassName?: string;
+  error?: string;
+  frameClassName?: string;
+  hint?: string;
+  isSuccess?: boolean;
+  label?: string;
+  ref?: React.Ref<HTMLTextAreaElement>;
+  size?: "md" | "sm";
+};
+
+const FRAME_BASE =
+  "flex w-full rounded-xl border bg-card transition-[border-color,box-shadow] duration-150";
+const FRAME_SIZE = { md: "min-h-[120px] px-3.5 py-2.5", sm: "min-h-[80px] px-3 py-2" } as const;
+const TEXTAREA_BASE =
+  "w-full min-w-0 resize-none bg-transparent text-foreground outline-none placeholder:text-muted-foreground/60 focus-visible:outline-none";
+const TEXTAREA_SIZE = { md: "text-base", sm: "text-sm" } as const;
+
+const FRAME_STATE = {
+  default:
+    "border-input shadow-xs focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/25",
+  disabled: "cursor-not-allowed border-input bg-muted/50 shadow-none dark:bg-muted/30",
+  error:
+    "border-destructive/60 shadow-xs focus-within:border-destructive focus-within:ring-2 focus-within:ring-destructive/20",
+  success:
+    "border-emerald-500/50 shadow-xs focus-within:border-emerald-500 focus-within:ring-2 focus-within:ring-emerald-500/20",
+} as const;
+
+function Textarea(props: TextareaProps) {
+  const {
+    className,
+    containerClassName,
+    disabled,
+    error,
+    frameClassName,
+    hint,
+    id,
+    isSuccess,
+    label,
+    ref,
+    size = "md",
+    ...textareaProps
+  } = props;
+
+  const generatedId = useId();
+
+  const textareaId = id ?? `${generatedId}-textarea`;
+  const hasError = Boolean(error);
+  const hasSuccess = isSuccess && !hasError;
+
+  const describedBy =
+    [
+      hasError && `${textareaId}-error`,
+      hasSuccess && `${textareaId}-success`,
+      hint && !hasError && `${textareaId}-hint`,
+    ]
+      .filter(Boolean)
+      .join(" ") || undefined;
+
+  const state = disabled ? "disabled" : hasError ? "error" : hasSuccess ? "success" : "default";
+
+  return (
+    <fieldset
+      className={cn(
+        "text-foreground/90 flex flex-col gap-y-1.5 text-sm",
+        disabled && "opacity-70",
+        containerClassName,
+      )}
+    >
+      {label && (
+        <label className="ml-0.5 text-sm font-medium" htmlFor={textareaId}>
+          {label}
+        </label>
+      )}
+
+      <div className={cn(FRAME_BASE, FRAME_SIZE[size], FRAME_STATE[state], frameClassName)}>
+        <textarea
+          {...textareaProps}
+          aria-describedby={describedBy}
+          aria-invalid={hasError}
+          className={cn(
+            TEXTAREA_BASE,
+            TEXTAREA_SIZE[size],
+            disabled && "cursor-not-allowed",
+            className,
+          )}
+          disabled={disabled}
+          id={textareaId}
+          ref={ref}
+        />
+      </div>
+
+      {hasError && error && (
+        <p className="text-destructive ml-0.5 text-xs font-medium" id={`${textareaId}-error`}>
+          {error}
+        </p>
+      )}
+      {!hasError && hint && (
+        <p className="text-muted-foreground ml-0.5 text-xs" id={`${textareaId}-hint`}>
+          {hint}
+        </p>
+      )}
+    </fieldset>
+  );
+}
+
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/template/apps/web/src/components/toast/toaster.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Toaster as Sonner } from "sonner";
+
+export function Toaster() {
+  return (
+    <Sonner
+      closeButton
+      expand={false}
+      gap={10}
+      position="bottom-right"
+      toastOptions={{
+        classNames: {
+          actionButton:
+            "!rounded-md !bg-foreground !px-2.5 !py-1 !text-[11px] !font-medium !text-background transition-colors hover:!bg-foreground/90",
+          cancelButton:
+            "!rounded-md !bg-muted !px-2.5 !py-1 !text-[11px] !font-medium !text-muted-foreground transition-colors hover:!bg-muted/80",
+          closeButton:
+            "!absolute !left-auto !right-2.5 !top-2.5 !rounded-md !border-0 !bg-transparent !p-0.5 !text-foreground/40 !opacity-0 !shadow-none transition-all hover:!text-foreground focus:!opacity-100 focus:!outline-none focus-visible:!ring-2 focus-visible:!ring-ring group-hover:!opacity-100 [&_svg]:h-3.5 [&_svg]:w-3.5",
+          content: "flex flex-col gap-0.5",
+          description: "text-[12px] leading-snug text-muted-foreground",
+          error:
+            "!border-l-red-500 [&_svg]:text-red-500 dark:!border-l-red-400 dark:[&_svg]:text-red-400",
+          icon: "flex h-[18px] w-[18px] shrink-0 items-center justify-center [&_svg]:h-[18px] [&_svg]:w-[18px]",
+          info: "!border-l-blue-500 [&_svg]:text-blue-500 dark:!border-l-blue-400 dark:[&_svg]:text-blue-400",
+          success:
+            "!border-l-emerald-500 [&_svg]:text-emerald-500 dark:!border-l-emerald-400 dark:[&_svg]:text-emerald-400",
+          title: "text-[13px] font-medium leading-tight text-foreground",
+          toast:
+            "group relative flex w-full min-w-[300px] max-w-[380px] items-center gap-3 overflow-hidden rounded-2xl border border-border/70 border-l-[3px] bg-popover py-3 pl-4 pr-9 shadow-[0_12px_32px_-12px_rgba(0,0,0,0.22)] transition-all",
+          warning:
+            "!border-l-amber-500 [&_svg]:text-amber-500 dark:!border-l-amber-400 dark:[&_svg]:text-amber-400",
+        },
+        unstyled: true,
+      }}
+    />
+  );
+}