@mindlogic-ai/logician-ui 3.1.0-alpha.3 → 3.1.0-alpha.4

package/dist/components/FileInput/FileInput.js

@@ -22,7 +22,7 @@ const FileInput = React.forwardRef(({ fileInputLabel, containerStyle = {}, bgIma
     const handleChange = (event) => {
         onChange(event.currentTarget.files);
     };
-    return (jsxRuntime.jsx(react.Flex, { role: "button", w: "100%", h: "100%", maxH: 32, flexDir: "column", align: "center", justify: "center", border: "1px dashed", borderColor: "border.default", position: "relative", overflow: "hidden", borderRadius: "md", ...containerStyle, children: jsxRuntime.jsxs("label", { role: "group", style: { width: '100%', height: '100%', cursor: 'pointer' }, children: [bgImage && (jsxRuntime.jsx(react.Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", backgroundImage: bgImage, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(50%) brightness(80%)", zIndex: "-1" })), jsxRuntime.jsx(react.Input, { type: "file", hidden: true, ref: ref, onChange: handleChange, ...rest }), jsxRuntime.jsx(react.Flex, { w: "100%", h: "100%", p: 7, flexDir: "column", justify: "center", align: "center", bgColor: "rgba(255, 255, 255, 0.85)", opacity: bgImage ? 0 : 1, transition: "ease-in", _groupHover: { opacity: 1 }, children: isLoading ? (jsxRuntime.jsx(Spinner.Spinner, {})) : (jsxRuntime.jsxs(react.Flex, { w: "100%", flexDir: "column", align: "center", justify: "center", children: [jsxRuntime.jsx(react.Box, { borderRadius: "lg", bgColor: bgImage ? 'transparent' : 'bg.muted', p: 3, mb: 2, w: "fit-content", children: jsxRuntime.jsx(index.LuUpload, { color: bgImage ? 'fg.default' : 'fg.subtle' }) }), jsxRuntime.jsx(Text.Text, { color: bgImage ? 'fg.default' : 'fg.subtle', children: fileInputLabel || translate('upload_your_file') })] })) })] }) }));
+    return (jsxRuntime.jsx(react.Flex, { role: "button", w: "100%", h: "100%", maxH: 32, flexDir: "column", align: "center", justify: "center", border: "1px dashed", borderColor: "border.default", position: "relative", overflow: "hidden", borderRadius: "md", ...containerStyle, children: jsxRuntime.jsxs("label", { role: "group", style: { width: '100%', height: '100%', cursor: 'pointer' }, children: [bgImage && (jsxRuntime.jsx(react.Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", backgroundImage: bgImage, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(50%) brightness(80%)", zIndex: "-1" })), jsxRuntime.jsx(react.Input, { type: "file", hidden: true, ref: ref, onChange: handleChange, ...rest }), jsxRuntime.jsx(react.Flex, { w: "100%", h: "100%", p: 7, flexDir: "column", justify: "center", align: "center", bgColor: "color-mix(in srgb, var(--chakra-colors-bg-surface) 85%, transparent)", opacity: bgImage ? 0 : 1, transition: "ease-in", _groupHover: { opacity: 1 }, children: isLoading ? (jsxRuntime.jsx(Spinner.Spinner, {})) : (jsxRuntime.jsxs(react.Flex, { w: "100%", flexDir: "column", align: "center", justify: "center", children: [jsxRuntime.jsx(react.Box, { borderRadius: "lg", bgColor: bgImage ? 'transparent' : 'bg.muted', p: 3, mb: 2, w: "fit-content", children: jsxRuntime.jsx(index.LuUpload, { color: bgImage ? 'fg.default' : 'fg.subtle' }) }), jsxRuntime.jsx(Text.Text, { color: bgImage ? 'fg.default' : 'fg.subtle', children: fileInputLabel || translate('upload_your_file') })] })) })] }) }));
 });
 FileInput.displayName = 'FileInput';
 

