@zenify-omni/chat-ui-react-js 0.1.0

package/components/ui/separator.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../../lib/utils.js";
+const Separator = React.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export {
+  Separator
+};

package/components/ui/sheet.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+import { Cross2Icon } from "@radix-ui/react-icons";
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "data-[state=open]:animate-ian fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+const SheetContent = React.forwardRef(
+  ({ side = "right", className, children, classNameOverLay, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, { className: cn(classNameOverLay) }),
+    /* @__PURE__ */ jsx(SheetPrimitive.Title, { className: cn(classNameOverLay) }),
+    /* @__PURE__ */ jsx(SheetPrimitive.Description, { className: cn(classNameOverLay) }),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Content,
+      {
+        ref,
+        className: cn(sheetVariants({ side }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+            /* @__PURE__ */ jsx(Cross2Icon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] }),
+          children
+        ]
+      }
+    )
+  ] })
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger
+};

package/components/ui/skeleton.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md bg-primary/10", className),
+      ...props
+    }
+  );
+}
+export {
+  Skeleton
+};

package/components/ui/slider.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../../lib/utils.js";
+const Slider = React.forwardRef((props, ref) => {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "relative flex w-full touch-none select-none items-center",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+        /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+      ]
+    }
+  );
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+export {
+  Slider
+};

package/components/ui/sonner.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, toast } from "sonner";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const errorSetRef = /* @__PURE__ */ new Set();
+const successSetRef = /* @__PURE__ */ new Set();
+const coerce = (message) => typeof message === "string" ? message : message?.message && typeof message.message === "string" ? message.message : i18n.t("common:error.generic", { defaultValue: "\u0110\xE3 c\xF3 l\u1ED7i x\u1EA3y ra" });
+const showErrorToast = (message, options = {}) => {
+  const text = coerce(message);
+  if (errorSetRef.has(text)) return;
+  toast.error(text, options);
+  errorSetRef.add(text);
+  setTimeout(() => {
+    errorSetRef.delete(text);
+  }, 2e3);
+};
+const showSuccessToast = (message, options = {}) => {
+  const text = coerce(message);
+  if (successSetRef.has(text)) return;
+  toast.success(text, options);
+  successSetRef.add(text);
+  setTimeout(() => {
+    successSetRef.delete(text);
+  }, 2e3);
+};
+const showInfoToast = (message, options = {}) => {
+  const text = coerce(message);
+  if (successSetRef.has(text)) return;
+  toast.info(text, options);
+  successSetRef.add(text);
+  setTimeout(() => {
+    successSetRef.delete(text);
+  }, 2e3);
+};
+const showWarningToast = (message, options = {}) => {
+  const text = coerce(message);
+  if (successSetRef.has(text)) return;
+  toast.warning(text, options);
+  successSetRef.add(text);
+  setTimeout(() => {
+    successSetRef.delete(text);
+  }, 2e3);
+};
+const Toaster = ({ ...props }) => {
+  const { theme = "system" } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Sonner,
+    {
+      theme,
+      className: "toaster group z-[9999]",
+      closeButton: true,
+      duration: 3e3,
+      style: {
+        "--toast-close-button-start": "unset",
+        "--toast-close-button-end": "0",
+        "--toast-close-button-transform": "translate(35%, -35%)"
+      },
+      toastOptions: {
+        classNames: {
+          toast: "pointer-events-auto group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+        }
+      },
+      ...props
+    }
+  );
+};
+export {
+  Toaster,
+  showErrorToast,
+  showInfoToast,
+  showSuccessToast,
+  showWarningToast
+};

package/components/ui/switch.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "../../lib/utils.js";
+const switchSizes = {
+  sm: {
+    root: "h-4 w-8",
+    thumb: "h-3 w-3 data-[state=checked]:translate-x-4"
+  },
+  md: {
+    root: "h-6 w-11",
+    thumb: "h-5 w-5 data-[state=checked]:translate-x-5"
+  },
+  lg: {
+    root: "h-7 w-14",
+    thumb: "h-6 w-6 data-[state=checked]:translate-x-7"
+  }
+};
+const switchColors = {
+  default: "data-[state=checked]:bg-[--label-green-prime]",
+  primary: "data-[state=checked]:bg-primary",
+  secondary: "data-[state=checked]:bg-secondary",
+  destructive: "data-[state=checked]:bg-destructive"
+};
+const Switch = React.forwardRef(function Switch2({ className, checked, onChange, size = "md", color = "default", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitives.Root,
+    {
+      className: cn(
+        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-input",
+        switchSizes[size].root,
+        switchColors[color],
+        className
+      ),
+      ...props,
+      ref,
+      checked,
+      onCheckedChange: onChange,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitives.Thumb,
+        {
+          className: cn(
+            "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",
+            switchSizes[size].thumb
+          )
+        }
+      )
+    }
+  );
+});
+Switch.displayName = SwitchPrimitives.Root.displayName;
+export {
+  Switch
+};

