@croquiscom/pds 0.3.0 → 0.5.0

package/dist/radio/Radio.d.ts

@@ -1,9 +1,14 @@
 import React, { InputHTMLAttributes } from 'react';
+import { RadioItemType } from './RadioGroup';
 export interface RadioProps extends Exclude<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /**
      * @default false
      */
     fill?: boolean;
     className?: string;
+    /**
+     * @default default
+     */
+    radioItemType?: RadioItemType;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/radio/Radio.stories.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./Radio").RadioProps & React.RefAttributes<HTMLInputElement>>;
-};
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Radio").RadioProps & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
 export declare const Base: any;
 export declare const Checked: any;

package/dist/radio/RadioGroup.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-declare type AlignType = 'horizontal' | 'vertical';
+export declare type AlignType = 'horizontal' | 'vertical';
+export declare type RadioItemType = 'default' | 'box';
 interface RadioItem<RadioValue> {
     label: React.ReactNode;
     value: RadioValue;
@@ -11,9 +12,15 @@ export interface RadioGroupProps<RadioValue> {
     value?: RadioValue;
     name?: string;
     items: RadioItem<RadioValue>[];
+    /**
+     *  @default 24
+     *  radioItmType - 'box': spacing 속성 미적용
+     */
     spacing?: number;
     disabled?: boolean;
     align?: AlignType;
+    radioItemType?: RadioItemType;
+    keyExtractor?: (item: RadioItem<RadioValue>, index: number) => string | number;
     onChange?: (value: RadioValue) => void;
 }
 export interface RadioGroupInstance<RadioValue> {

package/dist/radio/RadioGroup.stories.d.ts

@@ -1,13 +1,12 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: <RadioValue>(props: import("./RadioGroup").RadioGroupProps<RadioValue> & {
-        ref?: React.Ref<import("./RadioGroup").RadioGroupInstance<RadioValue>>;
-    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-};
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(<RadioValue>(props: import("./RadioGroup").RadioGroupProps<RadioValue> & {
+    ref?: React.Ref<import("./RadioGroup").RadioGroupInstance<RadioValue>>;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
 export default _default;
 export declare const Base: any;
 export declare const Spacing: any;
 export declare const Disabled: any;
 export declare const VerticalAlign: any;
 export declare const Controlled: () => JSX.Element;
+export declare const BoxRadio: () => JSX.Element;

package/dist/radio/styles.d.ts

@@ -0,0 +1,12 @@
+import { RadioItemType, AlignType } from './RadioGroup';
+export declare const getRadioGroupStyleByProps: ({ radio_item_type, align, spacing, }: {
+    radio_item_type?: RadioItemType;
+    align?: AlignType;
+    spacing?: Number;
+}) => import("@emotion/utils").SerializedStyles;
+export declare const getRadioStyleByProps: ({ radio_item_type, fill, disabled, checked, }: {
+    radio_item_type?: RadioItemType;
+    fill?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+}) => import("@emotion/utils").SerializedStyles;

package/dist/stack/HStack.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StackProps } from './types';
 declare type VerticalAlignment = 'stretch' | 'top' | 'bottom' | 'center';
 export interface HStackProps extends StackProps {

package/dist/stack/HStack.stories.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme;
-        as?: React.ElementType<any>;
-    } & import("./HStack").HStackProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-};
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & import("./HStack").HStackProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>>;
 export default _default;
 export declare const Base: any;
 export declare const Spacing: any;

package/dist/stack/VStack.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StackProps } from './types';
 declare type HorizontalAlignment = 'stretch' | 'leading' | 'trailing' | 'center';
 export interface VStackProps extends StackProps {

package/dist/stack/VStack.stories.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme;
-        as?: React.ElementType<any>;
-    } & import("./VStack").VStackProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-};
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & import("./VStack").VStackProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>>;
 export default _default;
 export declare const Base: any;
 export declare const Spacing: any;

package/dist/stack/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SizeProps, SpaceProps } from '../styles';
 import { CSSValueWithLength } from '../styles/buildCSSWithLength';
 export declare type StackAlignment = 'stretch' | 'flex-start' | 'center' | 'flex-end';

package/dist/stories/Box.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Box: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;

package/dist/switch/Switch.d.ts

@@ -0,0 +1,21 @@
+import React, { ButtonHTMLAttributes } from 'react';
+export declare type SwitchSize = 'small' | 'large';
+export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     *  @default true
+     */
+    isOn?: boolean;
+    /**
+     *  @default small
+     */
+    size?: SwitchSize;
+    /**
+     *  @default ON
+     */
+    onText?: string;
+    /**
+     *  @default OFF
+     */
+    offText?: string;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/switch/Switch.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Switch").SwitchProps & React.RefAttributes<HTMLButtonElement>>>;
+export default _default;
+export declare const Base: any;

package/dist/switch/index.d.ts

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

package/dist/switch/styles.d.ts

@@ -0,0 +1,4 @@
+import { SwitchSize } from './Switch';
+export declare const switch_base_css: import("@emotion/utils").SerializedStyles;
+export declare const getStylesByActive: (isOn: boolean) => import("@emotion/utils").SerializedStyles;
+export declare const getStyleByProps: (size: SwitchSize, isOn: boolean) => import("@emotion/utils").SerializedStyles;

package/dist/text/BaseText.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@emotion/react/types/css-prop" />
 import React from 'react';
 import { Typography } from '../foundation';
 declare type Alignment = 'center' | 'leading' | 'trailing';

package/dist/text/BaseText.stories.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
-import { BaseTextProps } from './BaseText';
-declare const _default: {
-    title: string;
-    component: React.FC<BaseTextProps & (React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>)>;
-};
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./BaseText").BaseTextProps & (React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>)>>;
 export default _default;
 export declare const Base: any;
 export declare const Alignment: any;

package/dist/utils/shared.d.ts

@@ -0,0 +1,3 @@
+export declare function getKeyFromItem<Item extends {
+    value: unknown;
+}>(item: Item, index: number): string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croquiscom/pds",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Design system for Zigzag's Partner Center",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",

package/dist/input/Input.d.ts

@@ -1,9 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import { CSSValueWithLength } from '../styles/buildCSSWithLength';
-export declare type InputAlignment = 'left' | 'center' | 'right';
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    alignment?: InputAlignment;
-    error?: boolean;
-    width?: CSSValueWithLength;
-}
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/input/Input.stories.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { InputProps } from './Input';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-};
-export default _default;
-export declare const Base: any;
-export declare const Error: any;
-export declare const Disabled: any;
-export declare const EnteredDisabled: any;
-export declare const RightAlignment: any;

