@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/esm/components/Forms.js

@@ -0,0 +1,128 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+import { Checkbox, Input, Label, Textarea, cn } from "@lumeweb/portal-framework-ui-core";
+import React, { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useInputControl } from "@conform-to/react";
+
+//#region src/components/Forms.tsx
+function ErrorList({ errors, id }) {
+	const errorsToRender = errors?.filter(Boolean);
+	if (!errorsToRender?.length) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-1",
+		id,
+		children: errorsToRender.map((e) => /* @__PURE__ */ jsx("li", {
+			className: "text-destructive-foreground text-[12px]",
+			children: e
+		}, e))
+	});
+}
+function TextareaField({ className, errors, labelProps, textareaProps }) {
+	const fallbackId = useId();
+	const id = textareaProps.id ?? textareaProps.name ?? fallbackId;
+	const errorId = errors?.length ? `${id}-error` : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: id,
+				...labelProps
+			}),
+			/* @__PURE__ */ jsx(Textarea, {
+				"aria-describedby": errorId,
+				"aria-invalid": errorId ? true : void 0,
+				id,
+				...textareaProps
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-[32px] pb-1 pt-1",
+				children: errorId ? /* @__PURE__ */ jsx(ErrorList, {
+					errors,
+					id: errorId
+				}) : null
+			})
+		]
+	});
+}
+var Field, FieldCheckbox;
+var init_Forms = __esmMin(() => {
+	Field = ({ className, errors, inputProps, labelProps }) => {
+		const fallbackId = useId();
+		const id = inputProps.id ?? fallbackId;
+		const errorId = errors?.length ? `${id}-error` : void 0;
+		return /* @__PURE__ */ jsxs("div", {
+			className,
+			children: [
+				/* @__PURE__ */ jsx(Label, {
+					...labelProps,
+					className: "text-secondary-foreground text-sm font-semibold",
+					htmlFor: id
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					...inputProps,
+					"aria-describedby": errorId,
+					"aria-invalid": errorId ? true : void 0,
+					className: "bg-input border-border placeholder-input-placeholder mt-4",
+					id
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "min-h-[32px] px-4 pb-3 pt-1",
+					children: errorId ? /* @__PURE__ */ jsx(ErrorList, {
+						errors,
+						id: errorId
+					}) : null
+				})
+			]
+		});
+	};
+	FieldCheckbox = ({ className, errors, inputProps, labelProps }) => {
+		const { defaultChecked, key, ...checkboxProps } = inputProps;
+		const checkedValue = inputProps.value ?? "on";
+		const input = useInputControl({
+			formId: inputProps.form,
+			initialValue: defaultChecked ? checkedValue : void 0,
+			key,
+			name: inputProps.name
+		});
+		const fallbackId = useId();
+		const id = inputProps.id ?? fallbackId;
+		const errorId = errors?.length ? `${id}-error` : void 0;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("text-foreground flex items-center space-x-2", className),
+			children: [/* @__PURE__ */ jsx(Checkbox, {
+				...checkboxProps,
+				"aria-describedby": errorId,
+				"aria-invalid": errorId ? true : void 0,
+				checked: input.value === checkedValue,
+				id,
+				onBlur: (event) => {
+					input.blur();
+					inputProps.onBlur?.(event);
+				},
+				onCheckedChange: (state) => {
+					input.change(state.valueOf() ? checkedValue : "");
+					inputProps.onCheckedChange?.(state);
+				},
+				onFocus: (event) => {
+					input.focus();
+					inputProps.onFocus?.(event);
+				},
+				type: "button"
+			}), /* @__PURE__ */ jsx(Label, {
+				...labelProps,
+				htmlFor: id
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-h-[32px] px-4 pb-3 pt-1",
+			children: errorId ? /* @__PURE__ */ jsx(ErrorList, {
+				errors,
+				id: errorId
+			}) : null
+		})] });
+	};
+});
+
+//#endregion
+init_Forms();
+export { ErrorList, Field, FieldCheckbox, TextareaField, init_Forms };
+//# sourceMappingURL=Forms.js.map

