@laje/design-system 1.0.0

package/README.md

@@ -0,0 +1,218 @@
+# @laje/design-system
+
+Design System oficial da **LAJE** — tokens, componentes React e CSS custom properties.  
+Extraído diretamente do Figma: [Design System LAJE](https://www.figma.com/design/2hgeRrANocH98PpwwXldg7)
+
+---
+
+## Instalação
+
+```bash
+npm install @laje/design-system
+# ou
+yarn add @laje/design-system
+```
+
+---
+
+## Setup
+
+Importe o CSS global **uma única vez** no root do projeto (ex: `main.tsx` ou `_app.tsx`):
+
+```tsx
+import '@laje/design-system/styles';
+```
+
+---
+
+## Tokens
+
+```tsx
+import { colors, spacing, radius, typography } from '@laje/design-system/tokens';
+
+// Cores
+colors.brand.primary       // #6600FF
+colors.brand.secondary     // #0ACCE8
+colors.brand.accentPink    // #F060A8
+colors.brand.accentOrange  // #E02A0A
+colors.purple[500]         // #6600FF
+colors.cyan[500]           // #0ACCE8
+colors.semantic.success    // #21C45E
+
+// Spacing
+spacing[16]  // "16px"
+spacing[32]  // "32px"
+
+// Border radius
+radius.md    // "8px"
+radius.full  // "999px"
+```
+
+---
+
+## Componentes
+
+### Button
+
+```tsx
+import { Button } from '@laje/design-system';
+
+// Variantes: primary | secondary | dark | outline-orange | ghost
+// Tamanhos: sm | md | lg
+
+<Button variant="primary">Começar agora →</Button>
+<Button variant="secondary">Saber mais →</Button>
+<Button variant="dark">Saiba mais e assine</Button>
+<Button variant="outline-orange">Saber mais →</Button>
+<Button variant="ghost">Falar com especialista</Button>
+<Button variant="primary" loading>Carregando...</Button>
+<Button variant="primary" disabled>Indisponível</Button>
+```
+
+### Badge
+
+```tsx
+import { Badge } from '@laje/design-system';
+
+// Variantes: trilha | popular | growth | design | novo | custom
+<Badge variant="trilha">Trilha</Badge>
+<Badge variant="popular">MAIS POPULAR</Badge>
+<Badge variant="growth">Growth</Badge>
+<Badge variant="design">Design</Badge>
+<Badge variant="novo">Novo</Badge>
+```
+
+### Input
+
+```tsx
+import { Input, Select } from '@laje/design-system';
+
+<Input label="Nome completo" placeholder="Digite seu nome..." />
+<Input label="E-mail" type="email" placeholder="nome@laje.com" />
+<Input label="Senha" type="password" error="Mínimo 8 caracteres" />
+<Input variant="search" placeholder="Buscar cursos, trilhas ou certificados..." />
+
+<Select
+  label="Selecione uma trilha"
+  options={[
+    { value: 'branding', label: 'Branding' },
+    { value: 'growth', label: 'Growth' },
+    { value: 'design', label: 'Design' },
+    { value: 'experiencia', label: 'Experiência' },
+    { value: 'comunicacao', label: 'Comunicação' },
+  ]}
+/>
+```
+
+### Cards
+
+```tsx
+import { CardFeature, CardTrail, CardPricing } from '@laje/design-system';
+
+<CardFeature
+  icon="👥"
+  title="Comunidade Ativa"
+  description="Conecte-se com +5.000 profissionais de branding, marketing e inovação."
+/>
+
+<CardTrail
+  badge="growth"
+  badgeLabel="Growth"
+  title="Growth"
+  subtitle="Marketing de Crescimento"
+  onClick={() => navigate('/trilhas/growth')}
+/>
+
+<CardPricing
+  featured
+  ctaLabel="Começar agora →"
+  onCtaClick={() => navigate('/checkout')}
+/>
+```
+
+### Form Controls
+
+```tsx
+import { Checkbox, Radio, Toggle } from '@laje/design-system';
+
+<Checkbox label="Aceito os termos de uso" checked={accepted} onChange={setAccepted} />
+<Radio label="Anual" value="anual" checked={plan === 'anual'} onChange={setPlan} />
+<Toggle label="Notificações push" checked={notif} onChange={setNotif} />
+<Toggle label="Modo escuro" checked={dark} color="cyan" onChange={setDark} />
+```
+
+### Navegação
+
+```tsx
+import { Header, Tabs, Sidebar, Breadcrumb } from '@laje/design-system';
+
+<Header onCtaClick={() => navigate('/assinar')} />
+
+<Tabs
+  tabs={['Visão Geral', 'Trilhas', 'Certificados', 'Comunidade', 'Vagas']}
+  theme="dark"
+  onChange={(tab) => console.log(tab)}
+/>
+
+<Breadcrumb items={[
+  { label: 'Home', href: '/' },
+  { label: 'Trilhas', href: '/trilhas' },
+  { label: 'Branding' },
+]} />
+
+<Sidebar user={{ name: 'James Pereira', role: 'Assinante LAJE' }} />
+```
+
+### Stat
+
+```tsx
+import { Stat } from '@laje/design-system';
+
+<Stat value="+5.000" label="Membros ativos" />
+<Stat value="Semanal" label="Encontros ao vivo" />
+<Stat value="100+" label="Vagas exclusivas/mês" />
+```
+
+---
+
+## Figma Make Kit
+
+Para usar no **Figma Make**:
+
+1. Abra o Figma Make (`figma.com/make`)
+2. Clique em **"Create a kit"** → **"npm packages"**
+3. Instale: `@laje/design-system`
+4. O Make vai reconhecer os tokens e componentes da LAJE automaticamente
+
+---
+
+## Tailwind Config (opcional)
+
+```js
+// tailwind.config.js
+const { colors, spacing, radius } = require('@laje/design-system/tokens');
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        laje: colors,
+      },
+      spacing: Object.fromEntries(
+        Object.entries(spacing).map(([k, v]) => [k, v])
+      ),
+      borderRadius: {
+        'laje-sm':   radius.sm,
+        'laje-md':   radius.md,
+        'laje-lg':   radius.lg,
+        'laje-xl':   radius.xl,
+        'laje-full': radius.full,
+      },
+    },
+  },
+};
+```
+
+---
+
+Fonte: [Figma Design System LAJE](https://www.figma.com/design/2hgeRrANocH98PpwwXldg7)

package/dist/components/Badge.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type BadgeVariant = "trilha" | "popular" | "growth" | "design" | "novo" | "custom";
+export interface BadgeProps {
+    variant?: BadgeVariant;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+export declare const Badge: React.FC<BadgeProps>;
+export default Badge;

package/dist/components/Badge.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { colors, radius, spacing, typography } from "../tokens";
+const variantMap = {
+    trilha: {
+        background: colors.purple[500],
+        color: colors.neutral.white,
+    },
+    popular: {
+        background: colors.brand.accentPink,
+        color: colors.neutral.white,
+    },
+    growth: {
+        background: colors.brand.secondary,
+        color: colors.neutral.black,
+    },
+    design: {
+        background: colors.cyan[300],
+        color: colors.neutral.black,
+    },
+    novo: {
+        background: colors.brand.primary,
+        color: colors.neutral.white,
+    },
+    custom: {
+        background: colors.purple[100],
+        color: colors.purple[600],
+    },
+};
+export const Badge = ({ variant = "trilha", children, style, }) => {
+    const baseStyle = Object.assign(Object.assign({ display: "inline-flex", alignItems: "center", padding: `${spacing[4]} ${spacing[12]}`, borderRadius: radius.full, fontSize: typography.fontSize.xs, fontWeight: typography.fontWeight.semibold, fontFamily: typography.fontFamily.sans, letterSpacing: "0.04em", textTransform: "uppercase", whiteSpace: "nowrap" }, variantMap[variant]), style);
+    return React.createElement("span", { style: baseStyle }, children);
+};
+export default Badge;

package/dist/components/Button.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type ButtonVariant = "primary" | "secondary" | "dark" | "outline-orange" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    children: React.ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/Button.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { colors, radius, spacing, typography } from "../tokens";
+const variantStyles = {
+    primary: {
+        background: colors.brand.primary,
+        color: colors.neutral.white,
+        border: "none",
+    },
+    secondary: {
+        background: colors.brand.secondary,
+        color: colors.neutral.black,
+        border: "none",
+    },
+    dark: {
+        background: colors.neutral.black,
+        color: colors.neutral.white,
+        border: `1.5px solid ${colors.purple[600]}`,
+    },
+    "outline-orange": {
+        background: "transparent",
+        color: colors.brand.accentOrange,
+        border: `1.5px solid ${colors.brand.accentOrange}`,
+    },
+    ghost: {
+        background: "transparent",
+        color: colors.neutral.white,
+        border: `1.5px solid rgba(240,235,223,0.3)`,
+    },
+};
+const sizeStyles = {
+    sm: {
+        padding: `${spacing[8]} ${spacing[16]}`,
+        fontSize: typography.fontSize.base,
+        height: "36px",
+    },
+    md: {
+        padding: `${spacing[12]} ${spacing[24]}`,
+        fontSize: typography.fontSize.md,
+        height: "48px",
+    },
+    lg: {
+        padding: `${spacing[16]} ${spacing[32]}`,
+        fontSize: typography.fontSize.lg,
+        height: "56px",
+    },
+};
+export const Button = (_a) => {
+    var { variant = "primary", size = "md", loading = false, disabled, children, style } = _a, rest = __rest(_a, ["variant", "size", "loading", "disabled", "children", "style"]);
+    const isDisabled = disabled || loading;
+    const baseStyle = Object.assign(Object.assign(Object.assign({ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: spacing[8], borderRadius: radius.md, fontFamily: typography.fontFamily.sans, fontWeight: typography.fontWeight.semibold, cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.45 : 1, transition: "opacity 150ms ease, transform 100ms ease, box-shadow 150ms ease", whiteSpace: "nowrap" }, variantStyles[variant]), sizeStyles[size]), style);
+    return (React.createElement("button", Object.assign({ style: baseStyle, disabled: isDisabled }, rest), loading ? "Carregando..." : children));
+};
+export default Button;

package/dist/components/Card.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { BadgeVariant } from "./Badge";
+export interface CardFeatureProps {
+    icon?: string;
+    title: string;
+    description: string;
+    style?: React.CSSProperties;
+}
+export declare const CardFeature: React.FC<CardFeatureProps>;
+export interface CardTrailProps {
+    badge: BadgeVariant;
+    badgeLabel: string;
+    title: string;
+    subtitle: string;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+}
+export declare const CardTrail: React.FC<CardTrailProps>;
+export interface CardPricingProps {
+    title?: string;
+    subtitle?: string;
+    priceMonthly?: string;
+    priceAnnual?: string;
+    features?: string[];
+    ctaLabel?: string;
+    onCtaClick?: () => void;
+    featured?: boolean;
+    style?: React.CSSProperties;
+}
+export declare const CardPricing: React.FC<CardPricingProps>;

package/dist/components/Card.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { colors, radius, spacing, typography } from "../tokens";
+import { Badge } from "./Badge";
+import { Button } from "./Button";
+export const CardFeature = ({ icon = "◎", title, description, style, }) => {
+    const cardStyle = Object.assign({ background: "rgba(240,235,223,0.05)", border: "1px solid rgba(240,235,223,0.1)", borderRadius: radius.lg, padding: spacing[24], display: "flex", flexDirection: "column", gap: spacing[12] }, style);
+    return (React.createElement("div", { style: cardStyle },
+        React.createElement("div", { style: {
+                width: "40px",
+                height: "40px",
+                borderRadius: radius.full,
+                background: `linear-gradient(135deg, ${colors.brand.primary}, ${colors.brand.secondary})`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "18px",
+            } }, icon),
+        React.createElement("div", { style: { fontSize: typography.fontSize.lg, fontWeight: typography.fontWeight.bold, color: colors.neutral.white, fontFamily: typography.fontFamily.sans } }, title),
+        React.createElement("div", { style: { fontSize: typography.fontSize.md, color: "rgba(240,235,223,0.6)", fontFamily: typography.fontFamily.sans, lineHeight: 1.6 } }, description)));
+};
+export const CardTrail = ({ badge, badgeLabel, title, subtitle, onClick, style, }) => {
+    return (React.createElement("div", { onClick: onClick, style: Object.assign({ background: "rgba(240,235,223,0.05)", border: "1px solid rgba(240,235,223,0.1)", borderRadius: radius.lg, padding: spacing[24], display: "flex", alignItems: "center", justifyContent: "space-between", cursor: onClick ? "pointer" : "default", transition: "background 150ms ease, border-color 150ms ease" }, style) },
+        React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: spacing[8] } },
+            React.createElement(Badge, { variant: badge }, badgeLabel),
+            React.createElement("div", { style: { fontSize: typography.fontSize.xl, fontWeight: typography.fontWeight.bold, color: colors.neutral.white, fontFamily: typography.fontFamily.sans } }, title),
+            React.createElement("div", { style: { fontSize: typography.fontSize.base, color: "rgba(240,235,223,0.5)", fontFamily: typography.fontFamily.sans } }, subtitle)),
+        React.createElement("span", { style: { fontSize: "20px", color: "rgba(240,235,223,0.4)" } }, "\u2228")));
+};
+export const CardPricing = ({ title = "Assinatura LAJE", subtitle = "Aprenda no seu ritmo com acesso total ao ecossistema", priceMonthly = "12x R$ 49,99", priceAnnual = "ou R$ 599,88/ano", features = [
+    "+100h de cursos de Branding, Marketing e Inovação",
+    "Encontros ao vivo semanais",
+    "Comunidade exclusiva e networking",
+    "Certificados reconhecidos pelo mercado",
+    "App exclusivo para mobile",
+], ctaLabel = "Começar agora →", onCtaClick, featured = true, style, }) => {
+    return (React.createElement("div", { style: Object.assign({ background: featured
+                ? `linear-gradient(135deg, ${colors.purple[600]}, ${colors.neutral.black})`
+                : "rgba(240,235,223,0.05)", border: `1.5px solid ${featured ? colors.brand.primary : "rgba(240,235,223,0.1)"}`, borderRadius: radius.xl, padding: spacing[32], display: "flex", flexDirection: "column", gap: spacing[24] }, style) },
+        featured && (React.createElement(Badge, { variant: "popular" }, "MAIS POPULAR")),
+        React.createElement("div", null,
+            React.createElement("div", { style: { fontSize: typography.fontSize["2xl"], fontWeight: typography.fontWeight.bold, color: colors.neutral.white, fontFamily: typography.fontFamily.sans, marginBottom: spacing[8] } }, title),
+            React.createElement("div", { style: { fontSize: typography.fontSize.md, color: "rgba(240,235,223,0.6)", fontFamily: typography.fontFamily.sans } }, subtitle)),
+        React.createElement("div", null,
+            React.createElement("div", { style: { fontSize: typography.fontSize["4xl"], fontWeight: typography.fontWeight.bold, color: colors.neutral.white, fontFamily: typography.fontFamily.sans } }, priceMonthly),
+            React.createElement("div", { style: { fontSize: typography.fontSize.base, color: "rgba(240,235,223,0.5)", fontFamily: typography.fontFamily.sans, marginTop: spacing[4] } }, priceAnnual)),
+        React.createElement("ul", { style: { listStyle: "none", display: "flex", flexDirection: "column", gap: spacing[12] } }, features.map((f, i) => (React.createElement("li", { key: i, style: { fontSize: typography.fontSize.md, color: "rgba(240,235,223,0.8)", fontFamily: typography.fontFamily.sans, display: "flex", gap: spacing[8] } },
+            React.createElement("span", { style: { color: colors.brand.secondary } }, "\u2022"),
+            " ",
+            f)))),
+        React.createElement(Button, { variant: "primary", onClick: onCtaClick, style: { width: "100%" } }, ctaLabel)));
+};

