@celar-ui/svelte 1.8.2 → 2.0.0

package/dist/inputs/Checkbox.svelte

@@ -54,50 +54,48 @@
 	{@render children?.()}
 </label>
 
-<style>[data-checkbox] {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  transition-duration: var(--transition-dur);
-  transition-property: background-color;
-  transition-timing-function: ease-in;
-  border-radius: var(--radius--half);
-  padding: var(--gap--sm) 0;
-  padding-right: var(--gap);
-  width: 100%;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-[data-checkbox]:hover {
-  background-color: var(--color-primaryContainer);
-}
-[data-checkbox] [data-checkbox-icon] {
-  display: flex;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  width: 56px;
-}
+<style>
+	@reference '$style/index.css';
 
-:global([data-checkbox-root]) {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 24px;
-  width: 32px;
-  background-color: transparent;
-  color: var(--color-onPrimary);
-  outline: none;
-  border: 1px solid var(--color-primary);
-  border-radius: var(--radius--half);
-  transition-duration: var(--transition-dur);
-  transition-property: background-color, color;
-  transition-timing-function: ease-in;
-}
+	@layer components {
+		[data-checkbox] {
+			position: relative;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			padding: --spacing(1) 0;
+			padding-right: --spacing(4);
+			width: 100%;
+			-webkit-user-select: none;
+			   -moz-user-select: none;
+			        user-select: none;
 
-:global([data-checkbox-root]:not([data-state='unchecked'])) {
-  background-color: var(--color-primary);
-}</style>
+			[data-checkbox-icon] {
+				display: flex;
+				flex-shrink: 0;
+				justify-content: center;
+				align-items: center;
+				width: --spacing(14);
+			}
+		}
+
+		:global([data-checkbox-root]) {
+			@apply rounded-xl transition-all;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: --spacing(6);
+			width: --spacing(8);
+			background-color: transparent;
+			color: var(--color-onPrimary);
+			outline: none;
+			border: 1px solid var(--color-primary);
+			border-radius: --spacing(2);
+		}
+
+		:global([data-checkbox-root]:not([data-state='unchecked'])) {
+			background-color: var(--color-primary);
+		}
+	}
+</style>

package/dist/inputs/ColorInput.svelte

@@ -18,54 +18,66 @@
 	<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-onSurface--rgb), 0.7);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-color-input] {
+			@apply border-onBackground/20 border border-solid;
+			display: flex;
+			position: relative;
+			justify-content: flex-start;
+			align-items: center;
+			border-radius: var(--radius-2xl);
+			padding: --spacing(1.5) 0;
+			width: 100%;
+
+			> input {
+				position: absolute;
+				top: 0;
+				right: 0;
+				-webkit-appearance: none;
+				   -moz-appearance: none;
+				        appearance: none;
+				outline: none;
+				border: none;
+				border-radius: var(--radius-2xl);
+				width: 64px;
+				height: 100%;
+
+				&::-moz-color-swatch {
+					border: none;
+				}
+
+				&::-webkit-color-swatch-wrapper {
+					padding: 0;
+				}
+
+				&::-webkit-color-swatch {
+					border: none;
+					border-radius: var(--radius-2xl);
+				}
+			}
+
+			[data-color-input-icon] {
+				display: flex;
+				flex-shrink: 0;
+				justify-content: center;
+				align-items: center;
+				width: --spacing(14);
+				height: 100%;
+				line-height: 1rem;
+			}
+
+			[data-color-input-placeholder] {
+				@apply text-onBackground/70;
+				margin-right: 4rem;
+				padding-right: --spacing(2);
+				max-width: 100%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+	}
+</style>

package/dist/inputs/FileInput.svelte

@@ -23,33 +23,42 @@
 	</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-onSurface--rgb), 0.7);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-file-input] {
+			@apply border-onBackground/20 border border-solid;
+			display: flex;
+			position: relative;
+			justify-content: flex-start;
+			align-items: center;
+			border-radius: var(--radius-2xl);
+			padding: --spacing(1.5) 0;
+			width: 100%;
+
+			input {
+				display: none;
+			}
+
+			[data-file-input-icon] {
+				display: flex;
+				flex-shrink: 0;
+				justify-content: center;
+				align-items: center;
+				width: --spacing(14);
+				height: 100%;
+				line-height: 1rem;
+			}
+
+			[data-file-input-placeholder] {
+				@apply text-onBackground/70;
+				padding-right: --spacing(4);
+				max-width: 100%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+	}
+</style>

package/dist/inputs/RadioGroup.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/radio_group.scss';
+	import './styles/radio_group.css';
 	import {
 		RadioGroup as BitRadioGroup,
 		type RadioGroupRootProps as BitRadioGroupRootProps,
@@ -16,4 +16,3 @@
 <BitRadioGroup.Root {...rest} bind:value>
 	{@render children?.()}
 </BitRadioGroup.Root>
-

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

@@ -1,4 +1,4 @@
-import './styles/radio_group.scss';
+import './styles/radio_group.css';
 import { type RadioGroupRootProps as BitRadioGroupRootProps, type WithoutChildrenOrChild } from 'bits-ui';
 import type { Snippet } from 'svelte';
 export type RadioGroupProps = WithoutChildrenOrChild<BitRadioGroupRootProps> & {

package/dist/inputs/RadioItem.svelte

@@ -15,41 +15,43 @@
 	{@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);
-  transition-timing-function: ease-in;
-  border-radius: var(--radius--half);
-  padding: var(--gap--sm) 0;
-  padding-right: var(--gap);
-  width: 100%;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-[data-radio-item] [data-radio-item-icon] {
-  width: 56px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-[data-radio-item]:hover {
-  background-color: var(--color-primaryContainer);
-}
+<style>
+	@reference '$style/index.css';
 
-:global([data-radio-group-item]) {
-  background-color: transparent;
-  outline: 1px solid var(--color-primary);
-  border: 4px solid var(--color-surface);
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-}
+	@layer components {
+		[data-radio-item] {
+			@apply transition-all;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			padding: --spacing(1) 0;
+			padding-right: --spacing(4);
+			width: 100%;
+			-webkit-user-select: none;
+			   -moz-user-select: none;
+			        user-select: none;
 
-:global([data-radio-group-item][data-state='checked']) {
-  background-color: var(--color-primary);
-}</style>
+			[data-radio-item-icon] {
+				width: --spacing(14);
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+
+		:global([data-radio-group-item]) {
+			@apply transition-all;
+			background-color: transparent;
+			outline: 1px solid var(--color-primary);
+			border: 4px solid var(--color-surface);
+			width: 24px;
+			height: 24px;
+			border-radius: 50%;
+		}
+
+		:global([data-radio-group-item][data-state='checked']) {
+			background-color: var(--color-primary);
+		}
+	}
+</style>

package/dist/inputs/Slider.svelte

@@ -18,89 +18,81 @@
 	/>
 </div>
 
-<style>[data-slider] {
-  position: relative;
-  padding: 0 var(--gap);
-  width: 100%;
-  box-sizing: border-box;
-}
-[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-surfaceDim);
-  width: 100%;
-  height: var(--gap--half);
-}
-[data-slider] > input::-webkit-slider-runnable-track {
-  background: linear-gradient(var(--color-primary), var(--color-primary)) 0/var(--sx) 100% no-repeat var(--color-surfaceDim);
-}
-[data-slider] > input::-moz-range-track {
-  box-sizing: border-box;
-  border: none;
-  border-radius: var(--radius);
-  background: var(--color-surfaceDim);
-  width: 100%;
-  height: var(--gap--half);
-}
-[data-slider] > input::-ms-track {
-  box-sizing: border-box;
-  border: none;
-  border-radius: var(--radius);
-  background: var(--color-surfaceDim);
-  width: 100%;
-  height: var(--gap--half);
-}
-[data-slider] > input::-moz-range-progress {
-  border-radius: var(--radius);
-  background: var(--color-primary);
-  height: var(--gap--half);
-}
-[data-slider] > input::-ms-fill-lower {
-  border-radius: var(--radius);
-  background: var(--color-primary);
-  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);
-  width: 24px;
-  height: 24px;
-}
-[data-slider] > input::-moz-range-thumb {
-  box-sizing: border-box;
-  border: none;
-  border-radius: 50%;
-  background: var(--color-primary);
-  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);
-  width: 24px;
-  height: 24px;
-}
-[data-slider] > input::-ms-tooltip {
-  display: none;
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@utility track {
+		@apply box-border h-2 w-full rounded-2xl border-none;
+		background: var(--color-surfaceDim);
+	}
+	@utility track-fill {
+		@apply track;
+		background: linear-gradient(var(--color-primary), var(--color-primary)) 0 / var(--sx) 100%
+			no-repeat var(--color-surfaceDim);
+	}
+	@utility fill {
+		@apply bg-primary h-2 rounded-2xl;
+	}
+	@utility thumb {
+		@apply bg-primary box-border h-8 w-8 rounded-[50%] border-none;
+	}
+
+	@layer components {
+		[data-slider] {
+			position: relative;
+			padding: 0 --spacing(4);
+			width: 100%;
+			box-sizing: border-box;
+
+			& > input {
+				--range: calc(var(--max) - var(--min));
+				--ratio: calc((var(--val) - var(--min)) / var(--range));
+				--sx: calc(0.5 * --spacing(4) + var(--ratio) * (100% - --spacing(4)));
+				margin: 0;
+				background: transparent;
+				padding: 0;
+				width: 100%;
+				height: --spacing(4);
+
+				&,
+				&::-webkit-slider-thumb {
+					-webkit-appearance: none;
+					        appearance: none;
+				}
+
+				&::-webkit-slider-runnable-track {
+					@apply track-fill;
+				}
+				&::-moz-range-track {
+					@apply track;
+				}
+				&::-ms-track {
+					@apply track;
+				}
+
+				&::-moz-range-progress {
+					@apply fill;
+				}
+				&::-ms-fill-lower {
+					@apply fill;
+				}
+
+				&::-webkit-slider-thumb {
+					margin-top: calc(0.5 * (--spacing(2) - --spacing(8)));
+					@apply thumb;
+				}
+				&::-moz-range-thumb {
+					@apply thumb;
+				}
+				&::-ms-thumb {
+					margin-top: 0;
+					@apply thumb;
+				}
+
+				&::-ms-tooltip {
+					display: none;
+				}
+			}
+		}
+	}
+</style>

package/dist/inputs/Switch.svelte

@@ -17,61 +17,56 @@
 	{@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);
-  transition-timing-function: ease-in;
-  border-radius: var(--radius--half);
-  padding: var(--gap--sm) 0;
-  padding-right: var(--gap);
-  width: 100%;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-[data-switch]:hover {
-  background-color: var(--color-primaryContainer);
-}
+<style>
+	@reference '$style/index.css';
 
-:global([data-switch-root]) {
-  position: relative;
-  display: block;
-  width: 38px;
-  height: 24px;
-  border-radius: 24px;
-  background-color: transparent;
-  outline: 1px solid var(--color-primary);
-  border: none;
-  transition-property: background-color;
-  transition-duration: var(--transition-dur);
-  transition-timing-function: ease-out;
-  margin: 0 9px;
-}
+	@layer components {
+		[data-switch] {
+			@apply rounded-lg py-1.5 pr-4 transition-all;
+			position: relative;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			width: 100%;
+			-webkit-user-select: none;
+			   -moz-user-select: none;
+			        user-select: none;
+		}
 
-: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);
-  transition-property: background-color, transform, outline-color;
-  transition-duration: var(--transition-dur);
-}
+		:global([data-switch-root]) {
+			@apply transition-all;
+			position: relative;
+			display: block;
+			width: --spacing(9.5);
+			height: --spacing(6);
+			border-radius: --spacing(8);
+			background-color: transparent;
+			outline: 1px solid var(--color-primary);
+			border: none;
+			margin: 0 --spacing(2.25);
+		}
 
-:global([data-switch-root][data-state='checked']) {
-  background-color: var(--color-primary);
-}
+		:global([data-switch-thumb]) {
+			@apply transition-all;
+			position: absolute;
+			top: --spacing(0.2);
+			left: --spacing(0.2);
+			display: block;
+			width: --spacing(5.6);
+			height: --spacing(5.6);
+			border-radius: 50%;
+			box-sizing: border-box;
+			background-color: var(--color-primary);
+		}
 
-:global([data-switch-thumb][data-state='checked']) {
-  background-color: var(--color-primaryContainer);
-  transform: translateX(14px);
-}</style>
+		:global([data-switch-root][data-state='checked']) {
+			background-color: var(--color-primary);
+		}
+
+		:global([data-switch-thumb][data-state='checked']) {
+			background-color: var(--color-primaryContainer);
+			transform: translateX(--spacing(3.5));
+		}
+	}
+</style>