sud-ui 1.5.2 → 1.5.3

package/dist/components/dataDisplay/Tabs.d.ts

@@ -0,0 +1,60 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  defaultColorType,
+  defaultSizeType,
+  borderType
+} from "../commonType";
+
+export type TabsSize = defaultSizeType | "2xl";
+
+export type TabsAlign = "left" | "center" | "right";
+
+export interface TabsOption {
+  key: string;
+  label: ReactNode;
+  children?: ReactNode;
+}
+
+export interface TabPaneProps {
+  tabKey?: string;
+  label: ReactNode;
+  children?: ReactNode;
+}
+
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (key: string) => void;
+  options?: TabsOption[];
+  children?: ReactNode;
+  size?: TabsSize;
+  colorType?: {
+    active?: defaultColorType;
+    inactive?: defaultColorType;
+  };
+  background?: {
+    active?: string;
+    inactive?: string;
+  };
+  color?: {
+    active?: string;
+    inactive?: string;
+  };
+  border?: boolean;
+  borderColor?: {
+    active?: string;
+    inactive?: string;
+  };
+  borderType?: borderType;
+  borderWeight?: number;
+  className?: string;
+  style?: CSSProperties;
+  disabledKeys?: string[];
+  align?: TabsAlign;
+}
+
+declare const Tabs: FC<TabsProps> & {
+  TabPane: FC<TabPaneProps>;
+};
+
+export default Tabs;

package/dist/components/dataDisplay/Tag.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  tagColorType,
+  shapeType,
+  borderType,
+  shadowType
+} from "../commonType";
+
+export type TagSize = "sm" | "md" | "lg";
+
+export type TagIconPosition = "left" | "right" | "";
+
+export interface TagProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  colorType?: tagColorType;
+  background?: string;
+  color?: string;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: string | number;
+  className?: string;
+  closeable?: boolean;
+  onClose?: () => void;
+  icon?: ReactNode;
+  iconPosition?: TagIconPosition;
+  shape?: shapeType;
+  shadow?: shadowType;
+  border?: boolean;
+  size?: TagSize;
+  style?: CSSProperties;
+}
+
+declare const Tag: FC<TagProps>;
+export default Tag;

package/dist/components/dataDisplay/Timeline.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+
+export type TimelineMode = "left" | "right" | "alternate";
+
+export interface TimelineItem {
+  key?: string | number;
+  label?: ReactNode;
+  content?: ReactNode | ReactNode[];
+  dot?: ReactNode;
+  color?: string;
+  className?: string;
+}
+
+export interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
+  items?: TimelineItem[];
+  mode?: TimelineMode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+declare const Timeline: FC<TimelineProps>;
+export default Timeline;

package/dist/components/dataDisplay/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from "react";
+import type { PopupBaseProps } from "../navigation/base/PopupBase";
+
+type TooltipBaseProps = Omit<
+  PopupBaseProps,
+  "variant" | "title" | "footer" | "onCancel" | "onConfirm" | "divider"
+>;
+
+export interface TooltipProps extends TooltipBaseProps {}
+
+export declare const Tooltip: FC<TooltipProps>;

package/dist/components/dataEntry/Checkbox.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type { defaultColorType } from "../commonType";
+
+export type CheckboxLabelPosition = "left" | "right" | "top" | "bottom";
+export type CheckboxDirection = "horizontal" | "vertical";
+
+export interface CheckboxOption {
+  value: string | number;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export interface CheckboxProps
+  extends Omit<HTMLAttributes<HTMLLabelElement>, "onChange"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  labelPosition?: CheckboxLabelPosition;
+  children?: ReactNode;
+  color?: string;
+  disabled?: boolean;
+  colorType?: defaultColorType;
+  style?: CSSProperties;
+  className?: string;
+  ariaLabel?: string;
+  ariaRequired?: boolean;
+  ariaInvalid?: boolean;
+  ariaDescribedby?: string;
+}
+
+export interface CheckboxGroupProps {
+  options?: CheckboxOption[];
+  value?: (string | number)[];
+  onChange?: (value: (string | number)[]) => void;
+  layout?: "flex" | "grid";
+  direction?: CheckboxDirection;
+  cols?: number;
+  gap?: number;
+  disabled?: boolean;
+  itemDisabled?: (string | number)[];
+  color?: string;
+  colorType?: defaultColorType;
+  labelPosition?: CheckboxLabelPosition;
+  ariaLabel?: string;
+  ariaRequired?: boolean;
+  name?: string;
+  role?: string;
+  style?: CSSProperties;
+  className?: string;
+}
+
+declare const Checkbox: FC<CheckboxProps> & {
+  Group: FC<CheckboxGroupProps>;
+};
+
+export default Checkbox;

