@utilitywarehouse/hearth-react 0.28.2 → 0.28.4

package/dist/components/UnstyledIconButton/UnstyledIconButton.d.cts

@@ -1,11 +0,0 @@
-import * as react from 'react';
-import { UnstyledIconButtonProps } from './UnstyledIconButton.props.cjs';
-import '../../types/responsive.cjs';
-import '../IconButton/IconButton.props.cjs';
-import '../ButtonBase/ButtonBase.props.cjs';
-import '../../props/margin.props.cjs';
-import '../../types/css-token-variable.cjs';
-
-declare const UnstyledIconButton: react.ForwardRefExoticComponent<Omit<UnstyledIconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-
-export { UnstyledIconButton };

package/dist/components/UnstyledIconButton/UnstyledIconButton.props.d.cts

@@ -1,28 +0,0 @@
-import { ComponentPropsWithRef } from 'react';
-import { Responsive } from '../../types/responsive.cjs';
-import { IconButtonProps } from '../IconButton/IconButton.props.cjs';
-import '../ButtonBase/ButtonBase.props.cjs';
-import '../../props/margin.props.cjs';
-import '../../types/css-token-variable.cjs';
-
-declare const sizes: readonly ["sm", "md"];
-declare const unstyledIconButtonPropDefs: {
-    size: {
-        className: string;
-        tokens: readonly ["sm", "md"];
-        responsive: true;
-        default: string;
-    };
-};
-type UnstyledIconButtonProps = ComponentPropsWithRef<'button'> & Pick<IconButtonProps, 'loading' | 'asChild'> & {
-    label: IconButtonProps['label'];
-    /**
-     * Sets the button height.
-     * @default md
-     */
-    size?: Responsive<(typeof sizes)[number]>;
-    /** Inverts the component colours, for use on darker surface colours. */
-    inverted?: boolean;
-};
-
-export { type UnstyledIconButtonProps, unstyledIconButtonPropDefs };

package/dist/components/ValidationText/ValidationText.d.cts

@@ -1,11 +0,0 @@
-import * as react from 'react';
-import { ValidationTextProps } from './ValidationText.props.cjs';
-import '../../props/margin.props.cjs';
-import '../../types/css-token-variable.cjs';
-import '../../types/responsive.cjs';
-import '../../props/text-align.props.cjs';
-import '../../props/text-transform.props.cjs';
-
-declare const ValidationText: react.ForwardRefExoticComponent<Omit<ValidationTextProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
-
-export { ValidationText };

package/dist/components/ValidationText/ValidationText.props.d.cts

@@ -1,18 +0,0 @@
-import { ComponentPropsWithRef } from 'react';
-import { MarginProps } from '../../props/margin.props.cjs';
-import { TextAlignProps } from '../../props/text-align.props.cjs';
-import { TextTransformProps } from '../../props/text-transform.props.cjs';
-import '../../types/css-token-variable.cjs';
-import '../../types/responsive.cjs';
-
-interface ValidationTextProps extends Omit<ComponentPropsWithRef<'span'>, 'color'>, MarginProps, TextAlignProps, TextTransformProps {
-    /**
-     * The validation status
-     * @default 'valid'
-     */
-    status?: 'valid' | 'invalid';
-    /** Make the text unselectable, for use when associated with input elements. */
-    disableUserSelect?: boolean;
-}
-
-export type { ValidationTextProps };

package/dist/components/VerificationInput/VerificationInput.d.cts

@@ -1,17 +0,0 @@
-import * as react from 'react';
-import { ComponentRef } from 'react';
-import { VerificationInputProps } from './VerificationInput.props.cjs';
-import 'radix-ui';
-import '../../props/margin.props.cjs';
-import '../../types/css-token-variable.cjs';
-import '../../types/responsive.cjs';
-import '../FormField/FormField.props.cjs';
-import '../InputBase/InputBase.props.cjs';
-import '../../helpers/input-attributes.cjs';
-import '../Label/Label.props.cjs';
-import '../../props/text-transform.props.cjs';
-
-type VerificationInputElement = ComponentRef<'input'>;
-declare const VerificationInput: react.ForwardRefExoticComponent<Omit<VerificationInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
-
-export { VerificationInput, type VerificationInputElement };

