@sikka/hawa 0.26.38-next → 0.27.0-next

package/dist/elements/index.d.ts

@@ -16,6 +16,7 @@ export { ColumnDef } from '@tanstack/react-table';
 import { L as LabelProps } from '../Radio-K1WGpnGA.js';
 export { b as Label, a as Radio, R as RadioOptionsTypes, c as Select, S as SelectOptionProps } from '../Radio-K1WGpnGA.js';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Command as Command$1 } from 'cmdk';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -455,6 +456,36 @@ declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.Ta
 } & React.RefAttributes<HTMLButtonElement>>;
 declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
+type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
+    isLoading?: boolean;
+    containerClassName?: string;
+    margin?: "none" | "normal" | "large";
+    width?: "small" | "normal" | "full" | "auto";
+    /** The label of the input field   */
+    label?: any;
+    labelProps?: LabelProps;
+    hideSeparator?: boolean;
+    /** The small red text under the input field to show validation.   */
+    helperText?: any;
+    forceHideHelperText?: boolean;
+    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
+    /** The icon inside the input field */
+    icon?: any;
+    /** Boolean to enable/disable editing the input field and using it as a text field   */
+    preview?: boolean;
+    iconInside?: React__default.ReactNode;
+    endIcon?: React__default.ReactNode;
+    endIconProps?: {
+        className?: string;
+    };
+    startIcon?: React__default.ReactNode;
+    placeholder?: React__default.ReactNode;
+    /** Show the count of characters left in the input field. Works along with maxLength prop.   */
+    showCount?: boolean;
+    countPosition?: "top" | "bottom" | "center";
+    popup?: boolean;
+    popupContent?: React__default.ReactNode;
+};
 declare const Input: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & {
     isLoading?: boolean | undefined;
     containerClassName?: string | undefined;
@@ -486,47 +517,33 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     popupContent?: React__default.ReactNode;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
-declare const Command: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement> & {
-    label?: string | undefined;
-    shouldFilter?: boolean | undefined;
-    filter?: ((value: string, search: string) => number) | undefined;
-    value?: string | undefined;
-    onValueChange?: ((value: string) => void) | undefined;
-    loop?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type CommandProps = React.ComponentPropsWithoutRef<typeof Command$1>;
 interface CommandDialogProps extends DialogProps {
 }
+interface CommandInputProps extends React.ComponentPropsWithoutRef<typeof Command$1.Input> {
+}
+interface CommandListProps extends React.ComponentPropsWithoutRef<typeof Command$1.List> {
+}
+interface CommandEmptyProps extends React.ComponentPropsWithoutRef<typeof Command$1.Empty> {
+}
+interface CommandGroupProps extends React.ComponentPropsWithoutRef<typeof Command$1.Group> {
+}
+interface CommandSeparatorProps extends React.ComponentPropsWithoutRef<typeof Command$1.Separator> {
+}
+interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof Command$1.Item> {
+}
+interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<React.ElementRef<typeof Command$1>>>;
 declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => React.JSX.Element;
-declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
-    value?: string | undefined;
-    onValueChange?: ((search: string) => void) | undefined;
-} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const CommandList: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "heading" | "value"> & {
-    heading?: React.ReactNode;
-    value?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & {
-    alwaysRender?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "disabled" | "value"> & {
-    disabled?: boolean | undefined;
-    onSelect?: ((value: string) => void) | undefined;
-    value?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>;
 declare const CommandShortcut: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement> & CommandShortcutProps): React.JSX.Element;
     displayName: string;
 };
 
@@ -737,9 +754,19 @@ type CodeBlockTypes = {
     fileName?: string;
     /** Code content to be displayed within the code block.*/
     code?: string;
+    /** line numbers for code block   */
     lineNumbers?: boolean;
-    forcedDarkMode?: boolean;
-    className?: string;
+    /** Wrap text in code block */
+    wrapText?: boolean;
+    /** Custom class names for the code block */
+    classNames?: {
+        root?: string;
+        tabs?: string;
+        tab?: string;
+        code?: string;
+        fileName?: string;
+        codeBlockContainer?: string;
+    };
 };
 declare const CodeBlock: FC<CodeBlockTypes>;
 
@@ -791,4 +818,4 @@ declare const InterfaceSettings: FC<TypographyTypes>;
 
 declare const FileUploader: ({ handleFile, className }: any) => React__default.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, AccordionRoot, AccordionTrigger, Alert, AppStores, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, Checkbox, ChipTypes, CodeBlock, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, FileDropzone, FileUploader, Input, InterfaceSettings, LabelProps, Loading, Logos, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, Progress, ProgressCircle, ScrollArea, ScrollBar, ScrollIndicator, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTable, Skeleton, Slider, SortButton, StandardNavigationMenuItem, StopPropagationWrapper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toaster, ToasterToastProps, Tooltip, buttonVariants, navigationMenuTriggerStyle };
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, AccordionRoot, AccordionTrigger, Alert, AppStores, Avatar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, Checkbox, ChipTypes, CodeBlock, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Count, DataTable, DestroyableCard, Dialog, DialogBody, DialogCarousel, DialogCarouselContent, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogStep, DialogSteps, DialogTitle, DialogTrigger, FileDropzone, FileUploader, Input, InterfaceSettings, LabelProps, Loading, Logos, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PasswordInput, PasswordStrengthIndicator, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, Progress, ProgressCircle, ScrollArea, ScrollBar, ScrollIndicator, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTable, Skeleton, Slider, SortButton, StandardNavigationMenuItem, StopPropagationWrapper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TextFieldTypes, Textarea, type TextareaProps, Toaster, ToasterToastProps, Tooltip, buttonVariants, navigationMenuTriggerStyle };

