@geoffcox/sterling-svelte 2.0.5 → 2.0.6

package/dist/MenuSeparator.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Popover.svelte

@@ -10,24 +10,14 @@
     type Placement
   } from '@floating-ui/dom';
   import { getContext, tick } from 'svelte';
-  import type { HTMLAttributes, KeyboardEventHandler } from 'svelte/elements';
+  import type { KeyboardEventHandler } from 'svelte/elements';
   import { portal } from './actions/portal';
-  import type { PopoverPlacement } from './Popover.types';
   import { STERLING_PORTAL_CONTEXT_ID, STERLING_PORTAL_HOST_ID } from './Portal.constants';
   import type { PortalContext } from './Portal.types';
+  import type { PopoverProps } from './Popover.types';
 
   // ----- Props ----- //
 
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    conditionalRender?: boolean;
-    crossAxisOffset?: number;
-    mainAxisOffset?: number;
-    open?: boolean | null;
-    placement?: PopoverPlacement;
-    portalHost?: HTMLElement;
-    reference?: HTMLElement;
-  };
-
   let {
     children,
     conditionalRender = $bindable(true),
@@ -39,7 +29,7 @@
     reference,
     class: _class,
     ...rest
-  }: Props = $props();
+  }: PopoverProps = $props();
 
   let popupRef: HTMLDivElement | undefined = $state(undefined);
   let popupPosition: Partial<ComputePositionReturn> = $state({ x: 0, y: 0 });

package/dist/Popover.svelte.d.ts

@@ -1,14 +1,4 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { PopoverPlacement } from './Popover.types';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    conditionalRender?: boolean;
-    crossAxisOffset?: number;
-    mainAxisOffset?: number;
-    open?: boolean | null;
-    placement?: PopoverPlacement;
-    portalHost?: HTMLElement;
-    reference?: HTMLElement;
-};
-declare const Popover: import("svelte").Component<Props, {}, "conditionalRender" | "crossAxisOffset" | "mainAxisOffset" | "open" | "placement">;
+import type { PopoverProps } from './Popover.types';
+declare const Popover: import("svelte").Component<PopoverProps, {}, "conditionalRender" | "crossAxisOffset" | "mainAxisOffset" | "open" | "placement">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/Popover.types.d.ts

@@ -1,4 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type { POPOVER_PLACEMENTS } from './Popover.constants';
 type PopoverPlacementTuple = typeof POPOVER_PLACEMENTS;
 export type PopoverPlacement = PopoverPlacementTuple[number];
+export type PopoverProps = HTMLAttributes<HTMLDivElement> & {
+    conditionalRender?: boolean;
+    crossAxisOffset?: number;
+    mainAxisOffset?: number;
+    open?: boolean | null;
+    placement?: PopoverPlacement;
+    portalHost?: HTMLElement;
+    reference?: HTMLElement;
+};
 export {};

package/dist/Progress.svelte

@@ -1,15 +1,7 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    max?: number;
-    percent?: number;
-    value?: number;
-    vertical?: boolean | null;
-  };
+  import type { ProgressProps } from './Progress.types';
 
   let {
     class: _class,
@@ -19,7 +11,7 @@
     value = $bindable(0),
     vertical,
     ...rest
-  }: Props = $props();
+  }: ProgressProps = $props();
 
   //----- State ----- //
 

package/dist/Progress.svelte.d.ts

@@ -1,11 +1,4 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    max?: number;
-    percent?: number;
-    value?: number;
-    vertical?: boolean | null;
-};
-declare const Progress: import("svelte").Component<Props, {}, "value" | "percent">;
+import type { ProgressProps } from './Progress.types';
+declare const Progress: import("svelte").Component<ProgressProps, {}, "value" | "percent">;
 type Progress = ReturnType<typeof Progress>;
 export default Progress;

package/dist/Progress.types.d.ts

@@ -1,4 +1,12 @@
 import type { PROGRESS_ORIENTATIONS } from './Progress.constants';
 type ProgressOrientationTuple = typeof PROGRESS_ORIENTATIONS;
 export type ProgressOrientation = ProgressOrientationTuple[number];
+import type { HTMLAttributes } from 'svelte/elements';
+export type ProgressProps = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    max?: number;
+    percent?: number;
+    value?: number;
+    vertical?: boolean | null;
+};
 export {};

package/dist/Radio.svelte

@@ -1,15 +1,11 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { HTMLInputAttributes } from 'svelte/elements';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
+  import type { RadioProps } from './Radio.types';
 
   const uuid = $props.id();
 
-  type Props = HTMLInputAttributes & {
-    group?: any | null;
-  };
-
   let {
     id,
     children,
@@ -18,7 +14,7 @@
     disabled = false,
     group = $bindable(),
     ...rest
-  }: Props = $props();
+  }: RadioProps = $props();
 
   let inputRef: HTMLInputElement;
 

