@teamturing/react-kit 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 weareteamturing
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# `@teamturing/react-kit`
+
+튜링 내에서 웹 애플리케이션을 만들 때 필요한 리액트의 핵심 컴포넌트, 훅을 모아둔 패키지입니다.
+
+> react-native와는 호환성이 맞지 않을 수 있습니다.

package/dist/core/Chip/index.d.ts

@@ -0,0 +1,25 @@
+import { ComponentType, PropsWithChildren, SVGProps } from 'react';
+import { ResponsiveValue } from 'styled-system';
+import { SxProp } from '../../utils/styled-system';
+type Props = {
+    /**
+     * 크기를 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    size?: ResponsiveValue<'l' | 'm' | 's'>;
+    /**
+     * 색을 정의합니다.
+     */
+    variant?: 'primary' | 'secondary' | 'outlined-primary' | 'outlined-neutral' | 'neutral' | 'red' | 'red-accent' | 'yellow' | 'green' | 'dim';
+    /**
+     * 텍스트 앞에 보여질 아이콘을 정의합니다.
+     */
+    leadingIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * 텍스트 뒤에 보여질 아이콘을 정의합니다.
+     */
+    trailingIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+};
+declare const Chip: ({ children, size, variant, leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, sx, }: PropsWithChildren<Props & SxProp>) => import("react/jsx-runtime").JSX.Element;
+export default Chip;
+export type { Props as ChipProps };

package/dist/core/GradientText/index.d.ts

