@dryui/ui 0.5.2 → 1.0.0

package/dist/option-swatch-group/option-swatch-group-root.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { setSelectableTileGroupCtx } from './context.svelte.js';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		value?: string;
-		disabled?: boolean;
-		orientation?: 'horizontal' | 'vertical';
-		columns?: 1 | 2 | 3 | 4;
-		children: Snippet;
-	}
-
-	let {
-		value = $bindable(''),
-		disabled = false,
-		orientation = 'horizontal',
-		columns,
-		class: className,
-		children,
-		...rest
-	}: Props = $props();
-
-	setSelectableTileGroupCtx({
-		get value() {
-			return value;
-		},
-		get disabled() {
-			return disabled;
-		},
-		get orientation() {
-			return orientation;
-		},
-		select(nextValue: string) {
-			value = nextValue;
-		},
-		isSelected(itemValue: string) {
-			return value === itemValue;
-		}
-	});
-</script>
-
-<div
-	role="radiogroup"
-	aria-orientation={orientation}
-	data-orientation={orientation}
-	data-disabled={disabled || undefined}
-	data-columns={columns}
-	data-option-swatch-group-root
-	class={className}
-	{...rest}
->
-	{@render children()}
-</div>
-
-<style>
-	[data-option-swatch-group-root] {
-		display: grid;
-		grid-template-columns: repeat(
-			auto-fit,
-			minmax(var(--dry-option-swatch-group-min-column, 4rem), max-content)
-		);
-		gap: var(--dry-option-swatch-group-gap, var(--dry-space-3));
-	}
-
-	[data-option-swatch-group-root][data-orientation='vertical'] {
-		grid-template-columns: 1fr;
-	}
-
-	[data-option-swatch-group-root][data-columns='2'] {
-		grid-template-columns: repeat(2, max-content);
-	}
-
-	[data-option-swatch-group-root][data-columns='3'] {
-		grid-template-columns: repeat(3, max-content);
-	}
-
-	[data-option-swatch-group-root][data-columns='4'] {
-		grid-template-columns: repeat(4, max-content);
-	}
-</style>

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

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    value?: string;
-    disabled?: boolean;
-    orientation?: 'horizontal' | 'vertical';
-    columns?: 1 | 2 | 3 | 4;
-    children: Snippet;
-}
-declare const OptionSwatchGroupRoot: import("svelte").Component<Props, {}, "value">;
-type OptionSwatchGroupRoot = ReturnType<typeof OptionSwatchGroupRoot>;
-export default OptionSwatchGroupRoot;

package/dist/option-swatch-group/option-swatch-group-swatch.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
-
-	interface Props extends HTMLAttributes<HTMLSpanElement> {
-		color?: string;
-		shape?: 'circle' | 'rounded';
-		children?: Snippet;
-	}
-
-	let { color, shape = 'circle', class: className, children, ...rest }: Props = $props();
-
-	function setSwatchChip(swatchColor: string | undefined) {
-		return (node: HTMLSpanElement) => {
-			if (swatchColor) {
-				node.style.setProperty('--dry-option-swatch-chip', swatchColor);
-			} else {
-				node.style.removeProperty('--dry-option-swatch-chip');
-			}
-		};
-	}
-</script>
-
-<span
-	{@attach setSwatchChip(color)}
-	data-option-swatch-group-swatch
-	data-option-swatch-group-rounded={shape === 'rounded' || undefined}
-	class={className}
-	{...rest}
->
-	{@render children?.()}
-</span>
-
-<style>
-	[data-option-swatch-group-swatch] {
-		--dry-option-swatch-chip: var(--dry-color-fill-brand);
-
-		display: inline-grid;
-		grid-column: 1;
-		grid-row: 1 / span 2;
-		align-self: center;
-		aspect-ratio: 1;
-		height: var(--dry-option-swatch-group-swatch-size, 1.5rem);
-		border-radius: 999px;
-		border: 1px solid var(--dry-option-swatch-group-swatch-border, var(--dry-color-stroke-weak));
-		background: var(--dry-option-swatch-chip);
-	}
-
-	[data-option-swatch-group-rounded] {
-		border-radius: var(--dry-radius-md);
-	}
-</style>

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

@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { Snippet } from 'svelte';
-interface Props extends HTMLAttributes<HTMLSpanElement> {
-    color?: string;
-    shape?: 'circle' | 'rounded';
-    children?: Snippet;
-}
-declare const OptionSwatchGroupSwatch: import("svelte").Component<Props, {}, "">;
-type OptionSwatchGroupSwatch = ReturnType<typeof OptionSwatchGroupSwatch>;
-export default OptionSwatchGroupSwatch;