@ktnpm_devops/react-component 0.2.1 → 0.4.0

package/dist/index9.js.map

@@ -1 +1 @@
-{"version":3,"file":"index9.js","sources":["../src/primitives/Avatar/Avatar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport styles from './Avatar.module.css';\n\nexport type AvatarSize = 'sm' | 'md' | 'lg';\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  label: string;\n  size?: AvatarSize;\n}\n\nexport const Avatar = ({ label, size = 'md', className, ...props }: AvatarProps) => {\n  const initials = label\n    .split(' ')\n    .filter(Boolean)\n    .map((part) => part[0])\n    .join('')\n    .slice(0, 2)\n    .toUpperCase();\n\n  return (\n    <span\n      className={clsx(styles.root, styles[size], className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {initials || '?'}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;AAUO,MAAM,SAAS,CAAC,EAAE,OAAO,OAAO,MAAM,WAAW,GAAG,YAAyB;AAClF,QAAM,WAAW,MACd,MAAM,GAAG,EACT,OAAO,OAAO,EACd,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,KAAK,EAAE,EACP,MAAM,GAAG,CAAC,EACV,YAAA;AAEH,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,KAAK,OAAO,MAAM,OAAO,IAAI,GAAG,SAAS;AAAA,MACpD,eAAY;AAAA,MACX,GAAG;AAAA,MAEH,UAAA,YAAY;AAAA,IAAA;AAAA,EAAA;AAGnB;"}
+{"version":3,"file":"index9.js","sources":["../src/layouts/AuthLayout/AuthLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AuthLayoutProps } from './AuthLayout.types';\nimport styles from './AuthLayout.module.css';\n\nexport const AuthLayout = ({\n  children,\n  logo,\n  footer,\n  maxWidth = '28rem',\n  className,\n}: AuthLayoutProps) => (\n  <main className={clsx(styles.root, className)}>\n    {logo && <div className={styles.logo}>{logo}</div>}\n    <div className={styles.card} style={{ maxWidth }}>\n      {children}\n    </div>\n    {footer && <div className={styles.footer}>{footer}</div>}\n  </main>\n);\n"],"names":[],"mappings":";;;AAIO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,2BACG,QAAA,EAAK,WAAW,KAAK,OAAO,MAAM,SAAS,GACzC,UAAA;AAAA,EAAA,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,MAAO,UAAA,MAAK;AAAA,EAC5C,oBAAC,SAAI,WAAW,OAAO,MAAM,OAAO,EAAE,YACnC,UACH;AAAA,EACC,UAAU,oBAAC,OAAA,EAAI,WAAW,OAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,CACpD;"}

package/dist/primitives/Col/Col.d.ts

@@ -0,0 +1,4 @@
+import { ColProps } from './Col.types';
+
+export declare const Col: import('react').ForwardRefExoticComponent<ColProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Col.d.ts.map

package/dist/primitives/Col/Col.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Col.d.ts","sourceRoot":"","sources":["../../../src/primitives/Col/Col.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAW5C,eAAO,MAAM,GAAG,qGAqCf,CAAC"}

package/dist/primitives/Col/Col.types.d.ts

@@ -0,0 +1,13 @@
+export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Fractional width based on 12-column grid (1–12). */
+    span?: number;
+    /** Left margin offset based on 12-column grid (0–11). */
+    offset?: number;
+    /** Flex grow factor. `true` is equivalent to `1`. */
+    grow?: boolean | number;
+    /** Flex shrink factor. `true` is equivalent to `1`. */
+    shrink?: boolean | number;
+    /** Flex basis value. */
+    basis?: string;
+}
+//# sourceMappingURL=Col.types.d.ts.map

package/dist/primitives/Col/Col.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Col.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Col/Col.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/primitives/Col/index.d.ts

@@ -0,0 +1,3 @@
+export { Col } from './Col';
+export type { ColProps } from './Col.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/Col/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/Col/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/primitives/Row/Row.d.ts

