@godxjp/ui 6.0.0 → 6.0.2

package/src/components/feedback/skeleton.tsx

@@ -1,95 +0,0 @@
-// Skeleton family — shaped placeholders for loading states. Always pick the
-// shape closest to the final layout; spinner-overlay is forbidden.
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { tableCellPaddingClass, tableRowHeightClass } from "../../lib/control-styles";
-
-function SkeletonBlock({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      aria-busy="true"
-      aria-live="polite"
-      className={cn("ui-skeleton-block", className)}
-      {...props}
-    />
-  );
-}
-
-interface SkeletonRowsProps {
-  rows?: number;
-  columns?: number;
-  className?: string;
-}
-
-/** Skeleton for a flat list of rows (use inside a Card or section). */
-export function SkeletonRows({ rows = 6, columns = 4, className }: SkeletonRowsProps) {
-  return (
-    <div className={cn("ui-skeleton-rows", className)} aria-busy="true">
-      {Array.from({ length: rows }).map((_, i) => (
-        <div key={i} className="ui-skeleton-row">
-          {Array.from({ length: columns }).map((_, j) => (
-            <SkeletonBlock
-              key={j}
-              className={cn("h-4", j === 0 ? "w-1/4" : j === columns - 1 ? "w-1/6" : "flex-1")}
-            />
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-/** Skeleton matching the DataTable layout — header row + N body rows. */
-export function SkeletonTable({ rows = 8, columns = 5 }: SkeletonRowsProps) {
-  return (
-    <div className="ui-skeleton-table" aria-busy="true">
-      <div className={cn("ui-skeleton-table-head", tableCellPaddingClass, tableRowHeightClass)}>
-        {Array.from({ length: columns }).map((_, j) => (
-          <SkeletonBlock key={j} className={cn("h-3", j === 0 ? "w-1/5" : "flex-1")} />
-        ))}
-      </div>
-      <div className="ui-skeleton-table-body">
-        {Array.from({ length: rows }).map((_, i) => (
-          <div
-            key={i}
-            className={cn("ui-skeleton-table-row", tableCellPaddingClass, tableRowHeightClass)}
-          >
-            {Array.from({ length: columns }).map((_, j) => (
-              <SkeletonBlock key={j} className={cn("h-4", j === 0 ? "w-1/5" : "flex-1")} />
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/** Skeleton matching a Card detail layout — title + 6 metadata rows. */
-export function SkeletonDetail() {
-  return (
-    <div className="ui-skeleton-detail ui-skeleton-detail-stack" aria-busy="true">
-      <SkeletonBlock className="h-7 w-1/3" />
-      <SkeletonBlock className="h-4 w-1/2" />
-      <div className="ui-skeleton-detail-box ui-skeleton-detail-stack">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div key={i} className="ui-skeleton-detail-stack">
-            <SkeletonBlock className="h-3 w-24" />
-            <SkeletonBlock className="h-4 w-full max-w-md" />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/** Skeleton matching a stat card / dashboard tile. */
-export function SkeletonCard() {
-  return (
-    <div className="ui-skeleton-card" aria-busy="true">
-      <SkeletonBlock className="h-3 w-24" />
-      <SkeletonBlock className="h-[length:var(--control-height)] w-32" />
-      <SkeletonBlock className="h-3 w-20" />
-    </div>
-  );
-}

package/src/components/feedback/sonner.tsx

@@ -1,54 +0,0 @@
-// shadcn/ui Sonner — recommended toast (replaces deprecated Radix Toast).
-// @see https://ui.shadcn.com/docs/components/sonner
-import * as React from "react";
-import { CheckCircle2, Info, Loader2, OctagonX, TriangleAlert } from "lucide-react";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
-
-function useDocumentTheme(): ToasterProps["theme"] {
-  return React.useSyncExternalStore(
-    (onStoreChange) => {
-      if (typeof document === "undefined") return () => undefined;
-      const mq = window.matchMedia("(prefers-color-scheme: dark)");
-      mq.addEventListener("change", onStoreChange);
-      const obs = new MutationObserver(onStoreChange);
-      obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
-      return () => {
-        mq.removeEventListener("change", onStoreChange);
-        obs.disconnect();
-      };
-    },
-    () => (document.documentElement.classList.contains("dark") ? "dark" : "light"),
-    () => "light",
-  );
-}
-
-function Toaster({ ...props }: ToasterProps) {
-  const theme = useDocumentTheme();
-
-  return (
-    <Sonner
-      theme={theme}
-      className="toaster group"
-      icons={{
-        success: <CheckCircle2 className="size-4" aria-hidden="true" />,
-        info: <Info className="size-4" aria-hidden="true" />,
-        warning: <TriangleAlert className="size-4" aria-hidden="true" />,
-        error: <OctagonX className="size-4" aria-hidden="true" />,
-        loading: <Loader2 className="size-4 animate-spin" aria-hidden="true" />,
-      }}
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
-        } as React.CSSProperties
-      }
-      position="bottom-right"
-      mobileOffset={{ bottom: "16px", right: "16px" }}
-      {...props}
-    />
-  );
-}
-
-export { Toaster };

package/src/components/feedback/toaster.tsx

@@ -1 +0,0 @@
-export { Toaster } from "./sonner";

package/src/components/feedback/use-toast.ts

@@ -1,62 +0,0 @@
-// Toast API — Sonner (shadcn recommended).
-//
-// `toast("msg")` / `toast.success("msg")` — Sonner native API (preferred).
-// `toast({ title, description, variant })` — legacy admin compat.
-import type * as React from "react";
-import { toast as sonnerToast, type ExternalToast } from "sonner";
-
-export type { ExternalToast } from "sonner";
-export { sonnerToast };
-
-export type LegacyToastOptions = ExternalToast & {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  variant?: "default" | "destructive" | "success";
-};
-
-function nodeText(value: React.ReactNode): string {
-  if (value == null) return "";
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
-  return "";
-}
-
-function legacyToast(options: LegacyToastOptions) {
-  const { title, description, variant, ...rest } = options;
-  const titleText = nodeText(title);
-  const descText = nodeText(description);
-  const message = titleText || descText;
-  const desc = titleText && descText ? descText : undefined;
-  const sonnerOptions: ExternalToast = { ...rest, description: desc };
-
-  switch (variant) {
-    case "destructive":
-      return sonnerToast.error(message, sonnerOptions);
-    case "success":
-      return sonnerToast.success(message, sonnerOptions);
-    default:
-      return sonnerToast(message, sonnerOptions);
-  }
-}
-
-type ToastFn = typeof sonnerToast &
-  ((options: LegacyToastOptions) => ReturnType<typeof sonnerToast>);
-
-/** Sonner toast + legacy `{ title, variant }` object form. */
-const toast = Object.assign((messageOrOptions: string | LegacyToastOptions) => {
-  if (typeof messageOrOptions === "string") {
-    return sonnerToast(messageOrOptions);
-  }
-  return legacyToast(messageOrOptions);
-}, sonnerToast) as ToastFn;
-
-/** Legacy hook — prefer `toast` import directly; kept for existing admin pages. */
-function useToast() {
-  return {
-    toast: (options: LegacyToastOptions) => legacyToast(options),
-    dismiss: sonnerToast.dismiss,
-    toasts: [] as const,
-  };
-}
-
-export { toast, legacyToast, useToast };

package/src/components/general/__tests__/button.test.tsx

@@ -1,71 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { renderWithUi, screen, userEvent } from "@/test/render";
-import { Button } from "../button";
-
-describe("Button", () => {
-  it("renders children and default type=submit implicit button", () => {
-    renderWithUi(<Button>Click me</Button>);
-    const btn = screen.getByRole("button", { name: "Click me" });
-    expect(btn).toBeInTheDocument();
-    expect(btn.tagName).toBe("BUTTON");
-  });
-
-  it("calls onClick when clicked", async () => {
-    const user = userEvent.setup();
-    const onClick = vi.fn();
-    renderWithUi(<Button onClick={onClick}>Go</Button>);
-    await user.click(screen.getByRole("button", { name: "Go" }));
-    expect(onClick).toHaveBeenCalledOnce();
-  });
-
-  it("does not fire onClick when disabled", async () => {
-    const user = userEvent.setup();
-    const onClick = vi.fn();
-    renderWithUi(
-      <Button disabled onClick={onClick}>
-        Blocked
-      </Button>,
-    );
-    await user.click(screen.getByRole("button", { name: "Blocked" }));
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  it.each(["destructive", "outline", "secondary", "ghost", "link"] as const)(
-    "renders variant=%s",
-    (variant) => {
-      renderWithUi(<Button variant={variant}>V</Button>);
-      expect(screen.getByRole("button", { name: "V" })).toBeInTheDocument();
-    },
-  );
-
-  it.each(["xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"] as const)(
-    "renders size=%s",
-    (size) => {
-      renderWithUi(<Button size={size}>S</Button>);
-      expect(screen.getByRole("button", { name: "S" })).toBeInTheDocument();
-    },
-  );
-
-  it("exposes shadcn data-slot and state attributes", () => {
-    renderWithUi(
-      <Button variant="outline" size="sm" aria-invalid>
-        State
-      </Button>,
-    );
-    const btn = screen.getByRole("button", { name: "State" });
-    expect(btn).toHaveAttribute("data-slot", "button");
-    expect(btn).toHaveAttribute("data-variant", "outline");
-    expect(btn).toHaveAttribute("data-size", "sm");
-    expect(btn).toHaveClass("aria-invalid:border-destructive");
-  });
-
-  it("default size applies ui-button size token binding", () => {
-    renderWithUi(<Button>Density</Button>);
-    expect(screen.getByRole("button", { name: "Density" })).toHaveClass("ui-button--default-size");
-  });
-
-  it("default variant uses semantic button token class", () => {
-    renderWithUi(<Button>Primary</Button>);
-    expect(screen.getByRole("button", { name: "Primary" })).toHaveClass("ui-button--default");
-  });
-});

package/src/components/general/button.tsx

@@ -1,61 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import type { ButtonProp } from "../../props/components/general.prop";
-
-const buttonVariants = cva("ui-button", {
-  variants: {
-    variant: {
-      default: "ui-button--default bg-primary text-primary-foreground hover:bg-primary/90",
-      destructive:
-        "ui-button--destructive bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20",
-      outline:
-        "ui-button--outline border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
-      secondary:
-        "ui-button--secondary bg-secondary text-secondary-foreground hover:bg-secondary/80",
-      ghost: "ui-button--ghost hover:bg-accent hover:text-accent-foreground",
-      link: "ui-button--link text-primary underline-offset-4 hover:underline",
-    },
-    size: {
-      default: "ui-button--default-size py-2 has-[>svg]:px-3",
-      xs: "h-[calc(var(--control-height)-0.75rem)] gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-      sm: "ui-button--sm gap-1.5 rounded-md has-[>svg]:px-2.5",
-      lg: "ui-button--lg rounded-md has-[>svg]:px-4",
-      icon: "ui-button--icon",
-      "icon-xs":
-        "size-[calc(var(--control-height)-0.75rem)] rounded-md [&_svg:not([class*='size-'])]:size-3",
-      "icon-sm": "size-[calc(var(--control-height)-0.5rem)]",
-      "icon-lg": "size-[calc(var(--control-height)+0.25rem)]",
-    },
-  },
-  defaultVariants: { variant: "default", size: "default" },
-});
-
-export type { ButtonProp, ButtonProp as ButtonProps } from "../../props/components/general.prop";
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProp>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        data-slot="button"
-        data-variant={variant ?? "default"}
-        data-size={size ?? "default"}
-        className={cn(
-          "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none",
-          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-          "disabled:pointer-events-none disabled:opacity-50",
-          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-          buttonVariants({ variant, size, className }),
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { buttonVariants };

package/src/components/general/index.ts

@@ -1,2 +0,0 @@
-export { Button, buttonVariants } from "./button";
-export type { ButtonProps } from "./button";

package/src/components/layout/__tests__/page-container.test.tsx

@@ -1,69 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { renderWithUi, screen } from "@/test/render";
-import { PageContainer } from "../page-container";
-import { Button } from "../../general/button";
-
-describe("PageContainer", () => {
-  it("renders title as h1", () => {
-    renderWithUi(<PageContainer title="Customers" />);
-    expect(screen.getByRole("heading", { level: 1, name: "Customers" })).toBeInTheDocument();
-  });
-
-  it("renders subtitle when provided", () => {
-    renderWithUi(<PageContainer title="Customers" subtitle="CRM list" />);
-    expect(screen.getByText("CRM list")).toHaveClass("ui-page-subtitle");
-  });
-
-  it("renders extra slot in header row", () => {
-    renderWithUi(<PageContainer title="Customers" extra={<Button>Create</Button>} />);
-    expect(screen.getByRole("button", { name: "Create" })).toBeInTheDocument();
-  });
-
-  it("renders footer slot", () => {
-    renderWithUi(<PageContainer title="Edit" footer={<Button>Save</Button>} />);
-    expect(screen.getByRole("contentinfo")).toContainElement(
-      screen.getByRole("button", { name: "Save" }),
-    );
-  });
-
-  it("renders breadcrumb trail with links", () => {
-    renderWithUi(
-      <PageContainer
-        title="Detail"
-        breadcrumb={[
-          { label: "CRM", to: "/crm" },
-          { label: "Customers", to: "/crm/customers" },
-          { label: "Detail" },
-        ]}
-      />,
-    );
-    const nav = screen.getByRole("navigation", { name: "Breadcrumb" });
-    expect(nav).toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "CRM" })).toHaveAttribute("href", "/crm");
-    expect(nav).toHaveTextContent("Detail");
-  });
-
-  it("applies density class on root", () => {
-    const { container } = renderWithUi(<PageContainer title="Compact" density="compact" />);
-    expect(container.firstChild).toHaveClass("ui-density-compact");
-  });
-
-  it("applies variant modifier class", () => {
-    const { container } = renderWithUi(<PageContainer title="List" variant="flush" />);
-    expect(container.firstChild).toHaveClass("ui-page-container--flush");
-  });
-
-  it("applies sticky footer modifier when enabled", () => {
-    const { container } = renderWithUi(<PageContainer title="Form" stickyFooter />);
-    expect(container.firstChild).toHaveClass("ui-page-container--sticky-footer");
-  });
-
-  it("renders children in page body", () => {
-    renderWithUi(
-      <PageContainer title="Page">
-        <p>Body content</p>
-      </PageContainer>,
-    );
-    expect(screen.getByText("Body content")).toBeInTheDocument();
-  });
-});

package/src/components/layout/__tests__/page-inset.test.tsx

@@ -1,14 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { renderWithUi, screen } from "@/test/render";
-import { PageInset } from "../page-inset";
-
-describe("PageInset", () => {
-  it("renders children with inset class", () => {
-    renderWithUi(
-      <PageInset>
-        <p>Filter zone</p>
-      </PageInset>,
-    );
-    expect(screen.getByText("Filter zone").parentElement).toHaveClass("ui-page-inset");
-  });
-});

package/src/components/layout/__tests__/stack-inline.test.tsx

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { renderWithUi } from "@/test/render";
-import { Stack } from "../stack";
-import { Inline } from "../inline";
-
-describe("Stack", () => {
-  it.each([
-    ["xs", "ui-stack-xs"],
-    ["sm", "ui-stack-sm"],
-    ["md", "ui-stack-md"],
-    ["lg", "ui-stack-lg"],
-    ["xl", "ui-stack-xl"],
-  ] as const)("applies gap=%s → %s", (gap, cls) => {
-    const { container } = renderWithUi(
-      <Stack gap={gap}>
-        <span>a</span>
-        <span>b</span>
-      </Stack>,
-    );
-    expect(container.firstChild).toHaveClass(cls);
-  });
-});
-
-describe("Inline", () => {
-  it.each([
-    ["xs", "ui-inline-xs"],
-    ["sm", "ui-inline-sm"],
-    ["md", "ui-inline-md"],
-    ["lg", "ui-inline-lg"],
-  ] as const)("applies gap=%s → %s", (gap, cls) => {
-    const { container } = renderWithUi(
-      <Inline gap={gap}>
-        <span>a</span>
-        <span>b</span>
-      </Inline>,
-    );
-    expect(container.firstChild).toHaveClass(cls);
-  });
-});

package/src/components/layout/app-shell.tsx

@@ -1,42 +0,0 @@
-import type { AppShellProp } from "../../props/components/layout.prop";
-
-export type {
-  AppShellProp,
-  AppShellProp as AppShellProps,
-} from "../../props/components/layout.prop";
-
-export function AppShell({
-  sidebar,
-  topbar,
-  topbarLeft,
-  topbarRight,
-  logo,
-  breadcrumb,
-  footer,
-  children,
-  sidebarCollapsed = false,
-}: AppShellProp) {
-  const resolvedTopbar =
-    topbar !== undefined ? (
-      topbar
-    ) : (
-      <div className="app-topbar-rail">
-        {logo !== undefined && <div className="app-topbar-logo">{logo}</div>}
-        {topbarLeft !== undefined && <div className="app-topbar-left">{topbarLeft}</div>}
-        <div className="app-topbar-spacer" />
-        {topbarRight !== undefined && <div className="app-topbar-right">{topbarRight}</div>}
-      </div>
-    );
-
-  return (
-    <div className="app-root" data-collapsed={sidebarCollapsed ? "true" : undefined}>
-      <aside className="app-sidebar">{sidebar}</aside>
-      <header className="app-topbar">{resolvedTopbar}</header>
-      <main className="app-main">
-        {breadcrumb !== undefined && <div className="app-breadcrumb">{breadcrumb}</div>}
-        {children}
-      </main>
-      {footer !== undefined && <footer className="app-footer">{footer}</footer>}
-    </div>
-  );
-}

package/src/components/layout/breadcrumb.tsx

@@ -1,35 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import { Link } from "react-router-dom";
-
-import type { BreadcrumbProp } from "../../props/vocabulary/navigation.prop";
-
-export type BreadcrumbProps = {
-  items: BreadcrumbProp;
-};
-
-export function Breadcrumb({ items }: BreadcrumbProps) {
-  return (
-    <nav aria-label="Breadcrumb" className="ui-breadcrumb">
-      <ol className="ui-breadcrumb-list">
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-
-          return (
-            <li key={item.to ?? index} className="ui-breadcrumb-item">
-              {item.to && !isLast ? (
-                <Link to={item.to} className="ui-breadcrumb-link">
-                  {item.label}
-                </Link>
-              ) : (
-                <span className="ui-breadcrumb-current" aria-current={isLast ? "page" : undefined}>
-                  {item.label}
-                </span>
-              )}
-              {!isLast ? <ChevronRight aria-hidden="true" /> : null}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}

package/src/components/layout/index.ts

@@ -1,31 +0,0 @@
-export { PageContainer } from "./page-container";
-export type {
-  PageContainerProp,
-  PageContainerProps,
-  BreadcrumbItem,
-  BreadcrumbItemProp,
-} from "./page-container";
-export { PageInset } from "./page-inset";
-export type { PageInsetProp, PageInsetProps } from "./page-inset";
-export { Stack } from "./stack";
-export type { StackProp, StackProps } from "./stack";
-export { Inline } from "./inline";
-export type { InlineProp, InlineProps } from "./inline";
-export { AppShell } from "./app-shell";
-export type { AppShellProps } from "./app-shell";
-export { ShellApp } from "./shell-app";
-export type { ShellAppProps } from "./shell-app";
-export { Menu } from "./menu";
-export type { MenuItem, MenuProps, MenuSection } from "./menu";
-export { Breadcrumb } from "./breadcrumb";
-export type { BreadcrumbProps } from "./breadcrumb";
-export { Sidebar } from "./sidebar";
-export type { SidebarItem, SidebarProduct, SidebarProps, SidebarSection } from "./sidebar";
-export { Topbar } from "./topbar";
-export type { TopbarProduct, TopbarProject, TopbarProps } from "./topbar";
-export { ResponsiveGrid } from "./responsive-grid";
-export type { ResponsiveGridProps } from "./responsive-grid";
-export { SplitPane } from "./split-pane";
-export type { SplitPaneProps } from "./split-pane";
-export { MobileFrame } from "./mobile-frame";
-export type { MobileFrameNavItem, MobileFrameProps } from "./mobile-frame";

package/src/components/layout/inline.tsx

@@ -1,13 +0,0 @@
-import { cn } from "../../lib/utils";
-import { inlineGapClass } from "../../lib/variants";
-import type { InlineProp } from "../../props/components/layout.prop";
-
-export type { InlineProp, InlineProp as InlineProps } from "../../props/components/layout.prop";
-
-export function Inline({ gap = "sm", className, children, ...props }: InlineProp) {
-  return (
-    <div className={cn(inlineGapClass[gap], className)} {...props}>
-      {children}
-    </div>
-  );
-}

package/src/components/layout/menu.tsx

@@ -1,34 +0,0 @@
-import type { SidebarItem, SidebarSection } from "./sidebar";
-import { Sidebar } from "./sidebar";
-
-export type MenuItem = SidebarItem & {
-  active?: boolean;
-};
-
-export type MenuSection = {
-  label?: string;
-  items: MenuItem[];
-};
-
-export type MenuProps = {
-  items: MenuSection[];
-};
-
-export function Menu({ items }: MenuProps) {
-  const sections: SidebarSection[] = items.map((section) => ({
-    label: section.label,
-    items: section.items.map(({ active: _active, ...item }) => item),
-  }));
-  const activeId =
-    items.flatMap((section) => section.items).find((item) => item.active)?.id ??
-    items[0]?.items[0]?.id ??
-    "";
-
-  return (
-    <Sidebar
-      activeId={activeId}
-      sections={sections}
-      product={{ name: "Acme Console", role: "Workspace", color: "hsl(var(--attention))" }}
-    />
-  );
-}