@nxgt/material 2.7.0 → 2.8.0

package/lib/styles.css

@@ -2,96 +2,18 @@
 @import "tw-animate-css";
 /* The stylesheets the components need: lib/components/components.css. */
 @import "./components/components.css";
+/* Reduced motion: unlayered on purpose, see the file. */
+@import "./components/reduced-motion.css";
+/* The theme's colour tokens, light (:root) and dark: lib/components/theme-tokens.css. */
+@import "./components/theme-tokens.css";
+/* The base layer: elements (base.css), then editor content and the form grid. */
+@import "./components/base.css";
+@import "./components/base-content.css";
 
 @custom-variant dark (
 	&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)
 );
 
-:root {
-	--radius: 0.625rem;
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.14 0.036 258.53);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.129 0.042 264.695);
-	--strix: oklch(45.91% 0.1864 310.75);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.129 0.042 264.695);
-	--primary: oklch(46% 0.1135 276.35);
-	--primary-foreground: oklch(0.984 0.003 247.858);
-	--secondary: oklch(56.67% 0.1135 245.65);
-	--secondary-foreground: oklch(0.984 0.003 247.858);
-	--muted: oklch(0.968 0.007 247.896);
-	--muted-foreground: oklch(0.554 0.046 257.417);
-	--tooltip: oklch(0.446 0.043 257.281);
-	--tooltip-foreground: oklch(1 0 0);
-	--accent: oklch(0.9182 0.0077 228.86);
-	--accent-foreground: oklch(0.216 0.006 56.043);
-	--error: oklch(0.577 0.245 27.325);
-	--error-foreground: oklch(0.984 0.003 247.858);
-	--success: oklch(0.6 0.118 184.704);
-	--success-foreground: oklch(0.984 0.003 247.858);
-	--info: oklch(0.707 0.165 254.624);
-	--info-foreground: oklch(0.984 0.003 247.858);
-	--warning: oklch(0.646 0.222 41.116);
-	--warning-foreground: oklch(0.984 0.003 247.858);
-	--destructive: oklch(0.577 0.245 27.325);
-	--border: oklch(0.929 0.013 255.508);
-	--input: oklch(0.929 0.013 255.508);
-	--ring: oklch(0.704 0.04 256.788);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar: oklch(0.984 0.003 247.858);
-	--sidebar-foreground: oklch(0.129 0.042 264.695);
-	--sidebar-primary: oklch(0.208 0.042 265.755);
-	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-accent: oklch(0.968 0.007 247.896);
-	--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-	--sidebar-border: oklch(0.929 0.013 255.508);
-	--sidebar-ring: oklch(0.704 0.04 256.788);
-}
-
-.dark,
-[data-theme="dark"] {
-	--background: oklch(0.14 0.036 258.53);
-	--foreground: oklch(0.984 0.003 247.858);
-	--card: oklch(0.208 0.042 265.755);
-	--card-foreground: oklch(0.984 0.003 247.858);
-	--popover: oklch(0.208 0.042 265.755);
-	--popover-foreground: oklch(0.984 0.003 247.858);
-	--primary: oklch(46% 0.1135 276.35);
-	--primary-foreground: oklch(0.984 0.003 247.858);
-	--secondary: oklch(56.67% 0.1135 245.65);
-	--secondary-foreground: oklch(0.984 0.003 247.858);
-	--muted: oklch(0.968 0.007 247.896);
-	--muted-foreground: oklch(0.554 0.046 257.417);
-	--tooltip: oklch(0.929 0.013 255.508);
-	--tooltip-foreground: oklch(0.446 0.043 257.281);
-	--accent: oklch(0.268 0.007 34.298);
-	--accent-foreground: oklch(0.985 0.001 106.423);
-	--error: oklch(0.577 0.245 27.325);
-	--error-foreground: oklch(0.984 0.003 247.858);
-	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.551 0.027 264.364);
-	--chart-1: oklch(0.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.208 0.042 265.755);
-	--sidebar-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-accent: oklch(0.279 0.041 260.031);
-	--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.551 0.027 264.364);
-}
-
 @theme {
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
@@ -116,6 +38,8 @@
 	--color-secondary-container: --alpha(var(--secondary-foreground) / 20%);
 	--color-muted: var(--muted);
 	--color-muted-foreground: var(--muted-foreground);
+	--color-track: var(--track);
+	--color-track-fill: var(--track-fill);
 	--color-tooltip: var(--tooltip);
 	--color-tooltip-foreground: var(--tooltip-foreground);
 	--color-accent: var(--accent);
@@ -124,6 +48,7 @@
 	--color-error: var(--error);
 	--color-error-foreground: var(--error-foreground);
 	--color-error-container: --alpha(var(--error-foreground) / 20%);
+	--color-error-text: var(--error-text);
 	--color-success: var(--success);
 	--color-success-foreground: var(--success-foreground);
 	--color-info: var(--info);
@@ -185,286 +110,3 @@
 	bottom: -0.1875rem;
 	transform: rotate(-45deg) scale(0.75);
 }
