@hexclave/dashboard-ui-components 1.0.5 → 1.0.8

package/src/components/dialog.tsx

@@ -44,14 +44,12 @@ const dialogSizeClasses = new Map<DesignDialogSize, string>([
 ]);
 
 const dialogSurfaceClasses = new Map<DesignDialogVariant, string>([
-  ["glassmorphic", "border-0 sm:rounded-2xl bg-background/85 backdrop-blur-2xl ring-1 ring-foreground/[0.06] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]"],
-  ["plain", "border bg-background shadow-lg sm:rounded-lg"],
+  ["glassmorphic", "border-0 sm:rounded-2xl bg-white/95 backdrop-blur-2xl ring-1 ring-black/[0.08] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]"],
+  ["plain", "border border-black/[0.08] bg-white shadow-lg sm:rounded-lg dark:border-white/[0.06] dark:bg-background"],
 ]);
 
-const dialogOverlayClasses = new Map<DesignDialogVariant, string | undefined>([
-  ["glassmorphic", "bg-black/50 backdrop-blur-sm"],
-  ["plain", undefined],
-]);
+export const designDialogGlassmorphicSurfaceClass = dialogSurfaceClasses.get("glassmorphic") ?? "";
+export const designDialogGlassmorphicOverlayClass = "bg-black/50 backdrop-blur-sm";
 
 type DesignDialogIcon = React.ElementType<{ className?: string }>;
 
