@arvia-ui/react 0.1.0 → 0.2.0

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.
Files changed (5) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.d.mts +1 -5
  3. package/dist/index.mjs +1 -8
  4. package/dist/styles.css +18 -92
  5. package/package.json +4 -4
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Arvia HQ
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/dist/index.d.mts CHANGED
@@ -874,8 +874,4 @@ declare function ToastProvider({
874
874
  duration?: number;
875
875
  }): import("react").JSX.Element;
876
876
  //#endregion
877
- //#region src/arvia-theme.d.ts
878
- /** Sets the active Arvia theme mode on `<html>`, overriding the OS color scheme. */
879
- declare function setTheme(mode: string): void;
880
- //#endregion
881
- export { Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogProps, type DialogTriggerProps, Divider, type DividerProps, Heading, type HeadingProps, Input, type InputProps, Link, type LinkProps, Menu, type MenuContentProps, type MenuItemProps, type MenuProps, type MenuTriggerProps, Popover, type PopoverContentProps, type PopoverProps, type PopoverTriggerProps, Progress, ProgressCircle, type ProgressCircleProps, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectOptionProps, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, type TabPanelProps, type TabProps, Tabs, type TabsListProps, type TabsProps, Text, type TextProps, type ToastOptions, ToastProvider, type ToastTone, Tooltip, type TooltipProps, setTheme, useToast };
877
+ export { Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogProps, type DialogTriggerProps, Divider, type DividerProps, Heading, type HeadingProps, Input, type InputProps, Link, type LinkProps, Menu, type MenuContentProps, type MenuItemProps, type MenuProps, type MenuTriggerProps, Popover, type PopoverContentProps, type PopoverProps, type PopoverTriggerProps, Progress, ProgressCircle, type ProgressCircleProps, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectOptionProps, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, type TabPanelProps, type TabProps, Tabs, type TabsListProps, type TabsProps, Text, type TextProps, type ToastOptions, ToastProvider, type ToastTone, Tooltip, type TooltipProps, useToast };
package/dist/index.mjs CHANGED
@@ -4207,11 +4207,4 @@ function ToastProvider({ children, duration = 5e3 }) {
4207
4207
  });
4208
4208
  }
4209
4209
  //#endregion