package/dist/components/FileInput/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":[null],"names":["forwardRef","useTranslate","_jsx","Flex","_jsxs","Box","Input","Spinner","LuUpload","Text"],"mappings":"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"}
+{"version":3,"file":"FileInput.js","sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":[null],"names":["forwardRef","useTranslate","_jsx","Flex","_jsxs","Box","Input","Spinner","LuUpload","Text"],"mappings":"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"}

package/dist/components/FileInput/FileInput.mjs

@@ -20,7 +20,7 @@ const FileInput = forwardRef(({ fileInputLabel, containerStyle = {}, bgImage, on
     const handleChange = (event) => {
         onChange(event.currentTarget.files);
     };
-    return (jsx(Flex, { role: "button", w: "100%", h: "100%", maxH: 32, flexDir: "column", align: "center", justify: "center", border: "1px dashed", borderColor: "border.default", position: "relative", overflow: "hidden", borderRadius: "md", ...containerStyle, children: jsxs("label", { role: "group", style: { width: '100%', height: '100%', cursor: 'pointer' }, children: [bgImage && (jsx(Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", backgroundImage: bgImage, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(50%) brightness(80%)", zIndex: "-1" })), jsx(Input, { type: "file", hidden: true, ref: ref, onChange: handleChange, ...rest }), jsx(Flex, { w: "100%", h: "100%", p: 7, flexDir: "column", justify: "center", align: "center", bgColor: "rgba(255, 255, 255, 0.85)", opacity: bgImage ? 0 : 1, transition: "ease-in", _groupHover: { opacity: 1 }, children: isLoading ? (jsx(Spinner, {})) : (jsxs(Flex, { w: "100%", flexDir: "column", align: "center", justify: "center", children: [jsx(Box, { borderRadius: "lg", bgColor: bgImage ? 'transparent' : 'bg.muted', p: 3, mb: 2, w: "fit-content", children: jsx(LuUpload, { color: bgImage ? 'fg.default' : 'fg.subtle' }) }), jsx(Text, { color: bgImage ? 'fg.default' : 'fg.subtle', children: fileInputLabel || translate('upload_your_file') })] })) })] }) }));
+    return (jsx(Flex, { role: "button", w: "100%", h: "100%", maxH: 32, flexDir: "column", align: "center", justify: "center", border: "1px dashed", borderColor: "border.default", position: "relative", overflow: "hidden", borderRadius: "md", ...containerStyle, children: jsxs("label", { role: "group", style: { width: '100%', height: '100%', cursor: 'pointer' }, children: [bgImage && (jsx(Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", backgroundImage: bgImage, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(50%) brightness(80%)", zIndex: "-1" })), jsx(Input, { type: "file", hidden: true, ref: ref, onChange: handleChange, ...rest }), jsx(Flex, { w: "100%", h: "100%", p: 7, flexDir: "column", justify: "center", align: "center", bgColor: "color-mix(in srgb, var(--chakra-colors-bg-surface) 85%, transparent)", opacity: bgImage ? 0 : 1, transition: "ease-in", _groupHover: { opacity: 1 }, children: isLoading ? (jsx(Spinner, {})) : (jsxs(Flex, { w: "100%", flexDir: "column", align: "center", justify: "center", children: [jsx(Box, { borderRadius: "lg", bgColor: bgImage ? 'transparent' : 'bg.muted', p: 3, mb: 2, w: "fit-content", children: jsx(LuUpload, { color: bgImage ? 'fg.default' : 'fg.subtle' }) }), jsx(Text, { color: bgImage ? 'fg.default' : 'fg.subtle', children: fileInputLabel || translate('upload_your_file') })] })) })] }) }));
 });
 FileInput.displayName = 'FileInput';
 

