@hawiyah/react 0.0.0-stage → 0.2.0

package/dist/forms.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { FieldDecoration } from './shared.js';
+import { type Option } from '@hawiyah/core';
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+    variant?: 'primary' | 'default' | 'secondary' | 'outline' | 'outline-white' | 'light' | 'danger' | 'ghost' | 'soft' | 'link';
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+}
+export declare function Button({ variant, size, loading, disabled, type, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+export interface TextFieldProps extends ComponentPropsWithRef<'input'>, FieldDecoration {
+}
+export declare function TextField({ label, hint, error, ...props }: TextFieldProps): import("react").JSX.Element;
+export interface TextareaProps extends ComponentPropsWithRef<'textarea'>, FieldDecoration {
+}
+export declare function Textarea({ label, hint, error, ...props }: TextareaProps): import("react").JSX.Element;
+export interface SelectProps extends ComponentPropsWithRef<'select'>, FieldDecoration {
+    options?: readonly Option[];
+    placeholder?: string;
+}
+export declare function Select({ label, hint, error, ...props }: SelectProps): import("react").JSX.Element;
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'type'>, FieldDecoration {
+    indeterminate?: boolean;
+}
+export declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
+export type RadioProps = Omit<CheckboxProps, 'indeterminate'>;
+export declare function Radio(props: RadioProps): import("react").JSX.Element;
+export type SwitchProps = Omit<CheckboxProps, 'indeterminate'>;
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;
+export interface FileUploadProps extends Omit<TextFieldProps, 'type' | 'value' | 'defaultValue'> {
+    onFilesChange?: (files: File[]) => void;
+    children?: ReactNode;
+}
+export declare function FileUpload({ label, hint, error, onFilesChange, onChange, children, className, ...props }: FileUploadProps): import("react").JSX.Element;
+//# sourceMappingURL=forms.d.ts.map

package/dist/forms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../src/forms.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAqC,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/E,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAClE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7H,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,wBAAgB,MAAM,CAAC,EAAE,OAAmB,EAAE,IAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAE1I;AACD,MAAM,WAAW,cAAe,SAAQ,qBAAqB,CAAC,OAAO,CAAC,EAAE,eAAe;CAAG;AAM1F,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAGzE;AACD,MAAM,WAAW,aAAc,SAAQ,qBAAqB,CAAC,UAAU,CAAC,EAAE,eAAe;CAAG;AAM5F,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAGvE;AACD,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,QAAQ,CAAC,EAAE,eAAe;IAAG,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE;AAO3I,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAGnE;AACD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,EAAE,eAAe;IAAG,aAAa,CAAC,EAAE,OAAO,CAAA;CAAE;AAyBhI,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAAmD;AAChG,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AAC9D,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAAgD;AACvF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AAC/D,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAAiD;AAC1F,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,CAAC;IAC9F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AACD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAMzH"}

package/dist/forms.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useEffect, useId, useRef } from 'react';
+import { assignRef, cx, ControlField, Field, useFieldControl, useFieldValueRef } from './shared.js';
+import { observeReadonlyChoice, isDisabled } from '@hawiyah/core';
+export function Button({ variant = 'primary', size = 'md', loading, disabled, type = 'button', className, children, ...props }) {
+    return _jsx("button", { ...props, type: type, disabled: disabled || loading, "aria-busy": loading || props['aria-busy'], className: cx('hw-button', className), "data-variant": variant, "data-size": size, children: children });
+}
+function InputControl(props) {
+    const field = useFieldControl(props);
+    const ref = useFieldValueRef(props.ref);
+    return _jsx("input", { ...props, ...field, ref: ref, className: cx('hw-input', props.className) });
+}
+export function TextField({ label, hint, error, ...props }) {
+    if (label == null && hint == null && error == null)
+        return _jsx(InputControl, { ...props });
+    return _jsx(ControlField, { label: label, hint: hint, error: error, required: props.required, controlId: props.id, children: _jsx(InputControl, { ...props }) });
+}
+function TextareaControl(props) {
+    const field = useFieldControl(props);
+    const ref = useFieldValueRef(props.ref);
+    return _jsx("textarea", { ...props, ...field, ref: ref, className: cx('hw-textarea', props.className) });
+}
+export function Textarea({ label, hint, error, ...props }) {
+    if (label == null && hint == null && error == null)
+        return _jsx(TextareaControl, { ...props });
+    return _jsx(ControlField, { label: label, hint: hint, error: error, required: props.required, controlId: props.id, children: _jsx(TextareaControl, { ...props }) });
+}
+function SelectControl({ options, children, placeholder, ...props }) {
+    const field = useFieldControl(props);
+    const ref = useFieldValueRef(props.ref);
+    const hasEmptyOption = options?.some(option => option.value === '') || Children.toArray(children).some(child => isValidElement(child) && child.type === 'option' && child.props.value === '');
+    return _jsxs("select", { ...props, ...field, ref: ref, className: cx('hw-select', props.className), children: [placeholder && !props.multiple && !hasEmptyOption && _jsx("option", { value: "", children: placeholder }), options?.map(option => _jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)), children] });
+}
+export function Select({ label, hint, error, ...props }) {
+    if (label == null && hint == null && error == null)
+        return _jsx(SelectControl, { ...props });
+    return _jsx(ControlField, { label: label, hint: hint, error: error, required: props.required, controlId: props.id, children: _jsx(SelectControl, { ...props }) });
+}
+function Choice({ kind, label, hint, error, className, indeterminate, ref, onClick, onKeyDown, onChange, ...props }) {
+    const field = useFieldControl(props);
+    const input = useRef(null);
+    const hintId = hint ? `${field.id}-hint` : undefined;
+    const errorId = error ? `${field.id}-error` : undefined;
+    useEffect(() => { if (input.current)
+        input.current.indeterminate = Boolean(indeterminate); }, [indeterminate]);
+    useEffect(() => {
+        if (!input.current)
+            return;
+        const guard = observeReadonlyChoice(input.current);
+        return () => guard.destroy();
+    });
+    return _jsxs("div", { className: "hw-field", children: [_jsxs("label", { className: "hw-choice", htmlFor: field.id, children: [_jsx("input", { ...props, ...field, ref: node => { input.current = node; assignRef(ref, node); }, type: kind === 'radio' ? 'radio' : 'checkbox', role: kind === 'switch' ? 'switch' : props.role, className: cx(`hw-${kind}`, className), "aria-disabled": props.readOnly || props['aria-disabled'], "aria-invalid": error ? true : field['aria-invalid'], "aria-describedby": [field['aria-describedby'], hintId, errorId].filter(Boolean).join(' ') || undefined, onClick: event => { onClick?.(event); if (props.readOnly || isDisabled(event.currentTarget)) {
+                            event.preventDefault();
+                        } }, onKeyDown: event => { onKeyDown?.(event); if (props.readOnly && (event.key === ' ' || kind === 'radio' && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)))
+                            event.preventDefault(); }, onChange: event => { if (!props.readOnly && !isDisabled(event.currentTarget))
+                            onChange?.(event); } }), label] }), hint && _jsx("span", { id: hintId, className: "hw-hint", children: hint }), error && _jsx("span", { id: errorId, className: "hw-error", children: error })] });
+}
+export function Checkbox(props) { return _jsx(Choice, { ...props, kind: "checkbox" }); }
+export function Radio(props) { return _jsx(Choice, { ...props, kind: "radio" }); }
+export function Switch(props) { return _jsx(Choice, { ...props, kind: "switch" }); }
+export function FileUpload({ label, hint, error, onFilesChange, onChange, children, className, ...props }) {
+    const id = useId();
+    return _jsxs(Field, { label: label, hint: hint, error: error, required: props.required, controlId: props.id ?? id, className: "hw-upload", children: [_jsx(InputControl, { ...props, className: className, type: "file", onChange: event => { onChange?.(event); onFilesChange?.(Array.from(event.currentTarget.files ?? [])); } }), children] });
+}
+//# sourceMappingURL=forms.js.map

