@dvcol/neo-svelte 0.1.1

package/dist/cards/NeoCard.svelte

@@ -0,0 +1,413 @@
+<script lang="ts">
+  import type { NeoCardContext, NeoCardProps } from './neo-card.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import NeoDivider from '../divider/NeoDivider.svelte';
+  import IconClose from '../icons/IconClose.svelte';
+  import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeGlassFilter, computeHoverShadowElevation, computeShadowElevation } from '../utils/shadow.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    children: content,
+    header,
+    action,
+    footer,
+    media,
+
+    // States
+    ref = $bindable(),
+    tag = 'div',
+    close,
+
+    // Styles
+    elevation = 3,
+    hover = 0,
+    borderless,
+    rounded,
+    glass,
+    segmented,
+    cover,
+    start,
+    horizontal,
+
+    // Flex
+    justify,
+    align,
+    flex,
+
+    // Transition
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
+    // Actions
+    use,
+
+    // Events
+    onClose,
+
+    // Other props
+    contentTag = 'div',
+    contentProps,
+    headerTag = 'div',
+    headerProps,
+    footerTag = 'div',
+    footerProps,
+    actionTag = 'div',
+    actionProps,
+    mediaTag = 'div',
+    mediaProps,
+    ...rest
+  }: NeoCardProps = $props();
+  /* eslint-enable prefer-const */
+
+  const filter = $derived.by(() => computeGlassFilter(elevation, glass));
+
+  const boxShadow = $derived.by(() => computeShadowElevation(elevation, glass));
+  const hoverElevation = $derived(elevation + hover);
+  const hoverShadow = $derived.by(() => computeHoverShadowElevation(elevation, hover, glass) ?? boxShadow);
+
+  const hoverFlat = $derived(boxShadow.endsWith('flat') && !hoverShadow.endsWith('flat'));
+  const flatHover = $derived(hoverShadow.endsWith('flat') && !boxShadow.endsWith('flat'));
+
+  const segments = $derived([content, header, action, footer, media, close].filter(Boolean).length > 1);
+
+  const context: NeoCardContext = $derived({
+    elevation,
+    hover,
+    borderless,
+    rounded,
+    glass,
+    segmented,
+    cover,
+    start,
+    horizontal,
+    close,
+    onClose,
+  });
+
+  const inFn = $derived(toTransition(inAction ?? transitionAction));
+  const inProps = $derived(toTransitionProps(inAction ?? transitionAction));
+  const outFn = $derived(toTransition(outAction ?? transitionAction));
+  const outProps = $derived(toTransitionProps(outAction ?? transitionAction));
+
+  const useFn = $derived(toAction(use));
+  const useProps = $derived(toActionProps(use));
+</script>
+
+{#snippet closeBtn()}
+  {#if close}
+    <div class="neo-card-close">
+      <NeoButton aria-label="Close card" rounded text onclick={onClose}>
+        {#snippet icon()}
+          <IconClose />
+        {/snippet}
+      </NeoButton>
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet divider()}
+  {#if segments && typeof segmented === 'number'}
+    <div class="neo-card-divider">
+      <NeoDivider vertical={horizontal} elevation={segmented} />
+    </div>
+  {/if}
+{/snippet}
+
+<svelte:element
+  this={tag}
+  bind:this={ref}
+  class:neo-card={true}
+  class:horizontal
+  class:borderless
+  class:segmented={segmented === true}
+  class:segments
+  class:image={media && !segments}
+  class:rounded
+  class:hover
+  class:start
+  class:raised={elevation > 3}
+  class:flat={!elevation}
+  class:hover-flat={hoverFlat}
+  class:flat-hover={flatHover}
+  class:glass
+  style:--neo-card-hover-shadow={hoverShadow}
+  style:--neo-card-box-shadow={boxShadow}
+  style:--neo-card-glass-blur={filter}
+  style:justify-content={justify}
+  style:align-items={align}
+  style:flex
+  use:useFn={useProps}
+  out:outFn={outProps}
+  in:inFn={inProps}
+  {...rest}
+>
+  {#if media}
+    <svelte:element
+      this={mediaTag}
+      class:neo-card-segment={true}
+      class:neo-card-media={true}
+      class:cover
+      class:inset={elevation < 0 || hoverElevation < 0}
+      {...mediaProps}
+    >
+      {@render media?.(context)}
+    </svelte:element>
+  {/if}
+  {#if header || (!horizontal && close)}
+    <svelte:element this={headerTag} class:neo-card-segment={true} class:neo-card-header={true} {...headerProps}>
+      {@render header?.(context)}
+      {#if !horizontal}
+        {@render closeBtn()}
+      {/if}
+    </svelte:element>
+  {/if}
+  {#if segments}
+    {@render divider()}
+    {#if content}
+      <svelte:element this={contentTag} class:neo-card-segment={true} class:neo-card-content={true} {...contentProps}>
+        {@render content?.(context)}
+      </svelte:element>
+    {/if}
+  {:else}
+    {@render content?.(context)}
+  {/if}
+  {#if footer}
+    {@render divider()}
+    <svelte:element this={footerTag} class:neo-card-segment={true} class:neo-card-footer={true} {...footerProps}>
+      {@render footer?.(context)}
+    </svelte:element>
+  {/if}
+  {#if action || (horizontal && close)}
+    {@render divider()}
+    <svelte:element this={actionTag} class:neo-card-segment={true} class:neo-card-action={true} {...actionProps}>
+      {#if horizontal}
+        {@render closeBtn()}
+      {/if}
+      {@render action?.(context)}
+    </svelte:element>
+  {/if}
+</svelte:element>
+
+<style>.neo-card {
+  --neo-card-full-spacing: var(--neo-card-spacing, 1.5rem);
+  --neo-card-half-spacing: calc(var(--neo-card-spacing, 1.5rem) / 2);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: fit-content;
+  margin: var(--neo-shadow-margin, 0.6rem);
+  padding: var(--neo-card-full-spacing);
+  color: var(--neo-card-text-color, inherit);
+  background-color: var(--neo-card-bg-color, transparent);
+  border: var(--neo-border-width, 1px) var(--neo-card-border-color, transparent) solid;
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius));
+  box-shadow: var(--neo-card-box-shadow, var(--neo-box-shadow-flat));
+  transition: margin 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease-out;
+}
+.neo-card.borderless {
+  border-color: transparent !important;
+}
+.neo-card.raised {
+  margin: var(--neo-shadow-margin-lg, 1.125rem);
+}
+.neo-card.hover.flat-hover:hover, .neo-card.flat:not(.borderless, .hover-flat:hover) {
+  border-color: var(--neo-card-border-color, var(--neo-border-color));
+}
+.neo-card.hover:hover {
+  box-shadow: var(--neo-card-hover-shadow, var(--neo-card-box-shadow));
+}
+.neo-card .neo-card-divider {
+  margin: 0.5rem calc(var(--neo-card-full-spacing) - 0.25rem);
+}
+.neo-card .neo-card-segment {
+  transition: border-radius 0.3s ease;
+}
+.neo-card .neo-card-segment:not(.neo-card-media) {
+  padding: var(--neo-card-half-spacing) var(--neo-card-full-spacing);
+}
+.neo-card .neo-card-segment:not(.neo-card-media):first-child {
+  padding: var(--neo-card-full-spacing) var(--neo-card-full-spacing) var(--neo-card-half-spacing);
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius)) 0 0;
+}
+.neo-card .neo-card-segment:not(.neo-card-media):last-child {
+  padding: var(--neo-card-half-spacing) var(--neo-card-full-spacing) var(--neo-card-full-spacing);
+  border-radius: 0 0 var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius));
+}
+.neo-card .neo-card-media {
+  margin: var(--neo-card-full-spacing);
+  overflow: hidden;
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius));
+}
+.neo-card .neo-card-media.cover:not(.inset) {
+  padding: 0;
+}
+.neo-card .neo-card-media.cover:not(.inset):not(:only-child) {
+  margin: 0 0 var(--neo-card-full-spacing);
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius)) 0 0;
+}
+.neo-card .neo-card-media.cover:not(.inset) :global(.neo-skeleton-media) {
+  border-radius: 0;
+}
+.neo-card .neo-card-action,
+.neo-card .neo-card-header {
+  display: flex;
+  align-items: center;
+}
+.neo-card .neo-card-close {
+  align-self: flex-start;
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  --neo-btn-text-color-focused: var(--neo-close-color-focused, rgb(255 0 0 / 50%));
+  --neo-btn-text-color-focused-hover: var(--neo-close-color-hover, rgb(255 0 0 / 75%));
+  --neo-text-color-focused-active: var(--neo-close-color, rgb(255 0 0));
+  --neo-btn-text-color-hover: var(--neo-close-color-hover, rgb(255 0 0 / 75%));
+  --neo-btn-text-color-active: var(--neo-close-color, rgb(255 0 0));
+}
+.neo-card:focus-within .neo-card-close, .neo-card:focus .neo-card-close, .neo-card:hover .neo-card-close {
+  opacity: 1;
+}
+.neo-card.image {
+  padding: 0;
+}
+.neo-card.image .neo-card-media.cover:not(.inset) {
+  margin: 0;
+}
+.neo-card.segments {
+  padding: 0;
+}
+.neo-card.segmented .neo-card-segment:not(.neo-card-media) {
+  padding: var(--neo-card-full-spacing);
+}
+.neo-card.segmented .neo-card-segment:not(.neo-card-media, :last-child) {
+  border-bottom: var(--neo-border-width, 1px) solid var(--neo-card-border-color, var(--neo-border-color));
+}
+.neo-card.glass {
+  --neo-skeleton-color: var(--neo-glass-skeleton-color);
+  background-color: var(--neo-card-bg-color, var(--neo-glass-background-color));
+  border-color: var(--neo-card-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color));
+  backdrop-filter: var(--neo-card-glass-blur, var(--neo-blur-4) var(--neo-saturate-2));
+}
+@starting-style {
+  .neo-card.start {
+    box-shadow: var(--neo-box-shadow-flat);
+  }
+  .neo-card.start:not(.borderless) {
+    border-color: var(--neo-card-border-color, var(--neo-border-color));
+  }
+}
+.neo-card.horizontal {
+  flex-direction: row;
+}
+.neo-card.horizontal .neo-card-action {
+  flex-direction: column;
+}
+.neo-card.horizontal .neo-card-close {
+  align-self: flex-end;
+  margin-bottom: auto;
+}
+.neo-card.horizontal .neo-card-media.cover:not(.inset, :only-child) {
+  margin: 0 var(--neo-card-full-spacing) 0 0;
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius));
+}
+.neo-card.horizontal .neo-card-segment:not(.neo-card-media) {
+  padding: var(--neo-card-full-spacing) var(--neo-card-half-spacing);
+}
+.neo-card.horizontal .neo-card-segment:not(.neo-card-media):first-child {
+  padding: var(--neo-card-full-spacing) var(--neo-card-half-spacing) var(--neo-card-full-spacing) var(--neo-card-full-spacing);
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius));
+}
+.neo-card.horizontal .neo-card-segment:not(.neo-card-media):last-child {
+  padding: var(--neo-card-full-spacing) var(--neo-card-full-spacing) var(--neo-card-full-spacing) var(--neo-card-half-spacing);
+  border-radius: 0 var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius)) 0;
+}
+.neo-card.rounded {
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg));
+}
+.neo-card.rounded .neo-card-media {
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-md));
+}
+.neo-card.rounded .neo-card-media.cover:not(.inset) {
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg));
+}
+.neo-card.rounded .neo-card-media.cover:not(.inset):not(:only-child) {
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0;
+}
+.neo-card.rounded .neo-card-segment:not(.neo-card-media):first-child {
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0;
+}
+.neo-card.rounded .neo-card-segment:not(.neo-card-media):last-child {
+  border-radius: 0 0 var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg));
+}
+.neo-card.rounded.horizontal .neo-card-segment:not(.neo-card-media):first-child {
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius-lg));
+}
+.neo-card.rounded.horizontal .neo-card-segment:not(.neo-card-media):last-child {
+  border-radius: 0 var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0;
+}
+.neo-card.rounded.horizontal .neo-card-media.cover:not(.inset, :only-child) {
+  border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius-lg));
+}
+
+.neo-card,
+.neo-card-media,
+.neo-card-header,
+.neo-card-content,
+.neo-card-action,
+.neo-card-footer {
+  scrollbar-gutter: stable;
+}
+.neo-card::-webkit-scrollbar,
+.neo-card-media::-webkit-scrollbar,
+.neo-card-header::-webkit-scrollbar,
+.neo-card-content::-webkit-scrollbar,
+.neo-card-action::-webkit-scrollbar,
+.neo-card-footer::-webkit-scrollbar {
+  width: var(--neo-scrollbar-width, 0.45rem);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+.neo-card::-webkit-scrollbar-button,
+.neo-card-media::-webkit-scrollbar-button,
+.neo-card-header::-webkit-scrollbar-button,
+.neo-card-content::-webkit-scrollbar-button,
+.neo-card-action::-webkit-scrollbar-button,
+.neo-card-footer::-webkit-scrollbar-button {
+  height: var(--neo-scrollbar-button-height, 2px);
+}
+.neo-card::-webkit-scrollbar-thumb,
+.neo-card-media::-webkit-scrollbar-thumb,
+.neo-card-header::-webkit-scrollbar-thumb,
+.neo-card-content::-webkit-scrollbar-thumb,
+.neo-card-action::-webkit-scrollbar-thumb,
+.neo-card-footer::-webkit-scrollbar-thumb {
+  background-color: var(--neo-scrollbar-color);
+  border: none;
+  border-radius: var(--neo-border-radius);
+  cursor: pointer;
+}
+.neo-card::-webkit-scrollbar-corner,
+.neo-card-media::-webkit-scrollbar-corner,
+.neo-card-header::-webkit-scrollbar-corner,
+.neo-card-content::-webkit-scrollbar-corner,
+.neo-card-action::-webkit-scrollbar-corner,
+.neo-card-footer::-webkit-scrollbar-corner {
+  background-color: transparent;
+  background-clip: border-box;
+  border: none;
+  outline: none;
+}
+.neo-card::-webkit-resizer,
+.neo-card-media::-webkit-resizer,
+.neo-card-header::-webkit-resizer,
+.neo-card-content::-webkit-resizer,
+.neo-card-action::-webkit-resizer,
+.neo-card-footer::-webkit-resizer {
+  background: url("~/assets/neo-icon-resizer-bottom-right.svg") no-repeat bottom;
+  background-clip: border-box;
+}</style>

package/dist/cards/NeoCard.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoCardProps } from './neo-card.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoCard: $$__sveltets_2_IsomorphicComponent<NeoCardProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type NeoCard = InstanceType<typeof NeoCard>;
+export default NeoCard;