-
-@layer base {
-	* {
-		@apply border-border outline-ring/50 selection:bg-primary selection:text-primary-foreground;
-		&::-webkit-scrollbar {
-			@apply w-1 gap-4 h-1 md:w-1.5 md:h-1.5 cursor-pointer;
-		}
-		&::-webkit-scrollbar-track {
-			@apply rounded bg-primary/20;
-		}
-		&::-webkit-scrollbar-thumb {
-			@apply rounded bg-muted-foreground;
-		}
-
-		input::-webkit-outer-spin-button,
-		::-webkit-inner-spin-button {
-			-webkit-appearance: none;
-			margin: 0;
-		}
-	}
-	body {
-		@apply bg-background text-foreground;
-
-		input[type="number"] {
-			-moz-appearance: textfield;
-		}
-
-		[data-slot="icon"] {
-			@apply dark:fill-foreground;
-		}
-
-		h1 {
-			font-size: var(--text-2xl);
-			font-weight: var(--font-weight-medium);
-		}
-		h2 {
-			font-size: var(--text-xl);
-			font-weight: var(--font-weight-medium);
-		}
-		h3 {
-			font-size: var(--text-lg);
-			font-weight: var(--font-weight-medium);
-		}
-		h4 {
-			font-size: var(--text-base);
-			font-weight: var(--font-weight-medium);
-		}
-		h5 {
-			font-size: var(--text-sm);
-			font-weight: var(--font-weight-medium);
-		}
-		h6 {
-			font-size: var(--text-xs);
-			font-weight: var(--font-weight-medium);
-		}
-		a:not(:has(> button)) {
-			@apply focus:underline underline-offset-4 hover:underline cursor-pointer;
-			@apply text-info [&_svg]:data-[slot=icon]:text-info hover:bg-info/10 active:bg-info/5 focus:bg-info/15;
-		}
-
-		code {
-			@apply rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono mx-0.5;
-		}
-
-		blockquote {
-			@apply border-l-2 border-primary/40 pl-4 italic text-muted-foreground my-1;
-		}
-		pre {
-			@apply bg-muted rounded p-4 overflow-x-auto my-1;
-			code {
-				@apply text-sm;
-			}
-		}
-
-		ul li p,
-		ol li p {
-			display: inline;
-		}
-
-		ul[data-type="taskList"] {
-			list-style-type: disc;
-		}
-		ol[data-type="taskList"] {
-			list-style-type: decimal;
-		}
-
-		ul[data-type="taskList"] li {
-			@apply flex gap-2 items-center;
-		}
-
-		ul,
-		ol {
-			@apply list-inside marker:text-muted-foreground;
-		}
-
-		[data-type="emoji"] {
-			img {
-				@apply size-4;
-			}
-		}
-
-		input[type="checkbox"] {
-			display: grid;
-			place-content: center;
-			-webkit-appearance: none;
-			appearance: none;
-			font: inherit;
-			color: ---value(--color-primary);
-			width: 1.05em;
-			height: 1.05em;
-			border: 0.13em solid var(--muted-foreground);
-			border-radius: 0.15em;
-		}
-		input[type="checkbox"]::before {
-			content: "";
-			width: 0.55em;
-			height: 0.55em;
-			transform: scale(0);
-			transition: 120ms transform ease-in-out;
-			box-shadow: inset 1em 1em var(--color-primary);
-		}
-		input[type="checkbox"]:checked::before {
-			transform: scale(1);
-		}
-		input[type="checkbox"]:indeterminate::before {
-			height: 0.15em;
-		}
-
-		table {
-			overflow: hidden;
-			table-layout: fixed;
-			@apply border-collapse w-full overflow-hidden rounded;
-
-			tr {
-				@apply even:bg-primary/5;
-			}
-
-			td,
-			th {
-				@apply border-0 p-1 py-2;
-			}
-
-			th {
-				@apply bg-primary/15 text-left text-muted-foreground dark:text-primary-foreground;
-			}
-		}
-
-		.tiptap {
-			ul li p,
-			ol li p {
-				display: inline;
-			}
-
-			ul:not([data-type="taskList"]) {
-				list-style-type: disc;
-			}
-			ol {
-				list-style-type: decimal;
-			}
-
-			ul:not([data-type="taskList"]),
-			ol {
-				@apply list-inside marker:text-muted-foreground;
-			}
-
-			ul[data-type="taskList"] li {
-				@apply flex gap-2 items-center;
-			}
-
-			:first-child {
-				margin-top: 0;
-			}
-
-			table {
-				/* Override the global `body table { width: w-full }` base rule
-				   (see @layer base above) — it fights TipTap's resizable colgroup
-				   widths, which only get applied as an inline table width once
-				   every column has an explicit pixel width. Letting the table size
-				   itself (still table-layout: fixed) makes resizing and
-				   center/right alignment actually visible. */
-				width: auto;
-
-				.selectedCell {
-					@apply bg-primary/20;
-				}
-
-				.column-resize-handle {
-					background-color: var(--color-primary);
-					bottom: -2px;
-					pointer-events: none;
-					position: absolute;
-					right: -2px;
-					top: 0;
-					width: 4px;
-				}
-
-				&[data-table-caption]::before {
-					content: attr(data-table-caption);
-					display: block;
-					margin-bottom: 0.5rem;
-					@apply text-sm text-muted-foreground text-center;
-				}
-			}
-
-			.tableWrapper {
-				margin: 1.5rem 0;
-				overflow-x: auto;
-
-				&:has(table[data-table-align="center"]) {
-					width: fit-content;
-					margin-inline: auto;
-				}
-
-				&:has(table[data-table-align="right"]) {
-					width: fit-content;
-					margin-left: auto;
-					margin-right: 0;
-				}
-			}
-
-			&.resize-cursor {
-				cursor: col-resize;
-			}
-
-			.is-empty::before {
-				content: attr(data-placeholder);
-				float: left;
-				height: 0;
-				pointer-events: none;
-				@apply text-muted-foreground;
-			}
-
-			.has-focus {
-				@apply bg-accent/40 rounded;
-			}
-		}
-	}
-
-	.form-grid-layout {
-		@apply relative flex flex-col gap-2 @container;
-		[data-slot="form-fields"] {
-			@apply grid @2xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4 gap-2 bg-background/80 p-4 place-items-start overflow-auto;
-
-			[data-slot="separator"] {
-				@apply col-start-full;
-			}
-
-			[data-slot*="text-field"],
-			[data-slot*="autocomplete-field"][data-mode="single"],
-			[data-slot*="currency-form-field"],
-			[data-slot*="time-field"],
-			[data-slot*="image-field"],
-			[data-slot*="select-field"] {
-				@apply w-full;
-			}
-
-			[data-slot="switch-field"],
-			[data-slot="textarea-field"],
-			[data-slot="autocomplete-field"][data-mode="multiple"],
-			[data-slot="select-chip-field"],
-			[data-slot="file-picker-field"] {
-				@apply col-start-full @6xl:col-span-2;
-			}
-
-			[data-slot="files-form-field"],
-			[data-slot="rich-text-editor"] {
-				@apply col-start-full;
-			}
-		}
-		[data-slot="form-actions"] {
-			@apply flex w-full justify-end gap-2 bottom-2 p-4 max-sm:*:flex-1;
-		}
-	}
-
-	.form-grid-layout,
-	[data-slot="data-table"] {
-		@apply max-h-[calc(100lvh-184px)] md:max-h-[calc(100lvh-242px)] lg:max-h-[calc(100lvh-280px)];
-	}
-
-	[data-slot="table-wrapper"] {
-		@apply max-h-[calc(100vh-432px)] md:max-h-[calc(100vh-490px)] lg:max-h-[calc(100vh-528px)];
-	}
-}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -114,7 +114,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.4.0",
+		"@nxgt/material-core": "^0.5.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",