azamat-ui-kit-cli 0.3.13 → 0.3.14

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

@@ -3,66 +3,111 @@ 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 BreadcrumbItem = {
+  key: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+  href?: string
+  current?: boolean
+  currentLabel?: React.AriaAttributes["aria-current"]
+  onSelect?: () => void
+}
 
 export type BreadcrumbsProps = React.ComponentProps<"nav"> & {
   items: BreadcrumbItem[]
+  maxItems?: number
+  collapseLabel?: React.ReactNode
   separator?: React.ReactNode
   renderLink?: (props: React.ComponentProps<"a"> & { item: BreadcrumbItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
 }
 
+function collapseBreadcrumbItems(items: BreadcrumbItem[], maxItems: number, collapseLabel: React.ReactNode): BreadcrumbItem[] {
+  if (items.length <= maxItems || maxItems < 3) return items
+
+  const firstItem = items[0]
+  const trailingCount = Math.max(maxItems - 2, 1)
+  const trailingItems = items.slice(-trailingCount)
+
+  return [
+    firstItem,
+    {
+      key: "__collapsed__",
+      label: collapseLabel,
+    },
+    ...trailingItems,
+  ]
+}
+
 function Breadcrumbs({
   className,
   items,
+  maxItems,
+  collapseLabel = "…",
   separator = <ChevronRightIcon className="size-3.5" />,
   renderLink,
   ...props
 }: BreadcrumbsProps) {
-  return (
+  const resolvedItems = React.useMemo(
+    () => (typeof maxItems === "number" ? collapseBreadcrumbItems(items, maxItems, collapseLabel) : items),
+    [collapseLabel, items, maxItems]
+  )
+
+  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
-
+      {resolvedItems.map((item, index) => {
+        const isCollapsed = item.key === "__collapsed__"
+        const isLast = index === resolvedItems.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 ? (
+            {isCollapsed ? (
+              <span data-slot="breadcrumbs-collapsed" className="shrink-0 rounded-full border border-border/65 px-2 py-0.5 text-xs text-muted-foreground">
+                {item.label}
+              </span>
+            ) : item.href && !isCurrent ? (
               renderLink ? renderLink({
                 item,
                 href: item.href,
+                "data-slot": "breadcrumbs-link",
                 className: "truncate transition-colors hover:text-foreground",
                 onClick: () => item.onSelect?.(),
-                children: item.label,
+                children: (
+                  <span className="inline-flex min-w-0 items-center gap-1.5">
+                    {item.icon ? <span className="shrink-0">{item.icon}</span> : null}
+                    <span className="truncate">{item.label}</span>
+                  </span>
+                ),
               }) : (
                 <a
                   href={item.href}
+                  data-slot="breadcrumbs-link"
                   className="truncate transition-colors hover:text-foreground"
                   onClick={() => item.onSelect?.()}
                 >
-                  {item.label}
+                  <span className="inline-flex min-w-0 items-center gap-1.5">
+                    {item.icon ? <span className="shrink-0">{item.icon}</span> : null}
+                    <span className="truncate">{item.label}</span>
+                  </span>
                 </a>
               )
             ) : (
               <span
-                aria-current={isCurrent ? "page" : undefined}
-                className={cn("truncate", isCurrent && "font-medium text-foreground")}
-              >
-                {item.label}
-              </span>
-            )}
-          </React.Fragment>
+                data-slot="breadcrumbs-current"
+                aria-current={isCurrent ? (item.currentLabel ?? "page") : undefined}
+                className={cn("inline-flex min-w-0 items-center gap-1.5 truncate", isCurrent && "font-medium text-foreground")}
+              >
+                {item.icon ? <span className="shrink-0">{item.icon}</span> : null}
+                <span className="truncate">{item.label}</span>
+              </span>
+            )}
+          </React.Fragment>
         )
       })}
     </nav>

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

@@ -1,147 +1,335 @@
 import * as React from "react"
 
 import { Badge } from "@/components/ui/badge"
+import { Tooltip } from "@/components/ui/tooltip"
 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 SidebarNavItem = {
+  key: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+  badge?: React.ReactNode
+  href?: string
+  items?: SidebarNavItem[]
+  active?: boolean
+  current?: React.AriaAttributes["aria-current"]
+  disabled?: boolean
+  hidden?: boolean
+  sectionLabel?: React.ReactNode
+  defaultExpanded?: boolean
+  tooltip?: React.ReactNode
+  onSelect?: () => void
+}
+
 export type SidebarNavProps = React.ComponentProps<"nav"> & {
   items: SidebarNavItem[]
   collapsed?: boolean
+  tooltipOnCollapsed?: 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,
+
+function hasVisibleChildren(item: SidebarNavItem) {
+  return item.items?.some((child) => !child.hidden) ?? false
+}
+
+function isActiveItem(item: SidebarNavItem): boolean {
+  if (item.active) return true
+  return item.items?.some((child) => isActiveItem(child)) ?? false
+}
+
+function SidebarLeaf({
+  item,
+  collapsed,
+  depth,
+  itemClassName,
+  activeItemClassName,
+  renderLink,
+}: {
+  item: SidebarNavItem
+  collapsed: boolean
+  depth: number
+  itemClassName?: string
+  activeItemClassName?: string
+  renderLink?: SidebarNavProps["renderLink"]
+}) {
+  const currentValue: React.AriaAttributes["aria-current"] = item.current ?? (item.active ? "page" : undefined)
+  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 border border-transparent px-2 text-sm font-medium transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+    collapsed && "justify-center px-0",
+    depth > 0 && !collapsed && "pl-3",
+    itemClassName,
+    item.active && activeItemClassName
+  )
+
+  const wrapCollapsed = (node: React.ReactNode) =>
+    collapsed ? (
+      <Tooltip content={item.tooltip ?? item.label} side="right">
+        <span className="block">{node}</span>
+      </Tooltip>
+    ) : (
+      node
+    )
+
+  const internal = item.href && item.href.startsWith("/")
+
+  if (internal) {
+    if (renderLink) {
+      return wrapCollapsed(
+        renderLink({
+          item,
+          href: item.href,
+          "data-slot": "sidebar-nav-item",
+          "data-depth": String(depth),
+          "data-active": item.active || undefined,
+          "data-disabled": item.disabled || undefined,
+          "aria-current": currentValue,
+          className: commonClassName,
+          onClick: (event) => {
+            if (item.disabled) {
+              event.preventDefault()
+              return
+            }
+            item.onSelect?.()
+          },
+          children: content,
+        })
+      )
+    }
+
+    return wrapCollapsed(
+      <a
+        href={item.href}
+        data-slot="sidebar-nav-item"
+        data-depth={depth}
+        data-active={item.active || undefined}
+        data-disabled={item.disabled || undefined}
+        aria-current={currentValue}
+        className={commonClassName}
+        onClick={(event) => {
+          if (item.disabled) {
+            event.preventDefault()
+            return
+          }
+          item.onSelect?.()
+        }}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  if (item.href) {
+    return wrapCollapsed(
+      <button
+        type="button"
+        data-slot="sidebar-nav-item"
+        data-depth={depth}
+        data-active={item.active || undefined}
+        data-disabled={item.disabled || undefined}
+        aria-current={currentValue}
+        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>
+    )
+  }
+
+  return wrapCollapsed(
+    <button
+      type="button"
+      data-slot="sidebar-nav-item"
+      data-depth={depth}
+      data-active={item.active || undefined}
+      data-disabled={item.disabled || undefined}
+      aria-current={currentValue}
+      disabled={item.disabled}
+      className={cn("w-full text-left", commonClassName)}
+      onClick={item.onSelect}
+    >
+      {content}
+    </button>
+  )
+}
+
+function SidebarTree({
+  items,
+  collapsed,
+  depth,
   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?.()
-              }}
+}: {
+  items: SidebarNavItem[]
+  collapsed: boolean
+  depth: number
+  itemClassName?: string
+  activeItemClassName?: string
+  renderItem?: SidebarNavProps["renderItem"]
+  renderLink?: SidebarNavProps["renderLink"]
+}) {
+  return items.map((item) => {
+    if (item.hidden) return null
+
+    const showSectionLabel = !collapsed && depth === 0 && item.sectionLabel
+    const hasChildren = hasVisibleChildren(item)
+
+    if (!hasChildren) {
+      const element = (
+        <SidebarLeaf
+          item={item}
+          collapsed={collapsed}
+          depth={depth}
+          itemClassName={itemClassName}
+          activeItemClassName={activeItemClassName}
+          renderLink={renderLink}
+        />
+      )
+
+      return (
+        <React.Fragment key={item.key}>
+          {showSectionLabel ? (
+            <div
+              data-slot="sidebar-nav-group-label"
+              className="px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0"
             >
-              {content}
-            </a>
+              {item.sectionLabel}
+            </div>
+          ) : null}
+          {renderItem ? renderItem(item, element) : element}
+        </React.Fragment>
+      )
+    }
+
+    const isExpanded = item.defaultExpanded ?? isActiveItem(item)
+    const trigger = (
+      <summary
+        data-slot="sidebar-nav-group-trigger"
+        className={cn(
+          "flex min-h-8 list-none items-center gap-2 rounded-lg border border-transparent text-sm font-medium transition-[background-color,border-color,color,box-shadow]",
+          collapsed ? "justify-center px-0" : "px-2"
+        )}
+      >
+        {item.icon ? (
+          collapsed ? (
+            <Tooltip content={item.tooltip ?? item.label} side="right">
+              <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>
+            </Tooltip>
+          ) : (
+            <span className="shrink-0 [&_svg]:size-4">{item.icon}</span>
           )
-        ) : 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)
-            }}
+        ) : null}
+        {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
+        {!collapsed && item.badge ? (
+          <Badge variant="secondary" className="h-5 shrink-0 px-1.5">
+            {item.badge}
+          </Badge>
+        ) : null}
+        {!collapsed && (
+          <span
+            data-slot="sidebar-nav-group-chevron"
+            className="ml-auto text-xs text-muted-foreground transition-transform group-open/sidebar-nav-details:rotate-90"
+          >
+            ›
+          </span>
+        )}
+      </summary>
+    )
+
+    const groupElement = (
+      <div data-slot="sidebar-nav-group" data-depth={depth}>
+        {showSectionLabel ? (
+          <div
+            data-slot="sidebar-nav-group-label"
+            className="px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0"
+          >
+            {item.sectionLabel}
+          </div>
+        ) : null}
+        <details
+          data-slot="sidebar-nav-group-details"
+          open={isExpanded}
+          className="group/sidebar-nav-details"
+        >
+          {trigger}
+          <div
+            data-slot="sidebar-nav-group-content"
+            className={cn("mt-1 grid gap-1", !collapsed && "ml-3 border-l border-border/55 pl-2")}
           >
-            {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 }
+            <SidebarTree
+              items={item.items ?? []}
+              collapsed={collapsed}
+              depth={depth + 1}
+              itemClassName={itemClassName}
+              activeItemClassName={activeItemClassName}
+              renderItem={renderItem}
+              renderLink={renderLink}
+            />
+          </div>
+        </details>
+      </div>
+    )
+
+    return renderItem ? <React.Fragment key={item.key}>{renderItem(item, groupElement)}</React.Fragment> : <React.Fragment key={item.key}>{groupElement}</React.Fragment>
+  })
+}
+
+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}
+    >
+      <SidebarTree
+        items={visibleItems}
+        collapsed={collapsed}
+        depth={0}
+        itemClassName={itemClassName}
+        activeItemClassName={activeItemClassName}
+        renderItem={renderItem}
+        renderLink={renderLink}
+      />
+    </nav>
+  )
+}
+
+export { SidebarNav }

