ionbase-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 IonBase
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+# ionbase-ui
+
+The IonBase Design System: accessible React components, their stylesheets, and
+the design tokens they are built on — in one package.
+
+```bash
+npm i ionbase-ui
+```
+
+React 18 or 19 is a peer dependency.
+
+## Usage
+
+Import the stylesheet once, at your app entry:
+
+```tsx
+import 'ionbase-ui/styles';
+import { Button } from 'ionbase-ui';
+
+export function App() {
+  return <Button intent="primary">Save</Button>;
+}
+```
+
+That single import pulls in the design tokens, the typography (Host Grotesk,
+Merriweather, Space Mono), and every component stylesheet. Dark mode is
+`data-theme="dark"` on any ancestor — no separate import, no JS.
+
+## Icons
+
+The system does not ship an icon set. `Icon` takes the icon as a prop, so any
+SVG component works — [lucide-react](https://lucide.dev), heroicons,
+react-icons, or your own:
+
+```tsx
+import { Icon } from 'ionbase-ui';
+import { Plus } from 'lucide-react';
+
+<Icon as={Plus} size="sm" />
+<Icon as={Plus} label="Add item" />   // meaningful icon, gets an a11y name
+```
+
+Omit `label` for decorative icons and they are hidden from assistive tech
+instead of announced twice. `size` picks a rung on the `icon-size` ladder —
+`xs` 12, `sm` 16, `md` 20, `lg` 24, `xl` 32 — or takes any CSS length. Omit it
+and the icon inherits the surrounding font size, which is what lets an icon sit
+correctly inside a Button.
+
+## Entry points
+
+| Import                | What it is                                     |
+| --------------------- | ---------------------------------------------- |
+| `ionbase-ui`          | Components, `Icon`, and the `tokens` object    |
+| `ionbase-ui/styles`   | Everything: tokens + typography + components   |
+| `ionbase-ui/styles/*` | One component stylesheet, e.g. `button.css`    |
+| `ionbase-ui/tokens`   | Token custom properties only, no component CSS |
+| `ionbase-ui/tokens/*` | One token layer, e.g. `theme-dark.css`         |
+
+Token values are also available as JavaScript, as `var(--…)` references:
+
+```ts
+import { tokens } from 'ionbase-ui';
+```
+
+## Tokens come from Figma
+
+Every token name and value in this package is generated from the IonBase Figma
+file. They are not authored here and should not be edited here — see
+[the repo](https://github.com/raza-ahmed/ionbase-design-system) for the
+pipeline and its gates.
+
+## License
+
+MIT

package/dist/Icon.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+/**
+ * Any component that renders an SVG element and accepts SVG props.
+ *
+ * Typed structurally rather than as lucide-react's `LucideIcon`, so the icon
+ * set is the consumer's choice: lucide, heroicons, react-icons, a hand-rolled
+ * SVG component. Naming one library in the type would have made it a
+ * dependency of every install for the sake of a type that is erased at build
+ * time.
+ */
+export type IconComponent = React.ComponentType<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
+/**
+ * The `icon-size` ladder, verbatim.
+ *
+ * These map one-to-one onto the Semantics tokens `icon-size/xs...xl`, so `md`
+ * here and `icon-size/md` in Figma are the same 20px. There is no separate
+ * decision being made in this file.
+ *
+ * BREAKING, AND DELIBERATELY SO
+ *
+ * This used to be two sizes where `sm` was 16 and `md` was **24**. That made
+ * `md` mean `icon-size/lg`, so the one word meant two different things
+ * depending on whether you were reading code or Figma — the exact ambiguity the
+ * ladder exists to remove. Callers who want the old `md` now ask for `lg`.
+ *
+ * Nothing inside the system depended on it: Button and Tabs size their icons in
+ * CSS from `--icon-size-*`, never through this prop.
+ */
+declare const SIZE_TOKENS: {
+    readonly xs: "var(--icon-size-xs)";
+    readonly sm: "var(--icon-size-sm)";
+    readonly md: "var(--icon-size-md)";
+    readonly lg: "var(--icon-size-lg)";
+    readonly xl: "var(--icon-size-xl)";
+};
+export type IconSize = keyof typeof SIZE_TOKENS;
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+    /**
+     * The icon component to render, e.g. `import { Plus } from 'lucide-react'`.
+     * Any SVG component works — the design system does not ship an icon set.
+     */
+    as: IconComponent;
+    /**
+     * A rung on the `icon-size` ladder — `xs` 12, `sm` 16, `md` 20, `lg` 24,
+     * `xl` 32 — or any CSS length for a one-off. Omit to inherit the surrounding
+     * font size, which is what lets an icon sit correctly inside a Button without
+     * the Button having to know anything about this component.
+     */
+    size?: IconSize | (string & {});
+    /**
+     * Accessible name. Provide it when the icon carries meaning on its own — an
+     * icon-only button, a status marker. Omit it for decoration next to a visible
+     * label, and the icon is hidden from assistive tech instead of read out twice.
+     */
+    label?: string;
+}
+/**
+ * Wrapper that applies the design system's icon sizing and accessibility
+ * defaults to whatever icon component you hand it.
+ *
+ *   import { Plus } from 'lucide-react';
+ *   <Icon as={Plus} size="sm" />
+ *   <Icon as={Plus} label="Add item" />   // meaningful, gets an a11y name
+ *
+ * Takes the icon as a prop rather than re-exporting a set: a barrel of a
+ * thousand-plus icons defeats tree-shaking in several bundlers, and pinning one
+ * icon library would force it on every consumer. You import the one icon you
+ * need, from whichever library you use, and it is the only one bundled.
+ */
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/dist/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAC7C,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CACnE,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,WAAW;;;;;;CAMP,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,WAAW,CAAC;AAEhD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IAC3E;;;OAGG;IACH,EAAE,EAAE,aAAa,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI,iFAqBhB,CAAC"}

package/dist/Icon.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * The `icon-size` ladder, verbatim.
+ *
+ * These map one-to-one onto the Semantics tokens `icon-size/xs...xl`, so `md`
+ * here and `icon-size/md` in Figma are the same 20px. There is no separate
+ * decision being made in this file.
+ *
+ * BREAKING, AND DELIBERATELY SO
+ *
+ * This used to be two sizes where `sm` was 16 and `md` was **24**. That made
+ * `md` mean `icon-size/lg`, so the one word meant two different things
+ * depending on whether you were reading code or Figma — the exact ambiguity the
+ * ladder exists to remove. Callers who want the old `md` now ask for `lg`.
+ *
+ * Nothing inside the system depended on it: Button and Tabs size their icons in
+ * CSS from `--icon-size-*`, never through this prop.
+ */
+const SIZE_TOKENS = {
+    xs: 'var(--icon-size-xs)',
+    sm: 'var(--icon-size-sm)',
+    md: 'var(--icon-size-md)',
+    lg: 'var(--icon-size-lg)',
+    xl: 'var(--icon-size-xl)',
+};
+/**
+ * Wrapper that applies the design system's icon sizing and accessibility
+ * defaults to whatever icon component you hand it.
+ *
+ *   import { Plus } from 'lucide-react';
+ *   <Icon as={Plus} size="sm" />
+ *   <Icon as={Plus} label="Add item" />   // meaningful, gets an a11y name
+ *
+ * Takes the icon as a prop rather than re-exporting a set: a barrel of a
+ * thousand-plus icons defeats tree-shaking in several bundlers, and pinning one
+ * icon library would force it on every consumer. You import the one icon you
+ * need, from whichever library you use, and it is the only one bundled.
+ */
+export const Icon = forwardRef(({ as: Component, size, label, className, ...rest }, ref) => {
+    const resolved = size === undefined ? '1em' : (SIZE_TOKENS[size] ?? size);
+    return (_jsx(Component, { ref: ref, width: resolved, height: resolved, 
+        // Lucide strokes scale with the box; currentColor keeps the icon tied to
+        // whatever text colour it sits in, so it themes for free.
+        color: "currentColor", className: ['ion-icon', className].filter(Boolean).join(' '), ...(label
+            ? { role: 'img', 'aria-label': label }
+            : { 'aria-hidden': true, focusable: false }), ...rest }));
+});
+Icon.displayName = 'Icon';
+//# sourceMappingURL=Icon.js.map

package/dist/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAe1C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,qBAAqB;IACzB,EAAE,EAAE,qBAAqB;IACzB,EAAE,EAAE,qBAAqB;IACzB,EAAE,EAAE,qBAAqB;IACzB,EAAE,EAAE,qBAAqB;CACjB,CAAC;AAyBX;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,MAAM,QAAQ,GACZ,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAgB,CAAC,IAAI,IAAI,CAAC,CAAC;IAEvE,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,QAAQ;QAChB,yEAAyE;QACzE,0DAA0D;QAC1D,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACxD,CAAC,KAAK;YACR,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE;YACtC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,KAC1C,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/components/Avatar.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export type AvatarSize = 'mini' | 'sm' | 'md' | 'lg';
+export type AvatarShape = 'circle' | 'square';
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Matches the Figma `Size` variant: Mini 24, Small 32, Medium 40, Large 48. */
+    size?: AvatarSize;
+    /** Matches the Figma `Shape` variant. */
+    shape?: AvatarShape;
+    /** Image source. Figma's `Type=Image`. */
+    src?: string;
+    /**
+     * Describes the person, not the picture. Falls back to `initials` so the
+     * avatar is never announced as an unlabelled image.
+     */
+    alt?: string;
+    /** Figma's `Type=Character`. Rendered when there is no `src`. */
+    initials?: string;
+    /** Figma's `Type=Icon`. Rendered when there is neither `src` nor `initials`. */
+    icon?: React.ReactNode;
+}
+/**
+ * Avatar picks its content the way Figma's `Type` variant does, but by
+ * precedence rather than by a prop: image, then initials, then icon. A caller
+ * passing `src` and `initials` gets the image with the initials as its alt
+ * fallback, which is what you want when the image 404s.
+ *
+ * It is a `<span>`, not a `<div>`, so it can sit inline beside text without the
+ * caller fighting a block element.
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: AvatarSize;
+    /** Cap on avatars shown; the remainder becomes a `+N` overflow avatar. */
+    max?: number;
+    shape?: AvatarShape;
+    children?: React.ReactNode;
+}
+/**
+ * AvatarGroup overlaps its children by a quarter of the avatar size, matching
+ * Figma's -6 / -8 / -10 / -12 gaps at Mini / Small / Medium / Large.
+ *
+ * It passes `size` and `shape` down rather than trusting the caller to set them
+ * on every child: the overlap is computed from the size, so a mismatched child
+ * would overlap by the wrong amount and the error would look like a design bug
+ * rather than a wiring one.
+ *
+ * Children render in source order because that is Figma's stacking: each avatar
+ * paints over the one before it, so the `+N` overflow ends up on top. Later
+ * siblings paint later, so this needs no z-index.
+ */
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACxE,gFAAgF;IAChF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,qFA8ClB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,yFA6CvB,CAAC"}

