@lar-works/design-system 0.0.0-stage → 0.1.0

package/dist/forms/InlineFields.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+interface InlineFieldsProps {
+  /** Buttons after the fields, for example Cancel and Save. */
+  actions: ReactNode;
+  children: ReactNode;
+}
+/**
+ * Fields side by side with their actions at the end. Sized by its container, not the window: in a
+ * narrow card the fields stack and the actions sit below them.
+ */
+export declare function InlineFields({ actions, children }: InlineFieldsProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=InlineFields.d.ts.map

package/dist/forms/InlineFields.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/forms/InlineFields.tsx
+/**
+* Fields side by side with their actions at the end. Sized by its container, not the window: in a
+* narrow card the fields stack and the actions sit below them.
+*/
+function InlineFields({ actions, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "@container min-w-0",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 @lg:flex-row @lg:items-end",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "grid min-w-0 flex-1 gap-3 @lg:auto-cols-fr @lg:grid-flow-col",
+				children
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 justify-end gap-2",
+				children: actions
+			})]
+		})
+	});
+}
+export { InlineFields };
+
+//# sourceMappingURL=InlineFields.js.map

package/dist/forms/InlineFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineFields.js","names":[],"sources":["../../src/forms/InlineFields.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\ninterface InlineFieldsProps {\n    /** Buttons after the fields, for example Cancel and Save. */\n    actions: ReactNode;\n    children: ReactNode;\n}\n\n/**\n * Fields side by side with their actions at the end. Sized by its container, not the window: in a\n * narrow card the fields stack and the actions sit below them.\n */\nexport function InlineFields({ actions, children }: InlineFieldsProps) {\n    return (\n        <div className=\"@container min-w-0\">\n            <div className=\"flex flex-col gap-3 @lg:flex-row @lg:items-end\">\n                <div className=\"grid min-w-0 flex-1 gap-3 @lg:auto-cols-fr @lg:grid-flow-col\">{children}</div>\n                <div className=\"flex shrink-0 justify-end gap-2\">{actions}</div>\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAYA,SAAgB,aAAa,EAAE,SAAS,YAA+B;CACnE,OACI,oBAAC,OAAD;EAAK,WAAU;EACX,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACI,oBAAC,OAAD;IAAK,WAAU;IAAgE;GAAc,CAAA,GAC7F,oBAAC,OAAD;IAAK,WAAU;IAAmC,UAAA;GAAa,CAAA,CAC9D;;CACJ,CAAA;AAEb"}

package/dist/forms/Input.d.ts

@@ -0,0 +1,5 @@
+import { InputProps } from "@ninna-ui/forms";
+type InputProps$1 = Omit<InputProps, 'fullWidth'>;
+declare const Input$1: import("react").ForwardRefExoticComponent<InputProps$1 & import("react").RefAttributes<HTMLInputElement>>;
+export { Input$1 as Input, InputProps$1 as InputProps };
+//# sourceMappingURL=Input.d.ts.map

package/dist/forms/Input.js

@@ -0,0 +1,18 @@
+import { formControlClasses, formControlDefaults } from "./FormControlStyles.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@ninna-ui/forms";
+// src/forms/Input.tsx
+const Input$1 = forwardRef(({ size = formControlDefaults.size, variant = formControlDefaults.variant, className, ...props }, ref) => /* @__PURE__ */ jsx(Input, {
+	ref,
+	color: formControlDefaults.color,
+	...props,
+	fullWidth: true,
+	size,
+	variant,
+	className: `${variant === "filled" ? formControlClasses : ""} ${className ?? ""}`
+}));
+Input$1.displayName = "Input";
+export { Input$1 as Input };
+
+//# sourceMappingURL=Input.js.map

package/dist/forms/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["Input","NinnaInput"],"sources":["../../src/forms/Input.tsx"],"sourcesContent":["import { Input as NinnaInput, type InputProps as NinnaInputProps } from '@ninna-ui/forms';\nimport { forwardRef } from 'react';\n\nimport { formControlClasses, formControlDefaults } from './FormControlStyles';\n\nexport type InputProps = Omit<NinnaInputProps, 'fullWidth'>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n    ({ size = formControlDefaults.size, variant = formControlDefaults.variant, className, ...props }, ref) => (\n        <NinnaInput\n            ref={ref}\n            color={formControlDefaults.color}\n            {...props}\n            fullWidth\n            size={size}\n            variant={variant}\n            className={`${variant === 'filled' ? formControlClasses : ''} ${className ?? ''}`}\n        />\n    ),\n);\n\nInput.displayName = 'Input';\n"],"mappings":";;;;;AAOA,MAAaA,UAAQ,YAChB,EAAE,OAAO,oBAAoB,MAAM,UAAU,oBAAoB,SAAS,WAAW,GAAG,SAAS,QAC9F,oBAACC,OAAD;CACS;CACL,OAAO,oBAAoB;CAC3B,GAAI;CACJ,WAAA;CACM;CACG;CACT,WAAW,GAAG,YAAY,WAAW,qBAAqB,GAAG,GAAG,aAAa;AAChF,CAAA,CAET;AAEA,QAAM,cAAc"}

package/dist/forms/OptionSelect.d.ts