package/dist/forms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.js","sourceRoot":"","sources":["../src/forms.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+/** Native React components. Import @hawiyah/styles/styles.css once in the application. */
+export { Field } from './shared.js';
+export type { FieldProps, FieldDecoration } from './shared.js';
+export * from './forms.js';
+export * from './interactive.js';
+export * from './display.js';
+export type { Direction, Orientation, Option } from '@hawiyah/core';
+export * from './expanded-controls.js';
+export * from './calendar.js';
+export * from './expanded-interactive.js';
+export * from './expanded-content.js';
+export * from './expanded-layout.js';
+export * from './portal.js';
+export type { CalendarSystem } from '@hawiyah/core';
+export * from './mobile-top-bar.js';
+export * from './navigation-drawer.js';
+export * from './site-verification.js';
+export * from './content-navigation.js';
+export * from './file-upload-list.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC/D,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACpE,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AAExC,cAAc,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,17 @@
+/** Native React components. Import @hawiyah/styles/styles.css once in the application. */
+export { Field } from './shared.js';
+export * from './forms.js';
+export * from './interactive.js';
+export * from './display.js';
+export * from './expanded-controls.js';
+export * from './calendar.js';
+export * from './expanded-interactive.js';
+export * from './expanded-content.js';
+export * from './expanded-layout.js';
+export * from './portal.js';
+export * from './mobile-top-bar.js';
+export * from './navigation-drawer.js';
+export * from './site-verification.js';
+export * from './content-navigation.js';
+export * from './file-upload-list.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAE7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAE5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AAExC,cAAc,uBAAuB,CAAC"}

