@hexclave/dashboard-ui-components 1.0.3 → 1.0.6

package/src/components/data-grid/use-url-state.ts

@@ -0,0 +1,298 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { DEFAULT_COL_WIDTH, clampColumnWidth } from "./data-grid-sizing";
+import { createDefaultDataGridState } from "./state";
+import type {
+  DataGridColumnDef,
+  DataGridSortItem,
+  DataGridSortModel,
+  DataGridState,
+} from "./types";
+
+// ─── URL <-> state encoding ──────────────────────────────────────────
+// Compact, human-readable formats so URLs stay short. Each piece of
+// state gets its own param so unrelated changes don't churn shared keys:
+//
+//   ?{prefix}_w=name:200,email:300       column widths (only non-defaults)
+//   ?{prefix}_h=createdAt,role           hidden column ids
+//   ?{prefix}_s=signedUpAt:desc,name:asc multi-column sort
+//   ?{prefix}_q=alice                    quick-search text
+//
+// Column ids are URL-encoded so ids containing `,` `:` or other reserved
+// characters round-trip safely. Without encoding, an id like "user:name"
+// would silently break the parser.
+
+// ── widths ─────────────────────────────────────────────────────────
+function serializeWidths(
+  widths: Record<string, number>,
+  columns: readonly DataGridColumnDef<any>[],
+): string {
+  const parts: string[] = [];
+  for (const col of columns) {
+    const w = widths[col.id];
+    if (typeof w !== "number" || !Number.isFinite(w)) continue;
+    const defaultW = clampColumnWidth(col, col.width ?? DEFAULT_COL_WIDTH);
+    if (Math.round(w) === Math.round(defaultW)) continue;
+    parts.push(`${encodeURIComponent(col.id)}:${Math.round(w)}`);
+  }
+  return parts.join(",");
+}
+
+function parseWidths(
+  raw: string | null,
+  fallback: Record<string, number>,
+  columns: readonly DataGridColumnDef<any>[],
+): Record<string, number> {
+  if (!raw) return fallback;
+  const colMap = new Map(columns.map((c) => [c.id, c]));
+  const out: Record<string, number> = { ...fallback };
+  for (const part of raw.split(",")) {
+    // Only split on the FIRST colon — id-side is always pre-encoded so it
+    // can't contain a literal `:`, but width-side is always numeric.
+    const colonIdx = part.indexOf(":");
+    if (colonIdx <= 0) continue;
+    const encodedId = part.slice(0, colonIdx);
+    const num = part.slice(colonIdx + 1);
+    let id: string;
+    try {
+      id = decodeURIComponent(encodedId);
+    } catch {
+      continue;
+    }
+    if (!id || !num) continue;
+    const col = colMap.get(id);
+    if (!col) continue;
+    const n = Number(num);
+    if (!Number.isFinite(n)) continue;
+    out[id] = clampColumnWidth(col, n);
+  }
+  return out;
+}
+
+// ── hidden columns ─────────────────────────────────────────────────
+function serializeHidden(visibility: Record<string, boolean>): string {
+  return Object.entries(visibility)
+    .filter(([, v]) => v === false)
+    .map(([id]) => encodeURIComponent(id))
+    .join(",");
+}
+
+function parseHidden(
+  raw: string | null,
+  columns: readonly DataGridColumnDef<any>[],
+): Record<string, boolean> {
+  if (!raw) return {};
+  const known = new Set(columns.map((c) => c.id));
+  const out: Record<string, boolean> = {};
+  for (const encodedId of raw.split(",")) {
+    let id: string;
+    try {
+      id = decodeURIComponent(encodedId);
+    } catch {
+      continue;
+    }
+    if (id && known.has(id)) out[id] = false;
+  }
+  return out;
+}
+
+// ── sort model ─────────────────────────────────────────────────────
+function serializeSort(sort: DataGridSortModel): string {
+  return sort
+    .map((s) => `${encodeURIComponent(s.columnId)}:${s.direction === "desc" ? "desc" : "asc"}`)
+    .join(",");
+}
+
+function sortEqual(a: DataGridSortModel, b: DataGridSortModel): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].columnId !== b[i].columnId || a[i].direction !== b[i].direction) return false;
+  }
+  return true;
+}
+
+function parseSort(
+  raw: string | null,
+  fallback: DataGridSortModel,
+  columns: readonly DataGridColumnDef<any>[],
+): DataGridSortModel {
+  if (raw == null) return fallback;
+  if (raw === "") return [];
+  const known = new Set(columns.map((c) => c.id));
+  const out: DataGridSortItem[] = [];
+  for (const part of raw.split(",")) {
+    const colonIdx = part.indexOf(":");
+    if (colonIdx <= 0) continue;
+    const encodedId = part.slice(0, colonIdx);
+    const dir = part.slice(colonIdx + 1);
+    if (dir !== "asc" && dir !== "desc") continue;
+    let id: string;
+    try {
+      id = decodeURIComponent(encodedId);
+    } catch {
+      continue;
+    }
+    if (!id || !known.has(id)) continue;
+    out.push({ columnId: id, direction: dir });
+  }
+  return out;
+}
+
+// ── quick search ───────────────────────────────────────────────────
+function parseQuickSearch(raw: string | null, fallback: string): string {
+  if (raw == null) return fallback;
+  return raw;
+}
+
+// ─── Hook ────────────────────────────────────────────────────────────
+
+type UrlStateOptions = {
+  /** Disambiguates URL params when multiple grids share a page. Defaults
+   * to `"grid"`. Use unique prefixes per-grid (e.g. `"users"`, `"teams"`). */
+  paramPrefix?: string,
+  /** Overrides for default state used when the URL has no value for a
+   * given key. Useful for things like a sensible initial sort (e.g.
+   * "newest signups first") that should appear on first load but be
+   * overridden when the user navigates to a bookmarked URL. */
+  initial?: Partial<Pick<DataGridState, "sorting" | "quickSearch" | "columnVisibility">>,
+};
+
+/**
+ * Drop-in replacement for `useState(() => createDefaultDataGridState(columns))`
+ * that persists user view preferences to URL search params, so a view
+ * can be bookmarked / shared / restored on reload.
+ *
+ * **Persisted:** column widths, hidden columns, sort model, quick-search.
+ * **Not persisted** (deliberately): pagination scroll position, selection,
+ * column pinning/order, date display mode — these are session-scoped.
+ *
+ * ```tsx
+ * const [gridState, setGridState] = useDataGridUrlState(columns, {
+ *   paramPrefix: "users",
+ *   initial: { sorting: [{ columnId: "signedUpAt", direction: "desc" }] },
+ * });
+ * ```
+ *
+ * URL encoding: `?{prefix}_w=...&{prefix}_h=...&{prefix}_s=...&{prefix}_q=...`.
+ * Default values are omitted so URLs stay clean. Updates use
+ * `history.replaceState` (not pushState) so back/forward isn't polluted,
+ * and `popstate` is observed so external URL changes flow back into state.
+ */
+export function useDataGridUrlState<TRow>(
+  columns: readonly DataGridColumnDef<TRow>[],
+  opts?: UrlStateOptions,
+): [DataGridState, React.Dispatch<React.SetStateAction<DataGridState>>] {
+  const prefix = opts?.paramPrefix ?? "grid";
+  const widthsKey = `${prefix}_w`;
+  const hiddenKey = `${prefix}_h`;
+  const sortKey = `${prefix}_s`;
+  const searchKey = `${prefix}_q`;
+
+  const columnsRef = useRef(columns);
+  columnsRef.current = columns;
+
+  // `initial` snapshots are captured once on first render. Re-running them
+  // each render would clobber the user's interactions.
+  const initialRef = useRef(opts?.initial);
+
+  const [state, setState] = useState<DataGridState>(() => {
+    const base = createDefaultDataGridState(columns);
+    const initial = initialRef.current ?? {};
+    const baseWithInitial: DataGridState = {
+      ...base,
+      sorting: initial.sorting ?? base.sorting,
+      quickSearch: initial.quickSearch ?? base.quickSearch,
+      columnVisibility: initial.columnVisibility ?? base.columnVisibility,
+    };
+    if (typeof window === "undefined") return baseWithInitial;
+    const params = new URLSearchParams(window.location.search);
+    return {
+      ...baseWithInitial,
+      columnWidths: parseWidths(params.get(widthsKey), base.columnWidths, columns),
+      columnVisibility: params.get(hiddenKey) != null
+        ? parseHidden(params.get(hiddenKey), columns)
+        : baseWithInitial.columnVisibility,
+      sorting: parseSort(params.get(sortKey), baseWithInitial.sorting, columns),
+      quickSearch: parseQuickSearch(params.get(searchKey), baseWithInitial.quickSearch),
+    };
+  });
+
+  // Sync state -> URL. Debounced so that high-frequency state changes
+  // (e.g. dragging a column resize handle, typing in the search box)
+  // don't fire a URL write per pixel / per keystroke.
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const timer = setTimeout(() => {
+      const params = new URLSearchParams(window.location.search);
+      const before = params.toString();
+      const cols = columnsRef.current;
+      const initial = initialRef.current ?? {};
+
+      const widthsStr = serializeWidths(state.columnWidths, cols);
+      if (widthsStr) params.set(widthsKey, widthsStr);
+      else params.delete(widthsKey);
+
+      const hiddenStr = serializeHidden(state.columnVisibility);
+      // If the consumer supplied initial visibility, "no hidden cols" must
+      // be encoded explicitly (empty string) so a bookmark with no `_h=`
+      // doesn't silently re-hide a column the user just un-hid.
+      const initialHidden = initial.columnVisibility
+        ? serializeHidden(initial.columnVisibility)
+        : "";
+      if (hiddenStr) params.set(hiddenKey, hiddenStr);
+      else if (initialHidden) params.set(hiddenKey, "");
+      else params.delete(hiddenKey);
+
+      const initialSort = initial.sorting ?? [];
+      if (sortEqual(state.sorting, initialSort)) params.delete(sortKey);
+      else params.set(sortKey, serializeSort(state.sorting));
+
+      const initialSearch = initial.quickSearch ?? "";
+      if (state.quickSearch === initialSearch) params.delete(searchKey);
+      else params.set(searchKey, state.quickSearch);
+
+      const after = params.toString();
+      if (before === after) return;
+      const url = `${window.location.pathname}${after ? `?${after}` : ""}${window.location.hash}`;
+      window.history.replaceState(window.history.state, "", url);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [
+    state.columnWidths,
+    state.columnVisibility,
+    state.sorting,
+    state.quickSearch,
+    widthsKey,
+    hiddenKey,
+    sortKey,
+    searchKey,
+  ]);
+
+  // React to back/forward navigation.
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onPop = () => {
+      const params = new URLSearchParams(window.location.search);
+      const cols = columnsRef.current;
+      const initial = initialRef.current ?? {};
+      // When the URL no longer has a value for a key, reset to defaults
+      // rather than preserving the previous in-memory state — otherwise
+      // navigating back to a clean URL leaves stale state.
+      const defaults = createDefaultDataGridState(cols);
+      setState((prev) => ({
+        ...prev,
+        columnWidths: parseWidths(params.get(widthsKey), defaults.columnWidths, cols),
+        columnVisibility: params.get(hiddenKey) != null
+          ? parseHidden(params.get(hiddenKey), cols)
+          : (initial.columnVisibility ?? defaults.columnVisibility),
+        sorting: parseSort(params.get(sortKey), initial.sorting ?? defaults.sorting, cols),
+        quickSearch: parseQuickSearch(params.get(searchKey), initial.quickSearch ?? defaults.quickSearch),
+      }));
+    };
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, [widthsKey, hiddenKey, sortKey, searchKey]);
+
+  return [state, setState];
+}

