@dryui/ui 0.3.0 → 0.4.1

package/dist/file-select/file-select-clear.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getFileSelectCtx } from './context.svelte.js';
-
-	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
-		children?: Snippet | undefined;
-	}
-
-	let { children, class: className, ...rest }: Props = $props();
-	const ctx = getFileSelectCtx();
-
-	const hidden = $derived(!ctx.value || ctx.disabled);
-</script>
-
-{#if !hidden}
-	<button
-		type="button"
-		onclick={ctx.clear}
-		aria-label="Clear selection"
-		data-fs-clear
-		data-disabled={ctx.disabled || undefined}
-		{...rest}
-	>
-		{#if children}
-			{@render children()}
-		{:else}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				aria-hidden="true"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg
-			>
-		{/if}
-	</button>
-{/if}
-
-<style>
-	[data-fs-clear] {
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-space-8);
-		aspect-ratio: 1;
-		padding: 0;
-		color: var(--dry-color-text-weak);
-		background: transparent;
-		border: none;
-		border-radius: var(--dry-radius-sm);
-		cursor: pointer;
-		transition:
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			background var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-fs-clear] svg {
-		height: 0.875rem;
-		aspect-ratio: 1;
-	}
-
-	[data-fs-clear]:hover {
-		color: var(--dry-color-text-error);
-		background: color-mix(in srgb, var(--dry-color-fill-error) 10%, transparent);
-	}
-
-	[data-fs-clear]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 1px;
-	}
-</style>

package/dist/file-select/file-select-clear.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLButtonAttributes, 'children'> {
-	children?: Snippet | undefined;
-}
-declare const FileSelectClear: import('svelte').Component<Props, {}, ''>;
-type FileSelectClear = ReturnType<typeof FileSelectClear>;
-export default FileSelectClear;

package/dist/file-select/file-select-trigger.svelte

@@ -1,84 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getFileSelectCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		size?: 'sm' | 'md' | 'lg';
-		children: Snippet;
-	}
-
-	let { children, class: className, size = 'md', ...rest }: Props = $props();
-	const ctx = getFileSelectCtx();
-</script>
-
-<button
-	type="button"
-	onclick={ctx.request}
-	disabled={ctx.disabled || ctx.loading || undefined}
-	data-fs-trigger
-	data-loading={ctx.loading || undefined}
-	data-disabled={ctx.disabled || undefined}
-	data-size={size}
-	{...rest}
-	class={className}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-fs-trigger] {
-		display: inline-grid;
-		place-items: center;
-		gap: var(--dry-space-2);
-		padding: var(--dry-space-2) var(--dry-space-3);
-		font-size: var(--dry-type-small-size);
-		font-family: var(--dry-font-sans);
-		font-weight: 500;
-		line-height: 1.25;
-		color: var(--dry-color-text-brand);
-		background: transparent;
-		border: 1px solid var(--dry-color-stroke-brand, var(--dry-color-fill-brand));
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		white-space: nowrap;
-		user-select: none;
-		min-height: var(--dry-space-10);
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-fs-trigger]:hover:not(:disabled) {
-		background: color-mix(in srgb, var(--dry-color-fill-brand) 8%, transparent);
-	}
-
-	[data-fs-trigger]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-fs-trigger]:active:not(:disabled) {
-		transform: translateY(1px);
-	}
-
-	[data-fs-trigger]:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-
-	[data-fs-trigger][data-size='sm'] {
-		padding: var(--dry-space-1_5) var(--dry-space-2);
-		font-size: var(--dry-type-tiny-size);
-		border-radius: var(--dry-radius-sm);
-		min-height: var(--dry-space-8);
-	}
-
-	[data-fs-trigger][data-size='lg'] {
-		padding: var(--dry-space-3) var(--dry-space-4);
-		font-size: var(--dry-type-heading-4-size);
-		border-radius: var(--dry-radius-lg);
-		min-height: var(--dry-space-12);
-	}
-</style>

package/dist/file-select/file-select-trigger.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	size?: 'sm' | 'md' | 'lg';
-	children: Snippet;
-}
-declare const FileSelectTrigger: import('svelte').Component<Props, {}, ''>;
-type FileSelectTrigger = ReturnType<typeof FileSelectTrigger>;
-export default FileSelectTrigger;

