Initial React component library

packages/lytenyte-ui-react/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2025 1771 Technologies
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

packages/lytenyte-ui-react/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@1771technologies/lytenyte-ui-react",
+  "description": "LyteNyte React component library",
+  "license": "Apache-2.0",
+  "keywords": [
+    "TODO"
+  ],
+  "version": "0.0.1",
+  "type": "module",
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "homepage": "https://1771technologies.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/1771-technologies/lytenyte.git",
+    "directory": "packages/lytenyte-ui-react"
+  },
+  "bugs": {
+    "url": "https://github.com/1771-technologies/lytenyte/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "require": "./dist/index.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@1771technologies/lytenyte-design": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "18.0.0 || ^19.0.0",
+    "react-dom": "18.0.0 || ^19.0.0"
+  }
+}

packages/lytenyte-ui-react/src/accordion/accordion-context.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+
+export interface AccordionContextValue {
+  readonly rootId: string;
+  readonly collapsible: boolean;
+  readonly hiddenUntilFound: boolean;
+  readonly keepMounted: boolean;
+  readonly disabled: boolean;
+  readonly value: any[];
+  readonly attrs: Record<string, string | boolean | undefined>;
+  readonly orientation: "vertical" | "horizontal";
+  readonly onValueChange: (v: any) => void;
+}
+
+const context = createContext({} as AccordionContextValue);
+
+export const AccordionRootProvider = context.Provider;
+export const useAccordionRoot = () => useContext(context);

packages/lytenyte-ui-react/src/accordion/accordion-header.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from "react";
+import { useSlot } from "../hooks/use-slot.js";
+import { useAccordionItem } from "./accordion-item-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import type { Accordion } from "./accordion";
+import { DATA_ACCORDION_HEADER } from "../constants.js";
+
+function AccordionHeaderBase(
+  { render, style: providedStyle, className: providedClassName, ...props }: Accordion.Header.Props,
+  ref: Accordion.Header.Props["ref"],
+) {
+  const ctx = useAccordionItem();
+
+  const className = useClassName(providedClassName, ctx.state);
+  const style = useStyle(providedStyle, ctx.state);
+
+  const slot = useSlot({
+    slot: render ?? <h3 />,
+    ref,
+    props: [props, { className, style, [DATA_ACCORDION_HEADER]: "", ...ctx.attrs }],
+    state: ctx.state,
+  });
+
+  return slot;
+}
+
+export const AccordionHeader = forwardRef(AccordionHeaderBase);

packages/lytenyte-ui-react/src/accordion/accordion-item-context.tsx

@@ -0,0 +1,20 @@
+import type { Dispatch, SetStateAction } from "react";
+import { createContext, useContext } from "react";
+import type { Accordion } from "./accordion.js";
+
+export interface AccordionItemContext {
+  readonly collapsible: boolean;
+  readonly hiddenUntilFound: boolean;
+  readonly attrs: Record<string, string | boolean | undefined>;
+  readonly state: Accordion.Item.State;
+  readonly toggle: () => void;
+  readonly triggerId: string;
+  readonly setTriggerId: Dispatch<SetStateAction<string>>;
+  readonly panelId: string;
+  readonly setPanelId: Dispatch<SetStateAction<string>>;
+  readonly onOpenChangeComplete?: (open: boolean) => void;
+}
+
+const context = createContext({} as AccordionItemContext);
+export const AccordionItemProvider = context.Provider;
+export const useAccordionItem = () => useContext(context);

packages/lytenyte-ui-react/src/accordion/accordion-item.tsx

@@ -0,0 +1,106 @@
+import { forwardRef, useId, useMemo, useState, type ReactElement } from "react";
+import { useSlot } from "../hooks/use-slot.js";
+import type { AccordionItemContext } from "./accordion-item-context";
+import { AccordionItemProvider } from "./accordion-item-context.js";
+import { useAccordionRoot } from "./accordion-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import type { Accordion } from "./accordion.js";
+import { useEvent } from "../hooks/use-event.js";
+import { DATA_ACCORDION_ITEM, DATA_CLOSED, DATA_DISABLED, DATA_OPEN } from "../constants.js";
+
+function AccordionItemBase<T>(
+  {
+    value: providedValue,
+    collapsible,
+    onOpenChange,
+    onOpenChangeComplete,
+    disabled: providedDisabled,
+    style: providedStyle,
+    className: providedClassName,
+    render,
+    ...props
+  }: Accordion.Item.Props<T>,
+  ref: Accordion.Item.Props<T>["ref"],
+) {
+  const fallbackValue = useId();
+  const value = providedValue ?? fallbackValue;
+
+  const [triggerId, setTriggerId] = useState(useId());
+  const [panelId, setPanelId] = useState(useId());
+
+  const root = useAccordionRoot();
+
+  const disabled = providedDisabled ?? root.disabled;
+
+  const state = useMemo<Accordion.Item.State>(() => {
+    const open = root.value.includes(value);
+
+    return {
+      disabled,
+      orientation: root.orientation,
+      value: root.value,
+      open,
+    };
+  }, [disabled, root.orientation, root.value, value]);
+
+  const className = useClassName(providedClassName, state);
+  const style = useStyle(providedStyle, state);
+
+  const attrs = useMemo(() => {
+    return {
+      ...root.attrs,
+      [DATA_CLOSED]: !state.open || undefined,
+      [DATA_OPEN]: state.open || undefined,
+      [DATA_DISABLED]: disabled || undefined,
+    };
+  }, [disabled, root.attrs, state.open]);
+
+  const toggle = useEvent(function toggle() {
+    if (disabled) return;
+
+    const isOpen = root.value.includes(value);
+    if (isOpen && !(collapsible ?? root.collapsible)) return;
+
+    root.onValueChange(value);
+    onOpenChange?.(!isOpen);
+  });
+
+  const slot = useSlot<Accordion.Item.State>({
+    slot: render ?? <div />,
+    props: [props, { className, style, [DATA_ACCORDION_ITEM]: "", ...attrs, onClick: () => {} }],
+    ref: ref,
+    state,
+  });
+
+  const contextValue = useMemo<AccordionItemContext>(() => {
+    return {
+      collapsible: collapsible ?? root.collapsible,
+      hiddenUntilFound: root.hiddenUntilFound,
+      state,
+      attrs,
+      toggle,
+      triggerId,
+      setTriggerId,
+      panelId,
+      setPanelId,
+      onOpenChangeComplete,
+    };
+  }, [
+    attrs,
+    collapsible,
+    onOpenChangeComplete,
+    panelId,
+    root.collapsible,
+    root.hiddenUntilFound,
+    state,
+    toggle,
+    triggerId,
+  ]);
+
+  return <AccordionItemProvider value={contextValue}>{slot}</AccordionItemProvider>;
+}
+
+export const AccordionItem = forwardRef(AccordionItemBase) as <T>(
+  props: Accordion.Item.Props<T>,
+) => ReactElement;

