@loword/loword-design-system 0.0.13 → 0.0.14

package/dist/components/LDTabs/LDTabs.js

@@ -0,0 +1,263 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, } from 'react';
+import cn from '../../utils/cn.js';
+import { renderIcon } from '../../utils/renderIcon.js';
+import TabsBase from './TabsBase.js';
+const LDTabsContext = createContext({
+    variant: 'line',
+    placement: 'top',
+    size: 'medium',
+});
+const useLDTabsContext = () => useContext(LDTabsContext);
+// ── Root ──
+// 세로 배치는 items-stretch — line의 기준선(List의 border)이 콘텐츠 높이까지 이어지려면 List가 늘어나야 한다.
+// card는 패널(Content)이 자기 테두리를 직접 그리므로 stretch에 의존하지 않는다.
+const rootLayoutClass = {
+    top: 'flex flex-col',
+    left: 'flex flex-row items-stretch',
+    right: 'flex flex-row items-stretch',
+};
+const Root = ({ variant = 'line', placement = 'top', size = 'medium', className, ...props }) => (_jsx(LDTabsContext, { value: { variant, placement, size }, children: _jsx(TabsBase.Root, { orientation: placement === 'top' ? 'horizontal' : 'vertical', className: cn(rootLayoutClass[placement], 
+        // card 세로 배치는 트리거 border box와 콘텐츠 border가 맞닿아야 하므로 간격 없음
+        placement !== 'top' && variant !== 'card' && 'gap-6', className), ...props }) }));
+// ── List ──
+const listClass = {
+    line: {
+        top: 'flex flex-row border-b border-neutral200',
+        left: 'flex flex-col shrink-0 border-r border-neutral200',
+        right: 'flex flex-col shrink-0 border-l border-neutral200',
+    },
+    card: {
+        top: 'flex flex-row',
+        left: 'flex flex-col shrink-0',
+        right: 'flex flex-col shrink-0',
+    },
+    button: {
+        top: 'flex flex-row',
+        left: 'flex flex-col shrink-0',
+        right: 'flex flex-col shrink-0',
+    },
+};
+const listGapClass = {
+    line: {
+        top: { small: 'gap-3', medium: 'gap-3.5', large: 'gap-4' },
+        left: { small: 'gap-2', medium: 'gap-2.5', large: 'gap-3' },
+        right: { small: 'gap-2', medium: 'gap-2.5', large: 'gap-3' },
+    },
+    card: {
+        top: { small: 'gap-1', medium: 'gap-1', large: 'gap-1' },
+        left: { small: 'gap-1', medium: 'gap-1', large: 'gap-1' },
+        right: { small: 'gap-1', medium: 'gap-1', large: 'gap-1' },
+    },
+    button: {
+        top: { small: 'gap-1', medium: 'gap-1', large: 'gap-1' },
+        left: { small: 'gap-1', medium: 'gap-1.5', large: 'gap-2' },
+        right: { small: 'gap-1', medium: 'gap-1.5', large: 'gap-2' },
+    },
+};
+// card 전용: List 끝의 보이지 않는 스페이서.
+// 라운딩 반지름(rounded-lg = 8px)만큼을 항상 비워둬 트리거가 패널의 자유 모서리 호를 침범하지 못하게 한다 —
+// 트리거 열이 아무리 길어져도 마지막 8px은 이 요소 몫이라, 조건 분기 없이 어떤 크기 조합에서도 모서리가 맞는다.
+const cardListSpacerClass = {
+    top: 'flex-1 min-w-2',
+    left: 'flex-1 min-h-2',
+    right: 'flex-1 min-h-2',
+};
+const List = ({ className, children, ...props }) => {
+    const { variant, placement, size } = useLDTabsContext();
+    return (_jsxs(TabsBase.List, { className: cn(listClass[variant][placement], listGapClass[variant][placement][size], placement === 'right' && 'order-last', className), ...props, children: [children, variant === 'card' && (_jsx("div", { "aria-hidden": true, className: cardListSpacerClass[placement] }))] }));
+};
+// ── Trigger ──
+// line 공통: top 기준(배경 없이 텍스트 색상만 전환) — left/right도 동일, 테두리 색만 배치별로 갈림
+// 활성/hover 텍스트 색과 인디케이터 보더 색은 color prop(colorTextClass/colorIndicatorClass)이 담당
+const lineStateClass = cn('data-[state=inactive]:text-neutral600 data-[state=inactive]:not-data-[disabled]:hover:text-neutral900', 'data-[disabled]:opacity-40');
+// card 공통: 비활성은 옅은 회색 배경, 활성은 패널과 동일한 흰 배경.
+// 심(seam) 쪽 선은 패널(cardContentClass)이 혼자 그린다 — 비활성은 그 선이 그대로 보여 닫힌 박스가 되고,
+// 활성만 같은 흰색으로 그 구간을 덮어 열린 형태가 된다(덮개는 cardActiveCoverClass).
+// 흰색 위에 흰색을 덮는 구조라 배율이 어긋나 1~2px 밀려도 눈에 보이지 않는다.
+// 활성 텍스트 색은 color prop(colorTextClass)이 담당, inactive hover는 color와 무관하게 그레이스케일
+const cardStateClass = cn('data-[state=inactive]:bg-mono50 data-[state=inactive]:text-neutral600', // inactive
+'data-[state=inactive]:not-data-[disabled]:hover:bg-mono100 data-[state=inactive]:not-data-[disabled]:hover:text-neutral700', // inactive, hover
+'data-[state=active]:bg-white', // active
+'data-[state=active]:not-data-[disabled]:hover:bg-white', // active, hover
+// disabled: active/inactive 상관없이 항상 동일하게 적용 — !important 대신 data-state와 결합해 specificity로 이기게 함
+'data-[state=active]:data-[disabled]:bg-mono50/40 data-[state=active]:data-[disabled]:text-neutral600/40', 'data-[state=inactive]:data-[disabled]:bg-mono50/40 data-[state=inactive]:data-[disabled]:text-neutral600/40');
+// button 공통: 기본 배경 없음, 활성 시에만 배경 채움(LDButton 솔리드 스타일)
+// 활성 텍스트 색·활성 배경은 color prop이 담당, inactive hover는 color와 무관하게 그레이스케일
+const buttonStateClass = cn('data-[state=inactive]:text-neutral600', // inactive - 배경 없음
+'data-[state=inactive]:not-data-[disabled]:hover:bg-mono100 data-[state=inactive]:not-data-[disabled]:hover:text-neutral700', // inactive, hover
+'data-[disabled]:opacity-40');
+const buttonVerticalClass = cn('rounded-[5px]', buttonStateClass);
+// card 활성 트리거 전용: 심(seam) 쪽 패널 테두리를 덮어 그 구간만 선을 지우는 2px 스트립.
+// 절대 위치의 컨테이닝 블록이 트리거의 padding box라 inset-0이 트리거 자신의 border 1px 행을 남긴다 —
+// 그 행이 패널의 가로선·세로선과 T자로 만나 선이 이어진다.
+// border box 전체를 덮는 box-shadow로 하면 첫 트리거 위치에서 패널 테두리의 시작 2px이 같이 지워져 선이 끊긴다.
+// bg-white는 cardContentClass의 패널 배경과 같은 값이어야 한다(같이 바꿀 것).
+const cardActiveCoverClass = {
+    top: "after:content-[''] after:absolute after:inset-x-0 after:top-full after:h-0.5 after:bg-transparent data-[state=active]:after:bg-white",
+    left: "after:content-[''] after:absolute after:inset-y-0 after:left-full after:w-0.5 after:bg-transparent data-[state=active]:after:bg-white",
+    right: "after:content-[''] after:absolute after:inset-y-0 after:right-full after:w-0.5 after:bg-transparent data-[state=active]:after:bg-white",
+};
+const triggerClass = {
+    line: {
+        top: cn('relative -mb-px border-b-2 border-transparent', lineStateClass),
+        left: cn(
+        // 메뉴가 왼쪽에 있으므로 콘텐츠와 맞닿는 오른쪽 변에 인디케이터.
+        // List의 회색 기준선과 겹치도록 -mr-px로 정렬(top의 -mb-px와 동일한 원리), 라운딩 없음.
+        'relative -mr-px border-r-2 border-transparent', lineStateClass),
+        right: cn(
+        // 메뉴가 오른쪽에 있으므로 콘텐츠와 맞닿는 왼쪽 변에 인디케이터. 라운딩 없음.
+        'relative -ml-px border-l-2 border-transparent', lineStateClass),
+    },
+    card: {
+        top: cn(
+        // 심 쪽(아래) 변은 0폭 — transparent로 두면 인접 변과 45° 마이터가 생겨 모서리가 대각선으로 잘린다.
+        // 그 변의 선은 패널이 그리므로 트리거는 패널에 겹치지 않고 flush로 붙는다(음수 마진 없음).
+        // 활성만 cardActiveCoverClass의 2px 스트립으로 그 구간의 패널 테두리를 덮어 열린 형태가 된다.
+        'relative rounded-t-lg border border-b-0 border-neutral100', 'data-[state=active]:z-10', cardActiveCoverClass.top, cardStateClass),
+        left: cn('relative rounded-l-lg border border-r-0 border-neutral100', 'data-[state=active]:z-10', cardActiveCoverClass.left, cardStateClass),
+        right: cn('relative rounded-r-lg border border-l-0 border-neutral100', 'data-[state=active]:z-10', cardActiveCoverClass.right, cardStateClass),
+    },
+    button: {
+        top: cn('rounded-full bold', buttonStateClass),
+        left: buttonVerticalClass,
+        right: buttonVerticalClass,
+    },
+};
+// size는 트리거의 타이포와 여백만 바꿈 — variant/placement Record와 곱하지 않고 별도 Record로 분리
+const triggerFontClass = {
+    small: 'display12',
+    medium: 'display14',
+    large: 'display16',
+};
+// line top
+const lineTopPaddingClass = {
+    small: 'px-1 py-2',
+    medium: 'px-1.5 py-2.5',
+    large: 'px-2 py-3',
+};
+const cardTopPaddingClass = {
+    small: 'px-3 py-1.5',
+    medium: 'px-4 py-2',
+    large: 'px-5 py-2.5',
+};
+const buttonTopPaddingClass = {
+    small: 'px-3 py-1.5',
+    medium: 'px-4 py-2',
+    large: 'px-5 py-2.5',
+};
+// 아이콘–라벨 gap도 size 축 — 6/8/10px 등차(--control-gap-sm/md/lg와 같은 단계)
+const triggerGapClass = {
+    small: 'gap-1.5',
+    medium: 'gap-2',
+    large: 'gap-2.5',
+};
+// 아이콘 크기는 size 축 — 12/12/16px. large만 LDButton 사다리(display16↔icon-md)와 일치한다.
+// small은 사다리대로면 icon-xs(8px)지만 display12 옆에서 점처럼 보여 medium과 같은 icon-sm으로 올렸다.
+const triggerIconClass = {
+    small: 'icon-sm',
+    medium: 'icon-md',
+    large: 'icon-md',
+};
+// ── color ──
+// color는 Trigger 단위 prop이다 — 한 Tabs 안에서 트리거마다 다른 강조색을 지정할 수 있다.
+// color는 활성(active) 상태만 담당한다. inactive hover는 variant와 무관하게 그레이스케일
+// (bg-mono100·text-neutral700, line은 text-neutral900)이며 color와 무관.
+// Tailwind JIT가 문자열 보간을 스캔하지 못하므로 클래스명을 전부 리터럴로 적는다.
+// accent 단계는 소비 앱(loword-mono-frontend) 실사용을 참고해 정했다 —
+// 그쪽 스케일(5~100)의 success100/warning100/danger100 이 여기 600 단계와 동일한 hex이고, 그쪽엔 700 이상이 없다.
+// 다만 success/warning은 600이 텍스트로 너무 옅어(흰 배경 대비 1.93:1 / 1.66:1) 800을 쓴다 —
+// 실사용값에서 의도적으로 벗어난 지점이다.
+// 흰 배경 대비: lb500 3.00:1, danger600 3.29:1, success800 4.42:1, warning800 3.50:1.
+// button 활성 시에는 accent 글자가 같은 계열 tint 배경 위에 놓인다. 그 대비: point 2.73:1, danger 3.05:1,
+// success 4.21:1, warning 3.09:1 — point가 가장 약하다(기존 기본값).
+/** 활성 텍스트 + 활성 hover 텍스트 (전 variant 공통) */
+const colorTextClass = {
+    point: cn('data-[state=active]:text-lb500', 'data-[state=active]:not-data-[disabled]:hover:text-lb500'),
+    danger: cn('data-[state=active]:text-danger600', 'data-[state=active]:not-data-[disabled]:hover:text-danger600'),
+    success: cn('data-[state=active]:text-success800', 'data-[state=active]:not-data-[disabled]:hover:text-success800'),
+    warning: cn('data-[state=active]:text-warning800', 'data-[state=active]:not-data-[disabled]:hover:text-warning800'),
+};
+/** 활성 배경 tint — button 전용(card 활성 배경은 패널과 맞춘 bg-white로 cardStateClass가 담당) */
+const colorActiveBgClass = {
+    point: cn('data-[state=active]:bg-tintBlue', 'data-[state=active]:not-data-[disabled]:hover:bg-tintBlue'),
+    danger: cn('data-[state=active]:bg-tintRed', 'data-[state=active]:not-data-[disabled]:hover:bg-tintRed'),
+    success: cn('data-[state=active]:bg-tintGreen', 'data-[state=active]:not-data-[disabled]:hover:bg-tintGreen'),
+    warning: cn('data-[state=active]:bg-tintYellow', 'data-[state=active]:not-data-[disabled]:hover:bg-tintYellow'),
+};
+/** line 인디케이터 보더 — 콘텐츠와 맞닿는 변이 배치별로 다름 */
+const colorIndicatorClass = {
+    point: {
+        top: 'data-[state=active]:border-lb500',
+        left: 'data-[state=active]:border-r-lb500',
+        right: 'data-[state=active]:border-l-lb500',
+    },
+    danger: {
+        top: 'data-[state=active]:border-danger600',
+        left: 'data-[state=active]:border-r-danger600',
+        right: 'data-[state=active]:border-l-danger600',
+    },
+    success: {
+        top: 'data-[state=active]:border-success800',
+        left: 'data-[state=active]:border-r-success800',
+        right: 'data-[state=active]:border-l-success800',
+    },
+    warning: {
+        top: 'data-[state=active]:border-warning800',
+        left: 'data-[state=active]:border-r-warning800',
+        right: 'data-[state=active]:border-l-warning800',
+    },
+};
+// left/right는 variant와 무관하게 동일한 세로 여백을 씀
+// 가로 8/10/12px, 높이는 leading(16/18/20px) + py×2 = 28/34/40px 등차
+const verticalPaddingClass = {
+    small: 'px-2 py-1.5',
+    medium: 'px-2.5 py-2',
+    large: 'px-3 py-2.5',
+};
+const triggerPaddingClass = {
+    line: {
+        top: lineTopPaddingClass,
+        left: verticalPaddingClass,
+        right: verticalPaddingClass,
+    },
+    card: {
+        top: cardTopPaddingClass,
+        left: verticalPaddingClass,
+        right: verticalPaddingClass,
+    },
+    button: {
+        top: buttonTopPaddingClass,
+        left: verticalPaddingClass,
+        right: verticalPaddingClass,
+    },
+};
+const Trigger = ({ as, className, color = 'point', icon, children, ...props }) => {
+    const { variant, placement, size } = useLDTabsContext();
+    return (_jsxs(TabsBase.Trigger, { as: as, className: cn('flex items-center bold cursor-pointer ld-transition data-disabled:cursor-not-allowed', triggerFontClass[size], triggerClass[variant][placement], colorTextClass[color], variant === 'line' && colorIndicatorClass[color][placement], variant === 'button' && colorActiveBgClass[color], triggerGapClass[size], triggerPaddingClass[variant][placement][size], className), ...props, children: [renderIcon(icon, triggerIconClass[size]), children] }));
+};
+// ── Content ──
+// 콘텐츠 영역은 placement에 따라 배치가 갈리고, card만 추가로 테두리를 두른다.
+const contentClass = {
+    top: 'pt-4',
+    left: 'flex-1 min-w-0',
+    right: 'flex-1 min-w-0',
+};
+// card 전용 콘텐츠 패널 스타일
+const cardContentClass = {
+    top: 'p-4 bg-white rounded-tr-lg rounded-b-lg border border-neutral100',
+    left: 'p-4 bg-white rounded-tr-lg rounded-b-lg border border-neutral100',
+    right: 'p-4 bg-white rounded-tl-lg rounded-b-lg border border-neutral100',
+};
+const Content = ({ className, children, ...props }) => {
+    const { variant, placement } = useLDTabsContext();
+    return (_jsx(TabsBase.Content, { className: cn(contentClass[placement], variant === 'card' && cardContentClass[placement], className), ...props, children: _jsx("div", { className: "size-full overflow-auto", children: children }) }));
+};
+const LDTabs = {
+    Root,
+    List,
+    Trigger,
+    Content,
+};
+export default LDTabs;

package/dist/components/LDTabs/TabsBase.d.ts

@@ -0,0 +1,38 @@
+import { type CSSProperties, type ElementType, type ReactNode } from 'react';
+import { type PolymorphicComponentProps } from '../../types/polymorphic.js';
+interface RootProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+interface ListProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+interface TriggerOwnProps {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export type TriggerProps<T extends ElementType> = PolymorphicComponentProps<T, TriggerOwnProps>;
+interface ContentProps {
+    value: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export declare const TabsBase: {
+    Root: ({ className, children, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ className, style, children }: ListProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ElementType;
+    Content: ({ value, className, style, children }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default TabsBase;
+//# sourceMappingURL=TabsBase.d.ts.map

package/dist/components/LDTabs/TabsBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDTabs/TabsBase.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,WAAW,EAEhB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CACzE,CAAC,EACD,eAAe,CAChB,CAAC;AAqDF,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAUD,eAAO,MAAM,QAAQ;8CAvG4B,SAAS;2CAeZ,SAAS;aA2FjC,WAAW;qDAXuB,YAAY;CAanE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/LDTabs/TabsBase.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixTabs from '@radix-ui/react-tabs';
+const Root = ({ className, children, ...props }) => {
+    return (_jsx(RadixTabs.Root, { ...props, className: className, children: children }));
+};
+const List = ({ className, style, children }) => {
+    return (_jsx(RadixTabs.List, { className: className, style: style, children: children }));
+};
+// Radix Tabs.Trigger는 asChild 없이는 항상 <button>이라, 다른 엘리먼트로 바꾸려면 asChild가 유일한 경로다.
+// asChild를 쓸 때는 자식 엘리먼트를 여기서 직접 만들어야 계산된 className이 정확히 그 엘리먼트에 붙는다.
+// asChild는 외부에 노출하지 않는 내부 구현 디테일이다.
+const Trigger = ({ as, value, disabled, className, style, children, href, ...props }) => {
+    if (!as || as === 'button') {
+        return (_jsx(RadixTabs.Trigger, { value: value, disabled: disabled, className: className, style: style, ...props, children: children }));
+    }
+    // as가 href를 가질 때 (a, NextLink 등) disabled=true일 경우 href를 제거하고 span으로 렌더링
+    const isDisabledLink = href && disabled;
+    const Component = isDisabledLink ? 'span' : as;
+    return (_jsx(RadixTabs.Trigger, { value: value, disabled: disabled, asChild: true, children: _jsx(Component, { className: className, style: style, "aria-disabled": disabled || undefined, ...(!isDisabledLink && { href }), ...props, children: children }) }));
+};
+const Content = ({ value, className, style, children }) => {
+    return (_jsx(RadixTabs.Content, { value: value, className: className, style: style, children: children }));
+};
+export const TabsBase = {
+    Root,
+    List,
+    Trigger: Trigger,
+    Content,
+};
+export default TabsBase;