diff --git a/src/lib/components/accordion/accordion-root.svelte b/src/lib/components/accordion/accordion-root.svelte index 916b4c3..c94517b 100644 --- a/src/lib/components/accordion/accordion-root.svelte +++ b/src/lib/components/accordion/accordion-root.svelte @@ -19,19 +19,14 @@ {@render children?.({ accordion: bond })} diff --git a/src/lib/components/accordion/item/accordion-item-body.svelte b/src/lib/components/accordion/item/accordion-item-body.svelte index 11b1b44..442508c 100644 --- a/src/lib/components/accordion/item/accordion-item-body.svelte +++ b/src/lib/components/accordion/item/accordion-item-body.svelte @@ -10,21 +10,14 @@ {#if children} diff --git a/src/lib/components/accordion/item/accordion-item-root.svelte b/src/lib/components/accordion/item/accordion-item-root.svelte index 6840038..d4cd6ce 100644 --- a/src/lib/components/accordion/item/accordion-item-root.svelte +++ b/src/lib/components/accordion/item/accordion-item-root.svelte @@ -19,17 +19,12 @@ AccordionItemBondState, type AccordionItemBondProps } from './bond.svelte'; - import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils'; - import { getPreset } from '$svelte-atoms/core/context'; + import { defineProperty, defineState } from '$svelte-atoms/core/utils'; import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; import type { Factory } from '$svelte-atoms/core/types'; - const preset = getPreset('accordion.item'); - let { class: klass = '', - as = preset?.as ?? 'div', - base = preset?.base as B, value = nanoid(), data = undefined, disabled = false, @@ -69,15 +64,15 @@ {@render children?.({ accordionItem: bond })} diff --git a/src/lib/components/alert/alert-actions.svelte b/src/lib/components/alert/alert-actions.svelte index 143c82c..91ce443 100644 --- a/src/lib/components/alert/alert-actions.svelte +++ b/src/lib/components/alert/alert-actions.svelte @@ -11,19 +11,14 @@ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; import { AlertBond } from './bond.svelte'; - import { toClassValue } from '$svelte-atoms/core/utils'; + import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; - import { getPreset } from '$svelte-atoms/core/context'; type Element = HTMLElementTagNameMap[E]; const bond = AlertBond.get(); - const preset = getPreset('alert.actions'); - let { - as = preset?.as ?? ('div' as E), - base = preset?.base as B, class: klass = '', children = undefined, onmount = undefined, @@ -42,19 +37,15 @@ {@render children?.({ alert: bond! })} diff --git a/src/lib/components/alert/alert-close-button.svelte b/src/lib/components/alert/alert-close-button.svelte index 6ed0f3e..a96c81b 100644 --- a/src/lib/components/alert/alert-close-button.svelte +++ b/src/lib/components/alert/alert-close-button.svelte @@ -11,20 +11,16 @@ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; import { AlertBond } from './bond.svelte'; - import { toClassValue } from '$svelte-atoms/core/utils'; + import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; - import { getPreset } from '$svelte-atoms/core/context'; type Element = HTMLElementTagNameMap[E]; const bond = AlertBond.get(); - const preset = getPreset('alert.close-button'); - let { class: klass = '', - as = preset?.as ?? ('button' as E), - base = preset?.base as B, + as = 'button' as E, children = undefined, onmount = undefined, ondestroy = undefined, @@ -45,6 +41,9 @@ {#if isDismissible} {@render children?.({ alert: bond! })} diff --git a/src/lib/components/alert/alert-content.svelte b/src/lib/components/alert/alert-content.svelte index 98049e0..8efe059 100644 --- a/src/lib/components/alert/alert-content.svelte +++ b/src/lib/components/alert/alert-content.svelte @@ -11,19 +11,14 @@ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; import { AlertBond } from './bond.svelte'; - import { toClassValue } from '$svelte-atoms/core/utils'; + import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; - import { getPreset } from '$svelte-atoms/core/context'; type Element = HTMLElementTagNameMap[E]; const bond = AlertBond.get(); - const preset = getPreset('alert.content'); - let { - as = preset?.as ?? ('div' as E), - base = preset?.base as B, class: klass = '', children = undefined, onmount = undefined, @@ -42,19 +37,15 @@ {@render children?.({ alert: bond! })} diff --git a/src/lib/components/alert/alert-description.svelte b/src/lib/components/alert/alert-description.svelte index c0b91c1..b389306 100644 --- a/src/lib/components/alert/alert-description.svelte +++ b/src/lib/components/alert/alert-description.svelte @@ -8,20 +8,16 @@ {@render children?.({ alert: bond! })} diff --git a/src/lib/components/alert/alert-icon.svelte b/src/lib/components/alert/alert-icon.svelte index 6d9ee46..442dfc7 100644 --- a/src/lib/components/alert/alert-icon.svelte +++ b/src/lib/components/alert/alert-icon.svelte @@ -10,19 +10,15 @@ - - {#if base} - - {:else} - {@render children?.({ alert: bond! })} - {/if} - + {@render children?.({ alert: bond! })} + diff --git a/src/lib/components/alert/alert-root.svelte b/src/lib/components/alert/alert-root.svelte index be03e7c..88add26 100644 --- a/src/lib/components/alert/alert-root.svelte +++ b/src/lib/components/alert/alert-root.svelte @@ -19,15 +19,10 @@ import { AlertBond, AlertBondState, type AlertBondProps } from './bond.svelte'; import { toClassValue, cn, defineProperty, defineState } from '$svelte-atoms/core/utils'; import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; - import { getPreset } from '$svelte-atoms/core/context'; import './alert.css'; - const preset = getPreset('alert'); - let { class: klass = '', - as = preset?.as ?? ('div' as E), - base = preset?.base as B, dismissible = false, dismissed = $bindable(false), disabled = false, @@ -97,6 +92,7 @@ {@render children?.({ alert: bond })} diff --git a/src/lib/components/alert/alert-title.svelte b/src/lib/components/alert/alert-title.svelte index 4e052d5..c27d74f 100644 --- a/src/lib/components/alert/alert-title.svelte +++ b/src/lib/components/alert/alert-title.svelte @@ -10,17 +10,13 @@ {@render children?.({ alert: bond! })} diff --git a/src/lib/components/atom/html-atom.svelte b/src/lib/components/atom/html-atom.svelte index 48977ba..cbf94b1 100644 --- a/src/lib/components/atom/html-atom.svelte +++ b/src/lib/components/atom/html-atom.svelte @@ -1,9 +1,11 @@ {#if isSnippet} - {@render snippet({ class: cn(klass), as, base, children, ...restProps })} + {@render snippet({ class: _klass, as: _as, base: _base, children, ..._restProps })} {:else} - + {@render children?.()} {/if} diff --git a/src/lib/components/atom/types.ts b/src/lib/components/atom/types.ts index 6bd9d7e..62f34bc 100644 --- a/src/lib/components/atom/types.ts +++ b/src/lib/components/atom/types.ts @@ -1,6 +1,8 @@ import type { Component, Snippet } from 'svelte'; import { type HtmlElementTagName } from '$svelte-atoms/core/components/element'; import type { HtmlElementProps, ElementType } from '../element/types'; +import type { PresetModuleName } from '$svelte-atoms/core/context/preset.svelte'; +import type { Bond } from '$svelte-atoms/core/shared'; export type ComponentBase = Component; export type SnippetBase = Snippet; @@ -11,7 +13,9 @@ export type HtmlAtomProps< E extends HtmlElementTagName = HtmlElementTagName, B extends Base = Base > = HtmlElementProps & { + bond?: Bond; base?: B; + preset?: PresetModuleName | (string & {}); }; export type { ElementType }; diff --git a/src/lib/components/avatar/avatar.svelte b/src/lib/components/avatar/avatar.svelte index e45cbfd..cf0beb9 100644 --- a/src/lib/components/avatar/avatar.svelte +++ b/src/lib/components/avatar/avatar.svelte @@ -18,8 +18,10 @@ - import { toClassValue } from '$svelte-atoms/core/utils'; - import { getPreset } from '$svelte-atoms/core/context'; import { HtmlAtom } from '$svelte-atoms/core/components/atom'; import type { BadgeProps } from './types'; - const preset = getPreset('badge'); - - let { - class: klass = '', - as = preset?.as ?? 'span', - base = preset?.base as B, - children = undefined, - ...restProps - }: BadgeProps = $props(); + let { class: klass = '', as = 'span', children = undefined, ...restProps }: BadgeProps = $props(); {@render children?.()} diff --git a/src/lib/components/breadcrumb/breadcrumb-item.svelte b/src/lib/components/breadcrumb/breadcrumb-item.svelte index 2cd1506..9720a56 100644 --- a/src/lib/components/breadcrumb/breadcrumb-item.svelte +++ b/src/lib/components/breadcrumb/breadcrumb-item.svelte @@ -1,30 +1,19 @@ {@render children?.()} diff --git a/src/lib/components/breadcrumb/breadcrumb-root.svelte b/src/lib/components/breadcrumb/breadcrumb-root.svelte index a7112ea..fb32958 100644 --- a/src/lib/components/breadcrumb/breadcrumb-root.svelte +++ b/src/lib/components/breadcrumb/breadcrumb-root.svelte @@ -1,28 +1,14 @@ {@render children?.()} diff --git a/src/lib/components/breadcrumb/breadcrumb-separator.svelte b/src/lib/components/breadcrumb/breadcrumb-separator.svelte index de1dd84..32a092f 100644 --- a/src/lib/components/breadcrumb/breadcrumb-separator.svelte +++ b/src/lib/components/breadcrumb/breadcrumb-separator.svelte @@ -1,28 +1,14 @@ {@render children?.()} diff --git a/src/lib/components/button/button.svelte b/src/lib/components/button/button.svelte index c378ec1..9f561ca 100644 --- a/src/lib/components/button/button.svelte +++ b/src/lib/components/button/button.svelte @@ -2,15 +2,11 @@ import type { HTMLAttributes } from 'svelte/elements'; import type { ButtonProps } from './types'; import { HtmlAtom } from '$svelte-atoms/core/components/atom'; - import { getPreset } from '$svelte-atoms/core/context'; - import { toClassValue } from '$svelte-atoms/core/utils'; - - const preset = getPreset('button'); let { class: klass = '', type = 'button', - base = preset?.base as B, + preset = 'button', children = undefined, ...restProps }: ButtonProps & HTMLAttributes = $props(); @@ -22,13 +18,13 @@ {@render children?.()} diff --git a/src/lib/components/card/card-body.svelte b/src/lib/components/card/card-body.svelte index b96e23b..39ce91c 100644 --- a/src/lib/components/card/card-body.svelte +++ b/src/lib/components/card/card-body.svelte @@ -6,19 +6,13 @@ import { CardBond } from './bond.svelte'; - import { toClassValue } from '$svelte-atoms/core/utils'; - import { getPreset } from '$svelte-atoms/core/context'; + import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; const bond = CardBond.get(); - const preset = getPreset('card.description'); - let { class: klass = '', - as = preset?.as ?? 'p', - base = preset?.base as B, + as = 'p' as E, children = undefined, onmount = undefined, ondestroy = undefined, @@ -37,12 +33,9 @@ import { CardBond } from './bond.svelte'; - import { toClassValue } from '$svelte-atoms/core/utils'; - import { getPreset } from '$svelte-atoms/core/context'; + import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; const bond = CardBond.get(); - const preset = getPreset('card.footer'); - let { class: klass = '', - as = preset?.as ?? 'div', - base = preset?.base as B, + as = 'div' as E, children = undefined, onmount = undefined, ondestroy = undefined, @@ -37,12 +33,9 @@ import { CardBond } from './bond.svelte'; - import { toClassValue } from '$svelte-atoms/core/utils'; - import { getPreset } from '$svelte-atoms/core/context'; + import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; const bond = CardBond.get(); - const preset = getPreset('card.header'); - let { class: klass = '', - as = preset?.as ?? 'div', - base = preset?.base as B, + as = 'div' as E, children = undefined, onmount = undefined, ondestroy = undefined, @@ -37,12 +33,9 @@ import { CardBond } from './bond.svelte'; - import { toClassValue } from '$svelte-atoms/core/utils'; - import { getPreset } from '$svelte-atoms/core/context'; + import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; const bond = CardBond.get(); - const preset = getPreset('card.media'); - let { class: klass = '', - as = preset?.as ?? 'div', - base = preset?.base as B, + as = 'div' as E, children = undefined, onmount = undefined, ondestroy = undefined, @@ -37,12 +33,9 @@ import { CardBond, CardBondState, type CardBondProps } from './bond.svelte'; import type { CardRootProps } from './types'; - import { defineState, toClassValue } from '$svelte-atoms/core/utils'; + import { defineState } from '$svelte-atoms/core/utils'; import { defineProperty } from '$svelte-atoms/core/utils/state'; - import { getPreset } from '$svelte-atoms/core/context'; import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom'; import './card.css'; - const preset = getPreset('card'); - let { class: klass = '', disabled = false, - as = preset?.as ?? 'div', - base = preset?.base as B, factory = _factory, children = undefined, onclick = undefined, @@ -74,14 +69,14 @@ import { CardBond } from './bond.svelte'; - import { toClassValue } from '$svelte-atoms/core/utils'; - import { getPreset } from '$svelte-atoms/core/context'; + import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; const bond = CardBond.get(); - const preset = getPreset('card.subtitle'); - let { class: klass = '', - as = preset?.as ?? 'p', - base = preset?.base as B, + as = 'p' as E, children = undefined, onmount = undefined, ondestroy = undefined, @@ -37,12 +33,9 @@ import { CardBond } from './bond.svelte'; - import { toClassValue } from '$svelte-atoms/core/utils'; - import { getPreset } from '$svelte-atoms/core/context'; + import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; const bond = CardBond.get(); - const preset = getPreset('card.title'); - let { class: klass = '', - as = preset?.as ?? 'h3', - base = preset?.base as B, + as = 'h3' as E, children = undefined, onmount = undefined, ondestroy = undefined, @@ -37,12 +33,9 @@ import type { HTMLInputAttributes } from 'svelte/elements'; - import { circOut } from 'svelte/easing'; import { scale } from 'svelte/transition'; import type { CheckboxProps } from './types'; import { Icon } from '$svelte-atoms/core/components/icon'; - import { DURATION } from '$svelte-atoms/core/shared'; import { HtmlAtom } from '$svelte-atoms/core/components/atom'; import CheckmarkRegularIcon from '$svelte-atoms/core/icons/icon-checkmark.svelte'; - import { getPreset } from '$svelte-atoms/core/context'; - import { toClassValue } from '$svelte-atoms/core/utils'; import './checkbox.css'; - - const preset = getPreset('checkbox'); - const checkmarkPreset = getPreset('checkbox.checkmark'); - const indeterminatePreset = getPreset('checkbox.indeterminate'); + import { DURATION } from '$svelte-atoms/core/shared'; + import { circOut } from 'svelte/easing'; let { class: klass = '', @@ -21,7 +15,6 @@ indeterminate = $bindable(), value = $bindable(undefined), group = $bindable([]), - base = preset?.base as B, id, checkedContent, indeterminateContent, @@ -77,19 +70,19 @@ @@ -114,41 +107,40 @@ {#if indeterminate} {#if indeterminateContent} {:else} -
-
+ {/if} {:else if checked === true} {#if checkedContent} {:else} -
scale(node, { duration: DURATION.fast, easing: circOut, start: 0.6 })} + exit={(node) => scale(node, { duration: DURATION.fast, easing: circOut, start: 0.6 })} > -
+ {/if} {/if} diff --git a/src/lib/components/collapsible/collapsible-body.svelte b/src/lib/components/collapsible/collapsible-body.svelte index a889618..6f5c4f3 100644 --- a/src/lib/components/collapsible/collapsible-body.svelte +++ b/src/lib/components/collapsible/collapsible-body.svelte @@ -13,19 +13,13 @@ {@render children?.({ collapsible: bond })} diff --git a/src/lib/components/collapsible/collapsible-header.svelte b/src/lib/components/collapsible/collapsible-header.svelte index 13dd323..9bef5d2 100644 --- a/src/lib/components/collapsible/collapsible-header.svelte +++ b/src/lib/components/collapsible/collapsible-header.svelte @@ -13,19 +13,13 @@ {@render children?.({ collapsible: bond })} diff --git a/src/lib/components/collapsible/collapsible-indicator.svelte b/src/lib/components/collapsible/collapsible-indicator.svelte index 5e34e80..ed2308b 100644 --- a/src/lib/components/collapsible/collapsible-indicator.svelte +++ b/src/lib/components/collapsible/collapsible-indicator.svelte @@ -15,21 +15,16 @@ import { animate as motion } from 'motion'; import { CollapsibleBond } from './bond.svelte'; import { Icon } from '$svelte-atoms/core/components/icon'; - import { toClassValue } from '$svelte-atoms/core/utils'; + import type { Override } from '$svelte-atoms/core/types'; - import { getPreset } from '$svelte-atoms/core/context'; import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; import IconArrowDown from '$svelte-atoms/core/icons/icon-arrow-down.svelte'; const bond = CollapsibleBond.get(); const isOpen = $derived(bond?.state.props.open ?? false); - const preset = getPreset('collapsible.indicator'); - let { class: klass = '', - as = preset?.as ?? ('div' as E), - base = preset?.base as B, children = undefined, onmount = undefined, ondestroy = undefined, @@ -51,19 +46,15 @@ {#if children} diff --git a/src/lib/components/collapsible/collapsible-root.svelte b/src/lib/components/collapsible/collapsible-root.svelte index b90a126..f9137e2 100644 --- a/src/lib/components/collapsible/collapsible-root.svelte +++ b/src/lib/components/collapsible/collapsible-root.svelte @@ -20,13 +20,10 @@ import type { Snippet } from 'svelte'; import { nanoid } from 'nanoid'; import type { Factory, Override } from '$svelte-atoms/core/types'; - import { getPreset } from '$svelte-atoms/core/context'; - import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils'; + import { defineProperty, defineState } from '$svelte-atoms/core/utils'; import { CollapsibleBond, CollapsibleState, type CollapsibleStateProps } from './bond.svelte'; import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom'; - const preset = getPreset('collapsible'); - let { open = $bindable(false), class: klass = '', @@ -34,7 +31,6 @@ data = undefined, disabled = false, as = 'div' as E, - base = preset?.base as B, factory = _factory, children = undefined, onmount = undefined, @@ -75,11 +71,9 @@ {@render children?.({ collapsible: bond })} diff --git a/src/lib/components/combobox/combobox-input.svelte b/src/lib/components/combobox/combobox-input.svelte index 9b68ea3..79313be 100644 --- a/src/lib/components/combobox/combobox-input.svelte +++ b/src/lib/components/combobox/combobox-input.svelte @@ -1,7 +1,5 @@ - - - - {#snippet children({ args })} - -
- {#each { length: 5 } as _, i (i)} -
- {/each} -
- -
- - {/snippet} - - diff --git a/src/lib/components/contaiener/index.ts b/src/lib/components/contaiener/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/container/container.stories.svelte b/src/lib/components/container/container.stories.svelte new file mode 100644 index 0000000..fca2f19 --- /dev/null +++ b/src/lib/components/container/container.stories.svelte @@ -0,0 +1,23 @@ + + + + + +
+ {#each { length: 5 } as _, i (i)} +
+ {/each} +
+ +
+ + + diff --git a/src/lib/components/contaiener/container.svelte b/src/lib/components/container/container.svelte similarity index 79% rename from src/lib/components/contaiener/container.svelte rename to src/lib/components/container/container.svelte index 2513fe3..aaf438b 100644 --- a/src/lib/components/contaiener/container.svelte +++ b/src/lib/components/container/container.svelte @@ -1,17 +1,11 @@ import { DataGridBond } from './bond.svelte'; import type { DatagridFooterProps } from './types'; - import { toClassValue } from '$svelte-atoms/core/utils'; - import { getPreset } from '$svelte-atoms/core/context'; import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom'; const bond = DataGridBond.get(); - const preset = getPreset('datagrid.footer'); - let { class: klass = '', - as = preset?.as ?? 'div', - base = preset?.base as B, children = undefined, onmount = undefined, ondestroy = undefined, @@ -25,9 +19,9 @@ import { DataGridBond, DataGridBondState, type DataGridStateProps } from './bond.svelte'; import type { DatagridRootProps } from './types'; - import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils'; - import { getPreset } from '$svelte-atoms/core/context'; + import { defineProperty, defineState } from '$svelte-atoms/core/utils'; import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom'; - import './datagrid.css'; - const preset = getPreset('datagrid'); + import './datagrid.css'; let { class: klass = '', values = $bindable([]), template = undefined, data = [], - as = preset?.as ?? 'div', - base = preset?.base as B, factory = _factory, children = undefined, onmount = undefined, @@ -47,13 +43,9 @@ { element = node; }} - {as} - {base} - class={[ - 'flex h-full items-center py-2 text-left', - toClassValue.apply(bond, [preset?.class]), - toClassValue.apply(bond, [klass]) - ]} + {bond} + preset="datagrid.td" + class={['flex h-full items-center py-2 text-left', '$preset', klass]} enter={enter?.bind(bond.state)} exit={exit?.bind(bond.state)} initial={initial?.bind(bond.state)} diff --git a/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte b/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte index c3c924d..75285b7 100644 --- a/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte +++ b/src/lib/components/datagrid/th/datagrid-th-sort-icon.svelte @@ -3,21 +3,15 @@ import { Icon } from '$svelte-atoms/core/components/icon'; import { DataGridThBond } from './bond.svelte'; import IconArrowDown from '$svelte-atoms/core/icons/icon-arrow-down.svelte'; - import { getPreset } from '$svelte-atoms/core/context'; import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom'; - import { toClassValue } from '$lib/utils'; const bond = DataGridThBond.get(); - const preset = getPreset('datagrid.sort-icon'); - const isSortable = $derived(bond.state.isSortable); const directionAsNumber = $derived(+(bond.state.props.direction === 'asc')); let { class: klass = '', - as = preset?.as, - base = preset?.base as B, onmount = undefined, ondestroy = undefined, animate = _animate, @@ -38,9 +32,9 @@ {#if !!isSortable}