@widgetic/design-system 0.5.22 → 0.5.24

package/dist/components/chat/questionCardLogic.js

@@ -0,0 +1,39 @@
+/** Pure selection and keyboard helpers for QuestionCard. */
+export function toggleOption(selected, optionId, multiple) {
+    if (multiple) {
+        return selected.includes(optionId)
+            ? selected.filter((id) => id !== optionId)
+            : [...selected, optionId];
+    }
+    return [optionId];
+}
+export function moveFocusedIndex(current, direction, count) {
+    if (count <= 0)
+        return 0;
+    if (direction === 'up') {
+        return current <= 0 ? count - 1 : current - 1;
+    }
+    return current >= count - 1 ? 0 : current + 1;
+}
+export function canSubmitQuestion(selected) {
+    return selected.length > 0;
+}
+export function selectionRole(multiple) {
+    return multiple ? 'group' : 'radiogroup';
+}
+export function optionItemRole(multiple) {
+    return multiple ? 'checkbox' : 'radio';
+}
+/** Format the step line (1-based `current`). */
+export function formatQuestionStep(template, current, total) {
+    return template.replace('{current}', String(current)).replace('{total}', String(total));
+}
+export function isFirstQuestion(index) {
+    return index <= 0;
+}
+export function isLastQuestion(index, total) {
+    return total <= 0 || index >= total - 1;
+}
+export function primaryQuestionLabel(isLast, nextLabel, submitLabel) {
+    return isLast ? submitLabel : nextLabel;
+}

package/dist/components/index.d.ts

@@ -4,32 +4,38 @@ export { default as GenerateLoader } from './GenerateLoader.svelte';
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as ThumbHashImage } from './ThumbHashImage.svelte';
 export { default as WScrollArea } from './WScrollArea.svelte';
+export { Composer, type ComposerMessages, type ComposerProps, Message, type MessageMessages, type MessageProps, type MessageRole, ActivityRow, type ActivityRowProps, type ActivityRowStatus, OptionRow, type OptionRowProps, type OptionRowSelectionMode, TaskRow, type TaskRowProps, type TaskRowStatus, ScrollToBottom, type ScrollToBottomProps, canSendText, clampTextareaHeight, shouldSendOnKeyDown, ChatHeader, PlanCard, QuestionCard, canSubmitQuestion, formatQuestionStep, isFirstQuestion, isLastQuestion, moveFocusedIndex, optionItemRole, primaryQuestionLabel, selectionRole, toggleOption, SuggestionCard } from './chat';
 export { default as DebugGrid } from './debug-grid/DebugGrid.svelte';
 export { default as BrowserInputController } from './ic/browser/BrowserInputController.svelte';
 export { default as ActionModal } from './modals/ActionModal.svelte';
 export { default as BaseModal } from './modals/BaseModal.svelte';
 export { default as NewItemDialog } from './modals/NewItemDialog.svelte';
-export type { NewItemDialogMessages, RenameDialogMessages } from './modals/messages';
 export { default as Portal } from './modals/Portal.svelte';
 export { default as RenameDialog } from './modals/RenameDialog.svelte';
 export { Breadcrumbs, type BreadcrumbsProps } from './navigation';
 export { default as PDFViewer } from './pdf/PDFViewer.svelte';
 export { SearchInput } from './search-input';
+export { ShadEditor, checkShadEditorMessages, type ShadEditorMessageKey, type TipTapEditor, type TipTapEditorLevel } from './shad-editor';
+export { NavRow, navRowVariants, NavSectionLabel, ProfileRow, profileRowVariants, Sidebar, WidgetRow, widgetRowVariants, PageHeader, TopBar, NavDrawer, AppShell, ErrorState, defaultErrorStateMessages, type ErrorStateMessages, NotificationRow, type NotificationRowProps, SettingsNav, type SettingsNavProps, SettingsDialog, type SettingsDialogProps, Stat, type StatProps, statVariants, Banner, type BannerProps, type BannerTone, bannerVariants, Link, type LinkProps, type LinkSize, linkVariants, type SettingsNavGroup, type SettingsNavItem, settingsNavItemIsActive, externalLinkAttributes, statHintClass, type StatTone, type SettingsDialogMessages, defaultSettingsDialogMessages } from './shell';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';
 export * as Alert from './ui/alert';
+export { avatarInitials, avatarVariants, type AvatarSize, Avatar } from './ui/avatar';
 export { Badge, badgeVariants, type BadgeVariant } from './ui/badge';
 export * as Breadcrumb from './ui/breadcrumb';
 export { type Props, Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant } from './ui/button';
 export { Calendar } from './ui/calendar';
 export * as Card from './ui/card';
 export { Checkbox } from './ui/checkbox';
+export { Chip } from './ui/chip';
 export * as Collapsible from './ui/collapsible';
 export * as Command from './ui/command';
 export * as Dialog from './ui/dialog';
 export * as Drawer from './ui/drawer';
 export * as DropdownMenu from './ui/dropdown-menu';
+export { createFieldIds, fieldDescribedBy, type FieldIds, Field } from './ui/field';
 export * as HoverCard from './ui/hover-card';
+export { IconButton, iconButtonVariants, type IconButtonProps, type IconButtonSize, type IconButtonVariant } from './ui/icon-button';
 export { Input } from './ui/input';
 export * as InputOtp from './ui/input-otp';
 export { Label } from './ui/label';
@@ -40,11 +46,14 @@ export { RangeCalendar } from './ui/range-calendar';
 export { ScrollArea, ScrollAreaScrollbar } from './ui/scroll-area';
 export * as Select from './ui/select';
 export { Separator } from './ui/separator';
+export { Skeleton } from './ui/skeleton';
 export { Slider, type SliderProps } from './ui/slider';
 export { Toaster, toast } from './ui/sonner';
+export { StepperButton } from './ui/stepper-button';
 export { Switch } from './ui/switch';
 export * as Table from './ui/table';
 export * as Tabs from './ui/tabs';
+export { Tag } from './ui/tag';
 export { Textarea, type TextareaEvents, type FormTextareaEvent } from './ui/textarea';
 export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants, Toggle } from './ui/toggle';
 export * as ToggleGroup from './ui/toggle-group';

package/dist/components/index.js

@@ -5,6 +5,7 @@ export { default as GenerateLoader } from './GenerateLoader.svelte';
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as ThumbHashImage } from './ThumbHashImage.svelte';
 export { default as WScrollArea } from './WScrollArea.svelte';
+export { Composer, Message, ActivityRow, OptionRow, TaskRow, ScrollToBottom, canSendText, clampTextareaHeight, shouldSendOnKeyDown, ChatHeader, PlanCard, QuestionCard, canSubmitQuestion, formatQuestionStep, isFirstQuestion, isLastQuestion, moveFocusedIndex, optionItemRole, primaryQuestionLabel, selectionRole, toggleOption, SuggestionCard } from './chat';
 export { default as DebugGrid } from './debug-grid/DebugGrid.svelte';
 export { default as BrowserInputController } from './ic/browser/BrowserInputController.svelte';
 export { default as ActionModal } from './modals/ActionModal.svelte';
@@ -15,21 +16,27 @@ export { default as RenameDialog } from './modals/RenameDialog.svelte';
 export { Breadcrumbs } from './navigation';
 export { default as PDFViewer } from './pdf/PDFViewer.svelte';
 export { SearchInput } from './search-input';
+export { ShadEditor, checkShadEditorMessages } from './shad-editor';
+export { NavRow, navRowVariants, NavSectionLabel, ProfileRow, profileRowVariants, Sidebar, WidgetRow, widgetRowVariants, PageHeader, TopBar, NavDrawer, AppShell, ErrorState, defaultErrorStateMessages, NotificationRow, SettingsNav, SettingsDialog, Stat, statVariants, Banner, bannerVariants, Link, linkVariants, settingsNavItemIsActive, externalLinkAttributes, statHintClass, defaultSettingsDialogMessages } from './shell';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';
 export * as Alert from './ui/alert';
+export { avatarInitials, avatarVariants, Avatar } from './ui/avatar';
 export { Badge, badgeVariants } from './ui/badge';
 export * as Breadcrumb from './ui/breadcrumb';
 export { Button, buttonVariants } from './ui/button';
 export { Calendar } from './ui/calendar';
 export * as Card from './ui/card';
 export { Checkbox } from './ui/checkbox';
+export { Chip } from './ui/chip';
 export * as Collapsible from './ui/collapsible';
 export * as Command from './ui/command';
 export * as Dialog from './ui/dialog';
 export * as Drawer from './ui/drawer';
 export * as DropdownMenu from './ui/dropdown-menu';
+export { createFieldIds, fieldDescribedBy, Field } from './ui/field';
 export * as HoverCard from './ui/hover-card';
+export { IconButton, iconButtonVariants } from './ui/icon-button';
 export { Input } from './ui/input';
 export * as InputOtp from './ui/input-otp';
 export { Label } from './ui/label';
@@ -40,11 +47,14 @@ export { RangeCalendar } from './ui/range-calendar';
 export { ScrollArea, ScrollAreaScrollbar } from './ui/scroll-area';
 export * as Select from './ui/select';
 export { Separator } from './ui/separator';
+export { Skeleton } from './ui/skeleton';
 export { Slider } from './ui/slider';
 export { Toaster, toast } from './ui/sonner';
+export { StepperButton } from './ui/stepper-button';
 export { Switch } from './ui/switch';
 export * as Table from './ui/table';
 export * as Tabs from './ui/tabs';
+export { Tag } from './ui/tag';
 export { Textarea } from './ui/textarea';
 export { toggleVariants, Toggle } from './ui/toggle';
 export * as ToggleGroup from './ui/toggle-group';

package/dist/components/modals/ActionModal.svelte

@@ -1,187 +1,193 @@
 <script lang="ts">
-  // Svelte imports
-  import { createEventDispatcher, onMount } from 'svelte';
-  const dispatch = createEventDispatcher();
-
-  // Local imports
-  import { Button } from '../ui/button';
-  import { toast } from '../ui/sonner';
-  import BaseModal from './BaseModal.svelte';
-
-  // For debugging
-  const showLogs = true; // You can set to true when debugging
-
-  // Props
-  let className = '';
-  export { className as class };
-  export let style: string = '';
-  //
-  export let isOpen = false;
-  export let items: any[] = [];
-  export let title: string = '';
-  export let message: string = '';
-  export let confirmLabel: string = 'Confirm';
-  export let onConfirm: () => Promise<any> = async () => {};
-  export let cancelLabel: string = 'Cancel';
-  // The words a screen reader says for the close button (see BaseModal)
-  export let closeLabel: string = 'Close modal';
-  export let onCancel: () => void = () => {};
-  export let width: string = '410px';
-  export let height: string = '168px';
-  export let target: string = 'action-confirmation-modal'; // target for Portal
-  export let isConfirmDisabled: boolean = false;
-  /** When false, a failed confirm can leave the dialog open. Callers close it themselves. */
-  export let closeOnConfirm: boolean = true;
-  export let confirmVariant: 'primary' | 'attention' = 'primary';
-  export let actionType: string = 'confirm';
-
-  // For backwards compatibility with specific implementations
-  export let modalType: string = 'actionConfirmation';
-  export let modalData: any = null;
-  
-  /* INTERNAL STATE */
-  let confirmResult: string = '';
-  let isInitialized = false;
-
-  // Only initialize once mounted
-  onMount(() => {
-    isInitialized = true;
-  });
-
-  // Initialize modalData with our current props if not provided externally
-  // Only do this when modal is actually open
-  $: if (isOpen && isInitialized && modalData === null) {
-    modalData = { 
-      items, 
-      title, 
-      message, 
-      confirmLabel, 
-      cancelLabel,
-      confirmVariant,
-      actionType
-    };
-  }
-
-  // Check if buttons are present
-  $: hasButtons = cancelLabel || confirmLabel;
-
-  function handleClose(event: Event) {
-    isOpen = false;
-    onCancel();
-    dispatch('cancel');
-  }
-
-  async function handleConfirm() {    
-    // call the onConfirm handler
-    let result = await onConfirm();
-    confirmResult = result || '';
-
-    // Dispatch a confirmation event with all items
-    dispatch('confirm', { items });
-   
-    // Callers that show an error inside the dialog set closeOnConfirm to false.
-    if (closeOnConfirm) isOpen = false;
-  }
-
-  // Support for restoring modal state
-  function handleRestore(event: CustomEvent) {
-    // Skip restoration if modal isn't initialized
-    if (!isInitialized) return;
-    
-    if (event.detail) {
-      const data = event.detail;
-      
-      // Only process items if modal is actually open
-      if (isOpen && data.items) {
-        if (Array.isArray(data.items)) {
-          items = data.items;
-        } else if (typeof data.items === 'object') {
-          items = [data.items];
-        }
-      }
-      
-      if (data.title) title = data.title;
-      if (data.message) message = data.message;
-      if (data.confirmLabel) confirmLabel = data.confirmLabel;
-      if (data.cancelLabel) cancelLabel = data.cancelLabel;
-      if (data.confirmVariant) confirmVariant = data.confirmVariant;
-      if (data.actionType) actionType = data.actionType;
-    }
-  }
-
-  // Only log when modal is actually open
-  $: if (isOpen && isInitialized && items && items.length > 0 && showLogs) {
-    // console.log('Items in open modal:', items);
-    // console.log('First item name:', items[0]?.name);
-  }
+	// Svelte imports
+	import { createEventDispatcher, onMount } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	// Local imports
+	import { Button } from '../ui/button';
+	import { toast } from '../ui/sonner';
+	import BaseModal from './BaseModal.svelte';
+
+	// For debugging
+	const showLogs = true; // You can set to true when debugging
+
+	// Props
+	let className = '';
+	export { className as class };
+	export let style: string = '';
+	//
+	export let isOpen = false;
+	export let items: any[] = [];
+	export let title: string = '';
+	export let message: string = '';
+	export let confirmLabel: string = 'Confirm';
+	export let onConfirm: () => Promise<any> = async () => {};
+	export let cancelLabel: string = 'Cancel';
+	// The words a screen reader says for the close button (see BaseModal)
+	export let closeLabel: string = 'Close modal';
+	export let onCancel: () => void = () => {};
+	export let width: string = '400px';
+	export let height: string = '168px';
+	export let target: string = 'action-confirmation-modal'; // target for Portal
+	export let isConfirmDisabled: boolean = false;
+	/** When false, a failed confirm can leave the dialog open. Callers close it themselves. */
+	export let closeOnConfirm: boolean = true;
+	export let confirmVariant: 'primary' | 'attention' = 'primary';
+	export let actionType: string = 'confirm';
+
+	// For backwards compatibility with specific implementations
+	export let modalType: string = 'actionConfirmation';
+	export let modalData: any = null;
+
+	/* INTERNAL STATE */
+	let confirmResult: string = '';
+	let isInitialized = false;
+
+	// Only initialize once mounted
+	onMount(() => {
+		isInitialized = true;
+	});
+
+	// Initialize modalData with our current props if not provided externally
+	// Only do this when modal is actually open
+	$: if (isOpen && isInitialized && modalData === null) {
+		modalData = {
+			items,
+			title,
+			message,
+			confirmLabel,
+			cancelLabel,
+			confirmVariant,
+			actionType
+		};
+	}
+
+	// Check if buttons are present
+	$: hasButtons = cancelLabel || confirmLabel;
+
+	function handleClose(event: Event) {
+		isOpen = false;
+		onCancel();
+		dispatch('cancel');
+	}
+
+	async function handleConfirm() {
+		// call the onConfirm handler
+		let result = await onConfirm();
+		confirmResult = result || '';
+
+		// Dispatch a confirmation event with all items
+		dispatch('confirm', { items });
+
+		// Callers that show an error inside the dialog set closeOnConfirm to false.
+		if (closeOnConfirm) isOpen = false;
+	}
+
+	// Support for restoring modal state
+	function handleRestore(event: CustomEvent) {
+		// Skip restoration if modal isn't initialized
+		if (!isInitialized) return;
+
+		if (event.detail) {
+			const data = event.detail;
+
+			// Only process items if modal is actually open
+			if (isOpen && data.items) {
+				if (Array.isArray(data.items)) {
+					items = data.items;
+				} else if (typeof data.items === 'object') {
+					items = [data.items];
+				}
+			}
+
+			if (data.title) title = data.title;
+			if (data.message) message = data.message;
+			if (data.confirmLabel) confirmLabel = data.confirmLabel;
+			if (data.cancelLabel) cancelLabel = data.cancelLabel;
+			if (data.confirmVariant) confirmVariant = data.confirmVariant;
+			if (data.actionType) actionType = data.actionType;
+		}
+	}
+
+	// Only log when modal is actually open
+	$: if (isOpen && isInitialized && items && items.length > 0 && showLogs) {
+		// console.log('Items in open modal:', items);
+		// console.log('First item name:', items[0]?.name);
+	}
 </script>
 
-<BaseModal 
-  bind:open={isOpen} 
-  on:close={handleClose}
-  {target}
-  title={title}
-  width={width}
-  height={height}
-  titlePadding="small"
-  {closeLabel}
-  {modalType}
-  {modalData}
-  on:restore={handleRestore}
-  class={!hasButtons ? 'no-buttons' : ''}
+<BaseModal
+	bind:open={isOpen}
+	on:close={handleClose}
+	{target}
+	{title}
+	{width}
+	{height}
+	{closeLabel}
+	{modalType}
+	{modalData}
+	on:restore={handleRestore}
+	class={!hasButtons ? 'no-buttons' : ''}
 >
-  <div class="{className ? `${className} ` : ''}action-modal-container h-full flex flex-col gap-4 min-h-[99px] justify-between {!hasButtons ? 'pb-0' : ''}"
-    style={style}
-  >
-
-    <!-- Message Container -->
-    {#if message}
-      <p class="body text-[hsl(var(--grey5))] text-center px-4">
-        {message}
-      </p>
-    {/if}
-
-    <!-- Slot for custom content -->
-    <slot></slot>
-
-    <!-- Buttons Container - Only show if at least one button label is provided -->
-    {#if hasButtons}
-    <div class="buttons-container flex justify-center gap-4 mb-[4px]">
-        {#if cancelLabel}
-          <Button 
-            type="button"
-            variant="secondary"
-            class="cancel-button modal-btn-secondary !h-[34px] !rounded-[100px] px-4 py-2" 
-            onclick={handleClose}
-          >
-            {cancelLabel}
-          </Button>
-        {/if}
-        {#if confirmLabel}
-          <Button 
-            type="button"
-            class="{confirmVariant === 'attention' ? 'confirm-button modal-btn-attention !h-[34px] !rounded-[100px] px-4 py-2 bg-[hsl(var(--error))] hover:bg-[hsl(var(--error-dark))] text-white' : 'confirm-button modal-btn-primary !h-[34px] !rounded-[100px] px-4 py-2 bg-[hsl(var(--forest-green))] hover:bg-[hsl(var(--forest-green-dark))] text-white'}"
-            onclick={handleConfirm}
-            disabled={isConfirmDisabled}
-          >
-            {confirmLabel}
-          </Button>
-        {/if}
-      </div>
-    {/if}
-
-    <!-- Update result box - Only show if there's a result -->
-    {#if confirmResult}
-      <p class="mt-4 text-sm text-center" class:text-[hsl(var(--sage-green))]={!confirmResult.startsWith('Error')} class:text-[hsl(var(--error))]={confirmResult.startsWith('Error')}>
-        {@html confirmResult}
-      </p>
-    {/if}
-  </div>
+	<div
+		class="{className
+			? `${className} `
+			: ''}action-modal-container flex flex-col gap-4 {!hasButtons ? 'pb-0' : ''}"
+		{style}
+	>
+		<!-- Message Container -->
+		{#if message}
+			<p class="text-body text-muted-foreground text-start">
+				{message}
+			</p>
+		{/if}
+
+		<!-- Slot for custom content -->
+		<slot></slot>
+
+		<!-- Buttons Container - Only show if at least one button label is provided -->
+		{#if hasButtons}
+			<div class="buttons-container flex justify-end gap-2">
+				{#if cancelLabel}
+					<Button
+						type="button"
+						variant="outline"
+						class="cancel-button"
+						onclick={handleClose}
+					>
+						{cancelLabel}
+					</Button>
+				{/if}
+				{#if confirmLabel}
+					<Button
+						type="button"
+						variant={confirmVariant === 'attention' ? 'destructive' : 'default'}
+						class="confirm-button"
+						onclick={handleConfirm}
+						disabled={isConfirmDisabled}
+					>
+						{confirmLabel}
+					</Button>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Update result box - Only show if there's a result -->
+		{#if confirmResult}
+			<p
+				class="text-caption mt-4 text-center"
+				class:text-brand={!confirmResult.startsWith('Error')}
+				class:text-destructive={confirmResult.startsWith('Error')}
+			>
+				{@html confirmResult}
+			</p>
+		{/if}
+	</div>
 </BaseModal>
 
 <style>
-  /* Remove bottom padding when no buttons are present */
-  :global(.no-buttons .modal-content-inner-container) {
-    padding-bottom: 0 !important;
-  }
-</style> 
+	/* Remove bottom padding when no buttons are present */
+	:global(.no-buttons .modal-content-inner-container) {
+		padding-bottom: 0 !important;
+	}
+</style>