@@ -0,0 +1,21 @@
+interface LoadedOptionSelectProps<Value extends string> {
+  disabled?: boolean;
+  label: string;
+  loading?: false;
+  onChange: (value: Value) => void;
+  /** Disabled options stay visible but cannot be chosen. */
+  options: readonly {
+    label: string;
+    value: Value;
+    disabled?: boolean;
+  }[];
+  value: Value;
+}
+interface LoadingOptionSelectProps {
+  label: string;
+  loading: true;
+}
+type OptionSelectProps<Value extends string> = LoadedOptionSelectProps<Value> | LoadingOptionSelectProps;
+export declare function OptionSelect<Value extends string>(props: OptionSelectProps<Value>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=OptionSelect.d.ts.map

package/dist/forms/OptionSelect.js

@@ -0,0 +1,28 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { Select, SelectItem } from "./Select.js";
+import { jsx } from "react/jsx-runtime";
+// src/forms/OptionSelect.tsx
+function OptionSelect(props) {
+	if (props.loading) return /* @__PURE__ */ jsx(SkeletonLoader, {
+		label: props.label,
+		children: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "control" })
+	});
+	const { disabled, label, onChange, options, value } = props;
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": label,
+		disabled,
+		value,
+		onValueChange: (next) => {
+			const option = options.find((candidate) => candidate.value === next);
+			if (option) onChange(option.value);
+		},
+		children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+			value: option.value,
+			disabled: option.disabled,
+			children: option.label
+		}, option.value))
+	});
+}
+export { OptionSelect };
+
+//# sourceMappingURL=OptionSelect.js.map

package/dist/forms/OptionSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionSelect.js","names":[],"sources":["../../src/forms/OptionSelect.tsx"],"sourcesContent":["import { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Select, SelectItem } from './Select';\n\ninterface LoadedOptionSelectProps<Value extends string> {\n    disabled?: boolean;\n    label: string;\n    loading?: false;\n    onChange: (value: Value) => void;\n    /** Disabled options stay visible but cannot be chosen. */\n    options: readonly { label: string; value: Value; disabled?: boolean }[];\n    value: Value;\n}\n\ninterface LoadingOptionSelectProps {\n    label: string;\n    loading: true;\n}\n\ntype OptionSelectProps<Value extends string> = LoadedOptionSelectProps<Value> | LoadingOptionSelectProps;\n\nexport function OptionSelect<Value extends string>(props: OptionSelectProps<Value>) {\n    if (props.loading)\n        return (\n            <SkeletonLoader label={props.label}>\n                <SkeletonLoader.Shape presentation=\"control\" />\n            </SkeletonLoader>\n        );\n\n    const { disabled, label, onChange, options, value } = props;\n\n    return (\n        <Select\n            aria-label={label}\n            disabled={disabled}\n            value={value}\n            onValueChange={(next) => {\n                const option = options.find((candidate) => candidate.value === next);\n\n                if (option) onChange(option.value);\n            }}\n        >\n            {options.map((option) => (\n                <SelectItem key={option.value} value={option.value} disabled={option.disabled}>\n                    {option.label}\n                </SelectItem>\n            ))}\n        </Select>\n    );\n}\n"],"mappings":";;;;AAoBA,SAAgB,aAAmC,OAAiC;CAChF,IAAI,MAAM,SACN,OACI,oBAAC,gBAAD;EAAgB,OAAO,MAAM;EACzB,UAAA,oBAAC,eAAe,OAAhB,EAAsB,cAAa,UAAW,CAAA;CAClC,CAAA;CAGxB,MAAM,EAAE,UAAU,OAAO,UAAU,SAAS,UAAU;CAEtD,OACI,oBAAC,QAAD;EACI,cAAY;EACF;EACH;EACP,gBAAgB,SAAS;GACrB,MAAM,SAAS,QAAQ,MAAM,cAAc,UAAU,UAAU,IAAI;GAEnE,IAAI,QAAQ,SAAS,OAAO,KAAK;EACrC;EAEC,UAAA,QAAQ,KAAK,WACV,oBAAC,YAAD;GAA+B,OAAO,OAAO;GAAO,UAAU,OAAO;GAChE,UAAA,OAAO;EACA,GAFK,OAAO,KAEZ,CACf;CACG,CAAA;AAEhB"}

package/dist/forms/RadioGroup.d.ts

@@ -0,0 +1,5 @@
+import { RadioGroupItemProps, RadioGroupItemProps as RadioGroupItemProps$1, RadioGroupProps, RadioGroupProps as RadioGroupProps$1 } from "@ninna-ui/forms";
+declare const RadioGroup$1: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem$1: import("react").ForwardRefExoticComponent<RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { RadioGroup$1 as RadioGroup, RadioGroupItem$1 as RadioGroupItem, type RadioGroupItemProps$1 as RadioGroupItemProps, type RadioGroupProps$1 as RadioGroupProps };
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/forms/RadioGroup.js

@@ -0,0 +1,35 @@
+import { formChoiceClasses, formControlDefaults } from "./FormControlStyles.js";
+import { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup, RadioGroupItem, useFormControl } from "@ninna-ui/forms";
+// src/forms/RadioGroup.tsx
+const RadioGroup$1 = forwardRef((props, ref) => {
+	const groupRef = useRef(null);
+	const formControl = useFormControl();
+	useImperativeHandle(ref, () => groupRef.current);
+	useLayoutEffect(() => {
+		const attributes = {
+			"aria-label": props["aria-label"],
+			"aria-labelledby": props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : formControl?.labelId),
+			"aria-describedby": props["aria-describedby"] ?? formControl?.messageId
+		};
+		for (const [name, value] of Object.entries(attributes)) if (value === void 0) groupRef.current?.removeAttribute(name);
+		else groupRef.current?.setAttribute(name, value);
+	});
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		ref: groupRef,
+		size: formControlDefaults.size,
+		color: formControlDefaults.color,
+		...props
+	});
+});
+RadioGroup$1.displayName = "RadioGroup";
+const RadioGroupItem$1 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroupItem, {
+	ref,
+	...props,
+	className: `${formChoiceClasses} cursor-pointer focus-visible:ring-offset-0 ${className ?? ""}`
+}));
+RadioGroupItem$1.displayName = "RadioGroupItem";
+export { RadioGroup$1 as RadioGroup, RadioGroupItem$1 as RadioGroupItem };
+
+//# sourceMappingURL=RadioGroup.js.map