package/dist/components/FormControls.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface CheckboxProps {
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;
+export interface RadioProps {
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const Radio: React.FC<RadioProps>;
+export interface ToggleProps {
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    color?: "purple" | "cyan";
+    onChange?: (checked: boolean) => void;
+}
+export declare const Toggle: React.FC<ToggleProps>;

package/dist/components/FormControls.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { colors, radius, spacing, typography } from "../tokens";
+export const Checkbox = ({ label, checked = false, disabled, onChange }) => {
+    const boxStyle = {
+        width: "20px",
+        height: "20px",
+        borderRadius: radius.sm,
+        border: `2px solid ${checked ? colors.brand.primary : "rgba(240,235,223,0.3)"}`,
+        background: checked ? colors.brand.primary : "transparent",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        transition: "all 150ms ease",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.4 : 1,
+    };
+    return (React.createElement("div", { style: { display: "flex", alignItems: "center", gap: spacing[12], cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.4 : 1 }, onClick: () => !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(!checked)) },
+        React.createElement("div", { style: boxStyle }, checked && React.createElement("span", { style: { color: colors.neutral.white, fontSize: "12px", lineHeight: 1 } }, "\u2713")),
+        React.createElement("span", { style: { fontSize: typography.fontSize.md, color: colors.neutral.white, fontFamily: typography.fontFamily.sans } }, label)));
+};
+export const Radio = ({ label, checked = false, disabled, value = "", onChange }) => {
+    return (React.createElement("div", { style: { display: "flex", alignItems: "center", gap: spacing[12], cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.4 : 1 }, onClick: () => !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(value)) },
+        React.createElement("div", { style: {
+                width: "20px",
+                height: "20px",
+                borderRadius: radius.full,
+                border: `2px solid ${checked ? colors.brand.primary : "rgba(240,235,223,0.3)"}`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0,
+                transition: "all 150ms ease",
+            } }, checked && (React.createElement("div", { style: {
+                width: "10px",
+                height: "10px",
+                borderRadius: radius.full,
+                background: colors.brand.primary,
+            } }))),
+        React.createElement("span", { style: { fontSize: typography.fontSize.md, color: colors.neutral.white, fontFamily: typography.fontFamily.sans } }, label)));
+};
+export const Toggle = ({ label, checked = false, disabled, color = "purple", onChange, }) => {
+    const trackColor = checked
+        ? (color === "cyan" ? colors.brand.secondary : colors.brand.primary)
+        : "rgba(240,235,223,0.15)";
+    return (React.createElement("div", { style: { display: "flex", alignItems: "center", gap: spacing[12], cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.4 : 1 }, onClick: () => !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(!checked)) },
+        React.createElement("div", { style: {
+                width: "44px",
+                height: "24px",
+                borderRadius: radius.full,
+                background: trackColor,
+                position: "relative",
+                transition: "background 200ms ease",
+                flexShrink: 0,
+            } },
+            React.createElement("div", { style: {
+                    width: "18px",
+                    height: "18px",
+                    borderRadius: radius.full,
+                    background: colors.neutral.white,
+                    position: "absolute",
+                    top: "3px",
+                    left: checked ? "23px" : "3px",
+                    transition: "left 200ms ease",
+                    boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
+                } })),
+        label && (React.createElement("span", { style: { fontSize: typography.fontSize.md, color: colors.neutral.white, fontFamily: typography.fontFamily.sans } }, label))));
+};