@@ -75,6 +73,10 @@ export type DesignDialogProps = {
   bodyClassName?: string,
   footerClassName?: string,
   children?: React.ReactNode,
+  contentProps?: Omit<
+    React.ComponentPropsWithoutRef<typeof DialogContent>,
+    "className" | "children" | "overlayProps" | "noCloseButton"
+  >,
 } & DesignDialogRootProps;
 
 /**
@@ -98,12 +100,16 @@ export function DesignDialog({
   headerClassName,
   bodyClassName,
   footerClassName,
+  contentProps,
   children,
   ...dialogRootProps
 }: DesignDialogProps) {
   const resolvedSizeClass = dialogSizeClasses.get(size) ?? "max-w-lg";
   const resolvedSurfaceClass = dialogSurfaceClasses.get(variant) ?? dialogSurfaceClasses.get("glassmorphic");
-  const resolvedOverlayClass = cn(dialogOverlayClasses.get(variant), overlayClassName);
+  const resolvedOverlayClass = cn(
+    variant === "glassmorphic" ? designDialogGlassmorphicOverlayClass : undefined,
+    overlayClassName,
+  );
   const shouldRenderTopHeaderRow = Icon != null || title != null || description != null;
   const shouldRenderHeader = customHeader != null || shouldRenderTopHeaderRow || headerContent != null;
   // Use toArray + filter(Boolean) instead of Children.count so that
@@ -129,23 +135,28 @@ export function DesignDialog({
 
       <DialogContent
         className={cn(
-          "gap-0 p-0 overflow-hidden",
+          "gap-0 h-auto max-h-[min(100dvh-2rem,36rem)] overflow-hidden p-0",
           resolvedSizeClass,
           resolvedSurfaceClass,
           className
         )}
         overlayProps={resolvedOverlayClass ? { className: resolvedOverlayClass } : undefined}
         noCloseButton={hideTopCloseButton}
+        {...contentProps}
       >
         {needsAccessibleTitleFallback && (
           <DialogTitle className="sr-only">Dialog</DialogTitle>
         )}
         {shouldRenderHeader && (
-          <DialogHeader className={cn("px-6 pt-6 pb-4 border-b border-foreground/[0.06]", headerClassName)}>
+          <DialogHeader className={cn("shrink-0 px-6 pt-6 pb-4 border-b border-foreground/[0.06]", headerClassName)}>
             {customHeader ?? (
               <>
                 {shouldRenderTopHeaderRow && (
-                  <div className={cn("flex items-start gap-3", Icon == null && "gap-0")}>
+                  <div className={cn(
+                    "flex gap-3",
+                    description != null ? "items-start" : "items-center",
+                    Icon == null && "gap-0",
+                  )}>
                     {Icon != null && (
                       <div className="h-9 w-9 rounded-xl bg-primary/10 ring-1 ring-primary/15 flex items-center justify-center shrink-0">
                         <Icon className="h-4 w-4 text-primary" />
@@ -154,7 +165,7 @@ export function DesignDialog({
                     {(title != null || description != null) && (
                       <div className="flex-1 min-w-0 space-y-1">
                         {title != null ? (
-                          <DialogTitle className="text-base">
+                          <DialogTitle className="text-base font-semibold leading-snug">
                             {title}
                           </DialogTitle>
                         ) : null}
@@ -181,7 +192,7 @@ export function DesignDialog({
         {shouldRenderBody && (
           <DialogBody
             className={cn(
-              "mx-0 my-0 w-auto",
+              "mx-0 my-0 w-auto min-h-0 overflow-y-auto",
               noBodyPadding ? "px-0 py-0" : "px-6 py-4",
               bodyClassName
             )}
@@ -191,7 +202,7 @@ export function DesignDialog({
         )}
 
         {footer != null ? (
-          <DialogFooter className={cn("px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]", footerClassName)}>
+          <DialogFooter className={cn("shrink-0 px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]", footerClassName)}>
             {footer}
           </DialogFooter>
         ) : null}

package/src/components/input.tsx

@@ -13,23 +13,31 @@ export type DesignInputProps = {
 
 export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps>(
   ({ className, type, prefixItem, leadingIcon, size = "md", ...props }, ref) => {
-    const sizeClasses = size === "sm"
-      ? "h-7 px-2 text-xs"
+    const heightTextClasses = size === "sm"
+      ? "h-7 text-xs"
       : size === "lg"
-        ? "h-10 px-4 text-sm"
-        : "h-9 px-3 text-sm";
+        ? "h-10 text-sm"
+        : "h-9 text-sm";
+    const horizontalPaddingClasses = size === "sm" ? "px-2" : size === "lg" ? "px-4" : "px-3";
     const baseClasses = cn(
       "stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]",
       "file:border-0 file:bg-transparent file:text-sm file:font-medium",
       "placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]",
-      sizeClasses
+      heightTextClasses
     );
 
+    const leadingIconClasses = size === "sm"
+      ? "left-2.5 [&_svg]:size-3"
+      : size === "lg"
+        ? "left-3.5 [&_svg]:size-4"
+        : "left-3 [&_svg]:size-3.5";
+    const leadingIconPadding = size === "sm" ? "pl-8" : size === "lg" ? "pl-10" : "pl-9";
+
     if (prefixItem) {
       return (
-        <div className="flex flex-row items-center flex-1 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] overflow-hidden transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1]">
+        <div className="flex w-full flex-row items-center overflow-hidden rounded-xl border border-black/[0.08] bg-white/80 shadow-sm ring-1 ring-black/[0.08] transition-all duration-150 hover:bg-white hover:transition-none dark:border-white/[0.06] dark:bg-foreground/[0.03] dark:ring-white/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1] dark:hover:bg-foreground/[0.06]">
           <div className={cn(
             "flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]",
             size === "sm" ? "px-2.5 text-xs" : size === "lg" ? "px-3.5 text-sm" : "px-3 text-sm"
@@ -43,7 +51,8 @@ export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps
               "file:border-0 file:bg-transparent file:text-sm file:font-medium",
               "placeholder:text-muted-foreground/50 focus-visible:outline-none",
               "disabled:cursor-not-allowed disabled:opacity-50",
-              sizeClasses,
+              heightTextClasses,
+              horizontalPaddingClasses,
               "rounded-none border-0 shadow-none ring-0 focus-visible:ring-0",
               className
             )}
@@ -56,13 +65,16 @@ export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps
 
     if (leadingIcon) {
       return (
-        <div className="relative flex flex-row items-center flex-1">
-          <div className="pointer-events-none absolute left-2.5 flex items-center text-muted-foreground">
+        <div className={cn("relative w-full", className)}>
+          <div className={cn(
+            "pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground [&_svg]:block",
+            leadingIconClasses,
+          )}>
             {leadingIcon}
           </div>
           <input
             type={type}
-            className={cn(baseClasses, "pl-8", className)}
+            className={cn(baseClasses, leadingIconPadding)}
             ref={ref}
             {...props}
           />
@@ -71,10 +83,10 @@ export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps
     }
 
     return (
-      <div className="flex flex-row items-center flex-1">
+      <div className="w-full">
         <input
           type={type}
-          className={cn(baseClasses, className)}
+          className={cn(baseClasses, horizontalPaddingClasses, className)}
           ref={ref}
           {...props}
         />

package/src/components/pill-toggle.tsx

@@ -107,7 +107,7 @@ export function DesignPillToggle({
                 sizeClass.button,
                 isActive
                   ? cn(
-                    "bg-background text-foreground shadow-sm ring-1",
+                    "bg-white dark:bg-background text-foreground shadow-sm ring-1",
                     glassmorphic
                       ? "ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:text-[hsl(240,71%,90%)] dark:ring-[hsl(240,71%,70%)]/20"
                       : activeRingClass

package/src/components/tabs.tsx

@@ -135,7 +135,7 @@ export function DesignCategoryTabs({
       className={cn(
         "flex w-full min-w-0 items-center gap-2",
         glassmorphic
-          ? "rounded-xl bg-black/[0.08] dark:bg-white/[0.04] p-1 backdrop-blur-sm"
+          ? "rounded-xl bg-zinc-100/90 p-1 ring-1 ring-black/[0.06] backdrop-blur-sm dark:bg-white/[0.04] dark:ring-white/[0.06]"
           : "border-b border-gray-300 dark:border-gray-800",
         className
       )}
@@ -164,9 +164,12 @@ export function DesignCategoryTabs({
                 isActive
                   ? cn(
                     gradientClass.activeText,
-                    glassmorphic && "bg-background shadow-sm ring-1 ring-black/[0.12] dark:ring-white/[0.06]"
+                    glassmorphic && "bg-white shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]"
+                  )
+                  : cn(
+                    "text-gray-700 dark:text-gray-400",
+                    glassmorphic && "rounded-lg hover:bg-white/50 dark:hover:bg-white/[0.06]",
                   )
-                  : "text-gray-700 dark:text-gray-400"
               )}
             >
               {loadingCategoryId === category.id && (

package/src/index.ts

@@ -20,6 +20,8 @@ export {
   DesignDialogRoot,
   DesignDialogTitle,
   DesignDialogTrigger,
+  designDialogGlassmorphicOverlayClass,
+  designDialogGlassmorphicSurfaceClass,
 } from "./components/dialog";
 export type { DesignDialogProps, DesignDialogSize, DesignDialogVariant } from "./components/dialog";