ionbase-ui 0.31.0 → 0.37.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 (36) hide show
  1. package/dist/components/Badge.d.ts +13 -0
  2. package/dist/components/Badge.d.ts.map +1 -1
  3. package/dist/components/Badge.js +8 -2
  4. package/dist/components/Badge.js.map +1 -1
  5. package/dist/components/EmptyState.d.ts +99 -0
  6. package/dist/components/EmptyState.d.ts.map +1 -0
  7. package/dist/components/EmptyState.js +51 -0
  8. package/dist/components/EmptyState.js.map +1 -0
  9. package/dist/components/index.d.ts +3 -1
  10. package/dist/components/index.d.ts.map +1 -1
  11. package/dist/components/index.js +1 -0
  12. package/dist/components/index.js.map +1 -1
  13. package/dist/figma-descriptions.json +75 -30
  14. package/dist/figma-map.json +455 -15
  15. package/dist/meta/AgentStop.json +2 -3
  16. package/dist/meta/Badge.json +52 -2
  17. package/dist/meta/EmptyState.json +237 -0
  18. package/dist/meta/components.json +292 -6
  19. package/dist/meta/contrast.json +18 -0
  20. package/dist/meta/index.json +29 -1
  21. package/dist/meta/patterns/AgentRun.json +136 -0
  22. package/dist/meta/patterns/AssistantAnswer.json +130 -0
  23. package/dist/meta/patterns/HumanApproval.json +139 -0
  24. package/dist/meta/patterns/index.json +55 -1
  25. package/dist/styles/agent-stop.css +28 -9
  26. package/dist/styles/badge.css +87 -11
  27. package/dist/styles/empty-state.css +169 -0
  28. package/dist/styles/index.css +1 -0
  29. package/dist/styles/tokens/base.css +7 -0
  30. package/dist/styles/tokens/typography.css +5 -0
  31. package/dist/tokens/index.d.ts +35 -0
  32. package/dist/tokens/index.d.ts.map +1 -1
  33. package/dist/tokens/index.js +28 -0
  34. package/dist/tokens/index.js.map +1 -1
  35. package/llms.txt +3 -3
  36. package/package.json +4 -3
@@ -1,8 +1,21 @@
1
1
  import React from 'react';
2
2
  export type BadgeIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'information';
3
+ export type BadgeSize = 'sm' | 'md' | 'lg';
4
+ export type BadgeShape = 'pill' | 'rounded';
3
5
  export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
4
6
  /** Matches the Figma `Intent` variant. */
5
7
  intent?: BadgeIntent;
8
+ /**
9
+ * Figma's `Size` variant. Heights are 20 / 24 / 32, pinned rather than
10
+ * derived from padding. `sm` is the default and is the size this component
11
+ * shipped with before the ramp existed.
12
+ */
13
+ size?: BadgeSize;
14
+ /**
15
+ * Figma's `Shape` variant. `rounded` steps its corner with the size so the
16
+ * radius stays proportional; `pill` is fully round at every size.
17
+ */
18
+ shape?: BadgeShape;
6
19
  /**
7
20
  * Show the leading dot marker. Figma's `Show Dot` boolean.
8
21
  * The dot inherits the intent's foreground colour, so it needs no prop.
@@ -1 +1 @@
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"}
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;AAC1E,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5C,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;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,oFAuCjB,CAAC"}
@@ -10,8 +10,14 @@ import { forwardRef } from 'react';
10
10
  * reader users on every render. Wrap it yourself if the value genuinely changes
11
11
  * and matters.
12
12
  */
13
- export const Badge = forwardRef(({ intent = 'neutral', dot, icon, className, children, ...rest }, ref) => (_jsxs("span", { ...rest, ref: ref, className: ['ion-badge', `ion-badge--${intent}`, className]
13
+ export const Badge = forwardRef(({ intent = 'neutral', size = 'sm', shape = 'pill', dot, icon, className, children, ...rest }, ref) => (_jsxs("span", { ...rest, ref: ref, className: [
14
+ 'ion-badge',
15
+ `ion-badge--${intent}`,
16
+ size !== 'sm' ? `ion-badge--${size}` : '',
17
+ shape !== 'pill' ? `ion-badge--${shape}` : '',
18
+ className,
19
+ ]
14
20
  .filter(Boolean)
15
- .join(' '), children: [dot && _jsx("span", { className: "ion-badge__dot", "aria-hidden": "true" }), !dot && icon, children] })));
21
+ .join(' '), children: [dot && _jsx("span", { className: "ion-badge__dot", "aria-hidden": "true" }), !dot && icon, children != null && children !== false && (_jsx("span", { className: "ion-badge__label", children: children }))] })));
16
22
  Badge.displayName = 'Badge';