package/dist/components/FileInput/FileInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.mjs","sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"FileInput.mjs","sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/LineGraph/LineGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineGraph.d.ts","sourceRoot":"","sources":["../../../src/components/LineGraph/LineGraph.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE9D,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,SAAS,EAAE,4CAK5C,cAAc,CAAC,CAAC,CAAC,4CAuEnB,CAAC"}
+{"version":3,"file":"LineGraph.d.ts","sourceRoot":"","sources":["../../../src/components/LineGraph/LineGraph.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE9D,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,SAAS,EAAE,4CAK5C,cAAc,CAAC,CAAC,CAAC,4CAyEnB,CAAC"}

package/dist/components/LineGraph/LineGraph.js

@@ -37,11 +37,15 @@ const LineGraph = ({ data = [], dataKeys, displayLegend = true, ...rest }) => {
                             fill: 'var(--chakra-colors-fg-muted)',
                             fontSize: `${react.useToken('fontSizes', 'sm')}`,
                         }, tickMargin: 0 }), jsxRuntime.jsx(recharts.Tooltip
-                    // invert label color since mode inside tooltip is different
+                    // The tooltip surface stays light in both modes, so the label keeps
+                    // a fixed near-black. Must be a CSS var, not 'gray.1500' — recharts
+                    // won't resolve Chakra tokens (see XAxis/YAxis above).
                     , { 
-                        // invert label color since mode inside tooltip is different
+                        // The tooltip surface stays light in both modes, so the label keeps
+                        // a fixed near-black. Must be a CSS var, not 'gray.1500' — recharts
+                        // won't resolve Chakra tokens (see XAxis/YAxis above).
                         labelStyle: {
-                            color: 'gray.1500',
+                            color: 'var(--chakra-colors-gray-1500)',
                         } }), displayLegend && (jsxRuntime.jsx(recharts.Legend, { wrapperStyle: {
                             bottom: -16,
                         } })), dataKeys.map(({ key, label, color }) => (jsxRuntime.jsx(recharts.Line, { type: "monotone", dataKey: key, name: label, stroke: color ?? primaryColor, dot: { r: 0 } }, `line-${key}`)))] }) }) }));

