azamat-ui-kit-cli 0.2.2

package/vendor/src/components/layout/sticky-footer-bar.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type StickyFooterBarProps = React.ComponentProps<"div"> & {
+  start?: React.ReactNode
+  end?: React.ReactNode
+}
+
+function StickyFooterBar({ start, end, className, children, ...props }: StickyFooterBarProps) {
+  return (
+    <div
+      data-slot="sticky-footer-bar"
+      className={cn("sticky bottom-0 z-30 flex flex-wrap items-center justify-between gap-3 border-t bg-background px-4 py-3 shadow-lg", className)}
+      {...props}
+    >
+      <div className="min-w-0 flex-1">{start ?? children}</div>
+      {end && <div className="flex shrink-0 items-center gap-2">{end}</div>}
+    </div>
+  )
+}
+
+export { StickyFooterBar }

package/vendor/src/components/layout/workspace-shell.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type WorkspaceShellProps = React.ComponentProps<"div"> & {
+  sidebar?: React.ReactNode
+  header?: React.ReactNode
+  footer?: React.ReactNode
+  breadcrumbs?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  aside?: React.ReactNode
+  sidebarWidth?: string
+  asideWidth?: string
+  contentClassName?: string
+  mainClassName?: string
+}
+
+function WorkspaceShell({ sidebar, header, footer, breadcrumbs, title, description, actions, aside, sidebarWidth = "280px", asideWidth = "360px", contentClassName, mainClassName, className, children, ...props }: WorkspaceShellProps) {
+  return (
+    <div data-slot="workspace-shell" className={cn("min-h-screen bg-background", className)} {...props}>
+      {header}
+      <div className="grid min-h-screen" style={{ gridTemplateColumns: sidebar ? `${sidebarWidth} minmax(0, 1fr)` : "minmax(0, 1fr)" }}>
+        {sidebar && <aside data-slot="workspace-shell-sidebar" className="border-r bg-card">{sidebar}</aside>}
+        <div className={cn("grid min-w-0 grid-rows-[auto_minmax(0,1fr)_auto]", contentClassName)}>
+          {(breadcrumbs || title || description || actions) && (
+            <div data-slot="workspace-shell-page-header" className="border-b bg-background px-6 py-4">
+              {breadcrumbs && <div className="mb-2">{breadcrumbs}</div>}
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div className="grid gap-1">
+                  {title && <h1 className="text-2xl font-semibold tracking-tight text-foreground">{title}</h1>}
+                  {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>
+          )}
+          <main data-slot="workspace-shell-main" className={cn("grid min-h-0 gap-4 p-6", mainClassName)} style={{ gridTemplateColumns: aside ? `minmax(0, 1fr) ${asideWidth}` : undefined }}>
+            <div className="min-w-0">{children}</div>
+            {aside && <aside data-slot="workspace-shell-aside" className="min-w-0">{aside}</aside>}
+          </main>
+          {footer}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { WorkspaceShell }

package/vendor/src/components/navigation/anchor-nav.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type AnchorNavItem = {
+  key: string
+  label: React.ReactNode
+  href: string
+  active?: boolean
+  disabled?: boolean
+}
+
+export type AnchorNavProps = React.ComponentProps<"nav"> & {
+  items: AnchorNavItem[]
+  orientation?: "vertical" | "horizontal"
+  title?: React.ReactNode
+}
+
+function AnchorNav({ items, orientation = "vertical", title, className, ...props }: AnchorNavProps) {
+  return (
+    <nav data-slot="anchor-nav" className={cn("grid gap-2 text-sm", orientation === "horizontal" && "flex flex-wrap", className)} {...props}>
+      {title && <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{title}</div>}
+      <div className={cn("grid gap-1", orientation === "horizontal" && "flex flex-wrap")}> 
+        {items.map((item) => (
+          <a
+            key={item.key}
+            href={item.disabled ? undefined : item.href}
+            aria-current={item.active ? "location" : undefined}
+            aria-disabled={item.disabled || undefined}
+            className={cn(
+              "rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              item.active && "bg-muted text-foreground",
+              item.disabled && "pointer-events-none opacity-50"
+            )}
+          >
+            {item.label}
+          </a>
+        ))}
+      </div>
+    </nav>
+  )
+}
+
+export { AnchorNav }

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

@@ -0,0 +1,4 @@
+export * from './pagination'
+export * from './page-tabs'
+export * from './stepper-tabs'
+export * from './anchor-nav'

package/vendor/src/components/navigation/page-tabs.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type PageTabItem<TValue extends string = string> = {
+  value: TValue
+  label: React.ReactNode
+  icon?: React.ReactNode
+  badge?: React.ReactNode
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export type PageTabsProps<TValue extends string = string> = React.ComponentProps<"div"> & {
+  value?: TValue
+  items: PageTabItem<TValue>[]
+  onValueChange?: (value: TValue, item: PageTabItem<TValue>) => void
+  variant?: "underline" | "pills" | "cards"
+  size?: "sm" | "default"
+}
+
+function PageTabs<TValue extends string = string>({
+  value,
+  items,
+  onValueChange,
+  variant = "underline",
+  size = "default",
+  className,
+  ...props
+}: PageTabsProps<TValue>) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <div data-slot="page-tabs" data-variant={variant} className={cn("flex min-w-0 flex-wrap gap-1 border-b", variant !== "underline" && "border-b-0", className)} {...props}>
+      {visibleItems.map((item) => {
+        const active = item.value === value
+        return (
+          <button
+            key={item.value}
+            type="button"
+            disabled={item.disabled}
+            data-slot="page-tab"
+            data-active={active || undefined}
+            className={cn(
+              "inline-flex min-w-0 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+              size === "sm" ? "h-8" : "h-10",
+              variant === "underline" && "rounded-none border-b-2 border-transparent text-muted-foreground hover:text-foreground",
+              variant === "underline" && active && "border-primary text-foreground",
+              variant === "pills" && "bg-muted/35 text-muted-foreground hover:bg-muted hover:text-foreground",
+              variant === "pills" && active && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground",
+              variant === "cards" && "border bg-card text-muted-foreground shadow-sm hover:border-primary/40 hover:text-foreground",
+              variant === "cards" && active && "border-primary/60 text-foreground"
+            )}
+            onClick={() => onValueChange?.(item.value, item)}
+          >
+            {item.icon}
+            <span className="truncate">{item.label}</span>
+            {item.badge !== undefined && <Badge variant={active && variant === "pills" ? "secondary" : "outline"}>{item.badge}</Badge>}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { PageTabs }

package/vendor/src/components/navigation/pagination.tsx

@@ -0,0 +1,179 @@
+import * as React from "react"
+import {
+  ChevronFirstIcon,
+  ChevronLastIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type PaginationItem = number | "ellipsis"
+
+export type PaginationLabels = {
+  first?: string
+  previous?: string
+  next?: string
+  last?: string
+  page?: (page: number) => string
+}
+
+export type PaginationProps = Omit<React.ComponentProps<"nav">, "onChange"> & {
+  page: number
+  pageCount: number
+  onPageChange: (page: number) => void
+  siblingCount?: number
+  showEdges?: boolean
+  disabled?: boolean
+  labels?: PaginationLabels
+}
+
+function range(start: number, end: number) {
+  const length = Math.max(end - start + 1, 0)
+  return Array.from({ length }, (_, index) => index + start)
+}
+
+function getPaginationItems(
+  page: number,
+  pageCount: number,
+  siblingCount = 1
+): PaginationItem[] {
+  const totalPageNumbers = siblingCount * 2 + 5
+
+  if (pageCount <= totalPageNumbers) {
+    return range(1, pageCount)
+  }
+
+  const leftSiblingIndex = Math.max(page - siblingCount, 1)
+  const rightSiblingIndex = Math.min(page + siblingCount, pageCount)
+
+  const shouldShowLeftEllipsis = leftSiblingIndex > 2
+  const shouldShowRightEllipsis = rightSiblingIndex < pageCount - 1
+
+  if (!shouldShowLeftEllipsis && shouldShowRightEllipsis) {
+    const leftItemCount = siblingCount * 2 + 3
+    return [...range(1, leftItemCount), "ellipsis", pageCount]
+  }
+
+  if (shouldShowLeftEllipsis && !shouldShowRightEllipsis) {
+    const rightItemCount = siblingCount * 2 + 3
+    return [1, "ellipsis", ...range(pageCount - rightItemCount + 1, pageCount)]
+  }
+
+  return [1, "ellipsis", ...range(leftSiblingIndex, rightSiblingIndex), "ellipsis", pageCount]
+}
+
+function Pagination({
+  className,
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  showEdges = true,
+  disabled = false,
+  labels,
+  ...props
+}: PaginationProps) {
+  const safePageCount = Math.max(pageCount, 1)
+  const currentPage = Math.min(Math.max(page, 1), safePageCount)
+  const items = getPaginationItems(currentPage, safePageCount, siblingCount)
+
+  const goToPage = (nextPage: number) => {
+    const clampedPage = Math.min(Math.max(nextPage, 1), safePageCount)
+
+    if (clampedPage !== currentPage) {
+      onPageChange(clampedPage)
+    }
+  }
+
+  return (
+    <nav
+      data-slot="pagination"
+      aria-label="Pagination"
+      className={cn("flex items-center justify-center gap-1.5 rounded-full border border-border/70 bg-background/88 p-1 shadow-sm backdrop-blur", className)}
+      {...props}
+    >
+      {showEdges && (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          disabled={disabled || currentPage <= 1}
+          aria-label={labels?.first ?? "First page"}
+          onClick={() => goToPage(1)}
+        >
+          <ChevronFirstIcon />
+        </Button>
+      )}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="icon-sm"
+        disabled={disabled || currentPage <= 1}
+        aria-label={labels?.previous ?? "Previous page"}
+        onClick={() => goToPage(currentPage - 1)}
+      >
+        <ChevronLeftIcon />
+      </Button>
+
+      {items.map((item, index) => {
+        if (item === "ellipsis") {
+          return (
+            <span
+              key={`ellipsis-${index}`}
+              data-slot="pagination-ellipsis"
+              className="flex size-8 items-center justify-center text-muted-foreground"
+            >
+              <MoreHorizontalIcon className="size-4" />
+              <span className="sr-only">More pages</span>
+            </span>
+          )
+        }
+
+        return (
+          <Button
+            key={item}
+            type="button"
+            variant={item === currentPage ? "default" : "outline"}
+            size="icon-sm"
+            disabled={disabled}
+            aria-current={item === currentPage ? "page" : undefined}
+            aria-label={labels?.page?.(item) ?? `Page ${item}`}
+            onClick={() => goToPage(item)}
+          >
+            {item}
+          </Button>
+        )
+      })}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="icon-sm"
+        disabled={disabled || currentPage >= safePageCount}
+        aria-label={labels?.next ?? "Next page"}
+        onClick={() => goToPage(currentPage + 1)}
+      >
+        <ChevronRightIcon />
+      </Button>
+
+      {showEdges && (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          disabled={disabled || currentPage >= safePageCount}
+          aria-label={labels?.last ?? "Last page"}
+          onClick={() => goToPage(safePageCount)}
+        >
+          <ChevronLastIcon />
+        </Button>
+      )}
+    </nav>
+  )
+}
+
+export { Pagination, getPaginationItems }

package/vendor/src/components/navigation/stepper-tabs.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type StepperTabItem<TValue extends string = string> = {
+  value: TValue
+  label: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  completed?: boolean
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export type StepperTabsProps<TValue extends string = string> = React.ComponentProps<"div"> & {
+  value?: TValue
+  items: StepperTabItem<TValue>[]
+  onValueChange?: (value: TValue, item: StepperTabItem<TValue>) => void
+  orientation?: "horizontal" | "vertical"
+  compact?: boolean
+}
+
+function StepperTabs<TValue extends string = string>({
+  value,
+  items,
+  onValueChange,
+  orientation = "horizontal",
+  compact = false,
+  className,
+  ...props
+}: StepperTabsProps<TValue>) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <div data-slot="stepper-tabs" data-orientation={orientation} className={cn(orientation === "vertical" ? "grid gap-2" : "flex flex-wrap gap-2", className)} {...props}>
+      {visibleItems.map((item, index) => {
+        const active = item.value === value
+        const completed = item.completed
+        return (
+          <button
+            key={item.value}
+            type="button"
+            disabled={item.disabled}
+            data-slot="stepper-tab"
+            data-active={active || undefined}
+            data-completed={completed || undefined}
+            className={cn(
+              "group flex min-w-0 items-start gap-3 rounded-xl border bg-card text-left shadow-sm transition-colors hover:border-primary/40 disabled:pointer-events-none disabled:opacity-55",
+              compact ? "p-3" : "p-4",
+              active && "border-primary/60 bg-primary/5"
+            )}
+            onClick={() => onValueChange?.(item.value, item)}
+          >
+            <span className={cn("flex shrink-0 items-center justify-center rounded-full border bg-background text-xs font-semibold", compact ? "size-7" : "size-8", completed && "border-primary bg-primary text-primary-foreground", active && !completed && "border-primary text-primary")}>{completed ? <CheckIcon className="size-4" /> : item.icon ?? index + 1}</span>
+            <span className="min-w-0 space-y-0.5">
+              <span className="block truncate text-sm font-medium text-foreground">{item.label}</span>
+              {item.description && <span className="block text-xs leading-5 text-muted-foreground">{item.description}</span>}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { StepperTabs }

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

@@ -0,0 +1 @@
+export * from "./toast"