@jswork/react-render-controls 1.0.1

package/README.md

@@ -0,0 +1,7 @@
+# react-render-controls
+> A lightweight, headless React component library for declarative conditional rendering, pattern matching, and list mapping. SSR-friendly, zero UI, and fully type-safe.
+
+## installation
+```shell
+yarn add @jswork/react-render-controls
+```

package/dist/main.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var c=Object.defineProperty,A=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var V=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var s=(t,e,n)=>e in t?c(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,p=(t,e)=>{for(var n in e||(e={}))V.call(e,n)&&s(t,n,e[n]);if(d)for(var n of d(e))b.call(e,n)&&s(t,n,e[n]);return t},m=(t,e)=>A(t,M(e)),o=(t,e)=>c(t,"name",{value:e,configurable:!0});var _react = require('react'); var _react2 = _interopRequireDefault(_react);var h,l=typeof process!="undefined"&&((h=process.env)==null?void 0:h.NODE_ENV)!=="production";function g(t){return typeof t=="function"}o(g,"isRenderFn");function x(t,e,n,r){if(r===void 0)return e;if(typeof r=="function")return r(t,e,n);let i=t[r];return i==null?(l&&console.warn(`RenderList: keyBy="${String(r)}" but the field is undefined in ${JSON.stringify(t)}`),e):i}o(x,"getKey");function R({items:t,render:e,keyBy:n}){return _react2.default.createElement(_react2.default.Fragment,null,t.map((r,i)=>{let f=x(r,i,t,n);if(g(e))return _react2.default.createElement(_react2.default.Fragment,{key:f},e(r,i,t));let{component:a,dataKey:w="item",props:C={}}=e,I=m(p({},C),{[w]:r});return _react2.default.createElement(_react2.default.Fragment,{key:f},_react2.default.createElement(a,I))}))}o(R,"RenderList");function F({when:t,children:e}){let n=_react.Children.toArray(e);return n.length===0?null:(n.length>2&&l&&console.warn(`RenderIf: Expected at most 2 children, but got ${n.length}. Only the first 2 children will be used.`),n.length===1?t?n[0]:null:t?n[0]:n[1])}o(F,"RenderIf");var S=F;function y(t,e){for(let n=0;n<e.length;n++){let r=e[n];if(typeof r=="string"){if(r===t)return n}else if(r.includes(t))return n}return-1}o(y,"findMatchIndex");function v(t){let e=[];for(let n of t)typeof n=="string"?e.push(n):e.push(...n);return e}o(v,"getAllValues");function L({value:t,items:e,children:n}){var f;let r=y(t,e);if(r===-1){if(l){let a=v(e);console.warn(`RenderMatch: Value "${t}" not found in any of the items. Available values: [${a.join(", ")}]`)}return null}let i=_react.Children.toArray(n).filter(a=>_react.isValidElement.call(void 0, a));return r>=i.length?(l&&console.warn(`RenderMatch: Not enough children provided. Expected at least ${r+1}, but got ${i.length}.`),null):(f=i[r])!=null?f:null}o(L,"RenderMatch");var O=L;function E(t){for(let e=0;e<t.length;e++)if(t[e])return e;return-1}o(E,"findTrueCaseIndex");function $(t,e,n){l&&t>e&&console.warn(`${n}: More cases (${t}) than children (${e}). Extra cases will be ignored.`)}o($,"validateCasesLength");function J({cases:t,children:e,fallback:n=null}){let r=_react.Children.toArray(e).filter(f=>_react.isValidElement.call(void 0, f));$(t.length,r.length,"RenderSwitch");let i=E(t);return i>=0&&i<r.length?r[i]:n}o(J,"RenderSwitch");var P=J;exports.RenderIf = S; exports.RenderList = R; exports.RenderMatch = O; exports.RenderSwitch = P;
+//# sourceMappingURL=main.cjs.js.map

package/dist/main.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/feizheng/github/react-render-controls/packages/lib/dist/main.cjs.js","../src/render-list/index.tsx","../src/shared/env.ts","../src/render-list/render-list.utils.ts"],"names":["_a","isDev","process","env","NODE_ENV","isRenderFn","render","getKey","item","index","items","keyBy","undefined","value","console","warn","String","JSON","stringify"],"mappings":"AAAA,6KAAI,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CCA3d,4EAAkB,ICAlBA,CAAAA,CAGaC,CAAAA,CACX,OAAOC,OAAAA,EAAY,WAAA,EAAA,CAAA,CAAeA,CAAAA,CAAAA,OAAAA,CAAQC,GAAAA,CAAAA,EAARD,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,CAAAA,CAAaE,QAAAA,CAAAA,GAAa,YAAA,CCEvD,SAASC,CAAAA,CAAcC,CAAAA,CAAqB,CACjD,OAAO,OAAOA,CAAAA,EAAW,UAC3B,CAFgBD,CAAAA,CAAAA,CAAAA,CAAAA,YAAAA,CAAAA,CAOT,SAASE,CAAAA,CACdC,CAAAA,CACAC,CAAAA,CACAC,CAAAA,CACAC,CAAAA,CAA2B,CAE3B,EAAA,CAAIA,CAAAA,GAAUC,KAAAA,CAAAA,CACZ,OAAOH,CAAAA,CAGT,EAAA,CAAI,OAAOE,CAAAA,EAAU,UAAA,CACnB,OAAOA,CAAAA,CAAMH,CAAAA,CAAMC,CAAAA,CAAOC,CAAAA,CAAAA,CAG5B,IAAMG,CAAAA,CAASL,CAAAA,CAAiCG,CAAAA,CAAAA,CAChD,OAA2BE,CAAAA,EAAU,IAAA,CAAA,CAC/BZ,CAAAA,EACFa,OAAAA,CAAQC,IAAAA,CACN,CAAA,mBAAA,EAAsBC,MAAAA,CAAOL,CAAAA,CAAAA,CAAAA,gCAAAA,EAAyCM,IAAAA,CAAKC,SAAAA,CAAUV,CAAAA,CAAAA,CAAAA,CAAAA","file":"/Users/feizheng/github/react-render-controls/packages/lib/dist/main.cjs.js","sourcesContent":[null,"import React from 'react';\nimport type { RenderListProps } from './render-list.type';\nimport { isRenderFn, getKey } from './render-list.utils';\n\n/**\n * RenderList - Recommended list component\n *\n * @example Function style\n * ```tsx\n * <RenderList\n *   items={users}\n *   render={(user) => <UserCard user={user} />}\n *   keyBy=\"id\"\n * />\n * ```\n *\n * @example Component style\n * ```tsx\n * <RenderList\n *   items={users}\n *   render={{\n *     component: UserCard,\n *     dataKey: \"user\",\n *     props: { variant: 'compact' }\n *   }}\n *   keyBy=\"id\"\n * />\n * ```\n */\nexport default function RenderList<T>({ items, render, keyBy }: RenderListProps<T>) {\n  return (\n    <>\n      {items.map((item, index) => {\n        const key = getKey(item, index, items, keyBy);\n\n        // If render is a function, call it directly\n        if (isRenderFn(render)) {\n          return <React.Fragment key={key}>{render(item, index, items)}</React.Fragment>;\n        }\n\n        // If render is component config, wrap props automatically\n        const { component: Component, dataKey = 'item', props = {} } = render;\n        const componentProps = {\n          ...props,\n          [dataKey]: item,\n        };\n\n        return (\n          <React.Fragment key={key}>\n            <Component {...componentProps} />\n          </React.Fragment>\n        );\n      })}\n    </>\n  );\n}\n","/**\n * Check if running in development mode\n */\nexport const isDev =\n  typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';\n\n","import type { RenderProp, RenderFn, KeyBy } from './render-list.type';\nimport { isDev } from '../shared/env';\n\n/**\n * Type guard: check if render is a function type\n */\nexport function isRenderFn<T>(render: RenderProp<T>): render is RenderFn<T> {\n  return typeof render === 'function';\n}\n\n/**\n * Get the unique key for a list item\n */\nexport function getKey<T>(\n  item: T,\n  index: number,\n  items: readonly T[],\n  keyBy: KeyBy<T> | undefined,\n): string | number {\n  if (keyBy === undefined) {\n    return index;\n  }\n\n  if (typeof keyBy === 'function') {\n    return keyBy(item, index, items);\n  }\n\n  const value = (item as Record<string, unknown>)[keyBy as string];\n  if (value === undefined || value === null) {\n    if (isDev) {\n      console.warn(\n        `RenderList: keyBy=\"${String(keyBy)}\" but the field is undefined in ${JSON.stringify(item)}`,\n      );\n    }\n    return index;\n  }\n\n  return value as string | number;\n}\n"]}

package/dist/main.d.mts

@@ -0,0 +1,206 @@
+import * as react from 'react';
+import react__default, { ReactNode, ElementType, ReactElement } from 'react';
+
+type RenderFn<T> = (item: T, index: number, items: readonly T[]) => ReactNode;
+interface RenderComponentConfig<P> {
+    component: ElementType<P & {
+        children?: ReactNode;
+    }>;
+    /**
+     * Specifies the name of the data field
+     * @example dataKey="user" will pass item as user prop to the component
+     */
+    dataKey?: string;
+    /** Additional props to pass to the component */
+    props?: P;
+}
+type RenderProp<T> = RenderFn<T> | RenderComponentConfig<any>;
+type KeyBy<T> = ((item: T, index: number, items: readonly T[]) => string | number) | keyof T;
+interface RenderListProps<T> {
+    items: readonly T[];
+    /**
+     * Unified render prop
+     *
+     * @example Function
+     * render={(user) => <UserCard user={user} />}
+     *
+     * @example Component
+     * render={{
+     *   component: UserCard,
+     *   dataKey: "user",
+     *   props: { variant: 'compact' }
+     * }}
+     */
+    render: RenderProp<T>;
+    /**
+     * Specifies how to get the unique key for each item
+     * - Pass a function: (item) => item.id
+     * - Pass a field name: "id"
+     * @default (item, index) => index
+     */
+    keyBy?: KeyBy<T>;
+}
+
+/**
+ * RenderList - Recommended list component
+ *
+ * @example Function style
+ * ```tsx
+ * <RenderList
+ *   items={users}
+ *   render={(user) => <UserCard user={user} />}
+ *   keyBy="id"
+ * />
+ * ```
+ *
+ * @example Component style
+ * ```tsx
+ * <RenderList
+ *   items={users}
+ *   render={{
+ *     component: UserCard,
+ *     dataKey: "user",
+ *     props: { variant: 'compact' }
+ *   }}
+ *   keyBy="id"
+ * />
+ * ```
+ */
+declare function RenderList<T>({ items, render, keyBy }: RenderListProps<T>): react__default.JSX.Element;
+
+interface RenderIfProps {
+    /**
+     * Condition to determine which child to render
+     * - true: renders the first child
+     * - false: renders the second child (if provided)
+     */
+    when: boolean;
+    /**
+     * Children to render based on condition
+     * - 1 child: renders when `when` is true, nothing when false
+     * - 2 children: first renders when `when` is true, second when false
+     */
+    children: ReactNode;
+}
+
+/**
+ * RenderIf - Conditional rendering component
+ *
+ * @example Single child (render when true, nothing when false)
+ * ```tsx
+ * <RenderIf when={isLoggedIn}>
+ *   <Dashboard />
+ * </RenderIf>
+ * ```
+ *
+ * @example Two children (if/else pattern)
+ * ```tsx
+ * <RenderIf when={isLoggedIn}>
+ *   <Dashboard />
+ *   <Login />
+ * </RenderIf>
+ * ```
+ */
+declare function RenderIf({ when, children }: RenderIfProps): string | number | react.ReactElement<any, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null;
+
+type MatchValue = string | readonly string[];
+interface RenderMatchProps<T = string> {
+    /**
+     * The value to match against items
+     * @example "pending" | "success" | "error"
+     */
+    value: T;
+    /**
+     * List of match values
+     * - Can be a single string: "pending"
+     * - Can be an array of strings: ["pending", "processing"]
+     *
+     * The index of the matched item determines which child to render
+     */
+    items: readonly MatchValue[];
+    /**
+     * Children to render based on matched index
+     * - First child renders when value matches items[0]
+     * - Second child renders when value matches items[1]
+     * - And so on...
+     */
+    children: ReactNode;
+}
+
+/**
+ * RenderMatch - Match value against items and render corresponding child
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RenderMatch value="success" items={['pending', 'success', 'error']}>
+ *   <PendingState />
+ *   <SuccessState />
+ *   <ErrorState />
+ * </RenderMatch>
+ * ```
+ *
+ * @example With array values (multiple values map to same child)
+ * ```tsx
+ * <RenderMatch
+ *   value="processing"
+ *   items={[['pending', 'processing'], 'success', 'error']}
+ * >
+ *   <LoadingState />
+ *   <SuccessState />
+ *   <ErrorState />
+ * </RenderMatch>
+ * ```
+ */
+declare function RenderMatch<T extends string = string>({ value, items, children, }: RenderMatchProps<T>): ReactElement<any, string | react.JSXElementConstructor<any>> | null;
+
+interface RenderSwitchProps {
+    /**
+     * Array of boolean conditions to match against children
+     * - The first true condition determines which child to render
+     * @example [true, false, false] renders the first child
+     * @example [false, true, false] renders the second child
+     */
+    cases: readonly boolean[];
+    /**
+     * Children to render based on matching case
+     * - First child renders when cases[0] is true
+     * - Second child renders when cases[1] is true
+     * - And so on...
+     */
+    children: ReactNode;
+    /**
+     * Fallback content to render when no cases match
+     * @default null
+     */
+    fallback?: ReactNode;
+}
+
+/**
+ * RenderSwitch - Switch-style conditional rendering
+ *
+ * Renders the first child whose corresponding case condition is true.
+ * If none matches, renders `fallback` (or null if not provided).
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RenderSwitch cases={[isLoading, isError, isSuccess]}>
+ *   <LoadingSpinner />
+ *   <ErrorDisplay />
+ *   <SuccessMessage />
+ * </RenderSwitch>
+ * ```
+ *
+ * @example With fallback
+ * ```tsx
+ * <RenderSwitch
+ *   cases={[isAdmin, isModerator]}
+ *   fallback={<AccessDenied />}
+ * >
+ *   <AdminPanel />
+ *   <ModeratorPanel />
+ * </RenderSwitch>
+ * ```
+ */
+declare function RenderSwitch({ cases, children, fallback, }: RenderSwitchProps): string | number | boolean | ReactElement<any, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null;
+
+export { type KeyBy, type MatchValue, type RenderComponentConfig, type RenderFn, RenderIf, type RenderIfProps, RenderList, type RenderListProps, RenderMatch, type RenderMatchProps, type RenderProp, RenderSwitch, type RenderSwitchProps };

package/dist/main.d.ts

@@ -0,0 +1,206 @@
+import * as react from 'react';
+import react__default, { ReactNode, ElementType, ReactElement } from 'react';
+
+type RenderFn<T> = (item: T, index: number, items: readonly T[]) => ReactNode;
+interface RenderComponentConfig<P> {
+    component: ElementType<P & {
+        children?: ReactNode;
+    }>;
+    /**
+     * Specifies the name of the data field
+     * @example dataKey="user" will pass item as user prop to the component
+     */
+    dataKey?: string;
+    /** Additional props to pass to the component */
+    props?: P;
+}
+type RenderProp<T> = RenderFn<T> | RenderComponentConfig<any>;
+type KeyBy<T> = ((item: T, index: number, items: readonly T[]) => string | number) | keyof T;
+interface RenderListProps<T> {
+    items: readonly T[];
+    /**
+     * Unified render prop
+     *
+     * @example Function
+     * render={(user) => <UserCard user={user} />}
+     *
+     * @example Component
+     * render={{
+     *   component: UserCard,
+     *   dataKey: "user",
+     *   props: { variant: 'compact' }
+     * }}
+     */
+    render: RenderProp<T>;
+    /**
+     * Specifies how to get the unique key for each item
+     * - Pass a function: (item) => item.id
+     * - Pass a field name: "id"
+     * @default (item, index) => index
+     */
+    keyBy?: KeyBy<T>;
+}
+
+/**
+ * RenderList - Recommended list component
+ *
+ * @example Function style
+ * ```tsx
+ * <RenderList
+ *   items={users}
+ *   render={(user) => <UserCard user={user} />}
+ *   keyBy="id"
+ * />
+ * ```
+ *
+ * @example Component style
+ * ```tsx
+ * <RenderList
+ *   items={users}
+ *   render={{
+ *     component: UserCard,
+ *     dataKey: "user",
+ *     props: { variant: 'compact' }
+ *   }}
+ *   keyBy="id"
+ * />
+ * ```
+ */
+declare function RenderList<T>({ items, render, keyBy }: RenderListProps<T>): react__default.JSX.Element;
+
+interface RenderIfProps {
+    /**
+     * Condition to determine which child to render
+     * - true: renders the first child
+     * - false: renders the second child (if provided)
+     */
+    when: boolean;
+    /**
+     * Children to render based on condition
+     * - 1 child: renders when `when` is true, nothing when false
+     * - 2 children: first renders when `when` is true, second when false
+     */
+    children: ReactNode;
+}
+
+/**
+ * RenderIf - Conditional rendering component
+ *
+ * @example Single child (render when true, nothing when false)
+ * ```tsx
+ * <RenderIf when={isLoggedIn}>
+ *   <Dashboard />
+ * </RenderIf>
+ * ```
+ *
+ * @example Two children (if/else pattern)
+ * ```tsx
+ * <RenderIf when={isLoggedIn}>
+ *   <Dashboard />
+ *   <Login />
+ * </RenderIf>
+ * ```
+ */
+declare function RenderIf({ when, children }: RenderIfProps): string | number | react.ReactElement<any, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null;
+
+type MatchValue = string | readonly string[];
+interface RenderMatchProps<T = string> {
+    /**
+     * The value to match against items
+     * @example "pending" | "success" | "error"
+     */
+    value: T;
+    /**
+     * List of match values
+     * - Can be a single string: "pending"
+     * - Can be an array of strings: ["pending", "processing"]
+     *
+     * The index of the matched item determines which child to render
+     */
+    items: readonly MatchValue[];
+    /**
+     * Children to render based on matched index
+     * - First child renders when value matches items[0]
+     * - Second child renders when value matches items[1]
+     * - And so on...
+     */
+    children: ReactNode;
+}
+
+/**
+ * RenderMatch - Match value against items and render corresponding child
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RenderMatch value="success" items={['pending', 'success', 'error']}>
+ *   <PendingState />
+ *   <SuccessState />
+ *   <ErrorState />
+ * </RenderMatch>
+ * ```
+ *
+ * @example With array values (multiple values map to same child)
+ * ```tsx
+ * <RenderMatch
+ *   value="processing"
+ *   items={[['pending', 'processing'], 'success', 'error']}
+ * >
+ *   <LoadingState />
+ *   <SuccessState />
+ *   <ErrorState />
+ * </RenderMatch>
+ * ```
+ */
+declare function RenderMatch<T extends string = string>({ value, items, children, }: RenderMatchProps<T>): ReactElement<any, string | react.JSXElementConstructor<any>> | null;
+
+interface RenderSwitchProps {
+    /**
+     * Array of boolean conditions to match against children
+     * - The first true condition determines which child to render
+     * @example [true, false, false] renders the first child
+     * @example [false, true, false] renders the second child
+     */
+    cases: readonly boolean[];
+    /**
+     * Children to render based on matching case
+     * - First child renders when cases[0] is true
+     * - Second child renders when cases[1] is true
+     * - And so on...
+     */
+    children: ReactNode;
+    /**
+     * Fallback content to render when no cases match
+     * @default null
+     */
+    fallback?: ReactNode;
+}
+
+/**
+ * RenderSwitch - Switch-style conditional rendering
+ *
+ * Renders the first child whose corresponding case condition is true.
+ * If none matches, renders `fallback` (or null if not provided).
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RenderSwitch cases={[isLoading, isError, isSuccess]}>
+ *   <LoadingSpinner />
+ *   <ErrorDisplay />
+ *   <SuccessMessage />
+ * </RenderSwitch>
+ * ```
+ *
+ * @example With fallback
+ * ```tsx
+ * <RenderSwitch
+ *   cases={[isAdmin, isModerator]}
+ *   fallback={<AccessDenied />}
+ * >
+ *   <AdminPanel />
+ *   <ModeratorPanel />
+ * </RenderSwitch>
+ * ```
+ */
+declare function RenderSwitch({ cases, children, fallback, }: RenderSwitchProps): string | number | boolean | ReactElement<any, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null;
+
+export { type KeyBy, type MatchValue, type RenderComponentConfig, type RenderFn, RenderIf, type RenderIfProps, RenderList, type RenderListProps, RenderMatch, type RenderMatchProps, type RenderProp, RenderSwitch, type RenderSwitchProps };

package/dist/main.esm.js

@@ -0,0 +1,2 @@
+var c=Object.defineProperty,A=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var V=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var s=(t,e,n)=>e in t?c(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,p=(t,e)=>{for(var n in e||(e={}))V.call(e,n)&&s(t,n,e[n]);if(d)for(var n of d(e))b.call(e,n)&&s(t,n,e[n]);return t},m=(t,e)=>A(t,M(e)),o=(t,e)=>c(t,"name",{value:e,configurable:!0});import u from"react";var h,l=typeof process!="undefined"&&((h=process.env)==null?void 0:h.NODE_ENV)!=="production";function g(t){return typeof t=="function"}o(g,"isRenderFn");function x(t,e,n,r){if(r===void 0)return e;if(typeof r=="function")return r(t,e,n);let i=t[r];return i==null?(l&&console.warn(`RenderList: keyBy="${String(r)}" but the field is undefined in ${JSON.stringify(t)}`),e):i}o(x,"getKey");function R({items:t,render:e,keyBy:n}){return u.createElement(u.Fragment,null,t.map((r,i)=>{let f=x(r,i,t,n);if(g(e))return u.createElement(u.Fragment,{key:f},e(r,i,t));let{component:a,dataKey:w="item",props:C={}}=e,I=m(p({},C),{[w]:r});return u.createElement(u.Fragment,{key:f},u.createElement(a,I))}))}o(R,"RenderList");import{Children as D}from"react";function F({when:t,children:e}){let n=D.toArray(e);return n.length===0?null:(n.length>2&&l&&console.warn(`RenderIf: Expected at most 2 children, but got ${n.length}. Only the first 2 children will be used.`),n.length===1?t?n[0]:null:t?n[0]:n[1])}o(F,"RenderIf");var S=F;import{Children as N,isValidElement as K}from"react";function y(t,e){for(let n=0;n<e.length;n++){let r=e[n];if(typeof r=="string"){if(r===t)return n}else if(r.includes(t))return n}return-1}o(y,"findMatchIndex");function v(t){let e=[];for(let n of t)typeof n=="string"?e.push(n):e.push(...n);return e}o(v,"getAllValues");function L({value:t,items:e,children:n}){var f;let r=y(t,e);if(r===-1){if(l){let a=v(e);console.warn(`RenderMatch: Value "${t}" not found in any of the items. Available values: [${a.join(", ")}]`)}return null}let i=N.toArray(n).filter(a=>K(a));return r>=i.length?(l&&console.warn(`RenderMatch: Not enough children provided. Expected at least ${r+1}, but got ${i.length}.`),null):(f=i[r])!=null?f:null}o(L,"RenderMatch");var O=L;import{Children as T,isValidElement as j}from"react";function E(t){for(let e=0;e<t.length;e++)if(t[e])return e;return-1}o(E,"findTrueCaseIndex");function $(t,e,n){l&&t>e&&console.warn(`${n}: More cases (${t}) than children (${e}). Extra cases will be ignored.`)}o($,"validateCasesLength");function J({cases:t,children:e,fallback:n=null}){let r=T.toArray(e).filter(f=>j(f));$(t.length,r.length,"RenderSwitch");let i=E(t);return i>=0&&i<r.length?r[i]:n}o(J,"RenderSwitch");var P=J;export{S as RenderIf,R as RenderList,O as RenderMatch,P as RenderSwitch};
+//# sourceMappingURL=main.esm.js.map

package/dist/main.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/render-list/index.tsx","../src/shared/env.ts","../src/render-list/render-list.utils.ts","../src/render-if/index.tsx","../src/render-match/index.tsx","../src/render-match/render-match.utils.ts","../src/render-switch/index.tsx","../src/render-switch/render-switch.utils.ts"],"sourcesContent":["import React from 'react';\nimport type { RenderListProps } from './render-list.type';\nimport { isRenderFn, getKey } from './render-list.utils';\n\n/**\n * RenderList - Recommended list component\n *\n * @example Function style\n * ```tsx\n * <RenderList\n *   items={users}\n *   render={(user) => <UserCard user={user} />}\n *   keyBy=\"id\"\n * />\n * ```\n *\n * @example Component style\n * ```tsx\n * <RenderList\n *   items={users}\n *   render={{\n *     component: UserCard,\n *     dataKey: \"user\",\n *     props: { variant: 'compact' }\n *   }}\n *   keyBy=\"id\"\n * />\n * ```\n */\nexport default function RenderList<T>({ items, render, keyBy }: RenderListProps<T>) {\n  return (\n    <>\n      {items.map((item, index) => {\n        const key = getKey(item, index, items, keyBy);\n\n        // If render is a function, call it directly\n        if (isRenderFn(render)) {\n          return <React.Fragment key={key}>{render(item, index, items)}</React.Fragment>;\n        }\n\n        // If render is component config, wrap props automatically\n        const { component: Component, dataKey = 'item', props = {} } = render;\n        const componentProps = {\n          ...props,\n          [dataKey]: item,\n        };\n\n        return (\n          <React.Fragment key={key}>\n            <Component {...componentProps} />\n          </React.Fragment>\n        );\n      })}\n    </>\n  );\n}\n","/**\n * Check if running in development mode\n */\nexport const isDev =\n  typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';\n\n","import type { RenderProp, RenderFn, KeyBy } from './render-list.type';\nimport { isDev } from '../shared/env';\n\n/**\n * Type guard: check if render is a function type\n */\nexport function isRenderFn<T>(render: RenderProp<T>): render is RenderFn<T> {\n  return typeof render === 'function';\n}\n\n/**\n * Get the unique key for a list item\n */\nexport function getKey<T>(\n  item: T,\n  index: number,\n  items: readonly T[],\n  keyBy: KeyBy<T> | undefined,\n): string | number {\n  if (keyBy === undefined) {\n    return index;\n  }\n\n  if (typeof keyBy === 'function') {\n    return keyBy(item, index, items);\n  }\n\n  const value = (item as Record<string, unknown>)[keyBy as string];\n  if (value === undefined || value === null) {\n    if (isDev) {\n      console.warn(\n        `RenderList: keyBy=\"${String(keyBy)}\" but the field is undefined in ${JSON.stringify(item)}`,\n      );\n    }\n    return index;\n  }\n\n  return value as string | number;\n}\n","import { Children } from 'react';\nimport type { RenderIfProps } from './render-if.type';\nimport { isDev } from '../shared/env';\n\n/**\n * RenderIf - Conditional rendering component\n *\n * @example Single child (render when true, nothing when false)\n * ```tsx\n * <RenderIf when={isLoggedIn}>\n *   <Dashboard />\n * </RenderIf>\n * ```\n *\n * @example Two children (if/else pattern)\n * ```tsx\n * <RenderIf when={isLoggedIn}>\n *   <Dashboard />\n *   <Login />\n * </RenderIf>\n * ```\n */\nexport function RenderIf({ when, children }: RenderIfProps) {\n  const childArray = Children.toArray(children);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  if (childArray.length > 2) {\n    if (isDev) {\n      console.warn(\n        `RenderIf: Expected at most 2 children, but got ${childArray.length}. Only the first 2 children will be used.`\n      );\n    }\n  }\n\n  if (childArray.length === 1) {\n    return when ? childArray[0] : null;\n  }\n\n  // length >= 2: first child for true, second for false\n  return when ? childArray[0] : childArray[1];\n}\n\nexport default RenderIf;\n","import { Children, isValidElement, type ReactElement } from 'react';\nimport type { RenderMatchProps } from './render-match.type';\nimport { findMatchIndex, getAllValues } from './render-match.utils';\nimport { isDev } from '../shared/env';\n\n/**\n * RenderMatch - Match value against items and render corresponding child\n *\n * @example Basic usage\n * ```tsx\n * <RenderMatch value=\"success\" items={['pending', 'success', 'error']}>\n *   <PendingState />\n *   <SuccessState />\n *   <ErrorState />\n * </RenderMatch>\n * ```\n *\n * @example With array values (multiple values map to same child)\n * ```tsx\n * <RenderMatch\n *   value=\"processing\"\n *   items={[['pending', 'processing'], 'success', 'error']}\n * >\n *   <LoadingState />\n *   <SuccessState />\n *   <ErrorState />\n * </RenderMatch>\n * ```\n */\nexport function RenderMatch<T extends string = string>({\n  value,\n  items,\n  children,\n}: RenderMatchProps<T>) {\n  // Find the matched slot index\n  const matchedIndex = findMatchIndex(value, items);\n\n  if (matchedIndex === -1) {\n    if (isDev) {\n      const allValues = getAllValues(items);\n      console.warn(\n        `RenderMatch: Value \"${value}\" not found in any of the items. Available values: [${allValues.join(', ')}]`\n      );\n    }\n    return null;\n  }\n\n  const validChildren = Children.toArray(children).filter(\n    (child): child is ReactElement => isValidElement(child)\n  );\n\n  if (matchedIndex >= validChildren.length) {\n    if (isDev) {\n      console.warn(\n        `RenderMatch: Not enough children provided. Expected at least ${matchedIndex + 1}, but got ${validChildren.length}.`\n      );\n    }\n    return null;\n  }\n\n  return validChildren[matchedIndex] ?? null;\n}\n\nexport default RenderMatch;\n","import type { MatchValue } from './render-match.type';\n\n/**\n * Find the index of the item that matches the value\n * @returns The matched index, or -1 if not found\n */\nexport function findMatchIndex(\n  value: string,\n  items: readonly MatchValue[]\n): number {\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    if (typeof item === 'string') {\n      if (item === value) {\n        return i;\n      }\n    } else {\n      // item is string[]\n      if (item.includes(value)) {\n        return i;\n      }\n    }\n  }\n  return -1;\n}\n\n/**\n * Get all possible values from items (flatten string arrays)\n */\nexport function getAllValues(items: readonly MatchValue[]): string[] {\n  const result: string[] = [];\n  for (const item of items) {\n    if (typeof item === 'string') {\n      result.push(item);\n    } else {\n      result.push(...item);\n    }\n  }\n  return result;\n}\n","import { Children, isValidElement, type ReactElement } from 'react';\nimport type { RenderSwitchProps } from './render-switch.type';\nimport { findTrueCaseIndex, validateCasesLength } from './render-switch.utils';\n\n/**\n * RenderSwitch - Switch-style conditional rendering\n *\n * Renders the first child whose corresponding case condition is true.\n * If none matches, renders `fallback` (or null if not provided).\n *\n * @example Basic usage\n * ```tsx\n * <RenderSwitch cases={[isLoading, isError, isSuccess]}>\n *   <LoadingSpinner />\n *   <ErrorDisplay />\n *   <SuccessMessage />\n * </RenderSwitch>\n * ```\n *\n * @example With fallback\n * ```tsx\n * <RenderSwitch\n *   cases={[isAdmin, isModerator]}\n *   fallback={<AccessDenied />}\n * >\n *   <AdminPanel />\n *   <ModeratorPanel />\n * </RenderSwitch>\n * ```\n */\nexport function RenderSwitch({\n  cases,\n  children,\n  fallback = null,\n}: RenderSwitchProps) {\n  const childArray = Children.toArray(children).filter(\n    (child): child is ReactElement => isValidElement(child)\n  );\n\n  validateCasesLength(cases.length, childArray.length, 'RenderSwitch');\n\n  const matchedIndex = findTrueCaseIndex(cases);\n\n  // Check if the matched index is within the children bounds\n  if (matchedIndex >= 0 && matchedIndex < childArray.length) {\n    return childArray[matchedIndex];\n  }\n\n  return fallback;\n}\n\nexport default RenderSwitch;\n","import { isDev } from '../shared/env';\n\n/**\n * Find the index of the first true case\n * @returns The index of the first true case, or -1 if none are true\n */\nexport function findTrueCaseIndex(cases: readonly boolean[]): number {\n  for (let i = 0; i < cases.length; i++) {\n    if (cases[i]) {\n      return i;\n    }\n  }\n  return -1;\n}\n\n/**\n * Validate that the number of cases matches the number of children\n */\nexport function validateCasesLength(\n  casesLength: number,\n  childrenLength: number,\n  componentName: string\n): void {\n  if (isDev && casesLength > childrenLength) {\n    console.warn(\n      `${componentName}: More cases (${casesLength}) than children (${childrenLength}). Extra cases will be ignored.`\n    );\n  }\n}\n"],"mappings":"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","names":["React","_a","isDev","process","env","NODE_ENV","isRenderFn","render","getKey","item","index","items","keyBy","undefined","value","isDev","console","warn","String","JSON","stringify","RenderList","items","render","keyBy","React","map","item","index","key","getKey","isRenderFn","Fragment","component","Component","dataKey","props","componentProps","__spreadProps","__spreadValues","Children","RenderIf","when","children","childArray","Children","toArray","length","isDev","console","warn","render_if_default","Children","isValidElement","findMatchIndex","value","items","i","length","item","includes","getAllValues","result","push","RenderMatch","value","items","children","_a","matchedIndex","findMatchIndex","isDev","allValues","getAllValues","console","warn","join","validChildren","Children","toArray","filter","child","isValidElement","length","render_match_default","Children","isValidElement","findTrueCaseIndex","cases","i","length","validateCasesLength","casesLength","childrenLength","componentName","isDev","console","warn","RenderSwitch","cases","children","fallback","childArray","Children","toArray","filter","child","isValidElement","validateCasesLength","length","matchedIndex","findTrueCaseIndex","render_switch_default"]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@jswork/react-render-controls",
+  "version": "1.0.1",
+  "main": "dist/main.cjs.js",
+  "module": "dist/main.esm.js",
+  "types": "dist/main.d.ts",
+  "description": "A lightweight, headless React component library for declarative conditional rendering, pattern matching, and list mapping. SSR-friendly, zero UI, and fully type-safe.",
+  "homepage": "https://js.work",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "release": "release-it"
+  },
+  "devDependencies": {
+    "@swc/core": "^1.3.93",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "autoprefixer": "^10.4.16",
+    "classnames": "^2.5.1",
+    "cssnano": "^6.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.2.4",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "classnames": "*"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/global.d.ts

@@ -0,0 +1,11 @@
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV?: string;
+  }
+
+  interface Process {
+    env?: ProcessEnv;
+  }
+}
+
+declare const process: NodeJS.Process;

package/src/main.tsx

@@ -0,0 +1,14 @@
+export { default as RenderList } from './render-list';
+export { default as RenderIf } from './render-if';
+export { default as RenderMatch } from './render-match';
+export { default as RenderSwitch } from './render-switch';
+export type {
+  RenderFn,
+  RenderComponentConfig,
+  RenderProp,
+  KeyBy,
+  RenderListProps,
+} from './render-list/render-list.type';
+export type { RenderIfProps } from './render-if/render-if.type';
+export type { RenderMatchProps, MatchValue } from './render-match/render-match.type';
+export type { RenderSwitchProps } from './render-switch/render-switch.type';

package/src/render-if/index.tsx

@@ -0,0 +1,46 @@
+import { Children } from 'react';
+import type { RenderIfProps } from './render-if.type';
+import { isDev } from '../shared/env';
+
+/**
+ * RenderIf - Conditional rendering component
+ *
+ * @example Single child (render when true, nothing when false)
+ * ```tsx
+ * <RenderIf when={isLoggedIn}>
+ *   <Dashboard />
+ * </RenderIf>
+ * ```
+ *
+ * @example Two children (if/else pattern)
+ * ```tsx
+ * <RenderIf when={isLoggedIn}>
+ *   <Dashboard />
+ *   <Login />
+ * </RenderIf>
+ * ```
+ */
+export function RenderIf({ when, children }: RenderIfProps) {
+  const childArray = Children.toArray(children);
+
+  if (childArray.length === 0) {
+    return null;
+  }
+
+  if (childArray.length > 2) {
+    if (isDev) {
+      console.warn(
+        `RenderIf: Expected at most 2 children, but got ${childArray.length}. Only the first 2 children will be used.`
+      );
+    }
+  }
+
+  if (childArray.length === 1) {
+    return when ? childArray[0] : null;
+  }
+
+  // length >= 2: first child for true, second for false
+  return when ? childArray[0] : childArray[1];
+}
+
+export default RenderIf;

package/src/render-if/render-if.type.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+
+export interface RenderIfProps {
+  /**
+   * Condition to determine which child to render
+   * - true: renders the first child
+   * - false: renders the second child (if provided)
+   */
+  when: boolean;
+  /**
+   * Children to render based on condition
+   * - 1 child: renders when `when` is true, nothing when false
+   * - 2 children: first renders when `when` is true, second when false
+   */
+  children: ReactNode;
+}

package/src/render-list/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { RenderListProps } from './render-list.type';
+import { isRenderFn, getKey } from './render-list.utils';
+
+/**
+ * RenderList - Recommended list component
+ *
+ * @example Function style
+ * ```tsx
+ * <RenderList
+ *   items={users}
+ *   render={(user) => <UserCard user={user} />}
+ *   keyBy="id"
+ * />
+ * ```
+ *
+ * @example Component style
+ * ```tsx
+ * <RenderList
+ *   items={users}
+ *   render={{
+ *     component: UserCard,
+ *     dataKey: "user",
+ *     props: { variant: 'compact' }
+ *   }}
+ *   keyBy="id"
+ * />
+ * ```
+ */
+export default function RenderList<T>({ items, render, keyBy }: RenderListProps<T>) {
+  return (
+    <>
+      {items.map((item, index) => {
+        const key = getKey(item, index, items, keyBy);
+
+        // If render is a function, call it directly
+        if (isRenderFn(render)) {
+          return <React.Fragment key={key}>{render(item, index, items)}</React.Fragment>;
+        }
+
+        // If render is component config, wrap props automatically
+        const { component: Component, dataKey = 'item', props = {} } = render;
+        const componentProps = {
+          ...props,
+          [dataKey]: item,
+        };
+
+        return (
+          <React.Fragment key={key}>
+            <Component {...componentProps} />
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+}

package/src/render-list/render-list.type.ts

@@ -0,0 +1,43 @@
+import { type ElementType, type ReactNode } from 'react';
+
+export type RenderFn<T> = (item: T, index: number, items: readonly T[]) => ReactNode;
+
+export interface RenderComponentConfig<P> {
+  component: ElementType<P & { children?: ReactNode }>;
+  /**
+   * Specifies the name of the data field
+   * @example dataKey="user" will pass item as user prop to the component
+   */
+  dataKey?: string;
+  /** Additional props to pass to the component */
+  props?: P;
+}
+
+export type RenderProp<T> = RenderFn<T> | RenderComponentConfig<any>;
+
+export type KeyBy<T> = ((item: T, index: number, items: readonly T[]) => string | number) | keyof T;
+
+export interface RenderListProps<T> {
+  items: readonly T[];
+  /**
+   * Unified render prop
+   *
+   * @example Function
+   * render={(user) => <UserCard user={user} />}
+   *
+   * @example Component
+   * render={{
+   *   component: UserCard,
+   *   dataKey: "user",
+   *   props: { variant: 'compact' }
+   * }}
+   */
+  render: RenderProp<T>;
+  /**
+   * Specifies how to get the unique key for each item
+   * - Pass a function: (item) => item.id
+   * - Pass a field name: "id"
+   * @default (item, index) => index
+   */
+  keyBy?: KeyBy<T>;
+}

package/src/render-list/render-list.utils.ts

@@ -0,0 +1,39 @@
+import type { RenderProp, RenderFn, KeyBy } from './render-list.type';
+import { isDev } from '../shared/env';
+
+/**
+ * Type guard: check if render is a function type
+ */
+export function isRenderFn<T>(render: RenderProp<T>): render is RenderFn<T> {
+  return typeof render === 'function';
+}
+
+/**
+ * Get the unique key for a list item
+ */
+export function getKey<T>(
+  item: T,
+  index: number,
+  items: readonly T[],
+  keyBy: KeyBy<T> | undefined,
+): string | number {
+  if (keyBy === undefined) {
+    return index;
+  }
+
+  if (typeof keyBy === 'function') {
+    return keyBy(item, index, items);
+  }
+
+  const value = (item as Record<string, unknown>)[keyBy as string];
+  if (value === undefined || value === null) {
+    if (isDev) {
+      console.warn(
+        `RenderList: keyBy="${String(keyBy)}" but the field is undefined in ${JSON.stringify(item)}`,
+      );
+    }
+    return index;
+  }
+
+  return value as string | number;
+}

package/src/render-match/index.tsx

@@ -0,0 +1,64 @@
+import { Children, isValidElement, type ReactElement } from 'react';
+import type { RenderMatchProps } from './render-match.type';
+import { findMatchIndex, getAllValues } from './render-match.utils';
+import { isDev } from '../shared/env';
+
+/**
+ * RenderMatch - Match value against items and render corresponding child
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RenderMatch value="success" items={['pending', 'success', 'error']}>
+ *   <PendingState />
+ *   <SuccessState />
+ *   <ErrorState />
+ * </RenderMatch>
+ * ```
+ *
+ * @example With array values (multiple values map to same child)
+ * ```tsx
+ * <RenderMatch
+ *   value="processing"
+ *   items={[['pending', 'processing'], 'success', 'error']}
+ * >
+ *   <LoadingState />
+ *   <SuccessState />
+ *   <ErrorState />
+ * </RenderMatch>
+ * ```
+ */
+export function RenderMatch<T extends string = string>({
+  value,
+  items,
+  children,
+}: RenderMatchProps<T>) {
+  // Find the matched slot index
+  const matchedIndex = findMatchIndex(value, items);
+
+  if (matchedIndex === -1) {
+    if (isDev) {
+      const allValues = getAllValues(items);
+      console.warn(
+        `RenderMatch: Value "${value}" not found in any of the items. Available values: [${allValues.join(', ')}]`
+      );
+    }
+    return null;
+  }
+
+  const validChildren = Children.toArray(children).filter(
+    (child): child is ReactElement => isValidElement(child)
+  );
+
+  if (matchedIndex >= validChildren.length) {
+    if (isDev) {
+      console.warn(
+        `RenderMatch: Not enough children provided. Expected at least ${matchedIndex + 1}, but got ${validChildren.length}.`
+      );
+    }
+    return null;
+  }
+
+  return validChildren[matchedIndex] ?? null;
+}
+
+export default RenderMatch;

package/src/render-match/render-match.type.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+
+export type MatchValue = string | readonly string[];
+
+export interface RenderMatchProps<T = string> {
+  /**
+   * The value to match against items
+   * @example "pending" | "success" | "error"
+   */
+  value: T;
+  /**
+   * List of match values
+   * - Can be a single string: "pending"
+   * - Can be an array of strings: ["pending", "processing"]
+   *
+   * The index of the matched item determines which child to render
+   */
+  items: readonly MatchValue[];
+  /**
+   * Children to render based on matched index
+   * - First child renders when value matches items[0]
+   * - Second child renders when value matches items[1]
+   * - And so on...
+   */
+  children: ReactNode;
+}

package/src/render-match/render-match.utils.ts

@@ -0,0 +1,40 @@
+import type { MatchValue } from './render-match.type';
+
+/**
+ * Find the index of the item that matches the value
+ * @returns The matched index, or -1 if not found
+ */
+export function findMatchIndex(
+  value: string,
+  items: readonly MatchValue[]
+): number {
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (typeof item === 'string') {
+      if (item === value) {
+        return i;
+      }
+    } else {
+      // item is string[]
+      if (item.includes(value)) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+
+/**
+ * Get all possible values from items (flatten string arrays)
+ */
+export function getAllValues(items: readonly MatchValue[]): string[] {
+  const result: string[] = [];
+  for (const item of items) {
+    if (typeof item === 'string') {
+      result.push(item);
+    } else {
+      result.push(...item);
+    }
+  }
+  return result;
+}

package/src/render-switch/index.tsx

@@ -0,0 +1,52 @@
+import { Children, isValidElement, type ReactElement } from 'react';
+import type { RenderSwitchProps } from './render-switch.type';
+import { findTrueCaseIndex, validateCasesLength } from './render-switch.utils';
+
+/**
+ * RenderSwitch - Switch-style conditional rendering
+ *
+ * Renders the first child whose corresponding case condition is true.
+ * If none matches, renders `fallback` (or null if not provided).
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RenderSwitch cases={[isLoading, isError, isSuccess]}>
+ *   <LoadingSpinner />
+ *   <ErrorDisplay />
+ *   <SuccessMessage />
+ * </RenderSwitch>
+ * ```
+ *
+ * @example With fallback
+ * ```tsx
+ * <RenderSwitch
+ *   cases={[isAdmin, isModerator]}
+ *   fallback={<AccessDenied />}
+ * >
+ *   <AdminPanel />
+ *   <ModeratorPanel />
+ * </RenderSwitch>
+ * ```
+ */
+export function RenderSwitch({
+  cases,
+  children,
+  fallback = null,
+}: RenderSwitchProps) {
+  const childArray = Children.toArray(children).filter(
+    (child): child is ReactElement => isValidElement(child)
+  );
+
+  validateCasesLength(cases.length, childArray.length, 'RenderSwitch');
+
+  const matchedIndex = findTrueCaseIndex(cases);
+
+  // Check if the matched index is within the children bounds
+  if (matchedIndex >= 0 && matchedIndex < childArray.length) {
+    return childArray[matchedIndex];
+  }
+
+  return fallback;
+}
+
+export default RenderSwitch;

package/src/render-switch/render-switch.type.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+
+export interface RenderSwitchProps {
+  /**
+   * Array of boolean conditions to match against children
+   * - The first true condition determines which child to render
+   * @example [true, false, false] renders the first child
+   * @example [false, true, false] renders the second child
+   */
+  cases: readonly boolean[];
+  /**
+   * Children to render based on matching case
+   * - First child renders when cases[0] is true
+   * - Second child renders when cases[1] is true
+   * - And so on...
+   */
+  children: ReactNode;
+  /**
+   * Fallback content to render when no cases match
+   * @default null
+   */
+  fallback?: ReactNode;
+}

package/src/render-switch/render-switch.utils.ts

@@ -0,0 +1,29 @@
+import { isDev } from '../shared/env';
+
+/**
+ * Find the index of the first true case
+ * @returns The index of the first true case, or -1 if none are true
+ */
+export function findTrueCaseIndex(cases: readonly boolean[]): number {
+  for (let i = 0; i < cases.length; i++) {
+    if (cases[i]) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Validate that the number of cases matches the number of children
+ */
+export function validateCasesLength(
+  casesLength: number,
+  childrenLength: number,
+  componentName: string
+): void {
+  if (isDev && casesLength > childrenLength) {
+    console.warn(
+      `${componentName}: More cases (${casesLength}) than children (${childrenLength}). Extra cases will be ignored.`
+    );
+  }
+}

package/src/shared/env.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if running in development mode
+ */
+export const isDev =
+  typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';
+

package/src/style.scss

@@ -0,0 +1,3 @@
+//.react-render-controls {
+//  color: red;
+//}