@placeholderco/placeholder-ui 1.0.12 → 2.1.0

package/dist/ui/Table.svelte.d.ts

@@ -5,9 +5,17 @@ export interface Column<T = any> {
     sortable?: boolean;
     width?: string;
     align?: 'left' | 'center' | 'right';
+    /** Snippet rendered as the cell content. Takes precedence over `render`. */
+    cell?: Snippet<[{
+        value: any;
+        row: T;
+        index: number;
+    }]>;
+    /** @deprecated Returns raw HTML injected via {@html} — unsafe for untrusted
+     * data and cannot render components. Use `cell` instead. */
     render?: (value: any, row: T) => any;
 }
-interface Props<T = any> {
+export interface TableProps<T = any> {
     /** Column definitions for the table */
     columns: Column<T>[];
     /** Data rows to display */
@@ -34,6 +42,10 @@ interface Props<T = any> {
     buttons?: Snippet<[T, number]>;
     /** Callback when a row is clicked */
     onrowclick?: (row: T, index: number) => void;
+    /** Returns a URL for a row. When provided, rows act as links: a plain click
+     * navigates client-side, while middle-click or ctrl/cmd/shift-click opens the
+     * URL in a new tab. Return a falsy value to make a row non-navigable. */
+    rowHref?: (row: T, index: number) => string | undefined | null;
     /** Enable checkbox selection */
     selectable?: boolean;
     /** Field name used to uniquely identify rows (required when selectable is true) */
@@ -42,7 +54,36 @@ interface Props<T = any> {
     selectedRows?: T[];
     /** Callback when selection changes */
     onselect?: (selectedRows: T[]) => void;
+    /** Detail content rendered in a full-width row beneath an expanded row.
+     * Providing this enables row expansion: expandable rows toggle on row click
+     * or via their chevron button. Requires rowKey. */
+    expandedContent?: Snippet<[T, number]>;
+    /** Limits which rows can expand (e.g. only group rows). Default: all rows. */
+    canExpand?: (row: T, index: number) => boolean;
+    /** Keys (via rowKey) of currently expanded rows (bindable) */
+    expandedKeys?: any[];
+    /** Callback when a row is expanded or collapsed — trigger on-demand fetches here */
+    onexpand?: (row: T, index: number, expanded: boolean) => void;
+    /** Rows per page. Setting this enables built-in client-side pagination,
+     * applied after search filtering and sorting. */
+    pageSize?: number;
+    /** Current page number, 1-based (bindable) */
+    page?: number;
+    /** Callback when the current page changes */
+    onpagechange?: (page: number) => void;
+    /** Key of the column currently sorted by, or null for unsorted (bindable).
+     * Set it to render the sort indicator for a server-supplied sort order. */
+    sortKey?: string | null;
+    /** Current sort direction (bindable) */
+    sortDirection?: 'asc' | 'desc';
+    /** Callback when the user clicks a sortable header, after `sortKey` and
+     * `sortDirection` have been updated. Use it to request sorted data from a
+     * server. Paginated tables also reset to page 1 before this fires. */
+    onsort?: (key: string, direction: 'asc' | 'desc') => void;
+    /** Skip the built-in client-side sort and render `rows` in the order given.
+     * Use with `onsort` when the server returns pre-sorted rows. */
+    manualSort?: boolean;
 }
-declare const Table: import("svelte").Component<Props<any>, {}, "selectedRows">;
+declare const Table: import("svelte").Component<TableProps<any>, {}, "selectedRows" | "expandedKeys" | "page" | "sortKey" | "sortDirection">;
 type Table = ReturnType<typeof Table>;
 export default Table;

package/dist/ui/Tabs.svelte

@@ -2,14 +2,18 @@
 	import type { ComboBoxItem } from '../models/ComboBoxItem.js';
 	import { onMount } from 'svelte';
 
-	interface Props {
+	export interface TabsProps {
+		/** Available tab options */
 		tabOptions: ComboBoxItem[];
+		/** Currently active tab value (bindable) */
 		activeTab?: string;
+		/** Use solid background instead of transparent */
 		solidBg?: boolean;
+		/** Callback when active tab changes */
 		onchange?: (newValue: string) => void;
 	}
 
-	let { tabOptions, activeTab = $bindable(''), solidBg = false, onchange }: Props = $props();
+	let { tabOptions, activeTab = $bindable(''), solidBg = false, onchange }: TabsProps = $props();
 	let containerRef: HTMLDivElement;
 	let buttonElements = $state<HTMLButtonElement[]>([]);
 	let underlineStyle = $state('');
@@ -80,7 +84,7 @@
 	.tabs {
 		position: relative;
 		display: inline-flex;
-		border-bottom: 1px solid var(--pui-border-default);
+		border-bottom: 1px solid #e5e7eb;
 		user-select: none;
 	}
 
@@ -89,58 +93,58 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: var(--pui-spacing-3) var(--pui-spacing-6);
+		padding: 0.75rem 1.5rem;
 		cursor: pointer;
 		user-select: none;
 		border: none;
 		background: transparent;
-		font-size: var(--pui-font-size-base);
-		font-weight: var(--pui-font-weight-medium);
-		color: var(--pui-color-gray-500);
-		transition: color var(--pui-transition-fast) var(--pui-ease-in-out);
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #6b7280;
+		transition: color 0.2s ease-in-out;
 		z-index: 1;
 		border-bottom: 2px solid transparent;
 	}
 
 	.tab-item:hover {
-		color: var(--pui-color-gray-700);
+		color: #374151;
 	}
 
 	.tab-item.selected {
-		color: var(--pui-color-primary);
+		color: var(--ui-primary);
 	}
 
 	.tab-underline {
 		position: absolute;
 		bottom: -1px;
 		height: 2px;
-		background-color: var(--pui-color-primary);
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		background-color: var(--ui-primary);
+		transition: all 0.2s ease-in-out;
 		z-index: 2;
 	}
 
 	.solid {
-		background: var(--pui-paper-body-bg);
+		background: var(--paper-body-bg);
 	}
 
 	/* Dark mode styles */
 	:global(.dark) .tabs {
-		border-bottom-color: var(--pui-color-gray-700);
+		border-bottom-color: #374151;
 	}
 
 	:global(.dark) .tab-item {
-		color: var(--pui-color-gray-400);
+		color: #9ca3af;
 	}
 
 	:global(.dark) .tab-item:hover {
-		color: var(--pui-color-gray-300);
+		color: #d1d5db;
 	}
 
 	:global(.dark) .tab-item.selected {
-		color: var(--pui-color-secondary);
+		color: var(--ui-accent);
 	}
 
 	:global(.dark) .tab-underline {
-		background-color: var(--pui-color-secondary);
+		background-color: var(--ui-accent);
 	}
 </style>

package/dist/ui/Tabs.svelte.d.ts

@@ -1,10 +1,14 @@
 import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-interface Props {
+export interface TabsProps {
+    /** Available tab options */
     tabOptions: ComboBoxItem[];
+    /** Currently active tab value (bindable) */
     activeTab?: string;
+    /** Use solid background instead of transparent */
     solidBg?: boolean;
+    /** Callback when active tab changes */
     onchange?: (newValue: string) => void;
 }
-declare const Tabs: import("svelte").Component<Props, {}, "activeTab">;
+declare const Tabs: import("svelte").Component<TabsProps, {}, "activeTab">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/ui/ThemeSwitcher.svelte

@@ -3,29 +3,48 @@
 
 	import sunSvg from '../icon/sun.svg?raw';
 	import moonSvg from '../icon/moon.svg?raw';
+	import sunMoonSvg from '../icon/sun-moon.svg?raw';
 	import ActionIcon from './ActionIcon.svelte';
 	import type { ButtonVariant } from './ButtonVariant.js';
 
-	interface Props {
+	export interface ThemeSwitcherProps {
+		/** Button variant to use in light mode */
 		lightVariant?: ButtonVariant;
+		/** Button variant to use in dark mode */
 		darkVariant?: ButtonVariant;
 	}
 
-	let { lightVariant = 'primary-subtle', darkVariant = 'secondary-subtle' }: Props = $props();
+	let { lightVariant = 'primary-subtle', darkVariant = 'accent-subtle' }: ThemeSwitcherProps = $props();
 
-	function toggleDarkMode() {
-		setTheme(themeState.isDarkMode ? 'light' : 'dark');
+	const themeCycle = ['light', 'dark', 'system'] as const;
+
+	const icons = {
+		light: sunSvg,
+		dark: moonSvg,
+		system: sunMoonSvg
+	};
+
+	const tooltips = {
+		light: 'Light theme',
+		dark: 'Dark theme',
+		system: 'System theme'
+	};
+
+	function cycleTheme() {
+		const index = themeCycle.indexOf(themeState.theme);
+		setTheme(themeCycle[(index + 1) % themeCycle.length]);
 	}
 </script>
 
 <div class="theme-switcher">
-	{#key themeState.isDarkMode}
+	{#key themeState.theme}
 		<ActionIcon
 			variant={themeState.isDarkMode ? darkVariant : lightVariant}
-			svg={themeState.isDarkMode ? moonSvg : sunSvg}
+			svg={icons[themeState.theme]}
 			class="action-icon"
 			size="1.6em"
-			onclick={toggleDarkMode}
+			onclick={cycleTheme}
+			tooltip={tooltips[themeState.theme]}
 		/>
 	{/key}
 </div>

package/dist/ui/ThemeSwitcher.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { ButtonVariant } from './ButtonVariant.js';
-interface Props {
+export interface ThemeSwitcherProps {
+    /** Button variant to use in light mode */
     lightVariant?: ButtonVariant;
+    /** Button variant to use in dark mode */
     darkVariant?: ButtonVariant;
 }
-declare const ThemeSwitcher: import("svelte").Component<Props, {}, "">;
+declare const ThemeSwitcher: import("svelte").Component<ThemeSwitcherProps, {}, "">;
 type ThemeSwitcher = ReturnType<typeof ThemeSwitcher>;
 export default ThemeSwitcher;