package/dist/components/VerificationInput/VerificationInput.props.d.cts

@@ -1,14 +0,0 @@
-import { ComponentPropsWithoutRef, RefAttributes } from 'react';
-import { unstable_OneTimePasswordField } from 'radix-ui';
-import { MarginProps } from '../../props/margin.props.cjs';
-import { FormFieldProps } from '../FormField/FormField.props.cjs';
-import '../../types/css-token-variable.cjs';
-import '../../types/responsive.cjs';
-import '../InputBase/InputBase.props.cjs';
-import '../../helpers/input-attributes.cjs';
-import '../Label/Label.props.cjs';
-import '../../props/text-transform.props.cjs';
-
-type VerificationInputProps = Omit<ComponentPropsWithoutRef<typeof unstable_OneTimePasswordField.Root>, 'asChild' | 'dir' | 'orientation'> & RefAttributes<HTMLInputElement> & Omit<FormFieldProps, 'hideLabel' | 'dir'> & MarginProps;
-
-export type { VerificationInputProps };

package/dist/helpers/cn.d.cts

@@ -1,3 +0,0 @@
-declare function cn(...classNames: Array<string | null | undefined | false>): string;
-
-export { cn };

package/dist/helpers/extract-props.d.cts

@@ -1,43 +0,0 @@
-import { PropDef } from '../props/prop-def.cjs';
-
-/**
- * Extracts component-specific style props based on provided prop definitions and
- * returns remaining props with composed `className` and `style`.
- *
- * This helper reads values for keys declared in `propDefs`, converts them into
- * utility classes and CSS variables via `getClassNameStyles`, merges all resulting
- * class names and inline styles, and removes those handled props from the returned
- * object. Any original `className` and `style` passed in `props` are appended/merged
- * at the end.
- *
- * Generics
- * - `P`: The full props shape for the component. Must allow `className` and `style`.
- * - `T`: A tuple/array of dictionaries mapping prop names to `PropDef`.
- *
- * Example
- * ```ts
- * const {
- *   className,
- *   ...componentProps
- * } = extractProps(
- *   props,
- *   componentPropDefs,
- *   paddingPropDefs,
- *   marginPropDefs,
- *   colorPropDefs,
- *   backgroundColorPropDefs,
- * );
- * // => { className: "h-background-color h-r-height h-border-color h-r-border-style-solid h-r-border-width-1 h-r-border-radius-xs", style: {--h-background-color: "var(--h-color-grey-100)", --h-border-color: "var(--h-color-grey-200)" --h-r-height: "100%" }, ...otherProps}
- * ```
- *
- * @param props - Incoming props for the component, including potential style props.
- * @param propDefs - One or more maps of prop names to `PropDef` describing how to build classes/vars.
- * @returns The original props minus handled style props, with merged `className` and `style` applied.
- */
-declare function extractProps<P extends {
-    className?: string;
-    style?: React.CSSProperties;
-    [key: string]: any;
-}, T extends Array<Record<string, PropDef>>>(props: P, ...propDefs: T): P;
-
-export { extractProps };

package/dist/helpers/get-classname-styles.d.cts

