@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/appearance.js

@@ -0,0 +1,60 @@
+function appearanceDefaults(designTheme = "minimal") {
+  const blue = designTheme === "blue";
+  return {
+    designTheme,
+    mode: "system",
+    accent: blue ? "#5269b6" : "#303030",
+    lightBackground: "#ffffff",
+    darkBackground: blue ? "#19212e" : "#1e1e1f",
+    lightForeground: blue ? "#263149" : "#202020",
+    darkForeground: blue ? "#e0e7f2" : "#f4f4f5",
+    font: "system",
+    density: "comfortable",
+    radius: blue ? 9 : 10,
+    motion: true,
+    toastPosition: "bottom-center",
+    tooltipPlacement: "top"
+  };
+}
+function normalizeAppearance(input, fallback = "minimal") {
+  const x = input && typeof input === "object" ? input : {};
+  const d = appearanceDefaults(
+    x.designTheme === "minimal" || x.designTheme === "blue" ? x.designTheme : fallback
+  );
+  if (["light", "dark", "system"].includes(String(x.mode)))
+    d.mode = x.mode;
+  for (const key of [
+    "accent",
+    "lightBackground",
+    "darkBackground",
+    "lightForeground",
+    "darkForeground"
+  ])
+    if (typeof x[key] === "string" && /^#[\da-f]{6}$/i.test(x[key]))
+      d[key] = x[key];
+  if (["system", "Segoe UI", "Microsoft YaHei UI", "sans-serif"].includes(
+    String(x.font)
+  ))
+    d.font = x.font;
+  if (x.density === "comfortable" || x.density === "compact")
+    d.density = x.density;
+  if (typeof x.radius === "number" && Number.isFinite(x.radius))
+    d.radius = Math.min(20, Math.max(0, x.radius));
+  if (typeof x.motion === "boolean") d.motion = x.motion;
+  if ([
+    "top-left",
+    "top-center",
+    "top-right",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right"
+  ].includes(String(x.toastPosition)))
+    d.toastPosition = x.toastPosition;
+  if (["top", "bottom", "left", "right"].includes(String(x.tooltipPlacement)))
+    d.tooltipPlacement = x.tooltipPlacement;
+  return d;
+}
+export {
+  appearanceDefaults,
+  normalizeAppearance
+};

package/components/characterCatalog.d.ts

@@ -0,0 +1,9 @@
+import type { CharacterGroup } from "./CharacterPicker";
+type Kind = "emoji" | "symbols";
+export declare function useCharacterCatalog(kind: Kind): {
+    groups: CharacterGroup[];
+    loading: boolean;
+    error: boolean;
+    retry: () => void;
+};
+export {};

package/components/characterCatalog.js

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+const emojiUrl = new URL("../assets/emoji.json", import.meta.url).href;
+const symbolsUrl = new URL("../assets/symbols.json", import.meta.url).href;
+import metadata from "../assets/character-metadata.json";
+const cache = {}, pending = {};
+const labels = metadata.groups, aliases = metadata.aliases;
+function load(kind) {
+  return pending[kind] ||= fetch(kind === "emoji" ? emojiUrl : symbolsUrl).then((r) => {
+    if (!r.ok) throw Error("\u5B57\u7B26\u52A0\u8F7D\u5931\u8D25");
+    return r.json();
+  }).then((rows) => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const [glyph, title, group, detail] of rows) {
+      if (!glyph.trim()) continue;
+      let item = groups.get(group);
+      if (!item) {
+        item = { name: labels[group]?.[0] || group, items: [] };
+        groups.set(group, item);
+      }
+      item.items.push([
+        glyph,
+        title,
+        [group, detail || "", aliases[glyph] || ""].join(" ")
+      ]);
+    }
+    return cache[kind] = [...groups.values()];
+  }).catch((e) => {
+    delete pending[kind];
+    throw e;
+  });
+}
+function useCharacterCatalog(kind) {
+  const [groups, setGroups] = useState(cache[kind]), [error, setError] = useState(false), [revision, setRevision] = useState(0);
+  useEffect(() => {
+    let active = true;
+    setError(false);
+    load(kind).then((data) => {
+      if (active) setGroups(data);
+    }).catch(() => {
+      if (active) setError(true);
+    });
+    return () => {
+      active = false;
+    };
+  }, [kind, revision]);
+  return {
+    groups: groups || [],
+    loading: !groups && !error,
+    error,
+    retry: () => setRevision((n) => n + 1)
+  };
+}
+export {
+  useCharacterCatalog
+};

