el-magico-ui 1.0.1

package/README.md

@@ -0,0 +1,209 @@
+# XLP-UI
+
+`XLP-UI` is a multi-brand React component library and theming system built on Chakra UI v3.
+
+It is designed for white-label and microfrontend use cases where each host application can switch brands, inject token overrides, and consume a shared set of themed UI primitives without coupling components to raw design values.
+
+## Features
+
+- Multi-brand token architecture: `BrandTokens -> Semantic Tokens -> Component Recipes`
+- React 19 and strict TypeScript support
+- Chakra UI v3 system-based theme generation
+- Runtime brand registration with `registerBrand()`
+- Provider-based theme isolation for microfrontends
+- Prebuilt themed components for common form and action patterns
+
+## Package
+
+- Package name: `@adil-hammad-xelops/el-magico-ui`
+- Module output: ESM and CJS
+- Types: bundled in `dist/index.d.ts`
+
+## Installation
+
+```bash
+npm install @adil-hammad-xelops/el-magico-ui
+```
+
+Peer dependencies:
+
+- `react >= 19`
+- `react-dom >= 19`
+- `@chakra-ui/react >= 3`
+- `@emotion/react >= 11`
+- `@tanstack/react-query >= 5`
+
+## Quick Start
+
+Wrap your app with `RootProvider` when you want both theming and React Query wiring:
+
+```tsx
+import { createRoot } from "react-dom/client"
+import { RootProvider, XlpButton } from "@adil-hammad-xelops/el-magico-ui"
+
+function App() {
+  return <XlpButton>Click me</XlpButton>
+}
+
+createRoot(document.getElementById("root")!).render(
+  <RootProvider brandId="default">
+    <App />
+  </RootProvider>,
+)
+```
+
+If you only want the theme layer, use `AppThemeProvider` directly:
+
+```tsx
+import { AppThemeProvider } from "@adil-hammad-xelops/el-magico-ui"
+
+export function AppShell() {
+  return <AppThemeProvider brandId="meridian">...</AppThemeProvider>
+}
+```
+
+## Built-in Brands
+
+The library currently exposes these built-in token sets:
+
+- `default`
+- `brandA`
+- `brandB`
+- `meridian`
+
+You can inspect the current registry through `getRegisteredBrands()`.
+
+## Public API
+
+Main exports from `src/index.ts`:
+
+- Providers: `RootProvider`, `AppThemeProvider`
+- Theme utilities: `useTheme`, `registerBrand`, `resolveBrandTokens`, `getRegisteredBrands`, `createTheme`
+- Built-in token sets: `defaultTokens`, `brandATokens`, `brandBTokens`, `meridianTokens`
+- Components: `XlpButton`, `XlpInput`, `XlpTextarea`, `XlpSelect`, `XlpSwitch`, `XlpRadioGroup`
+- Theme/domain types: `BrandTokens`, `ThemeContextValue`, `ColorScale`, and shared app types from `src/types`
+
+## Theme Architecture
+
+This repository enforces a strict separation of concerns:
+
+1. `src/theme/brands/*/tokens.ts`
+   Raw brand values only.
+2. `src/theme/semantic/*`
+   Stable semantic abstractions generated from brand tokens.
+3. `src/theme/components/*`
+   Chakra recipes that consume semantic tokens only.
+
+Rules:
+
+- Do not hardcode colors, spacing, radii, or border widths in components.
+- Do not bypass semantic tokens from component recipes.
+- Brand-specific changes should happen in token files first.
+
+## Custom Brands
+
+Register a custom brand before mounting the provider:
+
+```tsx
+import {
+  registerBrand,
+  RootProvider,
+  type BrandTokens,
+} from "@adil-hammad-xelops/xelops-ui"
+
+const acmeTokens: BrandTokens = {
+  // full token object
+} as const
+
+registerBrand("acme", acmeTokens)
+
+export function Root() {
+  return <RootProvider brandId="acme">...</RootProvider>
+}
+```
+
+You can also supply partial runtime overrides:
+
+```tsx
+import { useMemo } from "react"
+import { RootProvider, type BrandTokens } from "@adil-hammad-xelops/el-magico-ui"
+
+export function Root() {
+  const tokenOverrides = useMemo<Partial<BrandTokens>>(
+    () => ({
+      radii: { md: "1rem" },
+    }),
+    [],
+  )
+
+  return (
+    <RootProvider brandId="default" tokenOverrides={tokenOverrides}>
+      ...
+    </RootProvider>
+  )
+}
+```
+
+## Components
+
+Available base components:
+
+- `XlpButton`
+- `XlpInput`
+- `XlpTextarea`
+- `XlpSelect`
+- `XlpSwitch`
+- `XlpRadioGroup`
+
+These components are theme-aware and intended to be consumed instead of raw Chakra components in feature code.
+
+## Development
+
+Scripts:
+
+- `npm run dev` - start the Vite dev server
+- `npm run build` - build types and library bundles
+- `npm run build:types` - emit declaration files only
+- `npm run preview` - preview the Vite build locally
+
+## Project Structure
+
+```text
+src/
+  components/
+  providers/
+  theme/
+    brands/
+    components/
+    semantic/
+    context.tsx
+    createTheme.ts
+    index.ts
+    provider.tsx
+    registry.ts
+    types.ts
+  types/
+```
+
+## Design Token Translation
+
+This repo also contains internal agent/skill workflows for translating Figma token exports into the `BrandTokens` model.
+
+Relevant repo assets:
+
+- `.github/skills/figma-token-theme-translator/`
+- `.github/agents/figma-token-architect.agent.md`
+
+Those are internal workflow helpers and are not part of the published runtime package.
+
+## Build Output
+
+The package publishes from `dist/`:
+
+- `dist/el-magico-ui.es.js`
+- `dist/el-magico-ui.cjs.js`
+- `dist/index.d.ts`
+
+## License
+
+`ISC`

