@tollerud/ui 1.0.1 → 1.0.3

package/README.md

@@ -4,6 +4,10 @@ A complete, browsable UI library built around **monochrome + yellow accent**. No
 
 **[Live docs →](https://tollerud.github.io/design-system/)** — browse every token, component, and pattern live with copy-paste code.
 
+**Requirements:** React ≥ 18 · TypeScript supported (types included) · Tailwind CSS v3 or v4
+
+→ **[Component reference →](COMPONENTS.md)** · **[Setup guide →](GETTING_STARTED.md)** · **[Changelog →](CHANGELOG.md)**
+
 ## Philosophy
 
 > Clean lines. Sharp contrast. Yellow where it counts.
@@ -15,12 +19,16 @@ Tollerud DS is minimal but not cold. It uses a near-black foundation with warm y
 ### npm package (recommended)
 
 ```bash
-npm install @tollerud/ui clsx tailwind-merge
-# Optional — for NoirGlowBackground:
+npm install @tollerud/ui clsx tailwind-merge tailwindcss
+```
+
+`@paper-design/shaders-react` is an **optional** peer dependency — the package installs and works without it. Install it only if you use `NoirGlowBackground`; all other components fall back to CSS automatically.
+
+```bash
 npm install @paper-design/shaders-react
 ```
 
-**Tailwind** — add the preset in `tailwind.config.ts`:
+**Tailwind v3** — add the preset in `tailwind.config.ts`:
 
 ```ts
 import type { Config } from 'tailwindcss'
@@ -37,6 +45,28 @@ const config: Config = {
 export default config
 ```
 
+**Tailwind v4** — use `@config` and `@source` in your CSS instead of a config file:
+
+```css
+/* app/globals.css */
+@import 'tailwindcss';
+@import '@tollerud/ui/globals.css';
+
+/* Pull in the preset tokens as a v4 plugin */
+@config './tailwind.config.ts';
+
+/* Scan the package dist so utility classes aren't purged */
+@source '../node_modules/@tollerud/ui/dist';
+```
+
+If you're not using a `tailwind.config.ts` in v4, copy the contents of `tollerud-preset.js` into a `@theme {}` block manually, or keep a minimal config just for the preset:
+
+```ts
+// tailwind.config.ts (v4 shim)
+import tollerudPreset from '@tollerud/ui/preset'
+export default { presets: [tollerudPreset] }
+```
+
 **CSS** — import tokens and component classes in `app/globals.css`:
 
 ```css
@@ -49,6 +79,8 @@ export default config
 import { Button, Card, Badge, StatusDot, CodeBlock, Kbd, CommandMenu, NoirGlowBackground } from '@tollerud/ui'
 ```
 
+TypeScript types are included — no `@types/*` package needed. See **[COMPONENTS.md](COMPONENTS.md)** for the full prop reference for every component.
+
 Publish a new version by creating a GitHub Release; CI runs `npm publish` when `NPM_TOKEN` is configured.
 
 ### Copy from repo (alternative)
@@ -168,7 +200,7 @@ cp globals.css src/app/
 cp tollerud-preset.js .
 ```
 
-See `GETTING_STARTED.md` for full setup guide.
+See [GETTING_STARTED.md](GETTING_STARTED.md) for the full setup guide.
 
 ## File Structure
 

package/dist/index.d.cts

@@ -1,7 +1,6 @@
 import { ClassValue } from 'clsx';
 import * as react from 'react';
 import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, CSSProperties, ReactNode, TextareaHTMLAttributes, ReactElement, ComponentPropsWithoutRef } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -162,7 +161,7 @@ interface NoirGlowBackgroundProps {
  * The CSS fallback classes live in `globals.css` and are used during Suspense,
  * reduced-motion contexts, or when `forceCssFallback` is true.
  */
-declare function NoirGlowBackground({ className, style, shape, intensity, speed, grain, softness, colorBack, colors, preserveCenter, noiseOverlay, forceCssFallback, inert, }: NoirGlowBackgroundProps): react_jsx_runtime.JSX.Element;
+declare function NoirGlowBackground({ className, style, shape, intensity, speed, grain, softness, colorBack, colors, preserveCenter, noiseOverlay, forceCssFallback, inert, }: NoirGlowBackgroundProps): react.JSX.Element;
 
 interface KbdProps extends HTMLAttributes<HTMLSpanElement> {
     /**
@@ -578,18 +577,18 @@ declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.Dialo
 declare const DialogOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
-    ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
     displayName: string;
 };
 declare const DialogFooter: {
-    ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
     displayName: string;
 };
 declare const DialogTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
 declare const TooltipProvider: react.FC<TooltipPrimitive.TooltipProviderProps>;
-declare function Tooltip({ children, defaultOpen, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...props }: react.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, defaultOpen, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...props }: react.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): react.JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }
@@ -601,7 +600,7 @@ declare const TabsList: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsL
 declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 declare const TabsContent: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 
 declare const Progress: react.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
@@ -609,7 +608,7 @@ type TollerudToasterProps = ToasterProps & {
     /** Toast color theme. Wire to your app theme when you have one. */
     theme?: ToasterProps['theme'];
 };
-declare const Toaster: ({ theme, ...props }: TollerudToasterProps) => react_jsx_runtime.JSX.Element;
+declare const Toaster: ({ theme, ...props }: TollerudToasterProps) => react.JSX.Element;
 
 interface EmptyProps extends HTMLAttributes<HTMLDivElement> {
 }
@@ -637,7 +636,7 @@ interface SheetProps {
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-declare const Sheet: ({ open, onOpenChange, children }: SheetProps) => react_jsx_runtime.JSX.Element;
+declare const Sheet: ({ open, onOpenChange, children }: SheetProps) => react.JSX.Element;
 declare const SheetTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const SheetClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 interface SheetContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
@@ -647,7 +646,7 @@ declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps &
 declare const SheetHeader: ({ className, ...props }: {
     className?: string;
     children?: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
+}) => react.JSX.Element;
 declare const SheetTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
@@ -679,7 +678,7 @@ interface GlowCardProps {
     /** Glow intensity (0–1). Default: 0.15 */
     intensity?: number;
 }
-declare function GlowCard({ children, className, glowColor, intensity, }: GlowCardProps): react_jsx_runtime.JSX.Element;
+declare function GlowCard({ children, className, glowColor, intensity, }: GlowCardProps): react.JSX.Element;
 
 interface BentoDashboardProps {
     title: string;
@@ -699,6 +698,6 @@ interface BentoDashboardProps {
     /** Render the incident list footer */
     renderIncidentFooter?: () => ReactNode;
 }
-declare function BentoDashboard({ title, hosts, metrics, services, incidents, className, }: BentoDashboardProps): react_jsx_runtime.JSX.Element;
+declare function BentoDashboard({ title, hosts, metrics, services, incidents, className, }: BentoDashboardProps): react.JSX.Element;
 
 export { ActionDiff, type ActionDiffProps, type ActionItem, ActionRow, type ActionRowProps, Alert, AlertInbox, type AlertInboxProps, type AlertProps, ApprovalCard, type ApprovalCardProps, BackupStatusPanel, type BackupStatusPanelProps, Badge, type BadgeProps, BentoDashboard, type BentoDashboardProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, type Column, type CommandGroup, CommandMenu, type CommandMenuProps, Container, type ContainerProps, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DockerStackCard, type DockerStackCardProps, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyIcon, EmptyTitle, Footer, type FooterLabels, type FooterProps, GlowCard, type GlowCardProps, HostCard, type HostCardProps, IncidentCard, type IncidentCardProps, type IncidentSeverity, Input, type InputProps, Kbd, type KbdProps, LogViewer, type LogViewerProps, NoirGlowBackground, type NoirGlowBackgroundProps, Progress, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RollbackPlan, type RollbackPlanProps, Select, type SelectProps, ServiceHealthCard, type ServiceHealthCardProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, StatCard, type StatCardProps, type Status, StatusDot, type StatusDotProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Timeline, type TimelineItemData, type TimelineProps, Toaster, type TollerudToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn };

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import { ClassValue } from 'clsx';
 import * as react from 'react';
 import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, CSSProperties, ReactNode, TextareaHTMLAttributes, ReactElement, ComponentPropsWithoutRef } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -162,7 +161,7 @@ interface NoirGlowBackgroundProps {
  * The CSS fallback classes live in `globals.css` and are used during Suspense,
  * reduced-motion contexts, or when `forceCssFallback` is true.
  */
-declare function NoirGlowBackground({ className, style, shape, intensity, speed, grain, softness, colorBack, colors, preserveCenter, noiseOverlay, forceCssFallback, inert, }: NoirGlowBackgroundProps): react_jsx_runtime.JSX.Element;
+declare function NoirGlowBackground({ className, style, shape, intensity, speed, grain, softness, colorBack, colors, preserveCenter, noiseOverlay, forceCssFallback, inert, }: NoirGlowBackgroundProps): react.JSX.Element;
 
 interface KbdProps extends HTMLAttributes<HTMLSpanElement> {
     /**
@@ -578,18 +577,18 @@ declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.Dialo
 declare const DialogOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
-    ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
     displayName: string;
 };
 declare const DialogFooter: {
-    ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
     displayName: string;
 };
 declare const DialogTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
 declare const TooltipProvider: react.FC<TooltipPrimitive.TooltipProviderProps>;
-declare function Tooltip({ children, defaultOpen, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...props }: react.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, defaultOpen, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...props }: react.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): react.JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }
@@ -601,7 +600,7 @@ declare const TabsList: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsL
 declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 declare const TabsContent: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 
 declare const Progress: react.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
@@ -609,7 +608,7 @@ type TollerudToasterProps = ToasterProps & {
     /** Toast color theme. Wire to your app theme when you have one. */
     theme?: ToasterProps['theme'];
 };
-declare const Toaster: ({ theme, ...props }: TollerudToasterProps) => react_jsx_runtime.JSX.Element;
+declare const Toaster: ({ theme, ...props }: TollerudToasterProps) => react.JSX.Element;
 
 interface EmptyProps extends HTMLAttributes<HTMLDivElement> {
 }
@@ -637,7 +636,7 @@ interface SheetProps {
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-declare const Sheet: ({ open, onOpenChange, children }: SheetProps) => react_jsx_runtime.JSX.Element;
+declare const Sheet: ({ open, onOpenChange, children }: SheetProps) => react.JSX.Element;
 declare const SheetTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const SheetClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 interface SheetContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
@@ -647,7 +646,7 @@ declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps &
 declare const SheetHeader: ({ className, ...props }: {
     className?: string;
     children?: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
+}) => react.JSX.Element;
 declare const SheetTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
@@ -679,7 +678,7 @@ interface GlowCardProps {
     /** Glow intensity (0–1). Default: 0.15 */
     intensity?: number;
 }
-declare function GlowCard({ children, className, glowColor, intensity, }: GlowCardProps): react_jsx_runtime.JSX.Element;
+declare function GlowCard({ children, className, glowColor, intensity, }: GlowCardProps): react.JSX.Element;
 
 interface BentoDashboardProps {
     title: string;
@@ -699,6 +698,6 @@ interface BentoDashboardProps {
     /** Render the incident list footer */
     renderIncidentFooter?: () => ReactNode;
 }
-declare function BentoDashboard({ title, hosts, metrics, services, incidents, className, }: BentoDashboardProps): react_jsx_runtime.JSX.Element;
+declare function BentoDashboard({ title, hosts, metrics, services, incidents, className, }: BentoDashboardProps): react.JSX.Element;
 
 export { ActionDiff, type ActionDiffProps, type ActionItem, ActionRow, type ActionRowProps, Alert, AlertInbox, type AlertInboxProps, type AlertProps, ApprovalCard, type ApprovalCardProps, BackupStatusPanel, type BackupStatusPanelProps, Badge, type BadgeProps, BentoDashboard, type BentoDashboardProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, type Column, type CommandGroup, CommandMenu, type CommandMenuProps, Container, type ContainerProps, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DockerStackCard, type DockerStackCardProps, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyIcon, EmptyTitle, Footer, type FooterLabels, type FooterProps, GlowCard, type GlowCardProps, HostCard, type HostCardProps, IncidentCard, type IncidentCardProps, type IncidentSeverity, Input, type InputProps, Kbd, type KbdProps, LogViewer, type LogViewerProps, NoirGlowBackground, type NoirGlowBackgroundProps, Progress, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RollbackPlan, type RollbackPlanProps, Select, type SelectProps, ServiceHealthCard, type ServiceHealthCardProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Skeleton, StatCard, type StatCardProps, type Status, StatusDot, type StatusDotProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Timeline, type TimelineItemData, type TimelineProps, Toaster, type TollerudToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn };

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@tollerud/ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Tollerud User Interface — dark, monochrome + yellow accent. Noir aesthetic meets modern utility.",
   "private": false,
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Tollerud/design-system.git"
+    "url": "git+https://github.com/Tollerud/ui.git"
   },
   "homepage": "https://tollerud.github.io/design-system/",
   "bugs": {
-    "url": "https://github.com/Tollerud/design-system/issues"
+    "url": "https://github.com/Tollerud/ui/issues"
   },
   "license": "MIT",
   "sideEffects": [
@@ -67,7 +67,7 @@
     }
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dialog": "^1.1.16",
     "@radix-ui/react-dropdown-menu": "^2.1.17",
     "@radix-ui/react-progress": "^1.1.9",
     "@radix-ui/react-tabs": "^1.1.13",
@@ -78,14 +78,14 @@
     "sonner": "^2.0.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.29",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "clsx": "^2.1.1",
-    "react": "^18.3.1",
+    "react": "^19.2.7",
     "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.6.1",
+    "tailwind-merge": "^3.6.0",
     "tsup": "^8.4.0",
-    "typescript": "^5.6.0"
+    "typescript": "^6.0.3"
   },
   "keywords": [
     "tollerud",