@seed-design/react 0.0.0-alpha-20260324091316

package/src/hooks/useBreakpoint.ts

@@ -0,0 +1,24 @@
+import type { Breakpoint } from "@seed-design/css/breakpoints";
+import { createContext, useContext, useSyncExternalStore } from "react";
+
+import * as store from "../primitives/breakpoint-store";
+
+export interface UseBreakpointOptions {
+  defaultBreakpoint?: Breakpoint;
+}
+
+export interface BreakpointContextValue {
+  breakpoint: Breakpoint;
+  defaultBreakpoint: Breakpoint;
+}
+
+export const BreakpointContext = createContext<BreakpointContextValue | null>(null);
+
+export function useBreakpoint(options?: UseBreakpointOptions): Breakpoint {
+  const ctx = useContext(BreakpointContext);
+  const defaultBp = options?.defaultBreakpoint ?? ctx?.defaultBreakpoint ?? "base";
+
+  const storeBreakpoint = useSyncExternalStore(store.subscribe, store.getSnapshot, () => defaultBp);
+
+  return ctx ? ctx.breakpoint : storeBreakpoint;
+}

package/src/hooks/useBreakpointValue.test.tsx

@@ -0,0 +1,102 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, mock } from "bun:test";
+
+import { useBreakpointValue } from "./useBreakpointValue";
+
+type ChangeHandler = (e: { matches: boolean }) => void;
+
+let currentWidth = 0;
+const entries = new Map<string, { minWidth: number; handlers: Set<ChangeHandler> }>();
+
+function mockMatchMedia(query: string) {
+  const match = query.match(/min-width:\s*(\d+)px/);
+  const minWidth = match ? Number(match[1]) : 0;
+  const entry = entries.get(query) ?? { minWidth, handlers: new Set<ChangeHandler>() };
+  entries.set(query, entry);
+  return {
+    get matches() {
+      return currentWidth >= entry.minWidth;
+    },
+    media: query,
+    addEventListener(_: string, handler: ChangeHandler) {
+      entry.handlers.add(handler);
+    },
+    removeEventListener(_: string, handler: ChangeHandler) {
+      entry.handlers.delete(handler);
+    },
+    onchange: null,
+    addListener: mock(),
+    removeListener: mock(),
+    dispatchEvent: () => false,
+  };
+}
+
+function setViewport(minWidthPx: number) {
+  currentWidth = minWidthPx;
+  for (const [, entry] of entries) {
+    const nowMatches = currentWidth >= entry.minWidth;
+    for (const handler of entry.handlers) {
+      handler({ matches: nowMatches });
+    }
+  }
+}
+
+beforeEach(() => {
+  currentWidth = 0;
+  entries.clear();
+  window.matchMedia = mockMatchMedia as unknown as typeof window.matchMedia;
+});
+
+describe("useBreakpointValue", () => {
+  it("passes through a single value", () => {
+    const { result } = renderHook(() => useBreakpointValue(42));
+    expect(result.current).toBe(42);
+  });
+
+  it("passes through a string value", () => {
+    const { result } = renderHook(() => useBreakpointValue("hello"));
+    expect(result.current).toBe("hello");
+  });
+
+  it("resolves base value at base breakpoint", () => {
+    const { result } = renderHook(() => useBreakpointValue({ base: 1, md: 2, xl: 4 }));
+    expect(result.current).toBe(1);
+  });
+
+  it("falls back to base when current breakpoint has no value", () => {
+    currentWidth = 480; // sm
+    const { result } = renderHook(() => useBreakpointValue({ base: 1, md: 2 }));
+    // sm is not defined, falls back to base
+    expect(result.current).toBe(1);
+  });
+
+  it("resolves md value at md breakpoint", () => {
+    currentWidth = 768;
+    const { result } = renderHook(() => useBreakpointValue({ base: 1, md: 2, xl: 4 }));
+    expect(result.current).toBe(2);
+  });
+
+  it("falls back to md at lg when lg is not defined", () => {
+    currentWidth = 1280; // lg
+    const { result } = renderHook(() => useBreakpointValue({ base: 1, md: 2, xl: 4 }));
+    // lg not defined, falls back to md
+    expect(result.current).toBe(2);
+  });
+
+  it("resolves xl value at xl breakpoint", () => {
+    currentWidth = 1440;
+    const { result } = renderHook(() => useBreakpointValue({ base: 1, md: 2, xl: 4 }));
+    expect(result.current).toBe(4);
+  });
+
+  it("updates when viewport changes", () => {
+    const { result } = renderHook(() => useBreakpointValue({ base: "compact", md: "full" }));
+    expect(result.current).toBe("compact");
+
+    act(() => setViewport(768));
+    expect(result.current).toBe("full");
+
+    act(() => setViewport(0));
+    expect(result.current).toBe("compact");
+  });
+});

