@skeletonlabs/skeleton-svelte 1.0.0-next.9 → 1.1.0

package/dist/components/Progress/Progress.svelte

@@ -1,41 +1,47 @@
-<script lang="ts">import * as progress from "@zag-js/progress";
-import { normalizeProps, useMachine } from "@zag-js/svelte";
-import { useId } from "../../internal/use-id.js";
-let {
-  // Root
-  base = "flex items-center gap-4",
-  height = "h-2",
-  width = "w-full",
-  classes = "",
-  // Label
-  labelBase = "whitespace-nowrap",
-  labelText = "text-xs",
-  labelClasses = "",
-  // Track
-  trackBase = "h-full w-full overflow-x-hidden",
-  trackBg = "bg-surface-200-800",
-  trackRounded = "rounded",
-  trackClasses = "",
-  // Meter
-  meterBase = "h-full w-full",
-  meterBg = "bg-surface-950-50",
-  meterRounded = "rounded",
-  meterTransition = "transition-[width]",
-  meterAnimate = "animate-progress-indeterminate",
-  meterClasses = "",
-  // Snippets
-  children,
-  // Zag
-  ...zagProps
-} = $props();
-const [state, send] = useMachine(
-  progress.machine({
-    id: useId()
-  }),
-  { context: zagProps }
-);
-const api = $derived(progress.connect(state, send, normalizeProps));
-const rxIndeterminate = $derived(state.context.isIndeterminate ? meterAnimate : "");
+<script lang="ts">
+	import * as progress from '@zag-js/progress';
+	import { normalizeProps, useMachine } from '@zag-js/svelte';
+	import type { ProgressProps } from './types.js';
+
+	// Props
+	const {
+		// Root
+		base = 'flex items-center gap-4',
+		height = 'h-2',
+		width = 'w-full',
+		classes = '',
+		// Label
+		labelBase = 'whitespace-nowrap',
+		labelText = 'text-xs',
+		labelClasses = '',
+		// Track
+		trackBase = 'h-full w-full overflow-x-hidden',
+		trackBg = 'bg-surface-200-800',
+		trackRounded = 'rounded-base',
+		trackClasses = '',
+		// Meter
+		meterBase = 'h-full w-full',
+		meterBg = 'bg-surface-950-50',
+		meterRounded = 'rounded-base',
+		meterTransition = 'transition-[width]',
+		meterAnimate = 'animate-progress-indeterminate',
+		meterClasses = '',
+		// Snippets
+		children,
+		// Zag
+		...zagProps
+	}: ProgressProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(progress.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(progress.connect(service, normalizeProps));
+
+	// Reactive
+	const rxIndeterminate = $derived(api.indeterminate ? meterAnimate : '');
 </script>
 
 <!-- @component A linear progress bar. -->

package/dist/components/Progress/Progress.svelte.d.ts

@@ -1,17 +1,5 @@
 import type { ProgressProps } from './types.js';
-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;
-    z_$$bindings?: Bindings;
-}
 /** A linear progress bar. */
-declare const Progress: $$__sveltets_2_IsomorphicComponent<ProgressProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Progress = InstanceType<typeof Progress>;
+declare const Progress: import("svelte").Component<ProgressProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
 export default Progress;

package/dist/components/Progress/types.d.ts

@@ -1,6 +1,6 @@
 import * as progress from '@zag-js/progress';
 import type { Snippet } from 'svelte';
