chiplet 0.3.0-dev.3 → 0.3.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 (237) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +46 -13
  3. package/dist/article.css +143 -0
  4. package/dist/component/button/Button.js.map +1 -1
  5. package/dist/component/button/Interactive.js +1 -0
  6. package/dist/component/button/Interactive.js.map +1 -1
  7. package/dist/component/button/style/index.css.vanilla.js +5 -5
  8. package/dist/component/button/style/index.css.vanilla.js.map +1 -1
  9. package/dist/component/checkbox/Checkbox.js +1 -1
  10. package/dist/component/checkbox/Checkbox.js.map +1 -1
  11. package/dist/component/checkbox/CheckboxGroup.js +1 -0
  12. package/dist/component/checkbox/CheckboxGroup.js.map +1 -1
  13. package/dist/component/checkbox/Radio.js +1 -0
  14. package/dist/component/checkbox/Radio.js.map +1 -1
  15. package/dist/component/checkbox/RadioGroup.js +1 -0
  16. package/dist/component/checkbox/RadioGroup.js.map +1 -1
  17. package/dist/component/checkbox/icon/CheckboxChecked.svg.js.map +1 -1
  18. package/dist/component/checkbox/icon/CheckboxIndeterminate.svg.js.map +1 -1
  19. package/dist/component/checkbox/icon/CheckboxUnchecked.svg.js.map +1 -1
  20. package/dist/component/checkbox/icon/RadioChecked.svg.js.map +1 -1
  21. package/dist/component/checkbox/icon/RadioUnchecked.svg.js.map +1 -1
  22. package/dist/component/checkbox/icon/index.js +7 -5
  23. package/dist/component/checkbox/icon/index.js.map +1 -1
  24. package/dist/component/checkbox/style/index.css.vanilla.js +14 -14
  25. package/dist/component/checkbox/style/index.css.vanilla.js.map +1 -1
  26. package/dist/component/header/style/index.css.vanilla.js +1 -1
  27. package/dist/component/header/style/index.css.vanilla.js.map +1 -1
  28. package/dist/component/icon/set/Checkmark24Filled.svg.js.map +1 -1
  29. package/dist/component/icon/set/Checkmark24Regular.svg.js.map +1 -1
  30. package/dist/component/icon/set/ChevronDown24Filled.svg.js.map +1 -1
  31. package/dist/component/icon/set/ChevronDown24Regular.svg.js.map +1 -1
  32. package/dist/component/icon/set/Dismiss24Filled.svg.js.map +1 -1
  33. package/dist/component/icon/set/Dismiss24Regular.svg.js.map +1 -1
  34. package/dist/component/icon/set/Search24Filled.svg.js.map +1 -1
  35. package/dist/component/icon/set/Search24Regular.svg.js.map +1 -1
  36. package/dist/component/index.js +1 -0
  37. package/dist/component/index.js.map +1 -1
  38. package/dist/component/input/Input.js +1 -0
  39. package/dist/component/input/Input.js.map +1 -1
  40. package/dist/component/input/SearchInput.js +4 -1
  41. package/dist/component/input/SearchInput.js.map +1 -1
  42. package/dist/component/input/style/index.css.vanilla.js +8 -8
  43. package/dist/component/input/style/index.css.vanilla.js.map +1 -1
  44. package/dist/component/menu/Menu.js +7 -5
  45. package/dist/component/menu/Menu.js.map +1 -1
  46. package/dist/component/menu/MenuItem.js +1 -0
  47. package/dist/component/menu/MenuItem.js.map +1 -1
  48. package/dist/component/menu/MenuItemCheckbox.js +7 -5
  49. package/dist/component/menu/MenuItemCheckbox.js.map +1 -1
  50. package/dist/component/menu/MenuItemRadio.js +7 -5
  51. package/dist/component/menu/MenuItemRadio.js.map +1 -1
  52. package/dist/component/popover/Dialog.js +1 -0
  53. package/dist/component/popover/Dialog.js.map +1 -1
  54. package/dist/component/popover/DismissButton.js +1 -0
  55. package/dist/component/popover/DismissButton.js.map +1 -1
  56. package/dist/component/popover/Popover.js +1 -0
  57. package/dist/component/popover/Popover.js.map +1 -1
  58. package/dist/component/popover/Tooltip.js +1 -0
  59. package/dist/component/popover/Tooltip.js.map +1 -1
  60. package/dist/component/popover/style/index.css.vanilla.js +8 -8
  61. package/dist/component/popover/style/index.css.vanilla.js.map +1 -1
  62. package/dist/component/progress/style/index.css.vanilla.js +4 -4
  63. package/dist/component/progress/style/index.css.vanilla.js.map +1 -1
  64. package/dist/component/select/AutoComplete.js +7 -5
  65. package/dist/component/select/AutoComplete.js.map +1 -1
  66. package/dist/component/select/Group.js +13 -4
  67. package/dist/component/select/Group.js.map +1 -1
  68. package/dist/component/select/Option.js +1 -0
  69. package/dist/component/select/Option.js.map +1 -1
  70. package/dist/component/select/Select.js +7 -5
  71. package/dist/component/select/Select.js.map +1 -1
  72. package/dist/component/select/style/index.css.vanilla.js +16 -15
  73. package/dist/component/select/style/index.css.vanilla.js.map +1 -1
  74. package/dist/component/style/article.css.vanilla.js +6 -0
  75. package/dist/component/style/article.css.vanilla.js.map +1 -0
  76. package/dist/component/style/index.js +3 -0
  77. package/dist/component/style/index.js.map +1 -0
  78. package/dist/component/typography/style/index.css.vanilla.js +4 -4
  79. package/dist/component/typography/style/index.css.vanilla.js.map +1 -1
  80. package/dist/{theme/global.css → global.css} +7 -7
  81. package/dist/hook/accessibility/keyboard/Keyboard.js +7 -2
  82. package/dist/hook/accessibility/keyboard/Keyboard.js.map +1 -1
  83. package/dist/hook/accessibility/keyboard/Roving.js +1 -0
  84. package/dist/hook/accessibility/keyboard/Roving.js.map +1 -1
  85. package/dist/hook/accessibility/keyboard/hook/useLastFocused.js +1 -0
  86. package/dist/hook/accessibility/keyboard/hook/useLastFocused.js.map +1 -1
  87. package/dist/hook/accessibility/keyboard/hook/useMoveFocus.js.map +1 -1
  88. package/dist/hook/accessibility/keyboard/hook/useNavigate.js +2 -4
  89. package/dist/hook/accessibility/keyboard/hook/useNavigate.js.map +1 -1
  90. package/dist/hook/accessibility/keyboard/resolve.js +1 -0
  91. package/dist/hook/accessibility/keyboard/resolve.js.map +1 -1
  92. package/dist/hook/accessibility/keyboard/sort.js +1 -1
  93. package/dist/hook/accessibility/keyboard/sort.js.map +1 -1
  94. package/dist/hook/accessibility/keyboard/tree.js +1 -0
  95. package/dist/hook/accessibility/keyboard/tree.js.map +1 -1
  96. package/dist/hook/accessibility/keyboard/useController.js +1 -0
  97. package/dist/hook/accessibility/keyboard/useController.js.map +1 -1
  98. package/dist/hook/accessibility/keyboard/useKeyboard.js +1 -0
  99. package/dist/hook/accessibility/keyboard/useKeyboard.js.map +1 -1
  100. package/dist/hook/document/useHighlight.js +1 -1
  101. package/dist/hook/document/useHighlight.js.map +1 -1
  102. package/dist/hook/form/useAutoComplete.js +1 -3
  103. package/dist/hook/form/useAutoComplete.js.map +1 -1
  104. package/dist/hook/form/useCheckbox.js +1 -0
  105. package/dist/hook/form/useCheckbox.js.map +1 -1
  106. package/dist/hook/form/useChecked.js +1 -0
  107. package/dist/hook/form/useChecked.js.map +1 -1
  108. package/dist/hook/form/useDefault.js +2 -0
  109. package/dist/hook/form/useDefault.js.map +1 -1
  110. package/dist/hook/form/useForm.js +2 -1
  111. package/dist/hook/form/useForm.js.map +1 -1
  112. package/dist/hook/form/useGroup.js +2 -0
  113. package/dist/hook/form/useGroup.js.map +1 -1
  114. package/dist/hook/form/useOption.js +1 -0
  115. package/dist/hook/form/useOption.js.map +1 -1
  116. package/dist/hook/form/useRadio.js +1 -0
  117. package/dist/hook/form/useRadio.js.map +1 -1
  118. package/dist/hook/form/useSelect.js +1 -0
  119. package/dist/hook/form/useSelect.js.map +1 -1
  120. package/dist/hook/form/useValue.js +1 -0
  121. package/dist/hook/form/useValue.js.map +1 -1
  122. package/dist/hook/popover/useAnchorPositioning.js +1 -0
  123. package/dist/hook/popover/useAnchorPositioning.js.map +1 -1
  124. package/dist/hook/popover/useDialog.js +1 -0
  125. package/dist/hook/popover/useDialog.js.map +1 -1
  126. package/dist/hook/popover/useLightDismiss.js +1 -1
  127. package/dist/hook/popover/useLightDismiss.js.map +1 -1
  128. package/dist/hook/popover/useOverlay.js +1 -0
  129. package/dist/hook/popover/useOverlay.js.map +1 -1
  130. package/dist/hook/popover/usePopover.js +6 -2
  131. package/dist/hook/popover/usePopover.js.map +1 -1
  132. package/dist/hook/popover/usePositioning.js +1 -0
  133. package/dist/hook/popover/usePositioning.js.map +1 -1
  134. package/dist/hook/popover/useTooltip.js +3 -1
  135. package/dist/hook/popover/useTooltip.js.map +1 -1
  136. package/dist/hook/react/refValue.js +1 -0
  137. package/dist/hook/react/refValue.js.map +1 -1
  138. package/dist/hook/react/useActivate.js +1 -1
  139. package/dist/hook/react/useActivate.js.map +1 -1
  140. package/dist/hook/react/useConst.js.map +1 -1
  141. package/dist/hook/react/useInteractive.js +1 -0
  142. package/dist/hook/react/useInteractive.js.map +1 -1
  143. package/dist/hook/react/useUniqueId.js +3 -2
  144. package/dist/hook/react/useUniqueId.js.map +1 -1
  145. package/dist/index.js +5 -1
  146. package/dist/index.js.map +1 -1
  147. package/dist/index3.css +138 -0
  148. package/dist/index5.css +167 -0
  149. package/dist/{component/checkbox/style/index.css → index6.css} +79 -71
  150. package/dist/{component/input/style/index.css → index7.css} +29 -30
  151. package/dist/{component/button/style/index.css → index8.css} +37 -37
  152. package/dist/infra/logging/logger.js +10 -12
  153. package/dist/infra/logging/logger.js.map +1 -1
  154. package/dist/theme/ColorScheme.js.map +1 -1
  155. package/dist/theme/defineTheme.js +1 -0
  156. package/dist/theme/defineTheme.js.map +1 -1
  157. package/dist/theme/global.css.vanilla.js +11 -11
  158. package/dist/theme/global.css.vanilla.js.map +1 -1
  159. package/dist/theme/theme.css.vanilla.js +3 -3
  160. package/dist/theme/theme.css.vanilla.js.map +1 -1
  161. package/dist/theme/token.css.vanilla.js +1 -1
  162. package/dist/theme/token.css.vanilla.js.map +1 -1
  163. package/dist/{theme/theme.css → theme.css} +23 -27
  164. package/dist/util/document/accessibility.css.vanilla.js +4 -4
  165. package/dist/util/document/accessibility.css.vanilla.js.map +1 -1
  166. package/dist/util/index.js +4 -1
  167. package/dist/util/index.js.map +1 -1
  168. package/dist/util/random/generateDeterministicId.js +12 -0
  169. package/dist/util/random/generateDeterministicId.js.map +1 -0
  170. package/dist/util/random/generateDigest.js +12 -0
  171. package/dist/util/random/generateDigest.js.map +1 -0
  172. package/dist/util/random/generateUniqueId.js +9 -0
  173. package/dist/util/random/generateUniqueId.js.map +1 -0
  174. package/dist/util/random/index.js +4 -1
  175. package/dist/util/random/index.js.map +1 -1
  176. package/dist/util/random/toHex.js +10 -0
  177. package/dist/util/random/toHex.js.map +1 -0
  178. package/package.json +102 -105
  179. package/src/component/button/Button.tsx +1 -5
  180. package/src/component/button/style/index.css.ts +1 -1
  181. package/src/component/checkbox/Checkbox.tsx +2 -3
  182. package/src/component/checkbox/Radio.tsx +1 -2
  183. package/src/component/checkbox/RadioGroup.tsx +1 -2
  184. package/src/component/checkbox/style/index.css.ts +34 -25
  185. package/src/component/icon/README.md +17 -3
  186. package/src/component/index.ts +1 -0
  187. package/src/component/input/Input.tsx +1 -2
  188. package/src/component/input/SearchInput.tsx +4 -3
  189. package/src/component/input/style/index.css.ts +42 -41
  190. package/src/component/popover/Tooltip.tsx +1 -3
  191. package/src/component/popover/style/index.css.ts +100 -103
  192. package/src/component/select/Group.tsx +11 -3
  193. package/src/component/select/Option.tsx +1 -2
  194. package/src/component/select/style/index.css.ts +59 -53
  195. package/src/component/style/article.css.ts +189 -0
  196. package/src/component/style/index.ts +1 -0
  197. package/src/hook/accessibility/keyboard/Keyboard.tsx +6 -1
  198. package/src/hook/accessibility/keyboard/hook/useLastFocused.ts +1 -0
  199. package/src/hook/accessibility/keyboard/hook/useMoveFocus.ts +2 -0
  200. package/src/hook/accessibility/keyboard/hook/useNavigate.ts +5 -5
  201. package/src/hook/accessibility/keyboard/sort.ts +1 -1
  202. package/src/hook/document/useHighlight.ts +1 -27
  203. package/src/hook/form/useAutoComplete.ts +3 -3
  204. package/src/hook/form/useDefault.ts +2 -0
  205. package/src/hook/form/useForm.ts +2 -2
  206. package/src/hook/form/useGroup.ts +2 -1
  207. package/src/hook/popover/useLightDismiss.ts +1 -1
  208. package/src/hook/popover/usePopover.ts +7 -12
  209. package/src/hook/popover/usePositioning.ts +2 -1
  210. package/src/hook/popover/useTooltip.ts +3 -1
  211. package/src/hook/react/useActivate.ts +1 -1
  212. package/src/hook/react/useConst.ts +1 -1
  213. package/src/hook/react/useUniqueId.ts +2 -2
  214. package/src/infra/logging/logger.ts +26 -13
  215. package/src/theme/ColorScheme.tsx +1 -5
  216. package/src/theme/global.css.ts +2 -2
  217. package/src/theme/theme.css.ts +1 -5
  218. package/src/util/document/accessibility.css.ts +3 -3
  219. package/src/util/random/generateDeterministicId.ts +10 -0
  220. package/src/util/random/generateDigest.ts +11 -0
  221. package/src/util/random/{createUniqueId.ts → generateUniqueId.ts} +4 -6
  222. package/src/util/random/index.ts +4 -1
  223. package/src/util/random/toHex.ts +6 -0
  224. package/dist/component/popover/style/index.css +0 -175
  225. package/dist/component/select/style/index.css +0 -135
  226. package/dist/util/random/createUniqueId.js +0 -8
  227. package/dist/util/random/createUniqueId.js.map +0 -1
  228. package/src/component/style/font/font.css +0 -23
  229. package/src/component/style/font/proxima-nova-bold.woff +0 -0
  230. package/src/component/style/font/proxima-nova-light.woff +0 -0
  231. package/src/component/style/font/proxima-nova-regular.woff +0 -0
  232. package/src/component/style/font/proxima-nova-semibold.woff +0 -0
  233. package/src/component/style/press.module.css +0 -204
  234. /package/dist/{component/select/index.css → index.css} +0 -0
  235. /package/dist/{component/select/index2.css → index2.css} +0 -0
  236. /package/dist/{component/progress/style/index.css → index4.css} +0 -0
  237. /package/dist/{theme/token.css → token.css} +0 -0