package/dist/file-upload/file-upload-item-delete.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getFileUploadCtx } from './context.svelte.js';
-
-	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
-		index: number;
-		children?: Snippet | undefined;
-	}
-
-	let { index, children, onclick, class: className, ...rest }: Props = $props();
-
-	const ctx = getFileUploadCtx();
-
-	function handleClick(e: MouseEvent & { currentTarget: HTMLButtonElement }) {
-		e.stopPropagation();
-		ctx.removeFile(index);
-		if (onclick) (onclick as (e: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(e);
-	}
-</script>
-
-<button
-	type="button"
-	disabled={ctx.disabled}
-	data-disabled={ctx.disabled || undefined}
-	data-fu-item-delete
-	aria-label="Remove file"
-	onclick={handleClick}
-	{...rest}
-	class={className}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			aria-hidden="true"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg
-		>
-	{/if}
-</button>
-
-<style>
-	[data-fu-item-delete] {
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-space-12);
-		aspect-ratio: 1;
-		padding: 0;
-		color: var(--dry-color-text-weak);
-		background: transparent;
-		border: none;
-		border-radius: var(--dry-radius-sm);
-		cursor: pointer;
-		transition:
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			background var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-fu-item-delete] svg {
-		height: 1rem;
-		aspect-ratio: 1;
-	}
-
-	[data-fu-item-delete]:hover:not([data-disabled]) {
-		color: var(--dry-color-text-error);
-		background: color-mix(in srgb, var(--dry-color-fill-error) 10%, transparent);
-	}
-
-	[data-fu-item-delete]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 1px;
-	}
-
-	[data-fu-item-delete][data-disabled] {
-		opacity: 0.5;
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-</style>

package/dist/file-upload/file-upload-item-delete.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	index: number;
-	children?: Snippet;
-}
-declare const FileUploadItemDelete: import('svelte').Component<Props, {}, ''>;
-type FileUploadItemDelete = ReturnType<typeof FileUploadItemDelete>;
-export default FileUploadItemDelete;

package/dist/file-upload/file-upload-root.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-	files?: File[];
-	accept?: string;
-	multiple?: boolean;
-	maxSize?: number;
-	maxFiles?: number;
-	disabled?: boolean;
-	onFilesChange?: (files: File[]) => void;
-	class?: string;
-	children: Snippet;
-}
-declare const FileUploadRoot: import('svelte').Component<Props, {}, 'files'>;
-type FileUploadRoot = ReturnType<typeof FileUploadRoot>;
-export default FileUploadRoot;

package/dist/file-upload/file-upload-trigger.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getFileUploadCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		size?: 'sm' | 'md' | 'lg';
-		children: Snippet;
-	}
-
-	let { children, onclick, class: className, size = 'md', ...rest }: Props = $props();
-
-	const ctx = getFileUploadCtx();
-
-	function handleClick(e: MouseEvent & { currentTarget: HTMLButtonElement }) {
-		if (!ctx.disabled) ctx.openFileDialog();
-		if (onclick) (onclick as (e: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(e);
-	}
-</script>
-
-<button
-	type="button"
-	disabled={ctx.disabled}
-	data-disabled={ctx.disabled || undefined}
-	onclick={handleClick}
-	{...rest}
-	class={className}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-fu-trigger] {
-		display: inline-grid;
-		place-items: center;
-		min-height: var(--dry-space-12);
-		gap: var(--dry-space-2);
-		padding: var(--dry-space-2_5) var(--dry-space-4);
-		font-size: var(--dry-type-small-size);
-		font-family: var(--dry-font-sans);
-		font-weight: 500;
-		line-height: 1.25;
-		color: var(--dry-color-on-brand);
-		background: var(--dry-color-fill-brand);
-		border: 1px solid transparent;
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		white-space: nowrap;
-		user-select: none;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			opacity var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-fu-trigger]:hover:not([data-disabled]) {
-		background: var(--dry-color-fill-brand-hover);
-	}
-
-	[data-fu-trigger]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-fu-trigger]:active:not([data-disabled]) {
-		transform: translateY(1px);
-	}
-
-	[data-fu-trigger][data-disabled] {
-		opacity: 0.5;
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-
-	[data-fu-trigger][data-size='sm'] {
-		padding: var(--dry-space-1_5) var(--dry-space-3);
-		font-size: var(--dry-type-tiny-size);
-		border-radius: var(--dry-radius-sm);
-	}
-
-	[data-fu-trigger][data-size='lg'] {
-		padding: var(--dry-space-3) var(--dry-space-6);
-		font-size: var(--dry-type-heading-4-size);
-		border-radius: var(--dry-radius-lg);
-	}
-</style>

package/dist/file-upload/file-upload-trigger.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	size?: 'sm' | 'md' | 'lg';
-	children: Snippet;
-}
-declare const FileUploadTrigger: import('svelte').Component<Props, {}, ''>;
-type FileUploadTrigger = ReturnType<typeof FileUploadTrigger>;
-export default FileUploadTrigger;

