aidos-ui 3.0.0

package/dist/Sublist.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import { JSStyle } from "./jss";
+export declare function Sublist({ children, label, initialState, jsStyle, secondaryAddOn, bare, }: {
+    bare?: boolean;
+    children: React.ReactNode;
+    label: string;
+    initialState?: {
+        collapsed: boolean;
+    };
+    jsStyle?: JSStyle;
+    secondaryAddOn?: ReactNode;
+}): JSX.Element;

package/dist/Sublist.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { ListButtonItem } from "./ListButtonItem";
+import { Icon } from "./Icon";
+import { Box } from "./Box";
+import { Row } from "./Row";
+export function Sublist({ children, label, initialState = { collapsed: false }, jsStyle, secondaryAddOn, bare, }) {
+    const [collapsed, setCollapsed] = React.useState(initialState.collapsed);
+    return (_jsxs(_Fragment, { children: [_jsx(ListButtonItem, { bare: bare, headline: label, onClick: () => setCollapsed((x) => !x), jsStyle: jsStyle, addOn: _jsxs(Row, { gap: "medium", align: "center", children: [secondaryAddOn, _jsx(Box, { padding: "medium", jsStyle: [
+                                {
+                                    transition: "transform 0.15s ease-in",
+                                },
+                                !collapsed && {
+                                    transform: "rotateZ(90deg)",
+                                },
+                            ], children: _jsx(Icon, { color: "primary", size: "medium", icon: "fa-solid:chevron-right" }) })] }), addOnPosition: "end", color: "secondary" }), collapsed ? null : children] }));
+}
+//# sourceMappingURL=Sublist.js.map

package/dist/Sublist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sublist.js","sourceRoot":"","sources":["../src/Sublist.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,MAAM,UAAU,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,YAAY,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EACnC,OAAO,EACP,cAAc,EACd,IAAI,GAUL;IACC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAEzE,OAAO,CACL,8BACE,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EACtC,OAAO,EAAE,OAAO,EAChB,KAAK,EACH,MAAC,GAAG,IAAC,GAAG,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,aAC7B,cAAc,EACf,KAAC,GAAG,IACF,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE;gCACP;oCACE,UAAU,EAAE,yBAAyB;iCACtC;gCACD,CAAC,SAAS,IAAI;oCACZ,SAAS,EAAE,gBAAgB;iCAC5B;6BACF,YAED,KAAC,IAAI,IACH,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,wBAAwB,GAC7B,GACE,IACF,EAER,aAAa,EAAC,KAAK,EACnB,KAAK,EAAC,WAAW,GACjB,EACD,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,IAC3B,CACJ,CAAC;AACJ,CAAC"}

package/dist/SubmitIconInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BaseInputProps } from "./BaseInput";
+import { IconType } from "./IconType";
+interface SubmitIconInputProps extends BaseInputProps {
+    icon: IconType;
+    type?: "submit";
+}
+export declare function SubmitIconInput({ icon, ...otherProps }: SubmitIconInputProps): JSX.Element;
+export {};

package/dist/SubmitIconInput.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseInput } from "./BaseInput";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+export function SubmitIconInput({ icon, ...otherProps }) {
+    return (_jsx(BaseInput, { label: _jsx(Box, { jsStyle: {
+                cursor: "pointer",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                ":hover": {
+                    backgroundColor: "var(--secondary-background)",
+                    opacity: 0.8,
+                },
+                ":active": {
+                    transform: "scale(0.92)",
+                },
+                height: 32,
+                width: 32,
+                borderRadius: 16,
+            }, children: _jsx(Icon, { icon: icon, size: "medium", color: "primary" }) }), ...otherProps, type: "submit", jsStyle: {
+            visibility: "hidden",
+        }, value: "" }));
+}
+//# sourceMappingURL=SubmitIconInput.js.map

