@ap-gen/ui 1.0.5 → 1.0.7

package/README.md

@@ -0,0 +1,28 @@
+
+  <img src="thumbnail.png">
+
+# A-FIN design system(Desktop ver.)
+A-FIN design system은 에이핀아이엔씨 내부 프로젝트에서 사용되는 디자인 시스템입니다.
+
+## 설치
+
+```bash
+npm login --registry=https://nexus.a-fin.co.kr/repository/npm/
+```
+
+```bash
+npm install @afininc/design-system
+```
+
+## 사용(Next.js)
+
+```tsx
+'use client';
+import { ClientProvider } from '@afininc/design-system';
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <ClientProvider>
+    {children}
+  </ClientProvider>
+}
+```

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

@@ -5,6 +5,7 @@ type BadgeProps = {
     size?: SizeType;
     variant?: VariantType;
     children: React.ReactNode;
+    leadingArea?: React.ReactNode;
 };
-export declare function Badge({ size, variant, children, }: BadgeProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Badge({ size, variant, children, leadingArea, }: BadgeProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/breadcrumb/index.d.ts

@@ -4,7 +4,7 @@ type BreadcrumbPropsIcon = {
 };
 type BreadcrumbProps = {
     items: BreadcrumbPropsIcon[];
-    onClick: (path: string) => void;
+    onClick: (items: BreadcrumbPropsIcon[]) => void;
 };
 export declare function Breadcrumb({ items, onClick }: BreadcrumbProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/button/index.d.ts

@@ -3,6 +3,8 @@ import { IconProps } from '../icon';
 type VariantType = 'core' | 'coreLight' | 'neutral' | 'neutralOutline' | 'warning' | 'warningLight';
 type SizeType = 'large' | 'medium' | 'small';
 export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    as?: React.ElementType;
+    type?: 'button' | 'submit' | 'reset';
     variant?: VariantType;
     size?: SizeType;
     iconLeading?: IconProps['name'];
@@ -13,5 +15,5 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     disabled?: boolean;
     loading?: boolean;
 }
-export declare function Button({ variant, size, iconLeading, iconTrailing, iconAutoFill, iconAutoStroke, children, fullWidth, disabled, onClick, loading, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Button({ as, type, variant, size, iconLeading, iconTrailing, iconAutoFill, iconAutoStroke, children, fullWidth, disabled, onClick, loading, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/calendar/date.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
-type DateProps = {
+export type DateProps = {
     selected?: boolean;
     disabled?: boolean;
     today?: boolean;
     modifier?: string;
     dayoff?: boolean;
     date: number;
-    body?: React.ReactNode;
+    children?: React.ReactNode;
 };
-export declare function Date({ selected, disabled, today, modifier, dayoff, date, body, }: DateProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+export declare function Date({ selected, disabled, today, modifier, dayoff, date, children, }: DateProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/calendar/index.d.ts

@@ -1 +1,9 @@
-export declare function Calendar(): import("@emotion/react/jsx-runtime").JSX.Element;
+import { DateProps } from './date';
+interface CalendarProps {
+    data: {
+        [date: string]: DateProps;
+    };
+    onMonthChange?: (year: number, month: number) => void;
+}
+export declare function Calendar({ data, onMonthChange }: CalendarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/calendar/month.d.ts

@@ -1 +1,8 @@
-export declare function Month(): import("@emotion/react/jsx-runtime").JSX.Element;
+import { DateProps } from './date';
+interface CalendarProps {
+    data: {
+        [date: string]: DateProps;
+    };
+}
+export declare function Month({ data }: CalendarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/calendar/schedule.d.ts

@@ -4,6 +4,10 @@ type ScheduleProps = {
     selected?: boolean;
     done?: boolean;
     onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    backgroundColor?: string;
+    color?: string;
 };
-export declare function Schedule({ time, label, selected, done, onClick, }: ScheduleProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Schedule({ time, label, selected, done, onClick, className, style, backgroundColor, color, }: ScheduleProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/chip/index.d.ts

@@ -8,6 +8,7 @@ type ChipProps = {
     size?: ChipSize;
     containerStyle?: React.CSSProperties;
     leadingIcon?: IconProps['name'];
+    onClick?: () => void;
 };
-export declare function Chip({ size, color, type, label, containerStyle, leadingIcon, }: ChipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Chip({ size, color, type, label, containerStyle, leadingIcon, onClick, }: ChipProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/combo-box/index.d.ts

@@ -1,6 +1,6 @@
 import { IconProps } from '../icon';
 type SizeProps = 'small' | 'medium' | 'large';
-type ComboBoxProps = {
+export type ComboBoxProps = {
     size: SizeProps;
     disabled?: boolean;
     placeholder: string;
@@ -13,6 +13,7 @@ type ComboBoxProps = {
     onChange?: (value: string) => void;
     icon?: IconProps['name'];
     showDropdownIcon?: boolean;
+    getOptionDisabled?: (value: string) => boolean;
 };
-export declare function ComboBox({ size, disabled, placeholder, value, containerStyle, options, onChange, icon, showDropdownIcon, }: ComboBoxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ComboBox({ size, disabled, placeholder, value, containerStyle, options, onChange, icon, showDropdownIcon, getOptionDisabled, }: ComboBoxProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/date-picker/CalendarRangeSquare.d.ts

@@ -0,0 +1,10 @@
+import { Day } from '../../hooks/useCalendar';
+interface CalendarRangeSquareProps {
+    startDate?: Date;
+    endDate?: Date;
+    hoveredStartDate?: Date;
+    hoveredEndDate?: Date;
+    currentDate: Day[];
+}
+export declare const CalendarRangeSquare: import("react").NamedExoticComponent<CalendarRangeSquareProps>;
+export {};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface DatePickerProps {
+    selectedDates: Date[];
+    setSelectedDates: (dates: Date[]) => void;
+    selectedDate?: Date;
+    onChange?: (date: Date) => void;
+    type: 'double' | 'single';
+    showNextMonth?: boolean;
+    headline?: string;
+    size?: 'small' | 'medium' | 'large';
+    placeholder?: string;
+    popoverWrapperStyle?: React.CSSProperties;
+}
+export declare const DatePicker: ({ selectedDates, setSelectedDates, selectedDate, type, showNextMonth, onChange, headline, size, placeholder, popoverWrapperStyle, }: DatePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/month.d.ts

@@ -0,0 +1,14 @@
+interface DoubleCalendarProps {
+    type: 'double' | 'single';
+    selectedDates: Date[];
+    setSelectedDates: (dates: Date[]) => void;
+    selectedDate?: Date;
+    onChange?: (date: Date) => void;
+    isNextMonth?: boolean;
+    hoveredStartDate?: Date;
+    hoveredEndDate?: Date;
+    setHoveredStartDate: (date: Date | undefined) => void;
+    setHoveredEndDate: (date: Date | undefined) => void;
+}
+export declare function Month(props: DoubleCalendarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/date-picker/single.d.ts

@@ -0,0 +1,8 @@
+export interface DatePickerSingleProps {
+    selectedDates: Date[];
+    setSelectedDates: (dates: Date[]) => void;
+    selectedDate?: Date;
+    onChange?: (date: Date) => void;
+    type: 'double' | 'single';
+}
+export declare const DatePickerSingle: ({ selectedDates, setSelectedDates, selectedDate, type, onChange, }: DatePickerSingleProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/year.d.ts

@@ -0,0 +1,3 @@
+export declare function Year({ onChange }: {
+    onChange: (month: number) => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/header/section.d.ts

@@ -1,8 +1,10 @@
+import { ColorPath } from '../../styles/color/type';
 type SizeType = 'large' | 'small';
 type CommonSectionProps = {
     size?: SizeType;
     subHeadline?: string;
     subValue?: string;
+    subValueColor?: ColorPath;
     description?: string;
     trailling?: React.ReactNode;
 };

package/dist/components/icon/index.d.ts

@@ -402,6 +402,7 @@ declare const ICONS: {
     puzzle: React.VFC<React.SVGProps<SVGSVGElement>>;
     qr: React.VFC<React.SVGProps<SVGSVGElement>>;
     questionMark: React.VFC<React.SVGProps<SVGSVGElement>>;
+    percel: React.VFC<React.SVGProps<SVGSVGElement>>;
     raining_fill: React.VFC<React.SVGProps<SVGSVGElement>>;
     raining: React.VFC<React.SVGProps<SVGSVGElement>>;
     ratateLeft: React.VFC<React.SVGProps<SVGSVGElement>>;
@@ -542,6 +543,13 @@ declare const ICONS: {
     wind: React.VFC<React.SVGProps<SVGSVGElement>>;
     write_fill: React.VFC<React.SVGProps<SVGSVGElement>>;
     write: React.VFC<React.SVGProps<SVGSVGElement>>;
+    percel_fill: React.VFC<React.SVGProps<SVGSVGElement>>;
+    sowing: React.VFC<React.SVGProps<SVGSVGElement>>;
+    germination: React.VFC<React.SVGProps<SVGSVGElement>>;
+    germination_fill: React.VFC<React.SVGProps<SVGSVGElement>>;
+    harvest: React.VFC<React.SVGProps<SVGSVGElement>>;
+    harvest_fill: React.VFC<React.SVGProps<SVGSVGElement>>;
+    polygon: React.VFC<React.SVGProps<SVGSVGElement>>;
 };
 export interface IconProps extends React.SVGProps<SVGSVGElement> {
     name: keyof typeof ICONS;

package/dist/components/index.d.ts

@@ -44,5 +44,12 @@ export * from './combo-box/text';
 export * from './table/head-row';
 export * from './table/head-column';
 export * from './table/item';
+export * from './table/front-checkbox';
 export * from './loading';
 export * from './color-picker';
+export * from './calendar/month';
+export * from './calendar/year';
+export * from './calendar/date';
+export * from './calendar/schedule';
+export * from './date-picker';
+export * from './date-picker/single';

package/dist/components/input/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { IconProps } from '../icon';
 import { ComponentProps } from 'react';
 type InputSize = 'small' | 'medium' | 'large';
-type InputProps = {
+export type InputProps = {
     size: InputSize;
     placeholder: string;
     value: string;

package/dist/components/list/compact.d.ts

@@ -6,6 +6,7 @@ type CompactProps = {
     label: string;
     iconName?: IconProps['name'];
     onChange: (value: boolean) => void;
+    disabled?: boolean;
 };
-export declare function Compact({ type, activated, label, iconName, onChange, }: CompactProps): JSX.Element;
+export declare function Compact({ type, activated, label, iconName, onChange, disabled, }: CompactProps): JSX.Element;
 export {};

package/dist/components/list/default.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ColorPath } from '../../styles/color/type';
 type Type = 'default' | 'value';
 type Align = 'Top' | 'Center';
 type BaseProps = {
@@ -8,15 +9,18 @@ type BaseProps = {
     description?: string;
     leadingArea?: React.ReactNode;
     type: Type;
+    headlineColor?: ColorPath;
 };
 type DefaultTypeProps = BaseProps & {
     subHeadline?: string;
     trailingArea?: React.ReactNode;
+    containerStyle?: React.CSSProperties;
+    onClick?: () => void;
 };
 type ValueTypeProps = BaseProps & {
     value?: string;
     subValue?: string;
 };
 type ListProps = DefaultTypeProps & ValueTypeProps;
-export declare function Default({ align, leadingNumber, headline, description, leadingArea, subHeadline, value, subValue, type, trailingArea, }: ListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Default({ align, leadingNumber, headline, description, leadingArea, subHeadline, value, subValue, type, trailingArea, containerStyle, onClick, headlineColor, }: ListProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/list/tab.d.ts

@@ -6,6 +6,8 @@ type TabProps = {
     tabName: string;
     iconName?: IconProps['name'];
     onClick?: () => void;
+    leadingAreaMask?: boolean;
+    iconSize?: number;
 };
-export declare function Tab({ minimized, activated, description, tabName, iconName, onClick, }: TabProps): JSX.Element;
+export declare function Tab({ minimized, activated, description, tabName, iconName, onClick, leadingAreaMask, iconSize, }: TabProps): JSX.Element;
 export {};

package/dist/components/popover/index.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-type PopoverProps = {
+export type PopoverProps = {
     children?: React.ReactNode;
     options?: {
         label: string;
         value: string;
     }[];
+    getOptionDisabled?: (value: string) => boolean;
     value?: string;
     type: 'list' | 'shortcut' | 'component';
     headline?: string;
@@ -12,5 +13,4 @@ type PopoverProps = {
     secondaryButton?: React.ReactNode;
     onChange?: (value: string) => void;
 };
-export declare function Popover({ children, type, options, headline, primaryButton, secondaryButton, onChange, value, }: PopoverProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+export declare function Popover({ children, type, options, headline, primaryButton, secondaryButton, onChange, value, getOptionDisabled, }: PopoverProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/search-box/index.d.ts

@@ -1,8 +1,9 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, CSSProperties } from 'react';
 interface SearchBoxProps {
     value: string;
     onChange: (e: ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
+    containerStyle?: CSSProperties;
 }
-export declare function SearchBox({ value, onChange, ...rest }: SearchBoxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SearchBox({ value, onChange, containerStyle, ...rest }: SearchBoxProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/slider/index.d.ts

@@ -9,6 +9,7 @@ type SliderProps = {
     min?: number;
     max?: number;
     className?: string;
+    disabled?: boolean;
 };
-export declare function Slider({ doubleRange, value, onChange, options, min, max, className, }: SliderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Slider({ doubleRange, value, onChange, options, min, max, className, disabled, }: SliderProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/text/index.d.ts

@@ -8,6 +8,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
     color: ColorPath;
     align?: 'left' | 'center' | 'right';
 }
+export declare const getScaledStyles: (variant: TextVariant, scale: keyof typeof TEXT_SCALE) => import("@emotion/react").SerializedStyles;
 export declare const Text: ({ ...props }: TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const MotionText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/hooks/useCalendar.d.ts

@@ -3,6 +3,7 @@ export interface Day {
     isToday: boolean;
     day: number;
     week: number;
+    date: string;
 }
 export declare const useCalendar: () => {
     month: number;
@@ -18,4 +19,6 @@ export declare const useCalendar: () => {
     setMonthData: import("react").Dispatch<import("react").SetStateAction<Day[][]>>;
     weekData: Day[];
     setWeekData: import("react").Dispatch<import("react").SetStateAction<Day[]>>;
+    nextMonthData: Day[][];
+    setNextMonthData: import("react").Dispatch<import("react").SetStateAction<Day[][]>>;
 };