@skeletonlabs/skeleton-svelte 1.0.0-next.7 → 1.0.0-next.8

package/dist/components/FileUpload/FileUpload.svelte

@@ -23,7 +23,7 @@ let {
   filesListBase = "mt-2 space-y-2",
   filesListClasses = "",
   // File
-  fileBase = "grid grid-cols-[auto_auto_1fr_auto] rtl:grid-cols-[auto_1fr_auto_auto] items-center",
+  fileBase = "grid grid-cols-[auto_1fr_auto] rtl:grid-cols-[1fr_auto_auto] items-center",
   fileBg = "preset-tonal",
   fileGap = "gap-4 px-4",
   filePadding = "py-2",
@@ -31,7 +31,7 @@ let {
   fileClasses = "",
   // File (content)
   fileIcon = "",
-  fileName = "type-scale-2",
+  fileName = "type-scale-2 flex items-center gap-4",
   fileSize = "type-scale-1 opacity-60",
   fileButton = "",
   // State
@@ -44,10 +44,19 @@ let {
   iconFile,
   iconFileRemove,
   // Zag
+  internalApi = $bindable(),
   ...zagProps
 } = $props();
-const [snapshot, send] = useMachine(fileUpload.machine({ id: useId() }), { context: zagProps });
+const [snapshot, send] = useMachine(
+  fileUpload.machine({
+    id: useId()
+  }),
+  { context: { ...zagProps } }
+);
 const api = $derived(fileUpload.connect(snapshot, send, normalizeProps));
+$effect(() => {
+  internalApi = api;
+});
 const rxDisabled = $derived(snapshot.context.disabled ? stateDisabled : "");
 const rxInvalid = $derived(api.rejectedFiles.length > 0 ? stateInvalid : interfaceBorderColor);
 const rxDragging = $derived(api.dragging && !children ? stateDragging : "");
@@ -92,20 +101,14 @@ const rxDragging = $derived(api.dragging && !children ? stateDragging : "");
 					class="{fileBase} {fileBg} {fileGap} {filePadding} {fileRounded} {fileClasses}"
 					data-testid="uploader-file"
 				>
-					<span class={fileIcon} data-testid="uploader-file-icon">
-						{#if iconFile}
-							{@render iconFile()}
-						{:else}
-							&bull;
-						{/if}
-					</span>
 					<!-- Name -->
 					<p {...api.getItemNameProps({ file })} class={fileName} data-testid="uploader-file-name">
-						{file.name}
+						{#if iconFile}<span class={fileIcon} data-testid="uploader-file-icon">{@render iconFile()}</span>{/if}
+						<span>{file.name}</span>
 					</p>
 					<!-- Size -->
 					<p {...api.getItemNameProps({ file })} class={fileSize} data-testid="uploader-file-size">
-						{(file.size / 100000).toFixed(1)} mb
+						{api.getFileSize(file)}
 					</p>
 					<!-- Button -->
 					<button {...api.getItemDeleteTriggerProps({ file })} class={fileButton} data-testid="uploader-file-button">

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

@@ -12,6 +12,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 /** A form component for handling file uploads. */
 declare const FileUpload: $$__sveltets_2_IsomorphicComponent<FileUploadProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "internalApi">;
 type FileUpload = InstanceType<typeof FileUpload>;
 export default FileUpload;

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

@@ -1,6 +1,9 @@
 import type { Snippet } from 'svelte';
 import * as fileUpload from '@zag-js/file-upload';
-export interface FileUploadProps extends Omit<fileUpload.Context, 'id'> {
+import type { PropTypes } from '@zag-js/svelte';
+export interface FileUploadApi extends fileUpload.Api<PropTypes> {
+}
+export interface FileUploadProps extends Omit<fileUpload.Context, 'id' | 'value'> {
     /** Set the interface text value. */
     label?: string;
     /** Set the interface subtext value. */
@@ -67,4 +70,6 @@ export interface FileUploadProps extends Omit<fileUpload.Context, 'id'> {
     iconFile?: Snippet;
     /** Provide an icon for the remove file action. */
     iconFileRemove?: Snippet;
+    /** Binds the Zag API for external use. */
+    internalApi?: FileUploadApi;
 }

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">import * as pagination from "@zag-js/pagination";
+import { normalizeProps, useMachine } from "@zag-js/svelte";
+import { useId } from "../../internal/use-id.js";
+let {
+  page = $bindable(1),
+  pageSize = $bindable(10),
+  data,
+  alternative = false,
+  textSeparator = "of",
+  // Titles
+  titleFirst,
+  titlePrevious,
+  titleNumeral,
+  titleNext,
+  titleLast,
+  // Root
+  base = "inline-flex items-stretch overflow-hidden",
+  background = "preset-outlined-surface-200-800",
+  border = "p-2",
+  gap = "gap-2",
+  padding = "",
+  rounded = "rounded-container",
+  classes = "",
+  // Buttons
+  buttonBase = "btn",
+  buttonActive = "preset-filled",
+  buttonInactive = "preset-tonal",
+  buttonHover = "hover:preset-filled",
+  buttonClasses = "",
+  // Children
+  labelFirst,
+  labelPrevious,
+  labelEllipsis,
+  labelNext,
+  labelLast,
+  // Zag ---
+  ...zagProps
+} = $props();
+const [snapshot, send] = useMachine(
+  pagination.machine({
+    id: useId(),
+    count: data.length,
+    onPageChange(details) {
+      page = details.page;
+    }
+  }),
+  {
+    context: {
+      ...zagProps,
+      get page() {
+        return page;
+      },
+      get pageSize() {
+        return pageSize;
+      }
+    }
+  }
+);
+const api = $derived(pagination.connect(snapshot, send, normalizeProps));
+const rxButtonActive = (page2) => {
+  return snapshot.context.page === page2.value ? buttonActive : `${buttonInactive} ${buttonHover}`;
+};
+</script>
+
+{#if api.totalPages > 1}
+	<div {...api.getRootProps()} class="{base} {background} {border} {gap} {padding} {rounded} {classes}" data-testid="pagination">
+		<!-- Button: First Page -->
+		{#if alternative}
+			<button
+				type="button"
+				onclick={api.goToFirstPage}
+				class="{buttonBase} {buttonInactive} {buttonHover} {buttonClasses}"
+				title={titleFirst}
+				disabled={api.page === 1}
+				data-testid="pagination-button-previous"
+			>
+				{#if labelFirst}{@render labelFirst()}{:else}&laquo;{/if}
+			</button>
+		{/if}
+		<!-- Button: Previous Page -->
+		<button
+			type="button"
+			{...api.getPrevTriggerProps()}
+			class="{buttonBase} {buttonInactive} {buttonHover} {buttonClasses}"
+			title={titlePrevious}
+			disabled={api.page === 1}
+			data-testid="pagination-button-previous"
+		>
+			{#if labelPrevious}{@render labelPrevious()}{:else}&larr;{/if}
+		</button>
+		<!-- Numeral List -->
+		{#if !alternative}
+			{#each api.pages as page, i}
+				{#if page.type === 'page'}
+					<!-- Numeral -->
+					<button
+						type="button"
+						{...api.getItemProps(page)}
+						class="{buttonBase} {rxButtonActive(page)} {buttonClasses}"
+						title={titleNumeral && `${titleNumeral} ${page.value}`}
+						data-testid="pagination-button-numeral"
+					>
+						{page.value}
+					</button>
+				{:else}
+					<!-- Ellipsis -->
+					<span
+						{...api.getEllipsisProps({ index: i })}
+						class="{buttonBase} {buttonInactive} {buttonClasses}"
+						data-testid="pagination-ellipsis"
+					>
+						{#if labelEllipsis}{@render labelEllipsis()}{:else}&ctdot;{/if}
+					</span>
+				{/if}
+			{/each}
+		{/if}
+		<!-- Alternative Interface -->
+		{#if alternative}
+			<span class="{buttonBase} {buttonInactive} {buttonClasses}" data-testid="pagination-alt-ui">
+				<span>
+					{api.pageRange.start + 1} - {api.pageRange.end}
+				</span>
+				<span class="opacity-60">
+					{api.page}
+					{textSeparator}
+					{api.count}
+				</span>
+			</span>
+		{/if}
+		<!-- Button: Next Page -->
+		<button
+			type="button"
+			{...api.getNextTriggerProps()}
+			class="{buttonBase} {buttonInactive} {buttonHover} {buttonClasses}"
+			title={titleNext}
+			disabled={!api.nextPage}
+			data-testid="pagination-button-next"
+		>
+			{#if labelNext}{@render labelNext()}{:else}&rarr;{/if}
+		</button>
+		<!-- Button: Last Page -->
+		{#if alternative}
+			<button
+				type="button"
+				onclick={api.goToLastPage}
+				class="{buttonBase} {buttonInactive} {buttonHover} {buttonClasses}"
+				title={titleLast}
+				disabled={!api.nextPage}
+				data-testid="pagination-button-previous"
+			>
+				{#if labelLast}{@render labelLast()}{:else}&raquo;{/if}
+			</button>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,16 @@
+import type { PaginationProps } 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;
+}
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<PaginationProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "pageSize" | "page">;
+type Pagination = InstanceType<typeof Pagination>;
+export default Pagination;

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

@@ -0,0 +1,56 @@
+import type { Snippet } from 'svelte';
+import * as pagination from '@zag-js/pagination';
+export interface PaginationProps extends Omit<pagination.Context, 'id' | 'page' | 'pageSize'> {
+    /** Bind the current page. */
+    page: number;
+    /** Bind the number of data items to display. */
+    pageSize: number;
+    data: unknown[];
+    alternative?: boolean;
+    /** Set the separator text or character, such as "of" in "X of Y". */
+    textSeparator?: string;
+    /** Set an optional title for the first button. */
+    titleFirst?: string;
+    /** Set an optional title for the previous button. */
+    titlePrevious?: string;
+    /** Set an optional title for the numeral buttons (ex: Page 1). */
+    titleNumeral?: string;
+    /** Set an optional title for the next button. */
+    titleNext?: string;
+    /** Set an optional title for the last button. */
+    titleLast?: string;
+    /** Sets base classes for the list. */
+    base?: string;
+    /** Sets background classes for the list. */
+    background?: string;
+    /** Sets border classes for the list. */
+    border?: string;
+    /** Sets gap classes for the list. */
+    gap?: string;
+    /** Sets padding classes for the list. */
+    padding?: string;
+    /** Sets border radius classes for the list. */
+    rounded?: string;
+    /** Provide arbitrary CSS classes for the root. */
+    classes?: string;
+    /** Sets base classes for buttons. */
+    buttonBase?: string;
+    /** Sets active state classes for buttons. */
+    buttonActive?: string;
+    /** Sets inactive state classes for buttons. */
+    buttonInactive?: string;
+    /** Sets hover state classes for buttons. */
+    buttonHover?: string;
+    /** Provide arbitrary CSS classes for buttons. */
+    buttonClasses?: string;
+    /** Set button icon or label for first button. */
+    labelFirst?: Snippet;
+    /** Set button icon or label for previous button. */
+    labelPrevious?: Snippet;
+    /** Set button icon or label for ellipsis. */
+    labelEllipsis?: Snippet;
+    /** Set button icon or label for next button. */
+    labelNext?: Snippet;
+    /** Set button icon or label for last button. */
+    labelLast?: Snippet;
+}

package/dist/components/Pagination/types.js

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

package/dist/components/Segment/Segment.svelte

@@ -2,6 +2,7 @@
 import { useMachine, normalizeProps } from "@zag-js/svelte";
 import { setSegmentContext } from "./context.js";
 import { useId } from "../../internal/use-id.js";
+import { on } from "svelte/events";
 let {
   value = $bindable(""),
   orientation = "horizontal",
@@ -59,6 +60,11 @@ setSegmentContext({
 const rxOrientation = $derived(snapshot.context.orientation === "vertical" ? orientVertical : orientHorizontal);
 const rxDisabled = $derived(snapshot.context.disabled ? stateDisabled : "");
 const rxReadOnly = $derived(snapshot.context.readOnly ? stateReadOnly : "");
+$effect(() => {
+  return on(document, "focusin", () => {
+    console.log(document.activeElement);
+  });
+});
 </script>
 
 <!-- @component Capture input for a limited set of options. -->

package/dist/components/TagsInput/TagsInput.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">import * as tagsInput from "@zag-js/tags-input";
+import { useMachine, normalizeProps } from "@zag-js/svelte";
+import { useId } from "../../internal/use-id.js";
+let {
+  value = $bindable(),
+  placeholder = "",
+  // Root
+  base = "grid input",
+  gap = "gap-2",
+  padding = "p-3",
+  classes = "",
+  // Input: Add
+  inputBase = "input-ghost",
+  inputClasses = "",
+  // Tag List
+  tagListBase = "flex gap-2",
+  tagListClasses = "",
+  // Tag
+  tagBase = "chip",
+  tagBackground = "preset-filled",
+  tagClasses = "",
+  // Input: Edit
+  inputEditBase = "chip-input -translate-y-0.25",
+  tagEditBackground = "preset-outlined-surface-200-800",
+  inputEditClasses,
+  // Delete Button
+  buttonDeleteBase = "",
+  buttonDeleteClasses = "",
+  // State
+  stateDisabled = "disabled",
+  // Snippets
+  buttonDelete,
+  // Zag
+  ...zagProps
+} = $props();
+const [snapshot, send] = useMachine(
+  tagsInput.machine({
+    id: useId(),
+    onValueChange: (details) => {
+      value = details.value;
+    }
+  }),
+  {
+    context: {
+      ...zagProps,
+      get value() {
+        return $state.snapshot(value);
+      }
+    }
+  }
+);
+const api = $derived(tagsInput.connect(snapshot, send, normalizeProps));
+const rxDisabled = $derived(snapshot.context.disabled ? stateDisabled : "");
+</script>
+
+<!-- @component Capture a set of values from users via input and suggestions. -->
+
+<div {...api.getRootProps()} class="{base} {padding} {gap} {rxDisabled} {classes}" data-testid="tags">
+	<!-- Input -->
+	<input {...api.getInputProps()} {placeholder} class="{inputBase} {inputClasses}" data-testid="tags-input-add" />
+	<!-- Tag List -->
+	{#if api.value.length > 0}
+		<div class="{tagListBase} {tagListClasses}" data-testid="tags-list">
+			{#each api.value as value, index (value)}
+				{@const itemState = api.getItemState({ index, value })}
+				<!-- Tag -->
+				<div {...api.getItemProps({ value, index })} data-testid="tags-tag">
+					<!-- Display -->
+					<div
+						{...api.getItemPreviewProps({ index, value })}
+						class="{tagBase} {tagBackground} {tagClasses}"
+						style:display={itemState.editing ? 'none' : ''}
+						data-testid="tag-display"
+					>
+						<span>{value}</span>
+						<!-- Delete Button -->
+						<button
+							{...api.getItemDeleteTriggerProps({ index, value })}
+							class="{buttonDeleteBase} {buttonDeleteClasses}"
+							data-testid="tag-delete"
+						>
+							{#if buttonDelete}
+								{@render buttonDelete()}
+							{:else}
+								<strong>&times;</strong>
+							{/if}
+						</button>
+					</div>
+					<!-- Editing -->
+					<input
+						{...api.getItemInputProps({ index, value })}
+						class="{inputEditBase} {tagEditBackground} {inputEditClasses}"
+						style:display={itemState.editing ? '' : 'none'}
+						data-testid="tags-input-edit"
+					/>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,17 @@
+import type { TagsInputProps } 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;
+}
+/** Capture a set of values from users via input and suggestions. */
+declare const TagsInput: $$__sveltets_2_IsomorphicComponent<TagsInputProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type TagsInput = InstanceType<typeof TagsInput>;
+export default TagsInput;

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

@@ -0,0 +1,44 @@
+import * as tagsInput from '@zag-js/tags-input';
+import type { Snippet } from 'svelte';
+export interface TagsInputProps extends Omit<tagsInput.Context, 'id' | 'value'> {
+    /** Set the tag values. */
+    value?: tagsInput.Context['value'];
+    /** Set the add tag input placeholder. */
+    placeholder?: string;
+    /** Set base classes for the root. */
+    base?: string;
+    /** Set gap classes for the root. */
+    gap?: string;
+    /** Set padding classes for the root. */
+    padding?: string;
+    /** Provide arbitrary classes to the root. */
+    classes?: string;
+    /** Set base classes for the add tag input. */
+    inputBase?: string;
+    /** Provide arbitrary classes to the add tag input. */
+    inputClasses?: string;
+    /** Set base classes for the tag list. */
+    tagListBase?: string;
+    /** Provide arbitrary classes to the tag list. */
+    tagListClasses?: string;
+    /** Set base classes for each tag. */
+    tagBase?: string;
+    /** Set background classes for each tag. */
+    tagBackground?: string;
+    /** Provide arbitrary classes to each tag. */
+    tagClasses?: string;
+    /** Set base classes for the edit tag input. */
+    inputEditBase?: string;
+    /** Set background classes for the edit tag input. */
+    tagEditBackground?: string;
+    /** Provide arbitrary classes to the edit tag input. */
+    inputEditClasses?: string;
+    /** Set base classes for the delete button. */
+    buttonDeleteBase?: string;
+    /** Provide arbitrary classes to the delete button. */
+    buttonDeleteClasses?: string;
+    /** Set the component disabled state. */
+    stateDisabled?: string;
+    /** The delete button label snippet. */
+    buttonDelete?: Snippet;
+}

package/dist/components/TagsInput/types.js

@@ -0,0 +1 @@
+import * as tagsInput from '@zag-js/tags-input';

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as Accordion } from './components/Accordion/index.js';
 export { default as AppBar } from './components/AppBar/AppBar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as FileUpload } from './components/FileUpload/FileUpload.svelte';
+export { default as Pagination } from './components/Pagination/Pagination.svelte';
 export { default as Progress } from './components/Progress/Progress.svelte';
 export { default as ProgressRing } from './components/ProgressRing/ProgressRing.svelte';
 export { default as Nav } from './components/Nav/index.js';
@@ -9,4 +10,6 @@ export { default as Segment } from './components/Segment/index.js';
 export { default as Slider } from './components/Slider/Slider.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Tabs } from './components/Tab/index.js';
+export { default as TagsInput } from './components/TagsInput/TagsInput.svelte';
 export { default as Rating } from './components/Rating/index.js';
+export type { FileUploadApi } from './components/FileUpload/types.js';

package/dist/index.js

@@ -3,10 +3,12 @@
 // Do not export parent/child components. Use the dot-notation composition pattern:
 // https://next.skeleton.dev/docs/resources/contribute/components#dot-notation-syntax
 // (See Accordion, Nav, and Tabs for examples)
+// Components
 export { default as Accordion } from './components/Accordion/index.js';
 export { default as AppBar } from './components/AppBar/AppBar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as FileUpload } from './components/FileUpload/FileUpload.svelte';
+export { default as Pagination } from './components/Pagination/Pagination.svelte';
 export { default as Progress } from './components/Progress/Progress.svelte';
 export { default as ProgressRing } from './components/ProgressRing/ProgressRing.svelte';
 export { default as Nav } from './components/Nav/index.js';
@@ -14,4 +16,5 @@ export { default as Segment } from './components/Segment/index.js';
 export { default as Slider } from './components/Slider/Slider.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
 export { default as Tabs } from './components/Tab/index.js';
+export { default as TagsInput } from './components/TagsInput/TagsInput.svelte';
 export { default as Rating } from './components/Rating/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "1.0.0-next.7",
+  "version": "1.0.0-next.8",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "types": "./dist/index.d.ts",
@@ -25,13 +25,15 @@
     "@zag-js/accordion": "^0.65.1",
     "@zag-js/avatar": "^0.65.1",
     "@zag-js/file-upload": "^0.65.1",
+    "@zag-js/pagination": "^0.65.1",
     "@zag-js/progress": "^0.65.1",
     "@zag-js/radio-group": "^0.65.1",
     "@zag-js/rating-group": "^0.65.1",
     "@zag-js/slider": "^0.65.1",
     "@zag-js/svelte": "^0.65.1",
     "@zag-js/switch": "^0.65.1",
-    "@zag-js/tabs": "^0.65.1"
+    "@zag-js/tabs": "^0.65.1",
+    "@zag-js/tags-input": "^0.65.1"
   },
   "peerDependencies": {
     "svelte": "^5.0.0-next.193"
@@ -47,7 +49,7 @@
     "@testing-library/svelte": "^4.2.3",
     "autoprefixer": "^10.4.19",
     "jsdom": "^24.1.1",
-    "lucide-svelte": "^0.341.0",
+    "lucide-svelte": "^0.436.0",
     "postcss": "^8.4.39",
     "postcss-load-config": "^5.1.0",
     "publint": "^0.1.16",