react-super-switch 1.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Dimitris Damilos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,334 @@
+# React Super Switch
+
+A small React utility component for **deterministic, readable, and safe conditional rendering**.
+
+`react-super-switch` guarantees that **exactly one** view is rendered from a set of mutually exclusive options, even when conditions are complex, unrelated, or derived from business logic.
+
+---
+
+## Why React Super Switch exists
+
+Conditional rendering in React often starts simple and slowly becomes hard to reason about.
+
+### The common problem
+
+```tsx
+return (
+  <>
+    {caseA && <ViewA />}
+    {caseB && <ViewB />}
+    {caseC && <ViewC />}
+    {caseD && <ViewD />}
+  </>
+);
+```
+
+This pattern has several issues:
+
+- Multiple views can accidentally render at the same time
+- Ordering and priority are implicit and fragile
+- Negating conditions quickly becomes unreadable
+- Refactors are risky and hard to review
+- React Fragments are often required just to make JSX valid
+- React does not support `switch` or `if / else` directly in JSX
+
+As business logic grows, correctness and readability degrade fast.
+
+## The solution
+
+`React Super Switch` introduces a declarative, safe alternative:
+
+- Exactly one option is rendered
+- Conditions are clearly scoped
+- Priority is explicit (optional)
+- A default fallback can be defined
+
+Invalid configurations fail loudly during development
+
+## Installation
+
+```bash
+npm install react-super-switch
+```
+
+### Requirements
+
+- React 17 or newer
+- `react` and `react-dom` are peer dependencies
+- No runtime Node.js requirement for consumers
+
+## Basic usage
+
+```tsx
+import { SuperSwitch, Option } from "react-super-switch";
+```
+
+> The package exposes named exports only.
+
+## Example
+
+### Before
+
+```tsx
+return (
+  <>
+    {businessCaseA && <ViewA />}
+    {businessCaseB && <ViewB />}
+    {businessCaseC && <ViewC />}
+    {businessCaseD && <ViewD />}
+  </>
+);
+```
+
+### After
+
+```tsx
+return (
+  <SuperSwitch>
+    <Option condition={businessCaseA}>
+      <ViewA />
+    </Option>
+
+    <Option condition={businessCaseB}>
+      <ViewB />
+    </Option>
+
+    <Option condition={businessCaseC} default>
+      <ViewC />
+    </Option>
+
+    <Option condition={businessCaseD}>
+      <ViewD />
+    </Option>
+  </SuperSwitch>
+);
+```
+
+**Only one** `<Option />` will ever render.
+
+## Core concepts
+
+### `<SuperSwitch />`
+
+The parent component that evaluates all `<Option />` children and decides which one to render.
+
+```tsx
+<SuperSwitch mode="fcfs | priority">{options}</SuperSwitch>
+```
+
+| Prop   | Type                     | Default  | Description                          |
+| ------ | ------------------------ | -------- | ------------------------------------ |
+| `mode` | `"fcfs"` or `"priority"` | `"fcfs"` | Determines how options are evaluated |
+
+### `<Option />`
+
+Represents a single renderable branch.
+
+```tsx
+<Option condition={boolean} priority={number} default>
+  {children}
+</Option>
+```
+
+| Prop          | Type        | Required | Description                              |
+| ------------- | ----------- | -------- | ---------------------------------------- |
+| `condition`   | `boolean`   | ❌       | Whether this option is eligible          |
+| `priority`    | `number`    | ❌       | Ordering hint (lower = higher priority)  |
+| `data-testid` | `string`    | ❌       | A unique identifier for testing purposes |
+| `default`     | `boolean`   | ❌       | Fallback option if no conditions match   |
+| `children`    | `ReactNode` | ✅       | Rendered when this option is selected    |
+
+### Evaluation modes
+
+#### 1. `fcfs` (First-Come-First-Served) — default
+
+Options are evaluated in JSX order.
+
+- The first option with a truthy condition wins
+- If no conditions match, the first default option is rendered
+- priority is ignored
+
+```tsx
+<SuperSwitch>
+  <Option condition={a}>
+    <A />
+  </Option>
+  <Option condition={b}>
+    <B />
+  </Option>
+  <Option default>
+    <Fallback />
+  </Option>
+</SuperSwitch>
+```
+
+Use this mode when **visual order already represents priority**.
+
+#### 2. `priority`
+
+Options are evaluated by explicit priority.
+
+- All `<Option />` elements must define `priority`
+- Lower numbers mean higher priority (`1` beats `2`)
+- Order in JSX does not matter
+- Default options are still supported
+
+```tsx
+<SuperSwitch mode="priority">
+  <Option condition={a} priority={2}>
+    <A />
+  </Option>
+  <Option condition={b} priority={1}>
+    <B />
+  </Option>
+  <Option default priority={99}>
+    <Fallback />
+  </Option>
+</SuperSwitch>
+```
+
+Use this mode when:
+
+- Business rules are complex
+- Priority changes frequently
+- You want cleaner diffs and safer refactors
+
+### Default option behaviour
+
+- At most one option is rendered
+- If no conditions match:
+  - the first default option is rendered
+- If no default exists, an error is thrown
+
+## Runtime validation (development safety)
+
+### Invalid children
+
+```tsx
+<SuperSwitch>
+  <div /> {/* ❌ not allowed */}
+</SuperSwitch>
+```
+
+### Missing default
+
+```tsx
+<SuperSwitch>
+  <Option condition={false}>
+    <A />
+  </Option>
+</SuperSwitch>
+```
+
+### Invalid priority usage
+
+```tsx
+<SuperSwitch mode="priority">
+  <Option condition={a} priority={1}>
+    <A />
+  </Option>
+  <Option condition={b}>
+    <B />
+  </Option>{" "}
+  {/* ❌ missing priority */}
+</SuperSwitch>
+```
+
+## When should you use this library?
+
+- When rendering logic depends on multiple independent conditions
+- When only one view must ever render
+- When priority must be explicit and reviewable
+- When you want fail-fast behaviour instead of silent bugs
+
+### When not to use it
+
+- Simple ternaries
+- Binary conditions (`if / else`)
+- List rendering (map)
+
+## Comparison with existing libraries
+
+There are a few existing React libraries that aim to improve conditional rendering.
+They are useful in certain scenarios, but they solve a **different class of problems**
+than `react-super-switch`.
+
+The goal of this library is **deterministic, exclusive rendering** with explicit
+prioritisation and fail-fast guarantees.
+
+---
+
+### `react-switch`
+
+`react-switch` provides a JSX-friendly abstraction similar to a `switch / case`
+statement.
+
+**What it’s good at:**
+
+- Cleaner syntax than inline `&&` expressions
+- Familiar `switch`-like mental model
+
+**Limitations:**
+
+- Multiple cases can render at the same time
+- No priority or ordering guarantees
+- No enforced default or fallback
+- No runtime validation
+
+`react-switch` assumes conditions are mutually exclusive, but does not enforce that
+assumption.
+
+---
+
+### `react-if`
+
+`react-if` models imperative `if / else if / else` logic in JSX.
+
+**What it’s good at:**
+
+- Simple, linear conditional flows
+- Readable for small, sequential branches
+
+**Limitations:**
+
+- Conditions must be logically chained
+- No concept of independent business rules
+- No priority system
+- Does not guarantee that only one branch renders
+
+This approach works well for simple control flow, but becomes hard to maintain when
+conditions are unrelated or derived from complex business logic.
+
+---
+
+### `react-if-vz`
+
+`react-if-vz` is conceptually closer to `react-super-switch` and attempts to introduce
+more structured conditional rendering.
+
+**Limitations:**
+
+- Largely unmaintained
+- Weak TypeScript support
+- No enforced exclusivity
+- Priority is implicit rather than guaranteed
+- No fail-fast validation
+
+---
+
+### Why `react-super-switch` exists
+
+`react-super-switch` focuses on **correctness and intent**, not just syntax:
+
+- Exactly **one** option is rendered, or an error is thrown
+- Priority is a **first-class concept**
+- Default behaviour is explicit and enforced
+- Invalid configurations fail loudly during development
+- JSX remains clean and declarative
+
+If your rendering logic depends on **multiple independent conditions** and only one
+view must ever render, `react-super-switch` is designed specifically for that use case.
+
+## License
+
+MIT

