@brightweblabs/ui 0.4.0 → 1.0.0

package/src/components/empty-state.tsx

@@ -0,0 +1,26 @@
+import type { LucideIcon } from "lucide-react";
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "../lib/utils";
+
+export type EmptyStateProps = HTMLAttributes<HTMLDivElement> & {
+  icon: LucideIcon;
+  title: ReactNode;
+  hint?: ReactNode;
+  action?: ReactNode;
+};
+
+export function EmptyState({ icon: Icon, title, hint, action, className, ...props }: EmptyStateProps) {
+  return (
+    <div className={cn("flex flex-col items-center justify-center gap-3 px-6 py-14 text-center", className)} {...props}>
+      <div className="flex size-11 items-center justify-center rounded-lg border border-hairline bg-muted">
+        <Icon className="size-5 text-muted-foreground" aria-hidden="true" />
+      </div>
+      <div>
+        <p className="text-ui-body font-semibold">{title}</p>
+        {hint ? <p className="mt-1 text-ui-meta">{hint}</p> : null}
+      </div>
+      {action ? <div className="mt-1">{action}</div> : null}
+    </div>
+  );
+}

package/src/components/field.tsx

@@ -31,7 +31,7 @@ function FieldLegend({
       data-slot="field-legend"
       data-variant={variant}
       className={cn(
-        "mb-3 font-medium",
+        "mb-3 font-semibold",
         "data-[variant=legend]:text-base",
         "data-[variant=label]:text-sm",
         className
@@ -130,7 +130,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm leading-snug font-semibold group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}

package/src/components/initials-avatar.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps } from "react";
+
+import { getInitials } from "../lib/patterns";
+import { cn } from "../lib/utils";
+import { Avatar, AvatarFallback } from "./avatar";
+
+export type InitialsAvatarTone = "active" | "subtle";
+
+export type InitialsAvatarProps = Omit<ComponentProps<typeof Avatar>, "children"> & {
+  label?: string | null;
+  fallback?: string | null;
+  tone?: InitialsAvatarTone;
+};
+
+const toneClasses: Record<InitialsAvatarTone, string> = {
+  active: "bg-primary/15 text-primary",
+  subtle: "bg-muted text-muted-foreground",
+};
+
+export function InitialsAvatar({ label, fallback, tone = "active", className, ...props }: InitialsAvatarProps) {
+  return (
+    <Avatar className={cn("shrink-0", toneClasses[tone], className)} {...props}>
+      <AvatarFallback className="bg-transparent text-ui-meta font-bold uppercase text-current">
+        {getInitials(label, fallback)}
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
+export { getInitials } from "../lib/patterns";

package/src/components/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-foreground/30 selection:bg-primary selection:text-primary-foreground h-11 w-full min-w-0 rounded-xl border border-foreground/15 bg-foreground/5 px-3 py-1 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-input file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-foreground/30 selection:bg-primary selection:text-primary-foreground h-11 w-full min-w-0 rounded-xl border border-foreground/15 bg-foreground/5 px-3 py-1 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-input file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus:border-primary focus:ring-primary/40 focus:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,

package/src/components/kpi-breakdown-bar.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import type { CSSProperties } from "react";
+
+import { cn } from "../lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
+export type KpiBreakdownItem = {
+  label: string;
+  tone: string;
+  value: number;
+};
+
+export type KpiBreakdownBarProps = {
+  items: KpiBreakdownItem[];
+  toneTokens: Readonly<Record<string, string>>;
+  className?: string;
+};
+
+function tokenStyle(token: string): CSSProperties {
+  return { background: `var(${token})` };
+}
+
+export function KpiBreakdownBar({ items, toneTokens, className }: KpiBreakdownBarProps) {
+  const total = items.reduce((sum, item) => sum + Math.max(0, item.value), 0);
+
+  return (
+    <div className={cn("mt-5", className)}>
+      <TooltipProvider delayDuration={80}>
+        <div className="flex h-2 overflow-hidden rounded-full bg-elevate-3">
+          {total > 0 ? items.map((item) => {
+            const token = toneTokens[item.tone];
+            if (item.value <= 0 || !token) return null;
+
+            return (
+              <Tooltip key={`${item.tone}:${item.label}`}>
+                <TooltipTrigger asChild>
+                  <span
+                    className="h-full cursor-default transition-[filter] duration-150 first:rounded-l-full last:rounded-r-full hover:brightness-110"
+                    style={{ ...tokenStyle(token), width: `${(item.value / total) * 100}%` }}
+                  />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <span className="flex items-center gap-2">
+                    <span className="size-2 rounded-[2px]" style={tokenStyle(token)} />
+                    <span>{item.label}</span>
+                    <span className="font-bold tabular-nums">{item.value}</span>
+                  </span>
+                </TooltipContent>
+              </Tooltip>
+            );
+          }) : null}
+        </div>
+      </TooltipProvider>
+      <div className="mt-3.5 grid grid-cols-2 gap-x-6 gap-y-1.5">
+        {items.map((item) => {
+          const token = toneTokens[item.tone];
+          return (
+            <div key={`${item.tone}:${item.label}`} className="flex items-center justify-between gap-2 text-ui-meta">
+              <span className="flex min-w-0 items-center gap-2 text-muted-foreground">
+                <span className="size-1.5 shrink-0 rounded-[2px]" style={token ? tokenStyle(token) : undefined} />
+                <span className="truncate">{item.label}</span>
+              </span>
+              <span className="font-mono font-bold tabular-nums text-foreground">{item.value}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/label.tsx

@@ -13,7 +13,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-sm leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       )}
       {...props}

package/src/components/pagination.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import Link from "next/link";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
-import { VariantProps } from "class-variance-authority";
 
 import { cn } from "../lib/utils";
-import { buttonVariants } from "./button";
+import { buttonVariants, type ButtonVariantProps } from "./button-variants";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -32,7 +31,7 @@ function PaginationItem(props: React.ComponentProps<"li">) {
 
 type PaginationLinkProps = {
   isActive?: boolean;
-} & Pick<VariantProps<typeof buttonVariants>, "size"> &
+} & Pick<ButtonVariantProps, "size"> &
   React.ComponentProps<typeof Link>;
 
 function PaginationLink({

package/src/components/password-input.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import * as React from "react";
+import { Eye, EyeOff } from "lucide-react";
+
 import { cn } from "../lib/utils";
 import { Input } from "./input";
 
@@ -11,61 +13,26 @@ interface PasswordInputProps extends Omit<React.ComponentProps<"input">, "type">
 const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
   ({ className, disabled, showToggle = true, ...props }, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
-
     return (
       <div className="relative w-full">
-        <Input
-          type={showPassword ? "text" : "password"}
-          className={cn(showToggle && "pr-12", className)}
-          disabled={disabled}
-          ref={ref}
-          {...props}
-        />
-        {showToggle && (
+        <Input type={showPassword ? "text" : "password"} className={cn(showToggle && "pr-12", className)} disabled={disabled} ref={ref} {...props} />
+        {showToggle ? (
           <button
             type="button"
             onClick={() => setShowPassword((current) => !current)}
-            className="absolute right-2 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center text-foreground/40 transition-colors hover:text-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:pointer-events-none disabled:opacity-50"
+            className="absolute right-2 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded-[var(--radius)] text-foreground/40 transition-colors hover:text-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:pointer-events-none disabled:opacity-50"
             disabled={disabled}
-            aria-label={showPassword ? "Ocultar palavra-passe" : "Mostrar palavra-passe"}
-            tabIndex={-1}
+            aria-label={showPassword ? "Hide password" : "Show password"}
           >
-            {showPassword ? (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="w-4 h-4"
-              >
-                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
-                <line x1="1" y1="1" x2="23" y2="23" />
-              </svg>
-            ) : (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="w-4 h-4"
-              >
-                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                <circle cx="12" cy="12" r="3" />
-              </svg>
-            )}
+            {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
           </button>
-        )}
+        ) : null}
       </div>
     );
-  }
+  },
 );
 
 PasswordInput.displayName = "PasswordInput";
 
 export { PasswordInput };
+export type { PasswordInputProps };

package/src/components/password-strength.tsx

@@ -36,23 +36,23 @@ function getStrengthConfig(strength: StrengthLevel) {
     case "weak":
       return {
         label: "Fraca",
-        color: "bg-destructive",
+        color: "bg-rose-500",
         width: "w-1/3",
-        textColor: "text-destructive",
+        textColor: "text-rose-600 dark:text-rose-400",
       };
     case "medium":
       return {
         label: "Média",
-        color: "bg-accent",
+        color: "bg-amber-500",
         width: "w-2/3",
-        textColor: "text-accent",
+        textColor: "text-amber-600 dark:text-amber-400",
       };
     case "strong":
       return {
         label: "Forte",
-        color: "bg-secondary",
+        color: "bg-emerald-500",
         width: "w-full",
-        textColor: "text-secondary",
+        textColor: "text-emerald-600 dark:text-emerald-400",
       };
     default:
       return null;
@@ -67,8 +67,7 @@ export function PasswordStrength({ password, className }: PasswordStrengthProps)
 
   return (
     <div className={cn("flex flex-col gap-1.5", className)}>
-      {/* Strength bar */}
-      <div className="h-1 w-full bg-foreground/10 rounded-full overflow-hidden">
+      <div className="h-1 w-full overflow-hidden rounded-full bg-foreground/10">
         <div
           className={cn("h-full transition-all duration-300", config.color, config.width)}
           role="progressbar"
@@ -76,11 +75,11 @@ export function PasswordStrength({ password, className }: PasswordStrengthProps)
           aria-valuemin={0}
           aria-valuemax={100}
           aria-label="Força da palavra-passe"
+          aria-valuetext={config.label}
         />
       </div>
 
-      {/* Strength label */}
-      <p className={cn("paragraph-mini font-medium transition-colors", config.textColor)}>
+      <p className={cn("text-ui-meta !font-semibold transition-colors", config.textColor)}>
         Força: {config.label}
       </p>
     </div>

package/src/components/phone-input.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { defaultCountries, parseCountry, usePhoneInput } from "react-international-phone";
+import type { CountryIso2 } from "react-international-phone";
+
+import { cn } from "../lib/utils";
+
+interface PhoneInputProps {
+  value: string;
+  onChange: (e164: string) => void;
+  onBlur?: () => void;
+  defaultCountry?: CountryIso2;
+  disabled?: boolean;
+  className?: string;
+}
+
+const PREFERRED_COUNTRIES: CountryIso2[] = ["pt", "es", "gb", "fr", "de", "br", "us"];
+const allCountries = defaultCountries.map((country) => parseCountry(country));
+const preferredCountries = PREFERRED_COUNTRIES.map((iso) => allCountries.find((country) => country.iso2 === iso)).filter(Boolean);
+const remainingCountries = allCountries.filter((country) => !PREFERRED_COUNTRIES.includes(country.iso2));
+const orderedCountries = [...preferredCountries, ...remainingCountries] as ReturnType<typeof parseCountry>[];
+
+function flagEmoji(iso2: string) {
+  return iso2.toUpperCase().split("").map((character) => String.fromCodePoint(0x1f1e6 - 0x41 + character.charCodeAt(0))).join("");
+}
+
+export function PhoneInput({ value, onChange, onBlur, defaultCountry = "pt", disabled = false, className }: PhoneInputProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const { inputValue, handlePhoneValueChange, country, setCountry } = usePhoneInput({
+    defaultCountry,
+    value,
+    forceDialCode: true,
+    onChange: ({ phone }) => onChange(phone),
+    inputRef,
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (!dropdownRef.current?.contains(event.target as Node) && !triggerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+        setSearch("");
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
+  }, [open]);
+
+  const filteredCountries = search
+    ? orderedCountries.filter((candidate) => candidate.name.toLowerCase().includes(search.toLowerCase()) || `+${candidate.dialCode}`.includes(search))
+    : orderedCountries;
+
+  return (
+    <div className={cn("relative flex items-center", className)}>
+      <button
+        ref={triggerRef}
+        type="button"
+        disabled={disabled}
+        onClick={() => setOpen((current) => !current)}
+        className="flex h-7 items-center gap-1 border-0 bg-transparent pr-1.5 text-sm disabled:pointer-events-none disabled:opacity-100"
+        aria-expanded={open}
+        aria-label="Choose country code"
+      >
+        <span className="text-base leading-none">{flagEmoji(country.iso2)}</span>
+        <svg className="size-2.5 text-foreground/40" viewBox="0 0 10 6" fill="none" aria-hidden>
+          <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+
+      {open ? (
+        <div ref={dropdownRef} className="absolute left-0 top-full z-50 mt-1.5 w-56 rounded-[var(--radius-card)] border border-[color:var(--hairline-strong)] bg-popover text-popover-foreground shadow-[0_12px_28px_var(--elevate-3)]">
+          <div className="border-b border-[color:var(--hairline)] px-2.5 py-2">
+            <input autoFocus value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search…" className="w-full border-0 bg-transparent text-ui-meta text-foreground outline-none placeholder:text-foreground/40" />
+          </div>
+          <div className="max-h-48 overflow-y-auto rounded-b-[var(--radius-card)] p-1">
+            {filteredCountries.map((candidate) => (
+              <button
+                key={candidate.iso2}
+                type="button"
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => {
+                  setCountry(candidate.iso2);
+                  setOpen(false);
+                  setSearch("");
+                  inputRef.current?.focus();
+                }}
+                className={cn(
+                  "flex w-full items-center gap-2 rounded-[var(--radius)] px-2 py-1 text-left transition-colors hover:bg-[color:var(--elevate-2)]",
+                  country.iso2 === candidate.iso2 && "bg-[color:var(--elevate-3)] text-[color:var(--brand-accent)]",
+                )}
+              >
+                <span className="text-sm leading-none">{flagEmoji(candidate.iso2)}</span>
+                <span className="flex-1 truncate text-ui-label normal-case tracking-normal text-foreground">{candidate.name}</span>
+                <span className="shrink-0 text-ui-micro text-foreground/40">+{candidate.dialCode}</span>
+              </button>
+            ))}
+            {filteredCountries.length === 0 ? <p className="px-2 py-2 text-ui-meta text-foreground/45">No results</p> : null}
+          </div>
+        </div>
+      ) : null}
+
+      <span className="h-4 w-px shrink-0 bg-foreground/15" />
+      <input ref={inputRef} value={inputValue} onChange={handlePhoneValueChange} onBlur={onBlur} disabled={disabled} placeholder="912 345 678" type="tel" className="h-7 flex-1 border-0 bg-transparent pl-2 text-sm text-foreground outline-none placeholder:text-foreground/35 disabled:pointer-events-none disabled:opacity-100" />
+    </div>
+  );
+}
+
+export type { PhoneInputProps };

package/src/components/popover.tsx

@@ -59,7 +59,7 @@ function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
   return (
     <div
       data-slot="popover-title"
-      className={cn("font-medium", className)}
+      className={cn("font-semibold", className)}
       {...props}
     />
   )

package/src/components/role-badge.tsx

@@ -0,0 +1,34 @@
+import type { ComponentProps } from "react";
+
+import { getRoleLabel, resolveRoleToken } from "../lib/patterns";
+import { StatusPill } from "./status-pill";
+
+export const DEFAULT_ROLE_TOKEN_MAP = {
+  admin: "--role-admin",
+  client: "--role-client",
+  manager: "--role-manager",
+  team: "--role-team",
+} as const;
+
+export type RoleBadgeProps = Omit<ComponentProps<typeof StatusPill>, "children" | "token"> & {
+  role: string;
+  label?: string;
+  tokenMap?: Readonly<Record<string, string>>;
+  fallbackToken?: string;
+};
+
+export function RoleBadge({
+  role,
+  label,
+  tokenMap = DEFAULT_ROLE_TOKEN_MAP,
+  fallbackToken = "--semantic-neutral",
+  ...props
+}: RoleBadgeProps) {
+  return (
+    <StatusPill token={resolveRoleToken(role, tokenMap, fallbackToken)} {...props}>
+      {label ?? getRoleLabel(role)}
+    </StatusPill>
+  );
+}
+
+export { getRoleLabel, resolveRoleToken } from "../lib/patterns";

package/src/components/search-field.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Search, X } from "lucide-react";
+
+import { cn } from "../lib/utils";
+import { Input } from "./input";
+
+type SearchFieldProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  onClear?: () => void;
+  size?: "sm" | "md";
+  className?: string;
+  inputClassName?: string;
+  autoFocus?: boolean;
+  "aria-label"?: string;
+};
+
+export function SearchField({
+  value,
+  onChange,
+  placeholder = "Search…",
+  onClear,
+  size = "md",
+  className,
+  inputClassName,
+  autoFocus,
+  "aria-label": ariaLabel,
+}: SearchFieldProps) {
+  const showClear = Boolean(onClear) && value.length > 0;
+
+  return (
+    <div className={cn("relative min-w-0 flex-1", className)}>
+      <Search className="pointer-events-none absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" aria-hidden />
+      <Input
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        aria-label={ariaLabel ?? placeholder}
+        className={cn(
+          size === "sm" ? "h-8" : "h-9",
+          "rounded-[var(--radius-card)] border-border bg-card pl-8 text-ui-meta text-foreground",
+          showClear ? "pr-8" : null,
+          inputClassName,
+        )}
+      />
+      {showClear ? (
+        <button
+          type="button"
+          onClick={onClear}
+          aria-label="Clear"
+          className="absolute right-2 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          <X className="size-3.5" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export type { SearchFieldProps };

package/src/components/section-heading.tsx

@@ -0,0 +1,28 @@
+import type { LucideIcon } from "lucide-react";
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "../lib/utils";
+
+export type SectionHeadingProps = HTMLAttributes<HTMLDivElement> & {
+  icon: LucideIcon;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  action?: ReactNode;
+};
+
+export function SectionHeading({ icon: Icon, title, subtitle, action, className, ...props }: SectionHeadingProps) {
+  return (
+    <div className={cn("flex flex-wrap items-end justify-between gap-3", className)} {...props}>
+      <div className="flex min-w-0 items-start gap-3">
+        <span className="section-icon mt-0.5" aria-hidden="true">
+          <Icon className="size-3.5" />
+        </span>
+        <div className="min-w-0">
+          <h2 className="text-ui-panel-title">{title}</h2>
+          {subtitle ? <p className="mt-1 text-ui-body text-muted-foreground">{subtitle}</p> : null}
+        </div>
+      </div>
+      {action ? <div className="shrink-0">{action}</div> : null}
+    </div>
+  );
+}

package/src/components/sheet.tsx

@@ -6,8 +6,37 @@ import { XIcon } from "lucide-react"
 
 import { cn } from "../lib/utils"
 
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+function hasOpenModalContent() {
+  return Boolean(
+    document.querySelector(
+      ['[data-slot="sheet-content"][data-state="open"]', '[data-slot="alert-dialog-content"][data-state="open"]'].join(", ")
+    )
+  )
+}
+
+function releaseStaleBodyPointerLock() {
+  window.setTimeout(() => {
+    if (hasOpenModalContent()) return
+    if (document.body.style.pointerEvents === "none") {
+      document.body.style.pointerEvents = ""
+    }
+  }, 350)
+}
+
+function Sheet({ onOpenChange, ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  const handleOpenChange = React.useCallback(
+    (open: boolean) => {
+      onOpenChange?.(open)
+      if (!open) releaseStaleBodyPointerLock()
+    },
+    [onOpenChange]
+  )
+
+  React.useEffect(() => {
+    if (props.open === false) releaseStaleBodyPointerLock()
+  }, [props.open])
+
+  return <SheetPrimitive.Root data-slot="sheet" onOpenChange={handleOpenChange} {...props} />
 }
 
 function SheetTrigger({
@@ -36,7 +65,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[color:color-mix(in_srgb,var(--foreground)_50%,transparent)]",
         className
       )}
       {...props}
@@ -62,9 +91,9 @@ function SheetContent({
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-[24rem]",
           side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-[24rem]",
           side === "top" &&
             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&

package/src/components/skeleton-table.tsx

@@ -0,0 +1,27 @@
+import { Skeleton } from "./skeleton";
+import { TableCell, TableRow } from "./table";
+
+export function TableRowsSkeleton({ rows = 6, columns }: {
+  rows?: number;
+  columns: ("text" | "chip" | "action")[];
+}) {
+  return (
+    <>
+      {Array.from({ length: rows }, (_, rowIndex) => (
+        <TableRow key={rowIndex}>
+          {columns.map((kind, columnIndex) => (
+            <TableCell key={columnIndex}>
+              {kind === "chip" ? (
+                <Skeleton rounded="999px" className="h-5 w-14" />
+              ) : kind === "action" ? (
+                <Skeleton rounded="var(--radius)" className="ml-auto size-7" />
+              ) : (
+                <Skeleton rounded="999px" className="h-[0.6rem] w-[72%]" />
+              )}
+            </TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </>
+  );
+}