@@ -0,0 +1,4 @@
+import { RowProps } from './Row.types';
+
+export declare const Row: import('react').ForwardRefExoticComponent<RowProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Row.d.ts.map

package/dist/primitives/Row/Row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/primitives/Row/Row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAgC5C,eAAO,MAAM,GAAG,qGA8Bf,CAAC"}

package/dist/primitives/Row/Row.types.d.ts

@@ -0,0 +1,16 @@
+export type RowGap = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type RowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type RowJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Gap between children. Maps to `var(--spacing-{value})`. */
+    gap?: RowGap;
+    /** Cross-axis alignment (`align-items`). */
+    align?: RowAlign;
+    /** Main-axis alignment (`justify-content`). */
+    justify?: RowJustify;
+    /** Whether children wrap to next line. */
+    wrap?: boolean;
+    /** Flex direction. */
+    direction?: 'row' | 'column';
+}
+//# sourceMappingURL=Row.types.d.ts.map

package/dist/primitives/Row/Row.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Row/Row.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GACd,MAAM,GACN,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AAE3E,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,QAAQ,GACR,KAAK,GACL,SAAS,GACT,QAAQ,GACR,QAAQ,CAAC;AAEb,MAAM,WAAW,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,8DAA8D;IAC9D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sBAAsB;IACtB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B"}

package/dist/primitives/Row/index.d.ts

@@ -0,0 +1,3 @@
+export { Row } from './Row';
+export type { RowProps, RowGap, RowAlign, RowJustify } from './Row.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/Row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/Row/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC"}

package/dist/style.css

