@neuralumina/lumina-ui 0.1.1

package/lumina-ui/widgets/animation.js

@@ -0,0 +1,112 @@
+import {
+  cleanStyle,
+  normalizeWidgetArgs,
+  omitProps,
+  px,
+} from "./utils.js";
+
+function transition(duration = 200, curve = "ease", properties = "all") {
+  return `${properties} ${duration}ms ${curve}`;
+}
+
+export function AnimatedContainer(
+  propsOrChildren = {},
+  maybeChildren = undefined,
+) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["duration", "curve", "transition"]),
+      style: cleanStyle({
+        transition: props.transition || transition(props.duration, props.curve),
+        width: px(props.width),
+        height: px(props.height),
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function AnimatedOpacity(
+  propsOrChildren = {},
+  maybeChildren = undefined,
+) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["opacity", "duration", "curve"]),
+      style: cleanStyle({
+        opacity: props.opacity ?? 1,
+        transition: transition(props.duration, props.curve, "opacity"),
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function AnimatedScale(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["scale", "duration", "curve", "origin"]),
+      style: cleanStyle({
+        transform: `scale(${props.scale ?? 1})`,
+        transformOrigin: props.origin || "center",
+        transition: transition(props.duration, props.curve, "transform"),
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function AnimatedSlide(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+  const offset = props.offset || { x: 0, y: 0 };
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["offset", "duration", "curve"]),
+      style: cleanStyle({
+        transform: `translate(${px(offset.x ?? 0)}, ${px(offset.y ?? 0)})`,
+        transition: transition(props.duration, props.curve, "transform"),
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function AnimatedSwitcher({
+  child,
+  duration = 180,
+  curve = "ease",
+  style = {},
+  ...props
+}) {
+  return {
+    tag: "div",
+    props: {
+      ...props,
+      style: cleanStyle({
+        transition: transition(duration, curve, "opacity, transform"),
+        ...style,
+      }),
+    },
+    children: [child],
+    key: props.key,
+  };
+}

package/lumina-ui/widgets/controls.js

@@ -0,0 +1,312 @@
+import {
+  applyFieldFocus,
+  clearFieldFocus,
+  ensureGlobalStyle,
+  fieldStyle,
+  luminaTheme,
+} from "./utils.js";
+
+function ensureControlStyles() {
+  ensureGlobalStyle(
+    "lumina-control-styles",
+    `
+.lumina-button:not(:disabled):hover {
+  filter: saturate(1.06);
+  transform: translateY(-1px);
+}
+.lumina-button:not(:disabled):active {
+  transform: translateY(0);
+}
+.lumina-button:focus-visible,
+.lumina-switch:focus-visible,
+.lumina-field:focus-visible {
+  outline: 2px solid ${luminaTheme.colors.focus};
+  outline-offset: 2px;
+}
+.lumina-field:hover:not(:disabled) {
+  border-color: ${luminaTheme.colors.primary} !important;
+}
+`,
+  );
+}
+
+function genId(prefix = "id") {
+  if (typeof crypto !== "undefined" && crypto.randomUUID)
+    return `${prefix}-${crypto.randomUUID()}`;
+  return `${prefix}-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+}
+
+export function Button({
+  text,
+  onClick,
+  variant = "primary",
+  disabled = false,
+  type = "button",
+  style = {},
+  ...props
+}) {
+  ensureControlStyles();
+  const variants = {
+    primary: {
+      backgroundColor: luminaTheme.colors.primary,
+      color: "white",
+      border: `1px solid ${luminaTheme.colors.primary}`,
+      boxShadow: "0 8px 18px rgba(37, 99, 235, 0.20)",
+    },
+    secondary: {
+      backgroundColor: luminaTheme.colors.surface,
+      color: luminaTheme.colors.primary,
+      border: `1px solid ${luminaTheme.colors.borderStrong}`,
+      boxShadow: luminaTheme.shadow.xs,
+    },
+    text: {
+      backgroundColor: "transparent",
+      color: luminaTheme.colors.primary,
+      border: "1px solid transparent",
+    },
+    danger: {
+      backgroundColor: luminaTheme.colors.danger,
+      color: "white",
+      border: `1px solid ${luminaTheme.colors.danger}`,
+      boxShadow: "0 8px 18px rgba(220, 38, 38, 0.18)",
+    },
+  };
+
+  const finalStyle = {
+    minHeight: "36px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    padding: "8px 14px",
+    borderRadius: luminaTheme.radius.md,
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontSize: "14px",
+    fontWeight: 700,
+    fontFamily: "inherit",
+    lineHeight: 1,
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    transition: `background-color ${luminaTheme.transition}, border-color ${luminaTheme.transition}, color ${luminaTheme.transition}, box-shadow ${luminaTheme.transition}, transform ${luminaTheme.transition}`,
+    opacity: disabled ? 0.5 : 1,
+    outline: "none",
+    ...variants[variant],
+    ...style,
+  };
+
+  return {
+    tag: "button",
+    props: {
+      type,
+      disabled,
+      onClick,
+      style: finalStyle,
+      ...props,
+      className: ["lumina-button", `lumina-button-${variant}`, props.className]
+        .filter(Boolean)
+        .join(" "),
+    },
+    children: [text],
+  };
+}
+
+export function Input({
+  value,
+  onChange,
+  onInput,
+  placeholder = "",
+  type = "text",
+  id,
+  style = {},
+  ...props
+}) {
+  ensureControlStyles();
+  const isCheckbox = type === "checkbox";
+  const finalId = id || genId("input");
+  const finalStyle = isCheckbox
+    ? {
+        width: "16px",
+        height: "16px",
+        accentColor: luminaTheme.colors.primary,
+        cursor: props.disabled ? "not-allowed" : "pointer",
+        ...style,
+      }
+    : fieldStyle(style);
+
+  return {
+    tag: "input",
+    props: {
+      id: finalId,
+      type,
+      ...(isCheckbox ? { checked: !!value } : { value: value ?? "" }),
+      placeholder: placeholder || undefined,
+      ...(isCheckbox
+        ? {
+            onChange: (e) => {
+              if (onChange) onChange(e.target.checked);
+            },
+          }
+        : {
+            onInput: (e) => {
+              if (onInput) onInput(e);
+              if (onChange) onChange(e.target.value);
+            },
+            onChange: (e) => {
+              if (onChange) onChange(e.target.value);
+            },
+          }),
+      onFocus: (e) => {
+        if (props.onFocus) props.onFocus(e);
+        if (e.defaultPrevented) return;
+        if (!isCheckbox) applyFieldFocus(e, style);
+      },
+      onBlur: (e) => {
+        if (props.onBlur) props.onBlur(e);
+        if (e.defaultPrevented) return;
+        if (!isCheckbox) clearFieldFocus(e, style);
+      },
+      style: finalStyle,
+      ...Object.fromEntries(
+        Object.entries(props).filter(
+          ([key]) => key !== "onFocus" && key !== "onBlur",
+        ),
+      ),
+      className: [
+        isCheckbox ? "lumina-checkbox-input" : "lumina-field",
+        props.className,
+      ]
+        .filter(Boolean)
+        .join(" "),
+    },
+    children: [],
+  };
+}
+
+export function TextField(props) {
+  return Input({ ...props, type: props.type || "text" });
+}
+
+export function Checkbox({
+  checked = false,
+  onChange,
+  label = "",
+  id,
+  disabled = false,
+  style = {},
+  ...props
+}) {
+  ensureControlStyles();
+  const finalId = id || genId("checkbox");
+
+  return {
+    tag: "label",
+    props: {
+      htmlFor: finalId,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        color: luminaTheme.colors.text,
+        fontSize: "14px",
+        lineHeight: 1.4,
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.6 : 1,
+        ...style,
+      },
+      ...props,
+    },
+    children: [
+      {
+        tag: "input",
+        props: {
+          id: finalId,
+          type: "checkbox",
+          checked: !!checked,
+          disabled,
+          onChange: (e) => {
+            if (!disabled && onChange) onChange(e.target.checked);
+          },
+          style: {
+            width: "16px",
+            height: "16px",
+            accentColor: luminaTheme.colors.primary,
+            cursor: disabled ? "not-allowed" : "pointer",
+          },
+        },
+        children: [],
+      },
+      label || "",
+    ],
+  };
+}
+
+export function Switch({
+  value = false,
+  onChange,
+  ariaLabel,
+  disabled = false,
+  style = {},
+  ...props
+}) {
+  ensureControlStyles();
+  const base = {
+    width: "46px",
+    height: "24px",
+    borderRadius: luminaTheme.radius.pill,
+    backgroundColor: value ? luminaTheme.colors.primary : luminaTheme.colors.track,
+    border: `1px solid ${value ? luminaTheme.colors.primary : luminaTheme.colors.borderStrong}`,
+    cursor: disabled ? "not-allowed" : "pointer",
+    position: "relative",
+    transition: `background-color ${luminaTheme.transition}, border-color ${luminaTheme.transition}, box-shadow ${luminaTheme.transition}`,
+    outline: "none",
+    boxShadow: value ? "0 8px 18px rgba(37, 99, 235, 0.16)" : "none",
+    opacity: disabled ? 0.6 : 1,
+    ...style,
+  };
+
+  return {
+    tag: "button",
+    props: {
+      ...props,
+      role: "switch",
+      type: props.type || "button",
+      "aria-checked": !!value,
+      "aria-label": ariaLabel || "toggle",
+      disabled,
+      tabIndex: 0,
+      onClick: (event) => {
+        if (props.onClick) props.onClick(event);
+        if (!disabled && onChange) onChange(!value);
+      },
+      onKeyDown: (e) => {
+        if (props.onKeyDown) props.onKeyDown(e);
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          if (!disabled && onChange) onChange(!value);
+        }
+      },
+      style: base,
+      className: ["lumina-switch", props.className].filter(Boolean).join(" "),
+    },
+    children: [
+      {
+        tag: "div",
+        props: {
+          style: {
+            width: "20px",
+            height: "20px",
+            borderRadius: "10px",
+            backgroundColor: luminaTheme.colors.surface,
+            position: "absolute",
+            top: "1px",
+            left: value ? "22px" : "1px",
+            transition: `left ${luminaTheme.transition}, transform ${luminaTheme.transition}`,
+            boxShadow: "0 2px 6px rgba(15, 23, 42, 0.22)",
+          },
+        },
+        children: [],
+      },
+    ],
+  };
+}