@@ -0,0 +1,287 @@
+/// <reference types="react" />
+/// <reference types="react" />
+declare const GradientText: import("styled-components").IStyledComponent<"web", {
+    key?: import("react").Key | null | undefined;
+    id?: string | undefined;
+    backgroundColor?: import("styled-system").ResponsiveValue<"link" | "dim" | "bg/primary" | "text/inverse" | "icon/inverse" | "bg/secondary" | "text/primary" | "icon/primary" | "bg/neutral/subtler" | "border/primary" | "text/neutral/subtle" | "icon/neutral/bolder" | "border/neutral/bolder" | "bg/neutral" | "bg/accent/red/subtlest" | "text/accent/red" | "icon/accent/red" | "bg/accent/red" | "bg/accent/yellow/subtlest" | "text/accent/yellow" | "icon/accent/yellow" | "bg/accent/green/subtlest" | "text/accent/green" | "icon/accent/green" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/input" | "border/inverse" | "border/disabled" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/red/subtle" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/accent/blue" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected/neutral", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    color?: import("styled-system").ResponsiveValue<"link" | "dim" | "bg/primary" | "text/inverse" | "icon/inverse" | "bg/secondary" | "text/primary" | "icon/primary" | "bg/neutral/subtler" | "border/primary" | "text/neutral/subtle" | "icon/neutral/bolder" | "border/neutral/bolder" | "bg/neutral" | "bg/accent/red/subtlest" | "text/accent/red" | "icon/accent/red" | "bg/accent/red" | "bg/accent/yellow/subtlest" | "text/accent/yellow" | "icon/accent/yellow" | "bg/accent/green/subtlest" | "text/accent/green" | "icon/accent/green" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/input" | "border/inverse" | "border/disabled" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/red/subtle" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/accent/blue" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected/neutral", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    content?: string | undefined;
+    fontSize?: import("styled-system").ResponsiveValue<"s" | "m" | "l" | "xs" | "xxs" | "display1" | "display2" | "display3" | "display4" | "xxl" | "xl", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    fontWeight?: import("styled-system").ResponsiveValue<"bold" | "medium" | "regular", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    lineHeight?: import("styled-system").ResponsiveValue<2 | 1, import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    textAlign?: import("styled-system").ResponsiveValue<import("csstype").Property.TextAlign, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    textDecoration?: import("styled-system").ResponsiveValue<import("csstype").Property.TextDecoration<0 | (string & {})>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    translate?: "yes" | "no" | undefined;
+    whiteSpace?: import("styled-system").ResponsiveValue<import("csstype").Property.WhiteSpace, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    wordBreak?: import("styled-system").ResponsiveValue<import("csstype").Property.WordBreak, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    hidden?: boolean | undefined;
+    slot?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined;
+    dir?: string | undefined;
+    rel?: string | undefined;
+    accessKey?: string | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    lang?: string | undefined;
+    className?: string | undefined;
+    prefix?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    children?: import("react").ReactNode;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+    inputMode?: "search" | "numeric" | "none" | "url" | "text" | "email" | "tel" | "decimal" | undefined;
+    nonce?: string | undefined;
+    tabIndex?: number | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    contextMenu?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    radioGroup?: string | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    property?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "off" | "on" | undefined;
+    is?: string | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-atomic'?: (boolean | "false" | "true") | undefined;
+    'aria-autocomplete'?: "inline" | "both" | "none" | "list" | undefined;
+    'aria-braillelabel'?: string | undefined;
+    'aria-brailleroledescription'?: string | undefined;
+    'aria-busy'?: (boolean | "false" | "true") | undefined;
+    'aria-checked'?: boolean | "false" | "mixed" | "true" | undefined;
+    'aria-colcount'?: number | undefined;
+    'aria-colindex'?: number | undefined;
+    'aria-colindextext'?: string | undefined;
+    'aria-colspan'?: number | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-current'?: boolean | "false" | "time" | "location" | "page" | "true" | "step" | "date" | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-description'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-disabled'?: (boolean | "false" | "true") | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-expanded'?: (boolean | "false" | "true") | undefined;
+    'aria-flowto'?: string | undefined;
+    'aria-grabbed'?: (boolean | "false" | "true") | undefined;
+    'aria-haspopup'?: boolean | "false" | "grid" | "dialog" | "menu" | "listbox" | "true" | "tree" | undefined;
+    'aria-hidden'?: (boolean | "false" | "true") | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-level'?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    'aria-modal'?: (boolean | "false" | "true") | undefined;
+    'aria-multiline'?: (boolean | "false" | "true") | undefined;
+    'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined;
+    'aria-owns'?: string | undefined;
+    'aria-placeholder'?: string | undefined;
+    'aria-posinset'?: number | undefined;
+    'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined;
+    'aria-readonly'?: (boolean | "false" | "true") | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: (boolean | "false" | "true") | undefined;
+    'aria-roledescription'?: string | undefined;
+    'aria-rowcount'?: number | undefined;
+    'aria-rowindex'?: number | undefined;
+    'aria-rowindextext'?: string | undefined;
+    'aria-rowspan'?: number | undefined;
+    'aria-selected'?: (boolean | "false" | "true") | undefined;
+    'aria-setsize'?: number | undefined;
+    'aria-sort'?: "none" | "other" | "ascending" | "descending" | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLSpanElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLSpanElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    bg?: import("styled-system").ResponsiveValue<"link" | "dim" | "bg/primary" | "text/inverse" | "icon/inverse" | "bg/secondary" | "text/primary" | "icon/primary" | "bg/neutral/subtler" | "border/primary" | "text/neutral/subtle" | "icon/neutral/bolder" | "border/neutral/bolder" | "bg/neutral" | "bg/accent/red/subtlest" | "text/accent/red" | "icon/accent/red" | "bg/accent/red" | "bg/accent/yellow/subtlest" | "text/accent/yellow" | "icon/accent/yellow" | "bg/accent/green/subtlest" | "text/accent/green" | "icon/accent/green" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/input" | "border/inverse" | "border/disabled" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/red/subtle" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/accent/blue" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected/neutral", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    sx?: import("../../utils/styled-system").BetterSystemStyleObject | undefined;
+    typography?: import("styled-system").ResponsiveValue<"s" | "m" | "l" | "xs" | "xxs" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl" | "xxl/bold" | "xl/regular" | "xl" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}>;
+export default GradientText;

package/dist/core/Grid/index.d.ts

@@ -0,0 +1,25 @@
+import { SpaceKey } from '@teamturing/token-studio';
+import { PropsWithChildren } from 'react';
+import { ResponsiveValue } from 'styled-system';
+import { AsProp } from '../../utils/styled-system';
+import { ViewProps } from '../View';
+type Props = {
+    gapX?: ResponsiveValue<SpaceKey>;
+    gapY?: ResponsiveValue<SpaceKey>;
+    wrap?: ResponsiveValue<boolean>;
+} & Pick<ViewProps, 'alignItems' | 'justifyContent' | 'sx'> & AsProp;
+type UnitSizeType = 'min' | 'max' | number;
+type GridUnitProps = {
+    size: ResponsiveValue<UnitSizeType>;
+} & Pick<ViewProps, 'order' | 'sx'> & AsProp;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    gapX?: ResponsiveValue<0 | 2 | 1 | 3 | 4 | 8 | 16 | 32 | 5 | 6 | 10 | 7 | 12 | 14 | 18 | 20 | 24 | 0.5 | 28 | 30 | 40 | 48 | 50 | 80 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25> | undefined;
+    gapY?: ResponsiveValue<0 | 2 | 1 | 3 | 4 | 8 | 16 | 32 | 5 | 6 | 10 | 7 | 12 | 14 | 18 | 20 | 24 | 0.5 | 28 | 30 | 40 | 48 | 50 | 80 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25> | undefined;
+    wrap?: ResponsiveValue<boolean> | undefined;
+} & Pick<ViewProps, "alignItems" | "justifyContent" | "sx"> & AsProp & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Unit: ({ size, as, children, ...props }: PropsWithChildren<GridUnitProps>) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export type { Props as GridProps };