package/dist/esm/components/Forms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Forms.js","names":[],"sources":["../../../src/components/Forms.tsx"],"sourcesContent":["import { type FieldName, useInputControl } from \"@conform-to/react\";\nimport {\n  Checkbox,\n  cn,\n  Input,\n  Label,\n  Textarea,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport React, { useId } from \"react\";\n\nexport const Field = ({\n  className,\n  errors,\n  inputProps,\n  labelProps,\n}: {\n  className?: string;\n  errors?: ListOfErrors;\n  inputProps: React.HTMLProps<HTMLInputElement> & {\n    name: FieldName<string>;\n  };\n  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;\n}) => {\n  const fallbackId = useId();\n  const id = inputProps.id ?? fallbackId;\n  const errorId = errors?.length ? `${id}-error` : undefined;\n  return (\n    <div className={className}>\n      <Label\n        {...labelProps}\n        className=\"text-secondary-foreground text-sm font-semibold\"\n        htmlFor={id}\n      />\n      <Input\n        {...inputProps}\n        aria-describedby={errorId}\n        aria-invalid={errorId ? true : undefined}\n        className=\"bg-input border-border placeholder-input-placeholder mt-4\"\n        id={id}\n      />\n      <div className=\"min-h-[32px] px-4 pb-3 pt-1\">\n        {errorId ? <ErrorList errors={errors} id={errorId} /> : null}\n      </div>\n    </div>\n  );\n};\n\nexport const FieldCheckbox = ({\n  className,\n  errors,\n  inputProps,\n  labelProps,\n}: {\n  className?: string;\n  errors?: ListOfErrors;\n  inputProps: React.ComponentPropsWithoutRef<typeof Checkbox> & {\n    form: string;\n    name: string;\n    value?: string;\n  };\n  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;\n}) => {\n  const { defaultChecked, key, ...checkboxProps } = inputProps;\n  const checkedValue = inputProps.value ?? \"on\";\n  const input = useInputControl({\n    formId: inputProps.form,\n    initialValue: defaultChecked ? checkedValue : undefined,\n    key,\n    name: inputProps.name,\n  });\n  const fallbackId = useId();\n  const id = inputProps.id ?? fallbackId;\n  const errorId = errors?.length ? `${id}-error` : undefined;\n  return (\n    <>\n      <div\n        className={cn(\n          \"text-foreground flex items-center space-x-2\",\n          className,\n        )}>\n        <Checkbox\n          {...checkboxProps}\n          aria-describedby={errorId}\n          aria-invalid={errorId ? true : undefined}\n          checked={input.value === checkedValue}\n          id={id}\n          onBlur={(event) => {\n            input.blur();\n            inputProps.onBlur?.(event);\n          }}\n          onCheckedChange={(state) => {\n            input.change(state.valueOf() ? checkedValue : \"\");\n            inputProps.onCheckedChange?.(state);\n          }}\n          onFocus={(event) => {\n            input.focus();\n            inputProps.onFocus?.(event);\n          }}\n          type=\"button\"\n        />\n        <Label {...labelProps} htmlFor={id} />\n      </div>\n      <div className=\"min-h-[32px] px-4 pb-3 pt-1\">\n        {errorId ? <ErrorList errors={errors} id={errorId} /> : null}\n      </div>\n    </>\n  );\n};\n\nexport type ListOfErrors = (null | string | undefined)[] | null | undefined;\n\nexport function ErrorList({\n  errors,\n  id,\n}: {\n  errors?: ListOfErrors;\n  id?: string;\n}) {\n  const errorsToRender = errors?.filter(Boolean);\n  if (!errorsToRender?.length) return null;\n  return (\n    <ul className=\"flex flex-col gap-1\" id={id}>\n      {errorsToRender.map((e) => (\n        <li className=\"text-destructive-foreground text-[12px]\" key={e}>\n          {e}\n        </li>\n      ))}\n    </ul>\n  );\n}\nexport function TextareaField({\n  className,\n  errors,\n  labelProps,\n  textareaProps,\n}: {\n  className?: string;\n  errors?: ListOfErrors;\n  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;\n  textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n}) {\n  const fallbackId = useId();\n  const id = textareaProps.id ?? textareaProps.name ?? fallbackId;\n  const errorId = errors?.length ? `${id}-error` : undefined;\n  return (\n    <div className={className}>\n      <Label htmlFor={id} {...labelProps} />\n      <Textarea\n        aria-describedby={errorId}\n        aria-invalid={errorId ? true : undefined}\n        id={id}\n        {...textareaProps}\n      />\n      <div className=\"min-h-[32px] pb-1 pt-1\">\n        {errorId ? <ErrorList errors={errors} id={errorId} /> : null}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA+GA,SAAgB,UAAU,EACxB,QACA,MAIC;CACD,MAAM,iBAAiB,QAAQ,OAAO,QAAQ;AAC9C,KAAI,CAAC,gBAAgB,OAAQ,QAAO;AACpC,QACE,oBAAC;EAAG,WAAU;EAA0B;YACrC,eAAe,KAAK,MACnB,oBAAC;GAAG,WAAU;aACX;KAD0D,EAExD,CACL;GACC;;AAGT,SAAgB,cAAc,EAC5B,WACA,QACA,YACA,iBAMC;CACD,MAAM,aAAa,OAAO;CAC1B,MAAM,KAAK,cAAc,MAAM,cAAc,QAAQ;CACrD,MAAM,UAAU,QAAQ,SAAS,GAAG,GAAG,UAAU;AACjD,QACE,qBAAC;EAAe;;GACd,oBAAC;IAAM,SAAS;IAAI,GAAI;KAAc;GACtC,oBAAC;IACC,oBAAkB;IAClB,gBAAc,UAAU,OAAO;IAC3B;IACJ,GAAI;KACJ;GACF,oBAAC;IAAI,WAAU;cACZ,UAAU,oBAAC;KAAkB;KAAQ,IAAI;MAAW,GAAG;KACpD;;GACF;;;;CAlJG,SAAS,EACpB,WACA,QACA,YACA,iBAQI;EACJ,MAAM,aAAa,OAAO;EAC1B,MAAM,KAAK,WAAW,MAAM;EAC5B,MAAM,UAAU,QAAQ,SAAS,GAAG,GAAG,UAAU;AACjD,SACE,qBAAC;GAAe;;IACd,oBAAC;KACC,GAAI;KACJ,WAAU;KACV,SAAS;MACT;IACF,oBAAC;KACC,GAAI;KACJ,oBAAkB;KAClB,gBAAc,UAAU,OAAO;KAC/B,WAAU;KACN;MACJ;IACF,oBAAC;KAAI,WAAU;eACZ,UAAU,oBAAC;MAAkB;MAAQ,IAAI;OAAW,GAAG;MACpD;;IACF;;CAIG,iBAAiB,EAC5B,WACA,QACA,YACA,iBAUI;EACJ,MAAM,EAAE,gBAAgB,KAAK,GAAG,kBAAkB;EAClD,MAAM,eAAe,WAAW,SAAS;EACzC,MAAM,QAAQ,gBAAgB;GAC5B,QAAQ,WAAW;GACnB,cAAc,iBAAiB,eAAe;GAC9C;GACA,MAAM,WAAW;GAClB,CAAC;EACF,MAAM,aAAa,OAAO;EAC1B,MAAM,KAAK,WAAW,MAAM;EAC5B,MAAM,UAAU,QAAQ,SAAS,GAAG,GAAG,UAAU;AACjD,SACE,4CACE,qBAAC;GACC,WAAW,GACT,+CACA,UACD;cACD,oBAAC;IACC,GAAI;IACJ,oBAAkB;IAClB,gBAAc,UAAU,OAAO;IAC/B,SAAS,MAAM,UAAU;IACrB;IACJ,SAAS,UAAU;AACjB,WAAM,MAAM;AACZ,gBAAW,SAAS,MAAM;;IAE5B,kBAAkB,UAAU;AAC1B,WAAM,OAAO,MAAM,SAAS,GAAG,eAAe,GAAG;AACjD,gBAAW,kBAAkB,MAAM;;IAErC,UAAU,UAAU;AAClB,WAAM,OAAO;AACb,gBAAW,UAAU,MAAM;;IAE7B,MAAK;KACL,EACF,oBAAC;IAAM,GAAI;IAAY,SAAS;KAAM;IAClC,EACN,oBAAC;GAAI,WAAU;aACZ,UAAU,oBAAC;IAAkB;IAAQ,IAAI;KAAW,GAAG;IACpD,IACL"}

