From ca76859abeff5cc08bfde264cfb03f0a93aff32e Mon Sep 17 00:00:00 2001 From: Ben Emma Date: Fri, 11 Oct 2024 19:55:07 +0100 Subject: [PATCH] InSpatial Tailwind Config Init --- apps/docs/app/globals.css | 4 + apps/docs/app/layout.tsx | 2 + apps/docs/app/page.tsx | 4 +- apps/docs/package.json | 3 + apps/docs/postcss.config.js | 6 + apps/docs/tailwind.config.js | 11 +- apps/docs/tsconfig.json | 2 +- packages/config/tailwind-config/README.md | 83 ++++- packages/config/tailwind-config/package.json | 20 +- .../plugins/add-grid-backgrounds.ts | 24 ++ packages/config/tailwind-config/src/index.ts | 308 ++++++++++++++++++ .../src/plugins/add-base-components.ts | 11 + .../src/plugins/add-base-syntax.ts | 14 + .../src/plugins/add-cursor-base.ts | 87 +++++ .../src/plugins/add-cursor-utilities.ts | 24 ++ .../src/plugins/add-grid-backgrounds.ts | 27 ++ .../src/plugins/add-variable-colors.ts | 17 + .../tailwind-config/src/plugins/index.ts | 6 + .../config/tailwind-config/tailwind.config.ts | 18 - pnpm-lock.yaml | 298 ++++++++++++----- 20 files changed, 840 insertions(+), 129 deletions(-) create mode 100644 apps/docs/postcss.config.js create mode 100644 packages/config/tailwind-config/plugins/add-grid-backgrounds.ts create mode 100644 packages/config/tailwind-config/src/index.ts create mode 100644 packages/config/tailwind-config/src/plugins/add-base-components.ts create mode 100644 packages/config/tailwind-config/src/plugins/add-base-syntax.ts create mode 100644 packages/config/tailwind-config/src/plugins/add-cursor-base.ts create mode 100644 packages/config/tailwind-config/src/plugins/add-cursor-utilities.ts create mode 100644 packages/config/tailwind-config/src/plugins/add-grid-backgrounds.ts create mode 100644 packages/config/tailwind-config/src/plugins/add-variable-colors.ts create mode 100644 packages/config/tailwind-config/src/plugins/index.ts delete mode 100644 packages/config/tailwind-config/tailwind.config.ts diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css index e69de29..a90f074 100644 --- a/apps/docs/app/globals.css +++ b/apps/docs/app/globals.css @@ -0,0 +1,4 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index c46cb02..6f2a34e 100644 --- a/apps/docs/app/layout.tsx +++ b/apps/docs/app/layout.tsx @@ -1,3 +1,5 @@ +import "./globals.css"; + export default function RootLayout({ children, }: Readonly<{ diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx index e10a992..e7908b0 100644 --- a/apps/docs/app/page.tsx +++ b/apps/docs/app/page.tsx @@ -9,10 +9,10 @@ export default function Home() { } return (
- -
{testShuffle()}
+

{testShuffle()}

); } diff --git a/apps/docs/package.json b/apps/docs/package.json index 6054207..3e17142 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -18,12 +18,15 @@ }, "devDependencies": { "@inspatial/eslint-config": "workspace:*", + "@inspatial/tailwind-config": "workspace:^", "@inspatial/tsconfig": "workspace:*", "@types/node": "^20.16.10", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", + "autoprefixer": "^10.4.14", "eslint": "^8.57.1", "eslint-config-next": "14.2.6", + "postcss": "^8.4.24", "tailwindcss": "^3.4.13", "typescript": "^5.6.2" } diff --git a/apps/docs/postcss.config.js b/apps/docs/postcss.config.js new file mode 100644 index 0000000..ffc77e2 --- /dev/null +++ b/apps/docs/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, + }; \ No newline at end of file diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js index d947ab1..6090b3c 100644 --- a/apps/docs/tailwind.config.js +++ b/apps/docs/tailwind.config.js @@ -1,9 +1,6 @@ +const inSpatialTailwindConfig = require("@inspatial/tailwind-config"); + /** @type {import('tailwindcss').Config} */ module.exports = { - content: [], - theme: { - extend: {}, - }, - plugins: [], -} - + presets: [inSpatialTailwindConfig], +}; diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json index be5d2f7..5a46f26 100644 --- a/apps/docs/tsconfig.json +++ b/apps/docs/tsconfig.json @@ -6,6 +6,6 @@ "**/*.ts", "**/*.tsx", ".next/types/**/*.ts" - ], +, "tailwind.config.js" ], "exclude": ["node_modules"] } diff --git a/packages/config/tailwind-config/README.md b/packages/config/tailwind-config/README.md index 80335d0..8f38ed5 100644 --- a/packages/config/tailwind-config/README.md +++ b/packages/config/tailwind-config/README.md @@ -17,7 +17,7 @@ _🎨 Elevate your UI with InSpatial's custom Tailwind CSS configurations!_ ## 🚀 Features -- Complete rewrite of the default Tailwind configuration +- Partial override of the default Tailwind configuration at [![Tailwind](https://tailwindcss.com/_next/static/media/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg)](https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js) - InSpatial's new default styling primitives and variables - Seamless integration with InSpatial apps or any Tailwind CSS project - Optimized for spatial computing and cross-platform development @@ -25,7 +25,7 @@ _🎨 Elevate your UI with InSpatial's custom Tailwind CSS configurations!_ ## 📦 Install InSpatial Tailwind Config ```bash -npm install @inspatial/tailwind-config +npm install -D @inspatial/tailwind-config tailwindcss ``` --- @@ -35,25 +35,72 @@ npm install @inspatial/tailwind-config Extend your `tailwind.config.ts` file with InSpatial's custom configuration: ```ts -import type { Config } from "tailwindcss"; -import inSpatialTailwindConfig from "@inspatial/tailwind-config"; - -const config: Config = { - content: [ - // ... your content configuration - ], - theme: { - extend: { - ...inSpatialTailwindConfig, - }, - }, - plugins: [ - // ... your plugins - ], +const inSpatialTailwindConfig = require("@inspatial/tailwind-config"); + +/** @type {import('tailwindcss').Config} */ +module.exports = { + presets: [inSpatialTailwindConfig], + // Optional: Add project specific configurations e.g + // content: [], + // theme: { + // extend: {}, + // }, + // plugins: [], + // ... more configurations }; -export default config; ``` +## 📚 Documentation + +## Good to know +Adding the following configuration values will override InSpatial's Tailwind Config default ones. + +#### - `content` + +By default InSpatial takes a primitive guess at what you might want to include in your content array, however it is recommended that you override this by providing your own content array based on prroject structure and framework. Here's an example of what this might look like if you are using Next.js or similar framework: + +```js +content: [ + "./src/**/*.{js,ts,jsx,tsx,mdx}", + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", +] + +``` + +**NOTE:** Do not overide if you are using InSpatial Run, as it will be populated with the correct paths for your project. + +--- + +Other configuration values are optional, however if you do provide them they will not override InSpatial's defaults but will extend them e.g + +#### - `separator` +#### - `blocklist` +#### - `corePlugins` +#### - `safelist` +#### - `prefix` +etc... + +#### - `theme` +Theme is multi-faceted because you can override as well as extend. + +```js +theme: { + extend: {} +} +``` + +If you put your theme configurations inside the extend attribute it will merge and keep InSpatial's defaults instead of overriding them which is what we you want, however you can overide this too by passing your values directly inside the theme: {} in your theme config - which will result in InSpatial's defaults being overridden. + + **Note**: You probably don't want to override the theme seeing as this particular config is what makes InSpatial apps look the way they do! However if you find yourself doing this, you might want to consider removing the InSpatial Tailwind Config package and only using it as a guide to build your own. + +### Dependencies +- InSpatial Tailwind Config is built on top of [Tailwind CSS](https://tailwindcss.com/), so all the Tailwind CSS documentation and guides apply. +- InSpatial Tailwind Config is built with [Tailwind CSS Typography Plugin](https://github.com/tailwindcss/typography), so all the Tailwind CSS Typography documentation and guides apply. +- InSpatial Tailwind Config is built with [Tailwind CSS 3D Transforms Plugin](https://github.com/XPD-Kasun/tailwind-3dtransform-plugin), so all the Tailwind CSS 3D Transforms documentation and guides apply. + + --- ## 🎭 What's Included? diff --git a/packages/config/tailwind-config/package.json b/packages/config/tailwind-config/package.json index 8117de8..53838ba 100644 --- a/packages/config/tailwind-config/package.json +++ b/packages/config/tailwind-config/package.json @@ -1,15 +1,27 @@ { "name": "@inspatial/tailwind-config", - "version": "0.1.0", + "version": "0.1.1", "description": "Tailwind CSS configuration for Inspatial Apps", - "main": "tailwind.config.ts", + "main": "src/index.ts", "files": [ - "tailwind.config.ts" + "src/**/*" ], "peerDependencies": { "tailwindcss": "^3.4.13 || ^4.0.0" }, "devDependencies": { - "@types/node": "^20.16.10" + "@types/node": "^20.16.11", + "@types/tailwindcss": "^3.1.0", + "tailwindcss": "^3.4.13", + "typescript": "^5.0.0" + }, + "dependencies": { + "@tailwindcss/aspect-ratio": "^0.4.2", + "@tailwindcss/forms": "^0.5.9", + "@xpd/tailwind-3dtransforms": "^1.0.3", + "mini-svg-data-uri": "^1.4.4", + "tailwind-merge": "^2.5.3", + "tailwind-scrollbar": "^3.1.0", + "tailwind-variants": "^0.2.1" } } diff --git a/packages/config/tailwind-config/plugins/add-grid-backgrounds.ts b/packages/config/tailwind-config/plugins/add-grid-backgrounds.ts new file mode 100644 index 0000000..615815c --- /dev/null +++ b/packages/config/tailwind-config/plugins/add-grid-backgrounds.ts @@ -0,0 +1,24 @@ +import svgToDataUri from 'mini-svg-data-uri'; +import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'; +import plugin from 'tailwindcss/plugin'; + +/** + * This function creates a grid pattern for backgrounds using SVGs. + */ +export const addGridBackgrounds = plugin(({ matchUtilities, theme }) => { + matchUtilities( + { + "bg-grid": (value) => ({ + backgroundImage: `url("${svgToDataUri( + `` + )}")`, + }), + "bg-dot": (value) => ({ + backgroundImage: `url("${svgToDataUri( + `` + )}")`, + }), + }, + { values: flattenColorPalette(theme("backgroundColor")), type: "color" } + ); +}); \ No newline at end of file diff --git a/packages/config/tailwind-config/src/index.ts b/packages/config/tailwind-config/src/index.ts new file mode 100644 index 0000000..0b322ea --- /dev/null +++ b/packages/config/tailwind-config/src/index.ts @@ -0,0 +1,308 @@ +/******************************************************************************* + * IMPORTS + ********************************************************************************/ +import type { Config } from "tailwindcss"; +import { + addCursorBase, + addVariablesForColors, + addGridBackgrounds, + addCursorUtilities, +} from "./plugins"; +import { withTV } from "tailwind-variants/transformer"; + +/******************************************************************************* + * INSPATIAL TAILWIND CONFIG + ********************************************************************************/ + +/** + * InSpatial Tailwind CSS Config + * ============================== + * + * A custom Tailwind CSS configuration for InSpatial apps, + * optimized for spatial computing and cross-platform development. + * + * Key Features: + * - Complete rewrite of default Tailwind configuration + * - New default styling primitives and variables + * - Seamless integration with InSpatial apps or any Tailwind CSS project + * + * Includes: + * - Spatial-optimized color palette + * - Typography scales with 70+ premium Kit fonts + * - Iconography system with 10000+ icons + * - Spatial-tailored spacing and sizing utilities + * - Responsive breakpoints for spatial/window-first design + * - Custom cursors and border radius utilities + * - Adaptive effects for depth perception + * - Extended height and width utilities + * - Animation and transition presets for spatial interactions + * + * For more information, visit: https://www.inspatial.dev + */ + +/******************************************************************************* + * MAIN + ********************************************************************************/ +/** @type {import('tailwindcss').Config} */ +const inSpatialTailwindConfig = withTV({ + darkMode: "class", + important: true, + variants: { + scrollbar: ["rounded"], + }, + content: [ + "./src/**/*.{js,ts,jsx,tsx,mdx}", + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", + ], + plugins: [ + require("@tailwindcss/forms"), + require("@tailwindcss/aspect-ratio"), + require("@xpd/tailwind-3dtransforms"), + require("tailwind-scrollbar")({ nocompatible: true }), + addVariablesForColors, + addGridBackgrounds, + addCursorBase, + addCursorUtilities, + // addBaseSyntax, + // addBaseComponents, + ], + + safelist: [ + "w-64", + "w-1/2", + "rounded-l-lg", + "rounded-r-lg", + "bg-white", + "bg-gray-200", + "bg-slate-50", + "grid-cols-4", + "grid-cols-7", + "h-6", + "leading-6", + "h-9", + "leading-9", + "shadow-lg", + "stroke-width", + ], + + theme: { + /** + * ╔════════════════════════════════════════════════════════════════════════════╗ + * ║ EXTENDS/ADD TO TAILWINDCSS DEFAULTS ║ + * ╠════════════════════════════════════════════════════════════════════════════╣ + * ║ The properties below extend the default theme with custom values ║ + * ║ They do not override any existing values but add new ones to the theme ║ + * ║ properties added include: ║ + * ║ 1. height and width utilities ║ + * ║ 2. fontWeight ║ + * ╚════════════════════════════════════════════════════════════════════════════╝ + */ + extend: {}, + + /** + * ╔════════════════════════════════════════════════════════════════════════════╗ + * ║ OVERRIDE TAILWINDCSS DEFAULTS ║ + * ╠════════════════════════════════════════════════════════════════════════════╣ + * ║ The properties below override existing values in the default theme ║ + * ║ properties overidden include: ║ + * ║ 1. cursor ║ + * ║ 2. colors ║ + * ╚════════════════════════════════════════════════════════════════════════════╝ + */ + /* NOTE: To use solid colors as a variable, prefix with var(--), e.g. var(--pink-500) */ + colors: { + /***************NEUTRAL VARIABLES***************/ + neutral: { + muted: "var(--muted)", + // Add more neutral color variables as needed + }, + + /***************PRIME VARIABLES***************/ + background: "hsl(var(--background))", + surface: "hsl(var(--surface))", + brand: "hsl(var(--brand))", + primary: "hsl(var(--primary))", + secondary: "hsl(var(--secondary))", + muted: "hsl(var(--muted))", + + /***************SOLID COLORS***************/ + white: { DEFAULT: "#ffffff", light: "#EEF1FA", burn: "#F9F9F9" }, + black: { + DEFAULT: "#1b2240", + dark: "#11142c", + night: "#1a1f39", + burn: "#343a62", + }, + skyblack: { DEFAULT: "#03082E", dark: "#060621" }, + damp: { DEFAULT: "#D4DCEF", II: "#CACED9", III: "#7E7D8D" }, + lav: { DEFAULT: "#F9FAFC" }, + pop: { + DEFAULT: "#9000FF", + 50: "#F4E5FF", + 100: "#E9CCFF", + 200: "#D399FF", + 300: "#BD66FF", + 400: "#A733FF", + 500: "#9000FF", // DEFAULT + 600: "#7400CC", + 700: "#570099", + 800: "#3A0066", + 900: "#1D0033", + 950: "#0E0019", + }, + trackloud: { + DEFAULT: "#EF0381", + 50: "#FFE6F3", + 100: "#FECDE7", + 200: "#FE95CD", + 300: "#FD63B5", + 400: "#FC2B9B", + 500: "#EF0381", // DEFAULT + 600: "#BF0267", + 700: "#92024F", + 800: "#600134", + 900: "#32011B", + 950: "#19000E", + }, + pink: { + DEFAULT: "#CE17D6", + 50: "#FBE8FD", + 100: "#F7CCFA", + 200: "#F09EF5", + 300: "#E96CEF", + 400: "#E139EA", + 500: "#CE17D6", // DEFAULT + 600: "#A312AA", + 700: "#7B0E81", + 800: "#540958", + 900: "#280429", + 950: "#160217", + }, + blue: { + DEFAULT: "#009FE3", + 50: "#E0F6FF", + 100: "#C7EEFF", + 200: "#8FDDFF", + 300: "#57CDFF", + 400: "#1FBCFF", + 500: "#009FE3", // DEFAULT + 600: "#0081B8", + 700: "#00608A", + 800: "#00405C", + 900: "#00202E", + 950: "#000E14", + }, + green: { + DEFAULT: "#0DEB57", + 50: "#E7FEEE", + 100: "#CFFCDE", + 200: "#9AF9B9", + 300: "#69F798", + 400: "#39F477", + 500: "#0DEB57", // DEFAULT + 600: "#0ABC46", + 700: "#088C34", + 800: "#055C22", + 900: "#033012", + 950: "#011809", + }, + red: { + DEFAULT: "#D9251D", + 50: "#FCE9E9", + 100: "#F9D4D2", + 200: "#F2A5A1", + 300: "#EC7A74", + 400: "#E64F47", + 500: "#D9251D", // DEFAULT + 600: "#AF1F17", + 700: "#821711", + 800: "#550F0B", + 900: "#2D0806", + 950: "#160403", + }, + yellow: { + DEFAULT: "#FFC837", + 50: "#FFFAEB", + 100: "#FFF4D6", + 200: "#FFE9AD", + 300: "#FFDE85", + 400: "#FFD561", + 500: "#FFC837", // DEFAULT + 600: "#FAB700", + 700: "#B88700", + 800: "#7A5A00", + 900: "#3D2D00", + 950: "#1F1600", + }, + eve: { + DEFAULT: "#E9592B", + 50: "#FDEDE8", + 100: "#FBDFD5", + 200: "#F6BEAC", + 300: "#F29B7E", + 400: "#ED7A54", + 500: "#E9592B", + 600: "#C74115", + 700: "#94300F", + 800: "#66210B", + 900: "#331105", + 950: "#170802", + }, + lime: { + DEFAULT: "#8FF808", + 50: "#F4FEE6", + 100: "#E9FECD", + 200: "#D2FC9C", + 300: "#BCFB6A", + 400: "#A6F939", + 500: "#8FF808", + 600: "#73C606", + 700: "#569504", + 800: "#396303", + 900: "#1D3201", + 950: "#0E1901", + }, + crystal: { + DEFAULT: "#8BD8F4", + 50: "#F6FCFE", + 100: "#E8F7FD", + 200: "#D0EFFB", + 300: "#B9E8F8", + 400: "#A2E0F6", + 500: "#8BD8F4", + 600: "#45C0ED", + 700: "#149FD2", + 800: "#0D6A8C", + 900: "#073546", + 950: "#041C25", + }, + transparent: "transparent", + current: "currentColor", + inherit: "inherit", + }, + + /*=============================================================================== + * The properties below define the breakpoints for responsive design + *===============================================================================*/ + screens: { + "4xl": { max: "3840px" }, + // => @media (max-width: 1535px) { ... } + "3xl": { max: "1920px" }, + // => @media (max-width: 1535px) { ... } + "2xl": { max: "1535px" }, + // => @media (max-width: 1535px) { ... } + xl: { max: "1280px" }, + // => @media (max-width: 1280px) { ... } + lg: { max: "1024px" }, + // => @media (max-width: 1024px) { ... } + md: { max: "768px" }, + // => @media (max-width: 768px) { ... } + sm: { max: "640px" }, + // => @media (max-width: 640px) { ... } + }, + }, +}); + +module.exports = inSpatialTailwindConfig; diff --git a/packages/config/tailwind-config/src/plugins/add-base-components.ts b/packages/config/tailwind-config/src/plugins/add-base-components.ts new file mode 100644 index 0000000..3fef0bb --- /dev/null +++ b/packages/config/tailwind-config/src/plugins/add-base-components.ts @@ -0,0 +1,11 @@ +// @ts-ignore +import plugin from "tailwindcss/plugin"; + +// TODO: Move all custom base components made on InSpatial's global.css to this function, for intellisense +export const addBaseComponents = plugin(({ addComponents }) => { + addComponents({ + // ".button": { + // color: "#fff", + // }, + }); +}); diff --git a/packages/config/tailwind-config/src/plugins/add-base-syntax.ts b/packages/config/tailwind-config/src/plugins/add-base-syntax.ts new file mode 100644 index 0000000..3de87b2 --- /dev/null +++ b/packages/config/tailwind-config/src/plugins/add-base-syntax.ts @@ -0,0 +1,14 @@ +// @ts-ignore +import plugin from "tailwindcss/plugin"; + +// TODO: Add base syntax for headings to provide consistency with InSpatial's tailwind.config.js +export const addBaseSyntax = plugin(({ addBase, theme }) => { + addBase({ + // h1: { fontSize: theme("") }, + // h2: { fontSize: theme("") }, + // h3: { fontSize: theme("") }, + // h4: { fontSize: theme("") }, + // h5: { fontSize: theme("") }, + // h6: { fontSize: theme("") }, + }); +}); diff --git a/packages/config/tailwind-config/src/plugins/add-cursor-base.ts b/packages/config/tailwind-config/src/plugins/add-cursor-base.ts new file mode 100644 index 0000000..0f3788d --- /dev/null +++ b/packages/config/tailwind-config/src/plugins/add-cursor-base.ts @@ -0,0 +1,87 @@ +// @ts-ignore +import plugin from "tailwindcss/plugin"; + +/** + * Custom Tailwind CSS Plugin to set cursor defaults. + */ +export const addCursorBase = plugin(({ addBase }) => { + addBase({ + "html, body": { + cursor: "url(/icons/cursor/DefaultCursor.svg), default", + }, + + 'button, [type="button"], [type="reset"], [type="submit"], a, [role="button"], [role="link"], [role="menuitem"], summary, [aria-controls], [aria-expanded], [aria-haspopup], [tabindex]:not([tabindex="-1"]), .pointer-events, a.pointer-events, Link': + { cursor: "url(/icons/cursor/PointerCursor.svg), pointer" }, + 'textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"]': + { + cursor: "url(/icons/cursor/TextYCursor.svg), text", + }, + "[disabled], [disabled] *": { + cursor: "url(/icons/cursor/DisabledCursor.svg), not-allowed", + }, + 'a[href], button, input[type="button"], input[type="submit"], input[type="reset"]': + { + cursor: "url(/icons/cursor/PointerCursor.svg), pointer", + }, + '[role="button"]': { + cursor: "url(/icons/cursor/PointerCursor.svg), pointer", + }, + '[role="radio"], [role="checkbox"]': { + cursor: "url(/icons/cursor/PointerCursor.svg), pointer", + }, + '[draggable="true"]': { + cursor: "url(/icons/cursor/MoveCursor.svg), move", + }, + '[aria-busy="true"]': { + cursor: "url(/icons/cursor/LoadingCursor.svg), progress", + }, + "[aria-controls]": { + cursor: "url(/icons/cursor/PointerCursor.svg), pointer", + }, + '[aria-disabled="true"], [aria-disabled="true"] *': { + cursor: "url(/icons/cursor/DisabledCursor.svg), not-allowed", + }, + '[aria-expanded="false"]': { + cursor: "url(/icons/cursor/ZoomInCursor.svg), zoom-in", + }, + '[aria-expanded="true"]': { + cursor: "url(/icons/cursor/ZoomOutCursor.svg), zoom-out", + }, + '[aria-grabbed="true"]': { + cursor: "url(/icons/cursor/PanningCursor.svg), grabbing", + }, + '[aria-haspopup="true"]': { + cursor: "url(/icons/cursor/PointerCursor.svg), pointer", + }, + '[aria-hidden="true"]': { + cursor: "url(/icons/cursor/DisabledCursor.svg), not-allowed", + }, + '[aria-invalid="true"]': { + cursor: "url(/icons/cursor/DisabledCursor.svg), not-allowed", + }, + '[aria-readonly="true"]': { + cursor: "url(/icons/cursor/DisabledCursor.svg), not-allowed", + }, + '[aria-required="true"]': { + cursor: "url(/icons/cursor/PointerCursor.svg), pointer", + }, + 'input[type="range"]': { + cursor: "url(/icons/cursor/PointerCursor.svg), pointer", + }, + 'input[type="checkbox"], input[type="radio"]': { + cursor: "url(/icons/cursor/PointerCursor.svg), pointer", + }, + "select, optgroup, option": { + cursor: "url(/icons/cursor/SelectCursor.svg), default", + }, + "button[disabled], input[disabled], textarea[disabled], select[disabled]": { + cursor: "url(/icons/cursor/DisabledCursor.svg), not-allowed", + }, + "input[readonly], textarea[readonly]": { + cursor: "url(/icons/cursor/DisabledCursor.svg), not-allowed", + }, + '[contenteditable="true"]': { + cursor: "url(/icons/cursor/TextYCursor.svg), text", + }, + }); +}); diff --git a/packages/config/tailwind-config/src/plugins/add-cursor-utilities.ts b/packages/config/tailwind-config/src/plugins/add-cursor-utilities.ts new file mode 100644 index 0000000..68418dd --- /dev/null +++ b/packages/config/tailwind-config/src/plugins/add-cursor-utilities.ts @@ -0,0 +1,24 @@ +// @ts-ignore +import plugin from "tailwindcss/plugin"; +/** + * Create custom cursor utilities. + */ +export const addCursorUtilities = plugin(({ addUtilities }) => { + addUtilities({ + ".cursor-move-top": { + cursor: "url(/icons/cursor/MoveTCursor.svg), move", + }, + + ".cursor-move-bottom": { + cursor: "url(/icons/cursor/MoveBCursor.svg), move", + }, + + ".cursor-move-left": { + cursor: "url(/icons/cursor/MoveLCursor.svg), move", + }, + + ".cursor-move-right": { + cursor: "url(/icons/cursor/MoveRCursor.svg), move", + }, + }); +}); diff --git a/packages/config/tailwind-config/src/plugins/add-grid-backgrounds.ts b/packages/config/tailwind-config/src/plugins/add-grid-backgrounds.ts new file mode 100644 index 0000000..16c8b9a --- /dev/null +++ b/packages/config/tailwind-config/src/plugins/add-grid-backgrounds.ts @@ -0,0 +1,27 @@ +// @ts-ignore +import svgToDataUri from "mini-svg-data-uri"; +// @ts-ignore +import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette"; +// @ts-ignore +import plugin from "tailwindcss/plugin"; + +/** + * This function creates a grid pattern for backgrounds using SVGs. + */ +export const addGridBackgrounds = plugin(({ matchUtilities, theme }) => { + matchUtilities( + { + "bg-grid": (value) => ({ + backgroundImage: `url("${svgToDataUri( + `` + )}")`, + }), + "bg-dot": (value) => ({ + backgroundImage: `url("${svgToDataUri( + `` + )}")`, + }), + }, + { values: flattenColorPalette(theme("backgroundColor")), type: "color" } + ); +}); diff --git a/packages/config/tailwind-config/src/plugins/add-variable-colors.ts b/packages/config/tailwind-config/src/plugins/add-variable-colors.ts new file mode 100644 index 0000000..e90656d --- /dev/null +++ b/packages/config/tailwind-config/src/plugins/add-variable-colors.ts @@ -0,0 +1,17 @@ +// @ts-nocheck +import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'; +import plugin from 'tailwindcss/plugin'; + +/** + * Custom Tailwind CSS Plugin that makes each static/independent colors available as variables, e.g. var(--white). + */ +export const addVariablesForColors = plugin(({ addBase, theme }) => { + let allColors = flattenColorPalette(theme("colors")); + let newVars = Object.fromEntries( + Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) + ); + + addBase({ + ":root": newVars, + }); +}); \ No newline at end of file diff --git a/packages/config/tailwind-config/src/plugins/index.ts b/packages/config/tailwind-config/src/plugins/index.ts new file mode 100644 index 0000000..e176224 --- /dev/null +++ b/packages/config/tailwind-config/src/plugins/index.ts @@ -0,0 +1,6 @@ +export * from "./add-cursor-base"; +export * from "./add-variable-colors"; +export * from "./add-grid-backgrounds"; +export * from "./add-cursor-utilities"; +export * from "./add-base-syntax"; +export * from "./add-base-components"; diff --git a/packages/config/tailwind-config/tailwind.config.ts b/packages/config/tailwind-config/tailwind.config.ts deleted file mode 100644 index 2431ee8..0000000 --- a/packages/config/tailwind-config/tailwind.config.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [ - "../../packages/kit/**/*.{js,ts,jsx,tsx,mdx}", - "../../packages/props/**/*.{js,ts,jsx,tsx,mdx}", - "../../packages/utils/**/*.{js,ts,jsx,tsx,mdx}", - "./src/**/*.{js,ts,jsx,tsx,mdx}", - "./pages/**/*.{js,ts,jsx,tsx,mdx}", - "./components/**/*.{js,ts,jsx,tsx,mdx}", - "./app/**/*.{js,ts,jsx,tsx,mdx}", - "./node_modules/@tremor/**/*.{js,ts,jsx,tsx,mdx}", - ], - - theme: { - extend: {}, - }, - plugins: [], -}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c50e433..11bf429 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,39 +42,48 @@ importers: '@inspatial/eslint-config': specifier: workspace:* version: link:../../packages/config/eslint-config + '@inspatial/tailwind-config': + specifier: workspace:^ + version: link:../../packages/config/tailwind-config '@inspatial/tsconfig': specifier: workspace:* version: link:../../packages/config/tsconfig '@types/node': specifier: ^20.16.10 - version: 20.16.10 + version: 20.16.11 '@types/react': specifier: ^18.3.11 version: 18.3.11 '@types/react-dom': specifier: ^18.3.0 - version: 18.3.0 + version: 18.3.1 + autoprefixer: + specifier: ^10.4.14 + version: 10.4.20(postcss@8.4.47) eslint: specifier: ^8.57.1 version: 8.57.1 eslint-config-next: specifier: 14.2.6 - version: 14.2.6(eslint@8.57.1)(typescript@5.6.2) + version: 14.2.6(eslint@8.57.1)(typescript@5.6.3) + postcss: + specifier: ^8.4.24 + version: 8.4.47 tailwindcss: specifier: ^3.4.13 version: 3.4.13 typescript: specifier: ^5.6.2 - version: 5.6.2 + version: 5.6.3 packages/config/eslint-config: dependencies: '@typescript-eslint/eslint-plugin': specifier: ^6.0.0 - version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.6.2) + version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.6.3) '@typescript-eslint/parser': specifier: ^6.0.0 - version: 6.21.0(eslint@8.57.1)(typescript@5.6.2) + version: 6.21.0(eslint@8.57.1)(typescript@5.6.3) eslint-config-prettier: specifier: ^9.0.0 version: 9.1.0(eslint@8.57.1) @@ -87,13 +96,40 @@ importers: packages/config/tailwind-config: dependencies: - tailwindcss: - specifier: ^3.4.13 || ^4.0.0 - version: 3.4.13 + '@tailwindcss/aspect-ratio': + specifier: ^0.4.2 + version: 0.4.2(tailwindcss@3.4.13) + '@tailwindcss/forms': + specifier: ^0.5.9 + version: 0.5.9(tailwindcss@3.4.13) + '@xpd/tailwind-3dtransforms': + specifier: ^1.0.3 + version: 1.0.3 + mini-svg-data-uri: + specifier: ^1.4.4 + version: 1.4.4 + tailwind-merge: + specifier: ^2.5.3 + version: 2.5.3 + tailwind-scrollbar: + specifier: ^3.1.0 + version: 3.1.0(tailwindcss@3.4.13) + tailwind-variants: + specifier: ^0.2.1 + version: 0.2.1(tailwindcss@3.4.13) devDependencies: '@types/node': - specifier: ^20.16.10 - version: 20.16.10 + specifier: ^20.16.11 + version: 20.16.11 + '@types/tailwindcss': + specifier: ^3.1.0 + version: 3.1.0 + tailwindcss: + specifier: ^3.4.13 + version: 3.4.13 + typescript: + specifier: ^5.0.0 + version: 5.6.3 packages/config/tsconfig: {} @@ -117,16 +153,16 @@ importers: version: 18.3.11 '@types/react-dom': specifier: '*' - version: 18.3.0 + version: 18.3.1 eslint: specifier: ^8.57.1 version: 8.57.1 tsup: specifier: ^8.3.0 - version: 8.3.0(typescript@5.6.2) + version: 8.3.0(typescript@5.6.3) typescript: specifier: ^5.6.2 - version: 5.6.2 + version: 5.6.3 packages/core/kit: dependencies: @@ -145,7 +181,7 @@ importers: version: 18.3.11 '@types/react-dom': specifier: ^18.2.19 - version: 18.3.0 + version: 18.3.1 eslint: specifier: ^8.57.0 version: 8.57.1 @@ -154,10 +190,10 @@ importers: version: 18.3.1 tsup: specifier: ^8.3.0 - version: 8.3.0(typescript@5.6.2) + version: 8.3.0(typescript@5.6.3) typescript: specifier: ^5.3.3 - version: 5.6.2 + version: 5.6.3 packages/core/kit/button: dependencies: @@ -176,16 +212,16 @@ importers: version: 18.3.11 '@types/react-dom': specifier: ^18.2.19 - version: 18.3.0 + version: 18.3.1 eslint: specifier: ^8.57.0 version: 8.57.1 tsup: specifier: ^8.3.0 - version: 8.3.0(typescript@5.6.2) + version: 8.3.0(typescript@5.6.3) typescript: specifier: ^5.3.3 - version: 5.6.2 + version: 5.6.3 packages/utilities/hooks: dependencies: @@ -197,7 +233,7 @@ importers: version: 18.3.11 '@types/react-dom': specifier: '*' - version: 18.3.0 + version: 18.3.1 next-safe-action: specifier: ^7.9.3 version: 7.9.3(next@14.2.6)(react-dom@18.3.1)(react@18.3.1) @@ -222,10 +258,10 @@ importers: version: 8.57.1 tsup: specifier: ^8.3.0 - version: 8.3.0(typescript@5.6.2) + version: 8.3.0(typescript@5.6.3) typescript: specifier: ^5.6.2 - version: 5.6.2 + version: 5.6.3 packages/utilities/props: dependencies: @@ -250,16 +286,16 @@ importers: version: 18.3.11 '@types/react-dom': specifier: ^18.3.0 - version: 18.3.0 + version: 18.3.1 eslint: specifier: ^8.57.1 version: 8.57.1 tsup: specifier: ^8.3.0 - version: 8.3.0(typescript@5.6.2) + version: 8.3.0(typescript@5.6.3) typescript: specifier: ^5.6.2 - version: 5.6.2 + version: 5.6.3 packages/utilities/utils: dependencies: @@ -281,7 +317,7 @@ importers: version: link:../../config/tsconfig '@types/node': specifier: ^20.16.10 - version: 20.16.10 + version: 20.16.11 '@types/react': specifier: ^18.3.11 version: 18.3.11 @@ -293,10 +329,10 @@ importers: version: 9.1.3(react@18.3.1) tsup: specifier: ^7.2.0 - version: 7.3.0(typescript@5.6.2) + version: 7.3.0(typescript@5.6.3) typescript: specifier: ^5.6.2 - version: 5.6.2 + version: 5.6.3 packages: @@ -372,7 +408,7 @@ packages: fs-extra: 7.0.1 mri: 1.2.0 p-limit: 2.3.0 - package-manager-detector: 0.2.1 + package-manager-detector: 0.2.2 picocolors: 1.1.0 resolve-from: 5.0.0 semver: 7.6.3 @@ -1292,6 +1328,23 @@ packages: tslib: 2.7.0 dev: false + /@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.13): + resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==} + peerDependencies: + tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1' + dependencies: + tailwindcss: 3.4.13 + dev: false + + /@tailwindcss/forms@0.5.9(tailwindcss@3.4.13): + resolution: {integrity: sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==} + peerDependencies: + tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20' + dependencies: + mini-svg-data-uri: 1.4.4 + tailwindcss: 3.4.13 + dev: false + /@types/estree@1.0.6: resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} dev: true @@ -1308,8 +1361,8 @@ packages: resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==} dev: true - /@types/node@20.16.10: - resolution: {integrity: sha512-vQUKgWTjEIRFCvK6CyriPH3MZYiYlNy0fKiEYHWbcoWLEgs4opurGGKlebrTLqdSMIbXImH6XExNiIyNUv3WpA==} + /@types/node@20.16.11: + resolution: {integrity: sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==} dependencies: undici-types: 6.19.8 dev: true @@ -1317,8 +1370,8 @@ packages: /@types/prop-types@15.7.13: resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==} - /@types/react-dom@18.3.0: - resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} + /@types/react-dom@18.3.1: + resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==} dependencies: '@types/react': 18.3.11 @@ -1332,7 +1385,16 @@ packages: resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==} dev: false - /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.6.2): + /@types/tailwindcss@3.1.0: + resolution: {integrity: sha512-JxPzrm609hzvF4nmOI3StLjbBEP3WWQxDDJESqR1nh94h7gyyy3XSl0hn5RBMJ9mPudlLjtaXs5YEBtLw7CnPA==} + deprecated: This is a stub types definition. tailwindcss provides its own type definitions, so you do not need this installed. + dependencies: + tailwindcss: 3.4.13 + transitivePeerDependencies: + - ts-node + dev: true + + /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.6.3): resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -1344,10 +1406,10 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.11.1 - '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.2) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.3) '@typescript-eslint/scope-manager': 6.21.0 - '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.6.2) - '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.6.2) + '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.6.3) + '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.6.3) '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.7 eslint: 8.57.1 @@ -1355,13 +1417,13 @@ packages: ignore: 5.3.2 natural-compare: 1.4.0 semver: 7.6.3 - ts-api-utils: 1.3.0(typescript@5.6.2) - typescript: 5.6.2 + ts-api-utils: 1.3.0(typescript@5.6.3) + typescript: 5.6.3 transitivePeerDependencies: - supports-color dev: false - /@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2): + /@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.3): resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -1373,11 +1435,11 @@ packages: dependencies: '@typescript-eslint/scope-manager': 6.21.0 '@typescript-eslint/types': 6.21.0 - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.2) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3) '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.7 eslint: 8.57.1 - typescript: 5.6.2 + typescript: 5.6.3 transitivePeerDependencies: - supports-color @@ -1388,7 +1450,7 @@ packages: '@typescript-eslint/types': 6.21.0 '@typescript-eslint/visitor-keys': 6.21.0 - /@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.6.2): + /@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.6.3): resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -1398,12 +1460,12 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.2) - '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.6.2) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3) + '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.6.3) debug: 4.3.7 eslint: 8.57.1 - ts-api-utils: 1.3.0(typescript@5.6.2) - typescript: 5.6.2 + ts-api-utils: 1.3.0(typescript@5.6.3) + typescript: 5.6.3 transitivePeerDependencies: - supports-color dev: false @@ -1412,7 +1474,7 @@ packages: resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==} engines: {node: ^16.0.0 || >=18.0.0} - /@typescript-eslint/typescript-estree@6.21.0(typescript@5.6.2): + /@typescript-eslint/typescript-estree@6.21.0(typescript@5.6.3): resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -1428,12 +1490,12 @@ packages: is-glob: 4.0.3 minimatch: 9.0.3 semver: 7.6.3 - ts-api-utils: 1.3.0(typescript@5.6.2) - typescript: 5.6.2 + ts-api-utils: 1.3.0(typescript@5.6.3) + typescript: 5.6.3 transitivePeerDependencies: - supports-color - /@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.6.2): + /@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.6.3): resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: @@ -1444,7 +1506,7 @@ packages: '@types/semver': 7.5.8 '@typescript-eslint/scope-manager': 6.21.0 '@typescript-eslint/types': 6.21.0 - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.2) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.3) eslint: 8.57.1 semver: 7.6.3 transitivePeerDependencies: @@ -1462,6 +1524,10 @@ packages: /@ungap/structured-clone@1.2.0: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} + /@xpd/tailwind-3dtransforms@1.0.3: + resolution: {integrity: sha512-LEKfNj57djZAucQ1itu/zinRkYnkhzNjAMhz8DkbguTyBcTDHF1R6CuXO536BFE/YGyHDCYd7tDF5ghSrViUgQ==} + dev: false + /acorn-jsx@5.3.2(acorn@8.12.1): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -1623,6 +1689,22 @@ packages: resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==} dev: true + /autoprefixer@10.4.20(postcss@8.4.47): + resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==} + engines: {node: ^10 || ^12 || >=14} + hasBin: true + peerDependencies: + postcss: ^8.1.0 + dependencies: + browserslist: 4.24.0 + caniuse-lite: 1.0.30001668 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.1.0 + postcss: 8.4.47 + postcss-value-parser: 4.2.0 + dev: true + /available-typed-arrays@1.0.7: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} @@ -1670,6 +1752,17 @@ packages: dependencies: fill-range: 7.1.1 + /browserslist@4.24.0: + resolution: {integrity: sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + dependencies: + caniuse-lite: 1.0.30001668 + electron-to-chromium: 1.5.36 + node-releases: 2.0.18 + update-browserslist-db: 1.1.1(browserslist@4.24.0) + dev: true + /bundle-require@4.2.1(esbuild@0.19.12): resolution: {integrity: sha512-7Q/6vkyYAwOmQNRw75x+4yRtZCZJXUDmHHlFdkiV0wgv/reNjtJwpu1jPJ0w2kbEpIM0uoKI3S4/f39dU7AjSA==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -1720,9 +1813,8 @@ packages: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} - /caniuse-lite@1.0.30001667: - resolution: {integrity: sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==} - dev: false + /caniuse-lite@1.0.30001668: + resolution: {integrity: sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==} /chalk@4.1.2: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} @@ -1937,6 +2029,10 @@ packages: /eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} + /electron-to-chromium@1.5.36: + resolution: {integrity: sha512-HYTX8tKge/VNp6FGO+f/uVDmUkq+cEfcxYhKf15Akc4M5yxt5YmorwlAitKWjWhWQnKcDRBAQKXkhqqXMqcrjw==} + dev: true + /emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -2034,8 +2130,8 @@ packages: stop-iteration-iterator: 1.0.0 dev: true - /es-iterator-helpers@1.0.19: - resolution: {integrity: sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==} + /es-iterator-helpers@1.1.0: + resolution: {integrity: sha512-/SurEfycdyssORP/E+bj4sEu1CWw4EmLDsHynHwSXQ7utgbrMRWW195pTrCjFgFCddf/UkYm3oqKPRq5i8bJbw==} engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.7 @@ -2050,7 +2146,7 @@ packages: has-proto: 1.0.3 has-symbols: 1.0.3 internal-slot: 1.0.7 - iterator.prototype: 1.1.2 + iterator.prototype: 1.1.3 safe-array-concat: 1.1.2 /es-object-atoms@1.0.0: @@ -2143,11 +2239,16 @@ packages: '@esbuild/win32-x64': 0.23.1 dev: true + /escalade@3.2.0: + resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} + engines: {node: '>=6'} + dev: true + /escape-string-regexp@4.0.0: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} - /eslint-config-next@14.2.6(eslint@8.57.1)(typescript@5.6.2): + /eslint-config-next@14.2.6(eslint@8.57.1)(typescript@5.6.3): resolution: {integrity: sha512-z0URA5LO6y8lS/YLN0EDW/C4LEkDODjJzA37dvLVdzCPzuewjzTe1os5g3XclZAZrQ8X8hPaSMQ2JuVWwMmrTA==} peerDependencies: eslint: ^7.23.0 || ^8.0.0 @@ -2158,7 +2259,7 @@ packages: dependencies: '@next/eslint-plugin-next': 14.2.6 '@rushstack/eslint-patch': 1.10.4 - '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.2) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.3) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1) @@ -2166,7 +2267,7 @@ packages: eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1) eslint-plugin-react: 7.37.1(eslint@8.57.1) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1) - typescript: 5.6.2 + typescript: 5.6.3 transitivePeerDependencies: - eslint-import-resolver-webpack - eslint-plugin-import-x @@ -2243,7 +2344,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.2) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.3) debug: 3.2.7 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 @@ -2263,7 +2364,7 @@ packages: optional: true dependencies: '@rtsao/scc': 1.1.0 - '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.2) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.3) array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 array.prototype.flat: 1.3.2 @@ -2303,7 +2404,7 @@ packages: axobject-query: 4.1.0 damerau-levenshtein: 1.0.8 emoji-regex: 9.2.2 - es-iterator-helpers: 1.0.19 + es-iterator-helpers: 1.1.0 eslint: 8.57.1 hasown: 2.0.2 jsx-ast-utils: 3.3.5 @@ -2333,7 +2434,7 @@ packages: array.prototype.flatmap: 1.3.2 array.prototype.tosorted: 1.1.4 doctrine: 2.1.0 - es-iterator-helpers: 1.0.19 + es-iterator-helpers: 1.1.0 eslint: 8.57.1 estraverse: 5.3.0 hasown: 2.0.2 @@ -2553,6 +2654,10 @@ packages: cross-spawn: 7.0.3 signal-exit: 4.1.0 + /fraction.js@4.3.7: + resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + dev: true + /fs-extra@7.0.1: resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==} engines: {node: '>=6 <7 || >=8'} @@ -2975,8 +3080,9 @@ packages: /isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} - /iterator.prototype@1.1.2: - resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==} + /iterator.prototype@1.1.3: + resolution: {integrity: sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==} + engines: {node: '>= 0.4'} dependencies: define-properties: 1.2.1 get-intrinsic: 1.2.4 @@ -3156,6 +3262,11 @@ packages: engines: {node: '>=6'} dev: true + /mini-svg-data-uri@1.4.4: + resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==} + hasBin: true + dev: false + /minimatch@3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} dependencies: @@ -3251,7 +3362,7 @@ packages: '@next/env': 14.2.6 '@swc/helpers': 0.5.5 busboy: 1.6.0 - caniuse-lite: 1.0.30001667 + caniuse-lite: 1.0.30001668 graceful-fs: 4.2.11 postcss: 8.4.31 react: 18.3.1 @@ -3272,10 +3383,19 @@ packages: - babel-plugin-macros dev: false + /node-releases@2.0.18: + resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==} + dev: true + /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + /normalize-range@0.1.2: + resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} + engines: {node: '>=0.10.0'} + dev: true + /npm-run-path@4.0.1: resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==} engines: {node: '>=8'} @@ -3428,8 +3548,8 @@ packages: /package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} - /package-manager-detector@0.2.1: - resolution: {integrity: sha512-/hVW2fZvAdEas+wyKh0SnlZ2mx0NIa1+j11YaQkogEJkcMErbwchHCuo8z7lEtajZJQZ6rgZNVTWMVVd71Bjng==} + /package-manager-detector@0.2.2: + resolution: {integrity: sha512-VgXbyrSNsml4eHWIvxxG/nTL4wgybMTXCV2Un/+yEc3aDKKU6nQBZjbeP3Pl3qm9Qg92X/1ng4ffvCeD/zwHgg==} dev: true /parent-module@1.0.1: @@ -4043,6 +4163,15 @@ packages: resolution: {integrity: sha512-d9ZolCAIzom1nf/5p4LdD5zvjmgSxY0BGgdSvmXIoMYAiPdAW/dSpP7joCDYFY7r/HkEa2qmPtkgsu0xjQeQtw==} dev: false + /tailwind-scrollbar@3.1.0(tailwindcss@3.4.13): + resolution: {integrity: sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==} + engines: {node: '>=12.13.0'} + peerDependencies: + tailwindcss: 3.x + dependencies: + tailwindcss: 3.4.13 + dev: false + /tailwind-variants@0.2.1(tailwindcss@3.4.13): resolution: {integrity: sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==} engines: {node: '>=16.x', pnpm: '>=7.x'} @@ -4139,13 +4268,13 @@ packages: hasBin: true dev: true - /ts-api-utils@1.3.0(typescript@5.6.2): + /ts-api-utils@1.3.0(typescript@5.6.3): resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==} engines: {node: '>=16'} peerDependencies: typescript: '>=4.2.0' dependencies: - typescript: 5.6.2 + typescript: 5.6.3 /ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} @@ -4163,7 +4292,7 @@ packages: resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==} dev: false - /tsup@7.3.0(typescript@5.6.2): + /tsup@7.3.0(typescript@5.6.3): resolution: {integrity: sha512-Ja1eaSRrE+QarmATlNO5fse2aOACYMBX+IZRKy1T+gpyH+jXgRrl5l4nHIQJQ1DoDgEjHDTw8cpE085UdBZuWQ==} engines: {node: '>=18'} deprecated: Breaking node 16 @@ -4194,13 +4323,13 @@ packages: source-map: 0.8.0-beta.0 sucrase: 3.35.0 tree-kill: 1.2.2 - typescript: 5.6.2 + typescript: 5.6.3 transitivePeerDependencies: - supports-color - ts-node dev: true - /tsup@8.3.0(typescript@5.6.2): + /tsup@8.3.0(typescript@5.6.3): resolution: {integrity: sha512-ALscEeyS03IomcuNdFdc0YWGVIkwH1Ws7nfTbAPuoILvEV2hpGQAY72LIOjglGo4ShWpZfpBqP/jpQVCzqYQag==} engines: {node: '>=18'} hasBin: true @@ -4235,7 +4364,7 @@ packages: sucrase: 3.35.0 tinyglobby: 0.2.9 tree-kill: 1.2.2 - typescript: 5.6.2 + typescript: 5.6.3 transitivePeerDependencies: - jiti - supports-color @@ -4353,8 +4482,8 @@ packages: is-typed-array: 1.1.13 possible-typed-array-names: 1.0.0 - /typescript@5.6.2: - resolution: {integrity: sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==} + /typescript@5.6.3: + resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==} engines: {node: '>=14.17'} hasBin: true @@ -4375,6 +4504,17 @@ packages: engines: {node: '>= 4.0.0'} dev: true + /update-browserslist-db@1.1.1(browserslist@4.24.0): + resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + dependencies: + browserslist: 4.24.0 + escalade: 3.2.0 + picocolors: 1.1.0 + dev: true + /uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} dependencies: