azamat-ui-kit-cli 0.2.2

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "azamat-ui-kit-cli",
+  "version": "0.2.2",
+  "description": "CLI for Azamat UI Kit source-copy, presets, and theme setup.",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "azamat-ui-kit": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "vendor",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "node ../../scripts/sync-cli-assets.mjs && tsup",
+    "clean": "node -e \"import('node:fs').then(fs => { fs.rmSync('dist', { recursive: true, force: true }); fs.rmSync('vendor', { recursive: true, force: true }); })\"",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "commander": "^15.0.0",
+    "execa": "^9.6.1",
+    "fs-extra": "^11.3.5",
+    "kolorist": "^1.8.0",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "~6.0.2"
+  }
+}

package/vendor/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "azamat-ui-kit",
+  "private": true
+}

package/vendor/src/components/actions/action-bar.tsx

@@ -0,0 +1,35 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type ActionBarProps = React.ComponentProps<"div"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  start?: React.ReactNode
+  end?: React.ReactNode
+  sticky?: boolean
+}
+
+function ActionBar({ title, description, start, end, sticky = false, className, children, ...props }: ActionBarProps) {
+  return (
+    <div
+      data-slot="action-bar"
+      className={cn("flex flex-wrap items-center justify-between gap-3 rounded-lg border bg-card p-3", sticky && "sticky bottom-4 z-20 shadow-lg", className)}
+      {...props}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        {start}
+        {(title || description) && (
+          <div className="grid min-w-0 gap-0.5">
+            {title && <div className="truncate text-sm font-medium text-foreground">{title}</div>}
+            {description && <div className="truncate text-xs text-muted-foreground">{description}</div>}
+          </div>
+        )}
+        {children}
+      </div>
+      {end && <div className="flex shrink-0 items-center gap-2">{end}</div>}
+    </div>
+  )
+}
+
+export { ActionBar }

