hs-uix 1.6.5 → 1.7.0

package/README.md

@@ -14,6 +14,7 @@ npm install hs-uix
 ```jsx
 import { DataTable } from "hs-uix/datatable";
 import { FormBuilder } from "hs-uix/form";
+import { Feed } from "hs-uix/feed";
 import { AutoStatusTag, AutoTag, KeyValueList, SectionHeader } from "hs-uix/common-components";
 import { formatCurrency, formatDate } from "hs-uix/utils";
 
@@ -30,6 +31,7 @@ Requires `react` >= 18.0.0 and `@hubspot/ui-extensions` >= 0.12.0 as peer depend
 | **DataTable** | Filterable, sortable, paginated table with auto-sized columns, inline editing, row grouping, and more | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/packages/datatable/README.md) |
 | **FormBuilder** | Declarative, config-driven form with validation, multi-step wizards, and 20+ field types | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/packages/form/README.md) |
 | **Kanban** | Stage-based board with filters, sort, headline metrics, card action bars, and DataTable-parity card field config | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/packages/kanban/README.md) |
+| **Feed** | Activity feed / timeline with a standard item shape, date grouping, load-more pagination, and HubSpot-native item regions | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/packages/feed/README.md) |
 | **Common Components** | Thin visual wrappers over HubSpot primitives — `AutoTag`, `AutoStatusTag`, `AvatarStack`, `SectionHeader`, `KeyValueList`, `StyledText` | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/src/common-components/README.md) |
 | **Utils** | Pure helpers for formatting, options, HubSpot value guards, and tag-variant inference | [Full documentation](https://github.com/05bmckay/hs-uix/blob/main/src/utils/README.md) |
 

package/common-components.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { BuiltOption } from "./utils";
 import type {
   AutoTagOptions,
   AutoTagVariant,
@@ -99,6 +100,46 @@ export interface AvatarStackProps {
   alt?: string;
 }
 
+export interface CrmLookupSelectProps {
+  objectType: "contact" | "contacts" | "company" | "companies" | "deal" | "deals" | string;
+  properties?: string[];
+  name?: string;
+  label?: string;
+  value?: string | number | boolean | Array<string | number | boolean>;
+  onChange?: (value: string | number | boolean | Array<string | number | boolean>) => void;
+  multiple?: boolean;
+  placeholder?: string;
+  description?: string;
+  tooltip?: string;
+  required?: boolean;
+  readOnly?: boolean;
+  error?: boolean;
+  validationMessage?: string;
+  variant?: "transparent" | "input";
+  debounce?: number;
+  minSearchLength?: number;
+  pageLength?: number;
+  option?: {
+    label?: string | ((row: Record<string, unknown>) => unknown);
+    value?: string | ((row: Record<string, unknown>) => unknown);
+    description?: string | ((row: Record<string, unknown>) => unknown);
+    fallbackLabel?: string;
+    mapOption?: (row: Record<string, unknown>) => BuiltOption;
+  };
+  labelProperty?: string | ((row: Record<string, unknown>) => unknown);
+  valueProperty?: string | ((row: Record<string, unknown>) => unknown);
+  descriptionProperty?: string | ((row: Record<string, unknown>) => unknown);
+  selectedOptions?: BuiltOption | BuiltOption[];
+  format?: Record<string, unknown>;
+  row?: Record<string, unknown>;
+  baseConfig?: Record<string, unknown>;
+  query?: string;
+  onSearchChange?: (query: string) => void;
+  noResultsOption?: BuiltOption;
+  loadingOption?: BuiltOption;
+  selectProps?: Record<string, unknown>;
+}
+
 export interface StyledTextFormat {
   fontWeight?: "bold" | "demibold" | "regular" | number;
   italic?: boolean;
@@ -149,12 +190,123 @@ export interface StyledTextDataUriOptions extends Omit<StyledTextSharedProps, "c
 
 export interface StyledTextProps extends StyledTextSharedProps {}
 
+export type SpinnerName =
+  | "braille"
+  | "braillewave"
+  | "dna"
+  | "scan"
+  | "rain"
+  | "scanline"
+  | "pulse"
+  | "snake"
+  | "sparkle"
+  | "cascade"
+  | "columns"
+  | "orbit"
+  | "breathe"
+  | "waverows"
+  | "checkerboard"
+  | "helix"
+  | "fillsweep"
+  | "diagswipe";
+
+export interface SpinnerPreset {
+  frames: readonly string[];
+  interval: number;
+}
+
+export interface SpinnerProps {
+  name?: SpinnerName | string;
+  frames?: readonly string[];
+  interval?: number;
+  label?: ReactNode;
+  children?: ReactNode;
+  paused?: boolean;
+  gap?: string;
+  variant?: "bodytext" | "microcopy";
+  format?: StyledTextFormat;
+  inline?: boolean;
+  truncate?: boolean | { tooltipText?: string };
+}
+
+export type IconSize =
+  | number
+  | "xs"
+  | "extra-small"
+  | "sm"
+  | "small"
+  | "md"
+  | "med"
+  | "medium"
+  | "lg"
+  | "large"
+  | "xl"
+  | "extra-large";
+
+export interface IconPathObject {
+  d: string;
+  fill?: string;
+  fillRule?: "nonzero" | "evenodd";
+}
+
+export type IconPath = string | IconPathObject;
+
+export interface IconEntry {
+  /** Defaults to "0 0 24 24" when omitted. */
+  viewBox?: string;
+  paths: IconPath[];
+  /** Optional transform applied to all paths (e.g. a mirror/rotation). */
+  transform?: string;
+}
+
+export interface IconProps {
+  /** A registered glyph name (native or custom). Unknown names render nothing. */
+  name: string;
+  /** A semantic token ("inherit" | "alert" | "warning" | "success") or any CSS color. */
+  color?: string;
+  size?: IconSize;
+  /** Accessible label for screen readers. */
+  screenReaderText?: string;
+}
+
+export interface IconDataUriResult {
+  src: string;
+  width: number;
+  height: number;
+}
+
+export interface IconDataUriOptions {
+  size?: IconSize;
+  color?: string;
+}
+
+export declare function Icon(props: IconProps): ReactNode;
+/** Custom glyph names registered in this library (excludes native names). */
+export declare const ICON_NAMES: string[];
+/** The custom glyph registry, keyed by icon name. */
+export declare const ICONS: Record<string, IconEntry>;
+/** The native `@hubspot/ui-extensions` `<Icon>` name whitelist, sorted. */
+export declare const NATIVE_ICON_NAME_LIST: string[];
+/** Build an SVG data URI from a registered name or an inline entry. Null for unknown names. */
+export declare function makeIconDataUri(
+  nameOrEntry: string | IconEntry,
+  options?: IconDataUriOptions
+): IconDataUriResult | null;
+/** Parse a raw `<svg>` string into a registry entry (drops mask/defs, keeps per-path fills). */
+export declare function svgToIconEntry(raw: string): IconEntry;
+
 export declare function AutoTag(props: AutoTagProps): ReactNode;
 export declare function AutoStatusTag(props: AutoStatusTagProps): ReactNode;
 export declare function SectionHeader(props: SectionHeaderProps): ReactNode;
 export declare function KeyValueList(props: KeyValueListProps): ReactNode;
 export declare function AvatarStack(props: AvatarStackProps): ReactNode;
+export declare function CrmLookupSelect(props: CrmLookupSelectProps): ReactNode;
 export declare function StyledText(props: StyledTextProps): ReactNode;
+export declare function Spinner(props: SpinnerProps): ReactNode;
+export declare const SPINNERS: Record<SpinnerName, SpinnerPreset>;
+export declare const SPINNER_NAMES: SpinnerName[];
+export declare function gridToBraille(grid: boolean[][]): string;
+export declare function makeGrid(rows: number, cols: number): boolean[][];
 export declare function makeAvatarStackDataUri(
   items?: AvatarStackItem[] | null,
   options?: Omit<AvatarStackProps, "items" | "alt">