package/dist/components/LineGraph/LineGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineGraph.js","sources":["../../../src/components/LineGraph/LineGraph.tsx"],"sourcesContent":[null],"names":["useToken","_jsx","Box","ResponsiveContainer","_jsxs","LineChart","CartesianGrid","XAxis","YAxis","Tooltip","Legend","Line"],"mappings":";;;;;;;MAca,SAAS,GAAG,CAAsB,EAC7C,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,aAAa,GAAG,IAAI,EACpB,GAAG,IAAI,EACW,KAAI;IACtB,MAAM,YAAY,GAAGA,cAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;AAC1D,IAAA,QACEC,cAAA,CAACC,SAAG,EAAA,EAAC,CAAC,EAAC,OAAO,EAAA,GAAK,IAAI,EAAA,QAAA,EACrBD,cAAA,CAACE,4BAAmB,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,QAAA,EAC7CC,eAAA,CAACC,kBAAS,EAAA,EACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE;AACN,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA,EAAA,QAAA,EAAA,CAEDJ,eAACK;;;;AAEC,wBAAA,eAAe,EAAC,EAAE,EAClB,QAAQ,EAAE,KAAK;;;wBAGf,MAAM,EAAC,qCAAqC,EAAA,CAC5C,EACFL,eAACM,cAAK,EAAA,EACJ,OAAO,EAAC,MAAM;;AAEd,wBAAA,MAAM,EAAC,aAAa;;;AAGpB,wBAAA,IAAI,EAAE;AACJ,4BAAA,IAAI,EAAE,+BAA+B;4BACrC,QAAQ,EAAE,GAAGP,cAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA,CAAE;AAC3C,yBAAA,EACD,UAAU,EAAE,CAAC,EAAA,CACb,EACFC,eAACO;;;;AAEC,wBAAA,MAAM,EAAC,aAAa;;AAEpB,wBAAA,IAAI,EAAE;AACJ,4BAAA,IAAI,EAAE,+BAA+B;4BACrC,QAAQ,EAAE,GAAGR,cAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA,CAAE;AAC3C,yBAAA,EACD,UAAU,EAAE,CAAC,EAAA,CACb,EACFC,eAACQ;;;;AAEC,wBAAA,UAAU,EAAE;AACV,4BAAA,KAAK,EAAE,WAAW;yBACnB,EAAA,CACD,EACD,aAAa,KACZR,eAACS,eAAM,EAAA,EACL,YAAY,EAAE;4BACZ,MAAM,EAAE,GAAG;yBACZ,EAAA,CACD,CACH,EACA,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAClCT,cAAA,CAACU,aAAI,EAAA,EAEH,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EACZ,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,KAAK,IAAI,YAAY,EAC7B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAA,EALR,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAMlB,CACH,CAAC,CAAA,EAAA,CACQ,EAAA,CACQ,EAAA,CAClB;AAEV;;;;"}
+{"version":3,"file":"LineGraph.js","sources":["../../../src/components/LineGraph/LineGraph.tsx"],"sourcesContent":[null],"names":["useToken","_jsx","Box","ResponsiveContainer","_jsxs","LineChart","CartesianGrid","XAxis","YAxis","Tooltip","Legend","Line"],"mappings":";;;;;;;MAca,SAAS,GAAG,CAAsB,EAC7C,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,aAAa,GAAG,IAAI,EACpB,GAAG,IAAI,EACW,KAAI;IACtB,MAAM,YAAY,GAAGA,cAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;AAC1D,IAAA,QACEC,cAAA,CAACC,SAAG,EAAA,EAAC,CAAC,EAAC,OAAO,EAAA,GAAK,IAAI,EAAA,QAAA,EACrBD,cAAA,CAACE,4BAAmB,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,QAAA,EAC7CC,eAAA,CAACC,kBAAS,EAAA,EACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE;AACN,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA,EAAA,QAAA,EAAA,CAEDJ,eAACK;;;;AAEC,wBAAA,eAAe,EAAC,EAAE,EAClB,QAAQ,EAAE,KAAK;;;wBAGf,MAAM,EAAC,qCAAqC,EAAA,CAC5C,EACFL,eAACM,cAAK,EAAA,EACJ,OAAO,EAAC,MAAM;;AAEd,wBAAA,MAAM,EAAC,aAAa;;;AAGpB,wBAAA,IAAI,EAAE;AACJ,4BAAA,IAAI,EAAE,+BAA+B;4BACrC,QAAQ,EAAE,GAAGP,cAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA,CAAE;AAC3C,yBAAA,EACD,UAAU,EAAE,CAAC,EAAA,CACb,EACFC,eAACO;;;;AAEC,wBAAA,MAAM,EAAC,aAAa;;AAEpB,wBAAA,IAAI,EAAE;AACJ,4BAAA,IAAI,EAAE,+BAA+B;4BACrC,QAAQ,EAAE,GAAGR,cAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA,CAAE;AAC3C,yBAAA,EACD,UAAU,EAAE,CAAC,EAAA,CACb,EACFC,eAACQ;;;;;;;;AAIC,wBAAA,UAAU,EAAE;AACV,4BAAA,KAAK,EAAE,gCAAgC;yBACxC,EAAA,CACD,EACD,aAAa,KACZR,eAACS,eAAM,EAAA,EACL,YAAY,EAAE;4BACZ,MAAM,EAAE,GAAG;yBACZ,EAAA,CACD,CACH,EACA,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAClCT,cAAA,CAACU,aAAI,EAAA,EAEH,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EACZ,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,KAAK,IAAI,YAAY,EAC7B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAA,EALR,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAMlB,CACH,CAAC,CAAA,EAAA,CACQ,EAAA,CACQ,EAAA,CAClB;AAEV;;;;"}

