@celar-ui/svelte 0.0.1

package/dist/inputs/Checkbox.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { Checkbox, type CheckboxRootProps, type WithoutChildren } from 'bits-ui';
+	import IconTick from '~icons/hugeicons/tick-01';
+	import IconMinus from '~icons/hugeicons/minus-sign';
+	import type { Snippet } from 'svelte';
+
+	type CheckboxProps = WithoutChildren<CheckboxRootProps> & {
+		children?: Snippet;
+	};
+
+	let { children, ...rest }: CheckboxProps = $props();
+</script>
+
+<label data-checkbox>
+	<div data-checkbox-icon>
+		<Checkbox.Root {...rest}>
+			{#snippet children({ checked, indeterminate })}
+				{#if checked}
+					<IconTick font-size="20px" />
+				{/if}
+				{#if indeterminate}
+					<IconMinus />
+				{/if}
+			{/snippet}
+		</Checkbox.Root>
+	</div>
+
+	{@render children?.()}
+</label>
+
+<style>[data-checkbox] {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  transition-property: background-color;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  border-radius: var(--radius--half);
+  padding: var(--gap--sm) 0;
+  padding-right: var(--gap);
+  width: 100%;
+}
+[data-checkbox]:hover {
+  background-color: var(--color-primary--lighter);
+}
+[data-checkbox] [data-checkbox-icon] {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+}
+
+:global([data-checkbox-root]) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  width: 32px;
+  background-color: transparent;
+  outline: none;
+  border: 1px solid var(--color-primary--dark);
+  border-radius: var(--radius--half);
+}
+
+:global([data-checkbox-root][data-state="checked"]) {
+  background-color: var(--color-primary);
+}</style>

package/dist/inputs/Checkbox.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Checkbox, type CheckboxRootProps, type WithoutChildren } from 'bits-ui';
+import type { Snippet } from 'svelte';
+type CheckboxProps = WithoutChildren<CheckboxRootProps> & {
+    children?: Snippet;
+};
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/inputs/ColorInput.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	interface ColorInputProps extends HTMLInputAttributes {
+		icon?: Snippet;
+	}
+
+	let { value = $bindable(), placeholder, icon, ...rest }: ColorInputProps = $props();
+</script>
+
+<label data-color-input>
+	<input {...rest} type="color" bind:value {placeholder} />
+
+	<div data-color-input-icon>
+		{@render icon?.()}
+	</div>
+	<div data-color-input-placeholder>{placeholder}</div>
+</label>
+
+<style>[data-color-input] {
+  display: flex;
+  position: relative;
+  justify-content: flex-start;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: var(--gap--md) 0;
+  width: 100%;
+}
+[data-color-input] > input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  outline: none;
+  border: none;
+  border-radius: var(--radius);
+  width: 64px;
+  height: 100%;
+}
+[data-color-input] > input::-moz-color-swatch {
+  border: none;
+}
+[data-color-input] > input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+[data-color-input] > input::-webkit-color-swatch {
+  border: none;
+  border-radius: var(--radius);
+}
+[data-color-input] [data-color-input-icon] {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 100%;
+  line-height: 1rem;
+}
+[data-color-input] [data-color-input-placeholder] {
+  margin-right: 4rem;
+  padding-right: var(--gap--half);
+  max-width: 100%;
+  overflow: hidden;
+  color: rgba(var(--color-text--rgb), 0.4);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}</style>

package/dist/inputs/ColorInput.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface ColorInputProps extends HTMLInputAttributes {
+    icon?: Snippet;
+}
+declare const ColorInput: import("svelte").Component<ColorInputProps, {}, "value">;
+type ColorInput = ReturnType<typeof ColorInput>;
+export default ColorInput;

package/dist/inputs/FileInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	interface FileInputProps extends HTMLInputAttributes {
+		icon?: Snippet;
+		files?: FileList;
+	}
+
+	let { icon, files = $bindable(), placeholder, ...rest }: FileInputProps = $props();
+	let firstFileName = $derived(files?.[0]?.name);
+</script>
+
+<label data-file-input>
+	<input {...rest} type="file" bind:files {placeholder} />
+
+	<div data-file-input-icon>
+		{@render icon?.()}
+	</div>
+
+	<div data-file-input-placeholder>
+		{firstFileName ?? placeholder}
+	</div>
+</label>
+
+<style>[data-file-input] {
+  display: flex;
+  position: relative;
+  justify-content: flex-start;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: var(--gap--md) 0;
+  width: 100%;
+}
+[data-file-input] input {
+  display: none;
+}
+[data-file-input] [data-file-input-icon] {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 100%;
+  line-height: 1rem;
+}
+[data-file-input] [data-file-input-placeholder] {
+  padding-right: var(--gap);
+  max-width: 100%;
+  overflow: hidden;
+  color: rgba(var(--color-text--rgb), 0.4);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}</style>