package/dist/components/Input.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    variant?: "default" | "search";
+}
+export declare const Input: React.FC<InputProps>;
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+}
+export declare const Select: React.FC<SelectProps>;
+export default Input;

package/dist/components/Input.js

@@ -0,0 +1,81 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from "react";
+import { colors, radius, spacing, typography } from "../tokens";
+export const Input = (_a) => {
+    var { label, error, variant = "default", disabled, style } = _a, rest = __rest(_a, ["label", "error", "variant", "disabled", "style"]);
+    const [focused, setFocused] = useState(false);
+    const borderColor = error
+        ? colors.semantic.error
+        : focused
+            ? colors.brand.primary
+            : "rgba(240,235,223,0.2)";
+    const wrapperStyle = {
+        display: "flex",
+        flexDirection: "column",
+        gap: spacing[8],
+        width: "100%",
+    };
+    const labelStyle = {
+        fontSize: typography.fontSize.sm,
+        fontWeight: typography.fontWeight.medium,
+        fontFamily: typography.fontFamily.sans,
+        color: "rgba(240,235,223,0.6)",
+    };
+    const inputStyle = Object.assign({ width: "100%", height: "52px", padding: `0 ${spacing[16]}`, paddingLeft: variant === "search" ? spacing[40] : spacing[16], background: "rgba(15,11,26,0.6)", border: `1.5px solid ${borderColor}`, borderRadius: radius.md, color: colors.neutral.white, fontSize: typography.fontSize.md, fontFamily: typography.fontFamily.sans, outline: "none", opacity: disabled ? 0.4 : 1, cursor: disabled ? "not-allowed" : "text", transition: "border-color 150ms ease" }, style);
+    const errorStyle = {
+        fontSize: typography.fontSize.xs,
+        color: colors.semantic.error,
+        fontFamily: typography.fontFamily.sans,
+    };
+    return (React.createElement("div", { style: wrapperStyle },
+        label && React.createElement("label", { style: labelStyle }, label),
+        React.createElement("div", { style: { position: "relative", width: "100%" } },
+            variant === "search" && (React.createElement("span", { style: {
+                    position: "absolute",
+                    left: spacing[16],
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    color: "rgba(240,235,223,0.4)",
+                    fontSize: "18px",
+                    pointerEvents: "none",
+                } }, "\u2315")),
+            React.createElement("input", Object.assign({ style: inputStyle, disabled: disabled, onFocus: () => setFocused(true), onBlur: () => setFocused(false) }, rest))),
+        error && React.createElement("span", { style: errorStyle },
+            "\u26A0 ",
+            error)));
+};
+export const Select = (_a) => {
+    var { label, options, disabled, style } = _a, rest = __rest(_a, ["label", "options", "disabled", "style"]);
+    const [focused, setFocused] = useState(false);
+    const wrapperStyle = { display: "flex", flexDirection: "column", gap: spacing[8], width: "100%" };
+    const labelStyle = {
+        fontSize: typography.fontSize.sm,
+        fontWeight: typography.fontWeight.medium,
+        fontFamily: typography.fontFamily.sans,
+        color: "rgba(240,235,223,0.6)",
+    };
+    const selectStyle = Object.assign({ width: "100%", height: "52px", padding: `0 ${spacing[40]} 0 ${spacing[16]}`, background: "rgba(15,11,26,0.6)", border: `1.5px solid ${focused ? colors.brand.primary : "rgba(240,235,223,0.2)"}`, borderRadius: radius.md, color: colors.neutral.white, fontSize: typography.fontSize.md, fontFamily: typography.fontFamily.sans, appearance: "none", outline: "none", cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.4 : 1, transition: "border-color 150ms ease" }, style);
+    return (React.createElement("div", { style: wrapperStyle },
+        label && React.createElement("label", { style: labelStyle }, label),
+        React.createElement("div", { style: { position: "relative", width: "100%" } },
+            React.createElement("select", Object.assign({ style: selectStyle, disabled: disabled, onFocus: () => setFocused(true), onBlur: () => setFocused(false) }, rest), options.map(opt => (React.createElement("option", { key: opt.value, value: opt.value }, opt.label)))),
+            React.createElement("span", { style: {
+                    position: "absolute",
+                    right: spacing[16],
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    color: "rgba(240,235,223,0.5)",
+                    pointerEvents: "none",
+                } }, "\u2228"))));
+};
+export default Input;

