@dryui/ui 0.3.0 → 0.4.0

package/dist/range-calendar/{range-calendar-grid.svelte → range-calendar-grid-button.svelte}

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getRangeCalendarCtx } from './context.svelte.js';
 	import {
 		getCalendarDays,
@@ -105,25 +106,27 @@
 <div {@attach captureGrid} data-range-calendar-grid class={className} {...rest}>
 	<div data-calendar-panel role="group" aria-label={monthYearLabel}>
 		<div data-calendar-header>
-			<button
+			<Button
+				variant="outline"
+				size="icon-sm"
 				type="button"
-				data-calendar-nav
 				aria-label="Previous month"
 				onclick={() => ctx.prevMonth()}
 			>
 				&#8249;
-			</button>
+			</Button>
 			<span data-calendar-heading aria-live="polite" aria-atomic="true">
 				{monthYearLabel}
 			</span>
-			<button
+			<Button
+				variant="outline"
+				size="icon-sm"
 				type="button"
-				data-calendar-nav
 				aria-label="Next month"
 				onclick={() => ctx.nextMonth()}
 			>
 				&#8250;
-			</button>
+			</Button>
 		</div>
 
 		<div role="grid" aria-label={monthYearLabel}>
@@ -152,10 +155,11 @@
 							data-range-start={rangeStart ? '' : undefined}
 							data-range-end={rangeEnd ? '' : undefined}
 						>
-							<button
-								role="gridcell"
+							<Button
+								variant="trigger"
+								size="icon-sm"
 								type="button"
-								data-calendar-day-button
+								role="gridcell"
 								tabindex={focused ? 0 : -1}
 								aria-label={formatDate(day, ctx.locale, {
 									year: 'numeric',
@@ -171,14 +175,14 @@
 								data-range-start={rangeStart ? '' : undefined}
 								data-range-end={rangeEnd ? '' : undefined}
 								data-outside-month={!isCurrent ? '' : undefined}
-								data-disabled={disabled ? '' : undefined}
+								{disabled}
 								onclick={() => handleDayClick(day)}
 								onkeydown={(e) => handleDayKeydown(e, day)}
 								onmouseenter={() => ctx.setHoveredDate(day)}
 								onmouseleave={() => ctx.setHoveredDate(null)}
 							>
 								{day.getDate()}
-							</button>
+							</Button>
 						</div>
 					{/each}
 				</div>
@@ -221,38 +225,12 @@
 			);
 	}
 
-	[data-range-calendar-grid] [data-calendar-nav] {
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-space-8);
-		aspect-ratio: 1;
-		border: 1px solid var(--dry-range-calendar-nav-border, var(--dry-color-stroke-weak));
-		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
-		background: var(--dry-range-calendar-nav-bg, var(--dry-color-bg-raised));
-		color: var(--dry-range-calendar-nav-color, var(--dry-color-text-weak));
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-range-calendar-grid] [data-calendar-nav]:hover:not([disabled]) {
-		background: var(--dry-range-calendar-day-hover-bg, var(--dry-color-fill-hover));
-		border-color: var(--dry-color-stroke-strong);
-		color: var(--dry-color-text-strong);
-	}
-
-	[data-range-calendar-grid] [data-calendar-nav]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 1px;
-	}
-
 	[data-range-calendar-grid] [data-calendar-heading] {
-		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+		font-size: var(--dry-type-small-size);
 		font-weight: 700;
 		letter-spacing: -0.02em;
 		color: var(--dry-range-calendar-heading-color, var(--dry-color-text-strong));
+		text-align: center;
 	}
 
 	[data-range-calendar-grid] [role='grid'] {
@@ -270,7 +248,7 @@
 		display: grid;
 		place-items: center;
 		min-height: var(--dry-space-7);
-		font-size: calc(var(--dry-type-tiny-size, var(--dry-type-tiny-size)) * 0.92);
+		font-size: calc(var(--dry-type-tiny-size) * 0.92);
 		color: var(--dry-range-calendar-outside-color, var(--dry-color-text-weak));
 		text-transform: uppercase;
 		letter-spacing: 0.08em;
@@ -278,10 +256,8 @@
 
 	[data-range-calendar-grid] [data-calendar-cell] {
 		display: grid;
-		grid-template-columns: var(--dry-range-calendar-day-size, 2.5rem);
 		place-items: center;
 		padding-block: var(--dry-space-0_5);
-		border-radius: 0;
 	}
 
 	[data-range-calendar-grid] [data-calendar-cell][data-in-range] {
@@ -300,76 +276,4 @@
 		border-start-end-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
 		border-end-end-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
 	}
-
-	[data-range-calendar-grid] [data-calendar-cell][data-range-start][data-range-end] {
-		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
-	}
-
-	[data-range-calendar-grid] [data-calendar-day-button] {
-		display: inline-grid;
-		place-items: center;
-		min-height: var(--dry-range-calendar-day-size, 2.5rem);
-		padding: 0;
-		aspect-ratio: 1;
-		border: 1px solid transparent;
-		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		font: inherit;
-		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
-		font-variant-numeric: tabular-nums;
-		font-weight: 500;
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-range-calendar-grid]
-		[data-calendar-day-button]:hover:not([data-disabled]):not([data-range-start]):not(
-			[data-range-end]
-		) {
-		background: var(--dry-range-calendar-day-hover-bg, var(--dry-color-fill-hover));
-	}
-
-	[data-range-calendar-grid] [data-calendar-day-button]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 1px;
-	}
-
-	[data-range-calendar-grid]
-		[data-calendar-day-button][data-today]:not([data-range-start]):not([data-range-end]) {
-		border-color: color-mix(
-			in srgb,
-			var(--dry-range-calendar-today-color, var(--dry-color-text-brand)) 24%,
-			transparent
-		);
-		color: var(--dry-range-calendar-today-color, var(--dry-color-text-brand));
-		font-weight: 600;
-	}
-
-	[data-range-calendar-grid] [data-calendar-day-button][data-range-start],
-	[data-range-calendar-grid] [data-calendar-day-button][data-range-end] {
-		background: var(--dry-range-calendar-selected-bg, var(--dry-color-fill-brand));
-		color: var(--dry-range-calendar-selected-color, var(--dry-color-on-brand));
-		font-weight: 700;
-	}
-
-	[data-range-calendar-grid]
-		[data-calendar-day-button][data-range-start]:hover:not([data-disabled]),
-	[data-range-calendar-grid] [data-calendar-day-button][data-range-end]:hover:not([data-disabled]) {
-		background: var(--dry-range-calendar-selected-hover-bg, var(--dry-color-fill-brand-hover));
-	}
-
-	[data-range-calendar-grid] [data-calendar-day-button][data-outside-month] {
-		color: var(--dry-range-calendar-outside-color, var(--dry-color-text-weak));
-		opacity: 0.55;
-	}
-
-	[data-range-calendar-grid] [data-calendar-day-button][data-disabled] {
-		cursor: not-allowed;
-		opacity: 0.35;
-		pointer-events: none;
-	}
 </style>

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

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

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

