smarthr-ui 41.2.0 → 41.3.0

package/lib/components/Header/HeaderDropdownMenuButton.d.ts

@@ -1661,6 +1661,7 @@ export declare const HeaderDropdownMenuButton: import("styled-components").Style
     onlyIconTrigger?: boolean | undefined;
 } & {
     type?: "button" | "reset" | "submit" | undefined;
+    key?: import("react").Key | null | undefined;
     id?: string | undefined;
     name?: string | undefined;
     color?: string | undefined;
@@ -1685,6 +1686,7 @@ export declare const HeaderDropdownMenuButton: import("styled-components").Style
     nonce?: string | undefined;
     tabIndex?: number | undefined;
     disabled?: boolean | undefined;
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;

package/lib/components/Input/Input.js

@@ -39,7 +39,7 @@ const bgColors = {
 const wrapper = (0, tailwind_variants_1.tv)({
     base: [
         'smarthr-ui-Input',
-        'shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-border shr-border-solid shr-border-default shr-bg-white shr-px-0.5',
+        'shr-border-shorthand shr-box-border shr-inline-flex shr-cursor-text shr-items-center shr-gap-0.5 shr-rounded-m shr-bg-white shr-px-0.5',
         'contrast-more:shr-border-high-contrast',
         'focus-within:shr-focus-indicator',
     ],

package/lib/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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"}

package/lib/components/InputFile/InputFile.js

@@ -36,7 +36,7 @@ const inputFile = (0, tailwind_variants_1.tv)({
         fileList: ['smarthr-ui-InputFile-fileList', 'shr-list-none shr-self-stretch shr-text-base'],
         fileItem: 'shr-flex shr-items-center',
         inputWrapper: [
-            'shr-relative shr-inline-flex shr-rounded-m shr-border shr-border-solid shr-border-default shr-bg-white shr-font-bold shr-leading-none',
+            'shr-border-shorthand shr-relative shr-inline-flex shr-rounded-m shr-bg-white shr-font-bold shr-leading-none',
             'contrast-more:shr-border-high-contrast',
             'focus-within:shr-focus-indicator',
         ],

package/lib/components/InputFile/InputFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputFile.js","sourceRoot":"","sources":["../../../src/components/InputFile/InputFile.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"InputFile.js","sourceRoot":"","sources":["../../../src/components/InputFile/InputFile.tsx"],"names":[],"mappings":"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"}

package/lib/components/NotificationBar/NotificationBar.d.ts

@@ -1,23 +1,251 @@
 import React, { ComponentProps, ComponentPropsWithoutRef, PropsWithChildren } from 'react';
-import { Base as shrBase } from '../Base';
-export declare const messageTypes: readonly ["info", "success", "error", "warning"];
-type Props = PropsWithChildren<{
+import { VariantProps } from 'tailwind-variants';
+import { Base } from '../Base';
+export declare const notificationBar: import("tailwind-variants").TVReturnType<{
+    /** 下地 */
+    base: {
+        none: {};
+        base: {
+            wrapper: string;
+        };
+    };
+    /** メッセージの種類 */
+    type: {
+        info: {
+            icon: string;
+        };
+        success: {};
+        warning: {
+            icon: string;
+        };
+        error: {};
+    };
+    /** 強調するかどうか */
+    bold: {
+        true: string;
+        false: string;
+    };
+    /** スライドインするかどうか */
+    animate: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    inner: string;
+    messageArea: string[];
+    icon: string;
+    actionArea: string;
+    actionWrapper: string;
+    closeButton: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    /** 下地 */
+    base: {
+        none: {};
+        base: {
+            wrapper: string;
+        };
+    };
+    /** メッセージの種類 */
+    type: {
+        info: {
+            icon: string;
+        };
+        success: {};
+        warning: {
+            icon: string;
+        };
+        error: {};
+    };
+    /** 強調するかどうか */
+    bold: {
+        true: string;
+        false: string;
+    };
+    /** スライドインするかどうか */
+    animate: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    /** 下地 */
+    base: {
+        none: {};
+        base: {
+            wrapper: string;
+        };
+    };
+    /** メッセージの種類 */
+    type: {
+        info: {
+            icon: string;
+        };
+        success: {};
+        warning: {
+            icon: string;
+        };
+        error: {};
+    };
+    /** 強調するかどうか */
+    bold: {
+        true: string;
+        false: string;
+    };
+    /** スライドインするかどうか */
+    animate: {
+        true: {
+            wrapper: string;
+        };
+    };
+}>, {
+    /** 下地 */
+    base: {
+        none: {};
+        base: {
+            wrapper: string;
+        };
+    };
     /** メッセージの種類 */
-    type: (typeof messageTypes)[number];
+    type: {
+        info: {
+            icon: string;
+        };
+        success: {};
+        warning: {
+            icon: string;
+        };
+        error: {};
+    };
     /** 強調するかどうか */
-    bold?: boolean;
+    bold: {
+        true: string;
+        false: string;
+    };
     /** スライドインするかどうか */
-    animate?: boolean;
+    animate: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    inner: string;
+    messageArea: string[];
+    icon: string;
+    actionArea: string;
+    actionWrapper: string;
+    closeButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    /** 下地 */
+    base: {
+        none: {};
+        base: {
+            wrapper: string;
+        };
+    };
+    /** メッセージの種類 */
+    type: {
+        info: {
+            icon: string;
+        };
+        success: {};
+        warning: {
+            icon: string;
+        };
+        error: {};
+    };
+    /** 強調するかどうか */
+    bold: {
+        true: string;
+        false: string;
+    };
+    /** スライドインするかどうか */
+    animate: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    inner: string;
+    messageArea: string[];
+    icon: string;
+    actionArea: string;
+    actionWrapper: string;
+    closeButton: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    /** 下地 */
+    base: {
+        none: {};
+        base: {
+            wrapper: string;
+        };
+    };
+    /** メッセージの種類 */
+    type: {
+        info: {
+            icon: string;
+        };
+        success: {};
+        warning: {
+            icon: string;
+        };
+        error: {};
+    };
+    /** 強調するかどうか */
+    bold: {
+        true: string;
+        false: string;
+    };
+    /** スライドインするかどうか */
+    animate: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    /** 下地 */
+    base: {
+        none: {};
+        base: {
+            wrapper: string;
+        };
+    };
+    /** メッセージの種類 */
+    type: {
+        info: {
+            icon: string;
+        };
+        success: {};
+        warning: {
+            icon: string;
+        };
+        error: {};
+    };
+    /** 強調するかどうか */
+    bold: {
+        true: string;
+        false: string;
+    };
+    /** スライドインするかどうか */
+    animate: {
+        true: {
+            wrapper: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type StyleVariants = VariantProps<typeof notificationBar>;
+type Props = PropsWithChildren<Omit<StyleVariants, 'type'> & Required<Pick<StyleVariants, 'type'>> & {
     /** メッセージ */
     message: React.ReactNode;
     /** 閉じるボタン押下時に発火させる関数 */
     onClose?: () => void;
     /** role 属性 */
     role?: 'alert' | 'status';
-    /** 下地 */
-    base?: 'none' | 'base';
 }>;
 type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>;
-type BaseProps = Pick<ComponentProps<typeof shrBase>, 'layer'>;
+type BaseProps = Pick<ComponentProps<typeof Base>, 'layer'>;
 export declare const NotificationBar: React.FC<Props & ElementProps & BaseProps>;
 export {};

package/lib/components/NotificationBar/NotificationBar.js

@@ -23,162 +23,161 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationBar = exports.messageTypes = void 0;
+exports.NotificationBar = exports.notificationBar = void 0;
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const useTheme_1 = require("../../hooks/useTheme");
+const tailwind_variants_1 = require("tailwind-variants");
 const Base_1 = require("../Base");
 const Button_1 = require("../Button");
 const Icon_1 = require("../Icon");
 const Layout_1 = require("../Layout");
-const useClassNames_1 = require("./useClassNames");
-exports.messageTypes = ['info', 'success', 'error', 'warning'];
-const NotificationBar = ({ type, bold = false, message, onClose, children, role = type === 'info' ? 'status' : 'alert', base = 'none', layer, className = '', ...props }) => {
-    const theme = (0, useTheme_1.useTheme)();
-    const { color } = theme;
-    const classNames = (0, useClassNames_1.useClassNames)();
-    const { Icon, iconColor, ...colorSet } = (0, react_1.useMemo)(() => {
+exports.notificationBar = (0, tailwind_variants_1.tv)({
+    slots: {
+        wrapper: 'smarthr-ui-NotificationBar shr-flex shr-items-baseline shr-justify-between shr-gap-0.5 shr-p-0.75',
+        inner: 'shr-flex-grow',
+        messageArea: [
+            'smarthr-ui-NotificationBar-messageArea',
+            'shr-flex shr-grow',
+            '[&_.smarthr-ui-Icon-withText]:shr-leading-tight',
+        ],
+        icon: '',
+        actionArea: 'smarthr-ui-NotificationBar-actionArea shr-shrink-0',
+        actionWrapper: 'smarthr-ui-NotificationBar-actions -shr-my-0.5',
+        closeButton: 'smarthr-ui-NotificationBar-closeButton -shr-mb-0.5 -shr-mr-0.5 -shr-mt-0.5 shr-flex-shrink-0 shr-text-black',
+    },
+    variants: {
+        /** 下地 */
+        base: {
+            none: {},
+            base: {
+                wrapper: 'shr-py-1 shr-pe-1 shr-ps-1.5',
+            },
+        },
+        /** メッセージの種類 */
+        type: {
+            info: {
+                icon: 'shr-text-grey',
+            },
+            success: {},
+            warning: {
+                icon: 'shr-text-black',
+            },
+            error: {},
+        },
+        /** 強調するかどうか */
+        bold: {
+            true: '',
+            false: '',
+        },
+        /** スライドインするかどうか */
+        animate: {
+            true: {
+                wrapper: 'shr-animate-[notifiction-bar-slide-in_0.2s_ease-out]',
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            type: ['info', 'success', 'warning', 'error'],
+            bold: false,
+            className: {
+                wrapper: 'shr-bg-white shr-text-black',
+            },
+        },
+        {
+            type: 'success',
+            bold: false,
+            className: {
+                icon: 'shr-text-main',
+            },
+        },
+        {
+            type: 'error',
+            bold: false,
+            className: {
+                icon: 'shr-text-danger',
+            },
+        },
+        {
+            type: 'info',
+            bold: true,
+            className: {
+                wrapper: 'shr-bg-white',
+            },
+        },
+        {
+            type: 'success',
+            bold: true,
+            className: {
+                wrapper: 'shr-bg-main shr-text-white',
+                icon: 'shr-text-white',
+                closeButton: 'shr-text-white [&]:hover:shr-bg-main-darken [&]:focus-visible:shr-bg-main-darken',
+            },
+        },
+        {
+            type: 'warning',
+            bold: true,
+            className: {
+                wrapper: 'shr-bg-warning-yellow shr-text-black',
+                closeButton: 'shr-text-black [&]:hover:shr-bg-warning-yellow-darken [&]:focus-visible:shr-bg-warning-yellow-darken',
+            },
+        },
+        {
+            type: 'error',
+            bold: true,
+            className: {
+                wrapper: 'shr-bg-danger shr-text-white',
+                icon: 'shr-text-white',
+                closeButton: 'shr-text-white [&]:hover:shr-bg-danger-darken [&]:focus-visible:shr-bg-danger-darken',
+            },
+        },
+    ],
+});
+const NotificationBar = ({ type, bold = false, animate, message, onClose, children, role = type === 'info' ? 'status' : 'alert', base = 'none', layer, className, ...props }) => {
+    const Icon = (0, react_1.useMemo)(() => {
         switch (type) {
             case 'info':
-                return {
-                    Icon: Icon_1.FaInfoCircleIcon,
-                    iconColor: color.TEXT_GREY,
-                };
+                return Icon_1.FaInfoCircleIcon;
             case 'success': {
-                const colors = bold
-                    ? {
-                        iconColor: color.TEXT_WHITE,
-                        fgColor: color.TEXT_WHITE,
-                        bgColor: color.MAIN,
-                    }
-                    : {};
-                return {
-                    Icon: Icon_1.FaCheckCircleIcon,
-                    iconColor: color.MAIN,
-                    ...colors,
-                };
+                return Icon_1.FaCheckCircleIcon;
             }
             case 'warning': {
-                const colors = bold
-                    ? {
-                        Icon: Icon_1.FaExclamationTriangleIcon,
-                        fgColor: color.TEXT_BLACK,
-                        bgColor: color.WARNING_YELLOW,
-                    }
-                    : {};
-                return {
-                    Icon: Icon_1.WarningIcon,
-                    iconColor: color.TEXT_BLACK,
-                    ...colors,
-                };
+                return bold ? Icon_1.FaExclamationTriangleIcon : Icon_1.WarningIcon;
             }
             case 'error': {
-                const colors = bold
-                    ? {
-                        iconColor: color.TEXT_WHITE,
-                        fgColor: color.TEXT_WHITE,
-                        bgColor: color.DANGER,
-                    }
-                    : {};
-                return {
-                    Icon: Icon_1.FaExclamationCircleIcon,
-                    iconColor: color.DANGER,
-                    ...colors,
-                };
+                return Icon_1.FaExclamationCircleIcon;
             }
         }
-    }, [color, type, bold]);
-    const { baseComponent: WrapBase, baseProps } = (0, react_1.useMemo)(() => base === 'base'
+    }, [type, bold]);
+    const { baseComponent: WrapBase = react_1.default.Fragment, baseProps = {} } = (0, react_1.useMemo)(() => base === 'base'
         ? {
-            baseComponent: Base,
+            baseComponent: Base_1.Base,
             baseProps: {
                 layer,
+                overflow: 'hidden',
             },
         }
-        : {
-            baseComponent: react_1.default.Fragment,
-            baseProps: {},
-        }, [base, layer]);
+        : {}, [base, layer]);
+    const { wrapperStyle, innerStyle, messageAreaStyle, iconStyle, actionAreaStyle, actionWrapperStyle, closeButtonStyle, } = (0, react_1.useMemo)(() => {
+        const { wrapper, inner, messageArea, icon, actionArea, actionWrapper, closeButton } = (0, exports.notificationBar)({ type, bold, base });
+        return {
+            wrapperStyle: wrapper({ animate, className }),
+            innerStyle: inner(),
+            messageAreaStyle: messageArea(),
+            iconStyle: icon(),
+            actionAreaStyle: actionArea(),
+            actionWrapperStyle: actionWrapper(),
+            closeButtonStyle: closeButton(),
+        };
+    }, [animate, base, bold, className, type]);
     return (react_1.default.createElement(WrapBase, { ...baseProps },
-        react_1.default.createElement(Wrapper, { ...props, className: `${type} ${classNames.wrapper}${className && ` ${className}`}`, role: role, themes: theme, "$colorSet": colorSet, onBase: base === 'base' },
-            react_1.default.createElement(Inner, null,
-                react_1.default.createElement(MessageArea, { themes: theme, className: classNames.messageArea },
-                    react_1.default.createElement(Icon, { text: message, color: iconColor, iconGap: 0.5 })),
-                children && (react_1.default.createElement(ActionArea, { themes: theme, className: classNames.actionArea },
-                    react_1.default.createElement(ActionWrapper, { themes: theme, className: classNames.actions, align: "center", justify: "flex-end" }, children)))),
-            onClose && (react_1.default.createElement(CloseButton, { variant: "text", "$colorSet": colorSet, themes: theme, onClick: onClose, className: classNames.closeButton, size: "s" },
+        react_1.default.createElement("div", { ...props, className: wrapperStyle, role: role },
+            react_1.default.createElement(Layout_1.Cluster, { gap: 1, align: "center", justify: "flex-end", className: innerStyle },
+                react_1.default.createElement("div", { className: messageAreaStyle },
+                    react_1.default.createElement(Icon, { text: message, iconGap: 0.5, className: iconStyle })),
+                children && (react_1.default.createElement(Layout_1.Cluster, { gap: 0.5, align: "center", className: actionAreaStyle },
+                    react_1.default.createElement(Layout_1.Cluster, { align: "center", justify: "flex-end", className: actionWrapperStyle }, children)))),
+            onClose && (react_1.default.createElement(Button_1.Button, { variant: "text", size: "s", onClick: onClose, className: closeButtonStyle },
                 react_1.default.createElement(Icon_1.FaTimesIcon, { alt: "\u9589\u3058\u308B" }))))));
 };
 exports.NotificationBar = NotificationBar;
-const Base = (0, styled_components_1.default)(Base_1.Base).attrs({ overflow: 'hidden' }) ``;
-const Wrapper = styled_components_1.default.div(({ themes: { color, fontSize, leading, space }, $colorSet: { fgColor = color.TEXT_BLACK, bgColor = color.WHITE }, onBase, animate, }) => (0, styled_components_1.css) `
-    display: flex;
-    gap: ${space(0.5)};
-    align-items: baseline;
-    justify-content: space-between;
-    background-color: ${bgColor};
-    padding: ${space(0.75)};
-    ${onBase &&
-    (0, styled_components_1.css) `
-      padding-block: ${space(1)};
-      padding-inline: ${space(1.5)} ${space(1)};
-    `}
-    color: ${fgColor};
-    ${animate &&
-    (0, styled_components_1.css) `
-      /* 1行の場合の高さ分だけスライドさせる */
-      /* stylelint-disable-next-line */
-      animation: ${slideIn(`calc(${fontSize.M} * ${leading.TIGHT} + ${space(1.5)})`)} 0.2s ease-out;
-    `}
-  `);
-const Inner = (0, styled_components_1.default)(Layout_1.Cluster).attrs({
-    gap: 1,
-    align: 'center',
-    justify: 'flex-end',
-}) `
-  flex-grow: 1;
-`;
-const slideIn = (translateLength) => (0, styled_components_1.keyframes) `
-  from {
-    opacity: 0;
-    transform: translateY(calc(-1 * ${translateLength}));
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const MessageArea = styled_components_1.default.div(({ themes: { leading, spacingByChar } }) => (0, styled_components_1.css) `
-    display: flex;
-    gap: ${spacingByChar(0.5)};
-    align-items: center;
-    flex-grow: 1;
-
-    .smarthr-ui-Icon-withText {
-      line-height: ${leading.TIGHT};
-    }
-  `);
-const ActionArea = styled_components_1.default.div(({ themes: { spacingByChar } }) => (0, styled_components_1.css) `
-    display: flex;
-    gap: ${spacingByChar(0.5)};
-    align-items: center;
-    flex-shrink: 0;
-  `);
-const ActionWrapper = (0, styled_components_1.default)(Layout_1.Cluster)(({ themes: { spacingByChar } }) => (0, styled_components_1.css) `
-    margin-block: ${spacingByChar(-0.5)};
-  `);
-const CloseButton = (0, styled_components_1.default)(Button_1.Button)(({ themes: { color, spacingByChar }, $colorSet: { fgColor = color.TEXT_BLACK, bgColor = color.WHITE }, }) => (0, styled_components_1.css) `
-    flex-shrink: 0;
-
-    margin-top: ${spacingByChar(-0.5)};
-    margin-right: ${spacingByChar(-0.5)};
-    margin-bottom: ${spacingByChar(-0.5)};
-    color: ${fgColor};
-
-    &:hover,
-    &:focus-visible {
-      background-color: ${color.hoverColor(bgColor)};
-      color: ${fgColor};
-    }
-  `);
 //# sourceMappingURL=NotificationBar.js.map