azamat-ui-kit-cli 0.2.2 → 0.3.3

package/vendor/src/components/inputs/search-input.tsx

@@ -1,21 +1,72 @@
 import * as React from "react"
-import { SearchIcon } from "lucide-react"
+import { LoaderCircleIcon, SearchIcon } from "lucide-react"
 
 import { ClearableInput, type ClearableInputProps } from "@/components/inputs/clearable-input"
 
-export type SearchInputProps = Omit<ClearableInputProps, "leadingIcon" | "type"> & {
+export type SearchInputProps = Omit<ClearableInputProps, "leadingIcon" | "type" | "onValueChange"> & {
   searchIcon?: React.ReactNode
+  loading?: boolean
+  loadingLabel?: string
+  resultCount?: number
+  shortcut?: React.ReactNode
+  debounceMs?: number
+  onValueChange?: (value: string) => void
+  onDebouncedValueChange?: (value: string) => void
 }
 
 const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ searchIcon, placeholder = "Search...", inputMode = "search", ...props }, ref) => {
+  (
+    {
+      searchIcon,
+      loading = false,
+      loadingLabel = "Searching",
+      resultCount,
+      shortcut,
+      debounceMs,
+      value,
+      onValueChange,
+      onDebouncedValueChange,
+      placeholder = "Search...",
+      inputMode = "search",
+      trailing,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const stringValue = value == null ? "" : String(value)
+
+    React.useEffect(() => {
+      if (debounceMs == null || !onDebouncedValueChange) return
+      const timeoutId = window.setTimeout(() => onDebouncedValueChange(stringValue), debounceMs)
+      return () => window.clearTimeout(timeoutId)
+    }, [debounceMs, onDebouncedValueChange, stringValue])
+
+    const meta = (
+      <span data-slot="search-input-meta" className="inline-flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
+        {loading ? (
+          <span aria-live="polite" className="inline-flex items-center gap-1.5">
+            <LoaderCircleIcon className="size-3.5 animate-spin" aria-hidden="true" />
+            <span className="sr-only">{loadingLabel}</span>
+          </span>
+        ) : null}
+        {typeof resultCount === "number" ? <span>{resultCount}</span> : null}
+        {shortcut ? <span className="rounded-md border border-border/80 bg-muted/60 px-1.5 py-0.5 font-mono">{shortcut}</span> : null}
+        {trailing}
+      </span>
+    )
+
     return (
       <ClearableInput
         ref={ref}
         type="search"
         inputMode={inputMode}
         placeholder={placeholder}
+        value={value}
+        disabled={disabled || loading}
         leadingIcon={searchIcon ?? <SearchIcon />}
+        trailing={meta}
+        onValueChange={onValueChange}
         {...props}
       />
     )

package/vendor/src/components/inputs/simple-select.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { CheckIcon, LoaderCircleIcon, SearchIcon, XIcon } from "lucide-react"
 
 import {
   Select,
@@ -14,6 +15,7 @@ export type SimpleSelectOption = {
   value: string
   disabled?: boolean
   description?: React.ReactNode
+  keywords?: string[]
 }
 
 export type SimpleSelectProps = Omit<
@@ -21,13 +23,32 @@ export type SimpleSelectProps = Omit<
   "value" | "onValueChange"
 > & {
   value?: string
-  onValueChange?: (value: string) => void
+  onValueChange?: (value: string | undefined) => void
   options: SimpleSelectOption[]
   placeholder?: string
+  searchPlaceholder?: string
+  emptyLabel?: React.ReactNode
+  clearLabel?: string
   size?: "sm" | "default"
+  clearable?: boolean
+  searchable?: boolean
+  loading?: boolean
+  loadingLabel?: React.ReactNode
+  disabled?: boolean
   triggerClassName?: string
   contentClassName?: string
   itemClassName?: string
+  searchClassName?: string
+  renderOption?: (option: SimpleSelectOption, state: { selected: boolean }) => React.ReactNode
+}
+
+function optionMatchesSearch(option: SimpleSelectOption, search: string) {
+  const normalized = search.trim().toLowerCase()
+  if (!normalized) return true
+
+  const labelText = typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : option.value
+  const haystack = [labelText, option.value, ...(option.keywords ?? [])].join(" ").toLowerCase()
+  return haystack.includes(normalized)
 }
 
 function SimpleSelect({
@@ -35,35 +56,102 @@ function SimpleSelect({
   onValueChange,
   options,
   placeholder = "Select",
+  searchPlaceholder = "Search options...",
+  emptyLabel = "No options found",
+  clearLabel = "Clear selection",
   size = "default",
+  clearable = false,
+  searchable = false,
+  loading = false,
+  loadingLabel = "Loading options...",
+  disabled = false,
   triggerClassName,
   contentClassName,
   itemClassName,
+  searchClassName,
+  renderOption,
   ...props
 }: SimpleSelectProps) {
+  const [search, setSearch] = React.useState("")
+  const selectedOption = options.find((option) => option.value === value)
+  const filteredOptions = options.filter((option) => optionMatchesSearch(option, search))
+
   return (
-    <Select value={value} onValueChange={(val) => onValueChange?.(val as string)} {...props}>
-      <SelectTrigger size={size} className={cn("w-full", triggerClassName)}>
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent className={contentClassName}>
-        {options.map((option) => (
-          <SelectItem
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
-            className={itemClassName}
+    <Select value={value} onValueChange={(val) => onValueChange?.(val as string)} disabled={disabled || loading} {...props}>
+      <SelectTrigger
+        size={size}
+        className={cn(
+          "w-full border-border/80 bg-background/96 shadow-[0_1px_0_rgba(255,255,255,0.06)]",
+          triggerClassName
+        )}
+      >
+        <SelectValue placeholder={placeholder}>{selectedOption?.label}</SelectValue>
+        {loading ? <LoaderCircleIcon className="size-4 animate-spin text-muted-foreground" /> : null}
+        {clearable && value && !disabled && !loading ? (
+          <button
+            type="button"
+            aria-label={clearLabel}
+            className="ml-1 rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              onValueChange?.(undefined)
+            }}
           >
-            <span className="flex min-w-0 flex-col">
-              <span className="truncate">{option.label}</span>
-              {option.description && (
-                <span className="truncate text-xs text-muted-foreground">
-                  {option.description}
-                </span>
-              )}
-            </span>
-          </SelectItem>
-        ))}
+            <XIcon className="size-3.5" />
+          </button>
+        ) : null}
+      </SelectTrigger>
+      <SelectContent
+        className={cn(
+          "border-border/80 bg-popover/98 shadow-[0_20px_60px_rgba(15,23,42,0.18)] backdrop-blur",
+          contentClassName
+        )}
+      >
+        {searchable ? (
+          <div className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] border border-border/70 bg-background/95 px-2.5 py-2 text-sm">
+            <SearchIcon className="size-4 text-muted-foreground" />
+            <input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={searchPlaceholder}
+              className={cn("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", searchClassName)}
+            />
+          </div>
+        ) : null}
+
+        {loading ? (
+          <div className="flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">
+            <LoaderCircleIcon className="size-4 animate-spin" />
+            {loadingLabel}
+          </div>
+        ) : filteredOptions.length === 0 ? (
+          <div className="rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">{emptyLabel}</div>
+        ) : (
+          filteredOptions.map((option) => {
+            const selected = option.value === value
+            return (
+              <SelectItem
+                key={option.value}
+                value={option.value}
+                disabled={option.disabled}
+                className={cn("rounded-[min(var(--radius-lg),14px)]", itemClassName)}
+              >
+                {renderOption ? (
+                  renderOption(option, { selected })
+                ) : (
+                  <span className="flex min-w-0 flex-1 flex-col">
+                    <span className="flex min-w-0 items-center gap-2">
+                      <span className="truncate">{option.label}</span>
+                      {selected ? <CheckIcon className="ml-auto size-3.5 text-primary" /> : null}
+                    </span>
+                    {option.description && <span className="truncate text-xs text-muted-foreground">{option.description}</span>}
+                  </span>
+                )}
+              </SelectItem>
+            )
+          })
+        )}
       </SelectContent>
     </Select>
   )

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

@@ -137,7 +137,7 @@ function AppShell({
         <div
           data-slot="app-shell-sidebar"
           className={cn(
-            "fixed inset-y-0 left-0 z-40 hidden border-r border-sidebar-border/70 bg-sidebar/96 backdrop-blur transition-[width] duration-200 md:block",
+            "fixed inset-y-0 left-0 z-40 hidden border-r border-sidebar-border/70 bg-sidebar/96 shadow-[0_24px_80px_rgba(15,23,42,0.08)] backdrop-blur transition-[width] duration-200 md:block",
             isSidebarCollapsed ? "w-16" : sidebarWidthClassName[sidebarWidth],
             sidebarClassName
           )}
@@ -224,7 +224,7 @@ function AppShell({
             <aside
               data-slot="app-shell-aside"
               className={cn(
-                "hidden shrink-0 border-l border-border/70 bg-card/45 xl:block",
+                "hidden shrink-0 border-l border-border/70 bg-card/55 backdrop-blur xl:block",
                 asideWidthClassName[asideWidth],
                 asideClassName
               )}

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

@@ -5,7 +5,8 @@ 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"
+export * from "./page-container"
+export * from "./section"
+export * from "./stack"
+export * from "./sticky-footer-bar"
+export * from "./workspace-shell"

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

@@ -1,60 +1,104 @@
 import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
 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
-}
+const pageHeaderVariants = cva("flex flex-col border transition-[background-color,border-color,box-shadow]", {
+  variants: {
+    variant: {
+      default: "border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/5",
+      elevated: "border-border/70 bg-card shadow-[0_1px_2px_rgba(15,23,42,0.06),0_18px_45px_rgba(15,23,42,0.08)] ring-1 ring-foreground/5",
+      outline: "border-border bg-transparent shadow-none",
+      ghost: "border-transparent bg-transparent shadow-none",
+      soft: "border-transparent bg-muted/45 shadow-none",
+    },
+    size: {
+      sm: "gap-3 rounded-[var(--radius-2xl)] p-4",
+      default: "gap-4 rounded-[var(--radius-3xl)] p-5",
+      lg: "gap-5 rounded-[calc(var(--radius-3xl)*1.1)] p-6",
+    },
+    tone: {
+      neutral: "",
+      info: "border-blue-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.03_235)_28%),var(--card))]",
+      success: "border-emerald-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.04_155)_30%),var(--card))]",
+      warning: "border-amber-500/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.05_85)_30%),var(--card))]",
+      danger: "border-destructive/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),var(--destructive)_8%),var(--card))]",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+    tone: "neutral",
+  },
+})
+
+export type PageHeaderProps = React.ComponentProps<"div"> &
+  VariantProps<typeof pageHeaderVariants> & {
+    title?: React.ReactNode
+    description?: React.ReactNode
+    eyebrow?: React.ReactNode
+    breadcrumbs?: React.ReactNode
+    actions?: React.ReactNode
+    meta?: React.ReactNode
+    leading?: React.ReactNode
+    footer?: React.ReactNode
+    sticky?: boolean
+    titleClassName?: string
+    descriptionClassName?: string
+    actionsClassName?: string
+  }
 
 function PageHeader({
   className,
+  variant,
+  size,
+  tone,
   title,
   description,
   eyebrow,
   breadcrumbs,
   actions,
   meta,
+  leading,
+  footer,
   sticky = false,
+  titleClassName,
+  descriptionClassName,
+  actionsClassName,
   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>
+      data-slot="page-header"
+      data-sticky={sticky || undefined}
+      className={cn(
+        pageHeaderVariants({ variant, size, tone }),
+        sticky && "sticky top-0 z-30 bg-background/92 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="flex min-w-0 gap-4">
+          {leading ? <div className="shrink-0">{leading}</div> : null}
+          <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={cn("truncate text-3xl font-semibold tracking-[-0.03em] text-foreground", size === "sm" && "text-2xl", size === "lg" && "text-4xl", titleClassName)}>{title}</h1>}
+            {description && <p className={cn("max-w-3xl text-sm leading-7 text-muted-foreground", descriptionClassName)}>{description}</p>}
+            {meta && <div className="pt-1 text-sm text-muted-foreground">{meta}</div>}
+          </div>
+        </div>
+
+        {actions && <div className={cn("flex shrink-0 flex-wrap items-center gap-2.5", actionsClassName)}>{actions}</div>}
+      </div>
 
       {children}
+      {footer && <div data-slot="page-header-footer" className="border-t border-border/70 pt-4">{footer}</div>}
     </div>
   )
 }
 
-export { PageHeader }
+export { PageHeader, pageHeaderVariants }

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

@@ -1,10 +1,12 @@
-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 "./app-shell"
+export * from "./app-header"
+export * from "./app-sidebar"
+export * from "./page-header"
+export * from "./section-header"
+export * from "./stat-card"
+export * from "./sidebar-nav"
+export * from "./breadcrumbs"
+export * from "./page-container"
+export * from "./section"
+export * from "./stack"
+export * from "./sticky-footer-bar"

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

@@ -0,0 +1,56 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type SectionHeaderProps = React.ComponentProps<"div"> & {
+  eyebrow?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  meta?: React.ReactNode
+  align?: "start" | "center"
+  size?: "sm" | "default" | "lg"
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+const titleSizeClassName = {
+  sm: "text-xl",
+  default: "text-2xl",
+  lg: "text-3xl",
+}
+
+function SectionHeader({
+  className,
+  eyebrow,
+  title,
+  description,
+  actions,
+  meta,
+  align = "start",
+  size = "default",
+  titleClassName,
+  descriptionClassName,
+  children,
+  ...props
+}: SectionHeaderProps) {
+  return (
+    <div
+      data-slot="section-header"
+      data-align={align}
+      className={cn("flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", align === "center" && "text-center sm:flex-col sm:items-center", className)}
+      {...props}
+    >
+      <div className={cn("min-w-0 space-y-2", align === "center" && "mx-auto max-w-2xl")}> 
+        {eyebrow ? <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">{eyebrow}</p> : null}
+        {title ? <h2 className={cn("font-semibold tracking-[-0.03em] text-foreground", titleSizeClassName[size], titleClassName)}>{title}</h2> : null}
+        {description ? <p className={cn("max-w-3xl text-sm leading-7 text-muted-foreground", descriptionClassName)}>{description}</p> : null}
+        {meta ? <div className="text-sm text-muted-foreground">{meta}</div> : null}
+        {children}
+      </div>
+      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2.5">{actions}</div> : null}
+    </div>
+  )
+}
+
+export { SectionHeader }

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

@@ -0,0 +1,106 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type StackGap = "xs" | "sm" | "md" | "lg" | "xl"
+type InlineAlign = "start" | "center" | "end" | "stretch"
+type InlineJustify = "start" | "center" | "end" | "between"
+type GridColumns = 1 | 2 | 3 | 4 | 5 | 6
+
+const stackGapClassName: Record<StackGap, string> = {
+  xs: "gap-2",
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8",
+}
+
+const inlineAlignClassName: Record<InlineAlign, string> = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+}
+
+const inlineJustifyClassName: Record<InlineJustify, string> = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+}
+
+const gridColumnClassName: Record<GridColumns, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+}
+
+export type StackProps = React.ComponentProps<"div"> & {
+  gap?: StackGap
+  splitAfter?: React.ReactNode
+}
+
+function Stack({ gap = "md", splitAfter, className, children, ...props }: StackProps) {
+  return (
+    <div data-slot="stack" className={cn("flex min-w-0 flex-col", stackGapClassName[gap], className)} {...props}>
+      {children}
+      {splitAfter ? <div data-slot="stack-split-after">{splitAfter}</div> : null}
+    </div>
+  )
+}
+
+export type InlineProps = React.ComponentProps<"div"> & {
+  gap?: StackGap
+  align?: InlineAlign
+  justify?: InlineJustify
+  wrap?: boolean
+}
+
+export type GridProps = React.ComponentProps<"div"> & {
+  gap?: StackGap
+  columns?: GridColumns
+}
+
+function Inline({
+  gap = "md",
+  align = "center",
+  justify = "start",
+  wrap = true,
+  className,
+  children,
+  ...props
+}: InlineProps) {
+  return (
+    <div
+      data-slot="inline"
+      className={cn(
+        "flex min-w-0",
+        stackGapClassName[gap],
+        inlineAlignClassName[align],
+        inlineJustifyClassName[justify],
+        wrap ? "flex-wrap" : "flex-nowrap",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Grid({ gap = "md", columns = 2, className, children, ...props }: GridProps) {
+  return (
+    <div
+      data-slot="grid"
+      className={cn("grid min-w-0", stackGapClassName[gap], gridColumnClassName[columns], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { Grid, Inline, Stack }