package/dist/components/dataEntry/ColorPicker.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type { InputProps } from "./Input";
+import type { SliderProps } from "./Slider";
+import type { CardProps } from "../dataDisplay/Card";
+import type { ButtonProps } from "../general/Button";
+import type { PopConfirmProps } from "../feedback/PopConfirm";
+import type {
+  PopupPlacement,
+  PopupTrigger,
+} from "../navigation/base/PopupBase";
+
+export type ColorPickerSize = "sm" | "md" | "lg";
+
+export interface ColorPickerColor {
+  hex: string;
+  rgb: { r: number; g: number; b: number };
+  hsb: { h: number; s: number; b: number };
+  alpha: number;
+  rgba: string;
+}
+
+export interface ColorPickerProps extends HTMLAttributes<HTMLDivElement> {
+  color?: string;
+  onChange?: (color: ColorPickerColor) => void;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  children?: ReactNode;
+  trigger?: PopupTrigger;
+  placement?: PopupPlacement;
+  style?: CSSProperties;
+  className?: string;
+  size?: ColorPickerSize;
+  popConfirmProps?: Partial<PopConfirmProps>;
+  inputProps?: Partial<InputProps>;
+  sliderProps?: Partial<SliderProps>;
+  cardProps?: Partial<CardProps>;
+  buttonProps?: Partial<ButtonProps>;
+  mode?: "gradient" | "preset";
+}
+
+declare const ColorPicker: FC<ColorPickerProps>;
+export default ColorPicker;

package/dist/components/dataEntry/DatePicker.d.ts

@@ -0,0 +1,56 @@
+import type { CSSProperties, FC } from "react";
+import type { PopConfirmProps } from "../feedback/PopConfirm";
+import type { PopupPlacement } from "../navigation/base/PopupBase";
+import type { CalendarProps } from "../dataDisplay/Calendar";
+import type { InputProps } from "./Input";
+import type {
+  defaultColorType,
+  shapeType,
+  shadowType,
+  borderType
+} from "../commonType";
+
+export type DatePickerSize = "sm" | "md" | "lg";
+
+export interface DatePickerValue {
+  startDate?: Date;
+  endDate?: Date;
+}
+
+export interface DatePickerProps {
+  colorType?: defaultColorType;
+  shape?: shapeType;
+  shadow?: shadowType;
+  size?: DatePickerSize;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: boolean;
+  errorText?: string;
+  className?: string;
+  value?: Date | DatePickerValue;
+  onChange?: (value: Date | DatePickerValue, text: string) => void;
+  placeholder?: string;
+  format?: string;
+  range?: boolean;
+  placement?: PopupPlacement;
+  locale?: "en" | "ko";
+  popConfirmProps?: Partial<PopConfirmProps>;
+  inputProps?: Partial<InputProps>;
+  calendarProps?: Partial<CalendarProps>;
+  id?: string;
+  ariaLabel?: string;
+  ariaRequired?: boolean;
+  ariaInvalid?: boolean;
+  ariaDescribedby?: string;
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  underline?: boolean;
+  style?: CSSProperties;
+}
+
+declare const DatePicker: FC<DatePickerProps>;
+export default DatePicker;

package/dist/components/dataEntry/Input.d.ts

