Merge pull request 'mantine-2' (#3) from mantine-2 into main
Reviewed-on: eigen/fe-monorepo-template#3
This commit is contained in:
Vendored
+1
-1
@@ -4,5 +4,5 @@
|
||||
"mode": "auto"
|
||||
}
|
||||
],
|
||||
"cSpell.words": ["Millis", "Pandang", "Ujung", "WITA"]
|
||||
"cSpell.words": ["mantine", "Menlo", "Millis", "Pandang", "Segoe", "Ujung", "WITA"]
|
||||
}
|
||||
|
||||
@@ -1,25 +1,43 @@
|
||||
import { lazy, Suspense } from 'react';
|
||||
import { lazy, Suspense, useState } from 'react';
|
||||
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
|
||||
import { NotFound, Forbidden, Maintenance, ComingSoon } from '@repo/ui';
|
||||
import { ThemeProvider, ColorSchemeType, DensityType } from '@repo/ui/provider';
|
||||
import { NotFound, Forbidden, Maintenance, ComingSoon } from '@repo/ui/components';
|
||||
|
||||
const AuthModule = lazy(() => import('./auth'));
|
||||
const AppModule = lazy(() => import('./modules'));
|
||||
const ShowcaseView = lazy(() => import('./showcase/showcase-view'));
|
||||
|
||||
export default function App() {
|
||||
const [colorScheme, setColorScheme] = useState<ColorSchemeType>('light');
|
||||
const [density, setDensity] = useState<DensityType>('compact');
|
||||
|
||||
return (
|
||||
<ThemeProvider colorScheme={colorScheme} density={density}>
|
||||
<BrowserRouter>
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<Routes>
|
||||
<Route path="/auth/*" element={<AuthModule />} />
|
||||
<Route path="/app/*" element={<AppModule />} />
|
||||
<Route
|
||||
path="/showcase"
|
||||
element={
|
||||
<ShowcaseView
|
||||
colorScheme={colorScheme}
|
||||
setColorScheme={setColorScheme}
|
||||
density={density}
|
||||
setDensity={setDensity}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route path="/404" element={<NotFound />} />
|
||||
<Route path="/403" element={<Forbidden />} />
|
||||
<Route path="/maintenance" element={<Maintenance />} />
|
||||
<Route path="/coming-soon" element={<ComingSoon />} />
|
||||
<Route path="/" element={<Navigate to="/app" />} />
|
||||
<Route path="/" element={<Navigate to="/showcase" />} />
|
||||
<Route path="*" element={<Navigate to="/404" />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</BrowserRouter>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export default function ExamplePage() {
|
||||
return <div>example</div>;
|
||||
return <div className="bg-amber-200">example</div>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,210 @@
|
||||
import { ColorSchemeType, DensityType } from '@repo/ui/provider';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Select,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
TextInput,
|
||||
Checkbox,
|
||||
PasswordInput,
|
||||
NumberInput,
|
||||
Textarea,
|
||||
Switch,
|
||||
Radio,
|
||||
Table,
|
||||
Badge,
|
||||
Divider,
|
||||
} from '@repo/ui/components';
|
||||
|
||||
interface ShowcaseViewProps {
|
||||
colorScheme: ColorSchemeType;
|
||||
setColorScheme: (val: ColorSchemeType) => void;
|
||||
density: DensityType;
|
||||
setDensity: (val: DensityType) => void;
|
||||
}
|
||||
|
||||
export default function ShowcaseView({ colorScheme, setColorScheme, density, setDensity }: ShowcaseViewProps) {
|
||||
// Mock data for the table
|
||||
const tableData = [
|
||||
{ id: 'ORD-001', customer: 'John Doe', status: 'Shipped', total: '$120.00' },
|
||||
{ id: 'ORD-002', customer: 'Jane Smith', status: 'Pending', total: '$85.50' },
|
||||
{ id: 'ORD-003', customer: 'Acme Corp', status: 'Delivered', total: '$1,250.00' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Container size="lg" py="xl">
|
||||
<Stack gap="xl">
|
||||
<Title order={1}>Super App UI Showcase</Title>
|
||||
|
||||
{/* =========================================
|
||||
CONTROL PANEL
|
||||
========================================= */}
|
||||
<Card withBorder shadow="sm" radius="md" p="md">
|
||||
<Title order={4} mb="md">
|
||||
Theme Controls
|
||||
</Title>
|
||||
<Group grow align="flex-end">
|
||||
<Select
|
||||
label="Color Scheme"
|
||||
value={colorScheme}
|
||||
onChange={(val: string | null) => setColorScheme((val as ColorSchemeType) || 'light')}
|
||||
data={[
|
||||
{ value: 'light', label: 'Light' },
|
||||
{ value: 'dark', label: 'Dark' },
|
||||
]}
|
||||
/>
|
||||
<Select
|
||||
label="Density (Spacing & Sizing)"
|
||||
value={density}
|
||||
onChange={(val: string | null) => setDensity((val as DensityType) || 'standard')}
|
||||
data={[
|
||||
{ value: 'compact', label: 'Compact (ERP Mode)' },
|
||||
{ value: 'standard', label: 'Standard (UI Mode)' },
|
||||
]}
|
||||
/>
|
||||
</Group>
|
||||
</Card>
|
||||
|
||||
{/* =========================================
|
||||
TAILWIND V4 BRIDGE TEST
|
||||
========================================= */}
|
||||
<Card withBorder shadow="sm" radius="md" p="md">
|
||||
<Title order={4} mb="md">
|
||||
Tailwind v4 Synchronization
|
||||
</Title>
|
||||
{/* This div purely uses Tailwind classes to prove it inherits Mantine's variables */}
|
||||
<div className="bg-brand-500 text-brand-50 p-md rounded-md shadow-md text-base">
|
||||
<span className="font-bold">Tailwind works!</span> The padding (p-md), border-radius (rounded-md), text size
|
||||
(text-base), and background color of this box are entirely controlled by the ThemeProvider's current state.
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* =========================================
|
||||
TYPOGRAPHY & BUTTONS
|
||||
========================================= */}
|
||||
<Card withBorder shadow="sm" radius="md" p="md">
|
||||
<Stack gap="lg">
|
||||
<div>
|
||||
<Title order={4} mb="xs">
|
||||
Typography & Badges
|
||||
</Title>
|
||||
<Text size="sm" c="dimmed">
|
||||
This is dimmed small text indicating a subtitle.
|
||||
</Text>
|
||||
<Text mb="md">
|
||||
This is standard text describing the components below. Watch how the font changes when you switch
|
||||
density.
|
||||
</Text>
|
||||
<Group>
|
||||
<Badge color="brand">Brand Badge</Badge>
|
||||
<Badge color="success" variant="light">
|
||||
Success Status
|
||||
</Badge>
|
||||
<Badge color="error" variant="outline">
|
||||
Error State
|
||||
</Badge>
|
||||
</Group>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div>
|
||||
<Title order={4} mb="md">
|
||||
Buttons
|
||||
</Title>
|
||||
<Group>
|
||||
<Button variant="filled" color="brand">
|
||||
Filled Button
|
||||
</Button>
|
||||
<Button variant="outline" color="brand">
|
||||
Outline Button
|
||||
</Button>
|
||||
<Button variant="light" color="info">
|
||||
Light Info
|
||||
</Button>
|
||||
<Button variant="subtle" color="error">
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</div>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* =========================================
|
||||
COMPLEX FORMS (ERP STYLE)
|
||||
========================================= */}
|
||||
<Card withBorder shadow="sm" radius="md" p="md">
|
||||
<Title order={4} mb="md">
|
||||
Form Elements
|
||||
</Title>
|
||||
<Stack gap="md">
|
||||
<Group grow align="flex-start">
|
||||
<TextInput label="First Name" placeholder="Enter your first name" withAsterisk />
|
||||
<TextInput label="Last Name" placeholder="Enter your last name" />
|
||||
</Group>
|
||||
|
||||
<Group grow align="flex-start">
|
||||
<NumberInput label="Age" placeholder="25" min={0} max={100} />
|
||||
<PasswordInput label="Password" placeholder="Your secret password" withAsterisk />
|
||||
</Group>
|
||||
|
||||
<Textarea label="Bio" placeholder="Tell us about yourself" minRows={3} />
|
||||
|
||||
<Group mt="sm">
|
||||
<Checkbox label="I agree to the terms and conditions" defaultChecked />
|
||||
<Switch label="Enable notifications" defaultChecked />
|
||||
</Group>
|
||||
|
||||
<Radio.Group name="favoriteFramework" label="Select your favorite framework" withAsterisk>
|
||||
<Group mt="xs">
|
||||
<Radio value="react" label="React" />
|
||||
<Radio value="svelte" label="Svelte" />
|
||||
<Radio value="vue" label="Vue" />
|
||||
</Group>
|
||||
</Radio.Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* =========================================
|
||||
DATA GRID / TABLE
|
||||
========================================= */}
|
||||
<Card withBorder shadow="sm" radius="md" p="md">
|
||||
<Title order={4} mb="md">
|
||||
Data Grid
|
||||
</Title>
|
||||
<Table striped highlightOnHover withTableBorder withColumnBorders>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Order ID</Table.Th>
|
||||
<Table.Th>Customer</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
<Table.Th>Total Amount</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{tableData.map((row) => (
|
||||
<Table.Tr key={row.id}>
|
||||
<Table.Td>{row.id}</Table.Td>
|
||||
<Table.Td>{row.customer}</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
size="sm"
|
||||
color={row.status === 'Delivered' ? 'success' : row.status === 'Shipped' ? 'info' : 'warning'}
|
||||
>
|
||||
{row.status}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>{row.total}</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1 +1,3 @@
|
||||
@import '@repo/ui/global.css';
|
||||
@import 'tailwindcss';
|
||||
@import '@repo/ui/theme.css';
|
||||
@source "../../../packages/ui/src";
|
||||
|
||||
@@ -2,8 +2,10 @@
|
||||
"name": "@repo/ui",
|
||||
"version": "0.0.0",
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./global.css": "./src/globals.css"
|
||||
"./theme.css": "./src/theme.css",
|
||||
"./components": "./src/components/index.ts",
|
||||
"./hooks": "./src/hooks/index.ts",
|
||||
"./provider": "./src/provider/index.ts"
|
||||
},
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
@@ -11,12 +13,15 @@
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@repo/utils": "workspace:*",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"dayjs": "^1.11.19",
|
||||
"peerDependencies": {
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"react-dom": "^19.2.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mantine/core": "^8.3.15",
|
||||
"@mantine/hooks": "^8.3.15",
|
||||
"@repo/utils": "workspace:*",
|
||||
"dayjs": "^1.11.19",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwind-variants": "^3.2.2",
|
||||
"tailwindcss": "^4.1.18"
|
||||
@@ -24,10 +29,13 @@
|
||||
"devDependencies": {
|
||||
"@repo/eslint-config": "workspace:*",
|
||||
"@repo/typescript-config": "workspace:*",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.2",
|
||||
"eslint": "^8.57.1",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"typescript": "5.5.4",
|
||||
"vite": "^5.1.4",
|
||||
"vitest": "^4.0.17"
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
export * from '@mantine/core';
|
||||
|
||||
export * from './system-pages/coming-soon';
|
||||
export * from './system-pages/forbidden';
|
||||
export * from './system-pages/maintenance';
|
||||
|
||||
@@ -2,35 +2,32 @@ interface ComingSoonProps {
|
||||
showActions?: boolean;
|
||||
}
|
||||
|
||||
export function ComingSoon(props: ComingSoonProps) {
|
||||
const { showActions = false } = props;
|
||||
import { Title, Text, Button, Container, Stack, Center } from '@mantine/core';
|
||||
|
||||
export function ComingSoon({ showActions = false }: ComingSoonProps) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-white px-4">
|
||||
<div className="w-full max-w-md text-center">
|
||||
{/* Code */}
|
||||
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">Coming Soon</p>
|
||||
<Container size="sm" h="100vh" pos="relative">
|
||||
<Center h="100%">
|
||||
<Stack align="center" ta="center" gap="md">
|
||||
<Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
|
||||
Coming Soon
|
||||
</Text>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="mt-3 text-6xl font-extrabold text-brand-900">Feature in Progress</h1>
|
||||
<Title order={1} fw={900} c="brand">
|
||||
Feature in Progress
|
||||
</Title>
|
||||
|
||||
{/* Description */}
|
||||
<p className="mt-4 text-base text-gray-500">
|
||||
<Text size="md" c="dimmed">
|
||||
This feature is currently under development. Stay tuned! We'll have it ready for you very soon.
|
||||
</p>
|
||||
</Text>
|
||||
|
||||
{/* Actions */}
|
||||
{showActions && (
|
||||
<div className="mt-8 flex justify-center gap-3">
|
||||
<a
|
||||
href="/"
|
||||
className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
|
||||
>
|
||||
<Button component="a" href="/" color="brand" size="md" mt="xl">
|
||||
Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,47 +3,43 @@ interface ForbiddenProps {
|
||||
showActionsHome?: boolean;
|
||||
}
|
||||
|
||||
export function Forbidden(props: ForbiddenProps) {
|
||||
const { showActionsBack = true, showActionsHome = true } = props;
|
||||
import { Title, Text, Button, Container, Stack, Group, Center } from '@mantine/core';
|
||||
|
||||
export function Forbidden({ showActionsBack = true, showActionsHome = true }: ForbiddenProps) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-white px-4">
|
||||
<div className="w-full max-w-md text-center">
|
||||
{/* Code */}
|
||||
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">403 Error</p>
|
||||
<Container size="sm" h="100vh" pos="relative">
|
||||
<Center h="100%">
|
||||
<Stack align="center" ta="center" gap="md">
|
||||
<Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
|
||||
403 Error
|
||||
</Text>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="mt-3 text-6xl font-extrabold text-brand-900">Access Denied</h1>
|
||||
<Title order={1} fw={900} c="brand">
|
||||
Access Denied
|
||||
</Title>
|
||||
|
||||
{/* Description */}
|
||||
<p className="mt-4 text-base text-gray-500">
|
||||
Sorry, you don’t have permission to access this page. Please contact your administrator if you believe this is
|
||||
a mistake.
|
||||
</p>
|
||||
<Text size="md" c="dimmed">
|
||||
Sorry, you don’t have permission to access this page. Please contact your administrator if you believe this
|
||||
is a mistake.
|
||||
</Text>
|
||||
|
||||
{/* Actions */}
|
||||
{(showActionsBack || showActionsHome) && (
|
||||
<div className="mt-8 flex justify-center gap-3">
|
||||
<Group mt="xl" justify="center">
|
||||
{showActionsBack && (
|
||||
<button
|
||||
onClick={() => window.history.back()}
|
||||
className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 cursor-pointer"
|
||||
>
|
||||
<Button variant="default" size="md" onClick={() => window.history.back()}>
|
||||
Go Back
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{showActionsHome && (
|
||||
<a
|
||||
href="/"
|
||||
className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
|
||||
>
|
||||
<Button component="a" href="/" color="brand" size="md">
|
||||
Back to Home
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Group>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,36 +2,33 @@ interface MaintenanceProps {
|
||||
showActions?: boolean;
|
||||
}
|
||||
|
||||
export function Maintenance(props: MaintenanceProps) {
|
||||
const { showActions = false } = props;
|
||||
import { Title, Text, Button, Container, Stack, Center } from '@mantine/core';
|
||||
|
||||
export function Maintenance({ showActions = false }: MaintenanceProps) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-white px-4">
|
||||
<div className="w-full max-w-md text-center">
|
||||
{/* Code */}
|
||||
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">Maintenance</p>
|
||||
<Container size="sm" h="100vh" pos="relative">
|
||||
<Center h="100%">
|
||||
<Stack align="center" ta="center" gap="md">
|
||||
<Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
|
||||
Maintenance
|
||||
</Text>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="mt-3 text-6xl font-extrabold text-brand-900">We'll Be Back Soon</h1>
|
||||
<Title order={1} fw={900} c="brand">
|
||||
We'll Be Back Soon
|
||||
</Title>
|
||||
|
||||
{/* Description */}
|
||||
<p className="mt-4 text-base text-gray-500">
|
||||
Our system is currently undergoing scheduled maintenance. We are working hard to bring it back online as soon
|
||||
as possible.
|
||||
</p>
|
||||
<Text size="md" c="dimmed">
|
||||
Our system is currently undergoing scheduled maintenance. We are working hard to bring it back online as
|
||||
soon as possible.
|
||||
</Text>
|
||||
|
||||
{/* Optional Actions */}
|
||||
{showActions && (
|
||||
<div className="mt-8 flex justify-center gap-3">
|
||||
<a
|
||||
href="/"
|
||||
className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
|
||||
>
|
||||
<Button component="a" href="/" color="brand" size="md" mt="xl">
|
||||
Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,42 +3,42 @@ interface NotFoundProps {
|
||||
showActionsHome?: boolean;
|
||||
}
|
||||
|
||||
export function NotFound(props: NotFoundProps) {
|
||||
const { showActionsBack = true, showActionsHome = true } = props;
|
||||
import { Title, Text, Button, Container, Stack, Group, Center } from '@mantine/core';
|
||||
|
||||
export function NotFound({ showActionsBack = true, showActionsHome = true }: NotFoundProps) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-white px-4">
|
||||
<div className="w-full max-w-md text-center">
|
||||
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">404 Error</p>
|
||||
<Container size="sm" h="100vh" pos="relative">
|
||||
<Center h="100%">
|
||||
<Stack align="center" ta="center" gap="md">
|
||||
<Text size="sm" fw={500} tt="uppercase" c="dimmed" lts="var(--mantine-spacing-xs)">
|
||||
404 Error
|
||||
</Text>
|
||||
|
||||
<h1 className="mt-3 text-6xl font-extrabold text-brand-900">Page Not Found</h1>
|
||||
<Title order={1} fw={900} c="brand">
|
||||
Page Not Found
|
||||
</Title>
|
||||
|
||||
<p className="mt-4 text-base text-gray-500">
|
||||
<Text size="md" c="dimmed">
|
||||
Sorry, the page you’re looking for doesn’t exist or has been moved.
|
||||
</p>
|
||||
</Text>
|
||||
|
||||
{(showActionsBack || showActionsHome) && (
|
||||
<div className="mt-8 flex justify-center gap-3">
|
||||
<Group mt="xl" justify="center">
|
||||
{showActionsBack && (
|
||||
<button
|
||||
onClick={() => window.history.back()}
|
||||
className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 cursor-pointer"
|
||||
>
|
||||
<Button variant="default" size="md" onClick={() => window.history.back()}>
|
||||
Go Back
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{showActionsHome && (
|
||||
<a
|
||||
href="/"
|
||||
className="rounded-md bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-400"
|
||||
>
|
||||
<Button component="a" href="/" color="brand" size="md">
|
||||
Back to Home
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Group>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,222 +0,0 @@
|
||||
@import 'tailwindcss';
|
||||
@source "../src";
|
||||
|
||||
/* =========================================
|
||||
THEME VARIABLES (CENTRALIZED)
|
||||
========================================= */
|
||||
@theme {
|
||||
/* -------------------------------
|
||||
COLORS: PALETTE
|
||||
------------------------------- */
|
||||
/* Brand (Purple based on your code) */
|
||||
--color-brand-50: #f5f3fd;
|
||||
--color-brand-100: #e6dbfb;
|
||||
--color-brand-200: #d0b6f8;
|
||||
--color-brand-300: #b78ff5;
|
||||
--color-brand-400: #9f64f1;
|
||||
--color-brand-500: #7d39ed; /* Primary */
|
||||
--color-brand-600: #652ed9;
|
||||
--color-brand-700: #4a23a5;
|
||||
--color-brand-800: #321a7a;
|
||||
--color-brand-900: #1b0f4a;
|
||||
|
||||
/* Neutrals */
|
||||
--color-gray-50: #f5f6f7;
|
||||
--color-gray-100: #eceff1;
|
||||
--color-gray-200: #e0e3e7;
|
||||
--color-gray-300: #d1d5db;
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-500: #6b7280;
|
||||
--color-gray-600: #4b5563;
|
||||
--color-gray-700: #374151;
|
||||
--color-gray-800: #1f2937;
|
||||
--color-gray-900: #111827;
|
||||
|
||||
/* -------------------------------
|
||||
COLORS: SEMANTICS (COMPLETED)
|
||||
------------------------------- */
|
||||
|
||||
/* Error (Red) */
|
||||
--color-error-50: #fef2f2;
|
||||
--color-error-100: #fee2e2;
|
||||
--color-error-200: #fecaca;
|
||||
--color-error-300: #fca5a5;
|
||||
--color-error-400: #f87171;
|
||||
--color-error-500: #ef4444;
|
||||
--color-error-600: #dc2626;
|
||||
--color-error-700: #b91c1c;
|
||||
--color-error-800: #991b1b;
|
||||
--color-error-900: #7f1d1d;
|
||||
|
||||
/* Warning (Amber/Orange) */
|
||||
--color-warning-50: #fffbeb;
|
||||
--color-warning-100: #fef3c7;
|
||||
--color-warning-200: #fde68a;
|
||||
--color-warning-300: #fcd34d;
|
||||
--color-warning-400: #fbbf24;
|
||||
--color-warning-500: #f59e0b;
|
||||
--color-warning-600: #d97706;
|
||||
--color-warning-700: #b45309;
|
||||
--color-warning-800: #92400e;
|
||||
--color-warning-900: #78350f;
|
||||
|
||||
/* Success (Green) */
|
||||
--color-success-50: #f0fdf4;
|
||||
--color-success-100: #dcfce7;
|
||||
--color-success-200: #bbf7d0;
|
||||
--color-success-300: #86efac;
|
||||
--color-success-400: #4ade80;
|
||||
--color-success-500: #22c55e;
|
||||
--color-success-600: #16a34a;
|
||||
--color-success-700: #15803d;
|
||||
--color-success-800: #166534;
|
||||
--color-success-900: #14532d;
|
||||
|
||||
/* Info (Blue/Sky) */
|
||||
--color-info-50: #f0f9ff;
|
||||
--color-info-100: #e0f2fe;
|
||||
--color-info-200: #bae6fd;
|
||||
--color-info-300: #7dd3fc;
|
||||
--color-info-400: #38bdf8;
|
||||
--color-info-500: #0ea5e9;
|
||||
--color-info-600: #0284c7;
|
||||
--color-info-700: #0369a1;
|
||||
--color-info-800: #075985;
|
||||
--color-info-900: #0c4a6e;
|
||||
|
||||
/* -------------------------------
|
||||
BASE FONT & TYPOGRAPHY
|
||||
------------------------------- */
|
||||
--base-font-size: 13px;
|
||||
|
||||
/* Scale */
|
||||
--text-xs: calc(var(--base-font-size) * 0.846); /* ~11px */
|
||||
--text-sm: calc(var(--base-font-size) * 0.923); /* ~12px */
|
||||
--text-base: var(--base-font-size); /* 13px */
|
||||
--text-lg: calc(var(--base-font-size) * 1.154); /* ~15px */
|
||||
--text-xl: calc(var(--base-font-size) * 1.385); /* ~18px */
|
||||
--text-2xl: calc(var(--base-font-size) * 1.692); /* ~22px */
|
||||
|
||||
/* Weights */
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* -------------------------------
|
||||
SHAPE & DEPTH
|
||||
------------------------------- */
|
||||
--radius-sm: 0.125rem; /* 2px */
|
||||
--radius-md: 0.25rem; /* 4px */
|
||||
--radius-lg: 0.5rem; /* 8px */
|
||||
--radius-xl: 0.75rem; /* 12px */
|
||||
|
||||
/* -------------------------------
|
||||
FORM ITEM SPECIFICS
|
||||
------------------------------- */
|
||||
/* Form Item Spacing */
|
||||
--form-item-margin-bottom: 1.25rem; /* 20px */
|
||||
|
||||
/* Label Configuration */
|
||||
--form-label-font-size: var(--text-sm); /* Uses scale text-sm (~12px) */
|
||||
--form-label-color: var(--color-gray-700);
|
||||
--form-label-font-weight: var(--font-weight-medium);
|
||||
--form-label-margin-bottom: 0.375rem; /* ~6px */
|
||||
|
||||
/* Error/Warning Message Configuration */
|
||||
--form-msg-font-size: var(--text-xs); /* Uses scale text-xs (~11px) */
|
||||
--form-msg-margin-top: 0.375rem; /* ~6px */
|
||||
|
||||
--input-height: 2.6rem; /* ~34px */
|
||||
--input-font-size: var(--text-base);
|
||||
--input-padding-x: 0.92rem; /* ~12px */
|
||||
--input-padding-y: 0.62rem; /* ~8px */
|
||||
--input-radius: 0.375rem; /* 6px */
|
||||
|
||||
/* Input Number Specific */
|
||||
--input-handler-width: 1.5rem; /* 24px (Slightly wider for better clickable) */
|
||||
/* Textarea Specific */
|
||||
--textarea-min-height: 6.15rem; /* 80px */
|
||||
--textarea-padding-x: 0.92rem; /* 12px */
|
||||
--textarea-padding-y: 0.62rem; /* 8px */
|
||||
|
||||
/* Input Colors */
|
||||
--input-bg: #ffffff;
|
||||
--input-border: var(--color-gray-300);
|
||||
--input-border-hover: var(--color-brand-400);
|
||||
--input-text: var(--color-gray-800);
|
||||
--input-placeholder: var(--color-gray-400);
|
||||
|
||||
--focus-ring-color: var(--color-brand-100);
|
||||
--focus-border-color: var(--color-brand-500);
|
||||
|
||||
--disabled-bg: #f3f4f6;
|
||||
--disabled-text: var(--color-gray-400);
|
||||
--disabled-border: #e5e7eb;
|
||||
|
||||
/* CHECKBOX & RADIO COMPONENT VARIABLES*/
|
||||
|
||||
/* 16px is a perfect fit for a 13px font size.
|
||||
It's easier to read than 14px, but not overpowering. */
|
||||
--checkbox-size: 16px; /* ~16px (relative to 13px base) */
|
||||
--checkbox-radius: var(--radius-md);
|
||||
|
||||
/* * Position the check mark icon precisely in the center of the 16px box */
|
||||
--checkbox-check-width: 5px;
|
||||
--checkbox-check-height: 9px;
|
||||
--checkbox-check-top: 1.5px; /* Fine-tuning vertical position */
|
||||
--checkbox-check-left: 4.5px; /* Fine-tuning horizontal position */
|
||||
|
||||
/* SWITCH COMPONENT VARIABLES */
|
||||
|
||||
/* Using pixels (px) for Switch is often safer
|
||||
to avoid sub-pixel rendering artifacts (circles becoming oval)
|
||||
on low screen resolutions, while still maintaining proportion to the rest scale. */
|
||||
|
||||
/* A height of 20px fits with a line-height of 13px text,
|
||||
A width of 36px provides a compact and modern ratio. */
|
||||
--switch-width: 36px;
|
||||
--switch-height: 20px;
|
||||
|
||||
/* Handle (lingkaran) = Height - (Padding * 2) */
|
||||
/* 20px - (2px * 2) = 16px */
|
||||
--switch-handle-size: 16px;
|
||||
--switch-padding: 2px; /* Distance between handle and edge */
|
||||
|
||||
/* Calculate active position (Checked) */
|
||||
/* 36px - 16px - 2px = 18px */
|
||||
--switch-checked-pos: calc(var(--switch-width) - var(--switch-handle-size) - var(--switch-padding));
|
||||
|
||||
/* Additional variable for label inside switch (ON/OFF text) if any */
|
||||
--switch-inner-margin-left: 6px;
|
||||
--switch-inner-margin-right: 20px;
|
||||
/* Margin Calculation for Inner Text */
|
||||
/* Handle edge spacing: Handle size (16px) + Padding (2px) + Gap (4px) = 22px */
|
||||
--switch-inner-indent-handle: 22px;
|
||||
/* Empty edge spacing: Padding (2px) + Gap (4px) = 6px */
|
||||
--switch-inner-indent-edge: 6px;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
BASE RESETS
|
||||
========================================= */
|
||||
@layer base {
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: #ffffff;
|
||||
color: var(--color-gray-800);
|
||||
font-size: var(--base-font-size);
|
||||
line-height: var(--text-base--line-height);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from '@mantine/hooks';
|
||||
@@ -1,2 +0,0 @@
|
||||
// UI Components
|
||||
export * from './components';
|
||||
@@ -0,0 +1 @@
|
||||
export * from './theme-provider';
|
||||
@@ -0,0 +1,50 @@
|
||||
import { MantineProvider, createTheme, mergeThemeOverrides } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import { brandColors, errorColors, warningColors, successColors, infoColors } from '../theme/tokens/colors';
|
||||
import { typography } from '../theme/tokens/typography';
|
||||
import { radius } from '../theme/tokens/radius';
|
||||
import { compactDensity, standardDensity } from '../theme/tokens/density';
|
||||
|
||||
export type ColorSchemeType = 'light' | 'dark';
|
||||
export type DensityType = 'compact' | 'standard';
|
||||
|
||||
interface ThemeProviderProps {
|
||||
children: React.ReactNode;
|
||||
colorScheme?: ColorSchemeType;
|
||||
density?: DensityType;
|
||||
}
|
||||
|
||||
const densityMap = {
|
||||
compact: compactDensity,
|
||||
standard: standardDensity,
|
||||
};
|
||||
|
||||
export function ThemeProvider({ children, colorScheme = 'light', density = 'standard' }: ThemeProviderProps) {
|
||||
const baseTheme = createTheme({
|
||||
colors: {
|
||||
brand: brandColors,
|
||||
error: errorColors,
|
||||
warning: warningColors,
|
||||
success: successColors,
|
||||
info: infoColors,
|
||||
},
|
||||
primaryColor: 'brand',
|
||||
fontFamily: typography.fontFamily,
|
||||
fontFamilyMonospace: typography.fontFamilyMonospace,
|
||||
headings: typography.headings,
|
||||
radius: radius,
|
||||
});
|
||||
|
||||
const selectedDensity = densityMap[density];
|
||||
const mergedTheme = mergeThemeOverrides(baseTheme, selectedDensity);
|
||||
|
||||
return (
|
||||
<MantineProvider
|
||||
theme={mergedTheme}
|
||||
forceColorScheme={colorScheme}
|
||||
defaultColorScheme={colorScheme}
|
||||
>
|
||||
{children}
|
||||
</MantineProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
@import '@mantine/core/styles.css';
|
||||
@import 'tailwindcss';
|
||||
@source "../src";
|
||||
|
||||
@theme {
|
||||
/* =========================================
|
||||
FONT FAMILY MAPPING (Mantine -> Tailwind)
|
||||
========================================= */
|
||||
--base-font-size: 13px;
|
||||
--font-sans: var(--mantine-font-family);
|
||||
--font-mono: var(--mantine-font-family-monospace);
|
||||
|
||||
/* =========================================
|
||||
1. COLORS (Strictly mapped to Mantine 0-9)
|
||||
========================================= */
|
||||
--color-brand-50: var(--mantine-color-brand-0);
|
||||
--color-brand-100: var(--mantine-color-brand-1);
|
||||
--color-brand-200: var(--mantine-color-brand-2);
|
||||
--color-brand-300: var(--mantine-color-brand-3);
|
||||
--color-brand-400: var(--mantine-color-brand-4);
|
||||
--color-brand-500: var(--mantine-color-brand-5);
|
||||
--color-brand-600: var(--mantine-color-brand-6);
|
||||
--color-brand-700: var(--mantine-color-brand-7);
|
||||
--color-brand-800: var(--mantine-color-brand-8);
|
||||
--color-brand-900: var(--mantine-color-brand-9);
|
||||
|
||||
--color-error-50: var(--mantine-color-error-0);
|
||||
--color-error-100: var(--mantine-color-error-1);
|
||||
--color-error-200: var(--mantine-color-error-2);
|
||||
--color-error-300: var(--mantine-color-error-3);
|
||||
--color-error-400: var(--mantine-color-error-4);
|
||||
--color-error-500: var(--mantine-color-error-5);
|
||||
--color-error-600: var(--mantine-color-error-6);
|
||||
--color-error-700: var(--mantine-color-error-7);
|
||||
--color-error-800: var(--mantine-color-error-8);
|
||||
--color-error-900: var(--mantine-color-error-9);
|
||||
|
||||
--color-warning-50: var(--mantine-color-warning-0);
|
||||
--color-warning-100: var(--mantine-color-warning-1);
|
||||
--color-warning-200: var(--mantine-color-warning-2);
|
||||
--color-warning-300: var(--mantine-color-warning-3);
|
||||
--color-warning-400: var(--mantine-color-warning-4);
|
||||
--color-warning-500: var(--mantine-color-warning-5);
|
||||
--color-warning-600: var(--mantine-color-warning-6);
|
||||
--color-warning-700: var(--mantine-color-warning-7);
|
||||
--color-warning-800: var(--mantine-color-warning-8);
|
||||
--color-warning-900: var(--mantine-color-warning-9);
|
||||
|
||||
--color-success-50: var(--mantine-color-success-0);
|
||||
--color-success-100: var(--mantine-color-success-1);
|
||||
--color-success-200: var(--mantine-color-success-2);
|
||||
--color-success-300: var(--mantine-color-success-3);
|
||||
--color-success-400: var(--mantine-color-success-4);
|
||||
--color-success-500: var(--mantine-color-success-5);
|
||||
--color-success-600: var(--mantine-color-success-6);
|
||||
--color-success-700: var(--mantine-color-success-7);
|
||||
--color-success-800: var(--mantine-color-success-8);
|
||||
--color-success-900: var(--mantine-color-success-9);
|
||||
|
||||
--color-info-50: var(--mantine-color-info-0);
|
||||
--color-info-100: var(--mantine-color-info-1);
|
||||
--color-info-200: var(--mantine-color-info-2);
|
||||
--color-info-300: var(--mantine-color-info-3);
|
||||
--color-info-400: var(--mantine-color-info-4);
|
||||
--color-info-500: var(--mantine-color-info-5);
|
||||
--color-info-600: var(--mantine-color-info-6);
|
||||
--color-info-700: var(--mantine-color-info-7);
|
||||
--color-info-800: var(--mantine-color-info-8);
|
||||
--color-info-900: var(--mantine-color-info-9);
|
||||
|
||||
/* =========================================
|
||||
2. SPACING & CONTAINERS
|
||||
========================================= */
|
||||
--spacing: 0.25rem;
|
||||
|
||||
/* Core mapped to Mantine */
|
||||
--spacing-xs: var(--mantine-spacing-xs);
|
||||
--spacing-sm: var(--mantine-spacing-sm);
|
||||
--spacing-md: var(--mantine-spacing-md);
|
||||
--spacing-lg: var(--mantine-spacing-lg);
|
||||
--spacing-xl: var(--mantine-spacing-xl);
|
||||
|
||||
--breakpoint-sm: 40rem;
|
||||
--breakpoint-md: 48rem;
|
||||
--breakpoint-lg: 64rem;
|
||||
--breakpoint-xl: 80rem;
|
||||
--breakpoint-2xl: 96rem;
|
||||
--container-3xs: 16rem;
|
||||
--container-2xs: 18rem;
|
||||
--container-xs: 20rem;
|
||||
--container-sm: 24rem;
|
||||
--container-md: 28rem;
|
||||
--container-lg: 32rem;
|
||||
--container-xl: 36rem;
|
||||
--container-2xl: 42rem;
|
||||
--container-3xl: 48rem;
|
||||
--container-4xl: 56rem;
|
||||
--container-5xl: 64rem;
|
||||
--container-6xl: 72rem;
|
||||
--container-7xl: 80rem;
|
||||
|
||||
/* =========================================
|
||||
3. TYPOGRAPHY
|
||||
========================================= */
|
||||
/* Core text sizes mapped to Mantine, extended kept static */
|
||||
--text-xs: var(--mantine-font-size-xs);
|
||||
--text-xs--line-height: calc(1 / 0.75);
|
||||
--text-sm: var(--mantine-font-size-sm);
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-base: var(--mantine-font-size-md);
|
||||
--text-base--line-height: calc(1.5 / 1);
|
||||
--text-lg: var(--mantine-font-size-lg);
|
||||
--text-lg--line-height: calc(1.75 / 1.125);
|
||||
--text-xl: var(--mantine-font-size-xl);
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
|
||||
--text-2xl: 1.5rem;
|
||||
--text-2xl--line-height: calc(2 / 1.5);
|
||||
--text-3xl: 1.875rem;
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--text-4xl: 2.25rem;
|
||||
--text-4xl--line-height: calc(2.5 / 2.25);
|
||||
--text-5xl: 3rem;
|
||||
--text-5xl--line-height: 1;
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl--line-height: 1;
|
||||
--text-7xl: 4.5rem;
|
||||
--text-7xl--line-height: 1;
|
||||
--text-8xl: 6rem;
|
||||
--text-8xl--line-height: 1;
|
||||
--text-9xl: 8rem;
|
||||
--text-9xl--line-height: 1;
|
||||
|
||||
--font-weight-thin: 100;
|
||||
--font-weight-extralight: 200;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extrabold: 800;
|
||||
--font-weight-black: 900;
|
||||
|
||||
--tracking-tighter: -0.05em;
|
||||
--tracking-tight: -0.025em;
|
||||
--tracking-normal: 0em;
|
||||
--tracking-wide: 0.025em;
|
||||
--tracking-wider: 0.05em;
|
||||
--tracking-widest: 0.1em;
|
||||
|
||||
--leading-tight: 1.25;
|
||||
--leading-snug: 1.375;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
|
||||
/* =========================================
|
||||
4. RADIUS
|
||||
========================================= */
|
||||
--radius-xs: var(--mantine-radius-xs);
|
||||
--radius-sm: var(--mantine-radius-sm);
|
||||
--radius-md: var(--mantine-radius-md);
|
||||
--radius-lg: var(--mantine-radius-lg);
|
||||
--radius-xl: var(--mantine-radius-xl);
|
||||
--radius-2xl: 1rem;
|
||||
--radius-3xl: 1.5rem;
|
||||
--radius-4xl: 2rem;
|
||||
|
||||
/* =========================================
|
||||
5. SHADOWS & BLURS
|
||||
========================================= */
|
||||
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
|
||||
--shadow-xs: var(--mantine-shadow-xs);
|
||||
--shadow-sm: var(--mantine-shadow-sm);
|
||||
--shadow-md: var(--mantine-shadow-md);
|
||||
--shadow-lg: var(--mantine-shadow-lg);
|
||||
--shadow-xl: var(--mantine-shadow-xl);
|
||||
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
|
||||
--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
|
||||
--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
|
||||
--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
|
||||
|
||||
--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
|
||||
--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
|
||||
--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
|
||||
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
|
||||
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
|
||||
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
|
||||
|
||||
--text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
|
||||
--text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
|
||||
--text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
|
||||
--text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
|
||||
--text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
|
||||
|
||||
--blur-xs: 4px;
|
||||
--blur-sm: 8px;
|
||||
--blur-md: 12px;
|
||||
--blur-lg: 16px;
|
||||
--blur-xl: 24px;
|
||||
--blur-2xl: 40px;
|
||||
--blur-3xl: 64px;
|
||||
|
||||
/* =========================================
|
||||
6. MISCELLANEOUS (Aspect, Anim, Perspective)
|
||||
========================================= */
|
||||
--perspective-dramatic: 100px;
|
||||
--perspective-near: 300px;
|
||||
--perspective-normal: 500px;
|
||||
--perspective-midrange: 800px;
|
||||
--perspective-distant: 1200px;
|
||||
|
||||
--aspect-video: 16 / 9;
|
||||
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
--animate-spin: spin 1s linear infinite;
|
||||
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
--animate-bounce: bounce 1s infinite;
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes ping {
|
||||
75%,
|
||||
100% {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
BASE RESETS
|
||||
========================================= */
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
font-size: var(--base-font-size);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { MantineColorsTuple } from '@mantine/core';
|
||||
|
||||
export const brandColors: MantineColorsTuple = [
|
||||
'#f5f3fd', // 50
|
||||
'#e6dbfb', // 100
|
||||
'#d0b6f8', // 200
|
||||
'#b78ff5', // 300
|
||||
'#9f64f1', // 400
|
||||
'#7d39ed', // 500 (Primary)
|
||||
'#652ed9', // 600
|
||||
'#4a23a5', // 700
|
||||
'#321a7a', // 800
|
||||
'#1b0f4a', // 900
|
||||
];
|
||||
|
||||
export const errorColors: MantineColorsTuple = [
|
||||
'#fef2f2',
|
||||
'#fee2e2',
|
||||
'#fecaca',
|
||||
'#fca5a5',
|
||||
'#f87171',
|
||||
'#ef4444',
|
||||
'#dc2626',
|
||||
'#b91c1c',
|
||||
'#991b1b',
|
||||
'#7f1d1d',
|
||||
];
|
||||
|
||||
export const warningColors: MantineColorsTuple = [
|
||||
'#fffbeb',
|
||||
'#fef3c7',
|
||||
'#fde68a',
|
||||
'#fcd34d',
|
||||
'#fbbf24',
|
||||
'#f59e0b',
|
||||
'#d97706',
|
||||
'#b45309',
|
||||
'#92400e',
|
||||
'#78350f',
|
||||
];
|
||||
|
||||
export const successColors: MantineColorsTuple = [
|
||||
'#f0fdf4',
|
||||
'#dcfce7',
|
||||
'#bbf7d0',
|
||||
'#86efac',
|
||||
'#4ade80',
|
||||
'#22c55e',
|
||||
'#16a34a',
|
||||
'#15803d',
|
||||
'#166534',
|
||||
'#14532d',
|
||||
];
|
||||
|
||||
export const infoColors: MantineColorsTuple = [
|
||||
'#f0f9ff',
|
||||
'#e0f2fe',
|
||||
'#bae6fd',
|
||||
'#7dd3fc',
|
||||
'#38bdf8',
|
||||
'#0ea5e9',
|
||||
'#0284c7',
|
||||
'#0369a1',
|
||||
'#075985',
|
||||
'#0c4a6e',
|
||||
];
|
||||
|
||||
export const grayColors: MantineColorsTuple = [
|
||||
'#f5f6f7',
|
||||
'#eceff1',
|
||||
'#e0e3e7',
|
||||
'#d1d5db',
|
||||
'#9ca3af',
|
||||
'#6b7280',
|
||||
'#4b5563',
|
||||
'#374151',
|
||||
'#1f2937',
|
||||
'#111827',
|
||||
];
|
||||
@@ -0,0 +1,100 @@
|
||||
import { MantineThemeOverride } from '@mantine/core';
|
||||
|
||||
export const standardDensity: MantineThemeOverride = {
|
||||
spacing: { xs: '0.5rem', sm: '0.75rem', md: '1rem', lg: '1.5rem', xl: '2rem' },
|
||||
fontSizes: { xs: '0.75rem', sm: '0.875rem', md: '1rem', lg: '1.125rem', xl: '1.25rem' },
|
||||
components: {
|
||||
// Inputs & Buttons
|
||||
Button: { defaultProps: { size: 'md' } },
|
||||
TextInput: { defaultProps: { size: 'md' } },
|
||||
Select: { defaultProps: { size: 'md' } },
|
||||
NumberInput: { defaultProps: { size: 'md' } },
|
||||
PasswordInput: { defaultProps: { size: 'md' } },
|
||||
Textarea: { defaultProps: { size: 'md' } },
|
||||
MultiSelect: { defaultProps: { size: 'md' } },
|
||||
DatePickerInput: { defaultProps: { size: 'md' } },
|
||||
|
||||
// Toggles
|
||||
Checkbox: { defaultProps: { size: 'md' } },
|
||||
Radio: { defaultProps: { size: 'md' } },
|
||||
Switch: { defaultProps: { size: 'md' } },
|
||||
|
||||
// Data Display & Layout
|
||||
Badge: { defaultProps: { size: 'md' } },
|
||||
Pagination: { defaultProps: { size: 'md' } },
|
||||
Table: { defaultProps: { verticalSpacing: 'sm', horizontalSpacing: 'md' } },
|
||||
Card: { defaultProps: { padding: 'md' } },
|
||||
Modal: { defaultProps: { padding: 'md' } },
|
||||
},
|
||||
};
|
||||
|
||||
export const compactDensity: MantineThemeOverride = {
|
||||
spacing: { xs: '0.25rem', sm: '0.5rem', md: '0.75rem', lg: '1rem', xl: '1.5rem' },
|
||||
fontSizes: { xs: '0.6875rem', sm: '0.75rem', md: '0.8125rem', lg: '0.9375rem', xl: '1.125rem' },
|
||||
components: {
|
||||
// 1. Text Inputs (Physical size 'sm')
|
||||
TextInput: { defaultProps: { size: 'sm' } },
|
||||
Select: { defaultProps: { size: 'sm' } },
|
||||
NumberInput: { defaultProps: { size: 'sm' } },
|
||||
PasswordInput: { defaultProps: { size: 'sm' } },
|
||||
Textarea: { defaultProps: { size: 'sm' } },
|
||||
MultiSelect: { defaultProps: { size: 'sm' } },
|
||||
DatePickerInput: { defaultProps: { size: 'sm' } },
|
||||
|
||||
// 2. Form Toggles (Checkbox 16px, Switch compact)
|
||||
Checkbox: {
|
||||
defaultProps: { size: 'sm' },
|
||||
styles: {
|
||||
label: { fontSize: 'var(--mantine-font-size-md)' }, // Paksa teks label 13px
|
||||
},
|
||||
},
|
||||
Radio: {
|
||||
defaultProps: { size: 'sm' },
|
||||
styles: {
|
||||
label: { fontSize: 'var(--mantine-font-size-md)' }, // Paksa teks label 13px
|
||||
},
|
||||
},
|
||||
Switch: {
|
||||
defaultProps: { size: 'sm' },
|
||||
styles: {
|
||||
label: { fontSize: 'var(--mantine-font-size-md)' }, // Paksa teks label 13px
|
||||
},
|
||||
},
|
||||
|
||||
// 3. Data Display (Badges, Pagination for Tables)
|
||||
Badge: { defaultProps: { size: 'sm' } },
|
||||
Pagination: { defaultProps: { size: 'sm' } },
|
||||
|
||||
// 4. Tables & Layouts (Tighter padding for ERP grids)
|
||||
Table: {
|
||||
defaultProps: { verticalSpacing: 'sm', horizontalSpacing: 'sm' },
|
||||
styles: {
|
||||
th: { fontSize: 'var(--mantine-font-size-md)' }, // Header tabel 13px
|
||||
td: { fontSize: 'var(--mantine-font-size-md)' }, // Isi tabel 13px
|
||||
},
|
||||
},
|
||||
Card: { defaultProps: { padding: 'sm' } }, // Card padding mengecil
|
||||
Modal: { defaultProps: { padding: 'sm' } }, // Modal padding mengecil
|
||||
|
||||
// 5. Force 13px ('md') text inside 'sm' physical inputs
|
||||
Input: {
|
||||
styles: {
|
||||
input: { fontSize: 'var(--mantine-font-size-md)' },
|
||||
},
|
||||
},
|
||||
InputWrapper: {
|
||||
styles: {
|
||||
label: {
|
||||
fontSize: 'var(--mantine-font-size-md)',
|
||||
fontWeight: '500',
|
||||
},
|
||||
},
|
||||
},
|
||||
Button: {
|
||||
defaultProps: { size: 'sm' },
|
||||
styles: {
|
||||
root: { fontSize: 'var(--mantine-font-size-md)' },
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './colors';
|
||||
export * from './typography';
|
||||
export * from './radius';
|
||||
export * from './density';
|
||||
@@ -0,0 +1,7 @@
|
||||
export const radius = {
|
||||
xs: '0.125rem', // 2px
|
||||
sm: '0.25rem', // 4px
|
||||
md: '0.375rem', // 6px (Input radius)
|
||||
lg: '0.5rem', // 8px
|
||||
xl: '0.75rem', // 12px
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
export const typography = {
|
||||
fontFamily: " -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
|
||||
fontFamilyMonospace: ' ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
|
||||
headings: { fontFamily: " -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" },
|
||||
};
|
||||
Generated
+253
-45
@@ -161,21 +161,18 @@ importers:
|
||||
|
||||
packages/ui:
|
||||
dependencies:
|
||||
'@mantine/core':
|
||||
specifier: ^8.3.15
|
||||
version: 8.3.15(@mantine/hooks@8.3.15)(@types/react@19.2.7)(react-dom@19.2.3)(react@19.2.3)
|
||||
'@mantine/hooks':
|
||||
specifier: ^8.3.15
|
||||
version: 8.3.15(react@19.2.3)
|
||||
'@repo/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../utils
|
||||
'@tailwindcss/vite':
|
||||
specifier: ^4.1.18
|
||||
version: 4.1.18(vite@5.4.17)
|
||||
dayjs:
|
||||
specifier: ^1.11.19
|
||||
version: 1.11.19
|
||||
react:
|
||||
specifier: ^19.2.3
|
||||
version: 19.2.3
|
||||
react-dom:
|
||||
specifier: ^19.2.3
|
||||
version: 19.2.3(react@19.2.3)
|
||||
tailwind-merge:
|
||||
specifier: ^3.4.0
|
||||
version: 3.4.0
|
||||
@@ -192,6 +189,9 @@ importers:
|
||||
'@repo/typescript-config':
|
||||
specifier: workspace:*
|
||||
version: link:../configs/typescript
|
||||
'@tailwindcss/vite':
|
||||
specifier: ^4.1.18
|
||||
version: 4.1.18(vite@5.4.17)
|
||||
'@types/react':
|
||||
specifier: ^19.2.7
|
||||
version: 19.2.7
|
||||
@@ -204,6 +204,12 @@ importers:
|
||||
eslint:
|
||||
specifier: ^8.57.1
|
||||
version: 8.57.1
|
||||
react:
|
||||
specifier: ^19.2.3
|
||||
version: 19.2.3
|
||||
react-dom:
|
||||
specifier: ^19.2.3
|
||||
version: 19.2.3(react@19.2.3)
|
||||
typescript:
|
||||
specifier: 5.5.4
|
||||
version: 5.5.4
|
||||
@@ -392,7 +398,6 @@ packages:
|
||||
/@babel/runtime@7.28.4:
|
||||
resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dev: true
|
||||
|
||||
/@babel/template@7.27.2:
|
||||
resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
|
||||
@@ -899,6 +904,47 @@ packages:
|
||||
resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
|
||||
/@floating-ui/core@1.7.4:
|
||||
resolution: {integrity: sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==}
|
||||
dependencies:
|
||||
'@floating-ui/utils': 0.2.10
|
||||
dev: false
|
||||
|
||||
/@floating-ui/dom@1.7.5:
|
||||
resolution: {integrity: sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==}
|
||||
dependencies:
|
||||
'@floating-ui/core': 1.7.4
|
||||
'@floating-ui/utils': 0.2.10
|
||||
dev: false
|
||||
|
||||
/@floating-ui/react-dom@2.1.7(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
react-dom: '>=16.8.0'
|
||||
dependencies:
|
||||
'@floating-ui/dom': 1.7.5
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/@floating-ui/react@0.27.18(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-xJWJxvmy3a05j643gQt+pRbht5XnTlGpsEsAPnMi5F5YTOEEJymA90uZKBD8OvIv5XvZ1qi4GcccSlqT3Bq44Q==}
|
||||
peerDependencies:
|
||||
react: '>=17.0.0'
|
||||
react-dom: '>=17.0.0'
|
||||
dependencies:
|
||||
'@floating-ui/react-dom': 2.1.7(react-dom@19.2.3)(react@19.2.3)
|
||||
'@floating-ui/utils': 0.2.10
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
tabbable: 6.4.0
|
||||
dev: false
|
||||
|
||||
/@floating-ui/utils@0.2.10:
|
||||
resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
|
||||
dev: false
|
||||
|
||||
/@humanwhocodes/config-array@0.13.0:
|
||||
resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
|
||||
engines: {node: '>=10.10.0'}
|
||||
@@ -989,6 +1035,34 @@ packages:
|
||||
'@jridgewell/resolve-uri': 3.1.2
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
||||
/@mantine/core@8.3.15(@mantine/hooks@8.3.15)(@types/react@19.2.7)(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-wBn/GogB4x7a2Uj7Ztt3amRaApjED+9XqfE4wyCLh88R7KV55k9vnTdCx+irI/GLOOu9tXNUGm3a4t5sTajwkQ==}
|
||||
peerDependencies:
|
||||
'@mantine/hooks': 8.3.15
|
||||
react: ^18.x || ^19.x
|
||||
react-dom: ^18.x || ^19.x
|
||||
dependencies:
|
||||
'@floating-ui/react': 0.27.18(react-dom@19.2.3)(react@19.2.3)
|
||||
'@mantine/hooks': 8.3.15(react@19.2.3)
|
||||
clsx: 2.1.1
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
react-number-format: 5.4.4(react-dom@19.2.3)(react@19.2.3)
|
||||
react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
|
||||
react-textarea-autosize: 8.5.9(@types/react@19.2.7)(react@19.2.3)
|
||||
type-fest: 4.41.0
|
||||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
dev: false
|
||||
|
||||
/@mantine/hooks@8.3.15(react@19.2.3):
|
||||
resolution: {integrity: sha512-AUSnpUlzttHzJht3CJ1YWi16iy6NWRwtyWO5RLGHHsmiW05DyG0qOPKF8+R5dLHuOCnl3XOu4roI2Y1ku9U04Q==}
|
||||
peerDependencies:
|
||||
react: ^18.x || ^19.x
|
||||
dependencies:
|
||||
react: 19.2.3
|
||||
dev: false
|
||||
|
||||
/@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.3):
|
||||
resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
|
||||
peerDependencies:
|
||||
@@ -1872,7 +1946,6 @@ packages:
|
||||
magic-string: 0.30.21
|
||||
source-map-js: 1.2.1
|
||||
tailwindcss: 4.1.18
|
||||
dev: false
|
||||
|
||||
/@tailwindcss/oxide-android-arm64@4.1.18:
|
||||
resolution: {integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==}
|
||||
@@ -1880,7 +1953,6 @@ packages:
|
||||
cpu: [arm64]
|
||||
os: [android]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide-darwin-arm64@4.1.18:
|
||||
@@ -1889,7 +1961,6 @@ packages:
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide-darwin-x64@4.1.18:
|
||||
@@ -1898,7 +1969,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide-freebsd-x64@4.1.18:
|
||||
@@ -1907,7 +1977,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [freebsd]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18:
|
||||
@@ -1916,7 +1985,6 @@ packages:
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide-linux-arm64-gnu@4.1.18:
|
||||
@@ -1925,7 +1993,6 @@ packages:
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide-linux-arm64-musl@4.1.18:
|
||||
@@ -1934,7 +2001,6 @@ packages:
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide-linux-x64-gnu@4.1.18:
|
||||
@@ -1943,7 +2009,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide-linux-x64-musl@4.1.18:
|
||||
@@ -1952,7 +2017,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide-wasm32-wasi@4.1.18:
|
||||
@@ -1960,7 +2024,6 @@ packages:
|
||||
engines: {node: '>=14.0.0'}
|
||||
cpu: [wasm32]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
bundledDependencies:
|
||||
- '@napi-rs/wasm-runtime'
|
||||
@@ -1976,7 +2039,6 @@ packages:
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide-win32-x64-msvc@4.1.18:
|
||||
@@ -1985,7 +2047,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/@tailwindcss/oxide@4.1.18:
|
||||
@@ -2004,7 +2065,6 @@ packages:
|
||||
'@tailwindcss/oxide-wasm32-wasi': 4.1.18
|
||||
'@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
|
||||
'@tailwindcss/oxide-win32-x64-msvc': 4.1.18
|
||||
dev: false
|
||||
|
||||
/@tailwindcss/vite@4.1.18(vite@5.4.17):
|
||||
resolution: {integrity: sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==}
|
||||
@@ -2015,7 +2075,6 @@ packages:
|
||||
'@tailwindcss/oxide': 4.1.18
|
||||
tailwindcss: 4.1.18
|
||||
vite: 5.4.17
|
||||
dev: false
|
||||
|
||||
/@tybys/wasm-util@0.10.1:
|
||||
resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
|
||||
@@ -2152,7 +2211,6 @@ packages:
|
||||
resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
|
||||
dependencies:
|
||||
csstype: 3.2.3
|
||||
dev: true
|
||||
|
||||
/@types/resolve@1.20.6:
|
||||
resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
|
||||
@@ -3197,6 +3255,11 @@ packages:
|
||||
is-wsl: 2.2.0
|
||||
dev: true
|
||||
|
||||
/clsx@2.1.1:
|
||||
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
|
||||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
/color-convert@2.0.1:
|
||||
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
|
||||
engines: {node: '>=7.0.0'}
|
||||
@@ -3268,7 +3331,6 @@ packages:
|
||||
|
||||
/csstype@3.2.3:
|
||||
resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
|
||||
dev: true
|
||||
|
||||
/damerau-levenshtein@1.0.8:
|
||||
resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
|
||||
@@ -3397,13 +3459,16 @@ packages:
|
||||
/detect-libc@2.1.2:
|
||||
resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
|
||||
engines: {node: '>=8'}
|
||||
dev: false
|
||||
|
||||
/detect-newline@4.0.1:
|
||||
resolution: {integrity: sha512-qE3Veg1YXzGHQhlA6jzebZN2qVf6NX+A7m7qlhCGG30dJixrAQhYOsJjsnBjJkCSmuOPpCk30145fr8FV0bzog==}
|
||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||
dev: false
|
||||
|
||||
/detect-node-es@1.1.0:
|
||||
resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
|
||||
dev: false
|
||||
|
||||
/devlop@1.1.0:
|
||||
resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
|
||||
dependencies:
|
||||
@@ -3470,7 +3535,6 @@ packages:
|
||||
dependencies:
|
||||
graceful-fs: 4.2.11
|
||||
tapable: 2.3.0
|
||||
dev: false
|
||||
|
||||
/err-code@2.0.3:
|
||||
resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
|
||||
@@ -4352,6 +4416,11 @@ packages:
|
||||
hasown: 2.0.2
|
||||
math-intrinsics: 1.1.0
|
||||
|
||||
/get-nonce@1.0.1:
|
||||
resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
|
||||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
/get-proto@1.0.1:
|
||||
resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@@ -4449,7 +4518,6 @@ packages:
|
||||
|
||||
/graceful-fs@4.2.11:
|
||||
resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
|
||||
dev: false
|
||||
|
||||
/graphemer@1.4.0:
|
||||
resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
|
||||
@@ -4857,7 +4925,6 @@ packages:
|
||||
/jiti@2.6.1:
|
||||
resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/jju@1.4.0:
|
||||
resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
|
||||
@@ -4964,7 +5031,6 @@ packages:
|
||||
cpu: [arm64]
|
||||
os: [android]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss-darwin-arm64@1.30.2:
|
||||
@@ -4973,7 +5039,6 @@ packages:
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss-darwin-x64@1.30.2:
|
||||
@@ -4982,7 +5047,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss-freebsd-x64@1.30.2:
|
||||
@@ -4991,7 +5055,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [freebsd]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss-linux-arm-gnueabihf@1.30.2:
|
||||
@@ -5000,7 +5063,6 @@ packages:
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss-linux-arm64-gnu@1.30.2:
|
||||
@@ -5009,7 +5071,6 @@ packages:
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss-linux-arm64-musl@1.30.2:
|
||||
@@ -5018,7 +5079,6 @@ packages:
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss-linux-x64-gnu@1.30.2:
|
||||
@@ -5027,7 +5087,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss-linux-x64-musl@1.30.2:
|
||||
@@ -5036,7 +5095,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss-win32-arm64-msvc@1.30.2:
|
||||
@@ -5045,7 +5103,6 @@ packages:
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss-win32-x64-msvc@1.30.2:
|
||||
@@ -5054,7 +5111,6 @@ packages:
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/lightningcss@1.30.2:
|
||||
@@ -5074,7 +5130,6 @@ packages:
|
||||
lightningcss-linux-x64-musl: 1.30.2
|
||||
lightningcss-win32-arm64-msvc: 1.30.2
|
||||
lightningcss-win32-x64-msvc: 1.30.2
|
||||
dev: false
|
||||
|
||||
/lines-and-columns@1.2.4:
|
||||
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
|
||||
@@ -6080,11 +6135,56 @@ packages:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
dev: false
|
||||
|
||||
/react-number-format@5.4.4(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-wOmoNZoOpvMminhifQYiYSTCLUDOiUbBunrMrMjA+dV52sY+vck1S4UhR6PkgnoCquvvMSeJjErXZ4qSaWCliA==}
|
||||
peerDependencies:
|
||||
react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
dependencies:
|
||||
react: 19.2.3
|
||||
react-dom: 19.2.3(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/react-refresh@0.18.0:
|
||||
resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.3):
|
||||
resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 19.2.7
|
||||
react: 19.2.3
|
||||
react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.3)
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/react-remove-scroll@2.7.2(@types/react@19.2.7)(react@19.2.3):
|
||||
resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 19.2.7
|
||||
react: 19.2.3
|
||||
react-remove-scroll-bar: 2.3.8(@types/react@19.2.7)(react@19.2.3)
|
||||
react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.3)
|
||||
tslib: 2.8.1
|
||||
use-callback-ref: 1.3.3(@types/react@19.2.7)(react@19.2.3)
|
||||
use-sidecar: 1.1.3(@types/react@19.2.7)(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/react-router-dom@7.11.0(react-dom@19.2.3)(react@19.2.3):
|
||||
resolution: {integrity: sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==}
|
||||
engines: {node: '>=20.0.0'}
|
||||
@@ -6113,6 +6213,36 @@ packages:
|
||||
set-cookie-parser: 2.7.2
|
||||
dev: false
|
||||
|
||||
/react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.2.3):
|
||||
resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 19.2.7
|
||||
get-nonce: 1.0.1
|
||||
react: 19.2.3
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/react-textarea-autosize@8.5.9(@types/react@19.2.7)(react@19.2.3):
|
||||
resolution: {integrity: sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
dependencies:
|
||||
'@babel/runtime': 7.28.4
|
||||
react: 19.2.3
|
||||
use-composed-ref: 1.4.0(@types/react@19.2.7)(react@19.2.3)
|
||||
use-latest: 1.3.0(@types/react@19.2.7)(react@19.2.3)
|
||||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
dev: false
|
||||
|
||||
/react@19.2.3:
|
||||
resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -6811,6 +6941,10 @@ packages:
|
||||
'@pkgr/core': 0.2.9
|
||||
dev: false
|
||||
|
||||
/tabbable@6.4.0:
|
||||
resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
|
||||
dev: false
|
||||
|
||||
/tailwind-merge@3.4.0:
|
||||
resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
|
||||
dev: false
|
||||
@@ -6831,12 +6965,10 @@ packages:
|
||||
|
||||
/tailwindcss@4.1.18:
|
||||
resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
|
||||
dev: false
|
||||
|
||||
/tapable@2.3.0:
|
||||
resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
|
||||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
/text-table@0.2.0:
|
||||
resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
|
||||
@@ -7009,6 +7141,11 @@ packages:
|
||||
engines: {node: '>=14.16'}
|
||||
dev: false
|
||||
|
||||
/type-fest@4.41.0:
|
||||
resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
|
||||
engines: {node: '>=16'}
|
||||
dev: false
|
||||
|
||||
/typed-array-buffer@1.0.3:
|
||||
resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@@ -7214,6 +7351,77 @@ packages:
|
||||
dependencies:
|
||||
punycode: 2.3.1
|
||||
|
||||
/use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.3):
|
||||
resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 19.2.7
|
||||
react: 19.2.3
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/use-composed-ref@1.4.0(@types/react@19.2.7)(react@19.2.3):
|
||||
resolution: {integrity: sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 19.2.7
|
||||
react: 19.2.3
|
||||
dev: false
|
||||
|
||||
/use-isomorphic-layout-effect@1.2.1(@types/react@19.2.7)(react@19.2.3):
|
||||
resolution: {integrity: sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 19.2.7
|
||||
react: 19.2.3
|
||||
dev: false
|
||||
|
||||
/use-latest@1.3.0(@types/react@19.2.7)(react@19.2.3):
|
||||
resolution: {integrity: sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 19.2.7
|
||||
react: 19.2.3
|
||||
use-isomorphic-layout-effect: 1.2.1(@types/react@19.2.7)(react@19.2.3)
|
||||
dev: false
|
||||
|
||||
/use-sidecar@1.1.3(@types/react@19.2.7)(react@19.2.3):
|
||||
resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@types/react': 19.2.7
|
||||
detect-node-es: 1.1.0
|
||||
react: 19.2.3
|
||||
tslib: 2.8.1
|
||||
dev: false
|
||||
|
||||
/util-deprecate@1.0.2:
|
||||
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||
dev: false
|
||||
|
||||
Reference in New Issue
Block a user