@neuralumina/lumina-ui 0.1.1

package/lumina-ui/widgets/feedback.js

@@ -0,0 +1,316 @@
+import {
+  cleanStyle,
+  ensureGlobalStyle,
+  luminaTheme,
+  normalizeWidgetArgs,
+  omitProps,
+  px,
+} from "./utils.js";
+
+function ensureFeedbackStyles() {
+  ensureGlobalStyle(
+    "lumina-feedback-styles",
+    `
+@keyframes lumina-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes lumina-progress {
+  0% { transform: translateX(-100%); }
+  50% { transform: translateX(0%); }
+  100% { transform: translateX(100%); }
+}
+`,
+  );
+}
+
+export function ModalBarrier(props = {}) {
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["color", "dismissible", "onDismiss"]),
+      onClick: props.dismissible === false ? undefined : props.onDismiss,
+      style: cleanStyle({
+        position: "fixed",
+        inset: 0,
+        backgroundColor: props.color || luminaTheme.colors.overlay,
+        backdropFilter: "blur(2px)",
+        zIndex: props.zIndex ?? 1000,
+        ...props.style,
+      }),
+    },
+    children: [],
+    key: props.key,
+  };
+}
+
+export function Dialog(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+  if (props.open === false) return null;
+
+  const zIndex = props.zIndex ?? 1000;
+
+  return {
+    tag: "div",
+    props: {
+      role: "presentation",
+      style: cleanStyle({
+        position: "fixed",
+        inset: 0,
+        zIndex,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: px(props.padding ?? 20),
+        ...props.overlayStyle,
+      }),
+    },
+    children: [
+      ModalBarrier({
+        color: props.barrierColor,
+        dismissible: props.dismissible,
+        onDismiss: props.onDismiss,
+        zIndex,
+      }),
+      {
+        tag: "div",
+        props: {
+          ...omitProps(props, [
+            "open",
+            "barrierColor",
+            "dismissible",
+            "onDismiss",
+            "padding",
+            "overlayStyle",
+            "width",
+          ]),
+          role: "dialog",
+          "aria-modal": "true",
+          style: cleanStyle({
+            position: "relative",
+            zIndex: zIndex + 1,
+            width: px(props.width, "min(100%, 420px)"),
+            maxWidth: "100%",
+            maxHeight: "calc(100vh - 40px)",
+            overflow: "auto",
+            border: `1px solid ${luminaTheme.colors.border}`,
+            borderRadius: luminaTheme.radius.xl,
+            backgroundColor: luminaTheme.colors.surface,
+            boxShadow: luminaTheme.shadow.lg,
+            ...props.style,
+          }),
+        },
+        children,
+      },
+    ],
+    key: props.key,
+  };
+}
+
+export function AlertDialog(props = {}) {
+  const actions = props.actions || [];
+  return Dialog(
+    {
+      open: props.open,
+      onDismiss: props.onDismiss,
+      dismissible: props.dismissible,
+      width: props.width,
+      style: props.style,
+    },
+    [
+      {
+        tag: "div",
+        props: {
+          style: {
+            padding: "22px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+          },
+        },
+        children: [
+          props.title
+            ? {
+                tag: "h2",
+                props: {
+                  style: {
+                    margin: 0,
+                    fontSize: "20px",
+                    lineHeight: 1.2,
+                    color: luminaTheme.colors.text,
+                  },
+                },
+                children: [props.title],
+              }
+            : null,
+          props.content
+            ? {
+                tag: "div",
+                props: {
+                  style: {
+                    lineHeight: 1.5,
+                    color: luminaTheme.colors.muted,
+                  },
+                },
+                children: Array.isArray(props.content)
+                  ? props.content
+                  : [props.content],
+              }
+            : null,
+          actions.length
+            ? {
+                tag: "div",
+                props: {
+                  style: {
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    gap: "8px",
+                    marginTop: "8px",
+                  },
+                },
+                children: actions,
+              }
+            : null,
+        ],
+      },
+    ],
+  );
+}
+
+export function SnackBar(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+  if (props.open === false) return null;
+  const onClick = (event) => {
+    event.stopPropagation();
+    if (props.onClick) props.onClick(event);
+  };
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["open", "message", "action", "position", "zIndex"]),
+      role: "status",
+      onClick,
+      style: cleanStyle({
+        position: "fixed",
+        left: "50%",
+        bottom: props.position === "top" ? undefined : "20px",
+        top: props.position === "top" ? "20px" : undefined,
+        transform: "translateX(-50%)",
+        zIndex: props.zIndex ?? 3000,
+        pointerEvents: "auto",
+        isolation: "isolate",
+        display: "flex",
+        alignItems: "center",
+        gap: "14px",
+        minWidth: "min(420px, calc(100vw - 32px))",
+        maxWidth: "calc(100vw - 32px)",
+        padding: "12px 14px",
+        border: "1px solid rgba(255, 255, 255, 0.10)",
+        borderRadius: luminaTheme.radius.lg,
+        backgroundColor: "#0f172a",
+        color: "#ffffff",
+        boxShadow: luminaTheme.shadow.md,
+        ...props.style,
+      }),
+    },
+    children: [
+      {
+        tag: "div",
+        props: { style: { flex: 1 } },
+        children: children.length ? children : [props.message || ""],
+      },
+      props.action || null,
+    ],
+    key: props.key,
+  };
+}
+
+export function Tooltip(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+  return {
+    tag: "span",
+    props: {
+      ...omitProps(props, ["message"]),
+      title: props.message,
+      style: cleanStyle({
+        display: "inline-flex",
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function LinearProgressIndicator(props = {}) {
+  ensureFeedbackStyles();
+  const value = props.value;
+  const determinate = typeof value === "number";
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["value", "color", "trackColor", "height"]),
+      role: "progressbar",
+      "aria-valuemin": determinate ? 0 : undefined,
+      "aria-valuemax": determinate ? 1 : undefined,
+      "aria-valuenow": determinate ? value : undefined,
+      style: cleanStyle({
+        position: "relative",
+        overflow: "hidden",
+        width: "100%",
+        height: px(props.height ?? 6),
+        borderRadius: "999px",
+        backgroundColor: props.trackColor || luminaTheme.colors.track,
+        ...props.style,
+      }),
+    },
+    children: [
+      {
+        tag: "div",
+        props: {
+          style: cleanStyle({
+            position: "absolute",
+            inset: 0,
+            width: determinate
+              ? `${Math.max(0, Math.min(1, value)) * 100}%`
+              : "55%",
+            backgroundColor: props.color || luminaTheme.colors.primary,
+            borderRadius: "inherit",
+            animation: determinate
+              ? undefined
+              : "lumina-progress 1.3s ease-in-out infinite",
+          }),
+        },
+        children: [],
+      },
+    ],
+    key: props.key,
+  };
+}
+
+export function CircularProgressIndicator(props = {}) {
+  ensureFeedbackStyles();
+  const size = props.size ?? 32;
+  const strokeWidth = props.strokeWidth ?? 4;
+
+  return {
+    tag: "span",
+    props: {
+      ...omitProps(props, ["size", "strokeWidth", "color", "trackColor"]),
+      role: "progressbar",
+      style: cleanStyle({
+        display: "inline-block",
+        width: px(size),
+        height: px(size),
+        borderRadius: "50%",
+        border: `${px(strokeWidth)} solid ${props.trackColor || luminaTheme.colors.track}`,
+        borderTopColor: props.color || luminaTheme.colors.primary,
+        animation: "lumina-spin 0.8s linear infinite",
+        ...props.style,
+      }),
+    },
+    children: [],
+    key: props.key,
+  };
+}

package/lumina-ui/widgets/forms.js

@@ -0,0 +1,342 @@
+import {
+  applyFieldFocus,
+  cleanStyle,
+  clearFieldFocus,
+  ensureGlobalStyle,
+  fieldStyle,
+  luminaTheme,
+  normalizeWidgetArgs,
+  omitProps,
+  px,
+} from "./utils.js";
+
+function ensureFormStyles() {
+  ensureGlobalStyle(
+    "lumina-form-styles",
+    `
+.lumina-field:focus-visible {
+  outline: 2px solid ${luminaTheme.colors.focus};
+  outline-offset: 2px;
+}
+.lumina-field:hover:not(:disabled) {
+  border-color: ${luminaTheme.colors.primary} !important;
+}
+`,
+  );
+}
+
+export function Form(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: "form",
+    props: {
+      ...omitProps(props, ["onSubmit", "gap"]),
+      noValidate: props.noValidate ?? true,
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (props.onSubmit) props.onSubmit(event);
+      },
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: "column",
+        gap: px(props.gap ?? 12),
+        color: luminaTheme.colors.text,
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function FormField(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+  const {
+    label,
+    helperText,
+    errorText,
+    required = false,
+    style = {},
+  } = props;
+
+  return {
+    tag: "label",
+    props: {
+      ...omitProps(props, ["label", "helperText", "errorText", "required"]),
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px",
+        color: "inherit",
+        ...style,
+      }),
+    },
+    children: [
+      label
+        ? {
+            tag: "span",
+            props: {
+              style: {
+                display: "inline-flex",
+                gap: "4px",
+                fontSize: "13px",
+                fontWeight: 700,
+                color: luminaTheme.colors.text,
+              },
+            },
+            children: [
+              label,
+              required
+                ? {
+                    tag: "span",
+                    props: { style: { color: luminaTheme.colors.danger } },
+                    children: ["*"],
+                  }
+                : "",
+            ],
+          }
+        : null,
+      ...children,
+      helperText || errorText
+        ? {
+            tag: "span",
+            props: {
+              style: {
+                minHeight: "16px",
+                fontSize: "12px",
+                color: errorText ? luminaTheme.colors.danger : luminaTheme.colors.muted,
+              },
+            },
+            children: [errorText || helperText],
+          }
+        : null,
+    ],
+    key: props.key,
+  };
+}
+
+export function Radio({
+  value,
+  groupValue,
+  onChange,
+  label = "",
+  name,
+  disabled = false,
+  style = {},
+  ...props
+}) {
+  ensureFormStyles();
+  return {
+    tag: "label",
+    props: {
+      ...props,
+      style: cleanStyle({
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        color: luminaTheme.colors.text,
+        fontSize: "14px",
+        lineHeight: 1.4,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.55 : 1,
+        userSelect: "none",
+        ...style,
+      }),
+    },
+    children: [
+      {
+        tag: "input",
+        props: {
+          type: "radio",
+          name,
+          value,
+          checked: value === groupValue,
+          disabled,
+          style: {
+            width: "16px",
+            height: "16px",
+            accentColor: luminaTheme.colors.primary,
+            cursor: disabled ? "not-allowed" : "pointer",
+          },
+          onChange: () => {
+            if (!disabled && onChange) onChange(value);
+          },
+        },
+        children: [],
+      },
+      label,
+    ],
+    key: props.key,
+  };
+}
+
+export function RadioGroup(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, givenChildren] = normalizeWidgetArgs(
+    propsOrChildren,
+    maybeChildren,
+  );
+  const options = props.options || [];
+  const children = givenChildren.length
+    ? givenChildren
+    : options.map((option) =>
+        Radio({
+          key: option.value,
+          name: props.name,
+          value: option.value,
+          groupValue: props.value,
+          label: option.label,
+          disabled: option.disabled,
+          onChange: props.onChange,
+        }),
+      );
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["options", "value", "onChange", "name", "gap"]),
+      role: "radiogroup",
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: props.direction === "horizontal" ? "row" : "column",
+        gap: px(props.gap ?? 8),
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function Slider({
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  disabled = false,
+  style = {},
+  ...props
+}) {
+  return {
+    tag: "input",
+    props: {
+      ...props,
+      type: "range",
+      min,
+      max,
+      step,
+      value,
+      disabled,
+      onInput: (event) => {
+        if (props.onInput) props.onInput(event);
+        if (onChange) onChange(Number(event.target.value));
+      },
+      style: cleanStyle({
+        width: "100%",
+        accentColor: luminaTheme.colors.primary,
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...style,
+      }),
+    },
+    children: [],
+    key: props.key,
+  };
+}
+
+export function Dropdown({
+  value,
+  options = [],
+  onChange,
+  placeholder,
+  disabled = false,
+  style = {},
+  ...props
+}) {
+  return {
+    tag: "select",
+    props: {
+      ...props,
+      value: value ?? "",
+      disabled,
+      onChange: (event) => {
+        if (onChange) onChange(event.target.value);
+      },
+      onFocus: (event) => {
+        if (props.onFocus) props.onFocus(event);
+        if (!event.defaultPrevented) applyFieldFocus(event, style);
+      },
+      onBlur: (event) => {
+        if (props.onBlur) props.onBlur(event);
+        if (!event.defaultPrevented) clearFieldFocus(event, style);
+      },
+      style: fieldStyle({
+        appearance: "auto",
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...style,
+      }),
+      className: ["lumina-field", props.className].filter(Boolean).join(" "),
+    },
+    children: [
+      placeholder
+        ? {
+            tag: "option",
+            props: { value: "", disabled: true },
+            children: [placeholder],
+          }
+        : null,
+      ...options.map((option) => ({
+        tag: "option",
+        props: {
+          value: option.value,
+          disabled: option.disabled,
+          selected: option.value === value,
+        },
+        children: [option.label],
+        key: option.value,
+      })),
+    ],
+    key: props.key,
+  };
+}
+
+export function TextArea({
+  value = "",
+  onChange,
+  rows = 4,
+  placeholder = "",
+  style = {},
+  ...props
+}) {
+  ensureFormStyles();
+  return {
+    tag: "textarea",
+    props: {
+      ...props,
+      value,
+      rows,
+      placeholder,
+      onInput: (event) => {
+        if (props.onInput) props.onInput(event);
+        if (onChange) onChange(event.target.value);
+      },
+      onFocus: (event) => {
+        if (props.onFocus) props.onFocus(event);
+        if (!event.defaultPrevented) applyFieldFocus(event, style);
+      },
+      onBlur: (event) => {
+        if (props.onBlur) props.onBlur(event);
+        if (!event.defaultPrevented) clearFieldFocus(event, style);
+      },
+      style: fieldStyle({
+        resize: "vertical",
+        minHeight: "96px",
+        lineHeight: 1.5,
+        ...style,
+      }),
+      className: ["lumina-field", props.className].filter(Boolean).join(" "),
+    },
+    children: [],
+    key: props.key,
+  };
+}