@celar-ui/svelte 0.0.1

package/dist/misc/DotSpinner.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    color?: string;
+    size?: string;
+};
+declare const DotSpinner: import("svelte").Component<$$ComponentProps, {}, "">;
+type DotSpinner = ReturnType<typeof DotSpinner>;
+export default DotSpinner;

package/dist/misc/DuckSpinner.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	interface Props extends HTMLAttributes<SVGElement> {
+		thin?: boolean;
+		size?: number | string;
+	}
+	let { thin, size, ...rest }: Props = $props();
+</script>
+
+<svg
+	{...rest}
+	data-duck-spinner
+	data-thin={thin}
+	width={size || 24}
+	height={size || 24}
+	viewBox="0 0 33.866664 33.866664"
+	version="1.1"
+	id="svg1"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<defs id="defs1" />
+
+	<g id="layer1" class="spinner">
+		<g class="circle-0" id="g22">
+			<path
+				class="line"
+				d="m 2.6736248,14.203488 c 0,0 1.3951363,-7.2354312 7.3763862,-10.1229312"
+				id="path16"
+			/>
+
+			<path
+				class="line"
+				d="m 12.71875,2.8875 c 0,0 4.60625,-1.71875 9.4875,0.4812498"
+				id="path17"
+			/>
+
+			<path
+				class="line"
+				d="m 26.984672,6.2784102 c 0,0 4.335839,2.9861583 4.537202,11.2528398"
+				id="path18"
+			/>
+
+			<path
+				class="line"
+				d="m 29.595148,24.26875 c 0,0 -1.718898,3.074016 -4.260773,4.657814"
+				id="path19"
+			/>
+
+			<path
+				class="line"
+				d="m 2.3458408,16.147909 c 0,0 -0.2229316,2.290195 0.5701363,5.027807"
+				id="path20"
+			/>
+
+			<path
+				class="line"
+				d="m 4.05625,23.85625 c 0,0 2.8513975,4.80416 6.907648,6.316658"
+				id="path21"
+			/>
+
+			<path class="line" d="m 12.925,30.8 c 0,0 2.709727,1.613897 8.897227,-0.0361" id="path22" />
+		</g>
+
+		<g class="circle-1" id="g33">
+			<path
+				class="line"
+				d="m 8.1124998,6.9093749 c 0,0 3.4031252,-3.575 9.1093752,-3.334375"
+				id="path23"
+			/>
+
+			<path
+				class="line"
+				d="m 19.353125,3.7812501 c 0,0 2.6125,0.4468749 4.090625,1.44375"
+				id="path24"
+			/>
+
+			<path
+				class="line"
+				d="m 24.921875,6.2562498 c 0,0 2.578125,1.684375 3.85,4.3656252"
+				id="path25"
+			/>
+
+			<path class="line" d="m 29.35625,11.928125 0.412498,1.203125" id="path26" />
+
+			<path
+				class="line"
+				d="m 30.018892,14.511157 c 0,0 0.947965,3.913394 -0.802124,7.632334"
+				id="path27"
+			/>
+
+			<path
+				class="line"
+				d="m 28.050043,24.160955 c 0,0 -0.872306,2.180701 -3.740298,3.943598"
+				id="path28"
+			/>
+
+			<path
+				class="line"
+				d="m 22.046263,29.19246 c 0,0 -1.89593,0.753513 -3.135576,0.923658"
+				id="path29"
+			/>
+
+			<path
+				class="line"
+				d="m 15.483429,30.140425 c 0,0 -5.298882,-0.486134 -7.996936,-3.743245"
+				id="path30"
+			/>
+
+			<path
+				class="line"
+				d="m 6.0843749,24.6125 c 0,0 -2.475,-3.09375 -2.475,-6.634375"
+				id="path31"
+			/>
+
+			<path
+				class="line"
+				d="M 3.678125,15.5375 C 3.713349,14.304345 3.8090817,13.658535 4.4343751,12.03125"
+				id="path32"
+			/>
+
+			<path
+				class="line"
+				d="m 5.2593749,10.45 c 0,0 1.1,-1.7187501 1.4437501,-2.0625002"
+				id="path33"
+			/>
+		</g>
+	</g>
+
+	<g id="layer2" class="duck" transform="translate(0.275,0.1375)">
+		<path
+			class="line body"
+			d="m 9.95702,9.979603 c -0.7389196,0.208826 -1.0762528,0.578285 -1.0441258,0.931682 0.032127,0.353397 0.128508,0.78711 1.1405078,0.803174 1.011998,0.01607 3.421521,0.08033 3.421521,0.08033 0,0 0.09639,0.337333 -0.01607,0.46584 -0.112449,0.128509 -3.5500282,2.232824 -3.325139,5.477647 0.224887,3.244824 1.879426,4.465647 1.879426,4.465647 0,0 0.04819,3.276951 0.06425,3.630348 0.01606,0.353396 0.144572,1.060189 0.658603,1.413586 0.514032,0.353399 1.65454,0.754982 2.955682,-0.04819 1.301141,-0.803175 2.666536,-1.943682 3.132379,-3.084189 0.46584,-1.140508 0.594348,-2.12038 0.594348,-2.409522 0,-0.289142 0.04819,-0.497969 0.658602,-0.497969 0.610412,0 3.935553,0.01607 4.128316,0.01607 0.192761,0 1.493903,-0.06425 1.831237,-0.867427 0.337332,-0.803173 0.41765,-1.89549 -0.497968,-3.100252 C 24.622977,16.051607 23.3379,14.766528 21.95644,14.493449 20.57498,14.220368 19.884252,14.284623 19.675426,14.043671 19.4666,13.802719 18.72768,12.983481 19.225647,12.035735 19.723615,11.087991 20.462536,9.4334513 19.900316,8.2286905 19.338094,7.0239223 18.599174,5.9316054 17.42654,5.6263993 16.253905,5.3211932 15.177652,5.2569394 14.406605,5.5942725 13.635557,5.9316054 12.880574,6.4135099 12.382606,7.3291285 11.884638,8.244747 11.884638,8.9354766 11.322418,9.3210006 10.760195,9.7065237 9.95702,9.9796019 9.95702,9.979603 Z"
+			id="path34"
+		/>
+
+		<circle class="line eye" id="path35" cx="15.920952" cy="8.3493843" r="1.069499" />
+	</g>
+</svg>
+
+<style>[data-duck-spinner] .line {
+  fill: none;
+  stroke: var(--color-text);
+  stroke-width: 1.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: none;
+  transition-duration: var(--transition-duration);
+  transition-property: stroke;
+}
+[data-duck-spinner] .spinner {
+  transform-origin: center;
+  scale: 1.1;
+}
+[data-duck-spinner] .spinner > * {
+  transform-origin: center;
+  opacity: 0.64;
+  animation-duration: 3s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-name: spin;
+}
+[data-duck-spinner] .spinner .circle-1 {
+  scale: 0.85;
+  opacity: 0.32;
+  animation-direction: reverse;
+}
+@keyframes spin {
+  from {
+    rotate: 0;
+  }
+  to {
+    rotate: 359deg;
+  }
+}
+[data-duck-spinner] .duck {
+  transform-origin: center;
+  scale: 1.2;
+  animation-duration: 2s;
+  animation-timing-function: ease;
+  animation-iteration-count: infinite;
+  animation-name: slay;
+}
+@keyframes slay {
+  0% {
+    rotate: -24deg;
+  }
+  50% {
+    rotate: 24deg;
+  }
+  100% {
+    rotate: -24deg;
+  }
+}
+[data-duck-spinner] .duck .body {
+  stroke-width: 1.5;
+}
+[data-duck-spinner] .duck .eye {
+  stroke-width: 1;
+}
+
+[data-thin=true] .line {
+  stroke-width: 0.5;
+}
+[data-thin=true] .duck .body {
+  stroke-width: 1;
+}
+[data-thin=true] .duck .eye {
+  stroke-width: 0.8;
+}</style>

