@zenkigen-inc/component-ui 1.0.2 → 1.1.1

package/dist/breadcrumb/breadcrumb-item.d.ts

@@ -1,7 +1,2 @@
-import { ReactNode } from 'react';
-type Props = {
-    isLast: boolean;
-    children?: ReactNode;
-};
-export declare const BreadcrumbItem: ({ children, isLast }: Props) => import("react").JSX.Element;
-export {};
+import { PropsWithChildren } from 'react';
+export declare const BreadcrumbItem: ({ children }: PropsWithChildren) => import("react").JSX.Element;

package/dist/breadcrumb/breadcrumb.d.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
-type Props = {
-    children: ReactNode[];
-};
-export declare const Breadcrumb: ({ children }: Props) => import("react").JSX.Element;
-export {};
+import { PropsWithChildren } from 'react';
+export declare function Breadcrumb({ children }: PropsWithChildren): import("react").JSX.Element;
+export declare namespace Breadcrumb {
+    var Item: ({ children }: {
+        children?: import("react").ReactNode;
+    }) => import("react").JSX.Element;
+}

package/dist/index.esm.js

@@ -37,35 +37,24 @@ function Avatar(_ref) {
 }
 
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
-  var children = _ref.children,
-    isLast = _ref.isLast;
-  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: "/"
-    })]
+  var children = _ref.children;
+  return /*#__PURE__*/jsx("li", {
+    className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive-interactive02 [&_a]:hover:underline",
+    children: children
   });
 };
 
