@medway-ui/core 0.1.9 → 0.2.1

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 (10) hide show
  1. package/dist/assets/css/tokens.css +6 -14
  2. package/dist/assets/js/tokens.ts +197 -0
  3. package/dist/index.d.mts +9 -3
  4. package/dist/index.d.ts +9 -3
  5. package/dist/index.js +2 -2
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +2 -2
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +14 -9
  10. package/dist/assets/css/globals.css +0 -35
package/dist/assets/css/tokens.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @custom-variant dark (&:is(.dark *));
2
2
  @variant dark (&:where(.dark *));
3
3
 
4
- @theme {
4
+ :root {
5
5
  /* === Base colors === */
6
6
  --color-background: #ffffff;
7
7
  --color-foreground: #212631;
@@ -10,8 +10,6 @@
10
10
  --color-border: #e7e9ef;
11
11
 
12
12
  /* === Utility colors === */
13
- --color-black: #000000;
14
- --color-white: #ffffff;
15
13
  --color-gray-950: #080a0c;
16
14
  --color-gray-900: #0c0e12;
17
15
  --color-gray-850: #101318;
@@ -139,21 +137,15 @@
139
137
  --radius-pill: 320px;
140
138
  --radius-circular: 1600px;
141
139
 
142
- /* === Breakpoint utility === */
143
- --breakpoint-tv: 1920px;
144
- --breakpoint-desktop: 1024px;
145
- --breakpoint-tablet: 600px;
146
- --breakpoint-mobile: 320px;
147
- --breakpoint-sm: 320px;
148
- --breakpoint-md: 600px;
149
- --breakpoint-lg: 1024px;
150
- --breakpoint-xl: 1280px;
151
- --breakpoint-2xl: 1920px;
152
-
153
140
  /* === Container utility === */
154
141
  --container-desktop: 1288px;
155
142
  --container-tablet: 768px;
156
143
  --container-mobile: 480px;
144
+
145
+ /* === Sidebar utility === */
146
+ --sidebar-width: 256px;
147
+ --sidebar-width-mobile: 256px;
148
+ --sidebar-width-icon: 72px;
157
149
  }
158
150
 
159
151
  .dark {
package/dist/assets/js/tokens.ts ADDED
@@ -0,0 +1,197 @@
1
+ export const content = [
2
+ "./pages/**/*.{ts,tsx}",
3
+ "./components/**/*.{ts,tsx}",
4
+ "./app/**/*.{ts,tsx}",
5
+ "./src/**/*.{ts,tsx}",
6
+ "./node_modules/@medway-ui/core/**/*.{js,ts,jsx,tsx}",
7
+ ];
8
+
9
+ export const colors = {
10
+ background: "var(--color-background)",
11
+ foreground: "var(--color-foreground)",
12
+ ring: "var(--color-ring)",
13
+ input: "var(--color-input)",
14
+ border: "var(--color-border)",
15
+ gray: {
16
+ 950: "var(--color-gray-950)",
17
+ 900: "var(--color-gray-900)",
18
+ 850: "var(--color-gray-850)",
19
+ 800: "var(--color-gray-800)",
20
+ 700: "var(--color-gray-700)",
21
+ 600: "var(--color-gray-600)",
22
+ 500: "var(--color-gray-500)",
23
+ 400: "var(--color-gray-400)",
24
+ 300: "var(--color-gray-300)",
25
+ 200: "var(--color-gray-200)",
26
+ 150: "var(--color-gray-150)",
27
+ 100: "var(--color-gray-100)",
28
+ 50: "var(--color-gray-50)",
29
+ },
30
+ green: {
31
+ "darken-2": "var(--color-green-darken-2)",
32
+ "darken-1": "var(--color-green-darken-1)",
33
+ accent: "var(--color-green-accent)",
34
+ "accent-80": "var(--color-green-accent-80)",
35
+ "accent-48": "var(--color-green-accent-48)",
36
+ "accent-24": "var(--color-green-accent-24)",
37
+ "accent-16": "var(--color-green-accent-16)",
38
+ "accent-8": "var(--color-green-accent-8)",
39
+ "accent-4": "var(--color-green-accent-4)",
40
+ },
41
+ red: {
42
+ "darken-2": "var(--color-red-darken-2)",
43
+ "darken-1": "var(--color-red-darken-1)",
44
+ accent: "var(--color-red-accent)",
45
+ "accent-80": "var(--color-red-accent-80)",
46
+ "accent-48": "var(--color-red-accent-48)",
47
+ "accent-24": "var(--color-red-accent-24)",
48
+ "accent-16": "var(--color-red-accent-16)",
49
+ "accent-8": "var(--color-red-accent-8)",
50
+ "accent-4": "var(--color-red-accent-4)",
51
+ },
52
+ yellow: {
53
+ "darken-2": "var(--color-yellow-darken-2)",
54
+ "darken-1": "var(--color-yellow-darken-1)",
55
+ accent: "var(--color-yellow-accent)",
56
+ "accent-80": "var(--color-yellow-accent-80)",
57
+ "accent-48": "var(--color-yellow-accent-48)",
58
+ "accent-24": "var(--color-yellow-accent-24)",
59
+ "accent-16": "var(--color-yellow-accent-16)",
60
+ "accent-8": "var(--color-yellow-accent-8)",
61
+ "accent-4": "var(--color-yellow-accent-4)",
62
+ },
63
+ primary: {
64
+ DEFAULT: "var(--color-primary)",
65
+ "darken-2": "var(--color-primary-darken-2)",
66
+ "darken-1": "var(--color-primary-darken-1)",
67
+ "accent-80": "var(--color-primary-accent-80)",
68
+ "accent-48": "var(--color-primary-accent-48)",
69
+ "accent-24": "var(--color-primary-accent-24)",
70
+ "accent-16": "var(--color-primary-accent-16)",
71
+ "accent-8": "var(--color-primary-accent-8)",
72
+ "accent-4": "var(--color-primary-accent-4)",
73
+ },
74
+ secondary: {
75
+ DEFAULT: "var(--color-secondary)",
76
+ "darken-2": "var(--color-secondary-darken-2)",
77
+ "darken-1": "var(--color-secondary-darken-1)",
78
+ "accent-80": "var(--color-secondary-accent-80)",
79
+ "accent-48": "var(--color-secondary-accent-48)",
80
+ "accent-24": "var(--color-secondary-accent-24)",
81
+ "accent-16": "var(--color-secondary-accent-16)",
82
+ "accent-8": "var(--color-secondary-accent-8)",
83
+ "accent-4": "var(--color-secondary-accent-4)",
84
+ },
85
+ other: {
86
+ primary: {
87
+ "darken-2": "var(--color-other-primary-darken-2)",
88
+ "darken-1": "var(--color-other-primary-darken-1)",
89
+ accent: "var(--color-other-primary-accent)",
90
+ "accent-80": "var(--color-other-primary-accent-80)",
91
+ "accent-48": "var(--color-other-primary-accent-48)",
92
+ "accent-24": "var(--color-other-primary-accent-24)",
93
+ "accent-16": "var(--color-other-primary-accent-16)",
94
+ "accent-8": "var(--color-other-primary-accent-8)",
95
+ "accent-4": "var(--color-other-primary-accent-4)",
96
+ },
97
+ secondary: {
98
+ "darken-2": "var(--color-other-secondary-darken-2)",
99
+ "darken-1": "var(--color-other-secondary-darken-1)",
100
+ accent: "var(--color-other-secondary-accent)",
101
+ "accent-80": "var(--color-other-secondary-accent-80)",
102
+ "accent-48": "var(--color-other-secondary-accent-48)",
103
+ "accent-24": "var(--color-other-secondary-accent-24)",
104
+ "accent-16": "var(--color-other-secondary-accent-16)",
105
+ "accent-8": "var(--color-other-secondary-accent-8)",
106
+ "accent-4": "var(--color-other-secondary-accent-4)",
107
+ },
108
+ },
109
+ };
110
+
111
+ export const fontFamily = {
112
+ sans: "var(--font-sans)",
113
+ };
114
+
115
+ export const fontSize = {
116
+ xxs: "var(--text-xxs)",
117
+ xs: "var(--text-xs)",
118
+ sm: "var(--text-sm)",
119
+ base: "var(--text-base)",
120
+ lg: "var(--text-lg)",
121
+ xl: "var(--text-xl)",
122
+ "2xl": "var(--text-2xl)",
123
+ "3xl": "var(--text-3xl)",
124
+ "4xl": "var(--text-4xl)",
125
+ "5xl": "var(--text-5xl)",
126
+ "6xl": "var(--text-6xl)",
127
+ "7xl": "var(--text-7xl)",
128
+ "8xl": "var(--text-8xl)",
129
+ "9xl": "var(--text-9xl)",
130
+ };
131
+
132
+ export const lineHeight = {
133
+ xxs: "var(--leading-xxs)",
134
+ xs: "var(--leading-xs)",
135
+ sm: "var(--leading-sm)",
136
+ md: "var(--leading-md)",
137
+ lg: "var(--leading-lg)",
138
+ "2xl": "var(--leading-2xl)",
139
+ "3xl": "var(--leading-3xl)",
140
+ "4xl": "var(--leading-4xl)",
141
+ "5xl": "var(--leading-5xl)",
142
+ "6xl": "var(--leading-6xl)",
143
+ "7xl": "var(--leading-7xl)",
144
+ "8xl": "var(--leading-8xl)",
145
+ "9xl": "var(--leading-9xl)",
146
+ };
147
+
148
+ export const borderRadius = {
149
+ none: "var(--radius-none)",
150
+ sm: "var(--radius-sm)",
151
+ md: "var(--radius-md)",
152
+ lg: "var(--radius-lg)",
153
+ pill: "var(--radius-pill)",
154
+ circular: "var(--radius-circular)",
155
+ };
156
+
157
+ export const container = {
158
+ desktop: "var(--container-desktop)",
159
+ tablet: "var(--container-tablet)",
160
+ mobile: "var(--container-mobile)",
161
+ };
162
+
163
+ export const keyframes = {
164
+ "accordion-down": {
165
+ from: {
166
+ height: "0",
167
+ },
168
+ to: {
169
+ height: "var(--radix-accordion-content-height)",
170
+ },
171
+ },
172
+ "accordion-up": {
173
+ from: {
174
+ height: "var(--radix-accordion-content-height)",
175
+ },
176
+ to: {
177
+ height: "0",
178
+ },
179
+ },
180
+ };
181
+
182
+ export const animation = {
183
+ "accordion-down": "accordion-down 0.2s ease-out",
184
+ "accordion-up": "accordion-up 0.2s ease-out",
185
+ };
186
+
187
+ export const screens = {
188
+ tv: "1920px",
189
+ desktop: "1024px",
190
+ tablet: "600px",
191
+ mobile: "320px",
192
+ sm: "320px",
193
+ md: "600px",
194
+ lg: "1024px",
195
+ xl: "1280px",
196
+ "2xl": "1920px",
197
+ };
package/dist/index.d.mts CHANGED
@@ -6,6 +6,7 @@ import { VariantProps } from 'class-variance-authority';
6
6
  import * as SeparatorPrimitive from '@radix-ui/react-separator';
7
7
  import * as SheetPrimitive from '@radix-ui/react-dialog';
8
8
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
9
+ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
9
10
 
10
11
  declare function Avatar({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Root>): react_jsx_runtime.JSX.Element;
11
12
  declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
@@ -18,7 +19,7 @@ interface ButtonProps extends React$1.ComponentProps<"button">, VariantProps<typ
18
19
  loading?: boolean;
19
20
  }
20
21
  declare const buttonVariants: (props?: ({
21
- variant?: "primary" | "secondary" | "tertiary" | "outline" | "error" | "error-outline" | "error-tertiary" | null | undefined;
22
+ variant?: "primary" | "secondary" | "tertiary" | "outline" | "error" | "error-outline" | "error-tertiary" | "gradient-primary" | "gradient-secondary" | null | undefined;
22
23
  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
23
24
  } & class_variance_authority_types.ClassProp) | undefined) => string;
24
25
  declare function Button({ className, variant, size, asChild, iconRight, iconLeft, loading, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
@@ -49,6 +50,10 @@ declare function Skeleton({ className, ...props }: React.ComponentProps<"div">):
49
50
  declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
50
51
  declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
51
52
 
53
+ declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): react_jsx_runtime.JSX.Element;
54
+ declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): react_jsx_runtime.JSX.Element;
55
+ declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): react_jsx_runtime.JSX.Element;
56
+
52
57
  type SidebarContextProps = {
53
58
  state: "expanded" | "collapsed";
54
59
  open: boolean;
@@ -59,7 +64,7 @@ type SidebarContextProps = {
59
64
  toggleSidebar: () => void;
60
65
  };
61
66
  declare function useSidebar(): SidebarContextProps;
62
- declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React$1.ComponentProps<"div"> & {
67
+ declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, children, ...props }: React$1.ComponentProps<"div"> & {
63
68
  defaultOpen?: boolean;
64
69
  open?: boolean;
65
70
  onOpenChange?: (open: boolean) => void;
@@ -112,10 +117,11 @@ declare function SidebarMenuItemTitle({ icon, title, }: {
112
117
  icon?: React$1.ReactNode;
113
118
  title: string;
114
119
  }): react_jsx_runtime.JSX.Element;
120
+ declare function SidebarMenuItemIcon(): react_jsx_runtime.JSX.Element;
115
121
  declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React$1.ComponentProps<"a"> & {
116
122
  asChild?: boolean;
117
123
  size?: "sm" | "md";
118
124
  isActive?: boolean;
119
125
  }): react_jsx_runtime.JSX.Element;
120
126
 
121
- export { Avatar, AvatarFallback, AvatarImage, Button, Input, Loading, Logo, LogoShort, Separator, Sheet, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuItemTitle, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Tooltip, buttonVariants, useSidebar };
127
+ export { Avatar, AvatarFallback, AvatarImage, Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Input, Loading, Logo, LogoShort, Separator, Sheet, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuItemIcon, SidebarMenuItemTitle, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Tooltip, buttonVariants, useSidebar };
package/dist/index.d.ts CHANGED
@@ -6,6 +6,7 @@ import { VariantProps } from 'class-variance-authority';
6
6
  import * as SeparatorPrimitive from '@radix-ui/react-separator';
7
7
  import * as SheetPrimitive from '@radix-ui/react-dialog';
8
8
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
9
+ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
9
10
 
10
11
  declare function Avatar({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Root>): react_jsx_runtime.JSX.Element;
11
12
  declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
@@ -18,7 +19,7 @@ interface ButtonProps extends React$1.ComponentProps<"button">, VariantProps<typ
18
19
  loading?: boolean;
19
20
  }
20
21
  declare const buttonVariants: (props?: ({
21
- variant?: "primary" | "secondary" | "tertiary" | "outline" | "error" | "error-outline" | "error-tertiary" | null | undefined;
22
+ variant?: "primary" | "secondary" | "tertiary" | "outline" | "error" | "error-outline" | "error-tertiary" | "gradient-primary" | "gradient-secondary" | null | undefined;
22
23
  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
23
24
  } & class_variance_authority_types.ClassProp) | undefined) => string;
24
25
  declare function Button({ className, variant, size, asChild, iconRight, iconLeft, loading, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
@@ -49,6 +50,10 @@ declare function Skeleton({ className, ...props }: React.ComponentProps<"div">):
49
50
  declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
50
51
  declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
51
52
 
53
+ declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): react_jsx_runtime.JSX.Element;
54
+ declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): react_jsx_runtime.JSX.Element;
55
+ declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): react_jsx_runtime.JSX.Element;
56
+
52
57
  type SidebarContextProps = {
53
58
  state: "expanded" | "collapsed";
54
59
  open: boolean;
@@ -59,7 +64,7 @@ type SidebarContextProps = {
59
64
  toggleSidebar: () => void;
60
65
  };
61
66
  declare function useSidebar(): SidebarContextProps;
62
- declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React$1.ComponentProps<"div"> & {
67
+ declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, children, ...props }: React$1.ComponentProps<"div"> & {
63
68
  defaultOpen?: boolean;
64
69
  open?: boolean;
65
70
  onOpenChange?: (open: boolean) => void;
@@ -112,10 +117,11 @@ declare function SidebarMenuItemTitle({ icon, title, }: {
112
117
  icon?: React$1.ReactNode;
113
118
  title: string;
114
119
  }): react_jsx_runtime.JSX.Element;
120
+ declare function SidebarMenuItemIcon(): react_jsx_runtime.JSX.Element;
115
121
  declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React$1.ComponentProps<"a"> & {
116
122
  asChild?: boolean;
117
123
  size?: "sm" | "md";
118
124
  isActive?: boolean;
119
125
  }): react_jsx_runtime.JSX.Element;
120
126
 
121
- export { Avatar, AvatarFallback, AvatarImage, Button, Input, Loading, Logo, LogoShort, Separator, Sheet, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuItemTitle, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Tooltip, buttonVariants, useSidebar };
127
+ export { Avatar, AvatarFallback, AvatarImage, Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Input, Loading, Logo, LogoShort, Separator, Sheet, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuItemIcon, SidebarMenuItemTitle, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Tooltip, buttonVariants, useSidebar };