package/dist/Radio.svelte.d.ts

@@ -1,9 +1,6 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-type Props = HTMLInputAttributes & {
-    group?: any | null;
-};
+import type { RadioProps } from './Radio.types';
 /** A styled HTML input type=radio element with optional label. */
-declare const Radio: import("svelte").Component<Props, {
+declare const Radio: import("svelte").Component<RadioProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Radio.types.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type RadioProps = HTMLInputAttributes & {
+    group?: any | null;
+};

package/dist/Radio.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Select.svelte

@@ -1,34 +1,15 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import { tick, type Snippet } from 'svelte';
-  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import { tick } from 'svelte';
+  import type { KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
   import { clickOutside } from './actions/clickOutside';
   import List from './List.svelte';
   import Popover from './Popover.svelte';
+  import type { SelectProps } from './Select.types';
 
   const uuid = $props.id();
 
-  type DeprecatedProps = {
-    /** @deprecated Use icon instead */
-    buttonSnippet?: Snippet;
-
-    /** @deprecated Use value instead */
-    valueSnippet?: Snippet<[string | undefined]>;
-  };
-
-  type Props = HTMLAttributes<HTMLDivElement> &
-    DeprecatedProps & {
-      disabled?: boolean | null;
-      icon?: Snippet;
-      listClass?: string;
-      onPending?: (value?: string) => void;
-      onSelect?: (value?: string) => void;
-      open?: boolean | null;
-      selectedValue?: string;
-      value?: string | Snippet<[string | undefined]>;
-    };
-
   let {
     children,
     class: _class,
@@ -43,7 +24,7 @@
     buttonSnippet,
     valueSnippet,
     ...rest
-  }: Props = $props();
+  }: SelectProps = $props();
 
   // backwards compatibility
   icon = icon || buttonSnippet;

package/dist/Select.svelte.d.ts

@@ -1,22 +1,5 @@
-import { type Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-type DeprecatedProps = {
-    /** @deprecated Use icon instead */
-    buttonSnippet?: Snippet;
-    /** @deprecated Use value instead */
-    valueSnippet?: Snippet<[string | undefined]>;
-};
-type Props = HTMLAttributes<HTMLDivElement> & DeprecatedProps & {
-    disabled?: boolean | null;
-    icon?: Snippet;
-    listClass?: string;
-    onPending?: (value?: string) => void;
-    onSelect?: (value?: string) => void;
-    open?: boolean | null;
-    selectedValue?: string;
-    value?: string | Snippet<[string | undefined]>;
-};
-declare const Select: import("svelte").Component<Props, {
+import type { SelectProps } from './Select.types';
+declare const Select: import("svelte").Component<SelectProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Select.types.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type DeprecatedProps = {
+    /** @deprecated Use icon instead */
+    buttonSnippet?: Snippet;
+    /** @deprecated Use value instead */
+    valueSnippet?: Snippet<[string | undefined]>;
+};
+export type SelectProps = HTMLAttributes<HTMLDivElement> & DeprecatedProps & {
+    disabled?: boolean | null;
+    icon?: Snippet;
+    listClass?: string;
+    onPending?: (value?: string) => void;
+    onSelect?: (value?: string) => void;
+    open?: boolean | null;
+    selectedValue?: string;
+    value?: string | Snippet<[string | undefined]>;
+};
+export {};

package/dist/Select.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Slider.svelte

@@ -2,18 +2,8 @@
 
 <script lang="ts">
   import { round } from 'lodash-es';
-  import type { HTMLAttributes, KeyboardEventHandler, PointerEventHandler } from 'svelte/elements';
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    min?: number;
-    max?: number;
-    precision?: number;
-    step?: number;
-    value?: number;
-    vertical?: boolean | null;
-    onChange?: (value: number) => void;
-  };
+  import type { KeyboardEventHandler, PointerEventHandler } from 'svelte/elements';
+  import type { SliderProps } from './Slider.types';
 
   let {
     class: _class,
@@ -26,7 +16,7 @@
     value = $bindable(0),
     vertical,
     ...rest
-  }: Props = $props();
+  }: SliderProps = $props();
 
   let sliderRef: HTMLDivElement;
 

package/dist/Slider.svelte.d.ts

@@ -1,15 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    min?: number;
-    max?: number;
-    precision?: number;
-    step?: number;
-    value?: number;
-    vertical?: boolean | null;
-    onChange?: (value: number) => void;
-};
-declare const Slider: import("svelte").Component<Props, {
+import type { SliderProps } from './Slider.types';
+declare const Slider: import("svelte").Component<SliderProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Slider.types.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type SliderProps = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    min?: number;
+    max?: number;
+    precision?: number;
+    step?: number;
+    value?: number;
+    vertical?: boolean | null;
+    onChange?: (value: number) => void;
+};

