@yanolja-next/design-core 0.0.1 → 0.1.0

package/dist/components/viz/chart/ChartFrame.d.ts

@@ -0,0 +1,34 @@
+import { LegendItem } from './ChartLegend';
+import { Measure, Readout, Shape } from './layout';
+export type ChartEmpty = string | {
+    title: string;
+    description?: string;
+};
+export interface ChartFrameProps {
+    label: string;
+    height: number;
+    empty?: ChartEmpty;
+    legend?: LegendItem[];
+    className?: string;
+    touchHint?: string;
+}
+export declare function placeTip(o: {
+    x: number;
+    top: number;
+    width: number;
+    right?: number;
+    bottom?: number;
+    tip: {
+        w: number;
+        h: number;
+    };
+    pillHalf?: number;
+}): {
+    left: number;
+    top: number;
+};
+export declare const sortedRows: (rows: Readout["rows"]) => import('./layout').ReadoutRow[];
+export declare function ChartFrame({ label, height, empty, legend, className, touchHint, layout, read, }: ChartFrameProps & {
+    layout: (width: number, measure: Measure) => Shape[];
+    read?: (width: number, measure: Measure) => Readout[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/viz/chart/ChartHead.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface ChartHeadProps {
+    title?: ReactNode;
+    as?: 'h3' | 'h4' | 'div';
+    titleId?: string;
+    legend?: ReactNode;
+    className?: string;
+}
+export declare function ChartHead({ title, as: Tag, titleId, legend, className }: ChartHeadProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/viz/chart/ChartLegend.d.ts

@@ -0,0 +1,17 @@
+export declare const legendGlyphVariants: (props?: ({
+    glyph?: "line" | "marker" | "chip-s1" | "chip-s2" | "chip-s3" | "chip-s4" | "chip-s5" | "chip-s6" | "chip-spent" | "chip-rest" | "chip-partial" | "chip-partial-s2" | "chip-partial-spent" | "chip-partial-rest" | "line-spent" | "line-s2" | "line-ref" | "line-r1" | "line-r2" | "line-r3" | "line-r4" | "line-r5" | "line-r6" | "line-rest" | "dash-spent" | "dash-compare" | "dash" | "dash-req" | "chip-forecast" | "band" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LegendGlyph = NonNullable<Parameters<typeof legendGlyphVariants>[0]>['glyph'] & string;
+export interface LegendItem {
+    glyph: LegendGlyph;
+    label: string;
+    key?: string;
+    off?: boolean;
+}
+export interface ChartLegendProps {
+    items: LegendItem[];
+    className?: string;
+    label?: string;
+    onToggle?: (key: string) => void;
+}
+export declare function ChartLegend({ items, className, label, onToggle }: ChartLegendProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/viz/chart/ChartSkeleton.d.ts

@@ -0,0 +1,6 @@
+export interface ChartSkeletonProps {
+    height?: number;
+    className?: string;
+    bare?: boolean;
+}
+export declare function ChartSkeleton({ height, className, bare }: ChartSkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/viz/chart/LineChart.d.ts

@@ -0,0 +1,6 @@
+import { ChartFrameProps } from './ChartFrame';
+import { LineLayoutInput } from './layout';
+export interface LineChartProps extends Omit<ChartFrameProps, 'height'>, Omit<LineLayoutInput, 'width' | 'height'> {
+    height?: number;
+}
+export declare function LineChart({ label, empty, legend, className, height, ...spec }: LineChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/viz/chart/Sparkline.d.ts

@@ -0,0 +1,14 @@
+import { SeriesTone } from './layout';
+export interface SparklineProps {
+    label: string;
+    values: (number | null)[];
+    width?: number;
+    height?: number;
+    tone?: SparklineTone;
+    titles?: string[];
+    format?: (v: number) => string;
+    interactive?: boolean;
+    className?: string;
+}
+export type SparklineTone = Exclude<SeriesTone, 'rest'> | 'muted';
+export declare function Sparkline({ label, values, width, height, tone, titles, format, interactive, className, }: SparklineProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/viz/chart/TimeSeriesChart.d.ts

@@ -0,0 +1,7 @@
+import { ChartFrameProps } from './ChartFrame';
+import { TimeSeriesInput } from './timeSeries';
+export type { SeriesAnnotation, SeriesTone, TimeSeries } from './timeSeries';
+export interface TimeSeriesChartProps extends Omit<ChartFrameProps, 'height'>, Omit<TimeSeriesInput, 'width' | 'height'> {
+    height?: number;
+}
+export declare function TimeSeriesChart({ label, empty, legend, className, height, ...spec }: TimeSeriesChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/viz/chart/bubble.d.ts

@@ -0,0 +1 @@
+export declare const chartBubble = "pointer-events-none absolute z-140 whitespace-nowrap rounded-field bg-panel px-3 py-2 text-12 [--ls-cur:var(--ls-12)] leading-18 shadow-[0_0_0_1px_rgba(17,24,39,.06),0_8px_24px_rgba(17,24,39,.12)]";

package/dist/components/viz/chart/index.d.ts

@@ -0,0 +1,16 @@
+export type { BarChartProps } from './BarChart';
+export { BarChart } from './BarChart';
+export type { ChartEmpty } from './ChartFrame';
+export type { ChartHeadProps } from './ChartHead';
+export { ChartHead } from './ChartHead';
+export type { ChartLegendProps, LegendGlyph, LegendItem } from './ChartLegend';
+export { ChartLegend, legendGlyphVariants } from './ChartLegend';
+export type { ChartSkeletonProps } from './ChartSkeleton';
+export { ChartSkeleton } from './ChartSkeleton';
+export type { LineChartProps } from './LineChart';
+export { LineChart } from './LineChart';
+export type { BarLayoutInput, BarTone, LineLayoutInput, LineTone, Point } from './layout';
+export type { SparklineProps, SparklineTone } from './Sparkline';
+export { Sparkline } from './Sparkline';
+export type { SeriesAnnotation, SeriesTone, TimeSeries, TimeSeriesChartProps, } from './TimeSeriesChart';
+export { TimeSeriesChart } from './TimeSeriesChart';

package/dist/components/viz/chart/layout.d.ts

@@ -0,0 +1,212 @@
+export declare const TOP = 24;
+export declare const BOT = 22;
+export type SeriesTone = 's1' | 's2' | 's3' | 's4' | 's5' | 's6' | 'rest';
+export type BarTone = SeriesTone | 'spent' | 'zero';
+export type LineTone = 'spent' | 's1' | 's2';
+export type TextRole = 'ax-y' | 'ax-x' | 'ax-now' | 'ref-lab' | 'ann' | 'mk-lab' | 'ann-tag' | 'fc-lab' | 'pill';
+export type LineRole = 'grid' | 'base' | 'ref' | 'ref-req' | 'fc-end' | 'ann-lead' | 'mk' | 'gap';
+export type PathRole = 'fc-line' | 'fc-band' | 'fc-stack' | 'area-spent' | 'area-ink' | 'fill-r1' | 'fill-r2' | 'fill-r3' | 'fill-r4' | 'fill-r5' | 'fill-r6' | 'fill-rest' | 'ann-bg';
+export type PolyRole = 'spent' | 'ln-s1' | 'ln-s2' | 'fc-line' | 'fc-spent' | 'ln-r1' | 'ln-r2' | 'ln-r3' | 'ln-r4' | 'ln-r5' | 'ln-r6' | 'ln-rest' | 'compare';
+export type CircleRole = 'pt' | 'pt-spent' | 'pt-solo' | 'now' | 'now-halo' | 'pt-fc';
+export type Shape = {
+    kind: 'line';
+    role: LineRole;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+} | {
+    kind: 'rect';
+    tone: BarTone;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    col: number;
+    top?: boolean;
+    partial?: boolean;
+} | {
+    kind: 'path';
+    role: PathRole;
+    d: string;
+} | {
+    kind: 'polyline';
+    role: PolyRole;
+    points: string;
+} | {
+    kind: 'circle';
+    role: CircleRole;
+    cx: number;
+    cy: number;
+    r: number;
+} | {
+    kind: 'text';
+    role: TextRole;
+    x: number;
+    y: number;
+    anchor: 'start' | 'middle' | 'end';
+    text: string;
+};
+export type LegendGlyphName = string;
+export interface ReadoutRow {
+    label?: string;
+    value: string;
+    n?: number;
+    glyph?: LegendGlyphName;
+    kind?: 'total' | 'extra' | 'note';
+}
+export interface Readout {
+    x0: number;
+    x1: number;
+    x: number;
+    y: number;
+    title: string;
+    rows: ReadoutRow[];
+    pill?: string;
+    points?: {
+        y: number;
+        glyph: LegendGlyphName;
+    }[];
+    dot?: boolean;
+    key?: string;
+    empty?: boolean;
+    tick?: string;
+}
+export type Measure = (text: string, role: TextRole) => number;
+type Box = {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+};
+export declare const r1: (v: number) => number;
+export declare function fmt(v: number, money?: boolean, digits?: number): string;
+export declare function axisLabel(ticks: number[], money?: boolean, format?: (v: number) => string): (v: number) => string;
+export declare function exact(v: number, money?: boolean): string;
+export declare function scale(max: number, { integer }?: {
+    integer?: boolean;
+}): {
+    top: number;
+    ticks: number[];
+};
+export declare function axisRoom(min: number, sc: {
+    ticks: number[];
+}, spec: {
+    money?: boolean;
+    format?: (v: number) => string;
+}, measure?: Measure): number;
+export declare const GRID_REF_GAP = 14;
+export declare function axisRight(plotR: number, sc: {
+    ticks: number[];
+}, base: number, y: (v: number) => number, label: (v: number) => string, refs?: number[]): Shape[];
+export declare function placeAnnotation(o: {
+    cx: number;
+    text: string;
+    width: number;
+    topAt: (x0: number, x1: number) => number;
+    placed: Box[];
+    measure: Measure;
+    ownTop?: number;
+    drop?: boolean;
+}): Shape[];
+export declare function pickTicks(o: {
+    n: number;
+    at: (i: number) => number;
+    spacing: number;
+    now?: number;
+    tickStep: number;
+    keep?: number[];
+    keepGap?: number;
+    minPx?: number;
+}): number[];
+export declare function placeTicks(o: {
+    pick: number[];
+    xAt: (i: number) => number;
+    wOf: (i: number) => number;
+    now?: number;
+    last: number;
+    keep: number[];
+    shift: number;
+}): {
+    i: number;
+    x: number;
+}[];
+export declare function labelGap(labels: string[], width: (label: string) => number): number;
+export interface BarSeriesInput {
+    tone: BarTone;
+    name?: string;
+    values: (number | null)[];
+}
+export interface BarLayoutInput {
+    width: number;
+    height: number;
+    labels: string[];
+    axisLabels?: string[];
+    now?: number;
+    money?: boolean;
+    integer?: boolean;
+    format?: (v: number) => string;
+    partial?: number;
+    tickStep?: number;
+    axisStep?: number;
+    minAxisWidth?: number;
+    series: BarSeriesInput[];
+    forecast?: {
+        values: (number | null)[];
+        until?: number;
+        style?: 'line' | 'band' | 'stack';
+    };
+    annotations?: {
+        at: number;
+        text: string;
+    }[];
+    keepTicks?: number[];
+}
+export declare const CHIP: Record<BarTone, string>;
+export declare function readBars(spec: BarLayoutInput, measure?: Measure): Readout[];
+export declare function layoutBars(spec: BarLayoutInput, measure: Measure): Shape[];
+export type Point = [t: number, v: number];
+export type GapPoint = [t: number, v: number | null];
+export interface LineLayoutInput {
+    width: number;
+    height: number;
+    domain: [number, number];
+    money?: boolean;
+    integer?: boolean;
+    format?: (v: number) => string;
+    name?: string;
+    pointLabel?: (t: number) => string;
+    spent: number[] | GapPoint[];
+    tone?: LineTone;
+    forecast?: Point[];
+    forecastLabel?: string;
+    references?: {
+        value: number;
+        label?: string;
+        request?: boolean;
+    }[];
+    ticks?: {
+        at: number;
+        label: string;
+        now?: boolean;
+    }[];
+    tickStep?: number;
+    annotations?: {
+        at: number;
+        text: string;
+    }[];
+    markers?: {
+        at: number;
+        label: string;
+    }[];
+    stops?: {
+        at: number;
+        value: number;
+        label: string;
+    }[];
+    minAxisWidth?: number;
+    top?: number;
+}
+export declare function readLine(spec: LineLayoutInput, measure?: Measure): Readout[];
+export declare function layoutLine(spec: LineLayoutInput, measure: Measure): Shape[];
+export {};

package/dist/components/viz/chart/timeSeries.d.ts

@@ -0,0 +1,44 @@
+import { Measure, Readout, SeriesTone, Shape } from './layout';
+export type { SeriesTone };
+export interface TimeSeries {
+    key: string;
+    name: string;
+    tone: SeriesTone;
+    values: (number | null)[];
+}
+export interface TimeSeriesInput {
+    width: number;
+    height: number;
+    kind: 'bar' | 'line' | 'area';
+    labels: string[];
+    axisLabels?: string[];
+    now?: number;
+    partial?: number;
+    series: TimeSeries[];
+    hidden?: string[];
+    compare?: {
+        label: string;
+        values: (number | null)[];
+        titles?: string[];
+    };
+    format: (v: number) => string;
+    axisFormat?: (v: number) => string;
+    integer?: boolean;
+    money?: boolean;
+    totals?: (number | null)[];
+    totalLabel?: string;
+    delta?: (cur: number | null, prev: number | null) => string;
+    minAxisWidth?: number;
+    annotations?: SeriesAnnotation[];
+}
+export interface SeriesAnnotation {
+    at: number;
+    label: string;
+    title?: string;
+    rows?: {
+        label: string;
+        value: string;
+    }[];
+}
+export declare function readSeries(spec: TimeSeriesInput, measure?: Measure): Readout[];
+export declare function layoutSeries(spec: TimeSeriesInput, measure: Measure): Shape[];

package/dist/components/viz/code-block/CodeBlock.d.ts

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const codeBlockVariants: (props?: ({
+    inset?: boolean | null | undefined;
+    wrap?: "none" | "always" | "phone" | null | undefined;
+    copyable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CodeBlockProps extends Pick<VariantProps<typeof codeBlockVariants>, 'inset' | 'wrap'> {
+    code: string;
+    label?: string;
+    copyable?: boolean;
+    secret?: {
+        value: string;
+        reveal?: number;
+    };
+    loading?: boolean;
+    className?: string;
+}
+export declare function CodeBlock({ code, label, copyable, secret, inset, wrap, loading, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/viz/code-block/index.d.ts

@@ -0,0 +1,2 @@
+export type { CodeBlockProps } from './CodeBlock';
+export { CodeBlock, codeBlockVariants } from './CodeBlock';

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

@@ -0,0 +1,2 @@
+export * from './chart';
+export * from './code-block';

package/dist/i18n/en.d.ts

@@ -0,0 +1,88 @@
+declare const _default: {
+    복사됨: string;
+    나: string;
+    '\uBCF5\uC0AC \uC2E4\uD328': string;
+    '{label} \uBCF5\uC0AC': string;
+    '{name} \uBA54\uB274': string;
+    '{name} \uB3D9\uC791': string;
+    검색: string;
+    '\uC120\uD0DD\uD55C \uD589 \uB3D9\uC791': string;
+    '{count}\uAC1C \uC120\uD0DD\uB428': string;
+    '{count}{unit} \uC120\uD0DD\uB428': string;
+    '\uC120\uD0DD \uD574\uC81C': string;
+    '\uB2E4\uC2DC \uC2DC\uB3C4': string;
+    '\uCABD \uB118\uAE40': string;
+    '\uC774\uC804 \uCABD': string;
+    쪽: string;
+    '\uB2E4\uC74C \uCABD': string;
+    '\uBD88\uB7EC\uC624\uB294 \uC911': string;
+    '\uCC98\uC74C \uCE78\uC73C\uB85C': string;
+    '\uC624\uB978\uCABD \uCE78 \uBCF4\uAE30': string;
+    '\uBAA8\uB450 \uC120\uD0DD': string;
+    '\uC120\uD0DD@@\uD45C\uC758 \uACE0\uB974\uAE30 \uCE78': string;
+    에서: string;
+    '{marks} \uC9C0\uB0A8': string;
+    '{marks} \uC544\uC9C1': string;
+    '{text}, \uB208\uAE08 {marks}': string;
+    없음: string;
+    완료: string;
+    '\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9 \uC5C6\uC74C': string;
+    '{count}\uAC1C \uB354 \uC788\uC2B5\uB2C8\uB2E4. \uB354 \uC785\uB825\uD574 \uC881\uD600 \uC8FC\uC138\uC694': string;
+    '{action} \uC2E4\uD328. \uB2E4\uC2DC \uC2DC\uB3C4': string;
+    취소: string;
+    로그인: string;
+    '\uD655\uC778 \uAE00\uC790 \uC785\uB825 \uD544\uC694': string;
+    '\uD655\uC778\uC744 \uC704\uD574 {subject}': string;
+    입력: string;
+    닫기: string;
+    알림: string;
+    '\uC54C\uB9BC ({hotkey})': string;
+    '\uBCF8\uBB38\uC73C\uB85C \uAC74\uB108\uB6F0\uAE30': string;
+    메뉴: string;
+    '\uBA54\uB274 \uB2EB\uAE30': string;
+    '\uD604\uC7AC {kind}': string;
+    '\uB3C4\uC6C0\uB9D0 \uD328\uB110': string;
+    '\uB3C4\uC6C0\uB9D0 \uB2EB\uAE30': string;
+    '\uB354 \uC54C\uC544\uBCF4\uAE30': string;
+    '\uC0C8 \uCC3D': string;
+    정보: string;
+    '\uC2DD\uBCC4\uC790 {id} \uBCF5\uC0AC': string;
+    ', \uCC98\uB9AC\uD560 \uC77C {count}': string;
+    '\uB9C9\uB300\uB97C \uB20C\uB7EC \uAC12 \uBCF4\uAE30': string;
+    '\uC120\uC744 \uB20C\uB7EC \uAC12 \uBCF4\uAE30': string;
+    '\uB20C\uB7EC \uAC12 \uBCF4\uAE30': string;
+    '\uB204\uB974\uAC70\uB098 \uC606\uC73C\uB85C \uBC00\uC5B4 \uAC12 \uBCF4\uAE30': string;
+    '\uC88C\uC6B0 \uD654\uC0B4\uD45C\uB85C \uCE78\uB9C8\uB2E4 \uAC12 \uC77D\uAE30': string;
+    보이기: string;
+    숨기기: string;
+    합계: string;
+    예상: string;
+    '\uC6D4\uB9D0 \uC608\uC0C1': string;
+    '{title} (\uC9C4\uD589 \uC911)': string;
+    변화: string;
+    코드: string;
+    '\uC606\uC73C\uB85C \uB354 \uC788\uC74C': string;
+    경로: string;
+    사이드바: string;
+    '\uC54C\uB9BC, \uC0C8 \uC54C\uB9BC \uC788\uC74C': string;
+    '\uC704\uD5D8 \uAD6C\uC5ED': string;
+    '"{query}" \uACB0\uACFC \uC5C6\uC74C': string;
+    '\uAC80\uC0C9 \uACB0\uACFC': string;
+    '{count}\uAC1C \uB354 \uBCF4\uAE30': {
+        one: string;
+        other: string;
+    };
+    '\uB354 \uBCF4\uAE30': string;
+    접기: string;
+    '{label} \uB354 \uBCF4\uAE30': string;
+    '{label} \uC811\uAE30': string;
+    '\uC774\uB3D9@@\uCC3E\uAE30 \uCC3D \uD0A4 \uC548\uB0B4': string;
+    열기: string;
+    '\uC55E \uD654\uBA74': string;
+    '(\uC0C8 \uD0ED)': string;
+    도움말: string;
+    로그아웃: string;
+    '\uB0B4 \uACC4\uC815 \uBA54\uB274, {name}': string;
+    언어: string;
+};
+export default _default;

package/dist/i18n/index.d.ts

@@ -0,0 +1,15 @@
+export type Locale = 'ko' | 'en';
+export type Plural = {
+    one: string;
+    other: string;
+};
+export type Messages = Record<string, string | Plural>;
+export type MessageVars = Record<string, string | number>;
+export declare const addMessages: (messages: Messages) => void;
+export declare const designSystemMessages: () => Messages;
+export declare const englishMessages: () => Messages;
+export declare const getLocale: () => Locale;
+export declare const setLocale: (locale: Locale) => void;
+export declare const useLocale: () => Locale;
+export declare const msg: <S extends string>(source: S) => S;
+export declare const t: (source: string, vars?: MessageVars) => string;

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+export type { Token, TokenName } from '@yanolja-next/design-tokens';
+export { tokens } from '@yanolja-next/design-tokens';
+export { type CatalogEntry, catalog } from './catalog';
+export * from './components/button';
+export * from './components/data';
+export * from './components/forms';
+export * from './components/icon';
+export * from './components/link';
+export * from './components/overlay';
+export * from './components/reason';
+export * from './components/shell';
+export * from './components/viz';
+export { addMessages, designSystemMessages, englishMessages, getLocale, type Locale, type Messages, type MessageVars, msg, type Plural, setLocale, t, useLocale, } from './i18n';
+export { afterPress } from './lib/afterPress';
+export { ARRIVAL_ATTR, ARRIVAL_MS, markArrival } from './lib/arrival';
+export { cn } from './lib/cn';
+export { COPIED_MS, type CopyState, copyText, useCopied, useCopy } from './lib/copied';
+export { focusAfterRemoval, focusAfterRetry } from './lib/focusAfter';
+export { phoneHit } from './lib/hit';
+export { isPhone } from './lib/media';
+export { DELAY, EASE, MOTION, prefersReducedMotion } from './lib/motion';
+export { focusIsLost, focusSheet, onPageScroll, pageScroller, pageScrollTop, scrollPageTo, } from './lib/pageScroll';