@paul-portfolio/react 0.4.0 → 0.4.2

package/dist/Button.d.ts

@@ -1,5 +1,5 @@
 import { type ButtonHTMLAttributes, type AnchorHTMLAttributes, type ReactNode } from 'react';
-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'gel';
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 type BaseProps = {
     variant?: ButtonVariant;

package/dist/FilterBar.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/**
+ * A labelled region that holds a wrapping row of filter controls (typically
+ * `Select`s). Renders a `<section>` landmark so its controls sit inside a named
+ * region, with a centered, max-width row that wraps when space is tight.
+ */
+export declare const FilterBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "aria-label"> & {
+    /**
+     * Accessible name for the region (e.g. "Team and player filters"). Required
+     * because the bar is a labelled landmark; without a name the region would be
+     * ignored by assistive tech.
+     */
+    label: string;
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/FilterBar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from './cx';
+/**
+ * A labelled region that holds a wrapping row of filter controls (typically
+ * `Select`s). Renders a `<section>` landmark so its controls sit inside a named
+ * region, with a centered, max-width row that wraps when space is tight.
+ */
+export const FilterBar = forwardRef(function FilterBar({ label, children, className, ...props }, ref) {
+    return (_jsx("section", { ref: ref, "aria-label": label, className: cx('filter-bar', className), ...props, children: _jsx("div", { className: "filter-bar__row", children: children }) }));
+});

package/dist/Select.d.ts

@@ -0,0 +1,20 @@
+import { type SelectHTMLAttributes } from 'react';
+/**
+ * A labelled, accessible `<select>` that shares the input styling and paints
+ * its own chevron (the native one is hidden for cross-browser consistency).
+ * When rendered without a visible `label`, pass an `aria-label` so the control
+ * still has an accessible name.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> & {
+    label?: string;
+    error?: string;
+    helper?: string;
+    size?: 'sm' | 'md';
+    /**
+     * `vertical` (default) stacks the label above the control, matching the
+     * input field family. `horizontal` puts the label inline to the left, for
+     * compact filter rows (see `FilterBar`).
+     */
+    orientation?: 'vertical' | 'horizontal';
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/Select.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { cx } from './cx';
+/**
+ * A labelled, accessible `<select>` that shares the input styling and paints
+ * its own chevron (the native one is hidden for cross-browser consistency).
+ * When rendered without a visible `label`, pass an `aria-label` so the control
+ * still has an accessible name.
+ */
+export const Select = forwardRef(function Select({ label, error, helper, size, orientation = 'vertical', disabled, className, children, ...props }, ref) {
+    const id = useId();
+    const helperId = `${id}-helper`;
+    const helperText = error || helper;
+    return (_jsxs("div", { className: cx('select__wrapper', orientation === 'horizontal' && 'select__wrapper--horizontal'), children: [label && _jsx("label", { className: "select__label", htmlFor: id, children: label }), _jsx("select", { ref: ref, id: id, className: cx('select', size && size !== 'md' && `select--${size}`, error && 'select--error', className), disabled: disabled, "aria-invalid": error ? true : undefined, "aria-describedby": helperText ? helperId : undefined, ...props, children: children }), helperText && (_jsx("span", { id: helperId, className: cx('select__helper', error && 'select__helper--error'), children: helperText }))] }));
+});

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export { Card } from './Card';
 export { Chip } from './Chip';
 export { Input } from './Input';
 export { Textarea } from './Textarea';
+export { Select } from './Select';
+export { FilterBar } from './FilterBar';
 export { Switch } from './Switch';
 export { Modal } from './Modal';
 export { Tooltip } from './Tooltip';

package/dist/index.js

@@ -4,6 +4,8 @@ export { Card } from './Card';
 export { Chip } from './Chip';
 export { Input } from './Input';
 export { Textarea } from './Textarea';
+export { Select } from './Select';
+export { FilterBar } from './FilterBar';
 export { Switch } from './Switch';
 export { Modal } from './Modal';
 export { Tooltip } from './Tooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paul-portfolio/react",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "React components for the Paul Design System",
   "license": "MIT",
   "repository": {