package/dist/components/Avatar.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+/**
+ * Avatar picks its content the way Figma's `Type` variant does, but by
+ * precedence rather than by a prop: image, then initials, then icon. A caller
+ * passing `src` and `initials` gets the image with the initials as its alt
+ * fallback, which is what you want when the image 404s.
+ *
+ * It is a `<span>`, not a `<div>`, so it can sit inline beside text without the
+ * caller fighting a block element.
+ */
+export const Avatar = forwardRef(({ size = 'md', shape = 'circle', src, alt, initials, icon, className, ...rest }, ref) => {
+    const classNames = [
+        'ion-avatar',
+        size !== 'md' ? `ion-avatar--${size}` : '',
+        shape === 'circle' ? 'ion-avatar--circle' : '',
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const label = alt ?? initials;
+    return (_jsx("span", { ...rest, ref: ref, className: classNames, ...(!src && label ? { role: 'img', 'aria-label': label } : {}), children: src ? (_jsx("img", { className: "ion-avatar__image", src: src, alt: label ?? '' })) : initials ? (_jsx("span", { "aria-hidden": "true", children: initials })) : icon ? (_jsx("span", { className: "ion-avatar__icon", "aria-hidden": "true", children: icon })) : null }));
+});
+Avatar.displayName = 'Avatar';
+/**
+ * AvatarGroup overlaps its children by a quarter of the avatar size, matching
+ * Figma's -6 / -8 / -10 / -12 gaps at Mini / Small / Medium / Large.
+ *
+ * It passes `size` and `shape` down rather than trusting the caller to set them
+ * on every child: the overlap is computed from the size, so a mismatched child
+ * would overlap by the wrong amount and the error would look like a design bug
+ * rather than a wiring one.
+ *
+ * Children render in source order because that is Figma's stacking: each avatar
+ * paints over the one before it, so the `+N` overflow ends up on top. Later
+ * siblings paint later, so this needs no z-index.
+ */
+export const AvatarGroup = forwardRef(({ size = 'md', shape = 'circle', max, className, children, ...rest }, ref) => {
+    const items = React.Children.toArray(children).filter(React.isValidElement);
+    const shown = max !== undefined ? items.slice(0, max) : items;
+    const overflow = items.length - shown.length;
+    const sized = shown.map((child, i) => React.cloneElement(child, {
+        size,
+        shape,
+        key: child.key ?? i,
+    }));
+    if (overflow > 0) {
+        sized.push(_jsx(Avatar, { size: size, shape: shape, initials: `+${overflow}`, alt: `${overflow} more` }, "__overflow"));
+    }
+    return (_jsx("div", { ...rest, ref: ref, className: [
+            'ion-avatar-group',
+            `ion-avatar-group--${size}`,
+            className || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: sized }));
+});
+AvatarGroup.displayName = 'AvatarGroup';
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"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"}

package/dist/components/Badge.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type BadgeIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'information';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Matches the Figma `Intent` variant. */
+    intent?: BadgeIntent;
+    /**
+     * Show the leading dot marker. Figma's `Show Dot` boolean.
+     * The dot inherits the intent's foreground colour, so it needs no prop.
+     */
+    dot?: boolean;
+    /** Leading icon. Figma's `Show Icon` + `Icon` swap. Mutually exclusive with `dot`. */
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * Badge is presentational — no role, no interaction. React Aria has nothing to
+ * offer here, so this is a plain span rather than a hook wrapper for its own
+ * sake.
+ *
+ * It carries no `status` or `alert` role on purpose: a badge is a label on
+ * something else, and announcing it as a live region would interrupt screen
+ * reader users on every render. Wrap it yourself if the value genuinely changes
+ * and matters.
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,WAAW,GACrB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,sFAAsF;IACtF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,oFAcjB,CAAC"}

package/dist/components/Badge.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * Badge is presentational — no role, no interaction. React Aria has nothing to
+ * offer here, so this is a plain span rather than a hook wrapper for its own
+ * sake.
+ *
+ * It carries no `status` or `alert` role on purpose: a badge is a label on
+ * something else, and announcing it as a live region would interrupt screen
+ * reader users on every render. Wrap it yourself if the value genuinely changes
+ * and matters.
+ */
+export const Badge = forwardRef(({ intent = 'neutral', dot, icon, className, children, ...rest }, ref) => (_jsxs("span", { ...rest, ref: ref, className: ['ion-badge', `ion-badge--${intent}`, className]
+        .filter(Boolean)
+        .join(' '), children: [dot && _jsx("span", { className: "ion-badge__dot", "aria-hidden": "true" }), !dot && icon, children] })));
+Badge.displayName = 'Badge';
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAkB1C;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACxE,mBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,WAAW,EAAE,cAAc,MAAM,EAAE,EAAE,SAAS,CAAC;SACxD,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,aAEX,GAAG,IAAI,eAAM,SAAS,EAAC,gBAAgB,iBAAa,MAAM,GAAG,EAC7D,CAAC,GAAG,IAAI,IAAI,EACZ,QAAQ,IACJ,CACR,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/components/Button.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type AriaButtonProps } from 'react-aria';
+export interface ButtonProps extends AriaButtonProps<'button'> {
+    /** The visual style variant of the button. */
+    variant?: 'primary-brand' | 'primary-neutral' | 'secondary' | 'tertiary' | 'destructive';
+    /** The size of the button. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Optional icon to render before the label. */
+    startIcon?: React.ReactNode;
+    /** Optional icon to render after the label. */
+    endIcon?: React.ReactNode;
+    /** Additional CSS class names. */
+    className?: string;
+    /** Children element to render inside the button. */
+    children?: React.ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -0,0 +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"}

package/dist/components/Button.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useButton, useHover, useFocusRing, mergeProps, } from 'react-aria';
+export const Button = forwardRef((props, forwardedRef) => {
+    const { variant = 'primary-brand', size = 'md', startIcon, endIcon, className: customClassName, children, isDisabled, ...restProps } = props;
+    const domRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => domRef.current);
+    const { buttonProps, isPressed } = useButton(props, domRef);
+    /*
+     * Interaction state comes from React Aria rather than CSS pseudo-classes.
+     *
+     * `useHover` is pointer-aware: native `:hover` latches on touch devices, so
+     * a tapped button stays visually hovered until you tap elsewhere.
+     * `useFocusRing` distinguishes keyboard focus from a mouse click, so the
+     * ring appears when navigating but not when clicking.
+     *
+     * The CSS keeps its `:hover` / `:focus-visible` rules so the stylesheet
+     * still works without React — these attributes refine that, they do not
+     * replace it.
+     */
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const classNames = [
+        'ion-button',
+        `ion-button--${variant}`,
+        size !== 'md' ? `ion-button--${size}` : '',
+        customClassName || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // `undefined` rather than `false` so the attribute is omitted entirely
+    // instead of rendering data-hovered="false", which would still match
+    // an `[data-hovered]` selector.
+    const stateAttributes = {
+        'data-hovered': isHovered || undefined,
+        'data-pressed': isPressed || undefined,
+        'data-focused': isFocusVisible || undefined,
+        'data-disabled': isDisabled || undefined,
+    };
+    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 })] }));
+});
+Button.displayName = 'Button';
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +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"}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+export type CheckboxIntent = 'brand' | 'neutral' | 'danger';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Matches the Figma `Size` variant: Small, Medium, Large. */
+    size?: CheckboxSize;
+    /** Matches the Figma `Color` variant: Brand, Neutral, Danger. */
+    intent?: CheckboxIntent;
+    /**
+     * Figma's `Indeterminate` state. Not an HTML attribute — `indeterminate` is a
+     * DOM property only, so it has to be assigned after render.
+     */
+    isIndeterminate?: boolean;
+    /** Figma's `Show Label` + `Label`. Omit for a bare box. */
+    children?: React.ReactNode;
+}
+/**
+ * Checkbox wraps a native `<input type="checkbox">` and hides it.
+ *
+ * The native input is kept rather than replaced by a div with `role=checkbox`
+ * because it brings form association, the indeterminate property, label
+ * clicking, and correct announcement — none of which are free to reimplement,
+ * and all of which are easy to get subtly wrong.
+ *
+ * `indeterminate` is the reason for the effect below: HTML has no
+ * `indeterminate` attribute, only a DOM property, so React cannot set it
+ * declaratively and it must be written after every render.
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5D,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,MAAM,CAChB;IACC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA2BD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,wFA+CpB,CAAC"}

package/dist/components/Checkbox.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useEffect, } from 'react';
+/** Figma's check glyph. Inlined for the same reason as Select's chevron: it is
+ *  part of the control, not a slot a caller fills. */
+const CheckMark = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m5 13 4 4L19 7", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const DashMark = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M6 12h12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" }) }));
+/**
+ * Checkbox wraps a native `<input type="checkbox">` and hides it.
+ *
+ * The native input is kept rather than replaced by a div with `role=checkbox`
+ * because it brings form association, the indeterminate property, label
+ * clicking, and correct announcement — none of which are free to reimplement,
+ * and all of which are easy to get subtly wrong.
+ *
+ * `indeterminate` is the reason for the effect below: HTML has no
+ * `indeterminate` attribute, only a DOM property, so React cannot set it
+ * declaratively and it must be written after every render.
+ */
+export const Checkbox = forwardRef((props, forwardedRef) => {
+    const { size = 'md', intent = 'brand', isIndeterminate = false, className, children, disabled, ...rest } = props;
+    const domRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => domRef.current);
+    useEffect(() => {
+        if (domRef.current)
+            domRef.current.indeterminate = isIndeterminate;
+    }, [isIndeterminate]);
+    const classNames = [
+        'ion-checkbox',
+        size !== 'md' ? `ion-checkbox--${size}` : '',
+        intent !== 'brand' ? `ion-checkbox--${intent}` : '',
+        disabled ? 'ion-checkbox--disabled' : '',
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "checkbox", disabled: disabled, className: "ion-checkbox__input" }), _jsx("span", { className: "ion-checkbox__indicator", "aria-hidden": "true", children: _jsx("span", { className: "ion-checkbox__mark", children: isIndeterminate ? _jsx(DashMark, {}) : _jsx(CheckMark, {}) }) }), children && _jsx("span", { className: "ion-checkbox__label", children: children })] }));
+});
+Checkbox.displayName = 'Checkbox';
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAc,EACZ,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,MAAM,OAAO,CAAC;AAsBf;sDACsD;AACtD,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,gBAAgB,EAClB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CACrB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,UAAU,EACZ,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACrB,GACE,CACP,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,OAAO,EAChB,eAAe,GAAG,KAAK,EACvB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC9C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,OAAO;YAAE,MAAM,CAAC,OAAO,CAAC,aAAa,GAAG,eAAe,CAAC;IACrE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,UAAU,GAAG;QACjB,cAAc;QACd,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC5C,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QACnD,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;QACxC,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iBAAO,SAAS,EAAE,UAAU,aAC1B,mBACM,IAAI,EACR,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,qBAAqB,GAC/B,EACF,eAAM,SAAS,EAAC,yBAAyB,iBAAa,MAAM,YAC1D,eAAM,SAAS,EAAC,oBAAoB,YACjC,eAAe,CAAC,CAAC,CAAC,KAAC,QAAQ,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,GAC1C,GACF,EACN,QAAQ,IAAI,eAAM,SAAS,EAAC,qBAAqB,YAAE,QAAQ,GAAQ,IAC9D,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/Divider.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+    /** Matches Figma's `Style` variant. */
+    orientation?: DividerOrientation;
+}
+/**
+ * A single `<hr>`, matching Figma's `Border` (70:22153).
+ *
+ * `<hr>` rather than a styled `<div>`: it is a semantic thematic break, so a
+ * screen reader announces it as one, and it needs no `role` to get there.
+ * `aria-orientation` is set for the vertical case, since a vertical rule
+ * inside a horizontal toolbar is the one shape a screen reader cannot infer
+ * from the element alone.
+ */
+export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLHRElement>>;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/components/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IACvE,uCAAuC;IACvC,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,oFAWnB,CAAC"}