package/src/hooks/useBreakpointValue.ts

@@ -0,0 +1,33 @@
+import { type Breakpoint, breakpointNames } from "@seed-design/css/breakpoints";
+import { useMemo } from "react";
+
+import type { ResponsiveValue } from "../types/responsive";
+import { isResponsiveObject } from "../types/responsive";
+import { type UseBreakpointOptions, useBreakpoint } from "./useBreakpoint";
+
+export function resolveResponsiveValue<T>(
+  values: { [K in Breakpoint]?: T },
+  breakpoint: Breakpoint,
+): T | undefined {
+  const idx = breakpointNames.indexOf(breakpoint);
+  for (let i = idx; i >= 0; i--) {
+    const val = values[breakpointNames[i]];
+
+    if (val !== undefined) return val;
+  }
+
+  return undefined;
+}
+
+export function useBreakpointValue<T>(
+  values: ResponsiveValue<T>,
+  options?: UseBreakpointOptions,
+): T | undefined {
+  const breakpoint = useBreakpoint(options);
+
+  return useMemo(() => {
+    if (!isResponsiveObject(values)) return values;
+
+    return resolveResponsiveValue(values, breakpoint);
+  }, [values, breakpoint]);
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export * from "./components";
+
+export type { ResponsiveValue, UnwrapResponsive, BreakpointThreshold } from "./types/responsive";
+
+export { useBreakpoint } from "./hooks/useBreakpoint";
+export type { UseBreakpointOptions } from "./hooks/useBreakpoint";
+export { useBreakpointValue } from "./hooks/useBreakpointValue";
+export { BreakpointProvider } from "./providers/BreakpointProvider";
+export type { BreakpointProviderProps } from "./providers/BreakpointProvider";
+
+// unstable_StyleProps is unstable and will be changed or removed without prior notice
+export type { StyleProps as unstable_StyleProps } from "./utils/styled";

package/src/primitive.ts

@@ -0,0 +1,12 @@
+export * from "@seed-design/react-avatar";
+export * from "@seed-design/react-checkbox";
+export * from "@seed-design/react-dialog";
+export * from "@seed-design/react-popover";
+export * from "@seed-design/react-progress";
+export * from "@seed-design/react-pull-to-refresh";
+export * from "@seed-design/react-radio-group";
+export * from "@seed-design/react-slider";
+export * from "@seed-design/react-snackbar";
+export * from "@seed-design/react-switch";
+export * from "@seed-design/react-tabs";
+export * from "@seed-design/react-toggle";

package/src/primitives/breakpoint-store.ts

@@ -0,0 +1,69 @@
+import { type Breakpoint, breakpointNames, mediaQueries } from "@seed-design/css/breakpoints";
+
+type Listener = () => void;
+
+const thresholds = breakpointNames.filter(
+  (name): name is Exclude<Breakpoint, "base"> => name !== "base",
+);
+
+let listeners: Set<Listener> | null = null;
+let mediaQueryLists: MediaQueryList[] | null = null;
+let currentBreakpoint: Breakpoint = "base";
+
+function computeBreakpoint(): Breakpoint {
+  if (!mediaQueryLists) return "base";
+  for (let i = thresholds.length - 1; i >= 0; i--) {
+    if (mediaQueryLists[i].matches) return thresholds[i];
+  }
+  return "base";
+}
+
+function handleChange() {
+  const next = computeBreakpoint();
+  if (next !== currentBreakpoint) {
+    currentBreakpoint = next;
+    for (const fn of listeners ?? []) fn();
+  }
+}
+
+function init() {
+  mediaQueryLists = thresholds.map((name) => window.matchMedia(mediaQueries[name]));
+  currentBreakpoint = computeBreakpoint();
+  for (const mql of mediaQueryLists) {
+    mql.addEventListener("change", handleChange);
+  }
+}
+
+function teardown() {
+  if (mediaQueryLists) {
+    for (const mql of mediaQueryLists) {
+      mql.removeEventListener("change", handleChange);
+    }
+    mediaQueryLists = null;
+  }
+  currentBreakpoint = "base";
+}
+
+export function subscribe(listener: Listener): () => void {
+  if (!listeners) {
+    listeners = new Set();
+    init();
+  }
+  listeners.add(listener);
+
+  return () => {
+    listeners?.delete(listener);
+    if (listeners?.size === 0) {
+      teardown();
+      listeners = null;
+    }
+  };
+}
+
+export function getSnapshot(): Breakpoint {
+  return currentBreakpoint;
+}
+
+export function getServerSnapshot(): Breakpoint {
+  return "base";
+}

package/src/providers/BreakpointProvider.tsx

@@ -0,0 +1,26 @@
+import type { Breakpoint } from "@seed-design/css/breakpoints";
+import type * as React from "react";
+import { useMemo, useSyncExternalStore } from "react";
+
+import { BreakpointContext } from "../hooks/useBreakpoint";
+import * as store from "../primitives/breakpoint-store";
+
+export interface BreakpointProviderProps {
+  defaultBreakpoint?: Breakpoint;
+  children: React.ReactNode;
+}
+
+export function BreakpointProvider({
+  defaultBreakpoint = "base",
+  children,
+}: BreakpointProviderProps) {
+  const breakpoint = useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    () => defaultBreakpoint,
+  );
+
+  const value = useMemo(() => ({ breakpoint, defaultBreakpoint }), [breakpoint, defaultBreakpoint]);
+
+  return <BreakpointContext.Provider value={value}>{children}</BreakpointContext.Provider>;
+}