package/dist/forms/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":["RadioGroup","NinnaRadioGroup","RadioGroupItem","NinnaRadioGroupItem"],"sources":["../../src/forms/RadioGroup.tsx"],"sourcesContent":["import {\n    RadioGroup as NinnaRadioGroup,\n    RadioGroupItem as NinnaRadioGroupItem,\n    type RadioGroupItemProps,\n    type RadioGroupProps,\n    useFormControl,\n} from '@ninna-ui/forms';\nimport { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from 'react';\n\nimport { formChoiceClasses, formControlDefaults } from './FormControlStyles';\n\nexport type { RadioGroupItemProps, RadioGroupProps } from '@ninna-ui/forms';\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>((props, ref) => {\n    const groupRef = useRef<HTMLDivElement>(null);\n    const formControl = useFormControl();\n\n    useImperativeHandle(ref, () => groupRef.current!);\n    // Ninna drops the group's ARIA props instead of forwarding them to its root.\n    useLayoutEffect(() => {\n        const attributes = {\n            'aria-label': props['aria-label'],\n            'aria-labelledby': props['aria-labelledby'] ?? (props['aria-label'] ? undefined : formControl?.labelId),\n            'aria-describedby': props['aria-describedby'] ?? formControl?.messageId,\n        };\n\n        for (const [name, value] of Object.entries(attributes)) {\n            if (value === undefined) groupRef.current?.removeAttribute(name);\n            else groupRef.current?.setAttribute(name, value);\n        }\n    });\n\n    return (\n        <NinnaRadioGroup ref={groupRef} size={formControlDefaults.size} color={formControlDefaults.color} {...props} />\n    );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport const RadioGroupItem = forwardRef<HTMLButtonElement, RadioGroupItemProps>(({ className, ...props }, ref) => (\n    <NinnaRadioGroupItem\n        ref={ref}\n        {...props}\n        className={`${formChoiceClasses} cursor-pointer focus-visible:ring-offset-0 ${className ?? ''}`}\n    />\n));\n\nRadioGroupItem.displayName = 'RadioGroupItem';\n"],"mappings":";;;;;AAaA,MAAaA,eAAa,YAA6C,OAAO,QAAQ;CAClF,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,cAAc,eAAe;CAEnC,oBAAoB,WAAW,SAAS,OAAQ;CAEhD,sBAAsB;EAClB,MAAM,aAAa;GACf,cAAc,MAAM;GACpB,mBAAmB,MAAM,uBAAuB,MAAM,gBAAgB,KAAA,IAAY,aAAa;GAC/F,oBAAoB,MAAM,uBAAuB,aAAa;EAClE;EAEA,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,UAAU,GACjD,IAAI,UAAU,KAAA,GAAW,SAAS,SAAS,gBAAgB,IAAI;OAC1D,SAAS,SAAS,aAAa,MAAM,KAAK;CAEvD,CAAC;CAED,OACI,oBAACC,YAAD;EAAiB,KAAK;EAAU,MAAM,oBAAoB;EAAM,OAAO,oBAAoB;EAAO,GAAI;CAAQ,CAAA;AAEtH,CAAC;AAED,aAAW,cAAc;AAEzB,MAAaC,mBAAiB,YAAoD,EAAE,WAAW,GAAG,SAAS,QACvG,oBAACC,gBAAD;CACS;CACL,GAAI;CACJ,WAAW,GAAG,kBAAkB,8CAA8C,aAAa;AAC9F,CAAA,CACJ;AAED,iBAAe,cAAc"}

package/dist/forms/Select.d.ts

@@ -0,0 +1,6 @@
+import { SelectItemProps, SelectProps } from "@ninna-ui/forms";
+type SelectProps$1 = Omit<SelectProps, 'fullWidth'>;
+declare const Select$1: import("react").ForwardRefExoticComponent<SelectProps$1 & import("react").RefAttributes<HTMLButtonElement>>;
+declare const SelectItem$1: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Select$1 as Select, SelectItem$1 as SelectItem, SelectProps$1 as SelectProps };
+//# sourceMappingURL=Select.d.ts.map

package/dist/forms/Select.js

@@ -0,0 +1,36 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { formControlClasses, formControlDefaults } from "./FormControlStyles.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select, SelectItem } from "@ninna-ui/forms";
+// src/forms/Select.tsx
+const Select$1 = forwardRef(({ size = formControlDefaults.size, variant = formControlDefaults.variant, className, ...props }, ref) => /* @__PURE__ */ jsx(Select, {
+	ref,
+	color: formControlDefaults.color,
+	...tabbable,
+	...props,
+	fullWidth: true,
+	size,
+	variant,
+	className: `${variant === "filled" ? formControlClasses : ""} [&>span:first-child]:truncate ${className ?? ""}`
+}));
+Select$1.displayName = "Select";
+const SelectItem$1 = forwardRef(({ icon, children, ...props }, ref) => /* @__PURE__ */ jsx(SelectItem, {
+	ref,
+	...props,
+	children: icon ? /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex min-w-0 items-center gap-2 align-middle",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "size-4 shrink-0 [&>svg]:size-full",
+			children: icon
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children
+		})]
+	}) : children
+}));
+SelectItem$1.displayName = "SelectItem";
+export { Select$1 as Select, SelectItem$1 as SelectItem };
+
+//# sourceMappingURL=Select.js.map

