@hyperpackai/hyperui 0.1.0

package/dist/tokens/semantic.js

@@ -0,0 +1,242 @@
+/**
+ * Semantic Design Tokens
+ *
+ * PURPOSE-BASED tokens that reference primitives.
+ * These are what you use in components and application code.
+ *
+ * Structure:
+ *   Layer 1 — Primitives  (raw values, e.g. colors.indigo[500])
+ *   Layer 2 — Semantic    (purpose, e.g. brand.primary)        ← THIS FILE
+ *   Layer 3 — Component   (per-component, e.g. button.heightMd)
+ */
+import { colors, spacing, fontSize, fontWeight, borderRadius, shadow, duration, easing, zIndex } from "./primitives.js";
+// Light theme semantic colours
+export const lightColors = {
+    bg: {
+        default: colors.white,
+        surface: colors.gray[50],
+        elevated: colors.white,
+        sunken: colors.gray[100],
+        overlay: "rgb(0 0 0 / 50%)",
+        inverse: colors.gray[900]
+    },
+    border: {
+        default: colors.gray[200],
+        muted: colors.gray[100],
+        strong: colors.gray[300],
+        focus: colors.indigo[500],
+        error: colors.rose[500]
+    },
+    text: {
+        default: colors.gray[900],
+        muted: colors.gray[500],
+        subtle: colors.gray[400],
+        disabled: colors.gray[400],
+        inverse: colors.white,
+        link: colors.indigo[600],
+        linkHover: colors.indigo[700]
+    },
+    brand: {
+        primary: colors.indigo[500],
+        primaryDark: colors.indigo[600],
+        primaryLight: colors.indigo[400],
+        primaryBg: colors.indigo[50],
+        primaryText: colors.white
+    },
+    success: { default: colors.emerald[500], bg: colors.emerald[50], text: colors.emerald[700], border: colors.emerald[200] },
+    warning: { default: colors.amber[500], bg: colors.amber[50], text: colors.amber[700], border: colors.amber[200] },
+    error: { default: colors.rose[500], bg: colors.rose[50], text: colors.rose[700], border: colors.rose[200] },
+    info: { default: colors.sky[500], bg: colors.sky[50], text: colors.sky[700], border: colors.sky[200] },
+    interactive: {
+        default: colors.gray[100],
+        hover: colors.gray[200],
+        active: colors.gray[300],
+        focus: `${colors.indigo[500]}33`,
+        disabled: colors.gray[100],
+        selected: colors.indigo[50]
+    }
+};
+// Dark theme semantic colours
+export const darkColors = {
+    bg: {
+        default: "#0a0a0f",
+        surface: "#111118",
+        elevated: "#1a1a24",
+        sunken: "#07070c",
+        overlay: "rgb(0 0 0 / 72%)",
+        inverse: colors.gray[50]
+    },
+    border: {
+        default: "#2a2a3a",
+        muted: "#1e1e2a",
+        strong: "#3a3a50",
+        focus: colors.indigo[400],
+        error: colors.rose[500]
+    },
+    text: {
+        default: "#f0f0ff",
+        muted: "#a0a0c0",
+        subtle: "#606080",
+        disabled: "#404060",
+        inverse: "#0a0a0f",
+        link: colors.indigo[400],
+        linkHover: colors.indigo[300]
+    },
+    brand: {
+        primary: colors.indigo[400],
+        primaryDark: colors.indigo[500],
+        primaryLight: colors.indigo[300],
+        primaryBg: `${colors.indigo[950]}80`,
+        primaryText: colors.white
+    },
+    success: { default: colors.emerald[400], bg: "#052e16", text: colors.emerald[300], border: "#065f4640" },
+    warning: { default: colors.amber[400], bg: "#1c1500", text: colors.amber[300], border: "#92400e40" },
+    error: { default: colors.rose[400], bg: "#1f0505", text: colors.rose[300], border: "#9f123940" },
+    info: { default: colors.sky[400], bg: "#030d1a", text: colors.sky[300], border: "#075985 40" },
+    interactive: {
+        default: "#1a1a24",
+        hover: "#22222f",
+        active: "#2a2a3a",
+        focus: `${colors.indigo[400]}33`,
+        disabled: "#111118",
+        selected: `${colors.indigo[950]}60`
+    }
+};
+// ---------------------------------------------------------------------------
+// Semantic spacing tokens (named aliases over the raw scale)
+// ---------------------------------------------------------------------------
+export const semanticSpacing = {
+    componentXs: spacing[1], // 4px  — tight inline gaps
+    componentSm: spacing[2], // 8px  — icon + label gaps
+    componentMd: spacing[3], // 12px — input padding horizontal
+    componentLg: spacing[4], // 16px — card padding
+    componentXl: spacing[6], // 24px — section gaps
+    pageGutter: spacing[6], // 24px — page horizontal padding
+    sectionGap: spacing[12], // 48px — between major sections
+    // Component heights
+    heightXs: "24px",
+    heightSm: "32px",
+    heightMd: "38px",
+    heightLg: "44px",
+    heightXl: "52px"
+};
+// ---------------------------------------------------------------------------
+// Semantic typography tokens
+// ---------------------------------------------------------------------------
+export const semanticTypography = {
+    // Body
+    bodyXs: { fontSize: fontSize.xs[0], fontWeight: fontWeight.normal, lineHeight: "16px" },
+    bodySm: { fontSize: fontSize.sm[0], fontWeight: fontWeight.normal, lineHeight: "18px" },
+    body: { fontSize: fontSize.base[0], fontWeight: fontWeight.normal, lineHeight: "20px" },
+    bodyMd: { fontSize: fontSize.md[0], fontWeight: fontWeight.normal, lineHeight: "22px" },
+    bodyLg: { fontSize: fontSize.lg[0], fontWeight: fontWeight.normal, lineHeight: "26px" },
+    // Labels
+    labelXs: { fontSize: fontSize.xs[0], fontWeight: fontWeight.medium, lineHeight: "16px" },
+    labelSm: { fontSize: fontSize.sm[0], fontWeight: fontWeight.medium, lineHeight: "18px" },
+    label: { fontSize: fontSize.base[0], fontWeight: fontWeight.medium, lineHeight: "20px" },
+    labelLg: { fontSize: fontSize.md[0], fontWeight: fontWeight.semibold, lineHeight: "22px" },
+    // Headings
+    h6: { fontSize: fontSize.base[0], fontWeight: fontWeight.semibold, lineHeight: "20px" },
+    h5: { fontSize: fontSize.md[0], fontWeight: fontWeight.semibold, lineHeight: "22px" },
+    h4: { fontSize: fontSize.lg[0], fontWeight: fontWeight.semibold, lineHeight: "26px" },
+    h3: { fontSize: fontSize["2xl"][0], fontWeight: fontWeight.semibold, lineHeight: "32px" },
+    h2: { fontSize: fontSize["3xl"][0], fontWeight: fontWeight.bold, lineHeight: "38px" },
+    h1: { fontSize: fontSize["4xl"][0], fontWeight: fontWeight.bold, lineHeight: "44px" },
+    // Display
+    displaySm: { fontSize: fontSize["4xl"][0], fontWeight: fontWeight.extrabold, lineHeight: "44px" },
+    displayMd: { fontSize: fontSize["5xl"][0], fontWeight: fontWeight.extrabold, lineHeight: "56px" },
+    displayLg: { fontSize: fontSize["6xl"][0], fontWeight: fontWeight.black, lineHeight: "68px" },
+    // Code
+    code: { fontFamily: "var(--hu-font-mono)", fontSize: fontSize.sm[0], lineHeight: "20px" }
+};
+// ---------------------------------------------------------------------------
+// Semantic shadow tokens
+// ---------------------------------------------------------------------------
+export const semanticShadow = {
+    none: shadow.none,
+    xs: shadow.xs,
+    sm: shadow.sm,
+    default: shadow.DEFAULT,
+    md: shadow.md,
+    lg: shadow.lg,
+    xl: shadow.xl,
+    "2xl": shadow["2xl"],
+    inner: shadow.inner,
+    // Component-specific
+    card: shadow.sm,
+    cardHover: shadow.md,
+    dropdown: shadow.lg,
+    modal: shadow.xl,
+    tooltip: shadow.md,
+    focus: shadow.focus
+};
+// ---------------------------------------------------------------------------
+// Semantic motion tokens
+// ---------------------------------------------------------------------------
+export const semanticMotion = {
+    // Duration aliases
+    instant: duration.instant,
+    microTask: duration.faster, // icon swap, checkmark
+    feedback: duration.fast, // hover, active state
+    transition: duration.normal, // most transitions
+    page: duration.slow, // page transitions
+    complex: duration.slower, // complex animations
+    // Easing aliases
+    standard: easing.inOut, // most element transitions
+    enter: easing.out, // elements entering the screen
+    exit: easing.in, // elements leaving the screen
+    emphasis: easing.spring, // bouncy, playful
+    decelerate: easing.out, // elements decelerating to rest
+    accelerate: easing.in // elements leaving at speed
+};
+// ---------------------------------------------------------------------------
+// Semantic radius tokens
+// ---------------------------------------------------------------------------
+export const semanticRadius = {
+    none: borderRadius.none,
+    xs: borderRadius.xs,
+    sm: borderRadius.sm,
+    DEFAULT: borderRadius.DEFAULT,
+    md: borderRadius.md,
+    lg: borderRadius.lg,
+    xl: borderRadius.xl,
+    "2xl": borderRadius["2xl"],
+    full: borderRadius.full,
+    // Component-specific
+    button: borderRadius.DEFAULT,
+    input: borderRadius.DEFAULT,
+    card: borderRadius.lg,
+    dialog: borderRadius.xl,
+    badge: borderRadius.full,
+    tag: borderRadius.sm,
+    chip: borderRadius.full
+};
+// ---------------------------------------------------------------------------
+// Semantic z-index tokens
+// ---------------------------------------------------------------------------
+export const semanticZIndex = {
+    hide: zIndex.hide,
+    base: zIndex.base,
+    raised: zIndex.raised,
+    dropdown: zIndex.dropdown,
+    sticky: zIndex.sticky,
+    fixed: zIndex.fixed,
+    backdrop: zIndex.backdrop,
+    modal: zIndex.modal,
+    popover: zIndex.popover,
+    tooltip: zIndex.tooltip,
+    toast: zIndex.toast
+};
+export const lightSemanticTokens = {
+    colors: lightColors,
+    spacing: semanticSpacing,
+    typography: semanticTypography,
+    shadow: semanticShadow,
+    motion: semanticMotion,
+    radius: semanticRadius,
+    zIndex: semanticZIndex
+};
+export const darkSemanticTokens = {
+    ...lightSemanticTokens,
+    colors: darkColors
+};