package/dist/components/LineGraph/LineGraph.mjs

@@ -35,11 +35,15 @@ const LineGraph = ({ data = [], dataKeys, displayLegend = true, ...rest }) => {
                             fill: 'var(--chakra-colors-fg-muted)',
                             fontSize: `${useToken('fontSizes', 'sm')}`,
                         }, tickMargin: 0 }), jsx(Tooltip
-                    // invert label color since mode inside tooltip is different
+                    // The tooltip surface stays light in both modes, so the label keeps
+                    // a fixed near-black. Must be a CSS var, not 'gray.1500' — recharts
+                    // won't resolve Chakra tokens (see XAxis/YAxis above).
                     , { 
-                        // invert label color since mode inside tooltip is different
+                        // The tooltip surface stays light in both modes, so the label keeps
+                        // a fixed near-black. Must be a CSS var, not 'gray.1500' — recharts
+                        // won't resolve Chakra tokens (see XAxis/YAxis above).
                         labelStyle: {
-                            color: 'gray.1500',
+                            color: 'var(--chakra-colors-gray-1500)',
                         } }), displayLegend && (jsx(Legend, { wrapperStyle: {
                             bottom: -16,
                         } })), dataKeys.map(({ key, label, color }) => (jsx(Line, { type: "monotone", dataKey: key, name: label, stroke: color ?? primaryColor, dot: { r: 0 } }, `line-${key}`)))] }) }) }));

