@sikka/hawa 0.6.10-next → 0.6.11-next

package/dist/index.css

@@ -572,6 +572,10 @@ video {
     text-decoration: underline;
     color: var(--button-primary-700);
   }
+.mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      Liberation Mono, Courier New, monospace !important;
+  }
 .inline-code {
     font-size: 0.75rem !important;
     width: -moz-fit-content;
@@ -902,6 +906,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-mr-3 {
   margin-right: 0.75rem;
 }
+.hawa-mr-4 {
+  margin-right: 1rem;
+}
 .hawa-mr-40 {
   margin-right: 10rem;
 }
@@ -1712,10 +1719,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
-.hawa-bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
 .hawa-bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));

package/dist/index.d.mts

@@ -156,6 +156,8 @@ type CodeBlockTypes = {
     fileName?: string;
     /** Code content to be displayed within the code block.*/
     code?: string;
+    lineNumbers?: boolean;
+    forcedDarkMode?: boolean;
 };
 declare const CodeBlock: FC<CodeBlockTypes>;
 

package/dist/index.d.ts

@@ -156,6 +156,8 @@ type CodeBlockTypes = {
     fileName?: string;
     /** Code content to be displayed within the code block.*/
     code?: string;
+    lineNumbers?: boolean;
+    forcedDarkMode?: boolean;
 };
 declare const CodeBlock: FC<CodeBlockTypes>;
 

package/dist/index.js

@@ -1276,10 +1276,20 @@ function useClipboard() {
     };
 }
 // components/elements/CodeBlock.tsx