package/vendor/src/components/actions/action-menu.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import { Loader2Icon, MoreHorizontalIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+
+export type ActionMenuItem = {
+  key: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+  shortcut?: React.ReactNode
+  disabled?: boolean
+  loading?: boolean
+  destructive?: boolean
+  hidden?: boolean
+  onSelect?: () => void | Promise<void>
+}
+
+export type ActionMenuProps = {
+  actions: ActionMenuItem[]
+  label?: React.ReactNode
+  trigger?: React.ReactElement
+  align?: "start" | "center" | "end"
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+  disabled?: boolean
+  contentClassName?: string
+  triggerClassName?: string
+  emptyLabel?: React.ReactNode
+}
+
+function ActionMenu({
+  actions,
+  label,
+  trigger,
+  align = "end",
+  side = "bottom",
+  sideOffset = 4,
+  disabled = false,
+  contentClassName,
+  triggerClassName,
+  emptyLabel = "No actions",
+}: ActionMenuProps) {
+  const visibleActions = actions.filter((action) => !action.hidden)
+  const [loadingKey, setLoadingKey] = React.useState<string | null>(null)
+
+  const handleSelect = async (action: ActionMenuItem) => {
+    if (action.disabled || action.loading || loadingKey) return
+
+    try {
+      setLoadingKey(action.key)
+      await action.onSelect?.()
+    } finally {
+      setLoadingKey(null)
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          trigger ?? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              disabled={disabled}
+              className={triggerClassName}
+            />
+          )
+        }
+      >
+        {!trigger && <MoreHorizontalIcon />}
+        <span className="sr-only">Open actions</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        className={cn("min-w-40", contentClassName)}
+      >
+        {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
+        {label && visibleActions.length > 0 && <DropdownMenuSeparator />}
+
+        {visibleActions.length === 0 && (
+          <DropdownMenuItem disabled>{emptyLabel}</DropdownMenuItem>
+        )}
+
+        {visibleActions.map((action) => {
+          const isLoading = action.loading || loadingKey === action.key
+
+          return (
+            <DropdownMenuItem
+              key={action.key}
+              disabled={action.disabled || isLoading}
+              variant={action.destructive ? "destructive" : "default"}
+              onClick={() => void handleSelect(action)}
+            >
+              {isLoading ? <Loader2Icon className="animate-spin" /> : action.icon}
+              <span className="min-w-0 flex-1 truncate">{action.label}</span>
+              {action.shortcut && (
+                <span className="ml-auto text-xs text-muted-foreground">{action.shortcut}</span>
+              )}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export { ActionMenu }

package/vendor/src/components/actions/button-group.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+type ButtonProps = React.ComponentProps<typeof Button>
+
+export type ButtonGroupItem = Omit<ButtonProps, "children"> & {
+  key: string
+  label: React.ReactNode
+}
+
+export type ButtonGroupProps = React.ComponentProps<"div"> & {
+  items?: ButtonGroupItem[]
+  attached?: boolean
+  size?: ButtonProps["size"]
+  variant?: ButtonProps["variant"]
+}
+
+function ButtonGroup({ items, attached = true, size = "sm", variant = "outline", className, children, ...props }: ButtonGroupProps) {
+  return (
+    <div
+      data-slot="button-group"
+      role="group"
+      className={cn("inline-flex items-center", !attached && "gap-2", className)}
+      {...props}
+    >
+      {items?.map(({ key, label, className: itemClassName, size: itemSize, variant: itemVariant, ...item }) => (
+        <Button
+          key={key}
+          size={itemSize ?? size}
+          variant={itemVariant ?? variant}
+          className={cn(
+            attached && "rounded-none first:rounded-l-md last:rounded-r-md -ml-px first:ml-0",
+            itemClassName
+          )}
+          {...item}
+        >
+          {label}
+        </Button>
+      ))}
+      {children}
+    </div>
+  )
+}
+
+export { ButtonGroup }

package/vendor/src/components/actions/copy-button.tsx

@@ -0,0 +1,91 @@
+import * as React from "react"
+import { CheckIcon, CopyIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+
+export type CopyButtonProps = Omit<React.ComponentProps<typeof Button>, "onClick"> & {
+  value: string
+  copiedLabel?: React.ReactNode
+  copyLabel?: React.ReactNode
+  copiedTimeout?: number
+  onCopied?: (value: string) => void
+  onCopyError?: (error: unknown) => void
+  showIcon?: boolean
+}
+
+async function copyToClipboard(value: string) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(value)
+    return
+  }
+
+  if (typeof document === "undefined") {
+    throw new Error("Clipboard is not available")
+  }
+
+  const textarea = document.createElement("textarea")
+  textarea.value = value
+  textarea.setAttribute("readonly", "")
+  textarea.style.position = "fixed"
+  textarea.style.left = "-9999px"
+  document.body.appendChild(textarea)
+  textarea.select()
+
+  try {
+    document.execCommand("copy")
+  } finally {
+    document.body.removeChild(textarea)
+  }
+}
+
+function CopyButton({
+  value,
+  copiedLabel = "Copied",
+  copyLabel = "Copy",
+  copiedTimeout = 1600,
+  onCopied,
+  onCopyError,
+  showIcon = true,
+  disabled,
+  children,
+  type = "button",
+  ...props
+}: CopyButtonProps) {
+  const [copied, setCopied] = React.useState(false)
+  const timeoutRef = React.useRef<number | undefined>(undefined)
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current)
+    }
+  }, [])
+
+  const handleCopy = React.useCallback(async () => {
+    try {
+      await copyToClipboard(value)
+      setCopied(true)
+      onCopied?.(value)
+
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current)
+      timeoutRef.current = window.setTimeout(() => setCopied(false), copiedTimeout)
+    } catch (error) {
+      onCopyError?.(error)
+    }
+  }, [copiedTimeout, onCopied, onCopyError, value])
+
+  return (
+    <Button
+      data-slot="copy-button"
+      data-copied={copied || undefined}
+      type={type}
+      disabled={disabled || !value}
+      onClick={handleCopy}
+      {...props}
+    >
+      {showIcon && (copied ? <CheckIcon data-icon="inline-start" /> : <CopyIcon data-icon="inline-start" />)}
+      {children ?? (copied ? copiedLabel : copyLabel)}
+    </Button>
+  )
+}
+
+export { CopyButton }

package/vendor/src/components/actions/copy-field.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import { CopyButton, type CopyButtonProps } from "@/components/actions/copy-button"
+import { cn } from "@/lib/utils"
+
+export type CopyFieldProps = React.ComponentProps<"div"> & {
+  value: string
+  label?: React.ReactNode
+  description?: React.ReactNode
+  copyButtonProps?: Omit<CopyButtonProps, "value">
+  monospace?: boolean
+}
+
+function CopyField({ value, label, description, copyButtonProps, monospace = true, className, ...props }: CopyFieldProps) {
+  return (
+    <div data-slot="copy-field" className={cn("grid gap-2", className)} {...props}>
+      {(label || description) && (
+        <div className="grid gap-0.5">
+          {label && <div className="text-sm font-medium text-foreground">{label}</div>}
+          {description && <div className="text-xs text-muted-foreground">{description}</div>}
+        </div>
+      )}
+      <div className="flex items-center gap-2 rounded-lg border bg-card p-2">
+        <div className={cn("min-w-0 flex-1 truncate text-sm text-muted-foreground", monospace && "font-mono")}>{value}</div>
+        <CopyButton value={value} size="sm" variant="outline" {...copyButtonProps} />
+      </div>
+    </div>
+  )
+}
+
+export { CopyField }

package/vendor/src/components/actions/floating-action-button.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { PlusIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type FloatingActionButtonProps = React.ComponentProps<typeof Button> & {
+  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left"
+  icon?: React.ReactNode
+}
+
+const positionClassName = {
+  "bottom-right": "bottom-6 right-6",
+  "bottom-left": "bottom-6 left-6",
+  "top-right": "right-6 top-6",
+  "top-left": "left-6 top-6",
+}
+
+function FloatingActionButton({ position = "bottom-right", icon, className, children, ...props }: FloatingActionButtonProps) {
+  return (
+    <Button
+      data-slot="floating-action-button"
+      size={children ? "lg" : "icon-lg"}
+      className={cn("fixed z-40 rounded-full shadow-lg", positionClassName[position], className)}
+      {...props}
+    >
+      {icon ?? <PlusIcon />}
+      {children}
+    </Button>
+  )
+}
+
+export { FloatingActionButton }

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

@@ -0,0 +1,7 @@
+export * from './action-menu'
+export * from './copy-button'
+export * from './copy-field'
+export * from './button-group'
+export * from './floating-action-button'
+export * from './action-bar'
+export * from './quick-action-grid'

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

@@ -0,0 +1,5 @@
+export * from "./action-menu"
+export * from "./copy-button"
+export * from "./copy-field"
+export * from "./button-group"
+export * from "./quick-action-grid"

package/vendor/src/components/actions/quick-action-grid.tsx

@@ -0,0 +1,162 @@
+import * as React from "react"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type QuickActionGridColumn = 1 | 2 | 3 | 4
+
+export type QuickActionGridItem = {
+  key: string
+  label: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  badge?: React.ReactNode
+  disabled?: boolean
+  hidden?: boolean
+  href?: string
+  external?: boolean
+  onSelect?: () => void
+  className?: string
+}
+
+export type QuickActionGridProps = React.ComponentProps<"div"> & {
+  items: QuickActionGridItem[]
+  columns?: QuickActionGridColumn
+  compact?: boolean
+  itemClassName?: string
+  renderLink?: (props: React.ComponentProps<"a"> & { item: QuickActionGridItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
+}
+
+const columnsClassName: Record<QuickActionGridColumn, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4",
+}
+
+function QuickActionGrid({
+  items,
+  columns = 3,
+  compact = false,
+  itemClassName,
+  renderLink,
+  className,
+  ...props
+}: QuickActionGridProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <div data-slot="quick-action-grid" className={cn("grid gap-3", columnsClassName[columns], className)} {...props}>
+      {visibleItems.map((item) => {
+        const content = (
+          <>
+            <div className="flex min-w-0 items-start justify-between gap-3">
+              <div className="flex min-w-0 items-start gap-3">
+                {item.icon && <span className="mt-0.5 shrink-0 rounded-lg bg-muted p-2 text-muted-foreground [&_svg]:size-4">{item.icon}</span>}
+                <div className="min-w-0 space-y-1">
+                  <div className="truncate text-sm font-medium text-foreground">{item.label}</div>
+                  {item.description && <div className="line-clamp-2 text-xs leading-5 text-muted-foreground">{item.description}</div>}
+                </div>
+              </div>
+              {item.badge && <Badge variant="outline" className="shrink-0 text-[10px]">{item.badge}</Badge>}
+            </div>
+          </>
+        )
+
+        const commonClassName = cn(
+          "min-w-0 rounded-xl border bg-card text-left text-card-foreground shadow-sm transition-all hover:border-primary/40 hover:bg-muted/20",
+          compact ? "p-3" : "p-4",
+          item.disabled && "pointer-events-none opacity-55",
+          itemClassName,
+          item.className
+        )
+
+        const isInternalLink = item.href?.startsWith("/")
+
+        if (item.href && isInternalLink) {
+          return (
+            renderLink ? (
+              <React.Fragment key={item.key}>
+                {renderLink({
+                  item,
+                  href: item.href,
+                  "data-slot": "quick-action-grid-item",
+                  "aria-disabled": item.disabled || undefined,
+                  className: commonClassName,
+                  onClick: (event) => {
+                    if (item.disabled) {
+                      event.preventDefault()
+                      return
+                    }
+                    item.onSelect?.()
+                  },
+                  children: content,
+                })}
+              </React.Fragment>
+            ) : (
+              <a
+                key={item.key}
+                data-slot="quick-action-grid-item"
+                href={item.href}
+                aria-disabled={item.disabled || undefined}
+                className={commonClassName}
+                onClick={(event) => {
+                  if (item.disabled) {
+                    event.preventDefault()
+                    return
+                  }
+                  item.onSelect?.()
+                }}
+              >
+                {content}
+              </a>
+            )
+          )
+        }
+
+        if (item.href) {
+          return (
+            <button
+              key={item.key}
+              data-slot="quick-action-grid-item"
+              type="button"
+              aria-disabled={item.disabled || undefined}
+              className={commonClassName}
+              onClick={() => {
+                if (item.disabled) return
+                item.onSelect?.()
+
+                const href = item.href
+                if (!href) return
+
+                if (item.external) {
+                  window.open(href, "_blank", "noopener,noreferrer")
+                  return
+                }
+
+                window.location.assign(href)
+              }}
+            >
+              {content}
+            </button>
+          )
+        }
+
+        return (
+          <button
+            key={item.key}
+            data-slot="quick-action-grid-item"
+            type="button"
+            disabled={item.disabled}
+            className={commonClassName}
+            onClick={item.onSelect}
+          >
+            {content}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { QuickActionGrid }