4210
- //#region src/arvia-theme.ts
4211
- const THEME_ATTR = "data-arvia-theme";
4212
- /** Sets the active Arvia theme mode on `<html>`, overriding the OS color scheme. */
4213
- function setTheme(mode) {
4214
- document.documentElement.setAttribute(THEME_ATTR, mode);
4215
- }
4216
- //#endregion
4217
- export { Accordion, Alert, Avatar, Badge, Box, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, Dialog, Divider, Heading, Input, Link, Menu, Popover, Progress, ProgressCircle, Radio, RadioGroup, Select, Skeleton, Slider, Spinner, Stack, Switch, Tabs, Text, ToastProvider, Tooltip, setTheme, useToast };
4210
+ export { Accordion, Alert, Avatar, Badge, Box, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, Dialog, Divider, Heading, Input, Link, Menu, Popover, Progress, ProgressCircle, Radio, RadioGroup, Select, Skeleton, Slider, Spinner, Stack, Switch, Tabs, Text, ToastProvider, Tooltip, useToast };
package/dist/styles.css CHANGED
@@ -1,24 +1,25 @@
1
1
  :root {
2
- --arvia-color-primary: #0f766e;
3
- --arvia-color-primaryHover: #0d9488;
4
- --arvia-color-primarySubtle: #ccfbf1;
2
+ color-scheme: light dark;
3
+ --arvia-color-primary: light-dark(#0f766e, #2dd4bf);
4
+ --arvia-color-primaryHover: light-dark(#0d9488, #5eead4);
5
+ --arvia-color-primarySubtle: light-dark(#ccfbf1, #134e4a);
5
6
  --arvia-color-accent: #d97706;
6
7
  --arvia-color-danger: #dc2626;
7
8
  --arvia-color-dangerHover: #b91c1c;
8
- --arvia-color-dangerSubtle: #fee2e2;
9
+ --arvia-color-dangerSubtle: light-dark(#fee2e2, #450a0a);
9
10
  --arvia-color-success: #16a34a;
10
- --arvia-color-successSubtle: #dcfce7;
11
+ --arvia-color-successSubtle: light-dark(#dcfce7, #14532d);
11
12
  --arvia-color-warning: #ca8a04;
12
- --arvia-color-warningSubtle: #fef9c3;
13
- --arvia-color-text: #1c1917;
14
- --arvia-color-muted: #78716c;
15
- --arvia-color-subtle: #a8a29e;
16
- --arvia-color-surface: #ffffff;
17
- --arvia-color-surfaceRaised: #fafaf9;
18
- --arvia-color-background: #f5f5f4;
19
- --arvia-color-border: #e7e5e4;
20
- --arvia-color-borderStrong: #d6d3d1;
21
- --arvia-color-focus: #0f766e;
13
+ --arvia-color-warningSubtle: light-dark(#fef9c3, #422006);
14
+ --arvia-color-text: light-dark(#1c1917, #fafaf9);
15
+ --arvia-color-muted: light-dark(#78716c, #a8a29e);
16
+ --arvia-color-subtle: light-dark(#a8a29e, #78716c);
17
+ --arvia-color-surface: light-dark(#ffffff, #1c1917);
18
+ --arvia-color-surfaceRaised: light-dark(#fafaf9, #292524);
19
+ --arvia-color-background: light-dark(#f5f5f4, #0c0a09);
20
+ --arvia-color-border: light-dark(#e7e5e4, #292524);
21
+ --arvia-color-borderStrong: light-dark(#d6d3d1, #44403c);
22
+ --arvia-color-focus: light-dark(#0f766e, #2dd4bf);
22
23
  --arvia-space-1: 4px;
23
24
  --arvia-space-2: 8px;
24
25
  --arvia-space-3: 12px;
@@ -53,21 +54,6 @@
53
54
 
54
55
  @media (prefers-color-scheme: dark) {
55
56
  :root {
56
- --arvia-color-primary: #2dd4bf;
57
- --arvia-color-primaryHover: #5eead4;
58
- --arvia-color-primarySubtle: #134e4a;
59
- --arvia-color-dangerSubtle: #450a0a;
60
- --arvia-color-successSubtle: #14532d;
61
- --arvia-color-warningSubtle: #422006;
62
- --arvia-color-text: #fafaf9;
63
- --arvia-color-muted: #a8a29e;
64
- --arvia-color-subtle: #78716c;
65
- --arvia-color-surface: #1c1917;
66
- --arvia-color-surfaceRaised: #292524;
67
- --arvia-color-background: #0c0a09;
68
- --arvia-color-border: #292524;
69
- --arvia-color-borderStrong: #44403c;
70
- --arvia-color-focus: #2dd4bf;
71
57
  --arvia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
72
58
  --arvia-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.55);
73
59
  --arvia-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
@@ -75,74 +61,14 @@
75
61
  }
76
62
 
77
63
  [data-arvia-theme="light"] {
78
- --arvia-color-primary: #0f766e;
79
- --arvia-color-primaryHover: #0d9488;
80
- --arvia-color-primarySubtle: #ccfbf1;
81
- --arvia-color-accent: #d97706;
82
- --arvia-color-danger: #dc2626;
83
- --arvia-color-dangerHover: #b91c1c;
84
- --arvia-color-dangerSubtle: #fee2e2;
85
- --arvia-color-success: #16a34a;
86
- --arvia-color-successSubtle: #dcfce7;
87
- --arvia-color-warning: #ca8a04;
88
- --arvia-color-warningSubtle: #fef9c3;
89
- --arvia-color-text: #1c1917;
90
- --arvia-color-muted: #78716c;
91
- --arvia-color-subtle: #a8a29e;
92
- --arvia-color-surface: #ffffff;
93
- --arvia-color-surfaceRaised: #fafaf9;
94
- --arvia-color-background: #f5f5f4;
95
- --arvia-color-border: #e7e5e4;
96
- --arvia-color-borderStrong: #d6d3d1;
97
- --arvia-color-focus: #0f766e;
98
- --arvia-space-1: 4px;
99
- --arvia-space-2: 8px;
100
- --arvia-space-3: 12px;
101
- --arvia-space-4: 16px;
102
- --arvia-space-5: 20px;
103
- --arvia-space-6: 24px;
104
- --arvia-space-7: 32px;
105
- --arvia-space-8: 40px;
106
- --arvia-space-9: 48px;
107
- --arvia-radius-sm: 6px;
108
- --arvia-radius-md: 8px;
109
- --arvia-radius-lg: 12px;
110
- --arvia-radius-xl: 16px;
111
- --arvia-radius-full: 999px;
112
- --arvia-font-xs: 12px;
113
- --arvia-font-sm: 14px;
114
- --arvia-font-md: 16px;
115
- --arvia-font-lg: 18px;
116
- --arvia-font-xl: 20px;
117
- --arvia-font-2xl: 24px;
118
- --arvia-font-3xl: 30px;
119
- --arvia-font-4xl: 36px;
64
+ color-scheme: light;
120
65
  --arvia-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
121
66
  --arvia-shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08);
122
67
  --arvia-shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.12);
123
- --arvia-duration-fast: 120ms;
124
- --arvia-duration-normal: 200ms;
125
- --arvia-duration-slow: 320ms;
126
- --arvia-easing-default: ease;
127
- --arvia-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
128
68
  }
129
69
 
130
70
  [data-arvia-theme="dark"] {
131
- --arvia-color-primary: #2dd4bf;
132
- --arvia-color-primaryHover: #5eead4;
133
- --arvia-color-primarySubtle: #134e4a;
134
- --arvia-color-dangerSubtle: #450a0a;
135
- --arvia-color-successSubtle: #14532d;
136
- --arvia-color-warningSubtle: #422006;
137
- --arvia-color-text: #fafaf9;
138
- --arvia-color-muted: #a8a29e;
139
- --arvia-color-subtle: #78716c;
140
- --arvia-color-surface: #1c1917;
141
- --arvia-color-surfaceRaised: #292524;
142
- --arvia-color-background: #0c0a09;
143
- --arvia-color-border: #292524;
144
- --arvia-color-borderStrong: #44403c;
145
- --arvia-color-focus: #2dd4bf;
71
+ color-scheme: dark;
146
72
  --arvia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
147
73
  --arvia-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.55);
148
74
  --arvia-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arvia-ui/react",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Beautiful, crafted React components built on Arvia.",
5
5
  "homepage": "https://github.com/arviahq/arvia-ui#readme",
6
6
  "bugs": {
@@ -31,8 +31,8 @@
31
31
  "access": "public"
32
32
  },
33
33
  "devDependencies": {
34
- "@arviahq/compiler": "^0.6.1",
35
- "@arviahq/vite-plugin-react": "^0.6.0",
34
+ "@arviahq/compiler": "^0.7.0",
35
+ "@arviahq/vite-plugin-react": "^0.7.0",
36
36
  "@storybook/react": "^9.0.0",
37
37
  "@storybook/react-vite": "^9.0.0",
38
38
  "@types/react": "^19.2.0",
@@ -44,7 +44,7 @@
44
44
  "tsdown": "^0.22.2",
45
45
  "typescript": "^5.8.3",
46
46
  "vite": "^7.3.0",
47
- "@arvia-ui/core-styles": "0.1.0"
47
+ "@arvia-ui/core-styles": "0.2.0"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "react": ">=18.0.0",