azamat-ui-kit-cli 0.2.2 → 0.3.4

package/vendor/src/components/calendar/date-range-picker.tsx

@@ -9,9 +9,11 @@ import { parseDateKey } from "./date-utils"
 
 export type DateRangePickerValue = CalendarDateRange
 
-export type DateRangePickerLabels = CalendarProps["labels"] & {
-  placeholder?: string
-}
+export type DateRangePickerLabels = CalendarProps["labels"] & {
+  placeholder?: string
+  apply?: React.ReactNode
+  clear?: React.ReactNode
+}
 
 export type DateRangePickerProps = Omit<
   CalendarProps,
@@ -21,11 +23,13 @@ export type DateRangePickerProps = Omit<
   onValueChange?: (value: DateRangePickerValue) => void
   labels?: DateRangePickerLabels
   placeholder?: string
-  disabled?: boolean
-  formatValue?: (value: string) => React.ReactNode
-  triggerClassName?: string
-  contentClassName?: string
-}
+  disabled?: boolean
+  formatValue?: (value: string) => React.ReactNode
+  closeOnSelect?: boolean
+  showFooter?: boolean
+  triggerClassName?: string
+  contentClassName?: string
+}
 
 function defaultFormatValue(value: string) {
   const date = parseDateKey(value)
@@ -33,63 +37,138 @@ function defaultFormatValue(value: string) {
   return new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(date)
 }
 
-function DateRangePicker({
-  className,
-  value,
+function DateRangePicker({
+  className,
+  value,
   onValueChange,
   labels,
-  placeholder,
-  disabled = false,
-  formatValue = defaultFormatValue,
-  triggerClassName,
-  contentClassName,
-  ...calendarProps
-}: DateRangePickerProps) {
-  const [open, setOpen] = React.useState(false)
-  const from = value?.from ?? ""
-  const to = value?.to ?? ""
-  const hasValue = Boolean(from || to)
-
-  const label = from && to
-    ? `${formatValue(from)} - ${formatValue(to)}`
+  placeholder,
+  disabled = false,
+  formatValue = defaultFormatValue,
+  closeOnSelect = true,
+  showFooter = false,
+  triggerClassName,
+  contentClassName,
+  numberOfMonths = 2,
+  pagedNavigation = true,
+  ...calendarProps
+}: DateRangePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [draftValue, setDraftValue] = React.useState<DateRangePickerValue>(value ?? {})
+  const from = value?.from ?? ""
+  const to = value?.to ?? ""
+  const hasValue = Boolean(from || to)
+  const activeValue = showFooter ? draftValue : value
+  const activeFrom = activeValue?.from ?? ""
+  const activeTo = activeValue?.to ?? ""
+  const hasDraftValue = Boolean(activeFrom || activeTo)
+
+  const label = from && to
+    ? `${formatValue(from)} - ${formatValue(to)}`
     : from
-      ? `${formatValue(from)} - ...`
-      : placeholder ?? labels?.placeholder ?? "Select date range"
-
-  const handleRangeChange = (nextValue: DateRangePickerValue) => {
-    onValueChange?.(nextValue)
-    if (nextValue.from && nextValue.to) {
-      setOpen(false)
-    }
-  }
-
-  return (
-    <div data-slot="date-range-picker" className={cn("w-full", className)}>
+      ? `${formatValue(from)} - ...`
+      : placeholder ?? labels?.placeholder ?? "Select date range"
+
+  const draftLabel = activeFrom && activeTo
+    ? `${formatValue(activeFrom)} - ${formatValue(activeTo)}`
+    : activeFrom
+      ? `${formatValue(activeFrom)} - ...`
+      : labels?.placeholder ?? "Select date range"
+
+  React.useEffect(() => {
+    if (open && showFooter) {
+      setDraftValue(value ?? {})
+    }
+  }, [open, showFooter, value])
+
+  const handleRangeChange = (nextValue: DateRangePickerValue) => {
+    if (showFooter) {
+      setDraftValue(nextValue)
+      return
+    }
+
+    onValueChange?.(nextValue)
+    if (closeOnSelect && nextValue.from && nextValue.to) {
+      setOpen(false)
+    }
+  }
+
+  const applyDraftValue = () => {
+    onValueChange?.(draftValue)
+    setOpen(false)
+  }
+
+  const clearDraftValue = () => {
+    const nextValue = {}
+
+    if (showFooter) {
+      setDraftValue(nextValue)
+      return
+    }
+
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <div data-slot="date-range-picker" className={cn("w-full", className)}>
       <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger
-          render={
-            <Button
-              type="button"
-              variant="outline"
-              disabled={disabled}
-              className={cn("w-full justify-start text-left font-normal", !hasValue && "text-muted-foreground", triggerClassName)}
-            />
-          }
-        >
+        <PopoverTrigger
+          render={
+            <Button
+              type="button"
+              variant="outline"
+              disabled={disabled}
+              className={cn(
+                "min-h-11 w-full justify-start rounded-[min(var(--radius-xl),16px)] border-border/80 bg-background/96 text-left font-normal shadow-[0_1px_0_rgba(255,255,255,0.06)]",
+                !hasValue && "text-muted-foreground",
+                triggerClassName
+              )}
+            />
+          }
+        >
           <CalendarIcon data-icon="inline-start" />
           <span className="min-w-0 flex-1 truncate">{label}</span>
         </PopoverTrigger>
-        <PopoverContent align="start" className={cn("w-auto p-0", contentClassName)}>
-          <Calendar
-            mode="range"
-            range={value}
-            onRangeChange={handleRangeChange}
-            labels={labels}
-            {...calendarProps}
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
+        <PopoverContent
+          align="start"
+          className={cn(
+            "w-auto rounded-[var(--radius-2xl)] border-border/80 bg-popover/98 p-0 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur",
+            contentClassName
+          )}
+        >
+          <Calendar
+            mode="range"
+            range={activeValue}
+            onRangeChange={handleRangeChange}
+            labels={labels}
+            numberOfMonths={numberOfMonths}
+            pagedNavigation={pagedNavigation}
+            {...calendarProps}
+          />
+          {showFooter && (
+            <div className="flex flex-wrap items-center justify-between gap-3 border-t border-border/70 bg-muted/18 px-4 py-3">
+              <div className="min-w-0 text-sm text-muted-foreground">
+                <span className="block truncate">{draftLabel}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button type="button" variant="ghost" size="sm" className="rounded-full" onClick={clearDraftValue}>
+                  {labels?.clear ?? "Clear"}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  className="rounded-full"
+                  disabled={!hasDraftValue}
+                  onClick={applyDraftValue}
+                >
+                  {labels?.apply ?? "Apply"}
+                </Button>
+              </div>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
   )
 }
 

package/vendor/src/components/charts/charts.tsx

@@ -85,12 +85,16 @@ export type ChartFrameProps = React.ComponentProps<typeof Card> & {
   action?: React.ReactNode
 }
 
-function ChartFrame({ title, description, action, className, children, ...props }: ChartFrameProps) {
-  return (
-    <Card data-slot="chart-frame" className={className} {...props}>
-      {(title || description || action) && (
-        <CardHeader className="flex flex-row items-start justify-between gap-3">
-          <div className="grid gap-1">
+function ChartFrame({ title, description, action, className, children, ...props }: ChartFrameProps) {
+  return (
+    <Card
+      data-slot="chart-frame"
+      className={cn("border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4", className)}
+      {...props}
+    >
+      {(title || description || action) && (
+        <CardHeader className="flex flex-row items-start justify-between gap-3">
+          <div className="grid gap-1">
             {title && <CardTitle>{title}</CardTitle>}
             {description && <CardDescription>{description}</CardDescription>}
           </div>
@@ -115,20 +119,20 @@ function BarChart({ data, size = "md", max, showLabels = true, showValues = true
   const resolvedMax = max ?? safeMax(data.map((item) => item.value))
   const height = chartHeightBySize[size]
 
-  return (
-    <div data-slot="bar-chart" className={cn("grid gap-3", className)} {...props}>
-      <div className="flex items-end gap-2" style={{ height }}>
+  return (
+    <div data-slot="bar-chart" className={cn("grid gap-3", className)} {...props}>
+      <div className="flex items-end gap-2" style={{ height }}>
         {data.map((item, index) => {
           const ratio = normalizeValue(item.value, resolvedMax)
           return (
             <div key={index} className="flex min-w-0 flex-1 flex-col items-center gap-2">
               {showValues && <div className="text-xs text-muted-foreground">{item.value}</div>}
-              <div className="flex w-full flex-1 items-end rounded-md bg-muted/50">
-                <div
-                  className={cn("w-full rounded-md bg-primary transition-all", barClassName)}
-                  style={{ height: `${Math.max(ratio * 100, item.value > 0 ? 3 : 0)}%`, background: item.color }}
-                />
-              </div>
+              <div className="flex w-full flex-1 items-end rounded-[min(var(--radius-xl),16px)] border border-border/60 bg-muted/38 p-1">
+                <div
+                  className={cn("w-full rounded-[min(var(--radius-lg),12px)] bg-primary transition-all", barClassName)}
+                  style={{ height: `${Math.max(ratio * 100, item.value > 0 ? 3 : 0)}%`, background: item.color }}
+                />
+              </div>
               {showLabels && <div className="max-w-full truncate text-xs text-muted-foreground">{item.label}</div>}
             </div>
           )
@@ -253,12 +257,19 @@ export type MetricTrendProps = React.ComponentProps<"div"> & {
   values?: number[]
 }
 
-function MetricTrend({ label, value, change, positive = true, values, className, ...props }: MetricTrendProps) {
-  return (
-    <div data-slot="metric-trend" className={cn("grid gap-3 rounded-lg border bg-card p-4", className)} {...props}>
-      <div className="flex items-start justify-between gap-3">
-        <div className="grid gap-1">
-          <div className="text-sm text-muted-foreground">{label}</div>
+function MetricTrend({ label, value, change, positive = true, values, className, ...props }: MetricTrendProps) {
+  return (
+    <div
+      data-slot="metric-trend"
+      className={cn(
+        "grid gap-3 rounded-[var(--radius-2xl)] border border-border/75 bg-card/96 p-4 shadow-sm ring-1 ring-foreground/4",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="grid gap-1">
+          <div className="text-sm text-muted-foreground">{label}</div>
           <div className="text-2xl font-semibold tracking-tight">{value}</div>
         </div>
         {change && (

package/vendor/src/components/command/command-palette.tsx

@@ -255,71 +255,82 @@ function CommandPalette({
     }
   }
 
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={cn("overflow-hidden p-0 sm:max-w-xl", contentClassName)}>
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className={cn(
+          "overflow-hidden rounded-[var(--radius-3xl)] border-border/80 bg-popover/98 p-0 shadow-[0_28px_90px_rgba(15,23,42,0.24)] backdrop-blur sm:max-w-xl",
+          contentClassName
+        )}
+      >
         <DialogHeader className="sr-only">
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
 
-        <div
-          data-slot="command-palette"
-          className={cn("flex max-h-[32rem] flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground", className)}
-        >
-          <div className="relative border-b p-2">
-            <SearchIcon className="pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder={placeholder}
-              className={cn("border-0 pl-8 shadow-none focus-visible:ring-0", inputClassName)}
-              autoFocus
-            />
-          </div>
-
-          <div className={cn("overflow-y-auto p-2", listClassName)}>
-            {!hasResults && hasLoading && (
-              <div className="flex items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
-                {renderLoading?.(search) ?? (
-                  <>
-                    <Loader2Icon className="size-4 animate-spin" />
+        <div
+          data-slot="command-palette"
+          className={cn(
+            "flex max-h-[32rem] flex-col overflow-hidden rounded-[var(--radius-3xl)] bg-popover/98 text-popover-foreground",
+            className
+          )}
+        >
+          <div className="relative border-b border-border/70 bg-muted/20 p-3">
+            <SearchIcon className="pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={placeholder}
+              className={cn(
+                "h-11 rounded-full border-border/75 bg-background/96 pl-10 shadow-[0_1px_0_rgba(255,255,255,0.05)] focus-visible:ring-2",
+                inputClassName
+              )}
+              autoFocus
+            />
+          </div>
+
+          <div className={cn("overflow-y-auto p-3", listClassName)}>
+            {!hasResults && hasLoading && (
+              <div className="flex items-center justify-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-muted/30 py-8 text-sm text-muted-foreground">
+                {renderLoading?.(search) ?? (
+                  <>
+                    <Loader2Icon className="size-4 animate-spin" />
                     {loadingLabel}
                   </>
                 )}
               </div>
             )}
-
-            {!hasResults && !hasLoading && (
-              <div className="py-8 text-center text-sm text-muted-foreground">
-                {renderEmpty?.(search) ?? emptyLabel}
-              </div>
-            )}
-
-            {renderedGroups.map((group) => (
-              <div key={group.id} className="py-1">
-                {group.label && (
-                  <div className="flex items-center justify-between px-2 py-1.5 text-xs font-medium text-muted-foreground">
-                    <span>{group.label}</span>
-                    {group.loading && <Loader2Icon className="size-3.5 animate-spin" />}
-                  </div>
-                )}
-
+
+            {!hasResults && !hasLoading && (
+              <div className="rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-muted/30 py-8 text-center text-sm text-muted-foreground">
+                {renderEmpty?.(search) ?? emptyLabel}
+              </div>
+            )}
+
+            {renderedGroups.map((group) => (
+              <div key={group.id} className="py-1">
+                {group.label && (
+                  <div className="flex items-center justify-between px-2 py-2 text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                    <span>{group.label}</span>
+                    {group.loading && <Loader2Icon className="size-3.5 animate-spin" />}
+                  </div>
+                )}
+
                 {group.error ? (
-                  <div className="rounded-md px-2 py-2 text-xs text-destructive">
+                  <div className="rounded-[min(var(--radius-xl),16px)] border border-destructive/20 bg-destructive/8 px-3 py-2 text-xs text-destructive">
                     Could not load commands.
                   </div>
                 ) : null}
-
-                {group.loading && group.items.length === 0 && (
-                  <div className="rounded-md px-2 py-2 text-xs text-muted-foreground">
-                    {group.loadingLabel ?? loadingLabel}
-                  </div>
-                )}
-
-                {group.items.length === 0 && !group.loading && !group.error && group.emptyLabel && (
-                  <div className="rounded-md px-2 py-2 text-xs text-muted-foreground">{group.emptyLabel}</div>
-                )}
+
+                {group.loading && group.items.length === 0 && (
+                  <div className="rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-muted/25 px-3 py-2 text-xs text-muted-foreground">
+                    {group.loadingLabel ?? loadingLabel}
+                  </div>
+                )}
+
+                {group.items.length === 0 && !group.loading && !group.error && group.emptyLabel && (
+                  <div className="rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-muted/25 px-3 py-2 text-xs text-muted-foreground">{group.emptyLabel}</div>
+                )}
 
                 {group.items.map((item) => {
                   const isLoading = loadingKey === item.id
@@ -327,12 +338,12 @@ function CommandPalette({
                   return (
                     <button
                       key={item.id}
-                      type="button"
-                      disabled={item.disabled || isLoading}
-                      data-disabled={item.disabled || undefined}
-                      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-                      onClick={() => void handleSelect(item, group)}
-                    >
+                      type="button"
+                      disabled={item.disabled || isLoading}
+                      data-disabled={item.disabled || undefined}
+                      className="flex w-full items-start gap-3 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-colors hover:border-border/70 hover:bg-accent/60 hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+                      onClick={() => void handleSelect(item, group)}
+                    >
                       {item.icon && <span className="shrink-0 text-muted-foreground [&_svg]:size-4">{item.icon}</span>}
                       <span className="min-w-0 flex-1">
                         <span className="block truncate">{item.label}</span>

package/vendor/src/components/data-table/data-table-bulk-actions.tsx

@@ -51,32 +51,35 @@ function DataTableBulkActions<TData>({
     onSelect: action.onSelect ? () => action.onSelect?.(rows) : undefined,
   }))
 
-  return (
-    <div data-slot="data-table-bulk-actions" className="flex items-center gap-2">
-      <ActionMenu
-        label={label}
-        actions={resolvedActions}
+  return (
+    <div data-slot="data-table-bulk-actions" className="flex items-center gap-2">
+      <ActionMenu
+        label={label}
+        actions={resolvedActions}
         disabled={disabled || count === 0}
         trigger={
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            disabled={disabled || count === 0}
-            className={cn("gap-1.5", triggerClassName)}
-          >
-            {selectedLabel(count)}
-            <ChevronDownIcon className="size-3.5" />
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={disabled || count === 0}
+            className={cn(
+              "gap-1.5 border-border/80 bg-background/94 shadow-[0_1px_0_rgba(255,255,255,0.06)]",
+              triggerClassName
+            )}
+          >
+            {selectedLabel(count)}
+            <ChevronDownIcon className="size-3.5" />
           </Button>
         }
         {...props}
       />
-
-      {onClearSelection && count > 0 && (
-        <Button type="button" variant="ghost" size="sm" onClick={onClearSelection}>
-          {clearLabel}
-        </Button>
-      )}
+
+      {onClearSelection && count > 0 && (
+        <Button type="button" variant="ghost" size="sm" className="rounded-full" onClick={onClearSelection}>
+          {clearLabel}
+        </Button>
+      )}
     </div>
   )
 }

package/vendor/src/components/data-table/data-table-column-visibility-menu.tsx

@@ -47,19 +47,30 @@ function DataTableColumnVisibilityMenu<TData>({
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger
-        render={
-          <Button type="button" variant="outline" size="sm" className={triggerClassName} />
-        }
-      >
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className={cn(
+              "border-border/80 bg-background/94 shadow-[0_1px_0_rgba(255,255,255,0.06)]",
+              triggerClassName
+            )}
+          />
+        }
+      >
         <Columns3Icon data-icon="inline-start" />
         {triggerLabel ?? label}
       </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align={align}
-        side={side}
-        className={cn("min-w-48", contentClassName)}
-      >
+      <DropdownMenuContent
+        align={align}
+        side={side}
+        className={cn(
+          "min-w-48 rounded-[var(--radius-2xl)] border-border/80 bg-popover/98 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur",
+          contentClassName
+        )}
+      >
         <DropdownMenuLabel>{label}</DropdownMenuLabel>
         <DropdownMenuSeparator />
         {columns.map((column) => (

package/vendor/src/components/data-table/data-table-pagination.tsx

@@ -66,12 +66,12 @@ function DataTablePagination({
             <SimpleSelect
               value={String(pageSize)}
               onValueChange={(value) => onPageSizeChange(Number(value))}
-              options={pageSizeOptions.map((option) => ({
-                label: String(option),
-                value: String(option),
-              }))}
-              disabled={disabled}
-              triggerClassName="h-9 w-20 rounded-full border-border/80 bg-background/90"
+              options={pageSizeOptions.map((option) => ({
+                label: String(option),
+                value: String(option),
+              }))}
+              disabled={disabled}
+              triggerClassName="h-9 w-20 rounded-full border-border/85 bg-background/94"
             />
           </div>
         )}