@byline/ui 0.9.3 → 0.10.1

package/dist/components/dropdown/dropdown_module.css

@@ -0,0 +1,111 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .infonomic-dropdown-content, .infonomic-dropdown-subcontent) {
+    z-index: 20;
+    background-color: var(--surface-panel-elevated);
+    will-change: transform, opacity;
+    border-width: var(--border-width-thin);
+    border-color: var(--surface-panel-border);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-sm);
+    box-shadow: var(--shadow-sm);
+    padding: 4px;
+    animation-duration: .4s;
+    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
+  }
+
+  :is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .infonomic-dropdown-content, .infonomic-dropdown-subcontent)[data-side="top"] {
+    animation-name: slideDownAndFade-s05SMv;
+  }
+
+  :is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .infonomic-dropdown-content, .infonomic-dropdown-subcontent)[data-side="right"] {
+    animation-name: slideLeftAndFade-Zi7piX;
+  }
+
+  :is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .infonomic-dropdown-content, .infonomic-dropdown-subcontent)[data-side="bottom"] {
+    animation-name: slideUpAndFade-bRhQGn;
+  }
+
+  :is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB, .infonomic-dropdown-content, .infonomic-dropdown-subcontent)[data-side="left"] {
+    animation-name: slideRightAndFade-pN0UdB;
+  }
+
+  :is(.dropdown-item-FFroRa, .infonomic-dropdown-item) {
+    align-items: center;
+    gap: var(--gap-1);
+    width: 100%;
+    font-size: var(--font-size-sm);
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
+    cursor: default;
+    border-radius: var(--border-radius-sm);
+    outline: none;
+    padding: 5px 2px;
+    transition: background-color .2s;
+    display: flex;
+  }
+
+  :is(.dropdown-item-FFroRa:hover, .dropdown-item-FFroRa:focus, .dropdown-item-FFroRa[data-highlighted], .infonomic-dropdown-item:hover, .infonomic-dropdown-item:focus, .infonomic-dropdown-item[data-highlighted]) {
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
+  }
+
+  :is(.dropdown-separator-scM_7b, .infonomic-dropdown-separator) {
+    background-color: var(--surface-panel-border);
+    width: 90%;
+    margin: var(--spacing-4) 0;
+    border-top-width: var(--border-width-thin);
+    border-top-color: var(--surface-panel-border);
+    border-top-style: var(--border-style-solid);
+  }
+
+  @keyframes slideUpAndFade-bRhQGn {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideRightAndFade-pN0UdB {
+    from {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideDownAndFade-s05SMv {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideLeftAndFade-Zi7piX {
+    from {
+      opacity: 0;
+      transform: translateX(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+

package/dist/components/hamburger/hamburger.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+type ColorScheme = 'auto' | 'onDark' | 'onLight';
+export interface HamburgerProps {
+    className?: string;
+    colorScheme?: ColorScheme;
+    open?: boolean;
+    onChange?: (open: boolean) => void;
+    ariaLabel?: string;
+    ariaControls?: string;
+}
+export declare function Hamburger({ className, colorScheme, open, onChange, ariaLabel, ariaControls, ...other }: HamburgerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=hamburger.d.ts.map

package/dist/components/hamburger/hamburger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hamburger.d.ts","sourceRoot":"","sources":["../../../src/components/hamburger/hamburger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEhD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,WAAoB,EACpB,IAAY,EACZ,QAAQ,EACR,SAAyB,EACzB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8CpC"}

package/dist/components/hamburger/hamburger.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import classnames from "classnames";
+import hamburger_module from "./hamburger.module.js";
+function Hamburger({ className, colorScheme = 'auto', open = false, onChange, ariaLabel = 'Toggle menu', ariaControls, ...other }) {
+    const handleClick = (event)=>{
+        event.stopPropagation();
+        onChange?.(!open);
+    };
+    const handleEscapeKey = useCallback((event)=>{
+        if ('Escape' === event.key && open) onChange?.(false);
+    }, [
+        open,
+        onChange
+    ]);
+    useEffect(()=>{
+        document.addEventListener('keydown', handleEscapeKey, false);
+        return ()=>{
+            document.removeEventListener('keydown', handleEscapeKey, false);
+        };
+    }, [
+        handleEscapeKey
+    ]);
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        onClick: handleClick,
+        className: classnames('infonomic-hamburger', hamburger_module.hamburger, {
+            [hamburger_module.open]: open,
+            [hamburger_module.onDark]: 'onDark' === colorScheme,
+            [hamburger_module.onLight]: 'onLight' === colorScheme
+        }, className),
+        "aria-label": ariaLabel,
+        "aria-controls": ariaControls,
+        "aria-expanded": open,
+        ...other,
+        children: /*#__PURE__*/ jsx("span", {
+            className: classnames('infonomic-hamburger-box', hamburger_module.box),
+            "aria-hidden": "true",
+            children: /*#__PURE__*/ jsx("span", {
+                className: classnames('infonomic-hamburger-inner', hamburger_module.inner)
+            })
+        })
+    });
+}
+export { Hamburger };

package/dist/components/hamburger/hamburger.module.js

@@ -0,0 +1,10 @@
+import "./hamburger_module.css";
+const hamburger_module = {
+    hamburger: "hamburger-CFjgP7",
+    box: "box-E9EZxm",
+    inner: "inner-G4BGMv",
+    open: "open-OQO244",
+    onDark: "onDark-ZAa2Qt",
+    onLight: "onLight-s1LZFP"
+};
+export default hamburger_module;

package/dist/components/hamburger/hamburger_module.css

@@ -0,0 +1,169 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.hamburger-CFjgP7, .infonomic-hamburger) {
+    --hamburger-color: currentColor;
+    --hamburger-focus-ring-color: currentColor;
+    z-index: 200;
+    cursor: pointer;
+    width: 42px;
+    height: 34px;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    border-radius: var(--border-radius-sm);
+    background-color: #0000;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    transition-property: opacity, filter;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  :is(.hamburger-CFjgP7:focus-visible, .infonomic-hamburger:focus-visible) {
+    outline: 2px solid var(--hamburger-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  :is(.box-E9EZxm, .infonomic-hamburger-box) {
+    pointer-events: none;
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
+  }
+
+  :is(.inner-G4BGMv, .infonomic-hamburger-inner) {
+    margin-top: -1px;
+    transition-duration: 75ms;
+    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+    display: block;
+    top: 50%;
+  }
+
+  .inner-G4BGMv, .inner-G4BGMv:before, .inner-G4BGMv:after {
+    background-color: var(--hamburger-color);
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
+
+  .infonomic-hamburger-inner {
+    background-color: var(--hamburger-color);
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
+
+  .infonomic-hamburger-inner:before {
+    background-color: var(--hamburger-color);
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
+
+  .infonomic-hamburger-inner:after {
+    background-color: var(--hamburger-color);
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
+
+  .inner-G4BGMv:before, .inner-G4BGMv:after {
+    content: "";
+    display: block;
+  }
+
+  .infonomic-hamburger-inner:before {
+    content: "";
+    display: block;
+  }
+
+  .infonomic-hamburger-inner:after {
+    content: "";
+    display: block;
+  }
+
+  .inner-G4BGMv:before {
+    transition: top 75ms .12s, opacity 75ms;
+    top: -8px;
+  }
+
+  .infonomic-hamburger-inner:before {
+    transition: top 75ms .12s, opacity 75ms;
+    top: -8px;
+  }
+
+  .inner-G4BGMv:after {
+    transition: bottom 75ms .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
+    bottom: -8px;
+  }
+
+  .infonomic-hamburger-inner:after {
+    transition: bottom 75ms .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
+    bottom: -8px;
+  }
+
+  :is(.open-OQO244 .inner-G4BGMv, .infonomic-hamburger-open .infonomic-hamburger-inner) {
+    transition-delay: .12s;
+    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+    transform: rotate(45deg);
+  }
+
+  .open-OQO244 .inner-G4BGMv:before {
+    opacity: 0;
+    transition: top 75ms, opacity 75ms .12s;
+    top: 0;
+  }
+
+  .infonomic-hamburger-open .infonomic-hamburger-inner:before {
+    opacity: 0;
+    transition: top 75ms, opacity 75ms .12s;
+    top: 0;
+  }
+
+  .open-OQO244 .inner-G4BGMv:after {
+    transition: bottom 75ms, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
+    bottom: 0;
+    transform: rotate(-90deg);
+  }
+
+  .infonomic-hamburger-open .infonomic-hamburger-inner:after {
+    transition: bottom 75ms, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
+    bottom: 0;
+    transform: rotate(-90deg);
+  }
+
+  :is(.onDark-ZAa2Qt, .infonomic-hamburger-on-dark) {
+    --hamburger-color: white;
+    --hamburger-focus-ring-color: #ffffffb3;
+  }
+
+  :is(.onLight-s1LZFP, .infonomic-hamburger-on-light) {
+    --hamburger-color: var(--foreground, #1a1a1a);
+    --hamburger-focus-ring-color: var(--foreground, #1a1a1a);
+  }
+}
+

package/dist/components/inputs/@types/autocomplete.d.ts

@@ -0,0 +1,35 @@
+import type { Intent as t } from '../../@types/shared.js';
+/**
+ * Available visual style variants for the Autocomplete input.
+ */
+export declare const variant: readonly ["outlined", "filled", "underlined"];
+/**
+ * Visual style variant of the autocomplete input field.
+ *
+ * - `outlined`   — full border on all sides with a transparent background (default)
+ * - `filled`     — tinted background
+ * - `underlined` — bottom border only, no background (minimal style)
+ *
+ * @default 'outlined'
+ */
+export type Variant = (typeof variant)[number];
+/**
+ * Available size tokens for the Autocomplete component.
+ */
+export declare const size: readonly ["sm", "md", "lg"];
+/**
+ * Visual size of the autocomplete component.
+ *
+ * - `sm` — compact, suitable for inline forms or dense layouts
+ * - `md` — standard form size (default)
+ * - `lg` — large, prominent input
+ *
+ * @default 'md'
+ */
+export type Size = (typeof size)[number];
+/**
+ * Semantic color intent applied to the autocomplete border and focus ring.
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t;
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/components/inputs/@types/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/@types/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD;;GAEG;AACH,eAAO,MAAM,OAAO,+CAAgD,CAAA;AAEpE;;;;;;;;GAQG;AACH,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,IAAI,6BAA8B,CAAA;AAE/C;;;;;;;;GAQG;AACH,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA"}

package/dist/components/inputs/@types/autocomplete.js

@@ -0,0 +1,11 @@
+const variant = [
+    'outlined',
+    'filled',
+    'underlined'
+];
+const size = [
+    'sm',
+    'md',
+    'lg'
+];
+export { size, variant };

package/dist/components/inputs/@types/checkbox.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { Intent as t } from '../../@types/shared.js';
+/**
+ * This file contains the types and prop-types for the Checkbox and CheckboxGroup components.
+ */
+/**
+ * Available visual style variants for the Checkbox component.
+ */
+export declare const variant: readonly ["outlined", "filled"];
+/**
+ * Visual style variant of the checkbox.
+ *
+ * - `outlined` — hollow checkbox with an intent-colored border; fills on check (default)
+ * - `filled`   — always has a tinted background, more prominent in forms
+ *
+ * @default 'outlined'
+ */
+export type Variant = (typeof variant)[number];
+/**
+ * Available size tokens for checkboxes.
+ */
+export declare const size: readonly ["sm", "md", "lg"];
+/**
+ * Visual size of the checkbox.
+ *
+ * - `sm` — small, for dense lists
+ * - `md` — standard size (default)
+ * - `lg` — large, for touch-friendly or prominent forms
+ *
+ * @default 'md'
+ */
+export type Size = (typeof size)[number];
+/**
+ * Semantic color intent applied to the checkbox border and checked state.
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t;
+export type ClassName = string;
+export type Children = ReactNode;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/inputs/@types/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/@types/checkbox.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD;;GAEG;AAIH;;GAEG;AACH,eAAO,MAAM,OAAO,iCAAkC,CAAA;AAEtD;;;;;;;GAOG;AACH,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,IAAI,6BAA8B,CAAA;AAE/C;;;;;;;;GAQG;AACH,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAClC,MAAM,MAAM,SAAS,GAAG,MAAM,CAAA;AAC9B,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAA"}

package/dist/components/inputs/@types/checkbox.js

@@ -0,0 +1,10 @@
+const variant = [
+    'outlined',
+    'filled'
+];
+const size = [
+    'sm',
+    'md',
+    'lg'
+];
+export { size, variant };

package/dist/components/inputs/@types/input.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { Intent as t } from '../../@types/shared.js';
+/**
+ * This file contains the types and prop-types for the Input and related form components.
+ */
+/**
+ * Available visual style variants for the Input component.
+ */
+export declare const variant: readonly ["outlined", "filled", "underlined"];
+/**
+ * Visual style variant of the input field.
+ *
+ * - `outlined`   — full border on all sides with a transparent background (default)
+ * - `filled`     — tinted background with only a bottom border
+ * - `underlined` — bottom border only, no background (minimal style)
+ *
+ * @default 'outlined'
+ */
+export type Variant = (typeof variant)[number];
+/**
+ * Available size tokens for form inputs.
+ */
+export declare const size: readonly ["sm", "md", "lg"];
+/**
+ * Visual size of the input field.
+ *
+ * - `sm` — compact, suitable for inline forms or dense layouts
+ * - `md` — standard form size (default)
+ * - `lg` — large, prominent or hero input
+ *
+ * @default 'md'
+ */
+export type Size = (typeof size)[number];
+/**
+ * Semantic color intent applied to the input border and focus ring.
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t;
+export type ClassName = string;
+export type Children = ReactNode;
+//# sourceMappingURL=input.d.ts.map

package/dist/components/inputs/@types/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/@types/input.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD;;GAEG;AAIH;;GAEG;AACH,eAAO,MAAM,OAAO,+CAAgD,CAAA;AAEpE;;;;;;;;GAQG;AACH,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,IAAI,6BAA8B,CAAA;AAE/C;;;;;;;;GAQG;AACH,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAClC,MAAM,MAAM,SAAS,GAAG,MAAM,CAAA;AAC9B,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAA"}

package/dist/components/inputs/@types/input.js

@@ -0,0 +1,11 @@
+const variant = [
+    'outlined',
+    'filled',
+    'underlined'
+];
+const size = [
+    'sm',
+    'md',
+    'lg'
+];
+export { size, variant };

package/dist/components/inputs/autocomplete.d.ts

@@ -0,0 +1,42 @@
+import type React from 'react';
+import { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete';
+import type { Intent, Size, Variant } from './@types/autocomplete.js';
+type AutocompleteRootProps = React.ComponentProps<typeof AutocompletePrimitive.Root>;
+export interface AutocompleteProps<Item = string> extends Omit<AutocompleteRootProps, 'items' | 'children'> {
+    id: string;
+    label?: string;
+    variant?: Variant;
+    inputSize?: Size;
+    intent?: Intent;
+    required?: boolean;
+    placeholder?: string;
+    autoComplete?: string;
+    error?: boolean;
+    helpText?: string;
+    errorText?: string;
+    emptyText?: string;
+    className?: string;
+    inputClassName?: string;
+    wrapperClassName?: string;
+    items: Item[];
+    children: React.ComponentProps<typeof AutocompletePrimitive.List>['children'];
+    sideOffset?: number;
+}
+export declare function Autocomplete<Item = string>({ id, label, variant, inputSize, intent, required, placeholder, autoComplete, error, helpText, errorText, emptyText, className, inputClassName, wrapperClassName, items, children, sideOffset, ...rest }: AutocompleteProps<Item>): React.JSX.Element;
+export declare const AutocompleteItem: {
+    ({ ref: forwardedRef, children, className, ...props }: React.ComponentProps<typeof AutocompletePrimitive.Item> & {
+        ref?: React.RefObject<HTMLDivElement>;
+    }): React.JSX.Element;
+    displayName: string;
+};
+export declare const AutocompleteGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AutocompleteGroupLabel: {
+    ({ children, className, ...props }: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>): React.JSX.Element;
+    displayName: string;
+};
+export declare const AutocompleteSeparator: {
+    ({ className, ...props }: React.ComponentProps<typeof AutocompletePrimitive.Separator>): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=autocomplete.d.ts.map

package/dist/components/inputs/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAOnF,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAErE,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAA;AAEpF,MAAM,WAAW,iBAAiB,CAAC,IAAI,GAAG,MAAM,CAC9C,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,UAAU,CAAC;IACzD,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAA;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,IAAI,GAAG,MAAM,EAAE,EAC1C,EAAE,EACF,KAAK,EACL,OAAoB,EACpB,SAAgB,EAChB,MAAkB,EAClB,QAAQ,EACR,WAAgB,EAChB,YAAoB,EACpB,KAAa,EACb,QAAa,EACb,SAAc,EACd,SAA+B,EAC/B,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,UAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,IAAI,CAAC,qBAoEzB;AAED,eAAO,MAAM,gBAAgB;2DAK1B,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;QAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;;CAUA,CAAA;AAID,eAAO,MAAM,iBAAiB,qIAA8B,CAAA;AAC5D,eAAO,MAAM,sBAAsB;wCAIhC,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC;;CAS/D,CAAA;AAID,eAAO,MAAM,qBAAqB;8BAG/B,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,SAAS,CAAC;;CAO9D,CAAA"}

package/dist/components/inputs/autocomplete.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import classnames from "classnames";
+import autocomplete_module from "./autocomplete.module.js";
+import { ErrorText } from "./error-text.js";
+import { HelpText } from "./help-text.js";
+import { Label } from "./label.js";
+function autocomplete_Autocomplete({ id, label, variant = 'outlined', inputSize = 'md', intent = 'primary', required, placeholder = '', autoComplete = 'off', error = false, helpText = '', errorText = '', emptyText = 'No results found.', className, inputClassName, wrapperClassName, items, children, sideOffset = 4, ...rest }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('infonomic-autocomplete-wrapper', autocomplete_module["autocomplete-wrapper"], wrapperClassName),
+        children: [
+            /*#__PURE__*/ jsxs(Autocomplete.Root, {
+                items: items,
+                ...rest,
+                children: [
+                    null != label && /*#__PURE__*/ jsx(Label, {
+                        id: id,
+                        htmlFor: id,
+                        required: required,
+                        label: label
+                    }),
+                    /*#__PURE__*/ jsx(Autocomplete.Input, {
+                        id: id,
+                        placeholder: placeholder,
+                        autoComplete: autoComplete,
+                        "aria-labelledby": label ? `label-for-${id}` : void 0,
+                        "aria-invalid": error,
+                        "aria-required": required,
+                        "aria-errormessage": error ? errorText : void 0,
+                        "aria-describedby": error ? `error-for-${id}` : void 0,
+                        className: classnames('infonomic-autocomplete-input', `infonomic-autocomplete-input-${variant}`, `infonomic-autocomplete-input-${inputSize}`, `infonomic-autocomplete-input-${intent}`, autocomplete_module.input, autocomplete_module[variant], autocomplete_module[inputSize], autocomplete_module[intent], {
+                            [autocomplete_module.error]: error
+                        }, className, inputClassName)
+                    }),
+                    /*#__PURE__*/ jsx(Autocomplete.Portal, {
+                        children: /*#__PURE__*/ jsx(Autocomplete.Positioner, {
+                            className: classnames('infonomic-autocomplete-positioner', autocomplete_module.positioner),
+                            sideOffset: sideOffset,
+                            children: /*#__PURE__*/ jsxs(Autocomplete.Popup, {
+                                className: classnames('infonomic-autocomplete-popup', autocomplete_module.popup, null != inputSize && autocomplete_module[`popup-${inputSize}`]),
+                                children: [
+                                    /*#__PURE__*/ jsx(Autocomplete.Empty, {
+                                        className: classnames('infonomic-autocomplete-empty', autocomplete_module.empty),
+                                        children: emptyText
+                                    }),
+                                    /*#__PURE__*/ jsx(Autocomplete.List, {
+                                        className: classnames('infonomic-autocomplete-list', autocomplete_module.list),
+                                        children: children
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            }),
+            error ? /*#__PURE__*/ jsx(ErrorText, {
+                id: `error-for-${id}`,
+                size: inputSize,
+                text: errorText ?? helpText
+            }) : helpText?.length > 0 && /*#__PURE__*/ jsx(HelpText, {
+                size: inputSize,
+                text: helpText
+            })
+        ]
+    });
+}
+const AutocompleteItem = ({ ref: forwardedRef, children, className, ...props })=>/*#__PURE__*/ jsx(Autocomplete.Item, {
+        className: classnames('infonomic-autocomplete-item', autocomplete_module["autocomplete-item"], className),
+        ...props,
+        ref: forwardedRef,
+        children: children
+    });
+AutocompleteItem.displayName = 'AutocompleteItem';
+const AutocompleteGroup = Autocomplete.Group;
+const AutocompleteGroupLabel = ({ children, className, ...props })=>/*#__PURE__*/ jsx(Autocomplete.GroupLabel, {
+        className: classnames('infonomic-autocomplete-group-label', autocomplete_module["group-label"], className),
+        ...props,
+        children: children
+    });
+AutocompleteGroupLabel.displayName = 'AutocompleteGroupLabel';
+const AutocompleteSeparator = ({ className, ...props })=>/*#__PURE__*/ jsx(Autocomplete.Separator, {
+        className: classnames('infonomic-autocomplete-separator', autocomplete_module.separator, className),
+        ...props
+    });
+AutocompleteSeparator.displayName = 'AutocompleteSeparator';
+export { AutocompleteGroup, AutocompleteGroupLabel, AutocompleteItem, AutocompleteSeparator, autocomplete_Autocomplete as Autocomplete };