@atelier-ui/react 0.0.21 → 0.0.23
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 +22 -0
- package/package.json +1 -1
- package/src/lib/alert/llm-alert.d.ts +3 -1
- package/src/lib/alert/llm-alert.d.ts.map +1 -1
- package/src/lib/alert/llm-alert.js +7 -1
- package/src/lib/alert/llm-alert.js.map +1 -1
- package/src/lib/badge/llm-badge.d.ts +3 -1
- package/src/lib/badge/llm-badge.d.ts.map +1 -1
- package/src/lib/badge/llm-badge.js +10 -2
- package/src/lib/badge/llm-badge.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,25 @@
|
|
|
1
|
+
## 0.0.23 (2026-04-23)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- **cookbook:** API-docs drift gate + 6th pattern across all 3 frameworks ([f78af67](https://github.com/DominikPieper/atelier-ui/commit/f78af67))
|
|
6
|
+
|
|
7
|
+
### ❤️ Thank You
|
|
8
|
+
|
|
9
|
+
- Claude Opus 4.7 (1M context)
|
|
10
|
+
- Dominik Pieper
|
|
11
|
+
|
|
12
|
+
## 0.0.22 (2026-04-23)
|
|
13
|
+
|
|
14
|
+
### 🚀 Features
|
|
15
|
+
|
|
16
|
+
- **storybook:** categorize sidebar and bring Vue stories to parity ([13a666e](https://github.com/DominikPieper/atelier-ui/commit/13a666e))
|
|
17
|
+
|
|
18
|
+
### ❤️ Thank You
|
|
19
|
+
|
|
20
|
+
- Claude Opus 4.7 (1M context)
|
|
21
|
+
- Dominik Pieper
|
|
22
|
+
|
|
1
23
|
## 0.0.21 (2026-04-23)
|
|
2
24
|
|
|
3
25
|
### 🚀 Features
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import type { LlmAlertSpec } from '../spec';
|
|
3
3
|
import './llm-alert.css';
|
|
4
|
+
type LlmAlertVariant = 'info' | 'success' | 'warning' | 'danger';
|
|
4
5
|
/**
|
|
5
6
|
* Properties for the LlmAlert component.
|
|
6
7
|
*/
|
|
@@ -8,7 +9,7 @@ export interface LlmAlertProps extends HTMLAttributes<HTMLDivElement>, LlmAlertS
|
|
|
8
9
|
/**
|
|
9
10
|
* The visual style variant of the alert.
|
|
10
11
|
*/
|
|
11
|
-
variant?:
|
|
12
|
+
variant?: LlmAlertVariant;
|
|
12
13
|
/**
|
|
13
14
|
* Whether the alert can be dismissed by the user.
|
|
14
15
|
*/
|
|
@@ -26,4 +27,5 @@ export interface LlmAlertProps extends HTMLAttributes<HTMLDivElement>, LlmAlertS
|
|
|
26
27
|
* An alert component for displaying important messages.
|
|
27
28
|
*/
|
|
28
29
|
export declare function LlmAlert({ variant, dismissible, onDismissed, children, className, ...rest }: LlmAlertProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export {};
|
|
29
31
|
//# sourceMappingURL=llm-alert.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"llm-alert.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/alert/llm-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,YAAY;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"llm-alert.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/alert/llm-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAEzB,KAAK,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AASjE;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,YAAY;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAgB,EAChB,WAAmB,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,2CAoCf"}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import './llm-alert.css';
|
|
3
|
+
const VARIANT_ICONS = {
|
|
4
|
+
info: 'ℹ',
|
|
5
|
+
success: '✓',
|
|
6
|
+
warning: '⚠',
|
|
7
|
+
danger: '✕',
|
|
8
|
+
};
|
|
3
9
|
/**
|
|
4
10
|
* An alert component for displaying important messages.
|
|
5
11
|
*/
|
|
6
12
|
export function LlmAlert({ variant = 'info', dismissible = false, onDismissed, children, className, ...rest }) {
|
|
7
13
|
const classes = ['llm-alert', `variant-${variant}`, className].filter(Boolean).join(' ');
|
|
8
14
|
const ariaLive = variant === 'danger' || variant === 'warning' ? 'assertive' : 'polite';
|
|
9
|
-
return (_jsxs("div", { className: classes, role: "alert", "aria-live": ariaLive, ...rest, children: [
|
|
15
|
+
return (_jsxs("div", { className: classes, role: "alert", "aria-live": ariaLive, ...rest, children: [_jsxs("span", { className: "content", children: [_jsx("span", { className: "variant-icon", "aria-hidden": "true", children: VARIANT_ICONS[variant] }), children] }), dismissible && (_jsx("button", { className: "dismiss", type: "button", "aria-label": "Dismiss", onClick: onDismissed, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", 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" })] }) }))] }));
|
|
10
16
|
}
|
|
11
17
|
//# sourceMappingURL=llm-alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"llm-alert.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/alert/llm-alert.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"llm-alert.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/alert/llm-alert.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;AAIzB,MAAM,aAAa,GAAoC;IACrD,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;CACZ,CAAC;AA0BF;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,GAAG,MAAM,EAChB,WAAW,GAAG,KAAK,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACO;IACd,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,WAAW,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzF,MAAM,QAAQ,GAAG,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;IAExF,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,eAAY,QAAQ,KAAM,IAAI,aACjE,gBAAM,SAAS,EAAC,SAAS,aACvB,eAAM,SAAS,EAAC,cAAc,iBAAa,MAAM,YAAE,aAAa,CAAC,OAAO,CAAC,GAAQ,EAChF,QAAQ,IACJ,EACN,WAAW,IAAI,CACd,iBACE,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,QAAQ,gBACF,SAAS,EACpB,OAAO,EAAE,WAAW,YAEpB,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,iBACV,MAAM,aAElB,eAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACtC,eAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,IAClC,GACC,CACV,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport type { LlmAlertSpec } from '../spec';\nimport './llm-alert.css';\n\ntype LlmAlertVariant = 'info' | 'success' | 'warning' | 'danger';\n\nconst VARIANT_ICONS: Record<LlmAlertVariant, string> = {\n info: 'ℹ',\n success: '✓',\n warning: '⚠',\n danger: '✕',\n};\n\n/**\n * Properties for the LlmAlert component.\n */\nexport interface LlmAlertProps\n extends HTMLAttributes<HTMLDivElement>,\n LlmAlertSpec {\n /**\n * The visual style variant of the alert.\n */\n variant?: LlmAlertVariant;\n /**\n * Whether the alert can be dismissed by the user.\n */\n dismissible?: boolean;\n /**\n * Callback triggered when the alert is dismissed.\n */\n onDismissed?: () => void;\n /**\n * The content to be rendered inside the alert.\n */\n children?: ReactNode;\n}\n\n/**\n * An alert component for displaying important messages.\n */\nexport function LlmAlert({\n variant = 'info',\n dismissible = false,\n onDismissed,\n children,\n className,\n ...rest\n}: LlmAlertProps) {\n const classes = ['llm-alert', `variant-${variant}`, className].filter(Boolean).join(' ');\n const ariaLive = variant === 'danger' || variant === 'warning' ? 'assertive' : 'polite';\n\n return (\n <div className={classes} role=\"alert\" aria-live={ariaLive} {...rest}>\n <span className=\"content\">\n <span className=\"variant-icon\" aria-hidden=\"true\">{VARIANT_ICONS[variant]}</span>\n {children}\n </span>\n {dismissible && (\n <button\n className=\"dismiss\"\n type=\"button\"\n aria-label=\"Dismiss\"\n onClick={onDismissed}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import type { LlmBadgeSpec } from '../spec';
|
|
3
3
|
import './llm-badge.css';
|
|
4
|
+
type LlmBadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
|
|
4
5
|
/**
|
|
5
6
|
* Properties for the LlmBadge component.
|
|
6
7
|
*/
|
|
@@ -8,7 +9,7 @@ export interface LlmBadgeProps extends HTMLAttributes<HTMLSpanElement>, LlmBadge
|
|
|
8
9
|
/**
|
|
9
10
|
* The visual style variant of the badge.
|
|
10
11
|
*/
|
|
11
|
-
variant?:
|
|
12
|
+
variant?: LlmBadgeVariant;
|
|
12
13
|
/**
|
|
13
14
|
* The size of the badge.
|
|
14
15
|
*/
|
|
@@ -22,4 +23,5 @@ export interface LlmBadgeProps extends HTMLAttributes<HTMLSpanElement>, LlmBadge
|
|
|
22
23
|
* A badge component for displaying small amounts of information or status.
|
|
23
24
|
*/
|
|
24
25
|
export declare function LlmBadge({ variant, size, children, className, ...rest }: LlmBadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export {};
|
|
25
27
|
//# sourceMappingURL=llm-badge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"llm-badge.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/badge/llm-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,cAAc,CAAC,eAAe,CAAC,EACrC,YAAY;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"llm-badge.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/badge/llm-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAEzB,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAU7E;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,cAAc,CAAC,eAAe,CAAC,EACrC,YAAY;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAmB,EACnB,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,2CAUf"}
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import './llm-badge.css';
|
|
3
|
+
const VARIANT_ICONS = {
|
|
4
|
+
default: null,
|
|
5
|
+
success: '✓',
|
|
6
|
+
warning: '⚠',
|
|
7
|
+
danger: '✕',
|
|
8
|
+
info: 'ℹ',
|
|
9
|
+
};
|
|
3
10
|
/**
|
|
4
11
|
* A badge component for displaying small amounts of information or status.
|
|
5
12
|
*/
|
|
6
13
|
export function LlmBadge({ variant = 'default', size = 'md', children, className, ...rest }) {
|
|
7
14
|
const classes = ['llm-badge', `variant-${variant}`, `size-${size}`, className]
|
|
8
15
|
.filter(Boolean).join(' ');
|
|
9
|
-
|
|
16
|
+
const icon = VARIANT_ICONS[variant];
|
|
17
|
+
return (_jsxs("span", { className: classes, role: "status", ...rest, children: [icon && _jsx("span", { className: "variant-icon", "aria-hidden": "true", children: icon }), children] }));
|
|
10
18
|
}
|
|
11
19
|
//# sourceMappingURL=llm-badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"llm-badge.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/badge/llm-badge.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"llm-badge.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/badge/llm-badge.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;AAIzB,MAAM,aAAa,GAA2C;IAC5D,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;CACV,CAAC;AAsBF;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACO;IACd,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,WAAW,OAAO,EAAE,EAAE,QAAQ,IAAI,EAAE,EAAE,SAAS,CAAC;SAC3E,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,OAAO,CACL,gBAAM,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,KAAK,IAAI,aAC7C,IAAI,IAAI,eAAM,SAAS,EAAC,cAAc,iBAAa,MAAM,YAAE,IAAI,GAAQ,EACvE,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport type { LlmBadgeSpec } from '../spec';\nimport './llm-badge.css';\n\ntype LlmBadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\nconst VARIANT_ICONS: Record<LlmBadgeVariant, string | null> = {\n default: null,\n success: '✓',\n warning: '⚠',\n danger: '✕',\n info: 'ℹ',\n};\n\n/**\n * Properties for the LlmBadge component.\n */\nexport interface LlmBadgeProps\n extends HTMLAttributes<HTMLSpanElement>,\n LlmBadgeSpec {\n /**\n * The visual style variant of the badge.\n */\n variant?: LlmBadgeVariant;\n /**\n * The size of the badge.\n */\n size?: 'sm' | 'md';\n /**\n * The content to be rendered inside the badge.\n */\n children?: ReactNode;\n}\n\n/**\n * A badge component for displaying small amounts of information or status.\n */\nexport function LlmBadge({\n variant = 'default',\n size = 'md',\n children,\n className,\n ...rest\n}: LlmBadgeProps) {\n const classes = ['llm-badge', `variant-${variant}`, `size-${size}`, className]\n .filter(Boolean).join(' ');\n const icon = VARIANT_ICONS[variant];\n return (\n <span className={classes} role=\"status\" {...rest}>\n {icon && <span className=\"variant-icon\" aria-hidden=\"true\">{icon}</span>}\n {children}\n </span>\n );\n}\n"]}
|