tera-system-ui 0.0.73 → 0.0.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,8 @@
1
+ import { type VariantProps } from "tailwind-variants";
2
+ export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
3
+ type CheckboxVariants = VariantProps<typeof styles>;
4
+ export interface CheckboxProps extends CheckboxVariants {
5
+ children?: any;
6
+ class?: string;
7
+ }
8
+ export {};
@@ -0,0 +1,7 @@
1
+ import { tv } from "tailwind-variants";
2
+ export const styles = tv({
3
+ base: '',
4
+ variants: {},
5
+ compoundVariants: [],
6
+ defaultVariants: {},
7
+ });
@@ -0,0 +1,34 @@
1
+ <script lang="ts">
2
+ import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
3
+ import { cn } from "../../utils";
4
+ import {IconCheck, IconMinus} from "@tabler/icons-svelte";
5
+
6
+ let {
7
+ ref = $bindable(null),
8
+ checked = $bindable(false),
9
+ indeterminate = $bindable(false),
10
+ class: className,
11
+ ...restProps
12
+ }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
13
+ </script>
14
+
15
+ <CheckboxPrimitive.Root
16
+ bind:ref
17
+ class={cn(
18
+ "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
19
+ className
20
+ )}
21
+ bind:checked
22
+ bind:indeterminate
23
+ {...restProps}
24
+ >
25
+ {#snippet children({ checked, indeterminate })}
26
+ <div class="flex size-4 items-center justify-center">
27
+ {#if indeterminate}
28
+ <IconMinus class="size-3.5 text-neutral-1" stroke={3}/>
29
+ {:else}
30
+ <IconCheck class={cn("size-3.5 text-neutral-1", !checked && "text-transparent")} stroke={3}/>
31
+ {/if}
32
+ </div>
33
+ {/snippet}
34
+ </CheckboxPrimitive.Root>
@@ -0,0 +1,3 @@
1
+ import { Checkbox as CheckboxPrimitive } from "bits-ui";
2
+ declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
3
+ export default Checkbox;
@@ -0,0 +1 @@
1
+ export { default as Checkbox } from './Checkbox.svelte';
@@ -0,0 +1 @@
1
+ export { default as Checkbox } from './Checkbox.svelte';
@@ -4,7 +4,7 @@ export const styles = tv({
4
4
  variants: {
5
5
  variant: {
6
6
  outlined: 'border border-neutral-token-5 bg-neutral-token-1 focus:border-primary-token-6 hover:border-primary-token-5 focus-visible:ring-2',
7
- filled: 'bg-neutral-token-4 border border-neutral-token-4 focus:bg-neutral-token-1 focus:border-primary-token-6 hover:bg-neutral-token-4 focus-visible:ring-2',
7
+ filled: 'bg-input border border-neutral-token-4 focus:bg-neutral-token-1 focus:border-primary-token-6 hover:bg-neutral-token-5 focus-visible:ring-2',
8
8
  borderless: 'bg-neutral-token-1 border-0',
9
9
  },
10
10
  disabled: {
@@ -21,12 +21,12 @@ export const styles = tv({
21
21
  {
22
22
  variant: 'outlined',
23
23
  disabled: true,
24
- class: 'hover:border-neutral-token-5'
24
+ class: 'hover:border-border'
25
25
  },
26
26
  {
27
27
  variant: 'filled',
28
28
  disabled: true,
29
- class: 'hover:bg-neutral-token-3'
29
+ class: 'hover:bg-input'
30
30
  }
31
31
  ],
32
32
  defaultVariants: {
@@ -0,0 +1,8 @@
1
+ import { type VariantProps } from "tailwind-variants";
2
+ export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
3
+ type LabelVariants = VariantProps<typeof styles>;
4
+ export interface LabelProps extends LabelVariants {
5
+ children?: any;
6
+ class?: string;
7
+ }
8
+ export {};
@@ -0,0 +1,7 @@
1
+ import { tv } from "tailwind-variants";
2
+ export const styles = tv({
3
+ base: '',
4
+ variants: {},
5
+ compoundVariants: [],
6
+ defaultVariants: {},
7
+ });
@@ -0,0 +1,19 @@
1
+ <script lang="ts">
2
+ import { Label as LabelPrimitive } from "bits-ui";
3
+ import { cn } from "../../utils";
4
+
5
+ let {
6
+ ref = $bindable(null),
7
+ class: className,
8
+ ...restProps
9
+ }: LabelPrimitive.RootProps = $props();
10
+ </script>
11
+
12
+ <LabelPrimitive.Root
13
+ bind:ref
14
+ class={cn(
15
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
16
+ className
17
+ )}
18
+ {...restProps}
19
+ />
@@ -0,0 +1,3 @@
1
+ import { Label as LabelPrimitive } from "bits-ui";
2
+ declare const Label: import("svelte").Component<LabelPrimitive.RootProps, {}, "ref">;
3
+ export default Label;
@@ -0,0 +1 @@
1
+ export { default as Label } from './Label.svelte';
@@ -0,0 +1 @@
1
+ export { default as Label } from './Label.svelte';
@@ -82,11 +82,14 @@
82
82
  opacity: 0;
83
83
  }
84
84
  button:hover {
85
- background-color: hsl(var(--tw---token-color-neutral-token-4));
85
+ --tw-bg-opacity: 1;
86
+ background-color: hsl(var(--tw---token-color-neutral-token-4) / var(--tw-bg-opacity, 1)) ;
86
87
  }
87
88
  button[data-selected] {
88
- background-color: hsl(var(--tw---token-color-neutral-token-11));
89
- color: hsl(var(--tw---token-color-neutral-token-1));
89
+ --tw-bg-opacity: 1;
90
+ background-color: hsl(var(--tw---token-color-neutral-token-11) / var(--tw-bg-opacity, 1)) ;
91
+ --tw-text-opacity: 1;
92
+ color: hsl(var(--tw---token-color-neutral-token-1) / var(--tw-text-opacity, 1)) ;
90
93
  }
91
94
  button[data-selected] .check {
92
95
  opacity: 1;
@@ -184,11 +184,13 @@
184
184
  --tw-scale-x: 1.25;
185
185
  --tw-scale-y: 1.25;
186
186
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
187
- border-color: hsl(var(--tw---token-color-primary-token-7));
187
+ --tw-border-opacity: 1;
188
+ border-color: hsl(var(--tw---token-color-primary-token-7) / var(--tw-border-opacity, 1)) ;
188
189
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
189
190
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0.35rem + var(--tw-ring-offset-width)) var(--tw-ring-color);
190
191
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
191
- --tw-ring-color: hsl(var(--tw---token-color-primary-token-2));
192
+ --tw-ring-opacity: 1;
193
+ --tw-ring-color: hsl(var(--tw---token-color-primary-token-2) / var(--tw-ring-opacity, 1)) ;
192
194
  }
193
195
 
194
196
  [data-slider-tooltip] {
@@ -198,12 +200,14 @@
198
200
  width: -moz-fit-content;
199
201
  width: fit-content;
200
202
  border-radius: var(--border-radius-base);
201
- background-color: hsl(var(--tw---token-color-neutral-token-12));
203
+ --tw-bg-opacity: 1;
204
+ background-color: hsl(var(--tw---token-color-neutral-token-12) / var(--tw-bg-opacity, 1)) ;
202
205
  padding-left: 0.375rem;
203
206
  padding-right: 0.375rem;
204
207
  padding-top: 0.25rem;
205
208
  padding-bottom: 0.25rem;
206
- color: hsl(var(--tw---token-color-neutral-token-1));
209
+ --tw-text-opacity: 1;
210
+ color: hsl(var(--tw---token-color-neutral-token-1) / var(--tw-text-opacity, 1)) ;
207
211
  transition: all 0.2s ease-in-out, left 0s;
208
212
  opacity: 0;
209
213
  transform: translateY(-3rem) translateX(-50%) scale(0.9);
@@ -219,7 +223,8 @@
219
223
  --tw-rotate: 45deg;
220
224
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
221
225
  border-radius: 0.125rem;
222
- background-color: hsl(var(--tw---token-color-neutral-token-12));
226
+ --tw-bg-opacity: 1;
227
+ background-color: hsl(var(--tw---token-color-neutral-token-12) / var(--tw-bg-opacity, 1)) ;
223
228
  }
224
229
  [data-slider-tooltip]:global(.show) {
225
230
  opacity: 1;
@@ -79,7 +79,7 @@
79
79
 
80
80
 
81
81
  <style>[data-rating-icon] {
82
- fill: hsl(var(--tw---token-color-neutral-token-5));
82
+ fill: hsl(var(--tw---token-color-neutral-token-5) / 1) ;
83
83
  transition-property: all;
84
84
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
85
85
  transition-duration: 350ms
@@ -0,0 +1,8 @@
1
+ import { type VariantProps } from "tailwind-variants";
2
+ export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
3
+ type SwitchVariants = VariantProps<typeof styles>;
4
+ export interface SwitchProps extends SwitchVariants {
5
+ children?: any;
6
+ class?: string;
7
+ }
8
+ export {};
@@ -0,0 +1,7 @@
1
+ import { tv } from "tailwind-variants";
2
+ export const styles = tv({
3
+ base: '',
4
+ variants: {},
5
+ compoundVariants: [],
6
+ defaultVariants: {},
7
+ });
@@ -0,0 +1,35 @@
1
+ <script lang="ts">
2
+
3
+ import {Switch as SwitchPrimitive, type WithoutChildrenOrChild} from "bits-ui";
4
+ import {cn} from "../../utils";
5
+
6
+ let {
7
+ ref = $bindable(null),
8
+ class: className,
9
+ checked = $bindable(false),
10
+ ...restProps
11
+ }: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
12
+
13
+ </script>
14
+
15
+ <SwitchPrimitive.Root
16
+ {...restProps}
17
+ bind:checked
18
+ bind:ref
19
+ class={cn(
20
+ "relative focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input group peer h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
21
+ "overflow-clip",
22
+ className
23
+ )}
24
+ >
25
+ <div class="h-2 bg-neutral-1 w-[1px] absolute top-2 left-[0.7rem] transition-transform group-data-[state=unchecked]:-translate-x-6 group-data-[state=checked]:translate-x-0"></div>
26
+ <div class="size-2 border-[1px] border-neutral-token-7 absolute top-2 right-2 rounded-full transition-transform group-data-[state=unchecked]:translate-x-0 group-data-[state=checked]:translate-x-6"></div>
27
+ <SwitchPrimitive.Thumb
28
+ class={cn(
29
+ "bg-neutral-1 pointer-events-none block size-5 rounded-full ring-0 transition-transform t-0.5 data-[state=checked]:translate-x-[1.375rem] data-[state=unchecked]:translate-x-0.5",
30
+ "shadow-[0_2px_4px_rgba(0,0,0,0.2),0_2px_8px_rgba(0,0,0,0.2)]"
31
+ )}
32
+ />
33
+ </SwitchPrimitive.Root>
34
+
35
+
@@ -0,0 +1,3 @@
1
+ import { Switch as SwitchPrimitive } from "bits-ui";
2
+ declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
3
+ export default Switch;
@@ -0,0 +1 @@
1
+ export { default as Switch } from './Switch.svelte';
@@ -0,0 +1 @@
1
+ export { default as Switch } from './Switch.svelte';
@@ -27,6 +27,7 @@
27
27
 
28
28
  <style>
29
29
  button[data-state="active"] {
30
- color: hsl(var(--tw---token-color-primary-token-5))
30
+ --tw-text-opacity: 1;
31
+ color: hsl(var(--tw---token-color-primary-token-5) / var(--tw-text-opacity, 1))
31
32
  }
32
33
  </style>
package/dist/index.d.ts CHANGED
@@ -2,6 +2,7 @@ export { AccordionItem, AccordionContent, AccordionTrigger, Accordion } from './
2
2
  export { Avatar } from './components/avatar';
3
3
  export { BrandLogo } from './components/brand-logo';
4
4
  export { Button } from './components/button';
5
+ export { Checkbox } from './components/checkbox';
5
6
  export { Combobox } from './components/combobox';
6
7
  export { Command } from './components/command';
7
8
  export { Dialog } from './components/dialog';
@@ -10,6 +11,7 @@ export { TeraFontSansSerif, TeraFontMono } from './components/fonts';
10
11
  export { Header } from './components/header';
11
12
  export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCoin, IconCoinConvert, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconLogout, IconMoon, IconPointFilled, IconSearch, IconSettings, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
12
13
  export { Input } from './components/input';
14
+ export { Label } from './components/label';
13
15
  export { LanguagePickerButton } from './components/language-picker-button';
14
16
  export { LightDarkToggle } from './components/light-dark-toggle';
15
17
  export { Popover } from './components/popover';
@@ -18,6 +20,7 @@ export { Select } from './components/select';
18
20
  export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
19
21
  export { Slider } from './components/slider';
20
22
  export { StarRating } from './components/star-rating';
23
+ export { Switch } from './components/switch';
21
24
  export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs';
22
25
  export { TeraUiContext } from './components/tera-ui-context';
23
26
  export { TextArea } from './components/text-area';
package/dist/index.js CHANGED
@@ -2,6 +2,7 @@ export { AccordionItem, AccordionContent, AccordionTrigger, Accordion } from './
2
2
  export { Avatar } from './components/avatar';
3
3
  export { BrandLogo } from './components/brand-logo';
4
4
  export { Button } from './components/button';
5
+ export { Checkbox } from './components/checkbox';
5
6
  export { Combobox } from './components/combobox';
6
7
  export { Command } from './components/command';
7
8
  export { Dialog } from './components/dialog';
@@ -10,6 +11,7 @@ export { TeraFontSansSerif, TeraFontMono } from './components/fonts';
10
11
  export { Header } from './components/header';
11
12
  export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCoin, IconCoinConvert, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconLogout, IconMoon, IconPointFilled, IconSearch, IconSettings, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
12
13
  export { Input } from './components/input';
14
+ export { Label } from './components/label';
13
15
  export { LanguagePickerButton } from './components/language-picker-button';
14
16
  export { LightDarkToggle } from './components/light-dark-toggle';
15
17
  export { Popover } from './components/popover';
@@ -18,6 +20,7 @@ export { Select } from './components/select';
18
20
  export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
19
21
  export { Slider } from './components/slider';
20
22
  export { StarRating } from './components/star-rating';
23
+ export { Switch } from './components/switch';
21
24
  export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs';
22
25
  export { TeraUiContext } from './components/tera-ui-context';
23
26
  export { TextArea } from './components/text-area';
@@ -2,125 +2,138 @@ module.exports = {
2
2
  theme: {
3
3
  extend: {
4
4
  colors: {
5
+ border: 'hsl(var(--tw---token-color-neutral-token-5) / <alpha-value>)',
6
+ input: 'hsl(var(--tw---token-color-neutral-token-4) / <alpha-value>)',
7
+ ring: 'hsl(var(--tw---alias-color-primary-700) / <alpha-value>)',
8
+ background: 'hsl(var(--tw---token-color-neutral-token-1) / <alpha-value>)',
9
+ foreground: 'hsl(var(--tw---token-color-neutral-token-13) / <alpha-value>)',
5
10
  primary: {
6
- 50: 'hsl(var(--tw---alias-color-primary-50))',
7
- 100: 'hsl(var(--tw---alias-color-primary-100))',
8
- 200: 'hsl(var(--tw---alias-color-primary-200))',
9
- 300: 'hsl(var(--tw---alias-color-primary-300))',
10
- 400: 'hsl(var(--tw---alias-color-primary-400))',
11
- 500: 'hsl(var(--tw---alias-color-primary-500))',
12
- 600: 'hsl(var(--tw---alias-color-primary-600))',
13
- 700: 'hsl(var(--tw---alias-color-primary-700))',
14
- 800: 'hsl(var(--tw---alias-color-primary-800))',
15
- 900: 'hsl(var(--tw---alias-color-primary-900))',
11
+ 50: 'hsl(var(--tw---alias-color-primary-50) / <alpha-value>)',
12
+ 100: 'hsl(var(--tw---alias-color-primary-100) / <alpha-value>)',
13
+ 200: 'hsl(var(--tw---alias-color-primary-200) / <alpha-value>)',
14
+ 300: 'hsl(var(--tw---alias-color-primary-300) / <alpha-value>)',
15
+ 400: 'hsl(var(--tw---alias-color-primary-400) / <alpha-value>)',
16
+ 500: 'hsl(var(--tw---alias-color-primary-500) / <alpha-value>)',
17
+ 600: 'hsl(var(--tw---alias-color-primary-600) / <alpha-value>)',
18
+ 700: 'hsl(var(--tw---alias-color-primary-700) / <alpha-value>)',
19
+ 800: 'hsl(var(--tw---alias-color-primary-800) / <alpha-value>)',
20
+ 900: 'hsl(var(--tw---alias-color-primary-900) / <alpha-value>)',
16
21
  token: {
17
- 1: 'hsl(var(--tw---token-color-primary-token-1))',
18
- 2: 'hsl(var(--tw---token-color-primary-token-2))',
19
- 3: 'hsl(var(--tw---token-color-primary-token-3))',
20
- 4: 'hsl(var(--tw---token-color-primary-token-4))',
21
- 5: 'hsl(var(--tw---token-color-primary-token-5))',
22
- 6: 'hsl(var(--tw---token-color-primary-token-6))',
23
- 7: 'hsl(var(--tw---token-color-primary-token-7))',
24
- 8: 'hsl(var(--tw---token-color-primary-token-8))',
25
- 9: 'hsl(var(--tw---token-color-primary-token-9))',
26
- 10: 'hsl(var(--tw---token-color-primary-token-10))'
27
- }
22
+ 1: 'hsl(var(--tw---token-color-primary-token-1) / <alpha-value>) ',
23
+ 2: 'hsl(var(--tw---token-color-primary-token-2) / <alpha-value>) ',
24
+ 3: 'hsl(var(--tw---token-color-primary-token-3) / <alpha-value>) ',
25
+ 4: 'hsl(var(--tw---token-color-primary-token-4) / <alpha-value>) ',
26
+ 5: 'hsl(var(--tw---token-color-primary-token-5) / <alpha-value>) ',
27
+ 6: 'hsl(var(--tw---token-color-primary-token-6) / <alpha-value>) ',
28
+ 7: 'hsl(var(--tw---token-color-primary-token-7) / <alpha-value>) ',
29
+ 8: 'hsl(var(--tw---token-color-primary-token-8) / <alpha-value>) ',
30
+ 9: 'hsl(var(--tw---token-color-primary-token-9) / <alpha-value>) ',
31
+ 10: 'hsl(var(--tw---token-color-primary-token-10) / <alpha-value>) '
32
+ },
33
+ DEFAULT: 'hsl(var(--tw---alias-color-primary-700) / <alpha-value>)'
28
34
  },
29
35
  error: {
30
- 50: 'hsl(var(--tw---alias-color-error-50))',
31
- 100: 'hsl(var(--tw---alias-color-error-100))',
32
- 200: 'hsl(var(--tw---alias-color-error-200))',
33
- 300: 'hsl(var(--tw---alias-color-error-300))',
34
- 400: 'hsl(var(--tw---alias-color-error-400))',
35
- 500: 'hsl(var(--tw---alias-color-error-500))',
36
- 600: 'hsl(var(--tw---alias-color-error-600))',
37
- 700: 'hsl(var(--tw---alias-color-error-700))',
38
- 800: 'hsl(var(--tw---alias-color-error-800))',
39
- 900: 'hsl(var(--tw---alias-color-error-900))'
36
+ 50: 'hsl(var(--tw---alias-color-error-50) / <alpha-value>)',
37
+ 100: 'hsl(var(--tw---alias-color-error-100) / <alpha-value>)',
38
+ 200: 'hsl(var(--tw---alias-color-error-200) / <alpha-value>)',
39
+ 300: 'hsl(var(--tw---alias-color-error-300) / <alpha-value>)',
40
+ 400: 'hsl(var(--tw---alias-color-error-400) / <alpha-value>)',
41
+ 500: 'hsl(var(--tw---alias-color-error-500) / <alpha-value>)',
42
+ 600: 'hsl(var(--tw---alias-color-error-600) / <alpha-value>)',
43
+ 700: 'hsl(var(--tw---alias-color-error-700) / <alpha-value>)',
44
+ 800: 'hsl(var(--tw---alias-color-error-800) / <alpha-value>)',
45
+ 900: 'hsl(var(--tw---alias-color-error-900) / <alpha-value>)',
46
+ DEFAULT: 'hsl(var(--tw---alias-color-error-500) / <alpha-value>)'
40
47
  },
41
48
  success: {
42
- 50: 'hsl(var(--tw---alias-color-success-50))',
43
- 100: 'hsl(var(--tw---alias-color-success-100))',
44
- 200: 'hsl(var(--tw---alias-color-success-200))',
45
- 300: 'hsl(var(--tw---alias-color-success-300))',
46
- 400: 'hsl(var(--tw---alias-color-success-400))',
47
- 500: 'hsl(var(--tw---alias-color-success-500))',
48
- 600: 'hsl(var(--tw---alias-color-success-600))',
49
- 700: 'hsl(var(--tw---alias-color-success-700))',
50
- 800: 'hsl(var(--tw---alias-color-success-800))',
51
- 900: 'hsl(var(--tw---alias-color-success-900))'
49
+ 50: 'hsl(var(--tw---alias-color-success-50) / <alpha-value>)',
50
+ 100: 'hsl(var(--tw---alias-color-success-100) / <alpha-value>)',
51
+ 200: 'hsl(var(--tw---alias-color-success-200) / <alpha-value>)',
52
+ 300: 'hsl(var(--tw---alias-color-success-300) / <alpha-value>)',
53
+ 400: 'hsl(var(--tw---alias-color-success-400) / <alpha-value>)',
54
+ 500: 'hsl(var(--tw---alias-color-success-500) / <alpha-value>)',
55
+ 600: 'hsl(var(--tw---alias-color-success-600) / <alpha-value>)',
56
+ 700: 'hsl(var(--tw---alias-color-success-700) / <alpha-value>)',
57
+ 800: 'hsl(var(--tw---alias-color-success-800) / <alpha-value>)',
58
+ 900: 'hsl(var(--tw---alias-color-success-900) / <alpha-value>)',
59
+ DEFAULT: 'hsl(var(--tw---alias-color-success-500) / <alpha-value>)'
52
60
  },
53
61
  neutral: {
54
- 1: 'hsl(var(--tw---alias-color-neutral-1))',
55
- 2: 'hsl(var(--tw---alias-color-neutral-2))',
56
- 3: 'hsl(var(--tw---alias-color-neutral-3))',
57
- 4: 'hsl(var(--tw---alias-color-neutral-4))',
58
- 5: 'hsl(var(--tw---alias-color-neutral-5))',
59
- 6: 'hsl(var(--tw---alias-color-neutral-6))',
60
- 7: 'hsl(var(--tw---alias-color-neutral-7))',
61
- 8: 'hsl(var(--tw---alias-color-neutral-8))',
62
- 9: 'hsl(var(--tw---alias-color-neutral-9))',
63
- 10: 'hsl(var(--tw---alias-color-neutral-10))',
64
- 11: 'hsl(var(--tw---alias-color-neutral-11))',
65
- 12: 'hsl(var(--tw---alias-color-neutral-12))',
66
- 13: 'hsl(var(--tw---alias-color-neutral-13))',
62
+ 1: 'hsl(var(--tw---alias-color-neutral-1) / <alpha-value>)',
63
+ 2: 'hsl(var(--tw---alias-color-neutral-2) / <alpha-value>)',
64
+ 3: 'hsl(var(--tw---alias-color-neutral-3) / <alpha-value>)',
65
+ 4: 'hsl(var(--tw---alias-color-neutral-4) / <alpha-value>)',
66
+ 5: 'hsl(var(--tw---alias-color-neutral-5) / <alpha-value>)',
67
+ 6: 'hsl(var(--tw---alias-color-neutral-6) / <alpha-value>)',
68
+ 7: 'hsl(var(--tw---alias-color-neutral-7) / <alpha-value>)',
69
+ 8: 'hsl(var(--tw---alias-color-neutral-8) / <alpha-value>)',
70
+ 9: 'hsl(var(--tw---alias-color-neutral-9) / <alpha-value>)',
71
+ 10: 'hsl(var(--tw---alias-color-neutral-10) / <alpha-value>)',
72
+ 11: 'hsl(var(--tw---alias-color-neutral-11) / <alpha-value>)',
73
+ 12: 'hsl(var(--tw---alias-color-neutral-12) / <alpha-value>)',
74
+ 13: 'hsl(var(--tw---alias-color-neutral-13) / <alpha-value>)',
67
75
  token: {
68
- 1: 'hsl(var(--tw---token-color-neutral-token-1))',
69
- 2: 'hsl(var(--tw---token-color-neutral-token-2))',
70
- 3: 'hsl(var(--tw---token-color-neutral-token-3))',
71
- 4: 'hsl(var(--tw---token-color-neutral-token-4))',
72
- 5: 'hsl(var(--tw---token-color-neutral-token-5))',
73
- 6: 'hsl(var(--tw---token-color-neutral-token-6))',
74
- 7: 'hsl(var(--tw---token-color-neutral-token-7))',
75
- 8: 'hsl(var(--tw---token-color-neutral-token-8))',
76
- 9: 'hsl(var(--tw---token-color-neutral-token-9))',
77
- 10: 'hsl(var(--tw---token-color-neutral-token-10))',
78
- 11: 'hsl(var(--tw---token-color-neutral-token-11))',
79
- 12: 'hsl(var(--tw---token-color-neutral-token-12))',
80
- 13: 'hsl(var(--tw---token-color-neutral-token-13))'
81
- }
76
+ 1: 'hsl(var(--tw---token-color-neutral-token-1) / <alpha-value>) ',
77
+ 2: 'hsl(var(--tw---token-color-neutral-token-2) / <alpha-value>) ',
78
+ 3: 'hsl(var(--tw---token-color-neutral-token-3) / <alpha-value>) ',
79
+ 4: 'hsl(var(--tw---token-color-neutral-token-4) / <alpha-value>) ',
80
+ 5: 'hsl(var(--tw---token-color-neutral-token-5) / <alpha-value>) ',
81
+ 6: 'hsl(var(--tw---token-color-neutral-token-6) / <alpha-value>) ',
82
+ 7: 'hsl(var(--tw---token-color-neutral-token-7) / <alpha-value>) ',
83
+ 8: 'hsl(var(--tw---token-color-neutral-token-8) / <alpha-value>) ',
84
+ 9: 'hsl(var(--tw---token-color-neutral-token-9) / <alpha-value>) ',
85
+ 10: 'hsl(var(--tw---token-color-neutral-token-10) / <alpha-value>) ',
86
+ 11: 'hsl(var(--tw---token-color-neutral-token-11) / <alpha-value>) ',
87
+ 12: 'hsl(var(--tw---token-color-neutral-token-12) / <alpha-value>) ',
88
+ 13: 'hsl(var(--tw---token-color-neutral-token-13) / <alpha-value>) '
89
+ },
90
+ DEFAULT: 'hsl(var(--tw---alias-color-neutral-7) / <alpha-value>)'
82
91
  },
83
92
  warning: {
84
- 50: 'hsl(var(--tw---alias-color-warning-50))',
85
- 100: 'hsl(var(--tw---alias-color-warning-100))',
86
- 200: 'hsl(var(--tw---alias-color-warning-200))',
87
- 300: 'hsl(var(--tw---alias-color-warning-300))',
88
- 400: 'hsl(var(--tw---alias-color-warning-400))',
89
- 500: 'hsl(var(--tw---alias-color-warning-500))',
90
- 600: 'hsl(var(--tw---alias-color-warning-600))',
91
- 700: 'hsl(var(--tw---alias-color-warning-700))',
92
- 800: 'hsl(var(--tw---alias-color-warning-800))',
93
- 900: 'hsl(var(--tw---alias-color-warning-900))'
93
+ 50: 'hsl(var(--tw---alias-color-warning-50) / <alpha-value>)',
94
+ 100: 'hsl(var(--tw---alias-color-warning-100) / <alpha-value>)',
95
+ 200: 'hsl(var(--tw---alias-color-warning-200) / <alpha-value>)',
96
+ 300: 'hsl(var(--tw---alias-color-warning-300) / <alpha-value>)',
97
+ 400: 'hsl(var(--tw---alias-color-warning-400) / <alpha-value>)',
98
+ 500: 'hsl(var(--tw---alias-color-warning-500) / <alpha-value>)',
99
+ 600: 'hsl(var(--tw---alias-color-warning-600) / <alpha-value>)',
100
+ 700: 'hsl(var(--tw---alias-color-warning-700) / <alpha-value>)',
101
+ 800: 'hsl(var(--tw---alias-color-warning-800) / <alpha-value>)',
102
+ 900: 'hsl(var(--tw---alias-color-warning-900) / <alpha-value>)',
103
+ DEFAULT: 'hsl(var(--tw---alias-color-warning-500) / <alpha-value>)'
94
104
  },
95
105
  information: {
96
- 50: 'hsl(var(--tw---alias-color-information-50))',
97
- 100: 'hsl(var(--tw---alias-color-information-100))',
98
- 200: 'hsl(var(--tw---alias-color-information-200))',
99
- 300: 'hsl(var(--tw---alias-color-information-300))',
100
- 400: 'hsl(var(--tw---alias-color-information-400))',
101
- 500: 'hsl(var(--tw---alias-color-information-500))',
102
- 600: 'hsl(var(--tw---alias-color-information-600))',
103
- 700: 'hsl(var(--tw---alias-color-information-700))',
104
- 800: 'hsl(var(--tw---alias-color-information-800))',
105
- 900: 'hsl(var(--tw---alias-color-information-900))'
106
+ 50: 'hsl(var(--tw---alias-color-information-50) / <alpha-value>)',
107
+ 100: 'hsl(var(--tw---alias-color-information-100) / <alpha-value>)',
108
+ 200: 'hsl(var(--tw---alias-color-information-200) / <alpha-value>)',
109
+ 300: 'hsl(var(--tw---alias-color-information-300) / <alpha-value>)',
110
+ 400: 'hsl(var(--tw---alias-color-information-400) / <alpha-value>)',
111
+ 500: 'hsl(var(--tw---alias-color-information-500) / <alpha-value>)',
112
+ 600: 'hsl(var(--tw---alias-color-information-600) / <alpha-value>)',
113
+ 700: 'hsl(var(--tw---alias-color-information-700) / <alpha-value>)',
114
+ 800: 'hsl(var(--tw---alias-color-information-800) / <alpha-value>)',
115
+ 900: 'hsl(var(--tw---alias-color-information-900) / <alpha-value>)',
116
+ DEFAULT: 'hsl(var(--tw---alias-color-information-500) / <alpha-value>)'
106
117
  },
107
118
  secondary: {
108
- 50: 'hsl(var(--tw---alias-color-secondary-50))',
109
- 100: 'hsl(var(--tw---alias-color-secondary-100))',
110
- 200: 'hsl(var(--tw---alias-color-secondary-200))',
111
- 300: 'hsl(var(--tw---alias-color-secondary-300))',
112
- 400: 'hsl(var(--tw---alias-color-secondary-400))',
113
- 500: 'hsl(var(--tw---alias-color-secondary-500))',
114
- 600: 'hsl(var(--tw---alias-color-secondary-600))',
115
- 700: 'hsl(var(--tw---alias-color-secondary-700))',
116
- 800: 'hsl(var(--tw---alias-color-secondary-800))',
117
- 900: 'hsl(var(--tw---alias-color-secondary-900))'
119
+ 50: 'hsl(var(--tw---alias-color-secondary-50) / <alpha-value>)',
120
+ 100: 'hsl(var(--tw---alias-color-secondary-100) / <alpha-value>)',
121
+ 200: 'hsl(var(--tw---alias-color-secondary-200) / <alpha-value>)',
122
+ 300: 'hsl(var(--tw---alias-color-secondary-300) / <alpha-value>)',
123
+ 400: 'hsl(var(--tw---alias-color-secondary-400) / <alpha-value>)',
124
+ 500: 'hsl(var(--tw---alias-color-secondary-500) / <alpha-value>)',
125
+ 600: 'hsl(var(--tw---alias-color-secondary-600) / <alpha-value>)',
126
+ 700: 'hsl(var(--tw---alias-color-secondary-700) / <alpha-value>)',
127
+ 800: 'hsl(var(--tw---alias-color-secondary-800) / <alpha-value>)',
128
+ 900: 'hsl(var(--tw---alias-color-secondary-900) / <alpha-value>)',
129
+ DEFAULT: 'hsl(var(--tw---alias-color-secondary-500) / <alpha-value>)'
118
130
  },
119
131
  brand: {
120
- 500: 'hsl(var(--tw---alias-color-brand-500))',
132
+ 500: 'hsl(var(--tw---alias-color-brand-500) / <alpha-value>)',
121
133
  token: {
122
- 5: 'hsl(var(--tw---token-color-brand-token-5))'
123
- }
134
+ 5: 'hsl(var(--tw---token-color-brand-token-5) / <alpha-value>) '
135
+ },
136
+ DEFAULT: 'hsl(var(--tw---alias-color-brand-500) / <alpha-value>)'
124
137
  }
125
138
  },
126
139
  spacing: {
@@ -1,6 +1,11 @@
1
1
  export namespace theme {
2
2
  namespace extend {
3
3
  namespace colors {
4
+ let border: string;
5
+ let input: string;
6
+ let ring: string;
7
+ let background: string;
8
+ let foreground: string;
4
9
  let primary: {
5
10
  50: string;
6
11
  100: string;
@@ -24,6 +29,7 @@ export namespace theme {
24
29
  9: string;
25
30
  10: string;
26
31
  };
32
+ DEFAULT: string;
27
33
  };
28
34
  let error: {
29
35
  50: string;
@@ -36,6 +42,7 @@ export namespace theme {
36
42
  700: string;
37
43
  800: string;
38
44
  900: string;
45
+ DEFAULT: string;
39
46
  };
40
47
  let success: {
41
48
  50: string;
@@ -48,6 +55,7 @@ export namespace theme {
48
55
  700: string;
49
56
  800: string;
50
57
  900: string;
58
+ DEFAULT: string;
51
59
  };
52
60
  let neutral: {
53
61
  1: string;
@@ -78,6 +86,7 @@ export namespace theme {
78
86
  12: string;
79
87
  13: string;
80
88
  };
89
+ DEFAULT: string;
81
90
  };
82
91
  let warning: {
83
92
  50: string;
@@ -90,6 +99,7 @@ export namespace theme {
90
99
  700: string;
91
100
  800: string;
92
101
  900: string;
102
+ DEFAULT: string;
93
103
  };
94
104
  let information: {
95
105
  50: string;
@@ -102,6 +112,7 @@ export namespace theme {
102
112
  700: string;
103
113
  800: string;
104
114
  900: string;
115
+ DEFAULT: string;
105
116
  };
106
117
  let secondary: {
107
118
  50: string;
@@ -114,12 +125,14 @@ export namespace theme {
114
125
  700: string;
115
126
  800: string;
116
127
  900: string;
128
+ DEFAULT: string;
117
129
  };
118
130
  let brand: {
119
131
  500: string;
120
132
  token: {
121
133
  5: string;
122
134
  };
135
+ DEFAULT: string;
123
136
  };
124
137
  }
125
138
  let spacing: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tera-system-ui",
3
- "version": "0.0.73",
3
+ "version": "0.0.80",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "npm run customPrepublish && npm run generate-index && vite build && npm run package && npm run postpublish",
@@ -102,7 +102,7 @@
102
102
  "@inlang/paraglide-sveltekit": "0.11.5",
103
103
  "@tabler/icons-svelte": "^3.22.0",
104
104
  "autoprefixer": "^10.4.20",
105
- "bits-ui": "^1.0.0-next.65",
105
+ "bits-ui": "^1.0.0-next.74",
106
106
  "clsx": "^2.1.1",
107
107
  "tailwind-variants": "^0.3.0"
108
108
  }