package/components/color.d.ts

@@ -0,0 +1,7 @@
+export type HSV = {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare function toHSV(hex: string): HSV;
+export declare function toHex({ h, s, v }: HSV): string;

package/components/color.js

@@ -0,0 +1,18 @@
+function toHSV(hex) {
+  const [r, g, b] = [1, 3, 5].map(
+    (i) => parseInt(hex.slice(i, i + 2), 16) / 255
+  ), max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
+  let h = !d ? 0 : max === r ? (g - b) / d % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+  return { h: (h * 60 + 360) % 360, s: max ? d / max : 0, v: max };
+}
+function toHex({ h, s, v }) {
+  const f = (n) => {
+    const k = (n + h / 60) % 6;
+    return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255).toString(16).padStart(2, "0");
+  };
+  return "#" + f(5) + f(3) + f(1);
+}
+export {
+  toHSV,
+  toHex
+};

package/components/contribution.d.ts

@@ -0,0 +1,57 @@
+export type ContributionDay = {
+    date: string;
+    count: number;
+    level?: 0 | 1 | 2 | 3 | 4;
+};
+export declare const calendarKey: (date: Date) => string;
+export declare function parseCalendarDay(key: string): Date | undefined;
+export declare function buildContributionCalendar({ data, year, startDate, endDate, weekStartsOn, today, allowFuture, thresholds, }: {
+    data: ContributionDay[];
+    year: number;
+    startDate?: string;
+    endDate?: string;
+    weekStartsOn?: 0 | 1;
+    today: string;
+    allowFuture?: boolean;
+    thresholds?: [number, number, number, number];
+}): {
+    valid: false;
+    cells: never[];
+    dates: never[];
+    weeks: number;
+    total: number;
+    months: never[];
+} | {
+    valid: true;
+    cells: {
+        date: string;
+        outside: boolean;
+        count: number;
+        level: number;
+        future: boolean;
+        missing: boolean;
+        index: number;
+        row: number;
+        column: number;
+    }[];
+    dates: {
+        date: string;
+        outside: boolean;
+        count: number;
+        level: number;
+        future: boolean;
+        missing: boolean;
+        index: number;
+        row: number;
+        column: number;
+    }[];
+    weeks: number;
+    total: number;
+    months: {
+        key: string;
+        column: number;
+        month: number;
+        year: number;
+    }[];
+};
+export type ContributionCellData = ReturnType<typeof buildContributionCalendar>["cells"][number];

package/components/contribution.js

@@ -0,0 +1,86 @@
+const calendarKey = (date) => date.toISOString().slice(0, 10);
+function parseCalendarDay(key) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(key)) return void 0;
+  const date = /* @__PURE__ */ new Date(key + "T00:00:00Z");
+  return Number.isFinite(date.getTime()) && calendarKey(date) === key ? date : void 0;
+}
+function buildContributionCalendar({
+  data,
+  year,
+  startDate,
+  endDate,
+  weekStartsOn = 1,
+  today,
+  allowFuture = false,
+  thresholds
+}) {
+  const start = parseCalendarDay(startDate || year + "-01-01"), end = parseCalendarDay(endDate || year + "-12-31");
+  if (!start || !end || end < start || end.getTime() - start.getTime() > 366 * 864e5 * 5)
+    return {
+      valid: false,
+      cells: [],
+      dates: [],
+      weeks: 0,
+      total: 0,
+      months: []
+    };
+  const entries = /* @__PURE__ */ new Map();
+  for (const day of data) {
+    if (!parseCalendarDay(day.date)) continue;
+    const old = entries.get(day.date);
+    entries.set(day.date, {
+      ...day,
+      count: Math.max(0, Number.isFinite(day.count) ? day.count : 0) + (old?.count || 0)
+    });
+  }
+  const leading = (start.getUTCDay() - weekStartsOn + 7) % 7, days = Math.round((end.getTime() - start.getTime()) / 864e5) + 1, weeks = Math.ceil((leading + days) / 7), first = start.getTime() - leading * 864e5, max = Math.max(
+    1,
+    ...[...entries.values()].filter(
+      (day) => day.date >= calendarKey(start) && day.date <= calendarKey(end)
+    ).map((day) => day.count)
+  );
+  const cells = Array.from({ length: weeks * 7 }, (_, index) => {
+    const date = new Date(first + index * 864e5), key = calendarKey(date), outside = date < start || date > end, entry = entries.get(key), future = !allowFuture && key > today, count = future ? 0 : entry?.count || 0;
+    let level = count ? Math.min(4, Math.ceil(count / max * 4)) : 0;
+    if (entry?.level !== void 0)
+      level = Math.max(0, Math.min(4, entry.level));
+    if (thresholds)
+      level = count ? thresholds.filter((threshold) => count >= threshold).length : 0;
+    if (future) level = 0;
+    return {
+      date: key,
+      outside,
+      count,
+      level,
+      future,
+      missing: !entry,
+      index,
+      row: index % 7,
+      column: Math.floor(index / 7)
+    };
+  });
+  const dates = cells.filter((day) => !day.outside), months = [];
+  for (const day of dates) {
+    const month = day.date.slice(0, 7);
+    if (months.at(-1)?.key !== month)
+      months.push({
+        key: month,
+        column: day.column,
+        month: Number(month.slice(5)),
+        year: Number(month.slice(0, 4))
+      });
+  }
+  return {
+    valid: true,
+    cells,
+    dates,
+    weeks,
+    total: dates.reduce((n, day) => n + day.count, 0),
+    months
+  };
+}
+export {
+  buildContributionCalendar,
+  calendarKey,
+  parseCalendarDay
+};

