@insymetri/styleguide 0.1.73 → 0.1.75

package/dist/IIButton/IIButton.svelte

@@ -12,6 +12,8 @@
 		iconName?: IconName
 		loading?: boolean
 		disabled?: boolean
+		/** Stretch to fill the available width. */
+		fullWidth?: boolean
 		children?: Snippet
 		class?: string
 		ref?: HTMLButtonElement | HTMLAnchorElement
@@ -28,6 +30,7 @@
 		iconName,
 		loading = false,
 		disabled = false,
+		fullWidth = false,
 		children,
 		class: className,
 		href,
@@ -125,7 +128,7 @@
 	<a
 		bind:this={ref}
 		{href}
-		class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, className)}
+		class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, fullWidth && 'w-full', className)}
 		{onclick}
 		{...restProps as HTMLAnchorAttributes}
 	>
@@ -135,7 +138,7 @@
 	<button
 		bind:this={ref}
 		disabled={isDisabled}
-		class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, className)}
+		class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, fullWidth && 'w-full', className)}
 		onclick={handleClick}
 		{...restProps as HTMLButtonAttributes}
 	>

package/dist/IIButton/IIButton.svelte.d.ts

@@ -7,6 +7,8 @@ type BaseProps = {
     iconName?: IconName;
     loading?: boolean;
     disabled?: boolean;
+    /** Stretch to fill the available width. */
+    fullWidth?: boolean;
     children?: Snippet;
     class?: string;
     ref?: HTMLButtonElement | HTMLAnchorElement;

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -261,7 +261,7 @@
 		{#if renderSelected && selectedItem}
 			{@render renderSelected(selectedItem)}
 		{:else}
-			<span>{selectedLabel}</span>
+			<span class="flex-1 min-w-0 truncate text-left">{selectedLabel}</span>
 		{/if}
 		<IIIcon iconName="caret-down" />
 	</button>

package/dist/IIDropdownMenu/IIDropdownMenu.svelte

@@ -331,7 +331,7 @@
 	aria-haspopup="menu"
 	aria-expanded={open}
 	data-state={open ? 'open' : 'closed'}
-	class={cn(children && triggerClass ? triggerClass : defaultTriggerClass)}
+	class={cn(children ? cn('[all:unset] cursor-default', triggerClass) : defaultTriggerClass)}
 	onclick={toggle}
 >
 	{#if children}

package/dist/IIModal/IIModal.svelte

@@ -13,8 +13,12 @@
 		titleAccessory?: Snippet
 		footer?: Snippet
 		showCloseButton?: boolean
-		size?: 'sm' | 'md' | 'lg'
+		size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
 		overlay?: 'dark' | 'light' | 'none'
+		/** Cap the modal height (any CSS value, e.g. "60vh"). Defaults to 90vh. */
+		maxHeight?: string
+		/** Replace the body wrapper's padding/scroll defaults — e.g. for a full-height flex body. */
+		bodyClass?: string
 		class?: string
 	}
 
@@ -29,6 +33,8 @@
 		showCloseButton = true,
 		size = 'md',
 		overlay = 'dark',
+		maxHeight,
+		bodyClass,
 		class: className,
 	}: Props = $props()
 
@@ -80,8 +86,11 @@
 				size === 'sm' && 'max-w-400',
 				size === 'md' && 'max-w-500',
 				size === 'lg' && 'max-w-700',
+				size === 'xl' && 'max-w-[1100px]',
+				size === 'full' && 'max-w-[95vw] h-[90vh]',
 				className
 			)}
+			style={maxHeight ? `max-height: ${maxHeight}` : undefined}
 		>
 			<div class="flex items-start justify-between gap-12 px-24 pt-24 shrink-0">
 				<div class="flex flex-col min-w-0 flex-1">
@@ -105,7 +114,7 @@
 					</Dialog.Close>
 				{/if}
 			</div>