package/src/components/dialog.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  cn,
+} from "@hexclave/ui";
+import React from "react";
+
+export type DesignDialogSize =
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "6xl"
+  | "7xl"
+  | "full";
+
+export type DesignDialogVariant = "glassmorphic" | "plain";
+
+const dialogSizeClasses = new Map<DesignDialogSize, string>([
+  ["sm", "max-w-sm"],
+  ["md", "max-w-md"],
+  ["lg", "max-w-lg"],
+  ["xl", "max-w-xl"],
+  ["2xl", "max-w-2xl"],
+  ["3xl", "max-w-3xl"],
+  ["4xl", "max-w-4xl"],
+  ["5xl", "max-w-5xl"],
+  ["6xl", "max-w-6xl"],
+  ["7xl", "max-w-7xl"],
+  ["full", "max-w-[calc(100vw-2rem)]"],
+]);
+
+const dialogSurfaceClasses = new Map<DesignDialogVariant, string>([
+  ["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"],
+]);
+
+export const designDialogGlassmorphicSurfaceClass = dialogSurfaceClasses.get("glassmorphic") ?? "";
+export const designDialogGlassmorphicOverlayClass = "bg-black/50 backdrop-blur-sm";
+
+type DesignDialogIcon = React.ElementType<{ className?: string }>;
+
+type DesignDialogRootProps = Omit<React.ComponentProps<typeof Dialog>, "children">;
+
+export type DesignDialogProps = {
+  trigger?: React.ReactElement,
+  size?: DesignDialogSize,
+  variant?: DesignDialogVariant,
+  icon?: DesignDialogIcon | null,
+  title?: React.ReactNode,
+  description?: React.ReactNode,
+  headerContent?: React.ReactNode,
+  customHeader?: React.ReactNode,
+  footer?: React.ReactNode,
+  noBodyPadding?: boolean,
+  hideTopCloseButton?: boolean,
+  className?: string,
+  overlayClassName?: string,
+  headerClassName?: string,
+  bodyClassName?: string,
+  footerClassName?: string,
+  children?: React.ReactNode,
+  contentProps?: Omit<
+    React.ComponentPropsWithoutRef<typeof DialogContent>,
+    "className" | "children" | "overlayProps" | "noCloseButton"
+  >,
+} & DesignDialogRootProps;
+
+/**
+ * Canonical dashboard modal surface. This wraps the base dialog primitives with
+ * a reusable glassmorphic shell and consistent header/body/footer regions.
+ */
+export function DesignDialog({
+  trigger,
+  size = "lg",
+  variant = "glassmorphic",
+  icon: Icon = null,
+  title,
+  description,
+  headerContent,
+  customHeader,
+  footer,
+  noBodyPadding = false,
+  hideTopCloseButton = false,
+  className,
+  overlayClassName,
+  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(
+    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
+  // expressions like `{condition && <Foo/>}` resolving to `false` don't
+  // produce an empty DialogBody (which would still render padding/borders).
+  const shouldRenderBody = React.Children.toArray(children).filter(Boolean).length > 0;
+  const hasStandardTitle = title != null;
+  const needsAccessibleTitleFallback = !hasStandardTitle && customHeader == null;
+
+  if (process.env.NODE_ENV !== "production" && needsAccessibleTitleFallback) {
+    console.warn(
+      "[DesignDialog] Rendered without a `title` or `customHeader`. Every dialog needs an accessible name — pass `title`, or render a `DialogTitle` inside `customHeader`.",
+    );
+  }
+
+  return (
+    <Dialog {...dialogRootProps}>
+      {trigger != null && (
+        <DialogTrigger asChild>
+          {trigger}
+        </DialogTrigger>
+      )}
+
+      <DialogContent
+        className={cn(
+          "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("shrink-0 px-6 pt-6 pb-4 border-b border-foreground/[0.06]", headerClassName)}>
+            {customHeader ?? (
+              <>
+                {shouldRenderTopHeaderRow && (
+                  <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" />
+                      </div>
+                    )}
+                    {(title != null || description != null) && (
+                      <div className="flex-1 min-w-0 space-y-1">
+                        {title != null ? (
+                          <DialogTitle className="text-base font-semibold leading-snug">
+                            {title}
+                          </DialogTitle>
+                        ) : null}
+                        {description != null ? (
+                          <DialogDescription className="text-xs">
+                            {description}
+                          </DialogDescription>
+                        ) : null}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {headerContent != null ? (
+                  <div className={cn(shouldRenderTopHeaderRow && "mt-4")}>
+                    {headerContent}
+                  </div>
+                ) : null}
+              </>
+            )}
+          </DialogHeader>
+        )}
+
+        {shouldRenderBody && (
+          <DialogBody
+            className={cn(
+              "mx-0 my-0 w-auto min-h-0 overflow-y-auto",
+              noBodyPadding ? "px-0 py-0" : "px-6 py-4",
+              bodyClassName
+            )}
+          >
+            {children}
+          </DialogBody>
+        )}
+
+        {footer != null ? (
+          <DialogFooter className={cn("shrink-0 px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]", footerClassName)}>
+            {footer}
+          </DialogFooter>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const DesignDialogRoot = Dialog;
+export const DesignDialogTrigger = DialogTrigger;
+export const DesignDialogClose = DialogClose;
+export const DesignDialogTitle = DialogTitle;
+export const DesignDialogDescription = DialogDescription;

package/src/components/edit-mode.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+const DesignEditModeContext = createContext(false);
+
+export function DesignEditMode({ children }: { children: React.ReactNode }) {
+  return (
+    <DesignEditModeContext.Provider value={true}>
+      {children}
+    </DesignEditModeContext.Provider>
+  );
+}
+
+export function useDesignEditMode(): boolean {
+  return useContext(DesignEditModeContext);
+}

package/src/components/empty-state.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import React from "react";
+
+export type DesignEmptyStateProps = {
+  icon?: React.ElementType,
+  title?: string,
+  description?: string,
+  children?: React.ReactNode,
+  className?: string,
+};
+
+/**
+ * Centered "no data" placeholder. Show this inside a `DataGrid` via the
+ * `emptyState` prop, inside a chart when a query returns zero rows, or
+ * inside a card when a section has nothing to display.
+ *
+ * ```tsx
+ * <DesignEmptyState
+ *   icon={SearchIcon}
+ *   title="No results"
+ *   description="Try adjusting your filters."
+ * />
+ * ```
+ *
+ * Prefer this over a raw "No data" div — it handles spacing, typography,
+ * and the optional icon for you. `icon` is a component type, not a rendered node.
+ */
+export function DesignEmptyState({
+  icon: Icon,
+  title = "No data available",
+  description,
+  children,
+  className,
+}: DesignEmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center py-12 px-6 text-center",
+        className
+      )}
+    >
+      {Icon && (
+        <div className="mb-4">
+          <Icon className="h-10 w-10 text-muted-foreground/30" />
+        </div>
+      )}
+      <h3 className="text-sm font-medium text-foreground">
+        {title}
+      </h3>
+      {description && (
+        <p className="mt-1 text-xs text-muted-foreground max-w-[280px]">
+          {description}
+        </p>
+      )}
+      {children && (
+        <div className="mt-4">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/input.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { forwardRefIfNeeded } from "@hexclave/shared/dist/utils/react";
+import React from "react";
+
+import { cn } from "@hexclave/ui";
+
+export type DesignInputProps = {
+  prefixItem?: React.ReactNode,
+  leadingIcon?: React.ReactNode,
+  size?: "sm" | "md" | "lg",
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+
+export const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps>(
+  ({ className, type, prefixItem, leadingIcon, size = "md", ...props }, ref) => {
+    const heightTextClasses = size === "sm"
+      ? "h-7 text-xs"
+      : size === "lg"
+        ? "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]",
+      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 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"
+          )}>
+            {prefixItem}
+          </div>
+          <input
+            type={type}
+            className={cn(
+              "stack-scope flex w-full bg-transparent",
+              "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",
+              heightTextClasses,
+              horizontalPaddingClasses,
+              "rounded-none border-0 shadow-none ring-0 focus-visible:ring-0",
+              className
+            )}
+            ref={ref}
+            {...props}
+          />
+        </div>
+      );
+    }
+
+    if (leadingIcon) {
+      return (
+        <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, leadingIconPadding)}
+            ref={ref}
+            {...props}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div className="w-full">
+        <input
+          type={type}
+          className={cn(baseClasses, horizontalPaddingClasses, className)}
+          ref={ref}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+DesignInput.displayName = "DesignInput";