package/dist/inputs/FileInput.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface FileInputProps extends HTMLInputAttributes {
+    icon?: Snippet;
+    files?: FileList;
+}
+declare const FileInput: import("svelte").Component<FileInputProps, {}, "files">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;

package/dist/inputs/RadioGroup.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { RadioGroup, type RadioGroupRootProps, type WithoutChildren } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+
+	export type RadioGroupProps = WithoutChildren<RadioGroupRootProps> & {
+		children?: Snippet;
+	};
+	let { value = $bindable(''), children, ...rest }: RadioGroupProps = $props();
+</script>
+
+<RadioGroup.Root {...rest} bind:value>
+	{@render children?.()}
+</RadioGroup.Root>
+
+<style>:global([data-radio-group-root]) {
+  position: relative;
+}</style>

package/dist/inputs/RadioGroup.svelte.d.ts

@@ -0,0 +1,8 @@
+import { RadioGroup, type RadioGroupRootProps, type WithoutChildren } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type RadioGroupProps = WithoutChildren<RadioGroupRootProps> & {
+    children?: Snippet;
+};
+declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/inputs/RadioItem.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { RadioGroup, type RadioGroupItemProps, type WithoutChildren } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+
+	export type RadioItemProps = WithoutChildren<RadioGroupItemProps> & {
+		children?: Snippet;
+	};
+	let { children, ...rest }: RadioItemProps = $props();
+</script>
+
+<label data-radio-item>
+	<div data-radio-item-icon>
+		<RadioGroup.Item {...rest} />
+	</div>
+	{@render children?.()}
+</label>
+
+<style>[data-radio-item] {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  transition-property: background-color;
+  transition-duration: var(--transition-dur);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  border-radius: var(--radius--half);
+  padding: var(--gap--sm) 0;
+  padding-right: var(--gap);
+  width: 100%;
+}
+[data-radio-item] [data-radio-item-icon] {
+  width: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+[data-radio-item]:hover {
+  background-color: var(--color-primary--lighter);
+}
+
+:global([data-radio-group-item]) {
+  background-color: transparent;
+  outline: 1px solid var(--color-primary--dark);
+  border: 4px solid var(--color-bg);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+
+:global([data-radio-group-item][data-state="checked"]) {
+  background-color: var(--color-primary--dark);
+}</style>

package/dist/inputs/RadioItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type RadioGroupItemProps, type WithoutChildren } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type RadioItemProps = WithoutChildren<RadioGroupItemProps> & {
+    children?: Snippet;
+};
+declare const RadioItem: import("svelte").Component<RadioItemProps, {}, "">;
+type RadioItem = ReturnType<typeof RadioItem>;
+export default RadioItem;

package/dist/inputs/Slider.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	let { value = $bindable(), min, max, ...rest }: HTMLInputAttributes = $props();
+</script>
+
+<div data-slider>
+	<input
+		type="range"
+		bind:value
+		style:--val={value || 0}
+		style:--min={min || 0}
+		style:--max={max || 100}
+		{...rest}
+	/>
+</div>
+
+<style>[data-slider] {
+  position: relative;
+  padding: 0 var(--gap);
+}
+[data-slider] > input {
+  --range: calc(var(--max) - var(--min));
+  --ratio: calc((var(--val) - var(--min)) / var(--range));
+  --sx: calc(0.5 *24px + var(--ratio) * (100% - 24px));
+  margin: 0;
+  background: transparent;
+  padding: 0;
+  width: 100%;
+  height: 24px;
+}
+[data-slider] > input, [data-slider] > input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+          appearance: none;
+}
+[data-slider] > input::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  border: none;
+  border-radius: var(--radius);
+  background: var(--color-alt--light);
+  width: 100%;
+  height: var(--gap--half);
+}
+[data-slider] > input::-webkit-slider-runnable-track {
+  background: linear-gradient(var(--color-primary--dark), var(--color-primary--dark)) 0/var(--sx) 100% no-repeat var(--color-alt--light);
+}
+[data-slider] > input::-moz-range-track {
+  box-sizing: border-box;
+  border: none;
+  border-radius: var(--radius);
+  background: var(--color-alt--light);
+  width: 100%;
+  height: var(--gap--half);
+}
+[data-slider] > input::-ms-track {
+  box-sizing: border-box;
+  border: none;
+  border-radius: var(--radius);
+  background: var(--color-alt--light);
+  width: 100%;
+  height: var(--gap--half);
+}
+[data-slider] > input::-moz-range-progress {
+  border-radius: var(--radius);
+  background: var(--color-primary--dark);
+  height: var(--gap--half);
+}
+[data-slider] > input::-ms-fill-lower {
+  border-radius: var(--radius);
+  background: var(--color-primary--dark);
+  height: var(--gap--half);
+}
+[data-slider] > input::-webkit-slider-thumb {
+  margin-top: calc(0.5 * (var(--gap--half) - 24px));
+  box-sizing: border-box;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-primary--dark);
+  width: 24px;
+  height: 24px;
+}
+[data-slider] > input::-moz-range-thumb {
+  box-sizing: border-box;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-primary--dark);
+  width: 24px;
+  height: 24px;
+}
+[data-slider] > input::-ms-thumb {
+  margin-top: 0;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-primary--dark);
+  width: 24px;
+  height: 24px;
+}
+[data-slider] > input::-ms-tooltip {
+  display: none;
+}</style>

