@vegait/lyra-ds-v2 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+export { Button, ButtonProps, buttonVariants } from './components/button.cjs';
+export { Badge, BadgeProps, badgeVariants } from './components/badge.cjs';
+export { Card, CardContent, CardFooter, CardHeader } from './components/card.cjs';
+export { Input, InputProps } from './components/input.cjs';
+export { StatusTag, StatusTagProps } from './components/status-tag.cjs';
+export { Alert, AlertProps } from './components/alert.cjs';
+export { Modal, ModalProps } from './components/modal.cjs';
+export { TabsContent, TabsList, TabsRoot, TabsTrigger } from './components/tabs.cjs';
+export { EmptyState, EmptyStateProps } from './components/empty-state.cjs';
+export { DestructiveDialog, DestructiveDialogProps } from './components/destructive-dialog.cjs';
+export { Tooltip, TooltipProps } from './components/tooltip.cjs';
+export { Avatar, AvatarProps } from './components/avatar.cjs';
+export { ListPage, ListPageBodyProps, ListPageBulkBarProps, ListPageFiltersProps, ListPageHeaderProps, ListPagePaginationProps, ListPageSearchProps } from './components/list-page.cjs';
+export { KpiCards, KpiCardsProps, MetricCard, MetricColor } from './components/kpi-cards.cjs';
+export { FilterChips, FilterChipsProps, ListPageFilter } from './components/filter-chips.cjs';
+export { BulkBar, BulkBarProps, ListPageBulkAction } from './components/bulk-bar.cjs';
+export { DataTable, DataTableColumn, DataTableProps, DataTableSort } from './components/data-table.cjs';
+export { PaginationBar, PaginationBarProps } from './components/pagination-bar.cjs';
+export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonProps, SkeletonText } from './components/skeleton.cjs';
+export { Toggle, ToggleProps } from './components/toggle.cjs';
+export { Sidebar, SidebarProps } from './components/sidebar.cjs';
+export { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from './components/radio-group.cjs';
+export { DatePicker, DatePickerProps } from './components/date-picker.cjs';
+export { ProgressBar, ProgressBarProps } from './components/progress-bar.cjs';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/dropdown-menu.cjs';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';
+import 'lucide-react';
+import 'react/jsx-runtime';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-dropdown-menu';

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+export { Button, ButtonProps, buttonVariants } from './components/button.js';
+export { Badge, BadgeProps, badgeVariants } from './components/badge.js';
+export { Card, CardContent, CardFooter, CardHeader } from './components/card.js';
+export { Input, InputProps } from './components/input.js';
+export { StatusTag, StatusTagProps } from './components/status-tag.js';
+export { Alert, AlertProps } from './components/alert.js';
+export { Modal, ModalProps } from './components/modal.js';
+export { TabsContent, TabsList, TabsRoot, TabsTrigger } from './components/tabs.js';
+export { EmptyState, EmptyStateProps } from './components/empty-state.js';
+export { DestructiveDialog, DestructiveDialogProps } from './components/destructive-dialog.js';
+export { Tooltip, TooltipProps } from './components/tooltip.js';
+export { Avatar, AvatarProps } from './components/avatar.js';
+export { ListPage, ListPageBodyProps, ListPageBulkBarProps, ListPageFiltersProps, ListPageHeaderProps, ListPagePaginationProps, ListPageSearchProps } from './components/list-page.js';
+export { KpiCards, KpiCardsProps, MetricCard, MetricColor } from './components/kpi-cards.js';
+export { FilterChips, FilterChipsProps, ListPageFilter } from './components/filter-chips.js';
+export { BulkBar, BulkBarProps, ListPageBulkAction } from './components/bulk-bar.js';
+export { DataTable, DataTableColumn, DataTableProps, DataTableSort } from './components/data-table.js';
+export { PaginationBar, PaginationBarProps } from './components/pagination-bar.js';
+export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonProps, SkeletonText } from './components/skeleton.js';
+export { Toggle, ToggleProps } from './components/toggle.js';
+export { Sidebar, SidebarProps } from './components/sidebar.js';
+export { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from './components/radio-group.js';
+export { DatePicker, DatePickerProps } from './components/date-picker.js';
+export { ProgressBar, ProgressBarProps } from './components/progress-bar.js';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/dropdown-menu.js';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';
+import 'lucide-react';
+import 'react/jsx-runtime';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-dropdown-menu';

package/dist/index.js

@@ -0,0 +1,160 @@
+"use client";
+import {
+  Toggle
+} from "./chunk-N7M2UZM6.js";
+import {
+  Tooltip
+} from "./chunk-NPXSB4WO.js";
+import {
+  ProgressBar
+} from "./chunk-FZD2ZXN2.js";
+import {
+  RadioGroup,
+  RadioGroupItem
+} from "./chunk-G6T2BYPC.js";
+import {
+  Sidebar
+} from "./chunk-7PRTXARY.js";
+import {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonCard,
+  SkeletonText
+} from "./chunk-XFMTGORU.js";
+import {
+  StatusTag
+} from "./chunk-CUW7MUCY.js";
+import {
+  TabsContent,
+  TabsList,
+  TabsRoot,
+  TabsTrigger
+} from "./chunk-DKHG23OR.js";
+import {
+  DatePicker
+} from "./chunk-RBPMBCU3.js";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from "./chunk-ACADNUHF.js";
+import {
+  ListPage
+} from "./chunk-W3H3KWRL.js";
+import {
+  PaginationBar
+} from "./chunk-BNDEIZZQ.js";
+import "./chunk-ZYPEUNSY.js";
+import {
+  DestructiveDialog
+} from "./chunk-BAUTON3J.js";
+import {
+  Modal
+} from "./chunk-COFNZ2CM.js";
+import {
+  EmptyState
+} from "./chunk-32QWDFOV.js";
+import {
+  FilterChips
+} from "./chunk-GLMTTY4G.js";
+import {
+  Input
+} from "./chunk-6GT2L3FX.js";
+import {
+  KpiCards
+} from "./chunk-KLHQMRAY.js";
+import {
+  Alert
+} from "./chunk-FZFA24YL.js";
+import {
+  Avatar
+} from "./chunk-YVPOTKKQ.js";
+import {
+  Badge,
+  badgeVariants
+} from "./chunk-AFMNLT45.js";
+import {
+  BulkBar
+} from "./chunk-NLOLOFBX.js";
+import {
+  Button,
+  buttonVariants
+} from "./chunk-EMKU3IZY.js";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader
+} from "./chunk-SPAC4VNO.js";
+import {
+  DataTable
+} from "./chunk-MMQZ7YMO.js";
+import "./chunk-KQJCGTS3.js";
+export {
+  Alert,
+  Avatar,
+  Badge,
+  BulkBar,
+  Button,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  DataTable,
+  DatePicker,
+  DestructiveDialog,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  EmptyState,
+  FilterChips,
+  Input,
+  KpiCards,
+  ListPage,
+  Modal,
+  PaginationBar,
+  ProgressBar,
+  RadioGroup,
+  RadioGroupItem,
+  Sidebar,
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonCard,
+  SkeletonText,
+  StatusTag,
+  TabsContent,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+  Toggle,
+  Tooltip,
+  badgeVariants,
+  buttonVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/styles/global.css

@@ -0,0 +1,322 @@
+/* ============================================================
+   CAMADA 1 — PRIMITIVES
+   Valores absolutos. Nunca referenciar diretamente em componentes.
+   ============================================================ */
+:root {
+  /* Navy */
+  --navy-100: #E8EDF5;
+  --navy-200: #C5D0E6;
+  --navy-300: #8FA3CA;
+  --navy-400: #5975AE;
+  --navy-500: #1E3070;
+  --navy-600: #192860;
+  --navy-700: #132050;
+  --navy-800: #0D1840;
+
+  /* Amber */
+  --amber-100: #FEF8E8;
+  --amber-200: #FCECC0;
+  --amber-300: #F9D98A;
+  --amber-400: #F5C558;
+  --amber-500: #EDBB5A;
+  --amber-600: #D4A64F;
+
+  /* Zinc */
+  --zinc-50: #FAFAFA;
+  --zinc-100: #F4F4F5;
+  --zinc-200: #E4E4E7;
+  --zinc-300: #D4D4D8;
+  --zinc-400: #A1A1AA;
+  --zinc-500: #71717A;
+  --zinc-600: #52525B;
+  --zinc-700: #3F3F46;
+  --zinc-800: #27272A;
+  --zinc-900: #18181B;
+  --zinc-950: #09090B;
+
+  /* Feedback primitives */
+  --green-100: #DCFCE7;
+  --green-400: #4ADE80;
+  --green-700: #15803D;
+  --green-900: #14532D;
+  --blue-100: #DBEAFE;
+  --blue-400: #60A5FA;
+  --blue-700: #1D4ED8;
+  --blue-900: #1E3A8A;
+  --yellow-100: #FEF9C3;
+  --yellow-400: #FACC15;
+  --yellow-700: #A16207;
+  --yellow-900: #713F12;
+  --red-100: #FEE2E2;
+  --red-400: #F87171;
+  --red-700: #B91C1C;
+  --red-900: #7F1D1D;
+
+  /* ============================================================
+     CAMADA 2 — SEMANTIC
+     Usados nos componentes. Nunca valor hardcoded.
+     ============================================================ */
+
+  /* Action */
+  --color-action-primary: var(--navy-500);
+  --color-action-primary-hover: var(--navy-600);
+  --color-action-primary-active: var(--navy-700);
+  --color-action-secondary: var(--amber-500);
+  --color-on-action-primary: #FFFFFF;
+  --color-on-action-secondary: var(--navy-800);
+
+  /* Surfaces */
+  --color-background-page: var(--zinc-50);
+  --color-surf-container: #FFFFFF;
+  --color-surf-container-high: var(--zinc-100);
+  --color-surf-container-highest: var(--zinc-200);
+
+  /* Content */
+  --color-on-surface: var(--zinc-900);
+  --color-on-surface-var: var(--zinc-600);
+  --color-outline: var(--zinc-300);
+  --color-outline-variant: var(--zinc-200);
+
+  /* Feedback */
+  --color-success: var(--green-700);
+  --color-success-container: var(--green-100);
+  --color-on-success-container: var(--green-700);
+  --color-info: var(--blue-700);
+  --color-info-container: var(--blue-100);
+  --color-on-info-container: var(--blue-700);
+  --color-warning: var(--yellow-700);
+  --color-warning-container: var(--yellow-100);
+  --color-on-warning-container: var(--yellow-700);
+  --color-error: var(--red-700);
+  --color-error-container: var(--red-100);
+  --color-on-error-container: var(--red-700);
+
+  /* State layers */
+  --state-hover-on-surface: rgba(30, 48, 112, 0.08);
+  --state-hover-on-primary: rgba(255, 255, 255, 0.08);
+  --state-active-on-primary: rgba(255, 255, 255, 0.15);
+  --state-focus-ring: var(--navy-500);
+  --color-focus-on-primary: #FFFFFF;
+
+  /* On-primary content (texto e ícones sobre fundo primary/navy) */
+  --color-on-primary-muted: rgba(255, 255, 255, 0.65);
+  --color-divider-on-primary: rgba(255, 255, 255, 0.10);
+
+  /* Sidebar */
+  --sidebar-width: 220px;
+  --sidebar-header-height: 64px;
+
+  /* Spacing canônico */
+  --space-section: 40px;
+  --space-block: 24px;
+  --space-inline: 12px;
+
+  /* Border radius */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+
+  /* Elevation (sombras) */
+  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --elevation-2: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --elevation-4: 0 16px 48px rgba(0, 0, 0, 0.20);
+
+  /* Motion — durations e easings canônicos */
+  --duration-instant: 75ms;
+  --duration-fast: 150ms;
+  --duration-base: 250ms;
+  --duration-slow: 400ms;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ============================================================
+     CAMADA 3 — TIPOGRAFIA
+     ============================================================ */
+  --font-display: 'Poppins', sans-serif;
+  --font-body: 'Lato', sans-serif;
+
+  /* ============================================================
+     ALIASES E TOKENS ADICIONAIS
+     ============================================================ */
+  --color-primary: var(--navy-500);
+  --color-primary-container: var(--navy-100);
+  --color-on-primary-container: var(--navy-800);
+  --color-on-error: #FFFFFF;
+  --color-surface: var(--color-surf-container);
+  --color-surf-container-low: var(--zinc-50);
+}
+
+/* ============================================================
+   THEMING — overrides via [data-theme]
+   Apenas semânticos. Primitives nunca mudam.
+   Aplique no <html> ou <body>:
+     <html data-theme="dark">  ou  <body data-theme="lira">
+   ============================================================ */
+
+[data-theme="dark"] {
+  /* Action */
+  --color-action-primary: var(--navy-400);
+  --color-action-primary-hover: var(--navy-300);
+  --color-action-primary-active: var(--navy-200);
+  --color-action-secondary: var(--amber-400);
+  --color-on-action-primary: var(--navy-800);
+  --color-on-action-secondary: var(--navy-800);
+
+  /* Surfaces */
+  --color-background-page: var(--zinc-950);
+  --color-surf-container: var(--zinc-900);
+  --color-surf-container-high: var(--zinc-800);
+  --color-surf-container-highest: var(--zinc-700);
+  --color-surf-container-low: var(--zinc-950);
+  --color-surface: var(--zinc-900);
+
+  /* Content */
+  --color-on-surface: var(--zinc-100);
+  --color-on-surface-var: var(--zinc-400);
+  --color-outline: var(--zinc-700);
+  --color-outline-variant: var(--zinc-800);
+
+  /* Feedback */
+  --color-success: var(--green-400);
+  --color-success-container: var(--green-900);
+  --color-on-success-container: var(--green-100);
+  --color-info: var(--blue-400);
+  --color-info-container: var(--blue-900);
+  --color-on-info-container: var(--blue-100);
+  --color-warning: var(--yellow-400);
+  --color-warning-container: var(--yellow-900);
+  --color-on-warning-container: var(--yellow-100);
+  --color-error: var(--red-400);
+  --color-error-container: var(--red-900);
+  --color-on-error-container: var(--red-100);
+  --color-on-error: var(--zinc-950);
+
+  /* State layers (claras sobre escuro) */
+  --state-hover-on-surface: rgba(255, 255, 255, 0.08);
+  --state-hover-on-primary: rgba(0, 0, 0, 0.15);
+  --state-active-on-primary: rgba(0, 0, 0, 0.25);
+  --state-focus-ring: var(--navy-300);
+  --color-focus-on-primary: var(--navy-900);
+  --color-on-primary-muted: rgba(13, 24, 64, 0.65);
+  --color-divider-on-primary: rgba(13, 24, 64, 0.20);
+
+  /* Aliases */
+  --color-primary: var(--navy-400);
+  --color-primary-container: var(--navy-700);
+  --color-on-primary-container: var(--navy-100);
+}
+
+/* ──────────────────────────────────────────────────────────────
+   Lira — Hub de Hospitalidade
+   TODO: alinhar com brand definitiva (gold + navy + warm tones).
+   Por enquanto: scaffold pronto, primary tonal warm.
+   ────────────────────────────────────────────────────────────── */
+
+[data-theme="lira"] {
+  --color-action-primary: var(--amber-600);
+  --color-action-primary-hover: var(--amber-500);
+  --color-action-primary-active: var(--amber-400);
+  --color-on-action-primary: var(--navy-800);
+  --color-primary: var(--amber-600);
+  --color-primary-container: var(--amber-100);
+  --color-on-primary-container: var(--navy-800);
+  --state-focus-ring: var(--amber-500);
+}
+
+/* ──────────────────────────────────────────────────────────────
+   Urooms — Gestão de imóveis por temporada
+   TODO: alinhar com brand definitiva.
+   Por enquanto: scaffold idêntico ao default; ajustar quando
+   guidelines de Urooms estiverem prontas.
+   ────────────────────────────────────────────────────────────── */
+
+[data-theme="urooms"] {
+  /* TODO: cores definitivas pendentes. Inicia idêntico ao :root. */
+}
+
+/* ============================================================
+   TIPOGRAFIA — classes utilitárias
+   ============================================================ */
+.text-display-xl {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 36px;
+}
+
+.text-display-lg {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 40px;
+}
+
+.text-display-md {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.text-display-sm {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.text-heading {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.text-body-lg {
+  font-family: var(--font-body);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.text-body-md {
+  font-family: var(--font-body);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.text-body-sm {
+  font-family: var(--font-body);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.text-label {
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.text-tiny {
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 14px;
+}
+
+/* ============================================================
+   SKELETON — animação de loading
+   ============================================================ */
+@keyframes lyra-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.lyra-skeleton {
+  animation: lyra-pulse 1.5s ease-in-out infinite;
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@vegait/lyra-ds-v2",
+  "version": "0.1.0",
+  "description": "Lyra Design System — VegaIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./dist/styles/global.css",
+    "./*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js",
+      "require": "./dist/components/*.cjs"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.1.4",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.24",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react-day-picker": "^9.14.0",
+    "tailwind-merge": "^3.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^6.0.1",
+    "jsdom": "^29.1.0",
+    "lucide-react": "^0.511.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3",
+    "vitest": "^4.1.5"
+  }
+}