package/vendor/src/components/overlay/confirm-dialog.tsx

@@ -27,17 +27,28 @@ function ConfirmDialog({
   onConfirm,
   onOpenChange,
   ...props
-}: ConfirmDialogProps) {
-  const handleCancel = () => {
-    onCancel?.()
-    onOpenChange?.(false)
-  }
-
-  return (
-    <ModalShell
-      onOpenChange={onOpenChange}
-      footer={
-        <DialogActions>
+}: ConfirmDialogProps) {
+  const handleOpenChange = (open: boolean) => {
+    if (isLoading && open === false) {
+      return
+    }
+
+    onOpenChange?.(open)
+  }
+
+  const handleCancel = () => {
+    onCancel?.()
+    if (!isLoading) {
+      onOpenChange?.(false)
+    }
+  }
+
+  return (
+    <ModalShell
+      showCloseButton={!isLoading}
+      onOpenChange={handleOpenChange}
+      footer={
+        <DialogActions>
           <DialogActionButton
             type="button"
             variant="outline"
@@ -46,15 +57,15 @@ function ConfirmDialog({
           >
             {cancelText}
           </DialogActionButton>
-          <DialogActionButton
-            type="button"
-            variant={confirmVariant}
-            disabled={confirmDisabled}
-            isLoading={isLoading}
-            onClick={onConfirm}
-          >
-            {confirmText}
-          </DialogActionButton>
+          <DialogActionButton
+            type="button"
+            variant={confirmVariant}
+            disabled={confirmDisabled || isLoading}
+            isLoading={isLoading}
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </DialogActionButton>
         </DialogActions>
       }
       {...props}