package/dist/elements/index.js

@@ -790,8 +790,11 @@ var DropdownMenu = ({
         className: cn(
           className,
           widthStyles[width],
-          "hawa-flex hawa-flex-col hawa-gap-1"
+          "hawa-flex hawa-flex-col hawa-gap-1 hawa-overflow-y-auto"
         ),
+        style: {
+          maxHeight: "var(--radix-dropdown-menu-content-available-height)"
+        },
         align,
         alignOffset
       },
@@ -1068,7 +1071,7 @@ var Accordion = React9.forwardRef(
         {
           disabled: item.disabled || false,
           className: cn(
-            "hawa-transition-all",
+            "hawa-transition-all hawa-text-start",
             design === "separated" ? "hawa-rounded data-[state=open]:hawa-rounded-b-none" : {
               "hawa-rounded-t": index === 0,
               "data-[state=closed]:hawa-rounded-b": index === items.length - 1
@@ -6964,13 +6967,30 @@ function useClipboard({ timeout = 2e3 } = {}) {
 // elements/codeBlock/CodeBlock.tsx
 (typeof global !== "undefined" ? global : window).Prism = import_prism_react_renderer.Prism;
 require("prismjs/components/prism-bash");
+var CopyIcon = () => /* @__PURE__ */ import_react30.default.createElement(
+  "svg",
+  {
+    "aria-label": "Copy",
+    stroke: "currentColor",
+    fill: "none",
+    strokeWidth: "2",
+    viewBox: "0 0 24 24",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    height: "1em",
+    width: "1em"
+  },
+  /* @__PURE__ */ import_react30.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ import_react30.default.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+);
 var CodeBlock = ({
   tabs,
   code,
   fileName,
-  className,
+  classNames,
   language = "javascript",
   // default to JavaScript if no language is provided
+  wrapText = false,
   width = "full",
   ...props
 }) => {
@@ -6988,16 +7008,50 @@ var CodeBlock = ({
     {
       className: cn(
         widthStyles[width],
-        "hawa-w-full hawa-flex-col hawa-items-center hawa-rounded hawa-bg-background hawa-text-left hawa-my-2 hawa-text-white sm:hawa-text-base",
-        className
+        "hawa-w-full hawa-flex-col hawa-relative hawa-items-center hawa-rounded hawa-bg-background hawa-text-left hawa-my-2 hawa-text-white sm:hawa-text-base",
+        classNames == null ? void 0 : classNames.root
       )
     },
+    /* @__PURE__ */ import_react30.default.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-flex hawa-absolute  hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-z-50  hawa-right-3.5",
+          {
+            "hawa-top-3.5": !tabs && !fileName,
+            "hawa-top-[50px]": tabs && !fileName,
+            "hawa-top-11": !tabs && fileName,
+            "hawa-top-[80px]": tabs && fileName
+          }
+        )
+      },
+      /* @__PURE__ */ import_react30.default.createElement(
+        Tooltip,
+        {
+          open: clipboard.copied,
+          side: "left",
+          content: /* @__PURE__ */ import_react30.default.createElement("div", null, "Copied!"),
+          triggerProps: { asChild: true }
+        },
+        /* @__PURE__ */ import_react30.default.createElement(
+          Button,
+          {
+            size: "smallIcon",
+            onClick: () => clipboard.copy(tabs ? tabs[selectedTab].code : code),
+            variant: "outline",
+            className: "hawa-text-gray-200 hawa-opacity-50 "
+          },
+          /* @__PURE__ */ import_react30.default.createElement(CopyIcon, null)
+        )
+      )
+    ),
     fileName && /* @__PURE__ */ import_react30.default.createElement(
       "div",
       {
         className: cn(
           "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-2 hawa-py-0.5 hawa-pb-0 hawa-font-mono hawa-text-foreground",
-          fileName && tabs ? "hawa-bg-primary/10" : "hawa-bg-primary/15"
+          fileName && tabs ? "hawa-bg-primary/10" : "hawa-bg-primary/15",
+          classNames == null ? void 0 : classNames.fileName
         )
       },
       /* @__PURE__ */ import_react30.default.createElement(
@@ -7014,9 +7068,9 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          // hawa-bg-gray-300 dark:hawa-bg-red-600
           "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t  hawa-p-1 hawa-bg-primary/15 hawa-pb-0 hawa-font-mono hawa-text-foreground",
-          tabs && fileName && "hawa-rounded-t-none"
+          tabs && fileName && "hawa-rounded-t-none",
+          classNames == null ? void 0 : classNames.tabs
         )
       },
       tabs.map((tab, i) => /* @__PURE__ */ import_react30.default.createElement(
@@ -7024,7 +7078,8 @@ var CodeBlock = ({
         {
           key: i,
           className: cn(
-            selectedTab === i ? " hawa-border-b-2 hawa-border-primary" : "hawa-bg-transparent"
+            selectedTab === i ? " hawa-border-b-2 hawa-border-primary" : "hawa-bg-transparent",
+            classNames == null ? void 0 : classNames.tab
           )
         },
         /* @__PURE__ */ import_react30.default.createElement(
@@ -7043,8 +7098,10 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          "hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-gray-800 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base ",
-          tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded"
+          "hawa-flex hawa-w-full hawa-relative hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-gray-800 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base",
+          tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded",
+          classNames == null ? void 0 : classNames.codeBlockContainer,
+          "hawa-overflow-y-auto"
         )
       },
       /* @__PURE__ */ import_react30.default.createElement(
@@ -7054,44 +7111,18 @@ var CodeBlock = ({
           code: tabs ? tabs[selectedTab].code : code || "",
           language
         },
-        ({ className: className2, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react30.default.createElement("pre", { className: "hawa-min-h-[37.75px] hawa-w-full hawa-overflow-auto hawa-p-4 hawa-font-mono hawa-text-foreground" }, tokens.map((line, i) => /* @__PURE__ */ import_react30.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react30.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react30.default.createElement("span", { key, ...getTokenProps({ token }) })))))
-      ),
-      /* @__PURE__ */ import_react30.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-p-2" }, /* @__PURE__ */ import_react30.default.createElement(
-        Tooltip,
-        {
-          open: clipboard.copied,
-          side: "left",
-          content: /* @__PURE__ */ import_react30.default.createElement("div", null, "Copied!"),
-          triggerProps: {
-            asChild: true
-          }
-        },
-        /* @__PURE__ */ import_react30.default.createElement(
-          Button,
+        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ import_react30.default.createElement(
+          "pre",
           {
-            size: "icon",
-            onClick: () => clipboard.copy(tabs ? tabs[selectedTab].code : code),
-            variant: "outline",
-            className: "hawa-text-gray-200 hawa-opacity-50 "
+            className: cn(
+              "hawa-min-h-[37.75px] !hawa-pe-12 hawa-w-full hawa-p-4 hawa-font-mono hawa-text-foreground",
+              classNames == null ? void 0 : classNames.code,
+              wrapText && "hawa-text-wrap"
+            )
           },
-          /* @__PURE__ */ import_react30.default.createElement(
-            "svg",
-            {
-              "aria-label": "Copy",
-              stroke: "currentColor",
-              fill: "none",
-              strokeWidth: "2",
-              viewBox: "0 0 24 24",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              height: "1em",
-              width: "1em"
-            },
-            /* @__PURE__ */ import_react30.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-            /* @__PURE__ */ import_react30.default.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
-          )
+          tokens.map((line, i) => /* @__PURE__ */ import_react30.default.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ import_react30.default.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ import_react30.default.createElement("span", { key, ...getTokenProps({ token }) }))))
         )
-      ))
+      )
     )
   );
 };

package/dist/elements/index.mjs

@@ -27,7 +27,7 @@ import {
   TabsTrigger,
   Textarea,
   UncheckMark
-} from "../chunk-VCCUBQFI.mjs";
+} from "../chunk-U7BFMH2T.mjs";
 import {
   Sheet,
   SheetClose,
@@ -39,7 +39,7 @@ import {
   SheetPortal,
   SheetTitle,
   SheetTrigger
-} from "../chunk-AXTPTA3S.mjs";
+} from "../chunk-BOVZAUWD.mjs";
 import {
   Button,
   Card,
@@ -73,7 +73,7 @@ import {
   buttonVariants,
   calculateLuminance,
   cn
-} from "../chunk-D3KUSRHL.mjs";
+} from "../chunk-3MC4JLSW.mjs";
 import {
   __require
 } from "../chunk-ZFXKCRJC.mjs";
@@ -164,7 +164,7 @@ var Accordion = React3.forwardRef(
         {
           disabled: item.disabled || false,
           className: cn(
-            "hawa-transition-all",
+            "hawa-transition-all hawa-text-start",
             design === "separated" ? "hawa-rounded data-[state=open]:hawa-rounded-b-none" : {
               "hawa-rounded-t": index === 0,
               "data-[state=closed]:hawa-rounded-b": index === items.length - 1
@@ -2640,20 +2640,33 @@ var ScrollIndicator = ({
 
 // elements/codeBlock/CodeBlock.tsx
 import React27, { useState as useState11 } from "react";
-import {
-  Highlight,
-  themes,
-  Prism
-} from "prism-react-renderer";
+import { Highlight, themes, Prism } from "prism-react-renderer";
 (typeof global !== "undefined" ? global : window).Prism = Prism;
 __require("prismjs/components/prism-bash");
+var CopyIcon = () => /* @__PURE__ */ React27.createElement(
+  "svg",
+  {
+    "aria-label": "Copy",
+    stroke: "currentColor",
+    fill: "none",
+    strokeWidth: "2",
+    viewBox: "0 0 24 24",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    height: "1em",
+    width: "1em"
+  },
+  /* @__PURE__ */ React27.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ React27.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+);
 var CodeBlock = ({
   tabs,
   code,
   fileName,
-  className,
+  classNames,
   language = "javascript",
   // default to JavaScript if no language is provided
+  wrapText = false,
   width = "full",
   ...props
 }) => {
@@ -2671,16 +2684,50 @@ var CodeBlock = ({
     {
       className: cn(
         widthStyles[width],
-        "hawa-w-full hawa-flex-col hawa-items-center hawa-rounded hawa-bg-background hawa-text-left hawa-my-2 hawa-text-white sm:hawa-text-base",
-        className
+        "hawa-w-full hawa-flex-col hawa-relative hawa-items-center hawa-rounded hawa-bg-background hawa-text-left hawa-my-2 hawa-text-white sm:hawa-text-base",
+        classNames == null ? void 0 : classNames.root
       )
     },
+    /* @__PURE__ */ React27.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-flex hawa-absolute  hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-z-50  hawa-right-3.5",
+          {
+            "hawa-top-3.5": !tabs && !fileName,
+            "hawa-top-[50px]": tabs && !fileName,
+            "hawa-top-11": !tabs && fileName,
+            "hawa-top-[80px]": tabs && fileName
+          }
+        )
+      },
+      /* @__PURE__ */ React27.createElement(
+        Tooltip,
+        {
+          open: clipboard.copied,
+          side: "left",
+          content: /* @__PURE__ */ React27.createElement("div", null, "Copied!"),
+          triggerProps: { asChild: true }
+        },
+        /* @__PURE__ */ React27.createElement(
+          Button,
+          {
+            size: "smallIcon",
+            onClick: () => clipboard.copy(tabs ? tabs[selectedTab].code : code),
+            variant: "outline",
+            className: "hawa-text-gray-200 hawa-opacity-50 "
+          },
+          /* @__PURE__ */ React27.createElement(CopyIcon, null)
+        )
+      )
+    ),
     fileName && /* @__PURE__ */ React27.createElement(
       "div",
       {
         className: cn(
           "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-2 hawa-py-0.5 hawa-pb-0 hawa-font-mono hawa-text-foreground",
-          fileName && tabs ? "hawa-bg-primary/10" : "hawa-bg-primary/15"
+          fileName && tabs ? "hawa-bg-primary/10" : "hawa-bg-primary/15",
+          classNames == null ? void 0 : classNames.fileName
         )
       },
       /* @__PURE__ */ React27.createElement(
@@ -2697,9 +2744,9 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          // hawa-bg-gray-300 dark:hawa-bg-red-600
           "hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t  hawa-p-1 hawa-bg-primary/15 hawa-pb-0 hawa-font-mono hawa-text-foreground",
-          tabs && fileName && "hawa-rounded-t-none"
+          tabs && fileName && "hawa-rounded-t-none",
+          classNames == null ? void 0 : classNames.tabs
         )
       },
       tabs.map((tab, i) => /* @__PURE__ */ React27.createElement(
@@ -2707,7 +2754,8 @@ var CodeBlock = ({
         {
           key: i,
           className: cn(
-            selectedTab === i ? " hawa-border-b-2 hawa-border-primary" : "hawa-bg-transparent"
+            selectedTab === i ? " hawa-border-b-2 hawa-border-primary" : "hawa-bg-transparent",
+            classNames == null ? void 0 : classNames.tab
           )
         },
         /* @__PURE__ */ React27.createElement(
@@ -2726,8 +2774,10 @@ var CodeBlock = ({
       "div",
       {
         className: cn(
-          "hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-gray-800 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base ",
-          tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded"
+          "hawa-flex hawa-w-full hawa-relative hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-gray-800 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base",
+          tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded",
+          classNames == null ? void 0 : classNames.codeBlockContainer,
+          "hawa-overflow-y-auto"
         )
       },
       /* @__PURE__ */ React27.createElement(
@@ -2737,50 +2787,24 @@ var CodeBlock = ({
           code: tabs ? tabs[selectedTab].code : code || "",
           language
         },
-        ({ className: className2, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React27.createElement("pre", { className: "hawa-min-h-[37.75px] hawa-w-full hawa-overflow-auto hawa-p-4 hawa-font-mono hawa-text-foreground" }, tokens.map((line, i) => /* @__PURE__ */ React27.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ React27.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ React27.createElement("span", { key, ...getTokenProps({ token }) })))))
-      ),
-      /* @__PURE__ */ React27.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-p-2" }, /* @__PURE__ */ React27.createElement(
-        Tooltip,
-        {
-          open: clipboard.copied,
-          side: "left",
-          content: /* @__PURE__ */ React27.createElement("div", null, "Copied!"),
-          triggerProps: {
-            asChild: true
-          }
-        },
-        /* @__PURE__ */ React27.createElement(
-          Button,
+        ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ React27.createElement(
+          "pre",
           {
-            size: "icon",
-            onClick: () => clipboard.copy(tabs ? tabs[selectedTab].code : code),
-            variant: "outline",
-            className: "hawa-text-gray-200 hawa-opacity-50 "
+            className: cn(
+              "hawa-min-h-[37.75px] !hawa-pe-12 hawa-w-full hawa-p-4 hawa-font-mono hawa-text-foreground",
+              classNames == null ? void 0 : classNames.code,
+              wrapText && "hawa-text-wrap"
+            )
           },
-          /* @__PURE__ */ React27.createElement(
-            "svg",
-            {
-              "aria-label": "Copy",
-              stroke: "currentColor",
-              fill: "none",
-              strokeWidth: "2",
-              viewBox: "0 0 24 24",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              height: "1em",
-              width: "1em"
-            },
-            /* @__PURE__ */ React27.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-            /* @__PURE__ */ React27.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
-          )
+          tokens.map((line, i) => /* @__PURE__ */ React27.createElement("div", { key: i, ...getLineProps({ line }) }, props.lineNumbers && /* @__PURE__ */ React27.createElement("span", { className: "hawa-mr-4" }, i + 1), line.map((token, key) => /* @__PURE__ */ React27.createElement("span", { key, ...getTokenProps({ token }) }))))
         )
-      ))
+      )
     )
   );
 };
 
 // elements/carousel/Carousel.tsx
-import React28, { useEffect as useEffect10, useState as useState12 } from "react";
+import React28, { useEffect as useEffect9, useState as useState12 } from "react";
 import useEmblaCarousel from "embla-carousel-react";
 var Carousel = ({
   items,
@@ -2797,7 +2821,7 @@ var Carousel = ({
     loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
   });
   const [selectedIndex, setSelectedIndex] = useState12(0);
-  useEffect10(() => {
+  useEffect9(() => {
     function selectHandler() {
       const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
       setSelectedIndex(index || 0);
@@ -2807,7 +2831,7 @@ var Carousel = ({
       emblaApi == null ? void 0 : emblaApi.off("select", selectHandler);
     };
   }, [emblaApi]);
-  useEffect10(() => {
+  useEffect9(() => {
     let autoplayTimer;
     if (autoplay && emblaApi) {
       autoplayTimer = setInterval(() => {