package/src/types/responsive.ts

@@ -0,0 +1,19 @@
+import type { Breakpoint } from "@seed-design/css/breakpoints";
+
+// Before: `T | { [K in Breakpoint]?: T }`
+// When T is an object (e.g. ButtonProps), union excess property check is weak
+// and allows mixing T's keys with Breakpoint keys without error.
+// The intersection with `never`-mapped keys forces TypeScript to reject the mix.
+type ResponsiveObject<T> = { [K in Breakpoint]?: T } & (T extends object
+  ? { [K in Exclude<keyof T & string, Breakpoint>]?: never }
+  : {});
+
+export type ResponsiveValue<T> = T | ResponsiveObject<T>;
+
+export type UnwrapResponsive<T> = T extends ResponsiveValue<infer U> ? U : T;
+
+export type BreakpointThreshold = Exclude<Breakpoint, "base">;
+
+export function isResponsiveObject<T>(value: ResponsiveValue<T>): value is ResponsiveObject<T> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}

package/src/utils/createRecipeContext.tsx

@@ -0,0 +1,54 @@
+import clsx from "clsx";
+import { createContext, forwardRef, useContext } from "react";
+
+type Recipe<Props extends Record<string, string | boolean | undefined>> = ((
+  props?: Props,
+) => string) & {
+  splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
+};
+
+export function createRecipeContext<Props extends Record<string, string | boolean | undefined>>(
+  recipe: Recipe<Props>,
+) {
+  const PropsContext = createContext<Props | null>(null);
+
+  const PropsProvider = ({ children, value }: { children: React.ReactNode; value: Props }) => {
+    return <PropsContext.Provider value={value}>{children}</PropsContext.Provider>;
+  };
+
+  function useProps() {
+    return useContext(PropsContext);
+  }
+
+  const withContext = <T, P>(
+    Component: React.ElementType<any>,
+    options?: {
+      defaultProps?: Partial<P>;
+    },
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>> => {
+    const { defaultProps } = options ?? {};
+
+    const StyledComponent = forwardRef<any, any>((innerProps, ref) => {
+      const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props &
+        React.HTMLAttributes<HTMLElement>;
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps); // TODO: should we memoize this?
+
+      return <Component ref={ref} {...otherProps} className={clsx(className, props.className)} />;
+    });
+
+    StyledComponent.displayName = (Component as any).displayName || (Component as any).name;
+    return StyledComponent as any;
+  };
+
+  function withPropsProvider<P>(): React.Provider<Partial<P>> {
+    return PropsProvider as any;
+  }
+
+  return {
+    PropsProvider,
+    useProps,
+    withContext,
+    withPropsProvider,
+  };
+}