package/dist/interactive.d.ts

@@ -0,0 +1,60 @@
+import type { ButtonHTMLAttributes, ComponentPropsWithRef, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { Option, Orientation } from '@hawiyah/core';
+import type { FieldDecoration } from './shared.js';
+export interface TabItem {
+    value: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
+    items: readonly TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label: string;
+    orientation?: Orientation;
+    activationMode?: 'automatic' | 'manual';
+    overflow?: 'menu' | 'scroll';
+    overflowLabel?: string;
+}
+export declare function Tabs({ items, value, defaultValue, onValueChange, label, orientation, activationMode, overflow, overflowLabel, className, ...props }: TabsProps): import("react").JSX.Element;
+export interface DialogProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open' | 'children' | 'title'> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    trigger?: ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>;
+    children?: ReactNode | ((context: {
+        close: () => void;
+    }) => ReactNode);
+    footer?: ReactNode | ((context: {
+        close: () => void;
+    }) => ReactNode);
+    closeOnBackdrop?: boolean;
+    closeLabel?: string;
+}
+export declare function Dialog({ open: controlled, defaultOpen, onOpenChange, title, description, trigger, children, footer, closeOnBackdrop, closeLabel, ref, className, onCancel, onClose, onClick, onPointerDown, onPointerCancel, ...props }: DialogProps): import("react").JSX.Element;
+export interface ComboboxProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'children'>, FieldDecoration {
+    options: readonly Option[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string, option?: Option) => void;
+    onInputChange?: (query: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    emptyMessage?: string;
+    getResultsMessage?: (count: number) => string;
+    requiredMessage?: string;
+}
+export declare function Combobox({ label, hint, error, ...props }: ComboboxProps): import("react").JSX.Element;
+export interface TooltipProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'content'> {
+    children: ReactElement<HTMLAttributes<HTMLElement>>;
+    content: string;
+    placement?: 'top' | 'bottom' | 'start' | 'end';
+    align?: 'start' | 'center' | 'end';
+}
+export declare function Tooltip({ children, content, placement, align, className, ref, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, ...props }: TooltipProps): import("react").JSX.Element;
+//# sourceMappingURL=interactive.d.ts.map

package/dist/interactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive.d.ts","sourceRoot":"","sources":["../src/interactive.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElH,OAAO,KAAK,EAAiB,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,MAAM,WAAW,OAAO;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AACpG,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAChG,KAAK,EAAE,SAAS,OAAO,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,WAA0B,EAAE,cAA4B,EAAE,QAAiB,EAAE,aAAqC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAsE5N;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IACvG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAChE,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACvE,MAAM,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACrE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAmB,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAsB,EAAE,UAAoB,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BA+D7Q;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC,EAAE,eAAe;IACvJ,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA2GD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAIvE;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/F,QAAQ,EAAE,YAAY,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAC/C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AACD,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAiB,EAAE,KAAe,EAAE,SAAS,EAAE,GAAG,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAiChL"}

package/dist/interactive.js

@@ -0,0 +1,321 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement, useEffect, useId, useRef, useState } from 'react';
+import { createComboboxState, getComboboxOptions, getDirection, getNextEnabledIndex, isDisabled, observeTabOverflow, transitionCombobox } from '@hawiyah/core';
+import { assignRef, cx, Field, useControllable, useFieldControl, useFieldValueRef } from './shared.js';
+import { Button } from './forms.js';
+export function Tabs({ items, value, defaultValue, onValueChange, label, orientation = 'horizontal', activationMode = 'automatic', overflow = 'menu', overflowLabel = 'المزيد من التبويبات', className, ...props }) {
+    const id = useId();
+    const [selected, select] = useControllable(value, defaultValue ?? items.find(item => !item.disabled)?.value ?? '', onValueChange);
+    const [focused, setFocused] = useState();
+    const buttons = useRef(new Map());
+    const bar = useRef(null);
+    const disclosure = useRef(null);
+    const [hidden, setHidden] = useState([]);
+    const observer = useRef(undefined);
+    const latest = useRef({ items, overflow, orientation });
+    latest.current = { items, overflow, orientation };
+    const pendingFocus = useRef(undefined);
+    const active = items.find(item => item.value === selected && !item.disabled)?.value ?? items.find(item => !item.disabled)?.value;
+    const visible = items.filter((item, index) => !hidden.includes(index) && !item.disabled);
+    const focusValue = visible.find(item => item.value === focused)?.value ?? visible.find(item => item.value === active)?.value ?? visible[0]?.value;
+    const close = () => { if (disclosure.current)
+        disclosure.current.open = false; };
+    useEffect(() => {
+        const node = bar.current;
+        if (!node)
+            return;
+        observer.current = observeTabOverflow({ container: node,
+            tabs: () => latest.current.items.map(item => buttons.current.get(item.value)).filter(Boolean),
+            enabled: () => latest.current.overflow === 'menu' && latest.current.orientation === 'horizontal',
+            onChange: next => {
+                const focusedElement = node.ownerDocument.activeElement;
+                const menuValue = focusedElement?.dataset.hwOverflowValue;
+                const itemIndex = latest.current.items.findIndex(item => item.value === menuValue);
+                if (menuValue !== undefined && itemIndex >= 0 && next.includes(itemIndex))
+                    pendingFocus.current = { kind: 'menu', value: menuValue };
+                else {
+                    if (menuValue !== undefined && itemIndex >= 0)
+                        pendingFocus.current = { kind: 'tab', value: menuValue };
+                    else if (next.some(index => buttons.current.get(latest.current.items[index]?.value ?? '') === focusedElement))
+                        pendingFocus.current = { kind: 'summary' };
+                    else if (disclosure.current?.contains(focusedElement))
+                        pendingFocus.current = { kind: next.length ? 'summary' : 'tab' };
+                    close();
+                }
+                setHidden(next);
+            } });
+        const outside = (event) => { if (!node.contains(event.target))
+            close(); };
+        node.ownerDocument.addEventListener('click', outside);
+        return () => { observer.current?.destroy(); node.ownerDocument.removeEventListener('click', outside); };
+    }, []);
+    useEffect(() => { observer.current?.refresh(); const focusedElement = bar.current?.ownerDocument.activeElement; if (focusedElement?.getAttribute('data-hw-overflow-hidden') === 'true' && bar.current?.contains(focusedElement))
+        disclosure.current?.querySelector('summary')?.focus(); }, [items, overflow, orientation]);
+    useEffect(() => { close(); }, [active]);
+    useEffect(() => {
+        const destination = pendingFocus.current;
+        pendingFocus.current = undefined;
+        if (destination?.kind === 'summary')
+            disclosure.current?.querySelector('summary')?.focus();
+        else if (destination?.kind === 'tab' && (destination.value ?? focusValue))
+            buttons.current.get(destination.value ?? focusValue)?.focus();
+        else if (destination?.kind === 'menu')
+            [...(disclosure.current?.querySelectorAll('[data-hw-overflow-value]') ?? [])].find(button => button.dataset.hwOverflowValue === destination.value)?.focus();
+    }, [hidden, focusValue]);
+    return _jsxs("div", { ...props, className: cx('hw-tabs', className), children: [_jsxs("div", { className: "hw-tab-bar", ref: bar, "data-hw-overflow": overflow, "data-orientation": orientation, children: [_jsx("div", { className: "hw-tab-list", "data-hw-overflow": overflow, role: "tablist", "aria-label": label, "aria-orientation": orientation, "aria-hidden": hidden.length === items.length || undefined, children: items.map((item, index) => _jsx("button", { type: "button", role: "tab", className: "hw-tab", id: `${id}-tab-${index}`, "aria-controls": `${id}-panel-${index}`, "aria-selected": active === item.value, "aria-hidden": hidden.includes(index) || undefined, "data-hw-overflow-hidden": hidden.includes(index) || undefined, tabIndex: !hidden.includes(index) && focusValue === item.value ? 0 : -1, disabled: item.disabled, ref: node => { if (node)
+                                buttons.current.set(item.value, node);
+                            else
+                                buttons.current.delete(item.value); }, onFocus: () => setFocused(item.value), onClick: () => { if (!item.disabled)
+                                select(item.value); }, onKeyDown: event => {
+                                if (event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                                    return;
+                                const keys = orientation === 'vertical' ? ['ArrowDown', 'ArrowUp', 'Home', 'End'] : ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
+                                if (!keys.includes(event.key))
+                                    return;
+                                event.preventDefault();
+                                const next = items[getNextEnabledIndex(index, event.key, items.map((candidate, i) => ({ disabled: candidate.disabled || hidden.includes(i) })), getDirection(event.currentTarget), orientation)];
+                                if (!next)
+                                    return;
+                                setFocused(next.value);
+                                buttons.current.get(next.value)?.focus();
+                                if (activationMode === 'automatic')
+                                    select(next.value);
+                            }, children: item.label }, item.value)) }), _jsxs("details", { ref: disclosure, className: "hw-tabs-overflow", hidden: !hidden.length, onKeyDown: event => { if (event.key === 'Escape' && event.currentTarget.open) {
+                            event.preventDefault();
+                            close();
+                            event.currentTarget.querySelector('summary')?.focus();
+                        } }, children: [_jsx("summary", { className: "hw-tab-overflow-trigger", "aria-label": overflowLabel, "data-active": hidden.some(index => items[index]?.value === active) || undefined, children: "\u2026" }), _jsx("div", { className: "hw-tab-overflow-menu", children: hidden.map(index => { const item = items[index]; return item && _jsx("button", { type: "button", className: "hw-tab-overflow-item", "data-hw-overflow-value": item.value, disabled: item.disabled, "aria-pressed": item.value === active, onClick: () => { if (item.disabled)
+                                        return; select(item.value); close(); disclosure.current?.querySelector('summary')?.focus(); }, children: item.label }, item.value); }) })] })] }), items.map((item, index) => _jsx("section", { className: "hw-tab-panel", id: `${id}-panel-${index}`, role: "tabpanel", "aria-labelledby": `${id}-tab-${index}`, tabIndex: 0, hidden: active !== item.value, children: item.content }, item.value))] });
+}
+export function Dialog({ open: controlled, defaultOpen = false, onOpenChange, title, description, trigger, children, footer, closeOnBackdrop = true, closeLabel = 'Close', ref, className, onCancel, onClose, onClick, onPointerDown, onPointerCancel, ...props }) {
+    const id = useId();
+    const [open, setOpen] = useControllable(controlled, defaultOpen, onOpenChange);
+    const [nativeCloseVersion, setNativeCloseVersion] = useState(0);
+    const dialog = useRef(null);
+    const previousFocus = useRef(null);
+    const backdropStarted = useRef(false);
+    const close = () => { backdropStarted.current = false; setOpen(false); };
+    useEffect(() => {
+        const node = dialog.current;
+        if (!node)
+            return;
+        if (open && !node.open) {
+            backdropStarted.current = false;
+            previousFocus.current = node.ownerDocument.activeElement;
+            node.showModal();
+        }
+        else if (!open && node.open) {
+            backdropStarted.current = false;
+            node.close();
+            if (previousFocus.current?.isConnected)
+                previousFocus.current.focus();
+        }
+    }, [open, nativeCloseVersion]);
+    useEffect(() => {
+        const node = dialog.current;
+        return () => {
+            if (node?.open) {
+                node.close();
+                if (previousFocus.current?.isConnected)
+                    previousFocus.current.focus();
+            }
+        };
+    }, []);
+    const context = { close };
+    return _jsxs(_Fragment, { children: [trigger && cloneElement(trigger, { onClick: event => { trigger.props.onClick?.(event); if (!event.defaultPrevented)
+                    setOpen(true); }, 'aria-haspopup': 'dialog' }), _jsxs("dialog", { ...props, ref: node => { dialog.current = node; assignRef(ref, node); }, className: cx('hw-dialog', className), "aria-labelledby": props['aria-labelledby'] ?? `${id}-title`, "aria-describedby": props['aria-describedby'] ?? (description ? `${id}-description` : undefined), onCancel: event => { backdropStarted.current = false; onCancel?.(event); if (!event.defaultPrevented) {
+                    event.preventDefault();
+                    close();
+                } }, onClose: event => {
+                    backdropStarted.current = false;
+                    onClose?.(event);
+                    if (open && !event.currentTarget.open) {
+                        close();
+                        if (controlled !== undefined)
+                            setNativeCloseVersion(version => version + 1);
+                    }
+                }, onPointerDown: event => {
+                    onPointerDown?.(event);
+                    const bounds = event.currentTarget.getBoundingClientRect();
+                    backdropStarted.current = !event.defaultPrevented && event.button === 0 && event.target === event.currentTarget &&
+                        (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom);
+                }, onPointerCancel: event => { backdropStarted.current = false; onPointerCancel?.(event); }, onClick: event => {
+                    const started = backdropStarted.current;
+                    backdropStarted.current = false;
+                    onClick?.(event);
+                    if (event.defaultPrevented || !closeOnBackdrop || !started || event.target !== event.currentTarget)
+                        return;
+                    const bounds = event.currentTarget.getBoundingClientRect();
+                    if (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom)
+                        close();
+                }, children: [_jsxs("header", { className: "hw-dialog-header", children: [_jsx("h2", { id: `${id}-title`, children: title }), _jsx(Button, { variant: "ghost", "aria-label": closeLabel, onClick: close, children: "\u00D7" })] }), _jsxs("div", { className: "hw-dialog-body", children: [description && _jsx("p", { id: `${id}-description`, children: description }), typeof children === 'function' ? children(context) : children] }), footer && _jsx("footer", { className: "hw-dialog-footer", children: typeof footer === 'function' ? footer(context) : footer })] })] });
+}
+function ComboboxControl({ options, value, defaultValue = '', onValueChange, onInputChange, open: controlledOpen, defaultOpen = false, onOpenChange, emptyMessage = 'No options found', getResultsMessage = count => `${count} results available`, requiredMessage = 'Choose an option from the list.', className, ref, onKeyDown, onFocus, onBlur, onClick, name, form, disabled, ...props }) {
+    const field = useFieldControl(props);
+    const [state, setState] = useState(() => ({ ...createComboboxState(options, value ?? defaultValue), open: controlledOpen ?? defaultOpen }));
+    const input = useRef(null);
+    const presenceRef = useFieldValueRef((node) => { input.current = node; assignRef(ref, node); });
+    const [ancestorDisabled, setAncestorDisabled] = useState(false);
+    const blocked = () => disabled || props.readOnly || !!(input.current && isDisabled(input.current));
+    const requestedValue = value ?? state.value;
+    const selected = options.some(option => option.value === requestedValue && !option.disabled) ? requestedValue : '';
+    const open = !disabled && !ancestorDisabled && !props.readOnly && (controlledOpen ?? state.open);
+    const query = value !== undefined && state.value && state.value !== selected ? options.find(option => option.value === selected)?.label ?? '' : state.query;
+    const effectiveState = { ...state, value: selected, query, open };
+    const results = getComboboxOptions(effectiveState, options);
+    const active = results[state.activeIndex];
+    const listId = `${field.id}-listbox`;
+    const statusId = `${field.id}-status`;
+    const lastEmittedValue = useRef(undefined);
+    const latestOptions = useRef(options);
+    const previousOptions = useRef(options);
+    latestOptions.current = options;
+    useEffect(() => {
+        const element = input.current;
+        if (!element)
+            return;
+        const refresh = () => setAncestorDisabled(isDisabled(element));
+        const Observer = element.ownerDocument.defaultView?.MutationObserver;
+        const observer = Observer ? new Observer(refresh) : undefined;
+        for (let ancestor = element.parentElement; ancestor; ancestor = ancestor.parentElement) {
+            if (ancestor.localName === 'fieldset')
+                observer?.observe(ancestor, { attributes: true, attributeFilter: ['disabled'] });
+        }
+        refresh();
+        return () => observer?.disconnect();
+    }, []);
+    useEffect(() => {
+        if (disabled || ancestorDisabled || props.readOnly)
+            setState(current => ({ ...current, open: false, activeIndex: -1 }));
+    }, [disabled, ancestorDisabled, props.readOnly]);
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        if (value === lastEmittedValue.current) {
+            lastEmittedValue.current = undefined;
+            setState(current => ({ ...current, value }));
+        }
+        else {
+            setState(current => ({ ...createComboboxState(latestOptions.current, value), open: current.open }));
+        }
+    }, [value]);
+    useEffect(() => {
+        const previousLabel = previousOptions.current.find(option => option.value === selected)?.label;
+        const nextLabel = options.find(option => option.value === selected)?.label;
+        previousOptions.current = options;
+        if (!selected || nextLabel === undefined || previousLabel === nextLabel)
+            return;
+        setState(current => current.value === selected && current.query === previousLabel
+            ? { ...current, query: nextLabel, activeIndex: -1 } : current);
+    }, [options, selected]);
+    useEffect(() => {
+        input.current?.setCustomValidity(field.required && !selected ? requiredMessage : '');
+    }, [field.required, selected, requiredMessage]);
+    useEffect(() => {
+        const formElement = input.current?.form;
+        let mounted = true;
+        const reset = (event) => {
+            queueMicrotask(() => {
+                if (mounted && !event.defaultPrevented && value === undefined)
+                    setState(createComboboxState(latestOptions.current, defaultValue));
+            });
+        };
+        formElement?.addEventListener('reset', reset);
+        return () => { mounted = false; formElement?.removeEventListener('reset', reset); };
+    }, [value, defaultValue, form]);
+    useEffect(() => {
+        if (open && state.activeIndex >= 0)
+            input.current?.ownerDocument.getElementById(`${field.id}-option-${state.activeIndex}`)?.scrollIntoView?.({ block: 'nearest' });
+    }, [open, state.activeIndex, field.id]);
+    function dispatch(event) {
+        if (blocked() && event.type !== 'close' && event.type !== 'reset')
+            return;
+        const next = transitionCombobox(effectiveState, event, options);
+        setState(next);
+        if (next.value !== selected) {
+            lastEmittedValue.current = next.value;
+            onValueChange?.(next.value, options.find(option => option.value === next.value));
+        }
+        if (next.open !== open)
+            onOpenChange?.(next.open);
+    }
+    return _jsxs("div", { className: "hw-combobox", onBlur: event => { if (!event.currentTarget.contains(event.relatedTarget))
+            dispatch({ type: 'close' }); }, children: [_jsx("input", { ...props, ...field, ref: presenceRef, form: form, disabled: disabled, className: cx('hw-input', className), type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-readonly": props.readOnly || undefined, "aria-expanded": open, "aria-controls": listId, "aria-activedescendant": open && active && !active.disabled ? `${field.id}-option-${state.activeIndex}` : undefined, value: query, onChange: event => { if (blocked()) {
+                    event.currentTarget.value = query;
+                    return;
+                } dispatch({ type: 'input', query: event.currentTarget.value }); onInputChange?.(event.currentTarget.value); }, onFocus: event => { onFocus?.(event); if (!event.defaultPrevented)
+                    dispatch({ type: 'open' }); }, onBlur: onBlur, onClick: event => { onClick?.(event); if (!event.defaultPrevented && !open)
+                    dispatch({ type: 'open' }); }, onKeyDown: event => {
+                    onKeyDown?.(event);
+                    if (event.defaultPrevented || event.nativeEvent.isComposing || blocked())
+                        return;
+                    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+                        if (!open && (event.key === 'Home' || event.key === 'End'))
+                            return;
+                        event.preventDefault();
+                        dispatch({ type: 'navigate', key: event.key });
+                    }
+                    else if (event.key === 'Enter' && open && active && !active.disabled) {
+                        event.preventDefault();
+                        dispatch({ type: 'select', value: active.value });
+                    }
+                    else if (event.key === 'Escape' && open) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        dispatch({ type: 'close' });
+                    }
+                    else if (event.key === 'Tab')
+                        dispatch({ type: 'close' });
+                } }), _jsx("input", { type: "hidden", name: name, form: form, value: selected, disabled: disabled }), _jsxs("ul", { className: "hw-listbox", id: listId, role: "listbox", "aria-label": props['aria-label'], "aria-labelledby": field['aria-labelledby'], hidden: !open, children: [results.map((option, index) => _jsx("li", { id: `${field.id}-option-${index}`, className: "hw-option", role: "option", "aria-selected": selected === option.value, "aria-disabled": option.disabled || undefined, "data-active": state.activeIndex === index ? 'true' : undefined, "data-state": state.activeIndex === index ? 'active' : undefined, onPointerDown: event => event.preventDefault(), onClick: () => { if (!option.disabled) {
+                            dispatch({ type: 'select', value: option.value });
+                            input.current?.focus();
+                        } }, children: option.label }, option.value)), !results.length && _jsx("li", { role: "presentation", className: "hw-hint", children: emptyMessage })] }), _jsx("span", { id: statusId, className: "hw-sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: open ? getResultsMessage(results.length) : '' })] });
+}
+export function Combobox({ label, hint, error, ...props }) {
+    const id = useId();
+    if (label == null && hint == null && error == null)
+        return _jsx(ComboboxControl, { ...props });
+    return _jsx(Field, { label: label, hint: hint, error: error, required: props.required, controlId: props.id ?? id, children: _jsx(ComboboxControl, { ...props }) });
+}
+export function Tooltip({ children, content, placement = 'top', align = 'start', className, ref, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, ...props }) {
+    const id = useId();
+    const root = useRef(null);
+    const [open, setOpen] = useState(false);
+    const hovered = useRef(false);
+    const focused = useRef(false);
+    const hideTimer = useRef(undefined);
+    const show = () => { clearTimeout(hideTimer.current); setOpen(true); };
+    const hideAfterPointerTravel = () => {
+        clearTimeout(hideTimer.current);
+        if (!hovered.current && !focused.current)
+            hideTimer.current = setTimeout(() => setOpen(false), 120);
+    };
+    useEffect(() => () => clearTimeout(hideTimer.current), []);
+    useEffect(() => {
+        const doc = root.current?.ownerDocument;
+        if (!open || !doc)
+            return;
+        const escape = (event) => {
+            if (event.key !== 'Escape' || event.defaultPrevented)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            clearTimeout(hideTimer.current);
+            setOpen(false);
+        };
+        doc.addEventListener('keydown', escape);
+        return () => doc.removeEventListener('keydown', escape);
+    }, [open]);
+    return _jsxs("span", { ...props, "data-hw": "tooltip", className: className, ref: node => { root.current = node; assignRef(ref, node); }, onMouseEnter: event => { onMouseEnter?.(event); hovered.current = true; if (!event.defaultPrevented)
+            show(); }, onMouseLeave: event => { onMouseLeave?.(event); hovered.current = false; hideAfterPointerTravel(); }, onFocus: event => { onFocus?.(event); focused.current = true; if (!event.defaultPrevented)
+            show(); }, onBlur: event => { onBlur?.(event); if (!event.currentTarget.contains(event.relatedTarget)) {
+            focused.current = false;
+            hideAfterPointerTravel();
+        } }, onKeyDown: event => { onKeyDown?.(event); if (event.key === 'Escape' && open && !event.defaultPrevented) {
+            event.preventDefault();
+            event.stopPropagation();
+            clearTimeout(hideTimer.current);
+            setOpen(false);
+        } }, children: [cloneElement(children, { 'aria-describedby': [children.props['aria-describedby'], id].filter(Boolean).join(' ') }), _jsx("span", { className: "hw-tooltip", role: "tooltip", id: id, "data-placement": placement, "data-align": align, hidden: !open, children: content })] });
+}
+//# sourceMappingURL=interactive.js.map