analytica-frontend-lib 1.0.27 → 1.0.29
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/Alert/{Alert.d.mts → index.d.mts} +1 -1
- package/dist/Alert/{Alert.d.ts → index.d.ts} +1 -1
- package/dist/Alert/{Alert.js → index.js} +6 -7
- package/dist/Alert/index.js.map +1 -0
- package/dist/Alert/{Alert.mjs → index.mjs} +67 -16
- package/dist/Alert/index.mjs.map +1 -0
- package/dist/Badge/{Badge.d.mts → index.d.mts} +1 -1
- package/dist/Badge/{Badge.d.ts → index.d.ts} +1 -1
- package/dist/Badge/{Badge.js → index.js} +3 -5
- package/dist/Badge/index.js.map +1 -0
- package/dist/Badge/{Badge.mjs → index.mjs} +3 -1
- package/dist/Badge/index.mjs.map +1 -0
- package/dist/Button/{Button.d.ts → index.d.mts} +1 -1
- package/dist/Button/{Button.d.mts → index.d.ts} +1 -1
- package/dist/Button/{Button.js → index.js} +3 -5
- package/dist/Button/index.js.map +1 -0
- package/dist/Button/{Button.mjs → index.mjs} +3 -1
- package/dist/Button/index.mjs.map +1 -0
- package/dist/CheckBox/{CheckBox.d.mts → index.d.mts} +1 -1
- package/dist/CheckBox/{CheckBox.d.ts → index.d.ts} +1 -1
- package/dist/CheckBox/{CheckBox.js → index.js} +7 -8
- package/dist/CheckBox/index.js.map +1 -0
- package/dist/CheckBox/{CheckBox.mjs → index.mjs} +68 -16
- package/dist/CheckBox/index.mjs.map +1 -0
- package/dist/DropdownMenu/{DropdownMenu.d.mts → index.d.mts} +1 -1
- package/dist/DropdownMenu/{DropdownMenu.d.ts → index.d.ts} +1 -1
- package/dist/DropdownMenu/{DropdownMenu.js → index.js} +4 -3
- package/dist/DropdownMenu/index.js.map +1 -0
- package/dist/DropdownMenu/{DropdownMenu.mjs → index.mjs} +4 -2
- package/dist/DropdownMenu/index.mjs.map +1 -0
- package/dist/IconButton/{IconButton.d.mts → index.d.mts} +1 -1
- package/dist/IconButton/{IconButton.d.ts → index.d.ts} +1 -1
- package/dist/IconButton/{IconButton.js → index.js} +3 -5
- package/dist/IconButton/index.js.map +1 -0
- package/dist/IconButton/{IconButton.mjs → index.mjs} +3 -1
- package/dist/IconButton/index.mjs.map +1 -0
- package/dist/IconRoundedButton/{IconRoundedButton.d.mts → index.d.mts} +1 -1
- package/dist/IconRoundedButton/{IconRoundedButton.d.ts → index.d.ts} +1 -1
- package/dist/IconRoundedButton/{IconRoundedButton.js → index.js} +3 -5
- package/dist/IconRoundedButton/index.js.map +1 -0
- package/dist/IconRoundedButton/{IconRoundedButton.mjs → index.mjs} +3 -1
- package/dist/IconRoundedButton/index.mjs.map +1 -0
- package/dist/NavButton/{NavButton.d.mts → index.d.mts} +1 -1
- package/dist/NavButton/{NavButton.d.ts → index.d.ts} +1 -1
- package/dist/NavButton/{NavButton.js → index.js} +3 -5
- package/dist/NavButton/index.js.map +1 -0
- package/dist/NavButton/{NavButton.mjs → index.mjs} +3 -1
- package/dist/NavButton/index.mjs.map +1 -0
- package/dist/SelectionButton/{SelectionButton.d.mts → index.d.mts} +1 -1
- package/dist/SelectionButton/{SelectionButton.d.ts → index.d.ts} +1 -1
- package/dist/SelectionButton/{SelectionButton.js → index.js} +3 -5
- package/dist/SelectionButton/index.js.map +1 -0
- package/dist/SelectionButton/{SelectionButton.mjs → index.mjs} +3 -1
- package/dist/SelectionButton/index.mjs.map +1 -0
- package/dist/Table/{Table.d.mts → index.d.mts} +1 -1
- package/dist/Table/{Table.d.ts → index.d.ts} +1 -1
- package/dist/Table/{Table.js → index.js} +4 -3
- package/dist/Table/index.js.map +1 -0
- package/dist/Table/{Table.mjs → index.mjs} +4 -2
- package/dist/Table/index.mjs.map +1 -0
- package/dist/Text/{Text.d.mts → index.d.mts} +1 -1
- package/dist/Text/{Text.d.ts → index.d.ts} +1 -1
- package/dist/Text/{Text.js → index.js} +3 -5
- package/dist/Text/index.js.map +1 -0
- package/dist/{chunk-TT3VCQGR.mjs → Text/index.mjs} +3 -2
- package/dist/Text/index.mjs.map +1 -0
- package/dist/TextArea/{TextArea.d.mts → index.d.mts} +1 -1
- package/dist/TextArea/{TextArea.d.ts → index.d.ts} +1 -1
- package/dist/TextArea/{TextArea.js → index.js} +7 -8
- package/dist/TextArea/index.js.map +1 -0
- package/dist/TextArea/{TextArea.mjs → index.mjs} +62 -10
- package/dist/TextArea/index.mjs.map +1 -0
- package/dist/Toast/{utils/ToastStore.d.mts → ToastStore/index.d.mts} +1 -1
- package/dist/Toast/{utils/ToastStore.d.ts → ToastStore/index.d.ts} +1 -1
- package/dist/Toast/{utils/ToastStore.js → ToastStore/index.js} +3 -5
- package/dist/Toast/ToastStore/index.js.map +1 -0
- package/dist/{chunk-WIOCQOM7.mjs → Toast/ToastStore/index.mjs} +3 -2
- package/dist/Toast/ToastStore/index.mjs.map +1 -0
- package/dist/Toast/{utils/Toaster.d.mts → Toaster/index.d.mts} +2 -2
- package/dist/Toast/{utils/Toaster.d.ts → Toaster/index.d.ts} +2 -2
- package/dist/Toast/{utils/Toaster.js → Toaster/index.js} +10 -7
- package/dist/Toast/Toaster/index.js.map +1 -0
- package/dist/Toast/Toaster/index.mjs +122 -0
- package/dist/Toast/Toaster/index.mjs.map +1 -0
- package/dist/Toast/{Toast.d.mts → index.d.mts} +1 -1
- package/dist/Toast/{Toast.d.ts → index.d.ts} +1 -1
- package/dist/Toast/{Toast.js → index.js} +3 -5
- package/dist/Toast/index.js.map +1 -0
- package/dist/{chunk-XJA5HF7B.mjs → Toast/index.mjs} +5 -2
- package/dist/Toast/index.mjs.map +1 -0
- package/dist/index.css +1 -3
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +18 -507
- package/dist/index.d.ts +18 -507
- package/dist/index.js +157 -141
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +154 -138
- package/dist/index.mjs.map +1 -0
- package/dist/styles.css +1 -3
- package/dist/styles.css.map +1 -0
- package/dist/styles.d.mts +2 -0
- package/dist/styles.d.ts +2 -0
- package/package.json +26 -86
- package/dist/Text/Text.mjs +0 -6
- package/dist/Toast/Toast.mjs +0 -7
- package/dist/Toast/utils/ToastStore.mjs +0 -6
- package/dist/Toast/utils/Toaster.mjs +0 -35
|
@@ -20,14 +20,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/components/Table/Table.tsx
|
|
21
21
|
var Table_exports = {};
|
|
22
22
|
__export(Table_exports, {
|
|
23
|
-
Table: () => Table,
|
|
24
23
|
TableBody: () => TableBody,
|
|
25
24
|
TableCaption: () => TableCaption,
|
|
26
25
|
TableCell: () => TableCell,
|
|
27
26
|
TableFooter: () => TableFooter,
|
|
28
27
|
TableHead: () => TableHead,
|
|
29
28
|
TableHeader: () => TableHeader,
|
|
30
|
-
TableRow: () => TableRow
|
|
29
|
+
TableRow: () => TableRow,
|
|
30
|
+
default: () => Table_default
|
|
31
31
|
});
|
|
32
32
|
module.exports = __toCommonJS(Table_exports);
|
|
33
33
|
var import_react = require("react");
|
|
@@ -126,9 +126,9 @@ var TableCaption = (0, import_react.forwardRef)(({ className, ...props }, ref) =
|
|
|
126
126
|
}
|
|
127
127
|
));
|
|
128
128
|
TableCaption.displayName = "TableCaption";
|
|
129
|
+
var Table_default = Table;
|
|
129
130
|
// Annotate the CommonJS export names for ESM import in node:
|
|
130
131
|
0 && (module.exports = {
|
|
131
|
-
Table,
|
|
132
132
|
TableBody,
|
|
133
133
|
TableCaption,
|
|
134
134
|
TableCell,
|
|
@@ -137,3 +137,4 @@ TableCaption.displayName = "TableCaption";
|
|
|
137
137
|
TableHeader,
|
|
138
138
|
TableRow
|
|
139
139
|
});
|
|
140
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Table/Table.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, TdHTMLAttributes } from 'react';\n\ntype TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';\n\ninterface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n state?: TableRowState;\n}\n\nconst Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(\n ({ className, children, ...props }, ref) => (\n <div className=\"border border-border-200 rounded-xl relative w-full overflow-hidden\">\n <table\n ref={ref}\n className={`w-full caption-bottom text-sm ${className ?? ''}`}\n {...props}\n >\n {/* Fix Sonnar */}\n <caption className=\"sr-only\">My Table</caption>\n {children}\n </table>\n </div>\n )\n);\n\nTable.displayName = 'Table';\n\nconst TableHeader = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <thead\n ref={ref}\n className={`[&_tr:first-child]:border-0 ${className}`}\n {...props}\n />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tbody\n ref={ref}\n className={`[&_tr:last-child]:border-0 border-t border-border-200 ${className}`}\n {...props}\n />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={`border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`}\n {...props}\n />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst VARIANT_STATES_ROW = {\n default: 'border-b border-border-200',\n selected: 'border-b-2 border-indicator-primary',\n invalid: 'border-b-2 border-indicator-error',\n disabled:\n 'border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed',\n} as const;\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ state = 'default', className, ...props }, ref) => {\n return (\n <tr\n ref={ref}\n className={`\n transition-colors\n ${state !== 'disabled' ? 'hover:bg-muted/50' : ''}\n ${VARIANT_STATES_ROW[state]}\n ${className}\n `}\n aria-disabled={state === 'disabled'}\n {...props}\n />\n );\n }\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <th\n ref={ref}\n className={`h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`}\n {...props}\n />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <td\n ref={ref}\n className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = forwardRef<\n HTMLTableCaptionElement,\n HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={`border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`}\n {...props}\n />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport default Table;\nexport {\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6D;AAWvD;AAHN,IAAM,YAAQ;AAAA,EACZ,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAClC,4CAAC,SAAI,WAAU,uEACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,iCAAiC,aAAa,EAAE;AAAA,MAC1D,GAAG;AAAA,MAGJ;AAAA,oDAAC,aAAQ,WAAU,WAAU,sBAAQ;AAAA,QACpC;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,MAAM,cAAc;AAEpB,IAAM,kBAAc,yBAGlB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,+BAA+B,SAAS;AAAA,IAClD,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,gBAAY,yBAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,yDAAyD,SAAS;AAAA,IAC5E,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,kBAAc,yBAGlB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,8FAA8F,SAAS;AAAA,IACjH,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UACE;AACJ;AAEA,IAAM,eAAW;AAAA,EACf,CAAC,EAAE,QAAQ,WAAW,WAAW,GAAG,MAAM,GAAG,QAAQ;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA;AAAA,UAET,UAAU,aAAa,sBAAsB,EAAE;AAAA,UAC/C,mBAAmB,KAAK,CAAC;AAAA,UACzB,SAAS;AAAA;AAAA,QAEX,iBAAe,UAAU;AAAA,QACxB,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAEvB,IAAM,gBAAY,yBAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,mKAAmK,SAAS;AAAA,IACtL,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,gBAAY,yBAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,0HAA0H,SAAS;AAAA,IAC7I,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,mBAAe,yBAGnB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,gEAAgE,SAAS;AAAA,IACnF,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;AAE3B,IAAO,gBAAQ;","names":[]}
|
|
@@ -95,13 +95,15 @@ var TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
95
95
|
}
|
|
96
96
|
));
|
|
97
97
|
TableCaption.displayName = "TableCaption";
|
|
98
|
+
var Table_default = Table;
|
|
98
99
|
export {
|
|
99
|
-
Table,
|
|
100
100
|
TableBody,
|
|
101
101
|
TableCaption,
|
|
102
102
|
TableCell,
|
|
103
103
|
TableFooter,
|
|
104
104
|
TableHead,
|
|
105
105
|
TableHeader,
|
|
106
|
-
TableRow
|
|
106
|
+
TableRow,
|
|
107
|
+
Table_default as default
|
|
107
108
|
};
|
|
109
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Table/Table.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, TdHTMLAttributes } from 'react';\n\ntype TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';\n\ninterface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n state?: TableRowState;\n}\n\nconst Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(\n ({ className, children, ...props }, ref) => (\n <div className=\"border border-border-200 rounded-xl relative w-full overflow-hidden\">\n <table\n ref={ref}\n className={`w-full caption-bottom text-sm ${className ?? ''}`}\n {...props}\n >\n {/* Fix Sonnar */}\n <caption className=\"sr-only\">My Table</caption>\n {children}\n </table>\n </div>\n )\n);\n\nTable.displayName = 'Table';\n\nconst TableHeader = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <thead\n ref={ref}\n className={`[&_tr:first-child]:border-0 ${className}`}\n {...props}\n />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tbody\n ref={ref}\n className={`[&_tr:last-child]:border-0 border-t border-border-200 ${className}`}\n {...props}\n />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = forwardRef<\n HTMLTableSectionElement,\n HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={`border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`}\n {...props}\n />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst VARIANT_STATES_ROW = {\n default: 'border-b border-border-200',\n selected: 'border-b-2 border-indicator-primary',\n invalid: 'border-b-2 border-indicator-error',\n disabled:\n 'border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed',\n} as const;\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ state = 'default', className, ...props }, ref) => {\n return (\n <tr\n ref={ref}\n className={`\n transition-colors\n ${state !== 'disabled' ? 'hover:bg-muted/50' : ''}\n ${VARIANT_STATES_ROW[state]}\n ${className}\n `}\n aria-disabled={state === 'disabled'}\n {...props}\n />\n );\n }\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <th\n ref={ref}\n className={`h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`}\n {...props}\n />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = forwardRef<\n HTMLTableCellElement,\n TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n <td\n ref={ref}\n className={`p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`}\n {...props}\n />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = forwardRef<\n HTMLTableCaptionElement,\n HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={`border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`}\n {...props}\n />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport default Table;\nexport {\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n};\n"],"mappings":";AAAA,SAAS,kBAAoD;AAWvD,SAME,KANF;AAHN,IAAM,QAAQ;AAAA,EACZ,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAClC,oBAAC,SAAI,WAAU,uEACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,iCAAiC,aAAa,EAAE;AAAA,MAC1D,GAAG;AAAA,MAGJ;AAAA,4BAAC,aAAQ,WAAU,WAAU,sBAAQ;AAAA,QACpC;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,MAAM,cAAc;AAEpB,IAAM,cAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,+BAA+B,SAAS;AAAA,IAClD,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,YAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,yDAAyD,SAAS;AAAA,IAC5E,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,cAAc,WAGlB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,8FAA8F,SAAS;AAAA,IACjH,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAE1B,IAAM,qBAAqB;AAAA,EACzB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UACE;AACJ;AAEA,IAAM,WAAW;AAAA,EACf,CAAC,EAAE,QAAQ,WAAW,WAAW,GAAG,MAAM,GAAG,QAAQ;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA;AAAA,UAET,UAAU,aAAa,sBAAsB,EAAE;AAAA,UAC/C,mBAAmB,KAAK,CAAC;AAAA,UACzB,SAAS;AAAA;AAAA,QAEX,iBAAe,UAAU;AAAA,QACxB,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAEvB,IAAM,YAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,mKAAmK,SAAS;AAAA,IACtL,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,YAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,0HAA0H,SAAS;AAAA,IAC7I,GAAG;AAAA;AACN,CACD;AACD,UAAU,cAAc;AAExB,IAAM,eAAe,WAGnB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW,gEAAgE,SAAS;AAAA,IACnF,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;AAE3B,IAAO,gBAAQ;","names":[]}
|
|
@@ -56,4 +56,4 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
|
56
56
|
*/
|
|
57
57
|
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
58
58
|
|
|
59
|
-
export { Text };
|
|
59
|
+
export { Text as default };
|
|
@@ -56,4 +56,4 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
|
56
56
|
*/
|
|
57
57
|
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
58
58
|
|
|
59
|
-
export { Text };
|
|
59
|
+
export { Text as default };
|
|
@@ -20,7 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/components/Text/Text.tsx
|
|
21
21
|
var Text_exports = {};
|
|
22
22
|
__export(Text_exports, {
|
|
23
|
-
|
|
23
|
+
default: () => Text_default
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(Text_exports);
|
|
26
26
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -71,7 +71,5 @@ var Text = ({
|
|
|
71
71
|
}
|
|
72
72
|
);
|
|
73
73
|
};
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
Text
|
|
77
|
-
});
|
|
74
|
+
var Text_default = Text;
|
|
75
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text/Text.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n * Fully compatible with Next.js 15 and React 19.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2HI;AA/CJ,IAAM,OAAO,CAA8B;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAoB;AAClB,MAAI,cAAc;AAClB,MAAI,gBAAgB;AAGpB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,gBAAc,aAAa,IAAI,KAAK,aAAa;AAGjD,QAAM,iBAAiB;AAAA,IACrB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AAEA,kBAAgB,eAAe,MAAM,KAAK,eAAe;AAEzD,QAAM,cAAc;AACpB,QAAM,YAAY,MAAO;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,WAAW,IAAI,WAAW,IAAI,aAAa,IAAI,KAAK,IAAI,SAAS;AAAA,MAC9E,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Text/Text.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n * Fully compatible with Next.js 15 and React 19.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n"],"mappings":";AA2HI;AA/CJ,IAAM,OAAO,CAA8B;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAoB;AAClB,MAAI,cAAc;AAClB,MAAI,gBAAgB;AAGpB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAEA,gBAAc,aAAa,IAAI,KAAK,aAAa;AAGjD,QAAM,iBAAiB;AAAA,IACrB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AAEA,kBAAgB,eAAe,MAAM,KAAK,eAAe;AAEzD,QAAM,cAAc;AACpB,QAAM,YAAY,MAAO;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,WAAW,IAAI,WAAW,IAAI,aAAa,IAAI,KAAK,IAAI,SAAS;AAAA,MAC9E,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}
|
|
@@ -66,4 +66,4 @@ declare const TextArea: react__default.ForwardRefExoticComponent<{
|
|
|
66
66
|
labelClassName?: string;
|
|
67
67
|
} & Omit<react__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & react__default.RefAttributes<HTMLTextAreaElement>>;
|
|
68
68
|
|
|
69
|
-
export {
|
|
69
|
+
export { type TextAreaProps, TextArea as default };
|
|
@@ -66,4 +66,4 @@ declare const TextArea: react__default.ForwardRefExoticComponent<{
|
|
|
66
66
|
labelClassName?: string;
|
|
67
67
|
} & Omit<react__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & react__default.RefAttributes<HTMLTextAreaElement>>;
|
|
68
68
|
|
|
69
|
-
export {
|
|
69
|
+
export { type TextAreaProps, TextArea as default };
|
|
@@ -21,7 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
// src/components/TextArea/TextArea.tsx
|
|
22
22
|
var TextArea_exports = {};
|
|
23
23
|
__export(TextArea_exports, {
|
|
24
|
-
|
|
24
|
+
default: () => TextArea_default
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(TextArea_exports);
|
|
27
27
|
var import_react = require("react");
|
|
@@ -75,6 +75,7 @@ var Text = ({
|
|
|
75
75
|
}
|
|
76
76
|
);
|
|
77
77
|
};
|
|
78
|
+
var Text_default = Text;
|
|
78
79
|
|
|
79
80
|
// src/components/TextArea/TextArea.tsx
|
|
80
81
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
@@ -174,7 +175,7 @@ var TextArea = (0, import_react.forwardRef)(
|
|
|
174
175
|
const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
|
|
175
176
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
|
|
176
177
|
label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
177
|
-
|
|
178
|
+
Text_default,
|
|
178
179
|
{
|
|
179
180
|
as: "label",
|
|
180
181
|
htmlFor: inputId,
|
|
@@ -199,13 +200,11 @@ var TextArea = (0, import_react.forwardRef)(
|
|
|
199
200
|
...props
|
|
200
201
|
}
|
|
201
202
|
),
|
|
202
|
-
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
203
|
-
helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
203
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
|
|
204
|
+
helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
|
|
204
205
|
] });
|
|
205
206
|
}
|
|
206
207
|
);
|
|
207
208
|
TextArea.displayName = "TextArea";
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
TextArea
|
|
211
|
-
});
|
|
209
|
+
var TextArea_default = TextArea;
|
|
210
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n TextareaHTMLAttributes,\n ReactNode,\n forwardRef,\n useState,\n useId,\n ChangeEvent,\n} from 'react';\nimport Text from '../Text/Text';\n\n/**\n * TextArea size variants\n */\ntype TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * TextArea visual state\n */\ntype TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations with exact pixel specifications\n */\nconst SIZE_CLASSES = {\n small: {\n container: 'w-72', // 288px width\n textarea: 'h-24 text-sm', // 96px height, 14px font\n textSize: 'sm' as const,\n },\n medium: {\n container: 'w-72', // 288px width\n textarea: 'h-24 text-base', // 96px height, 16px font\n textSize: 'md' as const,\n },\n large: {\n container: 'w-72', // 288px width\n textarea: 'h-24 text-lg', // 96px height, 18px font\n textSize: 'lg' as const,\n },\n extraLarge: {\n container: 'w-72', // 288px width\n textarea: 'h-24 text-xl', // 96px height, 20px font\n textSize: 'xl' as const,\n },\n} as const;\n\n/**\n * Base textarea styling classes using design system colors\n */\nconst BASE_TEXTAREA_CLASSES =\n 'w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n default: {\n base: 'border-border-300 bg-background text-text-600',\n hover: 'hover:border-border-400',\n focus: 'focus:border-border-500',\n },\n hovered: {\n base: 'border-border-400 bg-background text-text-600',\n hover: '',\n focus: 'focus:border-border-500',\n },\n focused: {\n base: 'border-2 border-primary-950 bg-background text-text-900',\n hover: '',\n focus: '',\n },\n invalid: {\n base: 'border-2 border-red-700 bg-white text-gray-800',\n hover: 'hover:border-red-700',\n focus: 'focus:border-red-700',\n },\n disabled: {\n base: 'border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40',\n hover: '',\n focus: '',\n },\n} as const;\n\n/**\n * TextArea component props interface\n */\nexport type TextAreaProps = {\n /** Label text to display above the textarea */\n label?: ReactNode;\n /** Size variant of the textarea */\n size?: TextAreaSize;\n /** Visual state of the textarea */\n state?: TextAreaState;\n /** Error message to display */\n errorMessage?: string;\n /** Helper text to display */\n helperMessage?: string;\n /** Additional CSS classes */\n className?: string;\n /** Label CSS classes */\n labelClassName?: string;\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;\n\n/**\n * TextArea component for Analytica Ensino platforms\n *\n * A textarea component with essential states, sizes and themes.\n * Uses exact design specifications with 288px width, 96px height, and specific\n * color values. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea label=\"Description\" placeholder=\"Enter description...\" />\n *\n * // Small size\n * <TextArea size=\"small\" label=\"Comment\" />\n *\n * // Invalid state\n * <TextArea state=\"invalid\" label=\"Required field\" errorMessage=\"This field is required\" />\n *\n * // Disabled state\n * <TextArea disabled label=\"Read-only field\" />\n * ```\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n label,\n size = 'medium',\n state = 'default',\n errorMessage,\n helperMessage,\n className = '',\n labelClassName = '',\n disabled,\n id,\n onChange,\n placeholder,\n ...props\n },\n ref\n ) => {\n // Generate unique ID if not provided\n const generatedId = useId();\n const inputId = id ?? `textarea-${generatedId}`;\n\n // Internal state for focus tracking\n const [isFocused, setIsFocused] = useState(false);\n\n // Handle change events\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(event);\n };\n\n // Handle focus events\n const handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n setIsFocused(true);\n props.onFocus?.(event);\n };\n\n // Handle blur events\n const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n setIsFocused(false);\n props.onBlur?.(event);\n };\n\n // Determine current state based on props and focus\n let currentState = disabled ? 'disabled' : state;\n\n // Override state based on focus\n if (\n isFocused &&\n currentState !== 'invalid' &&\n currentState !== 'disabled'\n ) {\n currentState = 'focused';\n }\n\n // Get size classes\n const sizeClasses = SIZE_CLASSES[size];\n\n // Get styling classes\n const stateClasses = STATE_CLASSES[currentState];\n\n // Get final textarea classes\n const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;\n\n return (\n <div className={`flex flex-col ${sizeClasses.container}`}>\n {/* Label */}\n {label && (\n <Text\n as=\"label\"\n htmlFor={inputId}\n size={sizeClasses.textSize}\n weight=\"medium\"\n color=\"text-text-950\"\n className={`mb-1.5 ${labelClassName}`}\n >\n {label}\n </Text>\n )}\n\n {/* Textarea */}\n <textarea\n ref={ref}\n id={inputId}\n disabled={disabled}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className={textareaClasses}\n placeholder={placeholder}\n {...props}\n />\n\n {/* Error message */}\n {errorMessage && (\n <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-error-600\">\n {errorMessage}\n </Text>\n )}\n\n {/* Helper text */}\n {helperMessage && !errorMessage && (\n <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-text-500\">\n {helperMessage}\n </Text>\n )}\n </div>\n );\n }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n * Fully compatible with Next.js 15 and React 19.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
Text
|
|
4
|
-
} from "../chunk-TT3VCQGR.mjs";
|
|
5
2
|
|
|
6
3
|
// src/components/TextArea/TextArea.tsx
|
|
7
4
|
import {
|
|
@@ -9,7 +6,60 @@ import {
|
|
|
9
6
|
useState,
|
|
10
7
|
useId
|
|
11
8
|
} from "react";
|
|
12
|
-
|
|
9
|
+
|
|
10
|
+
// src/components/Text/Text.tsx
|
|
11
|
+
import { jsx } from "react/jsx-runtime";
|
|
12
|
+
var Text = ({
|
|
13
|
+
children,
|
|
14
|
+
size = "md",
|
|
15
|
+
weight = "normal",
|
|
16
|
+
color = "text-text-950",
|
|
17
|
+
as,
|
|
18
|
+
className = "",
|
|
19
|
+
...props
|
|
20
|
+
}) => {
|
|
21
|
+
let sizeClasses = "";
|
|
22
|
+
let weightClasses = "";
|
|
23
|
+
const sizeClassMap = {
|
|
24
|
+
"2xs": "text-2xs",
|
|
25
|
+
xs: "text-xs",
|
|
26
|
+
sm: "text-sm",
|
|
27
|
+
md: "text-md",
|
|
28
|
+
lg: "text-lg",
|
|
29
|
+
xl: "text-xl",
|
|
30
|
+
"2xl": "text-2xl",
|
|
31
|
+
"3xl": "text-3xl",
|
|
32
|
+
"4xl": "text-4xl",
|
|
33
|
+
"5xl": "text-5xl",
|
|
34
|
+
"6xl": "text-6xl"
|
|
35
|
+
};
|
|
36
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
37
|
+
const weightClassMap = {
|
|
38
|
+
hairline: "font-hairline",
|
|
39
|
+
light: "font-light",
|
|
40
|
+
normal: "font-normal",
|
|
41
|
+
medium: "font-medium",
|
|
42
|
+
semibold: "font-semibold",
|
|
43
|
+
bold: "font-bold",
|
|
44
|
+
extrabold: "font-extrabold",
|
|
45
|
+
black: "font-black"
|
|
46
|
+
};
|
|
47
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
48
|
+
const baseClasses = "font-primary";
|
|
49
|
+
const Component = as ?? "p";
|
|
50
|
+
return /* @__PURE__ */ jsx(
|
|
51
|
+
Component,
|
|
52
|
+
{
|
|
53
|
+
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`,
|
|
54
|
+
...props,
|
|
55
|
+
children
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
var Text_default = Text;
|
|
60
|
+
|
|
61
|
+
// src/components/TextArea/TextArea.tsx
|
|
62
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
13
63
|
var SIZE_CLASSES = {
|
|
14
64
|
small: {
|
|
15
65
|
container: "w-72",
|
|
@@ -105,8 +155,8 @@ var TextArea = forwardRef(
|
|
|
105
155
|
const stateClasses = STATE_CLASSES[currentState];
|
|
106
156
|
const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;
|
|
107
157
|
return /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${sizeClasses.container}`, children: [
|
|
108
|
-
label && /* @__PURE__ */
|
|
109
|
-
|
|
158
|
+
label && /* @__PURE__ */ jsx2(
|
|
159
|
+
Text_default,
|
|
110
160
|
{
|
|
111
161
|
as: "label",
|
|
112
162
|
htmlFor: inputId,
|
|
@@ -117,7 +167,7 @@ var TextArea = forwardRef(
|
|
|
117
167
|
children: label
|
|
118
168
|
}
|
|
119
169
|
),
|
|
120
|
-
/* @__PURE__ */
|
|
170
|
+
/* @__PURE__ */ jsx2(
|
|
121
171
|
"textarea",
|
|
122
172
|
{
|
|
123
173
|
ref,
|
|
@@ -131,12 +181,14 @@ var TextArea = forwardRef(
|
|
|
131
181
|
...props
|
|
132
182
|
}
|
|
133
183
|
),
|
|
134
|
-
errorMessage && /* @__PURE__ */
|
|
135
|
-
helperMessage && !errorMessage && /* @__PURE__ */
|
|
184
|
+
errorMessage && /* @__PURE__ */ jsx2(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-error-600", children: errorMessage }),
|
|
185
|
+
helperMessage && !errorMessage && /* @__PURE__ */ jsx2(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
|
|
136
186
|
] });
|
|
137
187
|
}
|
|
138
188
|
);
|
|
139
189
|
TextArea.displayName = "TextArea";
|
|
190
|
+
var TextArea_default = TextArea;
|
|
140
191
|
export {
|
|
141
|
-
|
|
192
|
+
TextArea_default as default
|
|
142
193
|
};
|
|
194
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/TextArea/TextArea.tsx","../../src/components/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n TextareaHTMLAttributes,\n ReactNode,\n forwardRef,\n useState,\n useId,\n ChangeEvent,\n} from 'react';\nimport Text from '../Text/Text';\n\n/**\n * TextArea size variants\n */\ntype TextAreaSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * TextArea visual state\n */\ntype TextAreaState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';\n\n/**\n * Size configurations with exact pixel specifications\n */\nconst SIZE_CLASSES = {\n small: {\n container: 'w-72', // 288px width\n textarea: 'h-24 text-sm', // 96px height, 14px font\n textSize: 'sm' as const,\n },\n medium: {\n container: 'w-72', // 288px width\n textarea: 'h-24 text-base', // 96px height, 16px font\n textSize: 'md' as const,\n },\n large: {\n container: 'w-72', // 288px width\n textarea: 'h-24 text-lg', // 96px height, 18px font\n textSize: 'lg' as const,\n },\n extraLarge: {\n container: 'w-72', // 288px width\n textarea: 'h-24 text-xl', // 96px height, 20px font\n textSize: 'xl' as const,\n },\n} as const;\n\n/**\n * Base textarea styling classes using design system colors\n */\nconst BASE_TEXTAREA_CLASSES =\n 'w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200';\n\n/**\n * State-based styling classes using design system colors from styles.css\n */\nconst STATE_CLASSES = {\n default: {\n base: 'border-border-300 bg-background text-text-600',\n hover: 'hover:border-border-400',\n focus: 'focus:border-border-500',\n },\n hovered: {\n base: 'border-border-400 bg-background text-text-600',\n hover: '',\n focus: 'focus:border-border-500',\n },\n focused: {\n base: 'border-2 border-primary-950 bg-background text-text-900',\n hover: '',\n focus: '',\n },\n invalid: {\n base: 'border-2 border-red-700 bg-white text-gray-800',\n hover: 'hover:border-red-700',\n focus: 'focus:border-red-700',\n },\n disabled: {\n base: 'border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40',\n hover: '',\n focus: '',\n },\n} as const;\n\n/**\n * TextArea component props interface\n */\nexport type TextAreaProps = {\n /** Label text to display above the textarea */\n label?: ReactNode;\n /** Size variant of the textarea */\n size?: TextAreaSize;\n /** Visual state of the textarea */\n state?: TextAreaState;\n /** Error message to display */\n errorMessage?: string;\n /** Helper text to display */\n helperMessage?: string;\n /** Additional CSS classes */\n className?: string;\n /** Label CSS classes */\n labelClassName?: string;\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;\n\n/**\n * TextArea component for Analytica Ensino platforms\n *\n * A textarea component with essential states, sizes and themes.\n * Uses exact design specifications with 288px width, 96px height, and specific\n * color values. Includes Text component integration for consistent typography.\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea label=\"Description\" placeholder=\"Enter description...\" />\n *\n * // Small size\n * <TextArea size=\"small\" label=\"Comment\" />\n *\n * // Invalid state\n * <TextArea state=\"invalid\" label=\"Required field\" errorMessage=\"This field is required\" />\n *\n * // Disabled state\n * <TextArea disabled label=\"Read-only field\" />\n * ```\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n label,\n size = 'medium',\n state = 'default',\n errorMessage,\n helperMessage,\n className = '',\n labelClassName = '',\n disabled,\n id,\n onChange,\n placeholder,\n ...props\n },\n ref\n ) => {\n // Generate unique ID if not provided\n const generatedId = useId();\n const inputId = id ?? `textarea-${generatedId}`;\n\n // Internal state for focus tracking\n const [isFocused, setIsFocused] = useState(false);\n\n // Handle change events\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(event);\n };\n\n // Handle focus events\n const handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n setIsFocused(true);\n props.onFocus?.(event);\n };\n\n // Handle blur events\n const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n setIsFocused(false);\n props.onBlur?.(event);\n };\n\n // Determine current state based on props and focus\n let currentState = disabled ? 'disabled' : state;\n\n // Override state based on focus\n if (\n isFocused &&\n currentState !== 'invalid' &&\n currentState !== 'disabled'\n ) {\n currentState = 'focused';\n }\n\n // Get size classes\n const sizeClasses = SIZE_CLASSES[size];\n\n // Get styling classes\n const stateClasses = STATE_CLASSES[currentState];\n\n // Get final textarea classes\n const textareaClasses = `${BASE_TEXTAREA_CLASSES} ${sizeClasses.textarea} ${stateClasses.base} ${stateClasses.hover} ${stateClasses.focus} ${className}`;\n\n return (\n <div className={`flex flex-col ${sizeClasses.container}`}>\n {/* Label */}\n {label && (\n <Text\n as=\"label\"\n htmlFor={inputId}\n size={sizeClasses.textSize}\n weight=\"medium\"\n color=\"text-text-950\"\n className={`mb-1.5 ${labelClassName}`}\n >\n {label}\n </Text>\n )}\n\n {/* Textarea */}\n <textarea\n ref={ref}\n id={inputId}\n disabled={disabled}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className={textareaClasses}\n placeholder={placeholder}\n {...props}\n />\n\n {/* Error message */}\n {errorMessage && (\n <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-error-600\">\n {errorMessage}\n </Text>\n )}\n\n {/* Helper text */}\n {helperMessage && !errorMessage && (\n <Text size=\"sm\" weight=\"normal\" className=\"mt-1.5 text-text-500\">\n {helperMessage}\n </Text>\n )}\n </div>\n );\n }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n * Fully compatible with Next.js 15 and React 19.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={`${baseClasses} ${sizeClasses} ${weightClasses} ${color} ${className}`}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n"],"mappings":"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","names":["jsx"]}
|
|
@@ -20,7 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/components/Toast/utils/ToastStore.ts
|
|
21
21
|
var ToastStore_exports = {};
|
|
22
22
|
__export(ToastStore_exports, {
|
|
23
|
-
|
|
23
|
+
default: () => ToastStore_default
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(ToastStore_exports);
|
|
26
26
|
var import_zustand = require("zustand");
|
|
@@ -38,7 +38,5 @@ var useToastStore = (0, import_zustand.create)((set) => ({
|
|
|
38
38
|
}));
|
|
39
39
|
}
|
|
40
40
|
}));
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
useToastStore
|
|
44
|
-
});
|
|
41
|
+
var ToastStore_default = useToastStore;
|
|
42
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Toast/utils/ToastStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastData = {\n id: string;\n title: string;\n description?: string;\n variant?: 'solid' | 'outlined';\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n};\n\ntype ToastStore = {\n toasts: ToastData[];\n addToast: (toast: Omit<ToastData, 'id'>) => void;\n removeToast: (id: string) => void;\n};\n\nconst useToastStore = create<ToastStore>((set) => ({\n toasts: [],\n addToast: (toast) => {\n const id = crypto.randomUUID();\n\n set((state) => ({\n toasts: [...state.toasts, { id, ...toast }],\n }));\n },\n removeToast: (id) => {\n set((state) => ({\n toasts: state.toasts.filter((t) => t.id !== id),\n }));\n },\n}));\n\nexport default useToastStore;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAuB;AA0BvB,IAAM,oBAAgB,uBAAmB,CAAC,SAAS;AAAA,EACjD,QAAQ,CAAC;AAAA,EACT,UAAU,CAAC,UAAU;AACnB,UAAM,KAAK,OAAO,WAAW;AAE7B,QAAI,CAAC,WAAW;AAAA,MACd,QAAQ,CAAC,GAAG,MAAM,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC;AAAA,IAC5C,EAAE;AAAA,EACJ;AAAA,EACA,aAAa,CAAC,OAAO;AACnB,QAAI,CAAC,WAAW;AAAA,MACd,QAAQ,MAAM,OAAO,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE;AAAA,IAChD,EAAE;AAAA,EACJ;AACF,EAAE;AAEF,IAAO,qBAAQ;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Toast/utils/ToastStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastData = {\n id: string;\n title: string;\n description?: string;\n variant?: 'solid' | 'outlined';\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n};\n\ntype ToastStore = {\n toasts: ToastData[];\n addToast: (toast: Omit<ToastData, 'id'>) => void;\n removeToast: (id: string) => void;\n};\n\nconst useToastStore = create<ToastStore>((set) => ({\n toasts: [],\n addToast: (toast) => {\n const id = crypto.randomUUID();\n\n set((state) => ({\n toasts: [...state.toasts, { id, ...toast }],\n }));\n },\n removeToast: (id) => {\n set((state) => ({\n toasts: state.toasts.filter((t) => t.id !== id),\n }));\n },\n}));\n\nexport default useToastStore;\n"],"mappings":";AAAA,SAAS,cAAc;AA0BvB,IAAM,gBAAgB,OAAmB,CAAC,SAAS;AAAA,EACjD,QAAQ,CAAC;AAAA,EACT,UAAU,CAAC,UAAU;AACnB,UAAM,KAAK,OAAO,WAAW;AAE7B,QAAI,CAAC,WAAW;AAAA,MACd,QAAQ,CAAC,GAAG,MAAM,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC;AAAA,IAC5C,EAAE;AAAA,EACJ;AAAA,EACA,aAAa,CAAC,OAAO;AACnB,QAAI,CAAC,WAAW;AAAA,MACd,QAAQ,MAAM,OAAO,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE;AAAA,IAChD,EAAE;AAAA,EACJ;AACF,EAAE;AAEF,IAAO,qBAAQ;","names":[]}
|
|
@@ -8,9 +8,9 @@ declare const useToast: () => {
|
|
|
8
8
|
description?: string;
|
|
9
9
|
variant?: "solid" | "outlined";
|
|
10
10
|
action?: "warning" | "success" | "info";
|
|
11
|
-
position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
|
|
11
|
+
position?: "default" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
12
12
|
}, "id">) => void;
|
|
13
13
|
removeToast: (id: string) => void;
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
-
export { Toaster, useToast };
|
|
16
|
+
export { Toaster as default, useToast };
|
|
@@ -8,9 +8,9 @@ declare const useToast: () => {
|
|
|
8
8
|
description?: string;
|
|
9
9
|
variant?: "solid" | "outlined";
|
|
10
10
|
action?: "warning" | "success" | "info";
|
|
11
|
-
position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
|
|
11
|
+
position?: "default" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
12
12
|
}, "id">) => void;
|
|
13
13
|
removeToast: (id: string) => void;
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
-
export { Toaster, useToast };
|
|
16
|
+
export { Toaster as default, useToast };
|
|
@@ -21,7 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
// src/components/Toast/utils/Toaster.tsx
|
|
22
22
|
var Toaster_exports = {};
|
|
23
23
|
__export(Toaster_exports, {
|
|
24
|
-
|
|
24
|
+
default: () => Toaster_default,
|
|
25
25
|
useToast: () => useToast
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(Toaster_exports);
|
|
@@ -42,6 +42,7 @@ var useToastStore = (0, import_zustand.create)((set) => ({
|
|
|
42
42
|
}));
|
|
43
43
|
}
|
|
44
44
|
}));
|
|
45
|
+
var ToastStore_default = useToastStore;
|
|
45
46
|
|
|
46
47
|
// src/components/Toast/Toast.tsx
|
|
47
48
|
var import_phosphor_react = require("phosphor-react");
|
|
@@ -114,14 +115,15 @@ var Toast = ({
|
|
|
114
115
|
}
|
|
115
116
|
);
|
|
116
117
|
};
|
|
118
|
+
var Toast_default = Toast;
|
|
117
119
|
|
|
118
120
|
// src/components/Toast/utils/Toaster.tsx
|
|
119
121
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
120
122
|
var Toaster = () => {
|
|
121
|
-
const toasts =
|
|
122
|
-
const removeToast =
|
|
123
|
+
const toasts = ToastStore_default((state) => state.toasts);
|
|
124
|
+
const removeToast = ToastStore_default((state) => state.removeToast);
|
|
123
125
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
124
|
-
|
|
126
|
+
Toast_default,
|
|
125
127
|
{
|
|
126
128
|
title: toast.title,
|
|
127
129
|
description: toast.description,
|
|
@@ -134,12 +136,13 @@ var Toaster = () => {
|
|
|
134
136
|
)) });
|
|
135
137
|
};
|
|
136
138
|
var useToast = () => {
|
|
137
|
-
const addToast =
|
|
138
|
-
const removeToast =
|
|
139
|
+
const addToast = ToastStore_default((state) => state.addToast);
|
|
140
|
+
const removeToast = ToastStore_default((state) => state.removeToast);
|
|
139
141
|
return { addToast, removeToast };
|
|
140
142
|
};
|
|
143
|
+
var Toaster_default = Toaster;
|
|
141
144
|
// Annotate the CommonJS export names for ESM import in node:
|
|
142
145
|
0 && (module.exports = {
|
|
143
|
-
Toaster,
|
|
144
146
|
useToast
|
|
145
147
|
});
|
|
148
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Toast/utils/Toaster.tsx","../../../src/components/Toast/utils/ToastStore.ts","../../../src/components/Toast/Toast.tsx"],"sourcesContent":["'use client';\n\nimport useToastStore from './ToastStore';\nimport Toast from '../Toast';\n\nconst Toaster = () => {\n const toasts = useToastStore((state) => state.toasts);\n const removeToast = useToastStore((state) => state.removeToast);\n\n return (\n <>\n {toasts.map((toast) => (\n <Toast\n key={toast.id}\n title={toast.title}\n description={toast.description}\n variant={toast.variant}\n action={toast.action}\n position={toast.position}\n onClose={() => removeToast(toast.id)}\n />\n ))}\n </>\n );\n};\n\nexport const useToast = () => {\n const addToast = useToastStore((state) => state.addToast);\n const removeToast = useToastStore((state) => state.removeToast);\n\n return { addToast, removeToast };\n};\n\nexport default Toaster;\n","import { create } from 'zustand';\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastData = {\n id: string;\n title: string;\n description?: string;\n variant?: 'solid' | 'outlined';\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n};\n\ntype ToastStore = {\n toasts: ToastData[];\n addToast: (toast: Omit<ToastData, 'id'>) => void;\n removeToast: (id: string) => void;\n};\n\nconst useToastStore = create<ToastStore>((set) => ({\n toasts: [],\n addToast: (toast) => {\n const id = crypto.randomUUID();\n\n set((state) => ({\n toasts: [...state.toasts, { id, ...toast }],\n }));\n },\n removeToast: (id) => {\n set((state) => ({\n toasts: state.toasts.filter((t) => t.id !== id),\n }));\n },\n}));\n\nexport default useToastStore;\n","'use client';\n\nimport { HTMLAttributes } from 'react';\nimport { CheckCircle, WarningCircle, Info, X } from 'phosphor-react';\n\n/**\n * Lookup table for variant and action class combinations\n */\nconst VARIANT_ACTION_CLASSES = {\n solid: {\n warning:\n 'bg-warning text-warning-600 border-none focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border-none focus-visible:outline-none',\n info: 'bg-info text-info-600 border-none focus-visible:outline-none',\n },\n outlined: {\n warning:\n 'bg-warning text-warning-600 border border-warning-300 focus-visible:outline-none',\n success:\n 'bg-success text-success-800 border border-success-200 focus-visible:outline-none',\n info: 'bg-info text-info-600 border border-info-600 focus-visible:outline-none',\n },\n} as const;\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'default';\n\ntype ToastProps = {\n title: string;\n description?: string;\n onClose: () => void;\n /** Visual variant of the badge */\n variant?: 'solid' | 'outlined';\n /** Action type of the badge */\n action?: 'warning' | 'success' | 'info';\n position?: ToastPosition;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst iconMap = {\n success: CheckCircle,\n info: Info,\n warning: WarningCircle,\n};\n\nconst Toast = ({\n variant = 'outlined',\n action = 'success',\n className = '',\n onClose,\n title,\n description,\n position = 'default',\n ...props\n}: ToastProps) => {\n // Get classes from lookup tables\n const variantClasses = VARIANT_ACTION_CLASSES[variant][action];\n\n const positionClasses: Record<ToastPosition, string> = {\n 'top-left': 'fixed top-4 left-4',\n 'top-center': 'fixed top-4 left-1/2 transform -translate-x-1/2',\n 'top-right': 'fixed top-4 right-4',\n 'bottom-left': 'fixed bottom-4 left-4',\n 'bottom-center': 'fixed bottom-4 left-1/2 transform -translate-x-1/2',\n 'bottom-right': 'fixed bottom-4 right-4',\n default: '',\n };\n\n const IconAction = iconMap[action] || iconMap['success'];\n\n const baseClasses =\n 'max-w-[390px] w-full flex flex-row items-start justify-between shadow-lg rounded-lg border p-4 gap-6 group';\n\n return (\n <div\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n className={`${baseClasses} ${positionClasses[position]} ${variantClasses} ${className}`}\n {...props}\n >\n <div className=\"flex flex-row items-start gap-3\">\n <span className=\"mt-1\" data-testid={`toast-icon-${action}`}>\n <IconAction />\n </span>\n <div className=\"flex flex-col items-start justify-start\">\n <p className=\"font-semibold text-md\">{title}</p>\n {description && (\n <p className=\"text-md text-text-900\">{description}</p>\n )}\n </div>\n </div>\n <button\n onClick={onClose}\n aria-label=\"Dismiss notification\"\n className=\"text-background-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity\"\n >\n <X />\n </button>\n </div>\n );\n};\n\nexport default Toast;\n"],"mappings":"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","names":["import_jsx_runtime"]}
|