@nasa-jpl/stellar-svelte 2.0.0-alpha.34 → 2.0.0-alpha.38

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

@@ -15,7 +15,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         xs: string;
         sm: string;
         lg: string;
+        xl: string;
         icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+        'icon-xl': string;
     };
 }, undefined, "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import("tailwind-variants/dist/config").TVConfig<{
     variant: {
@@ -31,7 +36,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         xs: string;
         sm: string;
         lg: string;
+        xl: string;
         icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+        'icon-xl': string;
     };
 }, {
     variant: {
@@ -47,7 +57,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         xs: string;
         sm: string;
         lg: string;
+        xl: string;
         icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+        'icon-xl': string;
     };
 }>, {
     variant: {
@@ -63,7 +78,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         xs: string;
         sm: string;
         lg: string;
+        xl: string;
         icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+        'icon-xl': string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -79,7 +99,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         xs: string;
         sm: string;
         lg: string;
+        xl: string;
         icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+        'icon-xl': string;
     };
 }, undefined, "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import("tailwind-variants/dist/config").TVConfig<{
     variant: {
@@ -95,7 +120,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         xs: string;
         sm: string;
         lg: string;
+        xl: string;
         icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+        'icon-xl': string;
     };
 }, {
     variant: {
@@ -111,7 +141,12 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         xs: string;
         sm: string;
         lg: string;
+        xl: string;
         icon: string;
+        'icon-xs': string;
+        'icon-sm': string;
+        'icon-lg': string;
+        'icon-xl': string;
     };
 }>, unknown, unknown, undefined>>;
 type Variant = VariantProps<typeof buttonVariants>['variant'];

package/dist/components/ui/button/index.js