package/dist/inputs/Slider.svelte.d.ts

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

package/dist/inputs/Switch.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Switch, type SwitchRootProps, type WithoutChildren } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+
+	export type SwitchProps = WithoutChildren<SwitchRootProps> & {
+		children?: Snippet;
+	};
+
+	let { checked = $bindable(false), children, ...rest }: SwitchProps = $props();
+</script>
+
+<label data-switch>
+	<Switch.Root {...rest} bind:checked>
+		<Switch.Thumb />
+	</Switch.Root>
+
+	{@render children?.()}
+</label>
+
+<style>[data-switch] {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  transition-property: background-color;
+  transition-duration: var(--transition-dur);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  border-radius: var(--radius--half);
+  padding: var(--gap--sm) 0;
+  padding-right: var(--gap);
+  width: 100%;
+}
+[data-switch]:hover {
+  background-color: var(--color-primary--lighter);
+}
+
+:global([data-switch-root]) {
+  position: relative;
+  display: block;
+  width: 38px;
+  height: 24px;
+  border-radius: 24px;
+  background-color: var(--color-bg);
+  outline: 1px solid var(--color-primary--dark);
+  border: none;
+  transition-property: background-color;
+  transition-duration: var(--transition-dur);
+  margin: 0 5px;
+}
+
+:global([data-switch-thumb]) {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+  box-sizing: border-box;
+  background-color: var(--color-primary--dark);
+  transition-property: background-color, transform, outline-color;
+  transition-duration: var(--transition-dur);
+}
+
+:global([data-switch-root][data-state="checked"]) {
+  background-color: var(--color-primary--dark);
+  outline-color: var(--color-primary--darker);
+}
+
+:global([data-switch-thumb][data-state="checked"]) {
+  background-color: var(--color-primary--lighter);
+  transform: translateX(14px);
+}</style>

