@seed-design/lynx-react 0.1.1-alpha.0 → 0.2.0-alpha.2

package/src/utils/__tests__/create-slot-recipe-context.test.tsx

@@ -0,0 +1,228 @@
+import { forwardRef } from "@lynx-js/react";
+import { render, renderHook } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { createSlotRecipeContext } from "../create-slot-recipe-context";
+
+type MockVariantProps = {
+  variant?: "a" | "b";
+};
+
+type MockClassnames = {
+  root: string;
+  label: string;
+};
+
+const mockSlotRecipe = Object.assign(
+  (props?: MockVariantProps): MockClassnames => ({
+    root: `root-${props?.variant ?? "a"}`,
+    label: `label-${props?.variant ?? "a"}`,
+  }),
+  {
+    splitVariantProps: <T extends MockVariantProps>(props: T) => {
+      const { variant, ...rest } = props;
+      return [{ variant }, rest] as [MockVariantProps, Omit<T, keyof MockVariantProps>];
+    },
+  },
+);
+
+type MockReceived = { props?: Record<string, unknown>; refValue?: unknown };
+
+function createMock(name: string) {
+  const received: MockReceived = {};
+  const Mock = forwardRef<{ tag: "mock" }, Record<string, unknown>>((props, ref) => {
+    received.props = props;
+    received.refValue = ref;
+    const { children } = props as { children?: unknown };
+    return <>{children as never}</>;
+  });
+  Mock.displayName = name;
+  return { Mock, received };
+}
+
+describe("createSlotRecipeContext", () => {
+  describe("useClassNames", () => {
+    it("throws when used outside a ClassNamesProvider", () => {
+      const { useClassNames } = createSlotRecipeContext(mockSlotRecipe);
+
+      expect(() => renderHook(() => useClassNames())).toThrow(
+        /useClassNames must be used within a ClassNamesProvider/,
+      );
+    });
+
+    it("returns the provided classnames inside ClassNamesProvider", () => {
+      const { useClassNames, ClassNamesProvider } = createSlotRecipeContext(mockSlotRecipe);
+      const value: MockClassnames = { root: "custom-root", label: "custom-label" };
+
+      const { result } = renderHook(() => useClassNames(), {
+        wrapper: ({ children }) => (
+          <ClassNamesProvider value={value}>{children}</ClassNamesProvider>
+        ),
+      });
+
+      expect(result.current).toEqual(value);
+    });
+  });
+
+  describe("useProps", () => {
+    it("returns null outside of PropsProvider", () => {
+      const { useProps } = createSlotRecipeContext(mockSlotRecipe);
+      const { result } = renderHook(() => useProps());
+
+      expect(result.current).toBeNull();
+    });
+
+    it("returns the provided value inside PropsProvider", () => {
+      const { useProps, PropsProvider } = createSlotRecipeContext(mockSlotRecipe);
+      const { result } = renderHook(() => useProps(), {
+        wrapper: ({ children }) => (
+          <PropsProvider value={{ variant: "b" }}>{children}</PropsProvider>
+        ),
+      });
+
+      expect(result.current).toEqual({ variant: "b" });
+    });
+  });
+
+  describe("withRootProvider", () => {
+    it("injects classnames into context without applying className on the root element", () => {
+      const { Mock: Root, received: rootReceived } = createMock("Root");
+      const { Mock: Child, received: childReceived } = createMock("Child");
+      const { withRootProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
+
+      const StyledRoot = withRootProvider<MockVariantProps>(Root);
+      const StyledLabel = withContext<{ tag: "mock" }, Record<string, unknown>>(Child, "label");
+
+      render(
+        <StyledRoot variant="b">
+          <StyledLabel />
+        </StyledRoot>,
+      );
+
+      expect(rootReceived.props).not.toHaveProperty("className");
+      expect(childReceived.props?.className).toBe("label-b");
+    });
+  });
+
+  describe("withProvider", () => {
+    it("applies slot className to the provider element and injects context", () => {
+      const { Mock: Root, received: rootReceived } = createMock("Root");
+      const { Mock: Child, received: childReceived } = createMock("Child");
+      const { withProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
+
+      const StyledRoot = withProvider<{ tag: "mock" }, MockVariantProps>(Root, "root");
+      const StyledLabel = withContext<{ tag: "mock" }, Record<string, unknown>>(Child, "label");
+
+      render(
+        <StyledRoot variant="a">
+          <StyledLabel />
+        </StyledRoot>,
+      );
+
+      expect(rootReceived.props?.className).toBe("root-a");
+      expect(childReceived.props?.className).toBe("label-a");
+    });
+
+    it("merges user-provided className with the slot className", () => {
+      const { Mock: Root, received: rootReceived } = createMock("Root");
+      const { withProvider } = createSlotRecipeContext(mockSlotRecipe);
+      type StyledProps = MockVariantProps & { className?: string };
+      const StyledRoot = withProvider<{ tag: "mock" }, StyledProps>(Root, "root");
+
+      render(<StyledRoot variant="a" className="extra" />);
+
+      expect(rootReceived.props?.className).toBe("root-a extra");
+    });
+
+    it("forwards the ref to the provider element", () => {
+      const { Mock: Root, received } = createMock("Root");
+      const { withProvider } = createSlotRecipeContext(mockSlotRecipe);
+      const StyledRoot = withProvider<{ tag: "mock" }, MockVariantProps>(Root, "root");
+      const refFn = (node: { tag: "mock" } | null) => {
+        received.refValue = node;
+      };
+
+      render(<StyledRoot ref={refFn} variant="a" />);
+
+      expect(received.refValue).toBe(refFn);
+    });
+
+    it("prefers innerProps over PropsProvider and defaultProps", () => {
+      const { Mock: Root, received } = createMock("Root");
+      const { withProvider, PropsProvider } = createSlotRecipeContext(mockSlotRecipe);
+      const StyledRoot = withProvider<{ tag: "mock" }, MockVariantProps>(Root, "root", {
+        defaultProps: { variant: "a" },
+      });
+
+      render(
+        <PropsProvider value={{ variant: "a" }}>
+          <StyledRoot variant="b" />
+        </PropsProvider>,
+      );
+
+      expect(received.props?.className).toBe("root-b");
+    });
+  });
+
+  describe("withContext", () => {
+    it("reads slot className from ClassNamesProvider", () => {
+      const { Mock: Label, received } = createMock("Label");
+      const { ClassNamesProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
+      const StyledLabel = withContext<{ tag: "mock" }, Record<string, unknown>>(Label, "label");
+      const classNames: MockClassnames = { root: "r", label: "custom-label" };
+
+      render(
+        <ClassNamesProvider value={classNames}>
+          <StyledLabel />
+        </ClassNamesProvider>,
+      );
+
+      expect(received.props?.className).toBe("custom-label");
+    });
+
+    it("merges user-provided className with slot className", () => {
+      const { Mock: Label, received } = createMock("Label");
+      const { ClassNamesProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
+      type StyledProps = { className?: string };
+      const StyledLabel = withContext<{ tag: "mock" }, StyledProps>(Label, "label");
+
+      render(
+        <ClassNamesProvider value={{ root: "r", label: "l" }}>
+          <StyledLabel className="extra" />
+        </ClassNamesProvider>,
+      );
+
+      expect(received.props?.className).toBe("l extra");
+    });
+
+    it("passes through native props like data attributes", () => {
+      const { Mock: Label, received } = createMock("Label");
+      const { ClassNamesProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
+      type StyledProps = { "data-testid"?: string };
+      const StyledLabel = withContext<{ tag: "mock" }, StyledProps>(Label, "label");
+
+      render(
+        <ClassNamesProvider value={{ root: "r", label: "l" }}>
+          <StyledLabel data-testid="hello" />
+        </ClassNamesProvider>,
+      );
+
+      expect(received.props?.["data-testid"]).toBe("hello");
+    });
+
+    it("renders without a slot className when slot argument is omitted", () => {
+      const { Mock: Label, received } = createMock("Label");
+      const { ClassNamesProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
+      const StyledLabel = withContext<{ tag: "mock" }, Record<string, unknown>>(Label);
+
+      render(
+        <ClassNamesProvider value={{ root: "r", label: "l" }}>
+          <StyledLabel />
+        </ClassNamesProvider>,
+      );
+
+      // clsx(undefined, undefined) → ""
+      expect(received.props?.className).toBe("");
+    });
+  });
+});

package/src/utils/__tests__/split-multiple-variants-props.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+import { splitMultipleVariantsProps } from "../split-multiple-variants-props";
+
+function makeRecipe<V extends Record<string, unknown>>(variantKeys: (keyof V)[]) {
+  return {
+    splitVariantProps: (props: Record<string, unknown>) => {
+      const variantProps: Record<string, unknown> = {};
+      const rest: Record<string, unknown> = {};
+      for (const key in props) {
+        if (variantKeys.includes(key as keyof V)) {
+          variantProps[key] = props[key];
+        } else {
+          rest[key] = props[key];
+        }
+      }
+      return [variantProps, rest] as [V, Omit<Record<string, unknown>, keyof V>];
+    },
+  };
+}
+
+describe("splitMultipleVariantsProps", () => {
+  it("splits props across disjoint recipes", () => {
+    const a = makeRecipe<{ size: string }>(["size"]);
+    const b = makeRecipe<{ tone: string }>(["tone"]);
+
+    const [{ a: av, b: bv }, rest] = splitMultipleVariantsProps(
+      { size: "32", tone: "brand", onTap: () => {}, children: "x" },
+      { a, b },
+    );
+
+    expect(av).toEqual({ size: "32" });
+    expect(bv).toEqual({ tone: "brand" });
+    expect(rest).toEqual({ onTap: expect.any(Function), children: "x" });
+  });
+
+  it("puts shared variant keys into every recipe bucket", () => {
+    const a = makeRecipe<{ size: string }>(["size"]);
+    const b = makeRecipe<{ size: string; tone: string }>(["size", "tone"]);
+
+    const [{ a: av, b: bv }, rest] = splitMultipleVariantsProps(
+      { size: "32", tone: "brand", disabled: true },
+      { a, b },
+    );
+
+    expect(av).toEqual({ size: "32" });
+    expect(bv).toEqual({ size: "32", tone: "brand" });
+    expect(rest).toEqual({ disabled: true });
+  });
+
+  it("returns empty variant buckets when no recipe claims a prop", () => {
+    const a = makeRecipe<{ size: string }>(["size"]);
+
+    const [{ a: av }, rest] = splitMultipleVariantsProps(
+      { onTap: () => {}, className: "x" },
+      { a },
+    );
+
+    expect(av).toEqual({});
+    expect(rest).toEqual({ onTap: expect.any(Function), className: "x" });
+  });
+});

package/src/utils/create-slot-recipe-context.tsx

@@ -0,0 +1,147 @@
+import { createContext, forwardRef, useContext } from "@lynx-js/react";
+import clsx from "clsx";
+
+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 &
+        Record<string, unknown>;
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps);
+
+      return (
+        <ClassNamesProvider value={classNames}>
+          <PropsProvider value={variantProps}>
+            <Component {...otherProps} />
+          </PropsProvider>
+        </ClassNamesProvider>
+      );
+    };
+
+    // @ts-expect-error — assigning displayName to a plain function component
+    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: any = { ...(defaultProps ?? {}), ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props as Props);
+      const classNames = recipe(variantProps);
+      const slotClassName: string | undefined = classNames[slot];
+      const userClassName: string | undefined = props["className"];
+
+      return (
+        <ClassNamesProvider value={classNames}>
+          <PropsProvider value={variantProps}>
+            <Component
+              {...(ref ? { ref } : {})}
+              {...otherProps}
+              className={clsx(slotClassName, userClassName)}
+            />
+          </PropsProvider>
+        </ClassNamesProvider>
+      );
+    });
+
+    StyledComponent.displayName = (Component as any).displayName || (Component as any).name;
+
+    return StyledComponent as any;
+  };
+
+  const withContext = <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: any = { ...(defaultProps ?? {}), ...innerProps };
+      const classNames = useClassNames();
+      const slotClassName: string | undefined = slot ? classNames[slot] : undefined;
+      const userClassName: string | undefined = props["className"];
+
+      return (
+        <Component
+          {...(ref ? { ref } : {})}
+          {...props}
+          className={clsx(slotClassName, userClassName)}
+        />
+      );
+    });
+
+    StyledComponent.displayName = (Component as any).displayName || (Component as any).name;
+    return StyledComponent as any;
+  };
+
+  return {
+    ClassNamesProvider,
+    PropsProvider,
+    useClassNames,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext,
+  };
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from "./create-slot-recipe-context";
+export * from "./get-seed-class-name";
+export * from "./resolve-recipe-token";
+export * from "./split-multiple-variants-props";