package/dist/Slider.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Switch.svelte

@@ -1,22 +1,11 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  import type { HTMLInputAttributes } from 'svelte/elements';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
+  import type { SwitchProps } from './Switch.types';
 
   const uuid = $props.id();
 
-  type LabelSnippet = Snippet<
-    [{ checked: boolean | null | undefined; disabled: boolean | null | undefined; inputId: string }]
-  >;
-
-  type Props = HTMLInputAttributes & {
-    offLabel?: string | LabelSnippet;
-    onLabel?: string | LabelSnippet;
-    vertical?: boolean | null | undefined;
-  };
-
   let {
     checked = $bindable(false),
     class: _class,
@@ -26,7 +15,7 @@
     onLabel,
     vertical,
     ...rest
-  }: Props = $props();
+  }: SwitchProps = $props();
 
   const inputId = id || `Switch-${uuid}`;
 

package/dist/Switch.svelte.d.ts

@@ -1,18 +1,5 @@
-import type { Snippet } from 'svelte';
-import type { HTMLInputAttributes } from 'svelte/elements';
-type LabelSnippet = Snippet<[
-    {
-        checked: boolean | null | undefined;
-        disabled: boolean | null | undefined;
-        inputId: string;
-    }
-]>;
-type Props = HTMLInputAttributes & {
-    offLabel?: string | LabelSnippet;
-    onLabel?: string | LabelSnippet;
-    vertical?: boolean | null | undefined;
-};
-declare const Switch: import("svelte").Component<Props, {
+import type { SwitchProps } from './Switch.types';
+declare const Switch: import("svelte").Component<SwitchProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Switch.types.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type SwitchLabelSnippet = Snippet<[
+    {
+        checked: boolean | null | undefined;
+        disabled: boolean | null | undefined;
+        inputId: string;
+    }
+]>;
+export type SwitchProps = HTMLInputAttributes & {
+    offLabel?: string | SwitchLabelSnippet;
+    onLabel?: string | SwitchLabelSnippet;
+    vertical?: boolean | null | undefined;
+};

package/dist/Switch.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Tab.svelte

@@ -2,16 +2,12 @@
 
 <script lang="ts">
   import { getContext } from 'svelte';
-  import type { HTMLButtonAttributes } from 'svelte/elements';
   import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
   import type { TabListContext } from './TabList.types';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
+  import type { TabProps } from './Tab.types';
 
-  type Props = HTMLButtonAttributes & {
-    value: string;
-  };
-
-  let { children, class: _class, disabled = false, value, ...rest }: Props = $props();
+  let { children, class: _class, disabled = false, value, ...rest }: TabProps = $props();
 
   let tabRef: HTMLButtonElement;
 

package/dist/Tab.svelte.d.ts

@@ -1,8 +1,5 @@
-import type { HTMLButtonAttributes } from 'svelte/elements';
-type Props = HTMLButtonAttributes & {
-    value: string;
-};
-declare const Tab: import("svelte").Component<Props, {
+import type { TabProps } from './Tab.types';
+declare const Tab: import("svelte").Component<TabProps, {
     click: () => void;
     blur: () => void;
     focus: (options?: FocusOptions) => void;

package/dist/Tab.types.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export type TabProps = HTMLButtonAttributes & {
+    value: string;
+};

package/dist/Tab.types.js

@@ -0,0 +1 @@
+export {};

package/dist/TabList.svelte

@@ -2,16 +2,9 @@
 
 <script lang="ts">
   import { setContext } from 'svelte';
-  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import type { KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
   import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
-  import type { TabListContext } from './TabList.types';
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    selectedValue?: string;
-    vertical?: boolean | null;
-    onSelect?: (value?: string) => void;
-  };
+  import type { TabListContext, TabListProps } from './TabList.types';
 
   let {
     children,
@@ -21,7 +14,7 @@
     selectedValue = $bindable(),
     vertical = false,
     ...rest
-  }: Props = $props();
+  }: TabListProps = $props();
 
   let tabListRef: HTMLDivElement;
   let lastSelectedTabRef: HTMLElement;

package/dist/TabList.svelte.d.ts

@@ -1,11 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    selectedValue?: string;
-    vertical?: boolean | null;
-    onSelect?: (value?: string) => void;
-};
-declare const TabList: import("svelte").Component<Props, {
+import type { TabListProps } from './TabList.types';
+declare const TabList: import("svelte").Component<TabListProps, {
     blur: () => void;
     focus: (options?: FocusOptions) => void;
     selectFirstTab: () => boolean;

package/dist/TabList.types.d.ts

@@ -1,5 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
 export type TabListContext = {
     disabled?: boolean | null | undefined;
     selectedValue?: string | undefined;
     vertical?: boolean | null | undefined;
 };
+export type TabListProps = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    selectedValue?: string;
+    vertical?: boolean | null;
+    onSelect?: (value?: string) => void;
+};

package/dist/TextArea.svelte

@@ -2,15 +2,8 @@
 
 <script lang="ts">
   import { tick } from 'svelte';
-  import type { FormEventHandler, HTMLTextareaAttributes } from 'svelte/elements';
-  import type { TextAreaResize } from './TextArea.types';
-
-  type Props = HTMLTextareaAttributes & {
-    autoHeight?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    value?: string;
-    resize?: TextAreaResize;
-  };
+  import type { FormEventHandler } from 'svelte/elements';
+  import type { TextAreaProps } from './TextArea.types';
 
   let {
     class: _class,
@@ -20,7 +13,7 @@
     resize = $bindable('none'),
     style,
     ...rest
-  }: Props = $props();
+  }: TextAreaProps = $props();
 
   let textAreaRef: HTMLTextAreaElement;
 

package/dist/TextArea.svelte.d.ts

@@ -1,18 +1,11 @@
-import type { HTMLTextareaAttributes } from 'svelte/elements';
-import type { TextAreaResize } from './TextArea.types';
-type Props = HTMLTextareaAttributes & {
-    autoHeight?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    value?: string;
-    resize?: TextAreaResize;
-};
-declare const TextArea: import("svelte").Component<Props, {
+import type { TextAreaProps } from './TextArea.types';
+declare const TextArea: import("svelte").Component<TextAreaProps, {
     blur: () => void;
     click: () => void;
     focus: (options?: FocusOptions) => void;
     select: () => void;
     setSelectionRange: (start: number | null, end: number | null, direction?: "forward" | "backward" | "none") => void;
     setRangeText: (replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void;
-}, "value" | "resize">;
+}, "resize" | "value">;
 type TextArea = ReturnType<typeof TextArea>;
 export default TextArea;

package/dist/TextArea.types.d.ts

@@ -1,4 +1,11 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { TEXT_AREA_RESIZES } from './TextArea.constants';
 type TextAreaResizeTuple = typeof TEXT_AREA_RESIZES;
 export type TextAreaResize = TextAreaResizeTuple[number];
+export type TextAreaProps = HTMLTextareaAttributes & {
+    autoHeight?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    value?: string;
+    resize?: TextAreaResize;
+};
 export {};

package/dist/Tooltip.svelte

@@ -1,15 +1,9 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import { onMount, type Snippet } from 'svelte';
+  import { onMount } from 'svelte';
   import Callout from './Callout.svelte';
-  import type { CalloutProps } from './Callout.types';
-
-  type Props = Omit<CalloutProps, 'reference'> & {
-    disabled?: boolean;
-    hoverDelayMilliseconds?: number;
-    tip?: string | Snippet;
-  };
+  import type { TooltipProps } from './Tooltip.types';
 
   let {
     children,
@@ -19,7 +13,7 @@
     open = $bindable(false),
     tip,
     ...rest
-  }: Props = $props();
+  }: TooltipProps = $props();
 
   let originRef: HTMLDivElement | undefined = $state();
 

package/dist/Tooltip.svelte.d.ts

@@ -1,10 +1,4 @@
-import { type Snippet } from 'svelte';
-import type { CalloutProps } from './Callout.types';
-type Props = Omit<CalloutProps, 'reference'> & {
-    disabled?: boolean;
-    hoverDelayMilliseconds?: number;
-    tip?: string | Snippet;
-};
-declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+import type { TooltipProps } from './Tooltip.types';
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "open">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/Tooltip.types.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { CalloutProps } from './Callout.types';
+export type TooltipProps = Omit<CalloutProps, 'reference'> & {
+    disabled?: boolean;
+    hoverDelayMilliseconds?: number;
+    tip?: string | Snippet;
+};

package/dist/Tooltip.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Tree.svelte

@@ -2,18 +2,9 @@
 
 <script lang="ts">
   import { setContext } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
   import { usingKeyboard } from './mediaQueries/usingKeyboard';
   import { TREE_CONTEXT_KEY } from './Tree.constants';
-  import type { TreeContext } from './Tree.types';
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    expandedValues?: string[];
-    selectedValue?: string;
-    onExpandCollapse?: (expandedValues: string[]) => void;
-    onSelect?: (selectedValue: string | undefined) => void;
-  };
+  import type { TreeContext, TreeProps } from './Tree.types';
 
   let {
     children,
@@ -24,7 +15,7 @@
     onSelect,
     selectedValue = $bindable(undefined),
     ...rest
-  }: Props = $props();
+  }: TreeProps = $props();
 
   let treeRef: HTMLDivElement;