@medway-ui/core 0.1.8 → 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 (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 +15 -4
  4. package/dist/index.d.ts +15 -4
  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
@@ -1,10 +1,16 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React$1 from 'react';
3
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
2
4
  import * as class_variance_authority_types from 'class-variance-authority/types';
3
5
  import { VariantProps } from 'class-variance-authority';
4
- import * as React$1 from 'react';
5
6
  import * as SeparatorPrimitive from '@radix-ui/react-separator';
6
7
  import * as SheetPrimitive from '@radix-ui/react-dialog';
7
8
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
9
+ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
10
+
11
+ declare function Avatar({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Root>): react_jsx_runtime.JSX.Element;
12
+ declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
13
+ declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
8
14
 
9
15
  interface ButtonProps extends React$1.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
10
16
  asChild?: boolean;
@@ -13,7 +19,7 @@ interface ButtonProps extends React$1.ComponentProps<"button">, VariantProps<typ
13
19
  loading?: boolean;
14
20
  }
15
21
  declare const buttonVariants: (props?: ({
16
- 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;
17
23
  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
18
24
  } & class_variance_authority_types.ClassProp) | undefined) => string;
19
25
  declare function Button({ className, variant, size, asChild, iconRight, iconLeft, loading, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
@@ -44,6 +50,10 @@ declare function Skeleton({ className, ...props }: React.ComponentProps<"div">):
44
50
  declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
45
51
  declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
46
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
+
47
57
  type SidebarContextProps = {
48
58
  state: "expanded" | "collapsed";
49
59
  open: boolean;
@@ -54,7 +64,7 @@ type SidebarContextProps = {
54
64
  toggleSidebar: () => void;
55
65
  };
56
66
  declare function useSidebar(): SidebarContextProps;
57
- 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"> & {
58
68
  defaultOpen?: boolean;
59
69
  open?: boolean;
60
70
  onOpenChange?: (open: boolean) => void;
@@ -107,10 +117,11 @@ declare function SidebarMenuItemTitle({ icon, title, }: {
107
117
  icon?: React$1.ReactNode;
108
118
  title: string;
109
119
  }): react_jsx_runtime.JSX.Element;
120
+ declare function SidebarMenuItemIcon(): react_jsx_runtime.JSX.Element;
110
121
  declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React$1.ComponentProps<"a"> & {
111
122
  asChild?: boolean;
112
123
  size?: "sm" | "md";
113
124
  isActive?: boolean;
114
125
  }): react_jsx_runtime.JSX.Element;
115
126
 
116
- export { 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
@@ -1,10 +1,16 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React$1 from 'react';
3
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
2
4
  import * as class_variance_authority_types from 'class-variance-authority/types';
3
5
  import { VariantProps } from 'class-variance-authority';
4
- import * as React$1 from 'react';
5
6
  import * as SeparatorPrimitive from '@radix-ui/react-separator';
6
7
  import * as SheetPrimitive from '@radix-ui/react-dialog';
7
8
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
9
+ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
10
+
11
+ declare function Avatar({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Root>): react_jsx_runtime.JSX.Element;
12
+ declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
13
+ declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
8
14
 
9
15
  interface ButtonProps extends React$1.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
10
16
  asChild?: boolean;
@@ -13,7 +19,7 @@ interface ButtonProps extends React$1.ComponentProps<"button">, VariantProps<typ
13
19
  loading?: boolean;
14
20
  }
15
21
  declare const buttonVariants: (props?: ({
16
- 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;
17
23
  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
18
24
  } & class_variance_authority_types.ClassProp) | undefined) => string;
19
25
  declare function Button({ className, variant, size, asChild, iconRight, iconLeft, loading, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
@@ -44,6 +50,10 @@ declare function Skeleton({ className, ...props }: React.ComponentProps<"div">):
44
50
  declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
45
51
  declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
46
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
+
47
57
  type SidebarContextProps = {
48
58
  state: "expanded" | "collapsed";
49
59
  open: boolean;
@@ -54,7 +64,7 @@ type SidebarContextProps = {
54
64
  toggleSidebar: () => void;
55
65
  };
56
66
  declare function useSidebar(): SidebarContextProps;
57
- 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"> & {
58
68
  defaultOpen?: boolean;
59
69
  open?: boolean;
60
70
  onOpenChange?: (open: boolean) => void;
@@ -107,10 +117,11 @@ declare function SidebarMenuItemTitle({ icon, title, }: {
107
117
  icon?: React$1.ReactNode;
108
118
  title: string;
109
119
  }): react_jsx_runtime.JSX.Element;
120
+ declare function SidebarMenuItemIcon(): react_jsx_runtime.JSX.Element;
110
121
  declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React$1.ComponentProps<"a"> & {
111
122
  asChild?: boolean;
112
123
  size?: "sm" | "md";
113
124
  isActive?: boolean;
114
125
  }): react_jsx_runtime.JSX.Element;
115
126
 
116
- export { 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 };