@rebasepro/ui 0.12.0 → 0.12.1-canary.g35be8cb

package/dist/index.css

@@ -1,57 +1,15 @@
-@theme {
-    /* Font Families */
-    --font-sans: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
-    --font-headers: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
-    --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
-
-    /* Colors */
-    --color-primary: #0070F4;
-    --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
-    --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
-    --color-secondary: #FF5B79;
-    --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
-    --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
-
-    --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
-    --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
-
-    /* Field Colors */
-    --color-field-disabled: rgb(224 224 226);
-    --color-field-disabled-dark: rgb(35 35 37);
-
-    /* Text Colors — using opaque values so icon strokes render solidly */
-    --color-text-primary: #212121;
-    --color-text-secondary: #757575;
-    --color-text-disabled: #9e9e9e;
-    --color-text-primary-dark: #ffffff;
-    --color-text-secondary-dark: #a0a0a9;
-    --color-text-disabled-dark: #757580;
-
-    /* Surface Colors */
-    --color-surface-50: #fafafa;
-    --color-surface-100: #f5f5f5;
-    --color-surface-200: #e5e5e5;
-    --color-surface-300: #d4d4d4;
-    --color-surface-400: #a3a3a3;
-    --color-surface-500: #737373;
-    --color-surface-600: #404040;
-    --color-surface-700: #262626;
-    --color-surface-800: #111111;
-    --color-surface-900: #0a0a0a;
-    --color-surface-950: #000000;
-
-    /* Surface Accent Colors */
-    --color-surface-accent-50: #f8fafc;
-    --color-surface-accent-100: #f1f5f9;
-    --color-surface-accent-200: #e2e8f0;
-    --color-surface-accent-300: #cbd5e1;
-    --color-surface-accent-400: #94a3b8;
-    --color-surface-accent-500: #64748b;
-    --color-surface-accent-600: #475569;
-    --color-surface-accent-700: #334155;
-    --color-surface-accent-800: #1e293b;
-    --color-surface-accent-900: #172033;
-    --color-surface-accent-950: #0f172a;
+@import "./theme.css";
+
+/* Grayscale antialiasing, not macOS's subpixel default.
+   This is the single largest reason the same typeface can look like a
+   different one between two pages: subpixel-antialiased text renders visibly
+   heavier and slightly fuzzier, and the effect is worst for light text on dark
+   backgrounds — which is most of this product and all of the marketing site.
+   Design comps that set this and shipped pages that do not will never match,
+   no matter how carefully the font, size, weight and tracking are aligned. */
+html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 /* Native UI (scrollbars, form controls) must follow the active theme,
@@ -74,32 +32,42 @@ html.dark {
     scrollbar-width: none; /* Firefox */
 }
 
