@nurihaus/web-design-system 1.4.45 → 1.4.46

package/dist/components/tabs/base-tabs.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { TabsContentProps, TabsIndicatorProps, TabsListProps, TabsRootProps, TabsTriggerProps } from './tabs-type';
+declare const TabsRoot: {
+    (props: PropsWithChildren<TabsRootProps>): import("react/jsx-runtime").JSX.Element;
+    List: (props: PropsWithChildren<TabsListProps>) => import("react/jsx-runtime").JSX.Element;
+    Trigger: (props: PropsWithChildren<TabsTriggerProps>) => import("react/jsx-runtime").JSX.Element;
+    Content: (props: PropsWithChildren<TabsContentProps>) => import("react/jsx-runtime").JSX.Element;
+    Indicator: (props: TabsIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default TabsRoot;
+export type { TabsRootProps, TabsListProps, TabsTriggerProps, TabsContentProps, TabsIndicatorProps };

package/dist/components/tabs/tabs-props.d.ts

@@ -0,0 +1,9 @@
+export declare const variant: readonly ["underline", "filled"];
+export declare const tabsSingleProps: {
+    variant: {
+        type: "className";
+        className: string;
+        values: readonly ["underline", "filled"];
+        default: "underline";
+    };
+};

package/dist/components/tabs/tabs-type.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentPropsWithRef, ReactNode, CSSProperties } from 'react';
+export type TabsValue = string | null;
+export type TabsVariant = 'underline' | 'filled';
+export interface TabsItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+    leftIcon?: ReactNode;
+}
+export interface TabsProps {
+    items: TabsItem[];
+    variant?: TabsVariant;
+    value?: TabsValue;
+    defaultValue?: TabsValue;
+    onValueChange?: (id: TabsValue) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface TabsRootProps {
+    value?: TabsValue;
+    defaultValue?: TabsValue;
+    onValueChange?: (id: TabsValue) => void;
+    className?: string;
+}
+export interface TabsListProps extends ComponentPropsWithRef<'div'> {
+    asChild?: boolean;
+}
+export interface TabsTriggerProps extends Omit<ComponentPropsWithRef<'button'>, 'value'> {
+    asChild?: boolean;
+    id: string;
+    disabled?: boolean;
+}
+export interface TabsContentProps extends Omit<ComponentPropsWithRef<'div'>, 'value'> {
+    asChild?: boolean;
+    id: string;
+}
+export interface TabsIndicatorProps extends ComponentPropsWithRef<'div'> {
+    asChild?: boolean;
+}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,7 @@
+import type { TabsProps } from './tabs-type';
+import '../../styles/token/color.css';
+import '../../styles/token/font.css';
+import './tabs-style.css';
+declare const Tabs: (props: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export default Tabs;
+export type { TabsProps };

package/dist/components/tabs/tabs.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("./tabs-type").TabsProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: "underline";
+        defaultValue: string;
+        items: ({
+            id: string;
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+            leftIcon: import("react/jsx-runtime").JSX.Element;
+        } | {
+            id: string;
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+            leftIcon?: undefined;
+        })[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@nurihaus/web-design-system",
-  "version": "1.4.45",
+  "version": "1.4.46",
   "private": false,
   "description": "nurilounge-admin-design-system",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "styles"
   ],
   "author": "nuri",
   "license": "MIT",

package/styles/align-items.css

@@ -0,0 +1,19 @@
+.nuri-ai-start {
+  align-items: flex-start;
+}
+
+.nuri-ai-center {
+  align-items: center;
+}
+
+.nuri-ai-end {
+  align-items: flex-end;
+}
+
+.nuri-ai-stretch {
+  align-items: stretch;
+}
+
+.nuri-ai-baseline {
+  align-items: baseline;
+}

package/styles/display.css

@@ -0,0 +1,31 @@
+.nuri-display-flex {
+  display: flex;
+}
+
+.nuri-display-inline-flex {
+  display: inline-flex;
+}
+
+.nuri-display-block {
+  display: block;
+}
+
+.nuri-display-inline-block {
+  display: inline-block;
+}
+
+.nuri-display-grid {
+  display: grid;
+}
+
+.nuri-display-inline-grid {
+  display: inline-grid;
+}
+
+.nuri-display-contents {
+  display: contents;
+}
+
+.nuri-display-none {
+  display: none;
+}

package/styles/flex-direction.css

@@ -0,0 +1,15 @@
+.nuri-flex-row {
+  flex-direction: row;
+}
+
+.nuri-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.nuri-flex-column {
+  flex-direction: column;
+}
+
+.nuri-flex-column-reverse {
+  flex-direction: column-reverse;
+}

package/styles/index.css

@@ -0,0 +1,33 @@
+/* Token styles */
+@import './token/color.css';
+@import './token/font.css';
+@import './token/radius.css';
+@import './token/cursor.css';
+
+/* Reset styles */
+@import './reset.css';
+
+/* Utility styles */
+@import './display.css';
+@import './position.css';
+@import './flex-direction.css';
+@import './align-items.css';
+@import './justify-content.css';
+@import './overflow.css';
+
+/* Component styles */
+@import '../components/avatar/avatar-style.css';
+@import '../components/badge/badge-style.css';
+@import '../components/button/button-style.css';
+@import '../components/check-box/check-box-style.css';
+@import '../components/elements/text/text-style.css';
+@import '../components/loading/spinner/spinner-style.css';
+@import '../components/loading/inline-loading/inline-loading-style.css';
+@import '../components/loading/overlay-loading/overlay-loading-style.css';
+@import '../components/modal/modal-style.css';
+@import '../components/radio/radio-style.css';
+@import '../components/table/table-style.css';
+@import '../components/text-field/text-field-style.css';
+@import '../components/tooltip/tooltip-style.css';
+@import '../components/drop-down/drop-down-style.css';
+@import '../components/collapsible-menu/collapsible-menu-style.css';

package/styles/justify-content.css

@@ -0,0 +1,23 @@
+.nuri-justify-content-start {
+  justify-content: flex-start;
+}
+
+.nuri-justify-content-center {
+  justify-content: center;
+}
+
+.nuri-justify-content-end {
+  justify-content: flex-end;
+}
+
+.nuri-justify-content-between {
+  justify-content: space-between;
+}
+
+.nuri-justify-content-around {
+  justify-content: space-around;
+}
+
+.nuri-justify-content-evenly {
+  justify-content: space-evenly;
+}

package/styles/overflow.css

@@ -0,0 +1,47 @@
+.nuri-overflow-visible {
+  overflow: visible;
+}
+
+.nuri-overflow-hidden {
+  overflow: hidden;
+}
+
+.nuri-overflow-scroll {
+  overflow: scroll;
+}
+
+.nuri-overflow-auto {
+  overflow: auto;
+}
+
+.nuri-overflow-x-visible {
+  overflow-x: visible;
+}
+
+.nuri-overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.nuri-overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.nuri-overflow-x-auto {
+  overflow-x: auto;
+}
+
+.nuri-overflow-y-visible {
+  overflow-y: visible;
+}
+
+.nuri-overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.nuri-overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.nuri-overflow-y-auto {
+  overflow-y: auto;
+}

package/styles/position.css

@@ -0,0 +1,19 @@
+.nuri-position-static {
+  position: static;
+}
+
+.nuri-position-relative {
+  position: relative;
+}
+
+.nuri-position-absolute {
+  position: absolute;
+}
+
+.nuri-position-fixed {
+  position: fixed;
+}
+
+.nuri-position-sticky {
+  position: sticky;
+}

package/styles/reset.css

@@ -0,0 +1,52 @@
+/* 모든 요소의 마진과 패딩 제거 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* 기본 폰트 설정 및 텍스트 렌더링 최적화 */
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 리스트 스타일 제거 */
+ul,
+ol {
+  list-style: none;
+}
+
+/* 링크 스타일 초기화 */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* 버튼 스타일 초기화 */
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+/* 이미지 관련 설정 */
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* 폼 요소 스타일 초기화 */
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}

package/styles/token/color.css

@@ -0,0 +1,119 @@
+.nuri-theme {
+  --color-primary-black: #000000;
+  --color-primary-white: #ffffff;
+  --color-primary-gray-fa: #fafafa;
+  --color-primary-gray-f4: #f4f4f5;
+  --color-primary-gray-e4: #e4e4e7;
+  --color-primary-gray-d4: #d4d4d8;
+  --color-primary-gray-a1: #a1a1aa;
+  --color-primary-gray-71: #71717a;
+  --color-primary-gray-52: #52525b;
+  --color-primary-gray-3f: #3f3f46;
+  --color-primary-gray-27: #27272a;
+  --color-primary-gray-18: #18181b;
+
+  --color-point-purple-f4: #f4effa;
+  --color-point-purple-e9: #e9e0f5;
+  --color-point-purple-dd: #ddd1f0;
+  --color-point-purple-c3: #c3b4dd;
+  --color-point-purple-a8: #a894c7;
+  --color-point-purple-95: #957eb4;
+  --color-point-purple-6f: #6f56a3;
+  --color-point-purple-4c: #4c277c;
+  --color-point-purple-41: #4c1d88;
+  --color-point-purple-39: #391d5d;
+
+  --color-accent-red-ff: #fff5f6;
+  --color-accent-red-ffe: #ffe8e9;
+  --color-accent-red-fb: #fbcfd2;
+  --color-accent-red-f3: #f39aa0;
+  --color-accent-red-e8: #e86f77;
+  --color-accent-red-df: #df535c;
+  --color-accent-red-c9: #c94751;
+  --color-accent-red-b0: #b02e4c;
+  --color-accent-red-8f: #8f243a;
+  --color-accent-red-6e: #6e1a2c;
+
+  --color-accent-pink-ff: #fff1f6;
+  --color-accent-pink-ffe: #ffe4ee;
+  --color-accent-pink-fe: #fecfe3;
+  --color-accent-pink-fd: #fda4cc;
+  --color-accent-pink-f4: #f472b6;
+  --color-accent-pink-ec: #ec6fae;
+  --color-accent-pink-d9: #d95d9a;
+  --color-accent-pink-b9: #b94a7e;
+  --color-accent-pink-93: #93385f;
+  --color-accent-pink-6e: #6e2644;
+
+  --color-accent-magenta-fe: #fef0ff;
+  --color-accent-magenta-fc: #fce4ff;
+  --color-accent-magenta-f8: #f8c6ff;
+  --color-accent-magenta-f2: #f29bff;
+  --color-accent-magenta-ec: #ec5cef;
+  --color-accent-magenta-e1: #e13be7;
+  --color-accent-magenta-c8: #c82fcc;
+  --color-accent-magenta-a9: #a923a8;
+  --color-accent-magenta-83: #831c83;
+  --color-accent-magenta-5e: #5e145e;
+
+  --color-accent-blue-f1: #f1f4ff;
+  --color-accent-blue-e3: #e3e8ff;
+  --color-accent-blue-c7: #c7d2fe;
+  --color-accent-blue-a5: #a5b4fc;
+  --color-accent-blue-81: #818cf8;
+  --color-accent-blue-25: #2563eb;
+  --color-accent-blue-1f: #1f52c9;
+  --color-accent-blue-1e: #1e40af;
+  --color-accent-blue-1c: #1c348a;
+  --color-accent-blue-16: #162763;
+
+  --color-accent-mint-ec: #ecfefd;
+  --color-accent-mint-d1: #d1faf7;
+  --color-accent-mint-a7: #a7f3ee;
+  --color-accent-mint-6e: #6ee7e0;
+  --color-accent-mint-2d: #2dd4cb;
+  --color-accent-mint-01: #01ece1;
+  --color-accent-mint-0b: #0bc5bc;
+  --color-accent-mint-0f: #0f9f99;
+  --color-accent-mint-11: #117d78;
+  --color-accent-mint-13: #135c58;
+
+  --color-accent-green-ec: #ecfdf3;
+  --color-accent-green-d1: #d1fae1;
+  --color-accent-green-a7: #a7f3c8;
+  --color-accent-green-6e: #6ee7a3;
+  --color-accent-green-41: #41e176;
+  --color-accent-green-22: #22c55e;
+  --color-accent-green-16: #16a34a;
+  --color-accent-green-28: #289a3a;
+  --color-accent-green-166: #166534;
+  --color-accent-green-14: #14532d;
+
+  --color-accent-yellow-ff: #fffbeb;
+  --color-accent-yellow-fe: #fef3c7;
+  --color-accent-yellow-fd: #fde68a;
+  --color-accent-yellow-fc: #fcd34d;
+  --color-accent-yellow-fb: #fbbf24;
+  --color-accent-yellow-ffb: #ffb800;
+  --color-accent-yellow-e0: #e0a106;
+  --color-accent-yellow-b5: #b58105;
+  --color-accent-yellow-8a: #8a6404;
+  --color-accent-yellow-5f: #5f4703;
+
+  --color-accent-orange-ff: #fff7ed;
+  --color-accent-orange-ffe: #ffedd5;
+  --color-accent-orange-fe: #fed7aa;
+  --color-accent-orange-fd: #fdba74;
+  --color-accent-orange-fb: #fb923c;
+  --color-accent-orange-f9: #f97316;
+  --color-accent-orange-ea: #ea580c;
+  --color-accent-orange-c2: #c2410c;
+  --color-accent-orange-9a: #9a3412;
+  --color-accent-orange-7c: #7c2d12;
+
+  --color-etc-skeleton-e4: #0f0f17;
+  --color-etc-skeleton-f7: #f7f7f8;
+  --color-etc-skeleton-ff: #ffffff;
+
+  --color-etc-hover-ee: #eeeeee;
+}

package/styles/token/colors.ts

@@ -0,0 +1,105 @@
+export const colors = {
+  transparent: 'transparent',
+  black: '#000000',
+  white: '#ffffff',
+  grayFa: '#fafafa',
+  grayF4: '#f4f4f5',
+  grayE4: '#e4e4e7',
+  grayD4: '#d4d4d8',
+  grayA1: '#a1a1aa',
+  gray71: '#71717a',
+  gray52: '#52525b',
+  gray3f: '#3f3f46',
+  gray27: '#27272a',
+  gray18: '#18181b',
+  purpleF4: '#f4effa',
+  purpleE9: '#e9e0f5',
+  purpleDd: '#ddd1f0',
+  purpleC3: '#c3b4dd',
+  purpleA8: '#a894c7',
+  purple95: '#957eb4',
+  purple6f: '#6f56a3',
+  purple4c: '#4c277c',
+  purple41: '#4c1d88',
+  purple39: '#391d5d',
+  accentRedFf: '#fff5f6',
+  accentRedFfe: '#ffe8e9',
+  accentRedFb: '#fbcfd2',
+  accentRedF3: '#f39aa0',
+  accentRedE8: '#e86f77',
+  accentRedDf: '#df535c',
+  accentRedC9: '#c94751',
+  accentRedB0: '#b02e4c',
+  accentRed8f: '#8f243a',
+  accentRed6e: '#6e1a2c',
+  accentPinkFf: '#fff1f6',
+  accentPinkFfe: '#ffe4ee',
+  accentPinkFe: '#fecfe3',
+  accentPinkFd: '#fda4cc',
+  accentPinkF4: '#f472b6',
+  accentPinkEc: '#ec6fae',
+  accentPinkD9: '#d95d9a',
+  accentPinkB9: '#b94a7e',
+  accentPink93: '#93385f',
+  accentPink6e: '#6e2644',
+  accentMagentaFe: '#fef0ff',
+  accentMagentaFc: '#fce4ff',
+  accentMagentaF8: '#f8c6ff',
+  accentMagentaF2: '#f29bff',
+  accentMagentaEc: '#ec5cef',
+  accentMagentaE1: '#e13be7',
+  accentMagentaC8: '#c82fcc',
+  accentMagentaA9: '#a923a8',
+  accentMagenta83: '#831c83',
+  accentMagenta5e: '#5e145e',
+  accentBlueF1: '#f1f4ff',
+  accentBlueE3: '#e3e8ff',
+  accentBlueC7: '#c7d2fe',
+  accentBlueA5: '#a5b4fc',
+  accentBlue81: '#818cf8',
+  accentBlue25: '#2563eb',
+  accentBlue1f: '#1f52c9',
+  accentBlue1e: '#1e40af',
+  accentBlue1c: '#1c348a',
+  accentBlue16: '#162763',
+  accentMintEc: '#ecfefd',
+  accentMintD1: '#d1faf7',
+  accentMintA7: '#a7f3ee',
+  accentMint6e: '#6ee7e0',
+  accentMint2d: '#2dd4cb',
+  accentMint01: '#01ece1',
+  accentMint0b: '#0bc5bc',
+  accentMint0f: '#0f9f99',
+  accentMint11: '#117d78',
+  accentMint13: '#135c58',
+  accentGreenEc: '#ecfdf3',
+  accentGreenD1: '#d1fae1',
+  accentGreenA7: '#a7f3c8',
+  accentGreen6e: '#6ee7a3',
+  accentGreen41: '#41e176',
+  accentGreen22: '#22c55e',
+  accentGreen16: '#16a34a',
+  accentGreen28: '#289a3a',
+  accentGreen166: '#166534',
+  accentGreen14: '#14532d',
+  accentYellowFf: '#fffbeb',
+  accentYellowFe: '#fef3c7',
+  accentYellowFd: '#fde68a',
+  accentYellowFc: '#fcd34d',
+  accentYellowFb: '#fbbf24',
+  accentYellowFfb: '#ffb800',
+  accentYellowE0: '#e0a106',
+  accentYellowB5: '#b58105',
+  accentYellow8a: '#8a6404',
+  accentYellow5f: '#5f4703',
+  accentOrangeFf: '#fff7ed',
+  accentOrangeFfe: '#ffedd5',
+  accentOrangeFe: '#fed7aa',
+  accentOrangeFd: '#fdba74',
+  accentOrangeFb: '#fb923c',
+  accentOrangeF9: '#f97316',
+  accentOrangeEa: '#ea580c',
+  accentOrangeC2: '#c2410c',
+  accentOrange9a: '#9a3412',
+  accentOrange7c: '#7c2d12',
+} as const;

package/styles/token/cursor.css

@@ -0,0 +1,5 @@
+.nuri-theme {
+  --cursor-button: pointer;
+  --cursor-disabled: not-allowed;
+  --cursor-link: pointer;
+}

package/styles/token/font.css

@@ -0,0 +1,56 @@
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css');
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
+.nuri-theme {
+  --font-size-xsm: 12px;
+  --font-size-sm: 14px;
+  --font-size-base: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 30px;
+  --font-size-4xl: 36px;
+  --font-size-5xl: 48px;
+  --font-size-6xl: 60px;
+
+  --line-height-xsm: 18px;
+  --line-height-sm: 18px;
+  --line-height-base: 22px;
+  --line-height-lg: 24px;
+  --line-height-xl: 28px;
+  --line-height-2xl: 32px;
+  --line-height-3xl: 36px;
+  --line-height-4xl: 43px;
+  --line-height-5xl: 66px;
+  --line-height-6xl: 82px;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  font-family:
+    'Twemoji Country Flags',
+    'Pretendard',
+    Pretendard,
+    -apple-system,
+    BlinkMacSystemFont,
+    system-ui,
+    Roboto,
+    'Helvetica Neue',
+    'Segoe UI',
+    'Apple SD Gothic Neo',
+    'Noto Sans KR',
+    'Malgun Gothic',
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji',
+    sans-serif;
+}
+
+.nuri-placeholder {
+  color: var(--color-primary-gray-a1);
+}

package/styles/token/radius.css

@@ -0,0 +1,6 @@
+[data-radius] {
+  /* 디자인 시스템의 변동 가능성으로 인해 크기순이 아닌 생성순으로 정렬합니다. */
+  --radius-1: 6px;
+  --radius-2: 4px;
+  --radius-3: 40px;
+}

package/styles/token/space.css

@@ -0,0 +1,13 @@
+.nuri-theme {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 10px;
+  --space-4: 11px;
+  --space-5: 12px;
+  --space-6: 14px;
+  --space-7: 15px;
+  --space-8: 16px;
+  --space-9: 18px;
+  --space-10: 20px;
+  --space-11: 30px;
+}