package/src/utils/resolve-recipe-token.ts

@@ -0,0 +1,47 @@
+/**
+ * Rootage vars 객체에서 `path` 를 따라 token 값(주로 `"var(--seed-...)"` 스트링)을 꺼낸다.
+ *
+ * 쓰임새: Lynx `<image>` 의 `tint-color` / `width` / `height` 처럼 CSS 만으로는
+ * override 할 수 없거나(아이콘 패키지가 inline style 을 박는 경우 등) React 가
+ * recipe 와 같은 소스에서 꺼내 inline attribute 로 주입해야 하는 속성을 다룰 때.
+ *
+ * ```ts
+ * import { actionButton as actionButtonVars } from "@seed-design/lynx-css/vars/component";
+ * import { capitalize, resolveRecipeToken } from "@seed-design/lynx-react/utils/resolve-recipe-token";
+ *
+ * // variant × state × slot → color
+ * const color = resolveRecipeToken(actionButtonVars, [
+ *   `variant${capitalize(variant)}`,
+ *   state,          // "enabled" | "disabled" | "loading" | "pressed"
+ *   "prefixIcon",
+ *   "color",
+ * ]);
+ *
+ * // size × layout → icon size
+ * const size = resolveRecipeToken(actionButtonVars, [
+ *   `size${capitalize(size)}Layout${capitalize(layout)}`,
+ *   "enabled",
+ *   "prefixIcon",
+ *   "size",
+ * ]);
+ * ```
+ *
+ * recipe token 경로가 컴포넌트마다 조금씩 다르므로(variant/size/layout 조합 여부 등)
+ * 이 유틸은 "vars + path" 조합만 제공하고, 각 컴포넌트가 자기 path 를 만들어 호출한다.
+ */
+export function resolveRecipeToken(vars: unknown, path: readonly string[]): string | undefined {
+  let cursor: unknown = vars;
+  for (const key of path) {
+    if (cursor == null || typeof cursor !== "object") return undefined;
+    cursor = (cursor as Record<string, unknown>)[key];
+  }
+  return typeof cursor === "string" ? cursor : undefined;
+}
+
+/**
+ * 첫 글자 대문자. recipe variant key 조립용
+ * (e.g. `variant` + `brandSolid` → `variantBrandSolid`).
+ */
+export function capitalize<T extends string>(value: T): Capitalize<T> {
+  return (value.charAt(0).toUpperCase() + value.slice(1)) as Capitalize<T>;
+}