-var CodeBlock = function(param) {
-    var tabs = param.tabs, code = param.code, fileName = param.fileName, _param_width = param.width, width = _param_width === void 0 ? "full" : _param_width;
+var import_prism_react_renderer = require("prism-react-renderer");
+var CodeBlock = function(_param) {
+    var tabs = _param.tabs, code = _param.code, fileName = _param.fileName, _param_language = _param.language, language = _param_language === void 0 ? "javascript" : _param_language, _param_width = _param.// default to JavaScript if no language is provided
+    width, width = _param_width === void 0 ? "full" : _param_width, props = _object_without_properties(_param, [
+        "tabs",
+        "code",
+        "fileName",
+        "language",
+        "width"
+    ]);
     var clipboard = useClipboard();
     var _ref = _sliced_to_array((0, import_react8.useState)(0), 2), selectedTab = _ref[0], setSelectedTab = _ref[1];
+    var isDarkMode = props.forcedDarkMode || document.body.classList.contains("dark");
+    var theme = isDarkMode ? import_prism_react_renderer.themes.vsDark : import_prism_react_renderer.themes.vsLight;
     var widthStyles = {
         full: "hawa-w-full",
         md: "hawa-w-full hawa-max-w-md",
@@ -1302,12 +1312,33 @@ var CodeBlock = function(param) {
     })), fileName && /* @__PURE__ */ import_react8.default.createElement("div", {
         className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-bg-gray-200 dark:hawa-bg-muted hawa-p-2 hawa-pb-0 hawa-text-foreground hawa-font-mono"
     }, /* @__PURE__ */ import_react8.default.createElement("div", {
-        className: cn("hawa-mb-1 hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-2 hawa-py-1 hawa-text-center hawa-text-[1rem]")
+        className: cn("hawa-mb-1 mono hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-2 hawa-py-1 hawa-text-center hawa-text-[1rem]")
     }, fileName)), /* @__PURE__ */ import_react8.default.createElement("pre", null, /* @__PURE__ */ import_react8.default.createElement("div", {
-        className: cn("hawa-relative hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between    hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base hawa-bg-gray-300 ", tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded")
-    }, /* @__PURE__ */ import_react8.default.createElement("code", {
-        className: "hawa-flex hawa-min-h-[37.75px] hawa-w-full hawa-flex-row hawa-justify-start hawa-overflow-auto hawa-p-4 hawa-text-foreground hawa-bg-background/70 hawa-font-mono"
-    }, tabs ? tabs[selectedTab].code : code), /* @__PURE__ */ import_react8.default.createElement("div", {
+        className: cn("hawa-relative hawa-flex hawa-w-full hawa-flex-row hawa-border hawa-items-start hawa-justify-between hawa-bg-foreground/5 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base ", tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded")
+    }, /* @__PURE__ */ import_react8.default.createElement(import_prism_react_renderer.Highlight, {
+        theme: theme,
+        code: tabs ? tabs[selectedTab].code : code || "",
+        language: language
+    }, function(param) {
+        var className = param.className, style = param.style, tokens = param.tokens, getLineProps = param.getLineProps, getTokenProps = param.getTokenProps;
+        return /* @__PURE__ */ import_react8.default.createElement("pre", {
+            className: "hawa-min-h-[37.75px] hawa-w-full hawa-overflow-auto hawa-p-4 hawa-text-foreground hawa-font-mono"
+        }, tokens.map(function(line, i) {
+            return /* @__PURE__ */ import_react8.default.createElement("div", _object_spread({
+                key: i
+            }, getLineProps({
+                line: line
+            })), props.lineNumbers && /* @__PURE__ */ import_react8.default.createElement("span", {
+                className: "hawa-mr-4"
+            }, i + 1), line.map(function(token, key) {
+                return /* @__PURE__ */ import_react8.default.createElement("span", _object_spread({
+                    key: key
+                }, getTokenProps({
+                    token: token
+                })));
+            }));
+        }));
+    }), /* @__PURE__ */ import_react8.default.createElement("div", {
         className: "hawa-absolute hawa-right-0 hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-p-2"
     }, /* @__PURE__ */ import_react8.default.createElement(Tooltip, {
         open: clipboard.copied,

package/dist/index.mjs

@@ -600,14 +600,20 @@ function useClipboard({ timeout = 2e3 } = {}) {
 }
 
 // components/elements/CodeBlock.tsx
+import { Highlight, themes } from "prism-react-renderer";
 var CodeBlock = ({
   tabs,
   code,
   fileName,
-  width = "full"
+  language = "javascript",
+  // default to JavaScript if no language is provided
+  width = "full",
+  ...props
 }) => {
   const clipboard = useClipboard();
   const [selectedTab, setSelectedTab] = useState4(0);
+  const isDarkMode = props.forcedDarkMode || document.body.classList.contains("dark");
+  const theme = isDarkMode ? themes.vsDark : themes.vsLight;
   let widthStyles = {
     full: "hawa-w-full",
     md: "hawa-w-full hawa-max-w-md",
@@ -644,7 +650,7 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          "hawa-mb-1 hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-2 hawa-py-1 hawa-text-center hawa-text-[1rem]"
+          "hawa-mb-1 mono hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-2 hawa-py-1 hawa-text-center hawa-text-[1rem]"
         )
       },
       fileName
@@ -653,11 +659,19 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          "hawa-relative hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between    hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base hawa-bg-gray-300 ",
+          "hawa-relative hawa-flex hawa-w-full hawa-flex-row hawa-border hawa-items-start hawa-justify-between hawa-bg-foreground/5 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base ",
           tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded"
         )
       },
-      /* @__PURE__ */ React10.createElement("code", { className: "hawa-flex hawa-min-h-[37.75px] hawa-w-full hawa-flex-row hawa-justify-start hawa-overflow-auto hawa-p-4 hawa-text-foreground hawa-bg-background/70 hawa-font-mono" }, tabs ? tabs[selectedTab].code : code),
+      /* @__PURE__ */ React10.createElement(
+        Highlight,
+        {
+          theme,
+          code: tabs ? tabs[selectedTab].code : code || "",
+          language
+        },
+        ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React10.createElement("pre", { className: "hawa-min-h-[37.75px] hawa-w-full hawa-overflow-auto hawa-p-4 hawa-text-foreground hawa-font-mono" }, tokens.map((line, i) => /* @__PURE__ */ React10.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ React10.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ React10.createElement("span", { key, ...getTokenProps({ token }) })))))
+      ),
       /* @__PURE__ */ React10.createElement("div", { className: "hawa-absolute hawa-right-0 hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-p-2" }, /* @__PURE__ */ React10.createElement(
         Tooltip,
         {
@@ -1079,7 +1093,7 @@ var Switch = React15.forwardRef(({ className, size = "default", label, ...props
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // components/elements/Radio.tsx
-import React16, { useState as useState7, useRef as useRef3, useEffect as useEffect4 } from "react";
+import React16, { useState as useState7, useRef as useRef3, useEffect as useEffect5 } from "react";
 var Radio = ({
   design = "default",
   width = "default",
@@ -1101,7 +1115,7 @@ var Radio = ({
     null
   );
   const parentRef = useRef3(null);
-  useEffect4(() => {
+  useEffect5(() => {
     const parentNode = parentRef.current?.parentNode;
     if (parentNode) {
       const dir = window.getComputedStyle(parentNode).direction;
@@ -1309,7 +1323,7 @@ var Label = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // components/elements/Alert.tsx
-import React20, { useRef as useRef4, useState as useState8, useEffect as useEffect5 } from "react";
+import React20, { useRef as useRef4, useState as useState8, useEffect as useEffect6 } from "react";
 import clsx6 from "clsx";
 var Alert = ({
   variant = "normal",
@@ -1322,7 +1336,7 @@ var Alert = ({
 }) => {
   const alertRef = useRef4(null);
   const [closed, setClosed] = useState8(false);
-  useEffect5(() => {
+  useEffect6(() => {
     if (duration) {
       const timeoutHide = setTimeout(() => {
         setClosed(true);
@@ -1843,7 +1857,7 @@ var ColorPicker = (props) => {
 };
 
 // components/elements/PinInput.tsx
-import React26, { useEffect as useEffect6, useState as useState10 } from "react";
+import React26, { useEffect as useEffect7, useState as useState10 } from "react";
 import clsx7 from "clsx";
 var PinInput = ({
   label,
@@ -1862,7 +1876,7 @@ var PinInput = ({
       previousInput?.focus();
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     let unfilled = pin.includes(void 0);
     if (!unfilled && getPins) {
       getPins(pin);
@@ -1916,7 +1930,7 @@ var PinInput = ({
 };
 
 // components/elements/FileDropzone.tsx
-import React27, { useEffect as useEffect7, useState as useState11 } from "react";
+import React27, { useEffect as useEffect8, useState as useState11 } from "react";
 import { useDropzone } from "react-dropzone";
 import clsx8 from "clsx";
 var FileDropzone = ({
@@ -1960,7 +1974,7 @@ var FileDropzone = ({
       );
     }
   });
-  useEffect7(
+  useEffect8(
     () => () => {
       files?.forEach((file) => {
         URL.revokeObjectURL(file.preview);
@@ -1968,7 +1982,7 @@ var FileDropzone = ({
     },
     [files]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     setFiles(acceptedFiles);
   }, [acceptedFiles, cmp]);
   onClearFiles = () => {
@@ -1980,7 +1994,7 @@ var FileDropzone = ({
     acceptedFiles.length = 0;
     setFiles([]);
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (maxSize > 0) {
       const k = 1024;
       const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
@@ -4816,7 +4830,7 @@ var Progress = React38.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // components/elements/BackToTop.tsx
-import React39, { useState as useState14, useEffect as useEffect8, useRef as useRef5 } from "react";
+import React39, { useState as useState14, useEffect as useEffect9, useRef as useRef5 } from "react";
 import { clsx as clsx10 } from "clsx";
 var BackToTop = ({ ...props }) => {
   const [visible, setVisible] = useState14(false);
@@ -4846,7 +4860,7 @@ var BackToTop = ({ ...props }) => {
       props.anchor.current.scrollTo({ top: 0, behavior: "smooth" });
     }
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (!props.anchor.current)
       return;
     props.anchor.current.addEventListener("scroll", onScroll);
@@ -5761,17 +5775,17 @@ var SidebarItem = ({
 };
 
 // components/layout/AppLayout.tsx
-import React50, { useEffect as useEffect10, useRef as useRef6, useState as useState18 } from "react";
+import React50, { useEffect as useEffect11, useRef as useRef6, useState as useState18 } from "react";
 import clsx11 from "clsx";
 
 // components/hooks/useBreakpoint.ts
-import { useState as useState17, useEffect as useEffect9 } from "react";
+import { useState as useState17, useEffect as useEffect10 } from "react";
 var useBreakpoint = () => {
   const [breakpoint, setBreakpoint] = useState17(window?.innerWidth);
   const resize = () => {
     setBreakpoint(window?.innerWidth);
   };
-  useEffect9(() => {
+  useEffect10(() => {
     if (typeof window !== "undefined") {
       window?.addEventListener("resize", resize);
       return () => {
@@ -5827,7 +5841,7 @@ var AppLayout = ({
   });
   const [openSideMenu, setOpenSideMenu] = useState18(size > 600 ? true : false);
   let drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
-  useEffect10(() => {
+  useEffect11(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -7013,7 +7027,7 @@ var CodeConfirmation = (props) => {
 };
 
 // components/blocks/feedback/UserReferralSource.tsx
-import React59, { useEffect as useEffect11, useRef as useRef7, useState as useState22 } from "react";
+import React59, { useEffect as useEffect12, useRef as useRef7, useState as useState22 } from "react";
 import clsx12 from "clsx";
 var UserReferralSource = ({
   position = "bottom-right",
@@ -7029,7 +7043,7 @@ var UserReferralSource = ({
     "bottom-right": "hawa-right-4",
     "bottom-left": "hawa-left-4"
   };
-  useEffect11(() => {
+  useEffect12(() => {
     const timeoutHide = setTimeout(() => {
       if (closingTimer >= 0) {
         setClosingTimer(closingTimer - 1);
@@ -7099,7 +7113,7 @@ var UserReferralSource = ({
 };
 
 // components/blocks/feedback/FeedbackRating.tsx
-import React60, { useEffect as useEffect12, useRef as useRef8, useState as useState23 } from "react";
+import React60, { useEffect as useEffect13, useRef as useRef8, useState as useState23 } from "react";
 import clsx13 from "clsx";
 var FeedbackRating = ({
   position = "bottom-right",
@@ -7114,7 +7128,7 @@ var FeedbackRating = ({
     "bottom-right": "hawa-right-4",
     "bottom-left": "hawa-left-4"
   };
-  useEffect12(() => {
+  useEffect13(() => {
     const timeoutHide = setTimeout(() => {
       if (closingTimer >= 0) {
         setClosingTimer(closingTimer - 1);
@@ -7890,13 +7904,13 @@ var Usage = (props) => {
 import { useState as useState27 } from "react";
 
 // components/hooks/useHover.ts
-import { useEffect as useEffect13, useRef as useRef9, useState as useState28 } from "react";
+import { useEffect as useEffect14, useRef as useRef9, useState as useState28 } from "react";
 
 // components/hooks/useCarousel.ts
 import { useState as useState29, useRef as useRef10 } from "react";
 
 // components/hooks/useFocusWithin.ts
-import { useRef as useRef11, useState as useState30, useEffect as useEffect14 } from "react";
+import { useRef as useRef11, useState as useState30, useEffect as useEffect15 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -7926,7 +7940,7 @@ function useFocusWithin({
       onBlur?.(event);
     }
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (ref.current) {
       ref.current.addEventListener("focusin", handleFocusIn);
       ref.current.addEventListener("focusout", handleFocusOut);
@@ -7941,7 +7955,7 @@ function useFocusWithin({
 }
 
 // components/hooks/useMediaQuery.ts
-import { useState as useState31, useEffect as useEffect15, useRef as useRef12 } from "react";
+import { useState as useState31, useEffect as useEffect16, useRef as useRef12 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -7967,7 +7981,7 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef12();
-  useEffect15(() => {
+  useEffect16(() => {
     if ("matchMedia" in window) {
       queryRef.current = window.matchMedia(query);
       setMatches(queryRef.current.matches);
@@ -7982,16 +7996,16 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // components/hooks/useScrollPosition.ts
-import { useState as useState32, useEffect as useEffect16 } from "react";
+import { useState as useState32, useEffect as useEffect17 } from "react";
 
 // components/hooks/useTable.ts
-import { useState as useState33, useEffect as useEffect17 } from "react";
+import { useState as useState33, useEffect as useEffect18 } from "react";
 
 // components/hooks/useTabs.ts
-import { useEffect as useEffect18, useState as useState34 } from "react";
+import { useEffect as useEffect19, useState as useState34 } from "react";
 function useTabs(initialTab = "") {
   const [activeTab, setActiveTab] = useState34(initialTab);
-  useEffect18(() => {
+  useEffect19(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);
       setActiveTab(hash || initialTab);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.6.10-next",
+  "version": "0.6.11-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -51,6 +51,7 @@
     "lucide-react": "^0.279.0",
     "next": "^13.5.4",
     "next-themes": "^0.2.1",
+    "prism-react-renderer": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",