shapes-ui 0.1.1

package/src/components/docs/markdown/render-preview.tsx

@@ -0,0 +1,152 @@
+import { Tabs } from "@base-ui/react/tabs";
+import { examples } from "@examples/__index";
+import { Suspense, useEffect, useState } from "react";
+
+import { SuspenseFallback } from "../layout/suspense-fallback";
+
+type RegistryEntry = (typeof examples)[keyof typeof examples];
+type ExampleEntry = RegistryEntry["examples"][number];
+
+function findExample(name: string): ExampleEntry | null {
+  const componentEntry = examples[name];
+  if (componentEntry?.examples?.length) {
+    return componentEntry.examples[0];
+  }
+
+  for (const entry of Object.values(examples)) {
+    const match = entry.examples.find((example) => example.name === name);
+    if (match) {
+      return match;
+    }
+  }
+
+  return null;
+}
+
+export function RenderPreview({ name }: { name: string }) {
+  const [code, setCode] = useState<string | null>(null);
+  const [highlighted, setHighlighted] = useState<string | null>(null);
+  const example = findExample(name);
+
+  useEffect(() => {
+    if (!example) return;
+    let isActive = true;
+
+    const rawExamples = import.meta.glob("/examples/**/*.tsx", {
+      query: "?raw",
+      import: "default",
+    });
+
+    const matchingKey = Object.keys(rawExamples).find((key) => key.includes(example.name));
+
+    if (matchingKey) {
+      rawExamples[matchingKey]().then(async (mod: any) => {
+        const source = mod.default || mod;
+        if (!isActive) return;
+
+        setCode(source);
+
+        try {
+          const { codeToHtml } = await import("shiki");
+
+          const html = await codeToHtml(source, {
+            lang: "tsx",
+            themes: {
+              light: "github-light",
+              dark: "github-dark",
+            },
+            defaultColor: false,
+            transformers: [
+              {
+                name: "line-numbers",
+                pre(node: any) {
+                  node.properties["data-line-numbers"] = "";
+                },
+                line(node: any, line: number) {
+                  node.properties.className = ["line"];
+                  node.children.unshift({
+                    type: "element",
+                    tagName: "span",
+                    properties: {
+                      className: ["line-number"],
+                    },
+                    children: [{ type: "text", value: String(line) }],
+                  });
+                },
+              },
+            ],
+          });
+
+          if (isActive) {
+            setHighlighted(html);
+          }
+        } catch {
+          if (isActive) {
+            setHighlighted(null);
+          }
+        }
+      });
+    }
+
+    return () => {
+      isActive = false;
+    };
+  }, [example]);
+
+  if (!example) {
+    return (
+      <div className="rounded border border-dashed p-4 text-sm text-muted-foreground">
+        Example not found.
+      </div>
+    );
+  }
+
+  const ExampleComponent = example.code;
+
+  return (
+    <Tabs.Root className={"my-2 flex flex-col gap-2"}>
+      <Tabs.List className={"flex gap-2"}>
+        <Tabs.Tab
+          value="preview"
+          className={
+            "px-2 py-1 text-xs text-foreground/80 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground"
+          }
+        >
+          Preview
+        </Tabs.Tab>
+        <Tabs.Tab
+          value="code"
+          className={
+            "px-2 py-1 text-xs text-foreground/80 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground"
+          }
+        >
+          Code
+        </Tabs.Tab>
+      </Tabs.List>
+
+      <Tabs.Panel
+        value={"preview"}
+        className={"flex h-90 items-center justify-center overflow-x-auto border p-4 "}
+      >
+        <Suspense fallback={<SuspenseFallback />}>
+          <ExampleComponent />
+        </Suspense>
+      </Tabs.Panel>
+
+      <Tabs.Panel
+        value={"code"}
+        className={
+          "flex h-90  items-start justify-start overflow-y-auto border bg-muted/40 p-4 font-mono text-xs "
+        }
+      >
+        {highlighted ? (
+          <div className="shiki-wrapper" dangerouslySetInnerHTML={{ __html: highlighted }} />
+        ) : (
+          <pre className="overflow-x-auto">
+            <code>{code ?? "// Loading code..."}</code>
+          </pre>
+        )}
+      </Tabs.Panel>
+    </Tabs.Root>
+  );
+}