package/dist/components/XlpAvatar.d.ts

@@ -0,0 +1,20 @@
+import { type AvatarRootProps } from "@chakra-ui/react";
+import type { ThemeContextValue } from "../theme/context";
+export interface XlpAvatarProps extends AvatarRootProps {
+    /** Display name used to build fallback initials. */
+    name?: string;
+    /** Optional avatar image URL. */
+    imageUrl?: string;
+    /** Optional custom fallback text (overrides generated initials). */
+    fallback?: string;
+    /** Called after render with the active theme context. */
+    onTheme?: (theme: ThemeContextValue) => void;
+}
+/**
+ * XlpAvatar — themed Avatar component.
+ *
+ * Matches the Figma card avatar language using XLP semantic tokens,
+ * with optional picture support and initials fallback.
+ */
+export declare const XlpAvatar: import("react").ForwardRefExoticComponent<XlpAvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=XlpAvatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XlpAvatar.d.ts","sourceRoot":"","sources":["../../src/components/XlpAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,WAAW,cAAe,SAAQ,eAAe;IACnD,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;CAC/C;AAeD;;;;;GAKG;AACH,eAAO,MAAM,SAAS,2GAkCrB,CAAA"}

package/dist/components/XlpButton.d.ts

@@ -0,0 +1,59 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type ButtonProps } from "@chakra-ui/react";
+import type { ThemeContextValue } from "../theme/context";
+export interface XlpButtonProps extends Omit<ButtonProps, "variant"> {
+    /** XlpButton variant. Extends Chakra variants with "control" (bordered + subtle bg). */
+    variant?: ButtonProps["variant"] | "control";
+    /**
+     * Called after render with the active theme context.
+     * Use this in the host app to read active theme tokens
+     * without importing the theme package directly.
+     *
+     * @example
+     * <XlpButton onTheme={({ brandId, tokens }) => {
+     *   hostApp.setAccentColor(tokens.colors.primary[500])
+     * }}>
+     *   Save
+     * </XlpButton>
+     */
+    onTheme?: (theme: ThemeContextValue) => void;
+    /** Optional text label for the button. Alternative to children. */
+    label?: string;
+    /** Optional leading icon element (e.g. <AddIcon /> from @chakra-ui/icons). */
+    startIcon?: ReactNode;
+    /** Optional trailing icon element (e.g. <ArrowForwardIcon /> from @chakra-ui/icons). */
+    endIcon?: ReactNode;
+    /** Optional props for the leading icon wrapper span. */
+    startIconProps?: Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+    /** Optional props for the trailing icon wrapper span. */
+    endIconProps?: Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+    /** Icon color override. Defaults to inheriting from button color. */
+    iconColor?: string;
+    /** Icon size (width/height). Defaults to "1.15rem". */
+    iconSize?: string | number;
+    /** Show loading spinner and disable interaction. */
+    isLoading?: boolean;
+    /** Text to display when loading. If not provided, shows spinner only. */
+    loadingText?: string;
+    /** Expand button to full container width. */
+    fullWidth?: boolean;
+    /** Explicit disabled state (alternative to disabled prop). */
+    isDisabled?: boolean;
+    /** Accessibility label for screen readers. */
+    ariaLabel?: string;
+    /** Render icon-only button (square/circular with centered icon). */
+    isIconOnly?: boolean;
+}
+/**
+ * XlpButton — themed Button component.
+ *
+ * Identical API to Chakra's <Button>, with extensions:
+ * 1. Attaches `data-xlp-brand` and `data-xlp-primary` attributes for
+ *    host-app CSS selectors, testing, and debugging.
+ * 2. Exposes the full theme context via the `onTheme` callback prop.
+ * 3. Enhanced icon support with color and size props.
+ * 4. Loading state with optional spinner and loading text.
+ * 5. Label prop as alternative to children.
+ */
+export declare const XlpButton: import("react").ForwardRefExoticComponent<XlpButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=XlpButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XlpButton.d.ts","sourceRoot":"","sources":["../../src/components/XlpButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAClE,wFAAwF;IACxF,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,SAAS,CAAA;IAC5C;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAE5C,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,8EAA8E;IAC9E,SAAS,CAAC,EAAE,SAAS,CAAA;IAErB,wFAAwF;IACxF,OAAO,CAAC,EAAE,SAAS,CAAA;IAEnB,wDAAwD;IACxD,cAAc,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAA;IAElE,yDAAyD;IACzD,YAAY,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAA;IAEhE,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAE1B,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,8GAwPrB,CAAA"}