package/dist/misc/DuckSpinner.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<SVGElement> {
+    thin?: boolean;
+    size?: number | string;
+}
+declare const DuckSpinner: import("svelte").Component<Props, {}, "">;
+type DuckSpinner = ReturnType<typeof DuckSpinner>;
+export default DuckSpinner;

package/dist/misc/Gap.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	interface Props {
+		size?: string;
+	}
+
+	let { size }: Props = $props();
+</script>
+
+<div data-gap style:width={size}></div>
+
+<style>[data-gap] {
+  display: block;
+  aspect-ratio: 1;
+  width: 1rem;
+  height: auto;
+}</style>

package/dist/misc/Gap.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    size?: string;
+}
+declare const Gap: import("svelte").Component<Props, {}, "">;
+type Gap = ReturnType<typeof Gap>;
+export default Gap;

package/dist/navigation/AppBar.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	export interface AppBarProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+		leading?: Snippet;
+		title?: Snippet;
+		actions?: Snippet;
+	}
+
+	let { leading, title, actions, ...rest }: AppBarProps = $props();
+</script>
+
+<section data-app-bar {...rest}>
+	<div data-app-bar-left>
+		<div data-app-bar-leading>
+			{@render leading?.()}
+		</div>
+
+		<div data-app-bar-title>
+			{@render title?.()}
+		</div>
+	</div>
+
+	<div data-app-bar-actions>
+		{@render actions?.()}
+	</div>
+</section>
+
+<style>[data-app-bar] {
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--gap--half);
+  -webkit-backdrop-filter: blur(var(--blur-length--x2));
+          backdrop-filter: blur(var(--blur-length--x2));
+  background-color: rgba(var(--color-bg--rgb), 0.88);
+  padding: 0 var(--gap--half);
+  min-height: var(--gap--x3);
+}
+[data-app-bar] [data-app-bar-left] {
+  display: flex;
+  align-items: center;
+  gap: var(--gap--half);
+  overflow: hidden;
+}
+[data-app-bar] [data-app-bar-left] [data-app-bar-title] {
+  flex: 1;
+  overflow: hidden;
+  font-weight: bold;
+  font-size: 1.1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-app-bar] [data-app-bar-actions] {
+  display: flex;
+  align-items: center;
+  gap: var(--gap--sm);
+}</style>