package/dist/SubmitIconInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitIconInput.js","sourceRoot":"","sources":["../src/SubmitIconInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAQ9B,MAAM,UAAU,eAAe,CAAC,EAAE,IAAI,EAAE,GAAG,UAAU,EAAwB;IAC3E,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EACH,KAAC,GAAG,IACF,OAAO,EAAE;gBACP,MAAM,EAAE,SAAS;gBACjB,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE;oBACR,eAAe,EAAE,6BAA6B;oBAC9C,OAAO,EAAE,GAAG;iBACb;gBACD,SAAS,EAAE;oBACT,SAAS,EAAE,aAAa;iBACzB;gBACD,MAAM,EAAE,EAAE;gBACV,KAAK,EAAE,EAAE;gBACT,YAAY,EAAE,EAAE;aACjB,YAED,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,GAAG,GAC9C,KAEJ,UAAU,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE;YACP,UAAU,EAAE,QAAQ;SACrB,EACD,KAAK,EAAC,EAAE,GACR,CACH,CAAC;AACJ,CAAC"}

package/dist/Tabs.d.ts

@@ -0,0 +1,20 @@
+import { RowProps } from "./Row";
+import { JSStyle, Padding, Size } from "./jss";
+import { ReactNode } from "react";
+export type Tab = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    selected?: boolean;
+    addOn?: ReactNode;
+    addOnPosition?: "start" | "end";
+};
+export interface TabsProps extends RowProps {
+    ["aria-controls"]: string;
+    tabs: Array<Tab>;
+    labelSize?: Size;
+    bare?: boolean;
+    tabPadding?: Padding;
+    tabJSStyle?: JSStyle;
+}
+export declare function Tabs({ tabs, gap, padding, tabPadding, labelSize, jsStyle, tabJSStyle, ["aria-controls"]: ariaControls, ...otherProps }: TabsProps): JSX.Element;

package/dist/Tabs.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseLink } from "./BaseLink";
+import { Row } from "./Row";
+import { cssVar, getPadding } from "./jss";
+import { useNavigation } from "./useNavigation";
+import { Text } from "./Text";
+export function Tabs({ tabs, gap = "none", padding = "none", tabPadding = "medium", labelSize = "large", jsStyle, tabJSStyle, ["aria-controls"]: ariaControls, ...otherProps }) {
+    const root = useNavigation();
+    return (_jsx(Row, { role: "tablist", jsStyle: jsStyle, gap: gap, padding: padding, ref: root, ...otherProps, children: tabs.map(({ label, href, onClick, selected, addOn, addOnPosition = "start", }) => (_jsxs(BaseLink, { "aria-controls": ariaControls, role: "tab", "aria-selected": selected ? "true" : undefined, bare: true, color: selected ? "positive" : "secondary", href: href, onClick: onClick, animateInteraction: false, jsStyle: [
+                {
+                    textDecoration: "none",
+                    borderBottom: selected
+                        ? `3px solid ${cssVar("--highlight")}`
+                        : `3px solid transparent`,
+                    ":active span": {
+                        transform: "scale(0.97)",
+                    },
+                    ":first-child": {
+                        borderTopLeftRadius: cssVar("--border-radius-m"),
+                    },
+                    ":last-child": {
+                        borderTopRightRadius: cssVar("--border-radius-m"),
+                    },
+                    ":hover": {
+                        backgroundColor: cssVar("--hovered-background"),
+                    },
+                    ":active:hover": {
+                        backgroundColor: cssVar("--pressed-background"),
+                    },
+                },
+                getPadding(tabPadding),
+                tabJSStyle,
+            ], children: [addOnPosition === "start" && addOn, _jsx(Text, { size: labelSize, color: selected ? "primary" : "secondary", children: label }), addOnPosition === "end" && addOn] }, label))) }));
+}
+//# sourceMappingURL=Tabs.js.map

