@dryui/ui 0.3.0 → 0.4.0

package/dist/data-grid/data-grid-button-expand-trigger.svelte.d.ts

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

package/dist/data-grid/{data-grid-column.svelte → data-grid-button-input-column.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getDataGridCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLTableCellElement> {
@@ -126,7 +127,13 @@
 	{...rest}
 >
 	{#if sortable}
-		<button type="button" onclick={handleSort} onkeydown={handleKeydown} data-sort-trigger>
+		<Button
+			variant="bare"
+			type="button"
+			data-sort-trigger
+			onclick={handleSort}
+			onkeydown={handleKeydown}
+		>
 			{#if header}
 				{@render header()}
 			{:else}
@@ -141,7 +148,7 @@
 					&#9650;&#9660;
 				{/if}
 			</span>
-		</button>
+		</Button>
 	{:else if header}
 		{@render header()}
 	{:else}
@@ -182,8 +189,8 @@
 		padding: var(--dry-data-grid-head-padding-y) var(--dry-data-grid-padding-x);
 		text-align: left;
 		font-weight: 500;
-		font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
-		line-height: var(--dry-type-tiny-leading, var(--dry-type-tiny-leading));
+		font-size: var(--dry-type-tiny-size);
+		line-height: var(--dry-type-tiny-leading);
 		color: var(--dry-color-text-weak);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
@@ -206,34 +213,7 @@
 		position: relative;
 	}
 
-	[data-dg-column] button[data-sort-trigger] {
-		display: inline-grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-space-1);
-		background: none;
-		border: none;
-		padding: 0;
-		margin: 0;
-		font: inherit;
-		color: inherit;
-		cursor: pointer;
-		text-transform: inherit;
-		letter-spacing: inherit;
-	}
-
-	[data-dg-column] button[data-sort-trigger]:hover {
-		color: var(--dry-color-text-strong);
-	}
-
-	[data-dg-column] button[data-sort-trigger]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-		border-radius: var(--dry-radius-sm);
-	}
-
-	[data-dg-column] [data-sort-indicator] {
+	[data-sort-indicator] {
 		font-size: 0.65em;
 		opacity: 0.4;
 	}
@@ -248,7 +228,7 @@
 		padding: var(--dry-space-1) var(--dry-space-1_5);
 		border: 1px solid var(--dry-data-grid-border);
 		border-radius: var(--dry-radius-sm);
-		font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
+		font-size: var(--dry-type-tiny-size);
 		font-family: var(--dry-font-sans);
 		color: var(--dry-color-text-strong);
 		background: var(--dry-color-bg-base);

package/dist/data-grid/data-grid-button-input-column.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLTableCellElement> {
+    key: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    pinned?: boolean;
+    resizable?: boolean;
+    header?: Snippet;
+    children: Snippet;
+}
+declare const DataGridButtonInputColumn: import("svelte").Component<Props, {}, "">;
+type DataGridButtonInputColumn = ReturnType<typeof DataGridButtonInputColumn>;
+export default DataGridButtonInputColumn;

package/dist/data-grid/{data-grid-pagination.svelte → data-grid-button-pagination.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getDataGridCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
@@ -55,27 +56,33 @@
 			goto
 		})}
 	{:else}
-		<button
-			type="button"
-			disabled={!canPrevious}
-			onclick={previous}
-			aria-label="Go to previous page"
-			data-pagination-prev
-		>
-			Previous
-		</button>
+		<span class="prev-slot">
+			<Button
+				variant="outline"
+				size="sm"
+				type="button"
+				disabled={!canPrevious}
+				onclick={previous}
+				aria-label="Go to previous page"
+			>
+				Previous
+			</Button>
+		</span>
 		<span data-pagination-info>
 			Page {ctx.page} of {ctx.totalPages}
 		</span>
-		<button
-			type="button"
-			disabled={!canNext}
-			onclick={next}
-			aria-label="Go to next page"
-			data-pagination-next
-		>
-			Next
-		</button>
+		<span class="next-slot">
+			<Button
+				variant="outline"
+				size="sm"
+				type="button"
+				disabled={!canNext}
+				onclick={next}
+				aria-label="Go to next page"
+			>
+				Next
+			</Button>
+		</span>
 	{/if}
 </nav>
 
@@ -88,58 +95,23 @@
 		column-gap: var(--dry-data-grid-pagination-gap);
 		padding: var(--dry-space-3) var(--dry-data-grid-padding-x);
 		border-top: 1px solid var(--dry-data-grid-border);
