@atelier-ui/react 0.1.11 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -0
- package/README.md +3 -3
- package/package.json +1 -1
- package/src/index.d.ts +29 -29
- package/src/index.js +29 -29
- package/src/index.js.map +1 -1
- package/src/lib/accordion/{llm-accordion.css → atl-accordion.css} +8 -8
- package/src/lib/accordion/{llm-accordion.d.ts → atl-accordion.d.ts} +13 -13
- package/src/lib/accordion/{llm-accordion.d.ts.map → atl-accordion.d.ts.map} +1 -1
- package/src/lib/accordion/{llm-accordion.js → atl-accordion.js} +9 -9
- package/src/lib/accordion/{llm-accordion.js.map → atl-accordion.js.map} +1 -1
- package/src/lib/alert/{llm-alert.css → atl-alert.css} +10 -10
- package/src/lib/alert/{llm-alert.d.ts → atl-alert.d.ts} +8 -8
- package/src/lib/alert/{llm-alert.d.ts.map → atl-alert.d.ts.map} +1 -1
- package/src/lib/alert/{llm-alert.js → atl-alert.js} +4 -4
- package/src/lib/alert/{llm-alert.js.map → atl-alert.js.map} +1 -1
- package/src/lib/avatar/{llm-avatar.css → atl-avatar.css} +20 -20
- package/src/lib/avatar/{llm-avatar.d.ts → atl-avatar.d.ts} +10 -10
- package/src/lib/avatar/{llm-avatar.d.ts.map → atl-avatar.d.ts.map} +1 -1
- package/src/lib/avatar/{llm-avatar.js → atl-avatar.js} +6 -6
- package/src/lib/avatar/{llm-avatar.js.map → atl-avatar.js.map} +1 -1
- package/src/lib/badge/{llm-badge.css → atl-badge.css} +9 -9
- package/src/lib/badge/atl-badge.d.ts +27 -0
- package/src/lib/badge/{llm-badge.d.ts.map → atl-badge.d.ts.map} +1 -1
- package/src/lib/badge/{llm-badge.js → atl-badge.js} +4 -4
- package/src/lib/badge/{llm-badge.js.map → atl-badge.js.map} +1 -1
- package/src/lib/breadcrumbs/{llm-breadcrumbs.css → atl-breadcrumbs.css} +11 -11
- package/src/lib/breadcrumbs/atl-breadcrumbs.d.ts +38 -0
- package/src/lib/breadcrumbs/{llm-breadcrumbs.d.ts.map → atl-breadcrumbs.d.ts.map} +1 -1
- package/src/lib/breadcrumbs/{llm-breadcrumbs.js → atl-breadcrumbs.js} +7 -7
- package/src/lib/breadcrumbs/{llm-breadcrumbs.js.map → atl-breadcrumbs.js.map} +1 -1
- package/src/lib/button/{llm-button.css → atl-button.css} +20 -20
- package/src/lib/button/{llm-button.d.ts → atl-button.d.ts} +7 -7
- package/src/lib/button/{llm-button.d.ts.map → atl-button.d.ts.map} +1 -1
- package/src/lib/button/{llm-button.js → atl-button.js} +4 -4
- package/src/lib/button/{llm-button.js.map → atl-button.js.map} +1 -1
- package/src/lib/card/{llm-card.css → atl-card.css} +20 -20
- package/src/lib/card/{llm-card.d.ts → atl-card.d.ts} +16 -16
- package/src/lib/card/{llm-card.d.ts.map → atl-card.d.ts.map} +1 -1
- package/src/lib/card/atl-card.js +30 -0
- package/src/lib/card/{llm-card.js.map → atl-card.js.map} +1 -1
- package/src/lib/chat/{llm-chat.css → atl-chat.css} +55 -55
- package/src/lib/chat/{llm-chat.d.ts → atl-chat.d.ts} +26 -26
- package/src/lib/chat/{llm-chat.d.ts.map → atl-chat.d.ts.map} +1 -1
- package/src/lib/chat/{llm-chat.js → atl-chat.js} +21 -21
- package/src/lib/chat/{llm-chat.js.map → atl-chat.js.map} +1 -1
- package/src/lib/checkbox/{llm-checkbox.css → atl-checkbox.css} +19 -19
- package/src/lib/checkbox/{llm-checkbox.d.ts → atl-checkbox.d.ts} +6 -6
- package/src/lib/checkbox/{llm-checkbox.d.ts.map → atl-checkbox.d.ts.map} +1 -1
- package/src/lib/checkbox/{llm-checkbox.js → atl-checkbox.js} +4 -4
- package/src/lib/checkbox/{llm-checkbox.js.map → atl-checkbox.js.map} +1 -1
- package/src/lib/code-block/{llm-code-block.css → atl-code-block.css} +2 -2
- package/src/lib/code-block/{llm-code-block.d.ts → atl-code-block.d.ts} +4 -4
- package/src/lib/code-block/{llm-code-block.d.ts.map → atl-code-block.d.ts.map} +1 -1
- package/src/lib/code-block/{llm-code-block.js → atl-code-block.js} +4 -4
- package/src/lib/code-block/{llm-code-block.js.map → atl-code-block.js.map} +1 -1
- package/src/lib/combobox/{llm-combobox.css → atl-combobox.css} +24 -24
- package/src/lib/combobox/{llm-combobox.d.ts → atl-combobox.d.ts} +7 -7
- package/src/lib/combobox/{llm-combobox.d.ts.map → atl-combobox.d.ts.map} +1 -1
- package/src/lib/combobox/{llm-combobox.js → atl-combobox.js} +8 -8
- package/src/lib/combobox/{llm-combobox.js.map → atl-combobox.js.map} +1 -1
- package/src/lib/dialog/{llm-dialog.css → atl-dialog.css} +18 -18
- package/src/lib/dialog/{llm-dialog.d.ts → atl-dialog.d.ts} +15 -15
- package/src/lib/dialog/{llm-dialog.d.ts.map → atl-dialog.d.ts.map} +1 -1
- package/src/lib/dialog/{llm-dialog.js → atl-dialog.js} +13 -13
- package/src/lib/dialog/{llm-dialog.js.map → atl-dialog.js.map} +1 -1
- package/src/lib/drawer/{llm-drawer.css → atl-drawer.css} +35 -35
- package/src/lib/drawer/{llm-drawer.d.ts → atl-drawer.d.ts} +15 -15
- package/src/lib/drawer/{llm-drawer.d.ts.map → atl-drawer.d.ts.map} +1 -1
- package/src/lib/drawer/{llm-drawer.js → atl-drawer.js} +13 -13
- package/src/lib/drawer/{llm-drawer.js.map → atl-drawer.js.map} +1 -1
- package/src/lib/icon/{llm-icon.css → atl-icon.css} +4 -4
- package/src/lib/icon/atl-icon.d.ts +24 -0
- package/src/lib/icon/{llm-icon.d.ts.map → atl-icon.d.ts.map} +1 -1
- package/src/lib/icon/{llm-icon.js → atl-icon.js} +5 -5
- package/src/lib/icon/{llm-icon.js.map → atl-icon.js.map} +1 -1
- package/src/lib/input/{llm-input.css → atl-input.css} +14 -14
- package/src/lib/input/{llm-input.d.ts → atl-input.d.ts} +6 -6
- package/src/lib/input/{llm-input.d.ts.map → atl-input.d.ts.map} +1 -1
- package/src/lib/input/{llm-input.js → atl-input.js} +4 -4
- package/src/lib/input/{llm-input.js.map → atl-input.js.map} +1 -1
- package/src/lib/menu/{llm-menu.css → atl-menu.css} +11 -11
- package/src/lib/menu/{llm-menu.d.ts → atl-menu.d.ts} +13 -13
- package/src/lib/menu/{llm-menu.d.ts.map → atl-menu.d.ts.map} +1 -1
- package/src/lib/menu/{llm-menu.js → atl-menu.js} +10 -10
- package/src/lib/menu/{llm-menu.js.map → atl-menu.js.map} +1 -1
- package/src/lib/pagination/{llm-pagination.css → atl-pagination.css} +1 -1
- package/src/lib/pagination/{llm-pagination.d.ts → atl-pagination.d.ts} +6 -6
- package/src/lib/pagination/{llm-pagination.d.ts.map → atl-pagination.d.ts.map} +1 -1
- package/src/lib/pagination/{llm-pagination.js → atl-pagination.js} +4 -4
- package/src/lib/pagination/{llm-pagination.js.map → atl-pagination.js.map} +1 -1
- package/src/lib/progress/{llm-progress.css → atl-progress.css} +9 -9
- package/src/lib/progress/{llm-progress.d.ts → atl-progress.d.ts} +6 -6
- package/src/lib/progress/{llm-progress.d.ts.map → atl-progress.d.ts.map} +1 -1
- package/src/lib/progress/{llm-progress.js → atl-progress.js} +4 -4
- package/src/lib/progress/{llm-progress.js.map → atl-progress.js.map} +1 -1
- package/src/lib/radio/{llm-radio.css → atl-radio.css} +11 -11
- package/src/lib/radio/{llm-radio.d.ts → atl-radio.d.ts} +7 -7
- package/src/lib/radio/{llm-radio.d.ts.map → atl-radio.d.ts.map} +1 -1
- package/src/lib/radio/{llm-radio.js → atl-radio.js} +6 -6
- package/src/lib/radio/{llm-radio.js.map → atl-radio.js.map} +1 -1
- package/src/lib/radio-group/{llm-radio-group.css → atl-radio-group.css} +6 -6
- package/src/lib/radio-group/{llm-radio-group.d.ts → atl-radio-group.d.ts} +6 -6
- package/src/lib/radio-group/{llm-radio-group.d.ts.map → atl-radio-group.d.ts.map} +1 -1
- package/src/lib/radio-group/{llm-radio-group.js → atl-radio-group.js} +4 -4
- package/src/lib/radio-group/{llm-radio-group.js.map → atl-radio-group.js.map} +1 -1
- package/src/lib/select/{llm-select.css → atl-select.css} +11 -11
- package/src/lib/select/{llm-select.d.ts → atl-select.d.ts} +10 -10
- package/src/lib/select/{llm-select.d.ts.map → atl-select.d.ts.map} +1 -1
- package/src/lib/select/{llm-select.js → atl-select.js} +6 -6
- package/src/lib/select/{llm-select.js.map → atl-select.js.map} +1 -1
- package/src/lib/skeleton/{llm-skeleton.css → atl-skeleton.css} +6 -6
- package/src/lib/skeleton/{llm-skeleton.d.ts → atl-skeleton.d.ts} +6 -6
- package/src/lib/skeleton/{llm-skeleton.d.ts.map → atl-skeleton.d.ts.map} +1 -1
- package/src/lib/skeleton/{llm-skeleton.js → atl-skeleton.js} +4 -4
- package/src/lib/skeleton/{llm-skeleton.js.map → atl-skeleton.js.map} +1 -1
- package/src/lib/spec.d.ts +120 -120
- package/src/lib/spec.js.map +1 -1
- package/src/lib/stepper/{llm-stepper.css → atl-stepper.css} +5 -5
- package/src/lib/stepper/{llm-stepper.d.ts → atl-stepper.d.ts} +9 -9
- package/src/lib/stepper/{llm-stepper.d.ts.map → atl-stepper.d.ts.map} +1 -1
- package/src/lib/stepper/{llm-stepper.js → atl-stepper.js} +11 -11
- package/src/lib/stepper/{llm-stepper.js.map → atl-stepper.js.map} +1 -1
- package/src/lib/table/{llm-table.css → atl-table.css} +30 -30
- package/src/lib/table/atl-table.d.ts +40 -0
- package/src/lib/table/{llm-table.d.ts.map → atl-table.d.ts.map} +1 -1
- package/src/lib/table/{llm-table.js → atl-table.js} +14 -14
- package/src/lib/table/{llm-table.js.map → atl-table.js.map} +1 -1
- package/src/lib/tabs/{llm-tabs.css → atl-tabs.css} +17 -17
- package/src/lib/tabs/{llm-tabs.d.ts → atl-tabs.d.ts} +12 -12
- package/src/lib/tabs/{llm-tabs.d.ts.map → atl-tabs.d.ts.map} +1 -1
- package/src/lib/tabs/{llm-tabs.js → atl-tabs.js} +11 -11
- package/src/lib/tabs/{llm-tabs.js.map → atl-tabs.js.map} +1 -1
- package/src/lib/textarea/{llm-textarea.css → atl-textarea.css} +15 -15
- package/src/lib/textarea/{llm-textarea.d.ts → atl-textarea.d.ts} +6 -6
- package/src/lib/textarea/{llm-textarea.d.ts.map → atl-textarea.d.ts.map} +1 -1
- package/src/lib/textarea/{llm-textarea.js → atl-textarea.js} +4 -4
- package/src/lib/textarea/{llm-textarea.js.map → atl-textarea.js.map} +1 -1
- package/src/lib/toast/{llm-toast.css → atl-toast.css} +16 -16
- package/src/lib/toast/atl-toast.d.ts +54 -0
- package/src/lib/toast/{llm-toast.d.ts.map → atl-toast.d.ts.map} +1 -1
- package/src/lib/toast/{llm-toast.js → atl-toast.js} +12 -12
- package/src/lib/toast/{llm-toast.js.map → atl-toast.js.map} +1 -1
- package/src/lib/toggle/{llm-toggle.css → atl-toggle.css} +16 -16
- package/src/lib/toggle/{llm-toggle.d.ts → atl-toggle.d.ts} +6 -6
- package/src/lib/toggle/{llm-toggle.d.ts.map → atl-toggle.d.ts.map} +1 -1
- package/src/lib/toggle/{llm-toggle.js → atl-toggle.js} +4 -4
- package/src/lib/toggle/{llm-toggle.js.map → atl-toggle.js.map} +1 -1
- package/src/lib/tooltip/{llm-tooltip.css → atl-tooltip.css} +12 -12
- package/src/lib/tooltip/atl-tooltip.d.ts +17 -0
- package/src/lib/tooltip/{llm-tooltip.d.ts.map → atl-tooltip.d.ts.map} +1 -1
- package/src/lib/tooltip/{llm-tooltip.js → atl-tooltip.js} +7 -7
- package/src/lib/tooltip/{llm-tooltip.js.map → atl-tooltip.js.map} +1 -1
- package/src/lib/badge/llm-badge.d.ts +0 -27
- package/src/lib/breadcrumbs/llm-breadcrumbs.d.ts +0 -38
- package/src/lib/card/llm-card.js +0 -30
- package/src/lib/icon/llm-icon.d.ts +0 -24
- package/src/lib/table/llm-table.d.ts +0 -40
- package/src/lib/toast/llm-toast.d.ts +0 -54
- package/src/lib/tooltip/llm-tooltip.d.ts +0 -17
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ReactNode, HTMLAttributes } from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
import './
|
|
2
|
+
import type { AtlTabGroupSpec, AtlTabSpec } from '../spec';
|
|
3
|
+
import './atl-tabs.css';
|
|
4
4
|
/**
|
|
5
|
-
* Properties for the
|
|
5
|
+
* Properties for the AtlTabGroup component.
|
|
6
6
|
*/
|
|
7
|
-
export interface
|
|
7
|
+
export interface AtlTabGroupProps extends HTMLAttributes<HTMLDivElement>, AtlTabGroupSpec {
|
|
8
8
|
/**
|
|
9
9
|
* The index of the currently selected tab.
|
|
10
10
|
*/
|
|
@@ -18,18 +18,18 @@ export interface LlmTabGroupProps extends HTMLAttributes<HTMLDivElement>, LlmTab
|
|
|
18
18
|
*/
|
|
19
19
|
variant?: 'default' | 'pills';
|
|
20
20
|
/**
|
|
21
|
-
* The
|
|
21
|
+
* The AtlTab components to be rendered.
|
|
22
22
|
*/
|
|
23
23
|
children?: ReactNode;
|
|
24
24
|
}
|
|
25
25
|
/**
|
|
26
26
|
* A component for organizing content into multiple tabs.
|
|
27
27
|
*/
|
|
28
|
-
export declare function
|
|
28
|
+
export declare function AtlTabGroup({ selectedIndex: externalIndex, onSelectedIndexChange, variant, children, className, ...rest }: AtlTabGroupProps): import("react").JSX.Element;
|
|
29
29
|
/**
|
|
30
|
-
* Properties for the
|
|
30
|
+
* Properties for the AtlTab component.
|
|
31
31
|
*/
|
|
32
|
-
export interface
|
|
32
|
+
export interface AtlTabProps extends AtlTabSpec {
|
|
33
33
|
/**
|
|
34
34
|
* The label to display on the tab button.
|
|
35
35
|
*/
|
|
@@ -44,10 +44,10 @@ export interface LlmTabProps extends LlmTabSpec {
|
|
|
44
44
|
children?: ReactNode;
|
|
45
45
|
}
|
|
46
46
|
/**
|
|
47
|
-
* An individual tab component for use within
|
|
47
|
+
* An individual tab component for use within AtlTabGroup.
|
|
48
48
|
*/
|
|
49
|
-
export declare function
|
|
50
|
-
export declare namespace
|
|
49
|
+
export declare function AtlTab({ children }: AtlTabProps): ReactNode;
|
|
50
|
+
export declare namespace AtlTab {
|
|
51
51
|
var displayName: string;
|
|
52
52
|
}
|
|
53
|
-
//# sourceMappingURL=
|
|
53
|
+
//# sourceMappingURL=atl-tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"atl-tabs.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/tabs/atl-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EACT,cAAc,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,eAAe,EACf,UAAU,EACX,MAAM,SAAS,CAAC;AACjB,OAAO,gBAAgB,CAAC;AAqBxB;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,eAAe;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EAAE,aAAa,EAC5B,qBAAqB,EACrB,OAAmB,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,+BA4GlB;AAED;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,aAE/C;yBAFe,MAAM"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useState, useRef, Children, isValidElement, } from 'react';
|
|
3
|
-
import './
|
|
3
|
+
import './atl-tabs.css';
|
|
4
4
|
const TabGroupContext = createContext({
|
|
5
5
|
selectedIndex: 0,
|
|
6
6
|
setSelectedIndex: () => undefined,
|
|
@@ -10,7 +10,7 @@ const TabGroupContext = createContext({
|
|
|
10
10
|
/**
|
|
11
11
|
* A component for organizing content into multiple tabs.
|
|
12
12
|
*/
|
|
13
|
-
export function
|
|
13
|
+
export function AtlTabGroup({ selectedIndex: externalIndex, onSelectedIndexChange, variant = 'default', children, className, ...rest }) {
|
|
14
14
|
const [internalIndex, setInternalIndex] = useState(0);
|
|
15
15
|
const isControlled = externalIndex !== undefined;
|
|
16
16
|
const selectedIndex = isControlled ? externalIndex : internalIndex;
|
|
@@ -23,7 +23,7 @@ export function LlmTabGroup({ selectedIndex: externalIndex, onSelectedIndexChang
|
|
|
23
23
|
const childArray = Children.toArray(children);
|
|
24
24
|
const tabs = childArray
|
|
25
25
|
.filter((child) => isValidElement(child) &&
|
|
26
|
-
child.type.displayName === '
|
|
26
|
+
child.type.displayName === 'AtlTab')
|
|
27
27
|
.map((child) => {
|
|
28
28
|
const element = child;
|
|
29
29
|
return {
|
|
@@ -31,7 +31,7 @@ export function LlmTabGroup({ selectedIndex: externalIndex, onSelectedIndexChang
|
|
|
31
31
|
disabled: element.props.disabled ?? false,
|
|
32
32
|
};
|
|
33
33
|
});
|
|
34
|
-
const classes = ['
|
|
34
|
+
const classes = ['atl-tab-group', `variant-${variant}`, className]
|
|
35
35
|
.filter(Boolean)
|
|
36
36
|
.join(' ');
|
|
37
37
|
const handleKeyDown = (e) => {
|
|
@@ -60,22 +60,22 @@ export function LlmTabGroup({ selectedIndex: externalIndex, onSelectedIndexChang
|
|
|
60
60
|
buttons?.[nextIndex]?.focus();
|
|
61
61
|
};
|
|
62
62
|
const panels = childArray.filter((child) => isValidElement(child) &&
|
|
63
|
-
child.type.displayName === '
|
|
64
|
-
return (_jsx(TabGroupContext.Provider, { value: { selectedIndex, setSelectedIndex: setIndex, variant, tabs }, children: _jsxs("div", { className: classes, ...rest, children: [_jsx("div", { className: "tablist", role: "tablist", ref: tabListRef, children: tabs.map((tab, i) => (_jsx("button", { type: "button", role: "tab", id: `
|
|
63
|
+
child.type.displayName === 'AtlTab');
|
|
64
|
+
return (_jsx(TabGroupContext.Provider, { value: { selectedIndex, setSelectedIndex: setIndex, variant, tabs }, children: _jsxs("div", { className: classes, ...rest, children: [_jsx("div", { className: "tablist", role: "tablist", ref: tabListRef, children: tabs.map((tab, i) => (_jsx("button", { type: "button", role: "tab", id: `atl-tab-${i}`, "aria-selected": i === selectedIndex, "aria-controls": `atl-tab-panel-${i}`, "aria-disabled": tab.disabled || undefined, tabIndex: i === selectedIndex ? 0 : -1, className: [
|
|
65
65
|
i === selectedIndex && 'is-active',
|
|
66
66
|
tab.disabled && 'is-disabled',
|
|
67
67
|
]
|
|
68
68
|
.filter(Boolean)
|
|
69
69
|
.join(' ') || undefined, disabled: tab.disabled, onClick: () => !tab.disabled && setIndex(i), onKeyDown: handleKeyDown, children: tab.label }, i))) }), panels.map((panel, i) => {
|
|
70
70
|
const element = panel;
|
|
71
|
-
return (_jsx("div", { id: `
|
|
71
|
+
return (_jsx("div", { id: `atl-tab-panel-${i}`, role: "tabpanel", "aria-labelledby": `atl-tab-${i}`, tabIndex: 0, hidden: i !== selectedIndex, children: element.props.children }, i));
|
|
72
72
|
})] }) }));
|
|
73
73
|
}
|
|
74
74
|
/**
|
|
75
|
-
* An individual tab component for use within
|
|
75
|
+
* An individual tab component for use within AtlTabGroup.
|
|
76
76
|
*/
|
|
77
|
-
export function
|
|
77
|
+
export function AtlTab({ children }) {
|
|
78
78
|
return children;
|
|
79
79
|
}
|
|
80
|
-
|
|
81
|
-
//# sourceMappingURL=
|
|
80
|
+
AtlTab.displayName = 'AtlTab';
|
|
81
|
+
//# sourceMappingURL=atl-tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"atl-tabs.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/tabs/atl-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useState,\n useRef,\n ReactNode,\n HTMLAttributes,\n KeyboardEvent,\n Children,\n isValidElement,\n ReactElement,\n} from 'react';\nimport type {\n AtlTabGroupSpec,\n AtlTabSpec,\n} from '../spec';\nimport './atl-tabs.css';\n\ninterface TabInfo {\n label: string;\n disabled: boolean;\n}\n\ninterface TabGroupContextValue {\n selectedIndex: number;\n setSelectedIndex: (index: number) => void;\n variant: 'default' | 'pills';\n tabs: TabInfo[];\n}\n\nconst TabGroupContext = createContext<TabGroupContextValue>({\n selectedIndex: 0,\n setSelectedIndex: () => undefined,\n variant: 'default',\n tabs: [],\n});\n\n/**\n * Properties for the AtlTabGroup component.\n */\nexport interface AtlTabGroupProps\n extends HTMLAttributes<HTMLDivElement>,\n AtlTabGroupSpec {\n /**\n * The index of the currently selected tab.\n */\n selectedIndex?: number;\n /**\n * Callback triggered when the selected tab index changes.\n */\n onSelectedIndexChange?: (index: number) => void;\n /**\n * The visual style variant of the tabs.\n */\n variant?: 'default' | 'pills';\n /**\n * The AtlTab components to be rendered.\n */\n children?: ReactNode;\n}\n\n/**\n * A component for organizing content into multiple tabs.\n */\nexport function AtlTabGroup({\n selectedIndex: externalIndex,\n onSelectedIndexChange,\n variant = 'default',\n children,\n className,\n ...rest\n}: AtlTabGroupProps) {\n const [internalIndex, setInternalIndex] = useState(0);\n const isControlled = externalIndex !== undefined;\n const selectedIndex = isControlled ? externalIndex : internalIndex;\n const tabListRef = useRef<HTMLDivElement>(null);\n\n const setIndex = (i: number) => {\n if (!isControlled) setInternalIndex(i);\n onSelectedIndexChange?.(i);\n };\n\n const childArray = Children.toArray(children);\n const tabs: TabInfo[] = childArray\n .filter(\n (child) =>\n isValidElement(child) &&\n (child.type as { displayName?: string }).displayName === 'AtlTab'\n )\n .map((child) => {\n const element = child as ReactElement<AtlTabProps>;\n return {\n label: element.props.label ?? '',\n disabled: element.props.disabled ?? false,\n };\n });\n\n const classes = ['atl-tab-group', `variant-${variant}`, className]\n .filter(Boolean)\n .join(' ');\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n const enabledIndices = tabs\n .map((t, i) => (!t.disabled ? i : -1))\n .filter((i) => i >= 0);\n if (enabledIndices.length === 0) return;\n\n const currentEnabled = enabledIndices.indexOf(selectedIndex);\n let nextPos = currentEnabled;\n\n if (e.key === 'ArrowRight')\n nextPos = (currentEnabled + 1) % enabledIndices.length;\n else if (e.key === 'ArrowLeft')\n nextPos =\n (currentEnabled - 1 + enabledIndices.length) % enabledIndices.length;\n else if (e.key === 'Home') nextPos = 0;\n else if (e.key === 'End') nextPos = enabledIndices.length - 1;\n else return;\n\n e.preventDefault();\n const nextIndex = enabledIndices[nextPos];\n setIndex(nextIndex);\n const buttons =\n tabListRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]');\n buttons?.[nextIndex]?.focus();\n };\n\n const panels = childArray.filter(\n (child) =>\n isValidElement(child) &&\n (child.type as { displayName?: string }).displayName === 'AtlTab'\n );\n\n return (\n <TabGroupContext.Provider value={{ selectedIndex, setSelectedIndex: setIndex, variant, tabs }}>\n <div className={classes} {...rest}>\n <div className=\"tablist\" role=\"tablist\" ref={tabListRef}>\n {tabs.map((tab, i) => (\n <button\n key={i}\n type=\"button\"\n role=\"tab\"\n id={`atl-tab-${i}`}\n aria-selected={i === selectedIndex}\n aria-controls={`atl-tab-panel-${i}`}\n aria-disabled={tab.disabled || undefined}\n tabIndex={i === selectedIndex ? 0 : -1}\n className={[\n i === selectedIndex && 'is-active',\n tab.disabled && 'is-disabled',\n ]\n .filter(Boolean)\n .join(' ') || undefined}\n disabled={tab.disabled}\n onClick={() => !tab.disabled && setIndex(i)}\n onKeyDown={handleKeyDown}\n >\n {tab.label}\n </button>\n ))}\n </div>\n {panels.map((panel, i) => {\n const element = panel as ReactElement<AtlTabProps>;\n return (\n <div\n key={i}\n id={`atl-tab-panel-${i}`}\n role=\"tabpanel\"\n aria-labelledby={`atl-tab-${i}`}\n tabIndex={0}\n hidden={i !== selectedIndex}\n >\n {element.props.children}\n </div>\n );\n })}\n </div>\n </TabGroupContext.Provider>\n );\n}\n\n/**\n * Properties for the AtlTab component.\n */\nexport interface AtlTabProps extends AtlTabSpec {\n /**\n * The label to display on the tab button.\n */\n label: string;\n /**\n * Whether the tab is disabled.\n */\n disabled?: boolean;\n /**\n * The content to be rendered when the tab is selected.\n */\n children?: ReactNode;\n}\n\n/**\n * An individual tab component for use within AtlTabGroup.\n */\nexport function AtlTab({ children }: AtlTabProps) {\n return children;\n}\nAtlTab.displayName = 'AtlTab';\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.
|
|
1
|
+
.atl-textarea {
|
|
2
2
|
display: block;
|
|
3
3
|
font-family: var(--ui-font-family);
|
|
4
4
|
font-size: var(--ui-font-size-md);
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.
|
|
7
|
+
.atl-textarea textarea {
|
|
8
8
|
display: block;
|
|
9
9
|
width: 100%;
|
|
10
10
|
padding: 0.625rem var(--ui-spacing-4);
|
|
@@ -24,37 +24,37 @@
|
|
|
24
24
|
min-height: 5rem;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.
|
|
27
|
+
.atl-textarea textarea::placeholder {
|
|
28
28
|
color: var(--ui-color-placeholder);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.
|
|
31
|
+
.atl-textarea textarea:hover:not(:disabled):not(:read-only) {
|
|
32
32
|
border-color: var(--ui-color-input-border-hover);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.
|
|
35
|
+
.atl-textarea textarea:focus {
|
|
36
36
|
border-color: var(--ui-color-input-border-focus);
|
|
37
37
|
background-color: var(--ui-color-input-bg-focus);
|
|
38
38
|
box-shadow: var(--ui-focus-ring);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.
|
|
41
|
+
.atl-textarea .textarea-field {
|
|
42
42
|
position: relative;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
/* Invalid state */
|
|
46
|
-
.
|
|
46
|
+
.atl-textarea.is-invalid textarea {
|
|
47
47
|
border-color: var(--ui-color-input-border-invalid);
|
|
48
48
|
padding-right: 2.25rem;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.
|
|
51
|
+
.atl-textarea.is-invalid textarea:focus {
|
|
52
52
|
border-color: var(--ui-color-input-border-invalid);
|
|
53
53
|
box-shadow: 0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-danger);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
/* Non-color invalid indicator (WCAG 1.4.1) */
|
|
57
|
-
.
|
|
57
|
+
.atl-textarea.is-invalid .textarea-field::before {
|
|
58
58
|
content: '✕';
|
|
59
59
|
position: absolute;
|
|
60
60
|
top: 0.75rem;
|
|
@@ -66,33 +66,33 @@
|
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
/* Disabled state */
|
|
69
|
-
.
|
|
69
|
+
.atl-textarea.is-disabled {
|
|
70
70
|
opacity: var(--ui-opacity-disabled);
|
|
71
71
|
cursor: not-allowed;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
.
|
|
74
|
+
.atl-textarea.is-disabled textarea {
|
|
75
75
|
cursor: not-allowed;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
/* Readonly state */
|
|
79
|
-
.
|
|
79
|
+
.atl-textarea.is-readonly textarea {
|
|
80
80
|
background-color: var(--ui-color-surface-sunken);
|
|
81
81
|
cursor: default;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
/* Auto-resize: hide manual resize handle when autoResize is active */
|
|
85
|
-
.
|
|
85
|
+
.atl-textarea.is-auto-resize textarea {
|
|
86
86
|
resize: none;
|
|
87
87
|
overflow: hidden;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
/* Error messages */
|
|
91
|
-
.
|
|
91
|
+
.atl-textarea .errors {
|
|
92
92
|
margin-top: var(--ui-spacing-2);
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
.
|
|
95
|
+
.atl-textarea .error-message {
|
|
96
96
|
margin: 0;
|
|
97
97
|
font-size: var(--ui-font-size-sm);
|
|
98
98
|
color: var(--ui-color-error-text);
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { TextareaHTMLAttributes } from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
import './
|
|
2
|
+
import type { AtlTextareaSpec } from '../spec';
|
|
3
|
+
import './atl-textarea.css';
|
|
4
4
|
/**
|
|
5
|
-
* Properties for the
|
|
5
|
+
* Properties for the AtlTextarea component.
|
|
6
6
|
*/
|
|
7
|
-
export interface
|
|
7
|
+
export interface AtlTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly'>, AtlTextareaSpec {
|
|
8
8
|
/**
|
|
9
9
|
* Current value of the textarea.
|
|
10
10
|
*/
|
|
@@ -29,5 +29,5 @@ export interface LlmTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAr
|
|
|
29
29
|
/**
|
|
30
30
|
* A multi-line text input component that supports automatic resizing and validation states.
|
|
31
31
|
*/
|
|
32
|
-
export declare function
|
|
33
|
-
//# sourceMappingURL=
|
|
32
|
+
export declare function AtlTextarea({ value, onChange, onValueChange, invalid, errors, disabled, readOnly: reactReadOnly, readonly: specReadOnly, required, label, autoResize, rows, className, id, ...rest }: AtlTextareaProps): import("react").JSX.Element;
|
|
33
|
+
//# sourceMappingURL=atl-textarea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"atl-textarea.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/textarea/atl-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAqB,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACnE,eAAe;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,UAAkB,EAClB,IAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAiElB"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useEffect } from 'react';
|
|
3
|
-
import './
|
|
3
|
+
import './atl-textarea.css';
|
|
4
4
|
/**
|
|
5
5
|
* A multi-line text input component that supports automatic resizing and validation states.
|
|
6
6
|
*/
|
|
7
|
-
export function
|
|
7
|
+
export function AtlTextarea({ value, onChange, onValueChange, invalid = false, errors = [], disabled = false, readOnly: reactReadOnly, readonly: specReadOnly, required = false, label, autoResize = false, rows = 3, className, id, ...rest }) {
|
|
8
8
|
const readOnly = reactReadOnly ?? specReadOnly ?? false;
|
|
9
9
|
const textareaRef = useRef(null);
|
|
10
10
|
const inputId = id || (label ? `textarea-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined);
|
|
11
11
|
const classes = [
|
|
12
|
-
'
|
|
12
|
+
'atl-textarea',
|
|
13
13
|
invalid && 'is-invalid',
|
|
14
14
|
disabled && 'is-disabled',
|
|
15
15
|
readOnly && 'is-readonly',
|
|
@@ -36,4 +36,4 @@ export function LlmTextarea({ value, onChange, onValueChange, invalid = false, e
|
|
|
36
36
|
const errorId = inputId ? `${inputId}-errors` : undefined;
|
|
37
37
|
return (_jsxs("div", { className: classes, children: [label && _jsx("label", { htmlFor: inputId, children: label }), _jsx("div", { className: "textarea-field", children: _jsx("textarea", { ref: textareaRef, id: inputId, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, required: required, rows: rows, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, ...rest }) }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
|
|
38
38
|
}
|
|
39
|
-
//# sourceMappingURL=
|
|
39
|
+
//# sourceMappingURL=atl-textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"atl-textarea.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/textarea/atl-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TextareaHTMLAttributes, useRef, useEffect } from 'react';\nimport type { AtlTextareaSpec } from '../spec';\nimport './atl-textarea.css';\n\n/**\n * Properties for the AtlTextarea component.\n */\nexport interface AtlTextareaProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly'>,\n AtlTextareaSpec {\n /**\n * Current value of the textarea.\n */\n value?: string;\n /**\n * Whether the textarea is read-only.\n */\n readOnly?: boolean;\n /**\n * Callback fired when the value changes.\n */\n onValueChange?: (value: string) => void;\n /**\n * List of error messages to display.\n */\n errors?: string[];\n /**\n * Label text for the textarea.\n */\n label?: string;\n}\n\n/**\n * A multi-line text input component that supports automatic resizing and validation states.\n */\nexport function AtlTextarea({\n value,\n onChange,\n onValueChange,\n invalid = false,\n errors = [],\n disabled = false,\n readOnly: reactReadOnly,\n readonly: specReadOnly,\n required = false,\n label,\n autoResize = false,\n rows = 3,\n className,\n id,\n ...rest\n}: AtlTextareaProps) {\n const readOnly = reactReadOnly ?? specReadOnly ?? false;\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const inputId =\n id || (label ? `textarea-${label.toLowerCase().replace(/\\s+/g, '-')}` : undefined);\n const classes = [\n 'atl-textarea',\n invalid && 'is-invalid',\n disabled && 'is-disabled',\n readOnly && 'is-readonly',\n autoResize && 'is-auto-resize',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n useEffect(() => {\n if (autoResize && textareaRef.current) {\n const el = textareaRef.current;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n }\n }, [value, autoResize]);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e);\n onValueChange?.(e.target.value);\n if (autoResize && textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }\n };\n\n const errorId = inputId ? `${inputId}-errors` : undefined;\n\n return (\n <div className={classes}>\n {label && <label htmlFor={inputId}>{label}</label>}\n <div className=\"textarea-field\">\n <textarea\n ref={textareaRef}\n id={inputId}\n value={value}\n onChange={handleChange}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n rows={rows}\n aria-invalid={invalid || undefined}\n aria-required={required || undefined}\n aria-describedby={errors.length > 0 ? errorId : undefined}\n {...rest}\n />\n </div>\n {errors.length > 0 && (\n <div className=\"errors\" id={errorId} aria-live=\"polite\">\n {errors.map((err, i) => (\n <p key={i} className=\"error-message\">\n {err}\n </p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* ── Toast Container ── */
|
|
2
|
-
.
|
|
2
|
+
.atl-toast-container {
|
|
3
3
|
position: fixed;
|
|
4
4
|
z-index: var(--ui-z-toast, 400);
|
|
5
5
|
display: flex;
|
|
@@ -10,26 +10,26 @@
|
|
|
10
10
|
box-sizing: border-box;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.
|
|
13
|
+
.atl-toast-container.position-bottom-right {
|
|
14
14
|
bottom: var(--ui-spacing-4);
|
|
15
15
|
right: var(--ui-spacing-4);
|
|
16
16
|
align-items: flex-end;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.
|
|
19
|
+
.atl-toast-container.position-bottom-center {
|
|
20
20
|
bottom: var(--ui-spacing-4);
|
|
21
21
|
left: 50%;
|
|
22
22
|
transform: translateX(-50%);
|
|
23
23
|
align-items: center;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.
|
|
26
|
+
.atl-toast-container.position-top-right {
|
|
27
27
|
top: var(--ui-spacing-4);
|
|
28
28
|
right: var(--ui-spacing-4);
|
|
29
29
|
align-items: flex-end;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
.
|
|
32
|
+
.atl-toast-container.position-top-center {
|
|
33
33
|
top: var(--ui-spacing-4);
|
|
34
34
|
left: 50%;
|
|
35
35
|
transform: translateX(-50%);
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
/* ── Individual Toast ── */
|
|
40
|
-
.
|
|
40
|
+
.atl-toast {
|
|
41
41
|
display: flex;
|
|
42
42
|
align-items: center;
|
|
43
43
|
gap: var(--ui-spacing-3);
|
|
@@ -58,37 +58,37 @@
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
/* ── Variant borders & tints ── */
|
|
61
|
-
.
|
|
61
|
+
.atl-toast.variant-default {
|
|
62
62
|
border-left-color: var(--ui-color-border);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
.
|
|
65
|
+
.atl-toast.variant-success {
|
|
66
66
|
border-left-color: var(--ui-color-success);
|
|
67
67
|
background-color: color-mix(in srgb, var(--ui-color-success) 8%, var(--ui-color-surface-raised, var(--ui-color-surface)));
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
.
|
|
70
|
+
.atl-toast.variant-warning {
|
|
71
71
|
border-left-color: var(--ui-color-warning);
|
|
72
72
|
background-color: color-mix(in srgb, var(--ui-color-warning) 8%, var(--ui-color-surface-raised, var(--ui-color-surface)));
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
-
.
|
|
75
|
+
.atl-toast.variant-danger {
|
|
76
76
|
border-left-color: var(--ui-color-danger);
|
|
77
77
|
background-color: color-mix(in srgb, var(--ui-color-danger) 8%, var(--ui-color-surface-raised, var(--ui-color-surface)));
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
.
|
|
80
|
+
.atl-toast.variant-info {
|
|
81
81
|
border-left-color: var(--ui-color-info);
|
|
82
82
|
background-color: color-mix(in srgb, var(--ui-color-info) 8%, var(--ui-color-surface-raised, var(--ui-color-surface)));
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
/* ── Message ── */
|
|
86
|
-
.
|
|
86
|
+
.atl-toast .message {
|
|
87
87
|
flex: 1;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
/* ── Dismiss button ── */
|
|
91
|
-
.
|
|
91
|
+
.atl-toast .dismiss {
|
|
92
92
|
display: inline-flex;
|
|
93
93
|
align-items: center;
|
|
94
94
|
justify-content: center;
|
|
@@ -106,12 +106,12 @@
|
|
|
106
106
|
line-height: 1;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
.
|
|
109
|
+
.atl-toast .dismiss:hover {
|
|
110
110
|
opacity: 1;
|
|
111
111
|
background-color: color-mix(in srgb, currentColor 10%, transparent);
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
.
|
|
114
|
+
.atl-toast .dismiss:focus-visible {
|
|
115
115
|
outline: none;
|
|
116
116
|
box-shadow: var(--ui-focus-ring);
|
|
117
117
|
opacity: 1;
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
|
|
132
132
|
/* ── Reduced motion ── */
|
|
133
133
|
@media (prefers-reduced-motion: reduce) {
|
|
134
|
-
.
|
|
134
|
+
.atl-toast {
|
|
135
135
|
animation: none;
|
|
136
136
|
}
|
|
137
137
|
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import type { AtlToastOptions, AtlToastContainerPosition } from '../spec';
|
|
3
|
+
import './atl-toast.css';
|
|
4
|
+
/**
|
|
5
|
+
* Internal data structure for a toast message.
|
|
6
|
+
*/
|
|
7
|
+
export interface ToastData extends Required<AtlToastOptions> {
|
|
8
|
+
id: string;
|
|
9
|
+
message: string;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Context provider that manages the toast state.
|
|
13
|
+
*/
|
|
14
|
+
export declare function AtlToastProvider({ children }: {
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
}): import("react").JSX.Element;
|
|
17
|
+
/** Access toast actions: show, dismiss, clear. Must be inside AtlToastProvider. */
|
|
18
|
+
export declare function useAtlToast(): {
|
|
19
|
+
show: (message: string, options?: AtlToastOptions) => string;
|
|
20
|
+
dismiss: (id: string) => void;
|
|
21
|
+
clear: () => void;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Properties for the AtlToastContainer component.
|
|
25
|
+
*/
|
|
26
|
+
export interface AtlToastContainerProps {
|
|
27
|
+
/**
|
|
28
|
+
* Position of the toast container in the viewport.
|
|
29
|
+
*/
|
|
30
|
+
position?: AtlToastContainerPosition;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Renders the toast stack at a fixed viewport position.
|
|
34
|
+
* Must be placed inside AtlToastProvider.
|
|
35
|
+
*/
|
|
36
|
+
export declare function AtlToastContainer({ position }: AtlToastContainerProps): import("react").JSX.Element;
|
|
37
|
+
/**
|
|
38
|
+
* Properties for the AtlToastItem component.
|
|
39
|
+
*/
|
|
40
|
+
export interface AtlToastItemProps {
|
|
41
|
+
/**
|
|
42
|
+
* The toast data to display.
|
|
43
|
+
*/
|
|
44
|
+
data: ToastData;
|
|
45
|
+
/**
|
|
46
|
+
* Callback fired when the toast is dismissed.
|
|
47
|
+
*/
|
|
48
|
+
onDismiss: (id: string) => void;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* An individual toast notification item.
|
|
52
|
+
*/
|
|
53
|
+
export declare function AtlToastItem({ data, onDismiss }: AtlToastItemProps): import("react").JSX.Element;
|
|
54
|
+
//# sourceMappingURL=atl-toast.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"atl-toast.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toast/atl-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,eAAe,EACf,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AACjB,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,QAAQ,CAAC,eAAe,CAAC;IAC1D,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;CACjB;AAgBD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BA6CrE;AAED,mFAAmF;AACnF,wBAAgB,WAAW;oBAhET,MAAM,YAAY,eAAe,KAAK,MAAM;kBAC9C,MAAM,KAAK,IAAI;iBAChB,IAAI;EAiElB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAyB,EAAE,EAAE,sBAAsB,+BAWtF;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BA+BlE"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useContext, useState, useCallback, useRef, } from 'react';
|
|
3
|
-
import './
|
|
3
|
+
import './atl-toast.css';
|
|
4
4
|
const ToastContext = createContext({
|
|
5
5
|
show: () => '',
|
|
6
6
|
dismiss: () => undefined,
|
|
@@ -10,7 +10,7 @@ const ToastContext = createContext({
|
|
|
10
10
|
/**
|
|
11
11
|
* Context provider that manages the toast state.
|
|
12
12
|
*/
|
|
13
|
-
export function
|
|
13
|
+
export function AtlToastProvider({ children }) {
|
|
14
14
|
const [toasts, setToasts] = useState([]);
|
|
15
15
|
const timersRef = useRef(new Map());
|
|
16
16
|
const toastId = useRef(0);
|
|
@@ -23,7 +23,7 @@ export function LlmToastProvider({ children }) {
|
|
|
23
23
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
24
24
|
}, []);
|
|
25
25
|
const show = useCallback((message, options = {}) => {
|
|
26
|
-
const id = `
|
|
26
|
+
const id = `atl-toast-${toastId.current++}`;
|
|
27
27
|
const toast = {
|
|
28
28
|
id,
|
|
29
29
|
message,
|
|
@@ -46,25 +46,25 @@ export function LlmToastProvider({ children }) {
|
|
|
46
46
|
}, []);
|
|
47
47
|
return (_jsx(ToastContext.Provider, { value: { show, dismiss, clear, toasts }, children: children }));
|
|
48
48
|
}
|
|
49
|
-
/** Access toast actions: show, dismiss, clear. Must be inside
|
|
50
|
-
export function
|
|
49
|
+
/** Access toast actions: show, dismiss, clear. Must be inside AtlToastProvider. */
|
|
50
|
+
export function useAtlToast() {
|
|
51
51
|
const ctx = useContext(ToastContext);
|
|
52
52
|
return { show: ctx.show, dismiss: ctx.dismiss, clear: ctx.clear };
|
|
53
53
|
}
|
|
54
54
|
/**
|
|
55
55
|
* Renders the toast stack at a fixed viewport position.
|
|
56
|
-
* Must be placed inside
|
|
56
|
+
* Must be placed inside AtlToastProvider.
|
|
57
57
|
*/
|
|
58
|
-
export function
|
|
58
|
+
export function AtlToastContainer({ position = 'bottom-right' }) {
|
|
59
59
|
const { toasts, dismiss } = useContext(ToastContext);
|
|
60
|
-
const classes = `
|
|
61
|
-
return (_jsx("div", { className: classes, "aria-live": "polite", role: "status", children: toasts.map((toast) => (_jsx(
|
|
60
|
+
const classes = `atl-toast-container position-${position}`;
|
|
61
|
+
return (_jsx("div", { className: classes, "aria-live": "polite", role: "status", children: toasts.map((toast) => (_jsx(AtlToastItem, { data: toast, onDismiss: dismiss }, toast.id))) }));
|
|
62
62
|
}
|
|
63
63
|
/**
|
|
64
64
|
* An individual toast notification item.
|
|
65
65
|
*/
|
|
66
|
-
export function
|
|
67
|
-
const classes = `
|
|
66
|
+
export function AtlToastItem({ data, onDismiss }) {
|
|
67
|
+
const classes = `atl-toast variant-${data.variant}`;
|
|
68
68
|
return (_jsxs("div", { className: classes, role: "status", children: [_jsx("span", { className: "message", children: data.message }), data.dismissible && (_jsx("button", { className: "dismiss", type: "button", "aria-label": "Dismiss", onClick: () => onDismiss(data.id), children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }));
|
|
69
69
|
}
|
|
70
|
-
//# sourceMappingURL=
|
|
70
|
+
//# sourceMappingURL=atl-toast.js.map
|