@widgetic/design-system 0.3.70 → 0.3.71

package/dist/components/CopyableHeader.svelte

@@ -30,8 +30,10 @@ const dispatch = createEventDispatcher();
 /**
  * COMPONENT IMPORTS
  */
-import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
-import { IconCopy, IconHelp } from '@widgetic/design-system/icons';
+// import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
+import { toast, Button, Tooltip, Portal } from './';
+// import { IconCopy, IconHelp } from '@widgetic/design-system/icons';
+import { IconCopy, IconHelp } from '../icons';
 
 /**
  * COMPONENT PROPS

package/dist/components/EmptyState.svelte

@@ -11,8 +11,10 @@
  * - Responsive: hides icon when space is limited
  -->
 <script lang="ts">
-  import { IconExclamationCircle } from '@widgetic/design-system/icons';
   import { onMount } from 'svelte';
+
+  // import { IconExclamationCircle } from '@widgetic/design-system/icons';
+  import { IconExclamationCircle } from '../icons';
   
   /**
    * Component Props

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

@@ -1,3 +1,4 @@
+import { IconExclamationCircle } from '../icons';
 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;
@@ -26,7 +27,7 @@ declare const EmptyState: $$__sveltets_2_IsomorphicComponent<{
     showIcon?: boolean;
     iconColor?: string;
     textColor?: string;
-    icon?: any;
+    icon?: typeof IconExclamationCircle;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {

package/dist/components/PasswordInput.svelte

@@ -5,6 +5,10 @@
   // SHADCN Imports
   import { Input } from './ui/input';
 
+  // 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';
@@ -37,7 +41,7 @@
       on:click={() => showPassword = !showPassword}
     >
       <img 
-        src={showPassword ? '/icons/eye-off.svg' : '/icons/eye.svg'} 
+        src={showPassword ? eyeOffIconUrl : eyeIconUrl}
         alt={showPassword ? 'Hide password' : 'Show password'} 
         class="w-5 h-5"
       />

package/dist/components/WScrollArea.svelte

@@ -26,14 +26,14 @@ export let element: HTMLElement | null = null;
 <ScrollArea bind:ref={element}
         class={(className ? className + ' ' : '') + "scroll-area-container w-full h-full " + 
               "widgetic-radius widgetic-colors select-text " +  
-              "**:data-scroll-area-viewport:pr-(--scrollbar-width)!"}
+              "**:!data-scroll-area-viewport:pr-(--scrollbar-width)"}
         style="{style} {scrollOutside ? `width: calc(100% + ${scrollbarWidth}px) !important;` : ''}
                 --scrollbar-width: {scrollbarWidth}px; --scrollbar-padding: {scrollbarWidth/4}px; "
         {orientation}
         {type}
         {scrollHideDelay}
-        scrollbarYClasses={scrollbarYClasses + "flex w-[var(--scrollbar-width)] p-(--scrollbar-padding)! " + 
-                          "bg-transparent! border-none select-none touch-none " + 
+        scrollbarYClasses={scrollbarYClasses + "flex w-[var(--scrollbar-width)] !p-(--scrollbar-padding) " + 
+                          "!bg-transparent border-none select-none touch-none " + 
                           "[&>div]:rounded-[var(--radius-pill)] [&>div]:cursor-pointer " + 
                           "[&>div]:bg-[hsl(var(--grey1))] hover:[&>div]:bg-[hsl(var(--grey2))] " + 
                           "[&>div]:transition-colors [&>div]:duration-250"}

package/dist/components/modals/ActionModal.svelte

@@ -146,7 +146,7 @@
           <!-- 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" 
+            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"
@@ -158,7 +158,7 @@
           <!-- 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'}"
+            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"

package/dist/components/modals/BaseModal.svelte

@@ -294,7 +294,7 @@
           role="button"
           tabindex="0"
         >
-          <IconX class="w-[24px]! h-[24px]! text-white" />
+          <IconX class="!w-[24px] !h-[24px] text-white" />
         </div>
       </div>
 

package/dist/components/modals/NewItemDialog.svelte

@@ -149,14 +149,14 @@
       <Button 
         type="button" 
         variant="secondary"
-        class="modal-btn-secondary rounded-[100px]! h-[34px]!" 
+        class="modal-btn-secondary !rounded-[100px] !h-[34px]" 
         onclick={handleClose}
       >
         {cancelLabel}
       </Button>
       <Button 
         type="submit" 
-        class="modal-btn-primary rounded-[100px]! h-[34px]!"
+        class="modal-btn-primary !rounded-[100px] !h-[34px]"
         onclick={handleSubmit}
         disabled={!isValid}
       >

package/dist/components/modals/RenameDialog.svelte

@@ -282,17 +282,18 @@
 
     <!-- Buttons Container -->
     <div class="buttons-container flex justify-center gap-4">
+      <!-- Cancel Button -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <Button 
-        type="button" 
-        variant="secondary"
-        class="modal-btn-secondary h-[34px]!" 
+        class="modal-btn-secondary !h-[34px]"
         onclick={handleClose}
       >
         {cancelLabel}
       </Button>
-      <Button 
-        type="submit" 
-        class="modal-btn-primary h-[34px]!"
+
+      <!-- Confirm Button -->
+      <Button
+        class="modal-btn-primary !h-[34px]"
         onclick={handleRename}
         disabled={!isValid}
       >

package/dist/components/pdf/PDFViewer.svelte

@@ -542,29 +542,19 @@
     <!-- Page Navigation Bar -->
     <div class="page-navigation-bar flex items-center justify-center h-[54px] widgetic-colors border-b border-[hsl(var(--grey2))] w-full">
       <div class="flex items-center gap-3 w-full max-w-[200px] justify-between px-0">
-        <button
-          class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border border-[hsl(var(--grey2))] transition-colors group active:scale-95 disabled:opacity-50"
-          onclick={onPrevPage}
-          disabled={pageNum <= 1}
-          aria-label="Previous page"
-        >
-          <IconChevronLeft 
-            class="text-[hsl(var(--grey5))]! group-hover:text-[hsl(var(--grey7))]!"
-            style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onPrevPage} disabled={pageNum <= 1}>
+          <IconChevronLeft
+            class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
+            style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
         
         <span class="subtext text-[hsl(var(--grey7))]">Page {pageNum} of {pageCount || '?'}</span>
         
-        <button
-          class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border border-[hsl(var(--grey2))] transition-colors group active:scale-95 disabled:opacity-50"
-          onclick={onNextPage}
-          disabled={pageNum >= pageCount}
-          aria-label="Next page"
-        >
-          <IconChevronRight 
-            class="text-[hsl(var(--grey5))]! group-hover:text-[hsl(var(--grey7))]!"
-            style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onNextPage} disabled={pageNum >= pageCount}>
+          <IconChevronRight
+            class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
+            style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
       </div>

package/dist/components/search-input/SearchInput.svelte

@@ -10,8 +10,8 @@
  * - Uses Widgetic design system styling
  -->
 <script lang="ts">
-  import { X, IconSearch } from '@widgetic/design-system/icons';
-
+  // import { X, IconSearch } from '@widgetic/design-system/icons';
+  import { X, IconSearch } from '../../icons';
   /**
    * Placeholder text for the search input
    */