package/dist/input-group/input-group-action.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getAffixGroupCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children?: Snippet;
-	}
-
-	let { disabled = false, children, type = 'button', class: className, ...rest }: Props = $props();
-
-	const ctx = getAffixGroupCtx();
-
-	let isDisabled = $derived(disabled || ctx.disabled);
-</script>
-
-<button
-	{type}
-	disabled={isDisabled}
-	data-part="action"
-	data-size={ctx.size}
-	data-disabled={isDisabled || undefined}
-	data-invalid={ctx.invalid || undefined}
-	data-orientation={ctx.orientation}
-	{...rest}
-	data-input-group-action
-	class={className}
->
-	{@render children?.()}
-</button>
-
-<style>
-	[data-input-group-action] {
-		display: inline-grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0 var(--dry-input-group-padding-x);
-		white-space: nowrap;
-		appearance: none;
-		border: 0;
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		cursor: pointer;
-		font: inherit;
-		font-size: var(--dry-input-group-font-size);
-		transition: background-color 160ms ease;
-	}
-
-	[data-input-group-action][data-orientation='horizontal'] {
-		grid-column: 5;
-	}
-
-	[data-input-group-action]:hover:not(:disabled) {
-		background: var(--dry-color-fill-weak);
-	}
-
-	[data-input-group-action]:focus-visible {
-		outline: none;
-		background: var(--dry-color-fill-weak);
-	}
-
-	[data-input-group-action]:disabled {
-		cursor: not-allowed;
-	}
-</style>

package/dist/input-group/input-group-action.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	children?: Snippet;
-}
-declare const InputGroupAction: import('svelte').Component<Props, {}, ''>;
-type InputGroupAction = ReturnType<typeof InputGroupAction>;
-export default InputGroupAction;

package/dist/internal/result-card-shell.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'role'> {
-		as?: 'div' | 'button' | 'a';
-		role?: HTMLAttributes<HTMLElement>['role'];
-		selected?: boolean;
-		children: Snippet;
-	}
-
-	let {
-		as = 'div',
-		role = 'region',
-		selected,
-		class: className,
-		children,
-		...rest
-	}: Props = $props();
-</script>
-
-<svelte:element
-	this={as}
-	{role}
-	data-selected={selected ? '' : undefined}
-	class={className}
-	{...rest}
->
-	{@render children()}
-</svelte:element>

package/dist/internal/result-card-shell.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLAttributes<HTMLElement>, 'role'> {
-    as?: 'div' | 'button' | 'a';
-    role?: HTMLAttributes<HTMLElement>['role'];
-    selected?: boolean;
-    children: Snippet;
-}
-declare const ResultCardShell: import("svelte").Component<Props, {}, "">;
-type ResultCardShell = ReturnType<typeof ResultCardShell>;
-export default ResultCardShell;

package/dist/mega-menu/mega-menu-trigger.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	children: Snippet;
-}
-declare const MegaMenuTrigger: import('svelte').Component<Props, {}, ''>;
-type MegaMenuTrigger = ReturnType<typeof MegaMenuTrigger>;
-export default MegaMenuTrigger;

package/dist/menubar/menubar-trigger.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	children: Snippet;
-}
-declare const MenubarTrigger: import('svelte').Component<Props, {}, ''>;
-type MenubarTrigger = ReturnType<typeof MenubarTrigger>;
-export default MenubarTrigger;