package/dist/forms/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["Select","NinnaSelect","SelectItem","NinnaSelectItem"],"sources":["../../src/forms/Select.tsx"],"sourcesContent":["import {\n    Select as NinnaSelect,\n    SelectItem as NinnaSelectItem,\n    type SelectItemProps,\n    type SelectProps as NinnaSelectProps,\n} from '@ninna-ui/forms';\nimport { forwardRef } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { formControlClasses, formControlDefaults } from './FormControlStyles';\n\nexport type SelectProps = Omit<NinnaSelectProps, 'fullWidth'>;\n\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(\n    ({ size = formControlDefaults.size, variant = formControlDefaults.variant, className, ...props }, ref) => (\n        <NinnaSelect\n            ref={ref}\n            color={formControlDefaults.color}\n            {...tabbable}\n            {...props}\n            fullWidth\n            size={size}\n            variant={variant}\n            className={`${variant === 'filled' ? formControlClasses : ''} [&>span:first-child]:truncate ${className ?? ''}`}\n        />\n    ),\n);\n\nSelect.displayName = 'Select';\n\nexport const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(({ icon, children, ...props }, ref) => (\n    <NinnaSelectItem ref={ref} {...props}>\n        {icon ? (\n            <span className=\"inline-flex min-w-0 items-center gap-2 align-middle\">\n                <span aria-hidden=\"true\" className=\"size-4 shrink-0 [&>svg]:size-full\">\n                    {icon}\n                </span>\n                <span className=\"truncate\">{children}</span>\n            </span>\n        ) : (\n            children\n        )}\n    </NinnaSelectItem>\n));\n\nSelectItem.displayName = 'SelectItem';\n"],"mappings":";;;;;;AAaA,MAAaA,WAAS,YACjB,EAAE,OAAO,oBAAoB,MAAM,UAAU,oBAAoB,SAAS,WAAW,GAAG,SAAS,QAC9F,oBAACC,QAAD;CACS;CACL,OAAO,oBAAoB;CAC3B,GAAI;CACJ,GAAI;CACJ,WAAA;CACM;CACG;CACT,WAAW,GAAG,YAAY,WAAW,qBAAqB,GAAG,iCAAiC,aAAa;AAC9G,CAAA,CAET;AAEA,SAAO,cAAc;AAErB,MAAaC,eAAa,YAA6C,EAAE,MAAM,UAAU,GAAG,SAAS,QACjG,oBAACC,YAAD;CAAsB;CAAK,GAAI;CAC1B,UAAA,OACG,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACI,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAC9B,UAAA;EACC,CAAA,GACN,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,CACzC;CAEN,CAAA,IAAA;AAES,CAAA,CACpB;AAED,aAAW,cAAc"}

package/dist/forms/Switch.d.ts

@@ -0,0 +1,4 @@
+import { SwitchProps } from "@ninna-ui/forms";
+declare const Switch$1: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { Switch$1 as Switch };
+//# sourceMappingURL=Switch.d.ts.map

package/dist/forms/Switch.js

@@ -0,0 +1,16 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@ninna-ui/forms";
+// src/forms/Switch.tsx
+const Switch$1 = forwardRef((props, ref) => /* @__PURE__ */ jsx(Switch, {
+	ref,
+	...tabbable,
+	size: "sm",
+	"aria-busy": props.loading || void 0,
+	...props
+}));
+Switch$1.displayName = "Switch";
+export { Switch$1 as Switch };
+
+//# sourceMappingURL=Switch.js.map

package/dist/forms/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":["Switch","NinnaSwitch"],"sources":["../../src/forms/Switch.tsx"],"sourcesContent":["import { Switch as NinnaSwitch, type SwitchProps } from '@ninna-ui/forms';\nimport { forwardRef } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => (\n    <NinnaSwitch ref={ref} {...tabbable} size=\"sm\" aria-busy={props.loading || undefined} {...props} />\n));\n\nSwitch.displayName = 'Switch';\n"],"mappings":";;;;;AAKA,MAAaA,WAAS,YAA4C,OAAO,QACrE,oBAACC,QAAD;CAAkB;CAAK,GAAI;CAAU,MAAK;CAAK,aAAW,MAAM,WAAW,KAAA;CAAW,GAAI;AAAQ,CAAA,CACrG;AAED,SAAO,cAAc"}

package/dist/forms/TagInput.d.ts

