@vvedantb/ui 0.1.0 → 0.1.2

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

@@ -1,150 +1,150 @@
-"use client";
-
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Button, type ButtonProps } from "./button";
-import { Input } from "./input";
-import { Textarea } from "./textarea";
-
-const InputGroup = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { error?: boolean }
->(({ className, error, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-input-group=""
-    className={cn(
-      "flex h-10 flex-wrap rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth",
-      "has-[textarea]:h-auto",
-      "has-data-[slot=input-group-control]:h-auto",
-      "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
-      "has-focus-visible:border-focus-border has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-focus-ring",
-      error &&
-        "border-danger-border has-focus-visible:border-danger has-focus-visible:ring-danger-ring",
-      className,
-    )}
-    {...props}
-  />
-));
-InputGroup.displayName = "InputGroup";
-
-const inputGroupAddonVariants = cva("flex items-center", {
-  variants: {
-    align: {
-      "inline-start": "flex-row ps-3",
-      "inline-end": "flex-row pe-3",
-      "block-start": "w-full flex-row border-b border-separator px-3 py-2",
-      "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";
-
-const inputGroupButtonVariants = cva("shrink-0 shadow-none", {
-  variants: {
-    size: {
-      xs: "h-7 rounded-lg px-2 text-xs",
-      sm: "h-8 rounded-lg px-2.5 text-xs",
-      "icon-xs": "h-7 w-7 rounded-lg",
-      "icon-sm": "h-8 w-8 rounded-lg",
-    },
-  },
-  defaultVariants: {
-    size: "xs",
-  },
-});
-
-const InputGroupButton = React.forwardRef<
-  HTMLButtonElement,
-  ButtonProps & VariantProps<typeof inputGroupButtonVariants>
->(({ className, size, variant = "ghost", ...props }, ref) => (
-  <Button
-    ref={ref}
-    variant={variant}
-    className={cn(inputGroupButtonVariants({ size }), className)}
-    {...props}
-  />
-));
-InputGroupButton.displayName = "InputGroupButton";
-
-function InputGroupText({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) {
-  return (
-    <span
-      className={cn(
-        "flex items-center text-sm text-muted-foreground/95",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const InputGroupInput = React.forwardRef<
-  HTMLInputElement,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => (
-  <Input
-    ref={ref}
-    className={cn(
-      "h-full flex-1 border-0 bg-transparent px-3 py-2 shadow-none focus-visible:border-0 focus-visible:ring-0",
-      className,
-    )}
-    {...props}
-  />
-));
-InputGroupInput.displayName = "InputGroupInput";
-
-const InputGroupTextarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<typeof Textarea>
->(({ className, ...props }, ref) => (
-  <Textarea
-    ref={ref}
-    className={cn(
-      "flex-1 resize-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";
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-};
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Button, type ButtonProps } from "./button";
+import { Input } from "./input";
+import { Textarea } from "./textarea";
+
+const InputGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { error?: boolean }
+>(({ className, error, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-input-group=""
+    className={cn(
+      "flex h-10 flex-wrap rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth",
+      "has-[textarea]:h-auto",
+      "has-data-[slot=input-group-control]:h-auto",
+      "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
+      "has-focus-visible:border-focus-border has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-focus-ring",
+      error &&
+        "border-danger-border has-focus-visible:border-danger has-focus-visible:ring-danger-ring",
+      className,
+    )}
+    {...props}
+  />
+));
+InputGroup.displayName = "InputGroup";
+
+const inputGroupAddonVariants = cva("flex items-center", {
+  variants: {
+    align: {
+      "inline-start": "flex-row ps-3",
+      "inline-end": "flex-row pe-3",
+      "block-start": "w-full flex-row border-b border-separator px-3 py-2",
+      "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";
+
+const inputGroupButtonVariants = cva("shrink-0 shadow-none", {
+  variants: {
+    size: {
+      xs: "h-7 rounded-lg px-2 text-xs",
+      sm: "h-8 rounded-lg px-2.5 text-xs",
+      "icon-xs": "h-7 w-7 rounded-lg",
+      "icon-sm": "h-8 w-8 rounded-lg",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+});
+
+const InputGroupButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & VariantProps<typeof inputGroupButtonVariants>
+>(({ className, size, variant = "ghost", ...props }, ref) => (
+  <Button
+    ref={ref}
+    variant={variant}
+    className={cn(inputGroupButtonVariants({ size }), className)}
+    {...props}
+  />
+));
+InputGroupButton.displayName = "InputGroupButton";
+
+function InputGroupText({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn(
+        "flex items-center text-sm text-muted-foreground/95",
+        className,
+      )}
+      {...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 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";
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};

package/src/ui/input.tsx

@@ -1,21 +1,21 @@
-import * as React from "react";
-import { cn } from "../utils/cn";
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full max-sm:min-w-0 rounded-none 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 focus-visible:border-focus-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    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 focus-visible:border-focus-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/ui/kbd.tsx

@@ -1,18 +1,18 @@
-import * as React from "react";
-import { cn } from "../utils/cn";
-
-const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
-  ({ className, ...props }, ref) => (
-    <kbd
-      ref={ref}
-      className={cn(
-        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-Kbd.displayName = "Kbd";
-
-export { Kbd };
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, ...props }, ref) => (
+    <kbd
+      ref={ref}
+      className={cn(
+        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Kbd.displayName = "Kbd";
+
+export { Kbd };

package/src/ui/label.tsx

@@ -1,20 +1,20 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cn } from "../utils/cn";
-
-const labelClass =
-  "text-sm font-medium leading-none tracking-normal text-foreground/90 peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
-
-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}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../utils/cn";
+
+const labelClass =
+  "text-sm font-medium leading-none tracking-normal text-foreground/90 peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
+
+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}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/ui/labeled-switch-row.tsx

@@ -1,53 +1,53 @@
-import type { ReactNode } from "react";
-import { Label } from "./label";
-import { Switch } from "./switch";
-
-interface LabeledSwitchRowProps {
-  id: string;
-  label: string;
-  description?: string;
-  checked: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  icon?: ReactNode;
-  trailing?: ReactNode;
-}
-
-export function LabeledSwitchRow({
-  id,
-  label,
-  description,
-  checked,
-  onCheckedChange,
-  disabled,
-  icon,
-  trailing,
-}: LabeledSwitchRowProps) {
-  return (
-    <div className="flex items-center justify-between gap-3 max-sm:flex-wrap">
-      <div className="flex min-w-0 items-start gap-2">
-        {icon ? (
-          <span className="mt-0.5 shrink-0 text-muted">{icon}</span>
-        ) : null}
-        <div className="min-w-0">
-          <Label htmlFor={id} className="text-sm font-medium">
-            {label}
-          </Label>
-          {description ? (
-            <p className="mt-1 text-xs text-muted text-pretty">{description}</p>
-          ) : null}
-        </div>
-      </div>
-      {trailing ?? (
-        <div className="flex min-h-10 shrink-0 items-center">
-          <Switch
-            id={id}
-            checked={checked}
-            onCheckedChange={onCheckedChange}
-            disabled={disabled}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
+import type { ReactNode } from "react";
+import { Label } from "./label";
+import { Switch } from "./switch";
+
+interface LabeledSwitchRowProps {
+  id: string;
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  icon?: ReactNode;
+  trailing?: ReactNode;
+}
+
+export function LabeledSwitchRow({
+  id,
+  label,
+  description,
+  checked,
+  onCheckedChange,
+  disabled,
+  icon,
+  trailing,
+}: LabeledSwitchRowProps) {
+  return (
+    <div className="flex items-center justify-between gap-3 max-sm:flex-wrap">
+      <div className="flex min-w-0 items-start gap-2">
+        {icon ? (
+          <span className="mt-0.5 shrink-0 text-muted">{icon}</span>
+        ) : null}
+        <div className="min-w-0">
+          <Label htmlFor={id} className="text-sm font-medium">
+            {label}
+          </Label>
+          {description ? (
+            <p className="mt-1 text-xs text-muted text-pretty">{description}</p>
+          ) : null}
+        </div>
+      </div>
+      {trailing ?? (
+        <div className="flex min-h-10 shrink-0 items-center">
+          <Switch
+            id={id}
+            checked={checked}
+            onCheckedChange={onCheckedChange}
+            disabled={disabled}
+          />
+        </div>
+      )}
+    </div>
+  );
+}