package/dist/components/XlpCalendar.d.ts

@@ -0,0 +1,35 @@
+import { type BoxProps } from "@chakra-ui/react";
+import type { ThemeContextValue } from "../theme/context";
+export type SelectionMode = "single" | "range" | "multiple";
+export interface XlpCalendarProps extends Omit<BoxProps, "onChange"> {
+    /** Selection mode: single, range, or multiple. Defaults to "single". */
+    mode?: SelectionMode;
+    /** Selected date(s) as ISO strings. */
+    value?: string | string[] | null;
+    /** Callback when selection changes. */
+    onChange?: (value: string | string[] | null) => void;
+    /** Callback with theme context. */
+    onTheme?: (theme: ThemeContextValue) => void;
+    /** Disabled dates (ISO strings). */
+    disabledDates?: string[];
+    /** Initial date to display (defaults to today). ISO string or Date. */
+    initialDate?: string | Date;
+    /** Number of months to display side-by-side. Defaults to 1. */
+    numOfMonths?: number;
+    /** Show week numbers. Defaults to false. */
+    showWeekNumbers?: boolean;
+    /** Hide dates outside current month. Defaults to false. */
+    hideOutsideDays?: boolean;
+    /** Maximum number of selectable dates (for multi mode). */
+    maxSelectedDates?: number;
+}
+/**
+ * XlpCalendar — themed date picker using Chakra's DatePicker.Root.
+ *
+ * Supports three selection modes:
+ * - single: Pick one date
+ * - range: Pick start and end date
+ * - multiple: Pick multiple dates
+ */
+export declare const XlpCalendar: import("react").ForwardRefExoticComponent<XlpCalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=XlpCalendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XlpCalendar.d.ts","sourceRoot":"","sources":["../../src/components/XlpCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGzD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAA;AAE3D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAChE,wEAAwE;IACxE,IAAI,CAAC,EAAE,aAAa,CAAA;IAEpB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAA;IAEhC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAA;IAEpD,mCAAmC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAE5C,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IAExB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAE3B,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,6GAoKvB,CAAA"}