packages/lytenyte-ui-react/src/accordion/accordion-panel.tsx

@@ -0,0 +1,108 @@
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { useAccordionItem } from "./accordion-item-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import { useSlot } from "../hooks/use-slot.js";
+import type { Accordion } from "./accordion";
+import { useAccordionRoot } from "./accordion-context.js";
+import { useIsoEffect } from "../hooks/use-iso-effect.js";
+import { useTransitionedOpen, type TransitionStatus } from "../hooks/use-transition-status.js";
+import { useCombinedRefs } from "../hooks/use-combined-ref.js";
+import { CSS_PANEL_HEIGHT, CSS_PANEL_WIDTH, DATA_ACCORDION_PANEL } from "../constants.js";
+
+function AccordionPanelBase(
+  {
+    render,
+    style: providedStyle,
+    className: providedClassName,
+    keepMounted: providedKeepMounted,
+    hiddenUntilFound: providedHiddenUntilFound,
+    ...props
+  }: Accordion.Panel.Props,
+  ref: Accordion.Panel.Props["ref"],
+) {
+  const ctx = useAccordionItem();
+  const rootCtx = useAccordionRoot();
+  const isHiddenUntilFound = providedHiddenUntilFound ?? rootCtx.hiddenUntilFound;
+
+  const onStatusChange = useCallback(
+    (next: TransitionStatus, _prev: TransitionStatus, el: HTMLElement) => {
+      if (next === "idle") {
+        el.style.setProperty(CSS_PANEL_HEIGHT, "auto");
+        el.style.setProperty(CSS_PANEL_WIDTH, "auto");
+        ctx.onOpenChangeComplete?.(true);
+      } else if (next === "closed") {
+        ctx.onOpenChangeComplete?.(false);
+        if (isHiddenUntilFound) {
+          el.setAttribute("hidden", "until-found");
+        }
+      } else {
+        if (next === "start" && isHiddenUntilFound) {
+          el.removeAttribute("hidden");
+        }
+        el.style.setProperty(CSS_PANEL_HEIGHT, `${el.scrollHeight}px`);
+        el.style.setProperty(CSS_PANEL_WIDTH, `${el.scrollWidth}px`);
+      }
+    },
+    [ctx, isHiddenUntilFound],
+  );
+
+  const { mounted, ref: transitionRef } = useTransitionedOpen(ctx.state.open, onStatusChange);
+
+  const panelRef = useRef<HTMLElement | null>(null);
+
+  // Set hidden="until-found" before first paint for initially-closed panels.
+  // Subsequent open/close transitions are handled by onStatusChange.
+  useIsoEffect(() => {
+    const el = panelRef.current;
+    if (!el) return;
+    if (isHiddenUntilFound && !ctx.state.open) {
+      el.setAttribute("hidden", "until-found");
+    } else {
+      el.removeAttribute("hidden");
+    }
+  }, [isHiddenUntilFound]);
+
+  useEffect(() => {
+    if (!isHiddenUntilFound) return;
+    const el = panelRef.current;
+    if (!el) return;
+
+    const onBeforeMatch = () => {
+      if (!ctx.state.open) ctx.toggle();
+    };
+
+    el.addEventListener("beforematch", onBeforeMatch);
+    return () => el.removeEventListener("beforematch", onBeforeMatch);
+  }, [isHiddenUntilFound, ctx.state.open, ctx.toggle, ctx]);
+
+  useIsoEffect(() => {
+    if (!props.id) return;
+    ctx.setPanelId(props.id);
+  }, [props.id]);
+
+  const className = useClassName(providedClassName, ctx.state);
+  const style = useStyle(providedStyle, ctx.state);
+
+  const slot = useSlot({
+    slot: render ?? <div />,
+    ref: useCombinedRefs(ref, transitionRef, panelRef),
+    props: [
+      {
+        id: ctx.panelId,
+        role: "region",
+        "aria-labelledby": ctx.triggerId,
+      },
+      props,
+      { className, style, [DATA_ACCORDION_PANEL]: "", ...ctx.attrs },
+    ],
+    state: ctx.state,
+  });
+
+  const keepMounted = isHiddenUntilFound || providedKeepMounted || rootCtx.keepMounted;
+  if (!mounted && !keepMounted) return null;
+
+  return slot;
+}
+
+export const AccordionPanel = forwardRef(AccordionPanelBase);