package/dist/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAC;AACtC,OAAO,EAA0B,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAqB9B,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,GAAG,GAAG,MAAM,EACZ,OAAO,GAAG,MAAM,EAChB,UAAU,GAAG,QAAQ,EACrB,SAAS,GAAG,OAAO,EACnB,OAAO,EACP,UAAU,EACV,CAAC,eAAe,CAAC,EAAE,YAAY,EAC/B,GAAG,UAAU,EACH;IACV,MAAM,IAAI,GAAG,aAAa,EAAE,CAAC;IAE7B,OAAO,CACL,KAAC,GAAG,IACF,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,IAAI,KACL,UAAU,YAEb,IAAI,CAAC,GAAG,CACP,CAAC,EACC,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,KAAK,EACL,aAAa,GAAG,OAAO,GACxB,EAAE,EAAE,CAAC,CACJ,MAAC,QAAQ,qBACQ,YAAY,EAC3B,IAAI,EAAC,KAAK,mBACK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAE5C,IAAI,QACJ,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,EAC1C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,KAAK,EACzB,OAAO,EAAE;gBACP;oBACE,cAAc,EAAE,MAAM;oBACtB,YAAY,EAAE,QAAQ;wBACpB,CAAC,CAAC,aAAa,MAAM,CAAC,aAAa,CAAC,EAAE;wBACtC,CAAC,CAAC,uBAAuB;oBAC3B,cAAc,EAAE;wBACd,SAAS,EAAE,aAAa;qBACzB;oBACD,cAAc,EAAE;wBACd,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,CAAC;qBACjD;oBACD,aAAa,EAAE;wBACb,oBAAoB,EAAE,MAAM,CAAC,mBAAmB,CAAC;qBAClD;oBACD,QAAQ,EAAE;wBACR,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC;qBAChD;oBACD,eAAe,EAAE;wBACf,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC;qBAChD;iBACF;gBACD,UAAU,CAAC,UAAU,CAAC;gBACtB,UAAU;aACX,aAEA,aAAa,KAAK,OAAO,IAAI,KAAK,EACnC,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,YAC7D,KAAK,GACD,EACN,aAAa,KAAK,KAAK,IAAI,KAAK,KApC5B,KAAK,CAqCD,CACZ,CACF,GACG,CACP,CAAC;AACJ,CAAC"}

package/dist/Text.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { JSStyle, Size, TextColor } from "./jss";
+export type Display = "inline" | "block";
+export interface TextProps {
+    children: ReactNode;
+    color?: TextColor;
+    size?: Size;
+    bold?: boolean;
+    ellipsis?: boolean | "default";
+    align?: "center" | "none";
+    type?: TextType;
+    grow?: boolean;
+    jsStyle?: JSStyle;
+    id?: string;
+    htmlFor?: string;
+}
+export type TextType = "label" | "span" | "p" | "h1" | "h2" | "h3" | "h4" | "li";
+export declare function Text({ children, color, size, align, bold, ellipsis, grow, type: Type, jsStyle, id, htmlFor, }: TextProps): JSX.Element;
+export declare function Label({ size, type, ...rest }: TextProps): JSX.Element;
+export declare function Span({ size, type, ...rest }: TextProps): JSX.Element;
+export declare function P({ size, type, ...rest }: TextProps): JSX.Element;
+export declare function H1({ size, type, ...rest }: TextProps): JSX.Element;
+export declare function H2({ size, type, ...rest }: TextProps): JSX.Element;
+export declare function H3({ size, type, ...rest }: TextProps): JSX.Element;
+export declare function Li({ size, type, ...rest }: TextProps): JSX.Element;

package/dist/Text.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTextColor, jss } from "./jss";
+const fontSize = {
+    xsmall: "0.75rem",
+    small: "1rem",
+    medium: "1.25rem",
+    large: "1.5rem",
+    xlarge: "2rem",
+};
+export function Text({ children, color = "primary", size = "medium", align = "none", bold = false, ellipsis = "default", grow, type: Type = "span", jsStyle, id, htmlFor, }) {
+    if (ellipsis === "default") {
+        ellipsis = Type === "span" || Type === "label";
+    }
+    const className = jss([
+        getTextColor(color),
+        { fontSize: fontSize[size], padding: 0, margin: 0 },
+        bold && { fontWeight: "bold" },
+        align === "center" && { textAlign: "center" },
+        ellipsis && {
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+        },
+        grow && { flexGrow: 1 },
+        jsStyle,
+    ]);
+    return (_jsx(Type, { id: id, className: className, htmlFor: htmlFor, children: children }));
+}
+export function Label({ size = "small", type = "label", ...rest }) {
+    return _jsx(Text, { size: size, type: type, ...rest });
+}
+export function Span({ size = "small", type = "span", ...rest }) {
+    return _jsx(Text, { size: size, type: type, ...rest });
+}
+export function P({ size = "small", type = "p", ...rest }) {
+    return _jsx(Text, { size: size, type: type, ...rest });
+}
+export function H1({ size = "xlarge", type = "h1", ...rest }) {
+    return _jsx(Text, { size: size, type: type, ...rest });
+}
+export function H2({ size = "large", type = "h2", ...rest }) {
+    return _jsx(Text, { size: size, type: type, ...rest });
+}
+export function H3({ size = "medium", type = "h3", ...rest }) {
+    return _jsx(Text, { size: size, type: type, ...rest });
+}
+export function Li({ size = "small", type = "li", ...rest }) {
+    return _jsx(Text, { size: size, type: type, ...rest });
+}
+//# sourceMappingURL=Text.js.map

