@dryui/ui 0.2.2 → 0.4.0

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

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

package/dist/number-input/number-input.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLInputAttributes, 'size'> {
-	value?: number;
-	min?: number;
-	max?: number;
-	step?: number;
-	size?: 'sm' | 'md' | 'lg';
-	disabled?: boolean;
-}
-declare const NumberInput: import('svelte').Component<Props, {}, 'value'>;
-type NumberInput = ReturnType<typeof NumberInput>;
-export default NumberInput;

package/dist/option-swatch-group/option-swatch-group-item.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLButtonAttributes, 'value'> {
-	value: string;
-	disabled?: boolean;
-	unavailable?: boolean;
-	children: Snippet;
-}
-declare const OptionSwatchGroupItem: import('svelte').Component<Props, {}, ''>;
-type OptionSwatchGroupItem = ReturnType<typeof OptionSwatchGroupItem>;
-export default OptionSwatchGroupItem;

package/dist/pagination/pagination-link.svelte

@@ -1,80 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getPaginationCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		page: number;
-		children: Snippet;
-	}
-
-	let { page, class: className, children, ...rest }: Props = $props();
-
-	const ctx = getPaginationCtx();
-</script>
-
-<button
-	type="button"
-	aria-label="Go to page {page}"
-	aria-current={ctx.page === page ? 'page' : undefined}
-	data-state={ctx.page === page ? 'active' : 'inactive'}
-	data-pagination-button
-	class={className}
-	onclick={() => ctx.goto(page)}
-	{...rest}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-pagination-button] {
-		display: inline-grid;
-		grid-template-columns: minmax(var(--dry-space-10), max-content);
-		place-items: center;
-		height: var(--dry-space-10);
-		padding: var(--dry-space-1_5) var(--dry-space-3);
-		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		font-family: var(--dry-font-sans);
-		color: var(--dry-color-text-weak);
-		background: transparent;
-		border: 1px solid transparent;
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast),
-			border-color var(--dry-duration-fast),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover:not([disabled]) {
-			background: var(--dry-color-fill-hover);
-			border-color: var(--dry-color-stroke-strong);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-stroke-focus);
-			outline-offset: 2px;
-		}
-
-		&:active:not([disabled]) {
-			transform: translateY(1px);
-		}
-
-		&[disabled] {
-			color: var(--dry-color-text-disabled);
-			background: var(--dry-color-fill-disabled);
-			border-color: var(--dry-color-stroke-disabled);
-			cursor: not-allowed;
-		}
-
-		&[data-state='active'] {
-			background: transparent;
-			color: var(--dry-color-text-weak);
-			border-color: var(--dry-color-stroke-strong);
-		}
-
-		&[data-state='active']:hover:not([disabled]) {
-			background: var(--dry-color-fill-hover);
-			border-color: var(--dry-color-stroke-strong);
-		}
-	}
-</style>

package/dist/pagination/pagination-link.svelte.d.ts

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

package/dist/pagination/pagination-next.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getPaginationCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getPaginationCtx();
-</script>
-
-<button
-	type="button"
-	disabled={!ctx.canNext}
-	data-pagination-button
-	class={className}
-	onclick={() => ctx.next()}
-	aria-label="Go to next page"
-	{...rest}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-pagination-button] {
-		display: inline-grid;
-		grid-template-columns: minmax(var(--dry-space-10), max-content);
-		place-items: center;
-		height: var(--dry-space-10);
-		padding: var(--dry-space-1_5) var(--dry-space-3);
-		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		font-family: var(--dry-font-sans);
-		color: var(--dry-color-text-weak);
-		background: transparent;
-		border: 1px solid transparent;
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast),
-			border-color var(--dry-duration-fast),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover:not([disabled]) {
-			background: var(--dry-color-fill-hover);
-			border-color: var(--dry-color-stroke-strong);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-stroke-focus);
-			outline-offset: 2px;
-		}
-
-		&:active:not([disabled]) {
-			transform: translateY(1px);
-		}
-
-		&[disabled] {
-			color: var(--dry-color-text-disabled);
-			background: var(--dry-color-fill-disabled);
-			border-color: var(--dry-color-stroke-disabled);
-			cursor: not-allowed;
-		}
-	}
-</style>