@@ -1,3 +1,274 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+  --orbit-font-sans: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+  /* Light theme palette */
+  --orbit-color-bg-primary: #f9fafb;
+  --orbit-color-surface: #ffffff;
+  --orbit-color-surface-muted: #f3f4f6;
+  --orbit-color-surface-alt: #eef2ff;
+
+  --orbit-color-text-primary: #111827;
+  --orbit-color-text-secondary: #4b5563;
+  --orbit-color-text-tertiary: #6b7280;
+  --orbit-color-text-disabled: #9ca3af;
+
+  --orbit-color-border: #e5e7eb;
+  --orbit-color-border-light: #f3f4f6;
+
+  --orbit-color-brand: #ff6b5a;
+  --orbit-color-brand-hover: #e65548;
+  --orbit-color-brand-soft: rgba(255, 107, 90, 0.12);
+
+  --orbit-color-purple: #2d1b2e;
+  --orbit-color-purple-light: #4a3044;
+
+  --orbit-color-success: #047857;
+  --orbit-color-success-soft: #ecfdf5;
+  --orbit-color-warning: #b45309;
+  --orbit-color-warning-soft: #fffbeb;
+  --orbit-color-danger: #b91c1c;
+  --orbit-color-danger-soft: #fef2f2;
+  --orbit-color-info: #1d4ed8;
+  --orbit-color-info-soft: #dbeafe;
+
+  --orbit-shadow-sm: 0 0.0625rem 0.125rem 0 rgba(15, 23, 42, 0.05);
+  --orbit-shadow-md: 0 0.625rem 1.5625rem -0.625rem rgba(45, 27, 46, 0.35);
+  --orbit-shadow-lg: 0 1.25rem 2.8125rem -0.9375rem rgba(45, 27, 46, 0.3);
+
+  --orbit-radius-sm: 0.375rem;
+  --orbit-radius-md: 0.625rem;
+  --orbit-radius-lg: 1rem;
+  --orbit-radius-pill: 62.4375rem;
+}
+
+:root[data-theme='dark'],
+.dark {
+  --orbit-color-bg-primary: #111827;
+  --orbit-color-surface: #1f2937;
+  --orbit-color-surface-muted: #374151;
+  --orbit-color-surface-alt: #2d1b2e;
+
+  --orbit-color-text-primary: #f3f4f6;
+  --orbit-color-text-secondary: #9ca3af;
+  --orbit-color-text-tertiary: #6b7280;
+  --orbit-color-text-disabled: #4b5563;
+
+  --orbit-color-border: #374151;
+  --orbit-color-border-light: #2d1b2e;
+
+  --orbit-color-brand: #ff8575;
+  --orbit-color-brand-hover: #ff6b5a;
+  --orbit-color-brand-soft: rgba(255, 133, 117, 0.16);
+
+  --orbit-color-purple: #2d1b2e;
+  --orbit-color-purple-light: #4a3044;
+
+  --orbit-color-success: #34d399;
+  --orbit-color-success-soft: rgba(16, 185, 129, 0.12);
+  --orbit-color-warning: #facc15;
+  --orbit-color-warning-soft: rgba(250, 204, 21, 0.12);
+  --orbit-color-danger: #f87171;
+  --orbit-color-danger-soft: rgba(248, 113, 113, 0.12);
+  --orbit-color-info: #60a5fa;
+  --orbit-color-info-soft: rgba(96, 165, 250, 0.12);
+
+  --orbit-shadow-sm: 0 0.0625rem 0.125rem 0 rgba(17, 24, 39, 0.35);
+  --orbit-shadow-md: 0 0.75rem 1.875rem -0.75rem rgba(17, 24, 39, 0.55);
+  --orbit-shadow-lg: 0 1.5rem 3.4375rem -1.25rem rgba(17, 24, 39, 0.6);
+}
+
+:root {
+  color-scheme: light;
+
+  --font-family-base: var(--orbit-font-sans);
+
+  /* Surfaces */
+  --app-background: var(--orbit-color-bg-primary);
+  --surface-color: var(--orbit-color-surface);
+  --surface-alt: var(--orbit-color-surface-muted);
+  --surface-elevated: var(--orbit-color-surface);
+  --surface-secondary: var(--orbit-color-surface-muted);
+
+  /* Borders */
+  --border-color: var(--orbit-color-border);
+  --border-color-light: var(--orbit-color-border-light);
+  --border-width: 0.0625rem;
+  --border-width-md: 0.125rem;
+
+  /* Text */
+  --text-primary: var(--orbit-color-text-primary);
+  --text-secondary: var(--orbit-color-text-secondary);
+  --text-muted: var(--orbit-color-text-secondary);
+  --text-tertiary: var(--orbit-color-text-tertiary);
+  --text-disabled: var(--orbit-color-text-disabled);
+
+  /* Brand / Accent */
+  --accent-color: var(--orbit-color-brand);
+  --accent-color-strong: var(--orbit-color-brand-hover);
+  --accent-color-soft: var(--orbit-color-brand-soft);
+  --accent-color-contrast: #ffffff;
+
+  /* Status */
+  --danger-color: var(--orbit-color-danger);
+  --danger-color-soft: var(--orbit-color-danger-soft);
+  --success-color: var(--orbit-color-success);
+  --success-color-soft: var(--orbit-color-success-soft);
+  --warning-color: var(--orbit-color-warning);
+  --warning-color-soft: var(--orbit-color-warning-soft);
+  --info-color: var(--orbit-color-info);
+  --info-color-soft: var(--orbit-color-info-soft);
+
+  /* Shadows */
+  --shadow-subtle: var(--orbit-shadow-sm);
+  --shadow-soft: var(--orbit-shadow-md);
+  --shadow-md: var(--orbit-shadow-md);
+  --shadow-elevated: var(--orbit-shadow-lg);
+  --shadow-lg: var(--orbit-shadow-lg);
+
+  /* Radii */
+  --radius-sm: var(--orbit-radius-sm);
+  --radius-md: var(--orbit-radius-md);
+  --radius-lg: var(--orbit-radius-lg);
+  --radius-pill: var(--orbit-radius-pill);
+
+  /* Spacing scale */
+  --spacing-2xs: 0.125rem;
+  --spacing-xs: 0.375rem;
+  --spacing-sm: 0.625rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+
+  /* Font sizes */
+  --font-size-2xs: 0.625rem;
+  --font-size-xs: 0.6875rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-base: 0.875rem;
+  --font-size-md: 0.875rem;
+  --font-size-lg: 1rem;
+  --font-size-xl: 1.125rem;
+  --font-size-2xl: 1.25rem;
+  --font-size-3xl: 1.5rem;
+  --font-size-4xl: 1.875rem;
+
+  /* Font weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Icon sizes */
+  --icon-sm: 0.875rem;
+  --icon-md: 1rem;
+  --icon-lg: 1.125rem;
+
+  /* Focus ring (brand-colored) */
+  --focus-ring-width: 0.1875rem;
+  --focus-ring-spread: 0.25rem;
+  --focus-ring-color: rgba(255, 107, 90, 0.35);
+  --focus-ring-color-subtle: rgba(255, 107, 90, 0.18);
+  --focus-ring-shadow: 0 0 0 var(--border-width-md) var(--focus-ring-color),
+                       0 0 0 var(--focus-ring-spread) var(--focus-ring-color-subtle);
+  --input-focus-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 107, 90, 0.15);
+
+  /* Avatar */
+  --avatar-gradient: linear-gradient(135deg, var(--accent-color), var(--orbit-color-purple-light));
+
+  /* Chart palette */
+  --chart-color-1: #ff6b5a;
+  --chart-color-2: #4a3044;
+  --chart-color-3: #3b82f6;
+  --chart-color-4: #10b981;
+  --chart-color-5: #f59e0b;
+  --chart-color-6: #8b5cf6;
+
+  /* Scrollbar */
+  --scrollbar-track: rgba(148, 163, 184, 0.05);
+  --scrollbar-thumb: rgba(148, 163, 184, 0.3);
+  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.5);
+
+  /* Overlay */
+  --overlay-color: rgba(0, 0, 0, 0.5);
+  --backdrop-blur: 0.25rem;
+}
+
+:root[data-theme='dark'],
+.dark {
+  color-scheme: dark;
+
+  /* Surfaces */
+  --app-background: var(--orbit-color-bg-primary);
+  --surface-color: var(--orbit-color-surface);
+  --surface-alt: var(--orbit-color-surface-muted);
+  --surface-elevated: var(--orbit-color-surface);
+  --surface-secondary: var(--orbit-color-surface-muted);
+
+  /* Borders */
+  --border-color: var(--orbit-color-border);
+  --border-color-light: var(--orbit-color-border-light);
+
+  /* Text */
+  --text-primary: var(--orbit-color-text-primary);
+  --text-secondary: var(--orbit-color-text-secondary);
+  --text-muted: var(--orbit-color-text-secondary);
+  --text-tertiary: var(--orbit-color-text-tertiary);
+  --text-disabled: var(--orbit-color-text-disabled);
+
+  /* Brand / Accent */
+  --accent-color: var(--orbit-color-brand);
+  --accent-color-strong: var(--orbit-color-brand-hover);
+  --accent-color-soft: var(--orbit-color-brand-soft);
+  --accent-color-contrast: #ffffff;
+
+  /* Status */
+  --danger-color: var(--orbit-color-danger);
+  --danger-color-soft: var(--orbit-color-danger-soft);
+  --success-color: var(--orbit-color-success);
+  --success-color-soft: var(--orbit-color-success-soft);
+  --warning-color: var(--orbit-color-warning);
+  --warning-color-soft: var(--orbit-color-warning-soft);
+  --info-color: var(--orbit-color-info);
+  --info-color-soft: var(--orbit-color-info-soft);
+
+  /* Shadows */
+  --shadow-subtle: var(--orbit-shadow-sm);
+  --shadow-soft: var(--orbit-shadow-md);
+  --shadow-md: var(--orbit-shadow-md);
+  --shadow-elevated: var(--orbit-shadow-lg);
+  --shadow-lg: var(--orbit-shadow-lg);
+
+  /* Focus ring (brand-colored, dark) */
+  --focus-ring-color: rgba(255, 133, 117, 0.35);
+  --focus-ring-color-subtle: rgba(255, 133, 117, 0.18);
+  --focus-ring-shadow: 0 0 0 var(--border-width-md) var(--focus-ring-color),
+                       0 0 0 var(--focus-ring-spread) var(--focus-ring-color-subtle);
+  --input-focus-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 133, 117, 0.15);
+
+  /* Chart palette (dark) */
+  --chart-color-1: #ff8575;
+  --chart-color-2: #4a3044;
+  --chart-color-3: #60a5fa;
+  --chart-color-4: #34d399;
+  --chart-color-5: #facc15;
+  --chart-color-6: #a78bfa;
+
+  /* Scrollbar (dark) */
+  --scrollbar-track: rgba(148, 163, 184, 0.08);
+  --scrollbar-thumb: rgba(148, 163, 184, 0.2);
+  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.35);
+
+  /* Overlay */
+  --overlay-color: rgba(0, 0, 0, 0.6);
+}
 .krc-root-la9-1 {
   display: flex;
   flex-direction: column;
@@ -334,6 +605,10 @@
   border-top: var(--border-width) solid var(--border-color);
   padding: var(--spacing-md);
 }