@@ -0,0 +1,19 @@
+interface TagInputProps {
+  /** Names the field that adds a value. */
+  addLabel: string;
+  disabled?: boolean;
+  /** Names the list of values. */
+  label: string;
+  onChange: (values: string[]) => void;
+  placeholder?: string;
+  /** Names the button that removes a value. */
+  removeLabel: (value: string) => string;
+  values: readonly string[];
+}
+/**
+ * Values as removable tags, in order, and a field that adds one on Enter, a comma or a
+ * semicolon, or when it loses focus. A value already listed, in any case, is not added again.
+ */
+export declare function TagInput({ addLabel, disabled, label, onChange, placeholder, removeLabel, values }: TagInputProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TagInput.d.ts.map

package/dist/forms/TagInput.js

@@ -0,0 +1,60 @@
+import { IconButton } from "../actions/IconButton.js";
+import { Badge } from "../display/Badge.js";
+import { Input } from "./Input.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+// src/forms/TagInput.tsx
+/**
+* Values as removable tags, in order, and a field that adds one on Enter, a comma or a
+* semicolon, or when it loses focus. A value already listed, in any case, is not added again.
+*/
+function TagInput({ addLabel, disabled, label, onChange, placeholder, removeLabel, values }) {
+	const [draft, setDraft] = useState("");
+	function add() {
+		const value = draft.trim();
+		setDraft("");
+		if (value && !values.some((known) => known.toLocaleLowerCase() === value.toLocaleLowerCase())) onChange([...values, value]);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-2",
+		children: [values.length > 0 ? /* @__PURE__ */ jsx("ul", {
+			"aria-label": label,
+			className: "flex min-w-0 flex-wrap gap-1.5",
+			children: values.map((value) => /* @__PURE__ */ jsx("li", {
+				className: "max-w-full min-w-0",
+				children: /* @__PURE__ */ jsxs(Badge, {
+					className: "max-w-full pr-0.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: value
+					}), /* @__PURE__ */ jsx(IconButton, {
+						type: "button",
+						"aria-label": removeLabel(value),
+						title: removeLabel(value),
+						className: "size-4 shrink-0 p-0.5",
+						disabled,
+						icon: /* @__PURE__ */ jsx(XIcon, {}),
+						onClick: () => onChange(values.filter((known) => known !== value))
+					})]
+				})
+			}, value))
+		}) : null, /* @__PURE__ */ jsx(Input, {
+			"aria-label": addLabel,
+			placeholder,
+			value: draft,
+			maxLength: 4096,
+			disabled,
+			onBlur: add,
+			onChange: (event) => setDraft(event.target.value),
+			onKeyDown: (event) => {
+				if (event.key !== "Enter" && event.key !== "," && event.key !== ";") return;
+				event.preventDefault();
+				add();
+			}
+		})]
+	});
+}
+export { TagInput };
+
+//# sourceMappingURL=TagInput.js.map

package/dist/forms/TagInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.js","names":[],"sources":["../../src/forms/TagInput.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { Badge } from '../display/Badge';\nimport { Input } from './Input';\n\ninterface TagInputProps {\n    /** Names the field that adds a value. */\n    addLabel: string;\n    disabled?: boolean;\n    /** Names the list of values. */\n    label: string;\n    onChange: (values: string[]) => void;\n    placeholder?: string;\n    /** Names the button that removes a value. */\n    removeLabel: (value: string) => string;\n    values: readonly string[];\n}\n\n/**\n * Values as removable tags, in order, and a field that adds one on Enter, a comma or a\n * semicolon, or when it loses focus. A value already listed, in any case, is not added again.\n */\nexport function TagInput({ addLabel, disabled, label, onChange, placeholder, removeLabel, values }: TagInputProps) {\n    const [draft, setDraft] = useState('');\n\n    function add() {\n        const value = draft.trim();\n\n        setDraft('');\n\n        if (value && !values.some((known) => known.toLocaleLowerCase() === value.toLocaleLowerCase()))\n            onChange([...values, value]);\n    }\n\n    return (\n        <div className=\"flex min-w-0 flex-col gap-2\">\n            {values.length > 0 ? (\n                <ul aria-label={label} className=\"flex min-w-0 flex-wrap gap-1.5\">\n                    {values.map((value) => (\n                        <li key={value} className=\"max-w-full min-w-0\">\n                            <Badge className=\"max-w-full pr-0.5\">\n                                <span className=\"truncate\">{value}</span>\n                                <IconButton\n                                    type=\"button\"\n                                    aria-label={removeLabel(value)}\n                                    title={removeLabel(value)}\n                                    className=\"size-4 shrink-0 p-0.5\"\n                                    disabled={disabled}\n                                    icon={<XIcon />}\n                                    onClick={() => onChange(values.filter((known) => known !== value))}\n                                />\n                            </Badge>\n                        </li>\n                    ))}\n                </ul>\n            ) : null}\n            <Input\n                aria-label={addLabel}\n                placeholder={placeholder}\n                value={draft}\n                maxLength={4096}\n                disabled={disabled}\n                onBlur={add}\n                onChange={(event) => setDraft(event.target.value)}\n                onKeyDown={(event) => {\n                    if (event.key !== 'Enter' && event.key !== ',' && event.key !== ';') return;\n\n                    event.preventDefault();\n                    add();\n                }}\n            />\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;AAwBA,SAAgB,SAAS,EAAE,UAAU,UAAU,OAAO,UAAU,aAAa,aAAa,UAAyB;CAC/G,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,SAAS,MAAM;EACX,MAAM,QAAQ,MAAM,KAAK;EAEzB,SAAS,EAAE;EAEX,IAAI,SAAS,CAAC,OAAO,MAAM,UAAU,MAAM,kBAAkB,MAAM,MAAM,kBAAkB,CAAC,GACxF,SAAS,CAAC,GAAG,QAAQ,KAAK,CAAC;CACnC;CAEA,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACK,OAAO,SAAS,IACb,oBAAC,MAAD;GAAI,cAAY;GAAO,WAAU;GAC5B,UAAA,OAAO,KAAK,UACT,oBAAC,MAAD;IAAgB,WAAU;IACtB,UAAA,qBAAC,OAAD;KAAO,WAAU;KAAjB,UAAA,CACI,oBAAC,QAAD;MAAM,WAAU;MAAY,UAAA;KAAY,CAAA,GACxC,oBAAC,YAAD;MACI,MAAK;MACL,cAAY,YAAY,KAAK;MAC7B,OAAO,YAAY,KAAK;MACxB,WAAU;MACA;MACV,MAAM,oBAAC,OAAD,CAAQ,CAAA;MACd,eAAe,SAAS,OAAO,QAAQ,UAAU,UAAU,KAAK,CAAC;KACpE,CAAA,CACE;;GACP,GAbK,KAaL,CACP;EACD,CAAA,IACJ,MACJ,oBAAC,OAAD;GACI,cAAY;GACC;GACb,OAAO;GACP,WAAW;GACD;GACV,QAAQ;GACR,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;GAChD,YAAY,UAAU;IAClB,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,KAAK;IAErE,MAAM,eAAe;IACrB,IAAI;GACR;EACH,CAAA,CACA;;AAEb"}

package/dist/forms/Textarea.d.ts

@@ -0,0 +1,4 @@
+import { TextareaProps } from "@ninna-ui/forms";
+declare const Textarea$1: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { Textarea$1 as Textarea };
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/forms/Textarea.js

@@ -0,0 +1,15 @@
+import { formControlClasses, formControlDefaults } from "./FormControlStyles.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Textarea } from "@ninna-ui/forms";
+// src/forms/Textarea.tsx
+const Textarea$1 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Textarea, {
+	ref,
+	...formControlDefaults,
+	...props,
+	className: `${formControlClasses} ${className ?? ""}`
+}));
+Textarea$1.displayName = "Textarea";
+export { Textarea$1 as Textarea };
+
+//# sourceMappingURL=Textarea.js.map