package/dist/pagination/pagination-next.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 PaginationNext: import('svelte').Component<Props, {}, ''>;
-type PaginationNext = ReturnType<typeof PaginationNext>;
-export default PaginationNext;

package/dist/pagination/pagination-previous.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getPaginationCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getPaginationCtx();
-</script>
-
-<button
-	type="button"
-	disabled={!ctx.canPrevious}
-	data-pagination-button
-	class={className}
-	onclick={() => ctx.previous()}
-	aria-label="Go to previous page"
-	{...rest}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-pagination-button] {
-		display: inline-grid;
-		grid-template-columns: minmax(var(--dry-space-10), max-content);
-		place-items: center;
-		height: var(--dry-space-10);
-		padding: var(--dry-space-1_5) var(--dry-space-3);
-		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		font-family: var(--dry-font-sans);
-		color: var(--dry-color-text-weak);
-		background: transparent;
-		border: 1px solid transparent;
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast),
-			border-color var(--dry-duration-fast),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover:not([disabled]) {
-			background: var(--dry-color-fill-hover);
-			border-color: var(--dry-color-stroke-strong);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-stroke-focus);
-			outline-offset: 2px;
-		}
-
-		&:active:not([disabled]) {
-			transform: translateY(1px);
-		}
-
-		&[disabled] {
-			color: var(--dry-color-text-disabled);
-			background: var(--dry-color-fill-disabled);
-			border-color: var(--dry-color-stroke-disabled);
-			cursor: not-allowed;
-		}
-	}
-</style>

package/dist/pagination/pagination-previous.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 PaginationPrevious: import('svelte').Component<Props, {}, ''>;
-type PaginationPrevious = ReturnType<typeof PaginationPrevious>;
-export default PaginationPrevious;

package/dist/phone-input/phone-input.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { CountryInfo } from '@dryui/primitives';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-	value?: string;
-	defaultCountry?: string;
-	disabled?: boolean;
-	name?: string;
-	placeholder?: string;
-	size?: 'sm' | 'md' | 'lg';
-	countries?: CountryInfo[];
-	onchange?: (value: string) => void;
-}
-declare const PhoneInput: import('svelte').Component<Props, {}, 'value'>;
-type PhoneInput = ReturnType<typeof PhoneInput>;
-export default PhoneInput;

package/dist/prompt-input/prompt-input.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { PromptInputProps } from './index.js';
-declare const PromptInput: import('svelte').Component<PromptInputProps, {}, 'value'>;
-type PromptInput = ReturnType<typeof PromptInput>;
-export default PromptInput;

package/dist/radio-group/radio-group-item.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends HTMLInputAttributes {
-	value: string;
-	disabled?: boolean;
-	children?: Snippet;
-}
-declare const RadioGroupItem: import('svelte').Component<Props, {}, ''>;
-type RadioGroupItem = ReturnType<typeof RadioGroupItem>;
-export default RadioGroupItem;

package/dist/range-calendar/range-calendar-grid.svelte.d.ts

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

package/dist/rating/rating.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-	value?: number;
-	max?: number;
-	disabled?: boolean;
-	readonly?: boolean;
-	allowHalf?: boolean;
-	onValueChange?: (value: number) => void;
-	size?: 'sm' | 'md' | 'lg';
-}
-declare const Rating: import('svelte').Component<Props, {}, 'value'>;
-type Rating = ReturnType<typeof Rating>;
-export default Rating;

package/dist/rich-text-editor/rich-text-editor-toolbar.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {}
-declare const RichTextEditorToolbar: import('svelte').Component<Props, {}, ''>;
-type RichTextEditorToolbar = ReturnType<typeof RichTextEditorToolbar>;
-export default RichTextEditorToolbar;

package/dist/scroll-to-top/scroll-to-top.svelte

