@skeletonlabs/skeleton-svelte 1.5.1 → 2.0.0-next.1

package/dist/components/Rating/Rating.svelte

@@ -1,135 +0,0 @@
-<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. -->
-
-<!-- Root -->
-<div class="{base} {classes}" {...api.getRootProps()} data-testid="rating">
-	<!-- Label -->
-	{#if !!label}
-		<label class="{labelBase} {labelClasses}" {...api.getLabelProps()} data-testid="rating-label">
-			{@render label()}
-		</label>
-	{/if}
-	<!-- Control -->
-	<div
-		class="{controlBase} {controlGap} {rxReadOnly} {rxDisabled} {controlClasses}"
-		{...api.getControlProps()}
-		data-testid="rating-control"
-	>
-		{#each api.items as index}
-			{@const itemState = api.getItemState({ index })}
-			<!-- Item -->
-			<span class="{itemBase} {itemClasses}" {...api.getItemProps({ index })} data-testid="rating-item">
-				{#if !itemState.highlighted}
-					{@render iconEmpty()}
-				{:else if itemState.half}
-					{@render iconHalf()}
-				{:else}
-					{@render iconFull()}
-				{/if}
-			</span>
-		{/each}
-	</div>
-	<!-- Hidden Input -->
-	<input {...api.getHiddenInputProps()} data-testid="rating-input" />
-</div>

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

@@ -1,5 +0,0 @@
-import type { RatingProps } from './types.js';
-/** A visual representation of a numeric range. */
-declare const Rating: import("svelte").Component<RatingProps, {}, "">;
-type Rating = ReturnType<typeof Rating>;
-export default Rating;

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

@@ -1,2 +0,0 @@
-import Rating from './Rating.svelte';
-export default Rating;

package/dist/components/Rating/index.js

@@ -1,2 +0,0 @@
-import Rating from './Rating.svelte';
-export default Rating;

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

@@ -1,36 +0,0 @@
-import * as rating from '@zag-js/rating-group';
-import type { Snippet } from 'svelte';
-export interface RatingProps extends Omit<rating.Props, 'id'> {
-    /** Set root base classes */
-    base?: string;
-    /** Set root gap classes */
-    gap?: string;
-    /** Set root arbitrary classes */
-    classes?: string;
-    /** Set control base classes */
-    controlBase?: string;
-    /** Set control gap classes */
-    controlGap?: string;
-    /** Set control arbitrary classes */
-    controlClasses?: string;
-    /** Set label base classes */
-    labelBase?: string;
-    /** Set label arbitrary classes */
-    labelClasses?: string;
-    /** Set item base classes */
-    itemBase?: string;
-    /** Set item arbitrary classes */
-    itemClasses?: string;
-    /** Set item read-only state classes */
-    stateReadOnly?: string;
-    /** Set item disabled state classes */
-    stateDisabled?: string;
-    /** Set the empty icon snippet */
-    iconEmpty?: Snippet;
-    /** Set the half icon snippet */
-    iconHalf?: Snippet;
-    /** Set the full icon snippet */
-    iconFull?: Snippet;
-    /** Set the label snippet */
-    label?: Snippet;
-}

package/dist/components/Rating/types.js

@@ -1 +0,0 @@
-import * as rating from '@zag-js/rating-group';

package/dist/components/Segment/Segment.svelte

@@ -1,77 +0,0 @@
-<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 = '',
-		gap = 'gap-2',
-		padding = 'p-2',
-		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. -->
-
-<div
-	{...api.getRootProps()}
-	class="{base} {rxOrientation} {background} {border} {padding} {gap} {rounded} {width} {rxDisabled} {rxReadOnly} {classes}"
-	aria-labelledby={labelledby}
-	data-testid="segment"
->
-	<!-- Indicator -->
-	<div
-		{...api.getIndicatorProps()}
-		class="{indicatorBase} {indicatorBg} {indicatorRounded} {indicatorClasses}"
-		data-testid="segment-indicator"
-	></div>
-	<!-- Items -->
-	{@render children?.()}
-</div>

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

@@ -1,5 +0,0 @@
-import type { SegmentProps } from './types.js';
-/** Capture input for a limited set of options. */
-declare const Segment: import("svelte").Component<SegmentProps, {}, "">;
-type Segment = ReturnType<typeof Segment>;
-export default Segment;

package/dist/components/Segment/SegmentItem.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import type { SegmentItemProps } from './types.js';
-	import { getSegmentContext } from './context.js';
-
-	let {
-		// Root
-		base = 'btn cursor-pointer z-[1]',
-		classes = '',
-		// State
-		stateDisabled = 'disabled',
-		stateFocused = 'focused',
-		// Label
-		labelBase = 'pointer-events-none transition-colors duration-100',
-		labelClasses = '',
-		// Snippets
-		children,
-		// Zag
-		...zagProps
-	}: SegmentItemProps = $props();
-
-	// Context
-	const ctx = getSegmentContext();
-
-	// Reactive
-	const state = $derived(ctx.api.getItemState(zagProps));
-	const rxDisabled = $derived(state.disabled ? stateDisabled : '');
-	const rxActiveText = $derived(state.checked ? ctx.indicatorText : '');
-	const rxFocused = $derived(state.focused ? stateFocused : '');
-</script>
-
-<!-- @component An individual Segment option. -->
-
-<label {...ctx.api.getItemProps(zagProps)} class="{base} {rxDisabled} {rxFocused} {classes}" data-testid="segment-item">
-	<!-- Label -->
-	<span {...ctx.api.getItemTextProps(zagProps)} class="{labelBase} {rxActiveText} {labelClasses}" data-testid="segment-item-label">
-		{@render children?.()}
-	</span>
-	<!-- Hidden Input -->
-	<input {...ctx.api.getItemHiddenInputProps(zagProps)} data-testid="segment-item-input" />
-</label>

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

@@ -1,5 +0,0 @@
-import type { SegmentItemProps } from './types.js';
-/** An individual Segment option. */
-declare const SegmentItem: import("svelte").Component<SegmentItemProps, {}, "">;
-type SegmentItem = ReturnType<typeof SegmentItem>;
-export default SegmentItem;

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

@@ -1,2 +0,0 @@
-import type { SegmentContext } from './types.js';
-export declare const setSegmentContext: (value: SegmentContext) => SegmentContext, getSegmentContext: () => SegmentContext, key: symbol;

package/dist/components/Segment/context.js

@@ -1,6 +0,0 @@
-import * as radio from '@zag-js/radio-group';
-import { createContext } from '../../internal/create-context.js';
-export const [setSegmentContext, getSegmentContext, key] = createContext({
-    api: {},
-    indicatorText: ''
-});

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

@@ -1,4 +0,0 @@
-declare const _default: import("svelte").Component<import("./types").SegmentProps, {}, ""> & {
-    Item: import("svelte").Component<import("./types").SegmentItemProps, {}, "">;
-};
-export default _default;

package/dist/components/Segment/index.js

@@ -1,3 +0,0 @@
-import Segment from './Segment.svelte';
-import Item from './SegmentItem.svelte';
-export default /* @__PURE__ */ Object.assign(Segment, { Item });

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

@@ -1,64 +0,0 @@
-import type { Snippet } from 'svelte';
-import * as radio from '@zag-js/radio-group';
-export interface SegmentContext {
-    api: ReturnType<typeof radio.connect>;
-    indicatorText: string;
-}
-export interface SegmentProps extends Omit<radio.Props, 'id'> {
-    /** Sets base classes. */
-    base?: string;
-    /** Set background classes. */
-    background?: string;
-    /** Set border classes. */
-    border?: string;
-    /** Set flex direction classes. */
-    flexDirection?: string;
-    /** Set gap classes. */
-    gap?: string;
-    /** Set padding classes. */
-    padding?: string;
-    /** Set rounded classes. */
-    rounded?: string;
-    /** Set width classes. */
-    width?: string;
-    /** Provide arbitrary CSS classes. */
-    classes?: string;
-    /** Set classes to provide a vertical layout. */
-    orientVertical?: string;
-    /** Set classes to provide a horizontal layout. */
-    orientHorizontal?: string;
-    /** Set classes for the disabled state. */
-    stateDisabled?: string;
-    /** Set classes for the read-only state. */
-    stateReadOnly?: string;
-    /** Sets base classes to the indicator. */
-    indicatorBase?: string;
-    /** Sets background classes to the indicator. */
-    indicatorBg?: string;
-    /** Sets text classes to the indicator. */
-    indicatorText?: string;
-    /** Sets border radius classes to the indicator. */
-    indicatorRounded?: string;
-    /** Provide arbitrary CSS classes to the indicator. */
-    indicatorClasses?: string;
-    /** Set aria-labelledby for element */
-    labelledby?: string;
-    /** The default child slot. */
-    children?: Snippet;
-}
-export interface SegmentItemProps extends Omit<radio.ItemProps, 'invalid'> {
-    /** Sets base classes. */
-    base?: string;
-    /** Provide arbitrary CSS classes. */
-    classes?: string;
-    /** Set classes for the disabled state. */
-    stateDisabled?: string;
-    /** Set classes for the focus state. */
-    stateFocused?: string;
-    /** Sets base classes for the label element. */
-    labelBase?: string;
-    /** Provide arbitrary CSS classes for the label element. */
-    labelClasses?: string;
-    /** The default child slot. */
-    children?: Snippet;
-}

package/dist/components/Segment/types.js

@@ -1 +0,0 @@
-import * as radio from '@zag-js/radio-group';

package/dist/components/Slider/Slider.svelte

@@ -1,105 +0,0 @@
-<script lang="ts">
-	import * as slider from '@zag-js/slider';
-	import { normalizeProps, useMachine } from '@zag-js/svelte';
-	import type { SliderProps } from './types.js';
-
-	const {
-		markers = [],
-		height = 'h-1.5',
-		// Root ---
-		base = 'w-full bg-green',
-		spaceY = '',
-		classes = '',
-		// Control ---
-		controlBase = '',
-		controlClasses = '',
-		// Track ---
-		trackBase = 'overflow-hidden',
-		trackBg = 'bg-surface-200-800',
-		trackRounded = 'rounded-full',
-		trackClasses = '',
-		// Meter ---
-		meterBase = '',
-		meterBg = 'bg-surface-950-50',
-		meterRounded = 'rounded-container',
-		meterClasses = '',
-		// Thumb ---
-		thumbBase = 'ring-inset transition-scale duration-100 ease-in-out',
-		thumbSize = 'size-8 md:size-5',
-		thumbBg = 'bg-surface-50-950',
-		thumbRingSize = 'ring-2',
-		thumbRingColor = 'ring-surface-950-50',
-		thumbRounded = 'rounded-full',
-		thumbCursor = 'hover:cursor-pointer',
-		thumbClasses = '',
-		// Markers ---
-		markersBase = '',
-		markersClasses = '',
-		// Mark ---
-		markBase = '',
-		markText = 'text-[10px]',
-		markOpacity = 'opacity-50',
-		markClasses = '',
-		// State ---
-		stateDisabled = 'disabled',
-		stateReadOnly = 'cursor-not-allowed',
-		// Children ---
-		mark,
-		// Zag ---
-		...zagProps
-	}: SliderProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(slider.machine, () => ({
-		id: id,
-		...zagProps
-	}));
-	const api = $derived(slider.connect(service, normalizeProps));
-
-	// Reactive
-	const rxDisabled = $derived(service.prop('disabled') ? stateDisabled : '');
-	const rxReadOnly = $derived(service.prop('readOnly') ? stateReadOnly : thumbCursor);
-</script>
-
-<div {...api.getRootProps()} class="{base} {height} {spaceY} {rxDisabled} {classes}" data-testid="slider">
-	<!-- Control -->
-	<div {...api.getControlProps()} class="{controlBase} {controlClasses}" data-testid="slider-control">
-		<!-- Track -->
-		<div {...api.getTrackProps()} class="{trackBase} {trackBg} {height} {trackRounded} {trackClasses}" data-testid="slider-track">
-			<!-- Meter -->
-			<div {...api.getRangeProps()} class="{meterBase} {height} {meterBg} {meterRounded} {meterClasses}" data-testid="slider-meter"></div>
-		</div>
-		<!-- NOTE: this div centers thumbs vertically -->
-		<div class={height} style="display: flex; align-items: center; transform: translateY(-100%);" data-testid="slider-thumb-wrapper">
-			<!-- Disabled: skipping this so we can match Zag implementation. -->
-			<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-			{#each api.value as _, index}
-				<div {...api.getThumbProps({ index })}>
-					<!-- Thumb -->
-					<div
-						class="{thumbBase} {thumbSize} {thumbBg} {thumbRingSize} {thumbRingColor} {thumbRounded} {rxReadOnly} {thumbClasses}"
-						data-testid="slider-thumb"
-					></div>
-					<!-- Hidden Input(s) -->
-					<input {...api.getHiddenInputProps({ index })} data-testid="slider-input" />
-				</div>
-			{/each}
-		</div>
-	</div>
-	<!-- Markers -->
-	{#if markers.length > 0}
-		<div {...api.getMarkerGroupProps()} class="{markersBase} {markersClasses}" data-testid="slider-markers">
-			{#each markers as value}
-				<!-- Mark -->
-				<span {...api.getMarkerProps({ value })} class="{markBase} {markText} {markOpacity} {markClasses}" data-testid="slider-mark">
-					{#if mark}
-						{@render mark(value)}
-					{:else}
-						{value}
-					{/if}
-				</span>
-			{/each}
-		</div>
-	{/if}
-</div>

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

@@ -1,4 +0,0 @@
-import type { SliderProps } from './types.js';
-declare const Slider: import("svelte").Component<SliderProps, {}, "">;
-type Slider = ReturnType<typeof Slider>;
-export default Slider;

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

@@ -1,68 +0,0 @@
-import * as slider from '@zag-js/slider';
-import type { Snippet } from 'svelte';
-export interface SliderProps extends Omit<slider.Props, 'id' | 'thumbSize'> {
-    /** Provide an array of value markers */
-    markers?: number[];
-    /** Set height classes for the overall slider. */
-    height?: string;
-    /** Set base classes. */
-    base?: string;
-    /** Set vertical spacing between the control and markers. */
-    spaceY?: string;
-    /** Provide arbitrary classes for the root. */
-    classes?: string;
-    /** Set base classes for the control. */
-    controlBase?: string;
-    /** Provide arbitrary classes for the control. */
-    controlClasses?: string;
-    /** Set base classes for the track. */
-    trackBase?: string;
-    /** Set background classes for the track. */
-    trackBg?: string;
-    /** Set border radius classes for the track. */
-    trackRounded?: string;
-    /** Provide arbitrary classes for the track. */
-    trackClasses?: string;
-    /** Set base classes for the meter. */
-    meterBase?: string;
-    /** Set background classes for the meter. */
-    meterBg?: string;
-    /** Set border radius classes for the meter. */
-    meterRounded?: string;
-    /** Provide arbitrary classes for the meter. */
-    meterClasses?: string;
-    /** Set base classes for the thumb. */
-    thumbBase?: string;
-    /** Set size classes for the thumb. */
-    thumbSize?: string;
-    /** Set background classes for the thumb. */
-    thumbBg?: string;
-    /** Set ring size classes for the thumb. */
-    thumbRingSize?: string;
-    /** Set ring color classes for the thumb. */
-    thumbRingColor?: string;
-    /** Set border-radius classes for the thumb. */
-    thumbRounded?: string;
-    /** Set cursor classes for the thumb. */
-    thumbCursor?: string;
-    /** Provide arbitrary classes for the thumb. */
-    thumbClasses?: string;
-    /** Set base classes for the markers. */
-    markersBase?: string;
-    /** Provide arbitrary classes for the markers. */
-    markersClasses?: string;
-    /** Set base classes for each mark. */
-    markBase?: string;
-    /** Set text size classes for each mark. */
-    markText?: string;
-    /** Set opacity classes for each mark. */
-    markOpacity?: string;
-    /** Provide arbitrary classes for each mark. */
-    markClasses?: string;
-    /** Set disabled state classes for the root element. */
-    stateDisabled?: string;
-    /** Set read-only state classes for the root element. */
-    stateReadOnly?: string;
-    /** Replace numeric markers with symbol, such as a icon. Takes marker value as argument. */
-    mark?: Snippet<[number]>;
-}

package/dist/components/Slider/types.js

@@ -1 +0,0 @@
-import * as slider from '@zag-js/slider';