@insymetri/styleguide 0.1.73 → 0.1.74

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/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.74",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {