@celar-ui/svelte 0.0.7 → 0.0.9

package/dist/buttons/BaseButton.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import './styles/base_button.scss';
+
 	import { Button, type ButtonRootProps } from 'bits-ui';
 
 	export type BaseButtonProps = ButtonRootProps & {
@@ -13,36 +15,3 @@
 		{@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

@@ -1,3 +1,4 @@
+import './styles/base_button.scss';
 import { type ButtonRootProps } from 'bits-ui';
 export type BaseButtonProps = ButtonRootProps & {
     loading?: boolean;

package/dist/buttons/ElevatedButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/elevated_button.scss';
 	import TextBaseButton from './TextBaseButton.svelte';
 	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 
@@ -7,21 +8,4 @@
 
 <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

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

package/dist/buttons/FilledButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/filled_button.scss';
 	import TextBaseButton from './TextBaseButton.svelte';
 	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 
@@ -7,21 +8,3 @@
 
 <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

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

package/dist/buttons/IconButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/icon_button.scss';
 	import DotSpinner from '../misc/DotSpinner.svelte';
 	import BaseButton from './BaseButton.svelte';
 	import type { BaseButtonProps } from './BaseButton.svelte';
@@ -22,35 +23,3 @@
 
 <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

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

package/dist/buttons/OutlinedButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/outlined_button.scss';
 	import TextBaseButton from './TextBaseButton.svelte';
 	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 
@@ -7,18 +8,4 @@
 
 <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

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

package/dist/buttons/TextButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/text_button.scss';
 	import TextBaseButton from './TextBaseButton.svelte';
 	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 
@@ -7,15 +8,4 @@
 
 <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

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

package/dist/buttons/styles/base_button.scss

@@ -0,0 +1,31 @@
+[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: fit-content;
+	height: fit-content;
+	color: inherit;
+	font-size: inherit;
+	font-family: inherit;
+	user-select: none;
+	text-decoration: none;
+	-webkit-tap-highlight-color: transparent;
+
+	&:not(:disabled):active {
+		top: 1px;
+	}
+
+	&:not([data-active='true']):disabled {
+		opacity: 0.5;
+	}
+
+	&:disabled {
+		cursor: default;
+	}
+}

package/dist/buttons/styles/elevated_button.scss

@@ -0,0 +1,20 @@
+[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);
+
+	&:not(:disabled, [data-active='true']):hover {
+		box-shadow: 0 2px 4px var(--color-shadow--strong);
+		background-color: var(--color-primary--light);
+	}
+
+	&:not(:disabled):active {
+		box-shadow: 0 2px 2px var(--color-shadow--strong);
+	}
+}
+
+[data-button-elevated][data-active='true'] {
+	box-shadow: 0 2px 2px var(--color-shadow--strong);
+	background-color: var(--color-alt);
+}

package/dist/buttons/styles/filled_button.scss

@@ -0,0 +1,20 @@
+[data-button-filled] {
+	transition-duration: var(--transition-dur);
+	transition-property: background-color, box-shadow, opacity;
+	background-color: var(--color-primary);
+
+	&:not(:disabled, [data-active='true']):hover {
+		background-color: var(--color-primary--dark);
+		box-shadow: 0 2px 4px var(--color-shadow--strong);
+	}
+
+	&:not(:disabled):active {
+		box-shadow: 0 2px 2px var(--color-shadow--strong);
+	}
+}
+
+[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);
+}

package/dist/buttons/styles/icon_button.scss

@@ -0,0 +1,35 @@
+[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;
+
+	.button-spinner {
+		display: flex;
+		position: absolute;
+		top: 0;
+		left: 0;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.button-body {
+		line-height: 0;
+	}
+
+	&:not(:disabled, [data-active='true']):hover {
+		background-color: var(--color-primary--light);
+	}
+}
+
+[data-button-icon][data-active='true'] {
+	background-color: var(--color-alt);
+	color: var(--color-primary--text);
+}

package/dist/buttons/styles/outlined_button.scss

@@ -0,0 +1,16 @@
+[data-button-outlined] {
+	transition-duration: var(--transition-dur);
+	transition-property: background-color, border-color;
+	background-color: transparent;
+	border: 1px solid var(--color-primary--light);
+
+	&:not(:disabled, [data-active='true']):hover {
+		background-color: var(--color-primary--light);
+		border-color: var(--color-primary);
+	}
+}
+
+[data-button-text][data-active='true'] {
+	background-color: var(--color-alt);
+	border-color: var(--color-primary);
+}

package/dist/buttons/styles/text_button.scss

@@ -0,0 +1,13 @@
+[data-button-text] {
+	transition-duration: var(--transition-dur);
+	transition-property: background-color;
+	background-color: transparent;
+
+	&:not(:disabled, [data-active='true']):hover {
+		background-color: var(--color-primary--light);
+	}
+}
+
+[data-button-text][data-active='true'] {
+	background-color: var(--color-alt);
+}

package/dist/containment/Avatar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/avatar.scss';
 	import { Avatar as BitAvatar, type AvatarRootProps } from 'bits-ui';
 	import type { Snippet } from 'svelte';
 
@@ -21,18 +22,4 @@
 	</BitAvatar.Fallback>
 </BitAvatar.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

@@ -1,3 +1,4 @@
+import './styles/avatar.scss';
 import { type AvatarRootProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 export type AvatarProps = AvatarRootProps & {

package/dist/containment/Card.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/card.scss';
 	import Container from './Container.svelte';
 	import type { ContainerProps } from './Container.svelte';
 
@@ -6,8 +7,3 @@
 </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

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

package/dist/containment/styles/avatar.scss

@@ -0,0 +1,15 @@
+[data-avatar-root] {
+	display: block;
+	position: relative;
+	background-color: var(--vuuui-color-bg-info);
+	aspect-ratio: 1;
+	width: var(--size);
+}
+
+[data-avatar-image],
+[data-avatar-fallback] {
+	object-fit: cover;
+	border-radius: 50%;
+	width: 100%;
+	height: 100%;
+}

package/dist/containment/styles/card.scss

@@ -0,0 +1,4 @@
+[data-card] {
+	box-shadow: 0 var(--gap--sm) var(--gap) var(--color-shadow--md);
+	background-color: var(--color-bg);
+}

package/dist/inputs/Checkbox.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { Checkbox as BitCheckbox, 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> & {
@@ -11,15 +9,43 @@
 	let { children, ...rest }: CheckboxProps = $props();
 </script>
 
+{#snippet iconTick()}
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M5 14.5s1.5 0 3.5 3.5c0 0 5.559-9.167 10.5-11"
+			color="currentColor"
+		/>
+	</svg>
+{/snippet}
+
+{#snippet iconMinus()}
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M20 12H4"
+			color="currentColor"
+		/>
+	</svg>
+{/snippet}
+
 <label data-checkbox>
 	<div data-checkbox-icon>
 		<BitCheckbox.Root {...rest}>
 			{#snippet children({ checked, indeterminate })}
 				{#if checked}
-					<IconTick font-size="20px" />
+					{@render iconTick()}
 				{/if}
 				{#if indeterminate}
-					<IconMinus />
+					{@render iconMinus()}
 				{/if}
 			{/snippet}
 		</BitCheckbox.Root>

package/dist/inputs/RadioGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/radio_group.scss';
 	import {
 		RadioGroup as BitRadioGroup,
 		type RadioGroupRootProps as BitRadioGroupRootProps,
@@ -16,6 +17,3 @@
 	{@render children?.()}
 </BitRadioGroup.Root>
 
-<style>:global([data-radio-group-root]) {
-  position: relative;
-}</style>

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

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

package/dist/inputs/styles/radio_group.scss

@@ -0,0 +1,3 @@
+[data-radio-group-root] {
+	position: relative;
+}

package/dist/overlay/Dialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/dialog.scss';
 	import { fade, fly } from 'svelte/transition';
 	import { Dialog as BitDialog, type DialogRootProps } from 'bits-ui';
 	import type { Snippet } from 'svelte';
@@ -69,65 +70,4 @@
 	</BitDialog.Portal>
 </BitDialog.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

@@ -1,3 +1,4 @@
+import './styles/dialog.scss';
 import { type DialogRootProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 type DialogProps = DialogRootProps & {

package/dist/overlay/styles/dialog.scss

@@ -0,0 +1,69 @@
+$gap: var(--gap);
+$gap--x2: var(--gap--x2);
+$d-max-w: calc(100% - $gap--x2);
+$d-max-h: calc(100dvh - $gap--x2);
+$header-h: 48px;
+$body-max-h: calc($d-max-h - $header-h);
+
+[data-dialog-overlay] {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	backdrop-filter: blur(var(--blur-length));
+	background-color: var(--color-border--strong);
+	z-index: 100;
+}
+
+[data-dialog-content] {
+	box-sizing: border-box;
+	position: fixed;
+	top: calc(50dvh - $gap);
+	left: calc(50lvw - $gap);
+	transform: translate(-50%, -50%);
+	max-width: $d-max-w;
+	max-height: $d-max-h;
+	margin: $gap;
+	background-color: var(--color-bg);
+	box-shadow: 0 4px 1rem var(--color-shadow);
+	border-radius: var(--radius);
+	overflow: hidden;
+	z-index: 100;
+
+	&[data-xs='true'] {
+		max-width: min($d-max-w, var(--break--xs));
+	}
+	&[data-sm='true'] {
+		max-width: min($d-max-w, var(--break--sm));
+	}
+	&[data-md='true'] {
+		max-width: min($d-max-w, var(--break--md));
+	}
+	&[data-fluid='true'] {
+		width: 100%;
+	}
+}
+
+[data-dialog-header] {
+	height: $header-h;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-left: var(--gap);
+	padding-right: var(--gap--sm);
+	overflow: hidden;
+}
+
+[data-dialog-title] {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+[data-dialog-body] {
+	box-sizing: border-box;
+	max-height: $body-max-h;
+	overflow-y: auto;
+	padding: var(--gap);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "0.0.7",
+	"version": "0.0.9",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",
@@ -39,6 +39,7 @@
 		"./styles": "./src/styles/*.scss"
 	},
 	"peerDependencies": {
+		"bits-ui": "^1.3.19",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
@@ -50,7 +51,6 @@
 		"@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",