@@ -1,162 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props {
-		threshold?: number;
-		target?: HTMLElement;
-		behavior?: ScrollBehavior;
-		position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
-		class?: string;
-	}
-
-	let {
-		threshold = 300,
-		target,
-		behavior = 'smooth',
-		position = 'bottom-right',
-		class: className
-	}: Props = $props();
-
-	let visible = $state(false);
-
-	function scrollToTop() {
-		if (target) {
-			target.scrollTo({ top: 0, behavior });
-		} else {
-			window.scrollTo({ top: 0, behavior });
-		}
-	}
-
-	$effect(() => {
-		const el = target ?? window;
-
-		function handleScroll() {
-			if (target) {
-				visible = target.scrollTop > threshold;
-			} else {
-				visible = window.scrollY > threshold;
-			}
-		}
-
-		handleScroll();
-		el.addEventListener('scroll', handleScroll, { passive: true });
-
-		return () => {
-			el.removeEventListener('scroll', handleScroll);
-		};
-	});
-</script>
-
-<button
-	type="button"
-	data-scroll-to-top
-	data-position={position}
-	data-visible={visible || undefined}
-	class={className}
-	onclick={scrollToTop}
-	aria-label="Scroll to top"
->
-	<svg
-		data-icon
-		width="20"
-		height="20"
-		viewBox="0 0 20 20"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-	>
-		<path
-			d="M10 15V5M10 5L5 10M10 5L15 10"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-	</svg>
-</button>
-
-<style>
-	[data-scroll-to-top] {
-		--dry-scroll-to-top-size: 44px;
-		--dry-scroll-to-top-bg: var(--dry-color-bg-overlay);
-		--dry-scroll-to-top-color: var(--dry-color-text-strong);
-		--dry-scroll-to-top-border: var(--dry-color-stroke-weak);
-		--dry-scroll-to-top-shadow: var(--dry-shadow-md);
-		--dry-scroll-to-top-radius: var(--dry-radius-full);
-		--dry-scroll-to-top-offset: var(--dry-space-6);
-		--dry-scroll-to-top-z-index: var(--dry-layer-overlay);
-
-		position: fixed;
-		z-index: var(--dry-scroll-to-top-z-index);
-		display: grid;
-		place-items: center;
-		height: var(--dry-scroll-to-top-size);
-		aspect-ratio: 1;
-		padding: 0;
-		background: var(--dry-scroll-to-top-bg);
-		color: var(--dry-scroll-to-top-color);
-		border: 1px solid var(--dry-scroll-to-top-border);
-		border-radius: var(--dry-scroll-to-top-radius);
-		box-shadow: var(--dry-scroll-to-top-shadow);
-		cursor: pointer;
-		opacity: 0;
-		pointer-events: none;
-		transition:
-			opacity var(--dry-duration-normal) var(--dry-ease-emphasized),
-			transform var(--dry-duration-normal) var(--dry-ease-emphasized);
-		transform: translateY(var(--dry-motion-distance-xs));
-
-		&[data-visible] {
-			opacity: 1;
-			pointer-events: auto;
-			transform: translateY(0);
-		}
-
-		&:hover {
-			--dry-scroll-to-top-bg: color-mix(
-				in srgb,
-				var(--dry-color-fill-brand) 8%,
-				var(--dry-color-bg-overlay)
-			);
-			--dry-scroll-to-top-color: var(--dry-color-fill-brand);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: 2px;
-		}
-
-		&:active {
-			transform: translateY(1px);
-		}
-	}
-
-	[data-icon] {
-		display: block;
-	}
-
-	[data-position='bottom-right'] {
-		bottom: var(--dry-scroll-to-top-offset);
-		right: var(--dry-scroll-to-top-offset);
-	}
-
-	[data-position='bottom-left'] {
-		bottom: var(--dry-scroll-to-top-offset);
-		left: var(--dry-scroll-to-top-offset);
-	}
-
-	[data-position='bottom-center'] {
-		bottom: var(--dry-scroll-to-top-offset);
-		left: 50%;
-		transform: translateX(-50%) translateY(var(--dry-motion-distance-xs));
-
-		&[data-visible] {
-			transform: translateX(-50%) translateY(0);
-		}
-
-		&:active {
-			transform: translateX(-50%) translateY(1px);
-		}
-	}
-</style>

package/dist/scroll-to-top/scroll-to-top.svelte.d.ts

@@ -1,10 +0,0 @@
-interface Props {
-	threshold?: number;
-	target?: HTMLElement;
-	behavior?: ScrollBehavior;
-	position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
-	class?: string;
-}
-declare const ScrollToTop: import('svelte').Component<Props, {}, ''>;
-type ScrollToTop = ReturnType<typeof ScrollToTop>;
-export default ScrollToTop;

package/dist/segmented-control/segmented-control-item.svelte