package/dist/inputs/Switch.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Switch, type SwitchRootProps, type WithoutChildren } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type SwitchProps = WithoutChildren<SwitchRootProps> & {
+    children?: Snippet;
+};
+declare const Switch: import("svelte").Component<SwitchProps, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/inputs/TextInput.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	interface TextInputProps extends HTMLInputAttributes {
+		icon?: Snippet;
+	}
+
+	let { icon, value = $bindable(), placeholder, ...rest }: TextInputProps = $props();
+</script>
+
+<label data-text-input>
+	<input {...rest} bind:value {placeholder} />
+
+	<div data-text-input-icon>
+		{@render icon?.()}
+	</div>
+
+	<div data-text-input-placeholder>{placeholder}</div>
+</label>
+
+<style>[data-text-input] {
+  margin: 0;
+  padding: 0;
+  display: block;
+  position: relative;
+  width: 100%;
+}
+[data-text-input] input {
+  box-sizing: border-box;
+  transition-duration: var(--transition-dur);
+  transition-property: border-color;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background-color: transparent;
+  padding: var(--gap--md) var(--gap);
+  padding-left: 48px;
+  width: 100%;
+  font-size: inherit;
+  font-family: inherit;
+}
+[data-text-input] input:focus {
+  outline: none;
+  border: 1px solid var(--color-primary);
+}
+[data-text-input] input:focus + [data-text-input-icon] {
+  color: var(--color-primary--dark);
+}
+[data-text-input] input:is(:-moz-placeholder) ~ [data-text-input-placeholder] {
+  top: var(--gap--md);
+  right: calc(100% - 48px);
+  translate: 100%;
+  visibility: hidden;
+  opacity: 0;
+}
+[data-text-input] input:is(:placeholder-shown) ~ [data-text-input-placeholder] {
+  top: var(--gap--md);
+  right: calc(100% - 48px);
+  translate: 100%;
+  visibility: hidden;
+  opacity: 0;
+}
+[data-text-input] input::-moz-placeholder {
+  opacity: 1;
+  color: rgba(var(--color-text--rgb), 0.4);
+}
+[data-text-input] input::placeholder {
+  opacity: 1;
+  color: rgba(var(--color-text--rgb), 0.4);
+}
+[data-text-input] [data-text-input-icon] {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  justify-content: center;
+  align-items: center;
+  transition-duration: var(--transition-dur);
+  transition-property: color;
+  width: 48px;
+  height: 100%;
+  pointer-events: none;
+}
+[data-text-input] [data-text-input-placeholder] {
+  position: absolute;
+  transition-duration: var(--transition-dur);
+  transition-property: visibility, opacity, top, right, translate;
+  pointer-events: none;
+  color: rgba(var(--color-text--rgb), 0.4);
+  font-size: smaller;
+  top: 0;
+  right: var(--gap);
+  translate: 0;
+  visibility: visible;
+  opacity: 1;
+}</style>

package/dist/inputs/TextInput.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface TextInputProps extends HTMLInputAttributes {
+    icon?: Snippet;
+}
+declare const TextInput: import("svelte").Component<TextInputProps, {}, "value">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

package/dist/misc/DotSpinner.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	let { color = 'var(--color-primary--dark)', size }: { color?: string; size?: string } = $props();
+</script>
+
+<svg viewBox="0 0 57 60" xmlns="http://www.w3.org/2000/svg" stroke={color} style:width={size}>
+	<g fill="none" fill-rule="evenodd">
+		<g transform="translate(1 1)" stroke-width="3">
+			<circle cx="5" cy="50" r="5">
+				<animate
+					attributeName="cy"
+					begin="0s"
+					dur="2.2s"
+					values="50;5;50;50"
+					calcMode="linear"
+					repeatCount="indefinite"
+				/>
+				<animate
+					attributeName="cx"
+					begin="0s"
+					dur="2.2s"
+					values="5;27;49;5"
+					calcMode="linear"
+					repeatCount="indefinite"
+				/>
+			</circle>
+			<circle cx="27" cy="5" r="5">
+				<animate
+					attributeName="cy"
+					begin="0s"
+					dur="2.2s"
+					from="5"
+					to="5"
+					values="5;50;50;5"
+					calcMode="linear"
+					repeatCount="indefinite"
+				/>
+				<animate
+					attributeName="cx"
+					begin="0s"
+					dur="2.2s"
+					from="27"
+					to="27"
+					values="27;49;5;27"
+					calcMode="linear"
+					repeatCount="indefinite"
+				/>
+			</circle>
+			<circle cx="49" cy="50" r="5">
+				<animate
+					attributeName="cy"
+					begin="0s"
+					dur="2.2s"
+					values="50;50;5;50"
+					calcMode="linear"
+					repeatCount="indefinite"
+				/>
+				<animate
+					attributeName="cx"
+					from="49"
+					to="49"
+					begin="0s"
+					dur="2.2s"
+					values="49;5;27;49"
+					calcMode="linear"
+					repeatCount="indefinite"
+				/>
+			</circle>
+		</g>
+	</g>
+</svg>
+
+<style>svg {
+  display: inline-block;
+  aspect-ratio: 1;
+}</style>