react-simplikit 0.0.51 → 0.0.53

package/README.md

@@ -27,7 +27,7 @@ We are repositioning react-simplikit to focus exclusively on **platform-independ
 Hooks that don't depend on specific platform APIs will continue to be actively maintained:
 
 - State management hooks like `useToggle`, `useBooleanState`, `useCounter`
-- Lifecycle hooks like `usePrevious`, `useMount`
+- Lifecycle hooks like `usePrevious`
 - Utility hooks like `useDebounce`, `useThrottle`
 - **Backward compatibility (BC) is preserved** for these existing pure logic hooks
 
@@ -69,37 +69,46 @@ pnpm add react-simplikit
 ## Quick Start
 
 ```tsx
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useDebounce } from 'react-simplikit';
 
 function SearchInput() {
   const [query, setQuery] = useState('');
-  const debouncedQuery = useDebounce(query, 300);
 
-  useEffect(() => {
-    if (debouncedQuery) {
-      searchAPI(debouncedQuery);
-    }
-  }, [debouncedQuery]);
-
-  return <input value={query} onChange={e => setQuery(e.target.value)} />;
+  const debouncedSearch = useDebounce((value: string) => {
+    // Actual API call
+    searchAPI(value);
+  }, 300);
+
+  return (
+    <input
+      value={query}
+      onChange={e => {
+        setQuery(e.target.value);
+        debouncedSearch(e.target.value);
+      }}
+      placeholder="Enter search term"
+    />
+  );
 }
 ```
 
+The debounced function exposes `.cancel()`, and pending calls are cancelled automatically when the component unmounts.
+
 ## What's Included
 
 ### Hooks
 
-| Hook                      | Description                                         |
-| ------------------------- | --------------------------------------------------- |
-| `useBooleanState`         | Manage boolean state with handlers                  |
-| `useDebounce`             | Debounce a value                                    |
-| `useDebouncedCallback`    | Debounce a callback function                        |
-| `useInterval`             | Set up intervals declaratively                      |
-| `useIntersectionObserver` | Observe element visibility                          |
-| `usePreservedCallback`    | Stable callback reference                           |
-| `usePreservedReference`   | Stable object reference                             |
-| ...                       | [See all hooks](https://react-simplikit.slash.page) |
+| Hook                      | Description                                           |
+| ------------------------- | ----------------------------------------------------- |
+| `useBooleanState`         | Manage boolean state with handlers                    |
+| `useDebounce`             | Debounce a callback function                          |
+| `useDebouncedCallback`    | Debounce an `onChange` callback via an options object |
+| `useInterval`             | Set up intervals declaratively                        |
+| `useIntersectionObserver` | Observe element visibility                            |
+| `usePreservedCallback`    | Stable callback reference                             |
+| `usePreservedReference`   | Stable object reference                               |
+| ...                       | [See all hooks](https://react-simplikit.slash.page)   |
 
 ### Components
 
@@ -111,10 +120,11 @@ function SearchInput() {
 
 ### Utilities
 
-| Utility  | Description       |
-| -------- | ----------------- |
-| `assert` | Runtime assertion |
-| `noop`   | Empty function    |
+| Utility        | Description                                         |
+| -------------- | --------------------------------------------------- |
+| `buildContext` | Define React Context with less boilerplate          |
+| `mergeProps`   | Merge props, composing `className`, `style`, events |
+| `mergeRefs`    | Combine multiple refs into a single ref             |
 
 ## Documentation
 

package/dist/components/ImpressionArea/ImpressionArea.cjs

@@ -0,0 +1,57 @@
+"use client";
+const require_useImpressionRef = require("../../hooks/useImpressionRef/useImpressionRef.cjs");
+const require_mergeRefs = require("../../utils/mergeRefs/mergeRefs.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/ImpressionArea/ImpressionArea.tsx
+/**
+* @description
+* `ImpressionArea` is a component that measures the time a specific DOM element is visible on the screen
+* and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
+* hook to track the element's visibility.
+*
+* @template {ElementType} T - The HTML tag to render. Defaults to `div`.
+* @param {T} [as='div'] - The HTML tag to render. Defaults to `div`.
+* @param {string} [rootMargin] - Margin to adjust the detection area.
+* @param {number} [areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
+* @param {number} [timeThreshold] - Minimum time the element must be visible (in milliseconds).
+* @param {() => void} [onImpressionStart] - Callback function executed when the element enters the view.
+* @param {() => void} [onImpressionEnd] - Callback function executed when the element exits the view.
+* @param {Ref<Element<T>>} [ref] - Reference to the element.
+* @param {React.ReactNode} [children] - Child elements to be rendered inside the component.
+* @param {string} [className] - Additional class names for styling.
+*
+* @returns {JSX.Element} A React component that tracks the visibility of its child elements.
+*
+* @example
+* function App() {
+*   return (
+*     <ImpressionArea
+*       onImpressionStart={() => console.log('Element entered view')}
+*       onImpressionEnd={() => console.log('Element exited view')}
+*       timeThreshold={1000}
+*       areaThreshold={0.5}
+*     >
+*       <div>Track me!</div>
+*     </ImpressionArea>
+*   );
+* }
+*/
+const ImpressionArea = (0, react.forwardRef)(ImpressionAreaImpl);
+function ImpressionAreaImpl({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) {
+	const Component = as ?? "div";
+	const impressionRef = require_useImpressionRef.useImpressionRef({
+		onImpressionStart,
+		onImpressionEnd,
+		areaThreshold,
+		timeThreshold,
+		rootMargin
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		ref: require_mergeRefs.mergeRefs(ref, impressionRef),
+		...props
+	});
+}
+Object.assign(ImpressionArea, { displayName: "ImpressionArea" });
+//#endregion
+exports.ImpressionArea = ImpressionArea;

package/{esm/components/ImpressionArea/index.d.ts → dist/components/ImpressionArea/ImpressionArea.d.cts}

@@ -1,11 +1,12 @@
-import { ElementType, ReactNode, Ref } from 'react';
-import { UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.js';
 
+import { UseImpressionRefOptions } from "../../hooks/useImpressionRef/useImpressionRef.cjs";
+import { ElementType, ReactNode, Ref } from "react";
+//#region src/components/ImpressionArea/ImpressionArea.d.ts
 type Element<T extends ElementType, IntrinsicElementsOf = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement> = IntrinsicElementsOf extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
 type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseImpressionRefOptions & {
-    as?: Tag;
-    children?: ReactNode;
-    className?: string;
+  as?: Tag;
+  children?: ReactNode;
+  className?: string;
 };
 /**
  * @description
@@ -41,7 +42,7 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseI
  * }
  */
 declare const ImpressionArea: <T extends ElementType = "div">(props: Props<T> & {
-    ref?: Ref<Element<T>>;
+  ref?: Ref<Element<T>>;
 }) => React.ReactElement;
-
-export { ImpressionArea };
+//#endregion
+export { ImpressionArea };

package/dist/components/ImpressionArea/ImpressionArea.d.mts

@@ -0,0 +1,48 @@
+
+import { UseImpressionRefOptions } from "../../hooks/useImpressionRef/useImpressionRef.mjs";
+import { ElementType, ReactNode, Ref } from "react";
+//#region src/components/ImpressionArea/ImpressionArea.d.ts
+type Element<T extends ElementType, IntrinsicElementsOf = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement> = IntrinsicElementsOf extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
+type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseImpressionRefOptions & {
+  as?: Tag;
+  children?: ReactNode;
+  className?: string;
+};
+/**
+ * @description
+ * `ImpressionArea` is a component that measures the time a specific DOM element is visible on the screen
+ * and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
+ * hook to track the element's visibility.
+ *
+ * @template {ElementType} T - The HTML tag to render. Defaults to `div`.
+ * @param {T} [as='div'] - The HTML tag to render. Defaults to `div`.
+ * @param {string} [rootMargin] - Margin to adjust the detection area.
+ * @param {number} [areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
+ * @param {number} [timeThreshold] - Minimum time the element must be visible (in milliseconds).
+ * @param {() => void} [onImpressionStart] - Callback function executed when the element enters the view.
+ * @param {() => void} [onImpressionEnd] - Callback function executed when the element exits the view.
+ * @param {Ref<Element<T>>} [ref] - Reference to the element.
+ * @param {React.ReactNode} [children] - Child elements to be rendered inside the component.
+ * @param {string} [className] - Additional class names for styling.
+ *
+ * @returns {JSX.Element} A React component that tracks the visibility of its child elements.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <ImpressionArea
+ *       onImpressionStart={() => console.log('Element entered view')}
+ *       onImpressionEnd={() => console.log('Element exited view')}
+ *       timeThreshold={1000}
+ *       areaThreshold={0.5}
+ *     >
+ *       <div>Track me!</div>
+ *     </ImpressionArea>
+ *   );
+ * }
+ */
+declare const ImpressionArea: <T extends ElementType = "div">(props: Props<T> & {
+  ref?: Ref<Element<T>>;
+}) => React.ReactElement;
+//#endregion
+export { ImpressionArea };

package/dist/components/ImpressionArea/ImpressionArea.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { useImpressionRef } from "../../hooks/useImpressionRef/useImpressionRef.mjs";
+import { mergeRefs } from "../../utils/mergeRefs/mergeRefs.mjs";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ImpressionArea/ImpressionArea.tsx
+/**
+* @description
+* `ImpressionArea` is a component that measures the time a specific DOM element is visible on the screen
+* and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
+* hook to track the element's visibility.
+*
+* @template {ElementType} T - The HTML tag to render. Defaults to `div`.
+* @param {T} [as='div'] - The HTML tag to render. Defaults to `div`.
+* @param {string} [rootMargin] - Margin to adjust the detection area.
+* @param {number} [areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
+* @param {number} [timeThreshold] - Minimum time the element must be visible (in milliseconds).
+* @param {() => void} [onImpressionStart] - Callback function executed when the element enters the view.
+* @param {() => void} [onImpressionEnd] - Callback function executed when the element exits the view.
+* @param {Ref<Element<T>>} [ref] - Reference to the element.
+* @param {React.ReactNode} [children] - Child elements to be rendered inside the component.
+* @param {string} [className] - Additional class names for styling.
+*
+* @returns {JSX.Element} A React component that tracks the visibility of its child elements.
+*
+* @example
+* function App() {
+*   return (
+*     <ImpressionArea
+*       onImpressionStart={() => console.log('Element entered view')}
+*       onImpressionEnd={() => console.log('Element exited view')}
+*       timeThreshold={1000}
+*       areaThreshold={0.5}
+*     >
+*       <div>Track me!</div>
+*     </ImpressionArea>
+*   );
+* }
+*/
+const ImpressionArea = forwardRef(ImpressionAreaImpl);
+function ImpressionAreaImpl({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) {
+	const Component = as ?? "div";
+	const impressionRef = useImpressionRef({
+		onImpressionStart,
+		onImpressionEnd,
+		areaThreshold,
+		timeThreshold,
+		rootMargin
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		ref: mergeRefs(ref, impressionRef),
+		...props
+	});
+}
+Object.assign(ImpressionArea, { displayName: "ImpressionArea" });
+//#endregion
+export { ImpressionArea };

package/dist/components/ImpressionArea/index.d.cts

@@ -1,47 +1,3 @@
-import { ElementType, ReactNode, Ref } from 'react';
-import { UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.cjs';
 
-type Element<T extends ElementType, IntrinsicElementsOf = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement> = IntrinsicElementsOf extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
-type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseImpressionRefOptions & {
-    as?: Tag;
-    children?: ReactNode;
-    className?: string;
-};
-/**
- * @description
- * `ImpressionArea` is a component that measures the time a specific DOM element is visible on the screen
- * and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
- * hook to track the element's visibility.
- *
- * @template {ElementType} T - The HTML tag to render. Defaults to `div`.
- * @param {T} [as='div'] - The HTML tag to render. Defaults to `div`.
- * @param {string} [rootMargin] - Margin to adjust the detection area.
- * @param {number} [areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
- * @param {number} [timeThreshold] - Minimum time the element must be visible (in milliseconds).
- * @param {() => void} [onImpressionStart] - Callback function executed when the element enters the view.
- * @param {() => void} [onImpressionEnd] - Callback function executed when the element exits the view.
- * @param {Ref<Element<T>>} [ref] - Reference to the element.
- * @param {React.ReactNode} [children] - Child elements to be rendered inside the component.
- * @param {string} [className] - Additional class names for styling.
- *
- * @returns {JSX.Element} A React component that tracks the visibility of its child elements.
- *
- * @example
- * function App() {
- *   return (
- *     <ImpressionArea
- *       onImpressionStart={() => console.log('Element entered view')}
- *       onImpressionEnd={() => console.log('Element exited view')}
- *       timeThreshold={1000}
- *       areaThreshold={0.5}
- *     >
- *       <div>Track me!</div>
- *     </ImpressionArea>
- *   );
- * }
- */
-declare const ImpressionArea: <T extends ElementType = "div">(props: Props<T> & {
-    ref?: Ref<Element<T>>;
-}) => React.ReactElement;
-
-export { ImpressionArea };
+import { ImpressionArea } from "./ImpressionArea.cjs";
+export { ImpressionArea };

package/dist/components/ImpressionArea/index.d.mts

@@ -0,0 +1,3 @@
+
+import { ImpressionArea } from "./ImpressionArea.mjs";
+export { ImpressionArea };

package/dist/components/Separated/Separated.cjs

@@ -0,0 +1,38 @@
+"use client";
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Separated/Separated.tsx
+/**
+* @description
+* `Separated` is a component that inserts a specified component between each child element.
+* It is useful for adding separators, spacing, or other repeating elements in lists.
+*
+* @param {React.ReactNode} children - The child elements to render.
+*   Only valid React elements (`React.isValidElement`) will be rendered.
+* @param {React.ReactNode} by - The component to insert between child elements.
+*
+* @returns {JSX.Element} A React component that separates children with a specified separator.
+*
+* @example
+* function App() {
+*   return (
+*     <Separated by={<Border type="padding24" />}>
+*       {['hello', 'react', 'world'].map(item => (
+*         <div key={item}>{item}</div>
+*       ))}
+*     </Separated>
+*   );
+*   // Expected output:
+*   // <div>hello</div>
+*   // <Border type="padding24" />
+*   // <div>react</div>
+*   // <Border type="padding24" />
+*   // <div>world</div>
+* }
+*/
+function Separated({ children, by: separator }) {
+	const childrenArray = react.Children.toArray(children).filter(react.isValidElement);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [child, i + 1 !== length && separator] }, child.key)) });
+}
+//#endregion
+exports.Separated = Separated;

package/{esm/components/Separated/index.d.ts → dist/components/Separated/Separated.d.cts}

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
 
+import { ReactNode } from "react";
+//#region src/components/Separated/Separated.d.ts
 type Props = {
-    by: ReactNode;
-    children: ReactNode;
+  by: ReactNode;
+  children: ReactNode;
 };
 /**
  * @description
@@ -33,6 +33,6 @@ type Props = {
  *   // <div>world</div>
  * }
  */
-declare function Separated({ children, by: separator }: Props): react_jsx_runtime.JSX.Element;
-
-export { Separated };
+declare function Separated({ children, by: separator }: Props): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Separated };

package/dist/components/Separated/Separated.d.mts

@@ -0,0 +1,38 @@
+
+import { ReactNode } from "react";
+//#region src/components/Separated/Separated.d.ts
+type Props = {
+  by: ReactNode;
+  children: ReactNode;
+};
+/**
+ * @description
+ * `Separated` is a component that inserts a specified component between each child element.
+ * It is useful for adding separators, spacing, or other repeating elements in lists.
+ *
+ * @param {React.ReactNode} children - The child elements to render.
+ *   Only valid React elements (`React.isValidElement`) will be rendered.
+ * @param {React.ReactNode} by - The component to insert between child elements.
+ *
+ * @returns {JSX.Element} A React component that separates children with a specified separator.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <Separated by={<Border type="padding24" />}>
+ *       {['hello', 'react', 'world'].map(item => (
+ *         <div key={item}>{item}</div>
+ *       ))}
+ *     </Separated>
+ *   );
+ *   // Expected output:
+ *   // <div>hello</div>
+ *   // <Border type="padding24" />
+ *   // <div>react</div>
+ *   // <Border type="padding24" />
+ *   // <div>world</div>
+ * }
+ */
+declare function Separated({ children, by: separator }: Props): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Separated };

package/dist/components/Separated/Separated.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { Children, Fragment, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Separated/Separated.tsx
+/**
+* @description
+* `Separated` is a component that inserts a specified component between each child element.
+* It is useful for adding separators, spacing, or other repeating elements in lists.
+*
+* @param {React.ReactNode} children - The child elements to render.
+*   Only valid React elements (`React.isValidElement`) will be rendered.
+* @param {React.ReactNode} by - The component to insert between child elements.
+*
+* @returns {JSX.Element} A React component that separates children with a specified separator.
+*
+* @example
+* function App() {
+*   return (
+*     <Separated by={<Border type="padding24" />}>
+*       {['hello', 'react', 'world'].map(item => (
+*         <div key={item}>{item}</div>
+*       ))}
+*     </Separated>
+*   );
+*   // Expected output:
+*   // <div>hello</div>
+*   // <Border type="padding24" />
+*   // <div>react</div>
+*   // <Border type="padding24" />
+*   // <div>world</div>
+* }
+*/
+function Separated({ children, by: separator }) {
+	const childrenArray = Children.toArray(children).filter(isValidElement);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ jsxs(Fragment, { children: [child, i + 1 !== length && separator] }, child.key)) });
+}
+//#endregion
+export { Separated };

package/dist/components/Separated/index.d.cts

@@ -1,38 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
 
-type Props = {
-    by: ReactNode;
-    children: ReactNode;
-};
-/**
- * @description
- * `Separated` is a component that inserts a specified component between each child element.
- * It is useful for adding separators, spacing, or other repeating elements in lists.
- *
- * @param {React.ReactNode} children - The child elements to render.
- *   Only valid React elements (`React.isValidElement`) will be rendered.
- * @param {React.ReactNode} by - The component to insert between child elements.
- *
- * @returns {JSX.Element} A React component that separates children with a specified separator.
- *
- * @example
- * function App() {
- *   return (
- *     <Separated by={<Border type="padding24" />}>
- *       {['hello', 'react', 'world'].map(item => (
- *         <div key={item}>{item}</div>
- *       ))}
- *     </Separated>
- *   );
- *   // Expected output:
- *   // <div>hello</div>
- *   // <Border type="padding24" />
- *   // <div>react</div>
- *   // <Border type="padding24" />
- *   // <div>world</div>
- * }
- */
-declare function Separated({ children, by: separator }: Props): react_jsx_runtime.JSX.Element;
-
-export { Separated };
+import { Separated } from "./Separated.cjs";
+export { Separated };

package/dist/components/Separated/index.d.mts

@@ -0,0 +1,3 @@
+
+import { Separated } from "./Separated.mjs";
+export { Separated };

package/dist/components/SwitchCase/SwitchCase.cjs

@@ -0,0 +1,40 @@
+"use client";
+//#region src/components/SwitchCase/SwitchCase.tsx
+/**
+* @description
+* `SwitchCase` is a component that allows you to declaratively render components based on a given value,
+* similar to a `switch-case` statement. It is useful when you need to conditionally render different
+* components depending on a specific state.
+*
+* @param {Case} value - The value to compare against.
+*   The component associated with the matching key in `caseBy` will be rendered.
+* @param {Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>} caseBy - An object that maps values to
+*   components to render. The keys represent possible values, and the values are functions returning
+*   the corresponding components.
+* @param {() => ReactElement | null} [defaultComponent] - The component to render if `value` does not match
+*   any key in `caseBy`.
+*
+* @returns {ReactElement | null} A React component that conditionally renders based on cases.
+*
+* @example
+* function App() {
+*   return (
+*     <SwitchCase
+*       value={status}
+*       // Renders TypeA, TypeB, or TypeC based on the status value.
+*       caseBy={{
+*         a: () => <TypeA />,
+*         b: () => <TypeB />,
+*         c: () => <TypeC />,
+*       }}
+*       // Renders Default when the status value does not match any case.
+*       defaultComponent={() => <Default />}
+*     />
+*   );
+* }
+*/
+function SwitchCase({ value, caseBy, defaultComponent = () => null }) {
+	return (caseBy[String(value)] ?? defaultComponent)();
+}
+//#endregion
+exports.SwitchCase = SwitchCase;