package/dist/components/Nav.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+export interface NavItem {
+    label: string;
+    href?: string;
+}
+export interface HeaderProps {
+    items?: NavItem[];
+    ctaLabel?: string;
+    onCtaClick?: () => void;
+}
+export declare const Header: React.FC<HeaderProps>;
+export interface TabsProps {
+    tabs: string[];
+    activeTab?: string;
+    theme?: "dark" | "light";
+    onChange?: (tab: string) => void;
+}
+export declare const Tabs: React.FC<TabsProps>;
+export interface BreadcrumbProps {
+    items: {
+        label: string;
+        href?: string;
+    }[];
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export interface SidebarItem {
+    label: string;
+    icon?: string;
+    href?: string;
+    active?: boolean;
+}
+export interface SidebarProps {
+    items?: SidebarItem[];
+    user?: {
+        name: string;
+        role: string;
+    };
+}
+export declare const Sidebar: React.FC<SidebarProps>;

package/dist/components/Nav.js

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import { colors, spacing, typography } from "../tokens";
+import { Button } from "./Button";
+export const Header = ({ items = [
+    { label: "Trilhas" },
+    { label: "Cursos" },
+    { label: "Comunidade" },
+    { label: "Vagas" },
+    { label: "Eventos" },
+], ctaLabel = "Assinar →", onCtaClick, }) => (React.createElement("header", { style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: `0 ${spacing[80]}`,
+        height: "72px",
+        background: colors.neutral.black,
+        borderBottom: "1px solid rgba(240,235,223,0.08)",
+        position: "sticky",
+        top: 0,
+        zIndex: 100,
+    } },
+    React.createElement("span", { style: { fontSize: typography.fontSize.xl, fontWeight: typography.fontWeight.bold, color: colors.neutral.white, fontFamily: typography.fontFamily.sans, letterSpacing: "-0.02em" } }, "LA_JE"),
+    React.createElement("nav", { style: { display: "flex", gap: spacing[32] } }, items.map(item => (React.createElement("a", { key: item.label, href: item.href || "#", style: {
+            fontSize: typography.fontSize.base,
+            color: "rgba(240,235,223,0.6)",
+            fontFamily: typography.fontFamily.sans,
+            textDecoration: "none",
+            transition: "color 150ms ease",
+        } }, item.label)))),
+    React.createElement(Button, { variant: "primary", size: "sm", onClick: onCtaClick }, ctaLabel)));
+export const Tabs = ({ tabs = ["Visão Geral", "Trilhas", "Certificados", "Comunidade", "Vagas"], activeTab, theme = "dark", onChange, }) => {
+    const [active, setActive] = useState(activeTab || tabs[0]);
+    const isDark = theme === "dark";
+    return (React.createElement("div", { style: {
+            display: "flex",
+            gap: 0,
+            borderBottom: `1px solid ${isDark ? "rgba(240,235,223,0.1)" : "rgba(15,11,26,0.1)"}`,
+            background: isDark ? colors.neutral.black : colors.neutral.white,
+        } }, tabs.map(tab => {
+        const isActive = tab === active;
+        return (React.createElement("button", { key: tab, onClick: () => { setActive(tab); onChange === null || onChange === void 0 ? void 0 : onChange(tab); }, style: {
+                padding: `${spacing[12]} ${spacing[24]}`,
+                background: "transparent",
+                border: "none",
+                borderBottom: `2px solid ${isActive ? colors.brand.primary : "transparent"}`,
+                color: isActive
+                    ? (isDark ? colors.neutral.white : colors.neutral.black)
+                    : (isDark ? "rgba(240,235,223,0.4)" : "rgba(15,11,26,0.4)"),
+                fontSize: typography.fontSize.base,
+                fontWeight: isActive ? typography.fontWeight.semibold : typography.fontWeight.regular,
+                fontFamily: typography.fontFamily.sans,
+                cursor: "pointer",
+                transition: "all 150ms ease",
+                whiteSpace: "nowrap",
+            } }, tab));
+    })));
+};
+export const Breadcrumb = ({ items }) => (React.createElement("nav", { style: { display: "flex", alignItems: "center", gap: spacing[8] } }, items.map((item, i) => (React.createElement(React.Fragment, { key: i },
+    i > 0 && (React.createElement("span", { style: { color: "rgba(240,235,223,0.3)", fontSize: typography.fontSize.sm, fontFamily: typography.fontFamily.sans } }, "/")),
+    React.createElement("a", { href: item.href || "#", style: {
+            fontSize: typography.fontSize.sm,
+            color: i === items.length - 1 ? colors.neutral.white : "rgba(240,235,223,0.4)",
+            fontFamily: typography.fontFamily.sans,
+            textDecoration: "none",
+            fontWeight: i === items.length - 1 ? typography.fontWeight.medium : typography.fontWeight.regular,
+        } }, item.label))))));
+export const Sidebar = ({ items = [
+    { label: "Dashboard", icon: "⊞", active: true },
+    { label: "Trilhas", icon: "◈" },
+    { label: "Meus Cursos", icon: "▶" },
+    { label: "Certificados", icon: "◎" },
+    { label: "Comunidade", icon: "◉" },
+    { label: "Painel de Vagas", icon: "◇" },
+    { label: "Eventos ao Vivo", icon: "◈" },
+], user = { name: "James Pereira", role: "Assinante LAJE" }, }) => (React.createElement("aside", { style: {
+        width: "240px",
+        height: "100vh",
+        background: colors.neutral.black,
+        borderRight: "1px solid rgba(240,235,223,0.08)",
+        display: "flex",
+        flexDirection: "column",
+        padding: `${spacing[32]} 0`,
+        position: "sticky",
+        top: 0,
+    } },
+    React.createElement("span", { style: { fontSize: typography.fontSize.xl, fontWeight: typography.fontWeight.bold, color: colors.neutral.white, fontFamily: typography.fontFamily.sans, padding: `0 ${spacing[24]}`, marginBottom: spacing[32] } }, "LA_JE"),
+    React.createElement("nav", { style: { display: "flex", flexDirection: "column", flex: 1 } }, items.map(item => (React.createElement("a", { key: item.label, href: item.href || "#", style: {
+            display: "flex",
+            alignItems: "center",
+            gap: spacing[12],
+            padding: `${spacing[12]} ${spacing[24]}`,
+            color: item.active ? colors.neutral.white : "rgba(240,235,223,0.45)",
+            background: item.active ? "rgba(102,0,255,0.15)" : "transparent",
+            borderLeft: `3px solid ${item.active ? colors.brand.primary : "transparent"}`,
+            fontSize: typography.fontSize.base,
+            fontFamily: typography.fontFamily.sans,
+            textDecoration: "none",
+            transition: "all 150ms ease",
+        } },
+        React.createElement("span", null, item.icon),
+        item.label)))),
+    React.createElement("div", { style: { padding: `${spacing[16]} ${spacing[24]}`, borderTop: "1px solid rgba(240,235,223,0.08)", display: "flex", flexDirection: "column", gap: spacing[4] } },
+        React.createElement("span", { style: { fontSize: typography.fontSize.base, fontWeight: typography.fontWeight.medium, color: colors.neutral.white, fontFamily: typography.fontFamily.sans } }, user.name),
+        React.createElement("span", { style: { fontSize: typography.fontSize.sm, color: "rgba(240,235,223,0.4)", fontFamily: typography.fontFamily.sans } }, user.role))));