@@ -0,0 +1,128 @@
+import type {
+  ReactNode,
+  CSSProperties,
+  FC,
+  HTMLAttributes,
+  MouseEvent,
+  KeyboardEvent,
+  ChangeEvent
+} from "react";
+import type { shapeType, borderType, shadowType } from "../commonType";
+
+export type InputSize = "sm" | "md" | "lg";
+
+export type InputType =
+  | "text"
+  | "password"
+  | "number"
+  | "int"
+  | "email"
+  | "tel"
+  | "url"
+  | "search"
+  | "date"
+  | "datetime-local"
+  | "time"
+  | "week"
+  | "month"
+  | "color"
+  | "file"
+  | "range"
+  | "hidden"
+  | "image"
+  | "radio"
+  | "checkbox"
+  | "submit"
+  | "reset"
+  | "button";
+
+export interface InputProps
+  extends Omit<
+    HTMLAttributes<HTMLInputElement>,
+    "onChange" | "onClick" | "onKeyDown"
+  > {
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  underline?: boolean;
+  afterIcon?: ReactNode;
+  beforeIcon?: ReactNode;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  disabled?: boolean;
+  readOnly?: boolean;
+  autoFocus?: boolean;
+  maxLength?: number;
+  password?: boolean;
+  type?: InputType;
+  clearable?: boolean;
+  placeholder?: string;
+  value?: string;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  onEnter?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  shape?: shapeType;
+  shadow?: shadowType;
+  size?: InputSize;
+  id?: string;
+  name?: string;
+  autoComplete?: string;
+  ariaLabel?: string;
+  label?: ReactNode;
+  errorText?: string;
+  error?: boolean;
+  required?: boolean;
+  ariaRequired?: boolean;
+  ariaInvalid?: boolean;
+  ariaDescribedby?: string;
+  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  thousandSeparator?: boolean;
+}
+
+export interface TextareaProps
+  extends Omit<
+    InputProps,
+    | "type"
+    | "password"
+    | "clearable"
+    | "thousandSeparator"
+    | "prefix"
+    | "suffix"
+    | "afterIcon"
+    | "beforeIcon"
+  > {
+  rows?: number;
+  resizable?: boolean;
+  autoSize?: boolean;
+  bottomLeft?: ReactNode;
+  bottomRight?: ReactNode;
+  spellCheck?: boolean;
+}
+
+export interface OTPProps
+  extends Omit<
+    InputProps,
+    | "type"
+    | "password"
+    | "clearable"
+    | "prefix"
+    | "suffix"
+    | "afterIcon"
+    | "beforeIcon"
+    | "thousandSeparator"
+  > {
+  type?: "int" | "text";
+  length?: number;
+}
+
+declare const Input: FC<InputProps> & {
+  Textarea: FC<TextareaProps>;
+  OTP: FC<OTPProps>;
+};
+
+export default Input;

package/dist/components/dataEntry/Radio.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type { defaultColorType } from "../commonType";
+
+export type RadioLabelPosition = "left" | "right" | "top" | "bottom";
+export type RadioDirection = "horizontal" | "vertical";
+
+export interface RadioOption {
+  value: string | number;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export interface RadioProps
+  extends Omit<HTMLAttributes<HTMLLabelElement>, "onChange"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  labelPosition?: RadioLabelPosition;
+  children?: ReactNode;
+  color?: string;
+  disabled?: boolean;
+  colorType?: defaultColorType;
+  style?: CSSProperties;
+  className?: string;
+  ariaLabel?: string;
+  ariaRequired?: boolean;
+  name?: string;
+}
+
+export interface RadioGroupProps {
+  options?: RadioOption[];
+  value?: string | number | null;
+  onChange?: (value: string | number) => void;
+  layout?: "flex" | "grid";
+  direction?: RadioDirection;
+  cols?: number;
+  gap?: number;
+  disabled?: boolean;
+  itemDisabled?: (string | number)[];
+  color?: string;
+  colorType?: defaultColorType;
+  labelPosition?: RadioLabelPosition;
+  ariaLabel?: string;
+  ariaRequired?: boolean;
+  name?: string;
+  style?: CSSProperties;
+  className?: string;
+}
+
+declare const Radio: FC<RadioProps> & {
+  Group: FC<RadioGroupProps>;
+};
+
+export default Radio;

package/dist/components/dataEntry/Rate.d.ts

@@ -0,0 +1,25 @@
+import type { ReactElement, CSSProperties, FC, HTMLAttributes } from "react";
+
+export type RateIcon = "star" | "heart" | ReactElement;
+
+export interface RateProps extends HTMLAttributes<HTMLDivElement> {
+  count?: number;
+  allowHalf?: boolean;
+  defaultValue?: number;
+  value?: number;
+  onChange?: (value: number) => void;
+  disabled?: boolean;
+  showValue?: boolean;
+  activeColor?: string;
+  inactiveColor?: string;
+  size?: number;
+  className?: string;
+  style?: CSSProperties;
+  ariaLabel?: string;
+  testId?: string;
+  icon?: RateIcon;
+}
+
+declare const Rate: FC<RateProps>;
+
+export default Rate;

package/dist/components/dataEntry/Select.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type {
+  defaultColorType,
+  shapeType,
+  borderType,
+  shadowType,
+  tagColorType
+} from "../commonType";
+
+export type SelectSize = "sm" | "md" | "lg";
+
+export interface SelectOption {
+  value: string | number;
+  label: ReactNode;
+  content?: ReactNode;
+}
+
+export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  underline?: boolean;
+  beforeIcon?: ReactNode;
+  afterIcon?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  value?: string | number | (string | number)[];
+  onChange?: (value: string | number | (string | number)[]) => void;
+  shape?: shapeType;
+  shadow?: shadowType;
+  size?: SelectSize;
+  id?: string;
+  tagColorType?: tagColorType;
+  colorType?: defaultColorType;
+  label?: ReactNode;
+  errorText?: string;
+  error?: boolean;
+  clearable?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  dropdownStyle?: CSSProperties;
+  searchable?: boolean;
+  multiMode?: boolean;
+  showSelectedCount?: boolean;
+  options?: SelectOption[];
+  placeholder?: string;
+  ariaLabel?: string;
+  ariaRequired?: boolean;
+  ariaInvalid?: boolean;
+  ariaDescribedby?: string;
+}
+
+declare const Select: FC<SelectProps>;
+export default Select;