package/dist/components/XlpCard.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from "react";
+import { type BoxProps } from "@chakra-ui/react";
+import type { ThemeContextValue } from "../theme/context";
+export interface CardAction {
+    label: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+    variant?: "solid" | "outline";
+}
+export interface XlpCardProps extends Omit<BoxProps, "children"> {
+    /** Card variant: "default" (featured) or "user" (compact user profile) */
+    variant?: "default" | "user";
+    /** Array of badge labels to display at the top (default variant) */
+    badges?: string[];
+    /** Card title */
+    title: string;
+    /** Card description or body text (default variant) or role (user variant) */
+    description: string;
+    /** Avatar display name (used to generate initials) */
+    avatarName?: string;
+    /** Action buttons in the footer (default variant) */
+    actions?: CardAction[];
+    /** Custom color for badges (solid variant) */
+    badgeColor?: string;
+    /** Metadata text (user variant, e.g., date with icon) */
+    metadata?: string;
+    /** Maximum lines for description text. Set to null to disable truncation. Defaults to 2. */
+    descriptionLineClamp?: number | null;
+    /**
+     * Called after render with the active theme context.
+     */
+    onTheme?: (theme: ThemeContextValue) => void;
+}
+/**
+ * XlpCard — themed composite Card component.
+ *
+ * Two variants:
+ * - "default": Featured card with badges, title, description, and action buttons
+ * - "user": Compact user profile card with avatar, name, role, and metadata
+ *
+ * @example
+ * // Default variant
+ * <XlpCard
+ *   variant="default"
+ *   badges={["Data", "Claude"]}
+ *   title="Python Code Refactoring"
+ *   description="This sofa is perfect for modern tropical spaces..."
+ *   avatarName="DA"
+ *   actions={[
+ *     { label: "Copy", variant: "solid" },
+ *     { label: "Download", variant: "outline" }
+ *   ]}
+ * />
+ *
+ * @example
+ * // User variant
+ * <XlpCard
+ *   variant="user"
+ *   title="Amelia Larson"
+ *   description="AI Engineer"
+ *   avatarName="AL"
+ *   metadata="01/15/2026"
+ * />
+ */
+export declare const XlpCard: import("react").ForwardRefExoticComponent<XlpCardProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=XlpCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XlpCard.d.ts","sourceRoot":"","sources":["../../src/components/XlpCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAA4B,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAG1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAMzD,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAChC;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC5D,0EAA0E;IAC1E,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAE5B,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IAEjB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAA;IAEb,6EAA6E;IAC7E,WAAW,EAAE,MAAM,CAAA;IAEnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,UAAU,EAAE,CAAA;IAEtB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,4FAA4F;IAC5F,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEpC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,OAAO,yGAiPnB,CAAA"}

package/dist/components/XlpCodeSnippet.d.ts

