@vvedantb/ui 0.1.0 → 0.1.2

package/src/ui/sonner.tsx

@@ -1,47 +1,47 @@
-import { Toaster, type ToasterProps } from "sonner";
-import "./sonner.css";
-
-// sonner toaster aligned with flat tonal surfaces `unstyled: true` strips sonner's default visual styling so our classes are
-// the single source of truth toast surfaces use `glass, panel, strong` (flat
-// popover fill) plus `smooth-shadow-ring-md` `!font, sans` is forced on the toaster section because sonner sets its own
-// `font, family` on `[data, sonner, toaster]` from a stylesheet that ships with
-// the package (loaded after our globals), so plain inheritance from `<body>`
-// loses the cascade the `!important` here guarantees instrument sans wins, toasts inherit from the section, so this single class covers everything variant icons (success / error / warning / info) are tinted via a
-// `data, icon` descendant selector, leaving the rest of the toast neutral callers should pass `theme` from `next, themes` so sonner's internal
-// `data, theme` attribute matches the active app theme (used by its focus
-// ring and a few internal states that aren't reachable via classnames) stacking: `expand={false}` keeps toasts collapsed (offset + scale) hovering
-// the stack expands them `sonner.css` hides back, toast content while collapsed
-// because `unstyled` disables sonner's built, in `data, styled` stack rules
-function SonnerToaster(props: ToasterProps) {
-  return (
-    <Toaster
-      expand={false}
-      visibleToasts={4}
-      gap={12}
-      className="toaster group !font-sans"
-      toastOptions={{
-        unstyled: true,
-        classNames: {
-          toast:
-            "group toast glass-panel-strong flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm text-foreground smooth-shadow-ring-md",
-          title: "font-medium leading-snug",
-          description: "text-[13px] leading-snug text-muted",
-          actionButton:
-            "rounded-lg bg-accent px-2.5 py-1 text-xs font-medium text-accent-foreground transition-opacity hover:opacity-90",
-          cancelButton:
-            "rounded-lg bg-surface-secondary px-2.5 py-1 text-xs font-medium text-muted transition-colors hover:bg-surface-tertiary",
-          closeButton:
-            "rounded-lg bg-default px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-default/78",
-          loader: "text-muted",
-          success: "[&_[data-icon]]:text-success",
-          error: "[&_[data-icon]]:text-danger",
-          warning: "[&_[data-icon]]:text-warning",
-          info: "[&_[data-icon]]:text-accent",
-        },
-      }}
-      {...props}
-    />
-  );
-}
-
-export { SonnerToaster };
+import { Toaster, type ToasterProps } from "sonner";
+import "./sonner.css";
+
+// sonner toaster aligned with flat tonal surfaces `unstyled: true` strips sonner's default visual styling so our classes are
+// the single source of truth toast surfaces use `glass, panel, strong` (flat
+// popover fill) plus `smooth-shadow-ring-md` `!font, sans` is forced on the toaster section because sonner sets its own
+// `font, family` on `[data, sonner, toaster]` from a stylesheet that ships with
+// the package (loaded after our globals), so plain inheritance from `<body>`
+// loses the cascade the `!important` here guarantees instrument sans wins, toasts inherit from the section, so this single class covers everything variant icons (success / error / warning / info) are tinted via a
+// `data, icon` descendant selector, leaving the rest of the toast neutral callers should pass `theme` from `next, themes` so sonner's internal
+// `data, theme` attribute matches the active app theme (used by its focus
+// ring and a few internal states that aren't reachable via classnames) stacking: `expand={false}` keeps toasts collapsed (offset + scale) hovering
+// the stack expands them `sonner.css` hides back, toast content while collapsed
+// because `unstyled` disables sonner's built, in `data, styled` stack rules
+function SonnerToaster(props: ToasterProps) {
+  return (
+    <Toaster
+      expand={false}
+      visibleToasts={4}
+      gap={12}
+      className="toaster group !font-sans"
+      toastOptions={{
+        unstyled: true,
+        classNames: {
+          toast:
+            "group toast glass-panel-strong flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm text-foreground smooth-shadow-ring-md",
+          title: "font-medium leading-snug",
+          description: "text-[13px] leading-snug text-muted",
+          actionButton:
+            "rounded-lg bg-accent px-2.5 py-1 text-xs font-medium text-accent-foreground transition-opacity hover:opacity-90",
+          cancelButton:
+            "rounded-lg bg-surface-secondary px-2.5 py-1 text-xs font-medium text-muted transition-colors hover:bg-surface-tertiary",
+          closeButton:
+            "rounded-lg bg-default px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-default/78",
+          loader: "text-muted",
+          success: "[&_[data-icon]]:text-success",
+          error: "[&_[data-icon]]:text-danger",
+          warning: "[&_[data-icon]]:text-warning",
+          info: "[&_[data-icon]]:text-accent",
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+export { SonnerToaster };

package/src/ui/spinner.tsx

@@ -1,27 +1,27 @@
-import { IconLoader2 } from "@tabler/icons-react";
-import { cn } from "../utils/cn";
-
-const sizeClasses = {
-  sm: "size-4",
-  md: "size-6",
-  lg: "size-8",
-};
-
-function Spinner({
-  size = "md",
-  className,
-  ...props
-}: Omit<React.ComponentPropsWithoutRef<"svg">, "size" | "stroke"> & {
-  size?: "sm" | "md" | "lg";
-}) {
-  return (
-    <IconLoader2
-      role="status"
-      aria-label="Loading"
-      className={cn("animate-spin text-muted", sizeClasses[size], className)}
-      {...props}
-    />
-  );
-}
-
-export { Spinner };
+import { IconLoader2 } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+
+const sizeClasses = {
+  sm: "size-4",
+  md: "size-6",
+  lg: "size-8",
+};
+
+function Spinner({
+  size = "md",
+  className,
+  ...props
+}: Omit<React.ComponentPropsWithoutRef<"svg">, "size" | "stroke"> & {
+  size?: "sm" | "md" | "lg";
+}) {
+  return (
+    <IconLoader2
+      role="status"
+      aria-label="Loading"
+      className={cn("animate-spin text-muted", sizeClasses[size], className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/src/ui/surface-classes.ts

@@ -1,55 +1,55 @@
-export const overlaySurfaceClass =
-  "bg-overlay text-overlay-foreground smooth-shadow-ring-xl";
-
-export const modalBackdropClass = "bg-backdrop backdrop-blur-md";
-
-export const staticSurfaceClass =
-  "bg-surface-secondary text-surface-foreground border-0 shadow-none backdrop-blur-none";
-
-export const flatElevatedSurfaceClass =
-  "bg-surface text-surface-foreground border-0 shadow-none backdrop-blur-none";
-
-export const flatElevatedSurfaceHoverClass =
-  "transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary";
-
-export const flatElevatedSurfaceFocusClass = "focus-within:outline-hidden";
-
-export const chatInputContainerClass =
-  "bg-surface-secondary text-foreground shadow-none backdrop-blur-none";
-
-export const flatPanelSubtleClass =
-  "bg-surface-secondary text-foreground border-0 shadow-none backdrop-blur-none";
-
-export const flatPanelSubtleHoverClass =
-  "transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-tertiary";
-
-export const flatInteractiveClass =
-  "border-0 bg-transparent shadow-none backdrop-blur-none transition-[background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-secondary hover:text-foreground";
-
-export const segmentActiveClass = "bg-segment text-segment-foreground";
-
-export const segmentActiveStateClass =
-  "data-[state=active]:bg-segment data-[state=active]:text-segment-foreground";
-
-export const segmentOpenStateClass =
-  "data-[state=open]:bg-segment data-[state=open]:text-segment-foreground";
-
-export const segmentExpandedStateClass =
-  "aria-expanded:bg-segment aria-expanded:text-segment-foreground";
-
-export const defaultActiveClass = "bg-default text-default-foreground";
-
-export const defaultSelectedStateClass =
-  "data-[state=selected]:bg-default data-[state=selected]:text-default-foreground";
-
-export const defaultActiveStateClass =
-  "data-[state=active]:bg-default data-[state=active]:text-default-foreground";
-
-export const menuItemHighlightClass =
-  "focus:bg-surface-tertiary focus:text-foreground data-highlighted:bg-surface-tertiary data-highlighted:text-foreground";
-
-export const menuItemEmphasisHighlightClass =
-  "focus:bg-default focus:text-default-foreground data-highlighted:bg-default data-highlighted:text-default-foreground data-[state=open]:bg-default data-[state=open]:text-default-foreground";
-
-export const menuListSelectedClass =
-  "data-[selected=true]:bg-default data-[selected=true]:text-default-foreground";
+export const overlaySurfaceClass =
+  "bg-overlay text-overlay-foreground smooth-shadow-ring-xl";
+
+export const modalBackdropClass = "bg-backdrop backdrop-blur-md";
+
+export const staticSurfaceClass =
+  "bg-surface-secondary text-surface-foreground border-0 shadow-none backdrop-blur-none";
+
+export const flatElevatedSurfaceClass =
+  "bg-surface text-surface-foreground border-0 shadow-none backdrop-blur-none";
+
+export const flatElevatedSurfaceHoverClass =
+  "transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary";
+
+export const flatElevatedSurfaceFocusClass = "focus-within:outline-hidden";
+
+export const chatInputContainerClass =
+  "bg-surface-secondary text-foreground shadow-none backdrop-blur-none";
+
+export const flatPanelSubtleClass =
+  "bg-surface-secondary text-foreground border-0 shadow-none backdrop-blur-none";
+
+export const flatPanelSubtleHoverClass =
+  "transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-tertiary";
+
+export const flatInteractiveClass =
+  "border-0 bg-transparent shadow-none backdrop-blur-none transition-[background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-secondary hover:text-foreground";
+
+export const segmentActiveClass = "bg-segment text-segment-foreground";
+
+export const segmentActiveStateClass =
+  "data-[state=active]:bg-segment data-[state=active]:text-segment-foreground";
+
+export const segmentOpenStateClass =
+  "data-[state=open]:bg-segment data-[state=open]:text-segment-foreground";
+
+export const segmentExpandedStateClass =
+  "aria-expanded:bg-segment aria-expanded:text-segment-foreground";
+
+export const defaultActiveClass = "bg-default text-default-foreground";
+
+export const defaultSelectedStateClass =
+  "data-[state=selected]:bg-default data-[state=selected]:text-default-foreground";
+
+export const defaultActiveStateClass =
+  "data-[state=active]:bg-default data-[state=active]:text-default-foreground";
+
+export const menuItemHighlightClass =
+  "focus:bg-surface-tertiary focus:text-foreground data-highlighted:bg-surface-tertiary data-highlighted:text-foreground";
+
+export const menuItemEmphasisHighlightClass =
+  "focus:bg-default focus:text-default-foreground data-highlighted:bg-default data-highlighted:text-default-foreground data-[state=open]:bg-default data-[state=open]:text-default-foreground";
+
+export const menuListSelectedClass =
+  "data-[selected=true]:bg-default data-[selected=true]:text-default-foreground";

package/src/ui/switch.tsx

@@ -1,26 +1,26 @@
-import * as React from "react";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { cn } from "../utils/cn";
-
-const Switch = React.forwardRef<
-  React.ComponentRef<typeof SwitchPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitive.Root
-    className={cn(
-      "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-border bg-default transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=unchecked]:bg-default before:absolute before:inset-[-8px] before:content-['']",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitive.Thumb
-      className={cn(
-        "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-[transform,background-color] duration-200 ease-smooth data-[state=checked]:translate-x-4 data-[state=checked]:bg-accent-foreground data-[state=unchecked]:translate-x-0",
-      )}
-    />
-  </SwitchPrimitive.Root>
-));
-Switch.displayName = SwitchPrimitive.Root.displayName;
-
-export { Switch };
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../utils/cn";
+
+const Switch = React.forwardRef<
+  React.ComponentRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(
+      "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-border bg-default transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=unchecked]:bg-default before:absolute before:inset-[-8px] before:content-['']",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-[transform,background-color] duration-200 ease-smooth data-[state=checked]:translate-x-4 data-[state=checked]:bg-accent-foreground data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

package/src/ui/table.tsx

@@ -1,123 +1,123 @@
-import * as React from "react";
-import { cn } from "../utils/cn";
-
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto rounded-lg max-sm:min-w-0 max-sm:max-w-full">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-));
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead
-    ref={ref}
-    className={cn("[&_tr]:border-b [&_tr]:border-separator", className)}
-    {...props}
-  />
-));
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-));
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t border-separator bg-surface-secondary/30 font-medium [&>tr]:last:border-b-0",
-      className,
-    )}
-    {...props}
-  />
-));
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b border-separator transition-colors duration-200 ease-smooth hover:bg-surface-tertiary/50 data-[state=selected]:bg-surface-secondary",
-      className,
-    )}
-    {...props}
-  />
-));
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-widest text-muted [&:has([role=checkbox])]:pr-0",
-      className,
-    )}
-    {...props}
-  />
-));
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      "p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0",
-      className,
-    )}
-    {...props}
-  />
-));
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted", className)}
-    {...props}
-  />
-));
-TableCaption.displayName = "TableCaption";
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-};
+import * as React from "react";
+import { cn } from "../utils/cn";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto rounded-lg max-sm:min-w-0 max-sm:max-w-full">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn("[&_tr]:border-b [&_tr]:border-separator", className)}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t border-separator bg-surface-secondary/30 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b border-separator transition-colors duration-200 ease-smooth hover:bg-surface-tertiary/50 data-[state=selected]:bg-surface-secondary",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-widest text-muted [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};