ionbase-ui 0.1.0 → 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 (12) hide show
  1. package/README.md +129 -3
  2. package/dist/components/Button.d.ts.map +1 -1
  3. package/dist/components/Button.js +10 -1
  4. package/dist/components/Button.js.map +1 -1
  5. package/dist/components/dom-props.d.ts +51 -0
  6. package/dist/components/dom-props.d.ts.map +1 -0
  7. package/dist/components/dom-props.js +69 -0
  8. package/dist/components/dom-props.js.map +1 -0
  9. package/dist/styles/index.css +21 -1
  10. package/dist/styles/tokens/base.css +8 -8
  11. package/package.json +11 -12
  12. package/LICENSE +0 -21
package/README.md CHANGED
@@ -22,9 +22,135 @@ export function App() {
22
22
  }
23
23
  ```
24
24
 
25
- That single import pulls in the design tokens, the typography (Host Grotesk,
26
- Merriweather, Space Mono), and every component stylesheet. Dark mode is
27
- `data-theme="dark"` on any ancestor — no separate import, no JS.
25
+ That single import pulls in the design tokens, the type scale, and every
26
+ component stylesheet. Dark mode is `data-theme="dark"` on any ancestor — no
27
+ separate import, no JS.
28
+
29
+ It does **not** load any webfonts. That is a required extra step — see below.
30
+
31
+ ## Fonts
32
+
33
+ **Loading the fonts is your app's job.** This package names the families in its
34
+ tokens but never fetches them: your framework knows its own font strategy
35
+ (`next/font`, Fontsource, self-hosted `@font-face`, a corporate CDN) and a
36
+ design system reaching out to a third-party host at CSS parse time is not a
37
+ decision it should make for you.
38
+
39
+ Three families are used by the shipped components and type scale:
40
+
41
+ | Family | Token | Weights | Used by |
42
+ | ----------------- | ----------------------------- | ------------- | --------------------------------------------- |
43
+ | **Host Grotesk** | `--font-family-sans` | 400, 500, 600 | Body, every component, most of the type scale |
44
+ | **STIX Two Text** | `--font-family-serif-display` | 600 | `.ion-text-h1`, `.ion-text-h2` |
45
+ | **Merriweather** | `--font-family-serif` | 700 | `.ion-text-editorial-*` |
46
+
47
+ All three are also used in italic where your content uses italic; none of the
48
+ components require it.
49
+
50
+ `--font-family-mono` (Space Mono, 400/700) also exists as a token, but nothing
51
+ in this package references it. Load it only if you use that variable yourself.
52
+
53
+ ### If you skip this
54
+
55
+ Text degrades, it does not break. Every font token carries a generic fallback:
56
+
57
+ ```css
58
+ --font-family-sans:
59
+ 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
60
+ --font-family-serif: Merriweather, Georgia, 'Times New Roman', serif;
61
+ --font-family-serif-display: 'STIX Two Text', Georgia, 'Times New Roman', serif;
62
+ ```
63
+
64
+ So an app that loads nothing renders in the platform UI font with serif
65
+ headings — wrong, but deliberately wrong in the right category, and legible.
66
+
67
+ ### next/font
68
+
69
+ ```tsx
70
+ // app/layout.tsx
71
+ import { Host_Grotesk, Merriweather, STIX_Two_Text } from 'next/font/google';
72
+ import 'ionbase-ui/styles';
73
+ import './ionbase-fonts.css';
74
+
75
+ const sans = Host_Grotesk({ subsets: ['latin'], variable: '--app-sans' });
76
+ const display = STIX_Two_Text({
77
+ subsets: ['latin'],
78
+ variable: '--app-display',
79
+ });
80
+ const serif = Merriweather({
81
+ subsets: ['latin'],
82
+ weight: ['700'],
83
+ variable: '--app-serif',
84
+ });
85
+
86
+ export default function RootLayout({
87
+ children,
88
+ }: {
89
+ children: React.ReactNode;
90
+ }) {
91
+ return (
92
+ <html
93
+ lang="en"
94
+ className={`${sans.variable} ${display.variable} ${serif.variable}`}
95
+ >
96
+ <body>{children}</body>
97
+ </html>
98
+ );
99
+ }
100
+ ```
101
+
102
+ Host Grotesk and STIX Two Text are variable fonts, so `next/font` covers their
103
+ whole weight range without a `weight` list. Merriweather is requested static
104
+ here because only 700 is used.
105
+
106
+ Then point the IonBase tokens at them:
107
+
108
+ ```css
109
+ /* ionbase-fonts.css — imported AFTER 'ionbase-ui/styles' so it wins */
110
+ :root {
111
+ --font-family-sans: var(--app-sans), system-ui, sans-serif;
112
+ --font-family-serif-display: var(--app-display), Georgia, serif;
113
+ --font-family-serif: var(--app-serif), Georgia, serif;
114
+ }
115
+ ```
116
+
117
+ Import order matters: both files land at the same specificity, so the later one
118
+ wins. Override after, not before.
119
+
120
+ ### Plain @font-face
121
+
122
+ Self-hosting works the same way — declare the faces, then leave the tokens
123
+ alone, because they already name these families:
124
+
125
+ ```css
126
+ @font-face {
127
+ font-family: 'Host Grotesk';
128
+ src: url('/fonts/host-grotesk.woff2') format('woff2-variations');
129
+ font-weight: 400 600;
130
+ font-display: swap;
131
+ }
132
+
133
+ @font-face {
134
+ font-family: 'STIX Two Text';
135
+ src: url('/fonts/stix-two-text-600.woff2') format('woff2');
136
+ font-weight: 600;
137
+ font-display: swap;
138
+ }
139
+
140
+ @font-face {
141
+ font-family: 'Merriweather';
142
+ src: url('/fonts/merriweather-700.woff2') format('woff2');
143
+ font-weight: 700;
144
+ font-display: swap;
145
+ }
146
+ ```
147
+
148
+ No token override is needed in this case: `--font-family-sans` already begins
149
+ with `'Host Grotesk'`, so a matching `@font-face` is picked up automatically.
150
+
151
+ If you would rather use the Google CDN, put the `@import` or `<link>` in your
152
+ own entry — at the top of your own CSS, where `@import` ordering is yours to
153
+ control.
28
154
 
29
155
  ## Icons
30
156
 
package/dist/components/Button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAKL,KAAK,eAAe,EACrB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,WAAY,SAAQ,eAAe,CAAC,QAAQ,CAAC;IAC5D,8CAA8C;IAC9C,OAAO,CAAC,EACJ,eAAe,GACf,iBAAiB,GACjB,WAAW,GACX,UAAU,GACV,aAAa,CAAC;IAClB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,gDAAgD;IAChD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,uFAoElB,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAKL,KAAK,eAAe,EACrB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,WAAY,SAAQ,eAAe,CAAC,QAAQ,CAAC;IAC5D,8CAA8C;IAC9C,OAAO,CAAC,EACJ,eAAe,GACf,iBAAiB,GACjB,WAAW,GACX,UAAU,GACV,aAAa,CAAC;IAClB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,gDAAgD;IAChD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,uFA6ElB,CAAC"}
package/dist/components/Button.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useRef, useImperativeHandle } from 'react';
3
3
  import { useButton, useHover, useFocusRing, mergeProps, } from 'react-aria';
4
+ import { ARIA_BUTTON_NON_DOM_PROPS, omitProps } from './dom-props.js';
4
5
  export const Button = forwardRef((props, forwardedRef) => {
5
6
  const { variant = 'primary-brand', size = 'md', startIcon, endIcon, className: customClassName, children, isDisabled, ...restProps } = props;
6
7
  const domRef = useRef(null);
@@ -37,7 +38,15 @@ export const Button = forwardRef((props, forwardedRef) => {
37
38
  'data-focused': isFocusVisible || undefined,
38
39
  'data-disabled': isDisabled || undefined,
39
40
  };
40
- return (_jsxs("button", { ...restProps, ...mergeProps(buttonProps, hoverProps, focusProps), ...stateAttributes, ref: domRef, className: classNames, children: [startIcon && (_jsx("span", { className: "ion-button__icon-start", children: startIcon })), children && _jsx("span", { className: "ion-button__label", children: children }), endIcon && _jsx("span", { className: "ion-button__icon-end", children: endIcon })] }));
41
+ /*
42
+ * `useButton` above was handed the *full* props object, so it has already
43
+ * taken `onPress` and friends and wired them up. What is left in
44
+ * `restProps` is a duplicate set that React Aria has no further use for —
45
+ * and spreading it would put `onPress` on the DOM node, which React warns
46
+ * about and ignores. See ./dom-props.ts for the list and its provenance.
47
+ */
48
+ const domProps = omitProps(restProps, ARIA_BUTTON_NON_DOM_PROPS);
49
+ return (_jsxs("button", { ...domProps, ...mergeProps(buttonProps, hoverProps, focusProps), ...stateAttributes, ref: domRef, className: classNames, children: [startIcon && (_jsx("span", { className: "ion-button__icon-start", children: startIcon })), children && _jsx("span", { className: "ion-button__label", children: children }), endIcon && _jsx("span", { className: "ion-button__icon-end", children: endIcon })] }));
41
50
  });
42
51
  Button.displayName = 'Button';
43
52
  //# sourceMappingURL=Button.js.map
package/dist/components/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EACL,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,GAEX,MAAM,YAAY,CAAC;AAsBpB,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,OAAO,GAAG,eAAe,EACzB,IAAI,GAAG,IAAI,EACX,SAAS,EACT,OAAO,EACP,SAAS,EAAE,eAAe,EAC1B,QAAQ,EACR,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC/C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAE5D;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;IAC3D,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtD,MAAM,UAAU,GAAG;QACjB,YAAY;QACZ,eAAe,OAAO,EAAE;QACxB,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,eAAe,IAAI,EAAE;KACtB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,uEAAuE;IACvE,qEAAqE;IACrE,gCAAgC;IAChC,MAAM,eAAe,GAAG;QACtB,cAAc,EAAE,SAAS,IAAI,SAAS;QACtC,cAAc,EAAE,SAAS,IAAI,SAAS;QACtC,cAAc,EAAE,cAAc,IAAI,SAAS;QAC3C,eAAe,EAAE,UAAU,IAAI,SAAS;KACzC,CAAC;IAEF,OAAO,CACL,qBACM,SAAS,KACT,UAAU,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,KAC/C,eAAe,EACnB,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,UAAU,aAEpB,SAAS,IAAI,CACZ,eAAM,SAAS,EAAC,wBAAwB,YAAE,SAAS,GAAQ,CAC5D,EACA,QAAQ,IAAI,eAAM,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAQ,EACjE,OAAO,IAAI,eAAM,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAQ,IAC5D,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EACL,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,GAEX,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAsBtE,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,OAAO,GAAG,eAAe,EACzB,IAAI,GAAG,IAAI,EACX,SAAS,EACT,OAAO,EACP,SAAS,EAAE,eAAe,EAC1B,QAAQ,EACR,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC/C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAE5D;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;IAC3D,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtD,MAAM,UAAU,GAAG;QACjB,YAAY;QACZ,eAAe,OAAO,EAAE;QACxB,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,eAAe,IAAI,EAAE;KACtB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,uEAAuE;IACvE,qEAAqE;IACrE,gCAAgC;IAChC,MAAM,eAAe,GAAG;QACtB,cAAc,EAAE,SAAS,IAAI,SAAS;QACtC,cAAc,EAAE,SAAS,IAAI,SAAS;QACtC,cAAc,EAAE,cAAc,IAAI,SAAS;QAC3C,eAAe,EAAE,UAAU,IAAI,SAAS;KACzC,CAAC;IAEF;;;;;;OAMG;IACH,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,EAAE,yBAAyB,CAAC,CAAC;IAEjE,OAAO,CACL,qBACM,QAAQ,KACR,UAAU,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,KAC/C,eAAe,EACnB,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,UAAU,aAEpB,SAAS,IAAI,CACZ,eAAM,SAAS,EAAC,wBAAwB,YAAE,SAAS,GAAQ,CAC5D,EACA,QAAQ,IAAI,eAAM,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAQ,EACjE,OAAO,IAAI,eAAM,SAAS,EAAC,sBAAsB,YAAE,OAAO,GAAQ,IAC5D,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
package/dist/components/dom-props.d.ts ADDED
@@ -0,0 +1,51 @@
1
+ /**
2
+ * React Aria prop types are not DOM prop types.
3
+ *
4
+ * A component that extends `AriaButtonProps` (or any other `Aria*Props`) and
5
+ * then spreads its leftover props onto an element ships those extras straight
6
+ * to the DOM. React logs `Unknown event handler property \`onPress\`. It will
7
+ * be ignored.` for the handlers and renders the rest as stray attributes — and
8
+ * nothing in this repo's build, lint, typecheck or Storybook run sees it,
9
+ * because it is a runtime console warning in the consumer's app.
10
+ *
11
+ * The hooks already read these off the *full* props object, so dropping them
12
+ * from the spread costs nothing: `useButton(props, ref)` still receives
13
+ * `onPress` and still fires it.
14
+ */
15
+ /**
16
+ * Every `AriaButtonProps<'button'>` member that must not reach a `<button>`.
17
+ *
18
+ * Typed as `keyof AriaButtonProps<'button'>` on purpose: if a React Aria
19
+ * upgrade renames or removes one of these, this array stops compiling rather
20
+ * than silently going stale. That is the whole point — the bug this fixes was
21
+ * a hand-maintained mental list drifting from the library's actual type.
22
+ *
23
+ * Sources, as of react-aria 3.50:
24
+ * PressEvents onPress, onPressStart, onPressEnd, onPressChange,
25
+ * onPressUp
26
+ * FocusEvents onFocusChange
27
+ * FocusableDOMProps excludeFromTabOrder
28
+ * AriaBaseButtonProps preventFocusOnPress
29
+ * LinkButtonProps elementType, href, target, rel
30
+ *
31
+ * `onClick` is deliberately absent: it is a real DOM handler, and `useButton`
32
+ * returns its own `onClick` in `buttonProps`, which is spread afterwards and
33
+ * wins. Also absent are the many members that *are* valid button attributes —
34
+ * `type`, `name`, `value`, `form*`, `autoFocus`, `id`, `aria-*`, `onFocus`,
35
+ * `onBlur`, `onKeyDown`, `onKeyUp` — those must keep flowing through.
36
+ *
37
+ * The `LinkButtonProps` four are here because this Button always renders a
38
+ * `<button>`. `elementType` would draw React's unknown-prop warning; `href`,
39
+ * `target` and `rel` would render as attributes a `<button>` does nothing
40
+ * with.
41
+ */
42
+ export declare const ARIA_BUTTON_NON_DOM_PROPS: readonly ["onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "onFocusChange", "excludeFromTabOrder", "preventFocusOnPress", "elementType", "href", "target", "rel"];
43
+ /**
44
+ * Returns `props` without `keys`, leaving `props` untouched.
45
+ *
46
+ * Preferred over a destructure with a long list of ignored bindings: the list
47
+ * lives next to the type it is derived from instead of being retyped in every
48
+ * component, and `no-unused-vars` has nothing to complain about.
49
+ */
50
+ export declare function omitProps<T extends object, K extends readonly PropertyKey[]>(props: T, keys: K): Omit<T, K[number]>;
51
+ //# sourceMappingURL=dom-props.d.ts.map
package/dist/components/dom-props.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dom-props.d.ts","sourceRoot":"","sources":["../../src/components/dom-props.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,yBAAyB,yLAa2B,CAAC;AAElE;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,SAAS,WAAW,EAAE,EAC1E,KAAK,EAAE,CAAC,EACR,IAAI,EAAE,CAAC,GACN,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAIpB"}
package/dist/components/dom-props.js ADDED
@@ -0,0 +1,69 @@
1
+ /**
2
+ * React Aria prop types are not DOM prop types.
3
+ *
4
+ * A component that extends `AriaButtonProps` (or any other `Aria*Props`) and
5
+ * then spreads its leftover props onto an element ships those extras straight
6
+ * to the DOM. React logs `Unknown event handler property \`onPress\`. It will
7
+ * be ignored.` for the handlers and renders the rest as stray attributes — and
8
+ * nothing in this repo's build, lint, typecheck or Storybook run sees it,
9
+ * because it is a runtime console warning in the consumer's app.
10
+ *
11
+ * The hooks already read these off the *full* props object, so dropping them
12
+ * from the spread costs nothing: `useButton(props, ref)` still receives
13
+ * `onPress` and still fires it.
14
+ */
15
+ /**
16
+ * Every `AriaButtonProps<'button'>` member that must not reach a `<button>`.
17
+ *
18
+ * Typed as `keyof AriaButtonProps<'button'>` on purpose: if a React Aria
19
+ * upgrade renames or removes one of these, this array stops compiling rather
20
+ * than silently going stale. That is the whole point — the bug this fixes was
21
+ * a hand-maintained mental list drifting from the library's actual type.
22
+ *
23
+ * Sources, as of react-aria 3.50:
24
+ * PressEvents onPress, onPressStart, onPressEnd, onPressChange,
25
+ * onPressUp
26
+ * FocusEvents onFocusChange
27
+ * FocusableDOMProps excludeFromTabOrder
28
+ * AriaBaseButtonProps preventFocusOnPress
29
+ * LinkButtonProps elementType, href, target, rel
30
+ *
31
+ * `onClick` is deliberately absent: it is a real DOM handler, and `useButton`
32
+ * returns its own `onClick` in `buttonProps`, which is spread afterwards and
33
+ * wins. Also absent are the many members that *are* valid button attributes —
34
+ * `type`, `name`, `value`, `form*`, `autoFocus`, `id`, `aria-*`, `onFocus`,
35
+ * `onBlur`, `onKeyDown`, `onKeyUp` — those must keep flowing through.
36
+ *
37
+ * The `LinkButtonProps` four are here because this Button always renders a
38
+ * `<button>`. `elementType` would draw React's unknown-prop warning; `href`,
39
+ * `target` and `rel` would render as attributes a `<button>` does nothing
40
+ * with.
41
+ */
42
+ export const ARIA_BUTTON_NON_DOM_PROPS = [
43
+ 'onPress',
44
+ 'onPressStart',
45
+ 'onPressEnd',
46
+ 'onPressChange',
47
+ 'onPressUp',
48
+ 'onFocusChange',
49
+ 'excludeFromTabOrder',
50
+ 'preventFocusOnPress',
51
+ 'elementType',
52
+ 'href',
53
+ 'target',
54
+ 'rel',
55
+ ];
56
+ /**
57
+ * Returns `props` without `keys`, leaving `props` untouched.
58
+ *
59
+ * Preferred over a destructure with a long list of ignored bindings: the list
60
+ * lives next to the type it is derived from instead of being retyped in every
61
+ * component, and `no-unused-vars` has nothing to complain about.
62
+ */
63
+ export function omitProps(props, keys) {
64
+ const result = { ...props };
65
+ for (const key of keys)
66
+ delete result[key];
67
+ return result;
68
+ }
69
+ //# sourceMappingURL=dom-props.js.map
package/dist/components/dom-props.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dom-props.js","sourceRoot":"","sources":["../../src/components/dom-props.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,SAAS;IACT,cAAc;IACd,YAAY;IACZ,eAAe;IACf,WAAW;IACX,eAAe;IACf,qBAAqB;IACrB,qBAAqB;IACrB,aAAa;IACb,MAAM;IACN,QAAQ;IACR,KAAK;CAC0D,CAAC;AAElE;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CACvB,KAAQ,EACR,IAAO;IAEP,MAAM,MAAM,GAAG,EAAE,GAAG,KAAK,EAAkC,CAAC;IAC5D,KAAK,MAAM,GAAG,IAAI,IAAI;QAAE,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3C,OAAO,MAA4B,CAAC;AACtC,CAAC"}
package/dist/styles/index.css CHANGED
@@ -1,4 +1,24 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Merriweather:ital,wght@0,300..900;1,300..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&display=swap');
1
+ /*
2
+ * NO @import of a webfont host here, deliberately. Loading the fonts is the
3
+ * consuming app's job — see "Fonts" in the README.
4
+ *
5
+ * This file used to open with a Google Fonts @import, and it was broken for
6
+ * every consumer using a bundler. CSS requires @import to precede all other
7
+ * rules; a bundler that concatenates stylesheets puts other rules ahead of it,
8
+ * and the browser then drops it silently. Confirmed in a Next.js 16 /
9
+ * Turbopack app: the built bundle contained no @import and no
10
+ * `fonts.googleapis` string at all, so no font ever loaded.
11
+ *
12
+ * It failed quietly rather than loudly. The font tokens named bare families
13
+ * with no generic fallback, so the unresolved families fell through to the
14
+ * browser default and the whole system rendered in a default serif — which
15
+ * reads as a token bug, not a font-loading one. The fallbacks added to
16
+ * token-overrides.json are what makes that failure mode legible.
17
+ *
18
+ * Reaching a third-party host at CSS parse time was also the wrong default
19
+ * regardless: it is a render-blocking request the consumer did not opt into,
20
+ * it bypasses next/font and friends, and it hands visitor IPs to Google.
21
+ */
2
22
  @import url('./tokens/index.css');
3
23
  @import url('./button.css');
4
24
  @import url('./tabs.css');
package/dist/styles/tokens/base.css CHANGED
@@ -122,14 +122,14 @@
122
122
  --font-size-56: 56px;
123
123
  --font-size-64: 64px;
124
124
  --font-size-72: 72px;
125
- --font-family-host-grotesk: Host Grotesk;
126
- --font-family-merriweather: Merriweather;
127
- --font-family-space-mono: Space Mono;
128
- --font-family-stix-two-text: STIX Two Text;
129
- --font-family-sans: Host Grotesk;
130
- --font-family-serif: Merriweather;
131
- --font-family-mono: Space Mono;
132
- --font-family-serif-display: STIX Two Text;
125
+ --font-family-host-grotesk: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
126
+ --font-family-merriweather: Merriweather, Georgia, "Times New Roman", serif;
127
+ --font-family-space-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
128
+ --font-family-stix-two-text: "STIX Two Text", Georgia, "Times New Roman", serif;
129
+ --font-family-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
130
+ --font-family-serif: Merriweather, Georgia, "Times New Roman", serif;
131
+ --font-family-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
132
+ --font-family-serif-display: "STIX Two Text", Georgia, "Times New Roman", serif;
133
133
  --font-weight-400: 400;
134
134
  --font-weight-500: 500;
135
135
  --font-weight-600: 600;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ionbase-ui",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -14,8 +14,7 @@
14
14
  "./styles": "./dist/styles/index.css",
15
15
  "./styles/*": "./dist/styles/*",
16
16
  "./tokens": "./dist/styles/tokens/index.css",
17
- "./tokens/*": "./dist/styles/tokens/*",
18
- "./src/*": "./src/*"
17
+ "./tokens/*": "./dist/styles/tokens/*"
19
18
  },