package/dist/navigation/AppBar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+export interface AppBarProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    leading?: Snippet;
+    title?: Snippet;
+    actions?: Snippet;
+}
+declare const AppBar: import("svelte").Component<AppBarProps, {}, "">;
+type AppBar = ReturnType<typeof AppBar>;
+export default AppBar;

package/dist/navigation/NavigationBar.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { children, ...rest }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<section {...rest} data-navigation-bar>
+	{@render children?.()}
+</section>
+
+<style>:root {
+  --gap--x3: 3rem;
+  --gap--x2: 2rem;
+  --gap: 1rem;
+  --gap--md: 0.7rem;
+  --gap--half: 0.5rem;
+  --gap--sm: 0.3rem;
+  --gap--xs: 0.1rem;
+  --break--xs: 540px;
+  --break--sm: 960px;
+  --break--md: 1320px;
+}
+
+[data-navigation-bar] {
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  justify-content: space-evenly;
+  border-top-right-radius: var(--radius);
+  border-top-left-radius: var(--radius);
+  background-color: var(--color-primary--lighter);
+  width: 100%;
+  height: auto;
+}
+@media screen and (min-width: 540px) {
+  [data-navigation-bar] {
+    flex-direction: column;
+    justify-content: flex-start;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: var(--radius);
+    padding: 0 var(--gap--half);
+    width: -moz-min-content;
+    width: min-content;
+    height: 100%;
+  }
+}</style>

package/dist/navigation/NavigationBar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const NavigationBar: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
+type NavigationBar = ReturnType<typeof NavigationBar>;
+export default NavigationBar;

package/dist/navigation/NavigationBarButton.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	interface NavigationBarButtonProps extends HTMLAnchorAttributes {
+		icon: Snippet;
+		iconActive?: Snippet;
+		active?: boolean;
+	}
+
+	let { active, icon, iconActive, children, ...rest }: NavigationBarButtonProps = $props();
+</script>
+
+<a {...rest} data-navigation-bar-button data-active={active}>
+	<div data-navigation-bar-button-icon>
+		{#if active}
+			{@render (iconActive || icon)()}
+		{:else}
+			{@render icon()}
+		{/if}
+	</div>
+
+	{@render children?.()}
+</a>
+
+<style>[data-navigation-bar-button] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--gap--xs);
+  background-color: transparent;
+  padding: var(--gap--half) 0;
+  width: 100%;
+  color: var(--color-text);
+  text-align: center;
+  font-size: 0.8rem;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-navigation-bar-button]:not(:disabled):active {
+  top: 0;
+}
+[data-navigation-bar-button]:hover > [data-navigation-bar-button-icon] {
+  background-color: var(--color-primary--light);
+}
+[data-navigation-bar-button][data-active=true] > [data-navigation-bar-button-icon] {
+  background-color: var(--color-primary);
+  color: var(--color-primary--text);
+}
+[data-navigation-bar-button] > [data-navigation-bar-button-icon] {
+  transition-duration: var(--transition-dur);
+  transition-property: color, background-color;
+  border-radius: var(--radius);
+  background-color: var(--color-primary--lighter);
+  padding: var(--gap--xs) var(--gap);
+}</style>

package/dist/navigation/NavigationBarButton.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface NavigationBarButtonProps extends HTMLAnchorAttributes {
+    icon: Snippet;
+    iconActive?: Snippet;
+    active?: boolean;
+}
+declare const NavigationBarButton: import("svelte").Component<NavigationBarButtonProps, {}, "">;
+type NavigationBarButton = ReturnType<typeof NavigationBarButton>;
+export default NavigationBarButton;

