@celar-ui/svelte 1.0.1 → 1.2.1

package/dist/containment/Container.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/container.scss';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	export interface ContainerProps extends HTMLAttributes<HTMLElement> {
@@ -16,22 +17,3 @@
 		{@render children()}
 	{/if}
 </section>
-
-<style>[data-container] {
-  position: relative;
-  margin: 0 auto;
-  border-radius: var(--radius);
-  padding: var(--gap);
-}
-[data-container][data-xs=true] {
-  max-width: var(--break--xs);
-}
-[data-container][data-sm=true] {
-  max-width: var(--break--sm);
-}
-[data-container][data-md=true] {
-  max-width: var(--break--md);
-}
-[data-container][data-fluid=true] {
-  width: 100%;
-}</style>

package/dist/containment/Container.svelte.d.ts

@@ -1,3 +1,4 @@
+import './styles/container.scss';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface ContainerProps extends HTMLAttributes<HTMLElement> {
     xs?: boolean;

package/dist/containment/SurfaceContainer.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import './styles/surface-container.scss';
+	import Container, { type ContainerProps } from './Container.svelte';
+
+	export interface SurfaceContainerProps extends ContainerProps {
+		elevated?: 0 | 1 | 2 | 3 | 4;
+	}
+
+	let { elevated = 0, ...rest }: SurfaceContainerProps = $props();
+</script>
+
+<Container {...rest} data-surface-container data-elevated={elevated} />

package/dist/containment/SurfaceContainer.svelte.d.ts

@@ -0,0 +1,8 @@
+import './styles/surface-container.scss';
+import { type ContainerProps } from './Container.svelte';
+export interface SurfaceContainerProps extends ContainerProps {
+    elevated?: 0 | 1 | 2 | 3 | 4;
+}
+declare const SurfaceContainer: import("svelte").Component<SurfaceContainerProps, {}, "">;
+type SurfaceContainer = ReturnType<typeof SurfaceContainer>;
+export default SurfaceContainer;

package/dist/containment/styles/card.scss

@@ -1,4 +1,5 @@
 [data-card] {
 	box-shadow: 0 var(--gap--xs) var(--gap--sm) var(--color-shadow--soft);
 	background-color: var(--color-surface);
+	border-radius: var(--gap);
 }

package/dist/containment/styles/container.scss

@@ -0,0 +1,22 @@
+[data-container] {
+	position: relative;
+	margin: 0 auto;
+	padding: var(--gap);
+	box-sizing: border-box;
+
+	&[data-xs='true'] {
+		max-width: var(--break--xs);
+	}
+
+	&[data-sm='true'] {
+		max-width: var(--break--sm);
+	}
+
+	&[data-md='true'] {
+		max-width: var(--break--md);
+	}
+
+	&[data-fluid='true'] {
+		width: 100%;
+	}
+}

package/dist/containment/styles/surface-container.scss

@@ -0,0 +1,21 @@
+[data-surface-container] {
+	--color-background: var(--color-surface);
+
+	border-radius: var(--gap--x2);
+
+	// Default: Elevated 0
+	background-color: var(--color-background);
+
+	&[data-elevated='1'] {
+		--color-background: var(--color-surfaceContainerLow);
+	}
+	&[data-elevated='2'] {
+		--color-background: var(--color-surfaceContainer);
+	}
+	&[data-elevated='3'] {
+		--color-background: var(--color-surfaceContainerHigh);
+	}
+	&[data-elevated='4'] {
+		--color-background: var(--color-surfaceContainerHighest);
+	}
+}

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { default as FilledButton } from './buttons/FilledButton.svelte';
 export { default as OutlinedButton } from './buttons/OutlinedButton.svelte';
 export { default as IconButton } from './buttons/IconButton.svelte';
 export { default as Container } from './containment/Container.svelte';
+export { default as SurfaceContainer } from './containment/SurfaceContainer.svelte';
 export { default as Spacer } from './containment/Spacer.svelte';
 export { default as Card } from './containment/Card.svelte';
 export { default as Breadcrumb } from './containment/Breadcrumb.svelte';
@@ -14,6 +15,7 @@ export { default as MinimalDialog } from './overlay/MinimalDialog.svelte';
 export { default as CommandDialog } from './overlay/CommandDialog.svelte';
 export { default as CommandGroupItems } from './overlay/CommandGroupItems.svelte';
 export { default as CommandItem } from './overlay/CommandItem.svelte';
+export { default as MinimalSurfaceDialog } from './overlay/MinimalSurfaceDialog.svelte';
 export { default as Gap } from './misc/Gap.svelte';
 export { default as DuckSpinner } from './misc/DuckSpinner.svelte';
 export { default as DotSpinner } from './misc/DotSpinner.svelte';

package/dist/index.js

@@ -6,6 +6,7 @@ export { default as FilledButton } from './buttons/FilledButton.svelte';
 export { default as OutlinedButton } from './buttons/OutlinedButton.svelte';
 export { default as IconButton } from './buttons/IconButton.svelte';
 export { default as Container } from './containment/Container.svelte';
+export { default as SurfaceContainer } from './containment/SurfaceContainer.svelte';
 export { default as Spacer } from './containment/Spacer.svelte';
 export { default as Card } from './containment/Card.svelte';
 export { default as Breadcrumb } from './containment/Breadcrumb.svelte';
@@ -15,6 +16,7 @@ export { default as MinimalDialog } from './overlay/MinimalDialog.svelte';
 export { default as CommandDialog } from './overlay/CommandDialog.svelte';
 export { default as CommandGroupItems } from './overlay/CommandGroupItems.svelte';
 export { default as CommandItem } from './overlay/CommandItem.svelte';
+export { default as MinimalSurfaceDialog } from './overlay/MinimalSurfaceDialog.svelte';
 export { default as Gap } from './misc/Gap.svelte';
 export { default as DuckSpinner } from './misc/DuckSpinner.svelte';
 export { default as DotSpinner } from './misc/DotSpinner.svelte';

package/dist/overlay/Dialog.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import './styles/dialog.scss';
 	import { fade, fly } from 'svelte/transition';
-	import { Dialog as BitDialog, type DialogRootProps } from 'bits-ui';
+	import { Dialog as BitDialog, type DialogContentProps } from 'bits-ui';
 	import type { Snippet } from 'svelte';
 	import IconButton from '../buttons/IconButton.svelte';
 
-	type DialogProps = DialogRootProps & {
+	export type DialogProps = Omit<DialogContentProps, 'title'> & {
+		open?: boolean;
 		trigger?: Snippet<[{ props: Record<string, unknown> }]>;
 		title?: Snippet;
 		close?: Snippet;
@@ -31,7 +32,7 @@
 	}: DialogProps = $props();
 </script>
 
-<BitDialog.Root {...rest} bind:open>
+<BitDialog.Root bind:open>
 	<BitDialog.Trigger>
 		{#snippet child({ props })}
 			{@render trigger?.({ props })}
@@ -46,6 +47,7 @@
 			{/snippet}
 		</BitDialog.Overlay>
 		<BitDialog.Content
+			{...rest}
 			forceMount
 			data-xs={xs}
 			data-sm={sm}

package/dist/overlay/Dialog.svelte.d.ts

@@ -1,7 +1,8 @@
 import './styles/dialog.scss';
-import { type DialogRootProps } from 'bits-ui';
+import { type DialogContentProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
-type DialogProps = DialogRootProps & {
+export type DialogProps = Omit<DialogContentProps, 'title'> & {
+    open?: boolean;
     trigger?: Snippet<[{
         props: Record<string, unknown>;
     }]>;

package/dist/overlay/MinimalSurfaceDialog.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import './styles/dialog.scss';
+	import '../containment/styles/surface-container.scss';
+	import './styles/surface-dialog.scss';
+
+	import MinimalDialog, { type MinimalDialogProps } from './MinimalDialog.svelte';
+	import type { Snippet } from 'svelte';
+
+	type MinimalSurfaceDialogProps = MinimalDialogProps & {
+		header?: Snippet;
+		footer?: Snippet;
+		elevated?: 0 | 1 | 2 | 3 | 4;
+	};
+
+	let {
+		open = $bindable(),
+		elevated,
+		children,
+		header,
+		footer,
+		...rest
+	}: MinimalSurfaceDialogProps = $props();
+</script>
+
+<MinimalDialog
+	{...rest}
+	bind:open
+	data-surface-container
+	data-minimal-surface-dialog
+	data-elevated={elevated}
+>
+	{#if header}
+		<div data-surface-dialog-header>
+			{@render header()}
+		</div>
+	{/if}
+
+	<div data-surface-dialog-body>
+		{@render children?.()}
+	</div>
+
+	{#if footer}
+		<div data-surface-dialog-footer>
+			{@render footer()}
+		</div>
+	{/if}
+</MinimalDialog>

package/dist/overlay/MinimalSurfaceDialog.svelte.d.ts

@@ -0,0 +1,13 @@
+import './styles/dialog.scss';
+import '../containment/styles/surface-container.scss';
+import './styles/surface-dialog.scss';
+import { type MinimalDialogProps } from './MinimalDialog.svelte';
+import type { Snippet } from 'svelte';
+type MinimalSurfaceDialogProps = MinimalDialogProps & {
+    header?: Snippet;
+    footer?: Snippet;
+    elevated?: 0 | 1 | 2 | 3 | 4;
+};
+declare const MinimalSurfaceDialog: import("svelte").Component<MinimalSurfaceDialogProps, {}, "open">;
+type MinimalSurfaceDialog = ReturnType<typeof MinimalSurfaceDialog>;
+export default MinimalSurfaceDialog;

package/dist/overlay/styles/surface-dialog.scss

@@ -0,0 +1,17 @@
+[data-minimal-surface-dialog] {
+	border-radius: var(--gap--x2);
+
+	[data-dialog-body] {
+		[data-surface-dialog-body] {
+			border-radius: var(--gap--x2);
+			background-color: var(--color-surfaceContainerLowest);
+			padding: var(--gap);
+		}
+		[data-surface-dialog-header] {
+			margin-block-end: var(--gap);
+		}
+		[data-surface-dialog-footer] {
+			margin-block-start: var(--gap);
+		}
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "1.0.1",
+	"version": "1.2.1",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",