@@ -1,114 +0,0 @@
-import { Responsive } from '../types/responsive.cjs';
-
-/**
- * Options for `getClassNameStyles`.
- */
-type GetClassNameStylesOptions = {
-    /**
-     * The input to map to className/style.
-     * - Token or raw value: string | number
-     * - Boolean: only `true` is meaningful and produces a bare class
-     * - Responsive: per-breakpoint values keyed by breakpoint names
-     */
-    value: Responsive<string | number> | undefined;
-    /**
-     * The utility prefix segment used in the generated class(es), e.g. `color`, `gap`.
-     */
-    prefix: string | undefined;
-    /**
-     * Whitelist of token values that should become token classes instead of CSS variables.
-     */
-    tokens: ReadonlyArray<string | number> | undefined;
-    /**
-     * Whether to include the responsive segment (`-r`) and support responsive var naming.
-     */
-    isResponsive: boolean;
-    /**
-     * Default token/raw value to use when `value` is `undefined`.
-     */
-    defaultValue?: string | number;
-};
-/**
- * Build a className (and optional style object) for utility-first, token-aware styling.
- *
- * The function maps a provided value (token, raw value, boolean, or responsive object)
- * to a prefixed utility class name, and when necessary, emits CSS custom properties
- * to carry raw values that are not represented by tokens.
- *
- * Behavior summary:
- * - Token value: emits a single class (e.g. `h-r-color-red-500`).
- * - Non-token value: emits a base class (e.g. `h-r-width`) and a style object with a CSS var.
- * - Boolean true: emits a single non-responsive class (e.g. `h-hidden`).
- * - Responsive object: emits breakpoint-scoped classes and, for non-token values, breakpoint-scoped CSS vars.
- * - When `defaultValue` is provided and `value` is `undefined`, a default class is emitted.
- *
- * Examples
- * ```ts
- * // 1) Token value → single token class
- * getClassNameStyles({
- *   value: 'grey-200',
- *   prefix: 'border-color',
- *   tokens: ['blue0', 'blue50', 'blue100', ... ],
- *   isResponsive: false,
- * });
- * // => { className: 'h-color-red-500' }
- *
- * // 2) Non-token value → base class + CSS variable
- * getClassNameStyles({
- *   value: 16,
- *   prefix: 'gap',
- *   tokens: [0, 4, 8, 12],
- *   isResponsive: false,
- * });
- * // => { className: 'h-gap', style: { '--h-gap': 16 } }
- *
- * // 3) Boolean true → simple class (non-responsive)
- * getClassNameStyles({
- *   value: true,
- *   prefix: 'hidden',
- *   tokens: undefined,
- *   isResponsive: false,
- * });
- * // => { className: 'h-hidden' }
- *
- * // 4) Responsive object with mixed token/non-token values
- * getClassNameStyles({
- *   value: { mobile: 'red-500', tablet: '#ff0000' },
- *   prefix: 'color',
- *   tokens: ['red-500'],
- *   isResponsive: true,
- * });
- * // => {
- * //   className: 'h-r-color-red-500 tablet:h-r-color',
- * //   style: { '--h-r-color-tablet': '#ff0000' }
- * // }
- *
- * // 5) Default value when value is undefined
- * getClassNameStyles({
- *   value: undefined,
- *   defaultValue: 'md',
- *   prefix: 'size',
- *   tokens: ['sm', 'md', 'lg'],
- *   isResponsive: false,
- * });
- * // => { className: 'h-size-md' }
- * ```
- *
- * @param value The styling value; may be a token, raw value, boolean true, or a responsive object.
- * @param prefix The utility prefix to use in the generated class name(s).
- * @param tokens List of acceptable token values; used to decide token vs raw handling.
- * @param isResponsive Whether this utility participates in responsive variants (adds the `-r` segment).
- * @param defaultValue Optional default token/raw value used when `value` is `undefined`.
- * @returns An object containing `className` and, when needed, a `style` map of CSS custom properties.
- */
-declare const getClassNameStyles: ({ value, prefix, tokens, isResponsive, defaultValue, }: GetClassNameStylesOptions) => {
-    className: string;
-    style?: undefined;
-} | {
-    className: string;
-    style: {
-        [x: string]: string | number | undefined;
-    };
-} | undefined;
-
-export { getClassNameStyles };

package/dist/helpers/get-initials.d.cts

@@ -1,3 +0,0 @@
-declare function getInitials(name?: string): string | undefined;
-
-export { getInitials };

package/dist/helpers/get-responsive-translation.d.cts

@@ -1,26 +0,0 @@
-import { Responsive } from '../types/responsive.cjs';
-
-/**
- * Translates a responsive value according to a provided mapping.
- *
- * If a responsive object is provided, the translation is applied per
- * breakpoint and a responsive object is returned.
- *
- * Examples
- * ```ts
- * getResponsiveTranslation('large', { large: 'medium', medium: 'small' }) // => 'medium'
- * getResponsiveTranslation({ mobile: 'medium', tablet: 'large' }, { large: 'medium', medium: 'small' })
- * // => { mobile: 'small', tablet: 'medium' }
- * getResponsiveTranslation<Orientation>({mobile: 'column', desktop: 'row'}, { column: 'vertical', row: 'horizontal' });
- * // => { mobile: 'vertical', tablet: 'horizontal' }
- * ```
- *
- * @param size - The size value (string or responsive object) to translate.
- * @param translation - Mapping object from input size to output size.
- * @returns The translated size (string or responsive object). May be `undefined` if input is unsupported.
- */
-declare function getResponsiveTranslation<Value extends string | number>(value: Responsive<Value | Omit<string, Value>> | undefined, translation: {
-    [key: string]: Responsive<Value | Omit<string, Value>> | undefined;
-}): Responsive<Value | Omit<string, Value>> | undefined;
-
-export { getResponsiveTranslation };