package/dist/Text.js.map

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

package/dist/TextArea.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { JSStyle } from "./jss";
+export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+    jsStyle?: JSStyle;
+    onValueChange?: (value: string) => void;
+    value?: string;
+    className?: undefined;
+    size?: undefined;
+}
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/TextArea.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { jss } from "./jss";
+export const TextArea = React.forwardRef(({ jsStyle, onValueChange, value, onChange, ...otherProps }, ref) => {
+    return (_jsx("textarea", { ...otherProps, ref: ref, className: jss([
+            {
+                padding: "var(--spacing-m)",
+                flexGrow: 1,
+                backgroundColor: "var(--primary-background)",
+                color: "var(--primary-text)",
+                outline: "none",
+                border: "none",
+                fontSize: 20,
+                lineHeight: 24 / 20,
+                "::placeholder": {
+                    color: "var(--secondary-text);",
+                },
+            },
+            jsStyle,
+        ]), value: value, onChange: onValueChange ? (e) => onValueChange(e.target.value) : undefined }));
+});
+//# sourceMappingURL=TextArea.js.map

package/dist/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAW,GAAG,EAAE,MAAM,OAAO,CAAC;AAWrC,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CACE,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAiB,EACzE,GAAoC,EACpC,EAAE;IACF,OAAO,CACL,sBACM,UAAU,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,CAAC;YACb;gBACE,OAAO,EAAE,kBAAkB;gBAC3B,QAAQ,EAAE,CAAC;gBACX,eAAe,EAAE,2BAA2B;gBAC5C,KAAK,EAAE,qBAAqB;gBAC5B,OAAO,EAAE,MAAM;gBACf,MAAM,EAAE,MAAM;gBACd,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE,GAAG,EAAE;gBACnB,eAAe,EAAE;oBACf,KAAK,EAAE,wBAAwB;iBAChC;aACF;YACD,OAAO;SACR,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,QAAQ,EACN,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,GAElE,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/TextInput.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import { BaseInputProps } from "./BaseInput";
+import { Gap, JSStyle, Padding } from "./jss";
+export interface TextInputProps extends BaseInputProps {
+    onValueChange?: (value: string) => void;
+    rootJSStyle?: JSStyle;
+    addOn?: ReactNode;
+    addOnPosition?: "start" | "end";
+    gap?: Gap;
+    onChange?: undefined;
+    padding?: Padding;
+    bare?: boolean;
+}
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/TextInput.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { BaseInput } from "./BaseInput";
+import { Row } from "./Row";
+import { cssVar, getPadding } from "./jss";
+import { Column } from "./Column";
+export const TextInput = React.forwardRef(({ value, onValueChange, rootJSStyle, jsStyle, addOn, gap = "small", addOnPosition = "start", padding = "medium", bare, ...inputProps }, ref) => {
+    return (_jsxs(Row, { gap: gap, jsStyle: [
+            {
+                borderRadius: cssVar("--border-radius-m"),
+                overflow: "hidden",
+            },
+            bare
+                ? {
+                    backgroundColor: "inherit",
+                    ":has(:focus-visible)": {
+                        backgroundColor: cssVar("--light-highlight"),
+                    },
+                }
+                : {
+                    border: `1px solid ${cssVar("--divider")}`,
+                    backgroundColor: cssVar("--overlay-background"),
+                    ":has(:focus-visible)": {
+                        outline: `2px solid ${cssVar("--highlight")}`,
+                        outlineOffset: -2,
+                    },
+                },
+            rootJSStyle,
+        ], children: [addOnPosition === "start" && addOn && (_jsx(Column, { justify: "center", align: "center", jsStyle: [getPadding(padding), { paddingRight: 0 }], children: addOn })), _jsx(BaseInput, { ...inputProps, ref: ref, value: value, onChange: onValueChange ? (e) => onValueChange(e.target.value) : undefined, jsStyle: [
+                    {
+                        minWidth: 0,
+                        flexGrow: 1,
+                        backgroundColor: "inherit",
+                        color: cssVar("--primary-text"),
+                        outline: "none",
+                        border: "none",
+                        fontSize: 20,
+                        lineHeight: 24 / 20,
+                        "::placeholder": {
+                            color: cssVar("--subtle-text"),
+                        },
+                        ":disabled": {
+                            color: cssVar("--subtle-text"),
+                        },
+                    },
+                    getPadding(padding),
+                    addOn && addOnPosition === "start" ? { paddingLeft: 0 } : null,
+                    addOn && addOnPosition === "end" ? { paddingRight: 0 } : null,
+                    jsStyle,
+                ] }), addOnPosition === "end" && addOn && (_jsx(Column, { justify: "center", align: "center", jsStyle: [getPadding(padding), { paddingLeft: 0 }], children: addOn }))] }));
+});
+//# sourceMappingURL=TextInput.js.map