package/dist/components/Option/Option.d.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react";
+export type OptionProps = {
+    condition?: boolean;
+    "data-testid"?: string;
+    default?: boolean;
+    priority?: number;
+};
+declare const Option: ({ children }: PropsWithChildren<OptionProps>) => import("react/jsx-runtime").JSX.Element;
+export default Option;
+//# sourceMappingURL=Option.d.ts.map

package/dist/components/Option/Option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../src/components/Option/Option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,cAAc,iBAAiB,CAAC,WAAW,CAAC,4CAAoB,CAAC;AAEjF,eAAe,MAAM,CAAC"}

package/dist/components/Option/index.d.ts

@@ -0,0 +1,4 @@
+import Option from "./Option";
+export { type OptionProps } from './Option';
+export default Option;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Option/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Option/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/components/SuperSwitch/SuperSwitch.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+import type { OptionProps } from "../Option";
+import type { OptionChild } from "./types";
+export type SuperSwitchProps = {
+    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];
+    mode?: "priority" | "fcfs";
+};
+declare const SuperSwitch: ({ children, mode }: SuperSwitchProps) => OptionChild | null;
+export default SuperSwitch;
+//# sourceMappingURL=SuperSwitch.d.ts.map

package/dist/components/SuperSwitch/SuperSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuperSwitch.d.ts","sourceRoot":"","sources":["../../../src/components/SuperSwitch/SuperSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,YAAY,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAClE,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,oBAA6B,gBAAgB,uBA2CjE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/SuperSwitch/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const ERROR_MESSAGES: Record<string, string>;
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/SuperSwitch/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/SuperSwitch/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAIjD,CAAC"}