package/dist/helpers/get-subtree.d.cts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-
-/**
- * This is a helper function that is used when a component supports `asChild`
- * using the `Slot` component but its implementation contains nested DOM elements.
- *
- * Using it ensures if a consumer uses the `asChild` prop, the elements are in
- * correct order in the DOM, adopting the intended consumer `children`.
- */
-declare function getSubtree(options: {
-    asChild: boolean | undefined;
-    children: ReactNode;
-}, content: ReactNode | ((children: ReactNode) => ReactNode)): ReactNode;
-
-export { getSubtree };

package/dist/helpers/input-attributes.d.cts

@@ -1,5 +0,0 @@
-type InputAttributes = 'accept' | 'alt' | 'autocapitalize' | 'autocomplete' | 'capture' | 'checked' | 'defaultChecked' | 'defaultValue' | 'disabled' | 'form' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget' | 'height' | 'list' | 'max' | 'maxlength' | 'min' | 'minlength' | 'multiple' | 'name' | 'pattern' | 'placeholder' | 'popovertarget' | 'popovertargetaction' | 'readonly' | 'required' | 'size' | 'src' | 'step' | 'type' | 'value' | 'width';
-type InputTextualAttributes = 'autoCapitalize' | 'autoComplete' | 'defaultValue' | 'disabled' | 'form' | 'list' | 'maxLength' | 'minLength' | 'min' | 'multiple' | 'max' | 'name' | 'pattern' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'step' | 'type' | 'value';
-type NotInputTextualAttributes = Exclude<InputAttributes, InputTextualAttributes>;
-
-export type { InputAttributes, InputTextualAttributes, NotInputTextualAttributes };

package/dist/helpers/is-responsive-object.d.cts

@@ -1,24 +0,0 @@
-import { Responsive, Breakpoint } from '../types/responsive.cjs';
-
-/**
- * Type guard that checks whether a value is a responsive object keyed by known breakpoints.
- *
- * Accepts a candidate that may be a `Responsive<Value>` object, a boolean, or `undefined`.
- * - Returns `false` for boolean values (responsive booleans are not supported).
- * - Returns `true` only when the value is an object with at least one key that matches a
- *   known breakpoint from `breakpoints`.
- *
- * Example
- * ```ts
- * isResponsiveObject({ mobile: 'sm', tablet: 'md' }) // true
- * isResponsiveObject(true) // false
- * isResponsiveObject(undefined) // false
- * isResponsiveObject({ foo: 'bar' }) // false (no breakpoint keys)
- * ```
- *
- * @param obj Candidate value to test for responsive shape.
- * @returns `true` if `obj` is a record keyed by known breakpoints; otherwise `false`.
- */
-declare function isResponsiveObject<Value extends string | number>(obj: Responsive<Value | Omit<string, Value>> | boolean | undefined): obj is Record<Breakpoint, string>;
-
-export { isResponsiveObject };

package/dist/helpers/kebab-case.d.cts

@@ -1,3 +0,0 @@
-declare function kebabCase(value: string): string;
-
-export { kebabCase };

package/dist/helpers/logger.d.cts

@@ -1,3 +0,0 @@
-declare const warn: (condition: boolean, message: string) => void;
-
-export { warn };

package/dist/helpers/merge-ids.d.cts

@@ -1,3 +0,0 @@
-declare const mergeIds: (...ids: Array<string | undefined>) => string | undefined;
-
-export { mergeIds };

package/dist/helpers/merge-styles.d.cts

@@ -1,4 +0,0 @@
-type InlineStyle = React.CSSProperties | Record<string, string | number | null | undefined> | undefined;
-declare function mergeStyles(...styles: Array<InlineStyle>): InlineStyle;
-
-export { mergeStyles };