package/dist/components/Divider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * A single `<hr>`, matching Figma's `Border` (70:22153).
+ *
+ * `<hr>` rather than a styled `<div>`: it is a semantic thematic break, so a
+ * screen reader announces it as one, and it needs no `role` to get there.
+ * `aria-orientation` is set for the vertical case, since a vertical rule
+ * inside a horizontal toolbar is the one shape a screen reader cannot infer
+ * from the element alone.
+ */
+export const Divider = forwardRef(({ orientation = 'horizontal', className, ...rest }, ref) => (_jsx("hr", { ...rest, ref: ref, "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, className: ['ion-divider', `ion-divider--${orientation}`, className]
+        .filter(Boolean)
+        .join(' ') })));
+Divider.displayName = 'Divider';
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../src/components/Divider.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAS1C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAC/B,CAAC,EAAE,WAAW,GAAG,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3D,gBACM,IAAI,EACR,GAAG,EAAE,GAAG,sBACU,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACrE,SAAS,EAAE,CAAC,aAAa,EAAE,gBAAgB,WAAW,EAAE,EAAE,SAAS,CAAC;SACjE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,GACZ,CACH,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/Header.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /** Figma's Logo slot. Rendered at the start, never shrinks. */
+    brand?: React.ReactNode;
+    /** Figma's `Center Slot`. Hidden below 1216px, as in the Tablet and Mobile variants. */
+    center?: React.ReactNode;
+    /** Figma's `End Slot`. */
+    end?: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * Header renders Figma's three Device variants through media queries, not a
+ * prop.
+ *
+ * Device is the one variant axis in the system the browser already knows the
+ * answer to. Every other component takes its variant from the caller because
+ * the caller is the only one who knows; a header is Mobile because the viewport
+ * is narrow, and having React duplicate that judgement is how the two drift
+ * apart. Breakpoints match the Breakpoint collection's container widths.
+ *
+ * A `<header>` element with no explicit role: it is a landmark already when it
+ * is a direct child of body, which is where a page header sits.
+ */
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Header.d.ts.map