package/dist/TextInput.js.map

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

package/dist/TextInputWithState.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { BaseInputProps } from "./BaseInput";
+import { IconType } from "./IconType";
+export interface TextInputWithStateProps extends BaseInputProps {
+    onValueChange?: (value: string) => void;
+    valueRef: React.MutableRefObject<string>;
+    icon?: IconType;
+    onChange?: undefined;
+}
+export declare function TextInputWithState({ valueRef, onValueChange: externalOnChange, icon, ...otherProps }: TextInputWithStateProps): JSX.Element;

package/dist/TextInputWithState.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { TextInput } from "./TextInput";
+import { useState } from "react";
+export function TextInputWithState({ valueRef, onValueChange: externalOnChange, icon, ...otherProps }) {
+    const [value, setValue] = useState(valueRef.current);
+    const onValueChange = useCallback((value) => {
+        valueRef.current = value;
+        setValue(value);
+        externalOnChange && externalOnChange(value);
+    }, [setValue, externalOnChange, valueRef]);
+    return (_jsx(TextInput, { ...otherProps, value: value, onValueChange: onValueChange }));
+}
+//# sourceMappingURL=TextInputWithState.js.map

package/dist/TextInputWithState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputWithState.js","sourceRoot":"","sources":["../src/TextInputWithState.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAS5C,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,aAAa,EAAE,gBAAgB,EAC/B,IAAI,EACJ,GAAG,UAAU,EACW;IACxB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAErD,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAK,EAAE,EAAE;QACR,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,gBAAgB,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC,EACD,CAAC,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CACvC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,OAAK,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,CAC1E,CAAC;AACJ,CAAC"}

package/dist/TextPairing.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { TextColor, Size, Position, Gap, Padding, Align, JSStyle } from "./jss";
+export interface TextPairingProps {
+    headline: ReactNode;
+    body?: ReactNode;
+    headlineColor?: TextColor;
+    headlineSize?: Size;
+    headlineAddOn?: ReactNode;
+    bodyColor?: TextColor;
+    bodySize?: Size;
+    addOn?: ReactNode;
+    addOnPosition?: Position;
+    gap?: Gap;
+    padding?: Padding;
+    align?: Align;
+    grow?: boolean;
+    shrink?: boolean;
+    headlineBold?: boolean;
+    jsStyle?: JSStyle;
+}
+export declare function TextPairing({ headline, body, headlineColor, headlineSize, headlineAddOn, bodyColor, bodySize, addOn, addOnPosition, gap, align, grow, shrink, headlineBold, padding, jsStyle, }: TextPairingProps): JSX.Element;

