@noya-app/noya-designsystem 0.1.39 → 0.1.41

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 (50) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +16 -0
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.mts +419 -323
  5. package/dist/index.d.ts +419 -323
  6. package/dist/index.js +6583 -8325
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +5721 -7468
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +5 -5
  11. package/src/components/ActivityIndicator.tsx +13 -4
  12. package/src/components/AnimatePresence.tsx +261 -0
  13. package/src/components/Avatar.tsx +202 -80
  14. package/src/components/Button.tsx +10 -6
  15. package/src/components/Checkbox.tsx +7 -2
  16. package/src/components/Chip.tsx +88 -132
  17. package/src/components/{InputFieldWithCompletions.tsx → Combobox.tsx} +10 -3
  18. package/src/components/ContextMenu.tsx +9 -5
  19. package/src/components/Dialog.tsx +20 -23
  20. package/src/components/Divider.tsx +15 -7
  21. package/src/components/DraggableMenuButton.tsx +9 -5
  22. package/src/components/DropdownMenu.tsx +8 -5
  23. package/src/components/FillInputField.tsx +5 -1
  24. package/src/components/FillPreviewBackground.tsx +1 -5
  25. package/src/components/GridView.tsx +71 -46
  26. package/src/components/InputField.tsx +140 -75
  27. package/src/components/InspectorPrimitives.tsx +17 -11
  28. package/src/components/Label.tsx +5 -1
  29. package/src/components/ListView.tsx +28 -15
  30. package/src/components/Progress.tsx +10 -7
  31. package/src/components/SelectMenu.tsx +20 -8
  32. package/src/components/Slider.tsx +104 -10
  33. package/src/components/Sortable.tsx +3 -3
  34. package/src/components/Switch.tsx +19 -2
  35. package/src/components/Text.tsx +5 -1
  36. package/src/components/TextArea.tsx +5 -1
  37. package/src/components/TreeView.tsx +4 -10
  38. package/src/components/UserPointer.tsx +170 -0
  39. package/src/components/WorkspaceLayout.tsx +5 -0
  40. package/src/components/internal/Menu.tsx +14 -5
  41. package/src/components/internal/TextInput.tsx +13 -0
  42. package/src/contexts/DialogContext.tsx +30 -18
  43. package/src/hooks/useTheme.ts +50 -0
  44. package/src/index.css +19 -16
  45. package/src/index.tsx +14 -26
  46. package/src/utils/classNames.ts +5 -0
  47. package/src/utils/colorFromString.ts +44 -0
  48. package/tailwind.config.ts +17 -14
  49. package/src/hooks/useDarkMode.ts +0 -14
  50. package/src/utils/tailwind.ts +0 -9