@@ -1,141 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getSegmentedControlCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		value: string;
-		disabled?: boolean;
-		children: Snippet;
-	}
-
-	let { value, disabled = false, class: className, children, onclick, ...rest }: Props = $props();
-
-	const ctx = getSegmentedControlCtx();
-	const isSelected = $derived(ctx.value === value);
-	const isDisabled = $derived(disabled || ctx.disabled);
-
-	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
-		if (isDisabled) return;
-		ctx.select(value);
-		onclick?.(event);
-	}
-</script>
-
-<button
-	type="button"
-	aria-pressed={isSelected}
-	data-part="item"
-	data-segmented-control-item
-	data-state={isSelected ? 'on' : 'off'}
-	data-orientation={ctx.orientation}
-	data-disabled={isDisabled || undefined}
-	disabled={isDisabled}
-	class={className}
-	onclick={handleClick}
-	{...rest}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-part='item'] {
-		appearance: none;
-		border: 1px solid var(--dry-sc-border, var(--dry-color-stroke-weak));
-		background: var(--dry-sc-bg, var(--dry-color-fill));
-		color: var(--dry-sc-foreground, var(--dry-color-text-strong));
-		display: inline-grid;
-		place-items: center;
-		gap: var(--dry-space-2);
-		min-height: var(--dry-space-10);
-		padding: var(--dry-space-2) var(--dry-space-4);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		font-weight: 500;
-		line-height: 1.25;
-		cursor: pointer;
-		user-select: none;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover:not(:disabled):not([data-state='on']) {
-			background: var(--dry-color-fill-hover);
-		}
-
-		&:active:not(:disabled) {
-			transform: translateY(1px);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-stroke-focus);
-			outline-offset: -2px;
-			position: relative;
-			z-index: 1;
-		}
-
-		&[data-state='on'] {
-			background: var(--dry-sc-selected-bg);
-			color: var(--dry-sc-selected-color, var(--dry-color-text-strong));
-			border-color: var(--dry-sc-selected-border);
-			box-shadow:
-				inset 0 0 0 1px var(--dry-sc-selected-border),
-				var(--dry-shadow-sm);
-			font-weight: 600;
-			position: relative;
-			z-index: 1;
-		}
-
-		&[data-state='on']:hover:not(:disabled) {
-			background: var(--dry-sc-selected-bg);
-			border-color: var(--dry-sc-selected-border);
-		}
-
-		&:disabled,
-		&[data-disabled] {
-			background: var(--dry-color-fill-disabled);
-			border-color: var(--dry-color-stroke-disabled);
-			color: var(--dry-color-text-disabled);
-			cursor: not-allowed;
-			opacity: 1;
-		}
-	}
-
-	[data-orientation='horizontal'] {
-		border-radius: 0;
-
-		&:first-child {
-			border-top-left-radius: var(--dry-sc-radius, var(--dry-radius-lg));
-			border-bottom-left-radius: var(--dry-sc-radius, var(--dry-radius-lg));
-		}
-
-		&:last-child {
-			border-top-right-radius: var(--dry-sc-radius, var(--dry-radius-lg));
-			border-bottom-right-radius: var(--dry-sc-radius, var(--dry-radius-lg));
-		}
-
-		&:not(:first-child) {
-			margin-inline-start: -1px;
-		}
-	}
-
-	[data-orientation='vertical'] {
-		border-radius: 0;
-
-		&:first-child {
-			border-top-left-radius: var(--dry-sc-radius, var(--dry-radius-lg));
-			border-top-right-radius: var(--dry-sc-radius, var(--dry-radius-lg));
-		}
-
-		&:last-child {
-			border-bottom-left-radius: var(--dry-sc-radius, var(--dry-radius-lg));
-			border-bottom-right-radius: var(--dry-sc-radius, var(--dry-radius-lg));
-		}
-
-		&:not(:first-child) {
-			margin-block-start: -1px;
-		}
-	}
-</style>

package/dist/segmented-control/segmented-control-item.svelte.d.ts

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

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

@@ -1,14 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-	open?: boolean;
-	value?: string;
-	disabled?: boolean;
-	name?: string;
-	class?: string;
-	options?: Array<string | { value: string; label: string }>;
-	placeholder?: string;
-	children?: Snippet;
-}
-declare const SelectRoot: import('svelte').Component<Props, {}, 'value' | 'open'>;
-type SelectRoot = ReturnType<typeof SelectRoot>;
-export default SelectRoot;