-var Breadcrumb = function Breadcrumb(_ref) {
+function Breadcrumb(_ref) {
   var children = _ref.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(function (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;
 
 var _excluded$4 = ["size", "variant"];
 function Button(_ref) {
@@ -31478,7 +31467,7 @@ function ModalButtonTab(_ref) {
     setIsOpen(false);
   }, [onClickSecondaryButton, setIsOpen]);
   var handleClickSubButton = useCallback(function () {
-    onClickSubButton == null ? void 0 : onClickSubButton();
+    onClickSubButton == null || onClickSubButton();
   }, [onClickSubButton]);
   var wrapperClasses = clsx$1('flex', 'shrink-0', 'items-center', 'w-full', 'rounded-b-lg', 'py-4', 'px-6', {
     'justify-between': isWithCheckbox || subButtonLabel && size !== 'small',
@@ -31550,16 +31539,6 @@ function ModalHeader(_ref) {
   });
 }
 
-function Tab(_ref) {
-  var children = _ref.children;
-  var 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
-  });
-}
-
 var TabItem = function TabItem(props) {
   var _clsx;
   var 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', (_clsx = {}, _clsx["" + typography.label.label2regular] = !props.isSelected, _clsx['text-interactive-interactive02 hover:before:bg-border-uiBorder02Dark'] = !props.isSelected, _clsx["" + typography.label.label2bold] = props.isSelected, _clsx['before:bg-interactive-interactive01 hover:before:bg-interactive-interactive01 pointer-events-none'] = props.isSelected, _clsx));
@@ -31576,6 +31555,17 @@ var TabItem = function TabItem(props) {
   });
 };
 
+function Tab(_ref) {
+  var children = _ref.children;
+  var 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(_ref) {
   var tabItems = _ref.tabItems,
     selectedTab = _ref.selectedTab,
@@ -31805,7 +31795,7 @@ var Search = /*#__PURE__*/forwardRef(function (_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',
@@ -31833,7 +31823,7 @@ function SelectItem$1(_ref) {
     selectedOption = _useContext.selectedOption,
     onChange = _useContext.onChange;
   var handleClickItem = function handleClickItem(option) {
-    onChange == null ? void 0 : onChange(option);
+    onChange == null || onChange(option);
     setIsOptionListOpen(false);
   };
   var listItemClasses = clsx$1('flex w-full items-center');
@@ -31877,7 +31867,7 @@ function SelectList$1(_ref) {
     placeholder = _useContext.placeholder,
     onChange = _useContext.onChange;
   var handleClickDeselect = function handleClickDeselect() {
-    onChange == null ? void 0 : onChange(null);
+    onChange == null || onChange(null);
     setIsOptionListOpen(false);
   };
   var listClasses = clsx$1('z-dropdown', 'absolute', 'w-max', 'py-2', 'overflow-y-auto', 'bg-background-uiBackground01', 'rounded', 'shadow-floatingShadow', {
@@ -31984,7 +31974,7 @@ function Select(_ref) {
           className: "ml-auto flex items-center",
           children: /*#__PURE__*/jsx(Icon, {
             name: isOptionListOpen ? 'angle-small-up' : 'angle-small-down',
-            size: "small"
+            size: size === 'large' ? 'medium' : 'small'
           })
         })]
       }), isOptionListOpen && !isDisabled && /*#__PURE__*/jsx(SelectList$1, {
@@ -32086,7 +32076,7 @@ function SelectSort(_ref) {
     });
   };
   var handleClickItem = useCallback(function (value) {
-    onChange == null ? void 0 : onChange(value);
+    onChange == null || onChange(value);
     setIsOptionListOpen(false);
   }, [onChange]);
   var wrapperClasses = clsx$1('relative', 'flex', 'shrink-0', 'gap-1', 'items-center', 'rounded', {
@@ -32122,7 +32112,7 @@ function SelectSort(_ref) {
           size: size === 'large' ? 'medium' : 'small'
         }) : /*#__PURE__*/jsx(Icon, {
           name: isOptionListOpen ? 'angle-small-up' : 'angle-small-down',
-          size: "small"
+          size: size === 'large' ? 'medium' : 'small'
         })
       })]
     }), isOptionListOpen && !isDisabled && /*#__PURE__*/jsx(SelectList, {
@@ -32135,23 +32125,17 @@ function SelectSort(_ref) {
   });
 }
 
-function TableContainer(_ref) {
-  var width = _ref.width,
-    rows = _ref.rows,
-    columns = _ref.columns,
-    children = _ref.children;
+function TableCell(_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  var cellClasses = clsx$1('border-b-[1px] border-border-uiBorder01');
   return /*#__PURE__*/jsx("div", {
-    className: "grid",
-    style: {
-      width: width,
-      gridTemplateRows: rows,
-      gridTemplateColumns: columns
-    },
+    className: clsx$1(cellClasses, className),
     children: children
   });
 }
 
-function TableRowContainer(_ref) {
+function TableRow(_ref) {
   var children = _ref.children,
     isHoverBackgroundVisible = _ref.isHoverBackgroundVisible;
   var rowClasses = clsx$1('contents', isHoverBackgroundVisible && '[&:hover>div]:bg-hover-hoverUi02');
@@ -32161,15 +32145,23 @@ function TableRowContainer(_ref) {
   });
 }
 
-function TableCell(_ref) {
-  var children = _ref.children,
-    className = _ref.className;
-  var cellClasses = clsx$1('border-b-[1px] border-border-uiBorder01');
+function Table(_ref) {
+  var width = _ref.width,
+    rows = _ref.rows,
+    columns = _ref.columns,
+    children = _ref.children;
   return /*#__PURE__*/jsx("div", {
-    className: clsx$1(cellClasses, className),
+    className: "grid",
+    style: {
+      width: width,
+      gridTemplateRows: rows,
+      gridTemplateColumns: columns
+    },
     children: children
   });
 }
+Table.Row = TableRow;
+Table.Cell = TableCell;
 
 var DeleteIcon = function DeleteIcon(_ref) {
   var color = _ref.color,
@@ -32476,7 +32468,7 @@ function Tooltip(_ref) {
     setIsVisible(false);
   }, []);
   var targetClasses = clsx$1('relative', 'flex', 'items-center', 'justify-center');
-  var tooltipBodyClasses = clsx$1('z-tooltip', 'absolute', 'w-max', horizontalAlign === 'left' ? 'left-0' : horizontalAlign === 'right' ? 'right-0' : 'left-auto', 'inline-block', size === 'small' ? 'px-2 pb-1 pt-1.5' : 'px-4 py-3', 'text-text-textOnColor', 'bg-background-uiBackgroundTooltip', 'rounded', 'shadow-floatingShadow', typography.body[size === 'small' ? 'body3regular' : 'body2regular']);
+  var tooltipBodyClasses = clsx$1('z-tooltip', 'absolute', 'w-max', horizontalAlign === 'left' ? 'left-0' : horizontalAlign === 'right' ? 'right-0' : 'left-auto', 'inline-block', size === 'small' ? 'px-2 pb-1 pt-1.5' : 'px-4 py-3', 'text-text-textOnColor', 'bg-background-uiBackgroundTooltip', 'rounded', typography.body[size === 'small' ? 'body3regular' : 'body2regular']);
   return /*#__PURE__*/jsxs("div", {
     ref: targetRef,
     className: targetClasses,
@@ -32498,5 +32490,5 @@ function Tooltip(_ref) {
   });
 }
 
-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.esm.js.map