Build SaaS interfaces fasterTry the composition. Inspect the code. Copy what you need.

"use client";import * as React from "react";import {  Button,  Sheet,  SheetContent,  SheetDescription,  SheetHeader,  SheetTitle,  SheetTrigger,  cn,} from "@pycolors/ui";export type ResponsiveSidebarNavItem = Readonly<{  id: string;  label: string;  href: string;  icon?: React.ReactNode;  badge?: React.ReactNode;}>;export type ResponsiveSidebarNavGroup = Readonly<{  id: string;  label: string;  items: readonly ResponsiveSidebarNavItem[];}>;export type ResponsiveSidebarRenderLinkProps = Readonly<{  item: ResponsiveSidebarNavItem;  active: boolean;  className: string;  children: React.ReactNode;  onNavigate: () => void;}>;export type ResponsiveSidebarProps = Readonly<{  brand: React.ReactNode;  navigationLabel: string;  mobileTitle: string;  mobileDescription?: string;  mobileTriggerLabel?: string;  items: readonly ResponsiveSidebarNavItem[];  groups?: readonly ResponsiveSidebarNavGroup[];  activeItemId?: string;  renderLink?: (props: ResponsiveSidebarRenderLinkProps) => React.ReactNode;  sidebarFooter?: React.ReactNode;  headerTitle?: React.ReactNode;  headerActions?: React.ReactNode;  contentId?: string;  skipToContentLabel?: string;  className?: string;  children: React.ReactNode;}>;interface NavigationItemsProps {  activeItemId?: string;  items: readonly ResponsiveSidebarNavItem[];  onNavigate: () => void;  renderLink?: ResponsiveSidebarProps["renderLink"];}interface SidebarContentsProps extends NavigationItemsProps {  brand: React.ReactNode;  groups: readonly ResponsiveSidebarNavGroup[];  navigationLabel: string;  sidebarFooter?: React.ReactNode;}const linkClassName = cn(  "flex min-h-10 w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium",  "text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",  "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",  "focus-visible:ring-offset-background",  "aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground",);function NavigationItems({  activeItemId,  items,  onNavigate,  renderLink,}: NavigationItemsProps) {  return (    <ul className="space-y-1" role="list">      {items.map((item) => {        const active = item.id === activeItemId;        const children = (          <>            {item.icon ? (              <span                aria-hidden="true"                className="flex size-4 shrink-0 items-center justify-center"                data-slot="responsive-sidebar-item-icon"              >                {item.icon}              </span>            ) : null}            <span className="min-w-0 flex-1 truncate">{item.label}</span>            {item.badge ? (              <span                className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground"                data-slot="responsive-sidebar-item-badge"              >                {item.badge}              </span>            ) : null}          </>        );        return (          <li key={item.id}>            {renderLink ? (              renderLink({                item,                active,                className: linkClassName,                children,                onNavigate,              })            ) : (              <a                aria-current={active ? "page" : undefined}                className={linkClassName}                data-slot="responsive-sidebar-link"                href={item.href}                onClick={onNavigate}              >                {children}              </a>            )}          </li>        );      })}    </ul>  );}function SidebarContents({  activeItemId,  brand,  groups,  items,  navigationLabel,  onNavigate,  renderLink,  sidebarFooter,}: SidebarContentsProps) {  const groupLabelPrefix = React.useId();  return (    <div      className="flex min-h-0 flex-1 flex-col"      data-slot="responsive-sidebar-contents"    >      <div        className="flex min-h-16 shrink-0 items-center border-b border-border px-4"        data-slot="responsive-sidebar-brand"      >        {brand}      </div>      <nav        aria-label={navigationLabel}        className="min-h-0 flex-1 space-y-5 overflow-y-auto px-3 py-4"        data-slot="responsive-sidebar-navigation"      >        {items.length > 0 ? (          <NavigationItems            activeItemId={activeItemId}            items={items}            onNavigate={onNavigate}            renderLink={renderLink}          />        ) : null}        {groups.map((group, index) => {          const labelId = `${groupLabelPrefix}-${index}`;          return (            <div              aria-labelledby={labelId}              data-slot="responsive-sidebar-group"              key={group.id}              role="group"            >              <p                className="mb-2 px-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground"                id={labelId}              >                {group.label}              </p>              <NavigationItems                activeItemId={activeItemId}                items={group.items}                onNavigate={onNavigate}                renderLink={renderLink}              />            </div>          );        })}      </nav>      {sidebarFooter ? (        <div          className="shrink-0 border-t border-border p-4"          data-slot="responsive-sidebar-footer"        >          {sidebarFooter}        </div>      ) : null}    </div>  );}function MenuIcon() {  return (    <svg      aria-hidden="true"      className="size-4"      fill="none"      focusable="false"      viewBox="0 0 24 24"    >      <path        d="M4 7h16M4 12h16M4 17h16"        stroke="currentColor"        strokeLinecap="round"        strokeWidth="2"      />    </svg>  );}/** * A source-copy application shell with persistent desktop navigation and an * accessible mobile Sheet. All product content and routing stay consumer-owned. */export function ResponsiveSidebar({  activeItemId,  brand,  children,  className,  contentId = "main-content",  groups = [],  headerActions,  headerTitle,  items,  mobileDescription = "Navigate the application.",  mobileTitle,  mobileTriggerLabel = "Open navigation",  navigationLabel,  renderLink,  sidebarFooter,  skipToContentLabel = "Skip to content",}: ResponsiveSidebarProps) {  const [mobileOpen, setMobileOpen] = React.useState(false);  const closeMobileNavigation = () => setMobileOpen(false);  return (    <div      className={cn("flex min-h-dvh bg-background text-foreground", className)}      data-slot="responsive-sidebar"    >      <a        className={cn(          "sr-only z-[60] rounded-md bg-background px-3 py-2 text-sm font-medium text-foreground",          "focus:not-sr-only focus:fixed focus:left-3 focus:top-3",          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",        )}        data-slot="responsive-sidebar-skip-link"        href={`#${contentId}`}      >        {skipToContentLabel}      </a>      <aside        className="sticky top-0 hidden h-dvh w-64 shrink-0 border-r border-border bg-card md:flex"        data-slot="responsive-sidebar-desktop"      >        <SidebarContents          activeItemId={activeItemId}          brand={brand}          groups={groups}          items={items}          navigationLabel={navigationLabel}          onNavigate={() => undefined}          renderLink={renderLink}          sidebarFooter={sidebarFooter}        />      </aside>      <div className="flex min-w-0 flex-1 flex-col">        <header          className="flex min-h-16 shrink-0 items-center gap-3 border-b border-border bg-background px-4 md:px-6"          data-slot="responsive-sidebar-header"        >          <Sheet onOpenChange={setMobileOpen} open={mobileOpen}>            <SheetTrigger asChild>              <Button                aria-label={mobileTriggerLabel}                className="md:hidden"                data-slot="responsive-sidebar-mobile-trigger"                size="icon"                type="button"                variant="outline"              >                <MenuIcon />              </Button>            </SheetTrigger>            <SheetContent              className="flex w-[min(20rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] flex-col gap-0 p-0"              data-slot="responsive-sidebar-mobile"              side="left"            >              <SheetHeader className="shrink-0 border-b border-border px-6 py-5 pr-12">                <SheetTitle>{mobileTitle}</SheetTitle>                <SheetDescription>{mobileDescription}</SheetDescription>              </SheetHeader>              <SidebarContents                activeItemId={activeItemId}                brand={brand}                groups={groups}                items={items}                navigationLabel={navigationLabel}                onNavigate={closeMobileNavigation}                renderLink={renderLink}                sidebarFooter={sidebarFooter}              />            </SheetContent>          </Sheet>          <div className="min-w-0 flex-1" data-slot="responsive-sidebar-title">            {headerTitle}          </div>          {headerActions ? (            <div              className="flex shrink-0 items-center gap-2"              data-slot="responsive-sidebar-actions"            >              {headerActions}            </div>          ) : null}        </header>        <main          className="min-w-0 flex-1 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"          data-slot="responsive-sidebar-main"          id={contentId}          tabIndex={-1}        >          {children}        </main>      </div>    </div>  );}

import * as React from "react";export type SignInPanelProps = Readonly<{  title?: React.ReactNode;  description?: React.ReactNode;  form: React.ReactNode;  providers?: React.ReactNode;  error?: React.ReactNode;  footer?: React.ReactNode;  className?: string;}>;/** * Presentation-only sign-in surface. Authentication state and actions remain * entirely owned by the consuming application. */export function SignInPanel({  title = "Sign in",  description,  form,  providers,  error,  footer,  className,}: SignInPanelProps) {  const sectionClassName = ["mx-auto w-full max-w-md", className]    .filter(Boolean)    .join(" ");  return (    <section className={sectionClassName}>      <div className="space-y-6 rounded-xl border bg-card p-5 text-card-foreground shadow-sm sm:p-6">        <header className="space-y-2">          <h2 className="text-xl font-semibold">{title}</h2>          {description ? (            <div className="text-sm text-muted-foreground">{description}</div>          ) : null}        </header>        {error ? (          <div role="alert" className="text-sm text-destructive">            {error}          </div>        ) : null}        <div>{form}</div>        {providers ? (          <div className="space-y-3" aria-label="Other sign-in options">            {providers}          </div>        ) : null}        {footer ? (          <footer className="text-sm text-muted-foreground">{footer}</footer>        ) : null}      </div>    </section>  );}

import * as React from "react";export type SignUpPanelProps = Readonly<{  title?: React.ReactNode;  description?: React.ReactNode;  form: React.ReactNode;  providers?: React.ReactNode;  error?: React.ReactNode;  consent?: React.ReactNode;  footer?: React.ReactNode;  className?: string;}>;/** * Presentation-only sign-up surface. Account creation, validation and * authentication behavior remain entirely owned by the consuming application. */export function SignUpPanel({  title = "Create your account",  description,  form,  providers,  error,  consent,  footer,  className,}: SignUpPanelProps) {  const sectionClassName = ["mx-auto w-full max-w-md", className]    .filter(Boolean)    .join(" ");  return (    <section className={sectionClassName}>      <div className="space-y-6 rounded-xl border bg-card p-5 text-card-foreground shadow-sm sm:p-6">        <header className="space-y-2">          <h2 className="text-xl font-semibold">{title}</h2>          {description ? (            <div className="text-sm text-muted-foreground">{description}</div>          ) : null}        </header>        {error ? (          <div role="alert" className="text-sm text-destructive">            {error}          </div>        ) : null}        <div>{form}</div>        {providers ? (          <div className="space-y-3" aria-label="Other sign-up options">            {providers}          </div>        ) : null}        {consent ? (          <div className="text-xs text-muted-foreground">{consent}</div>        ) : null}        {footer ? (          <footer className="text-sm text-muted-foreground">{footer}</footer>        ) : null}      </div>    </section>  );}

import * as React from "react";export type PasswordRecoveryPanelProps = Readonly<{  title?: React.ReactNode;  description?: React.ReactNode;  form: React.ReactNode;  error?: React.ReactNode;  status?: React.ReactNode;  help?: React.ReactNode;  footer?: React.ReactNode;  className?: string;}>;/** * Presentation-only password recovery surface. Recovery state, validation, * token issuance, email delivery and navigation remain consumer-owned. */export function PasswordRecoveryPanel({  title = "Recover your account",  description,  form,  error,  status,  help,  footer,  className,}: PasswordRecoveryPanelProps) {  const sectionClassName = ["mx-auto w-full max-w-md", className]    .filter(Boolean)    .join(" ");  return (    <section className={sectionClassName}>      <div className="space-y-6 rounded-xl border bg-card p-5 text-card-foreground shadow-sm sm:p-6">        <header className="space-y-2">          <h2 className="text-xl font-semibold">{title}</h2>          {description ? (            <div className="text-sm text-muted-foreground">{description}</div>          ) : null}        </header>        {error ? (          <div role="alert" className="text-sm text-destructive">            {error}          </div>        ) : null}        {status ? (          <div role="status" className="text-sm text-muted-foreground">            {status}          </div>        ) : null}        <div>{form}</div>        {help ? (          <div className="text-sm text-muted-foreground">{help}</div>        ) : null}        {footer ? (          <footer className="text-sm text-muted-foreground">{footer}</footer>        ) : null}      </div>    </section>  );}

"use client";import * as React from "react";import {  Badge,  Card,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,  cn,} from "@pycolors/ui";export type PricingPlanFeature = Readonly<{  id: string;  label: string;}>;export type PricingPlan = Readonly<{  id: string;  name: string;  description: string;  price: string;  priceSuffix?: string;  billingNote?: string;  highlight?: string;  features: readonly PricingPlanFeature[];  action: React.ReactNode;  footnote?: string;}>;export type PricingPeriodOption = Readonly<{  value: string;  label: string;  disabled?: boolean;}>;export type PricingPeriodControl = Readonly<{  label: string;  value: string;  options: readonly PricingPeriodOption[];  onValueChange: (value: string) => void;  disabled?: boolean;}>;export type PricingPlansProps = Readonly<{  title: string;  description?: string;  plans: readonly PricingPlan[];  period?: PricingPeriodControl;  emptyMessage?: string;  className?: string;}>;/** Present consumer-owned offers without price calculations or purchases. */export function PricingPlans({  title,  description,  plans,  period,  emptyMessage = "No plans are available.",  className,}: PricingPlansProps) {  const id = React.useId();  const titleId = `${id}-title`;  const descriptionId = `${id}-description`;  const periodId = `${id}-period`;  const selectedPeriod = period?.options.find(    (option) => option.value === period.value,  );  return (    <section      aria-describedby={description ? descriptionId : undefined}      aria-labelledby={titleId}      className={cn("min-w-0 space-y-6", className)}      data-slot="pricing-plans"    >      <div className="space-y-2">        <h2 className="break-words text-2xl font-semibold" id={titleId}>          {title}        </h2>        {description ? (          <p className="text-muted-foreground" id={descriptionId}>            {description}          </p>        ) : null}      </div>      {plans.length === 0 ? (        <p className="text-muted-foreground" data-slot="pricing-plans-empty">          {emptyMessage}        </p>      ) : (        <>          {period && period.options.length > 0 ? (            <div className="flex min-w-0 flex-wrap items-center gap-3">              <label className="text-sm font-medium" htmlFor={periodId}>                {period.label}              </label>              <select                className={cn(                  "min-h-11 min-w-0 max-w-full rounded-md border",                  "border-input bg-background px-3 py-2 text-sm",                  "focus-visible:outline-none focus-visible:ring-2",                  "focus-visible:ring-ring disabled:opacity-50",                )}                disabled={period.disabled}                id={periodId}                onChange={(event) => {                  const next = period.options.find(                    (option) => option.value === event.currentTarget.value,                  );                  if (                    next &&                    !next.disabled &&                    !period.disabled &&                    next.value !== period.value                  ) {                    period.onValueChange(next.value);                  }                }}                value={selectedPeriod ? period.value : ""}              >                {!selectedPeriod ? (                  <option disabled value="">                    {period.label}                  </option>                ) : null}                {period.options.map((option) => (                  <option                    disabled={option.disabled}                    key={option.value}                    value={option.value}                  >                    {option.label}                  </option>                ))}              </select>            </div>          ) : null}          <ul            className="m-0 grid list-none gap-4 p-0 sm:grid-cols-2 xl:grid-cols-3"            data-slot="pricing-plans-list"            role="list"          >            {plans.map((plan) => {              const planTitleId = `${id}-plan-${encodeURIComponent(plan.id)}`;              return (                <li className="min-w-0" key={plan.id}>                  <Card                    asChild                    className={cn(                      "flex h-full min-w-0 flex-col break-words",                      plan.highlight && "border-primary ring-1 ring-primary",                    )}                  >                    <article                      aria-labelledby={planTitleId}                      data-highlighted={plan.highlight ? "true" : undefined}                      data-slot="pricing-plan"                    >                      <CardHeader>                        <div className="flex flex-wrap items-center gap-2">                          <CardTitle id={planTitleId}>{plan.name}</CardTitle>                          {plan.highlight ? (                            <Badge variant="outline">{plan.highlight}</Badge>                          ) : null}                        </div>                        <CardDescription>{plan.description}</CardDescription>                        <p className="pt-3">                          <span className="text-3xl font-semibold">                            {plan.price}                          </span>{" "}                          {plan.priceSuffix ? (                            <span className="text-sm text-muted-foreground">                              {plan.priceSuffix}                            </span>                          ) : null}                        </p>                        {plan.billingNote ? (                          <p className="text-sm text-muted-foreground">                            {plan.billingNote}                          </p>                        ) : null}                      </CardHeader>                      <CardContent className="flex-1">                        {plan.features.length > 0 ? (                          <ul className="list-disc space-y-2 pl-5 text-sm">                            {plan.features.map((feature) => (                              <li key={feature.id}>{feature.label}</li>                            ))}                          </ul>                        ) : null}                      </CardContent>                      <CardFooter className="flex-col items-stretch gap-3">                        {plan.action}                        {plan.footnote ? (                          <p className="text-sm text-muted-foreground">                            {plan.footnote}                          </p>                        ) : null}                      </CardFooter>                    </article>                  </Card>                </li>              );            })}          </ul>        </>      )}    </section>  );}

import * as React from "react";export type BillingOverviewPanelProps = Readonly<{  title: React.ReactNode;  description?: React.ReactNode;  planLabel: React.ReactNode;  planValue: React.ReactNode;  billingLabel?: React.ReactNode;  billingValue?: React.ReactNode;  statusLabel?: React.ReactNode;  statusValue?: React.ReactNode;  renewalLabel?: React.ReactNode;  renewalValue?: React.ReactNode;  paymentLabel?: React.ReactNode;  paymentValue?: React.ReactNode;  primaryAction?: React.ReactNode;  secondaryAction?: React.ReactNode;  className?: string;}>;/** * Presentation-only billing summary. Billing truth and every action remain * entirely owned by the consuming application. */export function BillingOverviewPanel({  title,  description,  planLabel,  planValue,  billingLabel,  billingValue,  statusLabel,  statusValue,  renewalLabel,  renewalValue,  paymentLabel,  paymentValue,  primaryAction,  secondaryAction,  className,}: BillingOverviewPanelProps) {  const id = React.useId();  const titleId = `${id}-title`;  const descriptionId = `${id}-description`;  const rootClassName = [    "min-w-0 space-y-6 rounded-xl border border-border bg-card p-5 text-card-foreground sm:p-6",    className,  ]    .filter(Boolean)    .join(" ");  const details = [    { label: planLabel, value: planValue },    billingLabel && billingValue      ? { label: billingLabel, value: billingValue }      : null,    statusLabel && statusValue      ? { label: statusLabel, value: statusValue }      : null,    renewalLabel && renewalValue      ? { label: renewalLabel, value: renewalValue }      : null,    paymentLabel && paymentValue      ? { label: paymentLabel, value: paymentValue }      : null,  ].filter(    (      detail,    ): detail is Readonly<{      label: React.ReactNode;      value: React.ReactNode;    }> => detail !== null,  );  return (    <section      aria-describedby={description ? descriptionId : undefined}      aria-labelledby={titleId}      className={rootClassName}      data-slot="billing-overview-panel"    >      <header className="min-w-0 space-y-2">        <h2 className="break-words text-xl font-semibold" id={titleId}>          {title}        </h2>        {description ? (          <div            className="break-words text-sm text-muted-foreground"            id={descriptionId}          >            {description}          </div>        ) : null}      </header>      <dl className="grid min-w-0 gap-4 sm:grid-cols-2">        {details.map((detail, index) => (          <div            className="min-w-0 rounded-lg border border-border bg-background p-4"            key={index}          >            <dt className="text-sm font-medium text-muted-foreground">              {detail.label}            </dt>            <dd className="mt-1 break-words text-sm font-medium">              {detail.value}            </dd>          </div>        ))}      </dl>      {primaryAction || secondaryAction ? (        <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:flex-wrap">          {primaryAction}          {secondaryAction}        </div>      ) : null}    </section>  );}

import * as React from "react";export type PaymentMethodPanelProps = Readonly<{  title: React.ReactNode;  description?: React.ReactNode;  methodLabel: React.ReactNode;  methodValue: React.ReactNode;  expiryLabel?: React.ReactNode;  expiryValue?: React.ReactNode;  contactLabel?: React.ReactNode;  contactValue?: React.ReactNode;  status?: React.ReactNode;  primaryAction?: React.ReactNode;  secondaryAction?: React.ReactNode;  className?: string;}>;/** * Presentation-only payment-method surface. Billing truth and every action * remain entirely owned by the consuming application. */export function PaymentMethodPanel({  title,  description,  methodLabel,  methodValue,  expiryLabel,  expiryValue,  contactLabel,  contactValue,  status,  primaryAction,  secondaryAction,  className,}: PaymentMethodPanelProps) {  const id = React.useId();  const titleId = `${id}-title`;  const descriptionId = `${id}-description`;  const rootClassName = [    "min-w-0 space-y-6 rounded-xl border border-border bg-card p-5 text-card-foreground sm:p-6",    className,  ]    .filter(Boolean)    .join(" ");  const details = [    { label: methodLabel, value: methodValue },    expiryLabel && expiryValue      ? { label: expiryLabel, value: expiryValue }      : null,    contactLabel && contactValue      ? { label: contactLabel, value: contactValue }      : null,  ].filter(    (      detail,    ): detail is Readonly<{      label: React.ReactNode;      value: React.ReactNode;    }> => detail !== null,  );  return (    <section      aria-describedby={description ? descriptionId : undefined}      aria-labelledby={titleId}      className={rootClassName}      data-slot="payment-method-panel"    >      <header className="min-w-0 space-y-2">        <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">          <div className="min-w-0 space-y-2">            <h2 className="break-words text-xl font-semibold" id={titleId}>              {title}            </h2>            {description ? (              <div                className="break-words text-sm text-muted-foreground"                id={descriptionId}              >                {description}              </div>            ) : null}          </div>          {status ? <div className="shrink-0">{status}</div> : null}        </div>      </header>      <dl className="grid min-w-0 gap-4 sm:grid-cols-2">        {details.map((detail, index) => (          <div            className="min-w-0 rounded-lg border border-border bg-background p-4"            key={index}          >            <dt className="text-sm font-medium text-muted-foreground">              {detail.label}            </dt>            <dd className="mt-1 break-words text-sm font-medium">              {detail.value}            </dd>          </div>        ))}      </dl>      {primaryAction || secondaryAction ? (        <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:flex-wrap">          {primaryAction}          {secondaryAction}        </div>      ) : null}    </section>  );}

import * as React from "react";export type InvoiceHistoryItem = Readonly<{  id: string;  date: React.ReactNode;  amount: React.ReactNode;  status?: React.ReactNode;  action?: React.ReactNode;}>;export type InvoiceHistoryPanelProps = Readonly<{  title: React.ReactNode;  description?: React.ReactNode;  invoices: readonly InvoiceHistoryItem[];  dateLabel?: React.ReactNode;  amountLabel?: React.ReactNode;  statusLabel?: React.ReactNode;  actionLabel?: React.ReactNode;  emptyState?: React.ReactNode;  className?: string;}>;/** * Presentation-only invoice history surface. Invoice data, retrieval and every * action remain entirely owned by the consuming application. */export function InvoiceHistoryPanel({  title,  description,  invoices,  dateLabel = "Date",  amountLabel = "Amount",  statusLabel = "Status",  actionLabel = "Action",  emptyState = "No invoices yet.",  className,}: InvoiceHistoryPanelProps) {  const id = React.useId();  const titleId = `${id}-title`;  const descriptionId = `${id}-description`;  const rootClassName = [    "min-w-0 space-y-5 rounded-xl border border-border bg-card p-5 text-card-foreground sm:p-6",    className,  ]    .filter(Boolean)    .join(" ");  return (    <section      aria-describedby={description ? descriptionId : undefined}      aria-labelledby={titleId}      className={rootClassName}      data-slot="invoice-history-panel"    >      <header className="min-w-0 space-y-2">        <h2 className="break-words text-xl font-semibold" id={titleId}>          {title}        </h2>        {description ? (          <div            className="break-words text-sm text-muted-foreground"            id={descriptionId}          >            {description}          </div>        ) : null}      </header>      {invoices.length === 0 ? (        <div          className="rounded-lg border border-dashed border-border bg-background p-5 text-sm text-muted-foreground"          data-slot="invoice-history-empty"        >          {emptyState}        </div>      ) : (        <div className="min-w-0 overflow-x-auto rounded-lg border border-border">          <table className="w-full min-w-[36rem] border-collapse text-left text-sm">            <thead className="bg-muted/50 text-muted-foreground">              <tr>                <th className="px-4 py-3 font-medium" scope="col">                  {dateLabel}                </th>                <th className="px-4 py-3 font-medium" scope="col">                  {amountLabel}                </th>                <th className="px-4 py-3 font-medium" scope="col">                  {statusLabel}                </th>                <th className="px-4 py-3 text-right font-medium" scope="col">                  {actionLabel}                </th>              </tr>            </thead>            <tbody className="divide-y divide-border">              {invoices.map((invoice) => (                <tr className="bg-background align-middle" key={invoice.id}>                  <td className="max-w-48 break-words px-4 py-3">                    {invoice.date}                  </td>                  <td className="max-w-48 break-words px-4 py-3 font-medium">                    {invoice.amount}                  </td>                  <td className="max-w-48 break-words px-4 py-3">                    {invoice.status ?? "—"}                  </td>                  <td className="px-4 py-3 text-right">                    {invoice.action ? (                      <div className="inline-flex min-w-0 justify-end">                        {invoice.action}                      </div>                    ) : (                      <span aria-hidden="true">—</span>                    )}                  </td>                </tr>              ))}            </tbody>          </table>        </div>      )}    </section>  );}

"use client";import * as React from "react";import {  Alert,  AlertDescription,  AlertTitle,  Button,  Card,  CardContent,  CardDescription,  CardHeader,  CardTitle,  Input,  Textarea,  cn,} from "@pycolors/ui";type SettingsPanelFieldBase = Readonly<{  id: string;  name: string;  label: string;  value: string;  onValueChange: (value: string) => void;  description?: string;  error?: string;  placeholder?: string;  autoComplete?: string;  required?: boolean;  disabled?: boolean;}>;export type SettingsPanelField =  | (SettingsPanelFieldBase &      Readonly<{        kind?: "input";        type?: "text" | "email" | "url" | "tel";      }>)  | (SettingsPanelFieldBase &      Readonly<{        kind: "textarea";        rows?: number;      }>);export type SettingsPanelSection = Readonly<{  id: string;  title: string;  description?: string;  fields: readonly SettingsPanelField[];}>;export type SettingsPanelFeedback = Readonly<{  status: "success" | "error";  title: string;  description?: string;}>;export type SettingsPanelProps = Readonly<{  title: string;  description?: string;  sections: readonly SettingsPanelSection[];  submitLabel: string;  submitting?: boolean;  submittingLabel?: string;  submitDisabled?: boolean;  feedback?: SettingsPanelFeedback;  onSubmit: React.FormEventHandler<HTMLFormElement>;  className?: string;}>;type SettingsFieldControlProps = Readonly<{  controlId: string;  field: SettingsPanelField;  submitting: boolean;}>;function SettingsFieldControl({  controlId,  field,  submitting,}: SettingsFieldControlProps) {  const sharedProps = {    autoComplete: field.autoComplete,    disabled: submitting || field.disabled,    error: field.error,    helperText: field.description,    id: controlId,    label: field.label,    name: field.name,    onChange: (      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,    ) => field.onValueChange(event.currentTarget.value),    placeholder: field.placeholder,    required: field.required,    value: field.value,  };  if (field.kind === "textarea") {    return <Textarea {...sharedProps} rows={field.rows} />;  }  return <Input {...sharedProps} type={field.type ?? "text"} />;}/** * A source-copy settings form whose values, validation, actions, and outcome * remain controlled by the consuming application. */export function SettingsPanel({  title,  description,  sections,  submitLabel,  submitting = false,  submittingLabel = "Saving…",  submitDisabled = false,  feedback,  onSubmit,  className,}: SettingsPanelProps) {  const panelId = React.useId();  const titleId = `${panelId}-title`;  return (    <section      aria-labelledby={titleId}      className={cn("min-w-0", className)}      data-slot="settings-panel"    >      <Card className="min-w-0 overflow-hidden">        <CardHeader className="border-b border-border">          <CardTitle id={titleId}>{title}</CardTitle>          {description ? (            <CardDescription>{description}</CardDescription>          ) : null}        </CardHeader>        <CardContent className="p-0">          <form            aria-busy={submitting || undefined}            aria-labelledby={titleId}            data-slot="settings-panel-form"            noValidate            onSubmit={onSubmit}          >            <div className="divide-y divide-border">              {sections.map((section) => {                const sectionTitleId = `${panelId}-${section.id}-title`;                return (                  <section                    aria-labelledby={sectionTitleId}                    className="grid min-w-0 gap-5 p-6 md:grid-cols-[minmax(0,0.75fr)_minmax(0,1.5fr)] md:gap-8"                    data-section-id={section.id}                    data-slot="settings-panel-section"                    key={section.id}                  >                    <div className="min-w-0">                      <h4                        className="text-sm font-semibold text-foreground"                        id={sectionTitleId}                      >                        {section.title}                      </h4>                      {section.description ? (                        <p className="mt-1 text-sm text-muted-foreground">                          {section.description}                        </p>                      ) : null}                    </div>                    <div className="grid min-w-0 gap-4 sm:grid-cols-2">                      {section.fields.map((field) => (                        <div                          className={cn(                            "min-w-0",                            field.kind === "textarea" && "sm:col-span-2",                          )}                          data-field-id={field.id}                          data-slot="settings-panel-field"                          key={field.id}                        >                          <SettingsFieldControl                            controlId={`${panelId}-${field.id}`}                            field={field}                            submitting={submitting}                          />                        </div>                      ))}                    </div>                  </section>                );              })}            </div>            <div              className="flex min-w-0 flex-col gap-4 border-t border-border bg-muted/20 p-6 sm:flex-row sm:items-center sm:justify-between"              data-slot="settings-panel-actions"            >              <div className="min-w-0 flex-1">                {feedback ? (                  <Alert                    ariaLive={                      feedback.status === "error" ? "assertive" : "polite"                    }                    data-slot="settings-panel-feedback"                    variant={                      feedback.status === "error" ? "destructive" : "success"                    }                  >                    <AlertTitle>{feedback.title}</AlertTitle>                    {feedback.description ? (                      <AlertDescription>                        {feedback.description}                      </AlertDescription>                    ) : null}                  </Alert>                ) : null}              </div>              <Button                className="w-full sm:w-auto"                disabled={submitting || submitDisabled}                type="submit"              >                {submitting ? submittingLabel : submitLabel}              </Button>            </div>          </form>        </CardContent>      </Card>    </section>  );}

import * as React from "react";import { Badge, EmptyState, cn } from "@pycolors/ui";export interface WorkspaceMember {  /** Stable identity, unique within this panel; used as the React key. */  id: string;  name: string;  secondaryText?: string;  /** Display text only. The application owns authorization. */  role: string;  status: string;  actions?: React.ReactNode;}export interface WorkspaceMembersPanelProps {  /** Stable HTML id, unique across the consuming page. */  id: string;  heading: string;  description?: string;  members: readonly WorkspaceMember[];  actions?: React.ReactNode;  emptyTitle?: string;  emptyDescription?: string;  className?: string;}function MemberActions({ children }: { children?: React.ReactNode }) {  if (!React.Children.toArray(children).some((child) => child !== "")) {    return null;  }  return (    <div      data-slot="workspace-members-actions"      className="flex min-w-0 flex-wrap items-center gap-2 [&>*]:max-w-full [&>*]:whitespace-normal [&>*]:break-words"    >      {children}    </div>  );}export function WorkspaceMembersPanel({  id,  heading,  description,  members,  actions,  emptyTitle = "No members to display",  emptyDescription,  className,}: WorkspaceMembersPanelProps) {  const headingId = `${id}-heading`;  const descriptionId = description ? `${id}-description` : undefined;  return (    <section      id={id}      aria-labelledby={headingId}      aria-describedby={descriptionId}      data-slot="workspace-members-panel"      className={cn(        "min-w-0 rounded-xl border border-border bg-card text-card-foreground",        className,      )}    >      <div className="flex min-w-0 flex-col gap-4 border-b border-border p-4 sm:flex-row sm:items-start sm:justify-between sm:p-6">        <div className="min-w-0 space-y-1">          <h2 id={headingId} className="break-words text-base font-semibold">            {heading}          </h2>          {description ? (            <p              id={descriptionId}              className="break-words text-sm text-muted-foreground"            >              {description}            </p>          ) : null}        </div>        <MemberActions>{actions}</MemberActions>      </div>      {members.length > 0 ? (        <ul          role="list"          aria-labelledby={headingId}          className="divide-y divide-border"        >          {members.map((member) => (            <li              key={member.id}              data-slot="workspace-member"              className="flex min-w-0 flex-col gap-4 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-6"            >              <div className="min-w-0 flex-1 space-y-3">                <div className="min-w-0 space-y-1">                  <h3 className="break-words text-sm font-medium">                    {member.name}                  </h3>                  {member.secondaryText ? (                    <p className="break-words text-sm text-muted-foreground">                      {member.secondaryText}                    </p>                  ) : null}                </div>                <dl className="flex min-w-0 flex-wrap gap-x-6 gap-y-2">                  <div className="min-w-0 space-y-1">                    <dt className="text-xs text-muted-foreground">Role</dt>                    <dd className="min-w-0 break-words text-sm">                      {member.role}                    </dd>                  </div>                  <div className="min-w-0 space-y-1">                    <dt className="text-xs text-muted-foreground">Status</dt>                    <dd className="min-w-0">                      <Badge                        variant="outline"                        className="h-auto max-w-full whitespace-normal break-words"                      >                        {member.status}                      </Badge>                    </dd>                  </div>                </dl>              </div>              <MemberActions>{member.actions}</MemberActions>            </li>          ))}        </ul>      ) : (        <EmptyState          title={emptyTitle}          description={emptyDescription}          ariaLive="off"          className="min-w-0 break-words rounded-none border-0 p-6 sm:p-8"        />      )}    </section>  );}

import * as React from "react";export interface WorkspaceInvitation {  /** Stable identity, unique within this panel; used as the React key. */  id: string;  recipient: string;  secondaryText?: string;  /** Display text only. The application owns role validation and authorization. */  role: string;  /** Consumer-defined invitation state such as Pending, Accepted, or Expired. */  status: string;  sentAt: string;  sentAtLabel: string;  expiresAt?: string;  expiresAtLabel?: string;  actions?: React.ReactNode;}export interface WorkspaceInvitationsPanelProps {  /** Stable HTML id, unique across the consuming page. */  id: string;  heading: string;  description?: string;  invitations: readonly WorkspaceInvitation[];  actions?: React.ReactNode;  emptyTitle?: string;  emptyDescription?: string;  className?: string;}function InvitationActions({ children }: { children?: React.ReactNode }) {  if (!React.Children.toArray(children).some((child) => child !== "")) {    return null;  }  return (    <div      data-slot="workspace-invitations-actions"      className="flex min-w-0 flex-wrap items-center gap-2 [&>*]:max-w-full [&>*]:whitespace-normal [&>*]:break-words"    >      {children}    </div>  );}export function WorkspaceInvitationsPanel({  id,  heading,  description,  invitations,  actions,  emptyTitle = "No invitations to display",  emptyDescription,  className,}: WorkspaceInvitationsPanelProps) {  const headingId = `${id}-heading`;  const descriptionId = description ? `${id}-description` : undefined;  return (    <section      id={id}      aria-labelledby={headingId}      aria-describedby={descriptionId}      data-slot="workspace-invitations-panel"      className={[        "min-w-0 rounded-xl border border-border bg-card text-card-foreground",        className,      ]        .filter(Boolean)        .join(" ")}    >      <div className="flex min-w-0 flex-col gap-4 border-b border-border p-4 sm:flex-row sm:items-start sm:justify-between sm:p-6">        <div className="min-w-0 space-y-1">          <h2 id={headingId} className="break-words text-base font-semibold">            {heading}          </h2>          {description ? (            <p              id={descriptionId}              className="break-words text-sm text-muted-foreground"            >              {description}            </p>          ) : null}        </div>        <InvitationActions>{actions}</InvitationActions>      </div>      {invitations.length > 0 ? (        <ul          role="list"          aria-labelledby={headingId}          className="divide-y divide-border"        >          {invitations.map((invitation) => (            <li              key={invitation.id}              data-slot="workspace-invitation"              className="flex min-w-0 flex-col gap-4 p-4 sm:p-6 lg:flex-row lg:items-center lg:justify-between"            >              <div className="min-w-0 flex-1 space-y-3">                <div className="min-w-0 space-y-1">                  <h3 className="break-words text-sm font-medium">                    {invitation.recipient}                  </h3>                  {invitation.secondaryText ? (                    <p className="break-words text-sm text-muted-foreground">                      {invitation.secondaryText}                    </p>                  ) : null}                </div>                <dl className="flex min-w-0 flex-wrap gap-x-6 gap-y-3">                  <div className="min-w-0 space-y-1">                    <dt className="text-xs text-muted-foreground">Role</dt>                    <dd className="min-w-0 break-words text-sm">                      {invitation.role}                    </dd>                  </div>                  <div className="min-w-0 space-y-1">                    <dt className="text-xs text-muted-foreground">Status</dt>                    <dd className="min-w-0">                      <span                        data-slot="workspace-invitation-status"                        className="inline-flex h-auto max-w-full items-center rounded-md border border-border px-2 py-0.5 text-xs font-medium whitespace-normal break-words"                      >                        {invitation.status}                      </span>                    </dd>                  </div>                  <div className="min-w-0 space-y-1">                    <dt className="text-xs text-muted-foreground">Sent</dt>                    <dd className="min-w-0 break-words text-sm">                      <time dateTime={invitation.sentAt}>                        {invitation.sentAtLabel}                      </time>                    </dd>                  </div>                  {invitation.expiresAt && invitation.expiresAtLabel ? (                    <div className="min-w-0 space-y-1">                      <dt className="text-xs text-muted-foreground">Expires</dt>                      <dd className="min-w-0 break-words text-sm">                        <time dateTime={invitation.expiresAt}>                          {invitation.expiresAtLabel}                        </time>                      </dd>                    </div>                  ) : null}                </dl>              </div>              <InvitationActions>{invitation.actions}</InvitationActions>            </li>          ))}        </ul>      ) : (        <div          data-slot="workspace-invitations-empty"          className="min-w-0 space-y-1 p-6 text-center sm:p-8"        >          <p className="break-words text-sm font-medium">{emptyTitle}</p>          {emptyDescription ? (            <p className="break-words text-sm text-muted-foreground">              {emptyDescription}            </p>          ) : null}        </div>      )}    </section>  );}

import * as React from "react";export interface AuditLogEvent {  /** Stable identity, unique within this panel; used as the React key. */  id: string;  actor: string;  action: string;  target?: string;  /** Machine-readable timestamp, ideally ISO 8601. */  occurredAt: string;  /** Human-readable timestamp controlled by the consuming application. */  occurredAtLabel: string;  details?: React.ReactNode;  actions?: React.ReactNode;}export interface AuditLogPanelProps {  /** Stable HTML id, unique across the consuming page. */  id: string;  heading: string;  description?: string;  events: readonly AuditLogEvent[];  filters?: React.ReactNode;  actions?: React.ReactNode;  emptyTitle?: string;  emptyDescription?: string;  className?: string;}function hasContent(children?: React.ReactNode) {  return React.Children.toArray(children).some((child) => child !== "");}function Slot({  children,  slot,}: {  children?: React.ReactNode;  slot: string;}) {  if (!hasContent(children)) return null;  return (    <div      data-slot={slot}      className="flex min-w-0 flex-wrap items-center gap-2 [&>*]:max-w-full [&>*]:whitespace-normal [&>*]:break-words"    >      {children}    </div>  );}export function AuditLogPanel({  id,  heading,  description,  events,  filters,  actions,  emptyTitle = "No activity to display",  emptyDescription,  className,}: AuditLogPanelProps) {  const headingId = `${id}-heading`;  const descriptionId = description ? `${id}-description` : undefined;  return (    <section      id={id}      aria-labelledby={headingId}      aria-describedby={descriptionId}      data-slot="audit-log-panel"      className={[        "min-w-0 rounded-xl border border-border bg-card text-card-foreground",        className,      ]        .filter(Boolean)        .join(" ")}    >      <div className="flex min-w-0 flex-col gap-4 border-b border-border p-4 sm:p-6 lg:flex-row lg:items-start lg:justify-between">        <div className="min-w-0 space-y-1">          <h2 id={headingId} className="break-words text-base font-semibold">            {heading}          </h2>          {description ? (            <p              id={descriptionId}              className="break-words text-sm text-muted-foreground"            >              {description}            </p>          ) : null}        </div>        <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">          <Slot slot="audit-log-filters">{filters}</Slot>          <Slot slot="audit-log-actions">{actions}</Slot>        </div>      </div>      {events.length > 0 ? (        <ol          role="list"          aria-labelledby={headingId}          className="divide-y divide-border"        >          {events.map((event) => (            <li              key={event.id}              data-slot="audit-log-event"              className="min-w-0 p-4 sm:p-6"            >              <article className="flex min-w-0 flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">                <div className="min-w-0 flex-1 space-y-2">                  <p className="min-w-0 break-words text-sm leading-6">                    <span className="font-medium">{event.actor}</span>{" "}                    <span>{event.action}</span>                    {event.target ? (                      <>                        {" "}                        <span className="font-medium">{event.target}</span>                      </>                    ) : null}                  </p>                  <time                    dateTime={event.occurredAt}                    className="block break-words text-xs text-muted-foreground"                  >                    {event.occurredAtLabel}                  </time>                  {hasContent(event.details) ? (                    <div                      data-slot="audit-log-details"                      className="min-w-0 break-words text-sm text-muted-foreground [&_pre]:max-w-full [&_pre]:overflow-x-auto"                    >                      {event.details}                    </div>                  ) : null}                </div>                <Slot slot="audit-log-event-actions">{event.actions}</Slot>              </article>            </li>          ))}        </ol>      ) : (        <div          data-slot="audit-log-empty"          className="min-w-0 space-y-1 p-6 text-center sm:p-8"        >          <p className="break-words text-sm font-medium">{emptyTitle}</p>          {emptyDescription ? (            <p className="break-words text-sm text-muted-foreground">              {emptyDescription}            </p>          ) : null}        </div>      )}    </section>  );}

"use client";import * as React from "react";import {  Alert,  AlertDescription,  AlertTitle,  Pagination,  PaginationContent,  PaginationEllipsis,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,  Table,  TableBody,  TableCaption,  TableCell,  TableEmpty,  TableHead,  TableHeader,  TableLoading,  TableRow,  buildPaginationRange,  cn,} from "@pycolors/ui";export type DataTableColumn<Row> = Readonly<{  id: string;  header: React.ReactNode;  cell: (row: Row) => React.ReactNode;  headerClassName?: string;  cellClassName?: string;  sortable?: boolean;}>;export type DataTableSort = Readonly<{  columnId: string;  direction: "asc" | "desc";}>;export type DataTableSorting = Readonly<{  value: DataTableSort | null;  onSortChange: (sort: DataTableSort) => void;  ascendingLabel?: string;  descendingLabel?: string;}>;export type DataTablePageSize = Readonly<{  value: number;  options: readonly number[];  onPageSizeChange: (pageSize: number) => void;  label?: string;}>;export type DataTablePagination = Readonly<{  page: number;  totalPages: number;  onPageChange: (page: number) => void;  navigationLabel?: string;  previousLabel?: string;  nextLabel?: string;  summary?: React.ReactNode;}>;export type DataTableQuery = Readonly<{  label?: string;  search: Readonly<{    value: string;    label: string;    onValueChange: (value: string) => void;    placeholder?: string;    disabled?: boolean;    inputRef?: React.Ref<HTMLInputElement>;  }>;  filters?: React.ReactNode;  reset?: Readonly<{    label: string;    onReset: () => void;    disabled?: boolean;  }>;  summary?: React.ReactNode;}>;export type DataTableState =  | Readonly<{ status?: "ready" }>  | Readonly<{ status: "loading"; label?: string }>  | Readonly<{      status: "error";      title: string;      description?: string;      action?: React.ReactNode;    }>;export type DataTableProps<Row> = Readonly<{  caption: string;  columns: readonly DataTableColumn<Row>[];  rows: readonly Row[];  getRowId: (row: Row) => React.Key;  state?: DataTableState;  emptyTitle: string;  emptyDescription?: string;  emptyAction?: React.ReactNode;  renderRowActions?: (row: Row) => React.ReactNode;  rowActionsLabel?: string;  pagination?: DataTablePagination;  pageSize?: DataTablePageSize;  sorting?: DataTableSorting;  query?: DataTableQuery;  className?: string;}>;function DataTableQueryControls({  query,}: Readonly<{ query: DataTableQuery }>) {  const { filters, label = "Record filters", reset, search, summary } = query;  const hasFilters = React.Children.toArray(filters).some(    (node) => node !== "",  );  const hasSummary = React.Children.toArray(summary).some(    (node) => node !== "",  );  return (    <div      aria-label={label}      className="min-w-0 space-y-3"      data-slot="data-table-query"      role="group"    >      <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">        <label          className="flex min-w-0 flex-1 flex-col gap-1 text-sm"          data-slot="data-table-search-label"        >          <span className="text-muted-foreground">{search.label}</span>          <input            autoComplete="off"            className="min-h-9 w-full min-w-0 rounded-md border border-border bg-background px-3 py-1 text-base text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm"            data-slot="data-table-search"            disabled={search.disabled}            onChange={(event) => {              if (!search.disabled) {                search.onValueChange(event.currentTarget.value);              }            }}            onKeyDown={(event) => {              if (event.key === "Enter" && !event.nativeEvent.isComposing) {                event.preventDefault();              }            }}            placeholder={search.placeholder}            ref={search.inputRef}            type="search"            value={search.value}          />        </label>        {hasFilters ? (          <div            className="flex min-w-0 flex-wrap items-end gap-3"            data-slot="data-table-filters"          >            {filters}          </div>        ) : null}        {reset ? (          <button            className="inline-flex min-h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-background px-3 py-1 text-sm font-medium text-foreground outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"            data-slot="data-table-query-reset"            disabled={reset.disabled}            onClick={reset.onReset}            type="button"          >            {reset.label}          </button>        ) : null}      </div>      {hasSummary ? (        <div          className="text-sm text-muted-foreground"          data-slot="data-table-query-summary"        >          {summary}        </div>      ) : null}    </div>  );}function hasValidPagination(  pagination: DataTablePagination | undefined,): pagination is DataTablePagination {  if (!pagination) return false;  return (    Number.isSafeInteger(pagination.page) &&    Number.isSafeInteger(pagination.totalPages) &&    pagination.totalPages > 1 &&    pagination.page >= 1 &&    pagination.page <= pagination.totalPages  );}function DataTablePageSizeControls({  pageSize,}: Readonly<{ pageSize: DataTablePageSize }>) {  const { label = "Rows per page", onPageSizeChange, value } = pageSize;  const options = [    ...new Set(      pageSize.options.filter((size) => Number.isSafeInteger(size) && size > 0),    ),  ];  if (options.length < 2 || !options.includes(value)) return null;  return (    <label      className="flex min-w-0 flex-wrap items-center gap-2 text-sm"      data-slot="data-table-page-size"    >      <span className="text-muted-foreground">{label}</span>      <select        className="min-h-9 max-w-full rounded-md border border-border bg-background px-3 py-1 text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"        data-slot="data-table-page-size-select"        onChange={(event) => {          const nextSize = Number(event.currentTarget.value);          if (nextSize !== value && options.includes(nextSize)) {            onPageSizeChange(nextSize);          }        }}        value={String(value)}      >        {options.map((size) => (          <option key={size} value={String(size)}>            {size}          </option>        ))}      </select>    </label>  );}function DataTablePaginationControls({  pagination,}: Readonly<{ pagination: DataTablePagination }>) {  const {    navigationLabel = "Table pagination",    nextLabel = "Next page",    onPageChange,    page,    previousLabel = "Previous page",    summary,    totalPages,  } = pagination;  const tokens = buildPaginationRange({ page, totalPages });  const requestPage = (nextPage: number) => {    if (      Number.isSafeInteger(nextPage) &&      nextPage >= 1 &&      nextPage <= totalPages &&      nextPage !== page    ) {      onPageChange(nextPage);    }  };  return (    <div      className={cn(        "flex min-w-0 flex-col gap-3",        "sm:flex-row sm:items-center sm:justify-between",      )}      data-slot="data-table-pagination"    >      {summary ? (        <div          className="text-sm text-muted-foreground"          data-slot="data-table-pagination-summary"        >          {summary}        </div>      ) : (        <span aria-hidden="true" />      )}      <Pagination        aria-label={navigationLabel}        className="w-auto justify-start sm:justify-end"      >        <PaginationContent className="!m-0 !max-w-none !p-0 [&>li]:!m-0 [&>li]:!p-0 [&>li]:before:hidden">          <PaginationItem>            <PaginationPrevious              disabled={page === 1}              label={previousLabel}              onClick={() => requestPage(page - 1)}            />          </PaginationItem>          {tokens.map((token) =>            token.type === "ellipsis" ? (              <PaginationItem key={token.key}>                <PaginationEllipsis />              </PaginationItem>            ) : (              <PaginationItem key={token.value}>                <PaginationLink                  aria-label={`Page ${token.value}`}                  disabled={token.value === page}                  isActive={token.value === page}                  onClick={() => requestPage(token.value)}                >                  {token.value}                </PaginationLink>              </PaginationItem>            ),          )}          <PaginationItem>            <PaginationNext              disabled={page === totalPages}              label={nextLabel}              onClick={() => requestPage(page + 1)}            />          </PaginationItem>        </PaginationContent>      </Pagination>    </div>  );}/** * A source-copy record table with consumer-owned columns, rows, states, * actions, query and sorting requests, and controlled page navigation and size. */export function DataTable<Row>({  caption,  className,  columns,  emptyAction,  emptyDescription,  emptyTitle,  getRowId,  pagination,  pageSize,  query,  renderRowActions,  rowActionsLabel = "Actions",  rows,  sorting,  state,}: DataTableProps<Row>) {  const hasRowActions = Boolean(renderRowActions);  const effectiveColumnCount = Math.max(    1,    columns.length + (hasRowActions ? 1 : 0),  );  const loadingLabel = state?.status === "loading" ? state.label : undefined;  const status = state?.status ?? "ready";  const showEmptyAction =    status === "ready" && rows.length === 0 && Boolean(emptyAction);  const showPagination =    status === "ready" && rows.length > 0 && hasValidPagination(pagination);  return (    <div className={cn("min-w-0 space-y-4", className)} data-slot="data-table">      {query ? <DataTableQueryControls query={query} /> : null}      <Table className="min-w-max" data-slot="data-table-table">        <TableCaption>{caption}</TableCaption>        <TableHeader>          <TableRow>            {columns.map((column) => {              const controller = column.sortable ? sorting : undefined;              const direction =                controller?.value?.columnId === column.id                  ? controller.value.direction                  : undefined;              const nextDirection = direction === "asc" ? "desc" : "asc";              return (                <TableHead                  aria-sort={                    direction === "asc"                      ? "ascending"                      : direction === "desc"                        ? "descending"                        : undefined                  }                  className={column.headerClassName}                  data-column-id={column.id}                  key={column.id}                >                  {controller ? (                    <button                      className="inline-flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-sm text-left font-medium outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"                      data-slot="data-table-sort-button"                      disabled={status !== "ready"}                      onClick={() =>                        controller.onSortChange({                          columnId: column.id,                          direction: nextDirection,                        })                      }                      type="button"                    >                      {column.header}                      <span aria-hidden="true">                        {direction === "asc"                          ? "▲"                          : direction === "desc"                            ? "▼"                            : "♢"}                      </span>                      <span className="sr-only">                        :{" "}                        {nextDirection === "asc"                          ? (controller.ascendingLabel ?? "Sort ascending")                          : (controller.descendingLabel ?? "Sort descending")}                      </span>                    </button>                  ) : (                    column.header                  )}                </TableHead>              );            })}            {hasRowActions ? (              <TableHead                className="text-right"                data-slot="data-table-actions-header"              >                {rowActionsLabel}              </TableHead>            ) : null}          </TableRow>        </TableHeader>        <TableBody>          {status === "loading" ? (            <TableLoading              ariaLive={loadingLabel ? "off" : undefined}              colSpan={effectiveColumnCount}            />          ) : state?.status === "error" ? (            <TableRow className="hover:bg-transparent">              <TableCell className="p-4" colSpan={effectiveColumnCount}>                <Alert ariaLive="assertive" variant="destructive">                  <AlertTitle>{state.title}</AlertTitle>                  {state.description ? (                    <AlertDescription>{state.description}</AlertDescription>                  ) : null}                  {state.action ? (                    <div className="mt-3" data-slot="data-table-error-action">                      {state.action}                    </div>                  ) : null}                </Alert>              </TableCell>            </TableRow>          ) : rows.length === 0 ? (            <TableEmpty              colSpan={effectiveColumnCount}              description={emptyDescription}              title={emptyTitle}            />          ) : (            rows.map((row) => {              const rowId = getRowId(row);              return (                <TableRow                  data-row-id={String(rowId)}                  data-slot="data-table-row"                  key={rowId}                >                  {columns.map((column) => (                    <TableCell                      className={column.cellClassName}                      data-column-id={column.id}                      key={column.id}                    >                      {column.cell(row)}                    </TableCell>                  ))}                  {renderRowActions ? (                    <TableCell                      className="text-right"                      data-slot="data-table-actions-cell"                    >                      {renderRowActions(row)}                    </TableCell>                  ) : null}                </TableRow>              );            })          )}        </TableBody>      </Table>      {showEmptyAction ? (        <div          className="flex min-w-0 flex-wrap justify-center gap-2"          data-slot="data-table-empty-action"        >          {emptyAction}        </div>      ) : null}      {loadingLabel ? (        <span          aria-atomic="true"          aria-live="polite"          className="sr-only"          data-slot="data-table-loading-label"          role="status"        >          {loadingLabel}        </span>      ) : null}      {status === "ready" && rows.length > 0 && pageSize ? (        <DataTablePageSizeControls pageSize={pageSize} />      ) : null}      {showPagination ? (        <DataTablePaginationControls pagination={pagination} />      ) : null}    </div>  );}

import * as React from "react";import { EmptyState, cn } from "@pycolors/ui";export interface EmptyStatePanelProps {  /** Stable HTML id, unique across the consuming page. */  id: string;  heading: string;  title: string;  description?: string;  /** Decorative only; communicate meaningful information in the text. */  icon?: React.ReactNode;  primaryAction?: React.ReactNode;  secondaryAction?: React.ReactNode;  /** Opt in only for a meaningful dynamic update, outside other live regions. */  ariaLive?: "off" | "polite" | "assertive";  className?: string;}export function EmptyStatePanel({  id,  heading,  title,  description,  icon,  primaryAction,  secondaryAction,  ariaLive = "off",  className,}: EmptyStatePanelProps) {  const headingId = `${id}-heading`;  const hasActions =    React.Children.toArray([primaryAction, secondaryAction]).length > 0;  return (    <section      id={id}      aria-labelledby={headingId}      data-slot="empty-state-panel"      className={cn(        "min-w-0 rounded-xl border border-border bg-card text-card-foreground",        className,      )}    >      <div className="border-b border-border px-4 py-4 sm:px-6">        <h2 id={headingId} className="break-words text-base font-semibold">          {heading}        </h2>      </div>      <EmptyState        title={title}        description={description}        icon={icon ? <span aria-hidden="true">{icon}</span> : undefined}        ariaLive={ariaLive}        className="min-w-0 break-words rounded-none border-0 px-4 py-8 sm:px-6 sm:py-12"        action={          hasActions ? (            <div              data-slot="empty-state-panel-actions"              className="flex min-w-0 flex-col items-center justify-center gap-3 sm:flex-row sm:flex-wrap [&>*]:max-w-full [&>*]:whitespace-normal [&>*]:break-words"            >              {primaryAction}              {secondaryAction}            </div>          ) : undefined        }      />    </section>  );}