package/src/utils/split-multiple-variants-props.ts

@@ -0,0 +1,59 @@
+type RecipeLike = {
+  splitVariantProps: (props: Record<string, unknown>) => [Record<string, unknown>, unknown];
+};
+
+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];
+
+/**
+ * Split `props` across multiple recipes' variant extractors in one pass.
+ *
+ * Given `recipesMap` of `{ [recipeKey]: recipe }`, returns:
+ * - A bucket per recipe key with that recipe's variant-only props.
+ * - `remainingProps` with every recipe variant key stripped out.
+ *
+ * Keys that appear in more than one recipe (e.g. shared `size`) are copied
+ * into each corresponding bucket. `remainingProps` never includes any key
+ * that any recipe claimed as a variant.
+ *
+ * Mirror of `packages/react/src/utils/splitMultipleVariantsProps` adapted
+ * to TypeScript for Lynx. Use when a single compound component composes two
+ * or more recipes (e.g. Switch's `switch` + `switchmark`).
+ */
+export function splitMultipleVariantsProps<R extends Record<string, RecipeLike>, P>(
+  props: P,
+  recipesMap: R,
+): [{ [K in keyof R]: ExtractVariantProps<R[K]> }, Omit<P, ExtractAllVariantKeys<R>>] {
+  const multipleVariantsProps = {} as { [K in keyof R]: ExtractVariantProps<R[K]> };
+  const extractedKeys = new Set<string>();
+  const propsRecord = props as Record<string, unknown>;
+
+  for (const recipeKey in recipesMap) {
+    const [variantProps] = recipesMap[recipeKey].splitVariantProps(propsRecord);
+    multipleVariantsProps[recipeKey] = variantProps as ExtractVariantProps<R[keyof R]>;
+
+    for (const variantPropKey in variantProps) {
+      extractedKeys.add(variantPropKey);
+    }
+  }
+
+  const remainingProps = {} as Record<string, unknown>;
+
+  for (const propKey in propsRecord) {
+    if (extractedKeys.has(propKey)) continue;
+    remainingProps[propKey] = propsRecord[propKey];
+  }
+
+  return [multipleVariantsProps, remainingProps as Omit<P, ExtractAllVariantKeys<R>>];
+}