package/dist/esm/components/InlineAuthLinkBanner.d.ts

@@ -0,0 +1,18 @@
+//#region src/components/InlineAuthLinkBanner.d.ts
+interface InlineAuthLinkBannerProps {
+  className?: string;
+  label: string;
+  linkClassName?: string;
+  linkLabel?: string;
+  to: string;
+}
+declare function InlineAuthLinkBanner({
+  className,
+  label,
+  linkClassName,
+  linkLabel,
+  to
+}: InlineAuthLinkBannerProps): any;
+//#endregion
+export { InlineAuthLinkBanner };
+//# sourceMappingURL=InlineAuthLinkBanner.d.ts.map

package/dist/esm/components/InlineAuthLinkBanner.js

@@ -0,0 +1,26 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+import { cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { Link } from "react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/InlineAuthLinkBanner.tsx
+function InlineAuthLinkBanner({ className, label, linkClassName, linkLabel, to }) {
+	return /* @__PURE__ */ jsxs("p", {
+		className: cn("text-foreground bg-secondary flex w-fit items-center gap-2 rounded-lg p-3 text-left text-sm", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-foreground/80 whitespace-nowrap",
+			children: label
+		}), /* @__PURE__ */ jsx(Link, {
+			className: cn("text-foreground mx-auto whitespace-nowrap hover:underline hover:underline-offset-4", linkClassName),
+			to,
+			children: linkLabel ?? "Login here →"
+		})]
+	});
+}
+var init_InlineAuthLinkBanner = __esmMin(() => {});
+
+//#endregion
+init_InlineAuthLinkBanner();
+export { InlineAuthLinkBanner, init_InlineAuthLinkBanner };
+//# sourceMappingURL=InlineAuthLinkBanner.js.map

