@widgetic/design-system 0.5.22 → 0.5.23

package/dist/components/CopyableHeader.svelte.d.ts

@@ -12,21 +12,21 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const CopyableHeader: $$__sveltets_2_IsomorphicComponent<{
-    /**
-     * COMPONENT PROPS
-     */ class?: string;
+    class?: string;
     style?: string;
     headerText?: string;
     content?: string;
     helpText?: string;
     helpUrl?: string;
+    helpPrompt?: string;
+    helpLinkAria?: string;
     showHelp?: boolean;
     monospaceContent?: boolean;
     showStandaloneCopyButton?: boolean;
     standaloneCopyButtonText?: string;
-    /** The pop-up after a copy that worked: its title and the line under it. */ copiedTitle?: string;
+    copiedTitle?: string;
     copiedDescription?: string;
-    /** The pop-up after a copy that failed: its title and the line under it. */ copyFailedTitle?: string;
+    copyFailedTitle?: string;
     copyFailedDescription?: string;
     showButtonText?: boolean;
     buttonClass?: string;
@@ -34,6 +34,9 @@ declare const CopyableHeader: $$__sveltets_2_IsomorphicComponent<{
     headerTextClass?: string;
     headerBackgroundColor?: string;
     contentBorderColor?: string;
+    loading?: boolean;
+    errorTitle?: string;
+    errorDetail?: string;
 }, {
     copy: CustomEvent<any>;
     copyError: CustomEvent<any>;

package/dist/components/EmptyState.svelte

@@ -1,141 +1,113 @@
 <!--
- * EmptyState Component
- * A reusable component for displaying empty state messages
- * 
- * Features:
- * - Centered message with icon
- * - Customizable message text
- * - Customizable icon
- * - Adjustable height
- * - Optional action button
- * - Responsive: hides icon when space is limited
+ * EmptyState — Figma: Empty State (component set 54:71, node 54:71).
+ * Centered empty view with icon tile, title, optional description, and actions.
  -->
 <script lang="ts">
-  import { onMount } from 'svelte';
+	import { onMount } from 'svelte';
+	import type { Icon } from '@tabler/icons-svelte';
+	import IconCubePlus from '@tabler/icons-svelte/icons/cube-plus';
+	import { cn } from '../utils.js';
 
-  import { IconExclamationCircle } from '@tabler/icons-svelte';
-  
-  /**
-   * Component Props
-   * @prop {string} message - The message to display in the empty state
-   * @prop {string} height - The height of the empty state container (default: '50vh')
-   * @prop {boolean} showIcon - Whether to show the icon (default: true)
-   * @prop {string} iconColor - The color of the icon (default: 'hsl(var(--grey3))')
-   * @prop {string} textColor - The color of the text (default: 'hsl(var(--grey3))')
-   */
-  let className = '';
-  export { className as class };
-  export let style: string = '';
-  //
-  export let message: string = "No items found";
-  export let height: string = "150px";
-  export let showIcon: boolean = true;
-  export let iconColor: string = "hsl(var(--grey3))";
-  export let textColor: string = "hsl(var(--grey3))";
-  
-  // Allow passing a custom icon component
-  let iconComponent = IconExclamationCircle;
-  export { iconComponent as icon };
+	let {
+		class: className = '',
+		style = '',
+		message = 'No items found',
+		description = undefined,
+		height = '150px',
+		showIcon = true,
+		iconColor = '',
+		textColor = '',
+		icon: IconComponent = IconCubePlus,
+		showActions = true
+	}: {
+		class?: string;
+		style?: string;
+		message?: string;
+		description?: string;
+		height?: string;
+		showIcon?: boolean;
+		iconColor?: string;
+		textColor?: string;
+		icon?: Icon;
+		/** When false, hides the action row (Figma Show actions). */
+		showActions?: boolean;
+	} = $props();
 
-  // References to DOM elements
-  let contentContainer: HTMLDivElement;
-  let shouldShowIcon = showIcon;
+	let contentContainer = $state<HTMLDivElement | null>(null);
+	let shouldShowIcon = $state(true);
 
-  // Function to check if there's enough space for the icon
-  function checkSpaceForIcon() {
-    if (!contentContainer || !showIcon) return;
-    
-    const containerWidth = contentContainer.clientWidth;
-    // If container is too narrow (less than 150px), hide the icon
-    shouldShowIcon = containerWidth > 150;
-  }
+	function checkSpaceForIcon() {
+		if (!contentContainer || !showIcon) {
+			shouldShowIcon = false;
+			return;
+		}
+		shouldShowIcon = contentContainer.clientWidth > 150;
+	}
 
-  onMount(() => {
-    // Initial check
-    checkSpaceForIcon();
-    
-    // Set up resize observer to check space when container size changes
-    if (typeof ResizeObserver !== 'undefined') {
-      const resizeObserver = new ResizeObserver(() => {
-        checkSpaceForIcon();
-      });
-      
-      if (contentContainer) {
-        resizeObserver.observe(contentContainer);
-      }
-      
-      return () => {
-        if (contentContainer) {
-          resizeObserver.unobserve(contentContainer);
-        }
-      };
-    }
-  });
+	$effect(() => {
+		showIcon;
+		checkSpaceForIcon();
+	});
+
+	onMount(() => {
+		checkSpaceForIcon();
+		if (typeof ResizeObserver !== 'undefined') {
+			const resizeObserver = new ResizeObserver(() => checkSpaceForIcon());
+			if (contentContainer) resizeObserver.observe(contentContainer);
+			return () => {
+				if (contentContainer) resizeObserver.unobserve(contentContainer);
+			};
+		}
+	});
+
+	const titleStyle = $derived(textColor ? `color: ${textColor}` : undefined);
+	const iconStyle = $derived(iconColor ? `color: ${iconColor}` : undefined);
 </script>
 
-<div class="empty-state-container {className ? className + ' ' : ''}w-full" style="height: {height}; {style}">
-  <div class="empty-state-content" bind:this={contentContainer}>
-    {#if shouldShowIcon}
-      <div class="icon-container">
-        <svelte:component this={iconComponent} class="icon" style="color: {iconColor}" />
-      </div>
-    {/if}
-    <p class="subtext" style="color: {textColor}">{message}</p>
-    
-    {#if $$slots.action}
-      <div class="ms-2">
-        <slot name="action" />
-      </div>
-    {/if}
-  </div>
-</div>
+<div
+	class={cn(
+		'empty-state-container flex w-full items-center justify-center overflow-hidden',
+		className
+	)}
+	style="height: {height}; {style}"
+>
+	<div
+		class="empty-state-content pointer-events-auto flex w-full max-w-[30rem] flex-col items-center gap-3 px-12 py-12 text-center"
+		bind:this={contentContainer}
+	>
+		{#if shouldShowIcon}
+			<div
+				class="bg-brand-subtle flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-xl"
+			>
+				<!-- Figma draws the icon of every Empty State in the foreground colour (Icon collection, Default mode); `iconColor` still overrides it, on the icon itself -->
+				<IconComponent class="text-foreground size-4" style={iconStyle} aria-hidden="true" />
+			</div>
+		{/if}
 
-<style>
-  /* Container takes up full width and prevents scrolling */
-  .empty-state-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    z-index: 0; /* Lower z-index so it doesn't block interactive elements */
-    pointer-events: none; /* Allow clicks to pass through to elements behind */
-  }
-  
-  /* Content is centered and has proper spacing */
-  .empty-state-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    text-align: center;
-    padding: 0 1rem;
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
-    pointer-events: auto; /* Re-enable pointer events for the content itself */
-  }
+		<div class="flex w-full min-w-0 flex-col gap-1">
+			<p class="text-heading-section text-foreground" style={titleStyle}>{message}</p>
+			{#if description}
+				<p class="text-body text-muted-foreground">{description}</p>
+			{/if}
+		</div>
 
-  /* Icon container to prevent scaling */
-  .icon-container {
-    flex-shrink: 0;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+		{#if showActions}
+			<div class="flex flex-wrap items-center justify-center gap-2 pt-3">
+				<slot name="action" />
+			</div>
+		{/if}
+	</div>
+</div>
 
-  /* Ensure text doesn't get squished */
-  .subtext {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+<style>
+	.empty-state-container {
+		z-index: 0;
+		pointer-events: none;
+	}
 
-  /* Media query as a fallback for browsers that don't support ResizeObserver */
-  @media (max-width: 200px) {
-    .icon-container {
-      display: none;
-    }
-  }
-</style> 
+	@media (max-width: 200px) {
+		.empty-state-content :global(.size-12) {
+			display: none;
+		}
+	}
+</style>

package/dist/components/EmptyState.svelte.d.ts

@@ -1,4 +1,17 @@
-import { IconExclamationCircle } from '@tabler/icons-svelte';
+import type { Icon } from '@tabler/icons-svelte';
+type $$ComponentProps = {
+    class?: string;
+    style?: string;
+    message?: string;
+    description?: string;
+    height?: string;
+    showIcon?: boolean;
+    iconColor?: string;
+    textColor?: string;
+    icon?: Icon;
+    /** When false, hides the action row (Figma Show actions). */
+    showActions?: boolean;
+};
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,26 +25,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const EmptyState: $$__sveltets_2_IsomorphicComponent<{
-    /**
-       * Component Props
-       * @prop {string} message - The message to display in the empty state
-       * @prop {string} height - The height of the empty state container (default: '50vh')
-       * @prop {boolean} showIcon - Whether to show the icon (default: true)
-       * @prop {string} iconColor - The color of the icon (default: 'hsl(var(--grey3))')
-       * @prop {string} textColor - The color of the text (default: 'hsl(var(--grey3))')
-       */ class?: string;
-    style?: string;
-    message?: string;
-    height?: string;
-    showIcon?: boolean;
-    iconColor?: string;
-    textColor?: string;
-    icon?: typeof IconExclamationCircle;
-}, {
+declare const EmptyState: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
     [evt: string]: CustomEvent<any>;
 }, {
     action: {};
-}, {}, string>;
+}, {}, "">;
 type EmptyState = InstanceType<typeof EmptyState>;
 export default EmptyState;

package/dist/components/GenerateLoader.svelte

@@ -1,6 +1,6 @@
 <!--
   GenerateLoader — reusable hourglass loading state for code generation / preview build.
-  Change the hourglass emoji or animation here to propagate app-wide.
+  Figma: loading patterns (Skeleton / app shell); colours and motion only here.
 -->
 <script lang="ts">
 	let className = '';
@@ -18,33 +18,40 @@
 	const hourglassSizeClass: Record<typeof size, string> = {
 		sm: 'text-2xl',
 		md: 'text-3xl',
-		lg: 'text-4xl',
+		lg: 'text-4xl'
 	};
 
 	const titleSizeClass: Record<typeof size, string> = {
-		sm: 'text-xs',
-		md: 'text-sm',
-		lg: 'text-lg',
+		sm: 'text-caption',
+		md: 'text-body',
+		lg: 'text-body-large'
 	};
 </script>
 
 <div
 	class="wc-generate-loader {overlay
-		? 'wc-generate-loader-overlay absolute inset-0 z-30 flex flex-col items-center justify-center bg-white pointer-events-none'
+		? 'wc-generate-loader-overlay bg-background pointer-events-none absolute inset-0 z-30 flex flex-col items-center justify-center'
 		: 'wc-generate-loader-inline flex flex-col items-center justify-center text-center'} {className}"
-	style={style}
+	{style}
 	role="status"
 	aria-live="polite"
 >
-	<div class="wc-generate-loader-hourglass animate-spin {hourglassSizeClass[size]} mb-3 text-gray-500"
+	<div
+		class="wc-generate-loader-hourglass text-muted-foreground mb-3 animate-spin motion-reduce:animate-none {hourglassSizeClass[
+			size
+		]}"
 		aria-hidden="true"
 	>
 		⏳
 	</div>
 	{#if title}
-		<div class="wc-generate-loader-title font-medium text-gray-700 {titleSizeClass[size]}">{title}</div>
+		<div class="wc-generate-loader-title text-body-medium text-foreground {titleSizeClass[size]}">
+			{title}
+		</div>
 	{/if}
 	{#if subtitle}
-		<div class="wc-generate-loader-subtitle mt-1 text-xs text-gray-500">{subtitle}</div>
+		<div class="wc-generate-loader-subtitle text-caption text-muted-foreground mt-1">
+			{subtitle}
+		</div>
 	{/if}
 </div>

package/dist/components/PasswordInput.svelte

@@ -1,50 +1,47 @@
+<!-- Figma: Password Field (Auth tier, eye / eye-off icons). -->
 <script lang="ts">
-  // Svelte Imports
-  import type { FullAutoFill } from 'svelte/elements';
+	import type { FullAutoFill } from 'svelte/elements';
+	import IconEye from '@tabler/icons-svelte/icons/eye';
+	import IconEyeOff from '@tabler/icons-svelte/icons/eye-off';
+	import { Input } from './ui/input';
 
-  // SHADCN Imports
-  import { Input } from './ui/input';
+	export let value = '';
+	export let placeholder = 'Enter password';
+	export let name = 'password';
+	export let autocomplete: FullAutoFill = 'current-password';
+	export let disabled = false;
+	export let toggleLabelShow = 'Show password';
+	export let toggleLabelHide = 'Hide password';
 
-  // Import icon URLs
-  import eyeIconUrl from '../icons/eye.svg?url';
-  import eyeOffIconUrl from '../icons/eye-off.svg?url';
-
-  // External Props
-  export let value = '';
-  export let placeholder = 'Enter password';
-  export let name = 'password';
-  export let autocomplete: FullAutoFill = 'current-password';
-  export let disabled = false;
-  
-  // Internal Variables
-  let showPassword = false;
+	let showPassword = false;
 </script>
 
-<div class="relative widgetic-colors">
-  <div class="relative">
-    <Input
-      class="pe-[32px]"
-      bind:value
-      {name}
-      type={showPassword ? 'text' : 'password'}
-      {placeholder}
-      {autocomplete}
-      {disabled}
-      {...$$restProps}
-    />
+<div class="relative w-full">
+	<Input
+		class="pe-10"
+		bind:value
+		{name}
+		type={showPassword ? 'text' : 'password'}
+		{placeholder}
+		{autocomplete}
+		{disabled}
+		{...$$restProps}
+	/>
 
-    <!-- Toggle Password Visibility -->
-    <button
-      type="button"
-      class="absolute top-1/2 -translate-y-1/2 end-3 cursor-pointer text-[hsl(var(--sage-green))] hover:text-[hsl(var(--dark))]"
-      tabindex="-1"
-      on:click={() => showPassword = !showPassword}
-    >
-      <img 
-        src={showPassword ? eyeOffIconUrl : eyeIconUrl}
-        alt={showPassword ? 'Hide password' : 'Show password'} 
-        class="w-5 h-5"
-      />
-    </button>
-  </div>
-</div>
+	<button
+		type="button"
+		class="absolute end-1 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-lg text-foreground press-feedback hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50"
+		tabindex="-1"
+		aria-label={showPassword ? toggleLabelHide : toggleLabelShow}
+		onclick={() => {
+			showPassword = !showPassword;
+		}}
+		{disabled}
+	>
+		{#if showPassword}
+			<IconEyeOff class="size-4 stroke-[1.333]" aria-hidden="true" />
+		{:else}
+			<IconEye class="size-4 stroke-[1.333]" aria-hidden="true" />
+		{/if}
+	</button>
+</div>

package/dist/components/PasswordInput.svelte.d.ts

@@ -19,6 +19,8 @@ declare const PasswordInput: $$__sveltets_2_IsomorphicComponent<{
     name?: string | undefined;
     autocomplete?: FullAutoFill | undefined;
     disabled?: boolean | undefined;
+    toggleLabelShow?: string | undefined;
+    toggleLabelHide?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;