@m7kni/ui 0.1.1 → 0.2.0

package/dist/components/blocks/app-shell.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+export interface AppShellNavItem {
+    label: string;
+    href: string;
+    icon?: React.ReactNode;
+    count?: number;
+    active?: boolean;
+}
+export interface AppShellSavedView {
+    label: string;
+    href: string;
+}
+export interface AppShellProps extends React.ComponentProps<"div"> {
+    /** Product mark, rendered ~20px in the brand row. */
+    mark?: React.ReactNode;
+    productName: string;
+    version?: string;
+    nav: AppShellNavItem[];
+    savedViews?: AppShellSavedView[];
+    /** Pinned to the sidebar's bottom edge — sync/health, mono. */
+    syncStatus?: React.ReactNode;
+    /** Page title in the top bar. */
+    title: string;
+    /** Mono breadcrumb/context beside the title. */
+    context?: string;
+    /** Right side of the top bar: meta + actions. One accent button maximum. */
+    actions?: React.ReactNode;
+    /** Renders pinned to the bottom edge when rows are selected. */
+    bulkBar?: React.ReactNode;
+}
+export declare function AppShell({ mark, productName, version, nav, savedViews, syncStatus, title, context, actions, bulkBar, className, children, ...props }: AppShellProps): React.JSX.Element;
+export interface BulkActionBarProps extends React.ComponentProps<"div"> {
+    /** e.g. "3 devices selected" */
+    count: string;
+    /** Plain-language consequence summary — say what is safe. */
+    consequence?: string;
+}
+export declare function BulkActionBar({ count, consequence, className, children, ...props }: BulkActionBarProps): React.JSX.Element;

package/dist/components/blocks/app-shell.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+export function AppShell({ mark, productName, version, nav, savedViews, syncStatus, title, context, actions, bulkBar, className, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "app-shell", className: cn("flex h-screen overflow-hidden bg-canvas text-ink", className), ...props, children: [_jsxs("aside", { className: "flex w-[200px] shrink-0 flex-col border-r border-border bg-surface", children: [_jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [mark, _jsx("span", { className: "text-md font-semibold", children: productName }), version ? (_jsx("span", { className: "ml-auto font-mono text-2xs text-ink-faint", children: version })) : null] }), _jsxs("nav", { className: "flex-1 overflow-y-auto py-2", children: [_jsx("div", { className: "px-4 pb-1 font-mono text-2xs font-medium tracking-label text-ink-muted uppercase", children: "Views" }), _jsx("ul", { children: nav.map((item) => (_jsx("li", { children: _jsxs("a", { href: item.href, "aria-current": item.active ? "page" : undefined, className: cn("flex items-center gap-2 border-l-2 border-transparent px-4 py-1.5 text-sm text-ink-soft hover:bg-hover", item.active && "border-primary bg-selected text-ink"), children: [item.icon, _jsx("span", { children: item.label }), item.count !== undefined ? (_jsx("span", { className: "ml-auto font-mono text-xs tabular-nums text-ink-muted", children: item.count })) : null] }) }, item.href))) }), savedViews?.length ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-4 pt-4 pb-1 font-mono text-2xs font-medium tracking-label text-ink-muted uppercase", children: "Saved views" }), _jsx("ul", { children: savedViews.map((view) => (_jsx("li", { children: _jsx("a", { href: view.href, className: "block border-l-2 border-transparent px-4 py-1.5 text-sm text-ink-soft hover:bg-hover", children: view.label }) }, view.href))) })] })) : null] }), syncStatus ? (_jsx("div", { className: "border-t border-border px-4 py-2 font-mono text-xs text-ink-muted", children: syncStatus })) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("header", { className: "flex items-center gap-3 border-b border-border bg-surface px-6 py-3", children: [_jsx("h1", { className: "text-lg font-semibold", children: title }), context ? (_jsx("span", { className: "font-mono text-xs text-ink-muted", children: context })) : null, _jsx("div", { className: "ml-auto flex items-center gap-3", children: actions })] }), _jsx("main", { className: "min-h-0 flex-1 overflow-y-auto", children: children }), bulkBar] })] }));
+}
+export function BulkActionBar({ count, consequence, className, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "bulk-action-bar", className: cn("flex items-center gap-4 bg-inverse px-6 py-2.5 text-sm text-on-inverse", className), ...props, children: [_jsx("span", { className: "font-mono text-xs tabular-nums", children: count }), consequence ? _jsx("span", { className: "text-on-inverse/80", children: consequence }) : null, _jsx("div", { className: "ml-auto flex items-center gap-2", children: children })] }));
+}

package/dist/components/blocks/list-page.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export interface StatCell {
+    label: string;
+    value: string;
+    note?: string;
+    href?: string;
+}
+export declare function StatStrip({ stats, className, ...props }: React.ComponentProps<"div"> & {
+    stats: StatCell[];
+}): React.JSX.Element;
+export interface ListRow {
+    id: string;
+    /** Mono identifier, e.g. a hostname. */
+    identifier: string;
+    online: boolean;
+    /** Human column with inline secondary detail. */
+    owner: string;
+    ownerDetail?: string;
+    /** Magnitude with an inline meter. */
+    outdated: number;
+    outdatedMax: number;
+    /** Relative time, mono. */
+    lastSeen: string;
+    status: "ok" | "warn" | "fail";
+    /** Plain-language note beside a non-OK status ("FileVault off"). */
+    statusNote?: string;
+}
+export interface ListPageProps extends React.ComponentProps<"div"> {
+    stats: StatCell[];
+    rows: ListRow[];
+    searchPlaceholder?: string;
+    /** Segmented state filter labels, 4–5 maximum, first is "All". */
+    segments?: string[];
+    /** Mono result count + freshness, e.g. "148 devices · polled 41s ago". */
+    resultSummary?: string;
+    selected?: Set<string>;
+    onSelectedChange?: (selected: Set<string>) => void;
+}
+export declare function ListPage({ stats, rows, searchPlaceholder, segments, resultSummary, selected, onSelectedChange, className, ...props }: ListPageProps): React.JSX.Element;

package/dist/components/blocks/list-page.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+import { cn } from "../../lib/utils.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Input } from "../ui/input.js";
+import { Meter } from "../ui/meter.js";
+import { StatusWord } from "../ui/status-word.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../ui/table.js";
+import { Tabs, TabsList, TabsTrigger } from "../ui/tabs.js";
+export function StatStrip({ stats, className, ...props }) {
+    return (_jsx("div", { "data-slot": "stat-strip", className: cn("flex divide-x divide-border border-b border-border bg-surface", className), ...props, children: stats.map((stat) => (_jsxs("a", { href: stat.href, className: "flex-1 px-6 py-3 hover:bg-hover", children: [_jsx("div", { className: "font-mono text-2xs font-medium tracking-label text-ink-muted uppercase", children: stat.label }), _jsx("div", { className: "text-2xl font-semibold tabular-nums", children: stat.value }), stat.note ? (_jsx("div", { className: "font-mono text-xs text-ink-muted", children: stat.note })) : null] }, stat.label))) }));
+}
+export function ListPage({ stats, rows, searchPlaceholder = "Search hostnames…  /", segments = ["All", "Issues"], resultSummary, selected, onSelectedChange, className, ...props }) {
+    const [internalSelected, setInternalSelected] = React.useState(new Set());
+    const isControlled = selected !== undefined;
+    const selection = isControlled ? selected : internalSelected;
+    const setSelection = (next) => {
+        if (!isControlled)
+            setInternalSelected(next);
+        onSelectedChange?.(next);
+    };
+    const toggle = (id, checked) => {
+        const next = new Set(selection);
+        if (checked)
+            next.add(id);
+        else
+            next.delete(id);
+        setSelection(next);
+    };
+    const allChecked = rows.length > 0 && rows.every((row) => selection.has(row.id));
+    return (_jsxs("div", { "data-slot": "list-page", className: cn("flex h-full flex-col", className), ...props, children: [_jsx(StatStrip, { stats: stats }), _jsxs("div", { className: "flex items-center gap-3 border-b border-border bg-surface px-6 py-2", children: [_jsxs("div", { className: "relative w-64", children: [_jsx(MagnifyingGlassIcon, { className: "absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-ink-faint" }), _jsx(Input, { className: "pl-7 font-mono text-xs", placeholder: searchPlaceholder })] }), _jsx(Tabs, { defaultValue: segments[0], children: _jsx(TabsList, { children: segments.map((segment) => (_jsx(TabsTrigger, { value: segment, children: segment }, segment))) }) }), resultSummary ? (_jsx("span", { className: "ml-auto font-mono text-xs text-ink-muted", children: resultSummary })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 z-10 bg-surface", children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-10", children: _jsx(Checkbox, { "aria-label": "Select all rows", checked: allChecked, onCheckedChange: (checked) => setSelection(checked ? new Set(rows.map((row) => row.id)) : new Set()) }) }), _jsx(TableHead, { children: "Device" }), _jsx(TableHead, { children: "Owner" }), _jsx(TableHead, { className: "text-right", children: "Outdated" }), _jsx(TableHead, { children: "Last seen" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, { "data-state": selection.has(row.id) ? "selected" : undefined, className: cn("h-(--row-table)", selection.has(row.id) && "shadow-[inset_2px_0_0_var(--color-bg-accent)]"), children: [_jsx(TableCell, { children: _jsx(Checkbox, { "aria-label": `Select ${row.identifier}`, checked: selection.has(row.id), onCheckedChange: (checked) => toggle(row.id, checked === true) }) }), _jsxs(TableCell, { className: "font-mono text-sm font-medium", children: [_jsx("span", { "aria-hidden": true, className: cn("mr-2 inline-block size-1.5 rounded-full align-middle", row.online ? "bg-ok" : "bg-strong") }), row.identifier] }), _jsxs(TableCell, { children: [row.owner, row.ownerDetail ? (_jsx("span", { className: "ml-1.5 text-ink-faint", children: row.ownerDetail })) : null] }), _jsx(TableCell, { className: "text-right", children: _jsx(Meter, { className: "w-20 align-middle", value: row.outdated, max: row.outdatedMax, failAt: Math.ceil(row.outdatedMax * 0.6) }) }), _jsx(TableCell, { className: "font-mono text-xs text-ink-muted", children: row.lastSeen }), _jsx(TableCell, { children: _jsx(StatusWord, { status: row.status, note: row.statusNote }) })] }, row.id))) })] }) })] }));
+}

package/dist/components/ui/alert.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "ok" | "warn" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/components/ui/alert.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-sm border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "border-border bg-card text-card-foreground",
+            ok: "bg-card text-ok *:data-[slot=alert-description]:text-ok/90 *:[svg]:text-current",
+            warn: "bg-card text-warn *:data-[slot=alert-description]:text-warn/90 *:[svg]:text-current",
+            destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Alert({ className, variant, ...props }) {
+    return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+}
+function AlertTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-title", className: cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), ...props }));
+}
+function AlertAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-action", className: cn("absolute top-2 right-2", className), ...props }));
+}
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/components/ui/sonner.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { type ToasterProps } from "sonner";
+declare const Toaster: ({ ...props }: ToasterProps) => React.JSX.Element;
+export { Toaster };

package/dist/components/ui/sonner.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Toaster as Sonner } from "sonner";
+import { CheckCircleIcon, InfoIcon, WarningIcon, XCircleIcon, SpinnerIcon, } from "@phosphor-icons/react";
+// Apps set the theme with [data-theme] on <html> (see theme.css). Sonner wants
+// the theme as a prop, so observe the attribute — no next-themes dependency.
+function useDocumentTheme() {
+    const [theme, setTheme] = React.useState(() => typeof document !== "undefined" &&
+        document.documentElement.dataset.theme === "dark"
+        ? "dark"
+        : "light");
+    React.useEffect(() => {
+        const root = document.documentElement;
+        const update = () => setTheme(root.dataset.theme === "dark" ? "dark" : "light");
+        const observer = new MutationObserver(update);
+        observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+        update();
+        return () => observer.disconnect();
+    }, []);
+    return theme;
+}
+const Toaster = ({ ...props }) => {
+    const theme = useDocumentTheme();
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
+            success: _jsx(CheckCircleIcon, { className: "size-4" }),
+            info: _jsx(InfoIcon, { className: "size-4" }),
+            warning: _jsx(WarningIcon, { className: "size-4" }),
+            error: _jsx(XCircleIcon, { className: "size-4" }),
+            loading: _jsx(SpinnerIcon, { className: "size-4 animate-spin" }),
+        }, style: {
+            // theme.css uses @theme inline, so the bridge names never exist as
+            // runtime custom properties — reference the tokens directly.
+            "--normal-bg": "var(--color-bg-raised)",
+            "--normal-text": "var(--color-fg-default)",
+            "--normal-border": "var(--color-border-default)",
+            "--border-radius": "var(--radius-overlay)",
+        }, toastOptions: {
+            classNames: {
+                toast: "cn-toast",
+            },
+        }, ...props }));
+};
+export { Toaster };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./components/ui/alert.js";
 export * from "./components/ui/badge.js";
 export * from "./components/ui/button.js";
 export * from "./components/ui/checkbox.js";
@@ -14,10 +15,13 @@ export * from "./components/ui/select.js";
 export * from "./components/ui/separator.js";
 export * from "./components/ui/sheet.js";
 export * from "./components/ui/skeleton.js";
+export * from "./components/ui/sonner.js";
 export * from "./components/ui/status-word.js";
 export * from "./components/ui/switch.js";
 export * from "./components/ui/table.js";
 export * from "./components/ui/tabs.js";
 export * from "./components/ui/textarea.js";
 export * from "./components/ui/tooltip.js";
+export * from "./components/blocks/app-shell.js";
+export * from "./components/blocks/list-page.js";
 export { cn } from "./lib/utils.js";

package/dist/index.js

@@ -1,6 +1,7 @@
-// Generated barrel — every component plus the cn helper. Regenerate by hand
-// when adding a component (scripts-build-registry.mjs derives the registry
-// from the same directory listing).
+// Generated barrel — every component and block plus the cn helper. Regenerate
+// by hand when adding a component (scripts-build-registry.mjs derives the
+// registry from the same directory listings).
+export * from "./components/ui/alert.js";
 export * from "./components/ui/badge.js";
 export * from "./components/ui/button.js";
 export * from "./components/ui/checkbox.js";
@@ -17,10 +18,13 @@ export * from "./components/ui/select.js";
 export * from "./components/ui/separator.js";
 export * from "./components/ui/sheet.js";
 export * from "./components/ui/skeleton.js";
+export * from "./components/ui/sonner.js";
 export * from "./components/ui/status-word.js";
 export * from "./components/ui/switch.js";
 export * from "./components/ui/table.js";
 export * from "./components/ui/tabs.js";
 export * from "./components/ui/textarea.js";
 export * from "./components/ui/tooltip.js";
+export * from "./components/blocks/app-shell.js";
+export * from "./components/blocks/list-page.js";
 export { cn } from "./lib/utils.js";

package/dist/theme.css

@@ -53,6 +53,29 @@
   --color-input: var(--color-border-strong);
   --color-ring: var(--color-bg-accent);
 
+  /* type scale: Tailwind's stock text-* sizes are re-pointed onto the token
+     scale so `text-sm` means the system's 12.5px, not Tailwind's 14px.
+     text-md is the 13.5px body size. */
+  --text-2xs: var(--font-size-2xs);
+  --text-2xs--line-height: 1.4;
+  --text-xs: var(--font-size-xs);
+  --text-xs--line-height: 1.45;
+  --text-sm: var(--font-size-sm);
+  --text-sm--line-height: 1.5;
+  --text-md: var(--font-size-md);
+  --text-md--line-height: 1.5;
+  --text-base: var(--font-size-md);
+  --text-base--line-height: 1.55;
+  --text-lg: var(--font-size-lg);
+  --text-lg--line-height: 1.5;
+  --text-xl: var(--font-size-xl);
+  --text-xl--line-height: 1.4;
+  --text-2xl: var(--font-size-2xl);
+  --text-2xl--line-height: 1.3;
+
+  /* micro-label tracking (inline: the utility resolves the token at runtime) */
+  --tracking-label: var(--tracking-label);
+
   /* radius: precise. Controls 3px, containers square, overlays 6px. */
   --radius-sm: var(--radius-control);
   --radius-md: var(--radius-control);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m7kni/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -12,6 +12,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "sonner": "^2.0.8",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
@@ -22,13 +23,13 @@
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^6.1.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "shadcn": "^4.19.0",
     "storybook": "^10.5.10",
     "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2",
-    "vite": "^8.2.2",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "vite": "^8.2.2"
   },
   "allowScripts": {
     "esbuild@0.28.2": true