package/dist/esm/components/InlineAuthLinkBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineAuthLinkBanner.js","names":[],"sources":["../../../src/components/InlineAuthLinkBanner.tsx"],"sourcesContent":["import { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\nimport { Link } from \"react-router\";\n\ninterface InlineAuthLinkBannerProps {\n  className?: string;\n  label: string;\n  linkClassName?: string;\n  linkLabel?: string;\n  to: string;\n}\n\nfunction InlineAuthLinkBanner({\n  className,\n  label,\n  linkClassName,\n  linkLabel,\n  to,\n}: InlineAuthLinkBannerProps) {\n  return (\n    <p\n      className={cn(\n        \"text-foreground bg-secondary flex w-fit items-center gap-2 rounded-lg p-3 text-left text-sm\",\n        className,\n      )}>\n      <span className=\"text-foreground/80 whitespace-nowrap\">{label}</span>\n      <Link\n        className={cn(\n          \"text-foreground mx-auto whitespace-nowrap hover:underline hover:underline-offset-4\",\n          linkClassName,\n        )}\n        to={to}>\n        {linkLabel ?? \"Login here →\"}\n      </Link>\n    </p>\n  );\n}\n\nexport { InlineAuthLinkBanner };\n"],"mappings":";;;;;;;AAYA,SAAS,qBAAqB,EAC5B,WACA,OACA,eACA,WACA,MAC4B;AAC5B,QACE,qBAAC;EACC,WAAW,GACT,+FACA,UACD;aACD,oBAAC;GAAK,WAAU;aAAwC;IAAa,EACrE,oBAAC;GACC,WAAW,GACT,sFACA,cACD;GACG;aACH,aAAa;IACT;GACL"}

package/dist/esm/components/KeyboardShortcutDialog.d.ts

@@ -0,0 +1,12 @@
+import { FunctionComponent } from "react";
+
+//#region src/components/KeyboardShortcutDialog.d.ts
+interface KeyboardShortcutDialogProps {
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  shortcuts: Record<string, string | string[]>;
+}
+declare const KeyboardShortcutDialog: FunctionComponent<KeyboardShortcutDialogProps>;
+//#endregion
+export { KeyboardShortcutDialog };
+//# sourceMappingURL=KeyboardShortcutDialog.d.ts.map

package/dist/esm/components/KeyboardShortcutDialog.js

@@ -0,0 +1,53 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+import { Badge, Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+
+//#region src/components/KeyboardShortcutDialog.tsx
+var KeyboardShortcutDialog;
+var init_KeyboardShortcutDialog = __esmMin(() => {
+	KeyboardShortcutDialog = ({ onOpenChange, open, shortcuts }) => {
+		return /* @__PURE__ */ jsx(Dialog, {
+			onOpenChange,
+			open,
+			children: /* @__PURE__ */ jsxs(DialogContent, {
+				className: "max-w-md",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "absolute right-4 top-4",
+						children: /* @__PURE__ */ jsx(Button, {
+							className: "h-8 w-8",
+							onClick: () => onOpenChange(false),
+							size: "icon",
+							variant: "ghost",
+							children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+						})
+					}),
+					/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Keyboard Shortcuts" }) }),
+					/* @__PURE__ */ jsx("div", {
+						className: "grid gap-2",
+						children: Object.entries(shortcuts).map(([action, keys]) => /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-sm",
+								children: action
+							}), /* @__PURE__ */ jsx("div", {
+								className: "flex gap-1",
+								children: (Array.isArray(keys) ? keys : [keys]).map((key) => /* @__PURE__ */ jsx(Badge, {
+									variant: "outline",
+									children: key
+								}, key))
+							})]
+						}, action))
+					})
+				]
+			})
+		});
+	};
+});
+
+//#endregion
+init_KeyboardShortcutDialog();
+export { KeyboardShortcutDialog, init_KeyboardShortcutDialog };
+//# sourceMappingURL=KeyboardShortcutDialog.js.map