package/dist/core/IconButton/index.d.ts

@@ -0,0 +1,53 @@
+import { ComponentType, SVGProps } from 'react';
+import { ResponsiveValue } from 'styled-system';
+import { UnstyledButtonProps } from '../_UnstyledButton';
+type Props = {
+    /**
+     * IconButton에 사용할 아이콘을 정의합니다.
+     */
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * 크기를 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    size?: ResponsiveValue<'l' | 'm' | 's'>;
+    /**
+     * 색을 정의합니다.
+     * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'plain-bold' | 'plain' | 'plain-subtle' | 'danger';
+    /**
+     * 비활성화 상태를 정의합니다.
+     */
+    disabled?: boolean;
+    /**
+     * 로딩 상태를 정의합니다.
+     */
+    loading?: boolean;
+} & Pick<UnstyledButtonProps, 'type' | 'onClick'>;
+declare const IconButton: import("react").ForwardRefExoticComponent<{
+    /**
+     * IconButton에 사용할 아이콘을 정의합니다.
+     */
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * 크기를 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    size?: ResponsiveValue<"s" | "m" | "l"> | undefined;
+    /**
+     * 색을 정의합니다.
+     * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
+     */
+    variant?: "primary" | "secondary" | "tertiary" | "outlined" | "plain-bold" | "plain" | "plain-subtle" | "danger" | undefined;
+    /**
+     * 비활성화 상태를 정의합니다.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * 로딩 상태를 정의합니다.
+     */
+    loading?: boolean | undefined;
+} & Pick<UnstyledButtonProps, "type" | "onClick"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default IconButton;
+export type { Props as IconButtonProps };

package/dist/core/IconToggleButton/index.d.ts

@@ -0,0 +1,28 @@
+import { ComponentType, SVGProps } from 'react';
+import { ResponsiveValue } from 'styled-system';
+import { SxProp } from '../../utils/styled-system';
+import { UnstyledButtonProps } from '../_UnstyledButton';
+type Props = {
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * 크기를 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    size?: ResponsiveValue<'l' | 'm' | 's'>;
+    /**
+     * 색을 정의합니다.
+     */
+    variant?: 'primary' | 'plain';
+    /**
+     * 활성화 상태를 정의합니다.
+     * `true`일 경우, 활성화된 상태를 그립니다.
+     */
+    selected?: boolean;
+    /**
+     * 비활성화 상태를 정의합니다.
+     */
+    disabled?: boolean;
+} & UnstyledButtonProps & SxProp;
+declare const IconToggleButton: ({ icon: Icon, size, variant, selected, disabled, sx, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default IconToggleButton;
+export type { Props as IconToggleButtonProps };

package/dist/core/ItemList/index.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, JSX } from 'react';
+type Props<T> = {
+    items: readonly T[];
+    renderItem: (item: T, index: number) => ReactNode;
+    renderItemWrapper?: (children: ReactNode, item: T, index: number) => ReactNode;
+    emptyState?: ReactNode;
+};
+declare const ItemList: <T>({ items, renderItem, renderItemWrapper, emptyState, }: Props<T>) => JSX.Element;
+export default ItemList;
+export type { Props as ItemListProps };

package/dist/core/Space/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SpaceKey } from '@teamturing/token-studio';
+import { SpaceProps, Theme } from 'styled-system';
+import { SxProp } from '../../utils/styled-system';
+type Props = {} & SpaceProps<Theme, SpaceKey> & SxProp;
+declare const Space: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>>;
+export default Space;
+export type { Props as SpaceProps };