@zenkigen-inc/component-ui 1.0.2 → 1.1.0

package/dist/index.js

@@ -43,37 +43,26 @@ function Avatar(_ref) {
 }
 
 const BreadcrumbItem = ({
-  children,
-  isLast
+  children
 }) => {
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("li", {
-      className: clsx$1('[&_a]:text-interactive-interactive02', '[&_a]:hover:underline'),
-      children: children
-    }), !isLast && /*#__PURE__*/jsx("li", {
-      "aria-hidden": "true",
-      className: "text-interactive-interactive02",
-      children: "/"
-    })]
+  return /*#__PURE__*/jsx("li", {
+    className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive-interactive02 [&_a]:hover:underline",
+    children: children
   });
 };
 
-const Breadcrumb = ({
+function Breadcrumb({
   children
-}) => {
+}) {
   return /*#__PURE__*/jsx("nav", {
     "aria-label": "breadcrumb",
     children: /*#__PURE__*/jsx("ul", {
-      className: clsx$1(typography.label.label2regular, 'flex flex-wrap gap-2 whitespace-nowrap text-text-text01'),
-      children: children.map((child, i) => {
-        return /*#__PURE__*/jsx(BreadcrumbItem, {
-          isLast: i === children.length - 1,
-          children: child
-        }, i);
-      })
+      className: `${typography.label.label2regular} flex flex-wrap gap-2 whitespace-nowrap text-text-text01`,
+      children: children
     })
   });
-};
+}
+Breadcrumb.Item = BreadcrumbItem;
 
 const _excluded$4 = ["size", "variant"];
 function Button(_ref) {
@@ -31464,7 +31453,7 @@ function ModalButtonTab({
     setIsOpen(false);
   }, [onClickSecondaryButton, setIsOpen]);
   const handleClickSubButton = useCallback(() => {
-    onClickSubButton == null ? void 0 : onClickSubButton();
+    onClickSubButton == null || onClickSubButton();
   }, [onClickSubButton]);
   const wrapperClasses = clsx$1('flex', 'shrink-0', 'items-center', 'w-full', 'rounded-b-lg', 'py-4', 'px-6', {
     'justify-between': isWithCheckbox || subButtonLabel && size !== 'small',
@@ -31536,17 +31525,6 @@ function ModalHeader({
   });
 }
 
-function Tab({
-  children
-}) {
-  const classes = clsx('flex', 'px-6', 'gap-4', 'relative', 'before:bg-border-uiBorder01', 'before:h-px', 'before:bottom-0', 'before:left-0', 'before:right-0', 'before:absolute', {});
-  return /*#__PURE__*/jsx("div", {
-    role: "tablist",
-    className: classes,
-    children: children
-  });
-}
-
 const TabItem = props => {
   const classes = clsx('relative', 'flex', 'z-0', 'py-2', 'leading-[24px]', 'before:h-px', 'before:absolute', 'before:left-0', 'before:right-0', 'before:bottom-0', 'hover:text-text-text01', 'disabled:text-disabled-disabled01', 'disabled:pointer-events-none', {
     [`${typography.label.label2regular}`]: !props.isSelected,
@@ -31565,6 +31543,18 @@ const TabItem = props => {
   });
 };
 
+function Tab({
+  children
+}) {
+  const classes = clsx('flex', 'px-6', 'gap-4', 'relative', 'before:bg-border-uiBorder01', 'before:h-px', 'before:bottom-0', 'before:left-0', 'before:right-0', 'before:absolute', {});
+  return /*#__PURE__*/jsx("div", {
+    role: "tablist",
+    className: classes,
+    children: children
+  });
+}
+Tab.Item = TabItem;
+
 function ModalTab({
   tabItems,
   selectedTab,
@@ -31790,7 +31780,7 @@ const Search = /*#__PURE__*/forwardRef((_ref, ref) => {
           className: inputClasses,
           placeholder: props.placeholder,
           onChange: props.onChange
-        }), props.value && props.value.length !== 0 && /*#__PURE__*/jsx(IconButton, {
+        }), props.onClickClearButton && props.value && props.value.length !== 0 && /*#__PURE__*/jsx(IconButton, {
           variant: "text",
           icon: "close",
           size: size === 'medium' ? 'small' : 'medium',
@@ -31818,7 +31808,7 @@ function SelectItem$1({
     onChange
   } = useContext(SelectContext);
   const handleClickItem = option => {
-    onChange == null ? void 0 : onChange(option);
+    onChange == null || onChange(option);
     setIsOptionListOpen(false);
   };
   const listItemClasses = clsx$1('flex w-full items-center');
@@ -31862,7 +31852,7 @@ function SelectList$1({
     onChange
   } = useContext(SelectContext);
   const handleClickDeselect = () => {
-    onChange == null ? void 0 : onChange(null);
+    onChange == null || onChange(null);
     setIsOptionListOpen(false);
   };
   const listClasses = clsx$1('z-dropdown', 'absolute', 'w-max', 'py-2', 'overflow-y-auto', 'bg-background-uiBackground01', 'rounded', 'shadow-floatingShadow', {
@@ -32048,7 +32038,7 @@ function SelectSort({
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   const handleClickToggle = () => setIsOptionListOpen(prev => !prev);
   const handleClickItem = useCallback(value => {
-    onChange == null ? void 0 : onChange(value);
+    onChange == null || onChange(value);
     setIsOptionListOpen(false);
   }, [onChange]);
   const wrapperClasses = clsx$1('relative', 'flex', 'shrink-0', 'gap-1', 'items-center', 'rounded', {
@@ -32097,24 +32087,18 @@ function SelectSort({
   });
 }
 
-function TableContainer({
-  width,
-  rows,
-  columns,
-  children
+function TableCell({
+  children,
+  className
 }) {
+  const cellClasses = clsx$1('border-b-[1px] border-border-uiBorder01');
   return /*#__PURE__*/jsx("div", {
-    className: "grid",
-    style: {
-      width,
-      gridTemplateRows: rows,
-      gridTemplateColumns: columns
-    },
+    className: clsx$1(cellClasses, className),
     children: children
   });
 }
 
-function TableRowContainer({
+function TableRow({
   children,
   isHoverBackgroundVisible
 }) {
@@ -32125,16 +32109,24 @@ function TableRowContainer({
   });
 }
 
-function TableCell({
-  children,
-  className
+function Table({
+  width,
+  rows,
+  columns,
+  children
 }) {
-  const cellClasses = clsx$1('border-b-[1px] border-border-uiBorder01');
   return /*#__PURE__*/jsx("div", {
-    className: clsx$1(cellClasses, className),
+    className: "grid",
+    style: {
+      width,
+      gridTemplateRows: rows,
+      gridTemplateColumns: columns
+    },
     children: children
   });
 }
+Table.Row = TableRow;
+Table.Cell = TableCell;
 
 const DeleteIcon = ({
   color,
@@ -32449,5 +32441,5 @@ function Tooltip({
   });
 }
 
-export { Avatar, Breadcrumb, Button, Checkbox, Dropdown, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Radio, Search, Select, SelectSort, Tab, TabItem, TableCell, TableContainer, TableRowContainer, Tag, Toast, ToastProvider, Toggle, Tooltip, useToast };
+export { Avatar, Breadcrumb, Button, Checkbox, Dropdown, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Radio, Search, Select, SelectSort, Tab, TabItem, Table, TableCell, TableRow, Tag, Toast, ToastProvider, Toggle, Tooltip, useToast };
 //# sourceMappingURL=index.js.map