@arkyn/components 3.0.1-beta.173 → 3.0.1-beta.174
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/alert/alertContainer/index.d.ts +4 -4
- package/dist/components/alert/alertContent/index.d.ts +1 -1
- package/dist/components/alert/alertDescription/index.d.ts +1 -1
- package/dist/components/alert/alertIcon/index.d.ts +3 -3
- package/dist/components/alert/alertTitle/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/modules/components/alert/alertContainer/index.js +1 -1
- package/dist/modules/components/alert/alertIcon/index.js +1 -1
- package/dist/modules/style.css +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ type AlertContainerProps = {
|
|
|
8
8
|
* - `warning`: yellow — caution required.
|
|
9
9
|
* - `info`: blue — informational message.
|
|
10
10
|
*/
|
|
11
|
-
|
|
11
|
+
scheme: "success" | "danger" | "warning" | "info";
|
|
12
12
|
} & HTMLAttributes<HTMLDivElement>;
|
|
13
13
|
/** @internal Accesses the schema and HTML props of the enclosing `AlertContainer`. */
|
|
14
14
|
declare function useAlertContainer(): AlertContainerProps;
|
|
@@ -18,7 +18,7 @@ declare function useAlertContainer(): AlertContainerProps;
|
|
|
18
18
|
* Automatically detects whether an `AlertTitle` is present among children and adjusts layout:
|
|
19
19
|
* centered when no title, left-aligned when a title is present.
|
|
20
20
|
*
|
|
21
|
-
* @param props.
|
|
21
|
+
* @param props.scheme - Visual style variant. Required.
|
|
22
22
|
* @param props.children - Alert sub-components: `AlertIcon`, `AlertContent`, `AlertTitle`, `AlertDescription`.
|
|
23
23
|
*
|
|
24
24
|
* **...Other valid HTML properties for `<div>`**
|
|
@@ -28,13 +28,13 @@ declare function useAlertContainer(): AlertContainerProps;
|
|
|
28
28
|
* @example
|
|
29
29
|
* ```tsx
|
|
30
30
|
* // Inline alert — no title, centered layout
|
|
31
|
-
* <AlertContainer
|
|
31
|
+
* <AlertContainer scheme="success">
|
|
32
32
|
* <AlertIcon />
|
|
33
33
|
* <AlertContent>Your subscription has been activated.</AlertContent>
|
|
34
34
|
* </AlertContainer>
|
|
35
35
|
*
|
|
36
36
|
* // Full alert with title and description — left-aligned layout
|
|
37
|
-
* <AlertContainer
|
|
37
|
+
* <AlertContainer scheme="danger">
|
|
38
38
|
* <AlertIcon />
|
|
39
39
|
* <AlertContent>
|
|
40
40
|
* <AlertTitle>Payment failed</AlertTitle>
|
|
@@ -10,7 +10,7 @@ type AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;
|
|
|
10
10
|
*
|
|
11
11
|
* @example
|
|
12
12
|
* ```tsx
|
|
13
|
-
* <AlertContainer
|
|
13
|
+
* <AlertContainer scheme="info">
|
|
14
14
|
* <AlertContent>
|
|
15
15
|
* <AlertTitle>Maintenance scheduled</AlertTitle>
|
|
16
16
|
* <AlertDescription>The service will be unavailable on Sunday from 2–4 AM UTC.</AlertDescription>
|
|
@@ -3,7 +3,7 @@ import type { JSX } from "react";
|
|
|
3
3
|
import "./styles.css";
|
|
4
4
|
type AlertIconProps = LucideProps;
|
|
5
5
|
/**
|
|
6
|
-
* AlertIcon — renders a
|
|
6
|
+
* AlertIcon — renders a scheme-appropriate icon from `AlertContainer` context.
|
|
7
7
|
*
|
|
8
8
|
* - `success` → `CheckCircle2`
|
|
9
9
|
* - `danger` → `XCircle`
|
|
@@ -12,11 +12,11 @@ type AlertIconProps = LucideProps;
|
|
|
12
12
|
*
|
|
13
13
|
* Must be placed inside an `AlertContainer`. Accepts all Lucide icon props.
|
|
14
14
|
*
|
|
15
|
-
* @returns The
|
|
15
|
+
* @returns The scheme-matched Lucide icon element.
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
18
|
* ```tsx
|
|
19
|
-
* <AlertContainer
|
|
19
|
+
* <AlertContainer scheme="danger">
|
|
20
20
|
* <AlertIcon />
|
|
21
21
|
* <AlertContent>
|
|
22
22
|
* <AlertTitle>Payment failed</AlertTitle>
|
package/dist/index.js
CHANGED
|
@@ -30,7 +30,7 @@ function ke() {
|
|
|
30
30
|
return a(Oe);
|
|
31
31
|
}
|
|
32
32
|
function Ae(e) {
|
|
33
|
-
let {
|
|
33
|
+
let { scheme: t, children: n, className: r, ...i } = e, a = `arkynAlertContainer ${t} ${((e) => {
|
|
34
34
|
let t = !1, n = (e) => {
|
|
35
35
|
Array.isArray(e) ? e.forEach(n) : e && typeof e == "object" && "type" in e && (e.type === De ? t = !0 : e.props && typeof e.props == "object" && e.props !== null && "children" in e.props && n(e.props.children));
|
|
36
36
|
};
|
|
@@ -66,7 +66,7 @@ function Me(e) {
|
|
|
66
66
|
//#endregion
|
|
67
67
|
//#region src/components/alert/alertIcon/index.tsx
|
|
68
68
|
function Ne(e) {
|
|
69
|
-
let { className: t, ...n } = e, {
|
|
69
|
+
let { className: t, ...n } = e, { scheme: r } = ke(), i = `arkynAlertIcon ${r} ${t}`;
|
|
70
70
|
switch (r) {
|
|
71
71
|
case "success": return /* @__PURE__ */ p(S, {
|
|
72
72
|
className: i,
|
|
@@ -8,7 +8,7 @@ function a() {
|
|
|
8
8
|
return n(i);
|
|
9
9
|
}
|
|
10
10
|
function o(t) {
|
|
11
|
-
let {
|
|
11
|
+
let { scheme: n, children: a, className: o, ...s } = t, c = `arkynAlertContainer ${n} ${((t) => {
|
|
12
12
|
let n = !1, r = (t) => {
|
|
13
13
|
Array.isArray(t) ? t.forEach(r) : t && typeof t == "object" && "type" in t && (t.type === e ? n = !0 : t.props && typeof t.props == "object" && t.props !== null && "children" in t.props && r(t.props.children));
|
|
14
14
|
};
|
|
@@ -4,7 +4,7 @@ import { jsx as t } from "react/jsx-runtime";
|
|
|
4
4
|
import { AlertTriangle as n, CheckCircle2 as r, Info as i, XCircle as a } from "lucide-react";
|
|
5
5
|
//#region src/components/alert/alertIcon/index.tsx
|
|
6
6
|
function o(o) {
|
|
7
|
-
let { className: s, ...c } = o, {
|
|
7
|
+
let { className: s, ...c } = o, { scheme: l } = e(), u = `arkynAlertIcon ${l} ${s}`;
|
|
8
8
|
switch (l) {
|
|
9
9
|
case "success": return /* @__PURE__ */ t(r, {
|
|
10
10
|
className: u,
|