@bunnix/components 0.9.0 → 0.9.1

package/@types/index.d.ts

@@ -67,6 +67,13 @@ export interface InputFieldProps extends BaseProps {
   keydown?: (event?: any) => void;
 }
 
+export interface CodeBlockProps extends BaseProps {
+  html?: string;
+  language?: string;
+  overflowX?: "auto" | "scroll" | "hidden" | string;
+  wrap?: boolean;
+}
+
 export interface ComboBoxOption {
   value: string;
   label?: string;
@@ -227,6 +234,7 @@ export const AccordionGroup: Component<BaseProps>;
 export const Badge: Component<BadgeProps>;
 export const Button: Component<ButtonProps>;
 export const Checkbox: Component<CheckboxProps>;
+export const CodeBlock: Component<CodeBlockProps>;
 export const ComboBox: Component<ComboBoxProps>;
 export const Container: Component<ContainerProps>;
 export const DatePicker: Component<DatePickerProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnix/components",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Bunnix components: a set of bunnix ready components for modern web apps.",
   "keywords": [
     "bunnix",

package/src/components/CodeBlock.mjs

@@ -0,0 +1,31 @@
+import Bunnix from "@bunnix/core";
+
+const { div, pre, code } = Bunnix;
+
+export default function CodeBlock({
+  html,
+  language,
+  overflowX = "auto",
+  wrap = false,
+  class: className = "",
+  ...rest
+} = {}, children) {
+  const languageClass = language ? `language-${language}` : "";
+  const wrapClass = wrap ? "codeblock-wrap" : "";
+  const codeChildren = html ? null : children;
+  const codeProps = {
+    class: `codeblock-code ${languageClass}`.trim()
+  };
+  if (html !== null && html !== undefined) {
+    codeProps.innerHTML = html;
+  }
+
+  return div({ class: `codeblock ${className}`.trim(), ...rest }, [
+    pre({
+      class: `codeblock-pre ${wrapClass}`.trim(),
+      style: { overflowX, overflowY: "auto" }
+    }, [
+      code(codeProps, codeChildren)
+    ])
+  ]);
+}

package/src/index.mjs

@@ -2,6 +2,7 @@ export { default as AccordionGroup } from "./components/AccordionGroup.mjs";
 export { default as Badge } from "./components/Badge.mjs";
 export { default as Button } from "./components/Button.mjs";
 export { default as Checkbox } from "./components/Checkbox.mjs";
+export { default as CodeBlock } from "./components/CodeBlock.mjs";
 export { default as ComboBox } from "./components/ComboBox.mjs";
 export { default as Container } from "./components/Container.mjs";
 export { default as DatePicker } from "./components/DatePicker.mjs";

package/src/styles/controls.css

@@ -299,6 +299,31 @@ kbd {
   font-size: var(--font-size-xs) !important;
 }
 
+/* Code Block */
+.codeblock {
+  width: 100%;
+}
+
+.codeblock-pre {
+  margin: 0;
+  padding: var(--base-padding);
+  border-radius: var(--min-control-radius);
+  border: 1px solid var(--border-color);
+  background-color: var(--alternate-background-color);
+}
+
+.codeblock-pre code {
+  display: block;
+  font-family: monospace;
+  font-size: var(--font-size-sm);
+  line-height: 1.6;
+  white-space: pre;
+}
+
+.codeblock-pre.codeblock-wrap code {
+  white-space: pre-wrap;
+}
+
 /* Control Sizes */
 .input-lg {
   padding: calc(var(--base-padding) * 0.75) calc(var(--base-padding) * 1.25) !important;