@@ -1,8 +1,14 @@
-import type { RangeCalendarRootProps } from './index.js';
-declare const RangeCalendarRoot: import('svelte').Component<
-	RangeCalendarRootProps,
-	{},
-	'startDate' | 'endDate'
->;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    startDate?: Date | null;
+    endDate?: Date | null;
+    locale?: string;
+    min?: Date | null;
+    max?: Date | null;
+    disabled?: boolean;
+    children: Snippet;
+}
+declare const RangeCalendarRoot: import("svelte").Component<Props, {}, "startDate" | "endDate">;
 type RangeCalendarRoot = ReturnType<typeof RangeCalendarRoot>;
 export default RangeCalendarRoot;

package/dist/rating/index.d.ts

@@ -2,4 +2,4 @@ import type { RatingProps as PrimitiveRatingProps } from '@dryui/primitives';
 export interface RatingProps extends PrimitiveRatingProps {
     size?: 'sm' | 'md' | 'lg';
 }
-export { default as Rating } from './rating.svelte';
+export { default as Rating } from './rating-button-input.svelte';

package/dist/rating/index.js

@@ -1 +1 @@
-export { default as Rating } from './rating.svelte';
+export { default as Rating } from './rating-button-input.svelte';

package/dist/rating/{rating.svelte → rating-button-input.svelte}

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getFormControlCtx } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -184,7 +185,7 @@
 	onkeydown={handleKeydown}
 	{...rest}
 >
