@celar-ui/svelte 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/buttons/BaseButton.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Button, type ButtonRootProps } from 'bits-ui';
+
+	export type BaseButtonProps = ButtonRootProps & {
+		loading?: boolean;
+	};
+
+	let { children, ...rest }: BaseButtonProps = $props();
+</script>
+
+<Button.Root {...rest}>
+	{#if children}
+		{@render children()}
+	{/if}
+</Button.Root>
+
+<style>:global([data-button-root]) {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  transition-duration: var(--transition-dur);
+  transition-property: opacity;
+  cursor: pointer;
+  border: none;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+:global([data-button-root]):not(:disabled):active {
+  top: 1px;
+}
+:global([data-button-root]):not([data-active=true]):disabled {
+  opacity: 0.5;
+}
+:global([data-button-root]):disabled {
+  cursor: default;
+}</style>

package/dist/buttons/BaseButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonRootProps } from 'bits-ui';
+export type BaseButtonProps = ButtonRootProps & {
+    loading?: boolean;
+};
+declare const BaseButton: import("svelte").Component<BaseButtonProps, {}, "">;
+type BaseButton = ReturnType<typeof BaseButton>;
+export default BaseButton;

package/dist/buttons/ElevatedButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import TextBaseButton from './TextBaseButton.svelte';
+	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
+
+	let props: TextBaseButtonProps = $props();
+</script>
+
+<TextBaseButton {...props} data-button-elevated />
+
+<style>:global([data-button-elevated]) {
+  transition-duration: var(--transition-dur);
+  transition-property: background-color, box-shadow, opacity;
+  box-shadow: 0 2px 2px var(--color-shadow);
+  background-color: var(--color-primary--lighter);
+}
+:global([data-button-elevated]):not(:disabled, [data-active=true]):hover {
+  box-shadow: 0 2px 4px var(--color-shadow--strong);
+  background-color: var(--color-primary--light);
+}
+:global([data-button-elevated]):not(:disabled):active {
+  box-shadow: 0 2px 2px var(--color-shadow--strong);
+}
+
+:global([data-button-elevated][data-active="true"]) {
+  box-shadow: 0 2px 2px var(--color-shadow--strong);
+  background-color: var(--color-alt);
+}</style>

package/dist/buttons/ElevatedButton.svelte.d.ts

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

package/dist/buttons/FilledButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import TextBaseButton from './TextBaseButton.svelte';
+	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
+
+	let props: TextBaseButtonProps = $props();
+</script>
+
+<TextBaseButton {...props} data-button-filled />
+
+<style>:global([data-button-filled]) {
+  transition-duration: var(--transition-dur);
+  transition-property: background-color, box-shadow, opacity;
+  background-color: var(--color-primary);
+}
+:global([data-button-filled]):not(:disabled, [data-active=true]):hover {
+  background-color: var(--color-primary--dark);
+  box-shadow: 0 2px 4px var(--color-shadow--strong);
+}
+:global([data-button-filled]):not(:disabled):active {
+  box-shadow: 0 2px 2px var(--color-shadow--strong);
+}
+
+:global([data-button-elevated][data-active="true"]) {
+  box-shadow: 0 2px 2px var(--color-shadow--strong);
+  background-color: var(--vuuui-color-alt--darker);
+  color: var(--vuuui-color-bg);
+}</style>

package/dist/buttons/FilledButton.svelte.d.ts

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

package/dist/buttons/IconButton.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import DotSpinner from '../misc/DotSpinner.svelte';
+	import BaseButton from './BaseButton.svelte';
+	import type { BaseButtonProps } from './BaseButton.svelte';
+
+	let { children, ...rest }: BaseButtonProps = $props();
+</script>
+
+{#snippet baseChildren()}
+	<div class="button-body" style:visibility={rest.loading ? 'hidden' : 'initial'}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if rest.loading}
+		<div class="button-spinner">
+			<DotSpinner size="24px" color="var(--color-primary--text)" />
+		</div>
+	{/if}
+{/snippet}
+
+<BaseButton {...rest} children={baseChildren} data-button-icon />
+
+<style>:global([data-button-icon]) {
+  flex-grow: 0;
+  flex-shrink: 0;
+  transition-duration: var(--transition-dur);
+  transition-property: background-color, opacity, color;
+  border-radius: 50%;
+  background-color: transparent;
+  padding: var(--gap--half);
+  aspect-ratio: 1/1;
+  line-height: 1;
+}
+:global([data-button-icon]) .button-spinner {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+:global([data-button-icon]) .button-body {
+  line-height: 0;
+}
+:global([data-button-icon]):not(:disabled, [data-active=true]):hover {
+  background-color: var(--color-primary--light);
+}
+
+:global([data-button-icon][data-active="true"]) {
+  background-color: var(--color-alt);
+  color: var(--color-primary--text);
+}</style>

package/dist/buttons/IconButton.svelte.d.ts

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

package/dist/buttons/OutlinedButton.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import TextBaseButton from './TextBaseButton.svelte';
+	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
+
+	let props: TextBaseButtonProps = $props();
+</script>
+
+<TextBaseButton {...props} data-button-outlined />
+
+<style>:global([data-button-outlined]) {
+  transition-duration: var(--transition-dur);
+  transition-property: background-color, border-color;
+  background-color: transparent;
+  border: 1px solid var(--color-primary--light);
+}
+:global([data-button-outlined]):not(:disabled, [data-active=true]):hover {
+  background-color: var(--color-primary--light);
+  border-color: var(--color-primary);
+}
+
+:global([data-button-text][data-active="true"]) {
+  background-color: var(--color-alt);
+  border-color: var(--color-primary);
+}</style>

package/dist/buttons/OutlinedButton.svelte.d.ts

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

package/dist/buttons/TextBaseButton.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import BaseButton from './BaseButton.svelte';
+	import DotSpinner from '../misc/DotSpinner.svelte';
+	import type { BaseButtonProps } from './BaseButton.svelte';
+	import type { Snippet } from 'svelte';
+
+	export type TextBaseButtonProps = BaseButtonProps & {
+		icon?: Snippet;
+	};
+
+	let { children, loading, icon, ...rest }: TextBaseButtonProps = $props();
+</script>
+
+{#snippet baseChildren()}
+	<div class="button-body" style:visibility={loading ? 'hidden' : 'initial'}>
+		{#if icon}
+			<span class="button-icon">
+				{@render icon()}
+			</span>
+		{/if}
+
+		<span class="button-content">
+			{#if children}
+				{@render children()}
+			{/if}
+		</span>
+	</div>
+
+	{#if loading}
+		<div class="button-spinner">
+			<DotSpinner size="24px" color="var(--color-primary--text)" />
+		</div>
+	{/if}
+{/snippet}
+
+<BaseButton {...rest} children={baseChildren} {loading} data-button-base-text />
+
+<style>:global([data-button-base-text]) {
+  border-radius: var(--radius);
+}
+
+.button-body {
+  display: flex;
+  align-items: center;
+  gap: var(--gap--half);
+  padding: 0 var(--gap);
+}
+.button-body .button-content {
+  padding: var(--gap--half) 0;
+}
+.button-body .button-icon {
+  line-height: 0;
+}
+
+.button-spinner {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}</style>

package/dist/buttons/TextBaseButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BaseButtonProps } from './BaseButton.svelte';
+import type { Snippet } from 'svelte';
+export type TextBaseButtonProps = BaseButtonProps & {
+    icon?: Snippet;
+};
+declare const TextBaseButton: import("svelte").Component<TextBaseButtonProps, {}, "">;
+type TextBaseButton = ReturnType<typeof TextBaseButton>;
+export default TextBaseButton;

package/dist/buttons/TextButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import TextBaseButton from './TextBaseButton.svelte';
+	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
+
+	let props: TextBaseButtonProps = $props();
+</script>
+
+<TextBaseButton {...props} data-button-text />
+
+<style>:global([data-button-text]) {
+  transition-duration: var(--transition-dur);
+  transition-property: background-color;
+  background-color: transparent;
+}
+:global([data-button-text]):not(:disabled, [data-active=true]):hover {
+  background-color: var(--color-primary--light);
+}
+
+:global([data-button-text][data-active="true"]) {
+  background-color: var(--color-alt);
+}</style>

package/dist/buttons/TextButton.svelte.d.ts

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

package/dist/containment/Avatar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Avatar, type AvatarRootProps } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+
+	export type AvatarProps = AvatarRootProps & {
+		src: string;
+		size?: string;
+		alt?: string;
+		fallback?: Snippet;
+	};
+
+	let { size = '64px', src, alt, fallback, ...rest }: AvatarProps = $props();
+</script>
+
+<Avatar.Root {...rest} style="--size: {size}">
+	<Avatar.Image {src} {alt} />
+	<Avatar.Fallback>
+		{#if fallback}
+			{@render fallback()}
+		{/if}
+	</Avatar.Fallback>
+</Avatar.Root>
+
+<style>:global([data-avatar-root]) {
+  display: block;
+  position: relative;
+  background-color: var(--vuuui-color-bg-info);
+  aspect-ratio: 1;
+  width: var(--size);
+}
+
+:global([data-avatar-image], [data-avatar-fallback]) {
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}</style>

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

@@ -0,0 +1,11 @@
+import { Avatar, type AvatarRootProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type AvatarProps = AvatarRootProps & {
+    src: string;
+    size?: string;
+    alt?: string;
+    fallback?: Snippet;
+};
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/containment/Breadcrumb.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div {...rest} data-breadcrumb>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>:global([data-breadcrumb]) {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+:global([data-breadcrumb] > a) {
+  padding: 0;
+  margin: 0;
+  color: var(--color-text-info);
+  text-decoration: none;
+}
+:global([data-breadcrumb] > a):not(:last-child)::after {
+  content: "/";
+  color: var(--color-text);
+  padding: 0 var(--gap--half);
+}
+:global([data-breadcrumb] > a):last-child {
+  pointer-events: none;
+  color: var(--color-primary--dark);
+}</style>

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

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

package/dist/containment/Card.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Container from './Container.svelte';
+	import type { ContainerProps } from './Container.svelte';
+
+	let props: ContainerProps = $props();
+</script>
+
+<Container {...props} data-card />
+
+<style>:global([data-card]) {
+  box-shadow: 0 var(--gap--sm) var(--gap) var(--color-shadow--md);
+  background-color: var(--color-bg);
+}</style>

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

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

package/dist/containment/Container.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+		xs?: boolean;
+		sm?: boolean;
+		md?: boolean;
+		fluid?: boolean;
+	}
+
+	let { children, xs, sm, md, fluid, ...rest }: ContainerProps = $props();
+</script>
+
+<section {...rest} data-container data-xs={xs} data-sm={sm} data-md={md} data-fluid={fluid}>
+	{#if children}
+		{@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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    xs?: boolean;
+    sm?: boolean;
+    md?: boolean;
+    fluid?: boolean;
+}
+declare const Container: import("svelte").Component<ContainerProps, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/containment/Spacer.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Property } from 'csstype';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export interface SpacerProps extends HTMLAttributes<HTMLDivElement> {
+		gap?: Property.Gap;
+		wrap?: Property.FlexWrap;
+		justify?: Property.JustifyContent;
+		align?: Property.AlignItems;
+		direction?: Property.FlexDirection;
+	}
+
+	let { children, gap, wrap, justify, align, direction, ...rest }: SpacerProps = $props();
+</script>
+
+<div
+	{...rest}
+	data-spacer
+	style:gap
+	style:flex-wrap={wrap}
+	style:justify-content={justify}
+	style:align-items={align}
+	style:flex-direction={direction}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>[data-spacer] {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: var(--gap--half);
+}</style>

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

@@ -0,0 +1,12 @@
+import type { Property } from 'csstype';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface SpacerProps extends HTMLAttributes<HTMLDivElement> {
+    gap?: Property.Gap;
+    wrap?: Property.FlexWrap;
+    justify?: Property.JustifyContent;
+    align?: Property.AlignItems;
+    direction?: Property.FlexDirection;
+}
+declare const Spacer: import("svelte").Component<SpacerProps, {}, "">;
+type Spacer = ReturnType<typeof Spacer>;
+export default Spacer;

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+export { default as TextButton } from './buttons/TextButton.svelte';
+export { default as ElevatedButton } from './buttons/ElevatedButton.svelte';
+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 Spacer } from './containment/Spacer.svelte';
+export { default as Card } from './containment/Card.svelte';
+export { default as Breadcrumb } from './containment/Breadcrumb.svelte';
+export { default as Avatar } from './containment/Avatar.svelte';
+export { default as Dialog } from './overlay/Dialog.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';
+export { default as TextInput } from './inputs/TextInput.svelte';
+export { default as FileInput } from './inputs/FileInput.svelte';
+export { default as ColorInput } from './inputs/ColorInput.svelte';
+export { default as Checkbox } from './inputs/Checkbox.svelte';
+export { default as RadioGroup } from './inputs/RadioGroup.svelte';
+export { default as RadioItem } from './inputs/RadioItem.svelte';
+export { default as Switch } from './inputs/Switch.svelte';
+export { default as Slider } from './inputs/Slider.svelte';
+export { default as AppBar } from './navigation/AppBar.svelte';
+export { default as NavigationBar } from './navigation/NavigationBar.svelte';
+export { default as NavigationBarButton } from './navigation/NavigationBarButton.svelte';

package/dist/index.js

@@ -0,0 +1,26 @@
+// Reexport your entry components here
+export { default as TextButton } from './buttons/TextButton.svelte';
+export { default as ElevatedButton } from './buttons/ElevatedButton.svelte';
+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 Spacer } from './containment/Spacer.svelte';
+export { default as Card } from './containment/Card.svelte';
+export { default as Breadcrumb } from './containment/Breadcrumb.svelte';
+export { default as Avatar } from './containment/Avatar.svelte';
+export { default as Dialog } from './overlay/Dialog.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';
+export { default as TextInput } from './inputs/TextInput.svelte';
+export { default as FileInput } from './inputs/FileInput.svelte';
+export { default as ColorInput } from './inputs/ColorInput.svelte';
+export { default as Checkbox } from './inputs/Checkbox.svelte';
+export { default as RadioGroup } from './inputs/RadioGroup.svelte';
+export { default as RadioItem } from './inputs/RadioItem.svelte';
+export { default as Switch } from './inputs/Switch.svelte';
+export { default as Slider } from './inputs/Slider.svelte';
+export { default as AppBar } from './navigation/AppBar.svelte';
+export { default as NavigationBar } from './navigation/NavigationBar.svelte';
+export { default as NavigationBarButton } from './navigation/NavigationBarButton.svelte';