package/dist/components/shad-editor/custom/code-extended.svelte

@@ -43,7 +43,7 @@
 					'absolute left-2 top-2 h-4 rounded px-1 py-2 text-xs capitalize text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100'
 			})}
 			>{defaultLanguage}
-			<ChevronDown class="size-3!" />
+			<ChevronDown class="!size-3" />
 		</DropdownMenu.Trigger>
 		<DropdownMenu.Content class="h-60 w-40 overflow-auto" contenteditable="false">
 			{#each languages as language}

package/dist/components/shad-editor/icons/highlighter.svelte

@@ -30,7 +30,7 @@
 						onclick={() => editor.chain().focus()}
 					>
 						<Highlighter />
-						<ChevronDown class="size-3! text-muted-foreground" />
+						<ChevronDown class="!size-3 text-muted-foreground" />
 					</Button>
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">

package/dist/components/shad-editor/icons/image.svelte

@@ -18,7 +18,7 @@
 				<Popover.Trigger>
 					<Button variant="ghost" size="sm" class="h-8">
 						<Image />
-						<ChevronDown class="size-3! text-muted-foreground" />
+						<ChevronDown class="!size-3 text-muted-foreground" />
 					</Button>
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">

package/dist/components/shad-editor/icons/link.svelte

@@ -31,7 +31,7 @@
 						class={cn('h-8', editor.isActive('link') && 'bg-muted')}
 					>
 						<Link />
-						<ChevronDown class="size-3! text-muted-foreground" />
+						<ChevronDown class="!size-3 text-muted-foreground" />
 					</Button>
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">

package/dist/components/shad-editor/icons/quickcolor.svelte

@@ -30,7 +30,7 @@
 				<DropdownMenu.Trigger>
 					<Button variant="ghost" size="sm" class="h-8" style={`color: ${currentColor}`}>
 						A
-						<ChevronDown class="size-3!" />
+						<ChevronDown class="!size-3" />
 					</Button>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">
@@ -56,7 +56,7 @@
 								>
 								<span>{color.label}</span>
 								{#if editor.isActive('textStyle', { color: color.value })}
-									<Check class="absolute right-2 size-3! text-muted-foreground" />
+									<Check class="absolute right-2 !size-3 text-muted-foreground" />
 								{/if}
 							</DropdownMenu.Item>
 						{/each}
@@ -80,7 +80,7 @@
 								>
 								<span>{color.label}</span>
 								{#if editor.isActive('highlight', { color: color.value })}
-									<Check class="absolute right-2 size-3! text-muted-foreground" />
+									<Check class="absolute right-2 !size-3 text-muted-foreground" />
 								{/if}
 							</DropdownMenu.Item>
 						{/each}

package/dist/components/shad-editor/icons/table.svelte

@@ -15,7 +15,7 @@
 				<DropdownMenu.Trigger>
 					<Button variant="ghost" size="sm" class="h-8">
 						<Table />
-						<ChevronDown class="size-3!" />
+						<ChevronDown class="!size-3" />
 					</Button>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">

package/dist/components/shad-editor/icons/text.svelte

@@ -36,7 +36,7 @@
 						{:else}
 							<Minus />
 						{/if}
-						<ChevronDown class="size-3! text-muted-foreground" />
+						<ChevronDown class="!size-3 text-muted-foreground" />
 					</Button>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content class="w-56">
@@ -46,7 +46,7 @@
 					>
 						<Heading1 /> Heading 1
 						{#if editor.isActive('heading', { level: 1 })}
-							<Check class="absolute right-2 size-3! text-muted-foreground" />
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
@@ -55,7 +55,7 @@
 					>
 						<Heading2 /> Heading 2
 						{#if editor.isActive('heading', { level: 2 })}
-							<Check class="absolute right-2 size-3! text-muted-foreground" />
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
@@ -64,7 +64,7 @@
 					>
 						<Heading3 /> Heading 3
 						{#if editor.isActive('heading', { level: 3 })}
-							<Check class="absolute right-2 size-3! text-muted-foreground" />
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
@@ -82,7 +82,7 @@
 					>
 						<FileJson /> Code Block
 						{#if editor.isActive('codeBlock')}
-							<Check class="absolute right-2 size-3! text-muted-foreground" />
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 				</DropdownMenu.Content>

package/dist/components/shad-editor/icons/textalign.svelte

@@ -32,7 +32,7 @@
 						{:else}
 							<AlignLeft />
 						{/if}
-						<ChevronDown class="size-3! text-muted-foreground" />
+						<ChevronDown class="!size-3 text-muted-foreground" />
 					</Button>
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content class="w-56">
@@ -42,7 +42,7 @@
 					>
 						<AlignLeft /> Align Left
 						{#if editor.isActive({ textAlign: 'left' })}
-							<Check class="absolute right-2 size-3! text-muted-foreground" />
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
@@ -51,7 +51,7 @@
 					>
 						<AlignCenter /> Align Center
 						{#if editor.isActive({ textAlign: 'center' })}
-							<Check class="absolute right-2 size-3! text-muted-foreground" />
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
@@ -60,7 +60,7 @@
 					>
 						<AlignRight /> Align Right
 						{#if editor.isActive({ textAlign: 'right' })}
-							<Check class="absolute right-2 size-3! text-muted-foreground" />
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item
@@ -69,7 +69,7 @@
 					>
 						<AlignJustify /> Align Justify
 						{#if editor.isActive({ textAlign: 'justify' })}
-							<Check class="absolute right-2 size-3! text-muted-foreground" />
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 				</DropdownMenu.Content>

package/dist/components/shad-editor/icons/textcolor.svelte

@@ -30,7 +30,7 @@
 						onclick={() => editor.chain().focus()}
 					>
 						<Baseline />
-						<ChevronDown class="size-3! text-muted-foreground" />
+						<ChevronDown class="!size-3 text-muted-foreground" />
 					</Button>
 				</Popover.Trigger>
 				<Popover.Content class="bg-popover shadow-lg *:my-2">

package/dist/components/toast/ToasterModal.svelte

@@ -3,8 +3,8 @@
 import { toast, Toaster } from '../ui/sonner';
 
 // Import Icons from Icons Folder
-import Close from '../../icons/Exclamation.svelte';
-import Checked from '../../icons/checked.svelte';
+import Exclamation from '../../icons/Exclamation.svelte';
+import Checked from '../../icons/Checked.svelte';
 
 // Import Toast Types directly from the svelte-sonner module
 // import type { ToastTypes } from 'svelte-sonner';
@@ -50,27 +50,34 @@ export function showToast(type: string = 'success', title: string, options: any
   const duration = options?.duration || defaultDuration;
 
   // set close icon - not working !!!
-  options.closeIcon = Close;
+  options.closeIcon = Exclamation;
 
   // Get the title color from the options or use the default color
   const titleColor = type === 'success' ? '--grey7' : type === 'error' ? '--error' : '--dark';
 
   // set icon depending on the type of toast
-  if(type === 'error') options.icon = Close;
+  if(type === 'error') options.icon = Exclamation;
   if(type === 'success') options.icon = Checked;
 
   // set icon background fill color
   if(type === 'success') options.iconBgFillColor = '--icon-success';
-  if(type === 'error') options.iconBgFillColor = '--icon-error';
+  if(type === 'error')   options.iconBgFillColor = '--icon-error';
   if(type === 'warning') options.iconBgFillColor = '--sunny-yellow';
   // console.log('showToast:', type, title, titleColor, duration);
 
   // set style of the data-icon element
   setTimeout(() => {
+    // set the close button color
     let closeButtonElement = document.querySelector('.' + toastMainClass + '-close-button') as HTMLElement; //console.log('closeButtonElement:', closeButtonElement);
+    // if(closeButtonElement) closeButtonElement.style.backgroundColor = 'hsl(var(' + options.closeBgFillColor + '))';
 
+    // set icon background fill color
     let iconElement = document.querySelector('.' + toastMainClass + '> [data-icon] > svg') as HTMLElement; //console.log('iconElement:', iconElement);
     if(iconElement) iconElement.style.color = 'hsl(var(' + options.iconBgFillColor + '))';
+
+    // set the title color
+    let titleElement = document.querySelector('.' + toastMainClass + '-title') as HTMLElement; //console.log('titleElement:', titleElement);
+    if(titleElement) titleElement.style.color = 'hsl(var(' + titleColor + '))';
   }, 20);
   
   // Call toast with custom styling
@@ -78,9 +85,6 @@ export function showToast(type: string = 'success', title: string, options: any
     ...options,
     duration,
     unstyled: true,
-    classes: {
-      title: "text-[hsl(var(" + titleColor + "))]",
-    },
     onAutoClose: () => {
       isToastVisible = false;
     },
@@ -101,25 +105,25 @@ export function showToast(type: string = 'success', title: string, options: any
   toastOptions={{
     style: "box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); !important;",
     classes: {
-      toast: toastMainClass + " widgetic-colors widgetic-radius bg-white! rounded-small! border! border-[hsl(var(--forest-green))]! " +
-                              "min-w-[334px]! max-w-[450px]! " +
+      toast: toastMainClass + " widgetic-colors widgetic-radius !bg-white !rounded-small !border !border-[hsl(var(--forest-green))] " +
+                              "!min-w-[334px] !max-w-[450px] " +
                               // "fixed top-auto bottom-[20px] right-[20px] " + 
-                              "flex! items-center! gap-[24px]! p-[16px]! px-[24px]! " + 
+                              "!flex !items-center !gap-[24px] !p-[16px] !px-[24px] " + 
                               // Icon Styling
-                              "*:data-icon:w-[24px]! *:data-icon:h-[24px]! *:data-icon:m-0! " + 
-                              "[&>[data-icon]>svg]:w-full! [&>[data-icon]>svg]:h-full! " +
+                              "*:data-icon:!w-[24px] *:data-icon:!h-[24px] *:data-icon:!m-0 " + 
+                              "[&>[data-icon]>svg]:!w-full [&>[data-icon]>svg]:!h-full " +
                               // Content Styling
                               "[&>[data-content]>svg]:flex [&>[data-content]>svg]:flex-col [&>[data-content]>svg]:gap-[2px]",
       // Title Styling
       title: toastMainClass + "-title body-medium",
       // Description Styling
-      description: toastMainClass + "-description caption text-[hsl(var(--grey5))]!",
+      description: toastMainClass + "-description caption !text-[hsl(var(--grey5))]",
       // Action Button Styling
       actionButton: "",
       // Cancel Button Styling
       cancelButton: "",
       // Close Button Styling
-      closeButton: toastMainClass + '-close-button w-[16px] h-[16px] absolute -translate-x-1/2 -translate-y-1/2 top-[1px] left-[1px] z-10 bg-[hsl(var(--grey7))]! border border-[hsl(var(--grey5))]! text-white!'
+      closeButton: toastMainClass + '-close-button !w-[16px] !h-[16px] !absolute !top-[0px] !left-[0px] z-10 !bg-[hsl(var(--grey7))] !border !border-[hsl(var(--grey5))] !text-white'
     }
   }}
   expand={false}

package/dist/components/ui/accordion/index.d.ts

@@ -2,5 +2,5 @@ import { Accordion as AccordionPrimitive } from "bits-ui";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
+declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
 export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };

package/dist/components/ui/calendar/calendar.svelte.d.ts

@@ -1,5 +1,5 @@
 import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 import * as Calendar from "./index.js";
-declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "ref" | "value" | "placeholder">;
+declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "value" | "placeholder" | "ref">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/components/ui/collapsible/index.d.ts

@@ -1,5 +1,5 @@
 import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-declare const Root: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
+declare const Root: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "open" | "ref">;
 declare const Trigger: import("svelte").Component<CollapsiblePrimitive.TriggerProps, {}, "ref">;
 declare const Content: import("svelte").Component<Omit<{
     forceMount?: boolean;

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -4,6 +4,6 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & With
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;
 };
-declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "open" | "value" | "ref">;
 type CommandDialog = ReturnType<typeof CommandDialog>;
 export default CommandDialog;

package/dist/components/ui/command/command-input.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Command as CommandPrimitive } from "bits-ui";
-declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "ref" | "value">;
+declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "value" | "ref">;
 type CommandInput = ReturnType<typeof CommandInput>;
 export default CommandInput;

package/dist/components/ui/command/command.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Command as CommandPrimitive } from "bits-ui";
-declare const Command: import("svelte").Component<CommandPrimitive.RootProps, {}, "ref" | "value">;
+declare const Command: import("svelte").Component<CommandPrimitive.RootProps, {}, "value" | "ref">;
 type Command = ReturnType<typeof Command>;
 export default Command;

package/dist/components/ui/dropdown-menu/index.d.ts

@@ -21,5 +21,5 @@ declare const Root: import("svelte").Component<{
 }, {}, "open">;
 declare const Trigger: import("svelte").Component<DropdownMenuPrimitive.TriggerProps, {}, "ref">;
 declare const Group: import("svelte").Component<DropdownMenuPrimitive.GroupProps, {}, "ref">;
-declare const RadioGroup: import("svelte").Component<DropdownMenuPrimitive.RadioGroupProps, {}, "ref" | "value">;
+declare const RadioGroup: import("svelte").Component<DropdownMenuPrimitive.RadioGroupProps, {}, "value" | "ref">;
 export { CheckboxItem, Content, Root, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Root as DropdownMenu, Group as DropdownMenuGroup, GroupHeading as DropdownMenuGroupHeading, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger };

package/dist/components/ui/input/input.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 import type { WithElementRef } from "bits-ui";
-declare const Input: import("svelte").Component<WithElementRef<HTMLInputAttributes>, {}, "ref" | "value">;
+declare const Input: import("svelte").Component<WithElementRef<HTMLInputAttributes>, {}, "value" | "ref">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/ui/input-otp/input-otp.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const InputOtp: import("svelte").Component<import("bits-ui").PinInputRootPropsWithoutHTML & import("bits-ui").Without<import("bits-ui").BitsPrimitiveInputAttributes, import("bits-ui").PinInputRootPropsWithoutHTML>, {}, "ref" | "value">;
+declare const InputOtp: import("svelte").Component<import("bits-ui").PinInputRootPropsWithoutHTML & import("bits-ui").Without<import("bits-ui").BitsPrimitiveInputAttributes, import("bits-ui").PinInputRootPropsWithoutHTML>, {}, "value" | "ref">;
 type InputOtp = ReturnType<typeof InputOtp>;
 export default InputOtp;

package/dist/components/ui/radio-group/radio-group.svelte.d.ts

@@ -1,4 +1,4 @@
 import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "ref" | "value">;
+declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "value" | "ref">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;

package/dist/components/ui/range-calendar/range-calendar.svelte.d.ts

@@ -1,5 +1,5 @@
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 import * as RangeCalendar from "./index.js";
-declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "ref" | "value" | "placeholder">;
+declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "value" | "placeholder" | "ref">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

package/dist/components/ui/select/index.d.ts

@@ -6,6 +6,6 @@ import Trigger from "./select-trigger.svelte";
 import Separator from "./select-separator.svelte";
 import ScrollDownButton from "./select-scroll-down-button.svelte";
 import ScrollUpButton from "./select-scroll-up-button.svelte";
-declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
+declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "open" | "value">;
 declare const Group: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
 export { Root, Group, GroupHeading, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, Root as Select, Group as SelectGroup, GroupHeading as SelectGroupHeading, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton };

package/dist/components/ui/slider/slider.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "ref" | "value">;
+declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "value" | "ref">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/dist/components/ui/tabs/index.d.ts

@@ -2,5 +2,5 @@ import { Tabs as TabsPrimitive } from "bits-ui";
 import Content from "./tabs-content.svelte";
 import List from "./tabs-list.svelte";
 import Trigger from "./tabs-trigger.svelte";
-declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
+declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "value" | "ref">;
 export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

package/dist/components/ui/textarea/textarea.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { WithElementRef } from "bits-ui";
 import type { HTMLTextareaAttributes } from "svelte/elements";
-declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "value" | "ref">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/components/ui/toggle-group/toggle-group-item.svelte.d.ts

@@ -1,6 +1,6 @@
 import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 import { type ToggleVariants } from "../toggle/index.js";
 type $$ComponentProps = ToggleGroupPrimitive.ItemProps & ToggleVariants;
-declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
 type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
 export default ToggleGroupItem;

package/dist/components/ui/toggle-group/toggle-group.svelte.d.ts

@@ -3,6 +3,6 @@ export declare function setToggleGroupCtx(props: ToggleVariants): void;
 export declare function getToggleGroupCtx(): ToggleVariants;
 import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants;
-declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;
 export default ToggleGroup;

package/dist/icons/eye-off.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-eye-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg>

package/dist/icons/eye.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-eye"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.3.70",
+	"version": "0.3.71",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -14,7 +14,7 @@
 		"**/*.ts"
 	],
 	"scripts": {
-		"i": "rm -rf node_modules && npm i && npm link",
+		"i": "rm -rf node_modules && rm -rf package-lock.json && npm i && npm link",
 		"unlink": "rm -rf \"$(npm root -g)/@widgetic/design-system\" 2>/dev/null || true",
 		"clean-modules": "rm -rf node_modules",
 		"llinks": "ls -la node_modules/@widgetic",
@@ -106,11 +106,9 @@
 	"peerDependencies": {
 		"@internationalized/date": "^3.6.0",
 		"@sveltejs/kit": "^2.20.2",
-		"@tabler/icons-svelte": "^3.30.0",
 		"bits-ui": "^1.3.19",
-		"lucide-svelte": "^0.468.0",
+		"shadcn-svelte": "1.0.0-next.9",
 		"svelte": "^5.25.6",
-		"svelte-sonner": "^0.3.28",
 		"tailwindcss": "^4.1.4"
 	},
 	"devDependencies": {
@@ -121,6 +119,31 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/postcss": "^4.1.4",
 		"@tailwindcss/typography": "^0.5.15",
+		"@types/node": "^22.10.1",
+		"bits-ui": "^1.3.19",
+		"concurrently": "^9.1.0",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"lucide-svelte": "^0.468.0",
+		"mode-watcher": "^0.5.0",
+		"postcss": "^8.5.3",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"shadcn-svelte": "1.0.0-next.9",
+		"svelte": "^5.25.6",
+		"svelte-check": "^4.1.0",
+		"svelte-sonner": "^0.3.28",
+		"tailwindcss": "^4.1.4",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^6.0.1"
+	},
+	"dependencies": {
+		"@hirasso/thumbhash-custom-element": "^0.5.5",
+		"@tabler/icons-svelte": "^3.30.0",
 		"@tiptap/core": "^2.9.1",
 		"@tiptap/extension-bubble-menu": "^2.9.1",
 		"@tiptap/extension-code-block-lowlight": "^2.9.1",
@@ -143,42 +166,19 @@
 		"@tiptap/extension-underline": "^2.9.1",
 		"@tiptap/pm": "^2.9.1",
 		"@tiptap/starter-kit": "^2.9.1",
-		"@types/node": "^22.10.1",
-		"bits-ui": "^1.3.19",
 		"clsx": "^2.1.1",
-		"concurrently": "^9.1.0",
-		"eslint": "^9.7.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
-		"globals": "^15.0.0",
 		"lowlight": "^3.2.0",
-		"lucide-svelte": "^0.468.0",
-		"mode-watcher": "^0.5.0",
-		"postcss": "^8.5.3",
-		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.2.6",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^5.25.6",
+		"pdfjs-dist": "^4.10.38",
 		"svelte-awesome-color-picker": "^3.1.4",
-		"svelte-check": "^4.1.0",
 		"svelte-sonner": "^0.3.28",
 		"svelte-tiptap": "^2.0.3",
-		"tailwind-merge": "^2.6.0",
-		"tailwind-variants": "^0.3.1",
+		"tailwind-merge": "^2.5.5",
+		"tailwind-variants": "^0.3.0",
 		"tailwindcss-animate": "^1.0.7",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.0.0",
-		"vaul-svelte": "^1.0.0-next.3",
-		"vite": "^6.0.1"
+		"vaul-svelte": "^1.0.0-next.3"
 	},
 	"volta": {
 		"node": "22.14.0",
 		"npm": "11.1.0"
-	},
-	"dependencies": {
-		"@hirasso/thumbhash-custom-element": "^0.5.5",
-		"@tabler/icons-svelte": "^3.30.0",
-		"pdfjs-dist": "^4.10.38",
-		"shadcn-svelte": "^1.0.0-next.9"
 	}
 }