@zenkigen-inc/component-ui 1.0.0 → 1.0.2

package/README.md

@@ -1,15 +1,15 @@
-# @zenkigen-inc/components
+# @zenkigen-inc/component-ui
 
 ## インストール
 
 ```bash
-yarn add @zenkigen-inc/components
+yarn add @zenkigen-inc/component-ui
 ```
 
 ## 利用方法
 
 ```tsx
-import { Button } from 'zenkigen-component';
+import { Button } from '@zenkigen-inc/component-ui';
 
 const Component = () => {
   return <Button>ボタン</Button>;
@@ -37,4 +37,4 @@ https://www.notion.so/zenkigen/5d4ebd0d93b74124a533cf167b852ec0
 
 ## ライセンス
 
-@zenkigen-inc/components は MIT ライセンスに基づいています。
+@zenkigen-inc/component-ui は MIT ライセンスに基づいています。

package/dist/index.esm.js

@@ -41,7 +41,7 @@ var BreadcrumbItem = function BreadcrumbItem(_ref) {
     isLast = _ref.isLast;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("li", {
-      className: clsx$1('[&_a]:text-interactive-interactive02'),
+      className: clsx$1('[&_a]:text-interactive-interactive02', '[&_a]:hover:underline'),
       children: children
     }), !isLast && /*#__PURE__*/jsx("li", {
       "aria-hidden": "true",
@@ -56,7 +56,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   return /*#__PURE__*/jsx("nav", {
     "aria-label": "breadcrumb",
     children: /*#__PURE__*/jsx("ul", {
-      className: clsx$1(typography.label.label2regular, 'flex flex-wrap gap-2 whitespace-nowrap'),
+      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,
@@ -299,7 +299,7 @@ function DropdownMenu(_ref) {
     variant = _useContext.variant;
   var wrapperClasses = clsx$1('z-dropdown', 'absolute', 'w-max', 'bg-background-uiBackground01', 'rounded', 'shadow-floatingShadow', 'overflow-y-auto', horizontalAlign === 'left' ? 'left-0' : horizontalAlign === 'right' ? 'right-0' : 'left-auto', {
     'border-solid border border-border-uiBorder01': variant === 'outline',
-    'py-2': !isNoPadding
+    'py-1': !isNoPadding
   });
   return isVisible && !isDisabled && /*#__PURE__*/jsx("ul", {
     className: wrapperClasses,
@@ -444,7 +444,7 @@ function EvaluationStar(_ref) {
   });
   var ratingStars = [];
   var _loop = function _loop(i) {
-    var color = i <= currentRating ? 'fill-support-supportWarning' : 'fill-icon-icon02';
+    var color = i <= currentRating ? 'fill-yellow-yellow50' : 'fill-icon-icon03';
     ratingStars.push( /*#__PURE__*/jsx("button", {
       type: "button",
       onClick: function onClick() {
@@ -466,7 +466,7 @@ function EvaluationStar(_ref) {
 
 function Heading(props) {
   var TagName = "h" + props.level;
-  var classes = clsx('flex', 'items-center', typography.heading[TagName], {
+  var classes = clsx('flex', 'items-center', 'text-text-text01', typography.heading[TagName], {
     'gap-2': props.level === 1
   }, {
     'gap-1': props.level > 1
@@ -535,36 +535,54 @@ function Loading(_ref) {
     height = _ref$height === void 0 ? '100%' : _ref$height;
   var wrapperClasses = clsx$1(position, 'top-0', 'left-0', 'z-20', 'flex', 'items-center', 'justify-center', 'w-full');
   var svgClasses = clsx$1(size === 'small' && 'h-4 w-4', size === 'medium' && 'h-8 w-8', size === 'large' && 'h-16 w-16');
-  return /*#__PURE__*/jsx("div", {
-    className: wrapperClasses,
-    style: {
-      height: height
-    },
-    children: /*#__PURE__*/jsxs("svg", {
-      className: svgClasses,
-      viewBox: "0 0 32 32",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [/*#__PURE__*/jsx("circle", {
-        className: "stroke-border-uiBorder01",
-        cx: "16",
-        cy: "16",
-        r: "14",
-        strokeWidth: "3",
-        fill: "none"
-      }), /*#__PURE__*/jsx("circle", {
-        className: "animate-circular-move stroke-interactive-interactive01",
-        style: {
-          strokeDasharray: '80px 200px',
-          strokeDashoffset: '0px',
-          transformOrigin: 'center center'
-        },
-        cx: "16",
-        cy: "16",
-        r: "14",
-        stroke: "currentColor",
-        strokeWidth: "3",
-        fill: "none"
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: wrapperClasses,
+      style: {
+        height: height
+      },
+      children: [size === 'small' && /*#__PURE__*/jsx("svg", {
+        className: svgClasses,
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/jsx("circle", {
+          className: "origin-center animate-circular-small-move stroke-interactive-interactive01",
+          cx: "8",
+          cy: "8",
+          r: "7",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          fill: "none"
+        })
+      }), size === 'medium' && /*#__PURE__*/jsx("svg", {
+        className: svgClasses,
+        viewBox: "0 0 32 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/jsx("circle", {
+          className: "origin-center animate-circular-medium-move stroke-interactive-interactive01",
+          cx: "16",
+          cy: "16",
+          r: "15",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          fill: "none"
+        })
+      }), size === 'large' && /*#__PURE__*/jsx("svg", {
+        className: svgClasses,
+        viewBox: "0 0 64 64",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/jsx("circle", {
+          className: "origin-center animate-circular-large-move stroke-interactive-interactive01",
+          cx: "32",
+          cy: "32",
+          r: "30",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          fill: "none"
+        })
       })]
     })
   });
@@ -31696,7 +31714,7 @@ function Radio(_ref) {
   var handleChange = useCallback(function (e) {
     return !isDisabled && (onChange == null ? void 0 : onChange(e));
   }, [isDisabled, onChange]);
-  var inputClasses = clsx$1('absolute', 'z-[1]', 'opacity-0', 'peer', {
+  var inputClasses = clsx$1('absolute', 'z-[1]', 'opacity-0', 'peer', 'h-6', 'w-6', {
     'cursor-not-allowed': isDisabled,
     'cursor-pointer': !isDisabled
   });
@@ -31752,34 +31770,47 @@ function Radio(_ref) {
   });
 }
 
-var _excluded = ["width", "value"];
+var _excluded = ["width", "size"];
 var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _clsx;
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100%' : _ref$width,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var classes = clsx('flex', 'items-center', 'rounded-full', 'border', 'border-border-uiBorder02', 'focus-within:border-active-activeInput', {
+    'h-8 px-3': size === 'medium'
+  }, {
+    'h-10 px-4': size === 'large'
+  });
+  var inputClasses = clsx('ml-2.5', 'mr-2.5', 'h-full', 'flex-1', 'outline-0', 'text-text-text01', 'placeholder:text-text-textPlaceholder', (_clsx = {}, _clsx["" + typography.label.label2regular] = size === 'medium', _clsx["" + typography.label.label1regular] = size === 'large', _clsx));
   return /*#__PURE__*/jsx("div", {
     className: "relative",
     ref: ref,
     children: /*#__PURE__*/jsx("form", {
       onSubmit: props.onSubmit,
       children: /*#__PURE__*/jsxs("div", {
-        className: "flex h-8 items-center rounded-full border border-border-uiBorder02 px-3 focus-within:border-active-activeInput",
+        className: classes,
         style: {
           width: width
         },
         children: [/*#__PURE__*/jsx(Icon, {
           name: "search",
           color: "icon01",
-          size: "small"
+          size: "medium"
         }), /*#__PURE__*/jsx("input", {
           type: "text",
           size: 1,
-          value: value,
-          className: typography.label.label2regular + " ml-3 h-full flex-1 outline-0 placeholder:text-text-textPlaceholder",
+          value: props.value,
+          className: inputClasses,
           placeholder: props.placeholder,
           onChange: props.onChange
+        }), props.value && props.value.length !== 0 && /*#__PURE__*/jsx(IconButton, {
+          variant: "text",
+          icon: "close",
+          size: size === 'medium' ? 'small' : 'medium',
+          isNoPadding: true,
+          onClick: props.onClickClearButton
         })]
       })
     })