package/tailwind.config.ts CHANGED
@@ -44,7 +44,7 @@ const config = {
44
44
  "popover-divider": "var(--popover-divider)",
45
45
  "listview-raised-background": "var(--listview-raised-background)",
46
46
  "listview-editing-background": "var(--listview-editing-background)",
47
- "slider-background": "var(--slider-background)",
47
+ "slider-thumb-background": "var(--slider-thumb-background)",
48
48
  "slider-border": "var(--slider-border)",
49
49
  "radio-group-background": "var(--radio-group-background)",
50
50
  mask: "var(--mask)",
@@ -74,6 +74,7 @@ const config = {
74
74
  "chip-secondary-shadow": "var(--chip-secondary-shadow)",
75
75
  "chip-error-shadow": "var(--chip-error-shadow)",
76
76
  "chip-default-shadow": "var(--chip-default-shadow)",
77
+ "floating-button": "var(--floating-button)",
77
78
  },
78
79
  fontFamily: {
79
80
  sans: [
@@ -95,79 +96,79 @@ const config = {
95
96
  // old: typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; // Major third
96
97
  fontSize: {
97
98
  title: [
98
- "3.052rem",
99
+ "3.052rem", // 48.83px
99
100
  {
100
101
  lineHeight: "1.4",
101
102
  letterSpacing: "-0.05em",
102
103
  },
103
104
  ],
104
105
  subtitle: [
105
- "1.563rem",
106
+ "1.563rem", // 25px
106
107
  {
107
108
  lineHeight: "1.75",
108
109
  letterSpacing: "-0.05em",
109
110
  },
110
111
  ],
111
112
  heading1: [
112
- "1.953rem",
113
+ "1.953rem", // 31.25px
113
114
  {
114
115
  lineHeight: "1.6",
115
116
  letterSpacing: "-0.025em",
116
117
  },
117
118
  ],
118
119
  heading2: [
119
- "1.563rem",
120
+ "1.563rem", // 25px
120
121
  {
121
122
  lineHeight: "1.5",
122
123
  letterSpacing: "-0.025em",
123
124
  },
124
125
  ],
125
126
  heading3: [
126
- "1.25rem",
127
+ "1.25rem", // 20px
127
128
  {
128
129
  lineHeight: "1.4",
129
130
  letterSpacing: "-0.025em",
130
131
  },
131
132
  ],
132
133
  heading4: [
133
- "1rem",
134
+ "1rem", // 16px
134
135
  {
135
136
  lineHeight: "1.4",
136
137
  },
137
138
  ],
138
139
  heading5: [
139
- "0.85rem",
140
+ "0.85rem", // 13.6px
140
141
  {
141
142
  lineHeight: "1.4",
142
143
  },
143
144
  ],
144
145
  body: [
145
- "1",
146
+ "1", // 16px (1 = 1rem)
146
147
  {
147
148
  lineHeight: "1.4",
148
149
  },
149
150
  ],
150
151
  small: [
151
- "1",
152
+ "1", // 16px (1 = 1rem)
152
153
  {
153
154
  lineHeight: "19px",
154
155
  },
155
156
  ],
156
157
  code: [
157
- "90%",
158
+ "90%", // 14.4px
158
159
  {
159
160
  lineHeight: "1.5",
160
161
  },
161
162
  ],
162
163
  button: [
163
- "0.8rem",
164
+ "0.8rem", // 12.8px
164
165
  {
165
166
  lineHeight: "1.4",
166
167
  letterSpacing: "-0.2px",
167
168
  },
168
169
  ],
169
170
  label: [
170
- "0.62rem",
171
+ "0.62rem", // 9.92px
171
172
  {
172
173
  lineHeight: "19px",
173
174
  letterSpacing: "-0.3px",
@@ -211,7 +212,8 @@ const config = {
211
212
  zIndex: {
212
213
  interactable: "var(--interactable-z-index)",
213
214
  label: "var(--label-z-index)",
214
- }
215
+ menu: "var(--menu-z-index)",
216
+ },
215
217
  },
216
218
  },
217
219
  safelist: [
@@ -231,6 +233,7 @@ const config = {
231
233
  "border-gray-200",
232
234
  "gap-1.5",
233
235
  "gap-toolbar-separator",
236
+ "-mr-1",
234
237
  ],
235
238
  } satisfies Config;
236
239
 
package/src/hooks/useDarkMode.ts DELETED
@@ -1,14 +0,0 @@
1
- import { useState, useEffect } from "react"
2
-
3
- export function useDarkMode(elementRef: React.RefObject<HTMLElement>) {
4
- const [isDark, setIsDark] = useState(false)
5
-
6
- useEffect(() => {
7
- if (!elementRef.current) return;
8
-
9
- const hasDarkTheme = elementRef.current.closest('[data-theme="dark"]') !== null
10
- setIsDark(hasDarkTheme)
11
- }, [elementRef])
12
-
13
- return { isDark, elementRef }
14
- }
package/src/utils/tailwind.ts DELETED
@@ -1,9 +0,0 @@
1
- import { twMerge } from "tailwind-merge";
2
-
3
- /**
4
- * Utility for merging classes conditionally. Right side will override left side if there are any conflicts.
5
- * Usage: cn('bg-red-500 text-white', 'bg-blue-500') // Returns: 'text-white bg-blue-500'
6
- * @danger do not use this function to concatenate class names. Use it to merge classes conditionally.
7
- */
8
- export const cn = (...classes: (string | boolean | undefined | null)[]) =>
9
- twMerge(classes.filter(Boolean) as string[]);