package/lib/components/Box/Box.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-import { type StyleProps } from "../../utils/styled";
-export interface BoxProps extends StyleProps {
-    asChild?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    children?: ReactNode;
-}
-export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<any>>;
-//# sourceMappingURL=Box.d.ts.map

package/lib/components/Box/Box.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,WAAW,QAAS,SAAQ,UAAU;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,GAAG,0FAgBd,CAAC"}

package/lib/components/Box/Box.jsx

@@ -1,19 +0,0 @@
-import clsx from "clsx";
-import { forwardRef } from "react";
-import { Slot } from "@seed-design/lynx-primitive";
-import { useStyleProps } from "../../utils/styled";
-export const Box = forwardRef((props, ref) => {
-    const { style, restProps } = useStyleProps(props);
-    const { asChild = false, className, children, ...nativeProps } = restProps;
-    const mergedProps = {
-        ...(ref ? { ref } : {}),
-        className: clsx("seed-box", className),
-        style: style,
-        ...nativeProps,
-    };
-    if (asChild) {
-        return <Slot {...mergedProps}>{children}</Slot>;
-    }
-    return <view {...mergedProps}>{children}</view>;
-});
-Box.displayName = "Box";

package/lib/components/Box/index.d.ts

@@ -1,2 +0,0 @@
-export { Box, type BoxProps } from "./Box";
-//# sourceMappingURL=index.d.ts.map