package/dist/components/SuperSwitch/index.d.ts

@@ -0,0 +1,4 @@
+import SuperSwitch from "./SuperSwitch";
+export { type SuperSwitchProps } from './SuperSwitch';
+export default SuperSwitch;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SuperSwitch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SuperSwitch/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/components/SuperSwitch/types.d.ts

@@ -0,0 +1,4 @@
+import type { JSXElementConstructor, ReactElement } from "react";
+import type { OptionProps } from "../Option";
+export type OptionChild = ReactElement<OptionProps, string | JSXElementConstructor<any>>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/SuperSwitch/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SuperSwitch/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC,CAAC"}

package/dist/components/SuperSwitch/utils.d.ts

@@ -0,0 +1,3 @@
+import type { OptionChild } from "./types";
+export declare const sortByPriority: (options: OptionChild[]) => OptionChild[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/SuperSwitch/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/SuperSwitch/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,cAAc,GAAI,SAAS,WAAW,EAAE,kBAiBjD,CAAC"}

package/dist/index.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react");var b={exports:{}},_={};var L;function ne(){if(L)return _;L=1;var i=Symbol.for("react.transitional.element"),l=Symbol.for("react.fragment");function f(u,n,s){var d=null;if(s!==void 0&&(d=""+s),n.key!==void 0&&(d=""+n.key),"key"in n){s={};for(var p in n)p!=="key"&&(s[p]=n[p])}else s=n;return n=s.ref,{$$typeof:i,type:u,key:d,ref:n!==void 0?n:null,props:s}}return _.Fragment=l,_.jsx=f,_.jsxs=f,_}var R={};var M;function oe(){return M||(M=1,process.env.NODE_ENV!=="production"&&(function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ee?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case h:return"Fragment";case J:return"Profiler";case G:return"StrictMode";case X:return"Suspense";case Z:return"SuspenseList";case K:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case q:return"Portal";case H:return e.displayName||"Context";case z:return(e._context.displayName||"Context")+".Consumer";case B:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Q:return r=e.displayName||null,r!==null?r:i(e.type)||"Memo";case P:r=e._payload,e=e._init;try{return i(e(r))}catch{}}return null}function l(e){return""+e}function f(e){try{l(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),l(e)}}function u(e){if(e===h)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===P)return"<...>";try{var r=i(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function n(){var e=w.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function d(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function p(e,r){function t(){C||(C=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function m(){var e=i(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function c(e,r,t,o,T,A){var a=t.ref;return e={$$typeof:x,type:e,key:r,props:t,_owner:o},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:m}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function S(e,r,t,o,T,A){var a=r.children;if(a!==void 0)if(o)if(re(a)){for(o=0;o<a.length;o++)y(a[o]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(a);if(I.call(r,"key")){a=i(e);var E=Object.keys(r).filter(function(te){return te!=="key"});o=0<E.length?"{key: someKey, "+E.join(": ..., ")+": ...}":"{key: someKey}",F[a+o]||(E=0<E.length?"{"+E.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,a,E,a),F[a+o]=!0)}if(a=null,t!==void 0&&(f(t),a=""+t),d(r)&&(f(r.key),a=""+r.key),"key"in r){t={};for(var N in r)N!=="key"&&(t[N]=r[N])}else t=r;return a&&p(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),c(e,a,t,n(),T,A)}function y(e){j(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===P&&(e._payload.status==="fulfilled"?j(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function j(e){return typeof e=="object"&&e!==null&&e.$$typeof===x}var v=O,x=Symbol.for("react.transitional.element"),q=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),G=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),z=Symbol.for("react.consumer"),H=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),Z=Symbol.for("react.suspense_list"),Q=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),K=Symbol.for("react.activity"),ee=Symbol.for("react.client.reference"),w=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,re=Array.isArray,k=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var C,Y={},D=v.react_stack_bottom_frame.bind(v,s)(),$=k(u(s)),F={};R.Fragment=h,R.jsx=function(e,r,t){var o=1e4>w.recentlyCreatedOwnerStacks++;return S(e,r,t,!1,o?Error("react-stack-top-frame"):D,o?k(u(e)):$)},R.jsxs=function(e,r,t){var o=1e4>w.recentlyCreatedOwnerStacks++;return S(e,r,t,!0,o?Error("react-stack-top-frame"):D,o?k(u(e)):$)}})()),R}var V;function ae(){return V||(V=1,process.env.NODE_ENV==="production"?b.exports=ne():b.exports=oe()),b.exports}var W=ae();const U=({children:i})=>W.jsx(W.Fragment,{children:i}),g={INVALID_CHILDREN_TYPE:"SuperSwitch only accepts <Option /> as children. Received an invalid child instead.",MISSING_PRIORITIES:'SuperSwitch is running in "priority" mode, but not all <Option /> elements define a priority. When using priority mode, every <Option /> must specify a numeric "priority" prop.',NO_OPTION_TO_RENDER:"SuperSwitch could not determine which option to render. No <Option /> had a truthy condition, and no default option was provided."},ie=i=>i.sort((l,f)=>{const u=l.props?.priority,n=f.props?.priority;return u===void 0&&n===void 0?0:u===void 0?1:n===void 0||u<n?-1:u>n?1:0}),se=({children:i,mode:l="fcfs"})=>{const[f,u]=O.useState(null);return O.useEffect(()=>{const n=[];let s=!1,d=!0;if(O.Children.forEach(i,c=>{if(!(c?.type===U))throw new Error(g.INVALID_CHILDREN_TYPE);n.push(c),c.props.priority!==void 0?s=!0:d=!1}),l==="priority"&&s&&!d)throw new Error(g.MISSING_PRIORITIES);const p=l==="priority"?ie(n):n,m=p.find(c=>!!c.props.condition&&!c.props.default)??p.find(c=>!!c.props.default);if(!m)throw new Error(g.NO_OPTION_TO_RENDER);u(m)},[i,l]),f};exports.Option=U;exports.SuperSwitch=se;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SuperSwitch, type SuperSwitchProps } from "./components/SuperSwitch";
+export { default as Option, type OptionProps } from "./components/Option";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,289 @@
+import re, { useState as te, useEffect as ne, Children as oe } from "react";
+var b = { exports: {} }, _ = {};
+var F;
+function ae() {
+  if (F) return _;
+  F = 1;
+  var i = /* @__PURE__ */ Symbol.for("react.transitional.element"), u = /* @__PURE__ */ Symbol.for("react.fragment");
+  function f(l, n, s) {
+    var d = null;
+    if (s !== void 0 && (d = "" + s), n.key !== void 0 && (d = "" + n.key), "key" in n) {
+      s = {};
+      for (var p in n)
+        p !== "key" && (s[p] = n[p]);
+    } else s = n;
+    return n = s.ref, {
+      $$typeof: i,
+      type: l,
+      key: d,
+      ref: n !== void 0 ? n : null,
+      props: s
+    };
+  }
+  return _.Fragment = u, _.jsx = f, _.jsxs = f, _;
+}
+var m = {};
+var L;
+function ie() {
+  return L || (L = 1, process.env.NODE_ENV !== "production" && (function() {
+    function i(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Q ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case S:
+          return "Fragment";
+        case G:
+          return "Profiler";
+        case U:
+          return "StrictMode";
+        case H:
+          return "Suspense";
+        case B:
+          return "SuspenseList";
+        case Z:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case W:
+            return "Portal";
+          case J:
+            return e.displayName || "Context";
+          case q:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case z:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case X:
+            return r = e.displayName || null, r !== null ? r : i(e.type) || "Memo";
+          case h:
+            r = e._payload, e = e._init;
+            try {
+              return i(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function u(e) {
+      return "" + e;
+    }
+    function f(e) {
+      try {
+        u(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          o
+        ), u(e);
+      }
+    }
+    function l(e) {
+      if (e === S) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === h)
+        return "<...>";
+      try {
+        var r = i(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function n() {
+      var e = P.A;
+      return e === null ? null : e.getOwner();
+    }
+    function s() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (j.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function p(e, r) {
+      function t() {
+        I || (I = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function R() {
+      var e = i(this.type);
+      return C[e] || (C[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function c(e, r, t, o, T, k) {
+      var a = t.ref;
+      return e = {
+        $$typeof: x,
+        type: e,
+        key: r,
+        props: t,
+        _owner: o
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: R
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: T
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: k
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function O(e, r, t, o, T, k) {
+      var a = r.children;
+      if (a !== void 0)
+        if (o)
+          if (K(a)) {
+            for (o = 0; o < a.length; o++)
+              y(a[o]);
+            Object.freeze && Object.freeze(a);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else y(a);
+      if (j.call(r, "key")) {
+        a = i(e);
+        var E = Object.keys(r).filter(function(ee) {
+          return ee !== "key";
+        });
+        o = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", $[a + o] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          o,
+          a,
+          E,
+          a
+        ), $[a + o] = !0);
+      }
+      if (a = null, t !== void 0 && (f(t), a = "" + t), d(r) && (f(r.key), a = "" + r.key), "key" in r) {
+        t = {};
+        for (var A in r)
+          A !== "key" && (t[A] = r[A]);
+      } else t = r;
+      return a && p(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), c(
+        e,
+        a,
+        t,
+        n(),
+        T,
+        k
+      );
+    }
+    function y(e) {
+      g(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === h && (e._payload.status === "fulfilled" ? g(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function g(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === x;
+    }
+    var v = re, x = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), S = /* @__PURE__ */ Symbol.for("react.fragment"), U = /* @__PURE__ */ Symbol.for("react.strict_mode"), G = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), J = /* @__PURE__ */ Symbol.for("react.context"), z = /* @__PURE__ */ Symbol.for("react.forward_ref"), H = /* @__PURE__ */ Symbol.for("react.suspense"), B = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), h = /* @__PURE__ */ Symbol.for("react.lazy"), Z = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), P = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, K = Array.isArray, w = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    v = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var I, C = {}, Y = v.react_stack_bottom_frame.bind(
+      v,
+      s
+    )(), D = w(l(s)), $ = {};
+    m.Fragment = S, m.jsx = function(e, r, t) {
+      var o = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return O(
+        e,
+        r,
+        t,
+        !1,
+        o ? Error("react-stack-top-frame") : Y,
+        o ? w(l(e)) : D
+      );
+    }, m.jsxs = function(e, r, t) {
+      var o = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return O(
+        e,
+        r,
+        t,
+        !0,
+        o ? Error("react-stack-top-frame") : Y,
+        o ? w(l(e)) : D
+      );
+    };
+  })()), m;
+}
+var M;
+function se() {
+  return M || (M = 1, process.env.NODE_ENV === "production" ? b.exports = ae() : b.exports = ie()), b.exports;
+}
+var V = se();
+const le = ({ children: i }) => /* @__PURE__ */ V.jsx(V.Fragment, { children: i }), N = {
+  INVALID_CHILDREN_TYPE: "SuperSwitch only accepts <Option /> as children. Received an invalid child instead.",
+  MISSING_PRIORITIES: 'SuperSwitch is running in "priority" mode, but not all <Option /> elements define a priority. When using priority mode, every <Option /> must specify a numeric "priority" prop.',
+  NO_OPTION_TO_RENDER: "SuperSwitch could not determine which option to render. No <Option /> had a truthy condition, and no default option was provided."
+}, ue = (i) => i.sort((u, f) => {
+  const l = u.props?.priority, n = f.props?.priority;
+  return l === void 0 && n === void 0 ? 0 : l === void 0 ? 1 : n === void 0 || l < n ? -1 : l > n ? 1 : 0;
+}), fe = ({ children: i, mode: u = "fcfs" }) => {
+  const [f, l] = te(null);
+  return ne(() => {
+    const n = [];
+    let s = !1, d = !0;
+    if (oe.forEach(i, (c) => {
+      if (!(c?.type === le))
+        throw new Error(N.INVALID_CHILDREN_TYPE);
+      n.push(c), c.props.priority !== void 0 ? s = !0 : d = !1;
+    }), u === "priority" && s && !d)
+      throw new Error(N.MISSING_PRIORITIES);
+    const p = u === "priority" ? ue(n) : n, R = p.find((c) => !!c.props.condition && !c.props.default) ?? p.find((c) => !!c.props.default);
+    if (!R)
+      throw new Error(N.NO_OPTION_TO_RENDER);
+    l(R);
+  }, [i, u]), f;
+};
+export {
+  le as Option,
+  fe as SuperSwitch
+};

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "react-super-switch",
+  "version": "1.0.3",
+  "type": "module",
+  "description": "Deterministic conditional rendering for React. Render exactly one option from multiple independent conditions, with explicit priority and fail-fast guarantees.",
+  "author": {
+    "name": "Dimitris Damilos",
+    "url": "https://github.com/Jonur"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/Jonur/react-super-switch#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Jonur/react-super-switch.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Jonur/react-super-switch/issues"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "conditional-rendering",
+    "switch",
+    "jsx",
+    "ui",
+    "frontend",
+    "business-logic",
+    "priority",
+    "deterministic"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "format": "prettier . --write",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc -p .",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.1",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.50.1",
+    "@typescript-eslint/parser": "^8.50.1",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "^4.0.16",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-unused-imports": "^4.3.0",
+    "jsdom": "^27.4.0",
+    "prettier": "^3.7.4",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16"
+  }
+}