@dryui/ui 0.2.2 → 0.4.0

package/dist/accordion/accordion-button-trigger.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getAccordionCtx, getAccordionItemCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getAccordionCtx();
+	const itemCtx = getAccordionItemCtx();
+</script>
+
+<Button
+	variant="trigger"
+	type="button"
+	aria-expanded={itemCtx.open}
+	aria-controls={itemCtx.contentId}
+	data-state={itemCtx.open ? 'open' : 'closed'}
+	disabled={itemCtx.disabled}
+	{...rest}
+	onclick={() => ctx.toggle(itemCtx.value)}
+>
+	{@render children()}
+	<svg
+		data-indicator
+		class:open={itemCtx.open}
+		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>
+	svg[data-indicator] {
+		height: 1rem;
+		aspect-ratio: 1;
+		opacity: 0.5;
+		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	svg[data-indicator].open {
+		transform: rotate(180deg);
+	}
+</style>

package/dist/accordion/accordion-button-trigger.svelte.d.ts

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

package/dist/accordion/accordion-content.svelte.d.ts

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

package/dist/accordion/accordion-item.svelte.d.ts

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

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

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	type?: 'single' | 'multiple';
-	value?: string[];
-	orientation?: 'horizontal' | 'vertical';
-	children: Snippet;
+    type?: 'single' | 'multiple';
+    value?: string[];
+    orientation?: 'horizontal' | 'vertical';
+    children: Snippet;
 }
-declare const AccordionRoot: import('svelte').Component<Props, {}, 'value'>;
+declare const AccordionRoot: import("svelte").Component<Props, {}, "value">;
 type AccordionRoot = ReturnType<typeof AccordionRoot>;
 export default AccordionRoot;

package/dist/accordion/index.d.ts

@@ -20,7 +20,7 @@ export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
 }
 import AccordionRoot from './accordion-root.svelte';
 import AccordionItem from './accordion-item.svelte';
-import AccordionTrigger from './accordion-trigger.svelte';
+import AccordionTrigger from './accordion-button-trigger.svelte';
 import AccordionContent from './accordion-content.svelte';
 export declare const Accordion: {
     Root: typeof AccordionRoot;

package/dist/accordion/index.js

@@ -1,6 +1,6 @@
 import AccordionRoot from './accordion-root.svelte';
 import AccordionItem from './accordion-item.svelte';
-import AccordionTrigger from './accordion-trigger.svelte';
+import AccordionTrigger from './accordion-button-trigger.svelte';
 import AccordionContent from './accordion-content.svelte';
 export const Accordion = {
     Root: AccordionRoot,

package/dist/adjust/adjust.svelte

@@ -54,7 +54,7 @@
 	}
 </script>
 
-<div data-adjust class={className} use:applyStyles {...rest}>
+<div {@attach applyStyles} data-adjust class={className} {...rest}>
 	{@render children()}
 </div>
 

package/dist/adjust/adjust.svelte.d.ts

@@ -1,17 +1,18 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type AdjustProps as PrimitiveAdjustProps } from '@dryui/primitives/adjust';
+import type { BlendMode } from '@dryui/primitives/adjust';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	brightness?: number | undefined;
-	contrast?: number | undefined;
-	saturate?: number | undefined;
-	hueRotate?: number | undefined;
-	grayscale?: number | undefined;
-	sepia?: number | undefined;
-	invert?: number | undefined;
-	blur?: number | undefined;
-	blendMode?: PrimitiveAdjustProps['blendMode'];
-	children: PrimitiveAdjustProps['children'];
+    brightness?: number;
+    contrast?: number;
+    saturate?: number;
+    hueRotate?: number;
+    grayscale?: number;
+    sepia?: number;
+    invert?: number;
+    blur?: number;
+    blendMode?: BlendMode;
+    children: Snippet;
 }
-declare const Adjust: import('svelte').Component<Props, {}, ''>;
+declare const Adjust: import("svelte").Component<Props, {}, "">;
 type Adjust = ReturnType<typeof Adjust>;
 export default Adjust;