package/dist/components/dataEntry/Slider.d.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties, FC, HTMLAttributes } from "react";
+import type { PopupBaseProps } from "../navigation/base/PopupBase";
+import type { defaultColorType, borderType, shadowType } from "../commonType";
+
+export type SliderSize = "sm" | "md" | "lg";
+
+export interface SliderProps extends HTMLAttributes<HTMLDivElement> {
+  min?: number;
+  max?: number;
+  value?: number;
+  step?: number;
+  onChange?: (value: number) => void;
+  vertical?: boolean;
+  disabled?: boolean;
+  background?: string;
+  border?: boolean;
+  borderType?: borderType;
+  borderWeight?: number;
+  borderColor?: string;
+  trackColor?: string;
+  fill?: boolean;
+  width?: number | string;
+  height?: number | string;
+  minMaxVisible?: boolean;
+  colorType?: defaultColorType;
+  unit?: string;
+  style?: CSSProperties;
+  className?: string;
+  shadow?: shadowType;
+  size?: SliderSize;
+  thumbSize?: number;
+  thumbBorder?: boolean;
+  popupClassName?: string;
+  popupStyle?: CSSProperties;
+  popupProps?: Partial<PopupBaseProps>;
+  id?: string;
+  ariaLabel?: string;
+  ariaValueText?: string;
+}
+
+declare const Slider: FC<SliderProps>;
+export default Slider;

package/dist/components/dataEntry/Switch.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode, CSSProperties, FC, HTMLAttributes } from "react";
+import type { defaultColorType, shadowType } from "../commonType";
+
+export interface SwitchProps extends HTMLAttributes<HTMLDivElement> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  onColor?: string;
+  offColor?: string;
+  onText?: ReactNode;
+  offText?: ReactNode;
+  onIcon?: ReactNode;
+  offIcon?: ReactNode;
+  thumbColor?: string;
+  shadow?: shadowType;
+  size?: "sm" | "md" | "lg";
+  colorType?: defaultColorType;
+  className?: string;
+  style?: CSSProperties;
+  id?: string;
+  ariaLabel?: string;
+}
+
+declare const Switch: FC<SwitchProps>;
+export default Switch;

package/dist/components/dataEntry/TimePicker.d.ts

@@ -0,0 +1,58 @@
+import type { CSSProperties, FC } from "react";
+import type { InputProps } from "./Input";
+import type { PopConfirmProps } from "../feedback/PopConfirm";
+import type { PopupPlacement } from "../navigation/base/PopupBase";
+import type { TimeSelectorProps } from "./TimeSelector";
+import type {
+  defaultColorType,
+  shapeType,
+  shadowType,
+  borderType
+} from "../commonType";
+
+export type TimePickerSize = "sm" | "md" | "lg";
+
+export interface TimePickerValue {
+  startTime?: Date;
+  endTime?: Date;
+}
+
+export interface TimePickerProps {
+  colorType?: defaultColorType;
+  shape?: shapeType;
+  shadow?: shadowType;
+  size?: TimePickerSize;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: boolean;
+  errorText?: string;
+  className?: string;
+  value?: Date | TimePickerValue;
+  onChange?: (value: Date | TimePickerValue, text: string) => void;
+  placeholder?: string;
+  format?: string;
+  range?: boolean;
+  placement?: PopupPlacement;
+  showSecond?: boolean;
+  use12Hours?: boolean;
+  step?: number;
+  popConfirmProps?: Partial<PopConfirmProps>;
+  inputProps?: Partial<InputProps>;
+  timePickerProps?: Partial<TimeSelectorProps>;
+  id?: string;
+  ariaLabel?: string;
+  ariaRequired?: boolean;
+  ariaInvalid?: boolean;
+  ariaDescribedby?: string;
+  background?: string;
+  color?: string;
+  border?: boolean;
+  borderColor?: string;
+  borderType?: borderType;
+  borderWeight?: number;
+  underline?: boolean;
+  style?: CSSProperties;
+}
+
+declare const TimePicker: FC<TimePickerProps>;
+export default TimePicker;