@elaraai/east-ui-components 0.0.1-beta.4 → 0.0.1-beta.5

package/README.md

@@ -90,7 +90,7 @@ All East UI components are supported:
 | Category | Components |
 |----------|------------|
 | **Layout** | Box, Stack, HStack, VStack, Grid, Splitter, Separator |
-| **Typography** | Text |
+| **Typography** | Text, Code, Heading, Link, Highlight, Mark, List, CodeBlock |
 | **Buttons** | Button, IconButton |
 | **Forms** | Input (String, Integer, Float, DateTime), Select, Checkbox, Switch, Slider, Textarea, TagsInput, FileUpload, Field, Fieldset |
 | **Collections** | Table, DataList, TreeView |
@@ -117,6 +117,7 @@ Dual-licensed:
 
 ## Links
 
+- **Live Showcase**: [https://elaraai.github.io/east-ui/](https://elaraai.github.io/east-ui/)
 - **Website**: [https://elaraai.com/](https://elaraai.com/)
 - **East UI**: [https://www.npmjs.com/package/@elaraai/east-ui](https://www.npmjs.com/package/@elaraai/east-ui)
 - **East Repository**: [https://github.com/elaraai/East](https://github.com/elaraai/East)

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AA+DnD,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;CACvC;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,gEAkF4B,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAsEnD,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;CACvC;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,gEAyF4B,CAAC"}

package/dist/index.cjs

@@ -8,6 +8,7 @@ const React = require("react");
 const east = require("@elaraai/east");
 const eastUi = require("@elaraai/east-ui");
 const react = require("@chakra-ui/react");
+const shiki = require("shiki");
 const reactDom = require("react-dom");
 function _interopNamespaceDefault(e3) {
   const n2 = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -54,6 +55,160 @@ const EastChakraText = React.memo(function EastChakraText2({ value }) {
   const props = React.useMemo(() => toChakraText(value), [value]);
   return /* @__PURE__ */ jsxRuntime.jsx(react.Text, { ...props, children: value.value });
 }, (prev, next) => textEqual(prev.value, next.value));
+const codeEqual = east.equalFor(eastUi.Code.Types.Code);
+function toChakraCode(value) {
+  var _a, _b;
+  return {
+    variant: (_a = getSomeorUndefined(value.variant)) == null ? void 0 : _a.type,
+    colorPalette: getSomeorUndefined(value.colorPalette),
+    size: (_b = getSomeorUndefined(value.size)) == null ? void 0 : _b.type
+  };
+}
+const EastChakraCode = React.memo(function EastChakraCode2({ value }) {
+  const props = React.useMemo(() => toChakraCode(value), [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Code, { ...props, children: value.value });
+}, (prev, next) => codeEqual(prev.value, next.value));
+const headingEqual = east.equalFor(eastUi.Heading.Types.Heading);
+function toChakraHeading(value) {
+  var _a, _b, _c;
+  return {
+    size: (_a = getSomeorUndefined(value.size)) == null ? void 0 : _a.type,
+    as: (_b = getSomeorUndefined(value.as)) == null ? void 0 : _b.type,
+    color: getSomeorUndefined(value.color),
+    textAlign: (_c = getSomeorUndefined(value.textAlign)) == null ? void 0 : _c.type
+  };
+}
+const EastChakraHeading = React.memo(function EastChakraHeading2({ value }) {
+  const props = React.useMemo(() => toChakraHeading(value), [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Heading, { ...props, children: value.value });
+}, (prev, next) => headingEqual(prev.value, next.value));
+const linkEqual = east.equalFor(eastUi.Link.Types.Link);
+function toChakraLink(value) {
+  var _a;
+  const external2 = getSomeorUndefined(value.external);
+  return {
+    href: value.href,
+    variant: (_a = getSomeorUndefined(value.variant)) == null ? void 0 : _a.type,
+    colorPalette: getSomeorUndefined(value.colorPalette),
+    ...external2 ? { target: "_blank", rel: "noopener noreferrer" } : {}
+  };
+}
+const EastChakraLink = React.memo(function EastChakraLink2({ value }) {
+  const props = React.useMemo(() => toChakraLink(value), [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { ...props, children: value.value });
+}, (prev, next) => linkEqual(prev.value, next.value));
+const highlightEqual = east.equalFor(eastUi.Highlight.Types.Highlight);
+function toChakraHighlight(value) {
+  const color2 = getSomeorUndefined(value.color);
+  return {
+    query: value.query,
+    styles: color2 ? { bg: color2 } : void 0
+  };
+}
+const EastChakraHighlight = React.memo(function EastChakraHighlight2({ value }) {
+  const props = React.useMemo(() => toChakraHighlight(value), [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Highlight, { query: props.query, styles: props.styles, children: value.value });
+}, (prev, next) => highlightEqual(prev.value, next.value));
+const markEqual = east.equalFor(eastUi.Mark.Types.Mark);
+function toChakraMark(value) {
+  var _a;
+  return {
+    variant: (_a = getSomeorUndefined(value.variant)) == null ? void 0 : _a.type,
+    colorPalette: getSomeorUndefined(value.colorPalette)
+  };
+}
+const EastChakraMark = React.memo(function EastChakraMark2({ value }) {
+  const props = React.useMemo(() => toChakraMark(value), [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Mark, { ...props, children: value.value });
+}, (prev, next) => markEqual(prev.value, next.value));
+const listEqual = east.equalFor(eastUi.List.Types.List);
+function toChakraList(value) {
+  var _a;
+  const variant = (_a = getSomeorUndefined(value.variant)) == null ? void 0 : _a.type;
+  return {
+    as: variant === "ordered" ? "ol" : "ul",
+    gap: getSomeorUndefined(value.gap),
+    colorPalette: getSomeorUndefined(value.colorPalette),
+    ps: "5"
+    // Padding-start for bullet/number markers
+  };
+}
+const EastChakraList = React.memo(function EastChakraList2({ value }) {
+  const props = React.useMemo(() => toChakraList(value), [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.List.Root, { ...props, children: value.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(react.List.Item, { children: item }, index)) });
+}, (prev, next) => listEqual(prev.value, next.value));
+const codeBlockEqual = east.equalFor(eastUi.CodeBlock.Types.CodeBlock);
+let highlighterPromise = null;
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = shiki.createHighlighter({
+      langs: [
+        "typescript",
+        "javascript",
+        "json",
+        "html",
+        "css",
+        "python",
+        "rust",
+        "go",
+        "sql",
+        "bash",
+        "markdown",
+        "yaml",
+        "xml"
+      ],
+      themes: ["github-dark"]
+    });
+  }
+  return highlighterPromise;
+}
+const shikiAdapter = react.createShikiAdapter({
+  load: getHighlighter,
+  theme: "github-dark"
+});
+function toCodeBlockProps(value) {
+  const languageVariant = getSomeorUndefined(value.language);
+  const language = languageVariant == null ? void 0 : languageVariant.type;
+  const highlightLinesBigint = getSomeorUndefined(value.highlightLines);
+  const highlightLines = highlightLinesBigint == null ? void 0 : highlightLinesBigint.map((n2) => Number(n2));
+  return {
+    language,
+    showLineNumbers: getSomeorUndefined(value.showLineNumbers),
+    highlightLines,
+    maxHeight: getSomeorUndefined(value.maxHeight),
+    showCopyButton: getSomeorUndefined(value.showCopyButton),
+    title: getSomeorUndefined(value.title)
+  };
+}
+const EastChakraCodeBlock = React.memo(function EastChakraCodeBlock2({ value }) {
+  const props = React.useMemo(() => toCodeBlockProps(value), [value]);
+  const meta = React.useMemo(() => {
+    const result = {};
+    if (props.showLineNumbers !== void 0) {
+      result.showLineNumbers = props.showLineNumbers;
+    }
+    if (props.highlightLines !== void 0) {
+      result.highlightLines = props.highlightLines;
+    }
+    return Object.keys(result).length > 0 ? result : void 0;
+  }, [props.showLineNumbers, props.highlightLines]);
+  const showHeader = props.title || props.showCopyButton;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.CodeBlock.AdapterProvider, { value: shikiAdapter, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { maxHeight: props.maxHeight, overflow: "auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    react.CodeBlock.Root,
+    {
+      code: value.code,
+      language: props.language,
+      meta,
+      children: [
+        showHeader && /* @__PURE__ */ jsxRuntime.jsxs(react.CodeBlock.Header, { children: [
+          props.title && /* @__PURE__ */ jsxRuntime.jsx(react.CodeBlock.Title, { children: props.title }),
+          props.showCopyButton && /* @__PURE__ */ jsxRuntime.jsx(react.CodeBlock.CopyTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.IconButton, { variant: "ghost", size: "2xs", children: /* @__PURE__ */ jsxRuntime.jsx(react.CodeBlock.CopyIndicator, {}) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.CodeBlock.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.CodeBlock.Code, { children: /* @__PURE__ */ jsxRuntime.jsx(react.CodeBlock.CodeText, {}) }) })
+      ]
+    }
+  ) }) });
+}, (prev, next) => codeBlockEqual(prev.value, next.value));
 const buttonEqual = east.equalFor(eastUi.Button.Types.Button);
 function toChakraButton(value) {
   var _a, _b, _c;
@@ -55190,7 +55345,7 @@ const EastChakraHoverCard = React.memo(function EastChakraHoverCard2({ value })
       closeDelay,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.HoverCard.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(EastChakraComponent, { value: value.trigger }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.HoverCard.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.HoverCard.Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.HoverCard.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.HoverCard.Content, { width: "fit-content", maxWidth: "unset", children: [
           hasArrow && /* @__PURE__ */ jsxRuntime.jsx(react.HoverCard.Arrow, {}),
           value.body.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraComponent, { value: child }, index))
         ] }) }) })
@@ -55328,6 +55483,13 @@ const EastChakraComponent = React.memo(function EastChakraComponent2({ value })
     return east.match(value, {
       // Typography
       Text: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraText, { value: v2 }),
+      Code: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraCode, { value: v2 }),
+      Heading: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraHeading, { value: v2 }),
+      Link: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraLink, { value: v2 }),
+      Highlight: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraHighlight, { value: v2 }),
+      Mark: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraMark, { value: v2 }),
+      List: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraList, { value: v2 }),
+      CodeBlock: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraCodeBlock, { value: v2 }),
       // Buttons
       Button: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraButton, { value: v2 }),
       IconButton: (v2) => /* @__PURE__ */ jsxRuntime.jsx(EastChakraIconButton, { value: v2 }),