20
19
  "keywords": [
21
20
  "design-system",
@@ -45,6 +44,14 @@
45
44
  "publishConfig": {
46
45
  "access": "public"
47
46
  },
47
+ "scripts": {
48
+ "dev": "tsc --watch",
49
+ "build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs",
50
+ "typecheck": "tsc --noEmit",
51
+ "lint": "eslint . && stylelint \"src/styles/*.css\"",
52
+ "format": "prettier --check .",
53
+ "icons:verify": "node scripts/verify-icons.mjs"
54
+ },
48
55
  "peerDependencies": {
49
56
  "react": "^18.0.0 || ^19.0.0",
50
57
  "react-dom": "^18.0.0 || ^19.0.0"
@@ -58,13 +65,5 @@
58
65
  "//devDependencies": "lucide-react is a devDependency, not a dependency: nothing in src/ imports it. It is here only so scripts/verify-icons.mjs can compare the installed icon set against the Figma page. Consumers pick their own icon library. There is deliberately NO dependency on @ionbase-ui/tokens — it is private and would publish as a version that does not exist on npm. Build ordering is expressed in turbo.json instead.",
59
66
  "devDependencies": {
60
67
  "lucide-react": "^1.27.0"
61
- },
62
- "scripts": {
63
- "dev": "tsc --watch",
64
- "build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs",
65
- "typecheck": "tsc --noEmit",
66
- "lint": "eslint . && stylelint \"src/styles/*.css\"",
67
- "format": "prettier --check .",
68
- "icons:verify": "node scripts/verify-icons.mjs"
69
68
  }
70
- }
69
+ }
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2026 IonBase
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.