@@ -12,11 +12,16 @@ const buttonVariants = tv({
             link: 'text-primary underline-offset-4 hover:underline',
         },
         size: {
-            default: 'h-6 px-2 py-2',
-            xs: 'h-4 px-1 py-0.5 rounded-sm',
-            sm: 'h-4 rounded-md px-1 py-2',
-            lg: 'h-8 rounded-lg px-4',
-            icon: 'h-10 w-10',
+            default: 'h-6 px-2 py-2 text-xs',
+            xs: 'h-4 px-1 py-0.5 rounded-sm text-xs',
+            sm: 'h-5 px-1.5 py-1 rounded-md text-xs',
+            lg: 'h-8 rounded-md px-4',
+            xl: 'h-10 rounded-md px-4',
+            icon: 'h-6 w-6',
+            'icon-xs': 'h-4 w-4',
+            'icon-sm': 'h-5 w-5',
+            'icon-lg': 'h-8 w-8',
+            'icon-xl': 'h-10 w-10',
         },
     },
     defaultVariants: {

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

@@ -1,4 +1,4 @@
-import Root from "./input.svelte";
+import Root from './input.svelte';
 export type FormInputEvent<T extends Event = Event> = T & {
     currentTarget: EventTarget & HTMLInputElement;
 };
@@ -20,4 +20,11 @@ export type InputEvents = {
     input: FormInputEvent<InputEvent>;
     wheel: FormInputEvent<WheelEvent>;
 };
-export { Root, Root as Input, };
+export type InputSize = 'default' | 'sm';
+declare const inputVariants: {
+    size: {
+        default: string;
+        sm: string;
+    };
+};
+export { Root as Input, inputVariants, Root, };

package/dist/components/ui/input/index.js

@@ -1,4 +1,10 @@
-import Root from "./input.svelte";
-export { Root, 
+import Root from './input.svelte';
+const inputVariants = {
+    size: {
+        default: 'h-10 px-3 py-2',
+        sm: 'h-8 px-2 text-xs',
+    },
+};
+export { 
 //
-Root as Input, };
+Root as Input, inputVariants, Root, };

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

@@ -1,6 +1,8 @@
 <script>import { cn } from "../../../utils.js";
+import { inputVariants } from "./index.js";
 let className = void 0;
 export let value = void 0;
+export let size = "default";
 export { className as class };
 export let readonly = void 0;
 export let el = void 0;
@@ -8,7 +10,8 @@ export let el = void 0;
 
 <input
   class={cn(
-    'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    inputVariants.size[size],
     className,
   )}
   bind:value

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

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { InputEvents } from './index.js';
+import type { InputEvents, InputSize } from './index.js';
 declare const __propDef: {
     props: HTMLInputAttributes & {
-        el?: HTMLSpanElement;
+        el?: HTMLInputElement;
+        size?: InputSize;
     };
     slots: {};
     events: InputEvents;

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

@@ -1,11 +1,37 @@
-import { Select as SelectPrimitive } from "bits-ui";
-import Label from "./select-label.svelte";
-import Item from "./select-item.svelte";
-import Content from "./select-content.svelte";
-import Trigger from "./select-trigger.svelte";
-import Separator from "./select-separator.svelte";
+import { Select as SelectPrimitive } from 'bits-ui';
+import Content from './select-content.svelte';
+import Item from './select-item.svelte';
+import Label from './select-label.svelte';
+import Separator from './select-separator.svelte';
+import Trigger from './select-trigger.svelte';
 declare const Root: typeof SelectPrimitive.Root;
 declare const Group: typeof SelectPrimitive.Group;
 declare const Input: typeof SelectPrimitive.Input;
 declare const Value: typeof SelectPrimitive.Value;
-export { Root, Group, Input, Label, Item, Value, Content, Trigger, Separator, Root as Select, Group as SelectGroup, Input as SelectInput, Label as SelectLabel, Item as SelectItem, Value as SelectValue, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, };
+export type SelectSize = 'default' | 'sm' | 'xs';
+declare const selectVariants: {
+    size: {
+        default: {
+            trigger: string;
+            content: string;
+            item: string;
+            label: string;
+            icon: string;
+        };
+        sm: {
+            trigger: string;
+            content: string;
+            item: string;
+            label: string;
+            icon: string;
+        };
+        xs: {
+            trigger: string;
+            content: string;
+            item: string;
+            label: string;
+            icon: string;
+        };
+    };
+};
+export { Content, Group, Input, Item, Label, Root, Root as Select, Content as SelectContent, Group as SelectGroup, Input as SelectInput, Item as SelectItem, Label as SelectLabel, Separator as SelectSeparator, Trigger as SelectTrigger, Value as SelectValue, selectVariants, Separator, Trigger, Value, };

package/dist/components/ui/select/index.js

@@ -1,13 +1,38 @@
-import { Select as SelectPrimitive } from "bits-ui";
-import Label from "./select-label.svelte";
-import Item from "./select-item.svelte";
-import Content from "./select-content.svelte";
-import Trigger from "./select-trigger.svelte";
-import Separator from "./select-separator.svelte";
+import { Select as SelectPrimitive } from 'bits-ui';
+import Content from './select-content.svelte';
+import Item from './select-item.svelte';
+import Label from './select-label.svelte';
+import Separator from './select-separator.svelte';
+import Trigger from './select-trigger.svelte';
 const Root = SelectPrimitive.Root;
 const Group = SelectPrimitive.Group;
 const Input = SelectPrimitive.Input;
 const Value = SelectPrimitive.Value;
-export { Root, Group, Input, Label, Item, Value, Content, Trigger, Separator, 
+const selectVariants = {
+    size: {
+        default: {
+            trigger: 'h-10 px-3 py-2',
+            content: 'p-1',
+            item: 'py-1.5 pl-8 pr-2 text-sm',
+            label: 'py-1.5 pl-8 pr-2 text-sm',
+            icon: 'left-2 h-3.5 w-3.5',
+        },
+        sm: {
+            trigger: 'h-8 px-2 py-1.5 text-sm',
+            content: 'p-0.5',
+            item: 'py-1 pl-6 pr-1.5 text-sm',
+            label: 'py-1 pl-6 pr-1.5 text-sm',
+            icon: 'left-1.5 h-3 w-3',
+        },
+        xs: {
+            trigger: 'h-6 px-2 py-1 text-xs',
+            content: 'p-0.5',
+            item: 'py-1 pl-5 pr-1 text-xs',
+            label: 'py-1 pl-5 pr-1 text-xs',
+            icon: 'left-1 h-2.5 w-2.5',
+        },
+    },
+};
+export { Content, Group, Input, Item, Label, Root, 
 //
-Root as Select, Group as SelectGroup, Input as SelectInput, Label as SelectLabel, Item as SelectItem, Value as SelectValue, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, };
+Root as Select, Content as SelectContent, Group as SelectGroup, Input as SelectInput, Item as SelectItem, Label as SelectLabel, Separator as SelectSeparator, Trigger as SelectTrigger, Value as SelectValue, selectVariants, Separator, Trigger, Value, };

package/dist/components/ui/select/select-content.svelte

@@ -1,6 +1,7 @@
-<script>import { Select as SelectPrimitive } from "bits-ui";
+<script>import { cn, flyAndScale } from "../../../utils.js";
+import { Select as SelectPrimitive } from "bits-ui";
 import { scale } from "svelte/transition";
-import { cn, flyAndScale } from "../../../utils.js";
+import { selectVariants } from "./index.js";
 export let sideOffset = 4;
 export let inTransition = flyAndScale;
 export let inTransitionConfig = void 0;
@@ -11,23 +12,25 @@ export let outTransitionConfig = {
   duration: 50
 };
 let className = void 0;
+export let size = "default";
 export { className as class };
 </script>
 
 <SelectPrimitive.Content
-	{inTransition}
-	{inTransitionConfig}
-	{outTransition}
-	{outTransitionConfig}
-	{sideOffset}
-	class={cn(
-		"bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md outline-none",
-		className
-	)}
-	{...$$restProps}
-	on:keydown
+  {inTransition}
+  {inTransitionConfig}
+  {outTransition}
+  {outTransitionConfig}
+  {sideOffset}
+  class={cn(
+    'bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md outline-none',
+    selectVariants.size[size].content,
+    className,
+  )}
+  {...$$restProps}
+  on:keydown
 >
-	<div class="w-full p-1">
-		<slot />
-	</div>
+  <div class="w-full p-1">
+    <slot />
+  </div>
 </SelectPrimitive.Content>

package/dist/components/ui/select/select-content.svelte.d.ts

@@ -1,7 +1,30 @@
 import { SvelteComponent } from "svelte";
-import { Select as SelectPrimitive } from "bits-ui";
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { SelectSize } from './index.js';
 declare const __propDef: {
-    props: SelectPrimitive.ContentProps;
+    props: {
+        side?: "top" | "right" | "bottom" | "left" | undefined | undefined;
+        align?: "start" | "center" | "end" | undefined | undefined;
+        alignOffset?: number | undefined | undefined;
+        sideOffset?: number | undefined | undefined;
+        sameWidth?: boolean | undefined | undefined;
+        avoidCollisions?: boolean | undefined | undefined;
+        collisionPadding?: number | undefined | undefined;
+        collisionBoundary?: import("bits-ui/dist/bits/floating/_types.js").Boundary | undefined;
+        fitViewport?: boolean | undefined | undefined;
+        strategy?: "absolute" | "fixed" | undefined | undefined;
+        overlap?: boolean | undefined | undefined;
+        transition?: import("bits-ui/dist/internal/types.js").Transition | undefined;
+        transitionConfig?: any;
+        inTransition?: import("bits-ui/dist/internal/types.js").Transition | undefined;
+        inTransitionConfig?: any;
+        outTransition?: import("bits-ui/dist/internal/types.js").Transition | undefined;
+        outTransitionConfig?: any;
+        asChild?: boolean | undefined | undefined;
+        el?: HTMLDivElement | undefined;
+    } & import("bits-ui/dist/internal/types.js").HTMLDivAttributes & {
+        size?: SelectSize;
+    };
     slots: {
         default: {};
     };

package/dist/components/ui/select/select-item.svelte

@@ -1,7 +1,9 @@
-<script>import Check from "lucide-svelte/icons/check";
+<script>import { cn } from "../../../utils.js";
 import { Select as SelectPrimitive } from "bits-ui";
-import { cn } from "../../../utils.js";
+import Check from "lucide-svelte/icons/check";
+import { selectVariants } from "./index.js";
 let className = void 0;
+export let size = "default";
 export let value;
 export let label = void 0;
 export let disabled = void 0;
@@ -9,27 +11,28 @@ export { className as class };
 </script>
 
 <SelectPrimitive.Item
-	{value}
-	{disabled}
-	{label}
-	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerleave
-	on:pointermove
+  {value}
+  {disabled}
+  {label}
+  class={cn(
+    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    selectVariants.size[size].item,
+    className,
+  )}
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:focusin
+  on:focusout
+  on:pointerleave
+  on:pointermove
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<SelectPrimitive.ItemIndicator>
-			<Check class="h-4 w-4" />
-		</SelectPrimitive.ItemIndicator>
-	</span>
-	<slot>
-		{label || value}
-	</slot>
+  <span class={cn('absolute flex items-center justify-center', selectVariants.size[size].icon)}>
+    <SelectPrimitive.ItemIndicator>
+      <Check class="h-full w-full" />
+    </SelectPrimitive.ItemIndicator>
+  </span>
+  <slot>
+    {label || value}
+  </slot>
 </SelectPrimitive.Item>

package/dist/components/ui/select/select-item.svelte.d.ts

@@ -1,11 +1,30 @@
 import { SvelteComponent } from "svelte";
-import { Select as SelectPrimitive } from "bits-ui";
+import type { SelectSize } from './index.js';
 declare const __propDef: {
-    props: SelectPrimitive.ItemProps;
+    props: {
+        value: unknown;
+        label?: string | undefined;
+        disabled?: boolean | undefined;
+        asChild?: boolean | undefined | undefined;
+        el?: HTMLDivElement | undefined;
+    } & import("bits-ui/dist/internal/types.js").HTMLDivAttributes & {
+        size?: SelectSize;
+    };
+    events: {
+        click: import("bits-ui").CustomEventHandler<MouseEvent, HTMLDivElement>;
+        keydown: import("bits-ui").CustomEventHandler<KeyboardEvent, HTMLDivElement>;
+        focusin: import("bits-ui").CustomEventHandler<FocusEvent, HTMLDivElement>;
+        focusout: import("bits-ui").CustomEventHandler<FocusEvent, HTMLDivElement>;
+        pointerleave: import("bits-ui").CustomEventHandler<PointerEvent, HTMLDivElement>;
+        pointermove: import("bits-ui").CustomEventHandler<PointerEvent, HTMLDivElement>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
     slots: {
         default: {};
     };
-    events: SelectPrimitive.ItemEvents;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SelectItemProps = typeof __propDef.props;
 export type SelectItemEvents = typeof __propDef.events;

package/dist/components/ui/select/select-label.svelte

@@ -1,12 +1,11 @@
-<script>import { Select as SelectPrimitive } from "bits-ui";
-import { cn } from "../../../utils.js";
+<script>import { cn } from "../../../utils.js";
+import { Select as SelectPrimitive } from "bits-ui";
+import { selectVariants } from "./index.js";
 let className = void 0;
+export let size = "default";
 export { className as class };
 </script>
 
-<SelectPrimitive.Label
-	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-	{...$$restProps}
->
-	<slot />
+<SelectPrimitive.Label class={cn('font-semibold', selectVariants.size[size].label, className)} {...$$restProps}>
+  <slot />
 </SelectPrimitive.Label>

package/dist/components/ui/select/select-label.svelte.d.ts

@@ -1,7 +1,12 @@
 import { SvelteComponent } from "svelte";
-import { Select as SelectPrimitive } from "bits-ui";
+import type { SelectSize } from './index.js';
 declare const __propDef: {
-    props: SelectPrimitive.LabelProps;
+    props: {
+        asChild?: boolean | undefined | undefined;
+        el?: HTMLDivElement | undefined;
+    } & import("bits-ui/dist/internal/types.js").HTMLDivAttributes & {
+        size?: SelectSize;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/ui/select/select-trigger.svelte

@@ -1,22 +1,25 @@
-<script>import { Select as SelectPrimitive } from "bits-ui";
+<script>import { cn } from "../../../utils.js";
+import { Select as SelectPrimitive } from "bits-ui";
 import ChevronDown from "lucide-svelte/icons/chevron-down";
-import { cn } from "../../../utils.js";
+import { selectVariants } from "./index.js";
 let className = void 0;
+export let size = "default";
 export { className as class };
 </script>
 
 <SelectPrimitive.Trigger
-	class={cn(
-		"border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-		className
-	)}
-	{...$$restProps}
-	let:builder
-	on:click
-	on:keydown
+  class={cn(
+    'border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex w-full items-center justify-between rounded-md border text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+    selectVariants.size[size].trigger,
+    className,
+  )}
+  {...$$restProps}
+  let:builder
+  on:click
+  on:keydown
 >
-	<slot {builder} />
-	<div>
-		<ChevronDown class="h-4 w-4 opacity-50" />
-	</div>
+  <slot {builder} />
+  <div>
+    <ChevronDown class="h-4 w-4 opacity-50" />
+  </div>
 </SelectPrimitive.Trigger>

package/dist/components/ui/select/select-trigger.svelte.d.ts

@@ -1,7 +1,18 @@
 import { SvelteComponent } from "svelte";
-import { Select as SelectPrimitive } from "bits-ui";
+import type { SelectSize } from './index.js';
 declare const __propDef: {
-    props: SelectPrimitive.TriggerProps;
+    props: {
+        asChild?: boolean | undefined | undefined;
+        el?: HTMLButtonElement | undefined;
+    } & import("svelte/elements.js").HTMLButtonAttributes & {
+        size?: SelectSize;
+    };
+    events: {
+        click: import("bits-ui").CustomEventHandler<MouseEvent, HTMLButtonElement>;
+        keydown: import("bits-ui").CustomEventHandler<KeyboardEvent, HTMLButtonElement>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
     slots: {
         default: {
             builder: {
@@ -21,7 +32,8 @@ declare const __propDef: {
             };
         };
     };
-    events: SelectPrimitive.TriggerEvents;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SelectTriggerProps = typeof __propDef.props;
 export type SelectTriggerEvents = typeof __propDef.events;

package/dist/components/ui/theme-switcher/index.d.ts

@@ -1,4 +1,4 @@
-import { ModeWatcher } from "mode-watcher";
-import ThemeSwitcherButton from "./theme-switcher-button.svelte";
-import ThemeSwitcherDropdown from "./theme-switcher-dropdown.svelte";
+import { ModeWatcher } from 'mode-watcher';
+import ThemeSwitcherButton from './theme-switcher-button.svelte';
+import ThemeSwitcherDropdown from './theme-switcher-dropdown.svelte';
 export { ModeWatcher, ThemeSwitcherButton, ThemeSwitcherDropdown };

package/dist/components/ui/theme-switcher/index.js

@@ -1,4 +1,4 @@
-import { ModeWatcher } from "mode-watcher";
-import ThemeSwitcherButton from "./theme-switcher-button.svelte";
-import ThemeSwitcherDropdown from "./theme-switcher-dropdown.svelte";
+import { ModeWatcher } from 'mode-watcher';
+import ThemeSwitcherButton from './theme-switcher-button.svelte';
+import ThemeSwitcherDropdown from './theme-switcher-dropdown.svelte';
 export { ModeWatcher, ThemeSwitcherButton, ThemeSwitcherDropdown };

package/dist/components/ui/theme-switcher/theme-switcher-button.svelte

@@ -1,15 +1,14 @@
-<script>import Sun from "lucide-svelte/icons/sun";
-import Moon from "lucide-svelte/icons/moon";
-import { toggleMode } from "mode-watcher";
+<script>import Moon from "lucide-svelte/icons/moon";
+import Sun from "lucide-svelte/icons/sun";
 import { Button } from "../button/index.js";
+import { toggleMode } from "mode-watcher";
+let className = void 0;
+export let size = "icon-lg";
+export { className as class };
 </script>
 
-<Button on:click={toggleMode} variant="outline" size="icon">
-	<Sun
-		class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-	/>
-	<Moon
-		class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-	/>
-	<span class="sr-only">Toggle theme</span>
+<Button on:click={toggleMode} variant="outline" {size} class={className}>
+  <Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+  <Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+  <span class="sr-only">Toggle theme</span>
 </Button>

package/dist/components/ui/theme-switcher/theme-switcher-button.svelte.d.ts

@@ -1,6 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        size?: "icon-xs" | "icon-sm" | "icon" | "icon-lg" | "icon-xl" | undefined;
+        class?: string | undefined | null;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/ui/theme-switcher/theme-switcher-dropdown.svelte

@@ -1,13 +1,16 @@
-<script>import Sun from "lucide-svelte/icons/sun";
+<script>import { Button } from "../button/index.js";
+import * as DropdownMenu from "../dropdown-menu/index.js";
 import Moon from "lucide-svelte/icons/moon";
+import Sun from "lucide-svelte/icons/sun";
 import { resetMode, setMode } from "mode-watcher";
-import * as DropdownMenu from "../dropdown-menu/index.js";
-import { Button } from "../button/index.js";
+let className = void 0;
+export let size = "icon-lg";
+export { className as class };
 </script>
 
 <DropdownMenu.Root>
   <DropdownMenu.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="ghost" size="icon">
+    <Button builders={[builder]} variant="ghost" {size} class={className}>
       <Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
       <Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
       <span class="sr-only">Toggle theme</span>