package/dist/TextPairing.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "./Text";
+import { Row } from "./Row";
+import { BaseView } from "./BaseView";
+import { Column } from "./Column";
+import { cssVar, } from "./jss";
+export function TextPairing({ headline, body, headlineColor = "primary", headlineSize = "medium", headlineAddOn, bodyColor = "secondary", bodySize = "medium", addOn, addOnPosition = "start", gap = "small", align = "stretch", grow, shrink, headlineBold, padding, jsStyle, }) {
+    const textElement = (_jsxs(Column, { grow: grow, shrink: shrink, padding: addOn ? undefined : padding, align: align, jsStyle: [
+            {
+                overflow: "hidden",
+            },
+            jsStyle,
+        ], children: [_jsxs(Row, { align: "center", jsStyle: {
+                    textAlign: "start",
+                }, children: [_jsx(Text, { bold: headlineBold, color: headlineColor, size: headlineSize, children: headline }), headlineAddOn && _jsx(BaseView, { children: headlineAddOn })] }), body && (_jsx(Row, { align: "center", jsStyle: {
+                    marginTop: cssVar("--spacing-xs"),
+                    textAlign: "start",
+                }, children: _jsx(Text, { ellipsis: true, color: bodyColor, size: bodySize, children: body }) }))] }));
+    if (addOn) {
+        return (_jsxs(Row, { grow: grow, shrink: shrink, gap: gap, align: "center", padding: padding, jsStyle: {
+                overflow: "hidden",
+            }, children: [addOnPosition === "start" && addOn, textElement, addOnPosition === "end" && addOn] }));
+    }
+    return textElement;
+}
+//# sourceMappingURL=TextPairing.js.map

package/dist/TextPairing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextPairing.js","sourceRoot":"","sources":["../src/TextPairing.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAOL,MAAM,GAEP,MAAM,OAAO,CAAC;AAqBf,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,SAAS,EACzB,YAAY,GAAG,QAAQ,EACvB,aAAa,EACb,SAAS,GAAG,WAAW,EACvB,QAAQ,GAAG,QAAQ,EACnB,KAAK,EACL,aAAa,GAAG,OAAO,EACvB,GAAG,GAAG,OAAO,EACb,KAAK,GAAG,SAAS,EACjB,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,OAAO,EACP,OAAO,GACU;IACjB,MAAM,WAAW,GAAG,CAClB,MAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACpC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE;YACP;gBACE,QAAQ,EAAE,QAAQ;aACnB;YACD,OAAO;SACR,aAED,MAAC,GAAG,IACF,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE;oBACP,SAAS,EAAE,OAAO;iBACnB,aAED,KAAC,IAAI,IAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,YAAY,YAC/D,QAAQ,GACJ,EACN,aAAa,IAAI,KAAC,QAAQ,cAAE,aAAa,GAAY,IAClD,EACL,IAAI,IAAI,CACP,KAAC,GAAG,IACF,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE;oBACP,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;oBACjC,SAAS,EAAE,OAAO;iBACnB,YAED,KAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,YACnD,IAAI,GACA,GACH,CACP,IACM,CACV,CAAC;IAEF,IAAI,KAAK,EAAE;QACT,OAAO,CACL,MAAC,GAAG,IACF,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE;gBACP,QAAQ,EAAE,QAAQ;aACnB,aAEA,aAAa,KAAK,OAAO,IAAI,KAAK,EAClC,WAAW,EACX,aAAa,KAAK,KAAK,IAAI,KAAK,IAC7B,CACP,CAAC;KACH;IAED,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/dist/TimeInput.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+import { BaseInputProps } from "./BaseInput";
+import { Gap, Padding } from "./jss";
+export interface TimeInputProps extends BaseInputProps {
+    onTimeChange: (date: Date) => void;
+    time: Date;
+    gap?: Gap;
+    padding?: Padding;
+    addOn?: ReactNode;
+    addOnPosition?: "start" | "end";
+    onChange?: undefined;
+    bare?: boolean;
+}
+export declare const timeFormatter: Intl.DateTimeFormat;
+export declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/TimeInput.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { BaseInput } from "./BaseInput";
+import { Row } from "./Row";
+import { cssVar } from "./jss";
+export const timeFormatter = Intl.DateTimeFormat("en-UK", {
+    hour: "2-digit",
+    minute: "2-digit",
+});
+function TimeInputInternal({ time: date, onTimeChange: onDateChange, jsStyle, addOn, padding = "small", gap = "none", addOnPosition = "start", bare, ...inputProps }, ref) {
+    return (_jsxs(Row, { padding: padding, gap: gap, align: "center", jsStyle: [
+            {
+                borderRadius: cssVar("--border-radius-m"),
+                overflow: "hidden",
+            },
+            bare
+                ? {
+                    backgroundColor: "inherit",
+                    ":has(:focus-visible)": {
+                        backgroundColor: cssVar("--light-highlight"),
+                    },
+                }
+                : {
+                    border: `1px solid ${cssVar("--divider")}`,
+                    backgroundColor: cssVar("--overlay-background"),
+                    ":has(:focus-visible)": {
+                        outline: `2px solid ${cssVar("--highlight")}`,
+                        outlineOffset: -2,
+                    },
+                },
+        ], children: [addOnPosition === "start" && addOn, _jsx(BaseInput, { ...inputProps, type: "time", ref: ref, value: timeFormatter.format(date), onChange: (e) => {
+                    const value = e.target.value;
+                    const [hour, minute] = value.split(":");
+                    onDateChange(new Date(date.getFullYear(), date.getMonth(), date.getDate(), parseInt(hour), parseInt(minute)));
+                }, jsStyle: [
+                    {
+                        flexGrow: 1,
+                        backgroundColor: "inherit",
+                        color: "var(--primary-text)",
+                        outline: "none",
+                        border: "none",
+                        fontSize: 20,
+                        lineHeight: 24 / 20,
+                        "::placeholder": {
+                            color: "var(--subtle-text);",
+                        },
+                        ":disabled": {
+                            color: "var(--subtle-text);",
+                        },
+                        "::-webkit-calendar-picker-indicator": {
+                            backgroundColor: "none",
+                        },
+                    },
+                    jsStyle,
+                ] }), addOnPosition === "end" && addOn] }));
+}
+export const TimeInput = React.forwardRef(TimeInputInternal);
+//# sourceMappingURL=TimeInput.js.map

