@kala-ui/react-app 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/components/user-menu-dropdown/user-menu-dropdown.d.ts

@@ -1,31 +1,2 @@
-export interface UserMenuDropdownProps extends Omit<React.ComponentProps<"button">, "color"> {
-    /**
-     * User information to display
-     */
-    user: {
-        name?: string;
-        email?: string;
-        avatar?: string;
-    };
-    /**
-     * Whether the dropdown is currently open
-     */
-    isOpen?: boolean;
-    /**
-     * Callback when dropdown open state changes
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Callback when logout is clicked
-     */
-    onLogout?: () => void;
-    /**
-     * Base URL for navigation links (default: '/admin')
-     */
-    baseUrl?: string;
-    /**
-     * Additional CSS classes for the trigger button
-     */
-    className?: string;
-}
-export declare function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl, className, ref, ...props }: UserMenuDropdownProps): import("react").JSX.Element;
+import type { UserMenuDropdownProps } from "./user-menu-dropdown.types";
+export declare function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl, className, style, slotStyles: slotStylesRaw, ref, ...props }: UserMenuDropdownProps): import("react").JSX.Element;

package/dist/components/user-menu-dropdown/user-menu-dropdown.js

@@ -3,9 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, AvatarFallback, AvatarImage } from "@kala-ui/react/avatar";
 import { Button } from "@kala-ui/react/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@kala-ui/react/dropdown-menu";
+import { useSlotStyles } from "@kala-ui/react/kala-provider";
+import { applySlot } from "@kala-ui/react/lib/slot-styles";
 import { cn } from "@kala-ui/react/lib/utils";
 import { LogOut, Settings, User } from "lucide-react";
