@strata-ds/core 2.1.0

package/README.md

@@ -0,0 +1,438 @@
+# @strata-ds/core
+
+> The runtime component library for [Strata](https://strata.charisol.io) — connect your React app to your design system and ship updates live.
+
+`@strata-ds/core` is a dynamic React component library and stylesheet runtime. It enables teams to consume design tokens and components directly from a centralised Strata design system, ensuring that what designers create is exactly what developers ship — consistently, across platforms, and in real time.
+
+> Design once in Strata. Ship everywhere.
+
+## Why @strata-ds/core?
+
+### The Problem
+
+Design and engineering teams often drift apart:
+
+- Designers update Figma files
+- Developers re-implement styles manually
+- Components slowly diverge from the original design
+- Consistency breaks across products and platforms
+
+This results in duplicate work, inconsistent UI, broken design intent, and slow iteration.
+
+### The Solution
+
+`@strata-ds/core` bridges this gap by acting as:
+
+- A component library
+- A stylesheet generator runtime
+- A live consumer of design tokens and components
+
+All powered by your **Strata** project.
+
+Instead of hardcoding styles, **components dynamically reference design tokens** fetched from the design system. This establishes a single **source of truth** for design.
+
+## Core Principles
+
+### 1. Separation of Concerns
+
+`@strata-ds/core` strictly separates:
+
+- **Variables (Design Tokens)** — Colors, spacing, typography, radii, shadows, etc.
+- **Components** — Buttons, Cards, Forms, Navbars, etc.
+
+Components never own styles directly — they reference tokens.
+
+### 2. Single Source of Truth
+
+Design tokens live in your Strata project, not inside applications.
+
+- Tokens are defined once
+- Components reference them dynamically
+- Updates propagate automatically
+
+### 3. Dynamic & Real-Time Sync
+
+`@strata-ds/core` can:
+
+- Fetch updated tokens and components from the Strata backend
+- Detect changes via checksum
+- Rebuild styles automatically
+- Fall back to cached data when offline
+
+## Architecture Overview
+
+```
+Figma / Style Dictionary
+        ↓
+Strata Design System
+        ↓
+Machine-parseable JSON
+        ↓
+@strata-ds/core Component Library
+        ↓
+Your React Application
+```
+
+## Quick Start
+
+### 1. Create a Strata project
+
+Go to [strata.charisol.io](https://strata.charisol.io), create a project, and import your design tokens (Style Dictionary JSON or Figma).
+
+### 2. Get your sync URL
+
+Once your tokens are imported, your project's sync URL is shown on the project page:
+
+```
+https://api-production-charisol-design-system-be.aws.charisol.io/v1/project/YOUR_PROJECT_ID/data
+```
+
+Copy it — you'll need it in step 4.
+
+### 3. Install
+
+```bash
+npm install @strata-ds/core
+# or
+yarn add @strata-ds/core
+```
+
+### 4. Wrap your app
+
+**CDN Snapshot Sync (recommended — 1 request per poll, edge-cached):**
+
+```tsx
+"use client"; // Next.js App Router only
+import { StrataProvider } from "@strata-ds/core";
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<StrataProvider
+			syncEnabled={true}
+			projectId="YOUR_PROJECT_ID"
+			snapshotCdnBase="https://cdn.strata.charisol.io"
+			syncToken="pt_live_your_token_here"
+			syncInterval={5000}
+		>
+			{children}
+		</StrataProvider>
+	);
+}
+```
+
+> 💡 Get your `projectId` and `syncToken` from the **Publish & Sync** tab on your Strata project dashboard.
+
+### Legacy sync (syncUrl — still supported, not recommended for new projects)
+
+```tsx
+"use client"; // Next.js App Router only
+import { StrataProvider } from "@strata-ds/core";
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<StrataProvider
+			syncEnabled={true}
+			syncUrl="https://api-production-charisol-design-system-be.aws.charisol.io/v1/project/YOUR_PROJECT_ID/data"
+			syncToken="pt_live_your_token_here"
+			syncInterval={3000}
+		>
+			{children}
+		</StrataProvider>
+	);
+}
+```
+
+> 💡 Replace `YOUR_PROJECT_ID` with the ID from your Strata project dashboard. Get your `syncToken` from the **Publish & Sync** tab — it starts with `pt_live_`.
+
+### 5. Use your components
+
+```tsx
+"use client";
+import { useComponents } from "@strata-ds/core";
+
+function App() {
+	// Components you created in your Strata project
+	const { Button, Navbar } = useComponents();
+
+	return (
+		<>
+			{Button && (
+				<Button onClick={() => console.log("clicked")}>Click me</Button>
+			)}
+			{Navbar && <Navbar />}
+		</>
+	);
+}
+```
+
+## Installation
+
+```bash
+npm install @strata-ds/core
+# or
+yarn add @strata-ds/core
+```
+
+## Project Setup (React)
+
+`@strata-ds/core` works with React 18+, Next.js (App Router or Pages Router), and any standard React setup.
+
+### 1. Create a new project
+
+```bash
+npx create-next-app@latest my-strata-app --typescript
+cd my-strata-app
+npm install @strata-ds/core
+```
+
+### 2. Integrate the StrataProvider
+
+Wrap your application's root component with `StrataProvider`. This provider manages the connection to the Strata backend.
+
+| Prop               |                                 Type                                 | Description                                                                                                                                                                                                                                                  |
+| :----------------- | :------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `syncEnabled`      |                              `boolean`                               | If `true`, the library will fetch and sync tokens/components from the server.                                                                                                                                                                                |
+| `snapshotCdnBase`  |                               `string`                               | **Recommended.** Base CDN URL for snapshot files (e.g. `"https://cdn.strata.charisol.io"`). When set together with `projectId`, the provider fetches a single `strata.json` snapshot per poll cycle instead of 3 API calls. Takes precedence over `syncUrl`. |
+| `projectId`        |                               `string`                               | Your Strata project ID (shown in the dashboard URL and project settings). Required when using `snapshotCdnBase`.                                                                                                                                             |
+| `syncUrl`          |                               `string`                               | Legacy base sync URL. `StrataProvider` will append `/variables`, `/components`, and `/custom` to this URL. Ignored when `snapshotCdnBase` + `projectId` are provided.                                                                                        |
+| `syncInterval`     |                               `number`                               | Polling interval in milliseconds to check for design system updates. Default: `3000`.                                                                                                                                                                        |
+| `syncToken`        |                               `string`                               | Sync token from your project dashboard. When set, all sync requests carry `Authorization: Bearer <token>`. Required if your project is not fully public.                                                                                                     |
+| `initialData`      |                          `DesignSystemData`                          | Initial design system data to use before the first sync.                                                                                                                                                                                                     |
+| `userDesignSystem` |                          `DesignSystemData`                          | Override design system data — useful for storybook, testing, or static mode. Takes precedence over `initialData`.                                                                                                                                            |
+| `onSyncError`      | `(error: { code: number; message: string; source: string }) => void` | Callback invoked when a sync cycle fails. `code` is the HTTP status (0 for non-HTTP errors), `message` is a human-readable description, and `source` is `"cdn"` or `"sync"`.                                                                                 |
+| `onSyncSuccess`    |                  `(data: DesignSystemData) => void`                  | Callback invoked whenever a sync cycle succeeds with new data.                                                                                                                                                                                               |
+
+```tsx
+// app/layout.tsx (Next.js App Router)
+"use client";
+import { StrataProvider } from "@strata-ds/core";
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en">
+			<body>
+				<StrataProvider
+					syncEnabled={true}
+					projectId="YOUR_PROJECT_ID"
+					snapshotCdnBase="https://cdn.strata.charisol.io"
+					syncInterval={5000}
+				>
+					{children}
+				</StrataProvider>
+			</body>
+		</html>
+	);
+}
+```
+
+> 💡 Replace `YOUR_PROJECT_ID` with the ID from your Strata project dashboard. For private projects, add `syncToken="pt_live_your_token_here"` (get it from the **Publish & Sync** tab).
+
+### Sync token authentication
+
+If your project has a sync token set in the Strata dashboard, pass it as `syncToken`. Every polling request will automatically include `Authorization: Bearer <token>`.
+
+Projects with `syncToken` set are only readable by clients that present the correct token. This is the recommended way to gate read access to your design system without managing user accounts.
+
+```tsx
+<StrataProvider
+	syncEnabled={true}
+	projectId="YOUR_PROJECT_ID"
+	snapshotCdnBase="https://cdn.strata.charisol.io"
+	syncToken="pt_live_your_token_here"
+	syncInterval={5000}
+>
+	{children}
+</StrataProvider>
+```
+
+## Using Design System Components
+
+`@strata-ds/core` provides dynamic access to your components defined in Strata.
+
+### Accessing Components with `useComponents`
+
+```tsx
+"use client";
+import { useComponents } from "@strata-ds/core";
+
+function AppContent() {
+	// Components are named exactly as you defined them in your Strata project
+	const { Button, Navbar, Card } = useComponents();
+
+	return (
+		<>
+			{/* Render conditionally while components are loading */}
+			{Button && (
+				<Button onClick={() => console.log("clicked")}>Click me</Button>
+			)}
+
+			{Card && <Card style={{ padding: "20px" }}>Card content here</Card>}
+		</>
+	);
+}
+```
+
+### Accessing Design System Context with `useStrata`
+
+```tsx
+"use client";
+import { useStrata } from "@strata-ds/core";
+
+function StatusBar() {
+	const { designSystem, syncStatus, lastSynced } = useStrata();
+
+	return (
+		<div>
+			<p>Sync status: {syncStatus}</p>
+			<p>Last synced: {lastSynced?.toLocaleTimeString() || "Never"}</p>
+			<p>Components: {Object.keys(designSystem.components).join(", ")}</p>
+		</div>
+	);
+}
+```
+
+### Customisation and Overrides
+
+**Token-Driven Styling (Default)**
+
+By default, all components are styled based on the latest tokens fetched from your Strata project. This ensures perfect design-to-code fidelity.
+
+**Local Overrides**
+
+Override any style locally using standard React props:
+
+```tsx
+<Button
+	style={{ backgroundColor: "#007bff", color: "white" }}
+	className="my-custom-class"
+>
+	Custom styled button
+</Button>
+```
+
+### Dynamic Updates (Hot-Reloading)
+
+`@strata-ds/core` intelligently handles design updates:
+
+1. A designer makes a change in Strata (e.g., updates a colour token or modifies a component).
+2. Strata generates a new checksum.
+3. Your `StrataProvider` (via `syncInterval`) polls the `syncUrl`.
+4. If the checksum has changed, the library fetches new design tokens and component configurations, and your app's components are dynamically restyled — without a page refresh.
+
+## Debugging & Inspection
+
+### `StrataDebug`
+
+The `<StrataDebug />` component renders a debug panel showing the active sync mode, connection details, and the component registry. Useful during development to verify that tokens and components have loaded correctly.
+
+```tsx
+import { StrataDebug } from "@strata-ds/core";
+
+// Place anywhere inside StrataProvider
+<StrataDebug />;
+```
+
+The panel automatically displays the relevant fields for the active sync mode:
+
+- **CDN mode** (`snapshotCdnBase` + `projectId` set): shows `✅ CDN Snapshot`, Project ID, resolved Snapshot URL, token presence, and sync interval.
+- **Legacy mode** (`syncUrl` set): shows `⚠️ Legacy (3 requests/poll)`, Sync URL, token presence, and sync interval.
+- **Disabled**: shows `❌ Disabled`.
+
+> 🔒 The `syncToken` value is **never** rendered — the panel only shows `✅ Present` or `❌ None`.
+
+### Programmatic inspection
+
+```tsx
+import { useStrata, useDynamicComponents } from "@strata-ds/core";
+
+function DebugPanel() {
+	const { designSystem, syncStatus, syncUrl, syncEnabled } = useStrata();
+	const dynamicComponents = useDynamicComponents();
+
+	return (
+		<pre>
+			{JSON.stringify(
+				{
+					syncStatus,
+					syncEnabled,
+					syncUrl,
+					designSystemComponents: Object.keys(designSystem.components),
+					registryComponents: Object.keys(dynamicComponents),
+				},
+				null,
+				2,
+			)}
+		</pre>
+	);
+}
+```
+
+### Hooks reference
+
+| Hook / Property          | Description                                                                                                                              |
+| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| `useStrata()`            | Returns full context: `designSystem`, `syncStatus`, `lastSynced`, `syncUrl`, `snapshotCdnBase`, `projectId`, `syncEnabled`, `forceSync`. |
+| `useComponents()`        | Returns ready-to-use React components by PascalCase name.                                                                                |
+| `useDynamicComponents()` | Returns the raw component registry map.                                                                                                  |
+
+## Network Debugging
+
+If components are not loading, check your browser's Network tab:
+
+- **CDN pattern:** When `snapshotCdnBase` and `projectId` are set, the provider makes a single request to `${snapshotCdnBase}/snapshots/${projectId}/strata.json` per poll cycle. Verify the response is a JSON object with `variables`, `components`, and `custom` keys.
+- **Legacy pattern:** When `syncUrl` is set, the provider makes 3 requests per poll cycle: `${syncUrl}/variables`, `${syncUrl}/components`, and `${syncUrl}/custom`. Each should return the corresponding JSON object.
+- **Errors:** Check the console for `❌ Sync failed:` messages.
+
+## Registry API
+
+`strataRegistry` is the underlying singleton registry that stores all registered components.
+
+```tsx
+import { strataRegistry } from "@strata-ds/core";
+
+// Check if a component is registered
+strataRegistry.hasComponent("Button");
+
+// Get a component by name
+const ButtonComponent = strataRegistry.getComponent("Button");
+```
+
+## Component Factory
+
+`StrataComponentFactory` creates React components from Strata component definitions.
+
+```tsx
+import { StrataComponentFactory } from "@strata-ds/core";
+
+const MyComponent = StrataComponentFactory.createComponent(
+	"MyComponent",
+	componentData,
+	designSystem,
+);
+```
+
+## Key Features
+
+- 🔁 Live sync with Strata backend
+- 🧠 Token-driven styling
+- 🧩 Dynamic component registry
+- 🛠 Inline style overrides supported
+- 📦 Installable via npm
+- 📴 Offline-first fallback
+- 🧪 Debug tools included (`StrataDebug`)
+
+## License
+
+MIT © [Charisol](https://strata.charisol.io)

package/dist/components/DynamicComponentDebug.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const StrataDebug: React.FC;
+//# sourceMappingURL=DynamicComponentDebug.d.ts.map

package/dist/components/DynamicComponentDebug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicComponentDebug.d.ts","sourceRoot":"","sources":["../../src/components/DynamicComponentDebug.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA+D/B,CAAC"}

package/dist/components/DynamicComponents.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const DynamicComponent: React.FC<{
+    name: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}>;
+export declare const AutoForm: React.FC<{
+    formName?: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}>;
+//# sourceMappingURL=DynamicComponents.d.ts.map

package/dist/components/DynamicComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicComponents.d.ts","sourceRoot":"","sources":["../../src/components/DynamicComponents.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAUA,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CASA,CAAC"}

package/dist/components/card-ui/Card.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+declare const Card: {
+    ({ children, width, maxWidth, fontFamily, ...props }: any): import("react/jsx-runtime").JSX.Element | null;
+    Container: ({ children, width, maxWidth, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    Header: ({ children, padding, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    HeaderContent: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    HeaderTitle: ({ children, fontSize, fontWeight, color, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    HeaderTimer: ({ children, fontSize, fontFamily, color, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    Body: ({ children, padding, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    BodyDriver: ({ children, backgroundColor, borderRadius, padding, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    BodyImage: ({ src, alt, width, height, borderRadius, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    BodyInfo: ({ children, flexGrow, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    BodyName: ({ children, fontWeight, color, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    BodySpan: ({ children, fontSize, color, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    BodyActions: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    BodyActionButton: ({ children, variant, backgroundColor, color, hoverBackgroundColor, border, padding, borderRadius, onClick, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    BodyActionIcon: ({ children, width, height, color, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    Route: ({ children, paddingX, paddingBottom, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    RouteContainer: ({ children, gap, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    RouteItem: ({ children, icon, iconBackgroundColor, title, subtitle, ...props }: {
+        children?: React.ReactNode;
+        icon?: React.ReactNode;
+        iconBackgroundColor?: string;
+        title?: string;
+        subtitle?: string;
+    } & any) => import("react/jsx-runtime").JSX.Element | null;
+    Payment: ({ children, paddingX, paddingBottom, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    PaymentContainer: ({ children, backgroundColor, borderRadius, padding, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    PaymentContent: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    PaymentIconContainer: ({ children, width, height, backgroundColor, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    PaymentDetails: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    Number: ({ children, color, fontWeight, fontSize, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    Type: ({ children, fontSize, color, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    TotalSection: ({ children, paddingX, paddingY, borderTop, borderColor, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    TotalContent: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    TotalLabel: ({ children, color, fontWeight, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+    TotalAmount: ({ children, fontSize, fontWeight, color, ...props }: any) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default Card;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/card-ui/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card-ui/Card.tsx"],"names":[],"mappings":"AA6nBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAslB/B,QAAA,MAAM,IAAI;0DAAyD,GAAG;yDA/jBN,GAAG;8CAsBd,GAAG;4CAgBL,GAAG;uEAiBwB,GAAG;uEAiBH,GAAG;4CAkB9B,GAAG;iFAqBnD,GAAG;qEAoBsE,GAAG;iDAkBvB,GAAG;0DAeM,GAAG;wDAgBL,GAAG;0CAgBjB,GAAG;8IA2BjD,GAAG;mEA0EH,GAAG;6DAiB8D,GAAG;kDAgBd,GAAG;oFAuBzD;QACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,GAAG,GAAG;+DA0C+D,GAAG;uFAsBtE,GAAG;6CAiB8C,GAAG;mFAcpD,GAAG;6CAgB8C,GAAG;kEAIkB,GAAG;oDAiBjB,GAAG;uFAwB3D,GAAG;2CAkB4C,GAAG;4DAQc,GAAG;uEAgBQ,GAAG;CAiChF,CAAC;AAgCF,eAAe,IAAI,CAAC"}

package/dist/components/card-ui/DefaultCard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const DefaultCard: React.FC;
+//# sourceMappingURL=DefaultCard.d.ts.map

package/dist/components/card-ui/DefaultCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultCard.d.ts","sourceRoot":"","sources":["../../../src/components/card-ui/DefaultCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA8G/B,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export { DefaultCard } from './card-ui/DefaultCard';
+export { default as Card } from './card-ui/Card';
+export { StrataDebug } from './DynamicComponentDebug';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/data/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./mock.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/data/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/data/mock.types.d.ts

@@ -0,0 +1,70 @@
+export type TokenType = "color" | "string" | "dimension" | "font family" | "font weight" | "duration" | "number" | "cubic-bezier" | "spacer" | "shadow" | "transition" | "border" | "display" | "layout";
+export type DesignToken = {
+    name: string;
+    value: string;
+    type: TokenType;
+    unit: string | null;
+    comment: string;
+    category?: string;
+    deprecated?: boolean;
+};
+export type ComponentProperty = {
+    value: string;
+    unit: string | null;
+    type: TokenType;
+    comment: string;
+    resolvedValue?: string;
+    sourceToken?: string;
+};
+export type LinkedElement = {
+    htmlTag: string;
+    attributes: Record<string, string>;
+    requiredAttributes?: string[];
+    optionalAttributes?: string[];
+    attributeDescriptions?: Record<string, string>;
+};
+export type ComponentVariant = {
+    description?: string;
+    properties: Record<string, ComponentProperty>;
+    linkedElement?: Partial<LinkedElement>;
+    textContent?: string;
+    children?: Record<string, ComponentNode> | null;
+    states?: Record<string, Record<string, ComponentProperty>>;
+};
+export interface ComponentNode {
+    displayName?: string;
+    description?: string;
+    properties?: Record<string, ComponentProperty>;
+    children?: Record<string, ComponentNode> | null;
+    linkedElement?: LinkedElement;
+    textContent?: string;
+    variant?: string;
+    variants?: Record<string, ComponentVariant>;
+    states?: Record<string, Record<string, ComponentProperty>>;
+}
+export interface DesignSystemData {
+    metadata?: {
+        name?: string;
+        version?: string;
+        lastUpdated?: string;
+    };
+    variables: Record<string, DesignToken>;
+    components: Record<string, ComponentNode>;
+    custom?: CustomDesignSystemData;
+}
+export type SelectedItem = (DesignToken & {
+    key: string;
+    name: string;
+    displayValue: string;
+}) | ({
+    component: string;
+    property: string;
+    displayValue: string;
+} & ComponentProperty);
+export type SelectedType = "variable" | "component_property" | "component" | null;
+export type FilterType = "all" | "default" | "custom";
+export interface CustomDesignSystemData {
+    variables: Record<string, DesignToken>;
+    components: Record<string, ComponentNode>;
+}
+//# sourceMappingURL=mock.types.d.ts.map

package/dist/data/mock.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mock.types.d.ts","sourceRoot":"","sources":["../../src/data/mock.types.ts"],"names":[],"mappings":"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"}