17
23
  //# sourceMappingURL=Badge.js.map
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA+B1C;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,MAAM,GAAG,SAAS,EAClB,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,MAAM,EACd,GAAG,EACH,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE,CAAC,CACH,mBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;QACT,WAAW;QACX,cAAc,MAAM,EAAE;QACtB,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACzC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC7C,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,aAEX,GAAG,IAAI,eAAM,SAAS,EAAC,gBAAgB,iBAAa,MAAM,GAAG,EAC7D,CAAC,GAAG,IAAI,IAAI,EAMZ,QAAQ,IAAI,IAAI,IAAI,QAAQ,KAAK,KAAK,IAAI,CACzC,eAAM,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAQ,CACrD,IACI,CACR,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}
@@ -0,0 +1,99 @@
1
+ import React from 'react';
2
+ /**
3
+ * Why there is nothing here. This is the whole reason the component exists as
4
+ * a variant axis rather than a styling choice.
5
+ *
6
+ * `first-run` nothing exists yet, and the user has never made one.
7
+ * `no-results` things exist; the current filter or query matches none of them.
8
+ * `no-access` things exist and match; this account may not see them.
9
+ * `error` we do not know whether anything is here — the fetch failed.
10
+ *
11
+ * Collapsing these is the most common empty-state bug in enterprise software.
12
+ * "No invoices" with a Create button, shown to someone who has 400 invoices
13
+ * and a typo in their filter, tells them their data is gone.
14
+ */
15
+ export type EmptyStateReason = 'first-run' | 'no-results' | 'no-access' | 'error';
16
+ /** Vertical weight. `page` is a whole route, `panel` a region, `inline` a cell. */
17
+ export type EmptyStateSize = 'inline' | 'panel' | 'page';
18
+ /**
19
+ * Heading element for the title. No `h1`: an empty state describes a region,
20
+ * and the page's own title belongs to the page. Same call FullCard makes.
21
+ */
22
+ export type EmptyStateHeadingLevel = 2 | 3 | 4 | 5 | 6;
23
+ export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
24
+ /**
25
+ * Why there is nothing here. Required, and there is no default: every
26
+ * default would be a guess, and the wrong guess is the bug this component
27
+ * exists to prevent.
28
+ */
29
+ reason: EmptyStateReason;
30
+ /**
31
+ * What is missing, in the user's words. Required — it is the accessible name
32
+ * of the region, and an empty state with no statement is a blank area with
33
+ * padding.
34
+ *
35
+ * Name the thing and the situation: "No invoices match these filters", not
36
+ * "No results".
37
+ */
38
+ title: React.ReactNode;
39
+ /** One or two sentences: what would be here, and what puts it here. */
40
+ description?: React.ReactNode;
41
+ /**
42
+ * The action that resolves this state. For `no-results` that is clearing the
43
+ * filter, NOT creating a record — see `useInstead` in the contract.
44
+ */
45
+ action?: React.ReactNode;
46
+ /** A lower-emphasis escape hatch beside `action` — "Contact an admin". */
47
+ secondaryAction?: React.ReactNode;
48
+ /**
49
+ * Decorative mark above the title. Rendered `aria-hidden`: the title already
50
+ * says what this is, and an icon that repeats it announces twice.
51
+ */
52
+ icon?: React.ReactNode;
53
+ /** Defaults to `panel`. */
54
+ size?: EmptyStateSize;
55
+ /**
56
+ * Heading level for the title. Defaults to `h3`; only the page knows its own
57
+ * outline, so it is a prop rather than a constant.
58
+ */
59
+ headingLevel?: EmptyStateHeadingLevel;
60
+ children?: React.ReactNode;
61
+ }
62
+ /**
63
+ * EmptyState — the state five of this system's nine patterns require and none
64
+ * of them could render.
65
+ *
66
+ * `DataTable`, `PageShell`, `SettingsPanel`, `AssistantAnswer` and
67
+ * `HumanApproval` all specify an empty state in their recipe. Until this
68
+ * existed each consumer invented one, which is how a design system ends up
69
+ * with four different ways to say "nothing here".
70
+ *
71
+ * REASON IS REQUIRED, AND HAS NO DEFAULT
72
+ *
73
+ * The four reasons are genuinely different situations with different correct
74
+ * actions, and the failure mode is silent: an app that shows "No invoices yet
75
+ * — Create your first invoice" to a user whose filter excluded everything has
76
+ * told them their records are gone. A default would make that the easy path,
77
+ * so there isn't one.
78
+ *
79
+ * `no-results` and `error` deliberately do NOT offer a create action in the
80
+ * contract's guidance. The first needs the filter cleared; the second needs a
81
+ * retry, and offering "Create" over a failed fetch invites a duplicate.
82
+ *
83
+ * NOT A LIVE REGION
84
+ *
85
+ * An empty state replaces content, so it is what the user reads next rather
86
+ * than something announced over what they are reading. `role="status"` here
87
+ * would interrupt on every keystroke of a filter box. If a specific flow needs
88
+ * the announcement, the caller owns that decision — the same reasoning
89
+ * StreamingText applies to `aria-live`.
90
+ *
91
+ * `error` is rendered as `role="alert"` ONLY when the caller opts in via
92
+ * `role`, for the same reason: an error empty state arriving during typing is
93
+ * still a read, not an interruption.
94
+ *
95
+ * No `'use client'`: nothing here holds state. The buttons passed through
96
+ * `action` carry their own boundary.
97
+ */
98
+ export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLElement>>;
99
+ //# sourceMappingURL=EmptyState.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,gBAAgB,GAC1B,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAC;AAErD,mFAAmF;AACnF,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzD;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,OAAO,CACR;IACC;;;;OAIG;IACH,MAAM,EAAE,gBAAgB,CAAC;IACzB;;;;;;;OAOG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uEAAuE;IACvE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,UAAU,qFAkEtB,CAAC"}
@@ -0,0 +1,51 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { forwardRef } from 'react';
3
+ /**
4
+ * EmptyState — the state five of this system's nine patterns require and none
5
+ * of them could render.
6
+ *
7
+ * `DataTable`, `PageShell`, `SettingsPanel`, `AssistantAnswer` and
8
+ * `HumanApproval` all specify an empty state in their recipe. Until this
9
+ * existed each consumer invented one, which is how a design system ends up
10
+ * with four different ways to say "nothing here".
11
+ *
12
+ * REASON IS REQUIRED, AND HAS NO DEFAULT
13
+ *
14
+ * The four reasons are genuinely different situations with different correct
15
+ * actions, and the failure mode is silent: an app that shows "No invoices yet
16
+ * — Create your first invoice" to a user whose filter excluded everything has
17
+ * told them their records are gone. A default would make that the easy path,
18
+ * so there isn't one.
19
+ *
20
+ * `no-results` and `error` deliberately do NOT offer a create action in the
21
+ * contract's guidance. The first needs the filter cleared; the second needs a
22
+ * retry, and offering "Create" over a failed fetch invites a duplicate.
23
+ *
24
+ * NOT A LIVE REGION
25
+ *
26
+ * An empty state replaces content, so it is what the user reads next rather
27
+ * than something announced over what they are reading. `role="status"` here
28
+ * would interrupt on every keystroke of a filter box. If a specific flow needs
29
+ * the announcement, the caller owns that decision — the same reasoning
30
+ * StreamingText applies to `aria-live`.
31
+ *
32
+ * `error` is rendered as `role="alert"` ONLY when the caller opts in via
33
+ * `role`, for the same reason: an error empty state arriving during typing is
34
+ * still a read, not an interruption.
35
+ *
36
+ * No `'use client'`: nothing here holds state. The buttons passed through
37
+ * `action` carry their own boundary.
38
+ */
39
+ export const EmptyState = forwardRef(({ reason, title, description, action, secondaryAction, icon, size = 'panel', headingLevel = 3, className, children, ...rest }, ref) => {
40
+ const Heading = `h${headingLevel}`;
41
+ return (_jsxs("section", { ...rest, ref: ref, className: [
42
+ 'ion-empty-state',
43
+ `ion-empty-state--${size}`,
44
+ `ion-empty-state--${reason}`,
45
+ className,
46
+ ]
47
+ .filter(Boolean)
48
+ .join(' '), children: [icon && (_jsx("div", { className: "ion-empty-state__icon", "aria-hidden": "true", children: icon })), _jsx(Heading, { className: "ion-empty-state__title", children: title }), description && (_jsx("p", { className: "ion-empty-state__description", children: description })), children, (action || secondaryAction) && (_jsxs("div", { className: "ion-empty-state__actions", children: [action, secondaryAction] }))] }));
49
+ });
50
+ EmptyState.displayName = 'EmptyState';
51
+ //# sourceMappingURL=EmptyState.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAsE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,MAAM,EACN,KAAK,EACL,WAAW,EACX,MAAM,EACN,eAAe,EACf,IAAI,EACJ,IAAI,GAAG,OAAO,EACd,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAC;IAE5C,OAAO,CACL,sBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,iBAAiB;YACjB,oBAAoB,IAAI,EAAE;YAC1B,oBAAoB,MAAM,EAAE;YAC5B,SAAS;SACV;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,aAOX,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACtD,IAAI,GACD,CACP,EAED,KAAC,OAAO,IAAC,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAW,EAE5D,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,8BAA8B,YAAE,WAAW,GAAK,CAC9D,EAEA,QAAQ,EAQR,CAAC,MAAM,IAAI,eAAe,CAAC,IAAI,CAC9B,eAAK,SAAS,EAAC,0BAA0B,aACtC,MAAM,EACN,eAAe,IACZ,CACP,IACO,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
@@ -5,7 +5,7 @@ export type { TabsProps, TabsType, TabsSize } from './Tabs.js';
5
5
  export { Alert } from './Alert.js';