@@ -0,0 +1,28 @@
+import { type BoxProps } from "@chakra-ui/react";
+import type { ThemeContextValue } from "../theme/context";
+export interface XlpCodeSnippetProps extends Omit<BoxProps, "children"> {
+    /** File name to display (e.g., "app.py", "index.js") */
+    fileName?: string;
+    /** Code content to display */
+    code: string;
+    /** Minimum height of code block. Defaults to "{spacing.10}" */
+    codeMinHeight?: string | number;
+    /** Height of code block (overrides minHeight). */
+    codeHeight?: string | number;
+    /** Called after render with the active theme context */
+    onTheme?: (theme: ThemeContextValue) => void;
+}
+/**
+ * XlpCodeSnippet — themed code preview component.
+ *
+ * Displays code in a dark block with copy functionality and token-driven styling.
+ * Header shows file name with code icon and copy button.
+ *
+ * @example
+ * <XlpCodeSnippet
+ *   fileName="app.py"
+ *   code='print("Hello, World!")'
+ * />
+ */
+export declare const XlpCodeSnippet: import("react").ForwardRefExoticComponent<XlpCodeSnippetProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=XlpCodeSnippet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XlpCodeSnippet.d.ts","sourceRoot":"","sources":["../../src/components/XlpCodeSnippet.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACnE,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAA;IAEZ,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAE/B,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAE5B,wDAAwD;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;CAC/C;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,gHAmH1B,CAAA"}

package/dist/components/XlpDrawer.d.ts

@@ -0,0 +1,86 @@
+import { type ReactNode, type HTMLAttributes } from "react";
+import { type DrawerRootProps } from "@chakra-ui/react";
+import type { ThemeContextValue } from "../theme/context";
+export interface XlpDrawerAction {
+    label: string;
+    onClick?: () => void;
+    variant?: "solid" | "outline" | "ghost" | "subtle";
+    closeOnClick?: boolean;
+}
+export interface XlpDrawerProps extends Omit<DrawerRootProps, "children"> {
+    /** Main content of the drawer */
+    children: ReactNode;
+    /** Maximum width of the drawer. Defaults to "xl". Can be any Chakra size or custom CSS value. */
+    maxWidth?: string | number;
+    /** Called after render with the active theme context */
+    onTheme?: (theme: ThemeContextValue) => void;
+}
+export interface XlpDrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Header title text */
+    title: string;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Optional close button element (defaults to icon-only close) */
+    closeTrigger?: ReactNode;
+}
+export interface XlpDrawerFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Action buttons to display in footer */
+    actions?: XlpDrawerAction[];
+}
+export interface XlpDrawerCloseTriggerProps {
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Custom icon or label (defaults to X icon) */
+    children?: ReactNode;
+    /** Button size */
+    size?: "xs" | "sm" | "md" | "lg";
+}
+/**
+ * XlpDrawerCloseTrigger — Close button for drawer.
+ * Icon-only by default, wraps Drawer.CloseTrigger.
+ */
+declare const XlpDrawerCloseTrigger: import("react").ForwardRefExoticComponent<XlpDrawerCloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * XlpDrawerHeader — Drawer header with title and close button.
+ * Use as: <XlpDrawer.Header title="..." onClose={...} />
+ */
+declare const XlpDrawerHeader: import("react").ForwardRefExoticComponent<XlpDrawerHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * XlpDrawerBody — Drawer body/content area with XLP styling.
+ * Use as: <XlpDrawer.Body>{children}</XlpDrawer.Body>
+ */
+declare const XlpDrawerBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * XlpDrawerFooter — Drawer footer with action buttons.
+ * Use as: <XlpDrawer.Footer actions={[...]} />
+ */
+declare const XlpDrawerFooter: import("react").ForwardRefExoticComponent<XlpDrawerFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * XlpDrawer — Themed drawer component from Figma design with compound components.
+ *
+ * Exports separate Header, Body, Footer, and CloseTrigger components for flexible composition.
+ *
+ * @example
+ * ```tsx
+ * <XlpDrawer open={isOpen} onOpenChange={handleOpenChange}>
+ *   <XlpDrawer.Header title="Contribute" onClose={() => setIsOpen(false)} />
+ *   <XlpDrawer.Body>
+ *     Your form or content here
+ *   </XlpDrawer.Body>
+ *   <XlpDrawer.Footer actions={[
+ *     { label: "Cancel", variant: "outline", closeOnClick: true },
+ *     { label: "Submit", variant: "solid", onClick: handleSubmit }
+ *   ]} />
+ * </XlpDrawer>
+ * ```
+ */
+declare const XlpDrawerRoot: import("react").ForwardRefExoticComponent<XlpDrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+interface XlpDrawerCompound {
+    Header: typeof XlpDrawerHeader;
+    Body: typeof XlpDrawerBody;
+    Footer: typeof XlpDrawerFooter;
+    CloseTrigger: typeof XlpDrawerCloseTrigger;
+}
+export { XlpDrawerHeader, XlpDrawerBody, XlpDrawerFooter, XlpDrawerCloseTrigger };
+export declare const XlpDrawer: typeof XlpDrawerRoot & XlpDrawerCompound;
+//# sourceMappingURL=XlpDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XlpDrawer.d.ts","sourceRoot":"","sources":["../../src/components/XlpDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,EAAyD,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAI9G,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;IAClD,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACrE,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAA;IAEnB,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAE1B,wDAAwD;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;CAC/C;AAED,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAA;IAEb,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB,kEAAkE;IAClE,YAAY,CAAC,EAAE,SAAS,CAAA;CAC3B;AAED,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,0CAA0C;IAC1C,OAAO,CAAC,EAAE,eAAe,EAAE,CAAA;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACvC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACnC;AAED;;;GAGG;AACH,QAAA,MAAM,qBAAqB,0HAqB1B,CAAA;AAGD;;;GAGG;AACH,QAAA,MAAM,eAAe,iHA8BpB,CAAA;AAGD;;;GAGG;AACH,QAAA,MAAM,aAAa,2HAYlB,CAAA;AAGD;;;GAGG;AACH,QAAA,MAAM,eAAe,iHAqCpB,CAAA;AAGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,aAAa,2GAoClB,CAAA;AAID,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,eAAe,CAAA;IAC9B,IAAI,EAAE,OAAO,aAAa,CAAA;IAC1B,MAAM,EAAE,OAAO,eAAe,CAAA;IAC9B,YAAY,EAAE,OAAO,qBAAqB,CAAA;CAC7C;AAED,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,qBAAqB,EAAE,CAAA;AAEjF,eAAO,MAAM,SAAS,EAAE,OAAO,aAAa,GAAG,iBAK7C,CAAA"}

