@atelier-ui/react 0.2.41 → 0.2.43
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 +33 -8
- package/package.json +1 -1
- package/src/lib/accordion/atl-accordion.css +2 -8
- package/src/lib/accordion/atl-accordion.d.ts.map +1 -1
- package/src/lib/accordion/atl-accordion.js +30 -8
- package/src/lib/accordion/atl-accordion.js.map +1 -1
- package/src/lib/alert/atl-alert.css +18 -4
- package/src/lib/alert/atl-alert.d.ts.map +1 -1
- package/src/lib/alert/atl-alert.js +3 -1
- package/src/lib/alert/atl-alert.js.map +1 -1
- package/src/lib/avatar/atl-avatar.css +75 -25
- package/src/lib/avatar/atl-avatar.d.ts.map +1 -1
- package/src/lib/avatar/atl-avatar.js +6 -3
- package/src/lib/avatar/atl-avatar.js.map +1 -1
- package/src/lib/badge/atl-badge.css +8 -4
- package/src/lib/badge/atl-badge.d.ts.map +1 -1
- package/src/lib/badge/atl-badge.js +3 -2
- package/src/lib/badge/atl-badge.js.map +1 -1
- package/src/lib/breadcrumbs/atl-breadcrumbs.css +5 -9
- package/src/lib/breadcrumbs/atl-breadcrumbs.d.ts.map +1 -1
- package/src/lib/breadcrumbs/atl-breadcrumbs.js +1 -1
- package/src/lib/breadcrumbs/atl-breadcrumbs.js.map +1 -1
- package/src/lib/button/atl-button.css +20 -8
- package/src/lib/button/atl-button.d.ts.map +1 -1
- package/src/lib/button/atl-button.js.map +1 -1
- package/src/lib/card/atl-card.css +2 -12
- package/src/lib/card/atl-card.d.ts.map +1 -1
- package/src/lib/card/atl-card.js +6 -1
- package/src/lib/card/atl-card.js.map +1 -1
- package/src/lib/chat/atl-chat.css +28 -13
- package/src/lib/chat/atl-chat.d.ts.map +1 -1
- package/src/lib/chat/atl-chat.js +11 -7
- package/src/lib/chat/atl-chat.js.map +1 -1
- package/src/lib/checkbox/atl-checkbox.css +13 -6
- package/src/lib/checkbox/atl-checkbox.d.ts.map +1 -1
- package/src/lib/checkbox/atl-checkbox.js +1 -1
- package/src/lib/checkbox/atl-checkbox.js.map +1 -1
- package/src/lib/code-block/atl-code-block.css +4 -1
- package/src/lib/combobox/atl-combobox.css +27 -17
- package/src/lib/combobox/atl-combobox.d.ts.map +1 -1
- package/src/lib/combobox/atl-combobox.js +4 -2
- package/src/lib/combobox/atl-combobox.js.map +1 -1
- package/src/lib/dialog/atl-dialog.css +3 -12
- package/src/lib/dialog/atl-dialog.d.ts.map +1 -1
- package/src/lib/dialog/atl-dialog.js +3 -1
- package/src/lib/dialog/atl-dialog.js.map +1 -1
- package/src/lib/drawer/atl-drawer.css +6 -5
- package/src/lib/drawer/atl-drawer.d.ts.map +1 -1
- package/src/lib/drawer/atl-drawer.js.map +1 -1
- package/src/lib/icon/atl-icon.d.ts.map +1 -1
- package/src/lib/icon/atl-icon.js +4 -2
- package/src/lib/icon/atl-icon.js.map +1 -1
- package/src/lib/icons.d.ts.map +1 -1
- package/src/lib/icons.js +48 -10
- package/src/lib/icons.js.map +1 -1
- package/src/lib/input/atl-input.css +9 -5
- package/src/lib/input/atl-input.d.ts.map +1 -1
- package/src/lib/input/atl-input.js +1 -1
- package/src/lib/input/atl-input.js.map +1 -1
- package/src/lib/menu/atl-menu.css +11 -14
- package/src/lib/menu/atl-menu.d.ts.map +1 -1
- package/src/lib/menu/atl-menu.js +3 -1
- package/src/lib/menu/atl-menu.js.map +1 -1
- package/src/lib/pagination/atl-pagination.d.ts.map +1 -1
- package/src/lib/pagination/atl-pagination.js +7 -9
- package/src/lib/pagination/atl-pagination.js.map +1 -1
- package/src/lib/progress/atl-progress.d.ts.map +1 -1
- package/src/lib/progress/atl-progress.js +3 -1
- package/src/lib/progress/atl-progress.js.map +1 -1
- package/src/lib/radio/atl-radio.css +5 -4
- package/src/lib/radio/atl-radio.d.ts +1 -1
- package/src/lib/radio/atl-radio.d.ts.map +1 -1
- package/src/lib/radio/atl-radio.js +1 -1
- package/src/lib/radio/atl-radio.js.map +1 -1
- package/src/lib/radio-group/atl-radio-group.d.ts.map +1 -1
- package/src/lib/radio-group/atl-radio-group.js.map +1 -1
- package/src/lib/select/atl-select.css +7 -3
- package/src/lib/select/atl-select.d.ts.map +1 -1
- package/src/lib/select/atl-select.js +2 -2
- package/src/lib/select/atl-select.js.map +1 -1
- package/src/lib/skeleton/atl-skeleton.d.ts.map +1 -1
- package/src/lib/skeleton/atl-skeleton.js +14 -4
- package/src/lib/skeleton/atl-skeleton.js.map +1 -1
- package/src/lib/spec.d.ts.map +1 -1
- package/src/lib/spec.js.map +1 -1
- package/src/lib/stepper/atl-stepper.d.ts.map +1 -1
- package/src/lib/stepper/atl-stepper.js +14 -7
- package/src/lib/stepper/atl-stepper.js.map +1 -1
- package/src/lib/table/atl-table.css +10 -9
- package/src/lib/table/atl-table.d.ts +1 -1
- package/src/lib/table/atl-table.d.ts.map +1 -1
- package/src/lib/table/atl-table.js +1 -1
- package/src/lib/table/atl-table.js.map +1 -1
- package/src/lib/tabs/atl-tabs.css +19 -5
- package/src/lib/tabs/atl-tabs.d.ts.map +1 -1
- package/src/lib/tabs/atl-tabs.js.map +1 -1
- package/src/lib/textarea/atl-textarea.css +4 -4
- package/src/lib/textarea/atl-textarea.d.ts.map +1 -1
- package/src/lib/textarea/atl-textarea.js +1 -1
- package/src/lib/textarea/atl-textarea.js.map +1 -1
- package/src/lib/toast/atl-toast.css +25 -13
- package/src/lib/toast/atl-toast.d.ts +1 -1
- package/src/lib/toast/atl-toast.d.ts.map +1 -1
- package/src/lib/toast/atl-toast.js +1 -1
- package/src/lib/toast/atl-toast.js.map +1 -1
- package/src/lib/toggle/atl-toggle.css +7 -5
- package/src/lib/toggle/atl-toggle.d.ts.map +1 -1
- package/src/lib/toggle/atl-toggle.js.map +1 -1
- package/src/lib/tooltip/atl-tooltip.css +6 -10
- package/styles/tokens.css +59 -43
|
@@ -3,14 +3,8 @@
|
|
|
3
3
|
* same file as the sizes it governs and no consuming app has to supply one.
|
|
4
4
|
* Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
|
|
5
5
|
* See ADR-0043. */
|
|
6
|
-
:is(
|
|
7
|
-
|
|
8
|
-
.atl-breadcrumbs
|
|
9
|
-
),
|
|
10
|
-
:is(
|
|
11
|
-
.atl-breadcrumb-item,
|
|
12
|
-
.atl-breadcrumbs
|
|
13
|
-
) * {
|
|
6
|
+
:is(.atl-breadcrumb-item, .atl-breadcrumbs),
|
|
7
|
+
:is(.atl-breadcrumb-item, .atl-breadcrumbs) * {
|
|
14
8
|
box-sizing: border-box;
|
|
15
9
|
}
|
|
16
10
|
|
|
@@ -75,7 +69,9 @@
|
|
|
75
69
|
border-radius: var(--ui-radius-sm);
|
|
76
70
|
padding: var(--ui-spacing-1) var(--ui-spacing-2);
|
|
77
71
|
margin: calc(var(--ui-spacing-1) * -1) calc(var(--ui-spacing-2) * -1);
|
|
78
|
-
transition:
|
|
72
|
+
transition:
|
|
73
|
+
color var(--ui-transition-fast),
|
|
74
|
+
background-color var(--ui-transition-fast);
|
|
79
75
|
}
|
|
80
76
|
|
|
81
77
|
.atl-breadcrumb-item .breadcrumb-link:hover {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/breadcrumbs/atl-breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"atl-breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/breadcrumbs/atl-breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,SAAS,EACT,oBAAoB,EAIrB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,uBAAuB,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,CAAC,WAAW,CAAC,EAAE,kBAAkB;IACvD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,+BA6BrB;AAED;;GAEG;AACH,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,qBAAqB;IACtE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,sBAAsB,+BAqBxB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Children, isValidElement, cloneElement } from 'react';
|
|
2
|
+
import { Children, isValidElement, cloneElement, } from 'react';
|
|
3
3
|
import './atl-breadcrumbs.css';
|
|
4
4
|
/**
|
|
5
5
|
* A breadcrumbs component for displaying a navigation trail.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-breadcrumbs.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/breadcrumbs/atl-breadcrumbs.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"atl-breadcrumbs.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/breadcrumbs/atl-breadcrumbs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,QAAQ,EACR,cAAc,EACd,YAAY,GACb,MAAM,OAAO,CAAC;AAGf,OAAO,uBAAuB,CAAC;AAa/B;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACa;IACpB,MAAM,OAAO,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzE,+CAA+C;IAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACvD,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7D,OAAO,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAY,CAAC,CAAC;QAC1D,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cACE,SAAS,EAAE,OAAO,gBACP,YAAY,EACvB,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,SAAS,GAAG,EAAE,GAAG,KAAK,EAAmB,KACrE,IAAI,YAOR,aAAI,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,kBAAkB,YACzC,gBAAgB,GACd,GACD,CACP,CAAC;AACJ,CAAC;AAqBD;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACgB;IACvB,MAAM,OAAO,GAAG,CAAC,qBAAqB,EAAE,OAAO,IAAI,YAAY,EAAE,SAAS,CAAC;SACxE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,aAAI,SAAS,EAAE,OAAO,YACnB,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAClB,YAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,iBAAiB,KAAK,IAAI,YAChD,QAAQ,GACP,CACL,CAAC,CAAC,CAAC,CACF,eACE,SAAS,EAAC,oBAAoB,kBAChB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAEzC,QAAQ,GACJ,CACR,GACE,CACN,CAAC;AACJ,CAAC","sourcesContent":["import {\n HTMLAttributes,\n ReactNode,\n AnchorHTMLAttributes,\n Children,\n isValidElement,\n cloneElement,\n} from 'react';\nimport type { CSSProperties } from 'react';\nimport type { AtlBreadcrumbsSpec, AtlBreadcrumbItemSpec } from '../spec';\nimport './atl-breadcrumbs.css';\n\n/**\n * Properties for the AtlBreadcrumbs component.\n */\nexport interface AtlBreadcrumbsProps\n extends HTMLAttributes<HTMLElement>, AtlBreadcrumbsSpec {\n /**\n * The breadcrumb items to be rendered.\n */\n children?: ReactNode;\n}\n\n/**\n * A breadcrumbs component for displaying a navigation trail.\n */\nexport function AtlBreadcrumbs({\n children,\n separator = '/',\n className,\n style,\n ...rest\n}: AtlBreadcrumbsProps) {\n const classes = ['atl-breadcrumbs', className].filter(Boolean).join(' ');\n\n // Automatically mark the last child as current\n const childArray = Children.toArray(children);\n const enhancedChildren = childArray.map((child, index) => {\n if (isValidElement(child) && index === childArray.length - 1) {\n return cloneElement(child, { current: true } as object);\n }\n return child;\n });\n\n return (\n <nav\n className={classes}\n aria-label=\"Breadcrumb\"\n style={{ '--atl-separator': `'${separator}'`, ...style } as CSSProperties}\n {...rest}\n >\n {/* eslint-disable-next-line jsx-a11y/no-redundant-roles -- role=\"list\" is\n NOT redundant here: .breadcrumbs-list sets list-style: none, and an\n unstyled-marker <ol>/<ul> with no explicit role is the documented\n Safari/VoiceOver case where the implicit list semantics can be\n dropped (ADR-0100). */}\n <ol role=\"list\" className=\"breadcrumbs-list\">\n {enhancedChildren}\n </ol>\n </nav>\n );\n}\n\n/**\n * Properties for the AtlBreadcrumbItem component.\n */\nexport interface AtlBreadcrumbItemProps\n extends AnchorHTMLAttributes<HTMLAnchorElement>, AtlBreadcrumbItemSpec {\n /**\n * The URL the breadcrumb points to.\n */\n href?: string;\n /**\n * Whether this is the current page.\n */\n current?: boolean;\n /**\n * The content to be rendered inside the breadcrumb item.\n */\n children?: ReactNode;\n}\n\n/**\n * An individual breadcrumb item.\n */\nexport function AtlBreadcrumbItem({\n href,\n current = false,\n children,\n className,\n ...rest\n}: AtlBreadcrumbItemProps) {\n const classes = ['atl-breadcrumb-item', current && 'is-current', className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <li className={classes}>\n {href && !current ? (\n <a href={href} className=\"breadcrumb-link\" {...rest}>\n {children}\n </a>\n ) : (\n <span\n className=\"breadcrumb-current\"\n aria-current={current ? 'page' : undefined}\n >\n {children}\n </span>\n )}\n </li>\n );\n}\n"]}
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
line-height: var(--ui-line-height-tight);
|
|
22
22
|
letter-spacing: var(--ui-letter-spacing-tight);
|
|
23
23
|
cursor: pointer;
|
|
24
|
-
transition:
|
|
24
|
+
transition:
|
|
25
|
+
background-color var(--ui-transition-fast),
|
|
25
26
|
border-color var(--ui-transition-fast),
|
|
26
27
|
color var(--ui-transition-fast),
|
|
27
28
|
box-shadow var(--ui-transition-fast);
|
|
@@ -109,8 +110,11 @@
|
|
|
109
110
|
/* Sizes — modern target heights (sm 32px / md 40px / lg 48px) */
|
|
110
111
|
.atl-button.size-sm {
|
|
111
112
|
padding: calc(
|
|
112
|
-
(
|
|
113
|
-
|
|
113
|
+
(
|
|
114
|
+
var(--ui-control-height-sm) - var(--ui-line-height-tight) *
|
|
115
|
+
var(--ui-font-size-sm)
|
|
116
|
+
) /
|
|
117
|
+
2 - 1px
|
|
114
118
|
)
|
|
115
119
|
0.875rem;
|
|
116
120
|
font-size: var(--ui-font-size-sm);
|
|
@@ -119,8 +123,11 @@
|
|
|
119
123
|
|
|
120
124
|
.atl-button.size-md {
|
|
121
125
|
padding: calc(
|
|
122
|
-
(
|
|
123
|
-
|
|
126
|
+
(
|
|
127
|
+
var(--ui-control-height-md) - var(--ui-line-height-tight) *
|
|
128
|
+
var(--ui-font-size-md)
|
|
129
|
+
) /
|
|
130
|
+
2 - 1px
|
|
124
131
|
)
|
|
125
132
|
1.125rem;
|
|
126
133
|
font-size: var(--ui-font-size-md);
|
|
@@ -129,8 +136,11 @@
|
|
|
129
136
|
|
|
130
137
|
.atl-button.size-lg {
|
|
131
138
|
padding: calc(
|
|
132
|
-
(
|
|
133
|
-
|
|
139
|
+
(
|
|
140
|
+
var(--ui-control-height-lg) - var(--ui-line-height-tight) *
|
|
141
|
+
var(--ui-font-size-lg)
|
|
142
|
+
) /
|
|
143
|
+
2 - 1px
|
|
134
144
|
)
|
|
135
145
|
1.5rem;
|
|
136
146
|
font-size: var(--ui-font-size-lg);
|
|
@@ -157,5 +167,7 @@
|
|
|
157
167
|
}
|
|
158
168
|
|
|
159
169
|
@keyframes atl-spin {
|
|
160
|
-
to {
|
|
170
|
+
to {
|
|
171
|
+
transform: rotate(360deg);
|
|
172
|
+
}
|
|
161
173
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-button.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/button/atl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAE1B;;;;GAIG;AACH,KAAK,uBAAuB,GACxB;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC9C;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"atl-button.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/button/atl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAE1B;;;;GAIG;AACH,KAAK,uBAAuB,GACxB;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC9C;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,YAAY,CAC1B,GACC,aAAa,GACb,uBAAuB,CAAC;AAE1B;;GAEG;AACH,eAAO,MAAM,SAAS,8GAsCrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-button.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/button/atl-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmC,UAAU,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"atl-button.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/button/atl-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmC,UAAU,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,kBAAkB,CAAC;AAqB1B;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,SAAS,SAAS,CAChB,EACE,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAC;IACvC,MAAM,OAAO,GAAG;QACd,YAAY;QACZ,WAAW,OAAO,EAAE;QACpB,QAAQ,IAAI,EAAE;QACd,UAAU,IAAI,aAAa;QAC3B,OAAO,IAAI,YAAY;QACvB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,UAAU,mBACL,UAAU,IAAI,SAAS,KAClC,IAAI,aAEP,OAAO,IAAI,eAAM,SAAS,EAAC,SAAS,iBAAa,MAAM,GAAG,EAC1D,QAAQ,IACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport type { AtlButtonSpec } from '../spec';\nimport './atl-button.css';\n\n/**\n * Accessibility requirement: the button must carry an accessible name\n * either as visible children OR as an `aria-label`. TypeScript catches\n * the icon-only-without-aria-label mistake at consumer build time.\n */\ntype AtlButtonAccessibleName =\n | { children: ReactNode; 'aria-label'?: string }\n | { children?: undefined; 'aria-label': string };\n\n/**\n * Properties for the AtlButton component.\n */\nexport type AtlButtonProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'children' | 'aria-label'\n> &\n AtlButtonSpec &\n AtlButtonAccessibleName;\n\n/**\n * A versatile button component that supports various styles, sizes, and states.\n */\nexport const AtlButton = forwardRef<HTMLButtonElement, AtlButtonProps>(\n function AtlButton(\n {\n variant = 'primary',\n size = 'md',\n disabled = false,\n loading = false,\n children,\n className,\n ...rest\n },\n ref,\n ) {\n const isDisabled = disabled || loading;\n const classes = [\n 'atl-button',\n `variant-${variant}`,\n `size-${size}`,\n isDisabled && 'is-disabled',\n loading && 'is-loading',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n className={classes}\n disabled={isDisabled}\n aria-disabled={isDisabled || undefined}\n {...rest}\n >\n {loading && <span className=\"spinner\" aria-hidden=\"true\" />}\n {children}\n </button>\n );\n },\n);\n"]}
|
|
@@ -3,18 +3,8 @@
|
|
|
3
3
|
* same file as the sizes it governs and no consuming app has to supply one.
|
|
4
4
|
* Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
|
|
5
5
|
* See ADR-0043. */
|
|
6
|
-
:is(
|
|
7
|
-
|
|
8
|
-
.atl-card-content,
|
|
9
|
-
.atl-card-footer,
|
|
10
|
-
.atl-card-header
|
|
11
|
-
),
|
|
12
|
-
:is(
|
|
13
|
-
.atl-card,
|
|
14
|
-
.atl-card-content,
|
|
15
|
-
.atl-card-footer,
|
|
16
|
-
.atl-card-header
|
|
17
|
-
) * {
|
|
6
|
+
:is(.atl-card, .atl-card-content, .atl-card-footer, .atl-card-header),
|
|
7
|
+
:is(.atl-card, .atl-card-content, .atl-card-footer, .atl-card-header) * {
|
|
18
8
|
box-sizing: border-box;
|
|
19
9
|
}
|
|
20
10
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-card.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/card/atl-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"atl-card.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/card/atl-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAAE,WAAW;IACjE;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAoB,EACpB,OAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,YAAY,+BAcd;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BASA"}
|
package/src/lib/card/atl-card.js
CHANGED
|
@@ -4,7 +4,12 @@ import './atl-card.css';
|
|
|
4
4
|
* A card component for grouping related content.
|
|
5
5
|
*/
|
|
6
6
|
export function AtlCard({ variant = 'elevated', padding = 'md', children, className, ...rest }) {
|
|
7
|
-
const classes = [
|
|
7
|
+
const classes = [
|
|
8
|
+
'atl-card',
|
|
9
|
+
`variant-${variant}`,
|
|
10
|
+
`padding-${padding}`,
|
|
11
|
+
className,
|
|
12
|
+
]
|
|
8
13
|
.filter(Boolean)
|
|
9
14
|
.join(' ');
|
|
10
15
|
return (_jsx("div", { className: classes, ...rest, children: children }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-card.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/card/atl-card.tsx"],"names":[],"mappings":";AAEA,OAAO,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"atl-card.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/card/atl-card.tsx"],"names":[],"mappings":";AAEA,OAAO,gBAAgB,CAAC;AA4BxB;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,OAAO,GAAG,UAAU,EACpB,OAAO,GAAG,IAAI,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACM;IACb,MAAM,OAAO,GAAG;QACd,UAAU;QACV,WAAW,OAAO,EAAE;QACpB,WAAW,OAAO,EAAE;QACpB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,KAAM,IAAI,YAC9B,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EAMR;IACC,OAAO,CACL,cACE,SAAS,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAC/D,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EAMR;IACC,OAAO,CACL,cACE,SAAS,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAChE,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EAMR;IACC,OAAO,CACL,cACE,SAAS,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAC/D,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport type { AtlCardSpec, AtlCardRole } from '../spec';\nimport './atl-card.css';\n\n/**\n * Properties for the AtlCard component.\n */\nexport interface AtlCardProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'role'>, AtlCardSpec {\n /**\n * The visual style variant of the card.\n */\n variant?: 'elevated' | 'outlined' | 'flat';\n /**\n * The padding size within the card.\n */\n padding?: 'none' | 'sm' | 'md' | 'lg';\n /**\n * Opt-in landmark role. Default is no role (plain `<div>`).\n * Pick `'article'` for self-contained content, `'region'` for a\n * perceivable area that needs a screen-reader stop (pair with\n * aria-label), or `'section'` to mirror an HTML `<section>`.\n */\n role?: AtlCardRole;\n /**\n * The content to be rendered inside the card.\n */\n children?: ReactNode;\n}\n\n/**\n * A card component for grouping related content.\n */\nexport function AtlCard({\n variant = 'elevated',\n padding = 'md',\n children,\n className,\n ...rest\n}: AtlCardProps) {\n const classes = [\n 'atl-card',\n `variant-${variant}`,\n `padding-${padding}`,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n return (\n <div className={classes} {...rest}>\n {children}\n </div>\n );\n}\n\n/**\n * The header component for an AtlCard.\n */\nexport function AtlCardHeader({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n /**\n * The content of the card header.\n */\n children?: ReactNode;\n}) {\n return (\n <div\n className={['atl-card-header', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\n/**\n * The main content component for an AtlCard.\n */\nexport function AtlCardContent({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n /**\n * The main content of the card.\n */\n children?: ReactNode;\n}) {\n return (\n <div\n className={['atl-card-content', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\n/**\n * The footer component for an AtlCard.\n */\nexport function AtlCardFooter({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n /**\n * The content of the card footer.\n */\n children?: ReactNode;\n}) {\n return (\n <div\n className={['atl-card-footer', className].filter(Boolean).join(' ')}\n {...rest}\n >\n {children}\n </div>\n );\n}\n"]}
|
|
@@ -13,14 +13,15 @@
|
|
|
13
13
|
.atl-chat-typing
|
|
14
14
|
),
|
|
15
15
|
:is(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
)
|
|
16
|
+
.atl-chat,
|
|
17
|
+
.atl-chat-header,
|
|
18
|
+
.atl-chat-input,
|
|
19
|
+
.atl-chat-message,
|
|
20
|
+
.atl-chat-messages,
|
|
21
|
+
.atl-chat-suggestion,
|
|
22
|
+
.atl-chat-typing
|
|
23
|
+
)
|
|
24
|
+
* {
|
|
24
25
|
box-sizing: border-box;
|
|
25
26
|
}
|
|
26
27
|
|
|
@@ -142,7 +143,9 @@
|
|
|
142
143
|
|
|
143
144
|
.atl-chat.variant-popup .fab-bubble:focus-visible {
|
|
144
145
|
outline: none;
|
|
145
|
-
box-shadow:
|
|
146
|
+
box-shadow:
|
|
147
|
+
var(--ui-focus-ring),
|
|
148
|
+
0 6px 16px rgba(0, 0, 0, 0.18);
|
|
146
149
|
}
|
|
147
150
|
|
|
148
151
|
/* ═══════════════════════════════════════════════════════════════════════════ */
|
|
@@ -319,8 +322,16 @@
|
|
|
319
322
|
}
|
|
320
323
|
|
|
321
324
|
@keyframes atl-chat-typing {
|
|
322
|
-
0%,
|
|
323
|
-
|
|
325
|
+
0%,
|
|
326
|
+
60%,
|
|
327
|
+
100% {
|
|
328
|
+
opacity: 0.3;
|
|
329
|
+
transform: translateY(0);
|
|
330
|
+
}
|
|
331
|
+
30% {
|
|
332
|
+
opacity: 1;
|
|
333
|
+
transform: translateY(-2px);
|
|
334
|
+
}
|
|
324
335
|
}
|
|
325
336
|
|
|
326
337
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -405,7 +416,8 @@
|
|
|
405
416
|
flex: 1;
|
|
406
417
|
min-width: 0;
|
|
407
418
|
padding: var(--ui-spacing-2) var(--ui-spacing-3);
|
|
408
|
-
border: var(--ui-border-width) solid
|
|
419
|
+
border: var(--ui-border-width) solid
|
|
420
|
+
var(--ui-color-input-border, var(--ui-color-border));
|
|
409
421
|
border-radius: var(--ui-radius-md);
|
|
410
422
|
background: var(--ui-color-surface-sunken);
|
|
411
423
|
color: var(--ui-color-text);
|
|
@@ -420,7 +432,10 @@
|
|
|
420
432
|
}
|
|
421
433
|
|
|
422
434
|
.atl-chat-input .field:hover:not(:disabled) {
|
|
423
|
-
border-color: var(
|
|
435
|
+
border-color: var(
|
|
436
|
+
--ui-color-input-border-hover,
|
|
437
|
+
var(--ui-color-border-hover)
|
|
438
|
+
);
|
|
424
439
|
}
|
|
425
440
|
|
|
426
441
|
.atl-chat-input .field:focus-visible {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-chat.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/atl-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAGd,SAAS,EACT,sBAAsB,EAOvB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AACjB,OAAO,gBAAgB,CAAC;AAiBxB;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,oCAAoC;IACpC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAkB,EAClB,MAAe,EACf,IAAY,EACZ,YAAY,EACZ,QAAQ,GACT,EAAE,YAAY,+BAuHd;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,+BAmBhC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,+
|
|
1
|
+
{"version":3,"file":"atl-chat.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/atl-chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAGd,SAAS,EACT,sBAAsB,EAOvB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AACjB,OAAO,gBAAgB,CAAC;AAiBxB;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,oCAAoC;IACpC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAkB,EAClB,MAAe,EACf,IAAY,EACZ,YAAY,EACZ,QAAQ,GACT,EAAE,YAAY,+BAuHd;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,+BAmBhC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,+BA+BhC;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,6BAA6B;IAC7B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAkB,EAClB,MAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,mBAAmB,+BAcrB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAc,EACd,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAYpB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,sBAAsB,+BAexB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,CACX;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,MAAM,EACN,MAAM,EACN,WAAW,EACX,SAAuC,EACvC,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAuEnB"}
|
package/src/lib/chat/atl-chat.js
CHANGED
|
@@ -119,10 +119,16 @@ export function AtlChatMessages({ children, className, ...rest }) {
|
|
|
119
119
|
const el = ref.current;
|
|
120
120
|
if (!el)
|
|
121
121
|
return;
|
|
122
|
-
const stickToBottom = () => {
|
|
122
|
+
const stickToBottom = () => {
|
|
123
|
+
el.scrollTop = el.scrollHeight;
|
|
124
|
+
};
|
|
123
125
|
stickToBottom();
|
|
124
126
|
const observer = new MutationObserver(stickToBottom);
|
|
125
|
-
observer.observe(el, {
|
|
127
|
+
observer.observe(el, {
|
|
128
|
+
childList: true,
|
|
129
|
+
subtree: true,
|
|
130
|
+
characterData: true,
|
|
131
|
+
});
|
|
126
132
|
return () => observer.disconnect();
|
|
127
133
|
}, []);
|
|
128
134
|
return (_jsx("div", { ref: ref, role: "log", "aria-live": "polite", "aria-label": "Conversation", className: ['atl-chat-messages', className].filter(Boolean).join(' '), ...rest, children: _jsx("div", { className: "messages-list", role: "list", "aria-label": "Messages", children: children }) }));
|
|
@@ -139,11 +145,9 @@ export function AtlChatMessage({ role = 'assistant', failed = false, children, c
|
|
|
139
145
|
return (_jsx("div", { role: "listitem", className: classes, ...rest, children: children }));
|
|
140
146
|
}
|
|
141
147
|
export function AtlChatTyping({ inline = false, className, ...rest }) {
|
|
142
|
-
const classes = [
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
className,
|
|
146
|
-
].filter(Boolean).join(' ');
|
|
148
|
+
const classes = ['atl-chat-typing', inline && 'is-inline', className]
|
|
149
|
+
.filter(Boolean)
|
|
150
|
+
.join(' ');
|
|
147
151
|
return (_jsxs("div", { role: "status", "aria-live": "polite", className: classes, ...rest, children: [_jsx("span", { className: "dot" }), _jsx("span", { className: "dot" }), _jsx("span", { className: "dot" }), _jsx("span", { className: "sr-only", children: "Assistant is typing" })] }));
|
|
148
152
|
}
|
|
149
153
|
export function AtlChatSuggestion({ label, hint, onSelected, className, }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-chat.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/atl-chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n HTMLAttributes,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n TextareaHTMLAttributes,\n createContext,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\nimport type {\n AtlChatMessageRole,\n AtlChatStatus,\n AtlChatVariant,\n} from '../spec';\nimport './atl-chat.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface ChatContextValue {\n headerId: string;\n status: AtlChatStatus;\n close: () => void;\n toggle: () => void;\n}\n\nconst ChatContext = createContext<ChatContextValue>({\n headerId: '',\n status: 'idle',\n close: () => undefined,\n toggle: () => undefined,\n});\n\n/**\n * Properties for the AtlChat component.\n */\nexport interface AtlChatProps {\n /** Layout variant. */\n variant?: AtlChatVariant;\n /** Connection / response status. */\n status?: AtlChatStatus;\n /** Whether the chat is open (drawer / popup variants). */\n open?: boolean;\n /** Callback when open state should change. */\n onOpenChange?: (open: boolean) => void;\n children?: ReactNode;\n}\n\n/**\n * AI assistant surface. Three layout variants share the same content slots:\n * `drawer` (slide-in panel), `popup` (floating bubble + window), `inline`\n * (embedded card). Compose with `AtlChatHeader`, `AtlChatMessages`,\n * `AtlChatMessage`, `AtlChatTyping`, `AtlChatSuggestion`, `AtlChatInput`.\n */\nexport function AtlChat({\n variant = 'drawer',\n status = 'idle',\n open = false,\n onOpenChange,\n children,\n}: AtlChatProps) {\n const dialogRef = useRef<HTMLDialogElement>(null);\n const headerId = useId();\n const triggerElRef = useRef<Element | null>(null);\n\n useEffect(() => {\n if (variant !== 'drawer') return;\n const dialog = dialogRef.current;\n if (!dialog) return;\n if (open) {\n triggerElRef.current = document.activeElement;\n if (!dialog.open) dialog.showModal();\n } else {\n if (dialog.open) dialog.close();\n (triggerElRef.current as HTMLElement | null)?.focus();\n triggerElRef.current = null;\n }\n }, [open, variant]);\n\n // Auto-focus the input on open for drawer / popup. Inline keeps user focus.\n const hostRef = useRef<HTMLDivElement>(null);\n useEffect(() => {\n if (!open) return;\n if (variant === 'inline') return;\n const host = hostRef.current;\n if (!host) return;\n requestAnimationFrame(() => {\n host.querySelector<HTMLTextAreaElement>('textarea')?.focus();\n });\n }, [open, variant]);\n\n useEffect(() => {\n if (variant !== 'drawer') return;\n const dialog = dialogRef.current;\n if (!dialog) return;\n const onClose = () => onOpenChange?.(false);\n const onCancel = (e: Event) => {\n e.preventDefault();\n onOpenChange?.(false);\n };\n dialog.addEventListener('close', onClose);\n dialog.addEventListener('cancel', onCancel);\n return () => {\n dialog.removeEventListener('close', onClose);\n dialog.removeEventListener('cancel', onCancel);\n };\n }, [onOpenChange, variant]);\n\n const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n if (e.target === dialogRef.current) onOpenChange?.(false);\n };\n\n const hostClass = [\n 'atl-chat',\n `variant-${variant}`,\n `status-${status}`,\n open && 'is-open',\n ]\n .filter(Boolean)\n .join(' ');\n\n const ctx: ChatContextValue = {\n headerId,\n status,\n close: () => onOpenChange?.(false),\n toggle: () => onOpenChange?.(!open),\n };\n\n return (\n <ChatContext.Provider value={ctx}>\n <div ref={hostRef} className={hostClass}>\n {variant === 'drawer' && (\n <dialog\n ref={dialogRef}\n aria-labelledby={headerId}\n aria-modal=\"true\"\n onClick={handleBackdropClick}\n >\n <div\n className=\"surface drawer-surface\"\n onClick={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </dialog>\n )}\n {variant === 'popup' && (\n <>\n {open && (\n <div\n className=\"surface popup-surface\"\n role=\"dialog\"\n aria-labelledby={headerId}\n >\n {children}\n </div>\n )}\n <button\n type=\"button\"\n className=\"fab-bubble\"\n aria-label={open ? 'Close AI assistant' : 'Open AI assistant'}\n aria-expanded={open}\n onClick={() => onOpenChange?.(!open)}\n >\n <span aria-hidden=\"true\">AI</span>\n </button>\n </>\n )}\n {variant === 'inline' && (\n <section\n className=\"surface inline-surface\"\n aria-labelledby={headerId}\n >\n {children}\n </section>\n )}\n </div>\n </ChatContext.Provider>\n );\n}\n\n/**\n * Header slot for `AtlChat`. Holds the title block; the close button\n * is rendered automatically (hidden on the inline variant via CSS).\n */\nexport function AtlChatHeader({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n const ctx = useContext(ChatContext);\n return (\n <div\n id={ctx.headerId}\n className={['atl-chat-header', className].filter(Boolean).join(' ')}\n {...rest}\n >\n <div className=\"title-block\">{children}</div>\n <button\n type=\"button\"\n className=\"close-btn\"\n aria-label=\"Close chat\"\n onClick={ctx.close}\n >\n <AtlIcon name=\"close\" size=\"sm\" />\n </button>\n </div>\n );\n}\n\n/**\n * Scrollable message list. Project `AtlChatMessage`, `AtlChatTyping`, or\n * `AtlChatSuggestion` children inside. Auto-scrolls to the bottom whenever\n * children are added or content changes — important for streaming responses\n * where new tokens are appended live.\n *\n * Renders `role=\"log\"` (named, `aria-label=\"Conversation\"`) with\n * `aria-live=\"polite\"` on the root — the live region that announces new\n * messages without interrupting whatever the user is doing. `log` is not\n * `list`: an element carries exactly one role, so the projected\n * `AtlChatMessage` `listitem`s get their required list parent from a second,\n * nested element (`.messages-list`, `role=\"list\"`) rather than from the log\n * root itself. That wrapper is `display: contents` so it never affects the\n * flex/gap layout of the messages — verified (Chromium, Firefox, WebKit): the\n * gap between messages is unchanged, and Chromium's native accessibility tree\n * shows `log \"Conversation\" > list \"Messages\" > listitem, listitem`.\n */\nexport function AtlChatMessages({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n const ref = useRef<HTMLDivElement>(null);\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const stickToBottom = () => { el.scrollTop = el.scrollHeight; };\n stickToBottom();\n const observer = new MutationObserver(stickToBottom);\n observer.observe(el, { childList: true, subtree: true, characterData: true });\n return () => observer.disconnect();\n }, []);\n return (\n <div\n ref={ref}\n role=\"log\"\n aria-live=\"polite\"\n aria-label=\"Conversation\"\n className={['atl-chat-messages', className].filter(Boolean).join(' ')}\n {...rest}\n >\n <div className=\"messages-list\" role=\"list\" aria-label=\"Messages\">\n {children}\n </div>\n </div>\n );\n}\n\n/**\n * A single chat message. Role drives bubble alignment and color.\n */\nexport interface AtlChatMessageProps extends HTMLAttributes<HTMLDivElement> {\n /** Sender of the message. */\n role?: AtlChatMessageRole;\n /** Marks the message as failed (red dashed border). */\n failed?: boolean;\n}\n\nexport function AtlChatMessage({\n role = 'assistant',\n failed = false,\n children,\n className,\n ...rest\n}: AtlChatMessageProps) {\n const classes = [\n 'atl-chat-message',\n `role-${role}`,\n failed && 'is-failed',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n return (\n <div role=\"listitem\" className={classes} {...rest}>\n {children}\n </div>\n );\n}\n\n/**\n * Typing indicator (three animated dots).\n *\n * Two display modes:\n * - **Standalone bubble** (default) — render at the end of the message\n * list to show \"the assistant is starting to respond\".\n * - **Inline cursor** (`inline`) — render as the LAST child INSIDE the\n * currently-streaming `AtlChatMessage` so the dots read as a typing\n * caret at the end of the partial text.\n */\nexport interface AtlChatTypingProps extends HTMLAttributes<HTMLDivElement> {\n /** When true, renders as an inline cursor without bubble chrome. */\n inline?: boolean;\n}\n\nexport function AtlChatTyping({\n inline = false,\n className,\n ...rest\n}: AtlChatTypingProps) {\n const classes = [\n 'atl-chat-typing',\n inline && 'is-inline',\n className,\n ].filter(Boolean).join(' ');\n return (\n <div role=\"status\" aria-live=\"polite\" className={classes} {...rest}>\n <span className=\"dot\" />\n <span className=\"dot\" />\n <span className=\"dot\" />\n <span className=\"sr-only\">Assistant is typing</span>\n </div>\n );\n}\n\n/**\n * Tappable suggestion chip used in the empty state to seed a conversation.\n */\nexport interface AtlChatSuggestionProps {\n /** Primary label of the suggestion. */\n label: string;\n /** Optional secondary hint text. */\n hint?: string;\n /** Fires the label string when activated. */\n onSelected?: (label: string) => void;\n className?: string;\n}\n\nexport function AtlChatSuggestion({\n label,\n hint,\n onSelected,\n className,\n}: AtlChatSuggestionProps) {\n return (\n <div\n className={['atl-chat-suggestion', className].filter(Boolean).join(' ')}\n >\n <button\n type=\"button\"\n className=\"chip\"\n onClick={() => onSelected?.(label)}\n >\n <span className=\"chip-label\">{label}</span>\n {hint && <span className=\"chip-hint\">{hint}</span>}\n </button>\n </div>\n );\n}\n\n/**\n * Composable input footer for `AtlChat`. Wraps a textarea and emits\n * `onSend` (or `onStop` when the chat status is `'streaming'`).\n *\n * The action button automatically switches between primary \"Send\" and\n * danger \"Stop\" based on the parent chat's status.\n */\nexport interface AtlChatInputProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {\n value?: string;\n onValueChange?: (value: string) => void;\n onSend?: (text: string) => void;\n onStop?: () => void;\n /** Accessible label for the input field. */\n ariaLabel?: string;\n}\n\nexport function AtlChatInput({\n value,\n onValueChange,\n onSend,\n onStop,\n placeholder,\n ariaLabel = 'Message your AI assistant',\n ...rest\n}: AtlChatInputProps) {\n const ctx = useContext(ChatContext);\n const isStreaming = ctx.status === 'streaming';\n const [internal, setInternal] = useState('');\n const isControlled = value !== undefined;\n const current = isControlled ? value : internal;\n\n const setCurrent = (next: string) => {\n if (!isControlled) setInternal(next);\n onValueChange?.(next);\n };\n\n const effectivePlaceholder =\n placeholder ??\n (isStreaming\n ? 'Waiting for response…'\n : ctx.status === 'error'\n ? 'Try again…'\n : 'Message your AI assistant…');\n\n const emitSend = () => {\n const text = current.trim();\n if (!text || isStreaming) return;\n onSend?.(text);\n setCurrent('');\n };\n\n const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n setCurrent(e.target.value);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n emitSend();\n }\n };\n\n return (\n <div className=\"atl-chat-input\">\n <textarea\n className=\"field\"\n rows={1}\n value={current}\n placeholder={effectivePlaceholder}\n disabled={isStreaming}\n aria-label={ariaLabel}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...rest}\n />\n {isStreaming ? (\n <button\n type=\"button\"\n className=\"action-btn variant-danger size-md\"\n onClick={onStop}\n >\n Stop\n </button>\n ) : (\n <button\n type=\"button\"\n className=\"action-btn variant-primary size-md\"\n disabled={!current.trim()}\n onClick={emitSend}\n >\n Send\n </button>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"atl-chat.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/chat/atl-chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n HTMLAttributes,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n TextareaHTMLAttributes,\n createContext,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\nimport type {\n AtlChatMessageRole,\n AtlChatStatus,\n AtlChatVariant,\n} from '../spec';\nimport './atl-chat.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface ChatContextValue {\n headerId: string;\n status: AtlChatStatus;\n close: () => void;\n toggle: () => void;\n}\n\nconst ChatContext = createContext<ChatContextValue>({\n headerId: '',\n status: 'idle',\n close: () => undefined,\n toggle: () => undefined,\n});\n\n/**\n * Properties for the AtlChat component.\n */\nexport interface AtlChatProps {\n /** Layout variant. */\n variant?: AtlChatVariant;\n /** Connection / response status. */\n status?: AtlChatStatus;\n /** Whether the chat is open (drawer / popup variants). */\n open?: boolean;\n /** Callback when open state should change. */\n onOpenChange?: (open: boolean) => void;\n children?: ReactNode;\n}\n\n/**\n * AI assistant surface. Three layout variants share the same content slots:\n * `drawer` (slide-in panel), `popup` (floating bubble + window), `inline`\n * (embedded card). Compose with `AtlChatHeader`, `AtlChatMessages`,\n * `AtlChatMessage`, `AtlChatTyping`, `AtlChatSuggestion`, `AtlChatInput`.\n */\nexport function AtlChat({\n variant = 'drawer',\n status = 'idle',\n open = false,\n onOpenChange,\n children,\n}: AtlChatProps) {\n const dialogRef = useRef<HTMLDialogElement>(null);\n const headerId = useId();\n const triggerElRef = useRef<Element | null>(null);\n\n useEffect(() => {\n if (variant !== 'drawer') return;\n const dialog = dialogRef.current;\n if (!dialog) return;\n if (open) {\n triggerElRef.current = document.activeElement;\n if (!dialog.open) dialog.showModal();\n } else {\n if (dialog.open) dialog.close();\n (triggerElRef.current as HTMLElement | null)?.focus();\n triggerElRef.current = null;\n }\n }, [open, variant]);\n\n // Auto-focus the input on open for drawer / popup. Inline keeps user focus.\n const hostRef = useRef<HTMLDivElement>(null);\n useEffect(() => {\n if (!open) return;\n if (variant === 'inline') return;\n const host = hostRef.current;\n if (!host) return;\n requestAnimationFrame(() => {\n host.querySelector<HTMLTextAreaElement>('textarea')?.focus();\n });\n }, [open, variant]);\n\n useEffect(() => {\n if (variant !== 'drawer') return;\n const dialog = dialogRef.current;\n if (!dialog) return;\n const onClose = () => onOpenChange?.(false);\n const onCancel = (e: Event) => {\n e.preventDefault();\n onOpenChange?.(false);\n };\n dialog.addEventListener('close', onClose);\n dialog.addEventListener('cancel', onCancel);\n return () => {\n dialog.removeEventListener('close', onClose);\n dialog.removeEventListener('cancel', onCancel);\n };\n }, [onOpenChange, variant]);\n\n const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n if (e.target === dialogRef.current) onOpenChange?.(false);\n };\n\n const hostClass = [\n 'atl-chat',\n `variant-${variant}`,\n `status-${status}`,\n open && 'is-open',\n ]\n .filter(Boolean)\n .join(' ');\n\n const ctx: ChatContextValue = {\n headerId,\n status,\n close: () => onOpenChange?.(false),\n toggle: () => onOpenChange?.(!open),\n };\n\n return (\n <ChatContext.Provider value={ctx}>\n <div ref={hostRef} className={hostClass}>\n {variant === 'drawer' && (\n <dialog\n ref={dialogRef}\n aria-labelledby={headerId}\n aria-modal=\"true\"\n onClick={handleBackdropClick}\n >\n <div\n className=\"surface drawer-surface\"\n onClick={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </dialog>\n )}\n {variant === 'popup' && (\n <>\n {open && (\n <div\n className=\"surface popup-surface\"\n role=\"dialog\"\n aria-labelledby={headerId}\n >\n {children}\n </div>\n )}\n <button\n type=\"button\"\n className=\"fab-bubble\"\n aria-label={open ? 'Close AI assistant' : 'Open AI assistant'}\n aria-expanded={open}\n onClick={() => onOpenChange?.(!open)}\n >\n <span aria-hidden=\"true\">AI</span>\n </button>\n </>\n )}\n {variant === 'inline' && (\n <section\n className=\"surface inline-surface\"\n aria-labelledby={headerId}\n >\n {children}\n </section>\n )}\n </div>\n </ChatContext.Provider>\n );\n}\n\n/**\n * Header slot for `AtlChat`. Holds the title block; the close button\n * is rendered automatically (hidden on the inline variant via CSS).\n */\nexport function AtlChatHeader({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n const ctx = useContext(ChatContext);\n return (\n <div\n id={ctx.headerId}\n className={['atl-chat-header', className].filter(Boolean).join(' ')}\n {...rest}\n >\n <div className=\"title-block\">{children}</div>\n <button\n type=\"button\"\n className=\"close-btn\"\n aria-label=\"Close chat\"\n onClick={ctx.close}\n >\n <AtlIcon name=\"close\" size=\"sm\" />\n </button>\n </div>\n );\n}\n\n/**\n * Scrollable message list. Project `AtlChatMessage`, `AtlChatTyping`, or\n * `AtlChatSuggestion` children inside. Auto-scrolls to the bottom whenever\n * children are added or content changes — important for streaming responses\n * where new tokens are appended live.\n *\n * Renders `role=\"log\"` (named, `aria-label=\"Conversation\"`) with\n * `aria-live=\"polite\"` on the root — the live region that announces new\n * messages without interrupting whatever the user is doing. `log` is not\n * `list`: an element carries exactly one role, so the projected\n * `AtlChatMessage` `listitem`s get their required list parent from a second,\n * nested element (`.messages-list`, `role=\"list\"`) rather than from the log\n * root itself. That wrapper is `display: contents` so it never affects the\n * flex/gap layout of the messages — verified (Chromium, Firefox, WebKit): the\n * gap between messages is unchanged, and Chromium's native accessibility tree\n * shows `log \"Conversation\" > list \"Messages\" > listitem, listitem`.\n */\nexport function AtlChatMessages({\n children,\n className,\n ...rest\n}: HTMLAttributes<HTMLDivElement>) {\n const ref = useRef<HTMLDivElement>(null);\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n const stickToBottom = () => {\n el.scrollTop = el.scrollHeight;\n };\n stickToBottom();\n const observer = new MutationObserver(stickToBottom);\n observer.observe(el, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n return () => observer.disconnect();\n }, []);\n return (\n <div\n ref={ref}\n role=\"log\"\n aria-live=\"polite\"\n aria-label=\"Conversation\"\n className={['atl-chat-messages', className].filter(Boolean).join(' ')}\n {...rest}\n >\n <div className=\"messages-list\" role=\"list\" aria-label=\"Messages\">\n {children}\n </div>\n </div>\n );\n}\n\n/**\n * A single chat message. Role drives bubble alignment and color.\n */\nexport interface AtlChatMessageProps extends HTMLAttributes<HTMLDivElement> {\n /** Sender of the message. */\n role?: AtlChatMessageRole;\n /** Marks the message as failed (red dashed border). */\n failed?: boolean;\n}\n\nexport function AtlChatMessage({\n role = 'assistant',\n failed = false,\n children,\n className,\n ...rest\n}: AtlChatMessageProps) {\n const classes = [\n 'atl-chat-message',\n `role-${role}`,\n failed && 'is-failed',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n return (\n <div role=\"listitem\" className={classes} {...rest}>\n {children}\n </div>\n );\n}\n\n/**\n * Typing indicator (three animated dots).\n *\n * Two display modes:\n * - **Standalone bubble** (default) — render at the end of the message\n * list to show \"the assistant is starting to respond\".\n * - **Inline cursor** (`inline`) — render as the LAST child INSIDE the\n * currently-streaming `AtlChatMessage` so the dots read as a typing\n * caret at the end of the partial text.\n */\nexport interface AtlChatTypingProps extends HTMLAttributes<HTMLDivElement> {\n /** When true, renders as an inline cursor without bubble chrome. */\n inline?: boolean;\n}\n\nexport function AtlChatTyping({\n inline = false,\n className,\n ...rest\n}: AtlChatTypingProps) {\n const classes = ['atl-chat-typing', inline && 'is-inline', className]\n .filter(Boolean)\n .join(' ');\n return (\n <div role=\"status\" aria-live=\"polite\" className={classes} {...rest}>\n <span className=\"dot\" />\n <span className=\"dot\" />\n <span className=\"dot\" />\n <span className=\"sr-only\">Assistant is typing</span>\n </div>\n );\n}\n\n/**\n * Tappable suggestion chip used in the empty state to seed a conversation.\n */\nexport interface AtlChatSuggestionProps {\n /** Primary label of the suggestion. */\n label: string;\n /** Optional secondary hint text. */\n hint?: string;\n /** Fires the label string when activated. */\n onSelected?: (label: string) => void;\n className?: string;\n}\n\nexport function AtlChatSuggestion({\n label,\n hint,\n onSelected,\n className,\n}: AtlChatSuggestionProps) {\n return (\n <div\n className={['atl-chat-suggestion', className].filter(Boolean).join(' ')}\n >\n <button\n type=\"button\"\n className=\"chip\"\n onClick={() => onSelected?.(label)}\n >\n <span className=\"chip-label\">{label}</span>\n {hint && <span className=\"chip-hint\">{hint}</span>}\n </button>\n </div>\n );\n}\n\n/**\n * Composable input footer for `AtlChat`. Wraps a textarea and emits\n * `onSend` (or `onStop` when the chat status is `'streaming'`).\n *\n * The action button automatically switches between primary \"Send\" and\n * danger \"Stop\" based on the parent chat's status.\n */\nexport interface AtlChatInputProps extends Omit<\n TextareaHTMLAttributes<HTMLTextAreaElement>,\n 'onChange'\n> {\n value?: string;\n onValueChange?: (value: string) => void;\n onSend?: (text: string) => void;\n onStop?: () => void;\n /** Accessible label for the input field. */\n ariaLabel?: string;\n}\n\nexport function AtlChatInput({\n value,\n onValueChange,\n onSend,\n onStop,\n placeholder,\n ariaLabel = 'Message your AI assistant',\n ...rest\n}: AtlChatInputProps) {\n const ctx = useContext(ChatContext);\n const isStreaming = ctx.status === 'streaming';\n const [internal, setInternal] = useState('');\n const isControlled = value !== undefined;\n const current = isControlled ? value : internal;\n\n const setCurrent = (next: string) => {\n if (!isControlled) setInternal(next);\n onValueChange?.(next);\n };\n\n const effectivePlaceholder =\n placeholder ??\n (isStreaming\n ? 'Waiting for response…'\n : ctx.status === 'error'\n ? 'Try again…'\n : 'Message your AI assistant…');\n\n const emitSend = () => {\n const text = current.trim();\n if (!text || isStreaming) return;\n onSend?.(text);\n setCurrent('');\n };\n\n const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n setCurrent(e.target.value);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n emitSend();\n }\n };\n\n return (\n <div className=\"atl-chat-input\">\n <textarea\n className=\"field\"\n rows={1}\n value={current}\n placeholder={effectivePlaceholder}\n disabled={isStreaming}\n aria-label={ariaLabel}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n {...rest}\n />\n {isStreaming ? (\n <button\n type=\"button\"\n className=\"action-btn variant-danger size-md\"\n onClick={onStop}\n >\n Stop\n </button>\n ) : (\n <button\n type=\"button\"\n className=\"action-btn variant-primary size-md\"\n disabled={!current.trim()}\n onClick={emitSend}\n >\n Send\n </button>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -47,9 +47,10 @@
|
|
|
47
47
|
background-color: var(--ui-color-input-bg);
|
|
48
48
|
cursor: pointer;
|
|
49
49
|
position: relative;
|
|
50
|
-
transition:
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
transition:
|
|
51
|
+
border-color var(--ui-transition-fast),
|
|
52
|
+
background-color var(--ui-transition-fast),
|
|
53
|
+
box-shadow var(--ui-transition-fast);
|
|
53
54
|
outline: none;
|
|
54
55
|
}
|
|
55
56
|
|
|
@@ -138,7 +139,13 @@
|
|
|
138
139
|
|
|
139
140
|
/* Animation */
|
|
140
141
|
@keyframes atl-check-pop {
|
|
141
|
-
0% {
|
|
142
|
-
|
|
143
|
-
|
|
142
|
+
0% {
|
|
143
|
+
transform: rotate(45deg) translate(-1px, -1px) scale(0);
|
|
144
|
+
}
|
|
145
|
+
60% {
|
|
146
|
+
transform: rotate(45deg) translate(-1px, -1px) scale(1.15);
|
|
147
|
+
}
|
|
148
|
+
100% {
|
|
149
|
+
transform: rotate(45deg) translate(-1px, -1px) scale(1);
|
|
150
|
+
}
|
|
144
151
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-checkbox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/checkbox/atl-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"atl-checkbox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/checkbox/atl-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBACf,SACE,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CACvD,EACD,eAAe;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAe,EACf,eAAe,EACf,aAAqB,EACrB,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAoDlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-checkbox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/checkbox/atl-checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"atl-checkbox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/checkbox/atl-checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,MAAM,EACN,SAAS,EACT,KAAK,GACN,MAAM,OAAO,CAAC;AAEf,OAAO,oBAAoB,CAAC;AAsC5B;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,GAAG,KAAK,EACf,eAAe,EACf,aAAa,GAAG,KAAK,EACrB,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACU;IACjB,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,YAAY,WAAW,EAAE,CAAC;IAChD,MAAM,OAAO,GAAG,GAAG,OAAO,SAAS,CAAC;IAEpC,MAAM,OAAO,GAAG;QACd,cAAc;QACd,OAAO,IAAI,YAAY;QACvB,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,iBAAO,OAAO,EAAE,OAAO,aACrB,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,sBAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACzD,IAAI,EAAE,IAAI,KACN,IAAI,GACR,EACD,QAAQ,IACH,EACP,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,eAAY,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import {\n InputHTMLAttributes,\n ReactNode,\n useRef,\n useEffect,\n useId,\n} from 'react';\nimport type { AtlCheckboxSpec } from '../spec';\nimport './atl-checkbox.css';\n\n/**\n * Properties for the AtlCheckbox component.\n */\nexport interface AtlCheckboxProps\n extends\n Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'checked' | 'onChange' | 'readOnly' | 'value'\n >,\n AtlCheckboxSpec {\n /**\n * Whether the checkbox is checked.\n */\n checked?: boolean;\n /**\n * Callback triggered when the checked state changes.\n */\n onCheckedChange?: (checked: boolean) => void;\n /**\n * Whether the checkbox is in an indeterminate state.\n */\n indeterminate?: boolean;\n /**\n * Whether the checkbox is in an invalid state.\n */\n invalid?: boolean;\n /**\n * Array of error messages to display.\n */\n errors?: string[];\n /**\n * The content to be rendered as the label for the checkbox.\n */\n children?: ReactNode;\n}\n\n/**\n * A checkbox component for selecting one or more options.\n */\nexport function AtlCheckbox({\n checked = false,\n onCheckedChange,\n indeterminate = false,\n invalid = false,\n errors = [],\n disabled = false,\n required = false,\n children,\n className,\n id,\n name,\n ...rest\n}: AtlCheckboxProps) {\n const inputRef = useRef<HTMLInputElement>(null);\n const generatedId = useId();\n const inputId = id || `checkbox-${generatedId}`;\n const errorId = `${inputId}-errors`;\n\n const classes = [\n 'atl-checkbox',\n checked && 'is-checked',\n invalid && 'is-invalid',\n disabled && 'is-disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate]);\n\n return (\n <div className={classes}>\n <label htmlFor={inputId}>\n <input\n ref={inputRef}\n type=\"checkbox\"\n id={inputId}\n checked={checked}\n onChange={(e) => onCheckedChange?.(e.target.checked)}\n disabled={disabled}\n required={required}\n aria-invalid={invalid || undefined}\n aria-required={required || undefined}\n aria-describedby={errors.length > 0 ? errorId : undefined}\n name={name}\n {...rest}\n />\n {children}\n </label>\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"]}
|
|
@@ -74,7 +74,10 @@
|
|
|
74
74
|
font-size: var(--ui-font-size-xs);
|
|
75
75
|
font-weight: var(--ui-font-weight-medium);
|
|
76
76
|
cursor: pointer;
|
|
77
|
-
transition:
|
|
77
|
+
transition:
|
|
78
|
+
color var(--ui-transition-fast),
|
|
79
|
+
background var(--ui-transition-fast),
|
|
80
|
+
border-color var(--ui-transition-fast);
|
|
78
81
|
white-space: nowrap;
|
|
79
82
|
}
|
|
80
83
|
|
|
@@ -16,17 +16,18 @@
|
|
|
16
16
|
.atl-combobox-wrapper
|
|
17
17
|
),
|
|
18
18
|
:is(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
)
|
|
19
|
+
.atl-combobox,
|
|
20
|
+
.atl-combobox-check,
|
|
21
|
+
.atl-combobox-error-message,
|
|
22
|
+
.atl-combobox-errors,
|
|
23
|
+
.atl-combobox-icon,
|
|
24
|
+
.atl-combobox-input,
|
|
25
|
+
.atl-combobox-no-results,
|
|
26
|
+
.atl-combobox-option,
|
|
27
|
+
.atl-combobox-panel,
|
|
28
|
+
.atl-combobox-wrapper
|
|
29
|
+
)
|
|
30
|
+
* {
|
|
30
31
|
box-sizing: border-box;
|
|
31
32
|
}
|
|
32
33
|
|
|
@@ -64,12 +65,21 @@
|
|
|
64
65
|
* defect only appeared in CI. See ADR-0048. */
|
|
65
66
|
line-height: var(--ui-line-height-tight);
|
|
66
67
|
padding: calc(
|
|
67
|
-
(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var(--ui-border-width)
|
|
72
|
-
)
|
|
68
|
+
(
|
|
69
|
+
var(--ui-control-height-md) - var(--ui-line-height-tight) *
|
|
70
|
+
var(--ui-font-size-md)
|
|
71
|
+
) /
|
|
72
|
+
2 - var(--ui-border-width)
|
|
73
|
+
)
|
|
74
|
+
calc(var(--ui-spacing-4) + 1.25rem + var(--ui-spacing-5))
|
|
75
|
+
calc(
|
|
76
|
+
(
|
|
77
|
+
var(--ui-control-height-md) - var(--ui-line-height-tight) *
|
|
78
|
+
var(--ui-font-size-md)
|
|
79
|
+
) /
|
|
80
|
+
2 - var(--ui-border-width)
|
|
81
|
+
)
|
|
82
|
+
var(--ui-spacing-4);
|
|
73
83
|
font-family: inherit;
|
|
74
84
|
font-size: inherit;
|
|
75
85
|
color: var(--ui-color-text);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-combobox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/atl-combobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,oBAAoB,CAAC;AAG5B,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAElC,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,aAAa,EACb,OAAY,EACZ,WAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,IAAI,EACJ,MAAW,GACZ,EAAE,gBAAgB,+
|
|
1
|
+
{"version":3,"file":"atl-combobox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/combobox/atl-combobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,oBAAoB,CAAC;AAG5B,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAElC,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,aAAa,EACb,OAAY,EACZ,WAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,IAAI,EACJ,MAAW,GACZ,EAAE,gBAAgB,+BAkOlB"}
|