azamat-ui-kit-cli 0.2.2

package/vendor/src/components/layout/app-sidebar.tsx

@@ -0,0 +1,179 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type AppSidebarNavItem = {
+  key: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+  href?: string
+  active?: boolean
+  disabled?: boolean
+  badge?: React.ReactNode
+  hidden?: boolean
+  onSelect?: () => void
+}
+
+export type AppSidebarProps = React.ComponentProps<"aside"> & {
+  header?: React.ReactNode
+  footer?: React.ReactNode
+  items?: AppSidebarNavItem[]
+  collapsed?: boolean
+  onItemSelect?: (item: AppSidebarNavItem) => void
+  renderItem?: (item: AppSidebarNavItem, state: { collapsed: boolean }) => React.ReactNode
+  renderLink?: (props: React.ComponentProps<"a"> & { item: AppSidebarNavItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
+}
+
+function AppSidebar({
+  className,
+  header,
+  footer,
+  items = [],
+  collapsed = false,
+  onItemSelect,
+  renderItem,
+  renderLink,
+  children,
+  ...props
+}: AppSidebarProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <aside
+      data-slot="app-sidebar"
+      data-collapsed={collapsed || undefined}
+      className={cn("flex h-full min-h-0 flex-col bg-sidebar text-sidebar-foreground", className)}
+      {...props}
+    >
+      {header && <div className="shrink-0 border-b p-3">{header}</div>}
+
+      <nav data-slot="app-sidebar-nav" className="min-h-0 flex-1 space-y-1 overflow-y-auto p-2">
+        {children ??
+          visibleItems.map((item) =>
+            renderItem ? (
+              <React.Fragment key={item.key}>{renderItem(item, { collapsed })}</React.Fragment>
+            ) : (
+              item.href?.startsWith("/") ? (
+                renderLink ? (
+                  <React.Fragment key={item.key}>
+                    {renderLink({
+                      item,
+                      href: item.href,
+                      "aria-current": item.active ? "page" : undefined,
+                      "aria-disabled": item.disabled || undefined,
+                      "data-active": item.active || undefined,
+                      "data-disabled": item.disabled || undefined,
+                      className: cn(
+                        "flex min-h-9 items-center gap-2 rounded-lg px-2.5 text-sm font-medium outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+                        collapsed && "justify-center px-2"
+                      ),
+                      onClick: (event) => {
+                        if (item.disabled) {
+                          event.preventDefault()
+                          return
+                        }
+
+                        item.onSelect?.()
+                        onItemSelect?.(item)
+                      },
+                      children: (
+                        <>
+                          {item.icon && <span className="shrink-0">{item.icon}</span>}
+                          {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
+                          {!collapsed && item.badge && <span className="shrink-0">{item.badge}</span>}
+                        </>
+                      ),
+                    })}
+                  </React.Fragment>
+                ) : (
+                  <a
+                    key={item.key}
+                    href={item.href}
+                    aria-current={item.active ? "page" : undefined}
+                    aria-disabled={item.disabled || undefined}
+                    data-active={item.active || undefined}
+                    data-disabled={item.disabled || undefined}
+                    className={cn(
+                      "flex min-h-9 items-center gap-2 rounded-lg px-2.5 text-sm font-medium outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+                      collapsed && "justify-center px-2"
+                    )}
+                    onClick={(event) => {
+                      if (item.disabled) {
+                        event.preventDefault()
+                        return
+                      }
+
+                      item.onSelect?.()
+                      onItemSelect?.(item)
+                    }}
+                  >
+                    {item.icon && <span className="shrink-0">{item.icon}</span>}
+                    {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
+                    {!collapsed && item.badge && <span className="shrink-0">{item.badge}</span>}
+                  </a>
+                )
+              ) : item.href ? (
+                <button
+                  key={item.key}
+                  type="button"
+                  aria-current={item.active ? "page" : undefined}
+                  aria-disabled={item.disabled || undefined}
+                  data-active={item.active || undefined}
+                  data-disabled={item.disabled || undefined}
+                  className={cn(
+                    "flex min-h-9 w-full items-center gap-2 rounded-lg px-2.5 text-sm font-medium outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+                    collapsed && "justify-center px-2"
+                  )}
+                  onClick={() => {
+                    if (item.disabled) return
+                    const href = item.href
+                    if (!href) return
+
+                    item.onSelect?.()
+                    onItemSelect?.(item)
+
+                    if (href.startsWith("http")) {
+                      window.open(href, "_blank", "noopener,noreferrer")
+                      return
+                    }
+
+                    window.location.assign(href)
+                  }}
+                >
+                  {item.icon && <span className="shrink-0">{item.icon}</span>}
+                  {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
+                  {!collapsed && item.badge && <span className="shrink-0">{item.badge}</span>}
+                </button>
+              ) : (
+                <button
+                  key={item.key}
+                  type="button"
+                  disabled={item.disabled}
+                  aria-current={item.active ? "page" : undefined}
+                  aria-disabled={item.disabled || undefined}
+                  data-active={item.active || undefined}
+                  data-disabled={item.disabled || undefined}
+                  className={cn(
+                    "flex min-h-9 items-center gap-2 rounded-lg px-2.5 text-sm font-medium outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+                    collapsed && "justify-center px-2"
+                  )}
+                  onClick={() => {
+                    item.onSelect?.()
+                    onItemSelect?.(item)
+                  }}
+                >
+                  {item.icon && <span className="shrink-0">{item.icon}</span>}
+                  {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
+                  {!collapsed && item.badge && <span className="shrink-0">{item.badge}</span>}
+                </button>
+              )
+            )
+          )}
+      </nav>
+
+      {footer && <div className="shrink-0 border-t p-3">{footer}</div>}
+    </aside>
+  )
+}
+
+export { AppSidebar }

package/vendor/src/components/layout/breadcrumbs.tsx

@@ -0,0 +1,72 @@
+import * as React from "react"
+import { ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type BreadcrumbItem = {
+  key: string
+  label: React.ReactNode
+  href?: string
+  current?: boolean
+  onSelect?: () => void
+}
+
+export type BreadcrumbsProps = React.ComponentProps<"nav"> & {
+  items: BreadcrumbItem[]
+  separator?: React.ReactNode
+  renderLink?: (props: React.ComponentProps<"a"> & { item: BreadcrumbItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
+}
+
+function Breadcrumbs({
+  className,
+  items,
+  separator = <ChevronRightIcon className="size-3.5" />,
+  renderLink,
+  ...props
+}: BreadcrumbsProps) {
+  return (
+    <nav
+      data-slot="breadcrumbs"
+      aria-label="Breadcrumb"
+      className={cn("flex min-w-0 items-center gap-1 text-sm text-muted-foreground", className)}
+      {...props}
+    >
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1
+        const isCurrent = item.current || isLast
+
+        return (
+          <React.Fragment key={item.key}>
+            {index > 0 && <span className="shrink-0 opacity-60">{separator}</span>}
+            {item.href && !isCurrent ? (
+              renderLink ? renderLink({
+                item,
+                href: item.href,
+                className: "truncate transition-colors hover:text-foreground",
+                onClick: () => item.onSelect?.(),
+                children: item.label,
+              }) : (
+                <a
+                  href={item.href}
+                  className="truncate transition-colors hover:text-foreground"
+                  onClick={() => item.onSelect?.()}
+                >
+                  {item.label}
+                </a>
+              )
+            ) : (
+              <span
+                aria-current={isCurrent ? "page" : undefined}
+                className={cn("truncate", isCurrent && "font-medium text-foreground")}
+              >
+                {item.label}
+              </span>
+            )}
+          </React.Fragment>
+        )
+      })}
+    </nav>
+  )
+}
+
+export { Breadcrumbs }

package/vendor/src/components/layout/index.ts

@@ -0,0 +1,11 @@
+export * from "./app-shell"
+export * from "./app-header"
+export * from "./app-sidebar"
+export * from "./page-header"
+export * from "./stat-card"
+export * from "./sidebar-nav"
+export * from "./breadcrumbs"
+export * from "./page-container"
+export * from "./section"
+export * from "./sticky-footer-bar"
+export * from "./workspace-shell"

package/vendor/src/components/layout/page-container.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type PageContainerSize = "default" | "sm" | "md" | "lg" | "xl" | "full"
+
+export type PageContainerProps = React.ComponentProps<"div"> & {
+  size?: PageContainerSize
+}
+
+const sizeClassName: Record<PageContainerSize, string> = {
+  sm: "max-w-3xl",
+  md: "max-w-5xl",
+  lg: "max-w-6xl",
+  xl: "max-w-7xl",
+  default: "max-w-7xl",
+  full: "max-w-none",
+}
+
+function PageContainer({ className, size = "default", ...props }: PageContainerProps) {
+  return (
+    <div
+      data-slot="page-container"
+      className={cn("mx-auto flex w-full flex-col gap-4", sizeClassName[size], className)}
+      {...props}
+    />
+  )
+}
+
+export { PageContainer }

package/vendor/src/components/layout/page-header.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type PageHeaderProps = React.ComponentProps<"div"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  eyebrow?: React.ReactNode
+  breadcrumbs?: React.ReactNode
+  actions?: React.ReactNode
+  meta?: React.ReactNode
+  sticky?: boolean
+}
+
+function PageHeader({
+  className,
+  title,
+  description,
+  eyebrow,
+  breadcrumbs,
+  actions,
+  meta,
+  sticky = false,
+  children,
+  ...props
+}: PageHeaderProps) {
+  return (
+    <div
+      data-slot="page-header"
+      data-sticky={sticky || undefined}
+      className={cn(
+        "flex flex-col gap-4 border-b border-border/70 pb-5",
+        sticky && "sticky top-0 z-30 bg-background/92 pt-4 backdrop-blur supports-[backdrop-filter]:bg-background/78",
+        className
+      )}
+      {...props}
+    >
+      {breadcrumbs && <div className="text-sm text-muted-foreground/95">{breadcrumbs}</div>}
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0 space-y-2">
+          {eyebrow && (
+            <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-muted-foreground">
+              {eyebrow}
+            </div>
+          )}
+          {title && <h1 className="truncate text-3xl font-semibold tracking-[-0.03em] text-foreground">{title}</h1>}
+          {description && <p className="max-w-3xl text-sm leading-7 text-muted-foreground">{description}</p>}
+          {meta && <div className="pt-1 text-sm text-muted-foreground">{meta}</div>}
+        </div>
+
+        {actions && <div className="flex shrink-0 flex-wrap items-center gap-2.5">{actions}</div>}
+      </div>
+
+      {children}
+    </div>
+  )
+}
+
+export { PageHeader }

package/vendor/src/components/layout/public.ts

@@ -0,0 +1,10 @@
+export * from "./app-shell"
+export * from "./app-header"
+export * from "./app-sidebar"
+export * from "./page-header"
+export * from "./stat-card"
+export * from "./sidebar-nav"
+export * from "./breadcrumbs"
+export * from "./page-container"
+export * from "./section"
+export * from "./sticky-footer-bar"

package/vendor/src/components/layout/section.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type SectionProps = React.ComponentProps<"section"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  padded?: boolean
+  bordered?: boolean
+}
+
+function Section({ title, description, actions, padded = true, bordered = false, className, children, ...props }: SectionProps) {
+  return (
+    <section data-slot="section" className={cn("grid gap-4", bordered && "rounded-lg border bg-card", padded && bordered && "p-4", className)} {...props}>
+      {(title || description || actions) && (
+        <div data-slot="section-header" className="flex flex-wrap items-start justify-between gap-3">
+          <div className="grid gap-1">
+            {title && <h2 className="text-lg font-semibold tracking-tight text-foreground">{title}</h2>}
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
+          </div>
+          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+        </div>
+      )}
+      <div data-slot="section-content">{children}</div>
+    </section>
+  )
+}
+
+export type ToolbarProps = React.ComponentProps<"div"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  filters?: React.ReactNode
+  actions?: React.ReactNode
+}
+
+function Toolbar({ title, description, filters, actions, className, children, ...props }: ToolbarProps) {
+  return (
+    <div data-slot="toolbar" className={cn("flex flex-wrap items-center justify-between gap-3", className)} {...props}>
+      {(title || description) && (
+        <div className="grid gap-0.5">
+          {title && <div className="font-medium text-foreground">{title}</div>}
+          {description && <div className="text-sm text-muted-foreground">{description}</div>}
+        </div>
+      )}
+      {children}
+      {(filters || actions) && (
+        <div className="flex flex-wrap items-center gap-2">
+          {filters}
+          {actions}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export type SplitLayoutProps = React.ComponentProps<"div"> & {
+  aside: React.ReactNode
+  asidePosition?: "start" | "end"
+  asideClassName?: string
+  contentClassName?: string
+}
+
+function SplitLayout({ aside, asidePosition = "end", asideClassName, contentClassName, className, children, ...props }: SplitLayoutProps) {
+  const asideNode = <aside data-slot="split-layout-aside" className={cn("min-w-0", asideClassName)}>{aside}</aside>
+  const contentNode = <main data-slot="split-layout-content" className={cn("min-w-0", contentClassName)}>{children}</main>
+
+  return (
+    <div data-slot="split-layout" className={cn("grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]", asidePosition === "start" && "lg:grid-cols-[320px_minmax(0,1fr)]", className)} {...props}>
+      {asidePosition === "start" ? asideNode : contentNode}
+      {asidePosition === "start" ? contentNode : asideNode}
+    </div>
+  )
+}
+
+export { Section, SplitLayout, Toolbar }

package/vendor/src/components/layout/sidebar-nav.tsx

@@ -0,0 +1,147 @@
+import * as React from "react"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type SidebarNavItem = {
+  key: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+  badge?: React.ReactNode
+  href?: string
+  active?: boolean
+  disabled?: boolean
+  hidden?: boolean
+  onSelect?: () => void
+}
+
+export type SidebarNavProps = React.ComponentProps<"nav"> & {
+  items: SidebarNavItem[]
+  collapsed?: boolean
+  itemClassName?: string
+  activeItemClassName?: string
+  renderItem?: (item: SidebarNavItem, element: React.ReactNode) => React.ReactNode
+  renderLink?: (props: React.ComponentProps<"a"> & { item: SidebarNavItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
+}
+
+function SidebarNav({
+  className,
+  items,
+  collapsed = false,
+  itemClassName,
+  activeItemClassName,
+  renderItem,
+  renderLink,
+  ...props
+}: SidebarNavProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <nav
+      data-slot="sidebar-nav"
+      data-collapsed={collapsed || undefined}
+      className={cn("grid gap-1", className)}
+      {...props}
+    >
+      {visibleItems.map((item) => {
+        const content = (
+          <>
+            {item.icon && <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>}
+            {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
+            {!collapsed && item.badge && (
+              <Badge variant="secondary" className="ml-auto h-5 shrink-0 px-1.5">
+                {item.badge}
+              </Badge>
+            )}
+          </>
+        )
+
+        const commonClassName = cn(
+          "group flex min-h-8 items-center gap-2 rounded-lg px-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[active=true]:bg-muted data-[active=true]:text-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+          collapsed && "justify-center px-0",
+          itemClassName,
+          item.active && activeItemClassName
+        )
+
+        const isInternalLink = item.href && item.href.startsWith("/")
+
+        const element = item.href && isInternalLink ? (
+          renderLink ? (
+            <React.Fragment key={item.key}>
+              {renderLink({
+                item,
+                href: item.href,
+                "data-active": item.active || undefined,
+                "data-disabled": item.disabled || undefined,
+                "aria-current": item.active ? "page" : undefined,
+                className: commonClassName,
+                onClick: (event) => {
+                  if (item.disabled) event.preventDefault()
+                  item.onSelect?.()
+                },
+                children: content,
+              })}
+            </React.Fragment>
+          ) : (
+            <a
+              key={item.key}
+              href={item.href}
+              data-active={item.active || undefined}
+              data-disabled={item.disabled || undefined}
+              aria-current={item.active ? "page" : undefined}
+              className={commonClassName}
+              onClick={(event) => {
+                if (item.disabled) event.preventDefault()
+                item.onSelect?.()
+              }}
+            >
+              {content}
+            </a>
+          )
+        ) : item.href ? (
+          <button
+            key={item.key}
+            type="button"
+            data-active={item.active || undefined}
+            data-disabled={item.disabled || undefined}
+            aria-current={item.active ? "page" : undefined}
+            className={cn("w-full text-left", commonClassName)}
+            onClick={() => {
+              if (item.disabled) return
+              const href = item.href
+              if (!href) return
+              item.onSelect?.()
+              if (href.startsWith("http")) {
+                window.open(href, "_blank", "noopener,noreferrer")
+                return
+              }
+              window.location.assign(href)
+            }}
+          >
+            {content}
+          </button>
+        ) : (
+          <button
+            key={item.key}
+            type="button"
+            data-active={item.active || undefined}
+            data-disabled={item.disabled || undefined}
+            disabled={item.disabled}
+            className={cn("w-full text-left", commonClassName)}
+            onClick={item.onSelect}
+          >
+            {content}
+          </button>
+        )
+
+        return renderItem ? (
+          <React.Fragment key={item.key}>{renderItem(item, element)}</React.Fragment>
+        ) : (
+          element
+        )
+      })}
+    </nav>
+  )
+}
+
+export { SidebarNav }

package/vendor/src/components/layout/stat-card.tsx

@@ -0,0 +1,88 @@
+import * as React from "react"
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type StatCardTrend = {
+  value: React.ReactNode
+  tone?: "success" | "warning" | "danger" | "muted" | "default"
+}
+
+export type StatCardProps = React.ComponentProps<typeof Card> & {
+  title?: React.ReactNode
+  value?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  action?: React.ReactNode
+  trend?: StatCardTrend
+  footer?: React.ReactNode
+  contentClassName?: string
+}
+
+const trendClassName: Record<NonNullable<StatCardTrend["tone"]>, string> = {
+  default: "text-foreground",
+  success: "text-emerald-600 dark:text-emerald-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  danger: "text-destructive",
+  muted: "text-muted-foreground",
+}
+
+function StatCard({
+  className,
+  title,
+  value,
+  description,
+  icon,
+  action,
+  trend,
+  footer,
+  contentClassName,
+  ...props
+}: StatCardProps) {
+  return (
+    <Card data-slot="stat-card" className={cn("min-w-0", className)} {...props}>
+      <CardHeader>
+        <div className="flex min-w-0 items-start justify-between gap-3">
+          <div className="min-w-0 space-y-1">
+            {title && <CardDescription className="truncate">{title}</CardDescription>}
+            {value && <CardTitle className="truncate text-2xl">{value}</CardTitle>}
+          </div>
+          {(icon || action) && (
+            <CardAction>
+              {action ?? (
+                <div className="flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                  {icon}
+                </div>
+              )}
+            </CardAction>
+          )}
+        </div>
+      </CardHeader>
+
+      {(description || trend || footer) && (
+        <CardContent className={cn("space-y-2", contentClassName)}>
+          {(description || trend) && (
+            <div className="flex flex-wrap items-center gap-2 text-sm">
+              {trend && (
+                <span className={cn("font-medium", trendClassName[trend.tone ?? "default"])}>
+                  {trend.value}
+                </span>
+              )}
+              {description && <span className="text-muted-foreground">{description}</span>}
+            </div>
+          )}
+          {footer}
+        </CardContent>
+      )}
+    </Card>
+  )
+}
+
+export { StatCard }