-export interface ProgressProps extends Omit<progress.Context, 'id'> {
+export interface ProgressProps extends Omit<progress.Props, 'id'> {
     /** Set root base classes */
     base?: string;
     /** Set root background classes  */

package/dist/components/ProgressRing/ProgressRing.svelte

@@ -1,47 +1,58 @@
-<script lang="ts">import * as progress from "@zag-js/progress";
-import { normalizeProps, useMachine } from "@zag-js/svelte";
-import { useId } from "../../internal/use-id.js";
-let {
-  label,
-  strokeWidth = "10px",
-  strokeLinecap = "round",
-  // Root
-  base = "relative",
-  size = "size-32",
-  classes = "",
-  // Slot
-  childrenBase = "absolute top-0 left-0 z-[1] flex justify-center items-center",
-  childrenClasses = "",
-  // SVG
-  svgBase = "absolute top-0 left-0 size-full rounded-full",
-  svgClasses = "",
-  // Track
-  trackBase = "fill-none",
-  trackStroke = "stroke-surface-200-800",
-  trackClasses = "",
-  // Meter
-  meterBase = "fill-none",
-  meterStroke = "stroke-primary-500",
-  meterTransition = "transition-[stroke-dashoffset] transition-[stroke-dashoffset]",
-  meterAnimate = "animate-ring-indeterminate",
-  meterDuration = "duration-200",
-  meterClasses = "",
-  // Label
-  labelBase = "",
-  labelFill = "fill-surface-950-50",
-  labelFontSize = 24,
-  // px
-  labelFontWeight = "bold",
-  labelClasses = "",
-  // Snippets
-  children,
-  // Zag
-  ...zagProps
-} = $props();
-const [snapshot, send] = useMachine(progress.machine({ id: useId() }), { context: zagProps });
-const api = $derived(progress.connect(snapshot, send, normalizeProps));
-const rxAnimCircle = $derived(api.indeterminate && "animate-spin");
-const rxAnimMeter = $derived(api.indeterminate && meterAnimate);
+<script lang="ts">
+	import * as progress from '@zag-js/progress';
+	import { normalizeProps, useMachine } from '@zag-js/svelte';
+
+	import type { ProgressRingProps } from './types.js';
+
+	const {
+		label,
+		showLabel = false,
+		strokeWidth = '10px',
+		strokeLinecap = 'round',
+		// Root
+		base = 'relative',
+		size = 'size-32',
+		classes = '',
+		// Slot
+		childrenBase = 'absolute top-0 left-0 z-[1] flex justify-center items-center',
+		childrenClasses = '',
+		// SVG
+		svgBase = 'absolute top-0 left-0 size-full rounded-full',
+		svgClasses = '',
+		// Track
+		trackBase = 'fill-none',
+		trackStroke = 'stroke-surface-200-800',
+		trackClasses = '',
+		// Meter
+		meterBase = 'fill-none',
+		meterStroke = 'stroke-primary-500',
+		meterTransition = 'transition-[stroke-dashoffset] transition-[stroke-dashoffset]',
+		meterAnimate = 'animate-ring-indeterminate',
+		meterDuration = 'duration-200',
+		meterClasses = '',
+		// Label
+		labelBase = '',
+		labelFill = 'fill-surface-950-50',
+		labelFontSize = 24, // px
+		labelFontWeight = 'bold',
+		labelClasses = '',
+		// Snippets
+		children,
+		// Zag
+		...zagProps
+	}: ProgressRingProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(progress.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(progress.connect(service, normalizeProps));
+
+	// Reactive Classes
+	const rxAnimCircle = $derived(api.indeterminate ? 'animate-spin' : '');
+	const rxAnimMeter = $derived(api.indeterminate ? meterAnimate : '');
 </script>
 
 <!-- @component A circular progress bar. -->
@@ -54,8 +65,9 @@ const rxAnimMeter = $derived(api.indeterminate && meterAnimate);
 	<!-- SVG -->
 	<svg
 		{...api.getCircleProps()}
+		viewBox="0 0 100 100"
 		class="{svgBase} {svgClasses} {rxAnimCircle}"
-		style="--size:100%;--thickness:{strokeWidth};"
+		style="--size:100px;--thickness:{strokeWidth};"
 		data-testid="progress-ring-svg"
 	>
 		<!-- Track -->
@@ -68,7 +80,7 @@ const rxAnimMeter = $derived(api.indeterminate && meterAnimate);
 			data-testid="progress-ring-meter"
 		/>
 		<!-- Label -->
-		{#if api.value !== null && !children}
+		{#if api.value !== null && !children && showLabel}
 			<text
 				class="{labelBase} {labelFill} {labelClasses}"
 				x="50%"

package/dist/components/ProgressRing/ProgressRing.svelte.d.ts

@@ -1,17 +1,5 @@
 import type { ProgressRingProps } from './types.js';
-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;
-    z_$$bindings?: Bindings;
-}
 /** A circular progress bar. */
-declare const ProgressRing: $$__sveltets_2_IsomorphicComponent<ProgressRingProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type ProgressRing = InstanceType<typeof ProgressRing>;
+declare const ProgressRing: import("svelte").Component<ProgressRingProps, {}, "">;
+type ProgressRing = ReturnType<typeof ProgressRing>;
 export default ProgressRing;

package/dist/components/ProgressRing/types.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
 import * as progress from '@zag-js/progress';
-export interface ProgressRingProps extends Omit<progress.Context, 'id'> {
+export interface ProgressRingProps extends Omit<progress.Props, 'id'> {
     /** Set the text for the scalable label */
     label?: string;
+    /** When enabled, show a text label with the percentage amount */
+    showLabel?: boolean;
     /** Set the stroke size (ex: 15px) */
     strokeWidth?: string;
     /** Defines the shape of the meter */

package/dist/components/Rating/Rating.svelte

@@ -1,59 +1,103 @@
-<script lang="ts">import * as rating from "@zag-js/rating-group";
-import { useMachine, normalizeProps } from "@zag-js/svelte";
-import { useId } from "../../internal/use-id.js";
-import { starEmpty, starHalf, starFull } from "../../internal/snippets.js";
-import { noop } from "../../internal/noop.js";
-let {
-  value = $bindable(),
-  // Root
-  base = "",
-  classes = "",
-  // Control
-  controlBase = "flex",
-  controlGap = "gap-2",
-  controlClasses,
-  // Label
-  labelBase = "",
-  labelClasses = "",
-  // Item
-  itemBase = "",
-  itemClasses = "",
-  // State
-  stateInteractive = "cursor-pointer",
-  stateReadOnly = "",
-  stateDisabled = "cursor-not-allowed opacity-50",
-  // Icons
-  iconEmpty = starEmpty,
-  iconHalf = starHalf,
-  iconFull = starFull,
-  // Children
-  label,
-  // Events
-  onValueChange = noop,
-  // Zag
-  ...zagProps
-} = $props();
-const [state, send] = useMachine(
-  rating.machine({
-    id: useId(),
-    onValueChange: (details) => {
-      value = details.value;
-      onValueChange(details.value);
-    }
-  }),
-  {
-    context: {
-      ...zagProps,
-      get value() {
-        return value;
-      }
-    }
-  }
-);
-const api = $derived(rating.connect(state, send, normalizeProps));
-const rxInteractive = $derived(state.context.isInteractive ? stateInteractive : "");
-const rxReadOnly = $derived(state.context.readOnly ? stateReadOnly : "");
-const rxDisabled = $derived(state.context.disabled ? stateDisabled : "");
+<script lang="ts" module>
+	import { createRawSnippet } from 'svelte';
+
+	const starEmpty = createRawSnippet(() => {
+		return {
+			render: () => /* html */ `
+			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" height="24" width="24">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
+                />
+	        </svg>
+		`
+		};
+	});
+
+	const starHalf = createRawSnippet(() => {
+		return {
+			render: () => /* html */ `
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" height="24" width="24">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
+                />
+				<defs>
+                    <linearGradient id="half-fill">
+                        <stop offset="50%" stop-color="currentColor" />
+                        <stop offset="50%" stop-color="transparent" />
+                    </linearGradient>
+                </defs>
+                <path
+                    fill="url(#half-fill)"
+                    d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+                />
+	        </svg>
+        `
+		};
+	});
+
+	const starFull = createRawSnippet(() => {
+		return {
+			render: () => /*html*/ `
+        	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="24" width="24">
+                <path
+                    fill-rule="evenodd"
+                    d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+                    clip-rule="evenodd"
+                />
+	        </svg>
+        `
+		};
+	});
+</script>
+
+<script lang="ts">
+	import * as rating from '@zag-js/rating-group';
+	import { useMachine, normalizeProps } from '@zag-js/svelte';
+	import type { RatingProps } from './types.js';
+
+	// Props
+	const {
+		// Root
+		base = '',
+		classes = '',
+		// Control
+		controlBase = 'flex',
+		controlGap = 'gap-2',
+		controlClasses,
+		// Label
+		labelBase = 'label-text',
+		labelClasses = '',
+		// Item
+		itemBase = 'cursor-pointer',
+		itemClasses = '',
+		// State
+		stateReadOnly = '',
+		stateDisabled = 'cursor-not-allowed opacity-50',
+		// Icons
+		iconEmpty = starEmpty,
+		iconHalf = starHalf,
+		iconFull = starFull,
+		// Children
+		label,
+		// Zag
+		...zagProps
+	}: RatingProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(rating.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(rating.connect(service, normalizeProps));
+
+	// Reactive
+	const rxReadOnly = $derived(service.prop('readOnly') ? stateReadOnly : '');
+	const rxDisabled = $derived(service.prop('disabled') ? stateDisabled : '');
 </script>
 
 <!-- @component A visual representation of a numeric range. -->
@@ -68,7 +112,7 @@ const rxDisabled = $derived(state.context.disabled ? stateDisabled : "");
 	{/if}
 	<!-- Control -->
 	<div
-		class="{controlBase} {controlGap} {rxInteractive} {rxReadOnly} {rxDisabled} {controlClasses}"
+		class="{controlBase} {controlGap} {rxReadOnly} {rxDisabled} {controlClasses}"
 		{...api.getControlProps()}
 		data-testid="rating-control"
 	>

package/dist/components/Rating/Rating.svelte.d.ts

@@ -1,17 +1,5 @@
 import type { RatingProps } from './types.js';
-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;
-    z_$$bindings?: Bindings;
-}
 /** A visual representation of a numeric range. */
-declare const Rating: $$__sveltets_2_IsomorphicComponent<RatingProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
-type Rating = InstanceType<typeof Rating>;
+declare const Rating: import("svelte").Component<RatingProps, {}, "">;
+type Rating = ReturnType<typeof Rating>;
 export default Rating;

package/dist/components/Rating/types.d.ts

@@ -1,6 +1,6 @@
 import * as rating from '@zag-js/rating-group';
 import type { Snippet } from 'svelte';
-export interface RatingProps extends Omit<rating.Context, 'id' | 'onValueChange'> {
+export interface RatingProps extends Omit<rating.Props, 'id'> {
     /** Set root base classes */
     base?: string;
     /** Set root gap classes */
@@ -21,8 +21,6 @@ export interface RatingProps extends Omit<rating.Context, 'id' | 'onValueChange'
     itemBase?: string;
     /** Set item arbitrary classes */
     itemClasses?: string;
-    /** Set item interactive state classes */
-    stateInteractive?: string;
     /** Set item read-only state classes */
     stateReadOnly?: string;
     /** Set item disabled state classes */
@@ -35,6 +33,4 @@ export interface RatingProps extends Omit<rating.Context, 'id' | 'onValueChange'
     iconFull?: Snippet;
     /** Set the label snippet */
     label?: Snippet;
-    /** Set the onValueChange callback */
-    onValueChange?: (value: number) => void;
 }

package/dist/components/Segment/Segment.svelte

@@ -1,64 +1,61 @@
-<script lang="ts">import * as radio from "@zag-js/radio-group";
-import { useMachine, normalizeProps } from "@zag-js/svelte";
-import { setSegmentContext } from "./context.js";
-import { useId } from "../../internal/use-id.js";
-let {
-  value = $bindable(""),
-  orientation = "horizontal",
-  // Root
-  base = "inline-flex items-stretch overflow-hidden",
-  background = "preset-outlined-surface-200-800",
-  border = "p-2",
-  gap = "gap-2",
-  padding = "",
-  rounded = "rounded-container",
-  width = "",
-  classes = "",
-  // States
-  orientVertical = "flex-col",
-  orientHorizontal = "flex-row",
-  stateDisabled = "disabled",
-  stateReadOnly = "pointer-events-none",
-  // Indicator
-  indicatorBase = "top-[var(--top)] left-[var(--left)] w-[var(--width)] h-[var(--height)]",
-  indicatorBg = "preset-filled",
-  indicatorText = "text-surface-contrast-950 dark:text-surface-contrast-50",
-  indicatorRounded = "rounded",
-  indicatorClasses = "",
-  // Snippets
-  children,
-  // Zag
-  ...zagProps
-} = $props();
-const [snapshot, send] = useMachine(
-  radio.machine({
-    id: useId(),
-    onValueChange(details) {
-      value = details.value;
-    },
-    orientation
-  }),
-  {
-    context: {
-      ...zagProps,
-      get value() {
-        return value;
-      }
-    }
-  }
-);
-const api = $derived(radio.connect(snapshot, send, normalizeProps));
-setSegmentContext({
-  get api() {
-    return api;
-  },
-  get indicatorText() {
-    return indicatorText;
-  }
-});
-const rxOrientation = $derived(snapshot.context.orientation === "vertical" ? orientVertical : orientHorizontal);
-const rxDisabled = $derived(snapshot.context.disabled ? stateDisabled : "");
-const rxReadOnly = $derived(snapshot.context.readOnly ? stateReadOnly : "");
+<script lang="ts">
+	import * as radio from '@zag-js/radio-group';
+	import { useMachine, normalizeProps } from '@zag-js/svelte';
+	import type { SegmentProps } from './types.js';
+	import { setSegmentContext } from './context.js';
+
+	const {
+		// Root
+		base = 'inline-flex items-stretch overflow-hidden',
+		background = 'preset-outlined-surface-200-800',
+		border = 'p-2',
+		gap = 'gap-2',
+		padding = '',
+		rounded = 'rounded-container',
+		width = '',
+		classes = '',
+		// States
+		orientVertical = 'flex-col items-stretch',
+		orientHorizontal = 'flex-row',
+		stateDisabled = 'disabled',
+		stateReadOnly = 'pointer-events-none',
+		// Indicator
+		indicatorBase = 'top-[var(--top)] left-[var(--left)] w-[var(--width)] h-[var(--height)]',
+		indicatorBg = 'preset-filled',
+		indicatorText = 'text-surface-contrast-950 dark:text-surface-contrast-50',
+		indicatorRounded = 'rounded-base',
+		indicatorClasses = '',
+		// Label
+		labelledby = '',
+		// Snippets
+		children,
+		// Zag
+		...zagProps
+	}: SegmentProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(radio.machine, () => ({
+		id: id,
+		orientation: zagProps.orientation ?? 'horizontal',
+		...zagProps
+	}));
+	const api = $derived(radio.connect(service, normalizeProps));
+
+	// Set Context
+	setSegmentContext({
+		get api() {
+			return api;
+		},
+		get indicatorText() {
+			return indicatorText;
+		}
+	});
+
+	// Reactive
+	const rxOrientation = $derived(service.prop('orientation') === 'vertical' ? orientVertical : orientHorizontal);
+	const rxDisabled = $derived(service.prop('disabled') ? stateDisabled : '');
+	const rxReadOnly = $derived(service.prop('readOnly') ? stateReadOnly : '');
 </script>
 
 <!-- @component Capture input for a limited set of options. -->
@@ -66,6 +63,7 @@ const rxReadOnly = $derived(snapshot.context.readOnly ? stateReadOnly : "");
 <div
 	{...api.getRootProps()}
 	class="{base} {rxOrientation} {background} {border} {padding} {gap} {rounded} {width} {rxDisabled} {rxReadOnly} {classes}"
+	aria-labelledby={labelledby}
 	data-testid="segment"
 >
 	<!-- Indicator -->

package/dist/components/Segment/Segment.svelte.d.ts

@@ -1,17 +1,5 @@
-import type { SegmentControl } from './types.js';
-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;
-    z_$$bindings?: Bindings;
-}
+import type { SegmentProps } from './types.js';
 /** Capture input for a limited set of options. */
-declare const Segment: $$__sveltets_2_IsomorphicComponent<SegmentControl, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
-type Segment = InstanceType<typeof Segment>;
+declare const Segment: import("svelte").Component<SegmentProps, {}, "">;
+type Segment = ReturnType<typeof Segment>;
 export default Segment;