@altruist03/ui 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,731 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useState } from 'react';
+
+// src/utils/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/utils/resolve.ts
+var COLOR_VARS = {
+  primary: "var(--al-color-primary)",
+  secondary: "var(--al-color-secondary)",
+  danger: "var(--al-color-danger)",
+  success: "var(--al-color-success)",
+  warning: "var(--al-color-warning)",
+  text: "var(--al-color-text)",
+  textMuted: "var(--al-color-text-muted)",
+  border: "var(--al-color-border)",
+  surface: "var(--al-color-surface)",
+  surfaceMuted: "var(--al-color-surface-muted)"
+};
+var FONT_SIZE_VARS = {
+  xs: "var(--al-font-size-xs)",
+  sm: "var(--al-font-size-sm)",
+  md: "var(--al-font-size-md)",
+  lg: "var(--al-font-size-lg)"
+};
+function resolveColor(value) {
+  if (!value) return void 0;
+  return COLOR_VARS[value] ?? value;
+}
+function resolveFontSize(value) {
+  if (value == null || value === "") return void 0;
+  if (typeof value === "number") return `${value}px`;
+  return FONT_SIZE_VARS[value] ?? value;
+}
+function solidForeground(color) {
+  if (!color || color === "primary") return "var(--al-color-on-primary)";
+  if (color === "secondary") return "var(--al-color-on-secondary)";
+  return "#ffffff";
+}
+function controlVars(color) {
+  const accent = resolveColor(color);
+  if (!accent) return {};
+  return {
+    "--al-control-accent": accent,
+    "--al-control-border": accent
+  };
+}
+function Badge({
+  color = "primary",
+  variant = "soft",
+  fontSize,
+  fontFamily,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx("al-badge", className),
+      "data-variant": variant,
+      style: {
+        "--al-badge-color": resolveColor(color),
+        fontSize: resolveFontSize(fontSize),
+        fontFamily,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+var Button = forwardRef(function Button2({
+  variant = "solid",
+  color = "primary",
+  textColor,
+  size = "md",
+  fontSize,
+  fontFamily,
+  fullWidth = false,
+  loading = false,
+  leftIcon,
+  rightIcon,
+  className,
+  style,
+  disabled,
+  children,
+  type = "button",
+  ...rest
+}, ref) {
+  const accent = resolveColor(color);
+  const vars = {
+    "--al-btn-bg": accent,
+    ...variant === "solid" ? { "--al-btn-fg": textColor ? resolveColor(textColor) : solidForeground(color) } : null,
+    ...fontSize != null ? { fontSize: resolveFontSize(fontSize) } : null,
+    ...fontFamily ? { fontFamily } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      className: cx("al-btn", className),
+      "data-variant": variant,
+      "data-size": size,
+      "data-full-width": fullWidth ? "true" : void 0,
+      style: vars,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx("span", { className: "al-spinner", "aria-hidden": "true" }) : leftIcon,
+        children,
+        rightIcon
+      ]
+    }
+  );
+});
+function Card({
+  title,
+  description,
+  footer,
+  padding = "md",
+  fontSize,
+  fontFamily,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const cardStyle = {
+    ...fontSize != null ? { fontSize: resolveFontSize(fontSize) } : null,
+    ...fontFamily ? { fontFamily } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cx("al-card", className), "data-padding": padding, style: cardStyle, ...rest, children: [
+    title || description ? /* @__PURE__ */ jsxs("header", { className: "al-card-header", children: [
+      title ? /* @__PURE__ */ jsx("h2", { className: "al-card-title", children: title }) : null,
+      description ? /* @__PURE__ */ jsx("p", { className: "al-card-description", children: description }) : null
+    ] }) : null,
+    children,
+    footer ? /* @__PURE__ */ jsx("footer", { className: "al-card-footer", children: footer }) : null
+  ] });
+}
+var Checkbox = forwardRef(function Checkbox2({ label, description, error, fontSize, fontFamily, color, className, style, id, ...rest }, ref) {
+  const autoId = useId();
+  const checkboxId = id ?? autoId;
+  const errorId = `${checkboxId}-error`;
+  const descriptionId = `${checkboxId}-description`;
+  const accent = resolveColor(color);
+  const describedBy = [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: "al-checkbox-field", style: fontFamily ? { fontFamily } : void 0, children: [
+    /* @__PURE__ */ jsxs("label", { className: "al-checkbox", htmlFor: checkboxId, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id: checkboxId,
+          type: "checkbox",
+          className: cx("al-checkbox-input", className),
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": describedBy || void 0,
+          style: {
+            accentColor: accent,
+            ...style
+          },
+          ...rest
+        }
+      ),
+      label || description ? /* @__PURE__ */ jsxs("span", { className: "al-checkbox-copy", style: { fontSize: resolveFontSize(fontSize) }, children: [
+        label ? /* @__PURE__ */ jsx("span", { className: "al-checkbox-label", children: label }) : null,
+        description ? /* @__PURE__ */ jsx("span", { id: descriptionId, className: "al-checkbox-description", children: description }) : null
+      ] }) : null
+    ] }),
+    error ? /* @__PURE__ */ jsx("p", { id: errorId, className: "al-field-error", children: error }) : null
+  ] });
+});
+function Field({
+  id,
+  label,
+  required,
+  helperText,
+  error,
+  messageId,
+  fontFamily,
+  children,
+  className
+}) {
+  const describedBy = messageId ?? `${id}-message`;
+  return /* @__PURE__ */ jsxs("div", { className: cx("al-field", className), style: fontFamily ? { fontFamily } : void 0, children: [
+    label ? /* @__PURE__ */ jsxs("label", { className: "al-field-label", htmlFor: id, children: [
+      label,
+      required ? /* @__PURE__ */ jsx("span", { className: "al-field-required", children: "*" }) : null
+    ] }) : null,
+    children,
+    error ? /* @__PURE__ */ jsx("p", { id: describedBy, className: "al-field-error", children: error }) : helperText ? /* @__PURE__ */ jsx("p", { id: describedBy, className: "al-field-helper", children: helperText }) : null
+  ] });
+}
+var FileInput = forwardRef(function FileInput2({
+  label,
+  helperText,
+  error,
+  emptyText = "Drop a file here, or browse",
+  buttonLabel = "Browse",
+  fontSize,
+  fontFamily,
+  color,
+  className,
+  style,
+  id,
+  required,
+  multiple,
+  onChange,
+  ...rest
+}, ref) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const messageId = `${inputId}-message`;
+  const [names, setNames] = useState([]);
+  const [dragging, setDragging] = useState(false);
+  function remember(files) {
+    setNames(Array.from(files ?? []).map((file) => file.name));
+  }
+  function keepDropAlive(event) {
+    event.preventDefault();
+    setDragging(true);
+  }
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      id: inputId,
+      label,
+      required,
+      helperText,
+      error,
+      messageId,
+      fontFamily,
+      className,
+      children: /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: cx("al-file", dragging && "is-dragging"),
+          htmlFor: inputId,
+          "data-invalid": error ? "true" : void 0,
+          style: {
+            ...controlVars(color),
+            fontSize: resolveFontSize(fontSize),
+            ...style
+          },
+          onDragEnter: keepDropAlive,
+          onDragOver: keepDropAlive,
+          onDragLeave: () => setDragging(false),
+          onDrop: () => setDragging(false),
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                id: inputId,
+                className: "al-file-input",
+                type: "file",
+                multiple,
+                required,
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": error || helperText ? messageId : void 0,
+                onChange: (event) => {
+                  remember(event.target.files);
+                  setDragging(false);
+                  onChange?.(event);
+                },
+                ...rest
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "al-file-copy", children: [
+              /* @__PURE__ */ jsx("span", { className: "al-file-title", children: names.length > 0 ? `${names.length} file${names.length === 1 ? "" : "s"} selected` : emptyText }),
+              names.length > 0 ? /* @__PURE__ */ jsx("span", { className: "al-file-names", children: names.join(", ") }) : /* @__PURE__ */ jsx("span", { className: "al-file-names", children: "PNG, JPG, or PDF" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "al-file-button", children: buttonLabel })
+          ]
+        }
+      )
+    }
+  );
+});
+var FloatingInput = forwardRef(function FloatingInput2({
+  label,
+  placeholder,
+  helperText,
+  error,
+  size = "md",
+  fontSize,
+  fontFamily,
+  color,
+  className,
+  style,
+  id,
+  required,
+  value,
+  defaultValue,
+  onChange,
+  ...rest
+}, ref) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const messageId = `${inputId}-message`;
+  const [localFilled, setLocalFilled] = useState(() => String(value ?? defaultValue ?? "").length > 0);
+  const filled = value != null ? String(value).length > 0 : localFilled;
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      id: inputId,
+      required,
+      helperText,
+      error,
+      messageId,
+      fontFamily,
+      className,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "al-float",
+          "data-size": size,
+          "data-filled": filled ? "true" : "false",
+          "data-invalid": error ? "true" : void 0,
+          style: controlVars(color),
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                id: inputId,
+                className: "al-control al-float-input",
+                placeholder: placeholder ?? " ",
+                required,
+                ...value != null ? { value } : { defaultValue },
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": error || helperText ? messageId : void 0,
+                style: {
+                  fontSize: resolveFontSize(fontSize),
+                  ...style
+                },
+                onChange: (event) => {
+                  if (value == null) setLocalFilled(event.target.value.length > 0);
+                  onChange?.(event);
+                },
+                ...rest
+              }
+            ),
+            /* @__PURE__ */ jsxs("label", { className: "al-float-label", htmlFor: inputId, children: [
+              label,
+              required ? /* @__PURE__ */ jsx("span", { className: "al-field-required", children: "*" }) : null
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+var Input = forwardRef(function Input2({
+  label,
+  helperText,
+  error,
+  size = "md",
+  fontSize,
+  fontFamily,
+  color,
+  leftIcon,
+  rightIcon,
+  className,
+  style,
+  id,
+  required,
+  ...rest
+}, ref) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const messageId = `${inputId}-message`;
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      id: inputId,
+      label,
+      required,
+      helperText,
+      error,
+      messageId,
+      fontFamily,
+      children: /* @__PURE__ */ jsxs("div", { className: cx("al-control-wrap", leftIcon ? "has-left" : void 0, rightIcon ? "has-right" : void 0), children: [
+        leftIcon ? /* @__PURE__ */ jsx("span", { className: "al-control-icon left", children: leftIcon }) : null,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            className: cx("al-control", className),
+            "data-size": size,
+            required,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": error || helperText ? messageId : void 0,
+            style: {
+              ...controlVars(color),
+              fontSize: resolveFontSize(fontSize),
+              ...style
+            },
+            ...rest
+          }
+        ),
+        rightIcon ? /* @__PURE__ */ jsx("span", { className: "al-control-icon right", children: rightIcon }) : null
+      ] })
+    }
+  );
+});
+var Select = forwardRef(function Select2({
+  label,
+  helperText,
+  error,
+  placeholder,
+  options,
+  size = "md",
+  fontSize,
+  fontFamily,
+  color,
+  className,
+  style,
+  id,
+  required,
+  ...rest
+}, ref) {
+  const autoId = useId();
+  const selectId = id ?? autoId;
+  const messageId = `${selectId}-message`;
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      id: selectId,
+      label,
+      required,
+      helperText,
+      error,
+      messageId,
+      fontFamily,
+      children: /* @__PURE__ */ jsxs(
+        "select",
+        {
+          ref,
+          id: selectId,
+          className: cx("al-control", "al-select", className),
+          "data-size": size,
+          required,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error || helperText ? messageId : void 0,
+          style: {
+            ...controlVars(color),
+            fontSize: resolveFontSize(fontSize),
+            ...style
+          },
+          ...rest,
+          children: [
+            placeholder ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
+            options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+          ]
+        }
+      )
+    }
+  );
+});
+function cellValue(row, key) {
+  const value = row[key];
+  if (value == null || value === "") return "\u2014";
+  if (typeof value === "string" || typeof value === "number") return value;
+  return String(value);
+}
+function Table({
+  columns,
+  rows,
+  getRowKey,
+  caption,
+  emptyLabel = "No records",
+  size = "md",
+  striped = false,
+  fontSize,
+  fontFamily,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "al-table-wrap", children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: cx("al-table", className),
+      "data-size": size,
+      "data-striped": striped ? "true" : void 0,
+      style: {
+        fontSize: resolveFontSize(fontSize),
+        fontFamily,
+        ...style
+      },
+      children: [
+        caption ? /* @__PURE__ */ jsx("caption", { className: "al-table-caption", children: caption }) : null,
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", { scope: "col", style: { textAlign: column.align, width: column.width }, children: column.header }, column.key)) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "al-table-empty", colSpan: Math.max(columns.length, 1), children: emptyLabel }) }) : rows.map((row, index) => /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", { style: { textAlign: column.align }, children: column.render ? column.render(row) : cellValue(row, column.key) }, column.key)) }, getRowKey(row, index))) })
+      ]
+    }
+  ) });
+}
+var Textarea = forwardRef(function Textarea2({
+  label,
+  helperText,
+  error,
+  fontSize,
+  fontFamily,
+  color,
+  className,
+  style,
+  id,
+  required,
+  rows = 4,
+  ...rest
+}, ref) {
+  const autoId = useId();
+  const textareaId = id ?? autoId;
+  const messageId = `${textareaId}-message`;
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      id: textareaId,
+      label,
+      required,
+      helperText,
+      error,
+      messageId,
+      fontFamily,
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          id: textareaId,
+          className: cx("al-control", "al-textarea", className),
+          rows,
+          required,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error || helperText ? messageId : void 0,
+          style: {
+            ...controlVars(color),
+            fontSize: resolveFontSize(fontSize),
+            ...style
+          },
+          ...rest
+        }
+      )
+    }
+  );
+});
+function Accordion({
+  items,
+  allowMultiple = false,
+  defaultOpenIds = [],
+  color,
+  fontSize,
+  fontFamily,
+  className,
+  style
+}) {
+  const [openIds, setOpenIds] = useState(defaultOpenIds);
+  const accent = resolveColor(color);
+  function toggle(id) {
+    setOpenIds((current) => {
+      const isOpen = current.includes(id);
+      if (allowMultiple) {
+        return isOpen ? current.filter((item) => item !== id) : [...current, id];
+      }
+      return isOpen ? [] : [id];
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: className ? "accordion " + className : "accordion",
+      style: { fontSize: resolveFontSize(fontSize), fontFamily, ...style },
+      children: items.map((item) => {
+        const open = openIds.includes(item.id);
+        const panelId = `accordion-${item.id}-panel`;
+        const buttonId = `accordion-${item.id}-button`;
+        return /* @__PURE__ */ jsxs("div", { className: "accordion-item", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: buttonId,
+              type: "button",
+              className: "accordion-trigger",
+              "aria-expanded": open,
+              "aria-controls": panelId,
+              style: accent ? { color: accent } : void 0,
+              onClick: () => toggle(item.id),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: item.title }),
+                /* @__PURE__ */ jsx("span", { className: "accordion-chevron", "data-open": open ? "true" : "false", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          open ? /* @__PURE__ */ jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: "accordion-panel", children: item.content }) : null
+        ] }, item.id);
+      })
+    }
+  );
+}
+
+// src/theme/css-variables.ts
+function themeToCssVars(theme) {
+  return {
+    "--al-color-primary": theme.colors.primary,
+    "--al-color-primary-hover": theme.colors.primaryHover,
+    "--al-color-on-primary": theme.colors.onPrimary,
+    "--al-color-secondary": theme.colors.secondary,
+    "--al-color-on-secondary": theme.colors.onSecondary,
+    "--al-color-danger": theme.colors.danger,
+    "--al-color-success": theme.colors.success,
+    "--al-color-warning": theme.colors.warning,
+    "--al-color-text": theme.colors.text,
+    "--al-color-text-muted": theme.colors.textMuted,
+    "--al-color-surface": theme.colors.surface,
+    "--al-color-surface-muted": theme.colors.surfaceMuted,
+    "--al-color-border": theme.colors.border,
+    "--al-color-focus": theme.colors.focus,
+    "--al-font-family": theme.fontFamily,
+    "--al-font-size-xs": theme.fontSize.xs,
+    "--al-font-size-sm": theme.fontSize.sm,
+    "--al-font-size-md": theme.fontSize.md,
+    "--al-font-size-lg": theme.fontSize.lg,
+    "--al-radius-sm": theme.radius.sm,
+    "--al-radius-md": theme.radius.md,
+    "--al-radius-lg": theme.radius.lg,
+    "--al-space-sm": theme.spacing.sm,
+    "--al-space-md": theme.spacing.md,
+    "--al-space-lg": theme.spacing.lg
+  };
+}
+
+// src/theme/default-theme.ts
+var altruistTheme = {
+  colors: {
+    primary: "#0b6b4f",
+    primaryHover: "#095c44",
+    onPrimary: "#ffffff",
+    secondary: "#1f2937",
+    onSecondary: "#ffffff",
+    danger: "#b42318",
+    success: "#067647",
+    warning: "#b54708",
+    text: "#1c2430",
+    textMuted: "#5c6778",
+    surface: "#ffffff",
+    surfaceMuted: "#f5f7fa",
+    border: "#d8dee8",
+    focus: "#0b6b4f"
+  },
+  fontFamily: '"Segoe UI", "Noto Sans", sans-serif',
+  fontSize: {
+    xs: "12px",
+    sm: "13px",
+    md: "14px",
+    lg: "16px"
+  },
+  radius: {
+    sm: "6px",
+    md: "8px",
+    lg: "12px"
+  },
+  spacing: {
+    sm: "8px",
+    md: "12px",
+    lg: "16px"
+  }
+};
+
+// src/theme/presets.ts
+var indigoTheme = {
+  colors: {
+    primary: "#3730a3",
+    primaryHover: "#312e81",
+    focus: "#3730a3"
+  }
+};
+var darkTheme = {
+  colors: {
+    primary: "#3ddc97",
+    primaryHover: "#2fc588",
+    onPrimary: "#06281c",
+    secondary: "#d1d5db",
+    onSecondary: "#111827",
+    danger: "#ff8b80",
+    success: "#6ee7b7",
+    warning: "#fbbf24",
+    text: "#e8edf5",
+    textMuted: "#a3b0c2",
+    surface: "#161b22",
+    surfaceMuted: "#0f141b",
+    border: "#2d3746",
+    focus: "#3ddc97"
+  }
+};
+function mergeTheme(base = altruistTheme, override) {
+  if (!override) return base;
+  return {
+    ...base,
+    ...override,
+    colors: { ...base.colors, ...override.colors },
+    fontSize: { ...base.fontSize, ...override.fontSize },
+    radius: { ...base.radius, ...override.radius },
+    spacing: { ...base.spacing, ...override.spacing }
+  };
+}
+function ThemeProvider({ theme, children, className, style }) {
+  const merged = mergeTheme(altruistTheme, theme);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: className ? `al-theme ${className}` : "al-theme",
+      style: { ...themeToCssVars(merged), display: "contents", ...style },
+      children
+    }
+  );
+}
+
+export { Accordion, Badge, Button, Card, Checkbox, Field, FileInput, FloatingInput, Input, Select, Table, Textarea, ThemeProvider, altruistTheme, darkTheme, indigoTheme, mergeTheme, themeToCssVars };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map