package/dist/cards/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NeoCard } from './NeoCard.svelte';
+export type { NeoCardProps, NeoCardContext, NeoCardElevation } from './neo-card.model.js';

package/dist/cards/index.js

@@ -0,0 +1 @@
+export { default as NeoCard } from './NeoCard.svelte';

package/dist/cards/neo-card.model.d.ts

@@ -0,0 +1,129 @@
+import type { Snippet } from 'svelte';
+import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+import type { HTMLActionProps } from '../utils/action.utils.js';
+import type { HTMLFlexProps, HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
+import type { ShadowElevation } from '../utils/shadow.utils.js';
+export type NeoCardElevation = ShadowElevation;
+export type NeoCardContext = {
+    /**
+     * Card elevation.
+     * @default 3
+     */
+    elevation?: NeoCardElevation;
+    /**
+     * Weather to increase/decrease the elevation when hovered.
+     * @default 0
+     */
+    hover?: number;
+    /**
+     * By default, cards with no elevation will display a border.
+     * If this is `true`, the card will never display a border.
+     */
+    borderless?: boolean;
+    /**
+     * If true, the card will have a rounded border.
+     */
+    rounded?: boolean;
+    /**
+     * If true, the card will be displayed with a glass effect.
+     */
+    glass?: boolean;
+    /**
+     * If true, a border will separate the card content from the header, footer, and action.
+     * If a number is provided, a raised/inset divider will be displayed instead.
+     */
+    segmented?: boolean | number;
+    /**
+     * If true, the media will be displayed as a cover (no margin).
+     */
+    cover?: boolean;
+    /**
+     * If true, the card will start as flat on first render.
+     * @see [@starting-style](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for browser support
+     */
+    start?: boolean;
+    /**
+     * If true, the card will be displayed as a horizontal card.
+     */
+    horizontal?: boolean;
+    /**
+     * If true, the card will show a close butto.
+     */
+    close?: boolean;
+    /**
+     * Callback when the close button is clicked.
+     */
+    onClose?: NeoButtonProps['onclick'];
+};
+export type NeoCardProps = {
+    /**
+     * Snippet to display as the card content.
+     */
+    children: Snippet<[NeoCardContext]>;
+    /**
+     * Optional snippets to display as the card header.
+     */
+    header?: Snippet<[NeoCardContext]>;
+    /**
+     * Optional snippet to display as the card action.
+     */
+    action?: Snippet<[NeoCardContext]>;
+    /**
+     * Optional snippet to display as the card footer.
+     */
+    footer?: Snippet<[NeoCardContext]>;
+    /**
+     * Optional snippet to display as the card media.
+     */
+    media?: Snippet<[NeoCardContext]>;
+    /**
+     * The HTML tag to use for the card.
+     * @default 'div'
+     */
+    tag?: keyof HTMLElementTagNameMap;
+    /**
+     * The HTML tag to use for the card content.
+     * @default 'div'
+     */
+    contentTag?: keyof HTMLElementTagNameMap;
+    /**
+     * The HTML tag to use for the card header.
+     * @default 'div'
+     */
+    headerTag?: keyof HTMLElementTagNameMap;
+    /**
+     * The HTML tag to use for the card action.
+     * @default 'div'
+     */
+    actionTag?: keyof HTMLElementTagNameMap;
+    /**
+     * The HTML tag to use for the card footer.
+     * @default 'div'
+     */
+    footerTag?: keyof HTMLElementTagNameMap;
+    /**
+     * The HTML tag to use for the card media.
+     * @default 'div'
+     */
+    mediaTag?: keyof HTMLElementTagNameMap;
+    /**
+     * Props for the card content.
+     */
+    contentProps?: HTMLNeoBaseElement;
+    /**
+     * Props for the card header.
+     */
+    headerProps?: HTMLNeoBaseElement;
+    /**
+     * Props for the card action
+     */
+    actionProps?: HTMLActionProps;
+    /**
+     * Props for the card footer.
+     */
+    footerProps?: HTMLNeoBaseElement;
+    /**
+     * Props for the card media.
+     */
+    mediaProps?: HTMLNeoBaseElement;
+} & NeoCardContext & HTMLNeoBaseElement & HTMLFlexProps & HTMLActionProps & HTMLRefProps;

package/dist/cards/neo-card.model.js

@@ -0,0 +1 @@
+export {};

package/dist/containers/NeoTransitionContainer.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { NeoTransitionContainerProps } from './neo-transition-container.model.js';
+
+  const {
+    // Snippets
+    children,
+
+    // States
+    tag = 'div',
+
+    // Styles
+    overflow = 'hidden',
+    width,
+    height,
+
+    // Other props
+    ...rest
+  }: NeoTransitionContainerProps = $props();
+</script>
+
+<svelte:element this={tag} class:neo-transition-container={true} style:overflow-x={overflow} style:width style:height {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>.neo-transition-container {
+  display: grid;
+  flex-grow: 1;
+  grid-template-areas: "transition";
+  width: 100%;
+  height: 100%;
+}
+.neo-transition-container :global(> *) {
+  grid-area: transition;
+}</style>

package/dist/containers/NeoTransitionContainer.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoTransitionContainerProps } from './neo-transition-container.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoTransitionContainer: $$__sveltets_2_IsomorphicComponent<NeoTransitionContainerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type NeoTransitionContainer = InstanceType<typeof NeoTransitionContainer>;
+export default NeoTransitionContainer;

package/dist/containers/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NeoTransitionContainer } from './NeoTransitionContainer.svelte';
+export type { NeoTransitionContainerProps } from './neo-transition-container.model.js';

package/dist/containers/index.js

@@ -0,0 +1 @@
+export { default as NeoTransitionContainer } from './NeoTransitionContainer.svelte';

package/dist/containers/neo-transition-container.model.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HTMLNeoBaseElement } from '../utils/html-element.utils.js';
+export type NeoTransitionContainerProps = {
+    /**
+     * Snippet to display as the container content.
+     */
+    children?: Snippet;
+    /**
+     * The HTML tag to use for the container.
+     * @default 'div'
+     */
+    tag?: keyof HTMLElementTagNameMap;
+    /**
+     * Horizontal overflow style (overflow-x).
+     */
+    overflow?: CSSStyleDeclaration['overflowX'];
+    /**
+     * Width of the container.
+     */
+    width?: CSSStyleDeclaration['width'];
+    /**
+     * Height of the container.
+     */
+    height?: CSSStyleDeclaration['height'];
+} & HTMLNeoBaseElement;

package/dist/containers/neo-transition-container.model.js

@@ -0,0 +1 @@
+export {};