@seed-design/react 0.0.0-alpha-20260324091316

package/lib/primitive.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const reactAvatar = require('@seed-design/react-avatar');
+const reactCheckbox = require('@seed-design/react-checkbox');
+const reactDialog = require('@seed-design/react-dialog');
+const reactPopover = require('@seed-design/react-popover');
+const reactProgress = require('@seed-design/react-progress');
+const reactPullToRefresh = require('@seed-design/react-pull-to-refresh');
+const reactRadioGroup = require('@seed-design/react-radio-group');
+const reactSlider = require('@seed-design/react-slider');
+const reactSnackbar = require('@seed-design/react-snackbar');
+const reactSwitch = require('@seed-design/react-switch');
+const reactTabs = require('@seed-design/react-tabs');
+const reactToggle = require('@seed-design/react-toggle');
+
+
+
+Object.keys(reactAvatar).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactAvatar[k]
+	});
+});
+Object.keys(reactCheckbox).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactCheckbox[k]
+	});
+});
+Object.keys(reactDialog).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactDialog[k]
+	});
+});
+Object.keys(reactPopover).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactPopover[k]
+	});
+});
+Object.keys(reactProgress).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactProgress[k]
+	});
+});
+Object.keys(reactPullToRefresh).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactPullToRefresh[k]
+	});
+});
+Object.keys(reactRadioGroup).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactRadioGroup[k]
+	});
+});
+Object.keys(reactSlider).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactSlider[k]
+	});
+});
+Object.keys(reactSnackbar).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactSnackbar[k]
+	});
+});
+Object.keys(reactSwitch).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactSwitch[k]
+	});
+});
+Object.keys(reactTabs).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactTabs[k]
+	});
+});
+Object.keys(reactToggle).forEach(k => {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: () => reactToggle[k]
+	});
+});

package/lib/primitive.d.ts

@@ -0,0 +1,13 @@
+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';
+//# sourceMappingURL=primitive.d.ts.map

package/lib/primitive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitive.d.ts","sourceRoot":"","sources":["../src/primitive.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC"}

package/lib/primitive.js

@@ -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/lib/primitives/breakpoint-store.cjs

@@ -0,0 +1,63 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const breakpoints = require('@seed-design/css/breakpoints');
+
+const thresholds = breakpoints.breakpointNames.filter(
+  (name) => name !== "base"
+);
+let listeners = null;
+let mediaQueryLists = null;
+let currentBreakpoint = "base";
+function computeBreakpoint() {
+  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(breakpoints.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";
+}
+function subscribe(listener) {
+  if (!listeners) {
+    listeners = /* @__PURE__ */ new Set();
+    init();
+  }
+  listeners.add(listener);
+  return () => {
+    listeners?.delete(listener);
+    if (listeners?.size === 0) {
+      teardown();
+      listeners = null;
+    }
+  };
+}
+function getSnapshot() {
+  return currentBreakpoint;
+}
+
+exports.getSnapshot = getSnapshot;
+exports.subscribe = subscribe;

package/lib/primitives/breakpoint-store.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoint } from '@seed-design/css/breakpoints';
+type Listener = () => void;
+export declare function subscribe(listener: Listener): () => void;
+export declare function getSnapshot(): Breakpoint;
+export declare function getServerSnapshot(): Breakpoint;
+export {};
+//# sourceMappingURL=breakpoint-store.d.ts.map

package/lib/primitives/breakpoint-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint-store.d.ts","sourceRoot":"","sources":["../../src/primitives/breakpoint-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAiC,MAAM,8BAA8B,CAAC;AAE9F,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AA4C3B,wBAAgB,SAAS,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI,CAcxD;AAED,wBAAgB,WAAW,IAAI,UAAU,CAExC;AAED,wBAAgB,iBAAiB,IAAI,UAAU,CAE9C"}

package/lib/primitives/breakpoint-store.js

@@ -0,0 +1,58 @@
+'use client';
+import { breakpointNames, mediaQueries } from '@seed-design/css/breakpoints';
+
+const thresholds = breakpointNames.filter(
+  (name) => name !== "base"
+);
+let listeners = null;
+let mediaQueryLists = null;
+let currentBreakpoint = "base";
+function computeBreakpoint() {
+  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";
+}
+function subscribe(listener) {
+  if (!listeners) {
+    listeners = /* @__PURE__ */ new Set();
+    init();
+  }
+  listeners.add(listener);
+  return () => {
+    listeners?.delete(listener);
+    if (listeners?.size === 0) {
+      teardown();
+      listeners = null;
+    }
+  };
+}
+function getSnapshot() {
+  return currentBreakpoint;
+}
+
+export { getSnapshot, subscribe };

package/lib/providers/BreakpointProvider.cjs

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const useBreakpoint = require('../hooks/useBreakpoint.cjs');
+const breakpointStore = require('../primitives/breakpoint-store.cjs');
+
+function BreakpointProvider({
+  defaultBreakpoint = "base",
+  children
+}) {
+  const breakpoint = React.useSyncExternalStore(
+    breakpointStore.subscribe,
+    breakpointStore.getSnapshot,
+    () => defaultBreakpoint
+  );
+  const value = React.useMemo(() => ({ breakpoint, defaultBreakpoint }), [breakpoint, defaultBreakpoint]);
+  return /* @__PURE__ */ jsxRuntime.jsx(useBreakpoint.BreakpointContext.Provider, { value, children });
+}
+
+exports.BreakpointProvider = BreakpointProvider;