package/src/utils/createSlotRecipeContext.tsx

@@ -0,0 +1,128 @@
+import clsx from "clsx";
+import { createContext, forwardRef, useContext } from "react";
+
+type SlotRecipe<
+  Props extends Record<string, string | boolean | undefined>,
+  Classnames extends Record<string, string>,
+> = ((props?: Props) => Classnames) & {
+  splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
+};
+
+export function createSlotRecipeContext<
+  Props extends Record<string, string | boolean | undefined>,
+  Classnames extends Record<string, string>,
+>(recipe: SlotRecipe<Props, Classnames>) {
+  const ClassNamesContext = createContext<Classnames | null>(null);
+  const PropsContext = createContext<Props | null>(null);
+
+  const ClassNamesProvider = ({
+    children,
+    value,
+  }: {
+    children: React.ReactNode;
+    value: Classnames;
+  }) => {
+    return <ClassNamesContext.Provider value={value}>{children}</ClassNamesContext.Provider>;
+  };
+
+  const PropsProvider = ({ children, value }: { children: React.ReactNode; value: Props }) => {
+    return <PropsContext.Provider value={value}>{children}</PropsContext.Provider>;
+  };
+
+  function useClassNames() {
+    const context = useContext(ClassNamesContext);
+    if (context === null) {
+      throw new Error(
+        "useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?",
+      );
+    }
+
+    return context;
+  }
+
+  function useProps() {
+    return useContext(PropsContext);
+  }
+
+  const withRootProvider = <P,>(
+    Component: React.ElementType<any>,
+    options?: {
+      defaultProps?: Partial<P>;
+    },
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P>> => {
+    const { defaultProps } = options ?? {};
+
+    const StyledComponent = (innerProps: any) => {
+      const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props &
+        React.HTMLAttributes<HTMLElement>;
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps); // TODO: should we memoize this?
+
+      return (
+        <ClassNamesProvider value={classNames}>
+          <Component {...otherProps} />
+        </ClassNamesProvider>
+      );
+    };
+
+    // @ts-ignore
+    StyledComponent.displayName = Component.displayName || Component.name;
+
+    return StyledComponent as any;
+  };
+
+  const withProvider = <T, P>(
+    Component: React.ElementType<any>,
+    slot: keyof Classnames,
+    options?: {
+      defaultProps?: Partial<P>;
+    },
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>> => {
+    const { defaultProps } = options ?? {};
+
+    const StyledComponent = forwardRef<any, any>((innerProps, ref) => {
+      const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props &
+        React.HTMLAttributes<HTMLElement>;
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps); // TODO: should we memoize this?
+      const className = classNames[slot as keyof typeof classNames];
+
+      return (
+        <ClassNamesProvider value={classNames}>
+          <Component ref={ref} {...otherProps} className={clsx(className, props.className)} />
+        </ClassNamesProvider>
+      );
+    });
+
+    // @ts-ignore
+    StyledComponent.displayName = Component.displayName || Component.name;
+
+    return StyledComponent as any;
+  };
+
+  const withContext = <T, P>(
+    Component: React.ElementType<any>,
+    slot?: keyof Classnames,
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>> => {
+    const StyledComponent = forwardRef<any, React.HTMLAttributes<HTMLElement>>((props, ref) => {
+      const classNames = useClassNames();
+      const className = classNames?.[slot as keyof typeof classNames];
+
+      return <Component ref={ref} {...props} className={clsx(className, props.className)} />;
+    });
+
+    // @ts-ignore
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent as any;
+  };
+
+  return {
+    ClassNamesProvider,
+    PropsProvider,
+    useClassNames,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext,
+  };
+}

package/src/utils/createWithStateProps.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from "react";
+
+type AtLeastOne<T> = [T, ...T[]];
+
+type ContextHook = (prop?: {
+  strict?: boolean;
+}) => { stateProps: React.HTMLAttributes<HTMLElement> } | null;
+
+type ContextConfig = ContextHook | { useContext: ContextHook; strict?: boolean };
+
+export function createWithStateProps(useContexts: AtLeastOne<ContextConfig>) {
+  return function withStateProps<P, R>(Component: React.ComponentType<P & React.RefAttributes<R>>) {
+    const Node = forwardRef<R, P>((props, ref) => {
+      const stateProps = {};
+
+      for (const contextConfig of useContexts) {
+        if (typeof contextConfig === "function") {
+          Object.assign(stateProps, contextConfig({ strict: true })?.stateProps);
+        } else {
+          const { useContext, strict = false } = contextConfig;
+          Object.assign(stateProps, useContext({ strict })?.stateProps);
+        }
+      }
+
+      // @ts-ignore
+      return <Component ref={ref} {...stateProps} {...props} />;
+    });
+
+    Node.displayName = Component.displayName || Component.name;
+
+    return Node;
+  };
+}

package/src/utils/splitMultipleVariantsProps.d.ts

@@ -0,0 +1,21 @@
+type ExtractVariantProps<T> = T extends {
+  splitVariantProps: (...args: never[]) => [infer V, unknown];
+}
+  ? V
+  : never;
+
+type ExtractAllVariantKeys<R> = {
+  [K in keyof R]: ExtractVariantProps<R[K]> extends infer V
+    ? V extends Record<string, unknown>
+      ? keyof V
+      : never
+    : never;
+}[keyof R];
+
+export declare function splitMultipleVariantsProps<
+  R extends Record<string, { splitVariantProps: (...args: never[]) => unknown[] }>,
+  P,
+>(
+  props: P,
+  recipesMap: R,
+): [{ [K in keyof R]: ExtractVariantProps<R[K]> }, Omit<P, ExtractAllVariantKeys<R>>];

package/src/utils/splitMultipleVariantsProps.mjs

@@ -0,0 +1,25 @@
+export function splitMultipleVariantsProps(props, recipesMap) {
+  const multipleVariantsProps = {};
+  const extractedKeys = new Set();
+
+  for (const recipeKey in recipesMap) {
+    const recipe = recipesMap[recipeKey];
+
+    const [variantProps] = recipe.splitVariantProps(props);
+    multipleVariantsProps[recipeKey] = variantProps;
+
+    for (const variantPropKey in variantProps) {
+      extractedKeys.add(variantPropKey);
+    }
+  }
+
+  const remainingProps = {};
+
+  for (const propKey in props) {
+    if (extractedKeys.has(propKey)) continue;
+
+    remainingProps[propKey] = props[propKey];
+  }
+
+  return [multipleVariantsProps, remainingProps];
+}