-export function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl = "/admin", className, ref, ...props }) {
+import { userMenuDropdownStyles } from "../../config/user-menu-dropdown.js";
+export function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl = "/admin", className, style, slotStyles: slotStylesRaw, ref, ...props }) {
+    const slotStyles = useSlotStyles("user-menu-dropdown", slotStylesRaw);
     const initials = user.name
         ? user.name
             .split(" ")
@@ -23,5 +27,13 @@ export function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl
     const handleLogoutClick = () => {
         onLogout?.();
     };
-    return (_jsxs(DropdownMenu, { "data-kala-component": "user-menu-dropdown", ...(isOpen !== undefined && { open: isOpen }), ...(onOpenChange && { onOpenChange }), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", ref: ref, className: cn("h-auto p-1 rounded-full hover:bg-accent", className), "aria-label": "User menu", ...props, children: _jsxs(Avatar, { className: "size-8", children: [user.avatar && (_jsx(AvatarImage, { src: user.avatar, alt: user.name ?? "User" })), _jsx(AvatarFallback, { className: "bg-primary text-primary-foreground text-sm font-medium", children: initials })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: "flex flex-col space-y-1", children: [user.name && (_jsx("p", { className: "text-sm font-medium leading-none", children: user.name })), user.email && (_jsx("p", { className: "text-xs text-muted-foreground leading-none", children: user.email }))] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleProfileClick, children: [_jsx(User, { className: "mr-2 size-4" }), "Profile"] }), _jsxs(DropdownMenuItem, { onClick: handleSettingsClick, children: [_jsx(Settings, { className: "mr-2 size-4" }), "Settings"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleLogoutClick, color: "destructive", children: [_jsx(LogOut, { className: "mr-2 size-4" }), "Logout"] })] })] }));
+    const trigger = applySlot(cn(userMenuDropdownStyles.trigger, className), slotStyles?.trigger);
+    const avatar = applySlot(userMenuDropdownStyles.avatar, slotStyles?.avatar);
+    const avatarFallback = applySlot(userMenuDropdownStyles.avatarFallback, slotStyles?.avatarFallback);
+    const content = applySlot(userMenuDropdownStyles.content, slotStyles?.content);
+    const label = applySlot(userMenuDropdownStyles.label, slotStyles?.label);
+    const name = applySlot(userMenuDropdownStyles.name, slotStyles?.name);
+    const email = applySlot(userMenuDropdownStyles.email, slotStyles?.email);
+    const itemIcon = applySlot(userMenuDropdownStyles.itemIcon, slotStyles?.itemIcon);
+    return (_jsxs(DropdownMenu, { "data-kala-component": "user-menu-dropdown", ...(isOpen !== undefined && { open: isOpen }), ...(onOpenChange && { onOpenChange }), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", ref: ref, className: trigger.className, style: trigger.style, "aria-label": "User menu", ...props, children: _jsxs(Avatar, { className: avatar.className, style: avatar.style, children: [user.avatar && (_jsx(AvatarImage, { src: user.avatar, alt: user.name ?? "User" })), _jsx(AvatarFallback, { className: avatarFallback.className, style: avatarFallback.style, children: initials })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: content.className, style: content.style, children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: label.className, style: label.style, children: [user.name && (_jsx("p", { className: name.className, style: name.style, children: user.name })), user.email && (_jsx("p", { className: email.className, style: email.style, children: user.email }))] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleProfileClick, children: [_jsx(User, { className: itemIcon.className }), "Profile"] }), _jsxs(DropdownMenuItem, { onClick: handleSettingsClick, children: [_jsx(Settings, { className: itemIcon.className }), "Settings"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleLogoutClick, color: "destructive", children: [_jsx(LogOut, { className: itemIcon.className }), "Logout"] })] })] }));
 }

package/dist/components/user-menu-dropdown/user-menu-dropdown.types.d.ts

@@ -0,0 +1,16 @@
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
+import type * as React from "react";
+export interface UserMenuDropdownProps extends Omit<React.ComponentProps<"button">, "color"> {
+    user: {
+        name?: string;
+        email?: string;
+        avatar?: string;
+    };
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onLogout?: () => void;
+    baseUrl?: string;
+    className?: string;
+    /** Per-part overrides: trigger, avatar, avatarFallback, content, label, name, email, itemIcon. */
+    slotStyles?: SlotStyles;
+}

package/dist/components/user-menu-dropdown/user-menu-dropdown.types.js

@@ -0,0 +1,2 @@
+"use client";
+export {};

package/dist/config/app-shell.d.ts

@@ -0,0 +1,13 @@
+export declare const appShellStyles: {
+    base: string;
+    header: string;
+    headerBorder: string;
+    navbar: string;
+    navbarBorder: string;
+    aside: string;
+    asideBorder: string;
+    main: string;
+    footer: string;
+    footerBorder: string;
+    padding: Record<string, string>;
+};

package/dist/config/app-shell.js

@@ -0,0 +1,20 @@
+export const appShellStyles = {
+    base: "flex min-h-screen flex-col bg-background text-foreground",
+    header: "fixed top-0 left-0 right-0 z-50 flex items-center bg-background px-4",
+    headerBorder: "border-b",
+    navbar: "fixed left-0 z-40 flex flex-col bg-background transition-transform duration-300 ease-in-out",
+    navbarBorder: "border-r",
+    aside: "fixed right-0 z-40 flex flex-col bg-background transition-transform duration-300 ease-in-out",
+    asideBorder: "border-l",
+    main: "flex-1 transition-all duration-300 ease-in-out",
+    footer: "fixed bottom-0 left-0 right-0 z-50 flex items-center bg-background px-4",
+    footerBorder: "border-t",
+    padding: {
+        none: "p-0",
+        xs: "p-2",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        xl: "p-8",
+    },
+};

package/dist/config/charts.d.ts

@@ -0,0 +1,23 @@
+export declare const chartSkeletonStyles: {
+    root: string;
+    frame: string;
+    frameInner: string;
+    frameFill: string;
+    legendRow: string;
+    legendItem: string;
+    legendDot: string;
+    legendLabel: string;
+    tableWrap: string;
+    tableHead: string;
+    tableRow: string;
+    tableCell: string;
+};
+export declare const chartStyles: {
+    root: string;
+    empty: string;
+    emptyIcon: string;
+    emptyText: string;
+    titleBlock: string;
+    title: string;
+    subtitle: string;
+};

package/dist/config/charts.js

@@ -0,0 +1,23 @@
+export const chartSkeletonStyles = {
+    root: "w-full space-y-4",
+    frame: "w-full rounded-lg border bg-card kala-surface-card",
+    frameInner: "flex items-center justify-center h-full",
+    frameFill: "h-full w-full",
+    legendRow: "flex gap-4 justify-center mt-4",
+    legendItem: "flex items-center gap-2",
+    legendDot: "h-3 w-3 rounded-full",
+    legendLabel: "h-4 w-16",
+    tableWrap: "mt-6",
+    tableHead: "h-4 w-24",
+    tableRow: "border-0",
+    tableCell: "h-4 w-20",
+};
+export const chartStyles = {
+    root: "w-full",
+    empty: "w-full flex flex-col items-center justify-center text-center rounded-lg border bg-card text-muted-foreground",
+    emptyIcon: "mb-3 h-10 w-10 opacity-40",
+    emptyText: "text-sm",
+    titleBlock: "mb-1.5 text-left",
+    title: "text-lg font-semibold text-foreground",
+    subtitle: "text-sm text-muted-foreground",
+};

package/dist/config/footer.d.ts

@@ -0,0 +1,16 @@
+export declare const footerStyles: {
+    root: string;
+    inner: string;
+    centeredContent: string;
+    grid: string;
+    sectionTitle: string;
+    sectionList: string;
+    sectionLink: string;
+    customContent: string;
+    bottomRow: string;
+    bottomRowSide: string;
+    bottomRowCentered: string;
+    copyright: string;
+    socialList: string;
+    socialLink: string;
+};

package/dist/config/footer.js

@@ -0,0 +1,16 @@
+export const footerStyles = {
+    root: "w-full bg-muted text-muted-foreground border-t",
+    inner: "container mx-auto px-4 py-8 md:py-12",
+    centeredContent: "mb-12 flex flex-col items-center text-center",
+    grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8",
+    sectionTitle: "text-foreground font-semibold text-sm uppercase tracking-wider mb-4",
+    sectionList: "space-y-2",
+    sectionLink: "text-muted-foreground hover:text-primary transition-colors text-sm",
+    customContent: "md:col-span-2 lg:col-span-1",
+    bottomRow: "border-t pt-8 flex flex-col gap-4",
+    bottomRowSide: "md:flex-row md:justify-between md:items-center",
+    bottomRowCentered: "items-center",
+    copyright: "text-sm text-muted-foreground order-2 md:order-1",
+    socialList: "flex items-center gap-4 order-1 md:order-2",
+    socialLink: "text-muted-foreground hover:text-primary transition-colors",
+};

package/dist/config/index.d.ts

@@ -0,0 +1,7 @@
+export { appShellStyles } from "./app-shell";
+export { chartStyles } from "./charts";
+export { footerStyles } from "./footer";
+export { metricCardStyles } from "./metric-card";
+export { sessionCardStyles } from "./session-card";
+export { socialLoginButtonStyles, socialLoginButtonsStyles, } from "./social-login-button";
+export { userMenuDropdownStyles } from "./user-menu-dropdown";

package/dist/config/index.js

@@ -0,0 +1,7 @@
+export { appShellStyles } from "./app-shell.js";
+export { chartStyles } from "./charts.js";
+export { footerStyles } from "./footer.js";
+export { metricCardStyles } from "./metric-card.js";
+export { sessionCardStyles } from "./session-card.js";
+export { socialLoginButtonStyles, socialLoginButtonsStyles, } from "./social-login-button.js";
+export { userMenuDropdownStyles } from "./user-menu-dropdown.js";

package/dist/config/metric-card.d.ts

@@ -0,0 +1,36 @@
+export declare const metricCardColorStyles: Record<string, string>;
+export declare const metricCardStyles: {
+    body: string;
+    head: string;
+    title: string;
+    titleOnColor: string;
+    titleMuted: string;
+    icon: string;
+    iconOnColor: string;
+    iconMuted: string;
+    value: string;
+    valueBlock: string;
+    valueOnColor: string;
+    valueMuted: string;
+    meta: string;
+    change: string;
+    changeOnColor: string;
+    subtitle: string;
+    subtitleOnColor: string;
+    subtitleMuted: string;
+};
+export declare const metricCardChangeColors: {
+    readonly up: "text-success";
+    readonly down: "text-destructive";
+    readonly flat: "text-muted-foreground";
+};
+export declare const metricCardSkeletonStyles: {
+    body: string;
+    head: string;
+    title: string;
+    icon: string;
+    valueBlock: string;
+    value: string;
+    meta: string;
+    metaLine: string;
+};

package/dist/config/metric-card.js

@@ -0,0 +1,44 @@
+export const metricCardColorStyles = {
+    primary: "bg-gradient-to-br from-primary to-primary/90 text-primary-foreground",
+    secondary: "bg-gradient-to-br from-secondary to-secondary/90 text-secondary-foreground",
+    destructive: "bg-gradient-to-br from-destructive to-destructive/90 text-destructive-foreground",
+    success: "bg-gradient-to-br from-success to-success/90 text-success-foreground",
+    warning: "bg-gradient-to-br from-warning to-warning/90 text-warning-foreground",
+    info: "bg-gradient-to-br from-info to-info/90 text-info-foreground",
+    muted: "bg-card border text-card-foreground",
+};
+export const metricCardStyles = {
+    body: "p-6",
+    head: "flex items-center justify-between mb-4",
+    title: "text-xs font-semibold uppercase tracking-wide",
+    titleOnColor: "opacity-90",
+    titleMuted: "text-muted-foreground",
+    icon: "",
+    iconOnColor: "opacity-70",
+    iconMuted: "text-muted-foreground",
+    value: "text-4xl font-bold leading-none",
+    valueBlock: "mb-3",
+    valueOnColor: "",
+    valueMuted: "text-card-foreground",
+    meta: "text-sm",
+    change: "flex items-center gap-1",
+    changeOnColor: "opacity-90",
+    subtitle: "",
+    subtitleOnColor: "opacity-80",
+    subtitleMuted: "text-muted-foreground",
+};
+export const metricCardChangeColors = {
+    up: "text-success",
+    down: "text-destructive",
+    flat: "text-muted-foreground",
+};
+export const metricCardSkeletonStyles = {
+    body: "p-6",
+    head: "flex items-center justify-between mb-4",
+    title: "h-4 w-24",
+    icon: "rounded-md",
+    valueBlock: "mb-3",
+    value: "h-10 w-32",
+    meta: "text-sm",
+    metaLine: "h-4 w-32",
+};

package/dist/config/session-card.d.ts

@@ -0,0 +1,32 @@
+export declare const sessionCardStyles: {
+    root: string;
+    header: string;
+    headerRow: string;
+    headerMain: string;
+    deviceIcon: string;
+    titleBlock: string;
+    titleRow: string;
+    title: string;
+    subtitle: string;
+    currentBadge: string;
+    revokeButton: string;
+    content: string;
+    detailList: string;
+    detailRow: string;
+    detailIcon: string;
+};
+export declare const sessionCardSkeletonStyles: {
+    root: string;
+    headerRow: string;
+    headerMain: string;
+    deviceIcon: string;
+    titleBlock: string;
+    titleSkeleton: string;
+    subtitleSkeleton: string;
+    badgeSkeleton: string;
+    revokeSkeleton: string;
+    detailList: string;
+    detailRowMedium: string;
+    detailRowNarrow: string;
+    detailRowWide: string;
+};

package/dist/config/session-card.js

@@ -0,0 +1,32 @@
+export const sessionCardStyles = {
+    root: "relative",
+    header: "pb-3",
+    headerRow: "flex items-start justify-between gap-4",
+    headerMain: "flex items-start gap-3 flex-1",
+    deviceIcon: "size-6 text-muted-foreground mt-0.5",
+    titleBlock: "flex-1 min-w-0",
+    titleRow: "flex items-center gap-2 flex-wrap",
+    title: "font-semibold text-sm",
+    subtitle: "text-xs text-muted-foreground mt-0.5",
+    currentBadge: "inline-flex items-center rounded-md bg-success/10 px-2 py-1 text-xs font-medium text-success border border-success/20",
+    revokeButton: "text-destructive hover:text-destructive hover:bg-destructive/10",
+    content: "pt-0",
+    detailList: "space-y-1.5 text-xs text-muted-foreground",
+    detailRow: "flex items-center gap-1.5",
+    detailIcon: "size-3.5",
+};
+export const sessionCardSkeletonStyles = {
+    root: "relative",
+    headerRow: "flex items-start justify-between gap-4",
+    headerMain: "flex items-start gap-3 flex-1",
+    deviceIcon: "rounded-md",
+    titleBlock: "flex-1 min-w-0",
+    titleSkeleton: "h-4 w-32 mb-1",
+    subtitleSkeleton: "h-3 w-48",
+    badgeSkeleton: "h-5 w-24 rounded-md",
+    revokeSkeleton: "h-8 w-16 rounded-md",
+    detailList: "space-y-1.5",
+    detailRowMedium: "h-4 w-48",
+    detailRowNarrow: "h-4 w-40",
+    detailRowWide: "h-4 w-56",
+};

package/dist/config/social-login-button.d.ts

@@ -0,0 +1,15 @@
+/** Social-login families: per-part base classes. */
+export declare const socialLoginButtonStyles: {
+    root: string;
+    icon: string;
+    spinner: string;
+};
+export declare const socialLoginButtonsStyles: {
+    root: string;
+    divider: string;
+    dividerLine: string;
+    dividerMask: string;
+    dividerLabel: string;
+    dividerRule: string;
+    list: string;
+};

package/dist/config/social-login-button.js

@@ -0,0 +1,15 @@
+/** Social-login families: per-part base classes. */
+export const socialLoginButtonStyles = {
+    root: "relative transition-colors duration-200 bg-transparent border-input text-foreground",
+    icon: "w-5 h-5 mr-2",
+    spinner: "w-5 h-5 mr-2 animate-spin",
+};
+export const socialLoginButtonsStyles = {
+    root: "w-full space-y-3",
+    divider: "relative",
+    dividerLine: "absolute inset-0 flex items-center",
+    dividerMask: "relative flex justify-center text-xs uppercase",
+    dividerLabel: "bg-background px-2 text-muted-foreground",
+    dividerRule: "w-full border-t",
+    list: "flex flex-wrap justify-center gap-2",
+};

package/dist/config/user-menu-dropdown.d.ts

@@ -0,0 +1,10 @@
+export declare const userMenuDropdownStyles: {
+    trigger: string;
+    avatar: string;
+    avatarFallback: string;
+    content: string;
+    label: string;
+    name: string;
+    email: string;
+    itemIcon: string;
+};

package/dist/config/user-menu-dropdown.js

@@ -0,0 +1,10 @@
+export const userMenuDropdownStyles = {
+    trigger: "h-auto p-1 rounded-full hover:bg-accent",
+    avatar: "size-8",
+    avatarFallback: "bg-primary text-primary-foreground text-sm font-medium",
+    content: "w-56",
+    label: "flex flex-col space-y-1",
+    name: "text-sm font-medium leading-none",
+    email: "text-xs text-muted-foreground leading-none",
+    itemIcon: "mr-2 size-4",
+};

package/dist/index.d.ts

@@ -10,7 +10,6 @@ export * from "./components/navigation";
 export * from "./components/session-card";
 export * from "./components/sidebar";
 export * from "./components/social-login-button";
-export * from "./components/social-login-buttons";
 export * from "./components/sparkline-chart";
 export * from "./components/user-menu-dropdown";
 export { isActivePath } from "./lib/active-path";

package/dist/index.js

@@ -13,7 +13,6 @@ export * from "./components/navigation/index.js";
 export * from "./components/session-card/index.js";
 export * from "./components/sidebar/index.js";
 export * from "./components/social-login-button/index.js";
-export * from "./components/social-login-buttons/index.js";
 export * from "./components/sparkline-chart/index.js";
 export * from "./components/user-menu-dropdown/index.js";
 export { isActivePath } from "./lib/active-path.js";

package/dist/styles/app.css

@@ -3,8 +3,6 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-		"Courier New", monospace;
     --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-orange-600: oklch(64.6% 0.222 41.116);
     --color-green-500: oklch(72.3% 0.219 149.579);
@@ -26,10 +24,8 @@
     --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-purple-500: oklch(62.7% 0.265 303.9);
     --color-purple-600: oklch(55.8% 0.288 302.321);
-    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-xs: 20rem;
     --container-sm: 40rem;
     --container-md: 48rem;
     --container-2xl: 96rem;
@@ -90,25 +86,11 @@
     --color-error: var(--error);
     --color-info: var(--info);
     --color-info-foreground: var(--info-foreground);
-    --color-border: var(--border);
-    @supports (color: color-mix(in lab, red, red)) {
-      --color-border: color-mix(
-		in oklab,
-		var(--border),
-		transparent calc((1 - var(--border-alpha, 1)) * 100%)
-	);
-    }
+    --color-border: var(--kala-mix-border);
     --color-border-strong: var(--border-strong);
     --color-input: var(--input);
     --color-ring: var(--ring);
-    --color-overlay: var(--overlay);
-    @supports (color: color-mix(in lab, red, red)) {
-      --color-overlay: color-mix(
-		in oklab,
-		var(--overlay),
-		transparent calc((1 - var(--overlay-alpha, 0.5)) * 100%)
-	);
-    }
+    --color-overlay: var(--kala-mix-overlay);
     --color-brand-google: #4285f4;
     --color-brand-facebook: #1877f2;
     --color-brand-twitter: #1da1f2;
@@ -118,6 +100,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .collapse {
     visibility: collapse;
   }
@@ -276,6 +261,9 @@
   .mb-1 {
     margin-bottom: var(--spacing);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -386,6 +374,9 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
@@ -476,9 +467,6 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
-  .w-96 {
-    width: calc(var(--spacing) * 96);
-  }
   .w-\[70px\] {
     width: 70px;
   }
@@ -494,6 +482,9 @@
   .w-\[440px\] {
     width: 440px;
   }
+  .w-auto {
+    width: auto;
+  }
   .w-full {
     width: 100%;
   }
@@ -518,9 +509,6 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
-  .max-w-xs {
-    max-width: var(--container-xs);
-  }
   .min-w-0 {
     min-width: 0px;
   }
@@ -533,6 +521,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -843,9 +834,6 @@
       background-color: color-mix(in oklab, var(--color-background) 80%, transparent);
     }
   }
-  .bg-black {
-    background-color: var(--color-black);
-  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
@@ -883,11 +871,7 @@
     background-color: var(--color-overlay);
   }
   .bg-overlay\/40 {
-    background-color: color-mix(in srgb, color-mix(
-		in oklab,
-		var(--overlay),
-		transparent calc((1 - var(--overlay-alpha, 0.5)) * 100%)
-	) 40%, transparent);
+    background-color: var(--color-overlay);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-overlay) 40%, transparent);
     }
@@ -923,10 +907,6 @@
     --tw-gradient-position: to bottom right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-blue-500 {
-    --tw-gradient-from: var(--color-blue-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-blue-600 {
     --tw-gradient-from: var(--color-blue-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -967,10 +947,6 @@
     --tw-gradient-from: var(--color-success);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .from-teal-500 {
-    --tw-gradient-from: var(--color-teal-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-teal-600 {
     --tw-gradient-from: var(--color-teal-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -983,10 +959,6 @@
     --tw-gradient-to: var(--color-blue-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-blue-600 {
-    --tw-gradient-to: var(--color-blue-600);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-destructive\/90 {
     --tw-gradient-to: var(--color-destructive);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1042,10 +1014,6 @@
     --tw-gradient-to: var(--color-teal-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-teal-600 {
-    --tw-gradient-to: var(--color-teal-600);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-warning\/90 {
     --tw-gradient-to: var(--color-warning);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1155,9 +1123,6 @@
   .text-right {
     text-align: right;
   }
-  .font-mono {
-    font-family: var(--font-mono);
-  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));