package/dist/components/XlpDropzone.d.ts

@@ -0,0 +1,28 @@
+import { type BoxProps } from "@chakra-ui/react";
+import type { ThemeContextValue } from "../theme/context";
+export interface XlpDropzoneProps extends Omit<BoxProps, "onChange"> {
+    /** Optional label rendered above the dropzone. */
+    label?: string;
+    /** Main instructional text shown inside the dropzone. */
+    title?: string;
+    /** Secondary helper text shown under the title. */
+    hint?: string;
+    /** Native file input accept string. */
+    accept?: string;
+    /** Allows selecting multiple files. Enabled by default. */
+    multiple?: boolean;
+    /** Called whenever files are selected or dropped. */
+    onFilesChange?: (files: File[]) => void;
+    /** Shows selected file previews below the dropzone. */
+    showPreview?: boolean;
+    /** Called after render with the active theme context. */
+    onTheme?: (theme: ThemeContextValue) => void;
+}
+/**
+ * XlpDropzone — themed file upload dropzone.
+ *
+ * Figma-mapped dropzone with drag/drop + click to open file picker,
+ * built entirely with XLP semantic tokens.
+ */
+export declare const XlpDropzone: import("react").ForwardRefExoticComponent<XlpDropzoneProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=XlpDropzone.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XlpDropzone.d.ts","sourceRoot":"","sources":["../../src/components/XlpDropzone.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAChE,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAEvC,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB,yDAAyD;IACzD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;CAC/C;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,+GA8PvB,CAAA"}

package/dist/components/XlpGlobalCalendarPreview.d.ts