-			<div class="px-24 py-20 flex-auto min-h-0 overflow-y-auto">
+			<div class={cn('flex-auto min-h-0', bodyClass ?? 'px-24 py-20 overflow-y-auto')}>
 				{@render children()}
 			</div>
 			{#if footer}

package/dist/IIModal/IIModal.svelte.d.ts

@@ -8,8 +8,12 @@ type Props = {
     titleAccessory?: Snippet;
     footer?: Snippet;
     showCloseButton?: boolean;
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     overlay?: 'dark' | 'light' | 'none';
+    /** Cap the modal height (any CSS value, e.g. "60vh"). Defaults to 90vh. */
+    maxHeight?: string;
+    /** Replace the body wrapper's padding/scroll defaults — e.g. for a full-height flex body. */
+    bodyClass?: string;
     class?: string;
 };
 declare const IIModal: import("svelte").Component<Props, {}, "open">;

package/dist/IIPillTabs/IIPillTabs.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import {cn} from '../utils/cn'
 	import IIDropdownInput from '../IIDropdownInput/IIDropdownInput.svelte'
+	import IITooltip from '../IITooltip/IITooltip.svelte'
 	import {useDensity} from '../density'
 
 	type Tab = {
 		value: string
 		label: string
 		count?: number
+		disabled?: boolean
+		tooltip?: string
 	}
 
 	type Props = {
@@ -55,6 +58,29 @@
 </script>
 
 <div bind:this={containerEl} class={cn('min-w-0 relative', className)}>
+	{#snippet pill(tab: Tab)}
+		<button
+			class={cn(
+				'flex items-center rounded-control border-none outline-none cursor-default whitespace-nowrap',
+				densityClasses[density.value],
+				tab.disabled
+					? 'bg-surface text-tertiary opacity-50 cursor-not-allowed'
+					: value === tab.value
+						? 'bg-gray-100 text-gray-700'
+						: 'bg-surface text-secondary shadow-pill hover:bg-gray-100 hover:text-gray-700'
+			)}
+			style="transition: all var(--transition-fast)"
+			disabled={tab.disabled}
+			onclick={() => !tab.disabled && select(tab.value)}
+			tabindex={overflow ? -1 : 0}
+		>
+			{tab.label}
+			{#if tab.count != null}
+				<span class="ml-2 text-tiny opacity-70">({tab.count})</span>
+			{/if}
+		</button>
+	{/snippet}
+
 	<!-- Hidden measure element — always rendered to detect when pills fit again -->
 	<div
 		bind:this={measureEl}
@@ -63,23 +89,13 @@
 		style={overflow ? 'position: absolute; visibility: hidden; height: 0; overflow: hidden; pointer-events: none;' : ''}
 	>
 		{#each tabs as tab (tab.value)}
-			<button
-				class={cn(
-					'flex items-center rounded-control border-none outline-none cursor-default whitespace-nowrap',
-					densityClasses[density.value],
-					value === tab.value
-						? 'bg-gray-100 text-gray-700'
-						: 'bg-surface text-secondary shadow-pill hover:bg-gray-100 hover:text-gray-700'
-				)}
-				style="transition: all var(--transition-fast)"
-				onclick={() => select(tab.value)}
-				tabindex={overflow ? -1 : 0}
-			>
-				{tab.label}
-				{#if tab.count != null}
-					<span class="ml-2 text-tiny opacity-70">({tab.count})</span>
-				{/if}
-			</button>
+			{#if tab.tooltip}
+				<IITooltip text={tab.tooltip} side="top" disabled={overflow}>
+					{@render pill(tab)}
+				</IITooltip>
+			{:else}
+				{@render pill(tab)}
+			{/if}
 		{/each}
 	</div>
 

package/dist/IIPillTabs/IIPillTabs.svelte.d.ts

@@ -2,6 +2,8 @@ type Tab = {
     value: string;
     label: string;
     count?: number;
+    disabled?: boolean;
+    tooltip?: string;
 };
 type Props = {
     tabs: Tab[];

package/dist/IITabBar/IITabBar.svelte

@@ -16,10 +16,12 @@
 		tabs: Tab[]
 		value: string
 		onChange: (value: string) => void
+		/** Stretch to fill the available width. Defaults to sizing to content. */
+		fullWidth?: boolean
 		class?: string
 	}
 
-	let {tabs, value, onChange, class: className}: Props = $props()
+	let {tabs, value, onChange, fullWidth = false, class: className}: Props = $props()
 
 	let listEl = $state<HTMLElement | null>(null)
 	let overflowing = $state(false)
@@ -45,7 +47,11 @@
 	}
 </script>
 
-<Tabs.Root {value} onValueChange={onChange} class={cn('relative w-full h-full', className)}>
+<Tabs.Root
+	{value}
+	onValueChange={onChange}
+	class={cn('relative h-full', fullWidth ? 'w-full' : 'w-auto min-w-0 shrink', className)}
+>
 	<Tabs.List
 		bind:ref={listEl}
 		class={cn(

package/dist/IITabBar/IITabBar.svelte.d.ts

@@ -9,6 +9,8 @@ type Props = {
     tabs: Tab[];
     value: string;
     onChange: (value: string) => void;
+    /** Stretch to fill the available width. Defaults to sizing to content. */
+    fullWidth?: boolean;
     class?: string;
 };
 declare const IITabBar: import("svelte").Component<Props, {}, "">;

package/dist/IITable/IITable.svelte

@@ -1,17 +1,124 @@
-<script lang="ts">
+<script lang="ts" generics="T">
 	import type {Snippet} from 'svelte'
 	import {cn} from '../utils/cn'
+	import IITableSkeleton from '../IITableSkeleton/IITableSkeleton.svelte'
+
+	type Column = {
+		/** Stable id (used as the header key today; the sort key when sorting lands). */
+		key: string
+		header: string
+		/** Renders the cell content for a row — badges, buttons, editable text, etc. */
+		cell: Snippet<[T]>
+		align?: 'left' | 'right' | 'center'
+		/** Width utility, e.g. `w-120` / `min-w-180`, and responsive hides like `max-md:hidden`. */
+		width?: string
+		/** Extra classes on the `<td>`, static or per-row (e.g. `text-secondary`, `font-mono`). */
+		class?: string | ((row: T) => string)
+		/** Extra classes on the `<th>`. */
+		headerClass?: string
+	}
 
 	type Props = {
-		children?: Snippet
+		columns: Column[]
+		rows: T[]
+		rowKey: (row: T) => string
+		loading?: boolean
+		loadingRows?: number
+		/** Rendered (spanning all columns) when there are no rows and not loading. */
+		empty?: Snippet
+		onRowClick?: (row: T, event: MouseEvent) => void
+		/** Per-row class for states like dimmed/disabled (e.g. `opacity-60`). */
+		rowClass?: (row: T) => string | false | undefined | null
+		/** Optional expandable content rendered as a spanning row beneath an expanded row. */
+		expandedRow?: Snippet<[T]>
+		isExpanded?: (row: T) => boolean
+		stickyHeader?: boolean
+		/** `sm` → text-small (default), `md` → text-default. */
+		size?: 'sm' | 'md'
 		class?: string
 	}
 
-	let {children, class: className}: Props = $props()
+	let {
+		columns,
+		rows,
+		rowKey,
+		loading = false,
+		loadingRows = 5,
+		empty,
+		onRowClick,
+		rowClass,
+		expandedRow,
+		isExpanded,
+		stickyHeader = false,
+		size = 'sm',
+		class: className,
+	}: Props = $props()
+
+	const alignClass = {left: 'text-left', right: 'text-right', center: 'text-center'} as const
+	const cellText = $derived(size === 'sm' ? 'text-small' : 'text-default')
+	const interactive = $derived(!!onRowClick)
+
+	function cellClass(col: Column, row: T): string {
+		return typeof col.class === 'function' ? col.class(row) : (col.class ?? '')
+	}
 </script>
 
 <div class={cn('bg-surface border border-primary rounded-10 overflow-x-auto overflow-y-hidden', className)}>
 	<table class="w-full border-collapse">
-		{@render children?.()}
+		<thead class={cn('bg-background border-b border-primary', stickyHeader && 'sticky top-0 z-1')}>
+			<tr>
+				{#each columns as col (col.key)}
+					<th
+						class={cn(
+							'px-16 py-8 text-tiny-strong text-secondary uppercase',
+							alignClass[col.align ?? 'left'],
+							col.width,
+							col.headerClass
+						)}
+					>
+						{col.header}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#if loading}
+				<IITableSkeleton rows={loadingRows} columns={columns.map(() => 'text')} />
+			{:else if rows.length === 0}
+				{#if empty}
+					<tr>
+						<td colspan={columns.length} class="px-16 py-32 text-center">
+							{@render empty()}
+						</td>
+					</tr>
+				{/if}
+			{:else}
+				{#each rows as row (rowKey(row))}
+					<tr
+						class={cn(
+							'border-b border-primary last:border-b-0',
+							interactive && 'cursor-pointer hover:bg-background',
+							rowClass?.(row)
+						)}
+						style="transition: background-color var(--transition-fast)"
+						onclick={onRowClick ? e => onRowClick(row, e) : undefined}
+						onauxclick={onRowClick ? e => onRowClick(row, e) : undefined}
+					>
+						{#each columns as col (col.key)}
+							<td class={cn('px-16 py-8 text-body', cellText, alignClass[col.align ?? 'left'], col.width, cellClass(col, row))}>
+								{@render col.cell(row)}
+							</td>
+						{/each}
+					</tr>
+					{#if expandedRow && isExpanded?.(row)}
+						<tr class="border-b border-primary last:border-b-0 bg-background">
+							<td colspan={columns.length} class="px-16 py-12">
+								{@render expandedRow(row)}
+							</td>
+						</tr>
+					{/if}
+				{/each}
+			{/if}
+		</tbody>
 	</table>
 </div>

package/dist/IITable/IITable.svelte.d.ts

@@ -1,8 +1,56 @@
 import type { Snippet } from 'svelte';
-type Props = {
-    children?: Snippet;
-    class?: string;
+declare function $$render<T>(): {
+    props: {
+        columns: {
+            /** Stable id (used as the header key today; the sort key when sorting lands). */
+            key: string;
+            header: string;
+            /** Renders the cell content for a row — badges, buttons, editable text, etc. */
+            cell: Snippet<[T]>;
+            align?: "left" | "right" | "center";
+            /** Width utility, e.g. `w-120` / `min-w-180`, and responsive hides like `max-md:hidden`. */
+            width?: string;
+            /** Extra classes on the `<td>`, static or per-row (e.g. `text-secondary`, `font-mono`). */
+            class?: string | ((row: T) => string);
+            /** Extra classes on the `<th>`. */
+            headerClass?: string;
+        }[];
+        rows: T[];
+        rowKey: (row: T) => string;
+        loading?: boolean;
+        loadingRows?: number;
+        /** Rendered (spanning all columns) when there are no rows and not loading. */
+        empty?: Snippet;
+        onRowClick?: (row: T, event: MouseEvent) => void;
+        /** Per-row class for states like dimmed/disabled (e.g. `opacity-60`). */
+        rowClass?: (row: T) => string | false | undefined | null;
+        /** Optional expandable content rendered as a spanning row beneath an expanded row. */
+        expandedRow?: Snippet<[T]>;
+        isExpanded?: (row: T) => boolean;
+        stickyHeader?: boolean;
+        /** `sm` → text-small (default), `md` → text-default. */
+        size?: "sm" | "md";
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
 };
-declare const IITable: import("svelte").Component<Props, {}, "">;
-type IITable = ReturnType<typeof IITable>;
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const IITable: $$IsomorphicComponent;
+type IITable<T> = InstanceType<typeof IITable<T>>;
 export default IITable;

package/dist/IITooltip/IITooltip.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import {Tooltip as B} from 'bits-ui'
+	import {cn} from '../utils/cn'
+	import type {Snippet} from 'svelte'
+
+	type Side = 'top' | 'right' | 'bottom' | 'left'
+
+	type Props = {
+		text: string
+		side?: Side
+		/** Extra classes for the trigger wrapper (e.g. to size it as a flex child). */
+		class?: string
+		/** Render children in a plain wrapper with no tooltip (keeps layout identical). */
+		disabled?: boolean
+		/** Hover delay before the tooltip opens, in ms. */
+		delay?: number
+		children: Snippet
+	}
+
+	let {text, side = 'right', class: className, disabled = false, delay = 150, children}: Props = $props()
+</script>
+
+{#if disabled}
+	<span class={cn('inline-block', className)}>
+		{@render children()}
+	</span>
+{:else}
+	<B.Provider delayDuration={delay}>
+		<B.Root>
+			<B.Trigger>
+				{#snippet child({props})}
+					<span {...props} class={cn('inline-block', className)}>
+						{@render children()}
+					</span>
+				{/snippet}
+			</B.Trigger>
+			<B.Portal>
+				<B.Content
+					{side}
+					sideOffset={6}
+					class="z-19 rounded-4 bg-gray-900 text-white text-tiny leading-tight font-medium px-8 py-4 shadow-dropdown data-[state=delayed-open]:animate-fade-in data-[state=instant-open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none"
+				>
+					{text}
+				</B.Content>
+			</B.Portal>
+		</B.Root>
+	</B.Provider>
+{/if}

package/dist/IITooltip/IITooltip.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Side = 'top' | 'right' | 'bottom' | 'left';
+type Props = {
+    text: string;
+    side?: Side;
+    /** Extra classes for the trigger wrapper (e.g. to size it as a flex child). */
+    class?: string;
+    /** Render children in a plain wrapper with no tooltip (keeps layout identical). */
+    disabled?: boolean;
+    /** Hover delay before the tooltip opens, in ms. */
+    delay?: number;
+    children: Snippet;
+};
+declare const IITooltip: import("svelte").Component<Props, {}, "">;
+type IITooltip = ReturnType<typeof IITooltip>;
+export default IITooltip;

package/dist/IITooltip/index.d.ts

@@ -0,0 +1 @@
+export { default as IITooltip } from './IITooltip.svelte';

package/dist/IITooltip/index.js

@@ -0,0 +1 @@
+export { default as IITooltip } from './IITooltip.svelte';

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export { IITaskCardSkeleton } from './IITaskCardSkeleton';
 export { IITextarea } from './IITextarea';
 export { IIToggle } from './IIToggle';
 export { IIToaster } from './IIToaster';
+export { IITooltip } from './IITooltip';
 export { IIViewFilterChip } from './IIViewFilterChip';
 export type { AuditEvent, AuditFilter, Severity } from './IIAuditTrail';
 export type { BadgeVariant } from './IIBadge';

package/dist/index.js

@@ -46,6 +46,7 @@ export { IITaskCardSkeleton } from './IITaskCardSkeleton';
 export { IITextarea } from './IITextarea';
 export { IIToggle } from './IIToggle';
 export { IIToaster } from './IIToaster';
+export { IITooltip } from './IITooltip';
 export { IIViewFilterChip } from './IIViewFilterChip';
 // Utilities
 export { toast } from './toast';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.73",
+	"version": "0.1.75",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {