@naderikladious/react-flow 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Nader Ikladious
+
+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,85 @@
+# react-flow
+
+Utilities for declarative control-flow primitives in React, written in TypeScript and packaged for ESM/CJS consumers.
+
+## Motivation
+- Keep conditional and iterative UI logic readable without custom hooks per component.
+- Provide type-safe, render-prop based building blocks (`Flow.Condition`, `Flow.If`, `Flow.ForEach`, etc.).
+- Ship tree-shakeable named exports for both bundlers and Node targets.
+
+## Installation
+```bash
+npm install react-flow
+```
+
+If working from this repo locally, install and build the library first:
+```bash
+npm install
+npm run build
+```
+
+To explore the Vite example app:
+```bash
+cd example
+npm install
+npm run dev
+```
+
+## API
+- `Flow.Condition` — provides a boolean value to descendants.
+- `Flow.If` — renders children when the condition is true (prop overrides context).
+- `Flow.Else` — renders children when the condition is false (prop overrides context).
+- `Flow.ForEach<T>` — iterates an array with an optional `keyExtractor` and render-function children `(item, index) => ReactNode`.
+- `Flow.For` — iterates `count` times with optional `start` and `step`, render-function children `(index) => ReactNode`.
+- `Flow.Batch<T>` — groups items into chunks of `batchSize` and renders `(batch, batchIndex) => ReactNode` using `Flow.ForEach` under the hood.
+- `useFlowCondition` — hook to read the nearest `Flow.Condition` value (throws if missing).
+
+All components are also available as named exports (tree-shakeable) in addition to the `Flow` namespace object.
+
+## Examples
+Basic conditionals:
+```tsx
+<Flow.Condition value={isEnabled}>
+  <Flow.If>
+    <div>Enabled</div>
+  </Flow.If>
+  <Flow.Else>
+    <div>Disabled</div>
+  </Flow.Else>
+</Flow.Condition>
+```
+
+Lists and batches:
+```tsx
+<Flow.ForEach items={items} keyExtractor={(item) => item.id}>
+  {(item) => <div>{item.name}</div>}
+</Flow.ForEach>
+
+<Flow.Batch items={products} batchSize={3}>
+  {(batch, i) => (
+    <section>
+      <h3>Batch {i + 1}</h3>
+      {batch.map((product) => (
+        <div key={product.id}>{product.title}</div>
+      ))}
+    </section>
+  )}
+</Flow.Batch>
+```
+
+Numeric loops:
+```tsx
+<Flow.For count={5} start={1}>
+  {(index) => <span key={index}>{index}</span>}
+</Flow.For>
+```
+
+## Scripts
+- `npm run build` — bundle to `dist/` (CJS, ESM, and `.d.ts`).
+- `npm run clean` — clear and recreate `dist/`.
+- `npm run lint` — placeholder.
+
+## Project structure
+- `src/` — library source.
+- `dist/` — build output (CJS, ESM, types).
+- `example/` — Vite app consuming the local package via `file:..`.

package/dist/index.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const FlowConditionContext = React.createContext({
+    value: false,
+    hasProvider: false,
+});
+const Condition = ({ value, children }) => {
+    return (jsxRuntime.jsx(FlowConditionContext.Provider, { value: { value, hasProvider: true }, children: children }));
+};
+const resolveCondition = (condition, context, componentName) => {
+    if (typeof condition === "boolean") {
+        return condition;
+    }
+    if (context.hasProvider) {
+        return context.value;
+    }
+    throw new Error(`${componentName} requires a condition prop or Flow.Condition parent.`);
+};
+const If = ({ condition, children }) => {
+    const context = React.useContext(FlowConditionContext);
+    const active = resolveCondition(condition, context, "Flow.If");
+    return active ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) : null;
+};
+const Else = ({ condition, children }) => {
+    const context = React.useContext(FlowConditionContext);
+    const active = resolveCondition(condition, context, "Flow.Else");
+    return !active ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) : null;
+};
+const ForEach = ({ items, keyExtractor, children }) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item, index) => (jsxRuntime.jsx(React.Fragment, { children: children(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }));
+};
+const For = ({ count, start = 0, step = 1, children }) => {
+    if (!Number.isFinite(count) || count < 0) {
+        console.warn("Flow.For received an invalid count; rendering nothing.");
+        return null;
+    }
+    if (!Number.isFinite(step) || step === 0) {
+        throw new Error("Flow.For requires a finite non-zero step.");
+    }
+    const iterations = Math.min(count, 10000);
+    const items = Array.from({ length: iterations }, (_, i) => start + i * step);
+    if (iterations !== count) {
+        // Guardrail against accidental infinite or huge loops.
+        console.warn("Flow.For capped iterations at 10,000 to avoid infinite loops.");
+    }
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((value, idx) => (jsxRuntime.jsx(React.Fragment, { children: children(value) }, value))) }));
+};
+const chunkItems = (items, batchSize) => {
+    const batches = [];
+    for (let i = 0; i < items.length; i += batchSize) {
+        batches.push(items.slice(i, i + batchSize));
+    }
+    return batches;
+};
+const Batch = ({ items, batchSize, children }) => {
+    if (!Number.isInteger(batchSize) || batchSize <= 0) {
+        throw new Error("Flow.Batch requires a positive integer batchSize.");
+    }
+    const batches = chunkItems(items, batchSize);
+    return (jsxRuntime.jsx(ForEach, { items: batches, keyExtractor: (_, index) => index, children: (batch, batchIndex) => children(batch, batchIndex) }));
+};
+const useFlowCondition = () => {
+    const context = React.useContext(FlowConditionContext);
+    if (!context.hasProvider) {
+        throw new Error("useFlowCondition must be used within a Flow.Condition.");
+    }
+    return context.value;
+};
+const Flow = {
+    Condition,
+    If,
+    Else,
+    ForEach,
+    For,
+    Batch,
+};
+const ReactFlow = ({ message = "Hello from react-flow" }) => {
+    return jsxRuntime.jsx("div", { children: message });
+};
+
+exports.Batch = Batch;
+exports.Condition = Condition;
+exports.Else = Else;
+exports.Flow = Flow;
+exports.For = For;
+exports.ForEach = ForEach;
+exports.If = If;
+exports.ReactFlow = ReactFlow;
+exports.default = ReactFlow;
+exports.useFlowCondition = useFlowCondition;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/index.tsx"],"sourcesContent":["import React from \"react\";\n\ntype FlowConditionContextValue = {\n  value: boolean;\n  hasProvider: boolean;\n};\n\nconst FlowConditionContext = React.createContext<FlowConditionContextValue>({\n  value: false,\n  hasProvider: false,\n});\n\nexport type FlowConditionProps = {\n  value: boolean;\n  children?: React.ReactNode;\n};\n\nexport const Condition: React.FC<FlowConditionProps> = ({ value, children }) => {\n  return (\n    <FlowConditionContext.Provider value={{ value, hasProvider: true }}>\n      {children}\n    </FlowConditionContext.Provider>\n  );\n};\n\nexport type FlowConditionalBranchProps = {\n  condition?: boolean;\n  children?: React.ReactNode;\n};\n\nconst resolveCondition = (\n  condition: boolean | undefined,\n  context: FlowConditionContextValue,\n  componentName: string\n) => {\n  if (typeof condition === \"boolean\") {\n    return condition;\n  }\n  if (context.hasProvider) {\n    return context.value;\n  }\n  throw new Error(`${componentName} requires a condition prop or Flow.Condition parent.`);\n};\n\nexport const If: React.FC<FlowConditionalBranchProps> = ({ condition, children }) => {\n  const context = React.useContext(FlowConditionContext);\n  const active = resolveCondition(condition, context, \"Flow.If\");\n  return active ? <>{children}</> : null;\n};\n\nexport const Else: React.FC<FlowConditionalBranchProps> = ({ condition, children }) => {\n  const context = React.useContext(FlowConditionContext);\n  const active = resolveCondition(condition, context, \"Flow.Else\");\n  return !active ? <>{children}</> : null;\n};\n\nexport type FlowForEachProps<T> = {\n  items: T[];\n  keyExtractor?: (item: T, index: number) => React.Key;\n  children: (item: T, index: number) => React.ReactNode;\n};\n\nexport const ForEach = <T,>({ items, keyExtractor, children }: FlowForEachProps<T>): React.ReactElement => {\n  return (\n    <>\n      {items.map((item, index) => (\n        <React.Fragment key={keyExtractor ? keyExtractor(item, index) : index}>{children(item, index)}</React.Fragment>\n      ))}\n    </>\n  );\n};\n\nexport type FlowForProps = {\n  count: number;\n  start?: number;\n  step?: number;\n  children: (index: number) => React.ReactNode;\n};\n\nexport const For: React.FC<FlowForProps> = ({ count, start = 0, step = 1, children }) => {\n  if (!Number.isFinite(count) || count < 0) {\n    console.warn(\"Flow.For received an invalid count; rendering nothing.\");\n    return null;\n  }\n  if (!Number.isFinite(step) || step === 0) {\n    throw new Error(\"Flow.For requires a finite non-zero step.\");\n  }\n\n  const iterations = Math.min(count, 10_000);\n  const items = Array.from({ length: iterations }, (_, i) => start + i * step);\n\n  if (iterations !== count) {\n    // Guardrail against accidental infinite or huge loops.\n    console.warn(\"Flow.For capped iterations at 10,000 to avoid infinite loops.\");\n  }\n\n  return (\n    <>\n      {items.map((value, idx) => (\n        <React.Fragment key={value}>{children(value)}</React.Fragment>\n      ))}\n    </>\n  );\n};\n\nexport type FlowBatchProps<T> = {\n  items: T[];\n  batchSize: number;\n  children: (batch: T[], batchIndex: number) => React.ReactNode;\n};\n\nconst chunkItems = <T,>(items: T[], batchSize: number): T[][] => {\n  const batches: T[][] = [];\n  for (let i = 0; i < items.length; i += batchSize) {\n    batches.push(items.slice(i, i + batchSize));\n  }\n  return batches;\n};\n\nexport const Batch = <T,>({ items, batchSize, children }: FlowBatchProps<T>): React.ReactElement => {\n  if (!Number.isInteger(batchSize) || batchSize <= 0) {\n    throw new Error(\"Flow.Batch requires a positive integer batchSize.\");\n  }\n\n  const batches = chunkItems(items, batchSize);\n\n  return (\n    <ForEach\n      items={batches}\n      keyExtractor={(_, index) => index}\n    >\n      {(batch, batchIndex) => children(batch, batchIndex)}\n    </ForEach>\n  );\n};\n\nexport const useFlowCondition = () => {\n  const context = React.useContext(FlowConditionContext);\n  if (!context.hasProvider) {\n    throw new Error(\"useFlowCondition must be used within a Flow.Condition.\");\n  }\n  return context.value;\n};\n\nexport const Flow = {\n  Condition,\n  If,\n  Else,\n  ForEach,\n  For,\n  Batch,\n};\n\nexport type ReactFlowProps = {\n  message?: string;\n};\n\nexport const ReactFlow: React.FC<ReactFlowProps> = ({ message = \"Hello from react-flow\" }) => {\n  return <div>{message}</div>;\n};\n\nexport default ReactFlow;\n"],"names":["_jsx","_Fragment"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+
+type FlowConditionProps = {
+    value: boolean;
+    children?: React.ReactNode;
+};
+declare const Condition: React.FC<FlowConditionProps>;
+type FlowConditionalBranchProps = {
+    condition?: boolean;
+    children?: React.ReactNode;
+};
+declare const If: React.FC<FlowConditionalBranchProps>;
+declare const Else: React.FC<FlowConditionalBranchProps>;
+type FlowForEachProps<T> = {
+    items: T[];
+    keyExtractor?: (item: T, index: number) => React.Key;
+    children: (item: T, index: number) => React.ReactNode;
+};
+declare const ForEach: <T>({ items, keyExtractor, children }: FlowForEachProps<T>) => React.ReactElement;
+type FlowForProps = {
+    count: number;
+    start?: number;
+    step?: number;
+    children: (index: number) => React.ReactNode;
+};
+declare const For: React.FC<FlowForProps>;
+type FlowBatchProps<T> = {
+    items: T[];
+    batchSize: number;
+    children: (batch: T[], batchIndex: number) => React.ReactNode;
+};
+declare const Batch: <T>({ items, batchSize, children }: FlowBatchProps<T>) => React.ReactElement;
+declare const useFlowCondition: () => boolean;
+declare const Flow: {
+    Condition: React.FC<FlowConditionProps>;
+    If: React.FC<FlowConditionalBranchProps>;
+    Else: React.FC<FlowConditionalBranchProps>;
+    ForEach: <T>({ items, keyExtractor, children }: FlowForEachProps<T>) => React.ReactElement;
+    For: React.FC<FlowForProps>;
+    Batch: <T>({ items, batchSize, children }: FlowBatchProps<T>) => React.ReactElement;
+};
+type ReactFlowProps = {
+    message?: string;
+};
+declare const ReactFlow: React.FC<ReactFlowProps>;
+
+export { Batch, Condition, Else, Flow, For, ForEach, If, ReactFlow, ReactFlow as default, useFlowCondition };
+export type { FlowBatchProps, FlowConditionProps, FlowConditionalBranchProps, FlowForEachProps, FlowForProps, ReactFlowProps };

package/dist/index.mjs

@@ -0,0 +1,83 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+
+const FlowConditionContext = React.createContext({
+    value: false,
+    hasProvider: false,
+});
+const Condition = ({ value, children }) => {
+    return (jsx(FlowConditionContext.Provider, { value: { value, hasProvider: true }, children: children }));
+};
+const resolveCondition = (condition, context, componentName) => {
+    if (typeof condition === "boolean") {
+        return condition;
+    }
+    if (context.hasProvider) {
+        return context.value;
+    }
+    throw new Error(`${componentName} requires a condition prop or Flow.Condition parent.`);
+};
+const If = ({ condition, children }) => {
+    const context = React.useContext(FlowConditionContext);
+    const active = resolveCondition(condition, context, "Flow.If");
+    return active ? jsx(Fragment, { children: children }) : null;
+};
+const Else = ({ condition, children }) => {
+    const context = React.useContext(FlowConditionContext);
+    const active = resolveCondition(condition, context, "Flow.Else");
+    return !active ? jsx(Fragment, { children: children }) : null;
+};
+const ForEach = ({ items, keyExtractor, children }) => {
+    return (jsx(Fragment, { children: items.map((item, index) => (jsx(React.Fragment, { children: children(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }));
+};
+const For = ({ count, start = 0, step = 1, children }) => {
+    if (!Number.isFinite(count) || count < 0) {
+        console.warn("Flow.For received an invalid count; rendering nothing.");
+        return null;
+    }
+    if (!Number.isFinite(step) || step === 0) {
+        throw new Error("Flow.For requires a finite non-zero step.");
+    }
+    const iterations = Math.min(count, 10000);
+    const items = Array.from({ length: iterations }, (_, i) => start + i * step);
+    if (iterations !== count) {
+        // Guardrail against accidental infinite or huge loops.
+        console.warn("Flow.For capped iterations at 10,000 to avoid infinite loops.");
+    }
+    return (jsx(Fragment, { children: items.map((value, idx) => (jsx(React.Fragment, { children: children(value) }, value))) }));
+};
+const chunkItems = (items, batchSize) => {
+    const batches = [];
+    for (let i = 0; i < items.length; i += batchSize) {
+        batches.push(items.slice(i, i + batchSize));
+    }
+    return batches;
+};
+const Batch = ({ items, batchSize, children }) => {
+    if (!Number.isInteger(batchSize) || batchSize <= 0) {
+        throw new Error("Flow.Batch requires a positive integer batchSize.");
+    }
+    const batches = chunkItems(items, batchSize);
+    return (jsx(ForEach, { items: batches, keyExtractor: (_, index) => index, children: (batch, batchIndex) => children(batch, batchIndex) }));
+};
+const useFlowCondition = () => {
+    const context = React.useContext(FlowConditionContext);
+    if (!context.hasProvider) {
+        throw new Error("useFlowCondition must be used within a Flow.Condition.");
+    }
+    return context.value;
+};
+const Flow = {
+    Condition,
+    If,
+    Else,
+    ForEach,
+    For,
+    Batch,
+};
+const ReactFlow = ({ message = "Hello from react-flow" }) => {
+    return jsx("div", { children: message });
+};
+
+export { Batch, Condition, Else, Flow, For, ForEach, If, ReactFlow, ReactFlow as default, useFlowCondition };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/index.tsx"],"sourcesContent":["import React from \"react\";\n\ntype FlowConditionContextValue = {\n  value: boolean;\n  hasProvider: boolean;\n};\n\nconst FlowConditionContext = React.createContext<FlowConditionContextValue>({\n  value: false,\n  hasProvider: false,\n});\n\nexport type FlowConditionProps = {\n  value: boolean;\n  children?: React.ReactNode;\n};\n\nexport const Condition: React.FC<FlowConditionProps> = ({ value, children }) => {\n  return (\n    <FlowConditionContext.Provider value={{ value, hasProvider: true }}>\n      {children}\n    </FlowConditionContext.Provider>\n  );\n};\n\nexport type FlowConditionalBranchProps = {\n  condition?: boolean;\n  children?: React.ReactNode;\n};\n\nconst resolveCondition = (\n  condition: boolean | undefined,\n  context: FlowConditionContextValue,\n  componentName: string\n) => {\n  if (typeof condition === \"boolean\") {\n    return condition;\n  }\n  if (context.hasProvider) {\n    return context.value;\n  }\n  throw new Error(`${componentName} requires a condition prop or Flow.Condition parent.`);\n};\n\nexport const If: React.FC<FlowConditionalBranchProps> = ({ condition, children }) => {\n  const context = React.useContext(FlowConditionContext);\n  const active = resolveCondition(condition, context, \"Flow.If\");\n  return active ? <>{children}</> : null;\n};\n\nexport const Else: React.FC<FlowConditionalBranchProps> = ({ condition, children }) => {\n  const context = React.useContext(FlowConditionContext);\n  const active = resolveCondition(condition, context, \"Flow.Else\");\n  return !active ? <>{children}</> : null;\n};\n\nexport type FlowForEachProps<T> = {\n  items: T[];\n  keyExtractor?: (item: T, index: number) => React.Key;\n  children: (item: T, index: number) => React.ReactNode;\n};\n\nexport const ForEach = <T,>({ items, keyExtractor, children }: FlowForEachProps<T>): React.ReactElement => {\n  return (\n    <>\n      {items.map((item, index) => (\n        <React.Fragment key={keyExtractor ? keyExtractor(item, index) : index}>{children(item, index)}</React.Fragment>\n      ))}\n    </>\n  );\n};\n\nexport type FlowForProps = {\n  count: number;\n  start?: number;\n  step?: number;\n  children: (index: number) => React.ReactNode;\n};\n\nexport const For: React.FC<FlowForProps> = ({ count, start = 0, step = 1, children }) => {\n  if (!Number.isFinite(count) || count < 0) {\n    console.warn(\"Flow.For received an invalid count; rendering nothing.\");\n    return null;\n  }\n  if (!Number.isFinite(step) || step === 0) {\n    throw new Error(\"Flow.For requires a finite non-zero step.\");\n  }\n\n  const iterations = Math.min(count, 10_000);\n  const items = Array.from({ length: iterations }, (_, i) => start + i * step);\n\n  if (iterations !== count) {\n    // Guardrail against accidental infinite or huge loops.\n    console.warn(\"Flow.For capped iterations at 10,000 to avoid infinite loops.\");\n  }\n\n  return (\n    <>\n      {items.map((value, idx) => (\n        <React.Fragment key={value}>{children(value)}</React.Fragment>\n      ))}\n    </>\n  );\n};\n\nexport type FlowBatchProps<T> = {\n  items: T[];\n  batchSize: number;\n  children: (batch: T[], batchIndex: number) => React.ReactNode;\n};\n\nconst chunkItems = <T,>(items: T[], batchSize: number): T[][] => {\n  const batches: T[][] = [];\n  for (let i = 0; i < items.length; i += batchSize) {\n    batches.push(items.slice(i, i + batchSize));\n  }\n  return batches;\n};\n\nexport const Batch = <T,>({ items, batchSize, children }: FlowBatchProps<T>): React.ReactElement => {\n  if (!Number.isInteger(batchSize) || batchSize <= 0) {\n    throw new Error(\"Flow.Batch requires a positive integer batchSize.\");\n  }\n\n  const batches = chunkItems(items, batchSize);\n\n  return (\n    <ForEach\n      items={batches}\n      keyExtractor={(_, index) => index}\n    >\n      {(batch, batchIndex) => children(batch, batchIndex)}\n    </ForEach>\n  );\n};\n\nexport const useFlowCondition = () => {\n  const context = React.useContext(FlowConditionContext);\n  if (!context.hasProvider) {\n    throw new Error(\"useFlowCondition must be used within a Flow.Condition.\");\n  }\n  return context.value;\n};\n\nexport const Flow = {\n  Condition,\n  If,\n  Else,\n  ForEach,\n  For,\n  Batch,\n};\n\nexport type ReactFlowProps = {\n  message?: string;\n};\n\nexport const ReactFlow: React.FC<ReactFlowProps> = ({ message = \"Hello from react-flow\" }) => {\n  return <div>{message}</div>;\n};\n\nexport default ReactFlow;\n"],"names":["_jsx","_Fragment"],"mappings":"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"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@naderikladious/react-flow",
+  "version": "0.1.0",
+  "description": "Declarative control-flow primitives for React (Condition/If/Else, For/ForEach, Batch) with TypeScript types.",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NaderIkladious/react-flow.git"
+  },
+  "bugs": {
+    "url": "https://github.com/NaderIkladious/react-flow/issues"
+  },
+  "homepage": "https://github.com/NaderIkladious/react-flow#readme",
+  "scripts": {
+    "build": "npm run clean && rollup -c",
+    "clean": "rm -rf dist && mkdir -p dist",
+    "dev": "npm run build -- --watch",
+    "lint": "echo 'No linter configured yet'",
+    "release": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "library"
+  ],
+  "author": "Nader Ikladious",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^2.6.2"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "rollup": "^4.9.1",
+    "rollup-plugin-dts": "^6.1.0",
+    "typescript": "^5.3.0"
+  }
+}