@rebasepro/ui 0.19.1 → 0.19.2-canary.g09316f6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,6 +6,15 @@ export interface ChipProps {
6
6
  children: React.ReactNode;
7
7
  size?: "smallest" | "small" | "medium" | "large";
8
8
  colorScheme?: ChipColorScheme | ChipColorKey;
9
+ /**
10
+ * How a coloured chip paints its hue. `tinted` (the default) is the hue at
11
+ * low alpha behind hue-coloured ink: a label, not a block, and the rule the
12
+ * chrome follows for colour everywhere else (a dot, an icon, an outline, a
13
+ * tint — never a fill). `filled` is the palette's solid stop, for the few
14
+ * places that want a swatch: a colour picker, a legend. A custom scheme
15
+ * without tint values falls back to `filled`.
16
+ */
17
+ variant?: "tinted" | "filled";
9
18
  error?: boolean;
10
19
  outlined?: boolean;
11
20
  onClick?: () => void;
@@ -15,4 +24,4 @@ export interface ChipProps {
15
24
  /**
16
25
  * @group Preview components
17
26
  */
18
- export declare function Chip({ children, colorScheme, error, outlined, onClick, icon, size, className, style }: ChipProps): React.JSX.Element;
27
+ export declare function Chip({ children, colorScheme, error, outlined, variant, onClick, icon, size, className, style }: ChipProps): React.JSX.Element;
@@ -25,9 +25,8 @@ export interface FilterChipProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
25
25
  /**
26
26
  * A toggle chip used for filter presets and similar multi-select controls.
27
27
  *
28
- * Uses an inset box-shadow for the active ring instead of `border` so the
29
- * chip size stays stable across states and the ring cannot be clipped by
30
- * parent `overflow-hidden` containers.
28
+ * Reads as a text tab: no fill at rest, the alpha highlight when active. It
29
+ * shares no grammar with the tinted enum {@link Chip}, which carries a hue.
31
30
  *
32
31
  * @group Interactive components
33
32
  */
@@ -1,7 +1,16 @@
1
1
  import React from "react";
2
2
  import type { FilterFormFieldProps } from "./VirtualTableHeader.js";
3
- /** One sort key: the column, and which way it runs. */
4
- export type VirtualTableSortKey = [string, "asc" | "desc"];
3
+ /**
4
+ * One sort key: the column, which way it runs, and where nulls go.
5
+ *
6
+ * Structurally the data layer's `OrderByTuple`, deliberately restated rather
7
+ * than imported: this package carries no dependency on `@rebasepro/types`, and
8
+ * a design-system table should not acquire one to name a two-word union. The
9
+ * third element is optional, so every existing `[key, direction]` destructure
10
+ * still reads what it always read — but a caller passing the data layer's own
11
+ * order through no longer has to strip it.
12
+ */
13
+ export type VirtualTableSortKey = [string, "asc" | "desc", ("first" | "last")?];
5
14
  export type OnRowClickParams<T extends Record<string, unknown>> = {
6
15
  rowData: T;
7
16
  rowIndex: number;
@@ -4,3 +4,4 @@ export * from "./useDebouncedCallback.js";
4
4
  export * from "./useDebounceCallback.js";
5
5
  export * from "./useDebounceValue.js";
6
6
  export * from "./PortalContainerContext.js";
7
+ export * from "./useIsDarkMode.js";
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Whether the document is in dark mode right now, and re-rendered when that
3
+ * changes.
4
+ *
5
+ * The theme is a class on `<html>` (`dark`, set by the panel's mode
6
+ * controller) or a `data-theme` attribute (the marketing site). Components
7
+ * that pick colours in JS rather than through CSS variables — `Chip` derives
8
+ * its ink per theme — used to read the class once at render and never again,
9
+ * so a theme switch left every chip on screen wearing the other theme's ink
10
+ * until something else happened to re-render it. Subscribing through a
11
+ * `MutationObserver` on the root's attributes makes the read live.
12
+ */
13
+ export declare function useIsDarkMode(): boolean;
package/dist/index.css CHANGED
@@ -121,7 +121,10 @@ html.dark {
121
121
  }
122
122
 
123
123
  .typography-button {
124
- @apply text-sm font-semibold tracking-wide;
124
+ /* 500, sentence case, no tracking. Semibold + tracking-wide was the Rubik-era
125
+ button voice and it made every control shout equally; the reference sets
126
+ controls at 500 and lets the primary FILL carry emphasis, not the label. */
127
+ @apply text-sm font-medium;
125
128
  }
126
129
 
127
130
  /* ---------------------------------------------------------------------------
package/dist/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export type { ChipHue, ChipTone } from "./util/chip_colors.js";
9
9
  export { useOutsideAlerter } from "./hooks/useOutsideAlerter.js";
10
10
  export { useDebouncedCallback } from "./hooks/useDebouncedCallback.js";
11
11
  export { useDebounceCallback } from "./hooks/useDebounceCallback.js";
12
+ export { useIsDarkMode } from "./hooks/useIsDarkMode.js";
12
13
  export { useDebounceValue } from "./hooks/useDebounceValue.js";
13
14
  export { useInjectStyles } from "./hooks/useInjectStyles.js";
14
15
  export { PortalContainerProvider, usePortalContainer } from "./hooks/PortalContainerContext.js";