@widgetic/editor 3.11.3 → 4.0.1

package/dist/components/ic/PositionInputController.svelte.d.ts

@@ -0,0 +1,37 @@
+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;
+}
+declare const PositionInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Core state and configuration props
+       * value: Current position coordinates
+       * onChange: Callback for position updates
+       * config: Additional configuration options
+       * onFocus: Focus event handler
+       * onDragStateChange: Callback for dragging state changes
+       */ value?: {
+        x: number;
+        y: number;
+    } | undefined;
+    onChange: (newValue: {
+        x: number;
+        y: number;
+    }) => void;
+    onFocus?: () => void;
+    maskThumb?: boolean;
+    onDragStateChange?: (isDragging: boolean) => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PositionInputController = InstanceType<typeof PositionInputController>;
+export default PositionInputController;

package/dist/components/ic/RadioGroupInputController.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  /**
+   * RadioGroupInputController Component
+   * A reusable radio group input component that handles selection from a list of options.
+   * Supports custom styling, external state management, and accessibility features.
+   */
+
+  /**
+   * Svelte Lifecycle Imports
+   * Required for component setup and cleanup
+   */
+  import { onMount, onDestroy } from 'svelte';
+  import type { InputControllerConfig } from './index';
+
+  /**
+   * UI Components Imports
+   * Shadcn UI radio group components for consistent styling and behavior
+   */
+  import { Label, RadioGroup } from '@widgetic/design-system/components';
+
+  /**
+   * Component Props
+   * External properties that configure the radio group's behavior and appearance
+   */
+  export let value: string | { value: string; label: string };  // Currently selected value
+  export let onChange: (newValue: string) => void;  // Callback for value changes
+  export let config: InputControllerConfig = {};    // Additional configuration options
+  export let description: string | undefined = undefined;  // Optional help description text
+  export let onFocus: () => void = () => {};  // Focus event handler
+
+  /**
+   * Configuration Options
+   * Derived from config prop with fallbacks
+   */
+  export let options: { value: string; label: string }[] = config.options || [];  // Available options
+
+  /**
+   * Local state
+   */
+  let localValue: string = typeof value === 'object' ? value.value : value;
+
+  /**
+   * Handles value changes from the radio group
+   * @param newValue - The newly selected value
+   */
+  function handleValueChange(newValue: string) {
+    console.log('RadioGroupInputController: handleValueChange', newValue);
+    localValue = newValue;
+    onChange(newValue);
+  }
+
+  /**
+   * Handles click on the entire row
+   * @param optionValue - The value to select
+   */
+  function handleRowClick(optionValue: string) {
+    if (localValue !== optionValue) {
+      handleValueChange(optionValue);
+    }
+  }
+
+  /**
+   * Stops event propagation to prevent double-firing of click events
+   * @param event - The mouse event
+   */
+  function stopPropagation(event: MouseEvent) {
+    event.stopPropagation();
+  }
+
+  /**
+   * Create proper event handlers for shadcn components
+   */
+  function createHandlers() {
+    return {
+      // Use a function that returns a new object with events
+      // Note that these are not Svelte event directives but rather 
+      // props expected by the shadcn components
+      onclick: stopPropagation
+    };
+  }
+
+  /**
+   * Update local value when external value changes
+   */
+  $: {
+    if (value) {
+      localValue = typeof value === 'object' ? value.value : value;
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-2 widgetic-colors">
+  <div 
+    class="px-4 py-2 rounded-large border border-grey2 bg-grey1 transition-colors duration-200 hover:border-forest-green"
+    onfocusin={onFocus}
+  >
+    <RadioGroup.Root 
+      value={localValue} 
+      onValueChange={handleValueChange}
+      class="flex flex-col gap-2 py-2"
+    >
+      {#each options as option}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="flex items-center space-x-2 cursor-pointer" onclick={() => handleRowClick(option.value)}>
+          <RadioGroup.Item 
+            value={option.value} 
+            id={`radio-${option.value}`} 
+            class="radio-item size-4 rounded-full border border-grey7 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            style="width: 20px; height: 20px; border-width: 2px; background-color: white;"
+            onclick={stopPropagation}
+          />
+          <Label 
+            for={`radio-${option.value}`} 
+            class="subtext text-grey7 cursor-pointer select-none w-full"
+            onclick={stopPropagation}
+          >
+            {option.label}
+          </Label>
+        </div>
+      {/each}
+    </RadioGroup.Root>
+  </div>
+
+  {#if description}
+    <p class="subtext text-grey5">{description}</p>
+  {/if}
+</div>
+
+<style>
+  /* Custom radio styling to match design system */
+  :global(.radio-item[data-state="checked"]) {
+    border-color: hsl(var(--sage-green));
+    background-color: white;
+    position: relative;
+  }
+
+  :global(.radio-item[data-state="checked"])::after {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: hsl(var(--sage-green));
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* Remove focus outline from container when radio is focused */
+  :global(.radio-item:focus-visible),
+  :global(.radio-item:focus-within) {
+    outline: none;
+  }
+
+  /* Remove pointer events from labels when disabled */
+  :global(.radio-item[disabled] + label) {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+</style> 

package/dist/components/ic/RadioGroupInputController.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { InputControllerConfig } from './index';
+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;
+}
+declare const RadioGroupInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component Props
+       * External properties that configure the radio group's behavior and appearance
+       */ value: string | {
+        value: string;
+        label: string;
+    };
+    onChange: (newValue: string) => void;
+    config?: InputControllerConfig;
+    description?: string | undefined;
+    onFocus?: () => void;
+    /**
+       * Configuration Options
+       * Derived from config prop with fallbacks
+       */ options?: {
+        value: string;
+        label: string;
+    }[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RadioGroupInputController = InstanceType<typeof RadioGroupInputController>;
+export default RadioGroupInputController;

package/dist/components/ic/RangeCalendarInputController.svelte

@@ -0,0 +1,262 @@
+<!-- 
+ * RangeCalendarInputController
+ * 
+ * A sophisticated date range selector that manages complex date range interactions.
+ * Provides visual calendar interface with support for selecting start and end dates.
+ * 
+ * Key Features:
+ * - Two-month calendar view
+ * - Internationalized date handling
+ * - Consistent date range validation
+ * - Dropdown state management
+ * 
+ * Edge Cases:
+ * - Handles undefined date ranges
+ * - Maintains date range integrity
+ * - Manages scroll-related UI issues
+ * - Preserves timezone consistency
+-->
+
+<script lang="ts">
+  // Svelte imports
+  import { onMount, onDestroy } from 'svelte';
+
+  // Shadcn UI Components
+  import { Button, RangeCalendar } from '@widgetic/design-system/components';
+  // Shadcn Compound Components 
+  import { Popover } from '@widgetic/design-system/components';
+  import { InputControllerHeader } from './index';
+
+  // Shadcn aditional: Internationalized Date
+  import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
+  import type { DateValue } from "@internationalized/date";
+  import type { DateRange as BitsDateRange } from "bits-ui";
+
+  // Use a more flexible local type
+  type DateRange = {
+    start?: DateValue;
+    end?: DateValue;
+  }
+
+  // Component props
+  export let label: string;
+  export let value: BitsDateRange | undefined;
+  export let onChange: (newValue: DateRange) => void;
+  export let helpText: string | undefined = undefined;
+  export let controllerId: string;
+  export let openDropdowns: any;
+  export let toggleDropdown: (id: string) => void;
+  export let onFocus: () => void = () => {};
+
+  let currentValue: DateRange | undefined;
+
+  /**
+   * Synchronizes external value with internal state
+   * Handles date range conversion and validation
+   * Preserves timezone information during conversion
+   */
+  function updateCurrentValue() {
+    if (!value) {
+      currentValue = undefined;
+      return;
+    }
+
+    try {
+      const newRange: DateRange = {};
+      if (value.start && typeof value.start === 'object' && 'year' in value.start) {
+        const start = value.start;
+        newRange.start = start instanceof CalendarDate ? start : new CalendarDate(start.year, start.month, start.day);
+      }
+      if (value.end && typeof value.end === 'object' && 'year' in value.end) {
+        const end = value.end;
+        newRange.end = end instanceof CalendarDate ? end : new CalendarDate(end.year, end.month, end.day);
+      }
+      currentValue = (newRange.start || newRange.end) ? newRange : undefined;
+    } catch (error) {
+      console.error('Error updating range value:', error);
+      currentValue = undefined;
+    }
+  }
+
+  // Watch for value changes and update internal state
+  $: value, updateCurrentValue();
+
+  // Track dropdown state through store subscription
+  $: open = $openDropdowns?.has(controllerId) || false;
+
+  /**
+   * Formats a date range for display
+   * Handles undefined ranges and invalid dates
+   * Provides consistent date formatting across the application
+   * @param range - The date range to format
+   * @returns Formatted date range string
+   */
+  function formatDateRange(range: DateRange | undefined): string {
+    if (!range || !range.start || !range.end) return "Pick a date range";
+    
+    try {
+      const formatDate = (date: DateValue) => {
+        if (!(date instanceof CalendarDate)) {
+          console.warn('Invalid date object:', date);
+          return 'Invalid date';
+        }
+        // Format as DD/MM/YY
+        const day = date.day.toString().padStart(2, '0');
+        const month = date.month.toString().padStart(2, '0');
+        const year = date.year.toString().slice(-2);
+        return `${day}/${month}/${year}`;
+      };
+
+      return `${formatDate(range.start)} - ${formatDate(range.end)}`;
+    } catch (error) {
+      console.error('Error formatting date range:', error);
+      return "Pick a date range";
+    }
+  }
+
+  /**
+   * Handles date range selection from calendar
+   * Ensures both start and end dates are valid
+   * Closes dropdown after successful selection
+   * @param newValue - The newly selected date range
+   */
+  function handleSelect(newValue: BitsDateRange | undefined): void {
+    if (newValue?.start && newValue?.end) {
+      // Create new CalendarDate instances for consistency
+      const range: DateRange = {
+        start: newValue.start,
+        end: newValue.end
+      };
+      onChange(range);
+      // Delay dropdown close for better UX
+      setTimeout(() => toggleDropdown(controllerId), 200);
+    }
+  }
+
+  /**
+   * Toggles calendar dropdown visibility
+   * Manages dropdown state through provided toggle function
+   */
+  function handleToggle() {
+    toggleDropdown(controllerId);
+  }
+
+  /**
+   * Closes dropdown if currently open
+   * Used for cleanup and external close triggers
+   */
+  function closeDropdown() {
+    if (open) {
+      toggleDropdown(controllerId);
+    }
+  }
+
+  /**
+   * Handles scroll events to prevent UI issues
+   * Closes dropdown when scrolling occurs
+   */
+  function handleScroll() {
+    closeDropdown();
+  }
+
+  // Setup scroll event listener on mount
+  onMount(() => {
+    window.addEventListener('scroll', handleScroll, true);
+  });
+
+  // Cleanup scroll event listener on destroy
+  onDestroy(() => {
+    window.removeEventListener('scroll', handleScroll, true);
+  });
+</script>
+
+<!-- Range Calendar Container -->
+<div class="flex flex-col gap-2 widgetic-colors">
+  <div class="flex items-center w-full relative">
+    <div class="flex-1 min-w-0">
+      <InputControllerHeader {label} helpText={helpText} />
+    </div>
+    
+    <div class="absolute right-0">
+      <div 
+        class="h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green"
+        on:focusin={onFocus}
+      >
+        <Popover.Root {open} onOpenChange={handleToggle}>
+          <Popover.Trigger class="w-full h-full">
+            <div class="w-full h-full px-[16px] flex items-center">
+              <Button
+                id="range-calendar"
+                variant="ghost"
+                class="w-full h-full justify-start text-left border-0 bg-transparent hover:bg-transparent focus:bg-transparent p-0"
+              >
+                <span class="subtext text-grey7 {!currentValue ? 'text-grey3' : ''}">{formatDateRange(currentValue)}</span>
+              </Button>
+            </div>
+          </Popover.Trigger>
+          
+          <Popover.Content class="w-auto p-0 z-50" align="start" sideOffset={4}>
+            <RangeCalendar
+              {...currentValue}
+              onValueChange={(v: BitsDateRange) => {
+                handleSelect(v)
+              }}
+              numberOfMonths={2}
+              weekdayFormat="short"
+              fixedWeeks={true}
+              class="p-3"
+            />
+          </Popover.Content>
+        </Popover.Root>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Remove focus ring from trigger */
+  :global(.range-calendar-trigger:focus-visible) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Style the calendar content */
+  :global(.range-calendar-content) {
+    border: 1px solid hsl(var(--grey2)) !important;
+    background: white !important;
+    border-radius: var(--radius) !important;
+    margin-top: 4px !important;
+  }
+
+  /* Remove button styles */
+  :global(button.bg-transparent) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :global(button.bg-transparent:hover),
+  :global(button.bg-transparent:focus) {
+    background-color: transparent !important;
+  }
+
+  /* Style the range calendar */
+  :global(.range-calendar) {
+    border: none !important;
+    background: transparent !important;
+  }
+
+  /* Style the range calendar days */
+  :global(.range-calendar [role="gridcell"]) {
+    color: hsl(var(--grey7)) !important;
+  }
+
+  :global(.range-calendar [role="gridcell"][data-selected]) {
+    background: hsl(var(--grey1)) !important;
+    color: hsl(var(--grey7)) !important;
+  }
+
+  :global(.range-calendar [role="gridcell"][data-highlighted]) {
+    background: hsl(var(--grey1)) !important;
+    color: hsl(var(--grey7)) !important;
+  }
+</style>

package/dist/components/ic/RangeCalendarInputController.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { DateValue } from "@internationalized/date";
+import type { DateRange as BitsDateRange } from "bits-ui";
+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;
+}
+declare const RangeCalendarInputController: $$__sveltets_2_IsomorphicComponent<{
+    label: string;
+    value: BitsDateRange | undefined;
+    onChange: (newValue: {
+        start?: DateValue;
+        end?: DateValue;
+    }) => void;
+    helpText?: string | undefined;
+    controllerId: string;
+    openDropdowns: any;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RangeCalendarInputController = InstanceType<typeof RangeCalendarInputController>;
+export default RangeCalendarInputController;