@nasa-jpl/stellar-svelte 2.0.0-alpha.33 → 2.0.0-alpha.36

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

@@ -13,8 +13,8 @@ const buttonVariants = tv({
         },
         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',
+            xs: 'h-4 px-1 py-0.5 rounded-sm text-xs',
+            sm: 'h-4 rounded-md px-1.5 py-2.5',
             lg: 'h-8 rounded-lg px-4',
             icon: 'h-10 w-10',
         },

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,32 +1,37 @@
 <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;
 </script>
 
 <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",
-		className
-	)}
-	bind:value
-	{readonly}
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:mousemove
-	on:paste
-	on:input
-	on:wheel|passive
-	{...$$restProps}
+  class={cn(
+    '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
+  bind:this={el}
+  {readonly}
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:paste
+  on:input
+  on:wheel|passive
+  {...$$restProps}
 />

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

@@ -1,8 +1,11 @@
 import { SvelteComponent } from "svelte";
-import type { HTMLInputAttributes } from "svelte/elements";
-import type { InputEvents } from "./index.js";
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { InputEvents, InputSize } from './index.js';
 declare const __propDef: {
-    props: HTMLInputAttributes;
+    props: HTMLInputAttributes & {
+        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/toggle/index.d.ts

@@ -9,6 +9,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         sm: string;
         lg: string;
+        xs: string;
     };
 }, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import("tailwind-variants/dist/config").TVConfig<{
     variant: {
@@ -19,6 +20,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         sm: string;
         lg: string;
+        xs: string;
     };
 }, {
     variant: {
@@ -29,6 +31,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         sm: string;
         lg: string;
+        xs: string;
     };
 }>, {
     variant: {
@@ -39,6 +42,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         sm: string;
         lg: string;
+        xs: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -49,6 +53,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         sm: string;
         lg: string;
+        xs: string;
     };
 }, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import("tailwind-variants/dist/config").TVConfig<{
     variant: {
@@ -59,6 +64,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         sm: string;
         lg: string;
+        xs: string;
     };
 }, {
     variant: {
@@ -69,6 +75,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         sm: string;
         lg: string;
+        xs: string;
     };
 }>, unknown, unknown, undefined>>;
 export type Variant = VariantProps<typeof toggleVariants>['variant'];

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

@@ -11,6 +11,7 @@ export const toggleVariants = tv({
             default: 'h-10 px-3',
             sm: 'h-9 px-2.5',
             lg: 'h-11 px-5',
+            xs: 'h-6 px-1',
         },
     },
     defaultVariants: {

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

@@ -6,6 +6,6 @@ export type ToggleVariants = VariantProps<typeof toggleVariants>;
 export declare function setToggleGroupCtx(props: ToggleVariants): void;
 export declare function getToggleGroupCtx(): {
     variant?: "default" | "outline" | undefined;
-    size?: "default" | "sm" | "lg" | undefined;
+    size?: "default" | "sm" | "lg" | "xs" | undefined;
 };
 export { Item, Root, Root as ToggleGroup, Item as ToggleGroupItem, };

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

@@ -7,7 +7,7 @@ declare const __propDef: {
         el?: HTMLButtonElement | undefined;
     } & import("svelte/elements.js").HTMLButtonAttributes & {
         variant?: "default" | "outline" | undefined;
-        size?: "default" | "sm" | "lg" | undefined;
+        size?: "default" | "sm" | "lg" | "xs" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -12,7 +12,7 @@ declare class __sveltets_Render<T extends 'single' | 'multiple'> {
         el?: HTMLDivElement | undefined;
     } & import("bits-ui/dist/internal/types.js").HTMLDivAttributes & {
         variant?: "default" | "outline" | undefined;
-        size?: "default" | "sm" | "lg" | undefined;
+        size?: "default" | "sm" | "lg" | "xs" | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;