-		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+		font-size: var(--dry-type-small-size);
 		color: var(--dry-color-text-weak);
 	}
 
-	[data-dg-pagination] button[data-pagination-prev],
-	[data-dg-pagination] button[data-pagination-next] {
-		display: inline-grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
-		gap: var(--dry-space-1);
-		padding: var(--dry-space-1_5) var(--dry-space-3);
-		border: 1px solid var(--dry-data-grid-border);
-		border-radius: var(--dry-radius-md);
-		background: var(--dry-color-bg-base);
-		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
-		font-family: var(--dry-font-sans);
-		color: var(--dry-color-text-strong);
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-dg-pagination] button[data-pagination-prev]:hover:not(:disabled),
-	[data-dg-pagination] button[data-pagination-next]:hover:not(:disabled) {
-		background: var(--dry-data-grid-row-hover);
-		border-color: var(--dry-color-text-weak);
-	}
-
-	[data-dg-pagination] button[data-pagination-prev]:focus-visible,
-	[data-dg-pagination] button[data-pagination-next]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-dg-pagination] button[data-pagination-prev] {
+	.prev-slot {
 		grid-area: prev;
 		justify-self: start;
+		display: inline-grid;
 	}
 
-	[data-dg-pagination] button[data-pagination-next] {
+	.next-slot {
 		grid-area: next;
 		justify-self: end;
+		display: inline-grid;
 	}
 
-	[data-dg-pagination] button:disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
-
-	[data-dg-pagination] [data-pagination-info] {
+	[data-pagination-info] {
 		grid-area: info;
 		justify-self: center;
 		text-align: center;

package/dist/data-grid/data-grid-button-pagination.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    children?: Snippet<[
+        {
+            page: number;
+            totalPages: number;
+            totalItems: number;
+            pageSize: number;
+            canPrevious: boolean;
+            canNext: boolean;
+            previous: () => void;
+            next: () => void;
+            goto: (page: number) => void;
+        }
+    ]>;
+}
+declare const DataGridButtonPagination: import("svelte").Component<Props, {}, "">;
+type DataGridButtonPagination = ReturnType<typeof DataGridButtonPagination>;
+export default DataGridButtonPagination;

package/dist/data-grid/data-grid-cell.svelte.d.ts

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

package/dist/data-grid/data-grid-expandable-row.svelte.d.ts

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

package/dist/data-grid/data-grid-header.svelte.d.ts

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

package/dist/data-grid/data-grid-input-select-all.svelte.d.ts

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

package/dist/data-grid/data-grid-input-select-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLTableCellElement> {
+    rowId: string;
+    rowLabel?: string;
+}
+declare const DataGridInputSelectCell: import("svelte").Component<Props, {}, "">;
+type DataGridInputSelectCell = ReturnType<typeof DataGridInputSelectCell>;
+export default DataGridInputSelectCell;

package/dist/data-grid/data-grid-root.svelte.d.ts

@@ -1,42 +1,36 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 declare function $$render<T extends Record<string, unknown>>(): {
-	props: HTMLAttributes<HTMLDivElement> & {
-		items: T[];
-		pageSize?: number;
-		striped?: boolean;
-		selectable?: boolean;
-		onSelectionChange?: (selected: string[]) => void;
-		actionBar?: Snippet<[{ selectedCount: number; clearSelection: () => void }]>;
-		children: Snippet;
-	};
-	exports: {};
-	bindings: '';
-	slots: {};
-	events: {};
+    props: HTMLAttributes<HTMLDivElement> & {
+        items: T[];
+        pageSize?: number;
+        striped?: boolean;
+        selectable?: boolean;
+        onSelectionChange?: (selected: string[]) => void;
+        actionBar?: Snippet<[{
+            selectedCount: number;
+            clearSelection: () => void;
+        }]>;
+        children: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
 };
 declare class __sveltets_Render<T extends Record<string, unknown>> {
-	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 extends Record<string, unknown>>(
-		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 extends Record<string, unknown>>(
-		internal: unknown,
-		props: ReturnType<__sveltets_Render<T>['props']> & {}
-	): ReturnType<__sveltets_Render<T>['exports']>;
-	z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends Record<string, unknown>>(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 extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DataGridRoot: $$IsomorphicComponent;
 type DataGridRoot<T extends Record<string, unknown>> = InstanceType<typeof DataGridRoot<T>>;

package/dist/data-grid/data-grid-row.svelte.d.ts

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

package/dist/data-grid/data-grid-table.svelte.d.ts

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

package/dist/data-grid/index.d.ts

@@ -22,15 +22,15 @@ export interface DataGridExpandTriggerProps extends HTMLAttributes<HTMLButtonEle
 import DataGridRoot from './data-grid-root.svelte';
 import DataGridTable from './data-grid-table.svelte';
 import DataGridHeader from './data-grid-header.svelte';
-import DataGridColumn from './data-grid-column.svelte';
+import DataGridColumn from './data-grid-button-input-column.svelte';
 import DataGridBody from './data-grid-body.svelte';
 import DataGridRow from './data-grid-row.svelte';
 import DataGridCell from './data-grid-cell.svelte';
-import DataGridPagination from './data-grid-pagination.svelte';
-import DataGridSelectAll from './data-grid-select-all.svelte';
-import DataGridSelectCell from './data-grid-select-cell.svelte';
+import DataGridPagination from './data-grid-button-pagination.svelte';
+import DataGridSelectAll from './data-grid-input-select-all.svelte';
+import DataGridSelectCell from './data-grid-input-select-cell.svelte';
 import DataGridExpandableRow from './data-grid-expandable-row.svelte';
-import DataGridExpandTrigger from './data-grid-expand-trigger.svelte';
+import DataGridExpandTrigger from './data-grid-button-expand-trigger.svelte';
 export declare const DataGrid: {
     Root: typeof DataGridRoot;
     Table: typeof DataGridTable;

package/dist/data-grid/index.js

@@ -1,15 +1,15 @@
 import DataGridRoot from './data-grid-root.svelte';
 import DataGridTable from './data-grid-table.svelte';
 import DataGridHeader from './data-grid-header.svelte';
-import DataGridColumn from './data-grid-column.svelte';
+import DataGridColumn from './data-grid-button-input-column.svelte';
 import DataGridBody from './data-grid-body.svelte';
 import DataGridRow from './data-grid-row.svelte';
 import DataGridCell from './data-grid-cell.svelte';
-import DataGridPagination from './data-grid-pagination.svelte';
-import DataGridSelectAll from './data-grid-select-all.svelte';
-import DataGridSelectCell from './data-grid-select-cell.svelte';
+import DataGridPagination from './data-grid-button-pagination.svelte';
+import DataGridSelectAll from './data-grid-input-select-all.svelte';
+import DataGridSelectCell from './data-grid-input-select-cell.svelte';
 import DataGridExpandableRow from './data-grid-expandable-row.svelte';
-import DataGridExpandTrigger from './data-grid-expand-trigger.svelte';
+import DataGridExpandTrigger from './data-grid-button-expand-trigger.svelte';
 export const DataGrid = {
     Root: DataGridRoot,
     Table: DataGridTable,

package/dist/date-field/date-field-input-root.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    value?: Date | null;
+    name?: string;
+    locale?: string;
+    min?: Date | null;
+    max?: Date | null;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+}
+declare const DateFieldInputRoot: import("svelte").Component<Props, {}, "value">;
+type DateFieldInputRoot = ReturnType<typeof DateFieldInputRoot>;
+export default DateFieldInputRoot;

package/dist/date-field/date-field-segment.svelte.d.ts

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

package/dist/date-field/date-field-separator.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
-	separator?: string;
+    separator?: string;
 }
-declare const DateFieldSeparator: import('svelte').Component<Props, {}, ''>;
+declare const DateFieldSeparator: import("svelte").Component<Props, {}, "">;
 type DateFieldSeparator = ReturnType<typeof DateFieldSeparator>;
 export default DateFieldSeparator;

package/dist/date-field/index.d.ts

@@ -4,7 +4,7 @@ export type { DateFieldSegmentProps, DateFieldSeparatorProps } from '@dryui/prim
 export interface DateFieldRootProps extends PrimitiveDateFieldRootProps {
     size?: 'sm' | 'md' | 'lg';
 }
-import DateFieldRoot from './date-field-root.svelte';
+import DateFieldRoot from './date-field-input-root.svelte';
 import DateFieldSegment from './date-field-segment.svelte';
 import DateFieldSeparator from './date-field-separator.svelte';
 export declare const DateField: {

package/dist/date-field/index.js

@@ -1,4 +1,4 @@
-import DateFieldRoot from './date-field-root.svelte';
+import DateFieldRoot from './date-field-input-root.svelte';
 import DateFieldSegment from './date-field-segment.svelte';
 import DateFieldSeparator from './date-field-separator.svelte';
 export const DateField = {