ionbase-ui 0.69.0 → 0.70.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.
- package/dist/components/ScrollProgress.d.ts +6 -0
- package/dist/components/ScrollProgress.d.ts.map +1 -1
- package/dist/components/ScrollProgress.js +2 -2
- package/dist/components/ScrollProgress.js.map +1 -1
- package/dist/components/Toast.d.ts +8 -1
- package/dist/components/Toast.d.ts.map +1 -1
- package/dist/components/Toast.js +2 -2
- package/dist/components/Toast.js.map +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/figma-descriptions.json +63 -63
- package/dist/figma-map.json +1 -1
- package/dist/meta/ScrollProgress.json +26 -1
- package/dist/meta/ToastProvider.json +9 -2
- package/dist/meta/components.json +36 -4
- package/dist/meta/index.json +7 -2
- package/dist/meta/patterns/index.json +1 -1
- package/dist/styles/scroll-progress.css +42 -4
- package/dist/styles/table.css +9 -0
- package/llms.txt +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,8 @@ export interface ScrollProgressSection {
|
|
|
3
3
|
id: string;
|
|
4
4
|
label: string;
|
|
5
5
|
}
|
|
6
|
+
/** Which side of the rail the section list opens toward. */
|
|
7
|
+
export type ScrollProgressPlacement = 'right' | 'left';
|
|
6
8
|
export interface ScrollProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
7
9
|
/** 0-100. The caller computes this from whatever it is tracking — a
|
|
8
10
|
* window scroll fraction, a custom scroll container, a reading-time
|
|
@@ -16,6 +18,10 @@ export interface ScrollProgressProps extends Omit<React.HTMLAttributes<HTMLDivEl
|
|
|
16
18
|
* itself; matching Menu, it reports the choice and lets the caller decide
|
|
17
19
|
* what "select this section" means for their page. */
|
|
18
20
|
onSelect?: (id: string) => void;
|
|
21
|
+
/** Which way the section list opens. `right` suits a rail on the left of the
|
|
22
|
+
* content; a rail against the right edge of the page needs `left`, or the
|
|
23
|
+
* open list runs off the screen. */
|
|
24
|
+
placement?: ScrollProgressPlacement;
|
|
19
25
|
}
|
|
20
26
|
/**
|
|
21
27
|
* The compact rail is the disclosure trigger. It is a real `<button>`, so a
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollProgress.d.ts","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC;;iEAE6D;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,qBAAqB,EAAE,CAAC;IAClC;6DACyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;2DAEuD;IACvD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ScrollProgress.d.ts","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,4DAA4D;AAC5D,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC;;iEAE6D;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,qBAAqB,EAAE,CAAC;IAClC;6DACyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;2DAEuD;IACvD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;yCAEqC;IACrC,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,4FA4K1B,CAAC"}
|
|
@@ -14,7 +14,7 @@ import { useHover } from 'react-aria';
|
|
|
14
14
|
* needs to not trap the page once opened, not a full popover/focus-trap
|
|
15
15
|
* implementation.
|
|
16
16
|
*/
|
|
17
|
-
export const ScrollProgress = forwardRef(({ progress, sections, activeId, onSelect, className, ...rest }, forwardedRef) => {
|
|
17
|
+
export const ScrollProgress = forwardRef(({ progress, sections, activeId, onSelect, placement = 'right', className, ...rest }, forwardedRef) => {
|
|
18
18
|
const [isOpen, setIsOpen] = useState(false);
|
|
19
19
|
const isTriggerHovered = useRef(false);
|
|
20
20
|
const isPanelHovered = useRef(false);
|
|
@@ -100,7 +100,7 @@ export const ScrollProgress = forwardRef(({ progress, sections, activeId, onSele
|
|
|
100
100
|
: '',
|
|
101
101
|
]
|
|
102
102
|
.filter(Boolean)
|
|
103
|
-
.join(' ') }, section.id))) })] }), _jsx("div", { ...panelHoverProps, id: panelId, className:
|
|
103
|
+
.join(' ') }, section.id))) })] }), _jsx("div", { ...panelHoverProps, id: panelId, className: `ion-scroll-progress__panel ion-scroll-progress__panel--${placement}`, "data-open": isOpen || undefined, children: sections.map((section) => (_jsx("button", { type: "button", className: [
|
|
104
104
|
'ion-scroll-progress__heading',
|
|
105
105
|
section.id === activeId
|
|
106
106
|
? 'ion-scroll-progress__heading--selected'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollProgress.js","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,KAAK,EACL,SAAS,EACT,mBAAmB,GACpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ScrollProgress.js","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"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"}
|
|
@@ -43,6 +43,13 @@ export interface ToastProviderProps {
|
|
|
43
43
|
placement?: ToastPlacement;
|
|
44
44
|
/** Oldest are dropped past this. Prevents an unbounded stack covering the page. */
|
|
45
45
|
limit?: number;
|
|
46
|
+
/**
|
|
47
|
+
* The live region's accessible name. The region is a landmark, and landmark
|
|
48
|
+
* names must be unique on a page: an app with its own section called
|
|
49
|
+
* "Notifications" fails axe `landmark-unique` on every page that has one
|
|
50
|
+
* unless this is changed.
|
|
51
|
+
*/
|
|
52
|
+
label?: string;
|
|
46
53
|
}
|
|
47
54
|
/**
|
|
48
55
|
* Renders the queue and supplies `useToast`.
|
|
@@ -51,7 +58,7 @@ export interface ToastProviderProps {
|
|
|
51
58
|
* that appears at the same moment as its content is not reliably announced —
|
|
52
59
|
* assistive tech has to be watching the node before the text lands in it.
|
|
53
60
|
*/
|
|
54
|
-
export declare function ToastProvider({ children, placement, limit, }: ToastProviderProps): React.JSX.Element;
|
|
61
|
+
export declare function ToastProvider({ children, placement, limit, label, }: ToastProviderProps): React.JSX.Element;
|
|
55
62
|
export declare function useToast(): ToastContextValue;
|
|
56
63
|
export {};
|
|
57
64
|
//# sourceMappingURL=Toast.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAUN,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,WAAW,GACrB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAE1E,MAAM,MAAM,cAAc,GACxB,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AA0E5D,MAAM,WAAW,YAAY;IAC3B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,mFAqEhB,CAAC;AAIH,UAAU,iBAAiB;IACzB,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IACzC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mFAAmF;IACnF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAA0B,EAC1B,KAAS,
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAUN,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,WAAW,GACrB,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAE1E,MAAM,MAAM,cAAc,GACxB,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AA0E5D,MAAM,WAAW,YAAY;IAC3B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,mFAqEhB,CAAC;AAIH,UAAU,iBAAiB;IACzB,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IACzC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mFAAmF;IACnF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAA0B,EAC1B,KAAS,EACT,KAAuB,GACxB,EAAE,kBAAkB,qBAkCpB;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAI5C"}
|
package/dist/components/Toast.js
CHANGED
|
@@ -57,7 +57,7 @@ const ToastContext = createContext(null);
|
|
|
57
57
|
* that appears at the same moment as its content is not reliably announced —
|
|
58
58
|
* assistive tech has to be watching the node before the text lands in it.
|
|
59
59
|
*/
|
|
60
|
-
export function ToastProvider({ children, placement = 'bottom-right', limit = 4, }) {
|
|
60
|
+
export function ToastProvider({ children, placement = 'bottom-right', limit = 4, label = 'Notifications', }) {
|
|
61
61
|
const [items, setItems] = useState([]);
|
|
62
62
|
const counter = useRef(0);
|
|
63
63
|
const prefix = useId();
|
|
@@ -70,7 +70,7 @@ export function ToastProvider({ children, placement = 'bottom-right', limit = 4,
|
|
|
70
70
|
return id;
|
|
71
71
|
}, [prefix, limit]);
|
|
72
72
|
const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
|
|
73
|
-
return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx("div", { className: `ion-toast-region ion-toast-region--${placement}`, role: "region", "aria-label":
|
|
73
|
+
return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx("div", { className: `ion-toast-region ion-toast-region--${placement}`, role: "region", "aria-label": label, children: items.map((item) => (_jsx(Toast, { ...item, onDismiss: dismiss }, item.id))) })] }));
|
|
74
74
|
}
|
|
75
75
|
export function useToast() {
|
|
76
76
|
const ctx = useContext(ToastContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"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"}
|
|
@@ -49,7 +49,7 @@ export type { NavItemProps } from './NavItem.js';
|
|
|
49
49
|
export { Table, TableHead, TableBody, TableRow, TableCell } from './Table.js';
|
|
50
50
|
export type { TableProps, TableDensity, TableRowProps, TableRowSelection, TableCellProps, TableCellAlign, TableCellScope, } from './Table.js';
|
|
51
51
|
export { ScrollProgress } from './ScrollProgress.js';
|
|
52
|
-
export type { ScrollProgressProps, ScrollProgressSection, } from './ScrollProgress.js';
|
|
52
|
+
export type { ScrollProgressProps, ScrollProgressSection, ScrollProgressPlacement, } from './ScrollProgress.js';
|
|
53
53
|
export { FullCard } from './FullCard.js';
|
|
54
54
|
export type { FullCardProps, FullCardAlignment, FullCardHeadingLevel, } from './FullCard.js';
|
|
55
55
|
export { AgentStop } from './AgentStop.js';
|
|
@@ -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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"}
|
|
@@ -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,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAM7C,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,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,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;
|
|
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,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAM7C,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,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,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;AAMrD,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,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG7D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAO1D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAOpE,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAO/E,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAQpD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAGvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQ7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAO7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -1,317 +1,317 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
2
|
+
"version": "0.70.0",
|
|
3
3
|
"begin": "───── CODE · ionbase-ui ─────",
|
|
4
4
|
"end": "───── end code ─────",
|
|
5
5
|
"blocks": {
|
|
6
6
|
"1360:267": {
|
|
7
7
|
"figmaComponent": "Accordion",
|
|
8
8
|
"component": "Accordion",
|
|
9
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { Accordion } from 'ionbase-ui';\n<Accordion />\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/accordion/index.html.md\nGenerated from ionbase-ui@0.
|
|
9
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { Accordion } from 'ionbase-ui';\n<Accordion />\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/accordion/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
10
10
|
},
|
|
11
11
|
"1360:266": {
|
|
12
12
|
"figmaComponent": "Accordion Item",
|
|
13
13
|
"component": "AccordionItem",
|
|
14
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { AccordionItem } from 'ionbase-ui';\n<AccordionItem id={…} title={…}>Label</AccordionItem>\n\nPROPERTIES\n Title → title\n Content → children\n State → isDisabled (Disabled only)\n\nNOTES\n State: Collapsed and Expanded are the container’s expandedKeys, not the item’s: a static frame cannot own a selection, so the axis is drawn on the item and owned in code by Accordion.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/accordion-item/index.html.md\nGenerated from ionbase-ui@0.
|
|
14
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { AccordionItem } from 'ionbase-ui';\n<AccordionItem id={…} title={…}>Label</AccordionItem>\n\nPROPERTIES\n Title → title\n Content → children\n State → isDisabled (Disabled only)\n\nNOTES\n State: Collapsed and Expanded are the container’s expandedKeys, not the item’s: a static frame cannot own a selection, so the axis is drawn on the item and owned in code by Accordion.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/accordion-item/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
15
15
|
},
|
|
16
16
|
"1162:246": {
|
|
17
17
|
"figmaComponent": "Agent Activity",
|
|
18
18
|
"component": "AgentActivity",
|
|
19
|
-
"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.
|
|
19
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
20
20
|
},
|
|
21
21
|
"1161:287": {
|
|
22
22
|
"figmaComponent": "Agent Activity Step",
|
|
23
23
|
"component": "AgentActivityStep",
|
|
24
|
-
"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.
|
|
24
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
25
25
|
},
|
|
26
26
|
"1156:296": {
|
|
27
27
|
"figmaComponent": "Agent Stop",
|
|
28
28
|
"component": "AgentStop",
|
|
29
|
-
"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.
|
|
29
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
30
30
|
},
|
|
31
31
|
"812:1902": {
|
|
32
32
|
"figmaComponent": "Alert",
|
|
33
33
|
"component": "Alert",
|
|
34
|
-
"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.
|
|
34
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
35
35
|
},
|
|
36
36
|
"1160:423": {
|
|
37
37
|
"figmaComponent": "Approval Gate",
|
|
38
38
|
"component": "ApprovalGate",
|
|
39
|
-
"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.
|
|
39
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
40
40
|
},
|
|
41
41
|
"74:164": {
|
|
42
42
|
"figmaComponent": "Avatar",
|
|
43
43
|
"component": "Avatar",
|
|
44
|
-
"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.
|
|
44
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
45
45
|
},
|
|
46
46
|
"1054:305": {
|
|
47
47
|
"figmaComponent": "Avatar Gradient",
|
|
48
48
|
"component": "AvatarGradient",
|
|
49
|
-
"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.
|
|
49
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
50
50
|
},
|
|
51
51
|
"74:279": {
|
|
52
52
|
"figmaComponent": "Avatar Group",
|
|
53
53
|
"component": "AvatarGroup",
|
|
54
|
-
"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.
|
|
54
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
55
55
|
},
|
|
56
56
|
"152:73": {
|
|
57
57
|
"figmaComponent": "Badge",
|
|
58
58
|
"component": "Badge",
|
|
59
|
-
"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.
|
|
59
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
60
60
|
},
|
|
61
61
|
"126:22724": {
|
|
62
62
|
"figmaComponent": "Border",
|
|
63
63
|
"component": "Divider",
|
|
64
|
-
"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.
|
|
64
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
65
65
|
},
|
|
66
66
|
"1359:252": {
|
|
67
67
|
"figmaComponent": "Breadcrumb",
|
|
68
68
|
"component": "Breadcrumb",
|
|
69
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { Breadcrumb } from 'ionbase-ui';\n<Breadcrumb />\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/breadcrumb/index.html.md\nGenerated from ionbase-ui@0.
|
|
69
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { Breadcrumb } from 'ionbase-ui';\n<Breadcrumb />\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/breadcrumb/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
70
70
|
},
|
|
71
71
|
"1359:251": {
|
|
72
72
|
"figmaComponent": "Breadcrumb Item",
|
|
73
73
|
"component": "BreadcrumbItem",
|
|
74
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { BreadcrumbItem } from 'ionbase-ui';\n<BreadcrumbItem>Label</BreadcrumbItem>\n\nPROPERTIES\n Label → children\n State → isCurrent (Current only)\n\nNOTES\n Show Separator: The separator is a CSS ::before in code and never markup, so it stays out of the accessibility tree — a \"/\" in the DOM is the usual build of this component and the usual defect. Figma has no generated content, so it is drawn as a real text layer and switched off on the first crumb. A drawing convenience with no prop behind it.\n State: Default is the resting link and Hover is CSS. Only Current is a prop, because the last crumb renders as text rather than a link.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/breadcrumb-item/index.html.md\nGenerated from ionbase-ui@0.
|
|
74
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { BreadcrumbItem } from 'ionbase-ui';\n<BreadcrumbItem>Label</BreadcrumbItem>\n\nPROPERTIES\n Label → children\n State → isCurrent (Current only)\n\nNOTES\n Show Separator: The separator is a CSS ::before in code and never markup, so it stays out of the accessibility tree — a \"/\" in the DOM is the usual build of this component and the usual defect. Figma has no generated content, so it is drawn as a real text layer and switched off on the first crumb. A drawing convenience with no prop behind it.\n State: Default is the resting link and Hover is CSS. Only Current is a prop, because the last crumb renders as text rather than a link.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/breadcrumb-item/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
75
75
|
},
|
|
76
76
|
"21:461": {
|
|
77
77
|
"figmaComponent": "Button",
|
|
78
78
|
"component": "Button",
|
|
79
|
-
"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.
|
|
79
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
80
80
|
},
|
|
81
81
|
"87:350": {
|
|
82
82
|
"figmaComponent": "Checkbox",
|
|
83
83
|
"component": "Checkbox",
|
|
84
|
-
"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.
|
|
84
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
85
85
|
},
|
|
86
86
|
"1167:247": {
|
|
87
87
|
"figmaComponent": "Citation",
|
|
88
88
|
"component": "Citation",
|
|
89
|
-
"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.
|
|
89
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
90
90
|
},
|
|
91
91
|
"1168:246": {
|
|
92
92
|
"figmaComponent": "Citation List",
|
|
93
93
|
"component": "CitationList",
|
|
94
|
-
"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.
|
|
94
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
95
95
|
},
|
|
96
96
|
"1168:241": {
|
|
97
97
|
"figmaComponent": "Citation List Item",
|
|
98
98
|
"component": "CitationListItem",
|
|
99
|
-
"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.
|
|
99
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
100
100
|
},
|
|
101
101
|
"1370:2359": {
|
|
102
102
|
"figmaComponent": "Combobox",
|
|
103
103
|
"component": "Combobox",
|
|
104
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { Combobox } from 'ionbase-ui';\n<Combobox size=\"sm\" options={…} 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 and Read-only is isReadOnly. The same split Input records, because the field is Input’s box.\n Value: Figma’s text is whatever the field shows. In code that is `placeholder` until something is chosen; after that it is the selected option’s label, which comes from `options`.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/combobox/index.html.md\nGenerated from ionbase-ui@0.
|
|
104
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { Combobox } from 'ionbase-ui';\n<Combobox size=\"sm\" options={…} 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 and Read-only is isReadOnly. The same split Input records, because the field is Input’s box.\n Value: Figma’s text is whatever the field shows. In code that is `placeholder` until something is chosen; after that it is the selected option’s label, which comes from `options`.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/combobox/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
105
105
|
},
|
|
106
106
|
"1166:262": {
|
|
107
107
|
"figmaComponent": "Confidence Indicator",
|
|
108
108
|
"component": "ConfidenceIndicator",
|
|
109
|
-
"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.
|
|
109
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
110
110
|
},
|
|
111
111
|
"1394:536": {
|
|
112
112
|
"figmaComponent": "Date Picker",
|
|
113
113
|
"component": "DatePicker",
|
|
114
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { DatePicker } from 'ionbase-ui';\n<DatePicker size=\"sm\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n State → isInvalid (Invalid only)\n\nNOTES\n State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — the same split as Input, whose box this is.\n Type: Single is DatePicker; Range is DateRangePicker, which takes the same size and state props. A Figma set maps to one code component, so the range picker is reached through this axis — see codeUnmapped.DateRangePicker.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/date-picker/index.html.md\nGenerated from ionbase-ui@0.
|
|
114
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { DatePicker } from 'ionbase-ui';\n<DatePicker size=\"sm\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n State → isInvalid (Invalid only)\n\nNOTES\n State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — the same split as Input, whose box this is.\n Type: Single is DatePicker; Range is DateRangePicker, which takes the same size and state props. A Figma set maps to one code component, so the range picker is reached through this axis — see codeUnmapped.DateRangePicker.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/date-picker/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
115
115
|
},
|
|
116
116
|
"1365:2404": {
|
|
117
117
|
"figmaComponent": "Drawer",
|
|
118
118
|
"component": "Drawer",
|
|
119
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { Drawer } from 'ionbase-ui';\n<Drawer placement=\"start\" size=\"sm\" title={…} />\n\nPROPERTIES\n Placement → placement: Start=start, End=end, Top=top, Bottom=bottom\n Size → size: Small=sm, Medium=md, Large=lg\n Title → title\n Description → description\n Show Description → description\n Show Close → showClose\n Show Footer → footer\n\nNOTES\n Show Description: false means description is omitted\n Show Footer: false means footer is omitted\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/drawer/index.html.md\nGenerated from ionbase-ui@0.
|
|
119
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { Drawer } from 'ionbase-ui';\n<Drawer placement=\"start\" size=\"sm\" title={…} />\n\nPROPERTIES\n Placement → placement: Start=start, End=end, Top=top, Bottom=bottom\n Size → size: Small=sm, Medium=md, Large=lg\n Title → title\n Description → description\n Show Description → description\n Show Close → showClose\n Show Footer → footer\n\nNOTES\n Show Description: false means description is omitted\n Show Footer: false means footer is omitted\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/drawer/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
120
120
|
},
|
|
121
121
|
"1334:2294": {
|
|
122
122
|
"figmaComponent": "Empty State",
|
|
123
123
|
"component": "EmptyState",
|
|
124
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { EmptyState } from 'ionbase-ui';\n<EmptyState size=\"inline\" reason=\"first-run\" title={…} />\n\nPROPERTIES\n Size → size: Inline=inline, Panel=panel, Page=page\n Reason → reason: No Results=no-results, First Run=first-run, No Access=no-access, Error=error\n Title → title\n Description → description\n Show Description → description\n Show Icon → icon\n Show Actions → action\n\nNOTES\n Show Description: an absent prop is the switch\n Show Icon: the mark renders when a node is passed; there is no boolean, and reason picks the tint rather than the glyph\n Show Actions: the row appears when action or secondaryAction is passed; there is no boolean\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/empty-state/index.html.md\nGenerated from ionbase-ui@0.
|
|
124
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { EmptyState } from 'ionbase-ui';\n<EmptyState size=\"inline\" reason=\"first-run\" title={…} />\n\nPROPERTIES\n Size → size: Inline=inline, Panel=panel, Page=page\n Reason → reason: No Results=no-results, First Run=first-run, No Access=no-access, Error=error\n Title → title\n Description → description\n Show Description → description\n Show Icon → icon\n Show Actions → action\n\nNOTES\n Show Description: an absent prop is the switch\n Show Icon: the mark renders when a node is passed; there is no boolean, and reason picks the tint rather than the glyph\n Show Actions: the row appears when action or secondaryAction is passed; there is no boolean\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/empty-state/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
125
125
|
},
|
|
126
126
|
"1367:2333": {
|
|
127
127
|
"figmaComponent": "File Upload",
|
|
128
128
|
"component": "FileUpload",
|
|
129
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { FileUpload } from 'ionbase-ui';\n<FileUpload size=\"md\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md\n State → isInvalid (Invalid only)\n Prompt → prompt\n Hint → hint\n Show Hint → hint\n\nNOTES\n State: Hover and Dragging are CSS; Disabled is isDisabled. Dragging has no prop at all — it is a pointer state the browser owns.\n Show Hint: false means hint is omitted\n Icon: The upload glyph is inlined in the component, like Select’s chevron: it is part of the control rather than a slot a caller fills, so there is no prop to swap it. The INSTANCE_SWAP exists so a designer can substitute it in a mock without detaching.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/file-upload/index.html.md\nGenerated from ionbase-ui@0.
|
|
129
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { FileUpload } from 'ionbase-ui';\n<FileUpload size=\"md\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md\n State → isInvalid (Invalid only)\n Prompt → prompt\n Hint → hint\n Show Hint → hint\n\nNOTES\n State: Hover and Dragging are CSS; Disabled is isDisabled. Dragging has no prop at all — it is a pointer state the browser owns.\n Show Hint: false means hint is omitted\n Icon: The upload glyph is inlined in the component, like Select’s chevron: it is part of the control rather than a slot a caller fills, so there is no prop to swap it. The INSTANCE_SWAP exists so a designer can substitute it in a mock without detaching.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/file-upload/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
130
130
|
},
|
|
131
131
|
"592:857": {
|
|
132
132
|
"figmaComponent": "Full Card",
|
|
133
133
|
"component": "FullCard",
|
|
134
|
-
"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.
|
|
134
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
135
135
|
},
|
|
136
136
|
"69:335": {
|
|
137
137
|
"figmaComponent": "Header",
|
|
138
138
|
"component": "Header",
|
|
139
|
-
"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.
|
|
139
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
140
140
|
},
|
|
141
141
|
"623:151": {
|
|
142
142
|
"figmaComponent": "Icon Button",
|
|
143
143
|
"component": "Button",
|
|
144
|
-
"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.
|
|
144
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
145
145
|
},
|
|
146
146
|
"80:275": {
|
|
147
147
|
"figmaComponent": "Input",
|
|
148
148
|
"component": "Input",
|
|
149
|
-
"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.
|
|
149
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
150
150
|
},
|
|
151
151
|
"80:372": {
|
|
152
152
|
"figmaComponent": "Input/Phone",
|
|
153
153
|
"component": "PhoneInput",
|
|
154
|
-
"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.
|
|
154
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
155
155
|
},
|
|
156
156
|
"774:1516": {
|
|
157
157
|
"figmaComponent": "Link",
|
|
158
158
|
"component": "Link",
|
|
159
|
-
"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.
|
|
159
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
160
160
|
},
|
|
161
161
|
"52:21369": {
|
|
162
162
|
"figmaComponent": "Logo-Ionbase",
|
|
163
163
|
"component": "Logo",
|
|
164
|
-
"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.
|
|
164
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
165
165
|
},
|
|
166
166
|
"82:306": {
|
|
167
167
|
"figmaComponent": "Menu",
|
|
168
168
|
"component": "Menu",
|
|
169
|
-
"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.
|
|
169
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
170
170
|
},
|
|
171
171
|
"639:2634": {
|
|
172
172
|
"figmaComponent": "Menu Item",
|
|
173
173
|
"component": "MenuItem",
|
|
174
|
-
"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.
|
|
174
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
175
175
|
},
|
|
176
176
|
"792:1537": {
|
|
177
177
|
"figmaComponent": "Modal",
|
|
178
178
|
"component": "Modal",
|
|
179
|
-
"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.
|
|
179
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
180
180
|
},
|
|
181
181
|
"53:13": {
|
|
182
182
|
"figmaComponent": "Nav Item",
|
|
183
183
|
"component": "NavItem",
|
|
184
|
-
"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.
|
|
184
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
185
185
|
},
|
|
186
186
|
"1389:473": {
|
|
187
187
|
"figmaComponent": "Number Input",
|
|
188
188
|
"component": "NumberInput",
|
|
189
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { NumberInput } from 'ionbase-ui';\n<NumberInput size=\"sm\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n State → isInvalid (Invalid only)\n Stepper → showStepper\n Value → value\n\nNOTES\n State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly. The same split Input records, because the box is Input’s.\n Value: A number in code; Figma’s text is its formatted display, and the placeholder until one is entered.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/number-input/index.html.md\nGenerated from ionbase-ui@0.
|
|
189
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { NumberInput } from 'ionbase-ui';\n<NumberInput size=\"sm\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n State → isInvalid (Invalid only)\n Stepper → showStepper\n Value → value\n\nNOTES\n State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly. The same split Input records, because the box is Input’s.\n Value: A number in code; Figma’s text is its formatted display, and the placeholder until one is entered.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/number-input/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
190
190
|
},
|
|
191
191
|
"1291:503": {
|
|
192
192
|
"figmaComponent": "Pagination",
|
|
193
193
|
"component": "Pagination",
|
|
194
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { Pagination } from 'ionbase-ui';\n<Pagination type=\"numbered\" size=\"sm\" page={…} pageCount={…} aria-label=\"…\" />\n\nPROPERTIES\n Type → type: Numbered=numbered, Simple=simple\n Size → size: Small=sm, Medium=md, Large=lg\n Show Page Size → showPageSize\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/pagination/index.html.md\nGenerated from ionbase-ui@0.
|
|
194
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { Pagination } from 'ionbase-ui';\n<Pagination type=\"numbered\" size=\"sm\" page={…} pageCount={…} aria-label=\"…\" />\n\nPROPERTIES\n Type → type: Numbered=numbered, Simple=simple\n Size → size: Small=sm, Medium=md, Large=lg\n Show Page Size → showPageSize\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/pagination/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
195
195
|
},
|
|
196
196
|
"825:1853": {
|
|
197
197
|
"figmaComponent": "Popover",
|
|
198
198
|
"component": "Popover",
|
|
199
|
-
"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.
|
|
199
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
200
200
|
},
|
|
201
201
|
"1344:331": {
|
|
202
202
|
"figmaComponent": "Progress Bar",
|
|
203
203
|
"component": "ProgressBar",
|
|
204
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { ProgressBar } from 'ionbase-ui';\n<ProgressBar intent=\"primary\" size=\"md\" label={…} />\n\nPROPERTIES\n Intent → intent: Primary=primary, Success=success, Warning=warning, Error=error\n Size → size: Small=sm, Medium=md\n Type → value\n Label → label\n Value → valueText\n Show Label → isLabelVisible\n Show Value → isValueVisible\n\nNOTES\n Type: not a prop value. Determinate means `value` was passed; Indeterminate means it was omitted, which is also what drops aria-valuenow. There is no `type` prop in code, and adding one would make the state settable independently of the number it describes\n Value: the Figma text is a sample percentage; in code `valueText` REPLACES the computed percentage and is what a screen reader speaks\n Show Value: bound only on the Determinate variants — an indeterminate bar has no percentage to reveal\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/progress-bar/index.html.md\nGenerated from ionbase-ui@0.
|
|
204
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { ProgressBar } from 'ionbase-ui';\n<ProgressBar intent=\"primary\" size=\"md\" label={…} />\n\nPROPERTIES\n Intent → intent: Primary=primary, Success=success, Warning=warning, Error=error\n Size → size: Small=sm, Medium=md\n Type → value\n Label → label\n Value → valueText\n Show Label → isLabelVisible\n Show Value → isValueVisible\n\nNOTES\n Type: not a prop value. Determinate means `value` was passed; Indeterminate means it was omitted, which is also what drops aria-valuenow. There is no `type` prop in code, and adding one would make the state settable independently of the number it describes\n Value: the Figma text is a sample percentage; in code `valueText` REPLACES the computed percentage and is what a screen reader speaks\n Show Value: bound only on the Determinate variants — an indeterminate bar has no percentage to reveal\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/progress-bar/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
205
205
|
},
|
|
206
206
|
"1393:387": {
|
|
207
207
|
"figmaComponent": "Prompt Input",
|
|
208
208
|
"component": "PromptInput",
|
|
209
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { PromptInput } from 'ionbase-ui';\n<PromptInput isRunning=\"false\" label={…} />\n\nPROPERTIES\n State → isDisabled (Disabled only)\n Running → isRunning: True=true, False=false\n Value → value\n Show Actions → actions\n\nNOTES\n State: Hover and Focus are CSS. Filled is content — a non-empty value — and is the only state in which send is live.\n Running: with onStop, which is what swaps send for AgentStop\n Value: Figma’s text is whatever the field shows: the placeholder until something is typed, then the value.\n Show Actions: false means actions is omitted; the attach button drawn there is an example, not part of the component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/prompt-input/index.html.md\nGenerated from ionbase-ui@0.
|
|
209
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { PromptInput } from 'ionbase-ui';\n<PromptInput isRunning=\"false\" label={…} />\n\nPROPERTIES\n State → isDisabled (Disabled only)\n Running → isRunning: True=true, False=false\n Value → value\n Show Actions → actions\n\nNOTES\n State: Hover and Focus are CSS. Filled is content — a non-empty value — and is the only state in which send is live.\n Running: with onStop, which is what swaps send for AgentStop\n Value: Figma’s text is whatever the field shows: the placeholder until something is typed, then the value.\n Show Actions: false means actions is omitted; the attach button drawn there is an example, not part of the component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/prompt-input/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
210
210
|
},
|
|
211
211
|
"89:314": {
|
|
212
212
|
"figmaComponent": "Radio",
|
|
213
213
|
"component": "Radio",
|
|
214
|
-
"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.
|
|
214
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
215
215
|
},
|
|
216
216
|
"1390:435": {
|
|
217
217
|
"figmaComponent": "Segmented Control",
|
|
218
218
|
"component": "SegmentedControl",
|
|
219
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { SegmentedControl } from 'ionbase-ui';\n<SegmentedControl size=\"sm\" isFullWidth=\"false\" label={…} />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Full Width → isFullWidth: True=true, False=false\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/segmented-control/index.html.md\nGenerated from ionbase-ui@0.
|
|
219
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { SegmentedControl } from 'ionbase-ui';\n<SegmentedControl size=\"sm\" isFullWidth=\"false\" label={…} />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Full Width → isFullWidth: True=true, False=false\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/segmented-control/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
220
220
|
},
|
|
221
221
|
"1390:332": {
|
|
222
222
|
"figmaComponent": "Segmented Control Item",
|
|
223
223
|
"component": "SegmentedControlItem",
|
|
224
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { SegmentedControlItem } from 'ionbase-ui';\n<SegmentedControlItem value={…}>Label</SegmentedControlItem>\n\nPROPERTIES\n Label → children\n Show Icon → icon\n Icon → icon\n State → isDisabled (Disabled, Selected-Disabled only)\n\nNOTES\n Show Icon: false means icon is omitted\n Size: set on the parent SegmentedControl, not per item\n State: Default and Hover are CSS. Selected is the parent SegmentedControl’s value — the item never owns selection, the same split Tabs Item records.\n Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/segmented-control-item/index.html.md\nGenerated from ionbase-ui@0.
|
|
224
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { SegmentedControlItem } from 'ionbase-ui';\n<SegmentedControlItem value={…}>Label</SegmentedControlItem>\n\nPROPERTIES\n Label → children\n Show Icon → icon\n Icon → icon\n State → isDisabled (Disabled, Selected-Disabled only)\n\nNOTES\n Show Icon: false means icon is omitted\n Size: set on the parent SegmentedControl, not per item\n State: Default and Hover are CSS. Selected is the parent SegmentedControl’s value — the item never owns selection, the same split Tabs Item records.\n Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/segmented-control-item/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
225
225
|
},
|
|
226
226
|
"82:379": {
|
|
227
227
|
"figmaComponent": "Select",
|
|
228
228
|
"component": "Select",
|
|
229
|
-
"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.
|
|
229
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
230
230
|
},
|
|
231
231
|
"1396:502": {
|
|
232
232
|
"figmaComponent": "Sidebar",
|
|
233
233
|
"component": "Sidebar",
|
|
234
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { Sidebar } from 'ionbase-ui';\n<Sidebar label={…} />\n\nPROPERTIES\n Show Header → header\n Show Footer → footer\n\nNOTES\n Show Header: false means header is omitted; the logo drawn there is an example\n Show Footer: false means footer is omitted; the Settings row drawn there is an example\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/sidebar/index.html.md\nGenerated from ionbase-ui@0.
|
|
234
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { Sidebar } from 'ionbase-ui';\n<Sidebar label={…} />\n\nPROPERTIES\n Show Header → header\n Show Footer → footer\n\nNOTES\n Show Header: false means header is omitted; the logo drawn there is an example\n Show Footer: false means footer is omitted; the Settings row drawn there is an example\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/sidebar/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
235
235
|
},
|
|
236
236
|
"1396:412": {
|
|
237
237
|
"figmaComponent": "Sidebar Item",
|
|
238
238
|
"component": "SidebarItem",
|
|
239
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { SidebarItem } from 'ionbase-ui';\n<SidebarItem isExpanded=\"false\" label={…} />\n\nPROPERTIES\n State → isCurrent (Current, Current-Hover only)\n Has Children → children (True only)\n Expanded → isExpanded: True=true, False=false\n Label → label\n Show Icon → icon\n Icon → icon\n Show Badge → badge\n Badge → badge\n Actions Visible → actions\n\nNOTES\n State: Default and Hover are CSS; Disabled is isDisabled.\n Has Children: True means nested SidebarItems are passed as children; Figma draws them as sibling instances indented 16px.\n Expanded: or defaultExpanded; only meaningful with children\n Show Icon: false means icon is omitted\n Show Badge: false means badge is omitted\n Actions Visible: code renders them always but reveals them on hover and focus (always on touch); Figma shows or hides them\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/sidebar-item/index.html.md\nGenerated from ionbase-ui@0.
|
|
239
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { SidebarItem } from 'ionbase-ui';\n<SidebarItem isExpanded=\"false\" label={…} />\n\nPROPERTIES\n State → isCurrent (Current, Current-Hover only)\n Has Children → children (True only)\n Expanded → isExpanded: True=true, False=false\n Label → label\n Show Icon → icon\n Icon → icon\n Show Badge → badge\n Badge → badge\n Actions Visible → actions\n\nNOTES\n State: Default and Hover are CSS; Disabled is isDisabled.\n Has Children: True means nested SidebarItems are passed as children; Figma draws them as sibling instances indented 16px.\n Expanded: or defaultExpanded; only meaningful with children\n Show Icon: false means icon is omitted\n Show Badge: false means badge is omitted\n Actions Visible: code renders them always but reveals them on hover and focus (always on touch); Figma shows or hides them\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/sidebar-item/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
240
240
|
},
|
|
241
241
|
"1396:501": {
|
|
242
242
|
"figmaComponent": "Sidebar Section",
|
|
243
243
|
"component": "SidebarSection",
|
|
244
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { SidebarSection } from 'ionbase-ui';\n<SidebarSection isExpanded=\"true\" />\n\nPROPERTIES\n Title → title\n Collapsible → isCollapsible\n Collapsed → isExpanded: False=true, True=false\n Show Actions → actions\n\nNOTES\n Collapsed: the names invert: Figma says Collapsed, code says isExpanded (or defaultExpanded)\n Show Actions: false means actions is omitted\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/sidebar-section/index.html.md\nGenerated from ionbase-ui@0.
|
|
244
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { SidebarSection } from 'ionbase-ui';\n<SidebarSection isExpanded=\"true\" />\n\nPROPERTIES\n Title → title\n Collapsible → isCollapsible\n Collapsed → isExpanded: False=true, True=false\n Show Actions → actions\n\nNOTES\n Collapsed: the names invert: Figma says Collapsed, code says isExpanded (or defaultExpanded)\n Show Actions: false means actions is omitted\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/sidebar-section/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
245
245
|
},
|
|
246
246
|
"1345:248": {
|
|
247
247
|
"figmaComponent": "Skeleton",
|
|
248
248
|
"component": "Skeleton",
|
|
249
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { Skeleton } from 'ionbase-ui';\n<Skeleton variant=\"text\" />\n\nPROPERTIES\n Variant → variant: Text=text, Circle=circle, Rect=rect\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/skeleton/index.html.md\nGenerated from ionbase-ui@0.
|
|
249
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { Skeleton } from 'ionbase-ui';\n<Skeleton variant=\"text\" />\n\nPROPERTIES\n Variant → variant: Text=text, Circle=circle, Rect=rect\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/skeleton/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
250
250
|
},
|
|
251
251
|
"1341:258": {
|
|
252
252
|
"figmaComponent": "Spinner",
|
|
253
253
|
"component": "Spinner",
|
|
254
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { Spinner } from 'ionbase-ui';\n<Spinner size=\"md\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Label → label\n Show Label → isLabelVisible\n\nNOTES\n Show Label: controls only whether the label is VISIBLE. The label is announced either way — turning this off in Figma does not remove it from the accessibility tree, and `isDecorative` is the prop that silences the component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/spinner/index.html.md\nGenerated from ionbase-ui@0.
|
|
254
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { Spinner } from 'ionbase-ui';\n<Spinner size=\"md\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n Label → label\n Show Label → isLabelVisible\n\nNOTES\n Show Label: controls only whether the label is VISIBLE. The label is announced either way — turning this off in Figma does not remove it from the accessibility tree, and `isDecorative` is the prop that silences the component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/spinner/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
255
255
|
},
|
|
256
256
|
"1391:431": {
|
|
257
257
|
"figmaComponent": "Stepper",
|
|
258
258
|
"component": "Stepper",
|
|
259
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { Stepper } from 'ionbase-ui';\n<Stepper orientation=\"horizontal\" />\n\nPROPERTIES\n Orientation → orientation: Horizontal=horizontal, Vertical=vertical\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/stepper/index.html.md\nGenerated from ionbase-ui@0.
|
|
259
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { Stepper } from 'ionbase-ui';\n<Stepper orientation=\"horizontal\" />\n\nPROPERTIES\n Orientation → orientation: Horizontal=horizontal, Vertical=vertical\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/stepper/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
260
260
|
},
|
|
261
261
|
"1391:356": {
|
|
262
262
|
"figmaComponent": "Stepper Step",
|
|
263
263
|
"component": "StepperStep",
|
|
264
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { StepperStep } from 'ionbase-ui';\n<StepperStep status=\"incomplete\" isCurrent=\"false\">Label</StepperStep>\n\nPROPERTIES\n Status → status: Incomplete=incomplete, Complete=complete, Error=error\n Current → isCurrent: True=true, False=false\n Label → children\n Description → description\n Show Description → description\n\nNOTES\n Show Description: false means description is omitted\n Number: the step’s position in the list; code numbers steps itself\n Orientation: set on the parent Stepper, not per step — drawn per step only because the connector’s geometry differs\n Show Connector: code draws a connector after every step but the last; Figma needs it switched off by hand on the last instance\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/stepper-step/index.html.md\nGenerated from ionbase-ui@0.
|
|
264
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { StepperStep } from 'ionbase-ui';\n<StepperStep status=\"incomplete\" isCurrent=\"false\">Label</StepperStep>\n\nPROPERTIES\n Status → status: Incomplete=incomplete, Complete=complete, Error=error\n Current → isCurrent: True=true, False=false\n Label → children\n Description → description\n Show Description → description\n\nNOTES\n Show Description: false means description is omitted\n Number: the step’s position in the list; code numbers steps itself\n Orientation: set on the parent Stepper, not per step — drawn per step only because the connector’s geometry differs\n Show Connector: code draws a connector after every step but the last; Figma needs it switched off by hand on the last instance\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/stepper-step/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
265
265
|
},
|
|
266
266
|
"1164:248": {
|
|
267
267
|
"figmaComponent": "Streaming Text",
|
|
268
268
|
"component": "StreamingText",
|
|
269
|
-
"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.
|
|
269
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
270
270
|
},
|
|
271
271
|
"174:103": {
|
|
272
272
|
"figmaComponent": "Table Cell",
|
|
273
273
|
"component": "TableCell",
|
|
274
|
-
"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.
|
|
274
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
275
275
|
},
|
|
276
276
|
"175:605": {
|
|
277
277
|
"figmaComponent": "Table Row",
|
|
278
278
|
"component": "TableRow",
|
|
279
|
-
"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.
|
|
279
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
280
280
|
},
|
|
281
281
|
"157:126": {
|
|
282
282
|
"figmaComponent": "Tabs",
|
|
283
283
|
"component": "Tabs",
|
|
284
|
-
"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.
|
|
284
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
285
285
|
},
|
|
286
286
|
"156:259": {
|
|
287
287
|
"figmaComponent": "Tabs Item",
|
|
288
288
|
"component": "TabItem",
|
|
289
|
-
"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.
|
|
289
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
290
290
|
},
|
|
291
291
|
"1301:334": {
|
|
292
292
|
"figmaComponent": "Textarea",
|
|
293
293
|
"component": "Textarea",
|
|
294
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { Textarea } from 'ionbase-ui';\n<Textarea size=\"sm\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n State → isInvalid (Invalid only)\n Value → value\n\nNOTES\n State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled, Read-only is isReadOnly — both react-aria props, mirroring Input.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/textarea/index.html.md\nGenerated from ionbase-ui@0.
|
|
294
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { Textarea } from 'ionbase-ui';\n<Textarea size=\"sm\" label=\"…\" />\n\nPROPERTIES\n Size → size: Small=sm, Medium=md, Large=lg\n State → isInvalid (Invalid only)\n Value → value\n\nNOTES\n State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled, Read-only is isReadOnly — both react-aria props, mirroring Input.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/textarea/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
295
295
|
},
|
|
296
296
|
"820:1655": {
|
|
297
297
|
"figmaComponent": "Toast",
|
|
298
298
|
"component": "Toast",
|
|
299
|
-
"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.
|
|
299
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
300
300
|
},
|
|
301
301
|
"88:323": {
|
|
302
302
|
"figmaComponent": "Toggle",
|
|
303
303
|
"component": "Toggle",
|
|
304
|
-
"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.
|
|
304
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
305
305
|
},
|
|
306
306
|
"1392:391": {
|
|
307
307
|
"figmaComponent": "Tool Call",
|
|
308
308
|
"component": "ToolCall",
|
|
309
|
-
"block": "───── CODE · ionbase-ui ─────\nimport { ToolCall } from 'ionbase-ui';\n<ToolCall status=\"pending\" isExpanded=\"false\" title={…} />\n\nPROPERTIES\n Status → status: Pending=pending, Active=active, Done=done, Failed=failed, Skipped=skipped\n Expanded → isExpanded: True=true, False=false\n Title → title\n Name → name\n Show Name → name\n Duration → durationMs\n Show Duration → durationMs\n Error Message → errorMessage\n\nNOTES\n Expanded: or defaultExpanded, uncontrolled\n Show Name: false means name is omitted\n Duration: milliseconds in code; Figma shows the formatted text (“1.2s”, “340ms”)\n Show Duration: false means durationMs is omitted\n Has Details: not a prop: code shows the chevron and makes the header a button when input or output is passed\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tool-call/index.html.md\nGenerated from ionbase-ui@0.
|
|
309
|
+
"block": "───── CODE · ionbase-ui ─────\nimport { ToolCall } from 'ionbase-ui';\n<ToolCall status=\"pending\" isExpanded=\"false\" title={…} />\n\nPROPERTIES\n Status → status: Pending=pending, Active=active, Done=done, Failed=failed, Skipped=skipped\n Expanded → isExpanded: True=true, False=false\n Title → title\n Name → name\n Show Name → name\n Duration → durationMs\n Show Duration → durationMs\n Error Message → errorMessage\n\nNOTES\n Expanded: or defaultExpanded, uncontrolled\n Show Name: false means name is omitted\n Duration: milliseconds in code; Figma shows the formatted text (“1.2s”, “340ms”)\n Show Duration: false means durationMs is omitted\n Has Details: not a prop: code shows the chevron and makes the header a button when input or output is passed\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tool-call/index.html.md\nGenerated from ionbase-ui@0.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
310
310
|
},
|
|
311
311
|
"801:68": {
|
|
312
312
|
"figmaComponent": "Tooltip",
|
|
313
313
|
"component": "Tooltip",
|
|
314
|
-
"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.
|
|
314
|
+
"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.70.0. Edit the code, not this block.\n───── end code ─────"
|
|
315
315
|
}
|
|
316
316
|
}
|
|
317
317
|
}
|
package/dist/figma-map.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "ionbase-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.70.0",
|
|
4
4
|
"figmaFile": "gaLbGd0QNb1fUl6BjSpfBA",
|
|
5
5
|
"figmaExported": "2026-09-24",
|
|
6
6
|
"usage": "Given a Figma node id or component name, look it up here for the React component, its import, and how each Figma property maps onto a real prop. Every mapping is verified against both the Figma export and the TypeScript API on each build.",
|
|
@@ -20,6 +20,16 @@
|
|
|
20
20
|
"use": "NavItem"
|
|
21
21
|
}
|
|
22
22
|
],
|
|
23
|
+
"variants": {
|
|
24
|
+
"placement": {
|
|
25
|
+
"right": {
|
|
26
|
+
"use": "the default — a rail on the left of the content, opening across it"
|
|
27
|
+
},
|
|
28
|
+
"left": {
|
|
29
|
+
"use": "a rail against the right edge of the page; `right` would open the list off the screen"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
},
|
|
23
33
|
"a11y": {
|
|
24
34
|
"role": "disclosure — a real <button> with aria-expanded and aria-controls",
|
|
25
35
|
"guarantees": [
|
|
@@ -47,6 +57,10 @@
|
|
|
47
57
|
{
|
|
48
58
|
"dont": "expecting every section to be visible at once",
|
|
49
59
|
"why": "the panel caps at 60vh and scrolls — a document-length index would otherwise grow off both edges of the viewport, taking the rows nearest the active one with it"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"dont": "leaving `placement` at `right` for a rail on the page's right edge",
|
|
63
|
+
"why": "the open list runs past the viewport; `left` opens it back over the content"
|
|
50
64
|
}
|
|
51
65
|
],
|
|
52
66
|
"stylesheet": "src/styles/scroll-progress.css",
|
|
@@ -61,6 +75,7 @@
|
|
|
61
75
|
"--font-weight-regular",
|
|
62
76
|
"--ion-duration-base",
|
|
63
77
|
"--ion-ease-out",
|
|
78
|
+
"--ion-scroll-progress-slide",
|
|
64
79
|
"--ion-shadow-shadow-md",
|
|
65
80
|
"--radius-full",
|
|
66
81
|
"--radius-md",
|
|
@@ -103,10 +118,20 @@
|
|
|
103
118
|
"required": false,
|
|
104
119
|
"origin": "own",
|
|
105
120
|
"description": "Fired when a row is chosen. The component does not scroll anywhere\nitself; matching Menu, it reports the choice and lets the caller decide\nwhat \"select this section\" means for their page."
|
|
121
|
+
},
|
|
122
|
+
"placement": {
|
|
123
|
+
"type": "ScrollProgressPlacement | undefined",
|
|
124
|
+
"required": false,
|
|
125
|
+
"origin": "own",
|
|
126
|
+
"description": "Which way the section list opens. `right` suits a rail on the left of the\ncontent; a rail against the right edge of the page needs `left`, or the\nopen list runs off the screen.",
|
|
127
|
+
"values": [
|
|
128
|
+
"right",
|
|
129
|
+
"left"
|
|
130
|
+
]
|
|
106
131
|
}
|
|
107
132
|
},
|
|
108
133
|
"propCounts": {
|
|
109
|
-
"own":
|
|
134
|
+
"own": 5,
|
|
110
135
|
"aria": 0,
|
|
111
136
|
"dom": 277,
|
|
112
137
|
"other": 0
|
|
@@ -44,7 +44,8 @@
|
|
|
44
44
|
"`limit` drops the oldest toasts, so the stack can never cover the page"
|
|
45
45
|
],
|
|
46
46
|
"requires": [
|
|
47
|
-
"mounting exactly one ToastProvider — a second live region competes with the first"
|
|
47
|
+
"mounting exactly one ToastProvider — a second live region competes with the first",
|
|
48
|
+
"a `label` that is unique among the page's landmarks when the app has its own section called Notifications — the region is a landmark, and two with one name fail axe `landmark-unique`"
|
|
48
49
|
]
|
|
49
50
|
},
|
|
50
51
|
"antiPatterns": [
|
|
@@ -121,10 +122,16 @@
|
|
|
121
122
|
"required": false,
|
|
122
123
|
"origin": "own",
|
|
123
124
|
"description": "Oldest are dropped past this. Prevents an unbounded stack covering the page."
|
|
125
|
+
},
|
|
126
|
+
"label": {
|
|
127
|
+
"type": "string | undefined",
|
|
128
|
+
"required": false,
|
|
129
|
+
"origin": "own",
|
|
130
|
+
"description": "The live region's accessible name. The region is a landmark, and landmark\nnames must be unique on a page: an app with its own section called\n\"Notifications\" fails axe `landmark-unique` on every page that has one\nunless this is changed."
|
|
124
131
|
}
|
|
125
132
|
},
|
|
126
133
|
"propCounts": {
|
|
127
|
-
"own":
|
|
134
|
+
"own": 4,
|
|
128
135
|
"aria": 0,
|
|
129
136
|
"dom": 0,
|
|
130
137
|
"other": 0
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "ionbase-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.70.0",
|
|
4
4
|
"generated": "by scripts/build-meta.mjs — do not edit; intent lives in meta/*.json",
|
|
5
5
|
"hooks": [
|
|
6
6
|
"useToast"
|
|
@@ -9093,6 +9093,16 @@
|
|
|
9093
9093
|
"use": "NavItem"
|
|
9094
9094
|
}
|
|
9095
9095
|
],
|
|
9096
|
+
"variants": {
|
|
9097
|
+
"placement": {
|
|
9098
|
+
"right": {
|
|
9099
|
+
"use": "the default — a rail on the left of the content, opening across it"
|
|
9100
|
+
},
|
|
9101
|
+
"left": {
|
|
9102
|
+
"use": "a rail against the right edge of the page; `right` would open the list off the screen"
|
|
9103
|
+
}
|
|
9104
|
+
}
|
|
9105
|
+
},
|
|
9096
9106
|
"a11y": {
|
|
9097
9107
|
"role": "disclosure — a real <button> with aria-expanded and aria-controls",
|
|
9098
9108
|
"guarantees": [
|
|
@@ -9120,6 +9130,10 @@
|
|
|
9120
9130
|
{
|
|
9121
9131
|
"dont": "expecting every section to be visible at once",
|
|
9122
9132
|
"why": "the panel caps at 60vh and scrolls — a document-length index would otherwise grow off both edges of the viewport, taking the rows nearest the active one with it"
|
|
9133
|
+
},
|
|
9134
|
+
{
|
|
9135
|
+
"dont": "leaving `placement` at `right` for a rail on the page's right edge",
|
|
9136
|
+
"why": "the open list runs past the viewport; `left` opens it back over the content"
|
|
9123
9137
|
}
|
|
9124
9138
|
],
|
|
9125
9139
|
"stylesheet": "src/styles/scroll-progress.css",
|
|
@@ -9134,6 +9148,7 @@
|
|
|
9134
9148
|
"--font-weight-regular",
|
|
9135
9149
|
"--ion-duration-base",
|
|
9136
9150
|
"--ion-ease-out",
|
|
9151
|
+
"--ion-scroll-progress-slide",
|
|
9137
9152
|
"--ion-shadow-shadow-md",
|
|
9138
9153
|
"--radius-full",
|
|
9139
9154
|
"--radius-md",
|
|
@@ -9176,10 +9191,20 @@
|
|
|
9176
9191
|
"required": false,
|
|
9177
9192
|
"origin": "own",
|
|
9178
9193
|
"description": "Fired when a row is chosen. The component does not scroll anywhere\nitself; matching Menu, it reports the choice and lets the caller decide\nwhat \"select this section\" means for their page."
|
|
9194
|
+
},
|
|
9195
|
+
"placement": {
|
|
9196
|
+
"type": "ScrollProgressPlacement | undefined",
|
|
9197
|
+
"required": false,
|
|
9198
|
+
"origin": "own",
|
|
9199
|
+
"description": "Which way the section list opens. `right` suits a rail on the left of the\ncontent; a rail against the right edge of the page needs `left`, or the\nopen list runs off the screen.",
|
|
9200
|
+
"values": [
|
|
9201
|
+
"right",
|
|
9202
|
+
"left"
|
|
9203
|
+
]
|
|
9179
9204
|
}
|
|
9180
9205
|
},
|
|
9181
9206
|
"propCounts": {
|
|
9182
|
-
"own":
|
|
9207
|
+
"own": 5,
|
|
9183
9208
|
"aria": 0,
|
|
9184
9209
|
"dom": 277,
|
|
9185
9210
|
"other": 0
|
|
@@ -12480,7 +12505,8 @@
|
|
|
12480
12505
|
"`limit` drops the oldest toasts, so the stack can never cover the page"
|
|
12481
12506
|
],
|
|
12482
12507
|
"requires": [
|
|
12483
|
-
"mounting exactly one ToastProvider — a second live region competes with the first"
|
|
12508
|
+
"mounting exactly one ToastProvider — a second live region competes with the first",
|
|
12509
|
+
"a `label` that is unique among the page's landmarks when the app has its own section called Notifications — the region is a landmark, and two with one name fail axe `landmark-unique`"
|
|
12484
12510
|
]
|
|
12485
12511
|
},
|
|
12486
12512
|
"antiPatterns": [
|
|
@@ -12557,10 +12583,16 @@
|
|
|
12557
12583
|
"required": false,
|
|
12558
12584
|
"origin": "own",
|
|
12559
12585
|
"description": "Oldest are dropped past this. Prevents an unbounded stack covering the page."
|
|
12586
|
+
},
|
|
12587
|
+
"label": {
|
|
12588
|
+
"type": "string | undefined",
|
|
12589
|
+
"required": false,
|
|
12590
|
+
"origin": "own",
|
|
12591
|
+
"description": "The live region's accessible name. The region is a landmark, and landmark\nnames must be unique on a page: an app with its own section called\n\"Notifications\" fails axe `landmark-unique` on every page that has one\nunless this is changed."
|
|
12560
12592
|
}
|
|
12561
12593
|
},
|
|
12562
12594
|
"propCounts": {
|
|
12563
|
-
"own":
|
|
12595
|
+
"own": 4,
|
|
12564
12596
|
"aria": 0,
|
|
12565
12597
|
"dom": 0,
|
|
12566
12598
|
"other": 0
|
package/dist/meta/index.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "ionbase-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.70.0",
|
|
4
4
|
"usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
|
|
5
5
|
"hooks": [
|
|
6
6
|
"useToast"
|
|
@@ -663,7 +663,12 @@
|
|
|
663
663
|
"ScrollProgress": {
|
|
664
664
|
"summary": "A compact progress rail that expands into a section list. A disclosure, not a menu — and it computes nothing itself.",
|
|
665
665
|
"status": "stable",
|
|
666
|
-
"variants": {
|
|
666
|
+
"variants": {
|
|
667
|
+
"placement": [
|
|
668
|
+
"right",
|
|
669
|
+
"left"
|
|
670
|
+
]
|
|
671
|
+
},
|
|
667
672
|
"detail": "dist/meta/ScrollProgress.json",
|
|
668
673
|
"hasIntent": true
|
|
669
674
|
},
|
|
@@ -160,13 +160,24 @@
|
|
|
160
160
|
* very percentage the reader opened the panel to act on. Keyboard users are
|
|
161
161
|
* unaffected either way: the rows are real buttons in tab order, so Tab
|
|
162
162
|
* scrolls each one into view without touching the wheel.
|
|
163
|
+
*
|
|
164
|
+
* CLOSED IS `display: none`, NOT ONLY INVISIBLE
|
|
165
|
+
*
|
|
166
|
+
* `visibility: hidden` removes the panel from sight and from tab order, but a
|
|
167
|
+
* hidden box still counts toward its scroll container's overflow. A rail near
|
|
168
|
+
* the right edge of a page therefore widened the page by however far the
|
|
169
|
+
* closed panel reached past it — 152px in the demo app — and a phone scrolled
|
|
170
|
+
* sideways into empty space. `display: none` takes it out of layout entirely.
|
|
171
|
+
* The reveal survives: `transition-behavior: allow-discrete` holds `display`
|
|
172
|
+
* until the fade-out finishes, and `@starting-style` gives the fade-in a
|
|
173
|
+
* starting point. A browser without either simply shows and hides it without
|
|
174
|
+
* the fade. `visibility` stays in the transition for the same browsers.
|
|
163
175
|
*/
|
|
164
176
|
.ion-scroll-progress__panel {
|
|
165
177
|
position: absolute;
|
|
166
|
-
left: 0;
|
|
167
178
|
top: 50%;
|
|
168
179
|
z-index: 10;
|
|
169
|
-
display:
|
|
180
|
+
display: none;
|
|
170
181
|
flex-direction: column;
|
|
171
182
|
gap: var(--spacing-4);
|
|
172
183
|
width: 220px;
|
|
@@ -181,20 +192,47 @@
|
|
|
181
192
|
opacity: 0;
|
|
182
193
|
visibility: hidden;
|
|
183
194
|
pointer-events: none;
|
|
184
|
-
transform: translateY(-50%) translateX(-
|
|
195
|
+
transform: translateY(-50%) translateX(var(--ion-scroll-progress-slide));
|
|
185
196
|
transition:
|
|
186
197
|
opacity var(--ion-duration-base) var(--ion-ease-out),
|
|
187
198
|
transform var(--ion-duration-base) var(--ion-ease-out),
|
|
188
|
-
visibility var(--ion-duration-base)
|
|
199
|
+
visibility var(--ion-duration-base),
|
|
200
|
+
display var(--ion-duration-base) allow-discrete;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/*
|
|
204
|
+
* Placement picks the edge the panel is anchored to and the direction it
|
|
205
|
+
* slides in from — always from the rail outward. `right` is the original
|
|
206
|
+
* behaviour; `left` is for a rail against the right edge of the page, where a
|
|
207
|
+
* rightward panel would leave the screen.
|
|
208
|
+
*/
|
|
209
|
+
.ion-scroll-progress__panel--right {
|
|
210
|
+
--ion-scroll-progress-slide: -4px;
|
|
211
|
+
|
|
212
|
+
left: 0;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.ion-scroll-progress__panel--left {
|
|
216
|
+
--ion-scroll-progress-slide: 4px;
|
|
217
|
+
|
|
218
|
+
right: 0;
|
|
189
219
|
}
|
|
190
220
|
|
|
191
221
|
.ion-scroll-progress__panel[data-open='true'] {
|
|
222
|
+
display: flex;
|
|
192
223
|
opacity: 1;
|
|
193
224
|
visibility: visible;
|
|
194
225
|
pointer-events: auto;
|
|
195
226
|
transform: translateY(-50%) translateX(0);
|
|
196
227
|
}
|
|
197
228
|
|
|
229
|
+
@starting-style {
|
|
230
|
+
.ion-scroll-progress__panel[data-open='true'] {
|
|
231
|
+
opacity: 0;
|
|
232
|
+
transform: translateY(-50%) translateX(var(--ion-scroll-progress-slide));
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
198
236
|
/*
|
|
199
237
|
* `display: block`, not `flex`: `text-overflow: ellipsis` does not apply to an
|
|
200
238
|
* anonymous flex item, so a flex row here would clip the label with no ellipsis
|
package/dist/styles/table.css
CHANGED
|
@@ -30,7 +30,16 @@
|
|
|
30
30
|
* assuming "MIXED" meant "top and bottom". One `border-bottom`, not a
|
|
31
31
|
* 4-sided border that needs collapsing.
|
|
32
32
|
*/
|
|
33
|
+
|
|
34
|
+
/*
|
|
35
|
+
* `position: relative` makes the scroll container a containing block. Without
|
|
36
|
+
* it, absolutely positioned content in a cell — the selection checkbox's real
|
|
37
|
+
* input, `.ion-visually-hidden` text, avatar media — is placed against the
|
|
38
|
+
* nearest positioned ancestor outside the table, escapes `overflow-x`, and
|
|
39
|
+
* widens the page: 382px of sideways scroll on a 390px phone in the demo app.
|
|
40
|
+
*/
|
|
33
41
|
.ion-table-container {
|
|
42
|
+
position: relative;
|
|
34
43
|
width: 100%;
|
|
35
44
|
overflow-x: auto;
|
|
36
45
|
border: var(--border-width-default) solid var(--border-default);
|
package/llms.txt
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> IonBase is a React design system for enterprise SaaS, built to be consumed by an agent rather than read by a developer. Every component ships a machine-readable contract carrying the judgement a type signature cannot: when to use it, what to use instead, the anti-patterns, and what it guarantees for accessibility versus what it requires of you.
|
|
4
4
|
|
|
5
|
-
Version 0.
|
|
5
|
+
Version 0.70.0. 70 components.
|
|
6
6
|
|
|
7
7
|
## Read these, in this order
|
|
8
8
|
|