package/dist/tokens/themes.d.ts

@@ -0,0 +1,18 @@
+export interface ThemeOverrides {
+    primaryColor?: string;
+    primaryDark?: string;
+    primaryLight?: string;
+    primaryBg?: string;
+    radius?: string;
+    fontFamily?: string;
+    densityScale?: number;
+    cssVars?: Record<string, string>;
+}
+export interface BuiltinTheme {
+    name: string;
+    description: string;
+    overrides: ThemeOverrides;
+}
+export declare const themes: Record<string, BuiltinTheme>;
+export declare function getDarkVariant(themeName: string): ThemeOverrides;
+//# sourceMappingURL=themes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/tokens/themes.ts"],"names":[],"mappings":"AAuBA,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAI,MAAM,CAAC;IACxB,WAAW,CAAC,EAAK,MAAM,CAAC;IACxB,YAAY,CAAC,EAAI,MAAM,CAAC;IACxB,SAAS,CAAC,EAAO,MAAM,CAAC;IACxB,MAAM,CAAC,EAAU,MAAM,CAAC;IACxB,UAAU,CAAC,EAAM,MAAM,CAAC;IACxB,YAAY,CAAC,EAAI,MAAM,CAAC;IAExB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAS,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAI,cAAc,CAAC;CAC7B;AAMD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CA4R/C,CAAC;AAMF,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,cAAc,CAiBhE"}

