react-ternary-be-gone 0.1.2 → 0.1.4

package/README.md

@@ -1,4 +1,3 @@
-```markdown
 # React Conditional Component
 
 A React component designed to simplify conditional rendering and list iteration, providing a more readable and maintainable alternative to ternary operators and verbose conditional logic.
@@ -42,9 +41,9 @@ const items = ['Item 1', 'Item 2', 'Item 3'];
 const value = 'b';
 
 <Conditional switch={value}>
-  <Case when="a">A seçildi</Case>
-  <Case when="b">B seçildi</Case>
-  <Case default>Hiçbiri seçilmedi</Case>
+  <Case when="a">A selected</Case>
+  <Case when="b">B selected</Case>
+  <Case default>None selected</Case>
 </Conditional>
 
 // If-ElseIf-Else rendering
@@ -52,13 +51,13 @@ const status = 'loading';
 
 <Conditional>
   <If when={status === 'loading'}>
-    <p>Yükleniyor...</p>
+  <p>Loading...</p>
   </If>
   <ElseIf when={status === 'success'}>
-    <p>Başarılı!</p>
+  <p>Success!</p>
   </ElseIf>
   <Else>
-    <p>Durum bilinmiyor.</p>
+  <p>Status unknown.</p>
   </Else>
 </Conditional>
 
@@ -70,7 +69,7 @@ const users = [{ id: 1, name: 'Alice', active: true }, { id: 2, name: 'Bob', act
     {(user) => <p>{user.name}</p>}
   </If>
   <Else>
-    <p>Kullanıcı yok.</p>
+  <p>No users found.</p>
   </Else>
 </Conditional>
 ```
@@ -147,9 +146,9 @@ Child component for use with `switch` prop. Use `when` for matching value, and `
 
 ```javascript
 <Conditional switch={status}>
-  <Case when="loading">Yükleniyor...</Case>
-  <Case when="success">Başarılı!</Case>
-  <Case default>Durum bilinmiyor.</Case>
+  <Case when="loading">Loading...</Case>
+  <Case when="success">Success!</Case>
+  <Case default>Status unknown.</Case>
 </Conditional>
 ```
 
@@ -241,7 +240,7 @@ const emptyList = [];
 
 ### `loading`
 
-A boolean value indicating whether the component is in a loading state. If true, the `fallback` prop (or a default loading message) will be rendered.
+A boolean value indicating whether the component is in a loading state. If true, `loadingFallback` (or `fallback`, or a default loading message) will be rendered instead of `children`.
 
 **Type:** `boolean`
 
@@ -253,11 +252,25 @@ A boolean value indicating whether the component is in a loading state. If true,
 </Conditional>
 ```
 
+### `loadingFallback`
+
+Content to render while `loading` is true, taking priority over `fallback`. Use this when a route or component needs a distinct loading state instead of reusing its "nothing to show" fallback.
+
+**Type:** `ReactNode`
+
+**Example:**
+
+```javascript
+<Conditional loading={isLoading} loadingFallback={<Spinner />} fallback={<p>No data.</p>}>
+  <p>Data loaded!</p>
+</Conditional>
+```
+
 ### `error`
 
-An error message to be displayed if an error occurs.
+An error value to be displayed if an error occurs. Falsy values (`null`, `undefined`, `false`, `''`) are treated as "no error".
 
-**Type:** `string`
+**Type:** `string | Error | any`
 
 **Example:**
 