package/components/ui/table-v2.js

@@ -0,0 +1,269 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./select.js";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronUp
+} from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { formatNumber } from "@zenify-omni/chat-js/utils/formatters.js";
+import { useTranslation } from "react-i18next";
+const Table = React.forwardRef(
+  ({ className, containerClassName, scrollContainerRef, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative w-full overflow-auto",
+        className,
+        containerClassName
+      ),
+      ref: scrollContainerRef,
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          ref,
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  )
+);
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: cn(
+      "bg-surface-subtle [&_tr]:border-b [&_tr]:border-border-subtle",
+      className
+    ),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn(
+      "[&_tr:last-child]:border-0 [&_tr:nth-child(even)]:bg-surface-subtle",
+      className
+    ),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "group/row border-b border-border-subtle transition-colors hover:bg-muted data-[state=selected]:bg-secondary",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-[46px] border-b border-border-subtle px-3.5 text-left align-middle text-[12.5px] font-semibold text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "w-auto whitespace-nowrap px-3.5 py-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+const Pagination = ({
+  className,
+  totalRecords,
+  page,
+  pageSize,
+  setPage,
+  setPageSize,
+  allowPageInput = false,
+  pageSizeOptions = [10, 20, 30, 40, 50, 100]
+}) => {
+  const { t } = useTranslation();
+  const pageCount = Math.ceil(totalRecords / pageSize) || 1;
+  const [inputPage, setInputPage] = React.useState(String(page));
+  React.useEffect(() => {
+    setInputPage(String(page));
+  }, [page]);
+  const handlePageInputCommit = () => {
+    const num = parseInt(inputPage, 10);
+    if (!num || num < 1 || num > pageCount || num === page) {
+      setInputPage(String(page));
+      return;
+    }
+    setPage(num);
+  };
+  const from = totalRecords === 0 ? 0 : (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, totalRecords);
+  const displayedCount = totalRecords === 0 ? 0 : to - from + 1;
+  const navButtonClass = "flex size-8 items-center justify-center rounded-[6px] border border-border bg-card text-muted-foreground shadow-[0px_1px_1px_rgba(0,0,0,0.05)] transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between overflow-auto border-t border-border-subtle bg-card px-[18px] py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "whitespace-nowrap text-sm text-muted-foreground", children: t("common:label.page", { defaultValue: "Trang" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: navButtonClass,
+                onClick: () => setPage(1),
+                disabled: page === 1,
+                children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: navButtonClass,
+                onClick: () => setPage(page - 1),
+                disabled: page === 1,
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+              }
+            ),
+            allowPageInput ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  inputMode: "numeric",
+                  value: inputPage,
+                  title: t("common:placeholder.enterPageToJump", {
+                    defaultValue: "Nh\u1EADp s\u1ED1 trang \u0111\u1EC3 chuy\u1EC3n nhanh"
+                  }),
+                  onChange: (e) => {
+                    const val = e.target.value;
+                    if (val === "" || /^[1-9]\d*$/.test(val)) {
+                      setInputPage(val);
+                    }
+                  },
+                  onFocus: (e) => e.target.select(),
+                  onBlur: handlePageInputCommit,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                      handlePageInputCommit();
+                      e.target.blur();
+                    }
+                  },
+                  className: "h-[30px] w-[38px] cursor-text rounded-[8px] border border-border-subtle bg-card text-center text-sm font-semibold text-primary transition-colors hover:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "whitespace-nowrap text-sm text-muted-foreground", children: [
+                "/ ",
+                formatNumber(pageCount)
+              ] })
+            ] }) : /* @__PURE__ */ jsx("div", { className: "flex h-[30px] min-w-[30px] items-center justify-center rounded-[8px] border border-primary bg-primary px-2.5 text-sm font-semibold text-white", children: page }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: navButtonClass,
+                onClick: () => setPage(page + 1),
+                disabled: page === pageCount,
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: navButtonClass,
+                onClick: () => setPage(pageCount),
+                disabled: page === pageCount,
+                children: /* @__PURE__ */ jsx(ChevronsRight, { className: "size-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: `${pageSize}`,
+            onValueChange: (value) => {
+              setPageSize(Number(value));
+            },
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-auto w-auto gap-1.5 border-none bg-transparent px-1.5 py-1 text-sm font-semibold text-primary shadow-none focus:ring-0 [&>svg]:hidden", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                t("common:label.show", { defaultValue: "Hi\u1EC3n th\u1ECB" }),
+                " ",
+                /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize }),
+                t("common:label.perPage", { defaultValue: "/ trang" }),
+                /* @__PURE__ */ jsx(ChevronUp, { className: "size-[15px]" })
+              ] }) }),
+              /* @__PURE__ */ jsx(SelectContent, { side: "top", align: "end", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Pagination,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};