+.krc-root-pJYpn {
+  box-sizing: border-box;
+  min-width: 0;
+}
 .krc-root-LQf3S {
   position: fixed;
   z-index: 10;
@@ -1446,6 +1721,43 @@
 .krc-dividerHandle-SoNqx {
   color: var(--text-secondary);
 }
+.krc-root-HS837 {
+  display: flex;
+}
+
+/* Gap */
+.krc-gapNone-MmCvp { gap: 0; }
+.krc-gap2xs-h-fXm { gap: var(--spacing-2xs); }
+.krc-gapXs-Jketq { gap: var(--spacing-xs); }
+.krc-gapSm-BFLhK { gap: var(--spacing-sm); }
+.krc-gapMd--7IRg { gap: var(--spacing-md); }
+.krc-gapLg-ehuIZ { gap: var(--spacing-lg); }
+.krc-gapXl-kNEyc { gap: var(--spacing-xl); }
+.krc-gap2xl-3QB9p { gap: var(--spacing-2xl); }
+.krc-gap3xl-0f-pz { gap: var(--spacing-3xl); }
+
+/* Align */
+.krc-alignStart-q6fMC { align-items: flex-start; }
+.krc-alignCenter-Py2Kt { align-items: center; }
+.krc-alignEnd-ialGn { align-items: flex-end; }
+.krc-alignStretch-J-rq4 { align-items: stretch; }
+.krc-alignBaseline-Hg-4L { align-items: baseline; }
+
+/* Justify */
+.krc-justifyStart-tBqbD { justify-content: flex-start; }
+.krc-justifyCenter-6QDaO { justify-content: center; }
+.krc-justifyEnd-2tbcB { justify-content: flex-end; }
+.krc-justifyBetween-5W1AJ { justify-content: space-between; }
+.krc-justifyAround-AMU1m { justify-content: space-around; }
+.krc-justifyEvenly-Vj3C- { justify-content: space-evenly; }
+
+/* Wrap */
+.krc-wrap-Q4txZ { flex-wrap: wrap; }
+.krc-nowrap-BUcfT { flex-wrap: nowrap; }
+
+/* Direction */
+.krc-dirRow-NBoPO { flex-direction: row; }
+.krc-dirColumn-gJ7qS { flex-direction: column; }
 .krc-root-0iK-T {
   background: var(--surface-color);
   border: var(--border-width) solid var(--border-color);

package/dist/tokens/semantic-tokens.css

@@ -58,11 +58,32 @@
   --spacing-sm: 0.625rem;
   --spacing-md: 1rem;
   --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
 
   /* Font sizes */
+  --font-size-2xs: 0.625rem;
   --font-size-xs: 0.6875rem;
   --font-size-sm: 0.8125rem;
+  --font-size-base: 0.875rem;
   --font-size-md: 0.875rem;
+  --font-size-lg: 1rem;
+  --font-size-xl: 1.125rem;
+  --font-size-2xl: 1.25rem;
+  --font-size-3xl: 1.5rem;
+  --font-size-4xl: 1.875rem;
+
+  /* Font weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
 
   /* Icon sizes */
   --icon-sm: 0.875rem;

package/dist/tokens/tokens.d.ts

@@ -38,5 +38,40 @@ export declare const orbitTokens: {
         readonly lg: "16px";
         readonly pill: "999px";
     };
+    readonly typography: {
+        readonly fontSize: {
+            readonly '2xs': "0.625rem";
+            readonly xs: "0.6875rem";
+            readonly sm: "0.8125rem";
+            readonly base: "0.875rem";
+            readonly md: "0.875rem";
+            readonly lg: "1rem";
+            readonly xl: "1.125rem";
+            readonly '2xl': "1.25rem";
+            readonly '3xl': "1.5rem";
+            readonly '4xl': "1.875rem";
+        };
+        readonly fontWeight: {
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        readonly lineHeight: {
+            readonly tight: "1.25";
+            readonly normal: "1.5";
+            readonly relaxed: "1.75";
+        };
+    };
+    readonly spacing: {
+        readonly '2xs': "0.125rem";
+        readonly xs: "0.375rem";
+        readonly sm: "0.625rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+        readonly '2xl': "3rem";
+        readonly '3xl': "4rem";
+    };
 };
 //# sourceMappingURL=tokens.d.ts.map

package/dist/tokens/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/tokens/tokens.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCd,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/tokens/tokens.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Ed,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktnpm_devops/react-component",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Kenmei Technologies React Component Library",
   "type": "module",
   "license": "MIT",
@@ -23,7 +23,8 @@
     },
     "./tokens": "./dist/tokens/index.css",
     "./tokens/orbit": "./dist/tokens/orbit-tokens.css",
-    "./tokens/semantic": "./dist/tokens/semantic-tokens.css"
+    "./tokens/semantic": "./dist/tokens/semantic-tokens.css",
+    "./styles": "./dist/style.css"
   },
   "files": [
     "dist",

package/dist/index2.cjs

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const orbitTokens = {
-  brand: {
-    orange: "#FF6B5A",
-    orangeLight: "#FF8575",
-    orangeDark: "#E65548",
-    orangeSoft: "rgba(255, 107, 90, 0.12)"
-  },
-  purple: {
-    base: "#2D1B2E",
-    light: "#4A3044"
-  },
-  semantic: {
-    success: "#047857",
-    successSoft: "#ECFDF5",
-    warning: "#B45309",
-    warningSoft: "#FFFBEB",
-    danger: "#B91C1C",
-    dangerSoft: "#FEF2F2",
-    info: "#1D4ED8",
-    infoSoft: "#DBEAFE"
-  },
-  dark: {
-    semantic: {
-      success: "#34D399",
-      successSoft: "rgba(16, 185, 129, 0.12)",
-      warning: "#FACC15",
-      warningSoft: "rgba(250, 204, 21, 0.12)",
-      danger: "#F87171",
-      dangerSoft: "rgba(248, 113, 113, 0.12)",
-      info: "#60A5FA",
-      infoSoft: "rgba(96, 165, 250, 0.12)"
-    }
-  },
-  radius: {
-    sm: "6px",
-    md: "10px",
-    lg: "16px",
-    pill: "999px"
-  }
-};
-exports.orbitTokens = orbitTokens;
-//# sourceMappingURL=index2.cjs.map

package/dist/index2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index2.cjs","sources":["../src/tokens/tokens.ts"],"sourcesContent":["/** Orbit design token values for programmatic use (e.g., ECharts theming). */\nexport const orbitTokens = {\n  brand: {\n    orange: '#FF6B5A',\n    orangeLight: '#FF8575',\n    orangeDark: '#E65548',\n    orangeSoft: 'rgba(255, 107, 90, 0.12)',\n  },\n  purple: {\n    base: '#2D1B2E',\n    light: '#4A3044',\n  },\n  semantic: {\n    success: '#047857',\n    successSoft: '#ECFDF5',\n    warning: '#B45309',\n    warningSoft: '#FFFBEB',\n    danger: '#B91C1C',\n    dangerSoft: '#FEF2F2',\n    info: '#1D4ED8',\n    infoSoft: '#DBEAFE',\n  },\n  dark: {\n    semantic: {\n      success: '#34D399',\n      successSoft: 'rgba(16, 185, 129, 0.12)',\n      warning: '#FACC15',\n      warningSoft: 'rgba(250, 204, 21, 0.12)',\n      danger: '#F87171',\n      dangerSoft: 'rgba(248, 113, 113, 0.12)',\n      info: '#60A5FA',\n      infoSoft: 'rgba(96, 165, 250, 0.12)',\n    },\n  },\n  radius: {\n    sm: '6px',\n    md: '10px',\n    lg: '16px',\n    pill: '999px',\n  },\n} as const;\n"],"names":[],"mappings":";;AACO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,MAAM;AAAA,IACJ,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,MACb,SAAS;AAAA,MACT,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAEV;;"}

package/dist/index2.js

@@ -1,44 +0,0 @@
-const orbitTokens = {
-  brand: {
-    orange: "#FF6B5A",
-    orangeLight: "#FF8575",
-    orangeDark: "#E65548",
-    orangeSoft: "rgba(255, 107, 90, 0.12)"
-  },
-  purple: {
-    base: "#2D1B2E",
-    light: "#4A3044"
-  },
-  semantic: {
-    success: "#047857",
-    successSoft: "#ECFDF5",
-    warning: "#B45309",
-    warningSoft: "#FFFBEB",
-    danger: "#B91C1C",
-    dangerSoft: "#FEF2F2",
-    info: "#1D4ED8",
-    infoSoft: "#DBEAFE"
-  },
-  dark: {
-    semantic: {
-      success: "#34D399",
-      successSoft: "rgba(16, 185, 129, 0.12)",
-      warning: "#FACC15",
-      warningSoft: "rgba(250, 204, 21, 0.12)",
-      danger: "#F87171",
-      dangerSoft: "rgba(248, 113, 113, 0.12)",
-      info: "#60A5FA",
-      infoSoft: "rgba(96, 165, 250, 0.12)"
-    }
-  },
-  radius: {
-    sm: "6px",
-    md: "10px",
-    lg: "16px",
-    pill: "999px"
-  }
-};
-export {
-  orbitTokens
-};
-//# sourceMappingURL=index2.js.map

package/dist/index2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index2.js","sources":["../src/tokens/tokens.ts"],"sourcesContent":["/** Orbit design token values for programmatic use (e.g., ECharts theming). */\nexport const orbitTokens = {\n  brand: {\n    orange: '#FF6B5A',\n    orangeLight: '#FF8575',\n    orangeDark: '#E65548',\n    orangeSoft: 'rgba(255, 107, 90, 0.12)',\n  },\n  purple: {\n    base: '#2D1B2E',\n    light: '#4A3044',\n  },\n  semantic: {\n    success: '#047857',\n    successSoft: '#ECFDF5',\n    warning: '#B45309',\n    warningSoft: '#FFFBEB',\n    danger: '#B91C1C',\n    dangerSoft: '#FEF2F2',\n    info: '#1D4ED8',\n    infoSoft: '#DBEAFE',\n  },\n  dark: {\n    semantic: {\n      success: '#34D399',\n      successSoft: 'rgba(16, 185, 129, 0.12)',\n      warning: '#FACC15',\n      warningSoft: 'rgba(250, 204, 21, 0.12)',\n      danger: '#F87171',\n      dangerSoft: 'rgba(248, 113, 113, 0.12)',\n      info: '#60A5FA',\n      infoSoft: 'rgba(96, 165, 250, 0.12)',\n    },\n  },\n  radius: {\n    sm: '6px',\n    md: '10px',\n    lg: '16px',\n    pill: '999px',\n  },\n} as const;\n"],"names":[],"mappings":"AACO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,MAAM;AAAA,IACJ,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,MACb,SAAS;AAAA,MACT,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAEV;"}