@croquiscom/pds 8.17.0 → 8.19.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @croquiscom/pds
 
+## 8.19.1
+
+### Patch Changes
+
+- 94e23bc: ColorPicker import 오류 수정
+
+## 8.19.0
+
+### Minor Changes
+
+- 722d402: ColorPicker 추가
+
+## 8.18.0
+
+### Minor Changes
+
+- c005db8: Badge 아이콘 크기 제한 해제 및 startIcon prop 추가
+
 ## 8.17.0
 
 ### Minor Changes

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

@@ -9,11 +9,21 @@ export interface BadgeProps {
     size?: BadgeSize;
     /** @default black */
     color?: BadgeColor;
+    /**
+     * @deprecated endIcon이 있을 경우 무시됩니다. endIcon을 사용해주세요.
+     */
+    icon?: ReactElement<IconProps>;
+    /**
+     * 라벨 좌측 영역에 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 있더라도 BadgeColor에 따라 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 없으면 기본으로 8이 지정됩니다.
+     */
+    startIcon?: ReactElement<IconProps>;
     /**
      * 라벨 우측 영역에 렌더링 될 아이콘 요소
      *  - Icon 컴포넌트 color props가 있더라도 BadgeColor에 따라 currentColor가 지정됩니다.
-     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 8로 고정됩니다.
+     *  - Icon 컴포넌트 size props가 없으면 기본으로 8이 지정됩니다.
      */
-    icon?: ReactElement<IconProps>;
+    endIcon?: ReactElement<IconProps>;
 }
-export declare const Badge: ({ className, kind, size, color, icon, children, }: PropsWithChildren<BadgeProps>) => React.JSX.Element;
+export declare const Badge: ({ className, kind, size, color, icon, startIcon, endIcon, children, }: PropsWithChildren<BadgeProps>) => React.JSX.Element;

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

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof Badge>;
 export declare const Outline: Story;
 export declare const Fill: Story;
 export declare const Icon: Story;
+export declare const DeprecatedIconProp: Story;

package/dist/components/color-picker/ColorChip.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ColorChipProps {
+    color?: string;
+    displayedColor?: string;
+    label?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick: (color: string) => void;
+}
+interface ColorChipInstance {
+    focus: () => void;
+}
+export declare const ColorChip: React.ForwardRefExoticComponent<ColorChipProps & React.RefAttributes<ColorChipInstance>>;
+export {};

package/dist/components/color-picker/ColorPicker.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ColorPickerSize, PresetType } from './types';
+export type ColorPickerLayout = 'custom' | 'preset';
+export interface ColorPickerProps {
+    /**
+     * hex color code (ex: #FFFFFF)
+     */
+    value?: string;
+    /**
+     * @param code hex color code (ex: FFFFFF, #FFFFFF6D)
+     */
+    onChange(code: string): void;
+    disabled?: boolean;
+    /**
+     * @default medium
+     */
+    size?: ColorPickerSize;
+    /**
+     * preset props이 없으면 layout=preset이 적용되지 않습니다.
+     * @default custom
+     */
+    layout?: ColorPickerLayout;
+    alpha?: boolean;
+    preset?: PresetType[];
+    resetText?: string;
+    settingText?: string;
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1035
+     */
+    zIndex?: number;
+    className?: string;
+}
+export declare const ColorPicker: React.FC<ColorPickerProps>;

package/dist/components/color-picker/ColorPicker.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ColorPicker, ColorPickerProps } from './ColorPicker';
+declare const meta: Meta<typeof ColorPicker>;
+export default meta;
+type Story = StoryObj<ColorPickerProps>;
+export declare const Default: Story;
+export declare const State: Story;

package/dist/components/color-picker/ColorPickerTrigger.d.ts

@@ -0,0 +1,8 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import { ColorPickerSize } from './types';
+export interface ColorPickerTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    color?: string;
+    opened?: boolean;
+    size?: ColorPickerSize;
+}
+export declare const ColorPickerTrigger: React.ForwardRefExoticComponent<ColorPickerTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/color-picker/Controller.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ControllerProps {
+    code?: string;
+    support_alpha?: boolean;
+    onCodeChange(code: string): void;
+    zIndex?: number;
+}
+export declare const Controller: React.FC<ControllerProps>;

package/dist/components/color-picker/HslController.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { HslColor } from 'polished/lib/types/color';
+export interface ControllerProps {
+    value?: string;
+    onChange(code: HslColor): void;
+}
+export declare const HslController: React.FC<ControllerProps>;

package/dist/components/color-picker/Preset.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PresetType } from './types';
+export interface PresetProps {
+    /**
+     * @desc hex 컬러 코드 (ex: #000000)
+     */
+    selected_color?: string;
+    onSelect(color: string): void;
+    preset?: PresetType[];
+}
+export declare const Preset: React.FC<PresetProps>;

package/dist/components/color-picker/RgbController.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { RgbColor } from 'polished/lib/types/color';
+export interface ControllerProps {
+    value?: string;
+    onChange(code: RgbColor): void;
+}
+export declare const RgbController: React.FC<ControllerProps>;

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './ColorPicker';

package/dist/components/color-picker/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const checker: import("@emotion/utils").SerializedStyles;
+export declare const NoArrowNumberInput: import("@emotion/styled").StyledComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "width" | "size"> & import("../input/InputBase").InputBaseType & import("../../types/common").AriaFocusProps & import("../input/InputAffix").InputAffixProps & import("react").RefAttributes<HTMLInputElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const Unit: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const InputContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/color-picker/types.d.ts

@@ -0,0 +1,10 @@
+export type ColorPickerSize = 'small' | 'medium';
+export interface PresetType {
+    label: string;
+    colors: Array<{
+        label: string;
+        color: string;
+        disabled?: boolean;
+        displayedColor?: string;
+    }>;
+}

package/dist/components/color-picker/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const toHexCode: (code?: string) => string;
+export declare const toRegular: (code?: string) => string;
+export declare const alphaToHex: (alpha?: number) => string;
+export declare const removeAlpha: (code: string) => string;

package/dist/components/index.d.ts

@@ -34,3 +34,4 @@ export * from './list-item';
 export * from './column-view-controller';
 export * from './chip';
 export * from './category-selector';
+export * from './color-picker';