package/src/components/docs/theme-provider.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark";
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>("light");
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme") as Theme;
+    if (savedTheme) {
+      setTheme(savedTheme);
+    } else {
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      setTheme(prefersDark ? "dark" : "light");
+    }
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}

package/src/components/ui/accordion.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { MinusIcon, PlusIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  size,
+  variant,
+  className,
+  ...props
+}: AccordionPrimitive.Root.Props & {
+  size?: "default" | "small";
+  variant?: "default" | "surface";
+}) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion-root"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/accordion-root flex w-full flex-col",
+        "data-[variant=surface]:space-y-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn(
+        "group/accordion-item not-last:border-b group-data-[variant=surface]/accordion-root:bg-accent group-data-[variant=surface]/accordion-root:px-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className={"flex"}>
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "&_svg]:shrink-0 group/accordion-trigger flex flex-1 items-center gap-2 rounded-lg py-2.5 text-sm group-data-[size=small]/accordion-root:py-1.5  hover:underline focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 ",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <PlusIcon
+          data-slot="accordion-trigger-icon"
+          className=" group-data-panel-open/accordion-trigger:hidden"
+        />
+        <MinusIcon
+          data-slot="accordion-trigger-icon"
+          className="hidden group-data-panel-open/accordion-trigger:inline-flex"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionPanel({ className, ...props }: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-panel"
+      className={cn(
+        "h-[--accordion-panel-height] overflow-hidden text-sm transition-all duration-150 ease-out data-ending-style:h-0 group-data-open/accordion-item:data-open:pb-2 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionPanel };

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 supports-backdrop-filter:backdrop-blur-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogPopup({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        " text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogPopup,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,72 @@
+import { cva, VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "border bg-card text-card-foreground",
+        destructive: "bg-destructive/10 text-destructive [&_>svg]:text-destructive-foreground",
+        success: "bg-success/10 text-success [&_>svg]:text-success-foreground",
+        warning: "bg-warning/10 text-warning [&_>svg]:text-warning-foreground",
+        info: "bg-info/10 text-info [&_>svg]:text-info-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert-root"
+      role="alert"
+      className={alertVariants({ variant, className })}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("col-start-2 flex items-center justify-end gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/components/ui/badge.tsx

@@ -0,0 +1,34 @@
+import { cva, VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 min-h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-lg border border-transparent px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=end]:pr-1.5 has-data-[icon=start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        outline:
+          "border-border! text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        success:
+          "bg-success/20 text-success-foreground hover:bg-success/25 [a]:hover:bg-success/80",
+        warning:
+          "bg-warning/20 text-warning-foreground hover:bg-warning/25 [a]:hover:bg-warning/80",
+        info: "bg-info/20 text-info-foreground hover:bg-info/25 [a]:hover:bg-info/80",
+        destructive:
+          "bg-destructive/20 text-destructive-foreground hover:bg-destructive/25 [a]:hover:bg-destructive/80",
+      },
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  ...props
+}: ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return <span data-slot="badge" className={badgeVariants({ variant, className })} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex h-8 shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        success:
+          "bg-success/10 text-success hover:bg-success/20 focus-visible:border-success/40 focus-visible:ring-success/20 dark:bg-success/20 dark:hover:bg-success/30 dark:focus-visible:ring-success/40",
+        info: "bg-info/10 text-info hover:bg-info/20 focus-visible:border-info/40 focus-visible:ring-info/20 dark:bg-info/20 dark:hover:bg-info/30 dark:focus-visible:ring-info/40",
+        warning:
+          "bg-warning/10 text-warning hover:bg-warning/20 focus-visible:border-warning/40 focus-visible:ring-warning/20 dark:bg-warning/20 dark:hover:bg-warning/30 dark:focus-visible:ring-warning/40",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+      },
+      size: {
+        default: "gap-1.5 px-3 has-data-[icon=end]:pr-2 has-data-[icon=start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=end]:pr-1.5 has-data-[icon=start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=end]:pr-1.5 has-data-[icon=start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=end]:pr-3 has-data-[icon=start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}