azamat-ui-kit-cli 0.2.2

package/vendor/src/components/inputs/slider.tsx

@@ -0,0 +1,149 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type SliderProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
+  value?: number
+  defaultValue?: number
+  onValueChange?: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  label?: React.ReactNode
+  description?: React.ReactNode
+  showValue?: boolean
+  formatValue?: (value: number) => React.ReactNode
+}
+
+function Slider({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  description,
+  showValue = false,
+  formatValue,
+  className,
+  disabled,
+  ...props
+}: SliderProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const currentValue = value ?? internalValue
+
+  const updateValue = (nextValue: number) => {
+    if (value === undefined) setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <div data-slot="slider" className={cn("grid gap-2", className)}>
+      {(label || description || showValue) && (
+        <div className="flex items-start justify-between gap-3">
+          <div className="grid gap-0.5">
+            {label && <label className="text-sm font-medium text-foreground">{label}</label>}
+            {description && <div className="text-xs text-muted-foreground">{description}</div>}
+          </div>
+          {showValue && (
+            <div className="text-sm font-medium text-muted-foreground">
+              {formatValue?.(currentValue) ?? currentValue}
+            </div>
+          )}
+        </div>
+      )}
+      <input
+        data-slot="slider-input"
+        type="range"
+        value={currentValue}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        className="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary disabled:cursor-not-allowed disabled:opacity-50"
+        onChange={(event) => updateValue(event.currentTarget.valueAsNumber)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export type RangeSliderValue = [number, number]
+
+export type RangeSliderProps = Omit<SliderProps, "value" | "defaultValue" | "onValueChange" | "showValue" | "formatValue"> & {
+  value?: RangeSliderValue
+  defaultValue?: RangeSliderValue
+  onValueChange?: (value: RangeSliderValue) => void
+  showValue?: boolean
+  formatValue?: (value: RangeSliderValue) => React.ReactNode
+}
+
+function RangeSlider({
+  value,
+  defaultValue = [0, 100],
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  description,
+  showValue = false,
+  formatValue,
+  className,
+  disabled,
+}: RangeSliderProps) {
+  const [internalValue, setInternalValue] = React.useState<RangeSliderValue>(defaultValue)
+  const currentValue = value ?? internalValue
+
+  const updateValue = (index: 0 | 1, nextPart: number) => {
+    const nextValue: RangeSliderValue = index === 0
+      ? [Math.min(nextPart, currentValue[1]), currentValue[1]]
+      : [currentValue[0], Math.max(nextPart, currentValue[0])]
+
+    if (value === undefined) setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <div data-slot="range-slider" className={cn("grid gap-2", className)}>
+      {(label || description || showValue) && (
+        <div className="flex items-start justify-between gap-3">
+          <div className="grid gap-0.5">
+            {label && <label className="text-sm font-medium text-foreground">{label}</label>}
+            {description && <div className="text-xs text-muted-foreground">{description}</div>}
+          </div>
+          {showValue && (
+            <div className="text-sm font-medium text-muted-foreground">
+              {formatValue?.(currentValue) ?? `${currentValue[0]} - ${currentValue[1]}`}
+            </div>
+          )}
+        </div>
+      )}
+      <div className="grid gap-2">
+        <input
+          type="range"
+          value={currentValue[0]}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          className="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary disabled:cursor-not-allowed disabled:opacity-50"
+          onChange={(event) => updateValue(0, event.currentTarget.valueAsNumber)}
+        />
+        <input
+          type="range"
+          value={currentValue[1]}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          className="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary disabled:cursor-not-allowed disabled:opacity-50"
+          onChange={(event) => updateValue(1, event.currentTarget.valueAsNumber)}
+        />
+      </div>
+    </div>
+  )
+}
+
+export { RangeSlider, Slider }

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

@@ -0,0 +1,104 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export type TagInputProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (value: string[]) => void
+  placeholder?: string
+  disabled?: boolean
+  readOnly?: boolean
+  maxTags?: number
+  allowDuplicates?: boolean
+  separators?: string[]
+  normalizeTag?: (tag: string) => string
+}
+
+function TagInput({
+  value,
+  defaultValue = [],
+  onValueChange,
+  placeholder = "Add tag...",
+  disabled = false,
+  readOnly = false,
+  maxTags,
+  allowDuplicates = false,
+  separators = [",", "Enter"],
+  normalizeTag = (tag) => tag.trim(),
+  className,
+  ...props
+}: TagInputProps) {
+  const controlled = value !== undefined
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const [inputValue, setInputValue] = React.useState("")
+  const tags = controlled ? value : internalValue
+
+  const setTags = React.useCallback(
+    (nextTags: string[]) => {
+      if (!controlled) setInternalValue(nextTags)
+      onValueChange?.(nextTags)
+    },
+    [controlled, onValueChange]
+  )
+
+  const addTag = React.useCallback(
+    (rawTag: string) => {
+      const tag = normalizeTag(rawTag)
+      if (!tag) return
+      if (maxTags !== undefined && tags.length >= maxTags) return
+      if (!allowDuplicates && tags.includes(tag)) return
+      setTags([...tags, tag])
+      setInputValue("")
+    },
+    [allowDuplicates, maxTags, normalizeTag, setTags, tags]
+  )
+
+  const removeTag = React.useCallback(
+    (tagToRemove: string) => {
+      setTags(tags.filter((tag) => tag !== tagToRemove))
+    },
+    [setTags, tags]
+  )
+
+  return (
+    <div data-slot="tag-input" className={cn("grid gap-2", className)} {...props}>
+      <div className={cn("flex min-h-10 flex-wrap items-center gap-2 rounded-md border bg-background px-2 py-2", disabled && "opacity-60", readOnly && "bg-muted/30")}>
+        {tags.map((tag) => (
+          <Badge key={tag} variant="secondary" className="gap-1 pr-1">
+            {tag}
+            {!readOnly && !disabled && (
+              <button type="button" className="rounded-full p-0.5 hover:bg-muted" onClick={() => removeTag(tag)}>
+                <XIcon className="size-3" />
+              </button>
+            )}
+          </Badge>
+        ))}
+        {!readOnly && (
+          <Input
+            value={inputValue}
+            disabled={disabled || (maxTags !== undefined && tags.length >= maxTags)}
+            placeholder={placeholder}
+            className="h-7 min-w-28 flex-1 border-0 bg-transparent px-1 shadow-none focus-visible:ring-0"
+            onChange={(event) => setInputValue(event.target.value)}
+            onBlur={() => addTag(inputValue)}
+            onKeyDown={(event) => {
+              if (separators.includes(event.key)) {
+                event.preventDefault()
+                addTag(inputValue)
+              }
+              if (event.key === "Backspace" && !inputValue && tags.length) {
+                removeTag(tags[tags.length - 1])
+              }
+            }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { TagInput }

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

@@ -0,0 +1,46 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type AppHeaderProps = React.ComponentProps<"header"> & {
+  left?: React.ReactNode
+  center?: React.ReactNode
+  right?: React.ReactNode
+  sticky?: boolean
+  heightClassName?: string
+}
+
+function AppHeader({
+  className,
+  left,
+  center,
+  right,
+  sticky = true,
+  heightClassName = "h-14",
+  children,
+  ...props
+}: AppHeaderProps) {
+  return (
+    <header
+      data-slot="app-header"
+      data-sticky={sticky || undefined}
+      className={cn(
+        "z-30 flex shrink-0 items-center gap-3 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80",
+        sticky && "sticky top-0",
+        heightClassName,
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          {left && <div className="flex min-w-0 flex-1 items-center gap-2">{left}</div>}
+          {center && <div className="hidden min-w-0 flex-1 items-center justify-center md:flex">{center}</div>}
+          {right && <div className="ml-auto flex shrink-0 items-center gap-2">{right}</div>}
+        </>
+      )}
+    </header>
+  )
+}
+
+export { AppHeader }

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

@@ -0,0 +1,243 @@
+import * as React from "react"
+import { MenuIcon, XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type AppShellSidebarWidth = "sm" | "default" | "lg" | "xl"
+export type AppShellAsideWidth = "sm" | "default" | "lg"
+
+export type AppShellProps = React.ComponentProps<"div"> & {
+  header?: React.ReactNode
+  sidebar?: React.ReactNode
+  aside?: React.ReactNode
+  footer?: React.ReactNode
+  sidebarCollapsed?: boolean
+  defaultSidebarCollapsed?: boolean
+  onSidebarCollapsedChange?: (collapsed: boolean) => void
+  mobileSidebarOpen?: boolean
+  defaultMobileSidebarOpen?: boolean
+  onMobileSidebarOpenChange?: (open: boolean) => void
+  sidebarWidth?: AppShellSidebarWidth
+  asideWidth?: AppShellAsideWidth
+  sidebarMode?: "fixed" | "static"
+  mobileSidebar?: React.ReactNode
+  mobileOverlay?: boolean
+  collapseBreakpoint?: "sm" | "md" | "lg" | "xl"
+  showMobileMenuButton?: boolean
+  mobileMenuLabel?: string
+  mobileCloseLabel?: string
+  contentClassName?: string
+  mainClassName?: string
+  mainWrapperClassName?: string
+  sidebarClassName?: string
+  mobileSidebarClassName?: string
+  asideClassName?: string
+}
+
+const sidebarWidthClassName: Record<AppShellSidebarWidth, string> = {
+  sm: "w-56",
+  default: "w-64",
+  lg: "w-72",
+  xl: "w-80",
+}
+
+const sidebarPaddingClassName: Record<AppShellSidebarWidth, string> = {
+  sm: "md:pl-56",
+  default: "md:pl-64",
+  lg: "md:pl-72",
+  xl: "md:pl-80",
+}
+
+const asideWidthClassName: Record<AppShellAsideWidth, string> = {
+  sm: "w-72",
+  default: "w-80",
+  lg: "w-96",
+}
+
+function useControllableState({
+  value,
+  defaultValue,
+  onChange,
+}: {
+  value?: boolean
+  defaultValue: boolean
+  onChange?: (value: boolean) => void
+}) {
+  const controlled = value !== undefined
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const currentValue = controlled ? value : internalValue
+
+  const setValue = React.useCallback(
+    (nextValue: boolean) => {
+      if (!controlled) {
+        setInternalValue(nextValue)
+      }
+
+      onChange?.(nextValue)
+    },
+    [controlled, onChange]
+  )
+
+  return [currentValue, setValue] as const
+}
+
+function AppShell({
+  className,
+  header,
+  sidebar,
+  aside,
+  footer,
+  sidebarCollapsed,
+  defaultSidebarCollapsed = false,
+  onSidebarCollapsedChange,
+  mobileSidebarOpen,
+  defaultMobileSidebarOpen = false,
+  onMobileSidebarOpenChange,
+  sidebarWidth = "default",
+  asideWidth = "default",
+  sidebarMode = "fixed",
+  mobileSidebar,
+  mobileOverlay = true,
+  showMobileMenuButton = true,
+  mobileMenuLabel = "Open navigation",
+  mobileCloseLabel = "Close navigation",
+  contentClassName,
+  mainClassName,
+  mainWrapperClassName,
+  sidebarClassName,
+  mobileSidebarClassName,
+  asideClassName,
+  children,
+  ...props
+}: AppShellProps) {
+  const [isSidebarCollapsed] = useControllableState({
+    value: sidebarCollapsed,
+    defaultValue: defaultSidebarCollapsed,
+    onChange: onSidebarCollapsedChange,
+  })
+  const [isMobileSidebarOpen, setMobileSidebarOpen] = useControllableState({
+    value: mobileSidebarOpen,
+    defaultValue: defaultMobileSidebarOpen,
+    onChange: onMobileSidebarOpenChange,
+  })
+  const renderedMobileSidebar = mobileSidebar ?? sidebar
+  const hasSidebar = Boolean(sidebar)
+  const fixedSidebar = sidebarMode === "fixed"
+
+  return (
+    <div
+      data-slot="app-shell"
+      data-sidebar-collapsed={isSidebarCollapsed || undefined}
+      data-mobile-sidebar-open={isMobileSidebarOpen || undefined}
+      className={cn("min-h-screen bg-[radial-gradient(circle_at_top,color-mix(in_oklch,var(--primary),transparent_92%)_0%,transparent_38%),var(--background)] text-foreground", className)}
+      {...props}
+    >
+      {hasSidebar && fixedSidebar && (
+        <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",
+            isSidebarCollapsed ? "w-16" : sidebarWidthClassName[sidebarWidth],
+            sidebarClassName
+          )}
+        >
+          {sidebar}
+        </div>
+      )}
+
+      {renderedMobileSidebar && (
+        <div
+          data-slot="app-shell-mobile-sidebar-root"
+          data-open={isMobileSidebarOpen || undefined}
+          className="md:hidden"
+        >
+          {mobileOverlay && isMobileSidebarOpen && (
+            <button
+              type="button"
+              aria-label={mobileCloseLabel}
+              className="fixed inset-0 z-40 bg-background/78 backdrop-blur-md"
+              onClick={() => setMobileSidebarOpen(false)}
+            />
+          )}
+
+          <div
+            data-slot="app-shell-mobile-sidebar"
+            className={cn(
+              "fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] flex-col border-r border-sidebar-border/70 bg-sidebar/98 text-sidebar-foreground shadow-[0_20px_60px_color-mix(in_oklch,var(--foreground),transparent_86%)] backdrop-blur transition-transform duration-200",
+              isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full",
+              mobileSidebarClassName
+            )}
+          >
+            <div className="flex h-14 items-center justify-end border-b border-sidebar-border/70 px-3">
+              <Button type="button" variant="ghost" size="icon-sm" aria-label={mobileCloseLabel} onClick={() => setMobileSidebarOpen(false)}>
+                <XIcon />
+              </Button>
+            </div>
+            <div className="min-h-0 flex-1 overflow-y-auto">{renderedMobileSidebar}</div>
+          </div>
+        </div>
+      )}
+
+      <div
+        data-slot="app-shell-content"
+        className={cn(
+          "flex min-h-screen min-w-0 flex-col",
+          hasSidebar && fixedSidebar && (isSidebarCollapsed ? "md:pl-16" : sidebarPaddingClassName[sidebarWidth]),
+          contentClassName
+        )}
+      >
+        {header && (
+          <div data-slot="app-shell-header" className="contents">
+            {showMobileMenuButton && renderedMobileSidebar ? (
+              <div className="md:hidden">
+                <div className="flex h-14 items-center border-b border-border/70 bg-background/88 px-4 backdrop-blur">
+                  <Button type="button" variant="ghost" size="icon-sm" aria-label={mobileMenuLabel} onClick={() => setMobileSidebarOpen(true)}>
+                    <MenuIcon />
+                  </Button>
+                </div>
+              </div>
+            ) : null}
+            {header}
+          </div>
+        )}
+
+        <div data-slot="app-shell-main-wrapper" className={cn("flex min-w-0 flex-1", mainWrapperClassName)}>
+          {hasSidebar && !fixedSidebar && (
+            <div
+              data-slot="app-shell-sidebar-static"
+              className={cn(
+                "hidden shrink-0 border-r border-sidebar-border/70 bg-sidebar/96 md:block",
+                isSidebarCollapsed ? "w-16" : sidebarWidthClassName[sidebarWidth],
+                sidebarClassName
+              )}
+            >
+              {sidebar}
+            </div>
+          )}
+
+          <main data-slot="app-shell-main" className={cn("min-w-0 flex-1", mainClassName)}>
+            {children}
+          </main>
+
+          {aside && (
+            <aside
+              data-slot="app-shell-aside"
+              className={cn(
+                "hidden shrink-0 border-l border-border/70 bg-card/45 xl:block",
+                asideWidthClassName[asideWidth],
+                asideClassName
+              )}
+            >
+              {aside}
+            </aside>
+          )}
+        </div>
+
+        {footer}
+      </div>
+    </div>
+  )
+}
+
+export { AppShell }