package/dist/components/Stat.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface StatProps {
+    value: string;
+    label: string;
+    style?: React.CSSProperties;
+}
+export declare const Stat: React.FC<StatProps>;
+export default Stat;

package/dist/components/Stat.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { colors, spacing, typography } from "../tokens";
+export const Stat = ({ value, label, style }) => (React.createElement("div", { style: Object.assign({ display: "flex", flexDirection: "column", gap: spacing[4] }, style) },
+    React.createElement("span", { style: {
+            fontSize: typography.fontSize["4xl"],
+            fontWeight: typography.fontWeight.bold,
+            color: colors.neutral.white,
+            fontFamily: typography.fontFamily.sans,
+            lineHeight: 1,
+        } }, value),
+    React.createElement("span", { style: {
+            fontSize: typography.fontSize.base,
+            color: "rgba(240,235,223,0.5)",
+            fontFamily: typography.fontFamily.sans,
+        } }, label)));
+export default Stat;

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export * from "./tokens";
+export { Button } from "./components/Button";
+export type { ButtonProps, ButtonVariant, ButtonSize } from "./components/Button";
+export { Badge } from "./components/Badge";
+export type { BadgeProps, BadgeVariant } from "./components/Badge";
+export { Input, Select } from "./components/Input";
+export type { InputProps, SelectProps } from "./components/Input";
+export { CardFeature, CardTrail, CardPricing } from "./components/Card";
+export type { CardFeatureProps, CardTrailProps, CardPricingProps } from "./components/Card";
+export { Checkbox, Radio, Toggle } from "./components/FormControls";
+export type { CheckboxProps, RadioProps, ToggleProps } from "./components/FormControls";
+export { Header, Tabs, Breadcrumb, Sidebar } from "./components/Nav";
+export type { HeaderProps, TabsProps, BreadcrumbProps, SidebarProps, NavItem, SidebarItem } from "./components/Nav";
+export { Stat } from "./components/Stat";
+export type { StatProps } from "./components/Stat";

