@mesob/ui 0.2.1 → 0.2.2

package/dist/components/carousel.js

@@ -10,7 +10,7 @@ function cn(...inputs) {
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
@@ -49,17 +49,17 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Comp,
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
       ...props,
-      children: [
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
         leftIcon,
         children,
         rightIcon
-      ]
+      ] })
     }
   );
 }
@@ -68,7 +68,7 @@ function Button({
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import useEmblaCarousel from "embla-carousel-react";
 import * as React from "react";
-import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var CarouselContext = React.createContext(null);
 function useCarousel() {
   const context = React.useContext(CarouselContext);
@@ -135,7 +135,7 @@ function Carousel({
       api.off("reInit", handleSelect);
     };
   }, [api]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     CarouselContext.Provider,
     {
       value: {
@@ -148,7 +148,7 @@ function Carousel({
         canScrollPrev,
         canScrollNext
       },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx2(
         "section",
         {
           onKeyDownCapture: handleKeyDown,
@@ -163,13 +163,13 @@ function Carousel({
 }
 function CarouselContent({ className, ...props }) {
   const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       ref: carouselRef,
       className: "overflow-hidden",
       "data-slot": "carousel-content",
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx2(
         "div",
         {
           className: cn(
@@ -188,7 +188,7 @@ function CarouselItem({
   ...props
 }) {
   const { orientation } = useCarousel();
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "fieldset",
     {
       "aria-roledescription": "slide",
@@ -224,8 +224,8 @@ function CarouselPrevious({
       onClick: scrollPrev,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(IconChevronLeft, {}),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+        /* @__PURE__ */ jsx2(IconChevronLeft, {}),
+        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
   );
@@ -252,8 +252,8 @@ function CarouselNext({
       onClick: scrollNext,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(IconChevronRight, {}),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+        /* @__PURE__ */ jsx2(IconChevronRight, {}),
+        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Next slide" })
       ]
     }
   );

package/dist/components/carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/button.tsx","../../src/components/carousel.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',\n        outline:\n          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\ntype ButtonProps = React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    leftIcon?: React.ReactNode;\n    rightIcon?: React.ReactNode;\n  };\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  leftIcon,\n  rightIcon,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {leftIcon}\n      {children}\n      {rightIcon}\n    </Comp>\n  );\n}\n\nexport { Button, buttonVariants };\n","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from 'embla-carousel-react';\nimport * as React from 'react';\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error('useCarousel must be used within a <Carousel />');\n  }\n\n  return context;\n}\n\nfunction Carousel({\n  orientation = 'horizontal',\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    },\n    plugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const scrollPrev = () => {\n    api?.scrollPrev();\n  };\n\n  const scrollNext = () => {\n    api?.scrollNext();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      scrollPrev();\n    } else if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      scrollNext();\n    }\n  };\n\n  React.useEffect(() => {\n    if (!(api && setApi)) {\n      return;\n    }\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) {\n      return;\n    }\n\n    const handleSelect = (carouselApi: CarouselApi) => {\n      if (!carouselApi) {\n        return;\n      }\n      setCanScrollPrev(carouselApi.canScrollPrev());\n      setCanScrollNext(carouselApi.canScrollNext());\n    };\n\n    handleSelect(api);\n    api.on('reInit', handleSelect);\n    api.on('select', handleSelect);\n\n    return () => {\n      api.off('select', handleSelect);\n      api.off('reInit', handleSelect);\n    };\n  }, [api]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <section\n        onKeyDownCapture={handleKeyDown}\n        className={cn('relative', className)}\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </section>\n    </CarouselContext.Provider>\n  );\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CarouselItem({\n  className,\n  ...props\n}: React.ComponentProps<'fieldset'>) {\n  const { orientation } = useCarousel();\n\n  return (\n    <fieldset\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        'min-w-0 shrink-0 grow-0 basis-full border-0 p-0 m-0',\n        orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = 'outline',\n  size = 'icon',\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal'\n          ? 'top-1/2 -left-12 -translate-y-1/2'\n          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconChevronLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\nfunction CarouselNext({\n  className,\n  variant = 'outline',\n  size = 'icon',\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal'\n          ? 'top-1/2 -right-12 -translate-y-1/2'\n          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconChevronRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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","names":["jsxs"]}
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/button.tsx","../../src/components/carousel.tsx"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { cn } from '@mesob/ui/lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',\n        outline:\n          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\ntype ButtonProps = React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    leftIcon?: React.ReactNode;\n    rightIcon?: React.ReactNode;\n  };\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  leftIcon,\n  rightIcon,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {leftIcon}\n          {children}\n          {rightIcon}\n        </>\n      )}\n    </Comp>\n  );\n}\n\nexport { Button, buttonVariants };\n","'use client';\n\nimport { Button } from '@mesob/ui/components/button';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from 'embla-carousel-react';\nimport * as React from 'react';\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n  opts?: CarouselOptions;\n  plugins?: CarouselPlugin;\n  orientation?: 'horizontal' | 'vertical';\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error('useCarousel must be used within a <Carousel />');\n  }\n\n  return context;\n}\n\nfunction Carousel({\n  orientation = 'horizontal',\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === 'horizontal' ? 'x' : 'y',\n    },\n    plugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const scrollPrev = () => {\n    api?.scrollPrev();\n  };\n\n  const scrollNext = () => {\n    api?.scrollNext();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      scrollPrev();\n    } else if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      scrollNext();\n    }\n  };\n\n  React.useEffect(() => {\n    if (!(api && setApi)) {\n      return;\n    }\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) {\n      return;\n    }\n\n    const handleSelect = (carouselApi: CarouselApi) => {\n      if (!carouselApi) {\n        return;\n      }\n      setCanScrollPrev(carouselApi.canScrollPrev());\n      setCanScrollNext(carouselApi.canScrollNext());\n    };\n\n    handleSelect(api);\n    api.on('reInit', handleSelect);\n    api.on('select', handleSelect);\n\n    return () => {\n      api.off('select', handleSelect);\n      api.off('reInit', handleSelect);\n    };\n  }, [api]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <section\n        onKeyDownCapture={handleKeyDown}\n        className={cn('relative', className)}\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </section>\n    </CarouselContext.Provider>\n  );\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CarouselItem({\n  className,\n  ...props\n}: React.ComponentProps<'fieldset'>) {\n  const { orientation } = useCarousel();\n\n  return (\n    <fieldset\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        'min-w-0 shrink-0 grow-0 basis-full border-0 p-0 m-0',\n        orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = 'outline',\n  size = 'icon',\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal'\n          ? 'top-1/2 -left-12 -translate-y-1/2'\n          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconChevronLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\nfunction CarouselNext({\n  className,\n  variant = 'outline',\n  size = 'icon',\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        'absolute size-8 rounded-full',\n        orientation === 'horizontal'\n          ? 'top-1/2 -right-12 -translate-y-1/2'\n          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconChevronRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n};\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/components/data-table/index.js

@@ -250,7 +250,7 @@ import { IconChevronRight } from "@tabler/icons-react";
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
@@ -289,29 +289,29 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3(
     Comp,
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
       ...props,
-      children: [
+      children: asChild ? children : /* @__PURE__ */ jsxs2(Fragment, { children: [
         leftIcon,
         children,
         rightIcon
-      ]
+      ] })
     }
   );
 }
 
 // src/components/data-table/data-table-action.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function DataTableAction({
   onClick,
   disabled,
   "aria-label": ariaLabel = "Open menu"
 }) {
-  return /* @__PURE__ */ jsx3("div", { className: "flex justify-end align-center", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx4("div", { className: "flex justify-end align-center", children: /* @__PURE__ */ jsxs3(
     Button,
     {
       variant: "ghost",
@@ -319,24 +319,24 @@ function DataTableAction({
       onClick,
       disabled,
       children: [
-        /* @__PURE__ */ jsx3("span", { className: "sr-only", children: ariaLabel }),
-        /* @__PURE__ */ jsx3(IconChevronRight, { className: "h-4 w-4" })
+        /* @__PURE__ */ jsx4("span", { className: "sr-only", children: ariaLabel }),
+        /* @__PURE__ */ jsx4(IconChevronRight, { className: "h-4 w-4" })
       ]
     }
   ) });
 }
 
 // src/components/data-table/data-table-column-header.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function DataTableColumnHeader({
   column,
   title,
   className
 }) {
   if (!column.getCanSort()) {
-    return /* @__PURE__ */ jsx4("div", { className: cn(className), children: title });
+    return /* @__PURE__ */ jsx5("div", { className: cn(className), children: title });
   }
-  return /* @__PURE__ */ jsx4("div", { className: cn("flex items-center gap-2", className), children: /* @__PURE__ */ jsx4("span", { children: title }) });
+  return /* @__PURE__ */ jsx5("div", { className: cn("flex items-center gap-2", className), children: /* @__PURE__ */ jsx5("span", { children: title }) });
 }
 
 // src/hooks/use-translation.ts
@@ -345,7 +345,7 @@ import { useMemo as useMemo3 } from "react";
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/components/mesob-context.tsx
 import {
@@ -353,7 +353,7 @@ import {
   useContext,
   useMemo as useMemo2
 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MesobContext = createContext(null);
 function useMesob() {
   return useContext(MesobContext);
@@ -383,16 +383,16 @@ import {
 // src/components/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -412,7 +412,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx7(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx7(IconChevronDown, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ jsx8(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx8(IconChevronDown, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -424,7 +424,7 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
@@ -437,8 +437,8 @@ function SelectContent({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx7(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx8(
           SelectPrimitive.Viewport,
           {
             className: cn(
@@ -448,7 +448,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ jsx7(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx8(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -468,8 +468,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx7("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx7(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx7(IconCheck, { className: "size-4" }) }) }),
-        /* @__PURE__ */ jsx7(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ jsx8("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(IconCheck, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -478,7 +478,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -487,7 +487,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx7(IconChevronUp, { className: "size-4" })
+      children: /* @__PURE__ */ jsx8(IconChevronUp, { className: "size-4" })
     }
   );
 }
@@ -495,7 +495,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -504,13 +504,13 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx7(IconChevronDown, { className: "size-4" })
+      children: /* @__PURE__ */ jsx8(IconChevronDown, { className: "size-4" })
     }
   );
 }
 
 // src/components/data-table/data-table-pagination.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function addRange(pages, start, end) {
   for (let i = start; i <= end; i++) {
     pages.push(i);
@@ -566,27 +566,27 @@ function DataTablePagination({
   const pageText = `${t("page")} ${pageIndex + 1} ${t("of")} ${pageCount || 1}`;
   return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-4 px-2 sm:flex-row sm:items-center sm:justify-between", children: [
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-center gap-4 sm:justify-start", children: [
-      /* @__PURE__ */ jsx8("div", { className: "text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs6("span", { children: [
+      /* @__PURE__ */ jsx9("div", { className: "text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs6("span", { children: [
         rowText,
-        /* @__PURE__ */ jsx8("span", { className: "mx-2", children: "\xB7" }),
+        /* @__PURE__ */ jsx9("span", { className: "mx-2", children: "\xB7" }),
         pageText
       ] }) }),
       /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx8("span", { className: "text-sm font-medium whitespace-nowrap", children: t("rowsPerPage") }),
+        /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium whitespace-nowrap", children: t("rowsPerPage") }),
         /* @__PURE__ */ jsxs6(
           Select,
           {
             value: `${pageSize}`,
             onValueChange: (value) => onPageSizeChange(Number(value)),
             children: [
-              /* @__PURE__ */ jsx8(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx8(SelectValue, { placeholder: pageSize }) }),
-              /* @__PURE__ */ jsx8(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx8(SelectItem, { value: `${size}`, children: size }, size)) })
+              /* @__PURE__ */ jsx9(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx9(SelectValue, { placeholder: pageSize }) }),
+              /* @__PURE__ */ jsx9(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx9(SelectItem, { value: `${size}`, children: size }, size)) })
             ]
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "flex justify-center sm:justify-end", children: /* @__PURE__ */ jsxs6("nav", { "aria-label": "Pagination", className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx9("div", { className: "flex justify-center sm:justify-end", children: /* @__PURE__ */ jsxs6("nav", { "aria-label": "Pagination", className: "flex items-center gap-1", children: [
       /* @__PURE__ */ jsxs6(
         Button,
         {
@@ -597,8 +597,8 @@ function DataTablePagination({
           disabled: !canPreviousPage,
           "aria-label": t("firstPage"),
           children: [
-            /* @__PURE__ */ jsx8(IconChevronsLeft, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx8("span", { className: "sr-only", children: t("firstPage") })
+            /* @__PURE__ */ jsx9(IconChevronsLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("firstPage") })
           ]
         }
       ),
@@ -612,8 +612,8 @@ function DataTablePagination({
           disabled: !canPreviousPage,
           "aria-label": t("previousPage"),
           children: [
-            /* @__PURE__ */ jsx8(IconChevronLeft, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx8("span", { className: "sr-only", children: t("previousPage") })
+            /* @__PURE__ */ jsx9(IconChevronLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("previousPage") })
           ]
         }
       ),
@@ -621,7 +621,7 @@ function DataTablePagination({
         if (page === "ellipsis") {
           const prevPage = idx > 0 ? pageNumbers[idx - 1] : null;
           const nextPage = idx < pageNumbers.length - 1 ? pageNumbers[idx + 1] : null;
-          return /* @__PURE__ */ jsx8(
+          return /* @__PURE__ */ jsx9(
             "span",
             {
               className: "flex h-8 w-8 items-center justify-center text-muted-foreground",
@@ -633,7 +633,7 @@ function DataTablePagination({
         }
         const pageNum = page;
         const isActive = pageNum === pageIndex + 1;
-        return /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx9(
           Button,
           {
             variant: isActive ? "default" : "outline",
@@ -657,8 +657,8 @@ function DataTablePagination({
           disabled: !canNextPage,
           "aria-label": t("nextPage"),
           children: [
-            /* @__PURE__ */ jsx8(IconChevronRight2, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx8("span", { className: "sr-only", children: t("nextPage") })
+            /* @__PURE__ */ jsx9(IconChevronRight2, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("nextPage") })
           ]
         }
       ),
@@ -672,8 +672,8 @@ function DataTablePagination({
           disabled: !canNextPage,
           "aria-label": t("lastPage"),
           children: [
-            /* @__PURE__ */ jsx8(IconChevronsRight, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx8("span", { className: "sr-only", children: t("lastPage") })
+            /* @__PURE__ */ jsx9(IconChevronsRight, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx9("span", { className: "sr-only", children: t("lastPage") })
           ]
         }
       )
@@ -687,16 +687,16 @@ import { IconSettings } from "@tabler/icons-react";
 // src/components/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { IconCheck as IconCheck2, IconChevronRight as IconChevronRight3, IconCircle } from "@tabler/icons-react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx10(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -709,7 +709,7 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -739,7 +739,7 @@ function DropdownMenuCheckboxItem({
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx9("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx9(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx9(IconCheck2, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx10("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx10(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx10(IconCheck2, { className: "size-4" }) }) }),
         children
       ]
     }
@@ -750,7 +750,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Label,
     {
       "data-slot": "dropdown-menu-label",
@@ -767,7 +767,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -778,29 +778,29 @@ function DropdownMenuSeparator({
 }
 
 // src/components/data-table/data-table-view-options.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function DataTableViewOptions({
   table
 }) {
   return /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx11(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
       Button,
       {
         variant: "outline",
         size: "sm",
         className: "ml-auto hidden h-8 lg:flex",
         children: [
-          /* @__PURE__ */ jsx10(IconSettings, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx11(IconSettings, { className: "mr-2 h-4 w-4" }),
           "View"
         ]
       }
     ) }),
     /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", className: "w-[150px]", children: [
-      /* @__PURE__ */ jsx10(DropdownMenuLabel, { children: "Toggle columns" }),
-      /* @__PURE__ */ jsx10(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx11(DropdownMenuLabel, { children: "Toggle columns" }),
+      /* @__PURE__ */ jsx11(DropdownMenuSeparator, {}),
       table.getAllColumns().filter(
         (column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
-      ).map((column) => /* @__PURE__ */ jsx10(
+      ).map((column) => /* @__PURE__ */ jsx11(
         DropdownMenuCheckboxItem,
         {
           className: "capitalize",