@ctlyst.id/internal-ui 2.1.13 → 2.1.15

package/dist/index.mjs

@@ -867,7 +867,7 @@ var Counter = ({
           isReadOnly,
           width: 12,
           type: "number",
-          borderColor: "neutral.200"
+          borderColor: isError ? "danger.500" : "neutral.200"
         }
       ),
       /* @__PURE__ */ jsx22(
@@ -913,14 +913,40 @@ var getCommonPinningStyles = (column) => {
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   return {
-    // eslint-disable-next-line no-nested-ternary
-    boxShadow: isLastLeftPinnedColumn ? "-4px 0 4px -4px gray inset" : isFirstRightPinnedColumn ? "4px 0 4px -4px gray inset" : void 0,
     left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
-    opacity: isPinned ? 0.95 : 1,
     position: isPinned ? "sticky" : "relative",
     width: column.getSize(),
-    zIndex: isPinned ? 1 : 0
+    zIndex: isPinned ? 1 : 0,
+    backgroundColor: "white",
+    ...isLastLeftPinnedColumn ? {
+      padding: 0,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "20%",
+        height: "100%",
+        right: "0px",
+        top: 0,
+        zIndex: -1,
+        boxShadow: "-10px 0px 20px 10px #00000010",
+        clipPath: "inset(0px -38px 0px 0px)"
+      }
+    } : {},
+    ...isFirstRightPinnedColumn ? {
+      padding: "0px 0px 0px 8px",
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "20%",
+        height: "100%",
+        left: "0%",
+        top: 0,
+        zIndex: -1,
+        boxShadow: "10px 0px 20px 10px #00000010",
+        clipPath: "inset(0px 0px 0px -38px )"
+      }
+    } : {}
   };
 };
 var useDataTable = ({
@@ -1017,12 +1043,12 @@ var useDataTable = ({
   };
 };
 var DataTable = React5.forwardRef((props, ref) => {
-  const { isLoading, styles, headerSticky, onRowClick } = props;
+  const { isLoading, styles, headerSticky, onRowClick, container } = props;
   const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
   React5.useImperativeHandle(ref, () => ({
     toggleAllRowsSelected
   }));
-  return /* @__PURE__ */ jsxs9(Box12, { ...props, children: [
+  return /* @__PURE__ */ jsxs9(Box12, { overflowX: "auto", position: "relative", maxW: "100%", minH: 400, w: "full", ...container, children: [
     isLoading && /* @__PURE__ */ jsxs9(Table, { ...styles == null ? void 0 : styles.table, children: [
       /* @__PURE__ */ jsx23(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx23(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx23(
         Th,
@@ -1053,11 +1079,13 @@ var DataTable = React5.forwardRef((props, ref) => {
           {
             colSpan: header.colSpan,
             width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
-            style: { ...getCommonPinningStyles(header.column) },
+            sx: getCommonPinningStyles(header.column),
             ...styles == null ? void 0 : styles.tableColumnHeader,
             children: /* @__PURE__ */ jsxs9(
               Flex,
               {
+                backgroundColor: "white",
+                height: "100%",
                 "data-test-id": `CT_Container_TableHeader_${header.id}`,
                 textTransform: "capitalize",
                 userSelect: "none",
@@ -1120,9 +1148,9 @@ var DataTable = React5.forwardRef((props, ref) => {
                 "data-test-id": `CT_Component_TableCell_${cell.id}`,
                 fontSize: "text.sm",
                 color: useColorModeValue("dark.800", "dark.300"),
-                style: { ...getCommonPinningStyles(cell.column) },
+                sx: getCommonPinningStyles(cell.column),
                 ...styles == null ? void 0 : styles.tableCell,
-                children: /* @__PURE__ */ jsx23(
+                children: /* @__PURE__ */ jsx23(Flex, { height: "100%", backgroundColor: "white", align: "center", children: /* @__PURE__ */ jsx23(
                   Box12,
                   {
                     tabIndex: 0,
@@ -1136,7 +1164,7 @@ var DataTable = React5.forwardRef((props, ref) => {
                     },
                     children: flexRender(cell.column.columnDef.cell, cell.getContext())
                   }
-                )
+                ) })
               },
               cell.id
             ))
@@ -1148,12 +1176,8 @@ var DataTable = React5.forwardRef((props, ref) => {
   ] });
 });
 DataTable.defaultProps = {
+  container: void 0,
   withSelectedRow: false,
-  overflowX: "scroll",
-  pos: "relative",
-  maxW: "100%",
-  minH: 400,
-  w: "full",
   styles: void 0,
   isLoading: void 0,
   onSelectedRow: void 0,
@@ -2232,7 +2256,7 @@ var Dialog = ({
 }) => {
   return /* @__PURE__ */ jsxs13(Modal, { ...props, children: [
     isModalOverlay && /* @__PURE__ */ jsx29(ModalOverlay, { pointerEvents: isOverlayClickable ? "auto" : "none" }),
-    /* @__PURE__ */ jsxs13(ModalContent, { bgColor: "neutral.50", fontFamily: "Poppins", width, children: [
+    /* @__PURE__ */ jsxs13(ModalContent, { bgColor: "neutral.50", fontFamily: "Poppins", width, minW: "400px", children: [
       /* @__PURE__ */ jsx29(ModalHeader, { bgColor: "neutral.200", py: 2, px: 4, borderTopRadius: "sm", children: /* @__PURE__ */ jsx29(Text6, { textStyle: "text.lg", fontWeight: "normal", children: title }) }),
       /* @__PURE__ */ jsx29(ModalBody, { p: 4, textStyle: "text.md", children: content }),
       /* @__PURE__ */ jsx29(ModalFooter, { bgColor: "neutral.200", p: 4, borderBottomRadius: "sm", children: footer })
@@ -3254,17 +3278,6 @@ var rating_default = Rating;
 import { useColorMode as useColorMode3 } from "@chakra-ui/system";
 import ReactSelect from "react-select";
 
-// src/components/select/components/select-wrapper.tsx
-import { Box as Box26 } from "@chakra-ui/react";
-import { jsx as jsx51 } from "react/jsx-runtime";
-var SelectWrapper = ({ children }) => {
-  return /* @__PURE__ */ jsx51(Box26, { children });
-};
-SelectWrapper.defaultProps = {
-  isError: false
-};
-var select_wrapper_default = SelectWrapper;
-
 // src/config/theme/foundations/shadows.ts
 import { theme as theme2 } from "@chakra-ui/react";
 var shadows = {
@@ -3530,37 +3543,32 @@ var selectStyle = {
   lineHeight: styleMd.lineHeight,
   letterSpacing: 0
 };
-var boxShadow = (color) => `0 0 0 1px ${color}`;
 function selectStyles(colorMode, _isError) {
-  const boxShadowLight = (isFocused = false, isError = false) => {
-    if (isError && isFocused || isError) {
-      return boxShadow("danger.500");
-    }
-    if (isFocused) {
-      return boxShadow("primary.500");
-    }
-    return boxShadow("neutral.400");
-  };
   return {
-    control: (base, state) => colorMode === "dark" ? {
-      ...base,
-      ...selectStyle,
-      background: "transparent",
-      color: "primary.300",
-      borderColor: "secondary.500",
-      boxShadow: state.isFocused ? "none" : `inherit`
-    } : {
-      ...base,
-      ...selectStyle,
-      borderWidth: 0,
-      boxShadow: boxShadowLight(state.isFocused, _isError)
+    control: (base, { isDisabled, isFocused }) => {
+      const style = {
+        ...base,
+        flexWrap: "nowrap",
+        borderColor: isFocused ? "var(--chakra-colors-primary-500)" : "var(--chakra-colors-neutral-400)",
+        boxShadow: "none",
+        color: isDisabled ? "var(--chakra-colors-black-low)" : "var(--chakra-colors-black-high)",
+        "&:hover": {
+          borderColor: _isError ? "" : isFocused ? "var(--chakra-colors-primary-500)" : "var(--chakra-colors-neutral-500)"
+        }
+      };
+      if (_isError) {
+        return {
+          ...style,
+          borderColor: "var(--chakra-colors-danger-500)"
+        };
+      }
+      return style;
     },
-    option: (base, { isSelected }) => colorMode === "dark" ? {
+    option: (base) => ({
       ...base,
       ...selectStyle,
-      background: isSelected ? "primary.700" : "dark.800",
-      color: "white"
-    } : { ...base, ...selectStyle },
+      color: "var(--chakra-colors-neutral-900)"
+    }),
     menu: (base) => colorMode === "dark" ? {
       ...base,
       ...selectStyle,
@@ -3585,23 +3593,23 @@ var themeSelect = (theme6) => {
     ...theme6,
     colors: {
       ...theme6.colors,
-      primary: "primary.500",
-      primary25: "primary.50",
-      primary50: "primary.100",
-      primary75: "primary.200"
+      primary: "var(--chakra-colors-primary-100)",
+      primary25: "var(--chakra-colors-primary-50)",
+      primary50: "var(--chakra-colors-primary-100)",
+      primary75: "var(--chakra-colors-primary-200)"
     }
   };
 };
 
 // src/components/select/components/select.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function Select2({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode3();
-  return /* @__PURE__ */ jsx52(select_wrapper_default, { isError, children: /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx51(
     ReactSelect,
     {
       classNamePrefix: "react-select",
@@ -3609,21 +3617,21 @@ function Select2({
       styles: { ...selectStyles(colorMode, isError) },
       theme: themeSelect
     }
-  ) });
+  );
 }
 var select_default = Select2;
 
 // src/components/select/components/select-async.tsx
 import { useColorMode as useColorMode4 } from "@chakra-ui/system";
 import { AsyncPaginate } from "react-select-async-paginate";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function SelectAsync({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode4();
-  return /* @__PURE__ */ jsx53(select_wrapper_default, { isError, children: /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx52(
     AsyncPaginate,
     {
       classNamePrefix: "react-select",
@@ -3631,17 +3639,17 @@ function SelectAsync({
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
     }
-  ) });
+  );
 }
 var select_async_default = SelectAsync;
 
 // src/components/select/components/select-async-creatable.tsx
 import { useColorMode as useColorMode5 } from "@chakra-ui/system";
 import ReactSelectAsyncCreatable from "react-select/async-creatable";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode5();
-  return /* @__PURE__ */ jsx54(select_wrapper_default, { isError, children: /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx53(
     ReactSelectAsyncCreatable,
     {
       classNamePrefix: "react-select",
@@ -3649,16 +3657,16 @@ function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
     }
-  ) });
+  );
 }
 
 // src/components/select/components/select-creatable.tsx
 import { useColorMode as useColorMode6 } from "@chakra-ui/system";
 import ReactSelectCreatable from "react-select/creatable";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function SelectCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode6();
-  return /* @__PURE__ */ jsx55(select_wrapper_default, { isError, children: /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx54(
     ReactSelectCreatable,
     {
       classNamePrefix: "react-select",
@@ -3666,7 +3674,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
     }
-  ) });
+  );
 }
 
 // src/components/switch/components/switch.tsx
@@ -3674,7 +3682,7 @@ import { chakra as chakra6, Flex as Flex8, forwardRef as forwardRef13, omitThemi
 import { cx as cx9, dataAttr } from "@chakra-ui/shared-utils";
 import { Check, Close as Close4 } from "@ctlyst.id/internal-icon";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx56, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs23 } from "react/jsx-runtime";
 var Switch = forwardRef13(function Switch2(props, ref) {
   const styles = useMultiStyleConfig2("Switch", props);
   const { spacing: spacing2 = "0.5rem", children, ...ownProps } = omitThemingProps2(props);
@@ -3726,13 +3734,13 @@ var Switch = forwardRef13(function Switch2(props, ref) {
       className: cx9("chakra-switch", props.className),
       __css: containerStyles,
       children: [
-        /* @__PURE__ */ jsx56("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
+        /* @__PURE__ */ jsx55("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
         /* @__PURE__ */ jsxs23(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
           /* @__PURE__ */ jsxs23(Flex8, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ jsx56(Check, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx56(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+            /* @__PURE__ */ jsx55(Check, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ jsx55(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx55(
             chakra6.span,
             {
               __css: styles.thumb,
@@ -3742,7 +3750,7 @@ var Switch = forwardRef13(function Switch2(props, ref) {
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx56(
+        children && /* @__PURE__ */ jsx55(
           chakra6.span,
           {
             className: "chakra-switch__label",
@@ -3779,13 +3787,13 @@ import {
 
 // src/components/tabs/components/tab.tsx
 import { Button as Button4, Flex as Flex9, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
-import { jsx as jsx57, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
 var Tab = forwardRef14((props, ref) => {
   var _a, _b;
   const tabProps = useTab({ ...props, ref });
   const isSelected = !!tabProps["aria-selected"];
   const styles = useMultiStyleConfig3("Tabs", tabProps);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx56(
     Button4,
     {
       "data-test-id": props["data-test-id"],
@@ -3877,7 +3885,7 @@ var messages = {
 };
 
 // src/components/uploader/components/uploader.tsx
-import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -3938,11 +3946,11 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          /* @__PURE__ */ jsx58("input", { ...getInputProps() }),
-          isDragActive ? /* @__PURE__ */ jsx58(Text15, { children: messages.dragActive }) : /* @__PURE__ */ jsxs25(Flex10, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
-            !multiple && isSelected && /* @__PURE__ */ jsx58(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
-            !isSelected && /* @__PURE__ */ jsx58(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
-            isSelected ? /* @__PURE__ */ jsx58(Text15, { children: messages.dragReplace }) : /* @__PURE__ */ jsx58(Text15, { children: messages.dragInActive })
+          /* @__PURE__ */ jsx57("input", { ...getInputProps() }),
+          isDragActive ? /* @__PURE__ */ jsx57(Text15, { children: messages.dragActive }) : /* @__PURE__ */ jsxs25(Flex10, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
+            !multiple && isSelected && /* @__PURE__ */ jsx57(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
+            !isSelected && /* @__PURE__ */ jsx57(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
+            isSelected ? /* @__PURE__ */ jsx57(Text15, { children: messages.dragReplace }) : /* @__PURE__ */ jsx57(Text15, { children: messages.dragInActive })
           ] })
         ]
       }
@@ -4080,7 +4088,34 @@ var baseStyle = definePartsStyle({
   panel: baseStylePanel,
   icon: baseStyleIcon
 });
-var accordionTheme = defineMultiStyleConfig({ baseStyle });
+var collapseStyleButton = defineStyle2({
+  height: 13,
+  borderRadius: "sm",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  borderColor: "neutral.300"
+});
+var collapseStylePanel = defineStyle2({
+  py: 0,
+  pr: 0,
+  pl: 12,
+  borderBottomRadius: "sm",
+  overflow: "hidden",
+  backgroundColor: "neutral.200"
+});
+var collapse = definePartsStyle({
+  button: collapseStyleButton,
+  panel: collapseStylePanel
+});
+var accordionTheme = defineMultiStyleConfig({
+  baseStyle,
+  variants: {
+    collapse
+  },
+  defaultProps: {
+    variant: void 0
+  }
+});
 var accordion_default = accordionTheme;
 
 // src/config/theme/components/alert.ts
@@ -5495,7 +5530,7 @@ import { useMemo as useMemo7 } from "react";
 import axios from "axios";
 import { createContext as createContext2, useContext, useEffect as useEffect3, useMemo as useMemo6, useRef as useRef2 } from "react";
 import { ToastContainer } from "react-toastify";
-import { jsx as jsx59, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
   instance: void 0
 });
@@ -5515,7 +5550,7 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
   }, [requestInterceptors, responseInterceptors]);
   const provider = useMemo6(() => ({ instance: instanceRef.current }), []);
   return /* @__PURE__ */ jsxs26(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ jsx59(ToastContainer, {}),
+    /* @__PURE__ */ jsx58(ToastContainer, {}),
     children
   ] });
 };