package/dist/helpers/transform-color-value.d.cts

@@ -1,17 +0,0 @@
-/**
- * Converts a color token or name into a CSS variable reference used by the system.
- *
- * The input is kebab-cased and interpolated into `var(--h-color-<token>)`.
- *
- * Example
- * ```ts
- * transformColorValue('Blue 500') // => 'var(--h-color-blue-500)'
- * transformColorValue('grey-200') // => 'var(--h-color-grey-200)'
- * ```
- *
- * @param colorValue A token/name representing a color (e.g., 'blue-500').
- * @returns A CSS variable string referencing the normalized color token.
- */
-declare function transformColorValue(colorValue: string): string;
-
-export { transformColorValue };

package/dist/helpers/value-to-percent.d.cts

@@ -1,3 +0,0 @@
-declare function valueToPercent(value: number, min: number, max: number): number;
-
-export { valueToPercent };

package/dist/helpers/with-global-prefix.d.cts

@@ -1,4 +0,0 @@
-declare const GLOBAL_PREFIX = "h";
-declare function withGlobalPrefix(name: string): string;
-
-export { GLOBAL_PREFIX, withGlobalPrefix };

package/dist/hooks/use-combobox-filter.d.cts

@@ -1,5 +0,0 @@
-import { Combobox } from '@base-ui/react/combobox';
-
-declare const useComboboxFilter: typeof Combobox.useFilter;
-
-export { useComboboxFilter };

package/dist/hooks/use-ids.d.cts

@@ -1,34 +0,0 @@
-interface UseIdsProps {
-    providedId?: string;
-    providedLabelId?: string;
-    providedHelperTextId?: string;
-    providedValidationTextId?: string;
-    prefix?: string;
-}
-/**
- * Generate stable, prefixed IDs for ARIA labelling and descriptions.
- *
- * Accepts optional, fully-controlled IDs. When not provided, IDs are generated using
- * React's `useId()` and prefixed with the global prefix and optional `prefix` value.
- * Returns a bundle of IDs commonly used by form controls and other labelled components.
- *
- * Example
- * ```ts
- * const { id, labelId, helperTextId, validationTextId } = useIds({ prefix: 'text-input' });
- * // id → e.g. 'h-text-input-:r1:'
- * // labelId → 'h-text-input-:r1:-label'
- * // helperTextId → 'h-text-input-:r1:-helper-text'
- * // validationTextId → 'h-text-input-:r1:-validation-text'
- * ```
- *
- * @param props - Optional explicit IDs and an optional `prefix` used when generating IDs.
- * @returns An object containing `id`, `labelId`, `helperTextId`, and `validationTextId`.
- */
-declare const useIds: ({ providedId, providedLabelId, providedHelperTextId, providedValidationTextId, prefix: providedPrefix, }: UseIdsProps) => {
-    id: string;
-    labelId: string;
-    helperTextId: string;
-    validationTextId: string;
-};
-
-export { useIds };

package/dist/hooks/use-media-query.d.cts

@@ -1,32 +0,0 @@
-interface UseMediaQueryOptions {
-    /**
-     * As `window.matchMedia()` is unavailable on the server,
-     * this is the default value to return.
-     * @default false
-     */
-    defaultValue?: boolean;
-    /**
-     * To perform the server-side hydration, the hook needs to render twice.
-     * A first time with `defaultValue`, the value of the server, and a second time with the resolved value.
-     * This double pass rendering cycle comes with a drawback: it's slower.
-     * In SSR, you should set it to `true`, returning `options.defaultValue` or `false` initially.
-     * @default false
-     */
-    initializeWithDefaultValue?: boolean;
-}
-/**
- * Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
- * @param {string} query - The media query to track.
- * @param {?UseMediaQueryOptions} [options] - The options for customizing the behavior of the hook (optional).
- * @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
- * @example
- * ```tsx
- * import { useMediaQuery, media } from '@utilitywarehouse/hearth-react';
- *
- * const isMobileOrTablet = useMediaQuery(media.below('desktop'));
- * // Use `isMobileOrTablet ` to conditionally apply styles or logic based on the screen size.
- * ```
- */
-declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): boolean;
-
-export { type UseMediaQueryOptions, useMediaQuery };