package/dist/alert/alert-button-close.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CloseButtonBase from '../internal/close-button-base.svelte';
+	import { getAlertCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getAlertCtx();
+</script>
+
+<span class="alert-close-slot">
+	<CloseButtonBase aria-label="Dismiss alert" {...rest} onclick={() => ctx.dismiss()}>
+		{#if children}{@render children()}{/if}
+	</CloseButtonBase>
+</span>
+
+<style>
+	.alert-close-slot {
+		display: inline-grid;
+		grid-column: -2 / -1;
+		grid-row: 1 / 3;
+		align-self: start;
+	}
+</style>

package/dist/alert/alert-button-close.svelte.d.ts

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

package/dist/alert/alert-description.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { markDirectChild } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLParagraphElement> {
 		children: Snippet;
@@ -9,11 +10,15 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<p data-alert-description class={className} {...rest}>
+<p data-alert-description {@attach markDirectChild} class={className} {...rest}>
 	{@render children()}
 </p>
 
 <style>
+	[data-alert-description][data-alert-direct-child] {
+		grid-column: 2;
+	}
+
 	[data-alert-description] {
 		font-size: var(--dry-type-small-size);
 		line-height: var(--dry-type-small-leading);

package/dist/alert/alert-description.svelte.d.ts

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

package/dist/alert/alert-icon.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 AlertIcon: import('svelte').Component<Props, {}, ''>;
+declare const AlertIcon: import("svelte").Component<Props, {}, "">;
 type AlertIcon = ReturnType<typeof AlertIcon>;
 export default AlertIcon;

package/dist/alert/alert-root.svelte

@@ -63,14 +63,13 @@
 
 		container-type: inline-size;
 		display: grid;
-		grid-template-columns: auto 1fr auto;
+		grid-template-columns: auto minmax(0, 1fr) auto;
 		align-items: start;
 		column-gap: 0;
 		row-gap: var(--dry-space-1);
 		padding: var(--dry-alert-padding, var(--dry-space-6));
 		background: var(--dry-alert-bg);
 		border: 1px solid var(--dry-alert-border);
-		border-left: 4px solid var(--dry-alert-icon-color);
 		border-radius: var(--dry-alert-radius, var(--dry-surface-radius, var(--dry-radius-lg)));
 		color: var(--dry-alert-color, var(--dry-color-text-strong));
 		font-family: var(--dry-font-sans);

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

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { AlertVariant } from '@dryui/primitives';
+import { type AlertVariant } from './context.svelte.js';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	variant?: AlertVariant;
-	dismissible?: boolean;
-	onDismiss?: () => void;
-	children: Snippet;
+    variant?: AlertVariant;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    children: Snippet;
 }
-declare const AlertRoot: import('svelte').Component<Props, {}, ''>;
+declare const AlertRoot: import("svelte").Component<Props, {}, "">;
 type AlertRoot = ReturnType<typeof AlertRoot>;
 export default AlertRoot;

package/dist/alert/alert-title.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { markDirectChild } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLHeadingElement> {
 		children: Snippet;
@@ -9,11 +10,15 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<h5 data-alert-title class={className} {...rest}>
+<h5 data-alert-title {@attach markDirectChild} class={className} {...rest}>
 	{@render children()}
 </h5>
 
 <style>
+	[data-alert-title][data-alert-direct-child] {
+		grid-column: 2;
+	}
+
 	[data-alert-title] {
 		font-size: var(--dry-type-heading-4-size);
 		font-weight: 600;

package/dist/alert/alert-title.svelte.d.ts

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

package/dist/alert/context.svelte.d.ts

@@ -5,4 +5,5 @@ interface AlertContext {
     dismiss: () => void;
 }
 export declare const setAlertCtx: (ctx: AlertContext) => AlertContext, getAlertCtx: () => AlertContext;
+export declare function markDirectChild(node: HTMLElement): () => void;
 export {};

package/dist/alert/context.svelte.js

@@ -1,2 +1,10 @@
 import { createContext } from '@dryui/primitives';
 export const [setAlertCtx, getAlertCtx] = createContext('alert');
+export function markDirectChild(node) {
+    if (node.parentElement?.hasAttribute('data-alert')) {
+        node.setAttribute('data-alert-direct-child', '');
+    }
+    return () => {
+        node.removeAttribute('data-alert-direct-child');
+    };
+}

package/dist/alert/index.d.ts

@@ -4,7 +4,7 @@ import AlertRoot from './alert-root.svelte';
 import AlertIcon from './alert-icon.svelte';
 import AlertTitle from './alert-title.svelte';
 import AlertDescription from './alert-description.svelte';
-import AlertClose from './alert-close.svelte';
+import AlertClose from './alert-button-close.svelte';
 export declare const Alert: {
     Root: typeof AlertRoot;
     Icon: typeof AlertIcon;

package/dist/alert/index.js

@@ -2,7 +2,7 @@ import AlertRoot from './alert-root.svelte';
 import AlertIcon from './alert-icon.svelte';
 import AlertTitle from './alert-title.svelte';
 import AlertDescription from './alert-description.svelte';
-import AlertClose from './alert-close.svelte';
+import AlertClose from './alert-button-close.svelte';
 export const Alert = {
     Root: AlertRoot,
     Icon: AlertIcon,

package/dist/alert-dialog/alert-dialog-body.svelte.d.ts

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

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+</script>
+
+<Button {...rest} variant="solid" color="danger">
+	{@render children()}
+</Button>

package/dist/alert-dialog/alert-dialog-button-action.svelte.d.ts

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

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getAlertDialogCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getAlertDialogCtx();
+</script>
+
+<Button {...rest} variant="outline" onclick={() => ctx.close()}>
+	{@render children()}
+</Button>

package/dist/alert-dialog/alert-dialog-button-cancel.svelte.d.ts

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

package/dist/alert-dialog/alert-dialog-content.svelte.d.ts

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

package/dist/alert-dialog/alert-dialog-footer.svelte.d.ts

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

package/dist/alert-dialog/alert-dialog-header.svelte.d.ts

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

package/dist/alert-dialog/alert-dialog-overlay.svelte.d.ts

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

package/dist/alert-dialog/alert-dialog-root.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 interface Props {
-	open?: boolean;
-	children: Snippet;
+    open?: boolean;
+    children: Snippet;
 }
-declare const AlertDialogRoot: import('svelte').Component<Props, {}, 'open'>;
+declare const AlertDialogRoot: import("svelte").Component<Props, {}, "open">;
 type AlertDialogRoot = ReturnType<typeof AlertDialogRoot>;
 export default AlertDialogRoot;

package/dist/alert-dialog/alert-dialog-trigger.svelte.d.ts

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

package/dist/alert-dialog/index.d.ts

@@ -6,8 +6,8 @@ import AlertDialogOverlay from './alert-dialog-overlay.svelte';
 import AlertDialogHeader from './alert-dialog-header.svelte';
 import AlertDialogBody from './alert-dialog-body.svelte';
 import AlertDialogFooter from './alert-dialog-footer.svelte';
-import AlertDialogAction from './alert-dialog-action.svelte';
-import AlertDialogCancel from './alert-dialog-cancel.svelte';
+import AlertDialogAction from './alert-dialog-button-action.svelte';
+import AlertDialogCancel from './alert-dialog-button-cancel.svelte';
 export declare const AlertDialog: {
     Root: typeof AlertDialogRoot;
     Trigger: typeof AlertDialogTrigger;

package/dist/alert-dialog/index.js

@@ -5,8 +5,8 @@ import AlertDialogOverlay from './alert-dialog-overlay.svelte';
 import AlertDialogHeader from './alert-dialog-header.svelte';
 import AlertDialogBody from './alert-dialog-body.svelte';
 import AlertDialogFooter from './alert-dialog-footer.svelte';
-import AlertDialogAction from './alert-dialog-action.svelte';
-import AlertDialogCancel from './alert-dialog-cancel.svelte';
+import AlertDialogAction from './alert-dialog-button-action.svelte';
+import AlertDialogCancel from './alert-dialog-button-cancel.svelte';
 export const AlertDialog = {
     Root: AlertDialogRoot,
     Trigger: AlertDialogTrigger,

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

@@ -0,0 +1,12 @@
+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 AlphaSliderInput: import("svelte").Component<Props, {}, "value">;
+type AlphaSliderInput = ReturnType<typeof AlphaSliderInput>;
+export default AlphaSliderInput;

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

@@ -6,4 +6,4 @@ export interface AlphaSliderProps {
     step?: number;
     onchange?: (value: number) => void;
 }
-export { default as AlphaSlider } from './alpha-slider.svelte';
+export { default as AlphaSlider } from './alpha-slider-input.svelte';

package/dist/alpha-slider/index.js

@@ -1 +1 @@
-export { default as AlphaSlider } from './alpha-slider.svelte';
+export { default as AlphaSlider } from './alpha-slider-input.svelte';

package/dist/aspect-ratio/aspect-ratio.svelte.d.ts

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