@@ -267,6 +280,20 @@ An error message to be displayed if an error occurs.
 </Conditional>
 ```
 
+### `errorFallback`
+
+Content to render instead of the default `Error: ...` message when `error` is set. Accepts a `ReactNode`, or a function that receives the `error` value and returns one.
+
+**Type:** `ReactNode | (error: any) => ReactNode`
+
+**Example:**
+
+```javascript
+<Conditional error={errorMessage} errorFallback={(err) => <Alert>{err}</Alert>}>
+  <p>Content.</p>
+</Conditional>
+```
+
 ### `keyExtractor`
 
 A function to extract a unique key for each item when iterating over the `each` array.

package/dist/Case.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _markers = require("./markers");
+var _default = exports.default = (0, _markers.createMarker)('Case', _markers.CASE);

package/dist/Conditional.js

@@ -0,0 +1,323 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _markers = require("./markers");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Pure helper: apply filter/sort/reverse/limit to an `each` array without
+// mutating the caller's array (Array.prototype.sort/reverse mutate in place,
+// so every step works off a copy).
+const processArray = (array, {
+  filter,
+  sort,
+  reverse,
+  limit
+}) => {
+  if (!Array.isArray(array)) return [];
+  let result = [...array];
+  if (typeof filter === 'function') result = result.filter(filter);
+  if (typeof sort === 'function') result = result.sort(sort);
+  if (reverse) result = result.reverse();
+  if (typeof limit === 'number') result = result.slice(0, limit);
+  return result;
+};
+
+// Pure helper: render one React.Fragment per item, guarding the render-prop
+// call so static children (a plain element instead of a function) don't
+// crash when they reach an iteration path.
+const renderIterableChildren = (items, children, keyExtractor) => items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+  children: typeof children === 'function' ? children(item, index, items) : children
+}, keyExtractor ? keyExtractor(item, index) : index));
+
+// `React.Children.toArray` flattens arrays produced by `.map()`, but an
+// author-written `<>...</>` around a set of branches is itself a single
+// Fragment element in the tree - its contents need an explicit unwrap or
+// `<If>`/`<ElseIf>`/`<Else>`/`<Case>` inside one are never seen as branches.
+const flattenBranches = children => {
+  const result = [];
+  _react.default.Children.toArray(children).forEach(child => {
+    if (child && child.type === _react.default.Fragment) {
+      result.push(...flattenBranches(child.props.children));
+    } else {
+      result.push(child);
+    }
+  });
+  return result;
+};
+const Conditional = props => {
+  const {
+    when,
+    each,
+    children,
+    fallback = null,
+    empty = null,
+    loading = false,
+    loadingFallback = null,
+    error = null,
+    errorFallback = null,
+    keyExtractor = (item, index) => index,
+    // New features
+    filter = null,
+    sort = null,
+    limit = null,
+    reverse = false,
+    animate = false,
+    wrapper: Wrapper = _react.default.Fragment,
+    debug = false,
+    onRender = null,
+    // Conditional rendering helpers
+    gt = null,
+    // greater than
+    lt = null,
+    // less than
+    eq = null,
+    // equal
+    ne = null,
+    // not equal
+    includes = null,
+    startsWith = null,
+    endsWith = null,
+    match: matchProp = null,
+    // regex match
+    // Switch-case feature
+    switch: switchValue,
+    ...rest
+  } = props;
+  if (process.env.NODE_ENV !== 'production' && Object.keys(rest).length > 0) {
+    (0, _markers.warnOnce)(`[react-ternary-be-gone] <Conditional> received unrecognised prop(s): ${Object.keys(rest).join(', ')}. ` + 'Check for a typo - they were ignored.');
+  }
+
+  // `each={undefined}` (e.g. `each={data?.items}` before data loads) must
+  // still enter iteration mode so `empty`/fallback render instead of trying
+  // to hand a render-prop function to React as a child. Distinguishing "each
+  // was never passed" from "each was passed as undefined" needs the raw
+  // props object - destructuring can't tell them apart.
+  const hasIteration = 'each' in props;
+  const hasComparisonProp = [gt, lt, eq, ne, includes, startsWith, endsWith, matchProp].some(value => value !== null && typeof value === 'object');
+  const hasCondition = when !== undefined || hasComparisonProp;
+
+  // Advanced condition evaluation
+  const evaluateCondition = (0, _react.useMemo)(() => {
+    if (when !== undefined) return Boolean(when);
+
+    // Numerical comparisons
+    if (gt !== null && typeof gt === 'object') {
+      const {
+        value,
+        target
+      } = gt;
+      return value > target;
+    }
+    if (lt !== null && typeof lt === 'object') {
+      const {
+        value,
+        target
+      } = lt;
+      return value < target;
+    }
+    if (eq !== null && typeof eq === 'object') {
+      const {
+        value,
+        target
+      } = eq;
+      return value === target;
+    }
+    if (ne !== null && typeof ne === 'object') {
+      const {
+        value,
+        target
+      } = ne;
+      return value !== target;
+    }
+
+    // String operations
+    if (includes !== null && typeof includes === 'object') {
+      const {
+        value,
+        target
+      } = includes;
+      return String(value).includes(target);
+    }
+    if (startsWith !== null && typeof startsWith === 'object') {
+      const {
+        value,
+        target
+      } = startsWith;
+      return String(value).startsWith(target);
+    }
+    if (endsWith !== null && typeof endsWith === 'object') {
+      const {
+        value,
+        target
+      } = endsWith;
+      return String(value).endsWith(target);
+    }
+    if (matchProp !== null && typeof matchProp === 'object') {
+      const {
+        value,
+        pattern
+      } = matchProp;
+      return new RegExp(pattern).test(String(value));
+    }
+    return true;
+  }, [when, gt, lt, eq, ne, includes, startsWith, endsWith, matchProp]);
+
+  // Array processing
+  const processedArray = (0, _react.useMemo)(() => {
+    const result = processArray(each, {
+      filter,
+      sort,
+      reverse,
+      limit
+    });
+    if (debug) {
+      console.log('Conditional Debug:', {
+        original: each,
+        processed: result,
+        filter: !!filter,
+        sort: !!sort,
+        reverse,
+        limit
+      });
+    }
+    return result;
+  }, [each, filter, sort, reverse, limit, debug]);
+
+  // Render callback
+  (0, _react.useEffect)(() => {
+    if (onRender && typeof onRender === 'function') {
+      onRender({
+        condition: evaluateCondition,
+        itemCount: processedArray.length,
+        hasCondition,
+        hasIteration
+      });
+    }
+  }, [evaluateCondition, processedArray.length, hasCondition, hasIteration, onRender]);
+
+  // Loading state
+  if (loading) {
+    return loadingFallback || fallback || /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "conditional-loading",
+      children: "Loading..."
+    });
+  }
+
+  // Error state
+  if (error) {
+    if (errorFallback) {
+      return typeof errorFallback === 'function' ? errorFallback(error) : errorFallback;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "conditional-error",
+      children: ["Error: ", error]
+    });
+  }
+
+  // Switch-case logic. Presence, not strict inequality to `undefined`, is
+  // what enters this mode - `switch={status}` must still honour `default`
+  // while `status` is legitimately undefined before data loads, the same
+  // reasoning as the `each` presence check above.
+  if ('switch' in props) {
+    const caseChildren = flattenBranches(children).filter(child => child && (0, _markers.markerKindOf)(child) === _markers.CASE);
+    // `.find()` stops at the first hit, matching how a real `switch` picks
+    // the first matching branch instead of the last one.
+    const matchedCase = caseChildren.find(child => !child.props.default && child.props.when === switchValue);
+    const defaultCase = caseChildren.find(child => child.props.default);
+    if (matchedCase) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+        children: matchedCase.props.children
+      });
+    }
+    if (defaultCase) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+        children: defaultCase.props.children
+      });
+    }
+    return fallback;
+  }
+
+  // If-ElseIf-Else logic
+  const branches = flattenBranches(children).filter(child => child && [_markers.IF, _markers.ELSE_IF, _markers.ELSE].includes((0, _markers.markerKindOf)(child)));
+  if (branches.length > 0) {
+    let rendered = fallback;
+    for (const branch of branches) {
+      const kind = (0, _markers.markerKindOf)(branch);
+      const {
+        when: branchWhen,
+        each: branchEach,
+        filter: branchFilter,
+        sort: branchSort,
+        limit: branchLimit,
+        reverse: branchReverse,
+        wrapper: BranchWrapper = _react.default.Fragment,
+        keyExtractor: branchKeyExtractor,
+        empty: branchEmpty,
+        fallback: branchFallback,
+        children: branchChildren
+      } = branch.props;
+      const matches = kind === _markers.ELSE || Boolean(branchWhen);
+      if (!matches) continue;
+      if ('each' in branch.props) {
+        const items = processArray(branchEach, {
+          filter: branchFilter,
+          sort: branchSort,
+          reverse: branchReverse,
+          limit: branchLimit
+        });
+        rendered = items.length === 0 ? branchEmpty || branchFallback || null : /*#__PURE__*/(0, _jsxRuntime.jsx)(BranchWrapper, {
+          children: renderIterableChildren(items, branchChildren, branchKeyExtractor)
+        });
+      } else {
+        rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(BranchWrapper, {
+          children: branchChildren
+        });
+      }
+      break;
+    }
+    return rendered;
+  }
+
+  // Only condition
+  if (hasCondition && !hasIteration) {
+    return evaluateCondition ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+      children: children
+    }) : fallback;
+  }
+
+  // Only iteration
+  if (!hasCondition && hasIteration) {
+    if (processedArray.length === 0) {
+      return empty || fallback;
+    }
+    const elements = renderIterableChildren(processedArray, children, keyExtractor);
+    // React.Fragment rejects unknown props like `className`, so the default
+    // wrapper is swapped for a real host element whenever `animate` needs
+    // somewhere to put the class.
+    const AnimatedWrapper = animate && Wrapper === _react.default.Fragment ? 'div' : Wrapper;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedWrapper, {
+      ...(animate ? {
+        className: 'conditional-animated'
+      } : null),
+      children: elements
+    });
+  }
+
+  // Both condition and iteration
+  if (hasCondition && hasIteration) {
+    if (!evaluateCondition) return fallback;
+    if (processedArray.length === 0) return empty || fallback;
+    const elements = renderIterableChildren(processedArray, children, keyExtractor);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+      children: elements
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    children: children
+  });
+};
+var _default = exports.default = Conditional;

package/dist/Else.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _markers = require("./markers");
+var _default = exports.default = (0, _markers.createMarker)('Else', _markers.ELSE);

package/dist/ElseIf.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _markers = require("./markers");
+var _default = exports.default = (0, _markers.createMarker)('ElseIf', _markers.ELSE_IF);

package/dist/If.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _markers = require("./markers");
+var _default = exports.default = (0, _markers.createMarker)('If', _markers.IF);

package/dist/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Case", {
+  enumerable: true,
+  get: function () {
+    return _Case.default;
+  }
+});
+Object.defineProperty(exports, "Else", {
+  enumerable: true,
+  get: function () {
+    return _Else.default;
+  }
+});
+Object.defineProperty(exports, "ElseIf", {
+  enumerable: true,
+  get: function () {
+    return _ElseIf.default;
+  }
+});
+Object.defineProperty(exports, "If", {
+  enumerable: true,
+  get: function () {
+    return _If.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useConditionalHelpers", {
+  enumerable: true,
+  get: function () {
+    return _useConditionalHelpers.useConditionalHelpers;
+  }
+});
+var _Conditional = _interopRequireDefault(require("./Conditional"));
+var _Case = _interopRequireDefault(require("./Case"));
+var _If = _interopRequireDefault(require("./If"));
+var _ElseIf = _interopRequireDefault(require("./ElseIf"));
+var _Else = _interopRequireDefault(require("./Else"));
+var _useConditionalHelpers = require("./useConditionalHelpers");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Conditional.default;

package/dist/markers.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.warnOnce = exports.markerKindOf = exports.createMarker = exports.IF = exports.ELSE_IF = exports.ELSE = exports.CASE = void 0;
+// Branch markers (`If`, `ElseIf`, `Else`, `Case`) are never rendered by React
+// when they are used correctly: `Conditional` reads their props and renders the
+// winning branch itself. They exist only so that JSX can express the shape.
+//
+// Identifying them by reference (`child.type === If`) breaks as soon as two
+// copies of this package end up in node_modules, so each marker carries a
+// static tag instead.
+
+const IF = exports.IF = 'if';
+const ELSE_IF = exports.ELSE_IF = 'elseif';
+const ELSE = exports.ELSE = 'else';
+const CASE = exports.CASE = 'case';
+const TAG = '$$rtbgMarker';
+const warned = new Set();
+const warnOnce = message => {
+  if (warned.has(message)) return;
+  warned.add(message);
+  console.warn(message);
+};
+exports.warnOnce = warnOnce;
+const createMarker = (name, kind) => {
+  // Rendering nothing is the safe default: a marker that slipped outside a
+  // `Conditional` must not leak the content it was meant to gate.
+  const Marker = () => {
+    if (process.env.NODE_ENV !== 'production') {
+      warnOnce(`[react-ternary-be-gone] <${name}> only works as a child of <Conditional>. ` + 'It rendered nothing.');
+    }
+    return null;
+  };
+  Marker.displayName = name;
+  Marker[TAG] = kind;
+  return Marker;
+};
+exports.createMarker = createMarker;
+const markerKindOf = element => element && element.type && element.type[TAG] || null;
+exports.markerKindOf = markerKindOf;

package/dist/useConditionalHelpers.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useConditionalHelpers = void 0;
+var _react = require("react");
+const useConditionalHelpers = () => {
+  return (0, _react.useMemo)(() => ({
+    // Quick condition helpers
+    isEmpty: array => ({
+      when: !array || array.length === 0
+    }),
+    isNotEmpty: array => ({
+      when: Boolean(array && array.length > 0)
+    }),
+    hasLength: (array, length) => ({
+      when: Boolean(array && array.length === length)
+    }),
+    isEven: num => ({
+      when: num % 2 === 0
+    }),
+    isOdd: num => ({
+      when: num % 2 !== 0
+    }),
+    // Array processing helpers
+    sortBy: (field, order = 'asc') => (a, b) => {
+      const aValue = a[field];
+      const bValue = b[field];
+
+      // `<`/`>` compare strings by raw UTF-16 code unit, which misorders
+      // accented letters (Ç, Ğ, İ, Ö, Ş, Ü, ...). localeCompare sorts them
+      // the way a person reading the list would expect.
+      let comparison;
+      if (typeof aValue === 'string' && typeof bValue === 'string') {
+        comparison = aValue.localeCompare(bValue);
+      } else if (aValue < bValue) {
+        comparison = -1;
+      } else if (aValue > bValue) {
+        comparison = 1;
+      } else {
+        comparison = 0;
+      }
+      return order === 'asc' ? comparison : -comparison;
+    },
+    filterBy: (field, value) => item => item[field] === value,
+    unique: (array, key) => {
+      if (!array) return [];
+      const seen = new Set();
+      return array.filter(item => {
+        const keyValue = typeof key === 'function' ? key(item) : item[key];
+        const isNew = !seen.has(keyValue);
+        seen.add(keyValue);
+        return isNew;
+      });
+    }
+  }), []);
+};
+exports.useConditionalHelpers = useConditionalHelpers;

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "react-ternary-be-gone",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A React component designed to simplify conditional rendering and list iteration, providing a more readable and maintainable alternative to ternary operators and verbose conditional logic.",
   "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel . --out-dir dist"
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build": "babel src --out-dir dist --out-file-extension .js",
+    "prepublishOnly": "npm test && npm run build"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -26,7 +31,15 @@
   },
   "homepage": "https://github.com/sundowatch/react-ternary-be-gone#readme",
   "devDependencies": {
-    "@babel/cli": "^7.28.0",
-    "@babel/preset-react": "^7.27.1"
+    "@babel/cli": "^8.0.0",
+    "@babel/core": "^8.0.0",
+    "@babel/preset-env": "^8.0.0",
+    "@babel/preset-react": "^8.0.0",
+    "@testing-library/react": "^16.3.3",
+    "@vitejs/plugin-react": "^5.0.0",
+    "jsdom": "^30.1.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "vitest": "^5.0.1"
   }
 }

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}

package/Case.js

@@ -1,8 +0,0 @@
-import React from 'react';
-
-const Case = ({ when, children, default: isDefault = false }) => {
-  // This component is just a marker for Conditional to process
-  return <>{children}</>;
-};
-
-export default Case;

package/Conditional.js

@@ -1,328 +0,0 @@
-import React, { useMemo, useEffect } from 'react';
-import Case from './Case';
-import If from './If';
-import ElseIf from './ElseIf';
-import Else from './Else';
-
-const Conditional = ({
-  when,
-  each,
-  children,
-  fallback = null,
-  empty = null,
-  loading = false,
-  error = null,
-  keyExtractor = (item, index) => index,
-  // New features
-  filter = null,
-  sort = null,
-  limit = null,
-  reverse = false,
-  animate = false,
-  wrapper = React.Fragment,
-  debug = false,
-  onRender = null,
-  // Conditional rendering helpers
-  gt = null, // greater than
-  lt = null, // less than
-  eq = null, // equal
-  ne = null, // not equal
-  includes = null,
-  startsWith = null,
-  endsWith = null,
-  match = null, // regex match
-  // Switch-case feature
-  switch: switchValue,
-}) => {
-  const hasCondition = when !== undefined;
-  const hasIteration = each !== undefined;
-
-  // Advanced condition evaluation
-  const evaluateCondition = useMemo(() => {
-    if (when !== undefined) return Boolean(when);
-
-    // Numerical comparisons
-    if (gt !== null && typeof gt === 'object') {
-      const { value, target } = gt;
-      return value > target;
-    }
-    if (lt !== null && typeof lt === 'object') {
-      const { value, target } = lt;
-      return value < target;
-    }
-    if (eq !== null && typeof eq === 'object') {
-      const { value, target } = eq;
-      return value === target;
-    }
-    if (ne !== null && typeof ne === 'object') {
-      const { value, target } = ne;
-      return value !== target;
-    }
-
-    // String operations
-    if (includes !== null && typeof includes === 'object') {
-      const { value, target } = includes;
-      return String(value).includes(target);
-    }
-    if (startsWith !== null && typeof startsWith === 'object') {
-      const { value, target } = startsWith;
-      return String(value).startsWith(target);
-    }
-    if (endsWith !== null && typeof endsWith === 'object') {
-      const { value, target } = endsWith;
-      return String(value).endsWith(target);
-    }
-    if (match !== null && typeof match === 'object') {
-      const { value, pattern } = match;
-      return new RegExp(pattern).test(String(value));
-    }
-
-    return true;
-  }, [when, gt, lt, eq, ne, includes, startsWith, endsWith, match]);
-
-  // Array processing
-  const processedArray = useMemo(() => {
-    if (!hasIteration || !Array.isArray(each)) return [];
-
-    let result = [...each];
-
-    // Apply filter
-    if (filter && typeof filter === 'function') {
-      result = result.filter(filter);
-    }
-
-    // Apply sort
-    if (sort && typeof sort === 'function') {
-      result = result.sort(sort);
-    }
-
-    // Apply reverse
-    if (reverse) {
-      result = result.reverse();
-    }
-
-    // Apply limit
-    if (limit && typeof limit === 'number') {
-      result = result.slice(0, limit);
-    }
-
-    if (debug) {
-      console.log('Conditional Debug:', {
-        original: each,
-        processed: result,
-        filter: !!filter,
-        sort: !!sort,
-        reverse,
-        limit
-      });
-    }
-
-    return result;
-  }, [each, filter, sort, reverse, limit, hasIteration, debug]);
-
-  // Render callback
-  useEffect(() => {
-    if (onRender && typeof onRender === 'function') {
-      onRender({
-        condition: evaluateCondition,
-        itemCount: processedArray.length,
-        hasCondition,
-        hasIteration
-      });
-    }
-  }, [evaluateCondition, processedArray.length, hasCondition, hasIteration, onRender]);
-
-  // Loading state
-  if (loading) {
-    return fallback || <div className="conditional-loading">Loading...</div>;
-  }
-
-  // Error state
-  if (error) {
-    return <div className="conditional-error">Error: {error}</div>;
-  }
-
-  // Wrapper component
-  const WrapperComponent = wrapper;
-
-  // Switch-case logic
-  if (switchValue !== undefined) {
-    // Find all Case children
-    const caseChildren = React.Children.toArray(children).filter(
-      child => child && child.type === Case
-    );
-    // Find matching case
-    let match = null;
-    let defaultCase = null;
-    caseChildren.forEach(child => {
-      if (child.props.default) {
-        defaultCase = child;
-      } else if (child.props.when === switchValue) {
-        match = child;
-      }
-    });
-    if (match) {
-      return <WrapperComponent>{match.props.children}</WrapperComponent>;
-    } else if (defaultCase) {
-      return <WrapperComponent>{defaultCase.props.children}</WrapperComponent>;
-    } else {
-      return fallback;
-    }
-  }
-
-  // If-ElseIf-Else logic
-  const childrenArray = React.Children.toArray(children);
-  const ifElseBlocks = childrenArray.filter(child =>
-    child && (child.type === If || child.type === ElseIf || child.type === Else)
-  );
-  if (ifElseBlocks.length > 0) {
-    let rendered = null;
-    for (let i = 0; i < ifElseBlocks.length; i++) {
-      const child = ifElseBlocks[i];
-      // Extract Conditional props from child
-      const {
-        when,
-        each,
-        filter,
-        sort,
-        limit,
-        reverse,
-        animate,
-        wrapper: childWrapper,
-        keyExtractor: childKeyExtractor,
-        empty: childEmpty,
-        fallback: childFallback,
-        ...rest
-      } = child.props;
-
-      // Evaluate condition
-      let condition = true;
-      if (child.type === If || child.type === ElseIf) {
-        condition = Boolean(when);
-      }
-
-      // Array processing for each
-      let arrayItems = [];
-      if (each && Array.isArray(each)) {
-        arrayItems = [...each];
-        if (filter && typeof filter === 'function') {
-          arrayItems = arrayItems.filter(filter);
-        }
-        if (sort && typeof sort === 'function') {
-          arrayItems = arrayItems.sort(sort);
-        }
-        if (reverse) {
-          arrayItems = arrayItems.reverse();
-        }
-        if (limit && typeof limit === 'number') {
-          arrayItems = arrayItems.slice(0, limit);
-        }
-      }
-
-      // Render logic
-      if ((child.type === If || child.type === ElseIf) && condition) {
-        if (each && Array.isArray(each)) {
-          if (arrayItems.length === 0) {
-            rendered = childEmpty || childFallback || null;
-            break;
-          }
-          const elements = arrayItems.map((item, idx) => (
-            <React.Fragment key={childKeyExtractor ? childKeyExtractor(item, idx) : idx}>
-              {typeof child.props.children === 'function'
-                ? child.props.children(item, idx, arrayItems)
-                : child.props.children}
-            </React.Fragment>
-          ));
-          rendered = childWrapper
-            ? React.createElement(childWrapper, null, elements)
-            : <>{elements}</>;
-          break;
-        } else {
-          rendered = childWrapper
-            ? React.createElement(childWrapper, null, child.props.children)
-            : <>{child.props.children}</>;
-          break;
-        }
-      }
-      if (child.type === Else) {
-        if (each && Array.isArray(each)) {
-          if (arrayItems.length === 0) {
-            rendered = childEmpty || childFallback || null;
-            break;
-          }
-          const elements = arrayItems.map((item, idx) => (
-            <React.Fragment key={childKeyExtractor ? childKeyExtractor(item, idx) : idx}>
-              {typeof child.props.children === 'function'
-                ? child.props.children(item, idx, arrayItems)
-                : child.props.children}
-            </React.Fragment>
-          ));
-          rendered = childWrapper
-            ? React.createElement(childWrapper, null, elements)
-            : <>{elements}</>;
-          break;
-        } else {
-          rendered = childWrapper
-            ? React.createElement(childWrapper, null, child.props.children)
-            : <>{child.props.children}</>;
-          break;
-        }
-      }
-    }
-    return rendered;
-  }
-
-  // Only condition
-  if (hasCondition && !hasIteration) {
-    return evaluateCondition ? (
-      <WrapperComponent>
-        {children}
-      </WrapperComponent>
-    ) : fallback;
-  }
-
-  // Only iteration
-  if (!hasCondition && hasIteration) {
-    if (processedArray.length === 0) {
-      return empty || fallback;
-    }
-
-    const elements = processedArray.map((item, index) => (
-      <React.Fragment key={keyExtractor(item, index)}>
-        {typeof children === 'function' ? children(item, index, processedArray) : children}
-      </React.Fragment>
-    ));
-
-    return animate ? (
-      <WrapperComponent className="conditional-animated">
-        {elements}
-      </WrapperComponent>
-    ) : (
-      <WrapperComponent>
-        {elements}
-      </WrapperComponent>
-    );
-  }
-
-  // Both condition and iteration
-  if (hasCondition && hasIteration) {
-    if (!evaluateCondition) return fallback;
-    if (processedArray.length === 0) return empty || fallback;
-
-    const elements = processedArray.map((item, index) => (
-      <React.Fragment key={keyExtractor(item, index)}>
-        {children(item, index, processedArray)}
-      </React.Fragment>
-    ));
-
-    return (
-      <WrapperComponent>
-        {elements}
-      </WrapperComponent>
-    );
-  }
-
-  return <WrapperComponent>{children}</WrapperComponent>;
-};
-
-export default Conditional;

package/Else.js

@@ -1,8 +0,0 @@
-import React from 'react';
-
-const Else = ({ children, ...rest }) => {
-  // Marker for Conditional, supports all Conditional props
-  return <>{children}</>;
-};
-
-export default Else;

package/ElseIf.js

@@ -1,8 +0,0 @@
-import React from 'react';
-
-const ElseIf = ({ when, children, ...rest }) => {
-  // Marker for Conditional, supports all Conditional props
-  return <>{children}</>;
-};
-
-export default ElseIf;

package/If.js

@@ -1,8 +0,0 @@
-import React from 'react';
-
-const If = ({ when, children, ...rest }) => {
-  // Marker for Conditional, supports all Conditional props
-  return <>{children}</>;
-};
-
-export default If;

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@babel/preset-env", "@babel/preset-react"]
-};

package/index.js

@@ -1,9 +0,0 @@
-import Conditional from './Conditional';
-import Case from './Case';
-import If from './If';
-import ElseIf from './ElseIf';
-import Else from './Else';
-import { useConditionalHelpers } from './useConditionalHelpers';
-
-export default Conditional;
-export { Case, If, ElseIf, Else, useConditionalHelpers };

package/useConditionalHelpers.js

@@ -1,36 +0,0 @@
-import { useMemo } from 'react';
-
-export const useConditionalHelpers = () => {
-  return useMemo(() => ({
-    // Quick condition helpers
-    isEmpty: (array) => ({ when: !array || array.length === 0 }),
-    isNotEmpty: (array) => ({ when: array && array.length > 0 }),
-    hasLength: (array, length) => ({ when: array && array.length === length }),
-    isEven: (num) => ({ when: num % 2 === 0 }),
-    isOdd: (num) => ({ when: num % 2 !== 0 }),
-
-    // Array processing helpers
-    sortBy: (field, order = 'asc') => (a, b) => {
-      const aValue = a[field];
-      const bValue = b[field];
-
-      if (aValue < bValue) {
-        return order === 'asc' ? -1 : 1;
-      }
-      if (aValue > bValue) {
-        return order === 'asc' ? 1 : -1;
-      }
-      return 0;
-    },
-    filterBy: (field, value) => (item) => item[field] === value,
-    unique: (array, key) => {
-      const seen = new Set();
-      return array.filter(item => {
-        const keyValue = typeof key === 'function' ? key(item) : item[key];
-        const isNew = !seen.has(keyValue);
-        seen.add(keyValue);
-        return isNew;
-      });
-    },
-  }), []);
-};