@dryui/ui 0.3.0 → 0.4.0

package/dist/virtual-list/virtual-list.svelte.d.ts

@@ -1,47 +1,34 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 declare function $$render<T>(): {
-	props: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
-		items: T[];
-		itemHeight: number | ((index: number) => number);
-		overscan?: number | undefined;
-		children: Snippet<
-			[
-				{
-					item: T;
-					index: number;
-					style: string;
-				}
-			]
-		>;
-	};
-	exports: {};
-	bindings: '';
-	slots: {};
-	events: {};
+    props: Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        items: T[];
+        itemHeight: number | ((index: number) => number);
+        overscan?: number | undefined;
+        children: Snippet<[{
+            item: T;
+            index: number;
+            style: string;
+        }]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
 };
 declare class __sveltets_Render<T> {
-	props(): ReturnType<typeof $$render<T>>['props'];
-	events(): ReturnType<typeof $$render<T>>['events'];
-	slots(): ReturnType<typeof $$render<T>>['slots'];
-	bindings(): '';
-	exports(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
 interface $$IsomorphicComponent {
-	new <T>(
-		options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>
-	): import('svelte').SvelteComponent<
-		ReturnType<__sveltets_Render<T>['props']>,
-		ReturnType<__sveltets_Render<T>['events']>,
-		ReturnType<__sveltets_Render<T>['slots']>
-	> & {
-		$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-	} & ReturnType<__sveltets_Render<T>['exports']>;
-	<T>(
-		internal: unknown,
-		props: ReturnType<__sveltets_Render<T>['props']> & {}
-	): ReturnType<__sveltets_Render<T>['exports']>;
-	z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const VirtualList: $$IsomorphicComponent;
 type VirtualList<T> = InstanceType<typeof VirtualList<T>>;

package/dist/visually-hidden/visually-hidden.svelte.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -1509,7 +1509,7 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^0.3.0"
+    "@dryui/primitives": "^0.4.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"

package/dist/accordion/accordion-trigger.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getAccordionCtx, getAccordionItemCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getAccordionCtx();
-	const itemCtx = getAccordionItemCtx();
-</script>
-
-<button
-	type="button"
-	aria-expanded={itemCtx.open}
-	aria-controls={itemCtx.contentId}
-	data-state={itemCtx.open ? 'open' : 'closed'}
-	data-disabled={itemCtx.disabled || undefined}
-	data-accordion-trigger
-	disabled={itemCtx.disabled}
-	class={className}
-	onclick={() => ctx.toggle(itemCtx.value)}
-	{...rest}
->
-	{@render children()}
-	<svg
-		data-indicator
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg
-	>
-</button>
-
-<style>
-	[data-accordion-trigger] {
-		display: grid;
-		grid-template-columns: 1fr 1rem;
-		align-items: center;
-		gap: var(--dry-space-2);
-		padding: var(--dry-space-4);
-		background: none;
-		border: none;
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		font-weight: 600;
-		font-family: var(--dry-font-sans);
-		cursor: pointer;
-		color: var(--dry-color-text-strong);
-		text-align: left;
-		min-height: var(--dry-space-12);
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover:not([data-disabled]) {
-			background: color-mix(in srgb, var(--dry-color-fill-brand) 5%, transparent);
-		}
-
-		&:active:not([data-disabled]) {
-			transform: translateY(1px);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: -2px;
-		}
-
-		&[data-disabled] {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-
-		&[data-state='open'] [data-indicator] {
-			transform: rotate(180deg);
-		}
-
-		& [data-indicator] {
-			height: 1rem;
-			aspect-ratio: 1;
-			opacity: 0.5;
-			transition: transform var(--dry-duration-fast) var(--dry-ease-default);
-		}
-	}
-</style>

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

package/dist/alert/alert-close.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getAlertCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children?: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getAlertCtx();
-</script>
-
-<button
-	type="button"
-	aria-label="Dismiss alert"
-	data-alert-close
-	class={className}
-	onclick={() => ctx.dismiss()}
-	{...rest}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		<span aria-hidden="true">&times;</span>
-	{/if}
-</button>
-
-<style>
-	[data-alert-close] {
-		grid-column: -2 / -1;
-		grid-row: 1 / 3;
-		align-self: start;
-		display: grid;
-		place-items: center;
-		height: var(--dry-space-11);
-		aspect-ratio: 1;
-		padding-block: 0;
-		padding-inline: var(--dry-alert-gap, var(--dry-space-3)) 0;
-		border: none;
-		border-radius: var(--dry-radius-sm);
-		background: transparent;
-		color: var(--dry-color-text-weak);
-		cursor: pointer;
-		font-size: var(--dry-type-heading-4-size);
-		line-height: 1;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-alert-close]:hover {
-		background: var(--dry-color-fill);
-		color: var(--dry-color-text-strong);
-	}
-
-	[data-alert-close]:active {
-		background: var(--dry-color-fill-hover);
-		transform: translateY(1px);
-	}
-
-	[data-alert-close]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -2px;
-	}
-</style>

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

package/dist/alert-dialog/alert-dialog-action.svelte

@@ -1,74 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLButtonAttributes {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<button type="button" data-alert-dialog-action class={className} {...rest}>
-	{@render children()}
-</button>
-
-<style>
-	[data-alert-dialog-action] {
-		--dry-btn-accent: var(--dry-color-fill-error);
-		--dry-btn-accent-hover: var(--dry-color-fill-error-hover);
-		--dry-btn-accent-active: var(--dry-color-fill-error-hover);
-		--dry-btn-on-accent: var(--dry-color-on-error);
-		--dry-btn-border: transparent;
-
-		cursor: pointer;
-		background: var(--dry-btn-accent);
-		color: var(--dry-btn-on-accent);
-		border: 1px solid var(--dry-btn-border);
-		padding: var(--dry-space-2_5) var(--dry-space-4);
-		border-radius: var(--dry-radius-md);
-		box-shadow: var(--dry-shadow-raised);
-		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;
-		letter-spacing: -0.01em;
-		min-height: var(--dry-space-12);
-		display: inline-grid;
-		grid-auto-flow: column;
-		place-items: center;
-		gap: var(--dry-space-2);
-		text-decoration: none;
-		white-space: nowrap;
-		user-select: none;
-		transition:
-			background 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),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			opacity var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-alert-dialog-action]:hover {
-		background: var(--dry-btn-accent-hover);
-	}
-
-	[data-alert-dialog-action]:active:not(:disabled) {
-		background: var(--dry-btn-accent-active);
-		transform: translateY(1px);
-	}
-
-	[data-alert-dialog-action]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
-	}
-
-	[data-alert-dialog-action]:disabled {
-		background: var(--dry-color-fill-disabled);
-		color: var(--dry-color-text-disabled);
-		border-color: var(--dry-color-stroke-disabled);
-		cursor: not-allowed;
-		box-shadow: none;
-	}
-</style>

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

package/dist/alert-dialog/alert-dialog-cancel.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getAlertDialogCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getAlertDialogCtx();
-</script>
-
-<button
-	type="button"
-	data-alert-dialog-cancel
-	onclick={() => ctx.close()}
-	class={className}
-	{...rest}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-alert-dialog-cancel] {
-		--dry-btn-accent-fg: var(--dry-color-text-brand);
-		--dry-btn-accent-stroke: var(--dry-color-stroke-brand);
-
-		cursor: pointer;
-		background: transparent;
-		border: 1px solid var(--dry-btn-accent-stroke);
-		padding: var(--dry-space-2_5) var(--dry-space-4);
-		color: var(--dry-btn-accent-fg);
-		border-radius: var(--dry-radius-sm);
-		box-shadow: var(--dry-shadow-raised);
-		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;
-		letter-spacing: -0.01em;
-		min-height: var(--dry-space-12);
-		display: inline-grid;
-		grid-auto-flow: column;
-		place-items: center;
-		gap: var(--dry-space-2);
-		text-decoration: none;
-		white-space: nowrap;
-		user-select: none;
-		transition:
-			background 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),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			opacity var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-alert-dialog-cancel]:hover {
-		background: var(--dry-color-bg-alternate);
-		border-color: var(--dry-color-stroke-strong);
-		color: var(--dry-color-text-strong);
-		box-shadow: var(--dry-shadow-sm);
-	}
-
-	[data-alert-dialog-cancel]:active:not(:disabled) {
-		background: var(--dry-color-fill);
-		border-color: var(--dry-color-stroke-strong);
-		color: var(--dry-color-text-strong);
-		transform: translateY(1px);
-	}
-
-	[data-alert-dialog-cancel]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
-	}
-
-	[data-alert-dialog-cancel]:disabled {
-		background: var(--dry-color-fill-disabled);
-		color: var(--dry-color-text-disabled);
-		border-color: var(--dry-color-stroke-disabled);
-		cursor: not-allowed;
-		box-shadow: none;
-	}
-</style>

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

package/dist/alpha-slider/alpha-slider.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
-	value?: number;
-	color?: string;
-	min?: number;
-	max?: number;
-	step?: number;
-	onchange?: (value: number) => void;
-}
-declare const AlphaSlider: import('svelte').Component<Props, {}, 'value'>;
-type AlphaSlider = ReturnType<typeof AlphaSlider>;
-export default AlphaSlider;