@celar-ui/svelte 0.0.4 → 0.0.6

package/dist/containment/Avatar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Avatar, type AvatarRootProps } from 'bits-ui';
+	import { Avatar as BitAvatar, type AvatarRootProps } from 'bits-ui';
 	import type { Snippet } from 'svelte';
 
 	export type AvatarProps = AvatarRootProps & {
@@ -12,14 +12,14 @@
 	let { size = '64px', src, alt, fallback, ...rest }: AvatarProps = $props();
 </script>
 
-<Avatar.Root {...rest} style="--size: {size}">
-	<Avatar.Image {src} {alt} />
-	<Avatar.Fallback>
+<BitAvatar.Root {...rest} style="--size: {size}">
+	<BitAvatar.Image {src} {alt} />
+	<BitAvatar.Fallback>
 		{#if fallback}
 			{@render fallback()}
 		{/if}
-	</Avatar.Fallback>
-</Avatar.Root>
+	</BitAvatar.Fallback>
+</BitAvatar.Root>
 
 <style>:global([data-avatar-root]) {
   display: block;

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

@@ -1,4 +1,4 @@
-import { Avatar, type AvatarRootProps } from 'bits-ui';
+import { type AvatarRootProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 export type AvatarProps = AvatarRootProps & {
     src: string;

package/dist/inputs/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Checkbox, type CheckboxRootProps, type WithoutChildren } from 'bits-ui';
+	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';
@@ -13,7 +13,7 @@
 
 <label data-checkbox>
 	<div data-checkbox-icon>
-		<Checkbox.Root {...rest}>
+		<BitCheckbox.Root {...rest}>
 			{#snippet children({ checked, indeterminate })}
 				{#if checked}
 					<IconTick font-size="20px" />
@@ -22,7 +22,7 @@
 					<IconMinus />
 				{/if}
 			{/snippet}
-		</Checkbox.Root>
+		</BitCheckbox.Root>
 	</div>
 
 	{@render children?.()}

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

@@ -1,4 +1,4 @@
-import { Checkbox, type CheckboxRootProps, type WithoutChildren } from 'bits-ui';
+import { type CheckboxRootProps, type WithoutChildren } from 'bits-ui';
 import type { Snippet } from 'svelte';
 type CheckboxProps = WithoutChildren<CheckboxRootProps> & {
     children?: Snippet;

package/dist/inputs/RadioGroup.svelte

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

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

@@ -1,4 +1,4 @@
-import { RadioGroup, type RadioGroupRootProps, type WithoutChildren } from 'bits-ui';
+import { type RadioGroupRootProps, type WithoutChildren } from 'bits-ui';
 import type { Snippet } from 'svelte';
 export type RadioGroupProps = WithoutChildren<RadioGroupRootProps> & {
     children?: Snippet;

package/dist/inputs/Switch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Switch, type SwitchRootProps, type WithoutChildren } from 'bits-ui';
+	import { Switch as BitSwitch, type SwitchRootProps, type WithoutChildren } from 'bits-ui';
 	import type { Snippet } from 'svelte';
 
 	export type SwitchProps = WithoutChildren<SwitchRootProps> & {
@@ -10,9 +10,9 @@
 </script>
 
 <label data-switch>
-	<Switch.Root {...rest} bind:checked>
-		<Switch.Thumb />
-	</Switch.Root>
+	<BitSwitch.Root {...rest} bind:checked>
+		<BitSwitch.Thumb />
+	</BitSwitch.Root>
 
 	{@render children?.()}
 </label>

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

@@ -1,4 +1,4 @@
-import { Switch, type SwitchRootProps, type WithoutChildren } from 'bits-ui';
+import { type SwitchRootProps, type WithoutChildren } from 'bits-ui';
 import type { Snippet } from 'svelte';
 export type SwitchProps = WithoutChildren<SwitchRootProps> & {
     children?: Snippet;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",
@@ -21,6 +21,7 @@
 	},
 	"files": [
 		"dist",
+		"src/styles",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
@@ -34,7 +35,8 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
-		}
+		},
+		"./styles": "./src/styles/*.scss"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"

package/src/styles/colors.scss

@@ -0,0 +1,45 @@
+@use './utils.scss';
+@use './config.scss';
+
+$colors-theme: (
+	color-primary--text: #570000,
+	color-primary--darker: #962c0f,
+	color-primary--dark: #ff907f,
+	color-primary: #ffc5b3,
+	color-primary--light: #ffe5dc,
+	color-primary--lighter: #fff6f3,
+
+	color-alt--text: #481523,
+	color-alt--darker: #8f1538,
+	color-alt--dark: #c48591,
+	color-alt: #f1afbb,
+	color-alt--light: #ffe3ec,
+	color-alt--lighter: #fff3f7,
+
+	color-text: #000000,
+	color-text-info: #1a3baa,
+	color-text-success: #438d75,
+	color-text-warning: #c18500,
+	color-text-danger: #98000b,
+
+	color-bg: #ffffff,
+	color-bg-info: #faf8ff,
+	color-bg-success: #e8fef5,
+	color-bg-warning: #fff8ec,
+	color-bg-danger: #fff4ef
+) !default;
+
+$colors-misc: (
+	color-shadow--soft: rgba(0, 0, 0, 0.05),
+	color-shadow--md: rgba(0, 0, 0, 0.075),
+	color-shadow: rgba(0, 0, 0, 0.1),
+	color-shadow--strong: rgba(0, 0, 0, 0.16),
+	color-border: rgba(var(--color-text--rgb), 0.07),
+	color-border--strong: rgba(var(--color-text--rgb), 0.1),
+	color-wrapper: rgba(var(--color-text--rgb), 0.024)
+) !default;
+
+:root {
+	@include utils.generate_colors(config.$prefix, $colors-theme);
+	@include utils.add_prefix(config.$prefix, $colors-misc);
+}

package/src/styles/config.scss

@@ -0,0 +1 @@
+$prefix: '';

package/src/styles/misc.scss

@@ -0,0 +1,15 @@
+@use './utils.scss';
+@use './config.scss';
+
+$misc: (
+	radius: 16px,
+	radius--half: 8px,
+	blur-length--x2: 8px,
+	blur-length: 4px,
+	transition-dur: 150ms,
+	transition-dur--long: 300ms
+) !default;
+
+:root {
+	@include utils.add_prefix(config.$prefix, $misc);
+}

package/src/styles/spacing.scss

@@ -0,0 +1,23 @@
+@use './utils.scss';
+@use './config.scss';
+
+$spacing: (
+	gap--x3: 3rem,
+	gap--x2: 2rem,
+	gap: 1rem,
+	gap--md: 0.7rem,
+	gap--half: 0.5rem,
+	gap--sm: 0.3rem,
+	gap--xs: 0.1rem
+) !default;
+
+$breaking: (
+	break--xs: 540px,
+	break--sm: 960px,
+	break--md: 1320px
+) !default;
+
+:root {
+	@include utils.add_prefix(config.$prefix, $spacing);
+	@include utils.add_prefix(config.$prefix, $breaking);
+}

package/src/styles/utils.scss

@@ -0,0 +1,27 @@
+@use 'sass:string';
+@use 'sass:color';
+
+@function convertHexToRGB($hex) {
+	@return color.channel($hex, 'red', $space: rgb), color.channel($hex, 'green', $space: rgb),
+		color.channel($hex, 'blue', $space: rgb);
+}
+
+@mixin generate_colors($prefix, $colors) {
+	// Colors, RGB Colors
+	@each $color, $value in $colors {
+		@if string.slice(#{$value}, 1, 1) == '#' {
+			--#{$prefix}#{$color}: #{$value};
+			--#{$prefix}#{$color}--rgb: #{convertHexToRGB($value)};
+		} @else {
+			--#{$prefix}#{$color}: var(--#{$value});
+			--#{$prefix}#{$color}--rgb: var(--#{$value}--rgb);
+		}
+	}
+}
+
+@mixin add_prefix($prefix, $vars) {
+	// Colors, RGB Colors
+	@each $var, $value in $vars {
+		--#{$prefix}#{$var}: #{$value};
+	}
+} ;