@vvedantb/ui 0.17.0 → 0.18.0

package/src/ui/search-input.tsx

@@ -2,9 +2,9 @@
 
 import * as React from "react";
 import { IconSearch } from "@tabler/icons-react";
-import { cn } from "../utils/cn";
 import { ClearInput, type ClearInputProps } from "./clear-input";
 import { Kbd } from "./kbd";
+import { useCn, useUiConfig } from "./ui-config";
 
 const sizeClasses = {
   sm: { input: "h-8 pl-8 text-sm", icon: "left-2" },
@@ -19,6 +19,26 @@ const variantClasses = {
   },
 };
 
+type EnterKeyHint = React.InputHTMLAttributes<HTMLInputElement>["enterKeyHint"];
+
+/**
+ * `UiConfig.SearchInput`. `classes.input` and `classes.icon` replace the
+ * size classes of the input and the whole icon class; `classes.wrapper` is a
+ * base for the wrapper. Variant classes still apply after them. The other keys
+ * are prop defaults; `false` leaves the attribute off.
+ */
+export interface SearchInputConfig {
+  classes?: { wrapper?: string; input?: string; icon?: string };
+  /** Search icon size in px. Default `16`. */
+  iconSize?: number;
+  label?: string | false;
+  placeholder?: string;
+  clearLabel?: string;
+  enterKeyHint?: EnterKeyHint | false;
+  /** Element that receives `className`: `"input"` (default) or `"wrapper"`. */
+  classNameTarget?: "input" | "wrapper";
+}
+
 export interface SearchInputProps extends Omit<ClearInputProps, "leading" | "size"> {
   /** `aria-label`, and the placeholder when `placeholder` is not set. Default `"Search"`. */
   label?: string;
@@ -28,46 +48,77 @@ export interface SearchInputProps extends Omit<ClearInputProps, "leading" | "siz
   size?: keyof typeof sizeClasses;
   /** `toolbar`: transparent until hover or focus, fixed width from `sm`. Default `"default"`. */
   variant?: keyof typeof variantClasses;
+  /** Called after `onChange` whenever the value becomes empty (typed away or cleared). */
+  onClear?: () => void;
+  /** Classes for the input, merged after `className` when that also targets the input. */
+  inputClassName?: string;
 }
 
 const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
   (
     {
-      label = "Search",
+      label,
       placeholder,
-      clearLabel = "Clear search",
+      clearLabel,
       shortcut,
       size = "sm",
       variant = "default",
       className,
       wrapperClassName,
+      inputClassName,
+      onClear,
+      onChange,
       ...props
     },
     ref,
   ) => {
+    const config = useUiConfig("SearchInput");
+    const cn = useCn();
+    const name = label ?? config?.label ?? "Search";
+    const hint = config?.enterKeyHint ?? "search";
+    const onWrapper = config?.classNameTarget === "wrapper";
     const showShortcut = Boolean(shortcut) && props.value.length === 0;
     return (
       <ClearInput
         ref={ref}
-        aria-label={label}
-        placeholder={placeholder ?? label}
-        clearLabel={clearLabel}
-        enterKeyHint="search"
-        wrapperClassName={cn(variantClasses[variant].wrapper, wrapperClassName)}
+        aria-label={name === false ? undefined : name}
+        placeholder={placeholder ?? config?.placeholder ?? (name === false ? undefined : name)}
+        clearLabel={clearLabel ?? config?.clearLabel ?? "Clear search"}
+        enterKeyHint={hint === false ? undefined : hint}
+        onChange={
+          onClear
+            ? (next) => {
+                onChange(next);
+                if (next.length === 0) {
+                  onClear();
+                }
+              }
+            : onChange
+        }
+        wrapperClassName={cn(
+          config?.classes?.wrapper,
+          variantClasses[variant].wrapper,
+          wrapperClassName,
+          onWrapper && className,
+        )}
         className={cn(
-          sizeClasses[size].input,
+          config?.classes?.input ?? sizeClasses[size].input,
           variantClasses[variant].input,
           showShortcut && "pr-12",
-          className,
+          !onWrapper && className,
+          inputClassName,
         )}
         leading={
           <>
             <IconSearch
-              size={16}
-              className={cn(
-                "pointer-events-none absolute top-1/2 -translate-y-1/2 shrink-0 text-muted-foreground",
-                sizeClasses[size].icon,
-              )}
+              size={config?.iconSize ?? 16}
+              className={
+                config?.classes?.icon ??
+                cn(
+                  "pointer-events-none absolute top-1/2 -translate-y-1/2 shrink-0 text-muted-foreground",
+                  sizeClasses[size].icon,
+                )
+              }
             />
             {showShortcut ? (
               <Kbd className="absolute right-2 top-1/2 -translate-y-1/2">{shortcut}</Kbd>

package/src/ui/select.tsx

@@ -7,6 +7,37 @@ import {
   floatingSurfaceAnimateClass,
   floatingSurfaceClass,
 } from "./_menu-classes";
+import { useCn, useUiConfig } from "./ui-config";
+
+/** App defaults for `Select*` (see `UiConfigProvider`). */
+export interface SelectConfig {
+  /** Replaces the built-in classes of a part. */
+  classes?: {
+    trigger?: string;
+    /** Both scroll buttons. */
+    scrollButton?: string;
+    content?: string;
+    /** Viewport classes for every `position`. */
+    viewport?: string;
+    /** Extra viewport classes for `position="popper"`. */
+    popperViewport?: string;
+    label?: string;
+    item?: string;
+    separator?: string;
+  };
+  /** Replace the built-in icons. */
+  icons?: {
+    trigger?: React.ReactNode;
+    scrollUp?: React.ReactNode;
+    scrollDown?: React.ReactNode;
+    /** `SelectItem` indicator. */
+    check?: React.ReactNode;
+  };
+  /** Adds `data-slot="select-trigger"` to the trigger, for parent selectors such as `ButtonGroup`'s. */
+  triggerSlot?: boolean;
+  /** Default for `SelectContent` `collisionPadding`. */
+  collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
+}
 
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
@@ -15,140 +46,180 @@ const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full max-sm:min-w-0 items-center justify-between whitespace-nowrap rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm ring-offset-background placeholder:text-field-placeholder transition-[border-color,box-shadow,background-color] duration-200 ease-smooth disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      fieldFocusClass,
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <IconChevronDown className="h-4 w-4 text-muted-foreground/85" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
+>(({ className, children, ...props }, ref) => {
+  const config = useUiConfig("Select");
+  const merge = useCn();
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      data-slot={config?.triggerSlot ? "select-trigger" : undefined}
+      className={merge(
+        config?.classes?.trigger ?? [
+          "flex h-10 w-full max-sm:min-w-0 items-center justify-between whitespace-nowrap rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm ring-offset-background placeholder:text-field-placeholder transition-[border-color,box-shadow,background-color] duration-200 ease-smooth disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+          fieldFocusClass,
+        ],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        {config?.icons?.trigger ?? <IconChevronDown className="h-4 w-4 text-muted-foreground/85" />}
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+});
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1 text-muted-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <IconChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
+>(({ className, ...props }, ref) => {
+  const config = useUiConfig("Select");
+  const merge = useCn();
+  return (
+    <SelectPrimitive.ScrollUpButton
+      ref={ref}
+      className={merge(
+        config?.classes?.scrollButton ??
+          "flex cursor-default items-center justify-center py-1 text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {config?.icons?.scrollUp ?? <IconChevronUp className="h-4 w-4" />}
+    </SelectPrimitive.ScrollUpButton>
+  );
+});
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1 text-muted-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <IconChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
+>(({ className, ...props }, ref) => {
+  const config = useUiConfig("Select");
+  const merge = useCn();
+  return (
+    <SelectPrimitive.ScrollDownButton
+      ref={ref}
+      className={merge(
+        config?.classes?.scrollButton ??
+          "flex cursor-default items-center justify-center py-1 text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {config?.icons?.scrollDown ?? <IconChevronDown className="h-4 w-4" />}
+    </SelectPrimitive.ScrollDownButton>
+  );
+});
 SelectScrollDownButton.displayName =
   SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-32 overflow-hidden outline-none",
-        floatingSurfaceClass,
-        floatingSurfaceAnimateClass,
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1.5",
+>(({ className, children, position = "popper", collisionPadding, ...props }, ref) => {
+  const config = useUiConfig("Select");
+  const merge = useCn();
+  const classes = config?.classes;
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        collisionPadding={collisionPadding ?? config?.collisionPadding}
+        className={merge(
+          classes?.content ?? [
+            "relative z-50 max-h-96 min-w-32 overflow-hidden outline-none",
+            floatingSurfaceClass,
+            floatingSurfaceAnimateClass,
+          ],
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
         )}
+        position={position}
+        {...props}
       >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            classes?.viewport ?? "p-1.5",
+            position === "popper" &&
+              (classes?.popperViewport ??
+                "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const label = useUiConfig("Select")?.classes?.label;
+  const merge = useCn();
+  return (
+    <SelectPrimitive.Label
+      ref={ref}
+      className={merge(
+        label ??
+          "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-pointer select-none items-center rounded-menu-item py-2 max-sm:min-h-10 pl-2.5 pr-8 text-sm outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute right-2.5 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <IconCheck className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
+>(({ className, children, ...props }, ref) => {
+  const config = useUiConfig("Select");
+  const merge = useCn();
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={merge(
+        config?.classes?.item ??
+          "relative flex w-full cursor-pointer select-none items-center rounded-menu-item py-2 max-sm:min-h-10 pl-2.5 pr-8 text-sm outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2.5 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          {config?.icons?.check ?? <IconCheck className="h-4 w-4" />}
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+});
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1.5 my-1 h-px bg-separator", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const separator = useUiConfig("Select")?.classes?.separator;
+  const merge = useCn();
+  return (
+    <SelectPrimitive.Separator
+      ref={ref}
+      className={merge(separator ?? "-mx-1.5 my-1 h-px bg-separator", className)}
+      {...props}
+    />
+  );
+});
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {

package/src/ui/separator.tsx

@@ -1,6 +1,11 @@
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "./ui-config";
+
+export interface SeparatorConfig {
+  /** Replaces the built-in classes of a part. `root` excludes the orientation size classes. */
+  classes?: { root?: string };
+}
 
 const Separator = React.forwardRef<
   React.ComponentRef<typeof SeparatorPrimitive.Root>,
@@ -9,19 +14,23 @@ const Separator = React.forwardRef<
   (
     { className, orientation = "horizontal", decorative = true, ...props },
     ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-separator",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-        className,
-      )}
-      {...props}
-    />
-  ),
+  ) => {
+    const root = useUiConfig("Separator")?.classes?.root;
+    const merge = useCn();
+    return (
+      <SeparatorPrimitive.Root
+        ref={ref}
+        decorative={decorative}
+        orientation={orientation}
+        className={merge(
+          root ?? "shrink-0 bg-separator",
+          orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
 );
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 

package/src/ui/slider.tsx

@@ -1,21 +1,27 @@
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "./ui-config";
+
+/** `UiConfig.Slider`: `classes` replace the built-in part classes; the `*ClassName` props still merge after. */
+export interface SliderConfig {
+  classes?: { root?: string; track?: string; range?: string; thumb?: string };
+}
 
 type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
   /** Accessible name per thumb, by index. Wins over `aria-label` on the first thumb. */
   thumbLabels?: string[];
-  /** Classes for the track, merged after the defaults so they win (`bg-default dark:bg-muted/40`). */
+  /** Classes for the track, merged after the defaults so they win (`bg-default dark:bg-muted/40`). check-tokens-allow: muted */
   trackClassName?: string;
   /** Classes for the filled range, merged after the defaults so they win (`bg-primary`). */
   rangeClassName?: string;
-  /** Classes for every thumb, merged after the defaults so they win (`bg-background dark:bg-foreground dark:border-muted`). */
+  /** Classes for every thumb, merged after the defaults so they win (`bg-background dark:bg-foreground dark:border-muted`). check-tokens-allow: muted */
   thumbClassName?: string;
 };
 
 // `id`, `aria-label`, `aria-labelledby` and `aria-valuetext` go to the first
 // Thumb, not Root: the thumb is the focusable role="slider" element, so
 // `<Label htmlFor={id}>` and the accessible name land on it. The ref stays on Root.
+// `children` render inside the track, after the range (for example tick marks).
 const Slider = React.forwardRef<React.ComponentRef<typeof SliderPrimitive.Root>, SliderProps>(
   (
     {
@@ -28,15 +34,19 @@ const Slider = React.forwardRef<React.ComponentRef<typeof SliderPrimitive.Root>,
       trackClassName,
       rangeClassName,
       thumbClassName,
+      children,
       ...props
     },
     ref,
   ) => {
+    const classes = useUiConfig("Slider")?.classes;
+    const cn = useCn();
     const count = (props.value ?? props.defaultValue ?? [props.min ?? 0]).length;
     return (
       <SliderPrimitive.Root
         className={cn(
-          "relative flex w-full touch-none select-none items-center data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+          classes?.root ??
+            "relative flex w-full touch-none select-none items-center data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
           className,
         )}
         {...props}
@@ -44,16 +54,19 @@ const Slider = React.forwardRef<React.ComponentRef<typeof SliderPrimitive.Root>,
       >
         <SliderPrimitive.Track
           className={cn(
-            "relative grow overflow-hidden rounded-full bg-default dark:bg-muted/40 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+            classes?.track ??
+              "relative grow overflow-hidden rounded-full bg-default dark:bg-muted/40 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5", // check-tokens-allow: muted
             trackClassName,
           )}
         >
           <SliderPrimitive.Range
             className={cn(
-              "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+              classes?.range ??
+                "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
               rangeClassName,
             )}
           />
+          {children}
         </SliderPrimitive.Track>
         {Array.from({ length: count }, (_, i) => (
           <SliderPrimitive.Thumb
@@ -63,7 +76,8 @@ const Slider = React.forwardRef<React.ComponentRef<typeof SliderPrimitive.Root>,
             aria-labelledby={i === 0 ? ariaLabelledBy : undefined}
             aria-valuetext={i === 0 ? ariaValueText : undefined}
             className={cn(
-              "block size-4 shrink-0 rounded-full border border-border bg-background shadow-sm transition-[box-shadow] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring data-[disabled]:cursor-not-allowed dark:border-muted dark:bg-foreground",
+              classes?.thumb ??
+                "block size-4 shrink-0 rounded-full border border-border bg-background shadow-sm transition-[box-shadow] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring data-[disabled]:cursor-not-allowed dark:border-muted dark:bg-foreground", // check-tokens-allow: muted
               thumbClassName,
             )}
           />