visits-style 1.4.8 → 1.4.10

package/dist/components/Popover/index.d.ts

@@ -31,6 +31,11 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
     onManualClose?: () => void;
     /** コンテンツを出さない */
     disabled?: boolean;
+    /**
+     * zIndexを指定する
+     * @default 9996
+    */
+    zIndex?: number;
 }
 export interface PopoverRef {
     open: () => void;

package/dist/elements/Progress/index.d.ts

@@ -15,4 +15,4 @@ export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
      */
     color?: ColorType;
 }
-export default function Progress({ value, max, color, ...rest }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export default function Progress({ value, max, color, height, size, ...rest }: ProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.cjs.js

@@ -169,11 +169,11 @@ const Icon = /* @__PURE__ */ styledComponents.styled.span.withConfig({
 }) => theme.border, ({
   $right
 }) => $right ? rightIcon : leftIcon);
-function shouldForwardProp$7(name) {
+function shouldForwardProp$9(name) {
   return name !== "outline" && name !== "error" && name !== "disabled";
 }
 const Wrapper$5 = /* @__PURE__ */ styledComponents.styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$7
+  shouldForwardProp: shouldForwardProp$9
 }).withConfig({
   displayName: "TextInput__Wrapper",
   componentId: "sc-1myda3q-1"
@@ -222,11 +222,11 @@ const Textarea = React.forwardRef(({
 ] }));
 Textarea.displayName = "Textarea";
 const Textarea$1 = Textarea;
-function shouldForwardProp$6(name) {
+function shouldForwardProp$8(name) {
   return name !== "error" && name !== "disabled";
 }
 const InputWrapper$2 = /* @__PURE__ */ styledComponents.styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$6
+  shouldForwardProp: shouldForwardProp$8
 }).withConfig({
   displayName: "Textarea__InputWrapper",
   componentId: "sc-z9p0uf-0"
@@ -350,11 +350,11 @@ const Select = React.forwardRef(({
 });
 Select.displayName = "Select";
 const Select$1 = Select;
-function shouldForwardProp$5(name) {
+function shouldForwardProp$7(name) {
   return name !== "error" && name !== "disabled" && name !== "inputSize" && name !== "outline";
 }
 const InputWrapper$1 = /* @__PURE__ */ styledComponents.styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$5
+  shouldForwardProp: shouldForwardProp$7
 }).withConfig({
   displayName: "Select__InputWrapper",
   componentId: "sc-gevlx8-0"
@@ -462,11 +462,11 @@ const labelStyle = /* @__PURE__ */ styledComponents.css(["label:before{position:
 }) => onLabel, ({
   theme
 }) => findColorInvert(theme, theme.primary));
-function shouldForwardProp$4(name) {
+function shouldForwardProp$6(name) {
   return name !== "labelTextOn" && name !== "labelTextOff" && name !== "anchorColor" && name !== "background" && name !== "showLabel";
 }
 const InputWrapper = /* @__PURE__ */ styledComponents.styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$4
+  shouldForwardProp: shouldForwardProp$6
 }).withConfig({
   displayName: "Switch__InputWrapper",
   componentId: "sc-1ljdf1-0"
@@ -772,6 +772,7 @@ const Popover = React.forwardRef(({
     y: 6
   },
   onManualClose,
+  zIndex = 9996,
   ...rest
 }, ref) => {
   const [open, setOpen] = React.useState(false);
@@ -835,7 +836,7 @@ const Popover = React.forwardRef(({
       })
     }),
     /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: open ? /* @__PURE__ */ jsxRuntime.jsx(react.FloatingOverlay, { "data-testid": "visits-style-shadow", onClick: handleBlur, style: {
-      zIndex: 9996
+      zIndex
     }, children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { role: "tooltip", ref: refs.setFloating, color, style: floatingStyles, ...getFloatingProps({
       ...rest,
       onClick: stopPropagation$1
@@ -1049,11 +1050,11 @@ function getColor$1({
   return styledComponents.css(["border-color:", ";border-right-color:", ";border-top-color:", ";"], value, theme.border, theme.border);
 }
 const spin = /* @__PURE__ */ styledComponents.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
-function shouldForwardProp$3(name) {
+function shouldForwardProp$5(name) {
   return name !== "color" && name !== "size" && name !== "borderSize";
 }
 const Spinner = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  shouldForwardProp: shouldForwardProp$3
+  shouldForwardProp: shouldForwardProp$5
 }).withConfig({
   displayName: "Spinner",
   componentId: "sc-34g0il-0"
@@ -1089,6 +1090,8 @@ function setResponsive({
   }) => setGap(theme.media.mobile, theme.smallGutter));
 }
 const Container = styledComponents.styled.div.withConfig({
+  shouldForwardProp: (name) => name !== "fluid"
+}).withConfig({
   displayName: "Container",
   componentId: "sc-1308ay5-0"
 })(["position:relative;width:100%;", ""], setResponsive);
@@ -1117,7 +1120,12 @@ function setAutoSize({
   const desktopSize = size >= 8 ? sizes[12] : sizes[Math.round(size * 1.5)];
   return styledComponents.css(["", "{flex-basis:", ";max-width:", ";}", "{flex-basis:", ";max-width:", ";}"], mediaDesktop, desktopSize, desktopSize, mediaMobile, mobileSize, mobileSize);
 }
+function shouldForwardProp$4(name) {
+  return name !== "size" && name !== "offset" && name !== "auto";
+}
 const Col = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  shouldForwardProp: shouldForwardProp$4
+}).withConfig({
   displayName: "Col",
   componentId: "sc-16i9d04-0"
 })(["display:flex;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;padding:", "px;", " ", " ", "{padding:", "px;}", ""], ({
@@ -1188,11 +1196,11 @@ function setColor({
   }
   return styledComponents.css(["background-color:", ";border-color:transparent;color:", ";box-shadow:none;&:hover{color:", ";background-color:", ";}&:active{background-color:", ";}&:focus:not(:active){", "}"], target, invertColor, invertColor, polished.darken(0.05, target), polished.darken(0.1, target), boxShadow("0.1rem", target, 0.5));
 }
-function shouldForwardProp$2(name) {
+function shouldForwardProp$3(name) {
   return name !== "color" && name !== "size" && name !== "outline" && name !== "round" && name !== "icon";
 }
 const Button = styledComponents.styled.button.withConfig({
-  shouldForwardProp: shouldForwardProp$2
+  shouldForwardProp: shouldForwardProp$3
 }).withConfig({
   displayName: "Button",
   componentId: "sc-f6cc58-0"
@@ -1207,11 +1215,11 @@ const Button = styledComponents.styled.button.withConfig({
   size
 }) => setSize("font-size", size));
 
-function shouldForwardProp$1(name) {
+function shouldForwardProp$2(name) {
   return name !== "color" && name !== "size" && name !== "pure" && name !== "underline" && name !== "round" && name !== "icon";
 }
 const TextButton = styledComponents.styled.button.withConfig({
-  shouldForwardProp: shouldForwardProp$1
+  shouldForwardProp: shouldForwardProp$2
 }).withConfig({
   displayName: "TextButton",
   componentId: "sc-14wzat7-0"
@@ -1262,7 +1270,12 @@ const ButtonGroup = styledComponents.styled.div.withConfig({
 
 const stripedStyle = /* @__PURE__ */ styledComponents.css(["tbody > tr:nth-child(odd){background-color:rgba(0,0,0,0.02);}"]);
 const hoverStyle = /* @__PURE__ */ styledComponents.css(["tbody > tr:hover{background-color:rgba(0,0,0,0.04);}"]);
+function shouldForwardProp$1(name) {
+  return name !== "size" && name !== "full" && name !== "headerStyle" && name !== "bordered" && name !== "striped" && name !== "hover";
+}
 const index$1 = styledComponents.styled.table.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).withConfig({
   displayName: "Table",
   componentId: "sc-1x2nuaf-0"
 })(["", " max-width:100%;margin-bottom:1rem;background-color:transparent;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;td,th{vertical-align:top;padding:0.75rem;", " border-width:0 0 1px;}th{white-space:nowrap;}", " ", " ", ""], ({
@@ -1282,10 +1295,12 @@ function Progress({
   value,
   max,
   color = "primary",
+  height,
+  size,
   ...rest
 }) {
   const percent = React.useMemo(() => value ? Math.round(value / max * 100) : 0, [value, max]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$1, { color, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "progressbar", "aria-label": "progress", className: value !== max ? "in-progress" : void 0, style: {
+  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$1, { $color: color, $height: height, $size: size, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "progressbar", "aria-label": "progress", className: value !== max ? "in-progress" : void 0, style: {
     width: `${percent > 100 ? 100 : percent}%`
   } }) });
 }
@@ -1297,14 +1312,14 @@ const Wrapper$1 = /* @__PURE__ */ styledComponents.styled.div.withConfig({
 }) => theme.radius, ({
   theme
 }) => theme.background, ({
-  size,
-  height
-}) => height || setSize("height", size), ({
+  $size,
+  $height
+}) => $height || setSize("height", $size), ({
   theme
 }) => theme.radius, ({
-  color,
+  $color,
   theme
-}) => theme[color] || color);
+}) => theme[$color] || $color);
 
 const index = styledComponents.styled.hr.withConfig({
   displayName: "Divider",

package/dist/index.es.js

@@ -161,11 +161,11 @@ const Icon = /* @__PURE__ */ styled.span.withConfig({
 }) => theme.border, ({
   $right
 }) => $right ? rightIcon : leftIcon);
-function shouldForwardProp$7(name) {
+function shouldForwardProp$9(name) {
   return name !== "outline" && name !== "error" && name !== "disabled";
 }
 const Wrapper$5 = /* @__PURE__ */ styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$7
+  shouldForwardProp: shouldForwardProp$9
 }).withConfig({
   displayName: "TextInput__Wrapper",
   componentId: "sc-1myda3q-1"
@@ -214,11 +214,11 @@ const Textarea = forwardRef(({
 ] }));
 Textarea.displayName = "Textarea";
 const Textarea$1 = Textarea;
-function shouldForwardProp$6(name) {
+function shouldForwardProp$8(name) {
   return name !== "error" && name !== "disabled";
 }
 const InputWrapper$2 = /* @__PURE__ */ styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$6
+  shouldForwardProp: shouldForwardProp$8
 }).withConfig({
   displayName: "Textarea__InputWrapper",
   componentId: "sc-z9p0uf-0"
@@ -342,11 +342,11 @@ const Select = forwardRef(({
 });
 Select.displayName = "Select";
 const Select$1 = Select;
-function shouldForwardProp$5(name) {
+function shouldForwardProp$7(name) {
   return name !== "error" && name !== "disabled" && name !== "inputSize" && name !== "outline";
 }
 const InputWrapper$1 = /* @__PURE__ */ styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$5
+  shouldForwardProp: shouldForwardProp$7
 }).withConfig({
   displayName: "Select__InputWrapper",
   componentId: "sc-gevlx8-0"
@@ -454,11 +454,11 @@ const labelStyle = /* @__PURE__ */ css(["label:before{position:absolute;display:
 }) => onLabel, ({
   theme
 }) => findColorInvert(theme, theme.primary));
-function shouldForwardProp$4(name) {
+function shouldForwardProp$6(name) {
   return name !== "labelTextOn" && name !== "labelTextOff" && name !== "anchorColor" && name !== "background" && name !== "showLabel";
 }
 const InputWrapper = /* @__PURE__ */ styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$4
+  shouldForwardProp: shouldForwardProp$6
 }).withConfig({
   displayName: "Switch__InputWrapper",
   componentId: "sc-1ljdf1-0"
@@ -764,6 +764,7 @@ const Popover = forwardRef(({
     y: 6
   },
   onManualClose,
+  zIndex = 9996,
   ...rest
 }, ref) => {
   const [open, setOpen] = useState(false);
@@ -827,7 +828,7 @@ const Popover = forwardRef(({
       })
     }),
     /* @__PURE__ */ jsx(Portal$1, { children: open ? /* @__PURE__ */ jsx(FloatingOverlay, { "data-testid": "visits-style-shadow", onClick: handleBlur, style: {
-      zIndex: 9996
+      zIndex
     }, children: /* @__PURE__ */ jsx(Tooltip, { role: "tooltip", ref: refs.setFloating, color, style: floatingStyles, ...getFloatingProps({
       ...rest,
       onClick: stopPropagation$1
@@ -1041,11 +1042,11 @@ function getColor$1({
   return css(["border-color:", ";border-right-color:", ";border-top-color:", ";"], value, theme.border, theme.border);
 }
 const spin = /* @__PURE__ */ keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
-function shouldForwardProp$3(name) {
+function shouldForwardProp$5(name) {
   return name !== "color" && name !== "size" && name !== "borderSize";
 }
 const Spinner = /* @__PURE__ */ styled.div.withConfig({
-  shouldForwardProp: shouldForwardProp$3
+  shouldForwardProp: shouldForwardProp$5
 }).withConfig({
   displayName: "Spinner",
   componentId: "sc-34g0il-0"
@@ -1081,6 +1082,8 @@ function setResponsive({
   }) => setGap(theme.media.mobile, theme.smallGutter));
 }
 const Container = styled.div.withConfig({
+  shouldForwardProp: (name) => name !== "fluid"
+}).withConfig({
   displayName: "Container",
   componentId: "sc-1308ay5-0"
 })(["position:relative;width:100%;", ""], setResponsive);
@@ -1109,7 +1112,12 @@ function setAutoSize({
   const desktopSize = size >= 8 ? sizes[12] : sizes[Math.round(size * 1.5)];
   return css(["", "{flex-basis:", ";max-width:", ";}", "{flex-basis:", ";max-width:", ";}"], mediaDesktop, desktopSize, desktopSize, mediaMobile, mobileSize, mobileSize);
 }
+function shouldForwardProp$4(name) {
+  return name !== "size" && name !== "offset" && name !== "auto";
+}
 const Col = /* @__PURE__ */ styled.div.withConfig({
+  shouldForwardProp: shouldForwardProp$4
+}).withConfig({
   displayName: "Col",
   componentId: "sc-16i9d04-0"
 })(["display:flex;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;padding:", "px;", " ", " ", "{padding:", "px;}", ""], ({
@@ -1180,11 +1188,11 @@ function setColor({
   }
   return css(["background-color:", ";border-color:transparent;color:", ";box-shadow:none;&:hover{color:", ";background-color:", ";}&:active{background-color:", ";}&:focus:not(:active){", "}"], target, invertColor, invertColor, darken(0.05, target), darken(0.1, target), boxShadow("0.1rem", target, 0.5));
 }
-function shouldForwardProp$2(name) {
+function shouldForwardProp$3(name) {
   return name !== "color" && name !== "size" && name !== "outline" && name !== "round" && name !== "icon";
 }
 const Button = styled.button.withConfig({
-  shouldForwardProp: shouldForwardProp$2
+  shouldForwardProp: shouldForwardProp$3
 }).withConfig({
   displayName: "Button",
   componentId: "sc-f6cc58-0"
@@ -1199,11 +1207,11 @@ const Button = styled.button.withConfig({
   size
 }) => setSize("font-size", size));
 
-function shouldForwardProp$1(name) {
+function shouldForwardProp$2(name) {
   return name !== "color" && name !== "size" && name !== "pure" && name !== "underline" && name !== "round" && name !== "icon";
 }
 const TextButton = styled.button.withConfig({
-  shouldForwardProp: shouldForwardProp$1
+  shouldForwardProp: shouldForwardProp$2
 }).withConfig({
   displayName: "TextButton",
   componentId: "sc-14wzat7-0"
@@ -1254,7 +1262,12 @@ const ButtonGroup = styled.div.withConfig({
 
 const stripedStyle = /* @__PURE__ */ css(["tbody > tr:nth-child(odd){background-color:rgba(0,0,0,0.02);}"]);
 const hoverStyle = /* @__PURE__ */ css(["tbody > tr:hover{background-color:rgba(0,0,0,0.04);}"]);
+function shouldForwardProp$1(name) {
+  return name !== "size" && name !== "full" && name !== "headerStyle" && name !== "bordered" && name !== "striped" && name !== "hover";
+}
 const index$1 = styled.table.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).withConfig({
   displayName: "Table",
   componentId: "sc-1x2nuaf-0"
 })(["", " max-width:100%;margin-bottom:1rem;background-color:transparent;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;td,th{vertical-align:top;padding:0.75rem;", " border-width:0 0 1px;}th{white-space:nowrap;}", " ", " ", ""], ({
@@ -1274,10 +1287,12 @@ function Progress({
   value,
   max,
   color = "primary",
+  height,
+  size,
   ...rest
 }) {
   const percent = useMemo(() => value ? Math.round(value / max * 100) : 0, [value, max]);
-  return /* @__PURE__ */ jsx(Wrapper$1, { color, ...rest, children: /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": "progress", className: value !== max ? "in-progress" : void 0, style: {
+  return /* @__PURE__ */ jsx(Wrapper$1, { $color: color, $height: height, $size: size, ...rest, children: /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": "progress", className: value !== max ? "in-progress" : void 0, style: {
     width: `${percent > 100 ? 100 : percent}%`
   } }) });
 }
@@ -1289,14 +1304,14 @@ const Wrapper$1 = /* @__PURE__ */ styled.div.withConfig({
 }) => theme.radius, ({
   theme
 }) => theme.background, ({
-  size,
-  height
-}) => height || setSize("height", size), ({
+  $size,
+  $height
+}) => $height || setSize("height", $size), ({
   theme
 }) => theme.radius, ({
-  color,
+  $color,
   theme
-}) => theme[color] || color);
+}) => theme[$color] || $color);
 
 const index = styled.hr.withConfig({
   displayName: "Divider",

package/package.json

@@ -2,7 +2,7 @@
   "name": "visits-style",
   "repository": "https://github.com/visits-works/visits-style",
   "homepage": "https://github.com/visits-works/visits-style",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",