@croquiscom/pds 8.18.0 → 8.19.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @croquiscom/pds
 
+## 8.19.2
+
+### Patch Changes
+
+- 3ebe9dc: TableItem button type을 button으로 변경
+
+## 8.19.1
+
+### Patch Changes
+
+- 94e23bc: ColorPicker import 오류 수정
+
+## 8.19.0
+
+### Minor Changes
+
+- 722d402: ColorPicker 추가
+
 ## 8.18.0
 
 ### Minor Changes

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';

package/dist/components/message/types.d.ts

@@ -6,5 +6,5 @@ export declare const MessagePosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export type MessagePositionType = typeof MessagePosition[keyof typeof MessagePosition];
+export type MessagePositionType = (typeof MessagePosition)[keyof typeof MessagePosition];
 export type MessageDirection = Extract<CSSProperties['flexDirection'], 'column' | 'column-reverse'>;

package/dist/components/notification/types.d.ts

@@ -6,4 +6,4 @@ export declare const NotificationPosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export type NotificationPositionType = typeof NotificationPosition[keyof typeof NotificationPosition];
+export type NotificationPositionType = (typeof NotificationPosition)[keyof typeof NotificationPosition];

package/dist/components/toast/types.d.ts

@@ -8,5 +8,5 @@ export declare const ToastPosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export type ToastPositionType = typeof ToastPosition[keyof typeof ToastPosition];
+export type ToastPositionType = (typeof ToastPosition)[keyof typeof ToastPosition];
 export type ToastDirection = MessageDirection;