@vvedantb/ui 0.17.1 → 0.18.0

package/src/ui/input-group.alt.tsx

@@ -5,10 +5,23 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
 import { fieldFocusWithinClass } from "./_field-classes";
 import { Button, type ButtonProps } from "./button";
-import { Input } from "./input";
-import { Textarea } from "./textarea";
+import {
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "./input-group";
 
-const InputGroup = React.forwardRef<
+// The `Alt` look on the main parts: per-instance `classes` replace the main
+// classes (and any `UiConfig.InputGroup` entry), and `role` / `data-slot`
+// set to `undefined` drop the main attributes, so the markup is the
+// pre-wrapper one. Two parts cannot go through the main ones without changing
+// their markup: the root puts `data-input-group` (the addon's focus hook)
+// before `class`, and the button has no default `type`; they stay a plain
+// `<div>` and a `Button`.
+
+/** @deprecated Use `InputGroup`. Kept for existing consumers; removed in a later minor after they move. */
+const InputGroupAlt = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & { error?: boolean }
 >(({ className, error, ...props }, ref) => (
@@ -28,10 +41,11 @@ const InputGroup = React.forwardRef<
     {...props}
   />
 ));
-InputGroup.displayName = "InputGroup";
+InputGroupAlt.displayName = "InputGroupAlt";
 
-const inputGroupAddonVariants = cva("flex items-center", {
-  variants: {
+const addonClasses = {
+  addon: {
+    base: "flex items-center",
     align: {
       "inline-start": "flex-row ps-3",
       "inline-end": "flex-row pe-3",
@@ -39,35 +53,38 @@ const inputGroupAddonVariants = cva("flex items-center", {
       "block-end": "w-full flex-row px-3 py-2",
     },
   },
-  defaultVariants: {
-    align: "inline-start",
-  },
-});
+};
 
-const InputGroupAddon = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> &
-    VariantProps<typeof inputGroupAddonVariants>
->(({ className, align, onClick, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-align={align}
-    className={cn(inputGroupAddonVariants({ align }), className)}
-    onClick={(e) => {
-      if (onClick) {
-        onClick(e);
-        return;
-      }
-      const group = (e.currentTarget as HTMLElement).closest(
-        "[data-input-group]",
-      );
-      const input = group?.querySelector("textarea, input");
-      if (input instanceof HTMLElement) input.focus();
-    }}
-    {...props}
-  />
-));
-InputGroupAddon.displayName = "InputGroupAddon";
+/** `align={null}` (allowed by the old variant props) adds no align classes. */
+const addonClassesNoAlign = { addon: { base: "flex items-center", align: { "inline-start": "" } } };
+
+/** Focuses the group's first textarea or input (the click target of an addon). */
+function focusGroupField(event: React.MouseEvent<HTMLDivElement>) {
+  const group = event.currentTarget.closest("[data-input-group]");
+  const field = group?.querySelector("textarea, input");
+  if (field instanceof HTMLElement) field.focus();
+}
+
+/** @deprecated Use `InputGroupAddon`. Kept for existing consumers; removed in a later minor after they move. */
+function InputGroupAddonAlt({
+  align,
+  onClick,
+  ...props
+}: React.ComponentProps<"div"> & {
+  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null;
+}) {
+  return (
+    <InputGroupAddon
+      role={undefined}
+      data-slot={undefined}
+      align={align}
+      data-align={align ?? undefined}
+      classes={align === null ? addonClassesNoAlign : addonClasses}
+      onClick={onClick ?? focusGroupField}
+      {...props}
+    />
+  );
+}
 
 const inputGroupButtonVariants = cva("shrink-0 shadow-none", {
   variants: {
@@ -83,7 +100,8 @@ const inputGroupButtonVariants = cva("shrink-0 shadow-none", {
   },
 });
 
-const InputGroupButton = React.forwardRef<
+/** @deprecated Use `InputGroupButton`. Kept for existing consumers; removed in a later minor after they move. */
+const InputGroupButtonAlt = React.forwardRef<
   HTMLButtonElement,
   ButtonProps & VariantProps<typeof inputGroupButtonVariants>
 >(({ className, size, variant = "ghost", ...props }, ref) => (
@@ -94,58 +112,40 @@ const InputGroupButton = React.forwardRef<
     {...props}
   />
 ));
-InputGroupButton.displayName = "InputGroupButton";
+InputGroupButtonAlt.displayName = "InputGroupButtonAlt";
 
-function InputGroupText({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) {
-  return (
-    <span
-      className={cn(
-        "flex items-center text-sm text-muted-foreground/95",
-        className,
-      )}
-      {...props}
-    />
-  );
+const textClasses = { text: "flex items-center text-sm text-muted-foreground/95" };
+
+/** @deprecated Use `InputGroupText`. Kept for existing consumers; removed in a later minor after they move. */
+function InputGroupTextAlt(props: React.HTMLAttributes<HTMLSpanElement>) {
+  return <InputGroupText classes={textClasses} {...props} />;
 }
 
-const InputGroupInput = React.forwardRef<
-  HTMLInputElement,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => (
-  <Input
-    ref={ref}
-    className={cn(
-      "h-full flex-1 rounded-none border-0 bg-transparent px-3 py-2 shadow-none focus-visible:border-0 focus-visible:ring-0",
-      className,
-    )}
-    {...props}
-  />
-));
-InputGroupInput.displayName = "InputGroupInput";
+const inputClasses = {
+  input:
+    "h-full flex-1 rounded-none border-0 bg-transparent px-3 py-2 shadow-none focus-visible:border-0 focus-visible:ring-0",
+};
 
-const InputGroupTextarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<typeof Textarea>
->(({ className, ...props }, ref) => (
-  <Textarea
-    ref={ref}
-    className={cn(
-      "flex-1 resize-none rounded-none border-0 bg-transparent px-3 py-2.5 shadow-none focus-visible:border-0 focus-visible:ring-0 field-sizing-content",
-      className,
-    )}
-    {...props}
-  />
-));
-InputGroupTextarea.displayName = "InputGroupTextarea";
+/** @deprecated Use `InputGroupInput`. Kept for existing consumers; removed in a later minor after they move. */
+function InputGroupInputAlt(props: React.ComponentProps<"input">) {
+  return <InputGroupInput data-slot={undefined} classes={inputClasses} {...props} />;
+}
+
+const textareaClasses = {
+  textarea:
+    "flex-1 resize-none rounded-none border-0 bg-transparent px-3 py-2.5 shadow-none focus-visible:border-0 focus-visible:ring-0 field-sizing-content",
+};
+
+/** @deprecated Use `InputGroupTextarea`. Kept for existing consumers; removed in a later minor after they move. */
+function InputGroupTextareaAlt(props: React.ComponentProps<"textarea">) {
+  return <InputGroupTextarea data-slot={undefined} classes={textareaClasses} {...props} />;
+}
 
 export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
+  InputGroupAlt,
+  InputGroupAddonAlt,
+  InputGroupButtonAlt,
+  InputGroupTextAlt,
+  InputGroupInputAlt,
+  InputGroupTextareaAlt,
 };

package/src/ui/input-group.tsx

@@ -3,64 +3,105 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "../utils/cn";
 import { Button } from "./button";
 import { Input } from "./input";
 import { Textarea } from "./textarea";
+import { useCn, useUiConfig } from "./ui-config";
+
+type InputGroupAlign = "inline-start" | "inline-end" | "block-start" | "block-end";
+type InputGroupButtonSize = "xs" | "sm" | "icon-xs" | "icon-sm";
+
+type InputGroupClasses = {
+  root?: string;
+  addon?: { base?: string; align?: Partial<Record<InputGroupAlign, string>> };
+  button?: { base?: string; size?: Partial<Record<InputGroupButtonSize, string>> };
+  text?: string;
+  input?: string;
+  textarea?: string;
+};
+
+/**
+ * `UiConfig.InputGroup`: each given class string replaces the built-in one.
+ * `InputGroupAddon`, `InputGroupText`, `InputGroupInput` and
+ * `InputGroupTextarea` also take a `classes` prop with their own key, which
+ * wins over the config for that instance.
+ */
+export interface InputGroupConfig {
+  classes?: InputGroupClasses;
+}
+
+const inputGroupRootClasses = [
+  "group/input-group relative flex w-full flex-wrap items-center rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth outline-hidden",
+  "h-10 min-w-0 has-[>textarea]:h-auto",
+  "[&>input]:has-[>[data-align=inline-start]]:pl-2",
+  "[&>input]:has-[>[data-align=inline-end]]:pr-2",
+  "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col [&>input]:has-[>[data-align=block-start]]:pb-3",
+  "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col [&>input]:has-[>[data-align=block-end]]:pt-3",
+  "has-[[data-slot=input-group-control]:focus-visible]:border-focus-border has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-focus-ring",
+  "has-[[data-slot][aria-invalid=true]]:border-danger-border has-[[data-slot][aria-invalid=true]]:ring-danger-ring",
+];
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  const root = useUiConfig("InputGroup")?.classes?.root;
+  const merge = useCn();
   return (
     <div
       data-slot="input-group"
       role="group"
-      className={cn(
-        "group/input-group relative flex w-full flex-wrap items-center rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth outline-hidden",
-        "h-10 min-w-0 has-[>textarea]:h-auto",
-        "[&>input]:has-[>[data-align=inline-start]]:pl-2",
-        "[&>input]:has-[>[data-align=inline-end]]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col [&>input]:has-[>[data-align=block-start]]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col [&>input]:has-[>[data-align=block-end]]:pt-3",
-        "has-[[data-slot=input-group-control]:focus-visible]:border-focus-border has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-focus-ring",
-        "has-[[data-slot][aria-invalid=true]]:border-danger-border has-[[data-slot][aria-invalid=true]]:ring-danger-ring",
-        className,
-      )}
+      className={merge(root ?? inputGroupRootClasses, className)}
       {...props}
     />
   );
 }
 
-const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-md group-data-[disabled=true]/input-group:opacity-50",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end":
-          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start":
-          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end":
-          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
+const inputGroupAddonBaseClasses =
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-md group-data-[disabled=true]/input-group:opacity-50";
+
+const inputGroupAddonAlignClasses = {
+  "inline-start":
+    "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+  "inline-end":
+    "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+  "block-start":
+    "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+  "block-end":
+    "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+};
+
+const inputGroupAddonVariants = cva(inputGroupAddonBaseClasses, {
+  variants: {
+    align: inputGroupAddonAlignClasses,
+  },
+  defaultVariants: {
+    align: "inline-start",
   },
-);
+});
 
 function InputGroupAddon({
   className,
   align = "inline-start",
+  classes: instance,
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof inputGroupAddonVariants> & { classes?: Pick<InputGroupClasses, "addon"> }) {
+  const config = useUiConfig("InputGroup")?.classes;
+  const classes = instance?.addon ?? config?.addon;
+  const merge = useCn();
+  const a = align ?? "inline-start";
   return (
     <div
       role="group"
       data-slot="input-group-addon"
       data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
+      className={
+        classes
+          ? merge(
+              classes.base ?? inputGroupAddonBaseClasses,
+              classes.align?.[a] ?? inputGroupAddonAlignClasses[a],
+              className,
+            )
+          : merge(inputGroupAddonVariants({ align }), className)
+      }
       onClick={(e) => {
         if ((e.target as HTMLElement).closest("button")) {
           return;
@@ -72,22 +113,23 @@ function InputGroupAddon({
   );
 }
 
-const inputGroupButtonVariants = cva(
-  "text-sm shadow-none flex gap-2 items-center",
-  {
-    variants: {
-      size: {
-        xs: "h-7 gap-1 rounded-lg px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-        sm: "h-8 rounded-lg px-2.5 gap-1.5 text-xs has-[>svg]:px-2.5",
-        "icon-xs": "size-7 rounded-lg p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 rounded-lg p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
+const inputGroupButtonBaseClasses = "text-sm shadow-none flex gap-2 items-center";
+
+const inputGroupButtonSizeClasses = {
+  xs: "h-7 gap-1 rounded-lg px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+  sm: "h-8 rounded-lg px-2.5 gap-1.5 text-xs has-[>svg]:px-2.5",
+  "icon-xs": "size-7 rounded-lg p-0 has-[>svg]:p-0",
+  "icon-sm": "size-8 rounded-lg p-0 has-[>svg]:p-0",
+};
+
+const inputGroupButtonVariants = cva(inputGroupButtonBaseClasses, {
+  variants: {
+    size: inputGroupButtonSizeClasses,
+  },
+  defaultVariants: {
+    size: "xs",
   },
-);
+});
 
 function InputGroupButton({
   className,
@@ -97,22 +139,41 @@ function InputGroupButton({
   ...props
 }: Omit<React.ComponentProps<typeof Button>, "size"> &
   VariantProps<typeof inputGroupButtonVariants>) {
+  const classes = useUiConfig("InputGroup")?.classes?.button;
+  const merge = useCn();
+  const s = size ?? "xs";
   return (
     <Button
       type={type}
       data-size={size}
       variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
+      className={
+        classes
+          ? merge(
+              classes.base ?? inputGroupButtonBaseClasses,
+              classes.size?.[s] ?? inputGroupButtonSizeClasses[s],
+              className,
+            )
+          : merge(inputGroupButtonVariants({ size }), className)
+      }
       {...props}
     />
   );
 }
 
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+function InputGroupText({
+  className,
+  classes,
+  ...props
+}: React.ComponentProps<"span"> & { classes?: Pick<InputGroupClasses, "text"> }) {
+  const config = useUiConfig("InputGroup")?.classes;
+  const base = classes?.text ?? config?.text;
+  const merge = useCn();
   return (
     <span
-      className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+      className={merge(
+        base ??
+          "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -122,13 +183,18 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
 
 function InputGroupInput({
   className,
+  classes,
   ...props
-}: React.ComponentProps<"input">) {
+}: React.ComponentProps<"input"> & { classes?: Pick<InputGroupClasses, "input"> }) {
+  const config = useUiConfig("InputGroup")?.classes;
+  const base = classes?.input ?? config?.input;
+  const merge = useCn();
   return (
     <Input
       data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus:outline-hidden focus-visible:ring-0",
+      className={merge(
+        base ??
+          "flex-1 rounded-none border-0 bg-transparent shadow-none focus:outline-hidden focus-visible:ring-0",
         className,
       )}
       {...props}
@@ -138,13 +204,18 @@ function InputGroupInput({
 
 function InputGroupTextarea({
   className,
+  classes,
   ...props
-}: React.ComponentProps<"textarea">) {
+}: React.ComponentProps<"textarea"> & { classes?: Pick<InputGroupClasses, "textarea"> }) {
+  const config = useUiConfig("InputGroup")?.classes;
+  const base = classes?.textarea ?? config?.textarea;
+  const merge = useCn();
   return (
     <Textarea
       data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus:outline-hidden focus-visible:ring-0",
+      className={merge(
+        base ??
+          "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus:outline-hidden focus-visible:ring-0",
         className,
       )}
       {...props}

package/src/ui/input.tsx

@@ -1,15 +1,24 @@
 import * as React from "react";
-import { cn } from "../utils/cn";
 import { fieldFocusClass } from "./_field-classes";
+import { useCn, useUiConfig } from "./ui-config";
+
+/** `UiConfig.Input`: `classes.base` replaces the built-in field classes. */
+export interface InputConfig {
+  classes?: { base?: string };
+}
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
+    const base = useUiConfig("Input")?.classes?.base;
+    const merge = useCn();
     return (
       <input
         type={type}
-        className={cn(
-          "flex h-10 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
-          fieldFocusClass,
+        className={merge(
+          base ?? [
+            "flex h-10 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
+            fieldFocusClass,
+          ],
           className,
         )}
         ref={ref}

package/src/ui/label.tsx

@@ -1,6 +1,11 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "./ui-config";
+
+export interface LabelConfig {
+  /** Replaces the built-in classes of a part. */
+  classes?: { root?: string };
+}
 
 const labelClass =
   "text-sm font-medium leading-none tracking-normal text-foreground/90 peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
@@ -8,13 +13,11 @@ const labelClass =
 const Label = React.forwardRef<
   React.ComponentRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelClass, className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const root = useUiConfig("Label")?.classes?.root;
+  const merge = useCn();
+  return <LabelPrimitive.Root ref={ref} className={merge(root ?? labelClass, className)} {...props} />;
+});
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };