@widgetic/design-system 0.3.68

package/dist/components/index.d.ts

@@ -0,0 +1,51 @@
+export { default as CopyableHeader } from './CopyableHeader.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as ThumbHashImage } from './ThumbHashImage.svelte';
+export { default as WScrollArea } from './WScrollArea.svelte';
+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 { 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 { default as SearchInput } from './search-input/SearchInput.svelte';
+export { ShadEditor, type TipTapEditor, type TipTapEditorLevel } from './shad-editor';
+export { ToasterModal, showToast } from './toast';
+export * as Accordion from './ui/accordion';
+export * as Alert from './ui/alert';
+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 * 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 * as HoverCard from './ui/hover-card';
+export { Input } from './ui/input';
+export * as InputOtp from './ui/input-otp';
+export { Label } from './ui/label';
+export * as Popover from './ui/popover';
+export { Progress } from './ui/progress';
+export * as RadioGroup from './ui/radio-group';
+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 { Slider, type SliderProps } from './ui/slider';
+export { Toaster, toast } from './ui/sonner';
+export { Switch } from './ui/switch';
+export * as Table from './ui/table';
+export * as Tabs from './ui/tabs';
+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';
+export * as Tooltip from './ui/tooltip';
+export { Moveable, EditableWidget } from './widget-system';

package/dist/components/index.js

@@ -0,0 +1,52 @@
+// Component exports
+export { default as CopyableHeader } from './CopyableHeader.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as ThumbHashImage } from './ThumbHashImage.svelte';
+export { default as WScrollArea } from './WScrollArea.svelte';
+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 { default as Portal } from './modals/Portal.svelte';
+export { default as RenameDialog } from './modals/RenameDialog.svelte';
+export { Breadcrumbs } from './navigation';
+export { default as PDFViewer } from './pdf/PDFViewer.svelte';
+export { default as SearchInput } from './search-input/SearchInput.svelte';
+export { ShadEditor } from './shad-editor';
+export { ToasterModal, showToast } from './toast';
+export * as Accordion from './ui/accordion';
+export * as Alert from './ui/alert';
+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 * 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 * as HoverCard from './ui/hover-card';
+export { Input } from './ui/input';
+export * as InputOtp from './ui/input-otp';
+export { Label } from './ui/label';
+export * as Popover from './ui/popover';
+export { Progress } from './ui/progress';
+export * as RadioGroup from './ui/radio-group';
+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 { Slider } from './ui/slider';
+export { Toaster, toast } from './ui/sonner';
+export { Switch } from './ui/switch';
+export * as Table from './ui/table';
+export * as Tabs from './ui/tabs';
+export { Textarea } from './ui/textarea';
+export { toggleVariants, Toggle } from './ui/toggle';
+export * as ToggleGroup from './ui/toggle-group';
+export * as Tooltip from './ui/tooltip';
+export { Moveable, EditableWidget } from './widget-system';

package/dist/components/modals/ActionModal.svelte

@@ -0,0 +1,189 @@
+<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';
+  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;
+  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 });
+   
+    // Close the modal immediately to allow user to continue working
+    // 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"
+  {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}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div 
+            class="cancel-button modal-btn-secondary !h-[34px] radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--grey1))] hover:bg-[hsl(var(--grey2))] text-[hsl(var(--grey7))] rounded-full" 
+            on:click={handleClose}
+            role="button"
+            tabindex="0"
+          >
+            {cancelLabel}
+          </div>
+        {/if}
+        {#if confirmLabel}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div 
+            class="{confirmVariant === 'attention' ? 'confirm-button modal-btn-attention !h-[34px] radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--error))] hover:bg-[hsl(var(--error-dark))] text-white rounded-full' : 'confirm-button modal-btn-primary !h-[34px] radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--forest-green))] hover:bg-[hsl(var(--forest-green-dark))] text-white rounded-full'}"
+            on:click={handleConfirm}
+            role="button"
+            tabindex="0"
+            class:opacity-50={isConfirmDisabled}
+            class:cursor-not-allowed={isConfirmDisabled}
+            class:pointer-events-none={isConfirmDisabled}
+          >
+            {confirmLabel}
+          </div>
+        {/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>
+</BaseModal>
+
+<style>
+  /* Remove bottom padding when no buttons are present */
+  :global(.no-buttons .modal-content-inner-container) {
+    padding-bottom: 0 !important;
+  }
+</style> 

package/dist/components/modals/ActionModal.svelte.d.ts

@@ -0,0 +1,49 @@
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const ActionModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string;
+    style?: string;
+    isOpen?: boolean;
+    items?: any[];
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    onConfirm?: () => Promise<any>;
+    cancelLabel?: string;
+    onCancel?: () => void;
+    width?: string;
+    height?: string;
+    target?: string;
+    isConfirmDisabled?: boolean;
+    confirmVariant?: "primary" | "attention";
+    actionType?: string;
+    modalType?: string;
+    modalData?: any;
+}, {
+    default: {};
+}>, {
+    cancel: CustomEvent<any>;
+    confirm: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ActionModal = InstanceType<typeof ActionModal>;
+export default ActionModal;