package/dist/tokens/themes.js

@@ -0,0 +1,316 @@
+/**
+ * Preset Themes
+ *
+ * Ready-to-use theme configurations. Pass to `applyTheme()` or `createTheme()`.
+ *
+ * Built-in presets:
+ *   default       — Indigo/violet, balanced density
+ *   compact       — Reduced padding, smaller text, higher density (data apps)
+ *   comfortable   — More breathing room, larger touch targets (consumer apps)
+ *   highContrast  — WCAG AAA colour ratios for accessibility
+ *   ocean         — Cyan/teal palette
+ *   forest        — Emerald/green palette
+ *   sunset        — Orange/rose palette
+ *   monochrome    — Pure gray scale, no hue
+ *   banking       — High-trust blue, dense controls, financial data surfaces
+ *   government    — Accessible navy, restrained surfaces, high contrast
+ *   healthcare    — Clinical teal, calm status colors, readable controls
+ *   retail        — Commerce blue, promotional accents, comfortable density
+ *   education     — Learning-focused violet, softer surfaces
+ *   telecom       — Network cyan, operational dashboard density
+ */
+import { colors, borderRadius } from "./primitives.js";
+// ---------------------------------------------------------------------------
+// Preset themes
+// ---------------------------------------------------------------------------
+export const themes = {
+    // ── Default — Indigo primary ─────────────────────────────────────────────
+    default: {
+        name: "Default",
+        description: "Clean indigo primary with balanced density.",
+        overrides: {
+            primaryColor: colors.indigo[500],
+            primaryDark: colors.indigo[600],
+            primaryLight: colors.indigo[400],
+            primaryBg: colors.indigo[50],
+            radius: borderRadius.DEFAULT
+        }
+    },
+    // ── Compact — reduced spacing, higher information density ────────────────
+    compact: {
+        name: "Compact",
+        description: "Tighter spacing for data-dense applications (dashboards, tables).",
+        overrides: {
+            primaryColor: colors.indigo[500],
+            densityScale: 0.75,
+            radius: borderRadius.sm,
+            cssVars: {
+                "--hu-space-3": "8px",
+                "--hu-space-4": "12px",
+                "--hu-space-5": "16px",
+                "--hu-space-6": "20px",
+                "--hu-font-size-sm": "12px",
+                "--hu-font-size-base": "13px",
+                "--hu-radius": "5px",
+                "--hu-radius-md": "7px",
+                "--hu-radius-lg": "9px"
+            }
+        }
+    },
+    // ── Comfortable — larger targets, more white space ───────────────────────
+    comfortable: {
+        name: "Comfortable",
+        description: "Generous spacing for consumer-facing and mobile applications.",
+        overrides: {
+            primaryColor: colors.indigo[500],
+            densityScale: 1.25,
+            radius: borderRadius.lg,
+            cssVars: {
+                "--hu-space-3": "14px",
+                "--hu-space-4": "20px",
+                "--hu-space-5": "24px",
+                "--hu-space-6": "28px",
+                "--hu-font-size-base": "15px",
+                "--hu-font-size-md": "16px",
+                "--hu-radius": "10px",
+                "--hu-radius-md": "12px",
+                "--hu-radius-lg": "16px"
+            }
+        }
+    },
+    // ── High contrast — WCAG AAA ──────────────────────────────────────────────
+    highContrast: {
+        name: "High Contrast",
+        description: "Maximum contrast ratios for accessibility (WCAG AAA).",
+        overrides: {
+            primaryColor: colors.indigo[700],
+            primaryDark: colors.indigo[800],
+            primaryLight: colors.indigo[600],
+            primaryBg: colors.indigo[100],
+            cssVars: {
+                "--hu-text": colors.gray[950],
+                "--hu-text-2": colors.gray[700],
+                "--hu-text-3": colors.gray[600],
+                "--hu-border": colors.gray[400],
+                "--hu-border-2": colors.gray[600],
+                "--hu-bg": "#ffffff",
+                "--hu-bg-2": "#f0f0f0",
+                "--hu-bg-3": "#e0e0e0"
+            }
+        }
+    },
+    // ── Ocean — Cyan / Sky ────────────────────────────────────────────────────
+    ocean: {
+        name: "Ocean",
+        description: "Calm cyan and sky-blue palette.",
+        overrides: {
+            primaryColor: colors.sky[500],
+            primaryDark: colors.sky[600],
+            primaryLight: colors.sky[400],
+            primaryBg: colors.sky[50],
+            cssVars: {
+                "--hu-primary-bg": colors.sky[50]
+            }
+        }
+    },
+    // ── Forest — Emerald / Green ──────────────────────────────────────────────
+    forest: {
+        name: "Forest",
+        description: "Natural emerald and green palette.",
+        overrides: {
+            primaryColor: colors.emerald[600],
+            primaryDark: colors.emerald[700],
+            primaryLight: colors.emerald[500],
+            primaryBg: colors.emerald[50]
+        }
+    },
+    // ── Sunset — Amber / Rose ─────────────────────────────────────────────────
+    sunset: {
+        name: "Sunset",
+        description: "Warm amber and rose palette for creative applications.",
+        overrides: {
+            primaryColor: "#f97316", // orange-500
+            primaryDark: "#ea580c", // orange-600
+            primaryLight: "#fb923c", // orange-400
+            primaryBg: "#fff7ed", // orange-50
+            cssVars: {
+                "--hu-primary": "#f97316",
+                "--hu-primary-dk": "#ea580c",
+                "--hu-primary-lt": "#fb923c",
+                "--hu-primary-bg": "#fff7ed"
+            }
+        }
+    },
+    // ── Violet — Bold purple ───────────────────────────────────────────────────
+    violet: {
+        name: "Violet",
+        description: "Bold violet palette for creative and entertainment apps.",
+        overrides: {
+            primaryColor: colors.violet[500],
+            primaryDark: colors.violet[600],
+            primaryLight: colors.violet[400],
+            primaryBg: colors.violet[50]
+        }
+    },
+    // ── Monochrome — Pure gray ──────────────────────────────────────────────
+    monochrome: {
+        name: "Monochrome",
+        description: "Neutral gray-only palette for minimal, professional UIs.",
+        overrides: {
+            primaryColor: colors.gray[900],
+            primaryDark: colors.gray[950],
+            primaryLight: colors.gray[700],
+            primaryBg: colors.gray[100],
+            cssVars: {
+                "--hu-primary": colors.gray[900],
+                "--hu-primary-dk": colors.gray[950],
+                "--hu-primary-lt": colors.gray[700],
+                "--hu-primary-bg": colors.gray[100],
+                "--hu-primary-text": colors.white
+            }
+        }
+    },
+    // ── Rose — Feminine / Beauty ──────────────────────────────────────────────
+    rose: {
+        name: "Rose",
+        description: "Elegant rose palette for beauty, health, and lifestyle apps.",
+        overrides: {
+            primaryColor: colors.rose[500],
+            primaryDark: colors.rose[600],
+            primaryLight: colors.rose[400],
+            primaryBg: colors.rose[50]
+        }
+    },
+    // ── Banking — trust, density, low visual noise ──────────────────────────
+    banking: {
+        name: "Banking",
+        description: "High-trust blue theme for banking, fintech, and risk platforms.",
+        overrides: {
+            primaryColor: "#1457d9",
+            primaryDark: "#0f3f9f",
+            primaryLight: "#3b82f6",
+            primaryBg: "#eff6ff",
+            radius: borderRadius.md,
+            densityScale: 0.9,
+            cssVars: {
+                "--hu-info": "#2563eb",
+                "--hu-success": "#047857",
+                "--hu-warning": "#b45309",
+                "--hu-error": "#b91c1c",
+                "--hu-focus-ring": "#1457d9"
+            }
+        }
+    },
+    // ── Government — accessible, formal, high contrast ──────────────────────
+    government: {
+        name: "Government",
+        description: "Accessible navy theme for public-sector and civic services.",
+        overrides: {
+            primaryColor: "#1d4ed8",
+            primaryDark: "#1e3a8a",
+            primaryLight: "#60a5fa",
+            primaryBg: "#dbeafe",
+            radius: borderRadius.sm,
+            cssVars: {
+                "--hu-text": colors.gray[950],
+                "--hu-text-2": colors.gray[700],
+                "--hu-border": colors.gray[400],
+                "--hu-border-2": colors.gray[600],
+                "--hu-focus-ring": "#1d4ed8"
+            }
+        }
+    },
+    // ── Healthcare — calm, clinical, status-heavy ───────────────────────────
+    healthcare: {
+        name: "Healthcare",
+        description: "Clinical teal theme for patient, care, and operations systems.",
+        overrides: {
+            primaryColor: "#0f766e",
+            primaryDark: "#115e59",
+            primaryLight: "#14b8a6",
+            primaryBg: "#ccfbf1",
+            radius: borderRadius.lg,
+            cssVars: {
+                "--hu-success": "#16a34a",
+                "--hu-info": "#0284c7",
+                "--hu-warning": "#d97706",
+                "--hu-error": "#dc2626",
+                "--hu-focus-ring": "#0f766e"
+            }
+        }
+    },
+    // ── Retail — commerce, conversion, merchandising ────────────────────────
+    retail: {
+        name: "Retail",
+        description: "Commerce-focused theme for storefront, CRM, and merchandising tools.",
+        overrides: {
+            primaryColor: "#2563eb",
+            primaryDark: "#1d4ed8",
+            primaryLight: "#60a5fa",
+            primaryBg: "#eff6ff",
+            radius: borderRadius.lg,
+            densityScale: 1.05,
+            cssVars: {
+                "--hu-accent": "#f97316",
+                "--hu-accent-bg": "#fff7ed",
+                "--hu-focus-ring": "#2563eb"
+            }
+        }
+    },
+    // ── Education — approachable, readable, focused ─────────────────────────
+    education: {
+        name: "Education",
+        description: "Approachable violet theme for learning platforms and admin portals.",
+        overrides: {
+            primaryColor: colors.violet[600],
+            primaryDark: colors.violet[700],
+            primaryLight: colors.violet[400],
+            primaryBg: colors.violet[50],
+            radius: borderRadius.xl,
+            cssVars: {
+                "--hu-info": colors.sky[600],
+                "--hu-success": colors.emerald[600],
+                "--hu-focus-ring": colors.violet[600]
+            }
+        }
+    },
+    // ── Telecom — operational, network, dashboard-heavy ─────────────────────
+    telecom: {
+        name: "Telecom",
+        description: "Network operations theme for telecom, infrastructure, and IoT dashboards.",
+        overrides: {
+            primaryColor: colors.sky[600],
+            primaryDark: colors.sky[700],
+            primaryLight: colors.sky[400],
+            primaryBg: colors.sky[50],
+            radius: borderRadius.md,
+            densityScale: 0.85,
+            cssVars: {
+                "--hu-accent": colors.emerald[500],
+                "--hu-accent-bg": colors.emerald[50],
+                "--hu-focus-ring": colors.sky[600]
+            }
+        }
+    }
+};
+// ---------------------------------------------------------------------------
+// Dark variants of all themes
+// ---------------------------------------------------------------------------
+export function getDarkVariant(themeName) {
+    const base = themes[themeName]?.overrides ?? themes.default.overrides;
+    return {
+        ...base,
+        cssVars: {
+            ...base.cssVars,
+            "--hu-bg": "#0a0a0f",
+            "--hu-bg-2": "#111118",
+            "--hu-bg-3": "#1a1a24",
+            "--hu-bg-4": "#22222f",
+            "--hu-border": "#2a2a3a",
+            "--hu-border-2": "#3a3a50",
+            "--hu-text": "#f0f0ff",
+            "--hu-text-2": "#a0a0c0",
+            "--hu-text-3": "#606080"
+        }
+    };
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@hyperpackai/hyperui",
+  "version": "0.1.0",
+  "description": "HyperUI \u2014 rich, accessible, enterprise-grade component library for Hyperion with full design token system.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    },
+    "./charts": {
+      "types": "./dist/components/charts.d.ts",
+      "import": "./dist/components/charts.js"
+    },
+    "./enterprise": {
+      "types": "./dist/components/enterprise.d.ts",
+      "import": "./dist/components/enterprise.js"
+    },
+    "./ai": {
+      "types": "./dist/components/ai.d.ts",
+      "import": "./dist/components/ai.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "keywords": [
+    "hyperui",
+    "component-library",
+    "design-tokens",
+    "ui-library",
+    "hyperion",
+    "accessible",
+    "dark-mode",
+    "enterprise"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "tsc -b --watch"
+  },
+  "peerDependencies": {
+    "@hyperpackai/hyperion": "^0.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tharikajis-dev/HyperPack"
+  }
+}