package/dist/input/InputAddon.d.ts

@@ -1,10 +0,0 @@
-import React, { AllHTMLAttributes } from 'react';
-export interface InputProps extends AllHTMLAttributes<HTMLDivElement> {
-    disabled?: boolean;
-    error?: boolean;
-    /**
-     * @default left
-     */
-    position: 'left' | 'right';
-}
-export declare const InputAddon: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/input/NumericInput.d.ts

@@ -1,20 +0,0 @@
-import React, { ChangeEvent, InputHTMLAttributes } from 'react';
-import { CSSValueWithLength } from '../styles/buildCSSWithLength';
-import { InputAlignment } from './Input';
-export interface NumericInputBaseType {
-    value?: number | string | null;
-    defaultValue?: number | string;
-    alignment?: InputAlignment;
-    error?: boolean;
-    prefix?: string;
-    suffix?: string;
-    /**
-     * @default true
-     */
-    allowNegative?: boolean;
-    decimalScale?: number;
-    width?: CSSValueWithLength;
-    onChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void;
-}
-export declare type NumericInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'width'> & NumericInputBaseType;
-export declare const NumericInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "width" | "onChange"> & NumericInputBaseType & React.RefAttributes<HTMLInputElement>>;

package/dist/input/NumericInput.stories.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import { NumericInputProps } from './NumericInput';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "width" | "onChange"> & import("./NumericInput").NumericInputBaseType & React.RefAttributes<HTMLInputElement>>;
-};
-export default _default;
-export declare const Base: any;
-export declare const Addon: any;
-export declare const Error: any;
-export declare const Disabled: any;
-export declare const WhetherNegativeNumbersAreAllowed: any;
-export declare const DecimalScale: any;
-export declare const EnteredDisabled: any;
-export declare const RightAlignment: any;
-export declare const SetValueWithName: {
-    (args: NumericInputProps): JSX.Element;
-    args: {
-        prefix: string;
-        suffix: string;
-        placeholder: string;
-    };
-};

package/dist/input/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Input';
-export * from './NumericInput';

package/dist/input/styles.d.ts

@@ -1,16 +0,0 @@
-export declare const input_base_css: import("@emotion/utils").SerializedStyles;
-export declare const input_default_style: {
-    backgroundColor: string;
-    border: string;
-    color: string;
-};
-export declare const input_error_style: {
-    border: string;
-    '&:focus': {
-        border: string;
-    };
-};
-export declare const input_disabled_style: {
-    backgroundColor: string;
-    color: string;
-};

package/dist/textarea/Textarea.d.ts

@@ -1,6 +0,0 @@
-import React, { TextareaHTMLAttributes } from 'react';
-import { SizeProps } from '../styles';
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, SizeProps {
-    error?: boolean;
-}
-export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/textarea/Textarea.stories.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { TextareaProps } from './Textarea';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-};
-export default _default;
-export declare const Base: any;
-export declare const Error: any;
-export declare const Disabled: any;
-export declare const EnteredDisabled: any;

package/dist/textarea/index.d.ts

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

package/dist/toggle-switch/ToggleSwitch.d.ts

@@ -1,22 +0,0 @@
-import React, { ButtonHTMLAttributes } from 'react';
-export declare type ToggleSwitchSize = 'small' | 'large';
-export interface ToggleSwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     *  @default true
-     */
-    isOn?: boolean;
-    /**
-     *  @default small
-     */
-    size?: ToggleSwitchSize;
-    /**
-     *  @default ON
-     */
-    onText?: string;
-    /**
-     *  @default OFF
-     */
-    offText?: string;
-}
-export declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;
-export default ToggleSwitch;

package/dist/toggle-switch/ToggleSwitch.stories.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ToggleSwitchProps } from './ToggleSwitch';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;
-};
-export default _default;
-export declare const Base: any;

package/dist/toggle-switch/index.d.ts

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

package/dist/toggle-switch/styles.d.ts

@@ -1,4 +0,0 @@
-import { ToggleSwitchSize } from './ToggleSwitch';
-export declare const toggle_switch_base_css: import("@emotion/utils").SerializedStyles;
-export declare const getStylesByActive: (isOn: boolean) => import("@emotion/utils").SerializedStyles;
-export declare const getStyleByProps: (size: ToggleSwitchSize, isOn: boolean) => import("@emotion/utils").SerializedStyles;