package/dist/TimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../src/TimeInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAgB,MAAM,EAAE,MAAM,OAAO,CAAC;AAa7C,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;IACxD,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH,SAAS,iBAAiB,CACxB,EACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,OAAO,EACP,KAAK,EACL,OAAO,GAAG,OAAO,EACjB,GAAG,GAAG,MAAM,EACZ,aAAa,GAAG,OAAO,EACvB,IAAI,EACJ,GAAG,UAAU,EACE,EACjB,GAAiC;IAEjC,OAAO,CACL,MAAC,GAAG,IACF,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE;YACP;gBACE,YAAY,EAAE,MAAM,CAAC,mBAAmB,CAAC;gBACzC,QAAQ,EAAE,QAAQ;aACnB;YACD,IAAI;gBACF,CAAC,CAAC;oBACE,eAAe,EAAE,SAAS;oBAC1B,sBAAsB,EAAE;wBACtB,eAAe,EAAE,MAAM,CAAC,mBAAmB,CAAC;qBAC7C;iBACF;gBACH,CAAC,CAAC;oBACE,MAAM,EAAE,aAAa,MAAM,CAAC,WAAW,CAAC,EAAE;oBAC1C,eAAe,EAAE,MAAM,CAAC,sBAAsB,CAAC;oBAC/C,sBAAsB,EAAE;wBACtB,OAAO,EAAE,aAAa,MAAM,CAAC,aAAa,CAAC,EAAE;wBAC7C,aAAa,EAAE,CAAC,CAAC;qBAClB;iBACF;SACN,aAEA,aAAa,KAAK,OAAO,IAAI,KAAK,EACnC,KAAC,SAAS,OACJ,UAAU,EACd,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,EACjC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;oBAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;oBACxC,YAAY,CACV,IAAI,IAAI,CACN,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,QAAQ,EAAE,EACf,IAAI,CAAC,OAAO,EAAE,EACd,QAAQ,CAAC,IAAI,CAAC,EACd,QAAQ,CAAC,MAAM,CAAC,CACjB,CACF,CAAC;gBACJ,CAAC,EACD,OAAO,EAAE;oBACP;wBACE,QAAQ,EAAE,CAAC;wBACX,eAAe,EAAE,SAAS;wBAC1B,KAAK,EAAE,qBAAqB;wBAC5B,OAAO,EAAE,MAAM;wBACf,MAAM,EAAE,MAAM;wBACd,QAAQ,EAAE,EAAE;wBACZ,UAAU,EAAE,EAAE,GAAG,EAAE;wBACnB,eAAe,EAAE;4BACf,KAAK,EAAE,qBAAqB;yBAC7B;wBACD,WAAW,EAAE;4BACX,KAAK,EAAE,qBAAqB;yBAC7B;wBACD,qCAAqC,EAAE;4BACrC,eAAe,EAAE,MAAM;yBACxB;qBACF;oBACD,OAAO;iBACR,GACD,EACD,aAAa,KAAK,KAAK,IAAI,KAAK,IAC7B,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC"}

