@noxlovette/material 0.1.0

package/dist/components/forms/slider/Slider.svelte

@@ -0,0 +1,201 @@
+<!--
+@component
+Material 3 Slider.
+
+Sliders allow users to make selections from a range of values.
+
+@see https://m3.material.io/components/sliders/overview
+-->
+<script lang="ts">
+  import { Slider } from 'bits-ui';
+  import clsx from 'clsx';
+  import { Icon } from '../../../utils/index.js';
+  import { slider } from './theme.js';
+  import type { SliderProps } from './types.js';
+
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 'any',
+    disabled = false,
+    showValue = true,
+    size = 'xs',
+    leadingIconProps,
+    trailingIconProps,
+    stops = false,
+    endStops = true,
+    vertical = false,
+    format = (n: number) => {
+      return n.toFixed(0);
+    },
+    class: className,
+    dir,
+    id,
+    ...extra
+  }: SliderProps = $props();
+
+  const {
+    root,
+    leadingIcon,
+    leadingIconPop,
+    trailingIcon,
+    trailingIconPop,
+    trackFill,
+    trackRest,
+    stopBase,
+    stopFill,
+    stopRest,
+    handle: handleCls,
+    value: valueCls
+  } = $derived(slider({ size, vertical }));
+
+  const sliderDir = $derived(dir === null || dir === 'auto' ? undefined : dir);
+  const sliderId = $derived(id === null ? undefined : id);
+
+  let offsetWidth = $state(600);
+  let offsetHeight = $state(600);
+  let inlineSize = $derived(vertical ? offsetHeight : offsetWidth);
+
+  const range = $derived(max - min);
+  const handlePosition = $derived((value - min) / (range || 1));
+  const stopList = $derived.by(() => {
+    const output: number[] = [];
+    const add = (stopValue: number) => {
+      if (leadingIconProps && stopValue == 0) return;
+      if (trailingIconProps && stopValue == 1) return;
+      output.push(stopValue);
+    };
+
+    if (stops && typeof step == 'number' && range > 0) {
+      for (let i = 0; i <= range; i += step) add(i / range);
+    }
+    if (endStops && !output.includes(1)) {
+      add(1);
+    }
+
+    return output;
+  });
+
+  const stepValue = $derived(typeof step === 'number' ? step : undefined);
+</script>
+
+<Slider.Root
+  type="single"
+  bind:value
+  {min}
+  {max}
+  step={stepValue}
+  {disabled}
+  orientation={vertical ? 'vertical' : 'horizontal'}
+  dir={sliderDir}
+  id={sliderId}
+  {...extra}
+>
+  {#snippet child({ props })}
+    <div
+      {...props}
+      class={root({ class: clsx(className) })}
+      style="--handle: {handlePosition - 0.5}; {props.style ?? ''}"
+    >
+      <div
+        class="pointer-events-none absolute inset-0"
+        bind:offsetWidth
+        bind:offsetHeight
+        aria-hidden="true"
+      ></div>
+
+      <div
+        class={trackFill({
+          class: clsx(
+            vertical &&
+              '[clip-path:inset(calc(100%-var(--handle-left))_0_0_0_round_var(--m3-slider-track-in-shape)_var(--m3-slider-track-in-shape)_var(--track-radius)_var(--track-radius))]'
+          )
+        })}
+      >
+        {#each stopList as stop}
+          <div
+            class={clsx(
+              stopBase(),
+              stopFill(),
+              vertical ? '-translate-x-1/2 translate-y-1/2' : '-translate-x-1/2 -translate-y-1/2'
+            )}
+            style:--x={stop - 0.5}
+          ></div>
+        {/each}
+      </div>
+
+      <div
+        class={trackRest({
+          class: clsx(
+            vertical &&
+              '[clip-path:inset(0_0_var(--handle-right)_0_round_var(--track-radius)_var(--track-radius)_var(--m3-slider-track-in-shape)_var(--m3-slider-track-in-shape))]'
+          )
+        })}
+      >
+        {#each stopList as stop}
+          <div
+            class={clsx(
+              stopBase(),
+              stopRest(),
+              vertical ? '-translate-x-1/2 translate-y-1/2' : '-translate-x-1/2 -translate-y-1/2'
+            )}
+            style:--x={stop - 0.5}
+          ></div>
+        {/each}
+      </div>
+
+      {#if leadingIconProps}
+        <Icon
+          class={leadingIcon({
+            class: clsx(
+              leadingIconProps.class,
+              inlineSize * handlePosition < (size == 'xl' ? 48 : 40) && leadingIconPop(),
+              vertical && 'translate-x-[-50%] translate-y-0'
+            )
+          })}
+          {...leadingIconProps}
+        />
+      {/if}
+      {#if trailingIconProps}
+        <Icon
+          class={trailingIcon({
+            class: clsx(
+              trailingIconProps.class,
+              inlineSize * (1 - handlePosition) < (size == 'xl' ? 48 : 40) && trailingIconPop(),
+              vertical && 'translate-x-[-50%] translate-y-0'
+            )
+          })}
+          {...trailingIconProps}
+        />
+      {/if}
+
+      <Slider.Thumb
+        index={0}
+        class={handleCls({
+          class: clsx(vertical ? 'translate-y-1/2' : '-translate-x-1/2')
+        })}
+      />
+
+      {#if showValue}
+        <div
+          class={valueCls({
+            class: clsx(vertical ? 'translate-x-0 translate-y-1/2 rotate-90' : '-translate-x-1/2')
+          })}
+        >
+          {format(value)}
+        </div>
+      {/if}
+    </div>
+  {/snippet}
+</Slider.Root>
+
+<style>
+  @layer tokens {
+    :root {
+      --m3-slider-track-out-shape: 0.5rem;
+      --m3-slider-track-in-shape: 0.125rem;
+      --m3-slider-handle-shape: calc(infinity * 1px);
+    }
+  }
+</style>

package/dist/components/forms/slider/Slider.svelte.d.ts

@@ -0,0 +1,12 @@
+import { Slider } from 'bits-ui';
+import type { SliderProps } from './types.js';
+/**
+ * Material 3 Slider.
+ *
+ * Sliders allow users to make selections from a range of values.
+ *
+ * @see https://m3.material.io/components/sliders/overview
+ */
+declare const Slider: import("svelte").Component<SliderProps, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/forms/slider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Slider } from './Slider.svelte';

package/dist/components/forms/slider/index.js

@@ -0,0 +1,6 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
+export * from './theme.js';
+export * from './types.js';
+// default exports for components in this folder
+export { default as Slider } from './Slider.svelte';

package/dist/components/forms/slider/theme.d.ts

@@ -0,0 +1,78 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const slider: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    vertical: {
+        true: string;
+    };
+}, {
+    root: string;
+    input: string;
+    leadingIcon: string;
+    leadingIconPop: string;
+    trailingIcon: string;
+    trailingIconPop: string;
+    trackFill: string;
+    trackRest: string;
+    stopBase: string;
+    stopFill: string;
+    stopRest: string;
+    handle: string;
+    value: string;
+}, undefined, {
+    size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    vertical: {
+        true: string;
+    };
+}, {
+    root: string;
+    input: string;
+    leadingIcon: string;
+    leadingIconPop: string;
+    trailingIcon: string;
+    trailingIconPop: string;
+    trackFill: string;
+    trackRest: string;
+    stopBase: string;
+    stopFill: string;
+    stopRest: string;
+    handle: string;
+    value: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+    };
+    vertical: {
+        true: string;
+    };
+}, {
+    root: string;
+    input: string;
+    leadingIcon: string;
+    leadingIconPop: string;
+    trailingIcon: string;
+    trailingIconPop: string;
+    trackFill: string;
+    trackRest: string;
+    stopBase: string;
+    stopFill: string;
+    stopRest: string;
+    handle: string;
+    value: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SliderVariants = VariantProps<typeof slider>;

package/dist/components/forms/slider/theme.js

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants';
+export const slider = tv({
+    slots: {
+        root: 'slider-root group relative block min-w-40 [block-size:var(--handle-height)] [print-color-adjust:exact] [--m3-slider-track-out-shape:0.5rem] [--m3-slider-track-in-shape:0.125rem] [--m3-slider-handle-shape:var(--m3-shape-full)] [--functional-width:calc(100%-2*(0.25rem+0.125rem))] [--handle-left:calc(50%+var(--functional-width)*var(--handle)-0.125rem-0.375rem)] [--handle-center:calc(50%+var(--functional-width)*var(--handle))] [--handle-right:calc(50%+var(--functional-width)*var(--handle)+0.125rem+0.375rem)] cursor-pointer data-[disabled]:cursor-not-allowed',
+        input: 'peer absolute left-1/2 [inline-size:calc(var(--functional-width)+1rem)] [block-size:100%] -translate-x-1/2 appearance-none opacity-0 m-0 enabled:cursor-pointer',
+        leadingIcon: 'absolute top-1/2 left-1 h-[var(--icon-size)] w-[var(--icon-size)] -translate-y-1/2 text-[var(--m3c-secondary-container)] pointer-events-none',
+        leadingIconPop: 'left-[var(--handle-right)] text-[var(--m3c-primary)]',
+        trailingIcon: 'absolute top-1/2 right-1 h-[var(--icon-size)] w-[var(--icon-size)] -translate-y-1/2 text-[var(--m3c-primary)] pointer-events-none',
+        trailingIconPop: 'right-[calc(100%-var(--handle-left))] text-[var(--m3c-secondary-container)]',
+        trackFill: 'absolute inset-x-0 [inset-block:calc((var(--handle-height)-var(--track-height))/2)] pointer-events-none bg-[var(--m3c-primary)] [clip-path:inset(0_calc(100%-var(--handle-left))_0_0_round_var(--track-radius)_var(--m3-slider-track-in-shape)_var(--m3-slider-track-in-shape)_var(--track-radius))] group-data-[disabled]:bg-[--translucent(var(--m3c-on-surface),0.38)] [@media(forced-colors:active)]:bg-[selecteditem] group-data-[disabled]:[@media(forced-colors:active)]:bg-[canvastext]',
+        trackRest: 'absolute inset-x-0 [inset-block:calc((var(--handle-height)-var(--track-height))/2)] pointer-events-none bg-[var(--m3c-secondary-container)] [clip-path:inset(0_0_0_var(--handle-right)_round_var(--m3-slider-track-in-shape)_var(--track-radius)_var(--track-radius)_var(--m3-slider-track-in-shape))] group-data-[disabled]:bg-[--translucent(var(--m3c-on-surface),0.12)] [@media(forced-colors:active)]:bg-[canvastext] group-data-[disabled]:[@media(forced-colors:active)]:bg-[graytext]',
+        stopBase: 'absolute top-1/2 h-1 w-1 rounded-full [inset-inline-start:calc(50%+(100%-0.5rem-0.25rem)*var(--x))] pointer-events-none',
+        stopFill: 'bg-[var(--m3c-on-primary)] group-data-[disabled]:bg-[var(--m3c-inverse-on-surface)]',
+        stopRest: 'bg-[var(--m3c-primary)] group-data-[disabled]:bg-[--translucent(var(--m3c-on-surface),0.38)]',
+        handle: 'absolute inset-y-0 left-[var(--handle-center)] w-1 rounded-[1.25rem] bg-[var(--m3c-primary)] pointer-events-none group-focus-within:outline group-focus-within:outline-[4px] group-focus-within:outline-[var(--m3c-on-secondary-container)] group-focus-within:outline-offset-[5px] group-focus-within:z-[2] group-focus-within:w-0.5 group-active:w-0.5 group-data-[disabled]:bg-[--translucent(var(--m3c-on-surface),0.38)] [@media(forced-colors:active)]:bg-[selecteditem] group-data-[disabled]:[@media(forced-colors:active)]:bg-[graytext]',
+        value: 'absolute flex min-w-12 items-center justify-center rounded-[var(--m3-slider-handle-shape)] bg-[var(--m3c-inverse-surface)] px-4 py-3 text-[var(--m3c-inverse-on-surface)] md-sys-typescale-label-large [inset-inline-start:var(--handle-center)] [inset-block-end:calc(var(--handle-height)+4px)] opacity-0 pointer-events-none select-none z-[1] group-hover:opacity-100 group-focus-within:opacity-100 group-active:opacity-100 [@media(forced-colors:active)]:border-2 [@media(forced-colors:active)]:border-[selecteditem] [@media(forced-colors:active)]:overflow-hidden'
+    },
+    variants: {
+        size: {
+            xs: '[--track-height:1rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]',
+            s: '[--track-height:1.5rem] [--handle-height:2.75rem] [--track-radius:var(--m3-shape-small)] [--icon-size:0]',
+            m: '[--track-height:2.5rem] [--handle-height:3.25rem] [--track-radius:var(--m3-shape-medium)] [--icon-size:1.5rem]',
+            l: '[--track-height:3.5rem] [--handle-height:4.25rem] [--track-radius:var(--m3-shape-large)] [--icon-size:1.5rem]',
+            xl: '[--track-height:6rem] [--handle-height:6.75rem] [--track-radius:var(--m3-shape-extra-large)] [--icon-size:2rem]'
+        },
+        vertical: {
+            true: '[writing-mode:sideways-lr]'
+        }
+    },
+    defaultVariants: {
+        size: 'xs'
+    }
+});

package/dist/components/forms/slider/types.d.ts

@@ -0,0 +1,56 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SliderVariants } from './theme.js';
+/**
+ * Props for the Slider component.
+ */
+export type SliderProps = SliderVariants & Omit<HTMLAttributes<HTMLSpanElement>, 'size' | 'value'> & {
+    /**
+     * The current value of the slider.
+     */
+    value: number;
+    /**
+     * The minimum value of the slider.
+     */
+    min?: number;
+    /**
+     * The maximum value of the slider.
+     */
+    max?: number;
+    /**
+     * The step increment for the slider.
+     */
+    step?: number | 'any';
+    /**
+     * Whether the slider is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show the current value indicator.
+     */
+    showValue?: boolean;
+    /**
+     * Props for the leading icon.
+     */
+    leadingIconProps?: IconProps;
+    /**
+     * Props for the trailing icon.
+     */
+    trailingIconProps?: IconProps;
+    /**
+     * Whether to show tick marks (stops) for discrete sliders.
+     */
+    stops?: boolean;
+    /**
+     * Whether to show stops at the ends of the track.
+     */
+    endStops?: boolean;
+    /**
+     * Function to format the value displayed in the indicator.
+     */
+    format?: (value: number) => string;
+    /**
+     * Orientation of the slider.
+     */
+    vertical?: boolean;
+};

package/dist/components/forms/slider/types.js

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

package/dist/components/forms/switch/Switch.svelte

@@ -0,0 +1,74 @@
+<!--
+@component
+Material 3 Switch.
+
+Switches toggle the state of a single setting on or off.
+
+@see https://m3.material.io/components/switch/overview
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { Icon } from '../../../utils/index.js';
+  import { toggle } from './theme.js';
+  import type { SwitchProps } from './types.js';
+  import { Switch } from 'bits-ui';
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    checkedIconProps = { name: 'check' },
+    uncheckedIconProps = { name: 'close' },
+    icons = 'checked',
+    class: className,
+    ...restProps
+  }: SwitchProps = $props();
+
+  let startX: number | undefined = $state();
+  const handleMouseUp = (e: MouseEvent) => {
+    if (!startX) return;
+    const distance = e.clientX - startX;
+    if (distance > 16 && !checked) checked = true;
+    if (distance < -16 && checked) checked = false;
+    startX = undefined;
+  };
+
+  const { root, handle, hover, icon, input, iconChecked, iconUnchecked } = $derived(
+    toggle({ icons })
+  );
+  const rootClass = $derived(String(root({ class: className as any })));
+</script>
+
+<svelte:window onpointerup={handleMouseUp} />
+
+<Switch.Root
+  bind:checked
+  {disabled}
+  {...restProps}
+  class={clsx(rootClass, 'group') as any}
+  onpointerdown={(e) => {
+    if (!disabled) startX = e.clientX;
+  }}
+  ondragstart={(e) => e.preventDefault()}
+>
+  {#snippet child({ props })}
+    <button {...props} type="button" class={clsx(rootClass, 'group')}>
+      <!-- Track (formerly the input) -->
+      <div class={String(input())}></div>
+
+      <!-- Thumb -->
+      <div class={String(handle())}>
+        {#if icons !== 'none'}
+          <!-- checked icon -->
+          <Icon class={clsx(icon(), iconChecked())} {...checkedIconProps} />
+          {#if icons === 'both'}
+            <!-- unchecked icon -->
+            <Icon class={clsx(icon(), iconUnchecked())} {...uncheckedIconProps} />
+          {/if}
+        {/if}
+      </div>
+
+      <!-- State layer -->
+      <div class={String(hover())}></div>
+    </button>
+  {/snippet}
+</Switch.Root>

package/dist/components/forms/switch/Switch.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SwitchProps } from './types.js';
+import { Switch } from 'bits-ui';
+/**
+ * Material 3 Switch.
+ *
+ * Switches toggle the state of a single setting on or off.
+ *
+ * @see https://m3.material.io/components/switch/overview
+ */
+declare const Switch: import("svelte").Component<SwitchProps, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/forms/switch/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Switch } from './Switch.svelte';

package/dist/components/forms/switch/index.js

@@ -0,0 +1,6 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
+export * from './theme.js';
+export * from './types.js';
+// default exports for components in this folder
+export { default as Switch } from './Switch.svelte';

package/dist/components/forms/switch/theme.d.ts

@@ -0,0 +1,51 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const toggle: import("tailwind-variants").TVReturnType<{
+    icons: {
+        checked: {};
+        both: {
+            handle: string;
+        };
+        none: {};
+    };
+}, {
+    root: string;
+    input: string;
+    handle: string;
+    hover: string;
+    icon: string;
+    iconChecked: string;
+    iconUnchecked: string;
+}, undefined, {
+    icons: {
+        checked: {};
+        both: {
+            handle: string;
+        };
+        none: {};
+    };
+}, {
+    root: string;
+    input: string;
+    handle: string;
+    hover: string;
+    icon: string;
+    iconChecked: string;
+    iconUnchecked: string;
+}, import("tailwind-variants").TVReturnType<{
+    icons: {
+        checked: {};
+        both: {
+            handle: string;
+        };
+        none: {};
+    };
+}, {
+    root: string;
+    input: string;
+    handle: string;
+    hover: string;
+    icon: string;
+    iconChecked: string;
+    iconUnchecked: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SwitchVariants = VariantProps<typeof toggle>;

package/dist/components/forms/switch/theme.js

@@ -0,0 +1,71 @@
+import { tv } from 'tailwind-variants';
+// M3 Switch:
+// Track  — 52×32dp, 2dp border
+// Thumb  — 16dp unchecked / 24dp checked (scale 1.5×)
+// Hover  — 40dp state layer ring around thumb
+export const toggle = tv({
+    slots: {
+        root: 'group relative inline-flex h-8 w-[3.25rem] shrink-0 [print-color-adjust:exact]',
+        // The input IS the track — styled as the pill background
+        input: [
+            'absolute inset-0 m-0 h-full w-full appearance-none rounded-full',
+            'border-2 border-md-sys-color-outline bg-md-sys-color-surface-container-highest',
+            'group-data-[state=checked]:border-md-sys-color-primary group-data-[state=checked]:bg-md-sys-color-primary',
+            'group-data-[disabled]:cursor-not-allowed',
+            'group-data-[disabled]:border-md-sys-color-on-surface/12 group-data-[disabled]:bg-md-sys-color-surface-container-highest',
+            'group-data-[state=checked]:group-data-[disabled]:border-transparent group-data-[state=checked]:group-data-[disabled]:bg-md-sys-color-on-surface/12',
+            'transition-colors duration-200'
+        ].join(' '),
+        // Thumb — absolute over track
+        handle: [
+            'pointer-events-none absolute left-2 top-1/2 flex h-4 w-4 -translate-y-1/2',
+            'items-center justify-center rounded-full relative',
+            'bg-md-sys-color-outline',
+            'transition-[left,transform,background-color] duration-200 ease-in-out',
+            // checked: move right + scale up + on-primary color
+            'group-data-[state=checked]:left-[1.75rem] group-data-[state=checked]:scale-[1.5] group-data-[state=checked]:bg-md-sys-color-on-primary',
+            // disabled
+            'group-data-[disabled]:bg-md-sys-color-on-surface/38',
+            'group-data-[state=checked]:group-data-[disabled]:bg-md-sys-color-surface',
+            // hover (unchecked)
+            'group-hover:bg-md-sys-color-on-surface-variant',
+            // hover (checked) — overrides the hover above
+            'group-data-[state=checked]:group-hover:bg-md-sys-color-primary-container',
+            // press
+            'group-active:scale-[1.75] group-data-[state=checked]:group-active:scale-[1.75]'
+        ].join(' '),
+        // State layer ring around thumb
+        hover: [
+            'pointer-events-none absolute left-4 top-1/2 h-12 w-12',
+            '-translate-x-1/2 -translate-y-1/2 rounded-full',
+            'transition-[left,background-color] duration-200',
+            'group-data-[state=checked]:left-9',
+            'group-data-[disabled]:hidden',
+            'group-hover:bg-md-sys-color-on-surface/8',
+            'group-data-[state=checked]:group-hover:bg-md-sys-color-primary/8'
+        ].join(' '),
+        // Icon inside thumb - shared base
+        icon: [
+            'absolute inset-0 m-auto pointer-events-none flex h-4 w-4 items-center justify-center text-[16px]',
+            'opacity-0 transition-opacity duration-150 shrink-0'
+        ].join(' '),
+        // Specific icon states - using group state
+        iconChecked: 'group-data-[state=checked]:opacity-100',
+        iconUnchecked: 'group-data-[state=unchecked]:opacity-100'
+    },
+    variants: {
+        icons: {
+            checked: {
+            // in single checked icon mode, it's already handled by iconChecked
+            },
+            both: {
+                // unchecked thumb also grows to 24dp when 'both' icons mode
+                handle: 'group-data-[state=unchecked]:scale-[1.5]'
+            },
+            none: {}
+        }
+    },
+    defaultVariants: {
+        icons: 'checked'
+    }
+});

package/dist/components/forms/switch/types.d.ts

@@ -0,0 +1,25 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { SwitchRootProps } from 'bits-ui';
+import type { SwitchVariants } from './theme.js';
+/**
+ * Props for the Switch component.
+ */
+export type SwitchProps = SwitchVariants & Omit<SwitchRootProps, 'checked' | 'disabled'> & {
+    /**
+     * Whether the switch is checked.
+     * @bindable
+     */
+    checked?: boolean;
+    /**
+     * Whether the switch is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Props for the icon displayed when the switch is checked.
+     */
+    checkedIconProps?: IconProps;
+    /**
+     * Props for the icon displayed when the switch is unchecked.
+     */
+    uncheckedIconProps?: IconProps;
+};

package/dist/components/forms/switch/types.js

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