@heliosgraphics/ui 2.0.0-alpha.72 → 2.0.0-alpha.73

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 (9) hide show
  1. package/components/Dropdown/Dropdown.meta.ts +0 -5
  2. package/components/Dropdown/Dropdown.tsx +15 -7
  3. package/components/Dropdown/Dropdown.types.ts +0 -1
  4. package/components/Input/Input.tsx +1 -1
  5. package/components/Toggle/Toggle.module.css +4 -0
  6. package/css/core.colors.css +2 -2
  7. package/css/feat.atomics.css +15 -3
  8. package/css/feat.responsive.css +30 -6
  9. package/package.json +12 -12
package/components/Dropdown/Dropdown.meta.ts CHANGED
@@ -17,11 +17,6 @@ export const meta: HeliosAttributeMeta<DropdownProps> = {
17
17
  items: {
18
18
  type: "Array<ResultItem>",
19
19
  },
20
- isHidden: {
21
- type: "boolean",
22
- description: "Change this boolean value to conditionally hide a visible Dropdown.",
23
- isOptional: true,
24
- },
25
20
  isDisabled: {
26
21
  type: "boolean",
27
22
  description: "Dropdown won't be triggered on click.",
package/components/Dropdown/Dropdown.tsx CHANGED
@@ -10,18 +10,14 @@ import type { DropdownProps } from "./Dropdown.types"
10
10
  import type { HeliosIconType } from "../../types/icons"
11
11
 
12
12
  // NOTE @03b8 instead of passing ref, should use https://www.w3.org/TR/css-anchor-position-1/ when ready
13
- export const Dropdown: FC<DropdownProps> = ({ isHidden, children, items, isDisabled, position = "bottom-left" }) => {
13
+ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, position = "bottom-left" }) => {
14
14
  const hoverStateRef = useRef<boolean>(false)
15
15
  const resultListRef = useRef<HTMLOListElement | null>(null)
16
16
 
17
- const [isVisible, setVisible] = useState<boolean>(Boolean(isHidden))
17
+ const [isVisible, setVisible] = useState<boolean>(false)
18
18
  const [isHovering, setHovering] = useState<boolean>(false)
19
19
  const [navHeight, setNavHeight] = useState<number>(0)
20
20
 
21
- useEffect(() => {
22
- setVisible(false)
23
- }, [isHidden])
24
-
25
21
  useEffect(() => {
26
22
  if (resultListRef?.current) {
27
23
  setNavHeight(resultListRef?.current?.offsetHeight ?? 0)
@@ -66,6 +62,18 @@ export const Dropdown: FC<DropdownProps> = ({ isHidden, children, items, isDisab
66
62
  [styles.dropdown__navActive]: isVisible,
67
63
  })
68
64
 
65
+ const itemsWithClose = items?.map((item) => {
66
+ if (item.isDisabled) return item
67
+
68
+ return {
69
+ ...item,
70
+ onClick: (event: MouseEvent<HTMLElement>): void => {
71
+ item.onClick?.(event)
72
+ setVisible(false)
73
+ },
74
+ }
75
+ })
76
+
69
77
  return (
70
78
  <div className={dropdownClasses} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
71
79
  <div onClick={onSetVisible}>{renderChildren}</div>
@@ -75,7 +83,7 @@ export const Dropdown: FC<DropdownProps> = ({ isHidden, children, items, isDisab
75
83
  height: `${navHeight}px`,
76
84
  }}
77
85
  >
78
- <ResultList ref={resultListRef} items={items} />
86
+ <ResultList ref={resultListRef} items={itemsWithClose} />
79
87
  </nav>
80
88
  </div>
81
89
  )
package/components/Dropdown/Dropdown.types.ts CHANGED
@@ -4,7 +4,6 @@ import type { ReactElement } from "react"
4
4
  export interface DropdownProps {
5
5
  children: ReactElement<unknown>
6
6
  items: Array<ResultItem>
7
- isHidden?: boolean
8
7
  isDisabled?: boolean
9
8
  position?: HeliosPositionType
10
9
  }
package/components/Input/Input.tsx CHANGED
@@ -42,7 +42,7 @@ export const Input: FC<InputProps> = ({
42
42
 
43
43
  const showingResults: boolean = Boolean(!!filteredItems?.length && showResults)
44
44
 
45
- const inputClasses: string = getClasses(styles.input, "relative flex flex-column gap-3", {
45
+ const inputClasses: string = getClasses(styles.input, "relative flex flex-column", {
46
46
  [styles.inputDisabled]: isDisabled,
47
47
  [styles.inputShowingResults]: showingResults,
48
48
  })
package/components/Toggle/Toggle.module.css CHANGED
@@ -131,3 +131,7 @@
131
131
  height: 22px;
132
132
  width: 10px;
133
133
  }
134
+
135
+ :root[data-theme="dark"] .toggle__toggleMark:after {
136
+ background-color: var(--ui-text-primary);
137
+ }
package/css/core.colors.css CHANGED
@@ -43,8 +43,8 @@
43
43
  --ui-border-gray: oklch(var(--ui-border-l) var(--ui-chroma-tone) var(--ui-gray));
44
44
  --ui-border-hover-gray: oklch(var(--ui-border-hover-l) var(--ui-chroma-tone) var(--ui-gray));
45
45
  --ui-border-active-gray: oklch(var(--ui-border-active-l) var(--ui-chroma-tone) var(--ui-gray));
46
- --ui-border-focus-gray: oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-tone) var(--ui-gray));
47
- --ui-border-selected-gray: oklch(var(--ui-border-soft-selected-l) var(--ui-chroma-tone) var(--ui-gray));
46
+ --ui-border-focus-gray: oklch(var(--ui-border-focus-l) var(--ui-chroma-tone) var(--ui-gray));
47
+ --ui-border-selected-gray: oklch(var(--ui-border-selected-l) var(--ui-chroma-tone) var(--ui-gray));
48
48
 
49
49
  --ui-border-soft-gray: oklch(var(--ui-border-soft-l) var(--ui-chroma-tone) var(--ui-gray));
50
50
  --ui-border-soft-hover-gray: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-tone) var(--ui-gray));
package/css/feat.atomics.css CHANGED
@@ -24,18 +24,30 @@
24
24
  border-radius: 0;
25
25
  }
26
26
 
27
- .radius-small {
27
+ .radius-xs {
28
+ border-radius: var(--radius-xs);
29
+ }
30
+
31
+ .radius-sm {
28
32
  border-radius: var(--radius-sm);
29
33
  }
30
34
 
31
- .radius-normal {
35
+ .radius-md {
32
36
  border-radius: var(--radius-md);
33
37
  }
34
38
 
35
- .radius-large {
39
+ .radius-lg {
36
40
  border-radius: var(--radius-lg);
37
41
  }
38
42
 
43
+ .radius-xl {
44
+ border-radius: var(--radius-xl);
45
+ }
46
+
47
+ .radius-100 {
48
+ border-radius: 100%;
49
+ }
50
+
39
51
  .radius-max {
40
52
  border-radius: 9999px;
41
53
  }
package/css/feat.responsive.css CHANGED
@@ -69,15 +69,27 @@
69
69
  .tablet\:radius-none {
70
70
  border-radius: 0 !important;
71
71
  }
72
- .tablet\:radius-small {
72
+ .tablet\:radius-xs {
73
+ border-radius: var(--radius-xs) !important;
74
+ }
75
+ .tablet\:radius-sm {
73
76
  border-radius: var(--radius-sm) !important;
74
77
  }
75
- .tablet\:radius-normal {
78
+ .tablet\:radius-md {
76
79
  border-radius: var(--radius-md) !important;
77
80
  }
78
- .tablet\:radius-large {
81
+ .tablet\:radius-lg {
79
82
  border-radius: var(--radius-lg) !important;
80
83
  }
84
+ .tablet\:radius-xl {
85
+ border-radius: var(--radius-xl) !important;
86
+ }
87
+ .tablet\:radius-100 {
88
+ border-radius: 100% !important;
89
+ }
90
+ .tablet\:radius-max {
91
+ border-radius: 9999px !important;
92
+ }
81
93
  }
82
94
 
83
95
  @media (min-width: 0) and (max-width: 640px) {
@@ -150,13 +162,25 @@
150
162
  .mobile\:radius-none {
151
163
  border-radius: 0 !important;
152
164
  }
153
- .mobile\:radius-small {
165
+ .mobile\:radius-xs {
166
+ border-radius: var(--radius-xs) !important;
167
+ }
168
+ .mobile\:radius-sm {
154
169
  border-radius: var(--radius-sm) !important;
155
170
  }
156
- .mobile\:radius-normal {
171
+ .mobile\:radius-md {
157
172
  border-radius: var(--radius-md) !important;
158
173
  }
159
- .mobile\:radius-large {
174
+ .mobile\:radius-lg {
160
175
  border-radius: var(--radius-lg) !important;
161
176
  }
177
+ .mobile\:radius-xl {
178
+ border-radius: var(--radius-xl) !important;
179
+ }
180
+ .mobile\:radius-100 {
181
+ border-radius: 100% !important;
182
+ }
183
+ .mobile\:radius-max {
184
+ border-radius: 9999px !important;
185
+ }
162
186
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@heliosgraphics/ui",
3
- "version": "2.0.0-alpha.72",
3
+ "version": "2.0.0-alpha.73",
4
4
  "type": "module",
5
5
  "author": "Chris Puska <chris@puska.org>",
6
6
  "private": false,
@@ -36,23 +36,23 @@
36
36
  "react-plock": "^3.6.1"
37
37
  },
38
38
  "devDependencies": {
39
- "@testing-library/react": "^16.3.0",
40
- "@types/node": "^24",
41
- "@typescript-eslint/eslint-plugin": "^8.48.0",
42
- "@vitejs/plugin-react": "^5.1.1",
43
- "@vitest/coverage-v8": "^4.0.14",
39
+ "@testing-library/react": "^16.3.1",
40
+ "@types/node": "^25",
41
+ "@typescript-eslint/eslint-plugin": "^8.50.1",
42
+ "@vitejs/plugin-react": "^5.1.2",
43
+ "@vitest/coverage-v8": "^4.0.16",
44
44
  "esbuild": "latest",
45
45
  "esbuild-css-modules-plugin": "latest",
46
- "eslint": "^9.39.1",
46
+ "eslint": "^9.39.2",
47
47
  "eslint-config-prettier": "^10.1.8",
48
48
  "eslint-plugin-prettier": "^5.5.4",
49
49
  "glob": "latest",
50
- "jsdom": "^27.2.0",
51
- "next": "^16.0.5",
52
- "prettier": "^3.7.3",
50
+ "jsdom": "^27.3.0",
51
+ "next": "^16.1.1",
52
+ "prettier": "^3.7.4",
53
53
  "typescript": "^5.9.3",
54
- "vite": "^7.2.4",
55
- "vitest": "^4.0.14"
54
+ "vite": "^7.3.0",
55
+ "vitest": "^4.0.16"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "@types/react": "^19",