package/dist/Tooltip.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { JSStyle } from "./jss";
+interface TooltipProps {
+    content: string;
+    jsStyle?: JSStyle;
+    className?: undefined;
+    tag?: keyof HTMLElementTagNameMap;
+    children: JSX.Element;
+}
+export declare function Tooltip({ content, jsStyle, tag, children }: TooltipProps): JSX.Element;
+export {};

package/dist/Tooltip.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { BaseView } from "./BaseView";
+import { useRefEffect } from "./useRefEffect";
+import { Text } from "./Text";
+import { cssVar, jss } from "./jss";
+const jsStyles = {
+    tooltip: {
+        top: "-100%",
+        transform: "translateY(50%)",
+        backgroundColor: cssVar("--primary-background"),
+        padding: cssVar("--spacing-s"),
+        borderRadius: cssVar("--border-radius-m"),
+        border: `1px solid ${cssVar("--divider")}`,
+        boxShadow: `0px 1px 2px ${cssVar("--divider")}`,
+        overflow: "hidden",
+    },
+};
+export function Tooltip({ content, jsStyle, tag, children }) {
+    const [tooltip, setTooltip] = useState(null);
+    const dialogRef = useRef(null);
+    const focusTrapRoot = useRefEffect((root) => {
+        dialogRef.current = root;
+        const keydown = (e) => {
+            if (e.key === "Escape") {
+                dialogRef.current?.close();
+            }
+            else if (e.key === "Tab") {
+                dialogRef.current?.close();
+            }
+        };
+        const click = () => {
+            dialogRef.current?.close();
+        };
+        window.addEventListener("keydown", keydown);
+        window.addEventListener("click", click);
+        const activeElement = document.activeElement;
+        root.show();
+        // @ts-ignore
+        activeElement.focus();
+        return () => {
+            window.removeEventListener("keydown", keydown);
+            window.removeEventListener("click", click);
+        };
+    });
+    const toggle = () => {
+        if (tooltip == null) {
+            setTooltip(_jsx("dialog", { ref: (ref) => {
+                    dialogRef.current = ref;
+                    focusTrapRoot(ref);
+                }, className: jss(jsStyles.tooltip), onClose: () => {
+                    setTooltip(null);
+                }, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, children: _jsx(Text, { size: "medium", color: "secondary", children: content }) }));
+        }
+        else {
+            setTooltip(null);
+        }
+    };
+    return (_jsxs(BaseView, { tag: tag, relative: true, jsStyle: [{ display: "inline-block" }, jsStyle], onMouseEnter: () => {
+            if (tooltip == null) {
+                toggle();
+            }
+        }, onMouseLeave: () => {
+            if (tooltip != null) {
+                toggle();
+            }
+        }, children: [children, tooltip] }));
+}
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

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

package/dist/aria.d.ts

@@ -0,0 +1,8 @@
+type Focusable = HTMLElement;
+export declare function queryFocusables(root: HTMLElement): Focusable[];
+export declare function queryGrid(root: HTMLElement): HTMLElement[][];
+export declare const normalizeGrid: (rows: HTMLElement[][], rowIndex: number, columnIndex: number) => void;
+export declare const focusGridElement: (rows: HTMLElement[][], rowIndex: number, columnIndex: number) => void;
+export declare const normalizeElements: (focusables: HTMLElement[], index: number) => void;
+export declare const focusElement: (focusables: HTMLElement[], index: number) => void;
+export {};