package/{esm/components/SwitchCase/index.d.ts → dist/components/SwitchCase/SwitchCase.d.cts}

@@ -1,12 +1,11 @@
-import { ReactElement } from 'react';
 
+import { ReactElement } from "react";
+//#region src/components/SwitchCase/SwitchCase.d.ts
 type StringifiedValue<T> = (T extends boolean ? 'true' | 'false' : never) | (T extends number ? `${T}` : never) | (T extends string ? T : never);
 type Props<Case> = {
-    value: Case;
-    caseBy: Partial<{
-        [P in StringifiedValue<Case>]: () => ReactElement | null;
-    }>;
-    defaultComponent?: () => ReactElement | null;
+  value: Case;
+  caseBy: Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null; }>;
+  defaultComponent?: () => ReactElement | null;
 };
 /**
  * @description
@@ -42,5 +41,5 @@ type Props<Case> = {
  * }
  */
 declare function SwitchCase<Case>({ value, caseBy, defaultComponent }: Props<Case>): ReactElement | null;
-
-export { SwitchCase };
+//#endregion
+export { SwitchCase };

package/dist/components/SwitchCase/SwitchCase.d.mts

@@ -0,0 +1,45 @@
+
+import { ReactElement } from "react";
+//#region src/components/SwitchCase/SwitchCase.d.ts
+type StringifiedValue<T> = (T extends boolean ? 'true' | 'false' : never) | (T extends number ? `${T}` : never) | (T extends string ? T : never);
+type Props<Case> = {
+  value: Case;
+  caseBy: Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null; }>;
+  defaultComponent?: () => ReactElement | null;
+};
+/**
+ * @description
+ * `SwitchCase` is a component that allows you to declaratively render components based on a given value,
+ * similar to a `switch-case` statement. It is useful when you need to conditionally render different
+ * components depending on a specific state.
+ *
+ * @param {Case} value - The value to compare against.
+ *   The component associated with the matching key in `caseBy` will be rendered.
+ * @param {Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>} caseBy - An object that maps values to
+ *   components to render. The keys represent possible values, and the values are functions returning
+ *   the corresponding components.
+ * @param {() => ReactElement | null} [defaultComponent] - The component to render if `value` does not match
+ *   any key in `caseBy`.
+ *
+ * @returns {ReactElement | null} A React component that conditionally renders based on cases.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <SwitchCase
+ *       value={status}
+ *       // Renders TypeA, TypeB, or TypeC based on the status value.
+ *       caseBy={{
+ *         a: () => <TypeA />,
+ *         b: () => <TypeB />,
+ *         c: () => <TypeC />,
+ *       }}
+ *       // Renders Default when the status value does not match any case.
+ *       defaultComponent={() => <Default />}
+ *     />
+ *   );
+ * }
+ */
+declare function SwitchCase<Case>({ value, caseBy, defaultComponent }: Props<Case>): ReactElement | null;
+//#endregion
+export { SwitchCase };