package/dist/esm/components/KeyboardShortcutDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcutDialog.js","names":[],"sources":["../../../src/components/KeyboardShortcutDialog.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { X } from \"lucide-react\";\nimport React, { type FunctionComponent } from \"react\";\n\ninterface KeyboardShortcutDialogProps {\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n  shortcuts: Record<string, string | string[]>;\n}\n\nexport const KeyboardShortcutDialog: FunctionComponent<\n  KeyboardShortcutDialogProps\n> = ({ onOpenChange, open, shortcuts }) => {\n  return (\n    <Dialog onOpenChange={onOpenChange} open={open}>\n      <DialogContent className=\"max-w-md\">\n        <div className=\"absolute right-4 top-4\">\n          <Button\n            className=\"h-8 w-8\"\n            onClick={() => onOpenChange(false)}\n            size=\"icon\"\n            variant=\"ghost\">\n            <X className=\"h-4 w-4\" />\n          </Button>\n        </div>\n        <DialogHeader>\n          <DialogTitle>Keyboard Shortcuts</DialogTitle>\n        </DialogHeader>\n        <div className=\"grid gap-2\">\n          {Object.entries(shortcuts).map(([action, keys]) => (\n            <div className=\"flex items-center justify-between\" key={action}>\n              <span className=\"text-muted-foreground text-sm\">{action}</span>\n              <div className=\"flex gap-1\">\n                {(Array.isArray(keys) ? keys : [keys]).map((key) => (\n                  <Badge key={key} variant=\"outline\">\n                    {key}\n                  </Badge>\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":";;;;;;;;;CAiBa,0BAER,EAAE,cAAc,MAAM,gBAAgB;AACzC,SACE,oBAAC;GAAqB;GAAoB;aACxC,qBAAC;IAAc,WAAU;;KACvB,oBAAC;MAAI,WAAU;gBACb,oBAAC;OACC,WAAU;OACV,eAAe,aAAa,MAAM;OAClC,MAAK;OACL,SAAQ;iBACR,oBAAC,KAAE,WAAU,YAAY;QAClB;OACL;KACN,oBAAC,0BACC,oBAAC,yBAAY,uBAAgC,GAChC;KACf,oBAAC;MAAI,WAAU;gBACZ,OAAO,QAAQ,UAAU,CAAC,KAAK,CAAC,QAAQ,UACvC,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAK,WAAU;kBAAiC;SAAc,EAC/D,oBAAC;QAAI,WAAU;mBACX,MAAM,QAAQ,KAAK,GAAG,OAAO,CAAC,KAAK,EAAE,KAAK,QAC1C,oBAAC;SAAgB,SAAQ;mBACtB;WADS,IAEJ,CACR;SACE;SARgD,OASlD,CACN;OACE;;KACQ;IACT"}

package/dist/esm/components/Loading.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from "react";
+
+//#region src/components/Loading.d.ts
+declare function Loading({
+  children,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & {
+  children?: ReactNode;
+}): JSX.Element;
+//#endregion
+export { Loading };
+//# sourceMappingURL=Loading.d.ts.map

package/dist/esm/components/Loading.js

@@ -0,0 +1,41 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Loading.tsx
+function Loading({ children, className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"aria-busy": "true",
+		className: `bg-background fixed inset-0 z-50 transition-opacity duration-300 ${className ?? ""}`,
+		role: "status",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-screen flex-col items-center justify-center p-8",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "mb-8",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "bg-primary flex h-16 w-16 items-center justify-center rounded-2xl",
+					children: /* @__PURE__ */ jsx("svg", {
+						"aria-hidden": "true",
+						className: "text-primary-foreground h-8 w-8 motion-safe:animate-spin motion-reduce:animate-none",
+						fill: "currentColor",
+						focusable: "false",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ jsx("path", { d: "M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z" })
+					})
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "text-center",
+				children: children ?? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: "Loading page..."
+				})
+			})]
+		})
+	});
+}
+var init_Loading = __esmMin(() => {});
+
+//#endregion
+init_Loading();
+export { Loading, init_Loading };
+//# sourceMappingURL=Loading.js.map

