@akonwi/mica 0.2.1 → 0.2.2

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 (2) hide show
  1. package/package.json +8 -4
  2. package/types/react.d.ts +64 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akonwi/mica",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "description": "Custom elements. Native behavior. Nearly no JavaScript.",
5
5
  "keywords": [
6
6
  "css",
@@ -27,7 +27,10 @@
27
27
  "./select.js": "./select.js",
28
28
  "./tabs.js": "./tabs.js",
29
29
  "./toast.js": "./toast.js",
30
- "./combobox.js": "./combobox.js"
30
+ "./combobox.js": "./combobox.js",
31
+ "./types/react": {
32
+ "types": "./types/react.d.ts"
33
+ }
31
34
  },
32
35
  "files": [
33
36
  "mica.css",
@@ -37,7 +40,8 @@
37
40
  "select.js",
38
41
  "tabs.js",
39
42
  "toast.js",
40
- "combobox.js"
43
+ "combobox.js",
44
+ "types/react.d.ts"
41
45
  ],
42
46
  "sideEffects": true,
43
47
  "devDependencies": {
@@ -51,4 +55,4 @@
51
55
  "snapshot:check": "bun tools/snapshot.ts --check",
52
56
  "snapshot:setup": "playwright install chromium webkit"
53
57
  }
54
- }
58
+ }
@@ -0,0 +1,64 @@
1
+ // React JSX typings for mica's custom elements.
2
+ //
3
+ // React 19 supports custom elements natively; this file only teaches
4
+ // TypeScript the tags and their styling attributes. It is the typed
5
+ // mirror of the attribute selectors in mica.css — when an element or
6
+ // attribute changes there, it changes here.
7
+ //
8
+ // Usage (tsconfig `include` or a triple-slash reference):
9
+ // /// <reference types="@akonwi/mica/types/react" />
10
+ // or copy the file alongside a vendored mica.css.
11
+
12
+ import type { DetailedHTMLProps, HTMLAttributes } from 'react'
13
+
14
+ type Gap = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
15
+ type Align = 'start' | 'center' | 'end' | 'stretch'
16
+ type Justify = 'start' | 'center' | 'end' | 'between' | 'stretch'
17
+ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
18
+
19
+ type MicaElement<Extra = Record<never, never>> = DetailedHTMLProps<
20
+ HTMLAttributes<HTMLElement>,
21
+ HTMLElement
22
+ > &
23
+ Extra
24
+
25
+ type StackProps = {
26
+ gap?: Gap
27
+ align?: Align
28
+ justify?: Justify
29
+ }
30
+
31
+ declare module 'react' {
32
+ namespace JSX {
33
+ interface IntrinsicElements {
34
+ // layout
35
+ 'm-vstack': MicaElement<StackProps>
36
+ 'm-hstack': MicaElement<StackProps & { wrap?: boolean }>
37
+ 'm-zstack': MicaElement
38
+ 'm-center': MicaElement
39
+ 'm-box': MicaElement
40
+ 'm-grid': MicaElement<{ min?: Breakpoint; gap?: Gap }>
41
+ 'm-sidecar': MicaElement<{ side?: 'start' | 'end'; gap?: Gap }>
42
+ 'm-switcher': MicaElement<{ threshold?: Breakpoint; gap?: Gap }>
43
+ 'm-reel': MicaElement<{ gap?: Gap }>
44
+ 'm-frame': MicaElement<{
45
+ ratio?: 'square' | '16:9' | '9:16' | '4:3' | '3:2' | '2:1'
46
+ }>
47
+ 'm-cover': MicaElement<{
48
+ gap?: Gap
49
+ pad?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
50
+ }>
51
+
52
+ // components
53
+ 'm-segmented': MicaElement
54
+ 'm-tabs': MicaElement
55
+ 'm-badge': MicaElement<{
56
+ variant?: 'primary' | 'success' | 'warning' | 'danger'
57
+ count?: boolean
58
+ }>
59
+ 'm-field': MicaElement
60
+ 'm-error': MicaElement<{ active?: boolean }>
61
+ 'm-combobox': MicaElement
62
+ }
63
+ }
64
+ }