package/dist/overlay/Dialog.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { fade, fly } from 'svelte/transition';
+	import { Dialog, type DialogRootProps } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import IconButton from '../buttons/IconButton.svelte';
+
+	type DialogProps = DialogRootProps & {
+		trigger?: Snippet<[{ props: Record<string, unknown> }]>;
+		title?: Snippet;
+		close?: Snippet;
+		xs?: boolean;
+		sm?: boolean;
+		md?: boolean;
+		fluid?: boolean;
+	};
+
+	let {
+		open = $bindable(false),
+		trigger,
+		title,
+		close,
+		children,
+		xs,
+		sm,
+		md,
+		fluid,
+		...rest
+	}: DialogProps = $props();
+
+	let duration = 200;
+</script>
+
+<Dialog.Root {...rest} bind:open>
+	<Dialog.Trigger>
+		{#snippet child({ props })}
+			{@render trigger?.({ props })}
+		{/snippet}
+	</Dialog.Trigger>
+	<Dialog.Portal>
+		<Dialog.Overlay forceMount>
+			{#snippet child({ props, open })}
+				{#if open}
+					<div {...props} transition:fade={{ duration }}></div>
+				{/if}
+			{/snippet}
+		</Dialog.Overlay>
+		<Dialog.Content forceMount data-xs={xs} data-sm={sm} data-md={md} data-fluid={fluid}>
+			{#snippet child({ props, open })}
+				{#if open}
+					<div {...props} transition:fly={{ duration, y: 50 }}>
+						<div data-dialog-header>
+							<Dialog.Title children={title} />
+							<Dialog.Close>
+								{#snippet child({ props })}
+									<IconButton {...props}>
+										{@render close?.()}
+									</IconButton>
+								{/snippet}
+							</Dialog.Close>
+						</div>
+
+						<div data-dialog-body>
+							{@render children?.()}
+						</div>
+					</div>
+				{/if}
+			{/snippet}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+
+<style>:global([data-dialog-overlay]) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-backdrop-filter: blur(var(--blur-length));
+          backdrop-filter: blur(var(--blur-length));
+  background-color: var(--color-border--strong);
+  z-index: 100;
+}
+
+:global([data-dialog-content]) {
+  box-sizing: border-box;
+  position: fixed;
+  top: calc(50dvh - var(--gap));
+  left: calc(50lvw - var(--gap));
+  transform: translate(-50%, -50%);
+  max-width: calc(100% - var(--gap--x2));
+  max-height: calc(100dvh - var(--gap--x2));
+  margin: var(--gap);
+  background-color: var(--color-bg);
+  box-shadow: 0 4px 1rem var(--color-shadow);
+  border-radius: var(--radius);
+  overflow: hidden;
+  z-index: 100;
+}
+:global([data-dialog-content])[data-xs=true] {
+  max-width: min(100% - var(--gap--x2), var(--break--xs));
+}
+:global([data-dialog-content])[data-sm=true] {
+  max-width: min(100% - var(--gap--x2), var(--break--sm));
+}
+:global([data-dialog-content])[data-md=true] {
+  max-width: min(100% - var(--gap--x2), var(--break--md));
+}
+:global([data-dialog-content])[data-fluid=true] {
+  width: 100%;
+}
+
+:global([data-dialog-header]) {
+  height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: var(--gap);
+  padding-right: var(--gap--sm);
+  overflow: hidden;
+}
+
+:global([data-dialog-title]) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:global([data-dialog-body]) {
+  box-sizing: border-box;
+  max-height: calc(100dvh - var(--gap--x2) - 48px);
+  overflow-y: auto;
+  padding: var(--gap);
+}</style>

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

@@ -0,0 +1,16 @@
+import { Dialog, type DialogRootProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+type DialogProps = DialogRootProps & {
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    title?: Snippet;
+    close?: Snippet;
+    xs?: boolean;
+    sm?: boolean;
+    md?: boolean;
+    fluid?: boolean;
+};
+declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@celar-ui/svelte",
+	"version": "0.0.1",
+	"license": "MIT",
+	"author": {
+		"name": "cuikho210",
+		"email": "tonykms210@gmail.com",
+		"url": "https://github.com/cuikho210"
+	},
+	"private": false,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@iconify-json/hugeicons": "^1.2.4",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"autoprefixer": "^10.4.21",
+		"bits-ui": "^1.3.19",
+		"csstype": "^3.1.3",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"publint": "^0.3.2",
+		"sass": "^1.86.3",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"unplugin-icons": "^22.1.0",
+		"vite": "^6.2.5"
+	},
+	"keywords": [
+		"svelte"
+	]
+}