package/lib/providers/BreakpointProvider.d.ts

@@ -0,0 +1,8 @@
+import { Breakpoint } from '@seed-design/css/breakpoints';
+import type * as React from "react";
+export interface BreakpointProviderProps {
+    defaultBreakpoint?: Breakpoint;
+    children: React.ReactNode;
+}
+export declare function BreakpointProvider({ defaultBreakpoint, children, }: BreakpointProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BreakpointProvider.d.ts.map

package/lib/providers/BreakpointProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreakpointProvider.d.ts","sourceRoot":"","sources":["../../src/providers/BreakpointProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,uBAAuB;IACtC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,iBAA0B,EAC1B,QAAQ,GACT,EAAE,uBAAuB,2CAUzB"}

package/lib/providers/BreakpointProvider.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useSyncExternalStore, useMemo } from 'react';
+import { BreakpointContext } from '../hooks/useBreakpoint.js';
+import { subscribe, getSnapshot } from '../primitives/breakpoint-store.js';
+
+function BreakpointProvider({
+  defaultBreakpoint = "base",
+  children
+}) {
+  const breakpoint = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    () => defaultBreakpoint
+  );
+  const value = useMemo(() => ({ breakpoint, defaultBreakpoint }), [breakpoint, defaultBreakpoint]);
+  return /* @__PURE__ */ jsx(BreakpointContext.Provider, { value, children });
+}
+
+export { BreakpointProvider };

package/lib/types/responsive.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function isResponsiveObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+exports.isResponsiveObject = isResponsiveObject;

package/lib/types/responsive.d.ts

@@ -0,0 +1,12 @@
+import { Breakpoint } from '@seed-design/css/breakpoints';
+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 declare function isResponsiveObject<T>(value: ResponsiveValue<T>): value is ResponsiveObject<T>;
+export {};
+//# sourceMappingURL=responsive.d.ts.map

package/lib/types/responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../src/types/responsive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAM/D,KAAK,gBAAgB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,UAAU,CAAC,CAAC,EAAE,CAAC;CAAE,GAAG,CAAC,CAAC,SAAS,MAAM,GACpE;KAAG,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK;CAAE,GACxD,EAAE,CAAC,CAAC;AAER,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAEzD,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,eAAe,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE7E,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAE9D,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAE7F"}

package/lib/types/responsive.js

@@ -0,0 +1,6 @@
+'use client';
+function isResponsiveObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export { isResponsiveObject };

package/lib/utils/createRecipeContext.cjs

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('clsx');
+const React = require('react');
+
+function createRecipeContext(recipe) {
+  const PropsContext = React.createContext(null);
+  const PropsProvider = ({ children, value }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsContext.Provider, { value, children });
+  };
+  function useProps() {
+    return React.useContext(PropsContext);
+  }
+  const withContext = (Component, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = React.forwardRef((innerProps, ref) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps);
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...otherProps, className: clsx(className, props.className) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  function withPropsProvider() {
+    return PropsProvider;
+  }
+  return {
+    PropsProvider,
+    useProps,
+    withContext,
+    withPropsProvider
+  };
+}
+
+exports.createRecipeContext = createRecipeContext;

package/lib/utils/createRecipeContext.d.ts

