@gradio/button 0.6.1 → 0.6.3

package/Button.stories.svelte

@@ -1,98 +1,103 @@
-<script>
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-	import Button from "./Index.svelte";
-</script>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Button from "./shared/Button.svelte";
 
-<Meta
-	title="Components/Button"
-	component={Button}
-	argTypes={{
-		label: {
-			control: "text",
-			description: "The text to display on the button",
-			name: "label",
-			value: "Gradio Button"
-		},
-		variant: {
-			options: ["primary", "secondary", "stop"],
-			description: "The variant of the button",
-			control: { type: "select" },
-			defaultValue: "primary"
-		},
-		size: {
-			options: ["sm", "lg"],
-			description: "The size of the button",
-			control: { type: "select" },
-			defaultValue: "lg"
-		},
-		visible: {
-			options: [true, false],
-			description: "Sets the visibility of the button",
-			control: { type: "boolean" },
-			defaultValue: true
-		},
-		interactive: {
-			options: [true, false],
-			description: "If false, the button will be in a disabled state",
-			control: { type: "boolean" },
-			defaultValue: true
-		},
-		disabled: {
-			options: [true, false],
-			control: { type: "boolean" },
-			defaultValue: false
-		},
-		scale: {
-			options: [null, 0.5, 1, 2],
-			description:
-				"relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. Only applies in Rows, or top-level Components in Blocks where fill_height=True. ",
-			control: { type: "select" }
+	const { Story } = defineMeta({
+		title: "Components/Button",
+		component: Button,
+		tags: ["autodocs"],
+		argTypes: {
+			value: {
+				control: "text",
+				description: "The text to display on the button"
+			},
+			variant: {
+				options: ["primary", "secondary", "stop", "huggingface"],
+				description: "The variant of the button",
+				control: { type: "select" }
+			},
+			size: {
+				options: ["sm", "md", "lg"],
+				description: "The size of the button",
+				control: { type: "select" }
+			},
+			visible: {
+				description: "Sets the visibility of the button",
+				control: { type: "boolean" }
+			},
+			disabled: {
+				description: "If true, the button will be in a disabled state",
+				control: { type: "boolean" }
+			},
+			scale: {
+				options: [null, 0.5, 1, 2],
+				description: "Relative size compared to adjacent components",
+				control: { type: "select" }
+			},
+			link: {
+				control: "text",
+				description: "URL to navigate to when clicked"
+			}
 		}
-	}}
-/>
+	});
+</script>
 
-<Template let:args>
-	<Button value="Gradio Button" {...args} />
-</Template>
+{#snippet template(args)}
+	<Button {...args}>{args.value}</Button>
+{/snippet}
 
 <Story
 	name="Primary"
-	args={{ variant: "primary", size: "lg", scale: 1, interactive: true }}
+	args={{ variant: "primary", size: "lg", value: "Primary Button" }}
+	{template}
 />
 <Story
 	name="Secondary"
-	args={{ variant: "secondary", size: "lg", interactive: true }}
+	args={{ variant: "secondary", size: "lg", value: "Secondary Button" }}
+	{template}
 />
-<Story name="Stop" args={{ variant: "stop", size: "lg", interactive: true }} />
 <Story
-	name="Button with link"
-	args={{ link: "https://huggingface.co/welcome", interactive: true }}
+	name="Stop"
+	args={{ variant: "stop", size: "lg", value: "Stop Button" }}
+	{template}
 />
 <Story
-	name="Button with external image icon"
-	args={{
-		interactive: true,
-		icon: {
-			url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
-			path: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
-		}
-	}}
+	name="Small"
+	args={{ variant: "primary", size: "sm", value: "Small Button" }}
+	{template}
 />
 <Story
-	name="Button with external image icon and no text"
+	name="Medium"
+	args={{ variant: "primary", size: "md", value: "Medium Button" }}
+	{template}
+/>
+<Story
+	name="Disabled"
 	args={{
-		interactive: true,
-		icon: {
-			url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
-			path: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
-		},
-		value: ""
+		variant: "primary",
+		size: "lg",
+		disabled: true,
+		value: "Disabled Button"
 	}}
+	{template}
 />
-
 <Story
-	name="Button with visible equal to false"
+	name="Button with link"
 	args={{
-		visible: false
+		variant: "primary",
+		size: "lg",
+		link: "https://huggingface.co",
+		value: "Link Button"
 	}}
+	{template}
+/>
+<Story
+	name="Huggingface variant"
+	args={{ variant: "huggingface", size: "lg", value: "Huggingface Button" }}
+	{template}
+/>
+<Story
+	name="Hidden"
+	args={{ variant: "primary", visible: false, value: "Hidden Button" }}
+	{template}
 />

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @gradio/button
 
+## 0.6.3
+
+### Fixes
+
+- [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/utils@0.11.2
+- @gradio/upload@0.17.4
+- @gradio/client@2.0.3
+- @gradio/image@0.25.1
+
+## 0.6.2
+
+### Fixes
+
+- [#12681](https://github.com/gradio-app/gradio/pull/12681) [`ba46c2d`](https://github.com/gradio-app/gradio/commit/ba46c2df1405c11e495304af8f91acfdf69d0b18) - Migrate Button to Svelte 5.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/utils@0.11.1
+- @gradio/client@2.0.2
+
 ## 0.6.1
 
 ### Dependency updates

package/Index.svelte

@@ -7,9 +7,21 @@
 	import type { SharedProps } from "@gradio/utils";
 
 	import Button from "./shared/Button.svelte";
+	import type { FileData } from "client/js/src";
+	interface ButtonProps {
+		value: string | null;
+		variant: "primary" | "secondary" | "stop";
+		size: "sm" | "md" | "lg";
+		scale: number;
+		link: string | null;
+		icon: FileData | null;
+		link_target: "_self" | "_blank";
+		elem_id: string | null;
+		elem_classes?: string[];
+	}
 
-	let _props: { shared_props: SharedProps; props: {} } = $props();
-	const gradio = new Gradio<never, {}>(_props);
+	let _props: { shared_props: SharedProps; props: ButtonProps } = $props();
+	const gradio = new Gradio<never, ButtonProps>(_props);
 
 	function handle_click() {
 		gradio.dispatch("click");
@@ -29,7 +41,7 @@
 	visible={gradio.shared.visible}
 	disabled={!gradio.shared.interactive}
 	link_target={gradio.props.link_target}
-	on:click={handle_click}
+	onclick={handle_click}
 >
 	{gradio.props.value ?? ""}
 </Button>

package/dist/Index.svelte

@@ -7,9 +7,21 @@
 	import type { SharedProps } from "@gradio/utils";
 
 	import Button from "./shared/Button.svelte";
+	import type { FileData } from "client/js/src";
+	interface ButtonProps {
+		value: string | null;
+		variant: "primary" | "secondary" | "stop";
+		size: "sm" | "md" | "lg";
+		scale: number;
+		link: string | null;
+		icon: FileData | null;
+		link_target: "_self" | "_blank";
+		elem_id: string | null;
+		elem_classes?: string[];
+	}
 
-	let _props: { shared_props: SharedProps; props: {} } = $props();
-	const gradio = new Gradio<never, {}>(_props);
+	let _props: { shared_props: SharedProps; props: ButtonProps } = $props();
+	const gradio = new Gradio<never, ButtonProps>(_props);
 
 	function handle_click() {
 		gradio.dispatch("click");
@@ -29,7 +41,7 @@
 	visible={gradio.shared.visible}
 	disabled={!gradio.shared.interactive}
 	link_target={gradio.props.link_target}
-	on:click={handle_click}
+	onclick={handle_click}
 >
 	{gradio.props.value ?? ""}
 </Button>

package/dist/Index.svelte.d.ts

@@ -1,8 +1,20 @@
 export { default as BaseButton } from "./shared/Button.svelte";
 import type { SharedProps } from "@gradio/utils";
+import type { FileData } from "client/js/src";
+interface ButtonProps {
+    value: string | null;
+    variant: "primary" | "secondary" | "stop";
+    size: "sm" | "md" | "lg";
+    scale: number;
+    link: string | null;
+    icon: FileData | null;
+    link_target: "_self" | "_blank";
+    elem_id: string | null;
+    elem_classes?: string[];
+}
 type $$ComponentProps = {
     shared_props: SharedProps;
-    props: {};
+    props: ButtonProps;
 };
 declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
 type Index = ReturnType<typeof Index>;

package/dist/shared/Button.svelte

@@ -1,20 +1,39 @@
 <script lang="ts">
 	import { type FileData } from "@gradio/client";
 	import { Image } from "@gradio/image/shared";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let variant: "primary" | "secondary" | "stop" | "huggingface" =
-		"secondary";
-	export let size: "sm" | "md" | "lg" = "lg";
-	export let value: string | null = null;
-	export let link: string | null = null;
-	export let link_target: "_self" | "_blank" | "_parent" | "_top" = "_self";
-	export let icon: FileData | null = null;
-	export let disabled = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
+	import { type Snippet } from "svelte";
+
+	let {
+		elem_id,
+		elem_classes = [],
+		visible,
+		variant,
+		size,
+		value,
+		link,
+		link_target,
+		icon,
+		disabled,
+		scale,
+		min_width,
+		onclick = () => {},
+		children
+	}: {
+		elem_id: string | null;
+		elem_classes: string[] | null;
+		visible: boolean | "hidden";
+		variant: "primary" | "secondary" | "stop" | "huggingface";
+		size: "sm" | "md" | "lg";
+		value: string | null;
+		link: string | null;
+		link_target: "_self" | "_blank" | "_parent" | "_top";
+		icon: FileData | null;
+		disabled: boolean;
+		scale: number | null;
+		min_width: number | undefined;
+		onclick: () => void;
+		children?: Snippet;
+	} = $props();
 </script>
 
 {#if link && link.length > 0}
@@ -40,11 +59,13 @@
 				restProps={{ alt: `${value} icon`, class: "button-icon" }}
 			/>
 		{/if}
-		<slot />
+		{#if children}
+			{@render children()}
+		{/if}
 	</a>
 {:else}
 	<button
-		on:click
+		{onclick}
 		class:hidden={visible === false || visible === "hidden"}
 		class="{size} {variant} {elem_classes.join(' ')}"
 		style:flex-grow={scale}
@@ -62,7 +83,9 @@
 				src={icon.url}
 			/>
 		{/if}
-		<slot />
+		{#if children}
+			{@render children()}
+		{/if}
 	</button>
 {/if}
 

package/dist/shared/Button.svelte.d.ts

@@ -1,43 +1,21 @@
 import { type FileData } from "@gradio/client";
-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 Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    elem_id?: string;
-    elem_classes?: string[];
-    visible?: boolean | "hidden";
-    variant?: "primary" | "secondary" | "stop" | "huggingface";
-    size?: "sm" | "md" | "lg";
-    value?: string | null;
-    link?: string | null;
-    link_target?: "_self" | "_blank" | "_parent" | "_top";
-    icon?: FileData | null;
-    disabled?: boolean;
-    scale?: number | null;
-    min_width?: number | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Button = InstanceType<typeof Button>;
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    elem_id: string | null;
+    elem_classes: string[] | null;
+    visible: boolean | "hidden";
+    variant: "primary" | "secondary" | "stop" | "huggingface";
+    size: "sm" | "md" | "lg";
+    value: string | null;
+    link: string | null;
+    link_target: "_self" | "_blank" | "_parent" | "_top";
+    icon: FileData | null;
+    disabled: boolean;
+    scale: number | null;
+    min_width: number | undefined;
+    onclick: () => void;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@gradio/button",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/client": "^2.0.1",
-    "@gradio/utils": "^0.11.0",
-    "@gradio/upload": "^0.17.3",
-    "@gradio/image": "^0.25.0"
+    "@gradio/client": "^2.0.3",
+    "@gradio/image": "^0.25.1",
+    "@gradio/upload": "^0.17.4",
+    "@gradio/utils": "^0.11.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.15.1"
+    "@gradio/preview": "^0.15.2"
   },
   "main": "./Index.svelte",
   "main_changeset": true,
@@ -26,7 +26,7 @@
     }
   },
   "peerDependencies": {
-    "svelte": "^5.43.4"
+    "svelte": "^5.48.0"
   },
   "repository": {
     "type": "git",

package/shared/Button.svelte

@@ -1,20 +1,39 @@
 <script lang="ts">
 	import { type FileData } from "@gradio/client";
 	import { Image } from "@gradio/image/shared";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let variant: "primary" | "secondary" | "stop" | "huggingface" =
-		"secondary";
-	export let size: "sm" | "md" | "lg" = "lg";
-	export let value: string | null = null;
-	export let link: string | null = null;
-	export let link_target: "_self" | "_blank" | "_parent" | "_top" = "_self";
-	export let icon: FileData | null = null;
-	export let disabled = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
+	import { type Snippet } from "svelte";
+
+	let {
+		elem_id,
+		elem_classes = [],
+		visible,
+		variant,
+		size,
+		value,
+		link,
+		link_target,
+		icon,
+		disabled,
+		scale,
+		min_width,
+		onclick = () => {},
+		children
+	}: {
+		elem_id: string | null;
+		elem_classes: string[] | null;
+		visible: boolean | "hidden";
+		variant: "primary" | "secondary" | "stop" | "huggingface";
+		size: "sm" | "md" | "lg";
+		value: string | null;
+		link: string | null;
+		link_target: "_self" | "_blank" | "_parent" | "_top";
+		icon: FileData | null;
+		disabled: boolean;
+		scale: number | null;
+		min_width: number | undefined;
+		onclick: () => void;
+		children?: Snippet;
+	} = $props();
 </script>
 
 {#if link && link.length > 0}
@@ -40,11 +59,13 @@
 				restProps={{ alt: `${value} icon`, class: "button-icon" }}
 			/>
 		{/if}
-		<slot />
+		{#if children}
+			{@render children()}
+		{/if}
 	</a>
 {:else}
 	<button
-		on:click
+		{onclick}
 		class:hidden={visible === false || visible === "hidden"}
 		class="{size} {variant} {elem_classes.join(' ')}"
 		style:flex-grow={scale}
@@ -62,7 +83,9 @@
 				src={icon.url}
 			/>
 		{/if}
-		<slot />
+		{#if children}
+			{@render children()}
+		{/if}
 	</button>
 {/if}