6
6
  export type { AlertProps, AlertIntent, AlertEmphasis, AlertLayout, } from './Alert.js';
7
7
  export { Badge } from './Badge.js';
8
- export type { BadgeProps, BadgeIntent } from './Badge.js';
8
+ export type { BadgeProps, BadgeIntent, BadgeSize, BadgeShape, } from './Badge.js';
9
9
  export { Input } from './Input.js';
10
10
  export type { InputProps, InputSize } from './Input.js';
11
11
  export { PhoneInput } from './PhoneInput.js';
@@ -60,4 +60,6 @@ export { Citation, CitationList, CitationListItem } from './Citation.js';
60
60
  export type { CitationProps, CitationListProps, CitationListItemProps, } from './Citation.js';
61
61
  export { ConfidenceIndicator } from './ConfidenceIndicator.js';
62
62
  export type { ConfidenceIndicatorProps, ConfidenceLevel, } from './ConfidenceIndicator.js';
63
+ export { EmptyState } from './EmptyState.js';
64
+ export type { EmptyStateProps, EmptyStateReason, EmptyStateSize, EmptyStateHeadingLevel, } from './EmptyState.js';
63
65
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
@@ -29,4 +29,5 @@ export { StreamingText } from './StreamingText.js';
29
29
  export { AgentActivity, AgentActivityStep } from './AgentActivity.js';
30
30
  export { Citation, CitationList, CitationListItem } from './Citation.js';
31
31
  export { ConfidenceIndicator } from './ConfidenceIndicator.js';