package/dist/index.js

@@ -0,0 +1,13 @@
+// ─────────────────────────────────────────────────────────────
+// @laje/design-system — Entry Point
+// ─────────────────────────────────────────────────────────────
+// Tokens
+export * from "./tokens";
+// Components
+export { Button } from "./components/Button";
+export { Badge } from "./components/Badge";
+export { Input, Select } from "./components/Input";
+export { CardFeature, CardTrail, CardPricing } from "./components/Card";
+export { Checkbox, Radio, Toggle } from "./components/FormControls";
+export { Header, Tabs, Breadcrumb, Sidebar } from "./components/Nav";
+export { Stat } from "./components/Stat";

package/dist/tokens/index.d.ts

@@ -0,0 +1,91 @@
+export declare const colors: {
+    readonly brand: {
+        readonly primary: "#6600FF";
+        readonly secondary: "#0ACCE8";
+        readonly accentPink: "#F060A8";
+        readonly accentOrange: "#E02A0A";
+    };
+    readonly neutral: {
+        readonly white: "#F0EBDF";
+        readonly black: "#0F0B1A";
+        readonly dark: "#0F0B1A";
+    };
+    readonly purple: {
+        readonly 100: "#E0CCFF";
+        readonly 200: "#BF99FF";
+        readonly 300: "#9960FA";
+        readonly 400: "#7B52F0";
+        readonly 500: "#6600FF";
+        readonly 600: "#4200A8";
+    };
+    readonly cyan: {
+        readonly 100: "#C7F7FF";
+        readonly 300: "#66E5F7";
+        readonly 500: "#0ACCE8";
+        readonly 700: "#058496";
+    };
+    readonly semantic: {
+        readonly success: "#21C45E";
+        readonly warning: "#F2B300";
+        readonly error: "#ED2E2E";
+        readonly info: "#2185F2";
+    };
+};
+export declare const spacing: {
+    readonly 2: "2px";
+    readonly 4: "4px";
+    readonly 8: "8px";
+    readonly 12: "12px";
+    readonly 16: "16px";
+    readonly 24: "24px";
+    readonly 32: "32px";
+    readonly 40: "40px";
+    readonly 48: "48px";
+    readonly 64: "64px";
+    readonly 80: "80px";
+    readonly 96: "96px";
+    readonly 128: "128px";
+};
+export declare const radius: {
+    readonly none: "0px";
+    readonly sm: "4px";
+    readonly md: "8px";
+    readonly lg: "16px";
+    readonly xl: "24px";
+    readonly full: "999px";
+};
+export declare const typography: {
+    readonly fontFamily: {
+        readonly sans: "'Inter', 'Helvetica Neue', Arial, sans-serif";
+        readonly display: "'Inter', 'Helvetica Neue', Arial, sans-serif";
+    };
+    readonly fontSize: {
+        readonly xs: "11px";
+        readonly sm: "12px";
+        readonly base: "14px";
+        readonly md: "16px";
+        readonly lg: "18px";
+        readonly xl: "24px";
+        readonly "2xl": "28px";
+        readonly "3xl": "36px";
+        readonly "4xl": "48px";
+        readonly "5xl": "64px";
+        readonly display: "96px";
+    };
+    readonly fontWeight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.2;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+};
+export declare const cssVars: string;
+export type Colors = typeof colors;
+export type Spacing = typeof spacing;
+export type Radius = typeof radius;
+export type Typography = typeof typography;

package/dist/tokens/index.js

@@ -0,0 +1,157 @@
+// ─────────────────────────────────────────────────────────────
+// LAJE Design System — Tokens
+// Gerado automaticamente a partir do Figma Design System LAJE
+// figma.com/design/2hgeRrANocH98PpwwXldg7
+// ─────────────────────────────────────────────────────────────
+// ── Helpers ──────────────────────────────────────────────────
+function rgbToHex(r, g, b) {
+    const toHex = (n) => Math.round(n * 255).toString(16).padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+// ── Colors ────────────────────────────────────────────────────
+export const colors = {
+    brand: {
+        primary: "#6600FF", // purple/500
+        secondary: "#0ACCE8", // cyan/500
+        accentPink: "#F060A8",
+        accentOrange: "#E02A0A",
+    },
+    neutral: {
+        white: "#F0EBDF",
+        black: "#0F0B1A",
+        dark: "#0F0B1A",
+    },
+    purple: {
+        100: "#E0CCFF",
+        200: "#BF99FF",
+        300: "#9960FA",
+        400: "#7B52F0",
+        500: "#6600FF",
+        600: "#4200A8",
+    },
+    cyan: {
+        100: "#C7F7FF",
+        300: "#66E5F7",
+        500: "#0ACCE8",
+        700: "#058496",
+    },
+    semantic: {
+        success: "#21C45E",
+        warning: "#F2B300",
+        error: "#ED2E2E",
+        info: "#2185F2",
+    },
+};
+// ── Spacing ───────────────────────────────────────────────────
+export const spacing = {
+    2: "2px",
+    4: "4px",
+    8: "8px",
+    12: "12px",
+    16: "16px",
+    24: "24px",
+    32: "32px",
+    40: "40px",
+    48: "48px",
+    64: "64px",
+    80: "80px",
+    96: "96px",
+    128: "128px",
+};
+// ── Border Radius ─────────────────────────────────────────────
+export const radius = {
+    none: "0px",
+    sm: "4px",
+    md: "8px",
+    lg: "16px",
+    xl: "24px",
+    full: "999px",
+};
+// ── Typography ────────────────────────────────────────────────
+export const typography = {
+    fontFamily: {
+        sans: "'Inter', 'Helvetica Neue', Arial, sans-serif",
+        display: "'Inter', 'Helvetica Neue', Arial, sans-serif",
+    },
+    fontSize: {
+        xs: "11px",
+        sm: "12px",
+        base: "14px",
+        md: "16px",
+        lg: "18px",
+        xl: "24px",
+        "2xl": "28px",
+        "3xl": "36px",
+        "4xl": "48px",
+        "5xl": "64px",
+        display: "96px",
+    },
+    fontWeight: {
+        regular: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+    },
+    lineHeight: {
+        tight: 1.2,
+        normal: 1.5,
+        relaxed: 1.75,
+    },
+};
+// ── CSS Variables (para uso direto em CSS/Tailwind) ───────────
+export const cssVars = `
+  /* LAJE Design System — CSS Variables */
+
+  /* Brand */
+  --laje-brand-primary:       ${colors.brand.primary};
+  --laje-brand-secondary:     ${colors.brand.secondary};
+  --laje-brand-accent-pink:   ${colors.brand.accentPink};
+  --laje-brand-accent-orange: ${colors.brand.accentOrange};
+
+  /* Neutral */
+  --laje-neutral-white: ${colors.neutral.white};
+  --laje-neutral-black: ${colors.neutral.black};
+
+  /* Purple */
+  --laje-purple-100: ${colors.purple[100]};
+  --laje-purple-200: ${colors.purple[200]};
+  --laje-purple-300: ${colors.purple[300]};
+  --laje-purple-400: ${colors.purple[400]};
+  --laje-purple-500: ${colors.purple[500]};
+  --laje-purple-600: ${colors.purple[600]};
+
+  /* Cyan */
+  --laje-cyan-100: ${colors.cyan[100]};
+  --laje-cyan-300: ${colors.cyan[300]};
+  --laje-cyan-500: ${colors.cyan[500]};
+  --laje-cyan-700: ${colors.cyan[700]};
+
+  /* Semantic */
+  --laje-success: ${colors.semantic.success};
+  --laje-warning: ${colors.semantic.warning};
+  --laje-error:   ${colors.semantic.error};
+  --laje-info:    ${colors.semantic.info};
+
+  /* Spacing */
+  --laje-space-2:   ${spacing[2]};
+  --laje-space-4:   ${spacing[4]};
+  --laje-space-8:   ${spacing[8]};
+  --laje-space-12:  ${spacing[12]};
+  --laje-space-16:  ${spacing[16]};
+  --laje-space-24:  ${spacing[24]};
+  --laje-space-32:  ${spacing[32]};
+  --laje-space-40:  ${spacing[40]};
+  --laje-space-48:  ${spacing[48]};
+  --laje-space-64:  ${spacing[64]};
+  --laje-space-80:  ${spacing[80]};
+  --laje-space-96:  ${spacing[96]};
+  --laje-space-128: ${spacing[128]};
+
+  /* Radius */
+  --laje-radius-none: ${radius.none};
+  --laje-radius-sm:   ${radius.sm};
+  --laje-radius-md:   ${radius.md};
+  --laje-radius-lg:   ${radius.lg};
+  --laje-radius-xl:   ${radius.xl};
+  --laje-radius-full: ${radius.full};
+`;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@laje/design-system",
+  "version": "1.0.0",
+  "description": "Design System oficial da LAJE — tokens, componentes React e estilos CSS",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens": "./dist/tokens/index.js",
+    "./styles": "./dist/styles/laje.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && echo 'Build complete'",
+    "dev": "tsc --watch"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.30",
+    "@types/react-dom": "^18.3.7",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "laje",
+    "design-system",
+    "react",
+    "components",
+    "tokens"
+  ],
+  "license": "MIT"
+}