@rebasepro/ui 0.12.0 → 0.12.1-canary.g009ed95

package/dist/components/Button.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
+import { type ButtonSize } from "../styles";
 export type ButtonProps<C extends React.ElementType = "button"> = {
     children?: React.ReactNode;
     variant?: "filled" | "outlined" | "text";
     disabled?: boolean;
     color?: "primary" | "secondary" | "text" | "error" | "neutral";
-    size?: "small" | "medium" | "large" | "xl" | "2xl";
+    size?: ButtonSize;
     startIcon?: React.ReactNode;
     fullWidth?: boolean;
     className?: string;

package/dist/components/Menubar.d.ts

@@ -1,11 +1,18 @@
 import * as React from "react";
-export declare function Menubar({ children, onSelect, className }: {
+export declare function Menubar({ children, onSelect, value, defaultValue, onValueChange, className }: {
     children: React.ReactNode;
     onSelect?: (event: React.SyntheticEvent) => void;
+    /** Value of the open menu, controlled. Pair with `onValueChange`. */
+    value?: string;
+    /** Value of the menu open on mount, uncontrolled. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
     className?: string;
 }): React.JSX.Element;
-export declare function MenubarMenu({ children }: {
+export declare function MenubarMenu({ children, value }: {
     children: React.ReactNode;
+    /** Identifies this menu to the parent Menubar's `value`/`defaultValue`. */
+    value?: string;
 }): React.JSX.Element;
 export declare function MenubarTrigger({ children, onSelect, className }: {
     children: React.ReactNode;

package/dist/components/SearchBar.d.ts

@@ -10,7 +10,7 @@ interface SearchBarProps {
      * - "medium": 44px height (matches TextField medium)
      * @default "medium"
      */
-    size?: "smallest" | "small" | "medium";
+    size?: "smallest" | "small" | "medium" | "large";
     innerClassName?: string;
     className?: string;
     autoFocus?: boolean;

package/dist/components/VirtualTable/VirtualTable.d.ts

@@ -1,11 +1,17 @@
 import React from "react";
 import { VirtualTableProps } from "./VirtualTableProps";
 /**
- * This is a Table component that allows displaying arbitrary data, not
- * necessarily related to entities or properties. It is the component
- * that powers the entity collections but has a generic API, so it
- * can be reused.
+ * `React.memo` is not generic-preserving: it takes the props type as its own
+ * type argument, so annotating the call with
+ * `VirtualTableProps<Record<string, unknown>>` pinned `T` at the boundary and
+ * discarded the `<T>` the inner function declares. The exported component was
+ * therefore not generic at all — every consumer got `Record<string, unknown>`,
+ * `columns` and `cellRenderer` were unrelated to `data`, and a caller writing
+ * `<VirtualTable<Post> …>` was told the component expects no type arguments.
  *
- * @group Components
+ * Re-asserting the call signature is the standard way to carry a type parameter
+ * across `memo`; it is the only cast here, and it restores the generic the
+ * implementation always had. Runtime behaviour is unchanged — this is the same
+ * memoized component under a type that describes it.
  */
-export declare const VirtualTable: React.NamedExoticComponent<VirtualTableProps<Record<string, unknown>>>;
+export declare const VirtualTable: <T extends Record<string, unknown>>(props: VirtualTableProps<T>) => React.ReactElement | null;

package/dist/components/VirtualTable/fields/VirtualTableDateField.d.ts

@@ -8,6 +8,7 @@ export declare function VirtualTableDateField(props: {
     updateValue: (newValue: (Date | null)) => void;
     focused: boolean;
     disabled: boolean;
+    small?: boolean;
     locale?: string;
     onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
 }): React.JSX.Element;

package/dist/components/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./common/SelectInputLabel";
 export * from "./Autocomplete";
 export * from "./Alert";
 export * from "./Avatar";

package/dist/icons/GitHubIcon.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { IconProps } from "./Icon";
-export declare function GitHubIcon(props: IconProps): React.JSX.Element;
+export declare function GitHubIcon({ size, color, className, onClick, style }: IconProps): React.JSX.Element;

package/dist/icons/HandleIcon.d.ts

@@ -1 +1,3 @@
-export declare function HandleIcon(): import("react").JSX.Element;
+import React from "react";
+import { IconProps } from "./Icon";
+export declare function HandleIcon({ size, color, className, onClick, style }: IconProps): React.JSX.Element;

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.d.ts

@@ -3,7 +3,8 @@ export * from "./views";
 export * from "./icons";
 export * from "./styles";
 export { cls } from "./util/cls";
-export { CHIP_COLORS, getColorSchemeForKey, getColorSchemeForSeed } from "./util/chip_colors";
+export { CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, getColorSchemeForKey, getColorSchemeForSeed } from "./util/chip_colors";
+export type { ChipHue, ChipTone } from "./util/chip_colors";
 export { useOutsideAlerter } from "./hooks/useOutsideAlerter";
 export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
 export { useDebounceCallback } from "./hooks/useDebounceCallback";