package/dist/forms/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","names":["Textarea","NinnaTextarea"],"sources":["../../src/forms/Textarea.tsx"],"sourcesContent":["import { Textarea as NinnaTextarea, type TextareaProps } from '@ninna-ui/forms';\nimport { forwardRef } from 'react';\n\nimport { formControlClasses, formControlDefaults } from './FormControlStyles';\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => (\n    <NinnaTextarea\n        ref={ref}\n        {...formControlDefaults}\n        {...props}\n        className={`${formControlClasses} ${className ?? ''}`}\n    />\n));\nTextarea.displayName = 'Textarea';\n"],"mappings":";;;;;AAKA,MAAaA,aAAW,YAAgD,EAAE,WAAW,GAAG,SAAS,QAC7F,oBAACC,UAAD;CACS;CACL,GAAI;CACJ,GAAI;CACJ,WAAW,GAAG,mBAAmB,GAAG,aAAa;AACpD,CAAA,CACJ;AACD,WAAS,cAAc"}

package/dist/forms/index.d.ts

@@ -0,0 +1,12 @@
+import { Checkbox, CheckboxProps } from "./Checkbox.js";
+import { Field, FieldProps } from "./Field.js";
+import { Disclosure, FormAction, FormContent, FormField, FormRow, FormSection, FormStack } from "./FormSection.js";
+import { InlineFields } from "./InlineFields.js";
+import { Input, InputProps } from "./Input.js";
+import { OptionSelect } from "./OptionSelect.js";
+import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./RadioGroup.js";
+import { Select, SelectItem, SelectProps } from "./Select.js";
+import { Switch } from "./Switch.js";
+import { TagInput } from "./TagInput.js";
+import { Textarea } from "./Textarea.js";
+export { Checkbox, type CheckboxProps, Disclosure, Field, type FieldProps, FormAction, FormContent, FormField, FormRow, FormSection, FormStack, InlineFields, Input, type InputProps, OptionSelect, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectItem, type SelectProps, Switch, TagInput, Textarea };

package/dist/foundations/DesignSystemProvider.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from "react";
+/** The design system's own words, in English. Apps pass their translations through DesignSystemProvider. */
+export declare const defaultDesignSystemLabels: {
+  close: string;
+  cancel: string;
+  retry: string;
+  toolbar: string;
+  imageSize: (width: number, height: number) => string;
+  folders: {
+    path: string;
+    selectedPath: (path: string) => string;
+    open: (name: string) => string;
+    chooseFolder: string;
+    title: string;
+    root: string;
+    upOneLevel: string;
+    loading: string;
+    loadFailed: string;
+    empty: string;
+    loadMore: string;
+    chooseThis: string;
+  };
+  theme: {
+    label: string;
+    system: string;
+    light: string;
+    dark: string;
+  };
+};
+export type DesignSystemLabels = typeof defaultDesignSystemLabels;
+/** The labels an app translates: any group or label left out keeps its English default. */
+export type DesignSystemLabelOverrides = { [Key in keyof DesignSystemLabels]?: DesignSystemLabels[Key] extends ((...args: never[]) => unknown) ? DesignSystemLabels[Key] : DesignSystemLabels[Key] extends object ? Partial<DesignSystemLabels[Key]> : DesignSystemLabels[Key]; };
+export declare function DesignSystemProvider({ children, labels }: {
+  children: ReactNode;
+  labels?: DesignSystemLabelOverrides;
+}): import("react").JSX.Element;
+export declare function useDesignSystemLabels(): {
+  close: string;
+  cancel: string;
+  retry: string;
+  toolbar: string;
+  imageSize: (width: number, height: number) => string;
+  folders: {
+    path: string;
+    selectedPath: (path: string) => string;
+    open: (name: string) => string;
+    chooseFolder: string;
+    title: string;
+    root: string;
+    upOneLevel: string;
+    loading: string;
+    loadFailed: string;
+    empty: string;
+    loadMore: string;
+    chooseThis: string;
+  };
+  theme: {
+    label: string;
+    system: string;
+    light: string;
+    dark: string;
+  };
+};
+//# sourceMappingURL=DesignSystemProvider.d.ts.map

package/dist/foundations/DesignSystemProvider.js