-	{#each { length: max } as _, i}
+	{#each { length: max } as _, i (i)}
 		{@const starState = getStarState(i)}
 		{@const starNumber = i + 1}
 		{@const isHighlighted =
@@ -193,7 +194,8 @@
 					? hoverValue >= i + 0.5
 					: hoverValue > i
 				: focusedIndex !== null && focusedIndex === i}
-		<button
+		<Button
+			variant="bare"
 			type="button"
 			role="radio"
 			aria-checked={value > 0 && Math.ceil(value) === starNumber ? 'true' : 'false'}
@@ -201,7 +203,6 @@
 			tabindex={getTabIndex(i)}
 			data-state={starState}
 			data-highlighted={isHighlighted || undefined}
-			data-disabled={isDisabled || undefined}
 			data-readonly={isReadonly || undefined}
 			disabled={isDisabled}
 			onclick={(e) => handleStarClick(e, i)}
@@ -209,14 +210,16 @@
 			onmousemove={(e) => handleStarMouseMove(e, i)}
 			onfocus={() => handleStarFocus(i)}
 			onblur={handleStarBlur}
-		></button>
+		>
+			<span class="star" data-state={starState}>&#9733;</span>
+		</Button>
 	{/each}
 
 	<input type="hidden" name={hiddenInputName} {value} required={ctx?.required || undefined} />
 </div>
 
 <style>
-	div {
+	[role='radiogroup'] {
 		display: inline-grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
@@ -224,42 +227,23 @@
 		align-items: center;
 	}
 
-	button[role='radio'] {
-		--dry-rating-unselected-color: var(--dry-color-stroke-weak);
-		--dry-rating-selected-color: var(--dry-color-fill-brand);
-
-		appearance: none;
-		border: none;
-		background: none;
-		cursor: pointer;
-		padding: 0;
-		position: relative;
+	.star {
 		display: inline-grid;
-		place-items: center;
-		min-height: 44px;
-		aspect-ratio: 1;
-		transition:
-			transform var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-		color: var(--dry-rating-unselected-color);
-	}
-
-	button[role='radio']::before {
-		content: '\2605';
 		font-size: var(--dry-star-size, var(--dry-space-6));
 		line-height: 1;
-		display: block;
+		color: var(--dry-rating-unselected-color, var(--dry-color-stroke-weak));
+		transition: color var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	button[role='radio'][data-state='full'] {
-		color: var(--dry-rating-selected-color);
+	.star[data-state='full'] {
+		color: var(--dry-rating-selected-color, var(--dry-color-fill-brand));
 	}
 
-	button[role='radio'][data-state='half']::before {
+	.star[data-state='half'] {
 		background: linear-gradient(
 			to right,
-			var(--dry-rating-selected-color) 50%,
-			var(--dry-rating-unselected-color) 50%
+			var(--dry-rating-selected-color, var(--dry-color-fill-brand)) 50%,
+			var(--dry-rating-unselected-color, var(--dry-color-stroke-weak)) 50%
 		);
 		-webkit-background-clip: text;
 		background-clip: text;
@@ -267,44 +251,15 @@
 		color: transparent;
 	}
 
-	button[role='radio'][data-highlighted]:not([data-disabled]):not([data-readonly]) {
-		transform: scale(1.15);
-	}
-
-	button[role='radio']:hover:not([data-disabled]):not([data-readonly]) {
-		transform: scale(1.1);
-	}
-
-	button[role='radio']:active:not([data-disabled]):not([data-readonly]) {
-		transform: scale(0.96);
-	}
-
-	button[role='radio'][data-disabled] {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	button[role='radio'][data-readonly] {
-		cursor: default;
-	}
-
-	button[role='radio']:focus-visible {
-		outline: 2px solid var(--dry-rating-focus-ring, var(--dry-color-focus-ring));
-		outline-offset: 2px;
-		border-radius: var(--dry-rating-radius, var(--dry-radius-sm));
-	}
-
-	/* ── Size variants ─────────────────────────────────────────────────────────── */
-
-	div[data-size='sm'] button[role='radio'] {
+	[data-size='sm'] .star {
 		--dry-star-size: 20px;
 	}
 
-	div[data-size='md'] button[role='radio'] {
+	[data-size='md'] .star {
 		--dry-star-size: var(--dry-space-6);
 	}
 
-	div[data-size='lg'] button[role='radio'] {
+	[data-size='lg'] .star {
 		--dry-star-size: 36px;
 	}
 </style>

package/dist/rating/rating-button-input.svelte.d.ts

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

package/dist/relative-time/relative-time.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLTimeElement> {
-	date: Date | string | number;
-	locale?: string;
-	updateInterval?: number;
+    date: Date | string | number;
+    locale?: string;
+    updateInterval?: number;
 }
-declare const RelativeTime: import('svelte').Component<Props, {}, ''>;
+declare const RelativeTime: import("svelte").Component<Props, {}, "">;
 type RelativeTime = ReturnType<typeof RelativeTime>;
 export default RelativeTime;

package/dist/reveal/reveal.svelte.d.ts

@@ -1,14 +1,16 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type RevealProps as PrimitiveRevealProps } from '@dryui/primitives/reveal';
+import type { BlendMode } from '@dryui/primitives/reveal';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	variant?: PrimitiveRevealProps['variant'];
-	once?: PrimitiveRevealProps['once'];
-	threshold?: PrimitiveRevealProps['threshold'];
-	delay?: PrimitiveRevealProps['delay'];
-	duration?: PrimitiveRevealProps['duration'];
-	distance?: PrimitiveRevealProps['distance'];
-	children: PrimitiveRevealProps['children'];
+    variant?: 'fade' | 'slide-up' | 'scale-in' | 'blur-up' | 'mask-up';
+    once?: boolean;
+    threshold?: number;
+    delay?: number;
+    duration?: number;
+    distance?: number | string;
+    blendMode?: BlendMode;
+    children: Snippet;
 }
-declare const Reveal: import('svelte').Component<Props, {}, ''>;
+declare const Reveal: import("svelte").Component<Props, {}, "">;
 type Reveal = ReturnType<typeof Reveal>;
 export default Reveal;

package/dist/rich-text-editor/index.d.ts

@@ -3,7 +3,7 @@ export type { RichTextEditorRootProps, RichTextEditorContentProps } from '@dryui
 export interface RichTextEditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
 }
 import RichTextEditorRoot from './rich-text-editor-root.svelte';
-import RichTextEditorToolbar from './rich-text-editor-toolbar.svelte';
+import RichTextEditorToolbar from './rich-text-editor-toolbar-button-input.svelte';
 import RichTextEditorContent from './rich-text-editor-content.svelte';
 export declare const RichTextEditor: {
     Root: typeof RichTextEditorRoot;

package/dist/rich-text-editor/index.js

@@ -1,5 +1,5 @@
 import RichTextEditorRoot from './rich-text-editor-root.svelte';
-import RichTextEditorToolbar from './rich-text-editor-toolbar.svelte';
+import RichTextEditorToolbar from './rich-text-editor-toolbar-button-input.svelte';
 import RichTextEditorContent from './rich-text-editor-content.svelte';
 export const RichTextEditor = {
     Root: RichTextEditorRoot,

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

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

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

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