@hex-core/components 0.1.0 → 1.0.0

package/README.md

@@ -1,5 +1,9 @@
 # @hex-core/components
 
+[![npm](https://img.shields.io/npm/v/@hex-core/components.svg)](https://www.npmjs.com/package/@hex-core/components)
+[![downloads](https://img.shields.io/npm/dm/@hex-core/components.svg)](https://www.npmjs.com/package/@hex-core/components)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/oscarabcorona/hex-core/blob/main/LICENSE)
+
 AI-native React components — Radix UI + Tailwind CSS + CVA, with machine-readable schemas for every component.
 
 ## Install

package/dist/index.d.ts

@@ -125,11 +125,21 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 /** A single radio option within a RadioGroup. */
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+interface SliderProps extends React$1.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+    /**
+     * Per-thumb accessible labels. When the slider has multiple thumbs, pass
+     * one entry per thumb (e.g. ["Minimum", "Maximum"]). For a single-thumb
+     * slider, the Root's `aria-label` / `aria-labelledby` is mirrored onto
+     * the thumb automatically — pass `thumbLabels` only when those defaults
+     * are insufficient.
+     */
+    thumbLabels?: string[];
+}
 /**
  * A range input with one or more draggable thumbs.
  * Built on Radix UI Slider with keyboard controls (arrows, Home, End, PageUp/Down).
  */
-declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLSpanElement>>;
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
@@ -175,8 +185,17 @@ declare function Skeleton({ className, ...props }: React$1.HTMLAttributes<HTMLDi
  */
 declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
+interface ScrollAreaProps extends React$1.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    /**
+     * tabIndex applied to the scroll viewport so keyboard users can scroll
+     * without a pointer. Defaults to `0` (focusable) — pass `-1` to skip the
+     * viewport in the tab order when ScrollArea wraps purely decorative or
+     * already-keyboard-reachable content.
+     */
+    viewportTabIndex?: number;
+}
 /** A scrollable area with custom-styled scrollbars. Content must be explicitly sized. */
-declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Styled scrollbar track + thumb. Rendered inside ScrollArea automatically. */
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -224,8 +243,22 @@ declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** Dimmed backdrop rendered behind the dialog content. */
 declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * When `true` (the default), DialogContent caps its height at viewport-2rem
+     * and renders children inside a padded inner scroll container. The Close
+     * button stays anchored to the (non-scrolling) outer panel so it remains
+     * visible even when the user scrolls long content.
+     *
+     * Pass `scrollable={false}` to opt out — useful when the consumer manages
+     * its own scroll surface (e.g. CommandDialog defers scroll to cmdk's
+     * internal CommandList).
+     */
+    scrollable?: boolean;
+}
 /** The dialog content panel, centered on the overlay. Includes a close button by default. */
-declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
 /**
  * Header container inside DialogContent; stacks title and description.
  * @returns A div wrapping title/description with vertical rhythm
@@ -511,7 +544,11 @@ declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes
 declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
 /** `<td>` with consistent padding. */
 declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
-/** `<caption>` positioned below the table. */
+/**
+ * Visible `<caption>` rendered below the table. The parent `<Table>` sets
+ * `caption-bottom`, so the caption is announced first by screen readers when
+ * entering the table, then visually placed below the rows.
+ */
 declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
 
 /**
@@ -523,13 +560,24 @@ declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttrib
 interface DataTableProps<TData> {
     columns: ColumnDef<TData, unknown>[];
     data: TData[];
+    /**
+     * Visible caption rendered below the table. Announced by screen readers
+     * when the user enters the table. Provide either `caption` or `aria-label`.
+     */
+    caption?: React$1.ReactNode;
+    /**
+     * Accessible label for the table when no visible caption is shown.
+     * Forwarded as `aria-label` on the underlying `<table>` element. Kebab-case
+     * to match the canonical ARIA prop convention used elsewhere in Hex UI.
+     */
+    "aria-label"?: string;
 }
 /**
  * Render a data-driven table from TanStack column definitions.
- * @param props - Columns and data
+ * @param props - Columns, data, and optional accessible labelling (`caption` or `aria-label`)
  * @returns A styled Table rendered from the TanStack row model
  */
-declare function DataTable<TData>({ columns, data }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData>({ columns, data, caption, "aria-label": ariaLabel, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 /**
  * Root nav landmark for pagination controls.
@@ -690,14 +738,17 @@ declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
     value?: string;
     forceMount?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-/** Horizontal rule between groups. */
-declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React$1.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
-    alwaysRender?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Horizontal rule between groups. Renders as a presentational `<div>` (no role)
+ * so it can sit inside CommandList (role=listbox) without violating ARIA's
+ * required-children rule for listbox. The line is purely decorative — cmdk's
+ * built-in Separator hardcodes `role="separator"`, which axe rejects in this
+ * context, so we render the divider directly.
+ *
+ * The `data-cmdk-separator` attribute is preserved so existing CSS / test
+ * selectors that target cmdk's separator continue to match.
+ */
+declare const CommandSeparator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 /** Selectable item. onSelect fires on Enter or click. */
 declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
@@ -746,8 +797,10 @@ interface ComboboxProps {
     disabled?: boolean;
     /** Extra class names on the trigger button. */
     className?: string;
-    /** Accessible label for the trigger (required when no adjacent visible <label>). */
+    /** Accessible label for the trigger (required when no adjacent visible label). */
     "aria-label"?: string;
+    /** Id of an external visible label that names this combobox. */
+    "aria-labelledby"?: string;
 }
 /**
  * Searchable select input built on Command + Popover.
@@ -756,7 +809,7 @@ interface ComboboxProps {
  * the trigger; the popover contains a CommandInput and filtered CommandList.
  * @returns A trigger button that opens a filtered option list.
  */
-declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyText, disabled, className, "aria-label": ariaLabel, }: ComboboxProps): react_jsx_runtime.JSX.Element;
+declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyText, disabled, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: ComboboxProps): react_jsx_runtime.JSX.Element;
 declare namespace Combobox {
     var displayName: string;
 }