@mindlogic-ai/logician-ui 4.0.0-alpha.16 → 4.0.0-alpha.17

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

@@ -1 +1 @@
-{"version":3,"file":"InlineCode.d.ts","sourceRoot":"","sources":["../../../src/components/InlineCode/InlineCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,IAAI,eAAe,EAC7B,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,UAAU,GAAI,uBAAuB,eAAe,4CAmBhE,CAAC"}
+{"version":3,"file":"InlineCode.d.ts","sourceRoot":"","sources":["../../../src/components/InlineCode/InlineCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,IAAI,eAAe,EAC7B,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,UAAU,GAAI,uBAAuB,eAAe,4CA0BhE,CAAC"}

package/dist/components/InlineCode/InlineCode.js

@@ -5,7 +5,16 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('@chakra-ui/react');
 
 const InlineCode = ({ children, ...rest }) => {
-    return (jsxRuntime.jsx(react.Code, { bg: "bg.subtle", color: "primary.dark", borderRadius: "sm", textStyle: "p", 
+    return (jsxRuntime.jsx(react.Code, { bg: "bg.subtle", color: "primary.dark", 
+        // `xs` (4px) rather than `sm` (6px): on the small, now-shorter chip a 6px
+        // radius reads a little bubbly; the tighter corner is crisper inline.
+        borderRadius: "xs", 
+        // `subtext` rather than `p`: inline code reads a step below body text so
+        // its chip (padding + ring) and the mono face's larger x-height don't make
+        // it bulge in running prose. `subtext` is the same tier as `p` — same
+        // family/weight/line-height — only one size down, so this changes size
+        // only (a mono override passed by callers still wins, as with `p`).
+        textStyle: "subtext", 
         // bg.subtle (gray.50) matches the bg.sunken page wash, so on a sunken
         // page the chip fill vanishes. The chip is too small for a fill bump to
         // register, so (like SegmentedControl) it gets an outline instead — a

package/dist/components/InlineCode/InlineCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineCode.js","sources":["../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCode"],"mappings":";;;;;;AAKO,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAmB,KAAI;AACnE,IAAA,QACEA,cAAA,CAACC,UAAU,IACT,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,cAAc,EACpB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,GAAG;;;;;;;QAOb,SAAS,EAAC,+CAA+C,EAAA,GACrD,IAAI,YAEP,QAAQ,EAAA,CACE;AAEjB;;;;"}
+{"version":3,"file":"InlineCode.js","sources":["../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCode"],"mappings":";;;;;;AAKO,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAmB,KAAI;IACnE,QACEA,cAAA,CAACC,UAAU,EAAA,EACT,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,cAAc;;;AAGpB,QAAA,YAAY,EAAC,IAAI;;;;;;AAMjB,QAAA,SAAS,EAAC,SAAS;;;;;;;QAOnB,SAAS,EAAC,+CAA+C,EAAA,GACrD,IAAI,YAEP,QAAQ,EAAA,CACE;AAEjB;;;;"}

package/dist/components/InlineCode/InlineCode.mjs

@@ -3,7 +3,16 @@ import { jsx } from 'react/jsx-runtime';
 import { Code } from '@chakra-ui/react';
 
 const InlineCode = ({ children, ...rest }) => {
-    return (jsx(Code, { bg: "bg.subtle", color: "primary.dark", borderRadius: "sm", textStyle: "p", 
+    return (jsx(Code, { bg: "bg.subtle", color: "primary.dark", 
+        // `xs` (4px) rather than `sm` (6px): on the small, now-shorter chip a 6px
+        // radius reads a little bubbly; the tighter corner is crisper inline.
+        borderRadius: "xs", 
+        // `subtext` rather than `p`: inline code reads a step below body text so
+        // its chip (padding + ring) and the mono face's larger x-height don't make
+        // it bulge in running prose. `subtext` is the same tier as `p` — same
+        // family/weight/line-height — only one size down, so this changes size
+        // only (a mono override passed by callers still wins, as with `p`).
+        textStyle: "subtext", 
         // bg.subtle (gray.50) matches the bg.sunken page wash, so on a sunken
         // page the chip fill vanishes. The chip is too small for a fill bump to
         // register, so (like SegmentedControl) it gets an outline instead — a

package/dist/components/InlineCode/InlineCode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineCode.mjs","sources":["../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCode"],"mappings":";;;;AAKO,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAmB,KAAI;AACnE,IAAA,QACEA,GAAA,CAACC,IAAU,IACT,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,cAAc,EACpB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,GAAG;;;;;;;QAOb,SAAS,EAAC,+CAA+C,EAAA,GACrD,IAAI,YAEP,QAAQ,EAAA,CACE;AAEjB;;;;"}
+{"version":3,"file":"InlineCode.mjs","sources":["../../../src/components/InlineCode/InlineCode.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCode"],"mappings":";;;;AAKO,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAmB,KAAI;IACnE,QACEA,GAAA,CAACC,IAAU,EAAA,EACT,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,cAAc;;;AAGpB,QAAA,YAAY,EAAC,IAAI;;;;;;AAMjB,QAAA,SAAS,EAAC,SAAS;;;;;;;QAOnB,SAAS,EAAC,+CAA+C,EAAA,GACrD,IAAI,YAEP,QAAQ,EAAA,CACE;AAEjB;;;;"}

package/package.json

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

package/src/components/InlineCode/InlineCode.tsx

@@ -8,8 +8,15 @@ export const InlineCode = ({ children, ...rest }: ChakraCodeProps) => {
     <ChakraCode
       bg="bg.subtle"
       color="primary.dark"
-      borderRadius="sm"
-      textStyle="p"
+      // `xs` (4px) rather than `sm` (6px): on the small, now-shorter chip a 6px
+      // radius reads a little bubbly; the tighter corner is crisper inline.
+      borderRadius="xs"
+      // `subtext` rather than `p`: inline code reads a step below body text so
+      // its chip (padding + ring) and the mono face's larger x-height don't make
+      // it bulge in running prose. `subtext` is the same tier as `p` — same
+      // family/weight/line-height — only one size down, so this changes size
+      // only (a mono override passed by callers still wins, as with `p`).
+      textStyle="subtext"
       // bg.subtle (gray.50) matches the bg.sunken page wash, so on a sunken
       // page the chip fill vanishes. The chip is too small for a fill bump to
       // register, so (like SegmentedControl) it gets an outline instead — a

package/src/components/Typography/Typography.stories.tsx

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { InlineCode } from '../InlineCode';
+
 import {
   Caption,
   H1,
@@ -67,3 +69,27 @@ export const AllTextStyles: Story = {
     </>
   ),
 };
+
+// InlineCode nested in each type tier. InlineCode's size is em-relative
+// (textStyle="subtext"), so it tracks whatever it sits in: a readable step below
+// body in a paragraph, and proportionally smaller inside a heading. Use this to
+// eyeball the step-down per context and to confirm a caller's `fontFamily="mono"`
+// still wins (InlineCode has no mono default). Pair with `AllTextStyles` above.
+export const InlineCodeInTextStyles: Story = {
+  render: () => {
+    const code = <InlineCode fontFamily="mono">inline_code()</InlineCode>;
+    return (
+      <>
+        <H1>H1 heading with {code} inside</H1>
+        <H2>H2 heading with {code} inside</H2>
+        <H3>H3 heading with {code} inside</H3>
+        <H4>H4 heading with {code} inside</H4>
+        <H5>H5 heading with {code} inside</H5>
+        <Text>Paragraph body text with {code} mid-sentence.</Text>
+        <Subtitle>Subtitle with {code} inside</Subtitle>
+        <Subtext>Subtext with {code} inside</Subtext>
+        <Caption>Caption with {code} inside</Caption>
+      </>
+    );
+  },
+};