package/lib/components/Box/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC"}

package/lib/components/Box/index.js

@@ -1 +0,0 @@
-export { Box } from "./Box";

package/lib/components/Flex/Flex.d.ts

@@ -1,33 +0,0 @@
-import { type BoxProps } from "../Box/Box";
-export interface FlexProps extends Omit<BoxProps, "display"> {
-    /**
-     * @default "flex"
-     */
-    display?: "flex" | "none";
-    /**
-     * Shorthand for `flexDirection`.
-     */
-    direction?: BoxProps["flexDirection"];
-    /**
-     * Shorthand for `flexWrap`.
-     */
-    wrap?: BoxProps["flexWrap"];
-    /**
-     * Shorthand for `alignItems`.
-     */
-    align?: BoxProps["alignItems"];
-    /**
-     * Shorthand for `justifyContent`.
-     */
-    justify?: BoxProps["justifyContent"];
-    /**
-     * Shorthand for `flexGrow`.
-     */
-    grow?: BoxProps["flexGrow"];
-    /**
-     * Shorthand for `flexShrink`.
-     */
-    shrink?: BoxProps["flexShrink"];
-}
-export declare const Flex: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<any>>;
-//# sourceMappingURL=Flex.d.ts.map

package/lib/components/Flex/Flex.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC1D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IAEtC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAErC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE5B;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;CACjC;AAED,eAAO,MAAM,IAAI,2FAgBf,CAAC"}

package/lib/components/Flex/Flex.jsx

@@ -1,7 +0,0 @@
-import { forwardRef } from "react";
-import { Box } from "../Box/Box";
-export const Flex = forwardRef((props, ref) => {
-    const { direction, wrap, align, justify, grow, shrink, ...rest } = props;
-    return (<Box ref={ref} display="flex" flexDirection={direction} flexWrap={wrap} alignItems={align} justifyContent={justify} flexGrow={grow} flexShrink={shrink} {...rest}/>);
-});
-Flex.displayName = "Flex";

package/lib/components/Flex/index.d.ts

@@ -1,2 +0,0 @@
-export { Flex, type FlexProps } from "./Flex";
-//# sourceMappingURL=index.d.ts.map

package/lib/components/Flex/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/Flex/index.js

@@ -1 +0,0 @@
-export { Flex } from "./Flex";

package/lib/components/List/List.d.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from "react";
-import { type StyleProps } from "../../utils/styled";
-import type { ListProps as LynxListProps } from "@lynx-js/types";
-export interface ListProps extends StyleProps, Omit<LynxListProps, "style"> {
-    asChild?: boolean;
-    children?: ReactNode;
-}
-export declare const List: import("react").NamedExoticComponent<Omit<ListProps, "ref"> & import("react").RefAttributes<any>>;
-//# sourceMappingURL=List.d.ts.map

package/lib/components/List/List.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,WAAW,SAAU,SAAQ,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAuBD,eAAO,MAAM,IAAI,mGAAiB,CAAC"}