@team-monolith/cds 1.19.1 → 1.20.0

package/dist/components/SwitchButton.d.ts

@@ -0,0 +1,33 @@
+import { PolymorphicProps } from "@mui/base";
+import React from "react";
+export type SwitchButtonColor = "grey" | "white" | "none";
+export type SwitchButtonSize = "medium" | "xsmall";
+export interface SwitchButtonOwnProps<RootComponentType extends React.ElementType> {
+    className?: string;
+    component?: RootComponentType;
+    /** 스위치 버튼 색상 */
+    color: SwitchButtonColor;
+    /** 스위치 버튼 크기 */
+    size: SwitchButtonSize;
+    /** on/off status를 나타냅니다. */
+    isOn: boolean;
+    /** on 일때의 아이콘 */
+    onIcon: React.ReactNode;
+    /** off 일때의 아이콘 */
+    offIcon: React.ReactNode;
+    /** 아이콘 오른쪽에 나타낼 숫자. 전달하지 않으면 나타나지 않습니다. */
+    count?: number;
+    /** on/off 변경시 호출되는 콜백 함수 */
+    onChange: (isOn: boolean) => void;
+}
+export type SwitchButtonProps<RootComponentType extends React.ElementType = SwitchButtonTypeMap["defaultComponent"]> = PolymorphicProps<SwitchButtonTypeMap<RootComponentType>, RootComponentType>;
+export interface SwitchButtonTypeMap<RootComponentType extends React.ElementType = "button"> {
+    props: SwitchButtonOwnProps<RootComponentType>;
+    defaultComponent: RootComponentType;
+}
+type SwitchButtonComponent = <RootComponentType extends React.ElementType = "button">(props: SwitchButtonProps<RootComponentType>) => React.ReactElement | null;
+/**
+ * [피그마](https://www.figma.com/file/CxpgZcJFoRPWEZyx5RC0tq/Framework-System?node-id=766%3A11274&mode=dev)
+ */
+declare const SwitchButton: SwitchButtonComponent;
+export default SwitchButton;

package/dist/components/SwitchButton.js

@@ -0,0 +1,117 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { HOVER } from "../utils/hover";
+import React from "react";
+import styled from "@emotion/styled";
+const COLOR_TO_SWITCH_BUTTON_STYLE = (theme, color, isOn) => ({
+    grey: css `
+      ${isOn
+        ? css `
+            background: ${theme.color.background.neutralAltActive};
+            opacity: 0.6;
+          `
+        : css `
+            background: ${theme.color.background.neutralAlt};
+            opacity: 0.6;
+            ${HOVER(css `
+              opacity: 1;
+            `)}
+          `}
+    `,
+    white: css `
+      ${isOn
+        ? css `
+            background: ${theme.color.background.neutralAlt};
+            opacity: 0.6;
+          `
+        : css `
+            background: ${theme.color.background.neutralBase};
+            opacity: 0.6;
+            ${HOVER(css `
+              opacity: 1;
+            `)}
+          `}
+    `,
+    none: css `
+      ${isOn
+        ? css `
+            background: ${theme.color.background.neutralAlt};
+            opacity: 0.6;
+          `
+        : css `
+            background: none;
+            opacity: 0.6;
+            ${HOVER(css `
+              opacity: 1;
+            `)}
+          `}
+    `,
+})[color];
+const SIZE_TO_SWITCH_BUTTON_STYLE = (size) => ({
+    medium: css `
+      padding: 8px 12px;
+      gap: 8px;
+      height: 40px;
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+      span {
+        font-size: 16px;
+        line-height: 20px;
+      }
+    `,
+    xsmall: css `
+      padding: 4px 6px;
+      gap: 4px;
+      height: 24px;
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+      span {
+        font-size: 12px;
+        line-height: 16px;
+      }
+    `,
+})[size];
+/**
+ * [피그마](https://www.figma.com/file/CxpgZcJFoRPWEZyx5RC0tq/Framework-System?node-id=766%3A11274&mode=dev)
+ */
+const SwitchButton = React.forwardRef(function SwitchButton(props, ref) {
+    const { className, component: Component = "button", color, size, isOn, onIcon, offIcon, count, onChange } = props, other = __rest(props, ["className", "component", "color", "size", "isOn", "onIcon", "offIcon", "count", "onChange"]);
+    const theme = useTheme();
+    return (_jsxs(Component, Object.assign({ type: "button" }, other, { className: className, ref: ref, css: [
+            css `
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: fit-content;
+            cursor: pointer;
+            border: none;
+            border-radius: 99px;
+            text-decoration: none;
+          `,
+            COLOR_TO_SWITCH_BUTTON_STYLE(theme, color, isOn),
+            SIZE_TO_SWITCH_BUTTON_STYLE(size),
+        ], onClick: () => onChange(!isOn) }, { children: [isOn ? onIcon : offIcon, count !== undefined && _jsx(Count, { children: count })] })));
+});
+const Count = styled.span(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/16px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-weight: 500;
+  `);
+export default SwitchButton;

package/dist/icons/Custom.d.ts

@@ -154,3 +154,57 @@ export declare const customEmbeddedColorSvg: string;
 export declare const CustomEmbeddedColorIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
 } & React.RefAttributes<any>>;
+export declare const customEmoHeartSvg: string;
+export declare const CustomEmoHeartIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoHeartColorSvg: string;
+export declare const CustomEmoHeartColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoHundredSvg: string;
+export declare const CustomEmoHundredIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoHundredColorSvg: string;
+export declare const CustomEmoHundredColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoStarsSvg: string;
+export declare const CustomEmoStarsIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoStarsColorSvg: string;
+export declare const CustomEmoStarsColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoThumbupSvg: string;
+export declare const CustomEmoThumbupIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoThumbupColorSvg: string;
+export declare const CustomEmoThumbupColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoClapSvg: string;
+export declare const CustomEmoClapIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEmoClapColorSvg: string;
+export declare const CustomEmoClapColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customBoardSvg: string;
+export declare const CustomBoardIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customBoardColorSvg: string;
+export declare const CustomBoardColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;