maru_design2 2.29.1 → 2.31.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.31.0](https://github.com/42maru-ai/maru-design2/compare/v2.30.0...v2.31.0) (2026-02-09)
+
+
+### Features
+
+* :hammer: Badge & Toast & ButtonGroups ([d096c12](https://github.com/42maru-ai/maru-design2/commit/d096c1201ad014d4fa9854fe5d535b0de9e60244))
+
+## [2.30.0](https://github.com/42maru-ai/maru-design2/compare/v2.29.1...v2.30.0) (2026-01-30)
+
+
+### Features
+
+* :hammer: Radio & Slider & Toggle UI ([#693](https://github.com/42maru-ai/maru-design2/issues/693)) ([b7038de](https://github.com/42maru-ai/maru-design2/commit/b7038de4105fc7086f931cc751503a62f79d35de))
+
 ## [2.29.1](https://github.com/42maru-ai/maru-design2/compare/v2.29.0...v2.29.1) (2026-01-06)
 
 

package/dist/components/atoms/badge/Badge.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TBadgeColor, TBadgeVariant } from '../../../enums/variant';
+import './badge.scss';
+export interface BadgeProps {
+    /**
+     * 컴포넌트에 들어갈 내용
+     */
+    children: React.ReactNode;
+    /**
+     * 배지 색상
+     */
+    color?: TBadgeColor;
+    /**
+     * 배지 스타일 변형
+     */
+    variant?: TBadgeVariant;
+    className?: string;
+    /**
+     * 설정하면 X아이콘이 렌더링되고 클릭 이벤트가 할당됩니다.
+     */
+    onXIconClick?: () => void;
+}
+export declare function Badge({ children, color, variant, className, onXIconClick, }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/badge/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/dist/components/atoms/icon/iconmap.d.ts

@@ -37,6 +37,7 @@ export declare const iconmap: {
     };
 };
 export declare const ICONS: {
+    readonly X_s1210: "X_s1210";
     readonly AlertCircle_s1413: "AlertCircle_s1413";
     readonly AlertCircle_s1610: "AlertCircle_s1610";
     readonly AlertCircle_s1615: "AlertCircle_s1615";

package/dist/components/atoms/radio/Radio.d.ts

@@ -3,12 +3,21 @@ import { TRadioColor } from '../../../enums/color';
 import { TGap } from '../../../enums/gap';
 import './radio.scss';
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'type'> {
+    /**
+     * 라디오 토글의 값
+     */
     checked?: boolean;
+    /**
+     * 기본 회색, 메인 테마색 ['primary']
+     */
     color?: TRadioColor;
     /**
      * 컴포넌트와 라벨 사이의 거리. ['8px', '4px', '2px']
      */
     gap?: TGap;
+    /**
+     * 라디오 버튼 옆 문자 내용
+     */
     label?: string;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/slider/Slider.d.ts

@@ -25,7 +25,14 @@ export interface SliderProps {
      * 값 증가 단위 (기본값: 1)
      */
     step?: number;
+    /**
+     * 값 표시 여부
+     */
+    showValue?: boolean;
     disabled?: boolean;
     className?: string;
 }
-export declare function Slider({ value, onChange, color, min, max, step, disabled, className, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * showValue에 관한 글: showValue가 true면 기존 input에 있는 thumb를 숨기고 custom thumb를 보여준다.
+ */
+export declare function Slider({ value, onChange, color, min, max, step, showValue, disabled, className, }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/toggle/Toggle.d.ts

@@ -8,6 +8,9 @@ export interface ToggleProps {
      * ['primary', 'secondary', 'positive', 'warning', 'danger']. (@v1 variant)
      */
     color?: TColor;
+    /**
+     * 비활성화 여부
+     */
     disabled?: boolean;
     /**
      * 텍스트가 있는 토글.
@@ -16,5 +19,13 @@ export interface ToggleProps {
         left?: string;
         right?: string;
     };
+    /**
+     * 토글 아이콘 표시 여부
+     */
+    showIcon?: boolean;
+    /**
+     * 토글 크기 배율 (기본값: 1)
+     */
+    scale?: number;
 }
-export declare function Toggle({ checked, onChange, className, color, disabled, text, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toggle({ checked, onChange, className, color, disabled, text, showIcon, scale, }: ToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/buttonGroup/ButtonGroup.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import './button-group.scss';
+export interface ButtonGroupButton<T extends string> {
+    /**
+     * 표시할 라벨
+     */
+    label: React.ReactNode;
+    /**
+     * 선택 값
+     */
+    value: T;
+    /**
+     * 버튼 커스텀 클래스
+     */
+    className?: string;
+}
+export interface ButtonGroupProps<T extends string> {
+    /**
+     * 선택된 값
+     */
+    value: T;
+    /**
+     * 값 변경 함수
+     */
+    onChange: (value: T) => void;
+    /**
+     * 버튼 리스트
+     *
+     * ```tsx
+     * {
+     *   label: React.ReactNode;
+     *   value: T;
+     *   className?: string;
+     * }
+     * ```
+     */
+    buttons: ButtonGroupButton<T>[];
+    /**
+     * 스타일 타입
+     * - segmented: 버튼들을 간격을 두고 묶여있는 형태 (기본값).
+     * - segmented-secondary: segmented와 동일한 래퍼,
+     *    선택된 버튼이 흰색 배경 + primary색 텍스트 컬러.
+     * - icon: 아웃라인 버튼 안에 간격없이 붙어있는 형태.
+     */
+    variant?: 'segmented' | 'segmented-secondary' | 'icon';
+    /**
+     * 사이즈
+     */
+    size?: 'sm' | 'md';
+    /**
+     * 전체 비활성화 여부
+     */
+    disabled?: boolean;
+    className?: string;
+}
+export declare function ButtonGroup<T extends string>({ value, onChange, buttons, variant, size, disabled, className, }: ButtonGroupProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/buttonGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './ButtonGroup';

package/dist/components/molecules/toast/Toast.d.ts

@@ -11,6 +11,10 @@ export interface IToast {
         content: string;
         onClick: () => void;
     };
+    revert?: {
+        label: string;
+        onRevert: () => void;
+    };
     details?: IToastDetailItem[];
     disableAutoOff?: boolean;
 }

package/dist/components/molecules/toast/ToastStyle.d.ts

@@ -12,7 +12,11 @@ export interface ToastStyleProps {
         content: string;
         onClick: () => void;
     };
+    revert?: {
+        label: string;
+        onRevert: () => void;
+    };
     details?: IToastDetailItem[];
     onClose: () => void;
 }
-export declare function ToastStyle({ variant, content, title, closeButton, details, onClose, }: ToastStyleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastStyle({ variant, content, title, closeButton, revert, details, onClose, }: ToastStyleProps): import("react/jsx-runtime").JSX.Element;

package/dist/enums/color.d.ts

@@ -2,10 +2,10 @@ export type TTheme = 'blue' | 'green' | 'navy';
 declare const DColor: {
     readonly primary: "var(--p)";
     readonly secondary: "#8c8c8c";
-    readonly positive: "#32a483";
+    readonly positive: "#308acc";
     readonly warning: "#ffb020";
     readonly danger: "#e53e3e";
-    readonly success: "#308acc";
+    readonly success: "#32a483";
 };
 export declare const COLORS: string[];
 export type TColor = (typeof COLORS)[number];

package/dist/enums/variant.d.ts

@@ -6,3 +6,7 @@ export declare const TOAST_VARIANTS: readonly ["success", "warning", "danger"];
 export type TToastVariant = (typeof TOAST_VARIANTS)[number];
 export declare const SKELETON_VARIANTS: readonly ["frame"];
 export type TSkeletonVariant = (typeof SKELETON_VARIANTS)[number];
+export declare const BADGE_COLORS: readonly ["primary", "secondary", "blue", "green", "purple"];
+export type TBadgeColor = (typeof BADGE_COLORS)[number];
+export declare const BADGE_VARIANTS: readonly ["default", "outlined"];
+export type TBadgeVariant = (typeof BADGE_VARIANTS)[number];

package/dist/fontProvider/index.d.ts

@@ -0,0 +1 @@
+import './fonts.scss';