+/* Optical ladder: weight comes down as size comes down, tracking tightens as
+   size goes up. Seven consecutive levels of semibold was a Rubik-era setting,
+   and holding 600 all the way down to text-sm made every heading shout equally
+   — a heading stops being a headline somewhere, and the scale should say where.
+   600 is display-scale only; the small end carries 500.
+
+   With a single face carrying both headings and body, weight and tracking are
+   the only things separating a heading from the copy around it — so the tiers
+   have to actually differ, rather than all sitting at 600. */
+
 .typography-h1 {
-    @apply text-4xl font-headers font-semibold tracking-tight;
+    @apply text-4xl font-headers font-semibold tracking-display;
 }
 
 .typography-h2 {
-    @apply text-3xl font-headers font-semibold tracking-tight;
+    @apply text-3xl font-headers font-semibold tracking-display;
 }
 
 .typography-h3 {
-    @apply text-2xl font-headers font-semibold tracking-tight;
+    @apply text-2xl font-headers font-semibold tracking-title;
 }
 
 .typography-h4 {
-    @apply text-xl font-headers font-semibold tracking-[-0.01em];
+    @apply text-xl font-headers font-medium tracking-title;
 }
 
 .typography-h5 {
-    @apply text-lg font-headers font-semibold tracking-[-0.01em];
+    @apply text-lg font-headers font-medium tracking-heading;
 }
 
 .typography-h6 {
-    @apply text-base font-headers font-semibold tracking-[-0.01em];
+    @apply text-base font-headers font-medium tracking-heading;
 }
 
 .typography-subtitle1 {
-    @apply text-sm font-headers font-semibold tracking-[-0.01em];
+    @apply text-sm font-headers font-medium tracking-heading;
 }
 
 .typography-subtitle2 {

package/dist/index.es.js

@@ -3455,7 +3455,8 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 			let resultDate;
 			if (!timezone) resultDate = new Date(year, month - 1, day, hours, minutes);
 			else {
-				const offsetMinutes = getTimezoneOffsetMinutes(new Date(Date.UTC(year, month - 1, day, hours, minutes)), timezone);
+				const refUtcDate = new Date(Date.UTC(year, month - 1, day, hours, minutes));
+				const offsetMinutes = getTimezoneOffsetMinutes(refUtcDate, timezone);
 				resultDate = /* @__PURE__ */ new Date(Date.UTC(year, month - 1, day, hours, minutes) - offsetMinutes * 6e4);
 			}
 			if (isNaN(resultDate.getTime())) throw new Error("Invalid date");
@@ -4092,7 +4093,8 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 		}
 	};
 	const toggleOption = (value) => {
-		updateValues(selectedValues.some((v) => String(v) === String(value)) ? selectedValues.filter((v) => String(v) !== String(value)) : [...selectedValues, value]);
+		const newSelectedValues = selectedValues.some((v) => String(v) === String(value)) ? selectedValues.filter((v) => String(v) !== String(value)) : [...selectedValues, value];
+		updateValues(newSelectedValues);
 	};
 	const handleClear = () => {
 		updateValues([]);
@@ -4930,7 +4932,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 			"min-h-[32px]": size === "small",
 			"min-h-[44px]": size === "medium",
 			"min-h-[64px]": size === "large"
-		}, label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : size === "smallest" ? "py-0.5" : size === "small" ? "py-1" : "py-2", endAdornment ? "pr-12" : "pr-3", disabled && "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white", inputClassName),
+		}, label ? size === "large" ? "pt-8 pb-2" : "pt-5 pb-1.5" : size === "smallest" ? "py-0.5" : size === "small" ? "py-1" : "py-2", endAdornment ? "pr-12" : "pr-3", disabled && "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white", inputClassName),
 		placeholder: focused || hasValue || !label ? placeholder : void 0,
 		autoFocus,
 		onFocus: () => setFocused(true),
@@ -5676,6 +5678,7 @@ var VirtualTableHeaderRow = ({ columns, currentSort, onColumnSort, onFilterUpdat
 			const columnFilter = column && filter && filter[column.key] ? filter[column.key] : void 0;
 			const filterForThisProperty = columnFilter ? Array.isArray(columnFilter[0]) ? columnFilter[0] : columnFilter : void 0;
 			const isDraggable = !column.frozen && !!onColumnsOrderChange;
+			const isDragging = draggingColumnId === column.key;
 			return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(SortableColumnHeader, {
 				column,
 				columnIndex,
@@ -5688,7 +5691,7 @@ var VirtualTableHeaderRow = ({ columns, currentSort, onColumnSort, onFilterUpdat
 				onColumnSort,
 				onClickResizeColumn,
 				createFilterField,
-				isDragging: draggingColumnId === column.key,
+				isDragging,
 				isDraggable
 			}) }, "header_" + column.key);
 		}), AddColumnComponent && /* @__PURE__ */ jsx(AddColumnComponent, {})]
@@ -6332,7 +6335,10 @@ function VirtualTableSelect(props) {
 			});
 			if (isNumber) updateValue(newValue);
 			else updateValue(newValue);
-		} else updateValue(typeof options.find((o) => String(o.value) === updatedValue)?.value === "number" ? parseFloat(updatedValue) : updatedValue || null);
+		} else {
+			const opt = options.find((o) => String(o.value) === updatedValue);
+			updateValue(typeof opt?.value === "number" ? parseFloat(updatedValue) : updatedValue || null);
+		}
 	}, [
 		multiple,
 		updateValue,
@@ -7670,7 +7676,7 @@ var SIZE_TO_ROW_HEIGHT = {
 	l: 64,
 	xl: 80
 };
-var SORTABLE_TYPES = new Set([
+var SORTABLE_TYPES = /* @__PURE__ */ new Set([
 	"string",
 	"number",
 	"date"
@@ -7809,7 +7815,7 @@ function resolveTitlePropertyKey(order, properties, idProperty, titleProperty) {
 		PLAIN_TEXT: 60,
 		NAMED: 100
 	};
-	const titleLikeKeys = new Set([
+	const titleLikeKeys = /* @__PURE__ */ new Set([
 		"name",
 		"fullname",
 		"displayname",