diff --git a/apps/documentations-e2e/eslint.config.js b/apps/documentations-e2e/eslint.config.js
new file mode 100644
index 0000000..4e73819
--- /dev/null
+++ b/apps/documentations-e2e/eslint.config.js
@@ -0,0 +1,13 @@
+const playwright = require('eslint-plugin-playwright');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+ playwright.configs['flat/recommended'],
+
+ ...baseConfig,
+ {
+ files: ['**/*.ts', '**/*.js'],
+ // Override or add rules here
+ rules: {},
+ },
+];
diff --git a/apps/documentations-e2e/playwright.config.ts b/apps/documentations-e2e/playwright.config.ts
new file mode 100644
index 0000000..8ca737b
--- /dev/null
+++ b/apps/documentations-e2e/playwright.config.ts
@@ -0,0 +1,69 @@
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ ...nxE2EPreset(__filename, { testDir: './src' }),
+ /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+ use: {
+ baseURL,
+ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+ trace: 'on-first-retry',
+ },
+ /* Run your local dev server before starting the tests */
+ webServer: {
+ command: 'pnpm exec nx run documentations:serve',
+ url: 'http://localhost:4200',
+ reuseExistingServer: !process.env.CI,
+ cwd: workspaceRoot,
+ },
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+
+ {
+ name: 'firefox',
+ use: { ...devices['Desktop Firefox'] },
+ },
+
+ {
+ name: 'webkit',
+ use: { ...devices['Desktop Safari'] },
+ },
+
+ // Uncomment for mobile browsers support
+ /* {
+ name: 'Mobile Chrome',
+ use: { ...devices['Pixel 5'] },
+ },
+ {
+ name: 'Mobile Safari',
+ use: { ...devices['iPhone 12'] },
+ }, */
+
+ // Uncomment for branded browsers
+ /* {
+ name: 'Microsoft Edge',
+ use: { ...devices['Desktop Edge'], channel: 'msedge' },
+ },
+ {
+ name: 'Google Chrome',
+ use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+ } */
+ ],
+});
diff --git a/apps/documentations-e2e/project.json b/apps/documentations-e2e/project.json
new file mode 100644
index 0000000..9066d70
--- /dev/null
+++ b/apps/documentations-e2e/project.json
@@ -0,0 +1,9 @@
+{
+ "name": "documentations-e2e",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "sourceRoot": "apps/documentations-e2e/src",
+ "implicitDependencies": ["documentations"],
+ "// targets": "to see all targets run: nx show project documentations-e2e --web",
+ "targets": {}
+}
diff --git a/apps/documentations-e2e/src/example.spec.ts b/apps/documentations-e2e/src/example.spec.ts
new file mode 100644
index 0000000..fa8f1f3
--- /dev/null
+++ b/apps/documentations-e2e/src/example.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+ await page.goto('/');
+
+ // Expect h1 to contain a substring.
+ expect(await page.locator('h1').innerText()).toContain('Welcome');
+});
diff --git a/apps/documentations-e2e/tsconfig.json b/apps/documentations-e2e/tsconfig.json
new file mode 100644
index 0000000..ac5a11c
--- /dev/null
+++ b/apps/documentations-e2e/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "compilerOptions": {
+ "allowJs": true,
+ "outDir": "../../dist/out-tsc",
+ "sourceMap": false,
+ "module": "commonjs",
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": [
+ "**/*.ts",
+ "**/*.js",
+ "playwright.config.ts",
+ "src/**/*.spec.ts",
+ "src/**/*.spec.js",
+ "src/**/*.test.ts",
+ "src/**/*.test.js",
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/apps/documentations/eslint.config.js b/apps/documentations/eslint.config.js
new file mode 100644
index 0000000..19a86aa
--- /dev/null
+++ b/apps/documentations/eslint.config.js
@@ -0,0 +1,34 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+ ...baseConfig,
+ ...nx.configs['flat/angular'],
+ ...nx.configs['flat/angular-template'],
+ {
+ files: ['**/*.ts'],
+ rules: {
+ '@angular-eslint/directive-selector': [
+ 'error',
+ {
+ type: 'attribute',
+ prefix: 'app',
+ style: 'camelCase',
+ },
+ ],
+ '@angular-eslint/component-selector': [
+ 'error',
+ {
+ type: 'element',
+ prefix: 'app',
+ style: 'kebab-case',
+ },
+ ],
+ },
+ },
+ {
+ files: ['**/*.html'],
+ // Override or add rules here
+ rules: {},
+ },
+];
diff --git a/apps/documentations/project.json b/apps/documentations/project.json
new file mode 100644
index 0000000..fc3bb6a
--- /dev/null
+++ b/apps/documentations/project.json
@@ -0,0 +1,88 @@
+{
+ "name": "documentations",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "prefix": "app",
+ "sourceRoot": "apps/documentations/src",
+ "tags": [],
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:application",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "dist/apps/documentations",
+ "index": "apps/documentations/src/index.html",
+ "browser": "apps/documentations/src/main.ts",
+ "polyfills": ["zone.js"],
+ "tsConfig": "apps/documentations/tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ {
+ "glob": "**/*",
+ "input": "apps/documentations/public"
+ }
+ ],
+ "styles": ["apps/documentations/src/styles.scss"],
+ "scripts": [],
+ "server": "apps/documentations/src/main.server.ts",
+ "ssr": {
+ "entry": "apps/documentations/src/server.ts"
+ },
+ "outputMode": "server"
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "4kb",
+ "maximumError": "8kb"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "executor": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "documentations:build:production"
+ },
+ "development": {
+ "buildTarget": "documentations:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "executor": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "buildTarget": "documentations:build"
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint"
+ },
+ "serve-static": {
+ "executor": "@nx/web:file-server",
+ "options": {
+ "buildTarget": "documentations:build",
+ "port": 4200,
+ "staticFilePath": "dist/apps/documentations/browser",
+ "spa": true
+ }
+ }
+ }
+}
diff --git a/apps/documentations/public/favicon.ico b/apps/documentations/public/favicon.ico
new file mode 100644
index 0000000..317ebcb
Binary files /dev/null and b/apps/documentations/public/favicon.ico differ
diff --git a/apps/documentations/src/app/app.component.html b/apps/documentations/src/app/app.component.html
new file mode 100644
index 0000000..4529e16
--- /dev/null
+++ b/apps/documentations/src/app/app.component.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+ NgxPrimer
+
+
+ Lightweight, Agnostic, Unstyled UI Component
+
+
+ Primitive UI to Build Your Own Design System
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @for (item of features; track $index) {
+
+
{{ item.title }}
+
+ {{ item.description }}
+
+
+ }
+
+
+
+
+
+
diff --git a/apps/documentations/src/app/app.component.scss b/apps/documentations/src/app/app.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/apps/documentations/src/app/app.component.spec.ts b/apps/documentations/src/app/app.component.spec.ts
new file mode 100644
index 0000000..d8ae232
--- /dev/null
+++ b/apps/documentations/src/app/app.component.spec.ts
@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+import { NxWelcomeComponent } from './nx-welcome.component';
+import { RouterModule } from '@angular/router';
+
+describe('AppComponent', () => {
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AppComponent, NxWelcomeComponent, RouterModule.forRoot([])],
+ }).compileComponents();
+ });
+
+ it('should render title', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ fixture.detectChanges();
+ const compiled = fixture.nativeElement as HTMLElement;
+ expect(compiled.querySelector('h1')?.textContent).toContain(
+ 'Welcome documentations'
+ );
+ });
+
+ it(`should have as title 'documentations'`, () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.componentInstance;
+ expect(app.title).toEqual('documentations');
+ });
+});
diff --git a/apps/documentations/src/app/app.component.ts b/apps/documentations/src/app/app.component.ts
new file mode 100644
index 0000000..4c6ca88
--- /dev/null
+++ b/apps/documentations/src/app/app.component.ts
@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+ imports: [RouterModule],
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrl: './app.component.scss',
+ providers: [
+ ]
+})
+export class AppComponent {
+ title = 'documentations';
+ features = [
+ {
+ title: "Accessible",
+ description: "All components follow the accessibility guidelines set out by the Primer Design System to ensure a better user experience."
+ },
+ {
+ title: "Customizable",
+ description: "Tailor the components' appearance and behavior using Angular's flexible input properties and directives."
+ },
+ {
+ title: "Responsive",
+ description: "The library is designed to be responsive and work seamlessly across all device types and screen sizes."
+ },
+ {
+ title: "Themeable",
+ description: "Easily switch between light and dark modes, as well as apply custom themes to your components."
+ },
+ {
+ title: "Signal API",
+ description: "Leverage Angular's Signal API to create custom events and handle them in your application, for highly reactive, optimized performance.",
+ }
+ ];
+}
diff --git a/apps/documentations/src/app/app.config.server.ts b/apps/documentations/src/app/app.config.server.ts
new file mode 100644
index 0000000..d5c4490
--- /dev/null
+++ b/apps/documentations/src/app/app.config.server.ts
@@ -0,0 +1,14 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { provideServerRoutesConfig } from '@angular/ssr';
+import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+ providers: [
+ provideServerRendering(),
+ provideServerRoutesConfig(serverRoutes),
+ ],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);
diff --git a/apps/documentations/src/app/app.config.ts b/apps/documentations/src/app/app.config.ts
new file mode 100644
index 0000000..decc7c9
--- /dev/null
+++ b/apps/documentations/src/app/app.config.ts
@@ -0,0 +1,15 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { appRoutes } from './app.routes';
+import {
+ provideClientHydration,
+ withEventReplay,
+} from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideClientHydration(withEventReplay()),
+ provideZoneChangeDetection({ eventCoalescing: true }),
+ provideRouter(appRoutes),
+ ],
+};
diff --git a/apps/documentations/src/app/app.routes.server.ts b/apps/documentations/src/app/app.routes.server.ts
new file mode 100644
index 0000000..28c14c5
--- /dev/null
+++ b/apps/documentations/src/app/app.routes.server.ts
@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+ {
+ path: '**',
+ renderMode: RenderMode.Prerender,
+ },
+];
diff --git a/apps/documentations/src/app/app.routes.ts b/apps/documentations/src/app/app.routes.ts
new file mode 100644
index 0000000..8762dfe
--- /dev/null
+++ b/apps/documentations/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [];
diff --git a/apps/documentations/src/index.html b/apps/documentations/src/index.html
new file mode 100644
index 0000000..fc7b9b0
--- /dev/null
+++ b/apps/documentations/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ documentations
+
+
+
+
+
+
+
+
diff --git a/apps/documentations/src/main.server.ts b/apps/documentations/src/main.server.ts
new file mode 100644
index 0000000..4b9d4d1
--- /dev/null
+++ b/apps/documentations/src/main.server.ts
@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+
+export default bootstrap;
diff --git a/apps/documentations/src/main.ts b/apps/documentations/src/main.ts
new file mode 100644
index 0000000..514c89a
--- /dev/null
+++ b/apps/documentations/src/main.ts
@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+ console.error(err)
+);
diff --git a/apps/documentations/src/server.ts b/apps/documentations/src/server.ts
new file mode 100644
index 0000000..2111f7c
--- /dev/null
+++ b/apps/documentations/src/server.ts
@@ -0,0 +1,66 @@
+import {
+ AngularNodeAppEngine,
+ createNodeRequestHandler,
+ isMainModule,
+ writeResponseToNodeResponse,
+} from '@angular/ssr/node';
+import express from 'express';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+
+const app = express();
+const angularApp = new AngularNodeAppEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ * // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /browser
+ */
+app.use(
+ express.static(browserDistFolder, {
+ maxAge: '1y',
+ index: false,
+ redirect: false,
+ })
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.use('/**', (req, res, next) => {
+ angularApp
+ .handle(req)
+ .then((response) =>
+ response ? writeResponseToNodeResponse(response, res) : next()
+ )
+ .catch(next);
+});
+
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
+ const port = process.env['PORT'] || 4000;
+ app.listen(port, () => {
+ console.log(`Node Express server listening on http://localhost:${port}`);
+ });
+}
+
+/**
+ * The request handler used by the Angular CLI (dev-server and during build).
+ */
+export const reqHandler = createNodeRequestHandler(app);
diff --git a/apps/documentations/src/styles.scss b/apps/documentations/src/styles.scss
new file mode 100644
index 0000000..77e408a
--- /dev/null
+++ b/apps/documentations/src/styles.scss
@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* You can add global styles to this file, and also import other style files */
diff --git a/apps/documentations/src/test-setup.ts b/apps/documentations/src/test-setup.ts
new file mode 100644
index 0000000..318c3b9
--- /dev/null
+++ b/apps/documentations/src/test-setup.ts
@@ -0,0 +1,12 @@
+import '@analogjs/vitest-angular/setup-zone';
+
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+import { getTestBed } from '@angular/core/testing';
+
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
diff --git a/apps/documentations/tailwind-base.config.js b/apps/documentations/tailwind-base.config.js
new file mode 100644
index 0000000..333d1f5
--- /dev/null
+++ b/apps/documentations/tailwind-base.config.js
@@ -0,0 +1,1075 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [],
+ presets: [],
+ darkMode: 'media', // or 'class'
+ theme: {
+ accentColor: ({ theme }) => ({
+ ...theme('colors'),
+ auto: 'auto',
+ }),
+ animation: {
+ none: 'none',
+ spin: 'spin 1s linear infinite',
+ ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+ pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+ bounce: 'bounce 1s infinite',
+ },
+ aria: {
+ busy: 'busy="true"',
+ checked: 'checked="true"',
+ disabled: 'disabled="true"',
+ expanded: 'expanded="true"',
+ hidden: 'hidden="true"',
+ pressed: 'pressed="true"',
+ readonly: 'readonly="true"',
+ required: 'required="true"',
+ selected: 'selected="true"',
+ },
+ aspectRatio: {
+ auto: 'auto',
+ square: '1 / 1',
+ video: '16 / 9',
+ },
+ backdropBlur: ({ theme }) => theme('blur'),
+ backdropBrightness: ({ theme }) => theme('brightness'),
+ backdropContrast: ({ theme }) => theme('contrast'),
+ backdropGrayscale: ({ theme }) => theme('grayscale'),
+ backdropHueRotate: ({ theme }) => theme('hueRotate'),
+ backdropInvert: ({ theme }) => theme('invert'),
+ backdropOpacity: ({ theme }) => theme('opacity'),
+ backdropSaturate: ({ theme }) => theme('saturate'),
+ backdropSepia: ({ theme }) => theme('sepia'),
+ backgroundColor: ({ theme }) => theme('colors'),
+ backgroundImage: {
+ none: 'none',
+ 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
+ 'gradient-to-tr':
+ 'linear-gradient(to top right, var(--tw-gradient-stops))',
+ 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
+ 'gradient-to-br':
+ 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
+ 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
+ 'gradient-to-bl':
+ 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
+ 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
+ 'gradient-to-tl':
+ 'linear-gradient(to top left, var(--tw-gradient-stops))',
+ },
+ backgroundOpacity: ({ theme }) => theme('opacity'),
+ backgroundPosition: {
+ bottom: 'bottom',
+ center: 'center',
+ left: 'left',
+ 'left-bottom': 'left bottom',
+ 'left-top': 'left top',
+ right: 'right',
+ 'right-bottom': 'right bottom',
+ 'right-top': 'right top',
+ top: 'top',
+ },
+ backgroundSize: {
+ auto: 'auto',
+ cover: 'cover',
+ contain: 'contain',
+ },
+ blur: {
+ 0: '0',
+ none: '',
+ sm: '4px',
+ DEFAULT: '8px',
+ md: '12px',
+ lg: '16px',
+ xl: '24px',
+ '2xl': '40px',
+ '3xl': '64px',
+ },
+ borderColor: ({ theme }) => ({
+ ...theme('colors'),
+ DEFAULT: theme('colors.gray.200', 'currentColor'),
+ }),
+ borderOpacity: ({ theme }) => theme('opacity'),
+ borderRadius: {
+ none: '0px',
+ sm: '0.125rem',
+ DEFAULT: '0.25rem',
+ md: '0.375rem',
+ lg: '0.5rem',
+ xl: '0.75rem',
+ '2xl': '1rem',
+ '3xl': '1.5rem',
+ full: '9999px',
+ },
+ borderSpacing: ({ theme }) => ({
+ ...theme('spacing'),
+ }),
+ borderWidth: {
+ DEFAULT: '1px',
+ 0: '0px',
+ 2: '2px',
+ 4: '4px',
+ 8: '8px',
+ },
+ boxShadow: {
+ sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+ DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+ md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+ lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+ xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+ '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+ inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+ none: 'none',
+ },
+ boxShadowColor: ({ theme }) => theme('colors'),
+ brightness: {
+ 0: '0',
+ 50: '.5',
+ 75: '.75',
+ 90: '.9',
+ 95: '.95',
+ 100: '1',
+ 105: '1.05',
+ 110: '1.1',
+ 125: '1.25',
+ 150: '1.5',
+ 200: '2',
+ },
+ caretColor: ({ theme }) => theme('colors'),
+ colors: ({ colors }) => ({
+ inherit: colors.inherit,
+ current: colors.current,
+ transparent: colors.transparent,
+ black: colors.black,
+ white: colors.white,
+ slate: colors.slate,
+ gray: colors.gray,
+ zinc: colors.zinc,
+ neutral: colors.neutral,
+ stone: colors.stone,
+ red: colors.red,
+ orange: colors.orange,
+ amber: colors.amber,
+ yellow: colors.yellow,
+ lime: colors.lime,
+ green: colors.green,
+ emerald: colors.emerald,
+ teal: colors.teal,
+ cyan: colors.cyan,
+ sky: colors.sky,
+ blue: colors.blue,
+ indigo: colors.indigo,
+ violet: colors.violet,
+ purple: colors.purple,
+ fuchsia: colors.fuchsia,
+ pink: colors.pink,
+ rose: colors.rose,
+ }),
+ columns: {
+ auto: 'auto',
+ 1: '1',
+ 2: '2',
+ 3: '3',
+ 4: '4',
+ 5: '5',
+ 6: '6',
+ 7: '7',
+ 8: '8',
+ 9: '9',
+ 10: '10',
+ 11: '11',
+ 12: '12',
+ '3xs': '16rem',
+ '2xs': '18rem',
+ xs: '20rem',
+ sm: '24rem',
+ md: '28rem',
+ lg: '32rem',
+ xl: '36rem',
+ '2xl': '42rem',
+ '3xl': '48rem',
+ '4xl': '56rem',
+ '5xl': '64rem',
+ '6xl': '72rem',
+ '7xl': '80rem',
+ },
+ container: {},
+ content: {
+ none: 'none',
+ },
+ contrast: {
+ 0: '0',
+ 50: '.5',
+ 75: '.75',
+ 100: '1',
+ 125: '1.25',
+ 150: '1.5',
+ 200: '2',
+ },
+ cursor: {
+ auto: 'auto',
+ default: 'default',
+ pointer: 'pointer',
+ wait: 'wait',
+ text: 'text',
+ move: 'move',
+ help: 'help',
+ 'not-allowed': 'not-allowed',
+ none: 'none',
+ 'context-menu': 'context-menu',
+ progress: 'progress',
+ cell: 'cell',
+ crosshair: 'crosshair',
+ 'vertical-text': 'vertical-text',
+ alias: 'alias',
+ copy: 'copy',
+ 'no-drop': 'no-drop',
+ grab: 'grab',
+ grabbing: 'grabbing',
+ 'all-scroll': 'all-scroll',
+ 'col-resize': 'col-resize',
+ 'row-resize': 'row-resize',
+ 'n-resize': 'n-resize',
+ 'e-resize': 'e-resize',
+ 's-resize': 's-resize',
+ 'w-resize': 'w-resize',
+ 'ne-resize': 'ne-resize',
+ 'nw-resize': 'nw-resize',
+ 'se-resize': 'se-resize',
+ 'sw-resize': 'sw-resize',
+ 'ew-resize': 'ew-resize',
+ 'ns-resize': 'ns-resize',
+ 'nesw-resize': 'nesw-resize',
+ 'nwse-resize': 'nwse-resize',
+ 'zoom-in': 'zoom-in',
+ 'zoom-out': 'zoom-out',
+ },
+ divideColor: ({ theme }) => theme('borderColor'),
+ divideOpacity: ({ theme }) => theme('borderOpacity'),
+ divideWidth: ({ theme }) => theme('borderWidth'),
+ dropShadow: {
+ sm: '0 1px 1px rgb(0 0 0 / 0.05)',
+ DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
+ md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
+ lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
+ xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
+ '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
+ none: '0 0 #0000',
+ },
+ fill: ({ theme }) => ({
+ none: 'none',
+ ...theme('colors'),
+ }),
+ flex: {
+ 1: '1 1 0%',
+ auto: '1 1 auto',
+ initial: '0 1 auto',
+ none: 'none',
+ },
+ flexBasis: ({ theme }) => ({
+ auto: 'auto',
+ ...theme('spacing'),
+ '1/2': '50%',
+ '1/3': '33.333333%',
+ '2/3': '66.666667%',
+ '1/4': '25%',
+ '2/4': '50%',
+ '3/4': '75%',
+ '1/5': '20%',
+ '2/5': '40%',
+ '3/5': '60%',
+ '4/5': '80%',
+ '1/6': '16.666667%',
+ '2/6': '33.333333%',
+ '3/6': '50%',
+ '4/6': '66.666667%',
+ '5/6': '83.333333%',
+ '1/12': '8.333333%',
+ '2/12': '16.666667%',
+ '3/12': '25%',
+ '4/12': '33.333333%',
+ '5/12': '41.666667%',
+ '6/12': '50%',
+ '7/12': '58.333333%',
+ '8/12': '66.666667%',
+ '9/12': '75%',
+ '10/12': '83.333333%',
+ '11/12': '91.666667%',
+ full: '100%',
+ }),
+ flexGrow: {
+ 0: '0',
+ DEFAULT: '1',
+ },
+ flexShrink: {
+ 0: '0',
+ DEFAULT: '1',
+ },
+ fontFamily: {
+ sans: [
+ 'ui-sans-serif',
+ 'system-ui',
+ 'sans-serif',
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ '"Noto Color Emoji"',
+ ],
+ serif: [
+ 'ui-serif',
+ 'Georgia',
+ 'Cambria',
+ '"Times New Roman"',
+ 'Times',
+ 'serif',
+ ],
+ mono: [
+ 'ui-monospace',
+ 'SFMono-Regular',
+ 'Menlo',
+ 'Monaco',
+ 'Consolas',
+ '"Liberation Mono"',
+ '"Courier New"',
+ 'monospace',
+ ],
+ },
+ fontSize: {
+ xs: ['0.75rem', { lineHeight: '1rem' }],
+ sm: ['0.875rem', { lineHeight: '1.25rem' }],
+ base: ['1rem', { lineHeight: '1.5rem' }],
+ lg: ['1.125rem', { lineHeight: '1.75rem' }],
+ xl: ['1.25rem', { lineHeight: '1.75rem' }],
+ '2xl': ['1.5rem', { lineHeight: '2rem' }],
+ '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+ '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+ '5xl': ['3rem', { lineHeight: '1' }],
+ '6xl': ['3.75rem', { lineHeight: '1' }],
+ '7xl': ['4.5rem', { lineHeight: '1' }],
+ '8xl': ['6rem', { lineHeight: '1' }],
+ '9xl': ['8rem', { lineHeight: '1' }],
+ },
+ fontWeight: {
+ thin: '100',
+ extralight: '200',
+ light: '300',
+ normal: '400',
+ medium: '500',
+ semibold: '600',
+ bold: '700',
+ extrabold: '800',
+ black: '900',
+ },
+ gap: ({ theme }) => theme('spacing'),
+ gradientColorStops: ({ theme }) => theme('colors'),
+ gradientColorStopPositions: {
+ '0%': '0%',
+ '5%': '5%',
+ '10%': '10%',
+ '15%': '15%',
+ '20%': '20%',
+ '25%': '25%',
+ '30%': '30%',
+ '35%': '35%',
+ '40%': '40%',
+ '45%': '45%',
+ '50%': '50%',
+ '55%': '55%',
+ '60%': '60%',
+ '65%': '65%',
+ '70%': '70%',
+ '75%': '75%',
+ '80%': '80%',
+ '85%': '85%',
+ '90%': '90%',
+ '95%': '95%',
+ '100%': '100%',
+ },
+ grayscale: {
+ 0: '0',
+ DEFAULT: '100%',
+ },
+ gridAutoColumns: {
+ auto: 'auto',
+ min: 'min-content',
+ max: 'max-content',
+ fr: 'minmax(0, 1fr)',
+ },
+ gridAutoRows: {
+ auto: 'auto',
+ min: 'min-content',
+ max: 'max-content',
+ fr: 'minmax(0, 1fr)',
+ },
+ gridColumn: {
+ auto: 'auto',
+ 'span-1': 'span 1 / span 1',
+ 'span-2': 'span 2 / span 2',
+ 'span-3': 'span 3 / span 3',
+ 'span-4': 'span 4 / span 4',
+ 'span-5': 'span 5 / span 5',
+ 'span-6': 'span 6 / span 6',
+ 'span-7': 'span 7 / span 7',
+ 'span-8': 'span 8 / span 8',
+ 'span-9': 'span 9 / span 9',
+ 'span-10': 'span 10 / span 10',
+ 'span-11': 'span 11 / span 11',
+ 'span-12': 'span 12 / span 12',
+ 'span-full': '1 / -1',
+ },
+ gridColumnEnd: {
+ auto: 'auto',
+ 1: '1',
+ 2: '2',
+ 3: '3',
+ 4: '4',
+ 5: '5',
+ 6: '6',
+ 7: '7',
+ 8: '8',
+ 9: '9',
+ 10: '10',
+ 11: '11',
+ 12: '12',
+ 13: '13',
+ },
+ gridColumnStart: {
+ auto: 'auto',
+ 1: '1',
+ 2: '2',
+ 3: '3',
+ 4: '4',
+ 5: '5',
+ 6: '6',
+ 7: '7',
+ 8: '8',
+ 9: '9',
+ 10: '10',
+ 11: '11',
+ 12: '12',
+ 13: '13',
+ },
+ gridRow: {
+ auto: 'auto',
+ 'span-1': 'span 1 / span 1',
+ 'span-2': 'span 2 / span 2',
+ 'span-3': 'span 3 / span 3',
+ 'span-4': 'span 4 / span 4',
+ 'span-5': 'span 5 / span 5',
+ 'span-6': 'span 6 / span 6',
+ 'span-7': 'span 7 / span 7',
+ 'span-8': 'span 8 / span 8',
+ 'span-9': 'span 9 / span 9',
+ 'span-10': 'span 10 / span 10',
+ 'span-11': 'span 11 / span 11',
+ 'span-12': 'span 12 / span 12',
+ 'span-full': '1 / -1',
+ },
+ gridRowEnd: {
+ auto: 'auto',
+ 1: '1',
+ 2: '2',
+ 3: '3',
+ 4: '4',
+ 5: '5',
+ 6: '6',
+ 7: '7',
+ 8: '8',
+ 9: '9',
+ 10: '10',
+ 11: '11',
+ 12: '12',
+ 13: '13',
+ },
+ gridRowStart: {
+ auto: 'auto',
+ 1: '1',
+ 2: '2',
+ 3: '3',
+ 4: '4',
+ 5: '5',
+ 6: '6',
+ 7: '7',
+ 8: '8',
+ 9: '9',
+ 10: '10',
+ 11: '11',
+ 12: '12',
+ 13: '13',
+ },
+ gridTemplateColumns: {
+ none: 'none',
+ subgrid: 'subgrid',
+ 1: 'repeat(1, minmax(0, 1fr))',
+ 2: 'repeat(2, minmax(0, 1fr))',
+ 3: 'repeat(3, minmax(0, 1fr))',
+ 4: 'repeat(4, minmax(0, 1fr))',
+ 5: 'repeat(5, minmax(0, 1fr))',
+ 6: 'repeat(6, minmax(0, 1fr))',
+ 7: 'repeat(7, minmax(0, 1fr))',
+ 8: 'repeat(8, minmax(0, 1fr))',
+ 9: 'repeat(9, minmax(0, 1fr))',
+ 10: 'repeat(10, minmax(0, 1fr))',
+ 11: 'repeat(11, minmax(0, 1fr))',
+ 12: 'repeat(12, minmax(0, 1fr))',
+ },
+ gridTemplateRows: {
+ none: 'none',
+ subgrid: 'subgrid',
+ 1: 'repeat(1, minmax(0, 1fr))',
+ 2: 'repeat(2, minmax(0, 1fr))',
+ 3: 'repeat(3, minmax(0, 1fr))',
+ 4: 'repeat(4, minmax(0, 1fr))',
+ 5: 'repeat(5, minmax(0, 1fr))',
+ 6: 'repeat(6, minmax(0, 1fr))',
+ 7: 'repeat(7, minmax(0, 1fr))',
+ 8: 'repeat(8, minmax(0, 1fr))',
+ 9: 'repeat(9, minmax(0, 1fr))',
+ 10: 'repeat(10, minmax(0, 1fr))',
+ 11: 'repeat(11, minmax(0, 1fr))',
+ 12: 'repeat(12, minmax(0, 1fr))',
+ },
+ height: ({ theme }) => ({
+ auto: 'auto',
+ ...theme('spacing'),
+ '1/2': '50%',
+ '1/3': '33.333333%',
+ '2/3': '66.666667%',
+ '1/4': '25%',
+ '2/4': '50%',
+ '3/4': '75%',
+ '1/5': '20%',
+ '2/5': '40%',
+ '3/5': '60%',
+ '4/5': '80%',
+ '1/6': '16.666667%',
+ '2/6': '33.333333%',
+ '3/6': '50%',
+ '4/6': '66.666667%',
+ '5/6': '83.333333%',
+ full: '100%',
+ screen: '100vh',
+ svh: '100svh',
+ lvh: '100lvh',
+ dvh: '100dvh',
+ min: 'min-content',
+ max: 'max-content',
+ fit: 'fit-content',
+ }),
+ hueRotate: {
+ 0: '0deg',
+ 15: '15deg',
+ 30: '30deg',
+ 60: '60deg',
+ 90: '90deg',
+ 180: '180deg',
+ },
+ inset: ({ theme }) => ({
+ auto: 'auto',
+ ...theme('spacing'),
+ '1/2': '50%',
+ '1/3': '33.333333%',
+ '2/3': '66.666667%',
+ '1/4': '25%',
+ '2/4': '50%',
+ '3/4': '75%',
+ full: '100%',
+ }),
+ invert: {
+ 0: '0',
+ DEFAULT: '100%',
+ },
+ keyframes: {
+ spin: {
+ to: {
+ transform: 'rotate(360deg)',
+ },
+ },
+ ping: {
+ '75%, 100%': {
+ transform: 'scale(2)',
+ opacity: '0',
+ },
+ },
+ pulse: {
+ '50%': {
+ opacity: '.5',
+ },
+ },
+ bounce: {
+ '0%, 100%': {
+ transform: 'translateY(-25%)',
+ animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
+ },
+ '50%': {
+ transform: 'none',
+ animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
+ },
+ },
+ },
+ letterSpacing: {
+ tighter: '-0.05em',
+ tight: '-0.025em',
+ normal: '0em',
+ wide: '0.025em',
+ wider: '0.05em',
+ widest: '0.1em',
+ },
+ lineHeight: {
+ none: '1',
+ tight: '1.25',
+ snug: '1.375',
+ normal: '1.5',
+ relaxed: '1.625',
+ loose: '2',
+ 3: '.75rem',
+ 4: '1rem',
+ 5: '1.25rem',
+ 6: '1.5rem',
+ 7: '1.75rem',
+ 8: '2rem',
+ 9: '2.25rem',
+ 10: '2.5rem',
+ },
+ listStyleType: {
+ none: 'none',
+ disc: 'disc',
+ decimal: 'decimal',
+ },
+ listStyleImage: {
+ none: 'none',
+ },
+ margin: ({ theme }) => ({
+ auto: 'auto',
+ ...theme('spacing'),
+ }),
+ lineClamp: {
+ 1: '1',
+ 2: '2',
+ 3: '3',
+ 4: '4',
+ 5: '5',
+ 6: '6',
+ },
+ maxHeight: ({ theme }) => ({
+ ...theme('spacing'),
+ none: 'none',
+ full: '100%',
+ screen: '100vh',
+ svh: '100svh',
+ lvh: '100lvh',
+ dvh: '100dvh',
+ min: 'min-content',
+ max: 'max-content',
+ fit: 'fit-content',
+ }),
+ maxWidth: ({ theme, breakpoints }) => ({
+ ...theme('spacing'),
+ none: 'none',
+ xs: '20rem',
+ sm: '24rem',
+ md: '28rem',
+ lg: '32rem',
+ xl: '36rem',
+ '2xl': '42rem',
+ '3xl': '48rem',
+ '4xl': '56rem',
+ '5xl': '64rem',
+ '6xl': '72rem',
+ '7xl': '80rem',
+ full: '100%',
+ min: 'min-content',
+ max: 'max-content',
+ fit: 'fit-content',
+ prose: '65ch',
+ ...breakpoints(theme('screens')),
+ }),
+ minHeight: ({ theme }) => ({
+ ...theme('spacing'),
+ full: '100%',
+ screen: '100vh',
+ svh: '100svh',
+ lvh: '100lvh',
+ dvh: '100dvh',
+ min: 'min-content',
+ max: 'max-content',
+ fit: 'fit-content',
+ }),
+ minWidth: ({ theme }) => ({
+ ...theme('spacing'),
+ full: '100%',
+ min: 'min-content',
+ max: 'max-content',
+ fit: 'fit-content',
+ }),
+ objectPosition: {
+ bottom: 'bottom',
+ center: 'center',
+ left: 'left',
+ 'left-bottom': 'left bottom',
+ 'left-top': 'left top',
+ right: 'right',
+ 'right-bottom': 'right bottom',
+ 'right-top': 'right top',
+ top: 'top',
+ },
+ opacity: {
+ 0: '0',
+ 5: '0.05',
+ 10: '0.1',
+ 15: '0.15',
+ 20: '0.2',
+ 25: '0.25',
+ 30: '0.3',
+ 35: '0.35',
+ 40: '0.4',
+ 45: '0.45',
+ 50: '0.5',
+ 55: '0.55',
+ 60: '0.6',
+ 65: '0.65',
+ 70: '0.7',
+ 75: '0.75',
+ 80: '0.8',
+ 85: '0.85',
+ 90: '0.9',
+ 95: '0.95',
+ 100: '1',
+ },
+ order: {
+ first: '-9999',
+ last: '9999',
+ none: '0',
+ 1: '1',
+ 2: '2',
+ 3: '3',
+ 4: '4',
+ 5: '5',
+ 6: '6',
+ 7: '7',
+ 8: '8',
+ 9: '9',
+ 10: '10',
+ 11: '11',
+ 12: '12',
+ },
+ outlineColor: ({ theme }) => theme('colors'),
+ outlineOffset: {
+ 0: '0px',
+ 1: '1px',
+ 2: '2px',
+ 4: '4px',
+ 8: '8px',
+ },
+ outlineWidth: {
+ 0: '0px',
+ 1: '1px',
+ 2: '2px',
+ 4: '4px',
+ 8: '8px',
+ },
+ padding: ({ theme }) => theme('spacing'),
+ placeholderColor: ({ theme }) => theme('colors'),
+ placeholderOpacity: ({ theme }) => theme('opacity'),
+ ringColor: ({ theme }) => ({
+ DEFAULT: theme('colors.blue.500', '#3b82f6'),
+ ...theme('colors'),
+ }),
+ ringOffsetColor: ({ theme }) => theme('colors'),
+ ringOffsetWidth: {
+ 0: '0px',
+ 1: '1px',
+ 2: '2px',
+ 4: '4px',
+ 8: '8px',
+ },
+ ringOpacity: ({ theme }) => ({
+ DEFAULT: '0.5',
+ ...theme('opacity'),
+ }),
+ ringWidth: {
+ DEFAULT: '3px',
+ 0: '0px',
+ 1: '1px',
+ 2: '2px',
+ 4: '4px',
+ 8: '8px',
+ },
+ rotate: {
+ 0: '0deg',
+ 1: '1deg',
+ 2: '2deg',
+ 3: '3deg',
+ 6: '6deg',
+ 12: '12deg',
+ 45: '45deg',
+ 90: '90deg',
+ 180: '180deg',
+ },
+ saturate: {
+ 0: '0',
+ 50: '.5',
+ 100: '1',
+ 150: '1.5',
+ 200: '2',
+ },
+ scale: {
+ 0: '0',
+ 50: '.5',
+ 75: '.75',
+ 90: '.9',
+ 95: '.95',
+ 100: '1',
+ 105: '1.05',
+ 110: '1.1',
+ 125: '1.25',
+ 150: '1.5',
+ },
+ screens: {
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px',
+ },
+ scrollMargin: ({ theme }) => ({
+ ...theme('spacing'),
+ }),
+ scrollPadding: ({ theme }) => theme('spacing'),
+ sepia: {
+ 0: '0',
+ DEFAULT: '100%',
+ },
+ skew: {
+ 0: '0deg',
+ 1: '1deg',
+ 2: '2deg',
+ 3: '3deg',
+ 6: '6deg',
+ 12: '12deg',
+ },
+ space: ({ theme }) => ({
+ ...theme('spacing'),
+ }),
+ spacing: {
+ px: '1px',
+ 0: '0px',
+ 0.5: '0.125rem',
+ 1: '0.25rem',
+ 1.5: '0.375rem',
+ 2: '0.5rem',
+ 2.5: '0.625rem',
+ 3: '0.75rem',
+ 3.5: '0.875rem',
+ 4: '1rem',
+ 5: '1.25rem',
+ 6: '1.5rem',
+ 7: '1.75rem',
+ 8: '2rem',
+ 9: '2.25rem',
+ 10: '2.5rem',
+ 11: '2.75rem',
+ 12: '3rem',
+ 14: '3.5rem',
+ 16: '4rem',
+ 20: '5rem',
+ 24: '6rem',
+ 28: '7rem',
+ 32: '8rem',
+ 36: '9rem',
+ 40: '10rem',
+ 44: '11rem',
+ 48: '12rem',
+ 52: '13rem',
+ 56: '14rem',
+ 60: '15rem',
+ 64: '16rem',
+ 72: '18rem',
+ 80: '20rem',
+ 96: '24rem',
+ },
+ stroke: ({ theme }) => ({
+ none: 'none',
+ ...theme('colors'),
+ }),
+ strokeWidth: {
+ 0: '0',
+ 1: '1',
+ 2: '2',
+ },
+ supports: {},
+ data: {},
+ textColor: ({ theme }) => theme('colors'),
+ textDecorationColor: ({ theme }) => theme('colors'),
+ textDecorationThickness: {
+ auto: 'auto',
+ 'from-font': 'from-font',
+ 0: '0px',
+ 1: '1px',
+ 2: '2px',
+ 4: '4px',
+ 8: '8px',
+ },
+ textIndent: ({ theme }) => ({
+ ...theme('spacing'),
+ }),
+ textOpacity: ({ theme }) => theme('opacity'),
+ textUnderlineOffset: {
+ auto: 'auto',
+ 0: '0px',
+ 1: '1px',
+ 2: '2px',
+ 4: '4px',
+ 8: '8px',
+ },
+ transformOrigin: {
+ center: 'center',
+ top: 'top',
+ 'top-right': 'top right',
+ right: 'right',
+ 'bottom-right': 'bottom right',
+ bottom: 'bottom',
+ 'bottom-left': 'bottom left',
+ left: 'left',
+ 'top-left': 'top left',
+ },
+ transitionDelay: {
+ 0: '0s',
+ 75: '75ms',
+ 100: '100ms',
+ 150: '150ms',
+ 200: '200ms',
+ 300: '300ms',
+ 500: '500ms',
+ 700: '700ms',
+ 1000: '1000ms',
+ },
+ transitionDuration: {
+ DEFAULT: '150ms',
+ 0: '0s',
+ 75: '75ms',
+ 100: '100ms',
+ 150: '150ms',
+ 200: '200ms',
+ 300: '300ms',
+ 500: '500ms',
+ 700: '700ms',
+ 1000: '1000ms',
+ },
+ transitionProperty: {
+ none: 'none',
+ all: 'all',
+ DEFAULT:
+ 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+ colors:
+ 'color, background-color, border-color, text-decoration-color, fill, stroke',
+ opacity: 'opacity',
+ shadow: 'box-shadow',
+ transform: 'transform',
+ },
+ transitionTimingFunction: {
+ DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
+ linear: 'linear',
+ in: 'cubic-bezier(0.4, 0, 1, 1)',
+ out: 'cubic-bezier(0, 0, 0.2, 1)',
+ 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+ },
+ translate: ({ theme }) => ({
+ ...theme('spacing'),
+ '1/2': '50%',
+ '1/3': '33.333333%',
+ '2/3': '66.666667%',
+ '1/4': '25%',
+ '2/4': '50%',
+ '3/4': '75%',
+ full: '100%',
+ }),
+ size: ({ theme }) => ({
+ auto: 'auto',
+ ...theme('spacing'),
+ '1/2': '50%',
+ '1/3': '33.333333%',
+ '2/3': '66.666667%',
+ '1/4': '25%',
+ '2/4': '50%',
+ '3/4': '75%',
+ '1/5': '20%',
+ '2/5': '40%',
+ '3/5': '60%',
+ '4/5': '80%',
+ '1/6': '16.666667%',
+ '2/6': '33.333333%',
+ '3/6': '50%',
+ '4/6': '66.666667%',
+ '5/6': '83.333333%',
+ '1/12': '8.333333%',
+ '2/12': '16.666667%',
+ '3/12': '25%',
+ '4/12': '33.333333%',
+ '5/12': '41.666667%',
+ '6/12': '50%',
+ '7/12': '58.333333%',
+ '8/12': '66.666667%',
+ '9/12': '75%',
+ '10/12': '83.333333%',
+ '11/12': '91.666667%',
+ full: '100%',
+ min: 'min-content',
+ max: 'max-content',
+ fit: 'fit-content',
+ }),
+ width: ({ theme }) => ({
+ auto: 'auto',
+ ...theme('spacing'),
+ '1/2': '50%',
+ '1/3': '33.333333%',
+ '2/3': '66.666667%',
+ '1/4': '25%',
+ '2/4': '50%',
+ '3/4': '75%',
+ '1/5': '20%',
+ '2/5': '40%',
+ '3/5': '60%',
+ '4/5': '80%',
+ '1/6': '16.666667%',
+ '2/6': '33.333333%',
+ '3/6': '50%',
+ '4/6': '66.666667%',
+ '5/6': '83.333333%',
+ '1/12': '8.333333%',
+ '2/12': '16.666667%',
+ '3/12': '25%',
+ '4/12': '33.333333%',
+ '5/12': '41.666667%',
+ '6/12': '50%',
+ '7/12': '58.333333%',
+ '8/12': '66.666667%',
+ '9/12': '75%',
+ '10/12': '83.333333%',
+ '11/12': '91.666667%',
+ full: '100%',
+ screen: '100vw',
+ svw: '100svw',
+ lvw: '100lvw',
+ dvw: '100dvw',
+ min: 'min-content',
+ max: 'max-content',
+ fit: 'fit-content',
+ }),
+ willChange: {
+ auto: 'auto',
+ scroll: 'scroll-position',
+ contents: 'contents',
+ transform: 'transform',
+ },
+ zIndex: {
+ auto: 'auto',
+ 0: '0',
+ 10: '10',
+ 20: '20',
+ 30: '30',
+ 40: '40',
+ 50: '50',
+ },
+ },
+ plugins: [],
+};
diff --git a/apps/documentations/tailwind.config.js b/apps/documentations/tailwind.config.js
new file mode 100644
index 0000000..59b042e
--- /dev/null
+++ b/apps/documentations/tailwind.config.js
@@ -0,0 +1,29 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+const tailwindBaseConfig = require('./tailwind-base.config');
+const plugin = require('tailwindcss/plugin');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+ ...createGlobPatternsForDependencies(__dirname),
+ ],
+ theme: {
+ extend: {
+ ...tailwindBaseConfig,
+ },
+ },
+ plugins: [
+ plugin(({ addUtilities }) => {
+ addUtilities({
+ '.text-foreground-brand': {
+ background:
+ 'linear-gradient(to right, #0546FF 5%, #F637E3 15%, #FA2C04 75%)',
+ '-webkit-background-clip': 'text',
+ '-webkit-text-fill-color': 'transparent',
+ },
+ });
+ }),
+ ],
+};
diff --git a/apps/documentations/tsconfig.app.json b/apps/documentations/tsconfig.app.json
new file mode 100644
index 0000000..384b6ff
--- /dev/null
+++ b/apps/documentations/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "types": ["node"]
+ },
+ "files": ["src/main.ts", "src/main.server.ts", "src/server.ts"],
+ "include": ["src/**/*.d.ts"],
+ "exclude": [
+ "jest.config.ts",
+ "src/**/*.test.ts",
+ "src/**/*.spec.ts",
+ "vite.config.ts",
+ "vite.config.mts",
+ "vitest.config.ts",
+ "vitest.config.mts",
+ "src/**/*.test.tsx",
+ "src/**/*.spec.tsx",
+ "src/**/*.test.js",
+ "src/**/*.spec.js",
+ "src/**/*.test.jsx",
+ "src/**/*.spec.jsx",
+ "src/test-setup.ts"
+ ]
+}
diff --git a/apps/documentations/tsconfig.editor.json b/apps/documentations/tsconfig.editor.json
new file mode 100644
index 0000000..337f23d
--- /dev/null
+++ b/apps/documentations/tsconfig.editor.json
@@ -0,0 +1,21 @@
+{
+ "extends": "./tsconfig.json",
+ "include": ["src/**/*.ts", "!src/app/nx-welcome.component.ts"],
+ "compilerOptions": {},
+ "exclude": [
+ "jest.config.ts",
+ "src/**/*.test.ts",
+ "src/**/*.spec.ts",
+ "vite.config.ts",
+ "vite.config.mts",
+ "vitest.config.ts",
+ "vitest.config.mts",
+ "src/**/*.test.tsx",
+ "src/**/*.spec.tsx",
+ "src/**/*.test.js",
+ "src/**/*.spec.js",
+ "src/**/*.test.jsx",
+ "src/**/*.spec.jsx",
+ "src/test-setup.ts"
+ ]
+}
diff --git a/apps/documentations/tsconfig.json b/apps/documentations/tsconfig.json
new file mode 100644
index 0000000..c147dd2
--- /dev/null
+++ b/apps/documentations/tsconfig.json
@@ -0,0 +1,32 @@
+{
+ "compilerOptions": {
+ "target": "es2022",
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.editor.json"
+ },
+ {
+ "path": "./tsconfig.app.json"
+ },
+ {
+ "path": "./tsconfig.spec.json"
+ }
+ ],
+ "extends": "../../tsconfig.base.json",
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
diff --git a/apps/documentations/tsconfig.spec.json b/apps/documentations/tsconfig.spec.json
new file mode 100644
index 0000000..19ef165
--- /dev/null
+++ b/apps/documentations/tsconfig.spec.json
@@ -0,0 +1,29 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "types": [
+ "vitest/globals",
+ "vitest/importMeta",
+ "vite/client",
+ "node",
+ "vitest"
+ ]
+ },
+ "include": [
+ "vite.config.ts",
+ "vite.config.mts",
+ "vitest.config.ts",
+ "vitest.config.mts",
+ "src/**/*.test.ts",
+ "src/**/*.spec.ts",
+ "src/**/*.test.tsx",
+ "src/**/*.spec.tsx",
+ "src/**/*.test.js",
+ "src/**/*.spec.js",
+ "src/**/*.test.jsx",
+ "src/**/*.spec.jsx",
+ "src/**/*.d.ts"
+ ],
+ "files": ["src/test-setup.ts"]
+}
diff --git a/apps/documentations/vite.config.mts b/apps/documentations/vite.config.mts
new file mode 100644
index 0000000..e6671a7
--- /dev/null
+++ b/apps/documentations/vite.config.mts
@@ -0,0 +1,27 @@
+///
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig({
+ root: __dirname,
+ cacheDir: '../../node_modules/.vite/apps/documentations',
+ plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+ // Uncomment this if you are using workers.
+ // worker: {
+ // plugins: [ nxViteTsPaths() ],
+ // },
+ test: {
+ watch: false,
+ globals: true,
+ environment: 'jsdom',
+ include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+ setupFiles: ['src/test-setup.ts'],
+ reporters: ['default'],
+ coverage: {
+ reportsDirectory: '../../coverage/apps/documentations',
+ provider: 'v8',
+ },
+ },
+});
diff --git a/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.ts b/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.ts
index 0641a68..fda3bab 100644
--- a/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.ts
+++ b/packages/primitives/accordion/src/components/accordion-trigger/accordion-trigger.component.ts
@@ -298,7 +298,8 @@ export class NgxPrimerAccordionTriggerComponent implements OnInit {
if (this.accordionRoot?.disabled() || this.accordionItem?.disabled())
return;
(this.viewContainerRef.element.nativeElement as HTMLElement).focus({
- preventScroll: this.accordionRoot?.accordionConfig?.preventScrolling ?? false,
+ preventScroll:
+ this.accordionRoot?.accordionConfig?.preventScrolling ?? false,
});
}
}
diff --git a/packages/primitives/accordion/src/directives/index.ts b/packages/primitives/accordion/src/directives/index.ts
index bf99962..43e247d 100644
--- a/packages/primitives/accordion/src/directives/index.ts
+++ b/packages/primitives/accordion/src/directives/index.ts
@@ -1,2 +1 @@
export * from './animations/collapse-expand-animation/collapse-expand-animation.directive';
-export * from './component-context';