package/dist/components/LineGraph/LineGraph.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LineGraph.mjs","sources":["../../../src/components/LineGraph/LineGraph.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;MAca,SAAS,GAAG,CAAsB,EAC7C,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,aAAa,GAAG,IAAI,EACpB,GAAG,IAAI,EACW,KAAI;IACtB,MAAM,YAAY,GAAG,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;AAC1D,IAAA,QACEA,GAAA,CAAC,GAAG,EAAA,EAAC,CAAC,EAAC,OAAO,EAAA,GAAK,IAAI,EAAA,QAAA,EACrBA,GAAA,CAAC,mBAAmB,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,QAAA,EAC7CC,IAAA,CAAC,SAAS,EAAA,EACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE;AACN,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA,EAAA,QAAA,EAAA,CAEDD,IAAC;;;;AAEC,wBAAA,eAAe,EAAC,EAAE,EAClB,QAAQ,EAAE,KAAK;;;wBAGf,MAAM,EAAC,qCAAqC,EAAA,CAC5C,EACFA,IAAC,KAAK,EAAA,EACJ,OAAO,EAAC,MAAM;;AAEd,wBAAA,MAAM,EAAC,aAAa;;;AAGpB,wBAAA,IAAI,EAAE;AACJ,4BAAA,IAAI,EAAE,+BAA+B;4BACrC,QAAQ,EAAE,GAAG,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA,CAAE;AAC3C,yBAAA,EACD,UAAU,EAAE,CAAC,EAAA,CACb,EACFA,IAAC;;;;AAEC,wBAAA,MAAM,EAAC,aAAa;;AAEpB,wBAAA,IAAI,EAAE;AACJ,4BAAA,IAAI,EAAE,+BAA+B;4BACrC,QAAQ,EAAE,GAAG,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA,CAAE;AAC3C,yBAAA,EACD,UAAU,EAAE,CAAC,EAAA,CACb,EACFA,IAAC;;;;AAEC,wBAAA,UAAU,EAAE;AACV,4BAAA,KAAK,EAAE,WAAW;yBACnB,EAAA,CACD,EACD,aAAa,KACZA,IAAC,MAAM,EAAA,EACL,YAAY,EAAE;4BACZ,MAAM,EAAE,GAAG;yBACZ,EAAA,CACD,CACH,EACA,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAClCA,GAAA,CAAC,IAAI,EAAA,EAEH,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EACZ,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,KAAK,IAAI,YAAY,EAC7B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAA,EALR,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAMlB,CACH,CAAC,CAAA,EAAA,CACQ,EAAA,CACQ,EAAA,CAClB;AAEV;;;;"}
+{"version":3,"file":"LineGraph.mjs","sources":["../../../src/components/LineGraph/LineGraph.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;MAca,SAAS,GAAG,CAAsB,EAC7C,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,aAAa,GAAG,IAAI,EACpB,GAAG,IAAI,EACW,KAAI;IACtB,MAAM,YAAY,GAAG,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;AAC1D,IAAA,QACEA,GAAA,CAAC,GAAG,EAAA,EAAC,CAAC,EAAC,OAAO,EAAA,GAAK,IAAI,EAAA,QAAA,EACrBA,GAAA,CAAC,mBAAmB,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,QAAA,EAC7CC,IAAA,CAAC,SAAS,EAAA,EACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE;AACN,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA,EAAA,QAAA,EAAA,CAEDD,IAAC;;;;AAEC,wBAAA,eAAe,EAAC,EAAE,EAClB,QAAQ,EAAE,KAAK;;;wBAGf,MAAM,EAAC,qCAAqC,EAAA,CAC5C,EACFA,IAAC,KAAK,EAAA,EACJ,OAAO,EAAC,MAAM;;AAEd,wBAAA,MAAM,EAAC,aAAa;;;AAGpB,wBAAA,IAAI,EAAE;AACJ,4BAAA,IAAI,EAAE,+BAA+B;4BACrC,QAAQ,EAAE,GAAG,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA,CAAE;AAC3C,yBAAA,EACD,UAAU,EAAE,CAAC,EAAA,CACb,EACFA,IAAC;;;;AAEC,wBAAA,MAAM,EAAC,aAAa;;AAEpB,wBAAA,IAAI,EAAE;AACJ,4BAAA,IAAI,EAAE,+BAA+B;4BACrC,QAAQ,EAAE,GAAG,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA,CAAE;AAC3C,yBAAA,EACD,UAAU,EAAE,CAAC,EAAA,CACb,EACFA,IAAC;;;;;;;;AAIC,wBAAA,UAAU,EAAE;AACV,4BAAA,KAAK,EAAE,gCAAgC;yBACxC,EAAA,CACD,EACD,aAAa,KACZA,IAAC,MAAM,EAAA,EACL,YAAY,EAAE;4BACZ,MAAM,EAAE,GAAG;yBACZ,EAAA,CACD,CACH,EACA,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAClCA,GAAA,CAAC,IAAI,EAAA,EAEH,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EACZ,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,KAAK,IAAI,YAAY,EAC7B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAA,EALR,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAMlB,CACH,CAAC,CAAA,EAAA,CACQ,EAAA,CACQ,EAAA,CAClB;AAEV;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "3.1.0-alpha.3",
+  "version": "3.1.0-alpha.4",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/FileInput/FileInput.tsx

@@ -74,7 +74,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
             flexDir="column"
             justify="center"
             align="center"
-            bgColor="rgba(255, 255, 255, 0.85)"
+            bgColor="color-mix(in srgb, var(--chakra-colors-bg-surface) 85%, transparent)"
             opacity={bgImage ? 0 : 1}
             transition="ease-in"
             _groupHover={{ opacity: 1 }} // Set opacity to 1 on parent hover

package/src/components/LineGraph/LineGraph.tsx

@@ -62,9 +62,11 @@ export const LineGraph = <T extends DatumBase>({
             tickMargin={0}
           />
           <Tooltip
-            // invert label color since mode inside tooltip is different
+            // The tooltip surface stays light in both modes, so the label keeps
+            // a fixed near-black. Must be a CSS var, not 'gray.1500' — recharts
+            // won't resolve Chakra tokens (see XAxis/YAxis above).
             labelStyle={{
-              color: 'gray.1500',
+              color: 'var(--chakra-colors-gray-1500)',
             }}
           />
           {displayLegend && (

package/src/components/claude.md

@@ -146,7 +146,10 @@ const Component = () => {
 **Semantic tokens to use:**
 - `primary.main`, `primary.light` - Primary brand colors
 - `danger.main` - Error/danger states
-- `gray.*` - Neutral colors (gray.50 to gray.1200)
+- `bg.*` / `fg.*` / `border.*` - Neutral surfaces, text, and borders that **flip with
+  color mode**. Prefer these over raw `gray.*`/`white` so components work in dark mode
+  (see `src/theme/claude.md` → Neutral Semantic Tokens). Raw `gray.*` is only for values
+  that must stay fixed across modes.
 
 ### Common Style Patterns
 
@@ -348,7 +351,9 @@ See `.storybook/claude.md` for Storybook-specific patterns.
 
 1. **Forgetting forwardRef**: Always use it for components wrapping DOM elements
 2. **Not setting displayName**: Required for React DevTools
-3. **Hardcoded colors**: Use theme tokens instead
+3. **Hardcoded / non-flipping colors**: Use theme tokens instead — and for neutrals use the
+   flipping `bg.*`/`fg.*`/`border.*` tokens, not raw `gray.*`/`white` (which stay stuck in
+   light mode under `.dark`)
 4. **Missing focus states**: Required for accessibility
 5. **Props in wrong order**: Custom props before spread
 6. **Not handling IME**: Important for international users
@@ -381,6 +386,7 @@ Before considering a component complete:
 - [ ] Disabled states work correctly
 - [ ] Hover states are visible
 - [ ] Theme tokens are used (no hardcoded colors)
+- [ ] Neutral colors use flipping `bg.*`/`fg.*`/`border.*` tokens; verified in dark mode
 - [ ] Storybook story is created
 - [ ] Component is exported from src/index.ts
 - [ ] Works with keyboard navigation

package/src/theme/claude.md

@@ -20,7 +20,9 @@ src/theme/
 1. **Accessibility First**: All semantic color combinations meet WCAG 2.1 AA standards (4.5:1 minimum contrast)
 2. **Cool Gray Foundation**: Slate-based grays with blue undertone for a modern, professional feel
 3. **Consistent Scale**: Each color has 50/100/200/300/500/600/700/800/900 steps
-4. **Light Mode Optimized**: Designed for light mode with semantic token flexibility
+4. **Light & Dark Mode**: Neutral semantic tokens (`bg.*`/`fg.*`/`border.*`) carry a `_dark`
+   variant and flip automatically by color mode. Use them instead of raw `gray.*`/`white`
+   primitives so components work in both modes (see [Neutral Semantic Tokens](#neutral-semantic-tokens-dark-mode)).
 
 ### Primitive Color Palettes
 
@@ -185,6 +187,59 @@ semanticTokens: {
 }
 ```
 
+### Neutral Semantic Tokens (Dark Mode)
+
+The brand semantics above carry `_dark` variants, but the **neutral** tokens below are
+the ones to reach for on surfaces, text, and borders. Each maps onto the `gray.0–1500`
+scale and resolves to a different step under `.dark` (Chakra v3's class strategy), so a
+component built with them flips for free — **no `_dark` overrides needed**.
+
+```tsx
+semanticTokens: {
+  colors: {
+    // Backgrounds                base (light) → _dark
+    bg: {
+      canvas:  'gray.0',    // app background        → gray.1500
+      surface: 'white',     // cards, menus, popovers → gray.1400
+      subtle:  'gray.50',   // secondary surface      → gray.1300
+      muted:   'gray.100',  // tertiary fill, hover   → gray.1200
+      inverse: 'gray.1300', // high-contrast surface  → gray.50
+    },
+    // Foreground (text / icons)
+    fg: {
+      default: 'gray.1300', // primary text → gray.200
+      muted:   'gray.900',  // secondary    → gray.400
+      subtle:  'gray.700',  // tertiary     → gray.600
+      inverse: 'gray.0',    // text on inverse → gray.1400
+    },
+    // Borders / dividers
+    border: {
+      default: 'gray.300',  // standard borders → gray.1100
+      subtle:  'gray.200',  // low-emphasis     → gray.1300
+      strong:  'gray.500',  // high-emphasis    → gray.900
+    },
+  },
+}
+```
+
+```tsx
+// ✅ Flips with color mode
+<Box bg="bg.surface" color="fg.default" borderColor="border.default" />
+
+// ❌ Stuck in light mode — a white panel / dark text that never flips
+<Box bg="white" color="gray.1300" borderColor="gray.300" />
+```
+
+**Exceptions (intentionally do not flip):**
+- Solid brand fills and their white labels (`bg="primary.main" color="white"`) are
+  mode-invariant by design — keep them as primitives.
+- White slider knobs and always-dark surfaces (Tooltip, CodeTabs) stay fixed.
+- **Third-party renderers that don't resolve Chakra tokens** (e.g. recharts in
+  `LineGraph`): feed the resolved CSS var instead — `var(--chakra-colors-fg-muted)`.
+- **Translucency**: when you need a semi-transparent surface that still flips, mix the
+  CSS var instead of hardcoding rgba — e.g.
+  `color-mix(in srgb, var(--chakra-colors-bg-surface) 85%, transparent)` (see `FileInput`).
+
 ### WCAG Contrast Ratios
 
 All semantic color combinations meet WCAG 2.1 accessibility standards:
@@ -214,13 +269,24 @@ All semantic color combinations meet WCAG 2.1 accessibility standards:
 <Box bg="warning.lighter" color="warning.dark" />
 ```
 
+### Neutral Surfaces / Text / Borders: use `bg.*` / `fg.*` / `border.*`
+
+These flip with color mode — prefer them over raw `gray.*`/`white` for anything neutral:
+
+```tsx
+// ✅ Best - flips between light and dark
+<Box bgColor="bg.surface" borderColor="border.default" />
+<Text color="fg.default">Primary text</Text>
+<Text color="fg.subtle">Secondary text</Text>
+```
+
 ### Alternative: Primitive Colors
 
 ```tsx
-// ✅ Acceptable - when no semantic token applies
-<Box borderColor="gray.300" bgColor="gray.0" />
-<Text color="gray.1300">Primary text</Text>
-<Text color="gray.700">Secondary text</Text>
+// ⚠️ Only when the value must stay fixed across modes (rare for neutrals).
+// Raw gray.*/white do NOT flip, so a `white` surface or `gray.1300` text will be
+// stuck in light mode under .dark. Reach for bg.*/fg.*/border.* above instead.
+<Box bgColor="primary.main" color="white" /> // mode-invariant brand fill — OK
 ```
 
 ### Accessing Theme in Components
@@ -340,13 +406,17 @@ const color = theme.semanticTokens.colors.primary.main;
 const color = '#1751D0';
 ```
 
-### 3. Consistent Gray Usage
+### 3. Consistent Gray Usage — prefer flipping neutral tokens
 
 ```tsx
-// ✅ Good - semantic gray usage
-<Text color="gray.1300">Primary text</Text>
-<Text color="gray.700">Secondary text</Text>
-<Box borderColor="gray.300" />
+// ✅ Best - neutral semantic tokens flip with color mode
+<Text color="fg.default">Primary text</Text>
+<Text color="fg.subtle">Secondary text</Text>
+<Box bgColor="bg.surface" borderColor="border.default" />
+
+// ⚠️ Stuck in light mode - raw gray.*/white never flip under .dark
+<Text color="gray.1300" /> // use fg.default
+<Box bgColor="white" />    // use bg.surface
 
 // ❌ Bad - arbitrary values
 <Text color="#333" />