@@ -0,0 +1,19 @@
+import { type BoxProps } from "@chakra-ui/react";
+import type { ThemeContextValue } from "../theme/context";
+import { type XlpGlobalCalendarHoliday, type XlpGlobalCalendarEmployee, type XlpGlobalCalendarLegendItem } from "../utils/globalCalendarPreview";
+export type { XlpGlobalCalendarDay, XlpGlobalCalendarEmployee, XlpGlobalCalendarEntry, XlpGlobalCalendarHoliday, XlpGlobalCalendarLegendItem, XlpGlobalHolidayCalendar, XlpGlobalLeaveType, } from "../utils/globalCalendarPreview";
+export interface XlpGlobalCalendarPreviewProps extends BoxProps {
+    employees: ReadonlyArray<XlpGlobalCalendarEmployee>;
+    holidays?: ReadonlyArray<XlpGlobalCalendarHoliday>;
+    locale?: string;
+    selectedDate?: string;
+    onSelectedDateChange?: (isoDate: string) => void;
+    legendItems?: ReadonlyArray<XlpGlobalCalendarLegendItem>;
+    employeeHeaderLabel?: string;
+    employeeColumnWidth?: BoxProps["w"];
+    dayCellWidth?: BoxProps["w"];
+    showMonthNavigation?: boolean;
+    onTheme?: (theme: ThemeContextValue) => void;
+}
+export declare const XlpGlobalCalendarPreview: import("react").ForwardRefExoticComponent<XlpGlobalCalendarPreviewProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=XlpGlobalCalendarPreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XlpGlobalCalendarPreview.d.ts","sourceRoot":"","sources":["../../src/components/XlpGlobalCalendarPreview.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2C,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAIzF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAKH,KAAK,wBAAwB,EAG7B,KAAK,yBAAyB,EAC9B,KAAK,2BAA2B,EAEnC,MAAM,gCAAgC,CAAA;AAEvC,YAAY,EACR,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,EACtB,wBAAwB,EACxB,2BAA2B,EAC3B,wBAAwB,EACxB,kBAAkB,GACrB,MAAM,gCAAgC,CAAA;AAEvC,MAAM,WAAW,6BAA8B,SAAQ,QAAQ;IAC3D,SAAS,EAAE,aAAa,CAAC,yBAAyB,CAAC,CAAA;IACnD,QAAQ,CAAC,EAAE,aAAa,CAAC,wBAAwB,CAAC,CAAA;IAClD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,WAAW,CAAC,EAAE,aAAa,CAAC,2BAA2B,CAAC,CAAA;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAA;IACnC,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAA;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;CAC/C;AAQD,eAAO,MAAM,wBAAwB,0HA8UpC,CAAA"}

package/dist/components/XlpHeading.d.ts

@@ -0,0 +1,24 @@
+import { type HeadingProps } from "@chakra-ui/react";
+import type { ThemeContextValue } from "../theme/context";
+export type XlpHeadingVariant = "default" | "muted" | "subtle" | "inverted" | "primary" | "secondary" | "accent" | "success" | "warning" | "error" | "info";
+export interface XlpHeadingProps extends HeadingProps {
+    /** Semantic variant that maps to theme token colors. */
+    variant?: XlpHeadingVariant;
+    /** Convenience alias for fontWeight. */
+    weight?: HeadingProps["fontWeight"];
+    /**
+     * Called after render with the active theme context.
+     *
+     * @example
+     * <XlpHeading onTheme={({ brandId }) => console.log(brandId)}>Title</XlpHeading>
+     */
+    onTheme?: (theme: ThemeContextValue) => void;
+}
+/**
+ * XlpHeading — themed Heading component.
+ *
+ * Wraps Chakra Heading with XLP token defaults while preserving
+ * Chakra's native Heading API.
+ */
+export declare const XlpHeading: import("react").ForwardRefExoticComponent<XlpHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
+//# sourceMappingURL=XlpHeading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XlpHeading.d.ts","sourceRoot":"","sources":["../../src/components/XlpHeading.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,MAAM,MAAM,iBAAiB,GACvB,SAAS,GACT,OAAO,GACP,QAAQ,GACR,UAAU,GACV,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAA;AAEZ,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACjD,wDAAwD;IACxD,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAE3B,wCAAwC;IACxC,MAAM,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAA;IAEnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;CAC/C;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,gHA4CtB,CAAA"}