@@ -0,0 +1,16 @@
+type Recipe<Props extends Record<string, string | boolean | undefined>> = ((props?: Props) => string) & {
+    splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
+};
+export declare function createRecipeContext<Props extends Record<string, string | boolean | undefined>>(recipe: Recipe<Props>): {
+    PropsProvider: ({ children, value }: {
+        children: React.ReactNode;
+        value: Props;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useProps: () => Props | null;
+    withContext: <T, P>(Component: React.ElementType<any>, options?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+    withPropsProvider: <P>() => React.Provider<Partial<P>>;
+};
+export {};
+//# sourceMappingURL=createRecipeContext.d.ts.map

package/lib/utils/createRecipeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRecipeContext.d.ts","sourceRoot":"","sources":["../../src/utils/createRecipeContext.tsx"],"names":[],"mappings":"AAGA,KAAK,MAAM,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,CACzE,KAAK,CAAC,EAAE,KAAK,KACV,MAAM,CAAC,GAAG;IACb,iBAAiB,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC;CACjF,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC5F,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC;yCAIuB;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE;;kBAQlE,CAAC,EAAE,CAAC,aACZ,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,YACvB;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;wBAgB1D,CAAC,OAAK,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;EAU5D"}

package/lib/utils/createRecipeContext.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { createContext, forwardRef, useContext } from 'react';
+
+function createRecipeContext(recipe) {
+  const PropsContext = createContext(null);
+  const PropsProvider = ({ children, value }) => {
+    return /* @__PURE__ */ jsx(PropsContext.Provider, { value, children });
+  };
+  function useProps() {
+    return useContext(PropsContext);
+  }
+  const withContext = (Component, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = forwardRef((innerProps, ref) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps);
+      return /* @__PURE__ */ jsx(Component, { ref, ...otherProps, className: clsx(className, props.className) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  function withPropsProvider() {
+    return PropsProvider;
+  }
+  return {
+    PropsProvider,
+    useProps,
+    withContext,
+    withPropsProvider
+  };
+}
+
+export { createRecipeContext };

package/lib/utils/createSlotRecipeContext.cjs

@@ -0,0 +1,77 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('clsx');
+const React = require('react');
+
+function createSlotRecipeContext(recipe) {
+  const ClassNamesContext = React.createContext(null);
+  const PropsContext = React.createContext(null);
+  const ClassNamesProvider = ({
+    children,
+    value
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesContext.Provider, { value, children });
+  };
+  const PropsProvider = ({ children, value }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsContext.Provider, { value, children });
+  };
+  function useClassNames() {
+    const context = React.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 React.useContext(PropsContext);
+  }
+  const withRootProvider = (Component, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = (innerProps) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps);
+      return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...otherProps }) });
+    };
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withProvider = (Component, slot, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = React.forwardRef((innerProps, ref) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps);
+      const className = classNames[slot];
+      return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...otherProps, className: clsx(className, props.className) }) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withContext = (Component, slot) => {
+    const StyledComponent = React.forwardRef((props, ref) => {
+      const classNames = useClassNames();
+      const className = classNames?.[slot];
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...props, className: clsx(className, props.className) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  return {
+    ClassNamesProvider,
+    PropsProvider,
+    useClassNames,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext
+  };
+}
+
+exports.createSlotRecipeContext = createSlotRecipeContext;

package/lib/utils/createSlotRecipeContext.d.ts

@@ -0,0 +1,24 @@
+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 declare function createSlotRecipeContext<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>>(recipe: SlotRecipe<Props, Classnames>): {
+    ClassNamesProvider: ({ children, value, }: {
+        children: React.ReactNode;
+        value: Classnames;
+    }) => import("react/jsx-runtime").JSX.Element;
+    PropsProvider: ({ children, value }: {
+        children: React.ReactNode;
+        value: Props;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useClassNames: () => Classnames;
+    useProps: () => Props | null;
+    withRootProvider: <P>(Component: React.ElementType<any>, options?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P>>;
+    withProvider: <T, P>(Component: React.ElementType<any>, slot: keyof Classnames, options?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+    withContext: <T, P>(Component: React.ElementType<any>, slot?: keyof Classnames) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+};
+export {};
+//# sourceMappingURL=createSlotRecipeContext.d.ts.map

package/lib/utils/createSlotRecipeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSlotRecipeContext.d.ts","sourceRoot":"","sources":["../../src/utils/createSlotRecipeContext.tsx"],"names":[],"mappings":"AAGA,KAAK,UAAU,CACb,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACvC,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,GAAG;IACpC,iBAAiB,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC;CACjF,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC;+CAOlC;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,KAAK,EAAE,UAAU,CAAC;KACnB;yCAI2C;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE;;;uBAmB7D,CAAC,aACd,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,YACvB;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;mBAsBtC,CAAC,EAAE,CAAC,aACb,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,QAC3B,MAAM,UAAU,YACZ;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;kBAuBhE,CAAC,EAAE,CAAC,aACZ,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,SAC1B,MAAM,UAAU,KACtB,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;EAsBtF"}

package/lib/utils/createSlotRecipeContext.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { createContext, forwardRef, useContext } from 'react';
+
+function createSlotRecipeContext(recipe) {
+  const ClassNamesContext = createContext(null);
+  const PropsContext = createContext(null);
+  const ClassNamesProvider = ({
+    children,
+    value
+  }) => {
+    return /* @__PURE__ */ jsx(ClassNamesContext.Provider, { value, children });
+  };
+  const PropsProvider = ({ children, value }) => {
+    return /* @__PURE__ */ jsx(PropsContext.Provider, { value, children });
+  };
+  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 = (Component, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = (innerProps) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps);
+      return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(Component, { ...otherProps }) });
+    };
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withProvider = (Component, slot, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = forwardRef((innerProps, ref) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps);
+      const className = classNames[slot];
+      return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(Component, { ref, ...otherProps, className: clsx(className, props.className) }) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withContext = (Component, slot) => {
+    const StyledComponent = forwardRef((props, ref) => {
+      const classNames = useClassNames();
+      const className = classNames?.[slot];
+      return /* @__PURE__ */ jsx(Component, { ref, ...props, className: clsx(className, props.className) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  return {
+    ClassNamesProvider,
+    PropsProvider,
+    useClassNames,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext
+  };
+}
+
+export { createSlotRecipeContext };

package/lib/utils/createWithStateProps.cjs

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+
+function createWithStateProps(useContexts) {
+  return function withStateProps(Component) {
+    const Node = React.forwardRef((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);
+        }
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...stateProps, ...props });
+    });
+    Node.displayName = Component.displayName || Component.name;
+    return Node;
+  };
+}
+
+exports.createWithStateProps = createWithStateProps;