@team-monolith/cds 1.54.0 → 1.54.2

package/dist/index.d.ts

@@ -43,4 +43,4 @@ export * from "./patterns/Dropdown";
 export * from "./patterns/SegmentedControl";
 export * from "./patterns/LexicalEditor";
 export * from "./patterns/Accordion";
-export * from "./patterns/NestedSwitchButton";
+export * from "./patterns/ToggleButtonGroup";

package/dist/index.js

@@ -43,4 +43,4 @@ export * from "./patterns/Dropdown";
 export * from "./patterns/SegmentedControl";
 export * from "./patterns/LexicalEditor";
 export * from "./patterns/Accordion";
-export * from "./patterns/NestedSwitchButton";
+export * from "./patterns/ToggleButtonGroup";

package/dist/patterns/{NestedSwitchButton/SwitchButton.d.ts → ToggleButtonGroup/ToggleButton.d.ts}

@@ -1,7 +1,7 @@
-import { SwitchButtonDatum } from "./NestedSwitchButton";
-/** 하나의 SwitchButton을 그립니다. */
-export declare function SwitchButton(props: {
-    datum: SwitchButtonDatum;
+import { ToggleButtonDatum } from "./ToggleButtonGroup";
+/** 하나의 ToggleButton을 그립니다. */
+export declare function ToggleButton(props: {
+    datum: ToggleButtonDatum;
     /** tooltip의 placement */
     placement: "bottom-start" | "bottom" | "bottom-end";
     isActive: boolean;

package/dist/patterns/{NestedSwitchButton/SwitchButton.js → ToggleButtonGroup/ToggleButton.js}

@@ -2,15 +2,15 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { HOVER, Tooltip } from "../..";
 import { css } from "@emotion/react";
-import { NestedSwitchButtonClasses, } from "./NestedSwitchButton";
-/** 하나의 SwitchButton을 그립니다. */
-export function SwitchButton(props) {
+import { toggleButtonGroupClasses, } from "./ToggleButtonGroup";
+/** 하나의 ToggleButton을 그립니다. */
+export function ToggleButton(props) {
     const { datum, placement, isActive, onClick } = props;
     const { label, onIcon, offIcon } = datum;
     if (isActive) {
-        return (_jsxs(Active, Object.assign({ className: NestedSwitchButtonClasses.switchButton.active, onClick: onClick }, { children: [onIcon, label] })));
+        return (_jsxs(Active, Object.assign({ className: toggleButtonGroupClasses.toggleButton.active, onClick: onClick }, { children: [onIcon, label] })));
     }
-    return (_jsx(Tooltip, Object.assign({ placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ className: NestedSwitchButtonClasses.switchButton.inactive, onClick: onClick }, { children: offIcon })) })));
+    return (_jsx(Tooltip, Object.assign({ placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick }, { children: offIcon })) })));
 }
 const Active = styled.div(({ theme }) => css `
     cursor: pointer;

package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const toggleButtonGroupClasses: {
+    readonly container: "ToggleButtonGroup-container";
+    readonly toggleButton: {
+        readonly active: "ToggleButtonGroup-ToggleButton-active";
+        readonly inactive: "ToggleButtonGroup-ToggleButton-inactive";
+    };
+};
+export interface ToggleButtonDatum {
+    /** ToggleButton의 레이블. 호버시 툴팁 또는 활성화시 나타납니다. */
+    label: React.ReactNode;
+    /** on 일때의 아이콘. 내부에서 사이즈가 24x24로 조정됩니다. */
+    onIcon: React.ReactNode;
+    /** off 일때의 아이콘. 내부에서 사이즈가 24x24로 조정됩니다.*/
+    offIcon: React.ReactNode;
+}
+/** n개의 toggleButton이 모여있는 형태를 나타내는 컴포넌트입니다.
+ * 동작은 SegmentedControl과 비슷합니다.
+ * 렉시컬 블록으로 활용하기 위해 선택된 버튼의 인덱스 상태를 외부에서 관리합니다.
+ */
+export declare function ToggleButtonGroup(props: {
+    className?: string;
+    /** ToggleButton의 데이터 배열 */
+    data: ToggleButtonDatum[];
+    /** 활성화될 ToggleButton의 index */
+    activeIndex: number | null;
+    /** activeIndex set 함수 */
+    setActiveIndex: (index: number | null) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { ToggleButton } from "./ToggleButton";
+export const toggleButtonGroupClasses = {
+    container: "ToggleButtonGroup-container",
+    toggleButton: {
+        active: "ToggleButtonGroup-ToggleButton-active",
+        inactive: "ToggleButtonGroup-ToggleButton-inactive",
+    },
+};
+/** n개의 toggleButton이 모여있는 형태를 나타내는 컴포넌트입니다.
+ * 동작은 SegmentedControl과 비슷합니다.
+ * 렉시컬 블록으로 활용하기 위해 선택된 버튼의 인덱스 상태를 외부에서 관리합니다.
+ */
+export function ToggleButtonGroup(props) {
+    const { className, data, activeIndex, setActiveIndex } = props;
+    return (_jsx(Container, Object.assign({ className: `${className} ${toggleButtonGroupClasses.container}` }, { children: data.map((datum, index) => {
+            const isFirst = index === 0;
+            const isLast = index === data.length - 1;
+            const isFirstAndLast = isFirst && isLast;
+            const isActive = activeIndex === index;
+            return (_jsx(ToggleButton, { isActive: isActive, onClick: () => {
+                    setActiveIndex(isActive ? null : index);
+                }, datum: datum, placement: isFirstAndLast
+                    ? "bottom"
+                    : isFirst
+                        ? "bottom-start"
+                        : isLast
+                            ? "bottom-end"
+                            : "bottom" }, index));
+        }) })));
+}
+const Container = styled.div `
+  display: flex;
+  padding: 4px;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+
+  border-radius: 24px;
+  background: linear-gradient(90deg, #eff7ed 0%, #faefe3 100%);
+`;

package/dist/patterns/ToggleButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export * from "./ToggleButtonGroup";

package/dist/patterns/ToggleButtonGroup/index.js

@@ -0,0 +1 @@
+export * from "./ToggleButtonGroup";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.54.0",
+  "version": "1.54.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,

package/dist/patterns/NestedSwitchButton/NestedSwitchButton.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-export declare const NestedSwitchButtonClasses: {
-    readonly container: "NestedSwitchButton-container";
-    readonly switchButton: {
-        readonly active: "NestedSwitchButton-SwitchButton-active";
-        readonly inactive: "NestedSwitchButton-SwitchButton-inactive";
-    };
-};
-export interface SwitchButtonDatum {
-    /** SwitchButton의 레이블. 호버시 툴팁 또는 활성화시 나타납니다. */
-    label: React.ReactNode;
-    /** on 일때의 아이콘. 내부에서 사이즈가 24x24로 조정됩니다. */
-    onIcon: React.ReactNode;
-    /** off 일때의 아이콘. 내부에서 사이즈가 24x24로 조정됩니다.*/
-    offIcon: React.ReactNode;
-}
-/** n개의 SwitchButton이 모여있는 형태를 나타내는 컴포넌트입니다.
- * 동작은 SegmentedControl과 비슷합니다.
- * components/SwitchButton과는 관련이 없습니다.
- */
-export declare function NestedSwitchButton(props: {
-    className?: string;
-    /** SwitchButton의 데이터 배열 */
-    data: SwitchButtonDatum[];
-    /** 활성화될 SwitchButton의 index */
-    activeIndex: number | null;
-    /** activeIndex set 함수 */
-    setActiveIndex: (index: number | null) => void;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/NestedSwitchButton/NestedSwitchButton.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { SwitchButton } from "./SwitchButton";
-export const NestedSwitchButtonClasses = {
-    container: "NestedSwitchButton-container",
-    switchButton: {
-        active: "NestedSwitchButton-SwitchButton-active",
-        inactive: "NestedSwitchButton-SwitchButton-inactive",
-    },
-};
-/** n개의 SwitchButton이 모여있는 형태를 나타내는 컴포넌트입니다.
- * 동작은 SegmentedControl과 비슷합니다.
- * components/SwitchButton과는 관련이 없습니다.
- */
-export function NestedSwitchButton(props) {
-    const { className, data, activeIndex, setActiveIndex } = props;
-    return (_jsx(Container, Object.assign({ className: `${className} ${NestedSwitchButtonClasses.container}` }, { children: data.map((datum, index) => {
-            const isFirst = index === 0;
-            const isLast = index === data.length - 1;
-            const isFirstAndLast = isFirst && isLast;
-            const isActive = activeIndex === index;
-            return (_jsx(SwitchButton, { isActive: isActive, onClick: () => {
-                    setActiveIndex(isActive ? null : index);
-                }, datum: datum, placement: isFirstAndLast
-                    ? "bottom"
-                    : isFirst
-                        ? "bottom-start"
-                        : isLast
-                            ? "bottom-end"
-                            : "bottom" }, index));
-        }) })));
-}
-const Container = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 4px;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1 0 0;
-
-    border-radius: 24px;
-    // fixme: 이 배경색이 의도가 맞는지 확인해야 합니다.
-    background: linear-gradient(90deg, #eff7ed 0%, #faefe3 100%);
-  `);

package/dist/patterns/NestedSwitchButton/index.d.ts

@@ -1 +0,0 @@
-export * from "./NestedSwitchButton";

package/dist/patterns/NestedSwitchButton/index.js

@@ -1 +0,0 @@
-export * from "./NestedSwitchButton";