32
+ export { EmptyState } from './EmptyState.js';
32
33
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAOnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQlD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAS5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMtE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAOnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAOnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQlD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAS5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMtE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAK/D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}
@@ -1,152 +1,197 @@
1
1
  {
2
- "version": "0.31.0",
2
+ "version": "0.37.0",
3
3
  "begin": "───── CODE · ionbase-ui ─────",
4
4
  "end": "───── end code ─────",
5
5
  "blocks": {
6
6
  "21:461": {
7
7
  "figmaComponent": "Button",
8
8
  "component": "Button",
9
- "block": "───── CODE · ionbase-ui ─────\nimport { Button } from 'ionbase-ui';\n<Button variant=\"primary-brand\" size=\"sm\">Label</Button>\n\nPROPERTIES\n Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Primary Soft=primary-soft, Secondary=secondary, Tertiary=tertiary, Destructive=destructive, Success=success\n Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n State → isDisabled (Disabled only)\n Label → children\n Leading Icon → startIcon\n Trailing Icon → endIcon\n Show Leading Icon → startIcon\n Show Trailing Icon → endIcon\n\nNOTES\n State: Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one.\n Leading Icon: wrap in Icon; omit Icon's label, the button text names it\n Trailing Icon: same\n Show Leading Icon: an absent prop is the switch — React needs no Show boolean, so false means omit startIcon\n Show Trailing Icon: same\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
9
+ "block": "───── CODE · ionbase-ui ─────\nimport { Button } from 'ionbase-ui';\n<Button variant=\"primary-brand\" size=\"sm\">Label</Button>\n\nPROPERTIES\n Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Primary Soft=primary-soft, Secondary=secondary, Tertiary=tertiary, Destructive=destructive, Success=success\n Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n State → isDisabled (Disabled only)\n Label → children\n Leading Icon → startIcon\n Trailing Icon → endIcon\n Show Leading Icon → startIcon\n Show Trailing Icon → endIcon\n\nNOTES\n State: Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one.\n Leading Icon: wrap in Icon; omit Icon's label, the button text names it\n Trailing Icon: same\n Show Leading Icon: an absent prop is the switch — React needs no Show boolean, so false means omit startIcon\n Show Trailing Icon: same\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
10
10
  },
11
11
  "623:151": {
12
12
  "figmaComponent": "Icon Button",
13
13
  "component": "Button",
14
- "block": "───── CODE · ionbase-ui ─────\nimport { Button } from 'ionbase-ui';\n<Button variant=\"primary-brand\" size=\"sm\" aria-label=\"…\" />\n\nPROPERTIES\n Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Primary Soft=primary-soft, Secondary=secondary, Tertiary=tertiary, Destructive=destructive, Success=success\n Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n State → isDisabled (Disabled only)\n Icon → startIcon\n\nNot a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.\n\nNOTES\n State: as Button\n Icon: with Icon's own label omitted — the Button's aria-label carries the name\n Shape: Figma draws a square and a circle variant; code has no shape prop. A round icon button is a className, not an API.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
14
+ "block": "───── CODE · ionbase-ui ─────\nimport { Button } from 'ionbase-ui';\n<Button variant=\"primary-brand\" size=\"sm\" aria-label=\"…\" />\n\nPROPERTIES\n Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Primary Soft=primary-soft, Secondary=secondary, Tertiary=tertiary, Destructive=destructive, Success=success\n Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n State → isDisabled (Disabled only)\n Icon → startIcon\n\nNot a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.\n\nNOTES\n State: as Button\n Icon: with Icon's own label omitted — the Button's aria-label carries the name\n Shape: Figma draws a square and a circle variant; code has no shape prop. A round icon button is a className, not an API.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
15
15
  },
16
16
  "80:275": {
17
17
  "figmaComponent": "Input",
18
18
  "component": "Input",
19
- "block": "───── CODE · ionbase-ui ─────\nimport { Input } from 'ionbase-ui';\n<Input size=\"lg\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n State → isInvalid (Invalid only)\n Value → value\n Leading Icon → leadingIcon\n Trailing Icon → trailingIcon\n Show Leading Icon → leadingIcon\n Show Trailing Icon → trailingIcon\n\nNOTES\n State: Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis.\n Value: or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value\n Show Leading Icon: false means omit the prop\n Show Trailing Icon: false means omit the prop\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/input/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
19
+ "block": "───── CODE · ionbase-ui ─────\nimport { Input } from 'ionbase-ui';\n<Input size=\"lg\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n State → isInvalid (Invalid only)\n Value → value\n Leading Icon → leadingIcon\n Trailing Icon → trailingIcon\n Show Leading Icon → leadingIcon\n Show Trailing Icon → trailingIcon\n\nNOTES\n State: Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis.\n Value: or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value\n Show Leading Icon: false means omit the prop\n Show Trailing Icon: false means omit the prop\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/input/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
20
20
  },
21
21
  "80:372": {
22
22
  "figmaComponent": "Input/Phone",
23
23
  "component": "PhoneInput",
24
- "block": "───── CODE · ionbase-ui ─────\nimport { PhoneInput } from 'ionbase-ui';\n<PhoneInput size=\"lg\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Dial Code → dialCode\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/phone-input/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
24
+ "block": "───── CODE · ionbase-ui ─────\nimport { PhoneInput } from 'ionbase-ui';\n<PhoneInput size=\"lg\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Dial Code → dialCode\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/phone-input/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
25
25
  },
26
26
  "82:379": {
27
27
  "figmaComponent": "Select",
28
28
  "component": "Select",
29
- "block": "───── CODE · ionbase-ui ─────\nimport { Select } from 'ionbase-ui';\n<Select size=\"lg\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n State → isInvalid (Invalid only)\n Value → placeholder\n\nNOTES\n State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled\n Value: Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/select/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
29
+ "block": "───── CODE · ionbase-ui ─────\nimport { Select } from 'ionbase-ui';\n<Select size=\"lg\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n State → isInvalid (Invalid only)\n Value → placeholder\n\nNOTES\n State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled\n Value: Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/select/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
30
30
  },
31
31
  "87:350": {
32
32
  "figmaComponent": "Checkbox",
33
33
  "component": "Checkbox",
34
- "block": "───── CODE · ionbase-ui ─────\nimport { Checkbox } from 'ionbase-ui';\n<Checkbox size=\"sm\" intent=\"brand\">Label</Checkbox>\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n State → isIndeterminate (Indeterminate, Indeterminate-disabled only)\n Label → children\n Show Label → children\n\nNOTES\n State: Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping.\n Show Label: false means a bare box — and then aria-label becomes required\n Focused: a drawn focus ring. In code it is :focus-visible, which the browser owns.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/checkbox/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
34
+ "block": "───── CODE · ionbase-ui ─────\nimport { Checkbox } from 'ionbase-ui';\n<Checkbox size=\"sm\" intent=\"brand\">Label</Checkbox>\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n State → isIndeterminate (Indeterminate, Indeterminate-disabled only)\n Label → children\n Show Label → children\n\nNOTES\n State: Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping.\n Show Label: false means a bare box — and then aria-label becomes required\n Focused: a drawn focus ring. In code it is :focus-visible, which the browser owns.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/checkbox/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
35
35
  },
36
36
  "89:314": {
37
37
  "figmaComponent": "Radio",
38
38
  "component": "Radio",
39
- "block": "───── CODE · ionbase-ui ─────\nimport { Radio } from 'ionbase-ui';\n<Radio size=\"lg\" intent=\"brand\" value={…}>Label</Radio>\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n Label → children\n Show Label → children\n\nNOTES\n State: Selected/Unselected is the RadioGroup's value, not a prop on the Radio — a radio cannot own its own selection\n Show Label: false means aria-label is required\n Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/radio/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
39
+ "block": "───── CODE · ionbase-ui ─────\nimport { Radio } from 'ionbase-ui';\n<Radio size=\"lg\" intent=\"brand\" value={…}>Label</Radio>\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n Label → children\n Show Label → children\n\nNOTES\n State: Selected/Unselected is the RadioGroup's value, not a prop on the Radio — a radio cannot own its own selection\n Show Label: false means aria-label is required\n Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/radio/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
40
40
  },
41
41
  "88:323": {
42
42
  "figmaComponent": "Toggle",
43
43
  "component": "Toggle",
44
- "block": "───── CODE · ionbase-ui ─────\nimport { Toggle } from 'ionbase-ui';\n<Toggle size=\"sm\" intent=\"brand\">Label</Toggle>\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n Label → children\n Show Label → children\n\nNOTES\n State: On/Off is `checked`/`defaultChecked` on the underlying input, not a Toggle prop\n Show Label: false means aria-label is required\n Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toggle/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
44
+ "block": "───── CODE · ionbase-ui ─────\nimport { Toggle } from 'ionbase-ui';\n<Toggle size=\"sm\" intent=\"brand\">Label</Toggle>\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n Label → children\n Show Label → children\n\nNOTES\n State: On/Off is `checked`/`defaultChecked` on the underlying input, not a Toggle prop\n Show Label: false means aria-label is required\n Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toggle/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
45
45
  },
46
46
  "152:73": {
47
47
  "figmaComponent": "Badge",
48
48
  "component": "Badge",
49
- "block": "───── CODE · ionbase-ui ─────\nimport { Badge } from 'ionbase-ui';\n<Badge intent=\"neutral\">Label</Badge>\n\nPROPERTIES\n Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n Label → children\n Show Label → children\n Show Dot → dot\n Show Icon → icon\n Swap Icon → icon\n\nNOTES\n Show Icon: false means omit icon; dot wins when both are set\n Size: Figma draws three sizes; code has no size prop. Badge inherits its type from the text it labels — the same call Link makes.\n Shape: Pill and Rounded are one radius token apart and code ships the pill only. Add the prop when a real screen needs both, not before.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/badge/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
49
+ "block": "───── CODE · ionbase-ui ─────\nimport { Badge } from 'ionbase-ui';\n<Badge intent=\"neutral\" size=\"sm\" shape=\"pill\">Label</Badge>\n\nPROPERTIES\n Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n Label → children\n Show Label → children\n Show Dot → dot\n Show Icon → icon\n Swap Icon → icon\n Size → size: Small=sm, Medium=md, Large=lg\n Shape → shape: Pill=pill, Rounded=rounded\n\nNOTES\n Show Icon: false means omit icon; dot wins when both are set\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/badge/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
50
50
  },
51
51
  "812:1902": {
52
52
  "figmaComponent": "Alert",
53
53
  "component": "Alert",
54
- "block": "───── CODE · ionbase-ui ─────\nimport { Alert } from 'ionbase-ui';\n<Alert intent=\"information\" emphasis=\"subtle\" layout=\"inline\">Label</Alert>\n\nPROPERTIES\n Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n Emphasis → emphasis: Subtle=subtle, Solid=solid\n Layout → layout: Inline=inline, Banner=banner\n Title → title\n Show Title → title\n Message → children\n Show Icon → hideIcon\n Show Dismiss → onDismiss\n Show Actions → actions\n\nNOTES\n Show Title: false means omit title\n Show Icon: inverted — Figma's Show Icon false is hideIcon true\n Show Dismiss: the dismiss button appears when a handler is passed; there is no boolean\n Show Actions: an absent prop is the switch\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/alert/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
54
+ "block": "───── CODE · ionbase-ui ─────\nimport { Alert } from 'ionbase-ui';\n<Alert intent=\"information\" emphasis=\"subtle\" layout=\"inline\">Label</Alert>\n\nPROPERTIES\n Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n Emphasis → emphasis: Subtle=subtle, Solid=solid\n Layout → layout: Inline=inline, Banner=banner\n Title → title\n Show Title → title\n Message → children\n Show Icon → hideIcon\n Show Dismiss → onDismiss\n Show Actions → actions\n\nNOTES\n Show Title: false means omit title\n Show Icon: inverted — Figma's Show Icon false is hideIcon true\n Show Dismiss: the dismiss button appears when a handler is passed; there is no boolean\n Show Actions: an absent prop is the switch\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/alert/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
55
55
  },
56
56
  "820:1655": {
57
57
  "figmaComponent": "Toast",
58
58
  "component": "Toast",
59
- "block": "───── CODE · ionbase-ui ─────\nimport { Toast } from 'ionbase-ui';\n<Toast intent=\"information\" onDismiss={…} id={…} />\n\nPROPERTIES\n Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n Title → title\n Show Title → title\n Message → message\n Show Message → message\n Show Action → action\n Show Dismiss → dismissLabel\n\nNOTES\n Show Action: one action only — a second belongs in a Modal\n Show Dismiss: the dismiss control is always rendered; only its label is configurable\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toast/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
59
+ "block": "───── CODE · ionbase-ui ─────\nimport { Toast } from 'ionbase-ui';\n<Toast intent=\"information\" onDismiss={…} id={…} />\n\nPROPERTIES\n Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n Title → title\n Show Title → title\n Message → message\n Show Message → message\n Show Action → action\n Show Dismiss → dismissLabel\n\nNOTES\n Show Action: one action only — a second belongs in a Modal\n Show Dismiss: the dismiss control is always rendered; only its label is configurable\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toast/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
60
60
  },
61
61
  "774:1516": {
62
62
  "figmaComponent": "Link",
63
63
  "component": "Link",
64
- "block": "───── CODE · ionbase-ui ─────\nimport { Link } from 'ionbase-ui';\n<Link variant=\"inline\">Label</Link>\n\nPROPERTIES\n Type → variant: Inline=inline, Standalone=standalone\n State → isDisabled (Disabled only)\n Label → children\n Leading Icon → startIcon\n Trailing Icon → endIcon\n Show Leading Icon → startIcon\n Show Trailing Icon → endIcon\n\nNOTES\n State: Hover and Focus are CSS; Visited is :visited, which no prop can set\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/link/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
64
+ "block": "───── CODE · ionbase-ui ─────\nimport { Link } from 'ionbase-ui';\n<Link variant=\"inline\">Label</Link>\n\nPROPERTIES\n Type → variant: Inline=inline, Standalone=standalone\n State → isDisabled (Disabled only)\n Label → children\n Leading Icon → startIcon\n Trailing Icon → endIcon\n Show Leading Icon → startIcon\n Show Trailing Icon → endIcon\n\nNOTES\n State: Hover and Focus are CSS; Visited is :visited, which no prop can set\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/link/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
65
65
  },
66
66
  "53:13": {
67
67
  "figmaComponent": "Nav Item",
68
68
  "component": "NavItem",
69
- "block": "───── CODE · ionbase-ui ─────\nimport { NavItem } from 'ionbase-ui';\n<NavItem>Label</NavItem>\n\nPROPERTIES\n Label → children\n Icon → icon\n Show Chevron → showChevron\n\nNOTES\n State: Default and Hover are CSS and React Aria's useHover, not props\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/nav-item/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
69
+ "block": "───── CODE · ionbase-ui ─────\nimport { NavItem } from 'ionbase-ui';\n<NavItem>Label</NavItem>\n\nPROPERTIES\n Label → children\n Icon → icon\n Show Chevron → showChevron\n\nNOTES\n State: Default and Hover are CSS and React Aria's useHover, not props\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/nav-item/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
70
70
  },
71
71
  "82:306": {
72
72
  "figmaComponent": "Menu",
73
73
  "component": "Menu",
74
- "block": "───── CODE · ionbase-ui ─────\nimport { Menu } from 'ionbase-ui';\n<Menu />\n\nNOTES\n Type: Single and Multi describe how many items may be selected, which is the caller's state. Menu renders the surface and holds no selection of its own.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
74
+ "block": "───── CODE · ionbase-ui ─────\nimport { Menu } from 'ionbase-ui';\n<Menu />\n\nNOTES\n Type: Single and Multi describe how many items may be selected, which is the caller's state. Menu renders the surface and holds no selection of its own.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
75
75
  },
76
76
  "639:2634": {
77
77
  "figmaComponent": "Menu Item",
78
78
  "component": "MenuItem",
79
- "block": "───── CODE · ionbase-ui ─────\nimport { MenuItem } from 'ionbase-ui';\n<MenuItem>Label</MenuItem>\n\nPROPERTIES\n Status → isSelected (Selected, Selected Primary only)\n Text → children\n Show Icon → icon\n Select Icon → icon\n\nNOTES\n Status: Hover is CSS. Selected Primary is a second selected styling Figma draws and code does not yet ship.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu-item/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
79
+ "block": "───── CODE · ionbase-ui ─────\nimport { MenuItem } from 'ionbase-ui';\n<MenuItem>Label</MenuItem>\n\nPROPERTIES\n Status → isSelected (Selected, Selected Primary only)\n Text → children\n Show Icon → icon\n Select Icon → icon\n\nNOTES\n Status: Hover is CSS. Selected Primary is a second selected styling Figma draws and code does not yet ship.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu-item/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
80
80
  },
81
81
  "157:126": {
82
82
  "figmaComponent": "Tabs",
83
83
  "component": "Tabs",
84
- "block": "───── CODE · ionbase-ui ─────\nimport { Tabs } from 'ionbase-ui';\n<Tabs type=\"pill\" orientation=\"horizontal\" aria-label=\"…\" />\n\nPROPERTIES\n Type → type: Pill=pill, Underline=underline\n Orientation → orientation: Horizontal=horizontal, Vertical=vertical\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tabs/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
84
+ "block": "───── CODE · ionbase-ui ─────\nimport { Tabs } from 'ionbase-ui';\n<Tabs type=\"pill\" orientation=\"horizontal\" aria-label=\"…\" />\n\nPROPERTIES\n Type → type: Pill=pill, Underline=underline\n Orientation → orientation: Horizontal=horizontal, Vertical=vertical\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tabs/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
85
85
  },
86
86
  "156:259": {
87
87
  "figmaComponent": "Tabs Item",
88
88
  "component": "TabItem",
89
- "block": "───── CODE · ionbase-ui ─────\nimport { TabItem } from 'ionbase-ui';\n<TabItem key=\"billing\" title=\"Billing\">Panel content</TabItem>\n\nTabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.\n\nNOTES\n Label: TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract.\n Type: set on the parent Tabs, not per item\n Size: set on the parent Tabs, not per item\n State: selection is the Tabs collection's state; Disabled is disabledKeys on Tabs\n Show Label: a tab without a label is a tab that cannot be named\n Show Leading Icon: not yet in the code component\n Leading Icon: not yet in the code component\n Show Trailing: not yet in the code component\n Trailing: not yet in the code component\n Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tab-item/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
89
+ "block": "───── CODE · ionbase-ui ─────\nimport { TabItem } from 'ionbase-ui';\n<TabItem key=\"billing\" title=\"Billing\">Panel content</TabItem>\n\nTabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.\n\nNOTES\n Label: TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract.\n Type: set on the parent Tabs, not per item\n Size: set on the parent Tabs, not per item\n State: selection is the Tabs collection's state; Disabled is disabledKeys on Tabs\n Show Label: a tab without a label is a tab that cannot be named\n Show Leading Icon: not yet in the code component\n Leading Icon: not yet in the code component\n Show Trailing: not yet in the code component\n Trailing: not yet in the code component\n Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tab-item/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
90
90
  },
91
91
  "174:103": {
92
92
  "figmaComponent": "Table Cell",
93
93
  "component": "TableCell",
94
- "block": "───── CODE · ionbase-ui ─────\nimport { TableCell } from 'ionbase-ui';\n<TableCell align=\"leading\" />\n\nPROPERTIES\n Type → header (Header only)\n Align → align: Leading=leading, Trailing=trailing\n Show Divider → showDivider\n Content → children\n Show Content → children\n\nNOTES\n Type: Body is the default <td>\n Density: density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-cell/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
94
+ "block": "───── CODE · ionbase-ui ─────\nimport { TableCell } from 'ionbase-ui';\n<TableCell align=\"leading\" />\n\nPROPERTIES\n Type → header (Header only)\n Align → align: Leading=leading, Trailing=trailing\n Show Divider → showDivider\n Content → children\n Show Content → children\n\nNOTES\n Type: Body is the default <td>\n Density: density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-cell/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
95
95
  },
96
96
  "175:605": {
97
97
  "figmaComponent": "Table Row",
98
98
  "component": "TableRow",
99
- "block": "───── CODE · ionbase-ui ─────\nimport { TableRow } from 'ionbase-ui';\n<TableRow />\n\nPROPERTIES\n State → isSelected (Selected, Selected-Hover only)\n Show Selection → selection\n\nNOTES\n State: Hover is CSS\n Show Selection: takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring\n Density: set once on Table; see Table Cell\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-row/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
99
+ "block": "───── CODE · ionbase-ui ─────\nimport { TableRow } from 'ionbase-ui';\n<TableRow />\n\nPROPERTIES\n State → isSelected (Selected, Selected-Hover only)\n Show Selection → selection\n\nNOTES\n State: Hover is CSS\n Show Selection: takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring\n Density: set once on Table; see Table Cell\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-row/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
100
100
  },
101
101
  "74:164": {
102
102
  "figmaComponent": "Avatar",
103
103
  "component": "Avatar",
104
- "block": "───── CODE · ionbase-ui ─────\nimport { Avatar } from 'ionbase-ui';\n<Avatar size=\"lg\" shape=\"circle\" />\n\nPROPERTIES\n Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n Shape → shape: Circle=circle, Square=square\n Type → src (Image only)\n Initials → initials\n Icon → icon\n Show Ring → ring\n Show Top Indicator → topIndicator\n Show Bottom Indicator → bottomIndicator\n\nNOTES\n Type: code picks by precedence rather than a type prop: src, then initials, then icon. Character means pass initials, Icon means pass icon.\n Show Top Indicator: Figma needs a boolean because the intent lives on the nested Status Indicator instance; code takes the intent itself, so passing one is what shows the mark. The drawn instance is Intent=Primary with its check glyph, which is what `topIndicator=\"primary\"` renders.\n Show Bottom Indicator: As the top indicator — the intent comes from the nested Status Indicator, which a boolean cannot carry. The drawn instance is Intent=Success with no glyph.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
104
+ "block": "───── CODE · ionbase-ui ─────\nimport { Avatar } from 'ionbase-ui';\n<Avatar size=\"lg\" shape=\"circle\" />\n\nPROPERTIES\n Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n Shape → shape: Circle=circle, Square=square\n Type → src (Image only)\n Initials → initials\n Icon → icon\n Show Ring → ring\n Show Top Indicator → topIndicator\n Show Bottom Indicator → bottomIndicator\n\nNOTES\n Type: code picks by precedence rather than a type prop: src, then initials, then icon. Character means pass initials, Icon means pass icon.\n Show Top Indicator: Figma needs a boolean because the intent lives on the nested Status Indicator instance; code takes the intent itself, so passing one is what shows the mark. The drawn instance is Intent=Primary with its check glyph, which is what `topIndicator=\"primary\"` renders.\n Show Bottom Indicator: As the top indicator — the intent comes from the nested Status Indicator, which a boolean cannot carry. The drawn instance is Intent=Success with no glyph.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
105
105
  },
106
106
  "74:279": {
107
107
  "figmaComponent": "Avatar Group",
108
108
  "component": "AvatarGroup",
109
- "block": "───── CODE · ionbase-ui ─────\nimport { AvatarGroup } from 'ionbase-ui';\n<AvatarGroup size=\"lg\" shape=\"circle\" />\n\nPROPERTIES\n Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n Shape → shape: Circle=circle, Square=square\n Show Overflow → max\n Show Avatar 3 → children\n Show Avatar 4 → children\n\nNOTES\n Show Overflow: the +N avatar appears when children exceed max\n Show Avatar 3: Figma needs a boolean per slot; React just renders fewer children\n Show Avatar 4: same\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar-group/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
109
+ "block": "───── CODE · ionbase-ui ─────\nimport { AvatarGroup } from 'ionbase-ui';\n<AvatarGroup size=\"lg\" shape=\"circle\" />\n\nPROPERTIES\n Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n Shape → shape: Circle=circle, Square=square\n Show Overflow → max\n Show Avatar 3 → children\n Show Avatar 4 → children\n\nNOTES\n Show Overflow: the +N avatar appears when children exceed max\n Show Avatar 3: Figma needs a boolean per slot; React just renders fewer children\n Show Avatar 4: same\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar-group/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
110
110
  },
111
111
  "1054:305": {
112
112
  "figmaComponent": "Avatar Gradient",
113
113
  "component": "AvatarGradient",
114
- "block": "───── CODE · ionbase-ui ─────\nimport { AvatarGradient } from 'ionbase-ui';\n<AvatarGradient size=\"lg\" color=\"slate\" />\n\nPROPERTIES\n Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n Color → color: Slate=slate, Blue=blue, Violet=violet, Pink=pink, Orange=orange, Green=green, Red=red\n Initials → initials\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar-gradient/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
114
+ "block": "───── CODE · ionbase-ui ─────\nimport { AvatarGradient } from 'ionbase-ui';\n<AvatarGradient size=\"lg\" color=\"slate\" />\n\nPROPERTIES\n Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n Color → color: Slate=slate, Blue=blue, Violet=violet, Pink=pink, Orange=orange, Green=green, Red=red\n Initials → initials\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar-gradient/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
115
115
  },
116
116
  "126:22724": {
117
117
  "figmaComponent": "Border",
118
118
  "component": "Divider",
119
- "block": "───── CODE · ionbase-ui ─────\nimport { Divider } from 'ionbase-ui';\n<Divider orientation=\"vertical\" />\n\nPROPERTIES\n Style → orientation: Horizontal=horizontal, Vertical=vertical\n\nFigma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/divider/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
119
+ "block": "───── CODE · ionbase-ui ─────\nimport { Divider } from 'ionbase-ui';\n<Divider orientation=\"vertical\" />\n\nPROPERTIES\n Style → orientation: Horizontal=horizontal, Vertical=vertical\n\nFigma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/divider/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
120
120
  },
121
121
  "52:21369": {
122
122
  "figmaComponent": "Logo-Ionbase",
123
123
  "component": "Logo",
124
- "block": "───── CODE · ionbase-ui ─────\nimport { Logo } from 'ionbase-ui';\n<Logo size=\"sm\" wordmark=\"vector\" />\n\nPROPERTIES\n Size → size: Small=sm, Large=lg\n Type → wordmark: Logo=vector, Icon=text\n\nNOTES\n Type: the names invert: Figma's Logo is the serif vector wordmark, Figma's Icon is live Host Grotesk text\n Property: the Name axis renders placeholder text in an unbound colour — leftover debug content, not a real asset. LogoMark covers the no-wordmark case.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/logo/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
124
+ "block": "───── CODE · ionbase-ui ─────\nimport { Logo } from 'ionbase-ui';\n<Logo size=\"sm\" wordmark=\"vector\" />\n\nPROPERTIES\n Size → size: Small=sm, Large=lg\n Type → wordmark: Logo=vector, Icon=text\n\nNOTES\n Type: the names invert: Figma's Logo is the serif vector wordmark, Figma's Icon is live Host Grotesk text\n Property: the Name axis renders placeholder text in an unbound colour — leftover debug content, not a real asset. LogoMark covers the no-wordmark case.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/logo/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
125
125
  },
126
126
  "792:1537": {
127
127
  "figmaComponent": "Modal",
128
128
  "component": "Modal",
129
- "block": "───── CODE · ionbase-ui ─────\nimport { Modal } from 'ionbase-ui';\n<Modal size=\"sm\" align=\"left\" title={…} />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg, Fullscreen=fullscreen\n Align → align: Left=left, Center=center\n Title → title\n Description → description\n Show Description → description\n Show Close → showClose\n Show Body → children\n Show Footer → footer\n Show Media → media\n Media → media\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/modal/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
129
+ "block": "───── CODE · ionbase-ui ─────\nimport { Modal } from 'ionbase-ui';\n<Modal size=\"sm\" align=\"left\" title={…} />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg, Fullscreen=fullscreen\n Align → align: Left=left, Center=center\n Title → title\n Description → description\n Show Description → description\n Show Close → showClose\n Show Body → children\n Show Footer → footer\n Show Media → media\n Media → media\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/modal/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
130
130
  },
131
131
  "825:1853": {
132
132
  "figmaComponent": "Popover",
133
133
  "component": "Popover",
134
- "block": "───── CODE · ionbase-ui ─────\nimport { Popover } from 'ionbase-ui';\n<Popover placement=\"bottom\" size=\"sm\">…</Popover>\n\nPROPERTIES\n Placement → placement: Top=top, Bottom=bottom, Left=left, Right=right\n Size → size: Small=sm, Medium=md, Large=lg\n Title → title\n Show Header → title\n Body → content\n Show Body → content\n Show Close → showClose\n Show Footer → footer\n Show Arrow → hideArrow\n\nNOTES\n Show Arrow: inverted — Show Arrow false is hideArrow true\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/popover/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
134
+ "block": "───── CODE · ionbase-ui ─────\nimport { Popover } from 'ionbase-ui';\n<Popover placement=\"bottom\" size=\"sm\">…</Popover>\n\nPROPERTIES\n Placement → placement: Top=top, Bottom=bottom, Left=left, Right=right\n Size → size: Small=sm, Medium=md, Large=lg\n Title → title\n Show Header → title\n Body → content\n Show Body → content\n Show Close → showClose\n Show Footer → footer\n Show Arrow → hideArrow\n\nNOTES\n Show Arrow: inverted — Show Arrow false is hideArrow true\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/popover/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
135
135
  },
136
136
  "801:68": {
137
137
  "figmaComponent": "Tooltip",
138
138
  "component": "Tooltip",
139
- "block": "───── CODE · ionbase-ui ─────\nimport { Tooltip } from 'ionbase-ui';\n<Tooltip placement=\"top\" label={…}>…</Tooltip>\n\nPROPERTIES\n Placement → placement: Top=top, Bottom=bottom, Left=left, Right=right\n Label → label\n Title → title\n Show Title → title\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tooltip/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
139
+ "block": "───── CODE · ionbase-ui ─────\nimport { Tooltip } from 'ionbase-ui';\n<Tooltip placement=\"top\" label={…}>…</Tooltip>\n\nPROPERTIES\n Placement → placement: Top=top, Bottom=bottom, Left=left, Right=right\n Label → label\n Title → title\n Show Title → title\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tooltip/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
140
140
  },
141
141
  "592:857": {
142
142
  "figmaComponent": "Full Card",
143
143
  "component": "FullCard",
144
- "block": "───── CODE · ionbase-ui ─────\nimport { FullCard } from 'ionbase-ui';\n<FullCard alignment=\"right\" headline={…} />\n\nPROPERTIES\n Row Reverse → alignment: True=left, False=right\n Headline → headline\n Description → description\n Show Description → description\n Eyebrow → eyebrow\n Show Eyebrow → eyebrow\n Actions → actions\n Show Actions → actions\n Media → media\n\nNOTES\n Row Reverse: Figma's boolean reverses the row; the code prop names which side the MEDIA sits on\n Media: pass the screenshot itself — the component draws the frame\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/full-card/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
144
+ "block": "───── CODE · ionbase-ui ─────\nimport { FullCard } from 'ionbase-ui';\n<FullCard alignment=\"right\" headline={…} />\n\nPROPERTIES\n Row Reverse → alignment: True=left, False=right\n Headline → headline\n Description → description\n Show Description → description\n Eyebrow → eyebrow\n Show Eyebrow → eyebrow\n Actions → actions\n Show Actions → actions\n Media → media\n\nNOTES\n Row Reverse: Figma's boolean reverses the row; the code prop names which side the MEDIA sits on\n Media: pass the screenshot itself — the component draws the frame\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/full-card/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
145
145
  },
146
146
  "69:335": {
147
147
  "figmaComponent": "Header",
148
148
  "component": "Header",
149
- "block": "───── CODE · ionbase-ui ─────\nimport { Header } from 'ionbase-ui';\n<Header />\n\nPROPERTIES\n Device → open (Mobile-Open, Mobile-Closed only)\n Center Slot → center\n End Slot → end\n Show Center Slot → center\n Show End Slot → end\n\nNOTES\n Device: Figma spells one four-way axis; code splits it in two. Desktop/Tablet/Mobile is a media query the browser already answers, and only Open/Closed is a prop.\n End Slot: a duplicate slot in the Figma component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/header/index.html.md\nGenerated from ionbase-ui@0.31.0. Edit the code, not this block.\n───── end code ─────"
149
+ "block": "───── CODE · ionbase-ui ─────\nimport { Header } from 'ionbase-ui';\n<Header />\n\nPROPERTIES\n Device → open (Mobile-Open, Mobile-Closed only)\n Center Slot → center\n End Slot → end\n Show Center Slot → center\n Show End Slot → end\n\nNOTES\n Device: Figma spells one four-way axis; code splits it in two. Desktop/Tablet/Mobile is a media query the browser already answers, and only Open/Closed is a prop.\n End Slot: a duplicate slot in the Figma component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/header/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
150
+ },
151
+ "1156:296": {
152
+ "figmaComponent": "Agent Stop",
153
+ "component": "AgentStop",
154
+ "block": "───── CODE · ionbase-ui ─────\nimport { AgentStop } from 'ionbase-ui';\n<AgentStop size=\"sm\" onStop={…} />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Label → label\n Stopping Label → stoppingLabel\n\nNOTES\n State: Default/Hover are CSS states; Stopping is the drawn form of isStopping\n Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/agent-stop/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
155
+ },
156
+ "1160:423": {
157
+ "figmaComponent": "Approval Gate",
158
+ "component": "ApprovalGate",
159
+ "block": "───── CODE · ionbase-ui ─────\nimport { ApprovalGate } from 'ionbase-ui';\n<ApprovalGate risk=\"low\" status=\"pending\" title={…}>Label</ApprovalGate>\n\nPROPERTIES\n Risk → risk: Low=low, Medium=medium, High=high\n Status → status: Pending=pending, Approved=approved, Rejected=rejected, Expired=expired\n Title → title\n Detail → children\n Show Detail → children\n Reject Label → rejectLabel\n Edit Label → editLabel\n Approve Label → approveLabel\n Show Edit → onEdit\n\nNOTES\n Show Detail: false means no children passed\n Show Edit: the Edit button renders only when onEdit is supplied\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/approval-gate/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
160
+ },
161
+ "1162:246": {
162
+ "figmaComponent": "Agent Activity",
163
+ "component": "AgentActivity",
164
+ "block": "───── CODE · ionbase-ui ─────\nimport { AgentActivity } from 'ionbase-ui';\n<AgentActivity />\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/agent-activity/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
165
+ },
166
+ "1161:287": {
167
+ "figmaComponent": "Agent Activity Step",
168
+ "component": "AgentActivityStep",
169
+ "block": "───── CODE · ionbase-ui ─────\nimport { AgentActivityStep } from 'ionbase-ui';\n<AgentActivityStep status=\"pending\">Label</AgentActivityStep>\n\nPROPERTIES\n Status → status: Pending=pending, Active=active, Done=done, Failed=failed, Skipped=skipped\n Label → children\n Detail → detail\n Show Detail → detail\n\nNOTES\n Show Detail: false means detail is omitted\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/agent-activity-step/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
170
+ },
171
+ "1164:248": {
172
+ "figmaComponent": "Streaming Text",
173
+ "component": "StreamingText",
174
+ "block": "───── CODE · ionbase-ui ─────\nimport { StreamingText } from 'ionbase-ui';\n<StreamingText isStreaming=\"true\">Label</StreamingText>\n\nPROPERTIES\n Streaming → isStreaming: True=true, False=false\n Text → children\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/streaming-text/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
175
+ },
176
+ "1167:247": {
177
+ "figmaComponent": "Citation",
178
+ "component": "Citation",
179
+ "block": "───── CODE · ionbase-ui ─────\nimport { Citation } from 'ionbase-ui';\n<Citation index={…} source={…} />\n\nPROPERTIES\n Index → index\n\nNOTES\n State: Default/Hover is :hover in code\n Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/citation/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
180
+ },
181
+ "1168:246": {
182
+ "figmaComponent": "Citation List",
183
+ "component": "CitationList",
184
+ "block": "───── CODE · ionbase-ui ─────\nimport { CitationList } from 'ionbase-ui';\n<CitationList />\n\nPROPERTIES\n Label → label\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/citation-list/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
185
+ },
186
+ "1168:241": {
187
+ "figmaComponent": "Citation List Item",
188
+ "component": "CitationListItem",
189
+ "block": "───── CODE · ionbase-ui ─────\nimport { CitationListItem } from 'ionbase-ui';\n<CitationListItem index={…} source={…}>Label</CitationListItem>\n\nPROPERTIES\n Index → index\n Source → source\n Passage → children\n Show Passage → children\n\nNOTES\n Show Passage: false means no children passed\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/citation-list-item/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
190
+ },
191
+ "1166:262": {
192
+ "figmaComponent": "Confidence Indicator",
193
+ "component": "ConfidenceIndicator",
194
+ "block": "───── CODE · ionbase-ui ─────\nimport { ConfidenceIndicator } from 'ionbase-ui';\n<ConfidenceIndicator level=\"low\" basis={…} />\n\nPROPERTIES\n Level → level: Low=low, Medium=medium, High=high\n Basis → basis\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/confidence-indicator/index.html.md\nGenerated from ionbase-ui@0.37.0. Edit the code, not this block.\n───── end code ─────"
150
195
  }
151
196
  }
152
197
  }