@jfrader/ui 0.4.0 → 0.5.0

package/dist/types/components/usage-meter/usage-meter.d.ts

@@ -0,0 +1,83 @@
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type UsageMeterState = 'normal' | 'near-limit' | 'over-limit' | 'unavailable';
+export type UsageMeterSize = 'sm' | 'md' | 'lg';
+export type UsageMeterSelection = {
+    kind: 'segment';
+    id: string;
+} | {
+    kind: 'remainder';
+};
+export interface UsageMeterSegment {
+    /** Stable, nonempty, unique identity. */
+    id: string;
+    label: string;
+    value: number;
+    tone?: 'accent' | 'info' | 'success' | 'warning';
+}
+export type UsageMeterItem = UsageMeterSelection & {
+    label: string;
+    value: number;
+};
+export interface UsageMeterSummary {
+    total: number;
+    limit: number;
+    free: number;
+    over: number;
+    ratio: number;
+    state: UsageMeterState;
+    formattedTotal: string;
+    formattedLimit: string;
+    formattedPercent: string;
+}
+export interface UsageMeterLabels {
+    free: string;
+    near: string;
+    over: string;
+    normal: string;
+    unavailable: string;
+    legend: string;
+}
+export type UsageMeterPartProps<T extends 'div' | 'span' | 'p' | 'ul' | 'button' = 'span'> = Omit<ComponentPropsWithoutRef<T>, 'children'> & {
+    css?: Interpolation<Theme>;
+};
+export interface UsageMeterProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue'>, SxProps {
+    label: ReactNode;
+    segments: readonly UsageMeterSegment[];
+    limit: number;
+    warnAt?: number;
+    size?: UsageMeterSize;
+    locale?: Intl.LocalesArgument;
+    numberFormatOptions?: Intl.NumberFormatOptions;
+    unitLabel?: ReactNode;
+    /** English defaults; translation callbacks also localize relational value copy. */
+    labels?: Partial<UsageMeterLabels>;
+    getValueLabel?: (summary: UsageMeterSummary) => string;
+    getItemLabel?: (item: UsageMeterItem, summary: UsageMeterSummary) => string;
+    interactive?: boolean;
+    value?: UsageMeterSelection | null;
+    defaultValue?: UsageMeterSelection | null;
+    onValueChange?: (selection: UsageMeterSelection | null) => void;
+    announceChanges?: boolean;
+    statusIcon?: (state: UsageMeterState) => ReactNode;
+    slotProps?: {
+        root?: UsageMeterPartProps<'div'>;
+        title?: UsageMeterPartProps;
+        status?: UsageMeterPartProps;
+        total?: UsageMeterPartProps<'p'>;
+        track?: UsageMeterPartProps<'div'>;
+        segment?: UsageMeterPartProps;
+        overage?: UsageMeterPartProps;
+        limit?: UsageMeterPartProps;
+        legend?: UsageMeterPartProps<'ul'>;
+        item?: UsageMeterPartProps<'button'>;
+    };
+}
+/** Finite allowance, not task progress. The meter is not focusable; legend arrows/Home/End
+ * move focus, Enter/Space toggle a pin, and Escape clears it. Numeric ARIA saturates at the
+ * allowance while visible text and aria-valuetext retain actual overuse. */
+export declare function UsageMeter({ ref, label, segments, limit, warnAt, size, locale, numberFormatOptions, unitLabel, labels: labelsProp, getValueLabel, getItemLabel, interactive, value, defaultValue, onValueChange, announceChanges, statusIcon, slotProps, className, sx, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, 'aria-label': ariaLabel, ...rest }: UsageMeterProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace UsageMeter {
+    var displayName: string;
+}

package/dist/types/index.d.ts

@@ -1,40 +1,80 @@
 export * from './components/accordion';
 export * from './components/alert';
+export * from './components/announcement-bar';
 export * from './components/avatar';
+export * from './components/avatar-group';
 export * from './components/badge';
+export * from './components/bottom-sheet';
 export * from './components/breadcrumbs';
 export * from './components/button';
 export * from './components/calendar';
 export * from './components/card';
+export * from './components/carousel';
 export * from './components/checkbox';
+export * from './components/chip-group';
+export * from './components/code-block';
 export * from './components/command-palette';
 export * from './components/combobox';
 export * from './components/container';
+export * from './components/copy-button';
+export * from './components/countdown';
 export * from './components/date-picker';
+export * from './components/date-range-picker';
 export * from './components/dialog';
 export * from './components/divider';
+export * from './components/drawer';
+export * from './components/empty-state';
+export * from './components/expandable-card';
+export * from './components/file-dropzone';
+export * from './components/filter-toolbar';
 export * from './components/flex';
+export * from './components/hold-to-confirm';
+export * from './components/image-compare';
+export * from './components/inline-edit';
+export * from './components/hover-card';
+export * from './components/json-viewer';
 export * from './components/kbd';
+export * from './components/mention-input';
 export * from './components/menu';
+export * from './components/metric-card';
+export * from './components/multi-select';
 export * from './components/navigation';
 export * from './components/pagination';
+export * from './components/password-field';
 export * from './components/pill';
 export * from './components/popover';
 export * from './components/progress';
+export * from './components/radio-cards';
 export * from './components/radio-group';
+export * from './components/resizable-panels';
+export * from './components/scroll-area';
+export * from './components/search-field';
+export * from './components/segmented-control';
 export * from './components/select';
+export * from './components/signature-pad';
 export * from './components/skeleton';
+export * from './components/slider';
+export * from './components/sortable-data-table';
 export * from './components/spinner';
+export * from './components/split-button';
 export * from './components/stack';
+export * from './components/stepper';
+export * from './components/swipe-actions';
 export * from './components/switch';
 export * from './components/tabs';
+export * from './components/tag-input';
 export * from './components/text-field';
 export * from './components/textarea';
 export { ThemeProvider, useTheme, type ThemeProviderProps } from './components/theme-provider/theme-provider';
 export * from './components/theme-root';
+export * from './components/time-picker';
+export * from './components/timeline';
 export * from './components/toast';
+export * from './components/toast-stack';
 export * from './components/toggle-group';
 export * from './components/tooltip';
+export * from './components/tree-view';
+export * from './components/usage-meter';
 export { styled } from './styling/styled';
 export type { SxProps } from './styling/sx';
 export { theme, type JfraderTheme } from './styling/theme';

package/dist/types/overlay/overlay-layer.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import { type ElementProps, type FloatingContext } from '@floating-ui/react';
+/**
+ * `container`: a layer whose content holds focus and may host other layers (Popover,
+ * DateRangePicker). Escape and outside press are ignored by the layer itself while a child
+ * layer is open.
+ * `leaf`: a layer that hosts none (HoverCard). Focus usually stays outside it (e.g. in the
+ * parent's content, whose own key handling stops the event from bubbling), so Escape is
+ * handled in the capture phase and stops at its target once the leaf closes.
+ */
+export type LayerKind = 'container' | 'leaf';
+/** Escape and outside-press dismissal for one layer; pass the result into `useInteractions`. */
+export declare function useLayerDismiss(context: FloatingContext, kind: LayerKind): ElementProps[];
+/**
+ * Registers one overlay layer and renders `children` with its node id, which the layer passes
+ * to `useOverlayFloating`. Layers rendered inside `children` become its children in the tree.
+ */
+export declare function OverlayLayer({ children }: {
+    children: (nodeId: string | undefined) => ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace OverlayLayer {
+    var displayName: string;
+}
+/**
+ * Root boundary for an overlay that does not take part in layer nesting. Inside a layer it gets
+ * its own empty tree and no parent node, so it never reads the enclosing layer as its parent.
+ */
+export declare function IsolatedOverlay({ children }: {
+    children: ReactNode;
+}): string | number | bigint | boolean | import("@emotion/react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export declare namespace IsolatedOverlay {
+    var displayName: string;
+}

package/dist/types/overlay/use-overlay-floating.d.ts

@@ -3,9 +3,19 @@ export interface OverlayFloatingOptions {
     open: boolean;
     onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
     placement: Placement;
+    /** Node id from `OverlayLayer`, for overlays that take part in nested dismissal. */
+    nodeId?: string;
+    /** Collision boundary for flip/shift/size. Defaults to the clipping ancestors (and viewport). */
+    boundary?: Element | null;
+    /** Receives the space left for the surface inside the boundary after each positioning pass. */
+    onAvailableSize?: (size: OverlayAvailableSize) => void;
+}
+export interface OverlayAvailableSize {
+    width: number;
+    height: number;
 }
 /**
  * Shared positioning for Popover, Tooltip and Menu. `autoUpdate` only runs while both
  * elements are mounted, so a closed (unmounted) surface does no positioning work.
  */
-export declare function useOverlayFloating({ open, onOpenChange, placement, }: OverlayFloatingOptions): UseFloatingReturn<HTMLButtonElement>;
+export declare function useOverlayFloating({ open, onOpenChange, placement, nodeId, boundary, onAvailableSize, }: OverlayFloatingOptions): UseFloatingReturn<HTMLButtonElement>;

package/dist/types/styling/media.d.ts

@@ -1,2 +1,3 @@
 export declare const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce)";
 export declare const FORCED_COLORS = "@media (forced-colors: active)";
+export declare const COARSE_POINTER = "@media (pointer: coarse)";

package/dist/types/styling/theme.d.ts

@@ -34,7 +34,19 @@ export declare const theme: {
         readonly info: "var(--ui-color-info)";
         readonly infoSoft: "var(--ui-color-info-soft)";
         readonly focusRing: "var(--ui-color-focus-ring)";
+        readonly signatureInkBlack: "var(--ui-color-signature-ink-black)";
+        readonly signatureInkBlue: "var(--ui-color-signature-ink-blue)";
+        readonly signatureInkViolet: "var(--ui-color-signature-ink-violet)";
         readonly scrim: "var(--ui-color-scrim)";
+        readonly syntaxKeyword: "var(--ui-color-syntax-keyword)";
+        readonly syntaxString: "var(--ui-color-syntax-string)";
+        readonly syntaxConstant: "var(--ui-color-syntax-constant)";
+        readonly syntaxFunction: "var(--ui-color-syntax-function)";
+        readonly syntaxType: "var(--ui-color-syntax-type)";
+        readonly syntaxTag: "var(--ui-color-syntax-tag)";
+        readonly syntaxProperty: "var(--ui-color-syntax-property)";
+        readonly syntaxComment: "var(--ui-color-syntax-comment)";
+        readonly syntaxPunctuation: "var(--ui-color-syntax-punctuation)";
     };
     readonly shadow: {
         readonly raised: "var(--ui-shadow-raised)";

package/dist/types/utils/use-controlled-state.d.ts

@@ -2,6 +2,7 @@
  * One state authority for controlled/uncontrolled components.
  * `value === undefined` means uncontrolled; internal state seeds from `defaultValue`.
  * Requests dedupe against the current value and notify only through `onChange`.
+ * `resetToDefault` restores the uncontrolled seed without notifying (native form reset).
  * Do not switch modes during an instance's lifetime (see SKILL.md §5).
  */
-export declare function useControlledState<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (next: T) => void): readonly [T | undefined, (next: T) => void];
+export declare function useControlledState<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (next: T) => void): readonly [T | undefined, (next: T) => void, () => void];