package/components/dateConstraints.d.ts

@@ -0,0 +1,13 @@
+export type DateRange = [string, string];
+export type DateConstraints = {
+    minDate?: string;
+    maxDate?: string;
+    disabledDate?(date: string): boolean;
+};
+export declare const dateKey: (date: Date) => string;
+export declare function calendarDate(year: number, month: number, day?: number): Date;
+export declare function parseDate(value: string): Date | null;
+export declare const readDate: (value: string) => Date;
+export declare function isDateAllowed(value: string, { minDate, maxDate, disabledDate }?: DateConstraints): boolean;
+export declare function boundedDate(value: string, { minDate, maxDate }?: DateConstraints): string;
+export declare function isRangeAllowed(range: DateRange, constraints: DateConstraints): boolean;

package/components/dateConstraints.js

@@ -0,0 +1,44 @@
+const dateKey = (date) => `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+function calendarDate(year, month, day = 1) {
+  const date = /* @__PURE__ */ new Date(0);
+  date.setHours(12, 0, 0, 0);
+  date.setFullYear(year, month, day);
+  return date;
+}
+function parseDate(value) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value) || value.slice(0, 4) === "0000")
+    return null;
+  const [year, month, day] = value.split("-").map(Number), date = calendarDate(year, month - 1, day);
+  return dateKey(date) === value ? date : null;
+}
+const readDate = (value) => parseDate(value.slice(0, 10)) || /* @__PURE__ */ new Date();
+function isDateAllowed(value, { minDate, maxDate, disabledDate } = {}) {
+  return !!parseDate(value) && !(minDate && parseDate(minDate) && value < minDate) && !(maxDate && parseDate(maxDate) && value > maxDate) && !disabledDate?.(value);
+}
+function boundedDate(value, { minDate, maxDate } = {}) {
+  let next = parseDate(value) ? value : dateKey(/* @__PURE__ */ new Date());
+  if (minDate && parseDate(minDate) && next < minDate) next = minDate;
+  if (maxDate && parseDate(maxDate) && next > maxDate) next = maxDate;
+  return next;
+}
+function isRangeAllowed(range, constraints) {
+  const [start, end] = range;
+  if (start > end || !isDateAllowed(start, constraints) || !isDateAllowed(end, constraints))
+    return false;
+  if (!constraints.disabledDate) return true;
+  const cursor = parseDate(start);
+  while (dateKey(cursor) < end) {
+    cursor.setDate(cursor.getDate() + 1);
+    if (!isDateAllowed(dateKey(cursor), constraints)) return false;
+  }
+  return true;
+}
+export {
+  boundedDate,
+  calendarDate,
+  dateKey,
+  isDateAllowed,
+  isRangeAllowed,
+  parseDate,
+  readDate
+};

package/components/field.d.ts

@@ -0,0 +1,58 @@
+import type { AriaAttributes } from "react";
+export type FieldOptions = {
+    id?: string;
+    name?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string;
+    hint?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+};
+export type FieldState = {
+    id: string;
+    name?: string;
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    error?: string;
+    hint?: string;
+    descriptionId?: string;
+    invalid: AriaAttributes["aria-invalid"];
+};
+export declare const FieldContext: import("react").Context<FieldState | null>;
+export declare function fieldInputProps(field: FieldState): {
+    id: string;
+    name: string | undefined;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    "aria-invalid": "false" | "grammar" | "spelling" | "true" | boolean | undefined;
+    "aria-describedby": string | undefined;
+};
+export declare function fieldTriggerProps(field: FieldState): {
+    id: string;
+    disabled: boolean;
+    "aria-label": string;
+    "aria-required": true | undefined;
+    "aria-readonly": true | undefined;
+    "aria-invalid": "false" | "grammar" | "spelling" | "true" | boolean | undefined;
+    "aria-describedby": string | undefined;
+};
+export declare const joinIds: (...values: (string | undefined)[]) => string | undefined;
+export declare function useFieldControl(options: FieldOptions): {
+    id: string;
+    name: string | undefined;
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    error: string | undefined;
+    hint: string | undefined;
+    descriptionId: string | undefined;
+    invalid: "false" | "grammar" | "spelling" | "true" | boolean;
+    wrapped: boolean;
+};

package/components/field.js

@@ -0,0 +1,57 @@
+import { createContext, useContext, useId } from "react";
+const FieldContext = createContext(null);
+function fieldInputProps(field) {
+  return {
+    id: field.id,
+    name: field.name,
+    required: field.required,
+    disabled: field.disabled,
+    readOnly: field.readOnly,
+    "aria-invalid": field.invalid,
+    "aria-describedby": field.descriptionId
+  };
+}
+function fieldTriggerProps(field) {
+  return {
+    id: field.id,
+    disabled: field.disabled,
+    "aria-label": field.label,
+    "aria-required": field.required || void 0,
+    "aria-readonly": field.readOnly || void 0,
+    "aria-invalid": field.invalid,
+    "aria-describedby": field.descriptionId
+  };
+}
+const joinIds = (...values) => [
+  ...new Set(
+    values.flatMap((value) => value?.split(/\s+/).filter(Boolean) || [])
+  )
+].join(" ") || void 0;
+function useFieldControl(options) {
+  const inherited = useContext(FieldContext), generated = useId(), id = options.id || inherited?.id || generated, error = options.error ?? inherited?.error, hint = options.hint ?? inherited?.hint;
+  return {
+    id,
+    name: options.name ?? inherited?.name,
+    label: options.label ?? inherited?.label ?? "",
+    required: options.required ?? inherited?.required ?? false,
+    disabled: options.disabled ?? inherited?.disabled ?? false,
+    readOnly: options.readOnly ?? inherited?.readOnly ?? false,
+    error,
+    hint,
+    descriptionId: joinIds(
+      inherited?.descriptionId,
+      options["aria-describedby"],
+      hint ? id + "-hint" : void 0,
+      error ? id + "-error" : void 0
+    ),
+    invalid: error ? true : options["aria-invalid"] ?? inherited?.invalid ?? false,
+    wrapped: !!inherited
+  };
+}
+export {
+  FieldContext,
+  fieldInputProps,
+  fieldTriggerProps,
+  joinIds,
+  useFieldControl
+};

package/components/fileSelection.d.ts

@@ -0,0 +1,21 @@
+export type FileConstraints = {
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    selectedCount?: number;
+    multiple?: boolean;
+};
+export type FileRejection = {
+    file: File;
+    code: "type" | "size" | "count";
+    message: string;
+};
+export type FileSelectionResult = {
+    accepted: File[];
+    rejected: FileRejection[];
+};
+export declare function formatFileSize(bytes: number): string;
+export declare function validateFiles(files: readonly File[], { accept, maxSize, maxFiles, selectedCount, multiple, }?: FileConstraints): {
+    accepted: File[];
+    rejected: FileRejection[];
+};

package/components/fileSelection.js

@@ -0,0 +1,43 @@
+function formatFileSize(bytes) {
+  const unit = bytes >= 1024 * 1024 ? "MB" : bytes >= 1024 ? "KB" : "B", divisor = unit === "MB" ? 1024 * 1024 : unit === "KB" ? 1024 : 1;
+  return `${Math.round(bytes / divisor * 100) / 100} ${unit}`;
+}
+function validateFiles(files, {
+  accept,
+  maxSize,
+  maxFiles,
+  selectedCount = 0,
+  multiple = true
+} = {}) {
+  const rules = (accept || "").split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+  const size = maxSize === void 0 || !Number.isFinite(maxSize) ? Infinity : Math.max(0, maxSize);
+  const limit = maxFiles === void 0 || !Number.isFinite(maxFiles) ? Infinity : Math.max(0, Math.floor(maxFiles));
+  const existing = Number.isFinite(selectedCount) ? Math.max(0, Math.floor(selectedCount)) : 0, slots = Math.max(0, Math.min(limit, multiple ? Infinity : 1) - existing);
+  const accepted = [], rejected = [];
+  for (const file of files) {
+    const name = file.name.toLowerCase(), type = file.type.toLowerCase();
+    const matches = !rules.length || rules.some(
+      (rule) => rule === "*" || rule === "*/*" || (rule.startsWith(".") ? name.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule)
+    );
+    if (!matches)
+      rejected.push({ file, code: "type", message: "\u6587\u4EF6\u7C7B\u578B\u4E0D\u53D7\u652F\u6301" });
+    else if (file.size > size)
+      rejected.push({
+        file,
+        code: "size",
+        message: `\u6587\u4EF6\u4E0D\u80FD\u8D85\u8FC7 ${formatFileSize(size)}`
+      });
+    else if (accepted.length >= slots)
+      rejected.push({
+        file,
+        code: "count",
+        message: `\u6700\u591A\u9009\u62E9 ${Math.min(limit, multiple ? Infinity : 1)} \u4E2A\u6587\u4EF6`
+      });
+    else accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+export {
+  formatFileSize,
+  validateFiles
+};

package/components/hierarchy.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+export type HierarchyOption = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    keywords?: string[];
+    children?: HierarchyOption[];
+    disabled?: boolean;
+    selectable?: boolean;
+    isLeaf?: boolean;
+};
+export type HierarchyLoader = (node: HierarchyOption, signal: AbortSignal) => Promise<HierarchyOption[]>;
+export type HierarchyEntry = {
+    node: HierarchyOption;
+    path: HierarchyOption[];
+    disabled: boolean;
+    parent?: string;
+    branch: boolean;
+};
+export declare function indexHierarchy(options: HierarchyOption[], children: (node: HierarchyOption) => HierarchyOption[] | undefined, lazy?: boolean): Map<string, HierarchyEntry>;
+export declare function hierarchyMatches(entry: HierarchyEntry, query: string): boolean;
+export declare function hierarchyLeaves(entry: HierarchyEntry, entries: Map<string, HierarchyEntry>): string[];

package/components/hierarchy.js

@@ -0,0 +1,33 @@
+function indexHierarchy(options, children, lazy = false) {
+  const entries = /* @__PURE__ */ new Map();
+  const walk = (nodes, path, disabled) => {
+    for (const node of nodes) {
+      if (entries.has(node.value)) continue;
+      const next = [...path, node], nested = children(node);
+      entries.set(node.value, {
+        node,
+        path: next,
+        disabled: disabled || !!node.disabled,
+        parent: path.at(-1)?.value,
+        branch: !!nested?.length || node.isLeaf === false && nested === void 0 && lazy
+      });
+      if (nested?.length) walk(nested, next, disabled || !!node.disabled);
+    }
+  };
+  walk(options, [], false);
+  return entries;
+}
+function hierarchyMatches(entry, query) {
+  const text = entry.path.flatMap((node) => [node.label, node.value, ...node.keywords || []]).join(" ").normalize("NFKC").toLocaleLowerCase();
+  return query.normalize("NFKC").toLocaleLowerCase().trim().split(/\s+/).every((word) => text.includes(word));
+}
+function hierarchyLeaves(entry, entries) {
+  return [...entries.values()].filter(
+    (item) => !item.disabled && !item.branch && item.node.selectable !== false && item.path.some((node) => node.value === entry.node.value)
+  ).map((item) => item.node.value);
+}
+export {
+  hierarchyLeaves,
+  hierarchyMatches,
+  indexHierarchy
+};

package/components/iconCatalog.d.ts

@@ -0,0 +1,13 @@
+import type { LucideIconData } from "lucide-react";
+export type CatalogEntry = LucideIconData & {
+    name: string;
+    aliases: string[];
+    categories: string[];
+};
+export declare function loadCatalog(): Promise<CatalogEntry[]>;
+export declare function useIconCatalog(enabled?: boolean): {
+    items: CatalogEntry[] | undefined;
+    error: boolean;
+    retry: () => void;
+};
+export declare const iconCategories: Record<string, string>;