@@ -64,8 +64,9 @@ export function usePositioning(
64
64
  {
65
65
  const ref = useRef(_options)
66
66
 
67
+ // eslint-disable-next-line react-hooks/refs
67
68
  if (isEqual(_options, ref.current)) {
68
- // eslint-disable-next-line react-hooks/immutability
69
+ // eslint-disable-next-line react-hooks/immutability, react-hooks/refs
69
70
  _options = ref.current
70
71
  }
71
72
 
@@ -48,7 +48,7 @@ export function useTooltip(options: TooltipOptions) {
48
48
 
49
49
  let anchorProps: OverlayAnchorProps = { ...anchor?.props }
50
50
  let positionedProps: React.JSX.IntrinsicElements[TooltipTag] = { ...props }
51
- let arrowProps: React.ComponentProps<'div'> = {}
51
+ let arrowProps: React.ComponentProps<'div'>
52
52
 
53
53
  const _id = useUniqueId('tooltip-')
54
54
  positionedProps.id ||= _id
@@ -237,6 +237,7 @@ export function useTooltip(options: TooltipOptions) {
237
237
  ref: positionedRef,
238
238
  }
239
239
 
240
+ // eslint-disable-next-line prefer-const
240
241
  arrowProps = {
241
242
  style: {
242
243
  ...positioning.arrowStyle,
@@ -247,6 +248,7 @@ export function useTooltip(options: TooltipOptions) {
247
248
  return {
248
249
  overlay,
249
250
  position: positioning.position,
251
+ // eslint-disable-next-line react-hooks/refs
250
252
  anchor: anchor == null ? null : cloneElement(anchor, anchorProps),
251
253
  positioned: { props: positionedProps },
252
254
  arrow: { props: arrowProps },
@@ -59,7 +59,7 @@ export function useActivate(onActivate?: ActivateCallback) {
59
59
  ref.current.onActivate?.(ev, target)
60
60
 
61
61
  if (!ev.defaultPrevented) {
62
- /* istanbul ignore next -- @preserve */
62
+ /* istanbul ignore next */
63
63
  const init: MouseEventInit = ev instanceof Event ? ev : ev.nativeEvent
64
64
  target.dispatchEvent(new MouseEvent('click', init))
65
65
  ev.preventDefault()
@@ -1,6 +1,6 @@
1
1
  import { useMemo } from 'react'
2
2
 
3
3
  export function useConst<T>(initialize: () => T): T {
4
- // eslint-disable-next-line react-hooks/exhaustive-deps
4
+ // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo
5
5
  return useMemo(initialize, [])
6
6
  }
@@ -1,8 +1,8 @@
1
- import { createUniqueId } from '#util'
1
+ import { generateUniqueId } from '#util'
2
2
  import { useConst } from './useConst'
3
3
 
4
4
  export function useUniqueId(prefix?: string, suffix?: string) {
5
5
  return useConst(() => {
6
- return createUniqueId(prefix, suffix)
6
+ return generateUniqueId(prefix, suffix)
7
7
  })
8
8
  }
@@ -6,6 +6,7 @@ import {
6
6
  type Attributes,
7
7
  type AttributeValue,
8
8
  type MetricOptions,
9
+ type Span,
9
10
  } from '@opentelemetry/api'
10
11
  import { logs, SeverityNumber } from '@opentelemetry/api-logs'
11
12
  import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'
@@ -51,8 +52,11 @@ import {
51
52
  } from '@opentelemetry/semantic-conventions/incubating'
52
53
  import { compact, isError } from 'lodash-es'
53
54
 
54
- export { SpanStatusCode } from '@opentelemetry/api'
55
- export { type Attributes, type AttributeValue } from '@opentelemetry/api'
55
+ export {
56
+ SpanStatusCode,
57
+ type Attributes,
58
+ type AttributeValue,
59
+ } from '@opentelemetry/api'
56
60
  export { SeverityNumber } from '@opentelemetry/api-logs'
57
61
  export { resourceFromAttributes } from '@opentelemetry/resources'
58
62
  export * from '@opentelemetry/semantic-conventions'
@@ -197,7 +201,7 @@ class Logger {
197
201
 
198
202
  this.#tracerProvider.register()
199
203
 
200
- /* istanbul ignore next -- @preserve */
204
+ /* istanbul ignore next */
201
205
  if (typeof window !== 'undefined') {
202
206
  this.#unregister = registerInstrumentations({
203
207
  instrumentations: [
@@ -341,19 +345,28 @@ class Logger {
341
345
  //#endregion
342
346
 
343
347
  //#region tracer
344
- span(name: string, attributes?: Attributes) {
345
- return this.#tracer.startSpan(name, {
346
- attributes: {
347
- ...this.#attributes,
348
- ...attributes,
349
- },
350
- })
351
- }
348
+ span(name: string, attributes?: Attributes | undefined): Span
352
349
 
353
- mark<T extends (...args: readonly never[]) => Promise<unknown>>(
350
+ span<T extends (...args: readonly never[]) => Promise<unknown>>(
354
351
  name: string,
355
352
  operation: T
353
+ ): T
354
+
355
+ span<T extends (...args: readonly never[]) => Promise<unknown>>(
356
+ name: string,
357
+ attributes?: Attributes | T
356
358
  ) {
359
+ if (typeof attributes !== 'function') {
360
+ return this.#tracer.startSpan(name, {
361
+ attributes: {
362
+ ...this.#attributes,
363
+ ...attributes,
364
+ },
365
+ })
366
+ }
367
+
368
+ const operation = attributes
369
+
357
370
  return ((...args) => {
358
371
  return this.#tracer.startActiveSpan(name, async (span) => {
359
372
  const startTime = performance.now()
@@ -364,7 +377,7 @@ class Logger {
364
377
  } catch (err) {
365
378
  status = SpanStatusCode.ERROR
366
379
 
367
- /* istanbul ignore else -- @preserve */
380
+ /* istanbul ignore else */
368
381
  if (isError(err) || typeof err === 'string') span.recordException(err)
369
382
 
370
383
  throw err
@@ -1,9 +1,5 @@
1
1
  export type ColorScheme =
2
- | 'auto'
3
- | 'light'
4
- | 'dark'
5
- | 'light dark'
6
- | 'dark light'
2
+ 'auto' | 'light' | 'dark' | 'light dark' | 'dark light'
7
3
 
8
4
  interface ColorSchemeProps extends React.ComponentProps<'meta'> {
9
5
  mode?: ColorScheme | undefined
@@ -1,5 +1,5 @@
1
1
  import {
2
- createUniqueId,
2
+ generateDeterministicId,
3
3
  VirtualActiveSelector,
4
4
  VirtualDisabledSelector,
5
5
  VirtualFocusSelector,
@@ -15,7 +15,7 @@ import { tokenClass } from './token.css'
15
15
 
16
16
  export const radiusVar = createVar()
17
17
 
18
- export const HighlightName = createUniqueId('highlight-')
18
+ export const HighlightName = generateDeterministicId('highlight-')
19
19
 
20
20
  export const FocusSelector = `:where(:focus-visible, ${VirtualFocusSelector})`
21
21
 
@@ -258,8 +258,8 @@ export const [themeClass, theme] = createTheme({
258
258
  },
259
259
 
260
260
  checkbox: {
261
+ outset: gap,
261
262
  size: token.sizing.width,
262
- margin: gap,
263
263
  color: palette.neutral.foreground4,
264
264
  colorHover: palette.neutral.foreground1,
265
265
  colorActive: palette.neutral.foreground4,
@@ -324,8 +324,6 @@ export const [themeClass, theme] = createTheme({
324
324
  tooltip: {
325
325
  minHeight: token.sizing.height.medium,
326
326
  padding: token.spacing.padding.small,
327
- fontSize: token.typography.body2.fontSize,
328
- lineHeight: token.typography.body2.lineHeight,
329
327
  color: colorInverted,
330
328
  background: backgroundInverted,
331
329
  border: 'none',
@@ -346,8 +344,6 @@ export const [themeClass, theme] = createTheme({
346
344
  gap: token.spacing.gap.small,
347
345
  height: token.sizing.height.small,
348
346
  padding: token.spacing.padding.medium,
349
- fontSize: token.typography.body2.fontSize,
350
- lineHeight: token.typography.body2.lineHeight,
351
347
  radius,
352
348
  icon: token.sizing.width.small,
353
349
  },
@@ -1,8 +1,8 @@
1
- import { createUniqueId } from '../random'
1
+ import { generateDeterministicId } from '../random'
2
2
 
3
- export const VirtualFocus = createUniqueId('data-focus-visible-')
3
+ export const VirtualFocus = generateDeterministicId('data-focus-visible-')
4
4
  export const VirtualFocusSelector = `[${VirtualFocus}="true"]` as const
5
- export const VirtualActive = createUniqueId('data-active-')
5
+ export const VirtualActive = generateDeterministicId('data-active-')
6
6
  export const VirtualActiveSelector = `[${VirtualActive}="true"]` as const
7
7
  export const VirtualDisabled = 'aria-disabled'
8
8
  export const VirtualDisabledSelector = '[aria-disabled="true"]'
@@ -0,0 +1,10 @@
1
+ /* istanbul ignore file */
2
+ import { generateIdentifier } from '@vanilla-extract/css'
3
+
4
+ export function generateDeterministicId<P extends string>(prefix: P) {
5
+ return (prefix +
6
+ generateIdentifier({
7
+ debugId: '',
8
+ debugFileName: false,
9
+ })) as `${P}${string}`
10
+ }
@@ -0,0 +1,11 @@
1
+ import { toHex } from './toHex'
2
+
3
+ export async function generateDigest(message: string) {
4
+ const encoder = new TextEncoder()
5
+
6
+ const buffer = encoder.encode(message)
7
+
8
+ const hash = await crypto.subtle.digest('SHA-256', buffer)
9
+
10
+ return toHex(new Uint8Array(hash))
11
+ }
@@ -1,12 +1,10 @@
1
- export function createUniqueId<
1
+ import { toHex } from './toHex'
2
+
3
+ export function generateUniqueId<
2
4
  P extends string | undefined = '',
3
5
  S extends string | undefined = '',
4
6
  >(prefix: P = '' as P, suffix: S = '' as S) {
5
- const val = crypto
6
- .getRandomValues(new Uint8Array(4))
7
- .reduce((acc, byte) => acc + byte.toString(16).padStart(2, '0'), '')
8
-
9
7
  return (prefix +
10
- val +
8
+ toHex(crypto.getRandomValues(new Uint8Array(4))) +
11
9
  suffix) as `${NoInfer<P extends string ? P : ''>}${string}${NoInfer<S extends string ? S : ''>}`
12
10
  }
@@ -1,2 +1,5 @@
1
+ export * from './generateDeterministicId'
2
+ export * from './generateDigest'
3
+ export * from './generateUniqueId'
4
+ export * from './toHex'
1
5
  export * from './UUID'
2
- export * from './createUniqueId'
@@ -0,0 +1,6 @@
1
+ export function toHex(bytes: Uint8Array) {
2
+ return bytes.reduce(
3
+ (acc, byte) => acc + byte.toString(16).padStart(2, '0'),
4
+ ''
5
+ )
6
+ }
@@ -1,175 +0,0 @@
1
- ._1b443hhm {
2
- --_1b443hh1: calc(100% - 2 * var(--_1b443hh7));
3
- --_1b443hh3: calc(100% - 2 * var(--_1b443hh7));
4
- --_1b443hh7: var(--_15shvv451);
5
- --_1b443hha: var(--_15shvv452);
6
- --_1b443hhb: var(--_15shvv453);
7
- --_1b443hhf: var(--_15shvv456);
8
- --_1b443hhd: var(--_15shvv454);
9
- --_1b443hhe: var(--_15shvv455);
10
- --_1b443hhg: var(--_15shvv457);
11
- --_1b443hhh: none;
12
- --_1b443hhl: var(--_15shvv458);
13
- box-sizing: border-box;
14
- max-inline-size: var(--_1b443hh1);
15
- max-block-size: var(--_1b443hh3);
16
- padding: 0;
17
- margin: auto;
18
- overflow: clip auto;
19
- color: var(--_1b443hha);
20
- background: var(--_1b443hhb);
21
- border: none;
22
- border-radius: var(--_1b443hhd);
23
- box-shadow: var(--_1b443hhe);
24
- transform: none;
25
- transition: var(--_1b443hhl);
26
- transition-property: background, opacity, transform, display, overlay;
27
- }
28
- ._1b443hhm::backdrop {
29
- background: var(--_1b443hhf);
30
- backdrop-filter: var(--_1b443hhg);
31
- transition: inherit;
32
- }
33
- ._1b443hhn {
34
- inline-size: fit-content;
35
- }
36
- ._1b443hho {
37
- inline-size: -webkit-fill-available;
38
- inline-size: stretch;
39
- }
40
- ._1b443hhp {
41
- inline-size: var(--_15shvv44y);
42
- }
43
- ._1b443hhq {
44
- inline-size: var(--_15shvv44z);
45
- }
46
- ._1b443hhr {
47
- inline-size: var(--_15shvv450);
48
- }
49
- ._1b443hhs {
50
- --_1b443hha: var(--_15shvv459);
51
- --_1b443hhb: var(--_15shvv45a);
52
- --_1b443hhc: var(--_15shvv45b);
53
- --_1b443hhd: var(--_15shvv45c);
54
- --_1b443hhe: var(--_15shvv45d);
55
- --_1b443hhh: var(--_1b443hhj) scale(0.95);
56
- --_1b443hhk: 0.5rem;
57
- --_1b443hhl: var(--_15shvv45e);
58
- box-sizing: border-box;
59
- padding: 0;
60
- margin: 0;
61
- overflow: hidden auto;
62
- color: var(--_1b443hha);
63
- background: var(--_1b443hhb);
64
- border: var(--_1b443hhc);
65
- border-radius: var(--_1b443hhd);
66
- box-shadow: var(--_1b443hhe);
67
- transform: none;
68
- transform-origin: var(--_1b443hhi);
69
- transition: var(--_1b443hhl);
70
- transition-property: background, opacity, transform, display, overlay;
71
- }
72
- ._1b443hht {
73
- --_1b443hhi: 50% 100%;
74
- --_1b443hhj: translateY(var(--_1b443hhk));
75
- }
76
- ._1b443hhu {
77
- --_1b443hhi: 0% 100%;
78
- --_1b443hhj: translateY(var(--_1b443hhk));
79
- }
80
- ._1b443hhv {
81
- --_1b443hhi: 100% 100%;
82
- --_1b443hhj: translateY(var(--_1b443hhk));
83
- }
84
- ._1b443hhw {
85
- --_1b443hhi: 50% 0%;
86
- --_1b443hhj: translateY(calc(-1 * var(--_1b443hhk)));
87
- }
88
- ._1b443hhx {
89
- --_1b443hhi: 0% 0%;
90
- --_1b443hhj: translateY(calc(-1 * var(--_1b443hhk)));
91
- }
92
- ._1b443hhy {
93
- --_1b443hhi: 100% 0%;
94
- --_1b443hhj: translateY(calc(-1 * var(--_1b443hhk)));
95
- }
96
- ._1b443hhz {
97
- --_1b443hhi: 100% 50%;
98
- --_1b443hhj: translateX(var(--_1b443hhk));
99
- }
100
- ._1b443hh10 {
101
- --_1b443hhi: 100% 0%;
102
- --_1b443hhj: translateX(var(--_1b443hhk));
103
- }
104
- ._1b443hh11 {
105
- --_1b443hhi: 100% 100%;
106
- --_1b443hhj: translateX(var(--_1b443hhk));
107
- }
108
- ._1b443hh12 {
109
- --_1b443hhi: 0% 50%;
110
- --_1b443hhj: translateX(calc(-1 * var(--_1b443hhk)));
111
- }
112
- ._1b443hh13 {
113
- --_1b443hhi: 0% 0%;
114
- --_1b443hhj: translateX(calc(-1 * var(--_1b443hhk)));
115
- }
116
- ._1b443hh14 {
117
- --_1b443hhi: 0% 100%;
118
- --_1b443hhj: translateX(calc(-1 * var(--_1b443hhk)));
119
- }
120
- ._1b443hh15 {
121
- --_1b443hh2: var(--_15shvv45f);
122
- --_1b443hh4: var(--_1b443hh5) var(--_1b443hh6);
123
- --_1b443hh5: calc((var(--_1b443hh2) - var(--_1b443hh9)) / 2);
124
- --_1b443hh6: var(--_15shvv45g);
125
- --_1b443hh8: var(--_15shvv45h);
126
- --_1b443hh9: var(--_15shvv45i);
127
- --_1b443hha: var(--_15shvv45j);
128
- --_1b443hhb: var(--_15shvv45k);
129
- --_1b443hhc: var(--_15shvv45l);
130
- --_1b443hhd: var(--_15shvv45m);
131
- --_1b443hhg: var(--_15shvv45n);
132
- box-sizing: border-box;
133
- inline-size: fit-content;
134
- block-size: fit-content;
135
- padding: var(--_1b443hh4);
136
- margin: 0;
137
- overflow: visible;
138
- font-size: var(--_1b443hh8);
139
- line-height: var(--_1b443hh9);
140
- color: var(--_1b443hha);
141
- background: var(--_1b443hhb);
142
- border: var(--_1b443hhc);
143
- border-radius: var(--_1b443hhd);
144
- filter: var(--_1b443hhg);
145
- }
146
- ._1b443hh16 {
147
- --_1b443hh0: var(--_15shvv45o);
148
- --_1b443hhd: var(--_15shvv45p);
149
- position: absolute;
150
- z-index: -1;
151
- inline-size: var(--_1b443hh0);
152
- aspect-ratio: 1 / 1;
153
- background: inherit;
154
- border-radius: var(--_1b443hhd);
155
- transform: skew(15deg, 15deg);
156
- }
157
- ._1b443hh17 {
158
- rotate: 45deg;
159
- }
160
- ._1b443hh18 {
161
- rotate: 135deg;
162
- }
163
- @starting-style {
164
- ._1b443hhm {
165
- opacity: 0;
166
- transform: var(--_1b443hhh);
167
- }
168
- ._1b443hhm::backdrop {
169
- background: none;
170
- }
171
- ._1b443hhs {
172
- opacity: 0;
173
- transform: var(--_1b443hhh);
174
- }
175
- }
@@ -1,135 +0,0 @@
1
- ._1asxz9rp {
2
- --_1asxz9r0: var(--_15shvv45z);
3
- --_1asxz9r1: var(--_15shvv45q);
4
- --_1asxz9r3: var(--_15shvv45r);
5
- position: relative;
6
- box-sizing: border-box;
7
- display: grid;
8
- grid-template: 'a b c' / auto 1fr auto;
9
- gap: var(--_1asxz9r0);
10
- inline-size: var(--_1asxz9r1);
11
- padding: var(--_1asxz9r3);
12
- margin: 0;
13
- overflow: auto;
14
- }
15
- ._1asxz9rp::highlight(highlight-87d49202) {
16
- text-decoration-line: underline;
17
- }
18
- ._1asxz9rq {
19
- --_1asxz9r0: var(--_15shvv45s);
20
- --_1asxz9r2: var(--_15shvv45t);
21
- --_1asxz9r3: var(--_1asxz9r4) var(--_1asxz9r5);
22
- --_1asxz9r4: calc((var(--_1asxz9r2) - var(--_1asxz9rb)) / 2);
23
- --_1asxz9r5: var(--_15shvv45u);
24
- --_1asxz9ra: var(--_15shvv45v);
25
- --_1asxz9rb: var(--_15shvv45w);
26
- --_1asxz9rc: var(--_15shvv45y);
27
- --_1asxz9rd: inherit;
28
- --_1asxz9rf: var(--_15shvv4y);
29
- --_1asxz9rg: pointer;
30
- --_1asxz9rh: not-allowed;
31
- --_1asxz9ri: none;
32
- --_1asxz9rj: var(--_15shvv4w);
33
- --_1asxz9rk: var(--_15shvv4x);
34
- --_1asxz9rl: none;
35
- --_1asxz9ro: var(--_15shvv45x);
36
- display: grid;
37
- grid-template-rows: subgrid;
38
- grid-template-columns: subgrid;
39
- grid-column: span 3;
40
- gap: var(--_1asxz9r0);
41
- place-items: start;
42
- padding: var(--_1asxz9r3);
43
- font-size: var(--_1asxz9ra);
44
- line-height: var(--_1asxz9rb);
45
- color: var(--_1asxz9rd);
46
- cursor: var(--_1asxz9rg);
47
- background: var(--_1asxz9ri);
48
- border-radius: var(--_1asxz9ro);
49
- }
50
- ._1asxz9rq:hover {
51
- --_1asxz9ri: var(--_1asxz9rj);
52
- }
53
- ._1asxz9rq:is(:active, [data-active-80005d53="true"]) {
54
- --_1asxz9ri: var(--_1asxz9rk);
55
- }
56
- ._1asxz9rq:is(:disabled, [aria-disabled="true"]) {
57
- --_1asxz9rd: var(--_1asxz9rf);
58
- --_1asxz9rg: var(--_1asxz9rh);
59
- --_1asxz9ri: var(--_1asxz9rl);
60
- }
61
- ._1asxz9rr {
62
- --_1asxz9rd: var(--_15shvv412);
63
- }
64
- ._1asxz9rs {
65
- grid-area: b;
66
- }
67
- ._1asxz9rt {
68
- display: flex;
69
- grid-area: a;
70
- place-items: center;
71
- }
72
- ._1asxz9rt:empty {
73
- display: none;
74
- }
75
- ._1asxz9ru {
76
- display: flex;
77
- grid-area: c;
78
- place-items: center;
79
- }
80
- ._1asxz9ru:empty {
81
- display: none;
82
- }
83
- ._1asxz9rv {
84
- --_1asxz9r7: calc((var(--_1asxz9rb) - var(--_1asxz9rc)) / 2);
85
- --_1asxz9rd: oklch(0 0 0 / 0%);
86
- --_1asxz9re: inherit;
87
- flex-shrink: 0;
88
- margin-block: var(--_1asxz9r7);
89
- font-size: var(--_1asxz9rc);
90
- color: var(--_1asxz9rd);
91
- }
92
- :is([aria-checked="true"], [aria-selected="true"]) ._1asxz9rv {
93
- --_1asxz9rd: var(--_1asxz9re);
94
- }
95
- ._1asxz9rw {
96
- --_1asxz9r6: var(--_1asxz9r7) var(--_1asxz9r8);
97
- --_1asxz9r7: calc((var(--_15shvv45t) - var(--_15shvv45w)) / 2);
98
- --_1asxz9r8: 0;
99
- --_1asxz9rd: var(--_15shvv463);
100
- --_1asxz9rm: var(--_1asxz9rn) solid;
101
- --_1asxz9rn: var(--_15shvv462);
102
- display: block;
103
- grid-column: span 3;
104
- padding: 0;
105
- margin: var(--_1asxz9r6);
106
- color: var(--_1asxz9rd);
107
- border-block-end: var(--_1asxz9rm);
108
- }
109
- ._1asxz9rx {
110
- display: grid;
111
- grid-template-columns: subgrid;
112
- grid-column: span 3;
113
- gap: inherit;
114
- }
115
- ._1asxz9ry {
116
- --_1asxz9r3: var(--_1asxz9r4) var(--_1asxz9r5);
117
- --_1asxz9r4: calc((var(--_15shvv45t) - var(--_15shvv45w)) / 2);
118
- --_1asxz9r5: var(--_15shvv45u);
119
- --_1asxz9r9: var(--_15shvv460);
120
- --_1asxz9rd: var(--_15shvv461);
121
- position: sticky;
122
- inset-block-start: 0;
123
- grid-column: span 3;
124
- padding: var(--_1asxz9r3);
125
- font: var(--_1asxz9r9);
126
- color: var(--_1asxz9rd);
127
- }
128
- ._1asxz9rz {
129
- display: grid;
130
- grid-template-columns: subgrid;
131
- grid-column: span 3;
132
- gap: inherit;
133
- padding: 0;
134
- margin: 0;
135
- }
@@ -1,8 +0,0 @@
1
- 'use strict';
2
- function createUniqueId(prefix = "", suffix = "") {
3
- const val = crypto.getRandomValues(new Uint8Array(4)).reduce((acc, byte) => acc + byte.toString(16).padStart(2, "0"), "");
4
- return prefix + val + suffix;
5
- }
6
-
7
- export { createUniqueId };
8
- //# sourceMappingURL=createUniqueId.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"createUniqueId.js","sources":["../../../src/util/random/createUniqueId.ts"],"sourcesContent":["export function createUniqueId<\n P extends string | undefined = '',\n S extends string | undefined = '',\n>(prefix: P = '' as P, suffix: S = '' as S) {\n const val = crypto\n .getRandomValues(new Uint8Array(4))\n .reduce((acc, byte) => acc + byte.toString(16).padStart(2, '0'), '')\n\n return (prefix +\n val +\n suffix) as `${NoInfer<P extends string ? P : ''>}${string}${NoInfer<S extends string ? S : ''>}`\n}\n"],"names":[],"mappings":";AAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAGd,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAY,EAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAY,CAAA,CAAA,CAAA,CAAS;AAC1C,CAAA,CAAA,MAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,EACT,eAAA,CAAgB,CAAA,CAAA,CAAA,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAW,CAAC,CAAC,EACjC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAC,CAAA,CAAA,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,GAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,EAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAE,EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAG,GAAG,CAAA,CAAA,CAAG,EAAE,CAAA;AAErE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,IACN,CAAA,CAAA,CAAA,GACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACJ;;"}
@@ -1,23 +0,0 @@
1
- @font-face {
2
- font-family: 'Proxima Nova';
3
- font-weight: 300;
4
- src: url('./proxima-nova-light.woff') format('woff');
5
- }
6
-
7
- @font-face {
8
- font-family: 'Proxima Nova';
9
- font-weight: 400;
10
- src: url('./proxima-nova-regular.woff') format('woff');
11
- }
12
-
13
- @font-face {
14
- font-family: 'Proxima Nova';
15
- font-weight: 600;
16
- src: url('./proxima-nova-semibold.woff') format('woff');
17
- }
18
-
19
- @font-face {
20
- font-family: 'Proxima Nova';
21
- font-weight: 700;
22
- src: url('./proxima-nova-bold.woff') format('woff');
23
- }