package/dist/esm/components/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","names":[],"sources":["../../../src/components/Loading.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nfunction Loading({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & { children?: ReactNode }): JSX.Element {\n  return (\n    <div\n      {...rest}\n      aria-busy=\"true\"\n      className={`bg-background fixed inset-0 z-50 transition-opacity duration-300 ${className ?? \"\"}`}\n      role=\"status\">\n      <div className=\"flex min-h-screen flex-col items-center justify-center p-8\">\n        {/* App Logo/Icon */}\n        <div className=\"mb-8\">\n          <div className=\"bg-primary flex h-16 w-16 items-center justify-center rounded-2xl\">\n            <svg\n              aria-hidden=\"true\"\n              className=\"text-primary-foreground h-8 w-8 motion-safe:animate-spin motion-reduce:animate-none\"\n              fill=\"currentColor\"\n              focusable=\"false\"\n              viewBox=\"0 0 24 24\">\n              <path d=\"M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z\" />\n            </svg>\n          </div>\n        </div>\n\n        {/* Loading Message */}\n        <div className=\"text-center\">\n          {children ?? <p className=\"text-muted-foreground\">Loading page...</p>}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport { Loading };\n"],"mappings":";;;;AAEA,SAAS,QAAQ,EACf,UACA,WACA,GAAG,QACsE;AACzE,QACE,oBAAC;EACC,GAAI;EACJ,aAAU;EACV,WAAW,oEAAoE,aAAa;EAC5F,MAAK;YACL,qBAAC;GAAI,WAAU;cAEb,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,eAAY;MACZ,WAAU;MACV,MAAK;MACL,WAAU;MACV,SAAQ;gBACR,oBAAC,UAAK,GAAE,krBAAkrB;OACtrB;MACF;KACF,EAGN,oBAAC;IAAI,WAAU;cACZ,YAAY,oBAAC;KAAE,WAAU;eAAwB;MAAmB;KACjE;IACF;GACF"}

package/dist/esm/components/LumeLogo.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/LumeLogo.d.ts
+interface LumeLogoProps {
+  className?: string;
+  imageClassName?: string;
+}
+declare function LumeLogo({
+  className,
+  imageClassName
+}: LumeLogoProps): any;
+//#endregion
+export { LumeLogo };
+//# sourceMappingURL=LumeLogo.d.ts.map

package/dist/esm/components/LumeLogo.js

@@ -0,0 +1,27 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+import { init_images, logoPng } from "../images.js";
+import { cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { Link } from "react-router";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/LumeLogo.tsx
+function LumeLogo({ className, imageClassName }) {
+	return /* @__PURE__ */ jsx(Link, {
+		className: cn("flex items-center space-x-2", className),
+		to: "/",
+		children: /* @__PURE__ */ jsx("img", {
+			alt: "Lume logo",
+			className: cn("h-10", imageClassName),
+			src: logoPng
+		})
+	});
+}
+var init_LumeLogo = __esmMin(() => {
+	init_images();
+});
+
+//#endregion
+init_LumeLogo();
+export { LumeLogo, init_LumeLogo };
+//# sourceMappingURL=LumeLogo.js.map

package/dist/esm/components/LumeLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LumeLogo.js","names":[],"sources":["../../../src/components/LumeLogo.tsx"],"sourcesContent":["import { cn } from \"@lumeweb/portal-framework-ui-core\";\nimport React from \"react\";\nimport { Link } from \"react-router\";\n\n// @ts-ignore\nimport { logoPng } from \"@/images\";\n\ninterface LumeLogoProps {\n  className?: string;\n  imageClassName?: string;\n}\n\nexport function LumeLogo({ className, imageClassName }: LumeLogoProps) {\n  return (\n    <Link className={cn(\"flex items-center space-x-2\", className)} to=\"/\">\n      <img\n        alt=\"Lume logo\"\n        className={cn(\"h-10\", imageClassName)}\n        src={logoPng}\n      />\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,SAAS,EAAE,WAAW,kBAAiC;AACrE,QACE,oBAAC;EAAK,WAAW,GAAG,+BAA+B,UAAU;EAAE,IAAG;YAChE,oBAAC;GACC,KAAI;GACJ,WAAW,GAAG,QAAQ,eAAe;GACrC,KAAK;IACL;GACG;;;cAfwB"}

package/dist/esm/components/MainNavigation.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+//#region src/components/MainNavigation.d.ts
+interface MenuProps {
+  isOpen: boolean;
+  onItemClick?: () => void;
+}
+declare const MainNavigation: React.FC<MenuProps>;
+//#endregion
+export { MainNavigation };
+//# sourceMappingURL=MainNavigation.d.ts.map

package/dist/esm/components/MainNavigation.js

@@ -0,0 +1,234 @@
+import { __esmMin } from "../_virtual/rolldown_runtime.js";
+import { init_SidebarContext, useSidebarContext } from "./layout/SidebarContext.js";
+import { init_useMenuItems, useMenuItems } from "../hooks/useMenuItems.js";
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, ScrollArea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn } from "@lumeweb/portal-framework-ui-core";
+import { Link } from "@refinedev/core";
+import React from "react";
+import { useLocation } from "react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Dot } from "lucide-react";
+
+//#region src/components/MainNavigation.tsx
+var isRouteActive, isChildRouteActive, NavItemContent, CollapseMenuButton, LinkableNavItem, NonLinkableNavItem, NavItem, MainNavigation;
+var init_MainNavigation = __esmMin(() => {
+	init_useMenuItems();
+	init_SidebarContext();
+	isRouteActive = (item, currentPathname) => {
+		const itemPath = item.path;
+		if (!itemPath) return false;
+		if (itemPath === currentPathname) return true;
+		if (itemPath !== "/" && currentPathname.startsWith(`${itemPath}/`)) return true;
+		return false;
+	};
+	isChildRouteActive = (child, parent, currentPathname) => {
+		if (child.index && child.path === "" && parent.path === currentPathname) return true;
+		return isRouteActive(child, currentPathname);
+	};
+	NavItemContent = ({ IconComponent, isCollapsed, item }) => /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center",
+		children: [IconComponent && /* @__PURE__ */ jsx("span", {
+			className: "mr-2 h-5 w-5",
+			children: /* @__PURE__ */ jsx(IconComponent, {})
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn({ hidden: isCollapsed }),
+			children: item.label
+		})]
+	});
+	CollapseMenuButton = ({ active, icon: Icon, isOpen, item, label, onItemClick, resetKey, submenus }) => {
+		const pathname = useLocation().pathname;
+		const isSubmenuActive = submenus.some((submenu) => submenu.active === void 0 ? submenu.href === pathname : submenu.active);
+		const [isOpenState, setIsOpenState] = React.useState(active || isSubmenuActive);
+		const headerHref = item.path || submenus[0]?.href;
+		React.useEffect(() => {
+			setIsOpenState(active || isSubmenuActive);
+		}, [active, isSubmenuActive]);
+		React.useEffect(() => {
+			if (resetKey) setIsOpenState(false);
+		}, [resetKey]);
+		return /* @__PURE__ */ jsxs(Collapsible, {
+			className: "w-full",
+			onOpenChange: setIsOpenState,
+			open: isOpenState,
+			children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+				asChild: true,
+				className: "mb-1 [&[data-state=open]>div>div>svg]:rotate-180",
+				children: /* @__PURE__ */ jsx(Button, {
+					className: "h-10 w-full justify-start",
+					variant: active || isSubmenuActive ? "secondary" : "ghost",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex w-full items-center justify-between",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center",
+							children: [Icon && /* @__PURE__ */ jsx("span", {
+								className: "mr-4",
+								children: /* @__PURE__ */ jsx(Icon, { size: 18 })
+							}), headerHref && item.linkable !== false ? /* @__PURE__ */ jsx(Link, {
+								"aria-label": label,
+								onClick: (e) => e.stopPropagation(),
+								onKeyDown: (e) => {
+									if (e.key === " ") {
+										e.preventDefault();
+										e.stopPropagation();
+									}
+									if (e.key === "Enter") e.stopPropagation();
+								},
+								to: headerHref,
+								children: /* @__PURE__ */ jsx("p", {
+									className: cn({
+										"-translate-x-96 opacity-0": !isOpen,
+										"translate-x-0 opacity-100": isOpen
+									}),
+									children: label
+								})
+							}) : /* @__PURE__ */ jsx("p", {
+								"aria-disabled": "true",
+								className: cn({
+									"-translate-x-96 opacity-0": !isOpen,
+									"translate-x-0 opacity-100": isOpen
+								}),
+								children: label
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: cn("whitespace-nowrap", isOpen ? "translate-x-0 opacity-100" : "-translate-x-96 opacity-0"),
+							children: /* @__PURE__ */ jsx(ChevronDown, {
+								className: "transition-transform duration-200",
+								size: 18
+							})
+						})]
+					})
+				})
+			}), /* @__PURE__ */ jsx(CollapsibleContent, {
+				className: "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden",
+				children: submenus.map(({ active: active$1, href, icon: Icon$1, label: label$1 }, index) => /* @__PURE__ */ jsx(Button, {
+					asChild: true,
+					className: "mb-1 h-10 w-full justify-start",
+					variant: active$1 === void 0 && pathname === href || active$1 ? "secondary" : "ghost",
+					children: /* @__PURE__ */ jsxs(Link, {
+						onClick: () => {
+							if (onItemClick) onItemClick();
+						},
+						to: href,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "ml-2 mr-4",
+							children: Icon$1 ? /* @__PURE__ */ jsx(Icon$1, { size: 18 }) : /* @__PURE__ */ jsx(Dot, { size: 18 })
+						}), /* @__PURE__ */ jsx("p", {
+							className: cn({
+								"-translate-x-96 opacity-0": !isOpen,
+								"translate-x-0 opacity-100": isOpen
+							}),
+							children: label$1
+						})]
+					})
+				}, index))
+			})]
+		});
+	};
+	LinkableNavItem = ({ active, IconComponent, isCollapsed, item, onItemClick }) => /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		className: "mb-1 h-10 w-full justify-start",
+		variant: active ? "secondary" : "ghost",
+		children: /* @__PURE__ */ jsx(Link, {
+			onClick: onItemClick,
+			to: item.path || "",
+			children: /* @__PURE__ */ jsx(NavItemContent, {
+				active,
+				IconComponent,
+				isCollapsed,
+				item,
+				onItemClick
+			})
+		})
+	});
+	NonLinkableNavItem = ({ active, IconComponent, isCollapsed, item, onItemClick }) => /* @__PURE__ */ jsx(Button, {
+		className: "mb-1 h-10 w-full justify-start",
+		onClick: onItemClick,
+		variant: active ? "secondary" : "ghost",
+		children: /* @__PURE__ */ jsx(NavItemContent, {
+			active,
+			IconComponent,
+			isCollapsed,
+			item,
+			onItemClick
+		})
+	});
+	NavItem = React.forwardRef(({ active, item, onItemClick }, ref) => {
+		const { isCollapsed } = useSidebarContext();
+		let IconComponent = void 0;
+		if (item.icon) IconComponent = item.icon;
+		return /* @__PURE__ */ jsx("li", {
+			ref,
+			children: item.linkable !== false && Boolean(item.path) ? /* @__PURE__ */ jsx(LinkableNavItem, {
+				active,
+				IconComponent,
+				isCollapsed,
+				item,
+				onItemClick
+			}) : /* @__PURE__ */ jsx(NonLinkableNavItem, {
+				active,
+				IconComponent,
+				isCollapsed,
+				item,
+				onItemClick
+			})
+		});
+	});
+	NavItem.displayName = "NavItem";
+	MainNavigation = ({ isOpen, onItemClick }) => {
+		const menu = useMenuItems();
+		const pathname = useLocation().pathname;
+		const renderMenuItem = (item) => {
+			const active = isRouteActive(item, pathname);
+			if (item.children && item.children.length > 0) {
+				const submenus = item.children.map((child) => ({
+					active: isChildRouteActive(child, item, pathname),
+					href: child.index ? item.path : child.path || "",
+					icon: child.icon,
+					label: child.label
+				}));
+				let CollapseMenuIcon = void 0;
+				if (item.icon) CollapseMenuIcon = item.icon;
+				return /* @__PURE__ */ jsx(CollapseMenuButton, {
+					active,
+					icon: CollapseMenuIcon,
+					isOpen,
+					item,
+					label: item.label,
+					onItemClick,
+					resetKey: typeof onItemClick === "function" ? pathname : void 0,
+					submenus
+				}, item.id);
+			} else return /* @__PURE__ */ jsx(TooltipProvider, {
+				disableHoverableContent: true,
+				children: /* @__PURE__ */ jsxs(Tooltip, {
+					delayDuration: 100,
+					children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(NavItem, {
+							active,
+							item,
+							onItemClick
+						})
+					}), isOpen === false && /* @__PURE__ */ jsx(TooltipContent, {
+						side: "right",
+						children: item.label
+					})]
+				})
+			}, item.id);
+		};
+		return /* @__PURE__ */ jsx(ScrollArea, {
+			className: "[&>div>div[style]]:!block",
+			children: /* @__PURE__ */ jsx("nav", {
+				className: "mt-8 flex h-full w-full flex-col",
+				children: /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-1 flex-col items-start space-y-1 overflow-y-auto overflow-x-hidden px-2",
+					children: menu.getMenuItems().map(renderMenuItem)
+				})
+			})
+		});
+	};
+});
+
+//#endregion
+init_MainNavigation();
+export { MainNavigation, init_MainNavigation };
+//# sourceMappingURL=MainNavigation.js.map