@@ -0,0 +1,66 @@
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { LucideProvider } from "lucide-react";
+// src/foundations/DesignSystemProvider.tsx
+/** The design system's own words, in English. Apps pass their translations through DesignSystemProvider. */
+const defaultDesignSystemLabels = {
+	close: "Close",
+	cancel: "Cancel",
+	retry: "Try again",
+	toolbar: "Toolbar",
+	imageSize: (width, height) => `${width} × ${height}`,
+	folders: {
+		path: "Folder path",
+		selectedPath: (path) => `Selected folder: ${path}`,
+		open: (name) => `Open ${name}`,
+		chooseFolder: "Choose folder",
+		title: "Select a folder",
+		root: "Root",
+		upOneLevel: "Up one level",
+		loading: "Loading folders",
+		loadFailed: "Could not load folders",
+		empty: "No folders",
+		loadMore: "Load more",
+		chooseThis: "Choose this folder"
+	},
+	theme: {
+		label: "Appearance",
+		system: "Match system",
+		light: "Light",
+		dark: "Dark"
+	}
+};
+const LabelContext = createContext(defaultDesignSystemLabels);
+/** Lucide draws on a 24px grid at a 2px stroke; 1.75 matches the weight of Lar's type at the sizes icons use. */
+const iconStrokeWidth = 1.75;
+function DesignSystemProvider({ children, labels }) {
+	const value = useMemo(() => mergeLabels(labels), [labels]);
+	return /* @__PURE__ */ jsx(LabelContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(LucideProvider, {
+			strokeWidth: iconStrokeWidth,
+			children
+		})
+	});
+}
+function mergeLabels(labels) {
+	if (!labels) return defaultDesignSystemLabels;
+	return {
+		...defaultDesignSystemLabels,
+		...labels,
+		folders: {
+			...defaultDesignSystemLabels.folders,
+			...labels.folders
+		},
+		theme: {
+			...defaultDesignSystemLabels.theme,
+			...labels.theme
+		}
+	};
+}
+function useDesignSystemLabels() {
+	return useContext(LabelContext);
+}
+export { DesignSystemProvider, defaultDesignSystemLabels, useDesignSystemLabels };
+
+//# sourceMappingURL=DesignSystemProvider.js.map

package/dist/foundations/DesignSystemProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesignSystemProvider.js","names":[],"sources":["../../src/foundations/DesignSystemProvider.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Provider and consumer share the same UI label contract. */\nimport { LucideProvider } from 'lucide-react';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\n\n/** The design system's own words, in English. Apps pass their translations through DesignSystemProvider. */\nexport const defaultDesignSystemLabels = {\n    close: 'Close',\n    cancel: 'Cancel',\n    retry: 'Try again',\n    toolbar: 'Toolbar',\n    imageSize: (width: number, height: number) => `${width} × ${height}`,\n    folders: {\n        path: 'Folder path',\n        selectedPath: (path: string) => `Selected folder: ${path}`,\n        open: (name: string) => `Open ${name}`,\n        chooseFolder: 'Choose folder',\n        title: 'Select a folder',\n        root: 'Root',\n        upOneLevel: 'Up one level',\n        loading: 'Loading folders',\n        loadFailed: 'Could not load folders',\n        empty: 'No folders',\n        loadMore: 'Load more',\n        chooseThis: 'Choose this folder',\n    },\n    theme: {\n        label: 'Appearance',\n        system: 'Match system',\n        light: 'Light',\n        dark: 'Dark',\n    },\n};\n\nexport type DesignSystemLabels = typeof defaultDesignSystemLabels;\n\n/** The labels an app translates: any group or label left out keeps its English default. */\nexport type DesignSystemLabelOverrides = {\n    [Key in keyof DesignSystemLabels]?: DesignSystemLabels[Key] extends (...args: never[]) => unknown\n        ? DesignSystemLabels[Key]\n        : DesignSystemLabels[Key] extends object\n          ? Partial<DesignSystemLabels[Key]>\n          : DesignSystemLabels[Key];\n};\n\nconst LabelContext = createContext(defaultDesignSystemLabels);\n\n/** Lucide draws on a 24px grid at a 2px stroke; 1.75 matches the weight of Lar's type at the sizes icons use. */\nconst iconStrokeWidth = 1.75;\n\nexport function DesignSystemProvider({\n    children,\n    labels,\n}: {\n    children: ReactNode;\n    labels?: DesignSystemLabelOverrides;\n}) {\n    const value = useMemo(() => mergeLabels(labels), [labels]);\n\n    return (\n        <LabelContext.Provider value={value}>\n            <LucideProvider strokeWidth={iconStrokeWidth}>{children}</LucideProvider>\n        </LabelContext.Provider>\n    );\n}\n\nfunction mergeLabels(labels: DesignSystemLabelOverrides | undefined): DesignSystemLabels {\n    if (!labels) return defaultDesignSystemLabels;\n\n    return {\n        ...defaultDesignSystemLabels,\n        ...labels,\n        folders: { ...defaultDesignSystemLabels.folders, ...labels.folders },\n        theme: { ...defaultDesignSystemLabels.theme, ...labels.theme },\n    };\n}\n\nexport function useDesignSystemLabels() {\n    return useContext(LabelContext);\n}\n"],"mappings":";;;;;AAKA,MAAa,4BAA4B;CACrC,OAAO;CACP,QAAQ;CACR,OAAO;CACP,SAAS;CACT,YAAY,OAAe,WAAmB,GAAG,MAAM,KAAK;CAC5D,SAAS;EACL,MAAM;EACN,eAAe,SAAiB,oBAAoB;EACpD,OAAO,SAAiB,QAAQ;EAChC,cAAc;EACd,OAAO;EACP,MAAM;EACN,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,OAAO;EACP,UAAU;EACV,YAAY;CAChB;CACA,OAAO;EACH,OAAO;EACP,QAAQ;EACR,OAAO;EACP,MAAM;CACV;AACJ;AAaA,MAAM,eAAe,cAAc,yBAAyB;;AAG5D,MAAM,kBAAkB;AAExB,SAAgB,qBAAqB,EACjC,UACA,UAID;CACC,MAAM,QAAQ,cAAc,YAAY,MAAM,GAAG,CAAC,MAAM,CAAC;CAEzD,OACI,oBAAC,aAAa,UAAd;EAA8B;EAC1B,UAAA,oBAAC,gBAAD;GAAgB,aAAa;GAAkB;EAAyB,CAAA;CACrD,CAAA;AAE/B;AAEA,SAAS,YAAY,QAAoE;CACrF,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EACH,GAAG;EACH,GAAG;EACH,SAAS;GAAE,GAAG,0BAA0B;GAAS,GAAG,OAAO;EAAQ;EACnE,OAAO;GAAE,GAAG,0BAA0B;GAAO,GAAG,OAAO;EAAM;CACjE;AACJ;AAEA,SAAgB,wBAAwB;CACpC,OAAO,WAAW,YAAY;AAClC"}

