@widgetic/design-system 0.3.68

package/dist/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	class={cn(
+		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-list.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+declare const TabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type TabsList = ReturnType<typeof TabsList>;
+export default TabsList;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+declare const TabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+type TabsTrigger = ReturnType<typeof TabsTrigger>;
+export default TabsTrigger;

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

@@ -0,0 +1,19 @@
+import Root from "./textarea.svelte";
+type FormTextareaEvent<T extends Event = Event> = T & {
+    currentTarget: EventTarget & HTMLTextAreaElement;
+};
+type TextareaEvents = {
+    blur: FormTextareaEvent<FocusEvent>;
+    change: FormTextareaEvent<Event>;
+    click: FormTextareaEvent<MouseEvent>;
+    focus: FormTextareaEvent<FocusEvent>;
+    keydown: FormTextareaEvent<KeyboardEvent>;
+    keypress: FormTextareaEvent<KeyboardEvent>;
+    keyup: FormTextareaEvent<KeyboardEvent>;
+    mouseover: FormTextareaEvent<MouseEvent>;
+    mouseenter: FormTextareaEvent<MouseEvent>;
+    mouseleave: FormTextareaEvent<MouseEvent>;
+    paste: FormTextareaEvent<ClipboardEvent>;
+    input: FormTextareaEvent<InputEvent>;
+};
+export { Root, Root as Textarea, type TextareaEvents, type FormTextareaEvent, };

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

@@ -0,0 +1,4 @@
+import Root from "./textarea.svelte";
+export { Root, 
+//
+Root as Textarea, };

package/dist/components/ui/textarea/textarea.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	class={cn(
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full 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",
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>

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

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "bits-ui";
+import type { HTMLTextareaAttributes } from "svelte/elements";
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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

@@ -0,0 +1,3 @@
+import Root from "./toggle.svelte";
+export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants, } from "./toggle.svelte";
+export { Root, Root as Toggle, };

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

@@ -0,0 +1,5 @@
+import Root from "./toggle.svelte";
+export { toggleVariants, } from "./toggle.svelte";
+export { Root, 
+//
+Root as Toggle, };

package/dist/components/ui/toggle/toggle.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "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 gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent",
+			},
+			size: {
+				default: "h-10 min-w-10 px-3",
+				sm: "h-9 min-w-9 px-2.5",
+				lg: "h-11 min-w-11 px-5",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	class={cn(toggleVariants({ variant, size, className }))}
+	{...restProps}
+/>

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

@@ -0,0 +1,83 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: 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 gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, {
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: 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 gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, {
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
+import { Toggle as TogglePrimitive } from "bits-ui";
+type $$ComponentProps = TogglePrimitive.RootProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "ref" | "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

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

@@ -0,0 +1,3 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+export { Root, Item, Root as ToggleGroup, Item as ToggleGroupItem, };

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

@@ -0,0 +1,5 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+export { Root, Item, 
+//
+Root as ToggleGroup, Item as ToggleGroupItem, };

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
+	import { cn } from "../../../utils.js";
+	import { type ToggleVariants, toggleVariants } from "../toggle/index.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	class={cn(
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size,
+		}),
+		className
+	)}
+	{value}
+	{...restProps}
+/>

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

@@ -0,0 +1,6 @@
+import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+import { type ToggleVariants } from "../toggle/index.js";
+type $$ComponentProps = ToggleGroupPrimitive.ItemProps & ToggleVariants;
+declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
+export default ToggleGroupItem;

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

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+	import type { ToggleVariants } from "../toggle/index.js";
+	export function setToggleGroupCtx(props: ToggleVariants) {
+		setContext("toggleGroup", props);
+	}
+
+	export function getToggleGroupCtx() {
+		return getContext<ToggleVariants>("toggleGroup");
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
+
+	setToggleGroupCtx({
+		variant,
+		size,
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<ToggleGroupPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	class={cn("flex items-center justify-center gap-1", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,8 @@
+import type { ToggleVariants } from "../toggle/index.js";
+export declare function setToggleGroupCtx(props: ToggleVariants): void;
+export declare function getToggleGroupCtx(): ToggleVariants;
+import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants;
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

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

@@ -0,0 +1,6 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+declare const Root: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
+declare const Trigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
+declare const Provider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
+export { Root, Trigger, Content, Provider, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, };

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

@@ -0,0 +1,8 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+const Provider = TooltipPrimitive.Provider;
+export { Root, Trigger, Content, Provider, 
+//
+Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, };

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		...restProps
+	}: TooltipPrimitive.ContentProps = $props();
+</script>
+
+<TooltipPrimitive.Content
+	bind:ref
+	{sideOffset}
+	class={cn(
+		"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+declare const TooltipContent: import("svelte").Component<TooltipPrimitive.ContentProps, {}, "ref">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

package/dist/components/widget-system/EditableWidget.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+    import { onMount, createEventDispatcher } from 'svelte';
+    import Moveable from './Moveable.svelte';
+    
+    // Export props for configuring the widget
+    export let width: string = "400px";
+    export let height: string = "180px";
+    export let minWidth: number = 200;
+    export let minHeight: number = 100;
+    export let className: string = "";
+    export let enableResize: boolean = true;
+    
+    // Internal state
+    let widgetWidth = width;
+    let widgetHeight = height;
+    let moveableRef: any;
+    let containerElement: HTMLElement;
+    
+    // Event dispatcher
+    const dispatch = createEventDispatcher();
+    
+    // Initialize dimensions on mount
+    onMount(() => {
+        // console.log("Editable Widget initialized with dimensions:", { width, height });
+    });
+    
+    // Event handlers
+    function handleResize(event: CustomEvent) {
+        try {
+            const { width: newWidth, height: newHeight } = event.detail;
+            
+            // Update our widget dimensions (convert to px string format)
+            widgetWidth = `${Math.round(newWidth)}px`;
+            widgetHeight = `${Math.round(newHeight)}px`;
+            
+            // Forward the resize event
+            dispatch('resize', { width: newWidth, height: newHeight });
+        } catch (error) {
+            console.error("Error handling resize:", error);
+        }
+    }
+    
+    function handleMove(event: CustomEvent) {
+        try {
+            const { left, top } = event.detail;
+            
+            // Forward the move event
+            dispatch('move', { left, top });
+        } catch (error) {
+            console.error("Error handling move:", error);
+        }
+    }
+    
+    // Export methods for parent components
+    export function getDimensions() {
+        if (moveableRef) {
+            return moveableRef.getDimensions();
+        }
+        return null;
+    }
+    
+    export function setPosition(left: number, top: number) {
+        if (moveableRef) {
+            moveableRef.setPosition(left, top);
+        }
+    }
+    
+    export function setDimensions(newWidth: number, newHeight: number) {
+        if (moveableRef) {
+            moveableRef.setDimensions(newWidth, newHeight);
+            widgetWidth = `${Math.round(newWidth)}px`;
+            widgetHeight = `${Math.round(newHeight)}px`;
+        }
+    }
+</script>
+
+<div class="editable-widget-container {className}" bind:this={containerElement}>
+    <Moveable
+        bind:this={moveableRef}
+        enableResize={enableResize}
+        minWidth={minWidth}
+        minHeight={minHeight}
+        width={width}
+        height={height}
+        on:resize={handleResize}
+        on:move={handleMove}
+    >
+        <div class="widget-content" style="width: {widgetWidth}; height: {widgetHeight};">
+            <slot />
+        </div>
+    </Moveable>
+</div>
+
+<style>
+    .editable-widget-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .widget-content {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+</style> 

package/dist/components/widget-system/EditableWidget.svelte.d.ts

@@ -0,0 +1,44 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const EditableWidget: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    width?: string;
+    height?: string;
+    minWidth?: number;
+    minHeight?: number;
+    className?: string;
+    enableResize?: boolean;
+    getDimensions?: () => any;
+    setPosition?: (left: number, top: number) => void;
+    setDimensions?: (newWidth: number, newHeight: number) => void;
+}, {
+    default: {};
+}>, {
+    resize: CustomEvent<any>;
+    move: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {
+    getDimensions: () => any;
+    setPosition: (left: number, top: number) => void;
+    setDimensions: (newWidth: number, newHeight: number) => void;
+}, string>;
+type EditableWidget = InstanceType<typeof EditableWidget>;
+export default EditableWidget;