package/dist/multi-select-combobox/multi-select-combobox-root.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { MultiSelectComboboxRootProps } from '@dryui/primitives';
-declare const MultiSelectComboboxRoot: import('svelte').Component<
-	MultiSelectComboboxRootProps,
-	{},
-	'open' | 'value' | 'query'
->;
-type MultiSelectComboboxRoot = ReturnType<typeof MultiSelectComboboxRoot>;
-export default MultiSelectComboboxRoot;

package/dist/multi-select-combobox/multi-select-combobox-selection-remove.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getMultiSelectComboboxCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		value: string;
-		label?: string | undefined;
-	}
-
-	let { class: className, value, label, onclick, ...rest }: Props = $props();
-
-	const ctx = getMultiSelectComboboxCtx();
-
-	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
-		if (ctx.disabled) {
-			return;
-		}
-
-		ctx.removeValue(value);
-		ctx.focusInput();
-
-		if (onclick) {
-			(onclick as (event: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(event);
-		}
-	}
-</script>
-
-<button
-	type="button"
-	aria-label={`Remove selection: ${label ?? value}`}
-	disabled={ctx.disabled}
-	data-multi-select-selection-remove
-	data-disabled={ctx.disabled || undefined}
-	class={className}
-	onclick={handleClick}
-	{...rest}
-></button>
-
-<style>
-	[data-multi-select-selection-remove] {
-		display: inline-grid;
-		place-items: center;
-		aspect-ratio: 1;
-		height: 16px;
-		padding: 0;
-		border: none;
-		background: transparent;
-		color: inherit;
-		cursor: pointer;
-		border-radius: var(--dry-radius-full);
-		transition:
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			background var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-multi-select-selection-remove]::after {
-		content: '\00d7';
-		font-size: 14px;
-		line-height: 1;
-		font-weight: 400;
-	}
-
-	[data-multi-select-selection-remove]:hover:not(:disabled) {
-		background: var(--dry-color-fill-hover);
-	}
-
-	[data-multi-select-selection-remove]:focus-visible {
-		outline: 2px solid var(--dry-color-stroke-focus);
-		outline-offset: -1px;
-	}
-
-	[data-multi-select-selection-remove]:disabled {
-		color: var(--dry-color-text-disabled);
-		cursor: not-allowed;
-	}
-</style>

package/dist/multi-select-combobox/multi-select-combobox-selection-remove.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { MultiSelectComboboxSelectionRemoveProps } from '@dryui/primitives';
-declare const MultiSelectComboboxSelectionRemove: import('svelte').Component<
-	MultiSelectComboboxSelectionRemoveProps,
-	{},
-	''
->;
-type MultiSelectComboboxSelectionRemove = ReturnType<typeof MultiSelectComboboxSelectionRemove>;
-export default MultiSelectComboboxSelectionRemove;

package/dist/navigation-menu/navigation-menu-trigger.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	children: Snippet;
-}
-declare const NavigationMenuTrigger: import('svelte').Component<Props, {}, ''>;
-type NavigationMenuTrigger = ReturnType<typeof NavigationMenuTrigger>;
-export default NavigationMenuTrigger;

package/dist/notification-center/notification-center-trigger.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getNotificationCenterCtx } from './context.svelte.js';
-
-	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
-		children: Snippet<[{ unreadCount: number }]>;
-	}
-
-	let { class: className, children, onclick, ...rest }: Props = $props();
-
-	const ctx = getNotificationCenterCtx();
-
-	let el = $state<HTMLButtonElement>();
-
-	$effect(() => {
-		if (el) {
-			ctx.triggerEl = el;
-		}
-	});
-</script>
-
-<button
-	bind:this={el}
-	id={ctx.triggerId}
-	popovertarget={ctx.panelId}
-	aria-expanded={ctx.open}
-	aria-haspopup="dialog"
-	data-notification-center-trigger
-	class={className}
-	{onclick}
-	{...rest}
->
-	{@render children({ unreadCount: ctx.unreadCount })}
-</button>
-
-<style>
-	[data-notification-center-trigger] {
-		position: relative;
-		display: inline-grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-space-2);
-		padding: var(--dry-space-2) var(--dry-space-4);
-		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: var(--dry-radius-md);
-		background: var(--dry-color-bg-raised);
-		color: var(--dry-color-text-strong);
-		box-shadow: var(--dry-shadow-sm);
-		font: inherit;
-		cursor: pointer;
-	}
-
-	[data-notification-center-trigger]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-</style>