package/dist/foundations/KeyboardFocus.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Safari, and Firefox while macOS keyboard navigation is off, move Tab only between text fields unless an
+ * element sets its tab index explicitly. Controls spread this before their own props, so Tab reaches every
+ * button, switch, select, radio and link in every browser and callers can still opt out with `tabIndex={-1}`.
+ */
+export declare const tabbable: {
+  readonly tabIndex: 0;
+};
+//# sourceMappingURL=KeyboardFocus.d.ts.map

package/dist/foundations/KeyboardFocus.js

@@ -0,0 +1,10 @@
+// src/foundations/KeyboardFocus.ts
+/**
+* Safari, and Firefox while macOS keyboard navigation is off, move Tab only between text fields unless an
+* element sets its tab index explicitly. Controls spread this before their own props, so Tab reaches every
+* button, switch, select, radio and link in every browser and callers can still opt out with `tabIndex={-1}`.
+*/
+const tabbable = { tabIndex: 0 };
+export { tabbable };
+
+//# sourceMappingURL=KeyboardFocus.js.map

package/dist/foundations/KeyboardFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardFocus.js","names":[],"sources":["../../src/foundations/KeyboardFocus.ts"],"sourcesContent":["/**\n * Safari, and Firefox while macOS keyboard navigation is off, move Tab only between text fields unless an\n * element sets its tab index explicitly. Controls spread this before their own props, so Tab reaches every\n * button, switch, select, radio and link in every browser and callers can still opt out with `tabIndex={-1}`.\n */\nexport const tabbable = { tabIndex: 0 } as const;\n"],"mappings":";;;;;;AAKA,MAAa,WAAW,EAAE,UAAU,EAAE"}

package/dist/foundations/KeyboardShortcut.d.ts

@@ -0,0 +1,5 @@
+/** Apple devices write the app's shortcuts with ⌘; everything else uses Ctrl. */
+export declare const applePlatform: boolean;
+/** Whether a key press is the shortcut ⌘<key> (Ctrl+<key> off Apple devices), with no other modifier. */
+export declare function isShortcut(event: KeyboardEvent, key: string): boolean;
+//# sourceMappingURL=KeyboardShortcut.d.ts.map

package/dist/foundations/KeyboardShortcut.js

@@ -0,0 +1,10 @@
+// src/foundations/KeyboardShortcut.ts
+/** Apple devices write the app's shortcuts with ⌘; everything else uses Ctrl. */
+const applePlatform = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
+/** Whether a key press is the shortcut ⌘<key> (Ctrl+<key> off Apple devices), with no other modifier. */
+function isShortcut(event, key) {
+	return event.key.toLowerCase() === key.toLowerCase() && (applePlatform ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey) && !event.altKey && !event.shiftKey;
+}
+export { applePlatform, isShortcut };
+
+//# sourceMappingURL=KeyboardShortcut.js.map

package/dist/foundations/KeyboardShortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcut.js","names":[],"sources":["../../src/foundations/KeyboardShortcut.ts"],"sourcesContent":["/** Apple devices write the app's shortcuts with ⌘; everything else uses Ctrl. */\nexport const applePlatform = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent);\n\n/** Whether a key press is the shortcut ⌘<key> (Ctrl+<key> off Apple devices), with no other modifier. */\nexport function isShortcut(event: KeyboardEvent, key: string): boolean {\n    return (\n        event.key.toLowerCase() === key.toLowerCase() &&\n        (applePlatform ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey) &&\n        !event.altKey &&\n        !event.shiftKey\n    );\n}\n"],"mappings":";;AACA,MAAa,gBAAgB,OAAO,cAAc,eAAe,kBAAkB,KAAK,UAAU,SAAS;;AAG3G,SAAgB,WAAW,OAAsB,KAAsB;CACnE,OACI,MAAM,IAAI,YAAY,MAAM,IAAI,YAAY,MAC3C,gBAAgB,MAAM,WAAW,CAAC,MAAM,UAAU,MAAM,WAAW,CAAC,MAAM,YAC3E,CAAC,MAAM,UACP,CAAC,MAAM;AAEf"}

package/dist/foundations/Theme.d.ts

@@ -0,0 +1,14 @@
+export type ThemePreference = 'system' | 'light' | 'dark';
+export interface ThemeController {
+  /** Applies the stored preference before the first render, so the page never flashes the other theme. */
+  initialize(): void;
+  /** The current preference and a setter that stores and applies it, kept in step across tabs. */
+  useTheme(): readonly [ThemePreference, (value: ThemePreference) => void];
+}
+export declare function isThemePreference(value: string): value is ThemePreference;
+/**
+ * The light/dark preference of one app, stored under `storageKey` in localStorage. The preference sets `.light` or
+ * `.dark` on <html> (nothing follows the system) and points the page's `theme-color` metas at the matching background.
+ */
+export declare function createThemeController(storageKey: string): ThemeController;
+//# sourceMappingURL=Theme.d.ts.map