@openbytes/ts-react-directives 1.1.0 → 1.1.1

package/LICENSE.md

@@ -1,21 +1,21 @@
-# MIT License
-
-Copyright (c) 2025 SkyCodr (aka: Dulan Sudasinghe)
-
-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.
+# MIT License
+
+Copyright (c) 2025 SkyCodr (aka: Dulan Sudasinghe)
+
+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

@@ -1,27 +1,40 @@
-# ts-react-directives
-
-## About
-
-**ts-react-directives** is a small React/Typescript library designed to mimic 'Angular' directives. This is not a static library. It's meant to be used as declarative component. Also, it alleviates the limitations and cognitive complexity created by the ternary operations when using conditional rendering.
-
-## How to install
-
-Using NPM
-
-```npm
-npm install @openbytes/ts-react-directives
-```
-
-Using PNPM (preferred)
-
-```pnpm
-pnpm add @openbytes/ts-react-directives
-```
-
-## Demo
-
-[Go to the demo/examples project](https://skycodr.github.io/ts-react-directives/)
-
-## Authors
-
-[AUTHORS](./AUTHORS.md)
+# ts-react-directives
+
+[![npm version](https://img.shields.io/npm/v/@openbytes/ts-react-directives)](https://www.npmjs.com/package/@openbytes/ts-react-directives)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE.md)
+
+## About
+
+**ts-react-directives** is a small React/Typescript library designed to mimic 'Angular' directives. This is not a static library. It's meant to be used as declarative component. Also, it alleviates the limitations and cognitive complexity created by the ternary operations when using conditional rendering.
+
+## How to install
+
+Using NPM
+
+```npm
+npm install @openbytes/ts-react-directives
+```
+
+Using PNPM (preferred)
+
+```pnpm
+pnpm add @openbytes/ts-react-directives
+```
+
+## Demo
+
+[Go to the demo/examples project](https://skycodr.github.io/ts-react-directives/)
+
+## Documentation
+
+- **Developer guide** - features, installation, usage, SSR support, error
+  configuration and styling: [DEVELOPER.md](./DEVELOPER.md)
+- **Security policy** - supported versions and how to report a vulnerability:
+  [SECURITY.md](./SECURITY.md)
+- **License** - MIT: [LICENSE.md](./LICENSE.md)
+- **Authors** - [AUTHORS.md](./AUTHORS.md)
+
+## Issues
+
+Open bug reports and feature requests at
+[GitHub Issues](https://github.com/skycodr/ts-react-directives/issues).

package/dist/__tests__/Check.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @author SkyCodr (aka: Dulan Sudasinghe)
+ * @description Test scenarios for branching logic.
+ */
+export {};

package/dist/__tests__/Config.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @author SkyCodr (aka: Dulan Sudasinghe)
+ * @description Test scenarios for the runtime configuration API.
+ */
+export {};

package/dist/__tests__/Funcs.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @author SkyCodr (aka: Dulan Sudasinghe)
+ * @description Test scenarios for general & helper functionality.
+ *
+ */
+export {};

package/dist/__tests__/Loop.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Errors.d.ts

@@ -0,0 +1,12 @@
+import { LogicErrors } from '../fixtures';
+import { FC } from 'react';
+type ErrorProps = {
+    errors: LogicErrors[];
+};
+/**
+ * Renders the given validation errors as a styled list. The `trd-error-list*`
+ * classes are the public styling hooks - override them in your own CSS to
+ * customize the look.
+ */
+declare const Errors: FC<ErrorProps>;
+export default Errors;

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export { default as Errors } from './Errors';

package/dist/directives/check/Check.d.ts

@@ -0,0 +1,10 @@
+import { CheckProps } from '../../types';
+import { FC } from 'react';
+/**
+ * Check directive. All If else statements should be wrapped inside this directive.
+ *
+ * @param props
+ * @returns
+ */
+declare const Check: FC<CheckProps>;
+export default Check;

package/dist/directives/check/Else.d.ts

@@ -0,0 +1,10 @@
+import { ElseProps } from '../../types';
+import { FC } from 'react';
+/**
+ * Else directive. Else directive may have nested Check directives.
+ *
+ * @param props
+ * @returns
+ */
+declare const Else: FC<ElseProps>;
+export default Else;

package/dist/directives/check/ElseIf.d.ts

@@ -0,0 +1,10 @@
+import { ElseIfProps } from '../../types';
+import { FC } from 'react';
+/**
+ * ElseIf directive. May have nested Check directives.
+ *
+ * @param props
+ * @returns
+ */
+declare const ElseIf: FC<ElseIfProps>;
+export default ElseIf;

package/dist/directives/check/If.d.ts

@@ -0,0 +1,10 @@
+import { IfProps } from '../../types';
+import { FC } from 'react';
+/**
+ * If directive. All If directives may have nested Check directives.
+ *
+ * @param props
+ * @returns
+ */
+declare const If: FC<IfProps>;
+export default If;

package/dist/directives/check/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Check } from './Check';
+export { default as Else } from './Else';
+export { default as ElseIf } from './ElseIf';
+export { default as If } from './If';

package/dist/directives/index.d.ts

@@ -0,0 +1,2 @@
+export * from './check';
+export * from './loop';

package/dist/directives/loop/Loop.d.ts

@@ -0,0 +1,13 @@
+import { Directives } from '../../fixtures';
+import { LoopProps } from '../../types';
+/**
+ * Loop directive. Has to have Template directive as a child. Top level validation happens here.
+ *
+ * @param props
+ * @returns
+ */
+declare const Loop: {
+    <T extends unknown = any>(props: LoopProps<T>): import("react").JSX.Element;
+    displayName: Directives;
+};
+export default Loop;

package/dist/directives/loop/Template.d.ts

@@ -0,0 +1,14 @@
+import { Directives } from '../../fixtures';
+import { TemplateProps } from '../../types';
+import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal } from 'react';
+/**
+ * Template directive. Used as a child of the Loop directive to define the structure of each iteration.
+ *
+ * @param props
+ * @returns
+ */
+declare const Template: {
+    <T extends unknown>(props: TemplateProps<T>): string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable< ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable< ReactNode> | null | undefined> | null;
+    displayName: Directives;
+};
+export default Template;

package/dist/directives/loop/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Loop } from './Loop';
+export { default as Template } from './Template';

package/dist/examples/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react").JSX.Element;
+export default App;

package/dist/examples/example1.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Your code will have the above line as:
+ *
+ * import { ... } from '@openbytes/ts-react-directives';
+ */
+/**
+ * Example 1: Basic If / ElseIf / Else selector.
+ */
+declare const Example1: () => import("react").JSX.Element;
+export default Example1;

package/dist/examples/example2.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Example 2: Loop over an array using the Template directive.
+ */
+declare const Example2: () => import("react").JSX.Element;
+export default Example2;

package/dist/examples/example3.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Your code will have the above line as:
+ *
+ * import { ... } from '@openbytes/ts-react-directives';
+ */
+/**
+ * Example 3: Loop over a numeric range (from -> to) with a custom step,
+ * rendering each iteration with a Template render-function child.
+ */
+declare const Example3: () => import("react").JSX.Element;
+export default Example3;

package/dist/examples/example4.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Your code will have the above line as:
+ *
+ * import { ... } from '@openbytes/ts-react-directives';
+ */
+/**
+ * Example 4: Descending numeric loop (countdown).
+ */
+declare const Example4: () => import("react").JSX.Element;
+export default Example4;

package/dist/examples/example5.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Your code will have the above line as:
+ *
+ * import { ... } from '@openbytes/ts-react-directives';
+ */
+/**
+ * Example 5: If / ElseIf / Else branching on a score.
+ */
+declare const Example5: () => import("react").JSX.Element;
+export default Example5;

package/dist/examples/example6.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Example 6: Nested directives (depth 2).
+ *
+ * Outer `Loop` iterates over users; each item uses a nested `Check` with
+ * `If / ElseIf / Else` to render a role-specific badge.
+ */
+declare const Example6: () => import("react").JSX.Element;
+export default Example6;

package/dist/examples/example7.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Your code will have the above line as:
+ *
+ * import { ... } from '@openbytes/ts-react-directives';
+ */
+export interface Project {
+    name: string;
+    active: boolean;
+    members: number;
+}
+/**
+ * Example 7: Three levels of nested directives.
+ *
+ * Level 1: `Loop` over the projects
+ * Level 2: `Check` on project.active (If → active / Else → archived)
+ * Level 3: nested `Check` on team size (If ≥ 3 → full team / Else → small squad)
+ */
+declare const Example7: () => import("react").JSX.Element;
+export default Example7;

package/dist/examples/example8.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Example 8: In-place error reporting (one Loop + one Check).
+ *
+ * Once error reporting is enabled, malformed directives render a styled error
+ * list directly in place of the output. Override the `.trd-error-list*` classes
+ * in your own CSS to customise the look.
+ */
+declare const Example8: () => import("react").JSX.Element;
+export default Example8;

package/dist/fixtures/constants.d.ts

@@ -0,0 +1,2 @@
+import { LogicErrors } from '.';
+export declare const ERRORS: Record<LogicErrors, string>;

package/dist/fixtures/enums.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @author SkyCodr (aka: Dulan Sudasinghe)
+ * @description All lib level constants are defined here
+ */
+export declare enum LogicErrors {
+    InvalidElement = 3002,
+    ChildrenExpected = 3003,
+    SingleChildExpected = 3004,
+    IfBlockExpected = 1001,
+    OnlyOneIfBlockExpected = 1002,
+    OnlyOneElseBlockExpected = 1003,
+    CheckBlockExpected = 1005,
+    InvalidIfBlockOrdinal = 1004,
+    InvalidElseBlockOrdinal = 1006,
+    InvalidElseIfBlockOrdinal = 1007,
+    MalformedLoopBounds = 2001,
+    MalformedLoopParams = 2002,
+    MalformedLoop = 2008,
+    InfiniteLoopCondition = 2009,
+    TemplateBlockExpected = 2012,
+    OnlyOneTemplateBlockExpected = 2013,
+    EmptyLoopSource = 2014
+}
+export declare enum Directives {
+    If = "If",
+    ElseIf = "ElseIf",
+    Else = "Else",
+    Check = "Check",
+    Loop = "Loop",
+    LoopProps = "LoopProps",
+    Template = "Template",
+    Unknown = "Unknown"
+}

package/dist/fixtures/index.d.ts

@@ -0,0 +1,2 @@
+export * from './enums';
+export * from './constants';

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useCheck, useElse, useElseIf, useIf } from './useCheck';
+export { useLoop } from './useLoop';
+export { useValidationFactory } from './useValidationFactory';

package/dist/hooks/useCheck.d.ts

@@ -0,0 +1,39 @@
+import { CheckProps, ElseIfProps, ElseProps, IfProps } from '../types';
+import { ReactElement, JSXElementConstructor, FunctionComponentElement, ReactNode, ReactPortal } from 'react';
+import { LogicErrors } from '../fixtures';
+/**
+ * Hook to validate the props of a Check directive. and return the correct render element.
+ *
+ * @param props CheckProps
+ * @returns
+ */
+export declare const useCheck: (props: CheckProps) => ReactElement<unknown, string | JSXElementConstructor<any>> | FunctionComponentElement<{
+    errors: LogicErrors[];
+}> | null | undefined;
+/**
+ * Hook to validate the props of an If directive and return the correct render element.
+ *
+ * @param props If block props
+ * @returns
+ */
+export declare const useIf: (props: IfProps) => string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable< ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable< ReactNode> | null | undefined> | FunctionComponentElement<{
+    errors: LogicErrors[];
+}> | null | undefined;
+/**
+ * Hook to validate the props of an ElseIf directive and return the correct render element.
+ *
+ * @param props ElseIf props
+ * @returns
+ */
+export declare const useElseIf: (props: ElseIfProps) => string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable< ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable< ReactNode> | null | undefined> | FunctionComponentElement<{
+    errors: LogicErrors[];
+}> | null | undefined;
+/**
+ * Hook to validate the props of an Else directive and return the correct render element.
+ *
+ * @param props Else block props
+ * @returns
+ */
+export declare const useElse: (props: ElseProps) => string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable< ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable< ReactNode> | null | undefined> | FunctionComponentElement<{
+    errors: LogicErrors[];
+}> | null | undefined;

package/dist/hooks/useLoop.d.ts

@@ -0,0 +1,9 @@
+import { DataShape, LoopProps } from '../types';
+import { FunctionComponentElement } from 'react';
+import { LogicErrors } from '../fixtures';
+export declare const useLoop: <T extends DataShape>(props: LoopProps<T>) => FunctionComponentElement<{
+    errors: LogicErrors[];
+}> | FunctionComponentElement<{
+    data: T | number;
+    index: number;
+}>[] | null | undefined;

package/dist/hooks/useValidationFactory.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { LogicErrors } from '../fixtures';
+/**
+ * Factory to validate the props of a directive based on its name. It retrieves the appropriate validator function
+ * from the ValidationFactory and applies it to the provided props.
+ *
+ * WARNING!!! Do NOT use this hook in your code only for internal use of the library. It is not intended for public
+ * use and may change or be removed in future versions.
+ *
+ * @param props Props to be validated.
+ * @param type Component type Check, If, ElseIf, Else, Loop, Template
+ *
+ * @returns Returns a validator function.
+ */
+export declare const useValidationFactory: <T>(props: PropsWithChildren<T>, type: string) => LogicErrors[];

package/dist/index.css

@@ -1 +1,2 @@
-:root{--trd-color: 255, 100, 200;--trd-bg-color: 0, 100, 200}ol.trd-error-list{border:.2rem double rgb(var(--trd-bg-color));background-color:rgba(var(--trd-bg-color),.1);list-style-type:none;box-sizing:border-box;padding:.5rem;margin:0}.trd-error-list>li{color:#000;background-color:rgba(var(--trd-color),.1);padding:.125rem;margin:.125rem;border:2px solid rgb(var(--trd-color));font-size:1.5rem;font-family:monospace}.trd-error-list>li:before{content:"🛈 ";font-size:1.5rem;padding-left:.125rem;margin-right:.125rem}
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-orange-700:oklch(55.3% .195 38.402);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-yellow-400:oklch(85.2% .199 91.936);--color-green-100:oklch(96.2% .044 156.743);--color-green-400:oklch(79.2% .209 151.711);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-emerald-500:oklch(69.6% .17 162.48);--color-teal-100:oklch(95.3% .051 180.801);--color-teal-800:oklch(43.7% .078 188.216);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-indigo-500:oklch(58.5% .233 277.117);--color-purple-100:oklch(94.6% .033 307.174);--color-purple-800:oklch(43.8% .218 303.724);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static{position:static}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.my-3{margin-block:calc(var(--spacing) * 3)}.my-6{margin-block:calc(var(--spacing) * 6)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.block{display:block}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.min-h-screen{min-height:100vh}.w-2{width:calc(var(--spacing) * 2)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.min-w-10{min-width:calc(var(--spacing) * 10)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:2147483647px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-gray-200{border-color:var(--color-gray-200)}.border-red-200{border-color:var(--color-red-200)}.border-red-500{border-color:var(--color-red-500)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-800{border-color:var(--color-slate-800)}.bg-\[\#0d1117\]{background-color:#0d1117}.bg-\[\#161b22\]{background-color:#161b22}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-400{background-color:var(--color-green-400)}.bg-indigo-500{background-color:var(--color-indigo-500)}.bg-purple-100{background-color:var(--color-purple-100)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-400{background-color:var(--color-red-400)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-teal-100{background-color:var(--color-teal-100)}.bg-white{background-color:var(--color-white)}.bg-yellow-400{background-color:var(--color-yellow-400)}.bg-linear-to-br{--tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-br{--tw-gradient-position:to bottom right in oklab}}.bg-linear-to-br{background-image:linear-gradient(var(--tw-gradient-stops))}.from-slate-900{--tw-gradient-from:var(--color-slate-900);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-slate-700{--tw-gradient-to:var(--color-slate-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-orange-700{color:var(--color-orange-700)}.text-purple-800{color:var(--color-purple-800)}.text-red-500{color:var(--color-red-500)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-teal-800{color:var(--color-teal-800)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}}@media (width>=40rem){.sm\:flex{display:flex}}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Check, Else, ElseIf, If, Loop, Template } from './directives';
+export { configure } from './utils';
+export type { ErrorReportingOptions } from './types';

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ts-react-directives.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const o=require("react/jsx-runtime"),i=require("react");var t=(e=>(e[e.IfBlockExpected=2001]="IfBlockExpected",e[e.OnlyOneIfBlockExpected=2002]="OnlyOneIfBlockExpected",e[e.OnlyOneElseBlockExpected=2003]="OnlyOneElseBlockExpected",e[e.CheckBlockExpected=2005]="CheckBlockExpected",e[e.InvalidIfBlockOrdinal=2004]="InvalidIfBlockOrdinal",e[e.InvalidElseBlockOrdinal=2006]="InvalidElseBlockOrdinal",e[e.InvalidElseIfBlockOrdinal=2007]="InvalidElseIfBlockOrdinal",e[e.MalformedLoop=2008]="MalformedLoop",e[e.InfiniteLoopCondition=2009]="InfiniteLoopCondition",e[e.TemplateBlockExpected=2012]="TemplateBlockExpected",e[e.OnlyOneTemplateBlockExpected=2013]="OnlyOneTemplateBlockExpected",e[e.EmptyLoopSource=2014]="EmptyLoopSource",e[e.InvalidElement=3002]="InvalidElement",e[e.ChildrenExpected=3003]="ChildrenExpected",e[e.SingleChildExpected=3004]="SingleChildExpected",e))(t||{}),c=(e=>(e.If="If",e.ElseIf="ElseIf",e.Else="Else",e.Check="Check",e.Loop="Loop",e.LoopProps="LoopProps",e.Template="Template",e.Unknown="Unknown",e))(c||{});const m={[t.IfBlockExpected]:"Missing 'If'",[t.OnlyOneIfBlockExpected]:"Can only have one 'If'",[t.OnlyOneElseBlockExpected]:"Can only have one 'Else'",[t.CheckBlockExpected]:"'If', 'ElseIf', 'Else' need to be wrapped in 'Check'",[t.InvalidElseBlockOrdinal]:"Invalid ordinals, 'Else' should be the last",[t.InvalidIfBlockOrdinal]:"Invalid ordinals, 'If' block should be the first",[t.InvalidElseIfBlockOrdinal]:"Invalid ordinals, cannot have 'ElseIf' before 'If'",[t.ChildrenExpected]:"Should at least have one child",[t.InvalidElement]:"Invalid element",[t.MalformedLoop]:"Malformed loop",[t.EmptyLoopSource]:"Empty loop source",[t.InfiniteLoopCondition]:"Infinite loop condition",[t.TemplateBlockExpected]:"Missing 'Template'",[t.OnlyOneTemplateBlockExpected]:"Only one Template block expected",[t.SingleChildExpected]:"Can have only a single child"},f=({errors:e})=>o.jsx("ol",{className:"trd-error-list",children:e.map((l,n)=>o.jsx("li",{children:m[l]},`${l}-${n}`))}),x=e=>{const l=[];return e.length===0?(l.push(t.ChildrenExpected),l):(e.forEach(n=>{const{displayName:d=c.Unknown}=n.type??{};(d===c.If||d===c.ElseIf||d===c.Else)&&(l.push(t.InvalidElement),l.push(t.CheckBlockExpected))}),l)},B=e=>{const l=[],n={};return e.length===0?(l.push(t.ChildrenExpected,t.IfBlockExpected),l):(e.forEach((d,a)=>{const{displayName:s=c.Unknown}=d.type??{},p=n[s]??0;n[s]=p+1,O(s,a,n,l),y(s,a,e.length,n,l),r(s,a,l),C(s,l)}),n[c.If]||l.push(t.IfBlockExpected),l)},O=(e,l,n,d)=>{e===c.If&&(l!==0&&d.push(t.InvalidIfBlockOrdinal),n[c.If]>1&&d.push(t.OnlyOneIfBlockExpected))},y=(e,l,n,d,a)=>{e===c.Else&&(d[c.Else]>1&&a.push(t.OnlyOneElseBlockExpected),(l===0||l!==n-1)&&a.push(t.InvalidElseBlockOrdinal))},r=(e,l,n)=>{e===c.ElseIf&&l===0&&n.push(t.InvalidElseIfBlockOrdinal)},C=(e,l)=>{e!==c.If&&e!==c.ElseIf&&e!==c.Else&&l.push(t.InvalidElement)},v=(e,l)=>{const n=[];if(e.length===0)n.push(t.ChildrenExpected,t.TemplateBlockExpected);else if(e.length>1)n.push(t.SingleChildExpected,t.OnlyOneTemplateBlockExpected);else{const{displayName:d=c.Unknown}=e[0].type;d!==c.Template&&n.push(t.InvalidElement,t.TemplateBlockExpected);const{from:a=0,to:s=0,step:p=0}=l??{};(p===0||p>0&&a>s||p<0&&a<s)&&n.push(t.InfiniteLoopCondition)}return n.length&&n.push(t.MalformedLoop),n};class T{static get(l){let n=()=>[];switch(l){case c.Check:n=B;break;case c.If:case c.ElseIf:case c.Else:n=x;break;case c.Loop:n=v;break}return n}}const h=(e,l)=>{const{children:n}=e,d=i.Children.toArray(n);return i.useMemo(()=>T.get(l),[l])(d,e)},b=e=>{const l=h(e,c.Check);if(l.length)return{children:i.createElement(f,{errors:l})};const d=i.Children.toArray(e.children).filter(i.isValidElement);return{children:j(d)}},j=e=>{for(const l of e){if(!l||!i.isValidElement(l))continue;const{displayName:n}=l.type;if(n){const{condition:d}=l.props;if((n==="If"||n==="ElseIf")&&d===!0||n==="Else")return l}}return null},I=e=>{const{children:l}=b(e);return o.jsx(o.Fragment,{children:l})};I.displayName=c.Check;const k=e=>{const l=h(e,"If"),{condition:n}=e,d=l.length===0?e.children:o.jsx(f,{errors:l});return o.jsx(o.Fragment,{children:n&&d})};k.displayName=c.If;const E=e=>{const l=h(e,"ElseIf"),{condition:n}=e,d=l.length===0?e.children:o.jsx(f,{errors:l});return o.jsx(o.Fragment,{children:n&&d})};E.displayName=c.ElseIf;const u=e=>{const l=h(e,"Else"),n=l.length===0?e.children:o.jsx(f,{errors:l});return o.jsx(o.Fragment,{children:n})};u.displayName=c.Else;c.Loop;c.Template;exports.Check=I;exports.Else=u;exports.ElseIf=E;exports.If=k;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});require('./index.css');let e=require("react/jsx-runtime"),t=require("react");var n=function(e){return e[e.InvalidElement=3002]=`InvalidElement`,e[e.ChildrenExpected=3003]=`ChildrenExpected`,e[e.SingleChildExpected=3004]=`SingleChildExpected`,e[e.IfBlockExpected=1001]=`IfBlockExpected`,e[e.OnlyOneIfBlockExpected=1002]=`OnlyOneIfBlockExpected`,e[e.OnlyOneElseBlockExpected=1003]=`OnlyOneElseBlockExpected`,e[e.CheckBlockExpected=1005]=`CheckBlockExpected`,e[e.InvalidIfBlockOrdinal=1004]=`InvalidIfBlockOrdinal`,e[e.InvalidElseBlockOrdinal=1006]=`InvalidElseBlockOrdinal`,e[e.InvalidElseIfBlockOrdinal=1007]=`InvalidElseIfBlockOrdinal`,e[e.MalformedLoopBounds=2001]=`MalformedLoopBounds`,e[e.MalformedLoopParams=2002]=`MalformedLoopParams`,e[e.MalformedLoop=2008]=`MalformedLoop`,e[e.InfiniteLoopCondition=2009]=`InfiniteLoopCondition`,e[e.TemplateBlockExpected=2012]=`TemplateBlockExpected`,e[e.OnlyOneTemplateBlockExpected=2013]=`OnlyOneTemplateBlockExpected`,e[e.EmptyLoopSource=2014]=`EmptyLoopSource`,e}({}),r=function(e){return e.If=`If`,e.ElseIf=`ElseIf`,e.Else=`Else`,e.Check=`Check`,e.Loop=`Loop`,e.LoopProps=`LoopProps`,e.Template=`Template`,e.Unknown=`Unknown`,e}({}),i={[n.IfBlockExpected]:`Missing 'If'`,[n.OnlyOneIfBlockExpected]:`Can only have one 'If'`,[n.OnlyOneElseBlockExpected]:`Can only have one 'Else'`,[n.CheckBlockExpected]:`'If', 'ElseIf', 'Else' need to be wrapped in 'Check'`,[n.InvalidElseBlockOrdinal]:`Invalid ordinals, 'Else' should be the last`,[n.InvalidIfBlockOrdinal]:`Invalid ordinals, 'If' block should be the first`,[n.InvalidElseIfBlockOrdinal]:`Invalid ordinals, cannot have 'ElseIf' before 'If'`,[n.ChildrenExpected]:`Should at least have one child`,[n.InvalidElement]:`Invalid element`,[n.MalformedLoop]:`Malformed loop`,[n.EmptyLoopSource]:`Empty loop source`,[n.InfiniteLoopCondition]:`Infinite loop condition`,[n.TemplateBlockExpected]:`Missing 'Template'`,[n.OnlyOneTemplateBlockExpected]:`Only one Template block expected`,[n.SingleChildExpected]:`Can have only a single child`,[n.MalformedLoopBounds]:`Malformed loop bounds`,[n.MalformedLoopParams]:`Malformed loop params`},a=class e{static __instance;config=void 0;overrides={};constructor(){}static getInstance(){return e.__instance||=new e,e.__instance}configure(e){this.overrides={...this.overrides,...e},this.config=void 0}parseBoolean(e){return typeof e==`boolean`?e:e==null||e===``?!1:String(e).toLowerCase()===`true`}parseMode(e){return[`development`,`production`,`test`].includes(e)?e:`production`}getProcessEnv(){return globalThis.process?.env??null}getConfig(){if(this.config)return this.config;let e=this.getProcessEnv()??{};return this.config={mode:this.overrides.mode??this.parseMode(e.MODE??e.NODE_ENV),showErrors:this.overrides.showErrors??this.parseBoolean(e.TRD_SHOW_ERRORS),showErrorsInProd:this.overrides.showErrorsInProd??this.parseBoolean(e.TRD_SHOW_ERRORS_IN_PROD),showErrorsInPlace:this.overrides.showErrorsInPlace??this.parseBoolean(e.TRD_SHOW_ERRORS_IN_PLACE)},this.config}getByKey(e){return this.getProcessEnv()?.[e]}get isShowErrors(){let e=this.getConfig();return e.showErrors&&(e.mode!==`production`||e.showErrorsInProd)}get isShowErrorsInPlace(){return this.getConfig().showErrorsInPlace}},o=e=>a.getInstance().configure(e),s=({errors:t})=>(0,e.jsx)(`ol`,{className:`trd-error-list my-3 list-none space-y-1.5 rounded-lg border border-red-200 bg-red-50 p-4 shadow-sm`,children:t.map((t,n)=>(0,e.jsxs)(`li`,{className:`trd-error-list__item flex items-start gap-2`,children:[(0,e.jsx)(`svg`,{className:`trd-error-list__icon mt-0.5 h-4 w-4 shrink-0 text-red-500`,viewBox:`0 0 20 20`,fill:`currentColor`,"aria-hidden":`true`,children:(0,e.jsx)(`path`,{fillRule:`evenodd`,d:`M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z`,clipRule:`evenodd`})}),(0,e.jsx)(`i`,{className:`trd-error-list__item--text not-italic text-sm leading-5 text-red-700`,children:i[t]})]},`${t}-${n}`))}),c=e=>{if(e.length){let{isShowErrors:n,isShowErrorsInPlace:r}=a.getInstance(),i=null;return n&&r&&(i=(0,t.createElement)(s,{errors:e})),i}},l=e=>{for(let n of e){if(!n||!(0,t.isValidElement)(n))continue;let{displayName:e}=n.type;if(e){let{condition:t}=n.props;if((e===`If`||e===`ElseIf`)&&t===!0||e===`Else`)return n}}return null},u=({over:e,from:t,to:r,step:i})=>{let a=e??null,o=a!==null,s=o?a.length-1:null,c=t===void 0,l=r===void 0,u=!i,d=null,f=null,p=null,m=[];return i===0?m=[n.InfiniteLoopCondition]:o?a?.length===0?m=[n.EmptyLoopSource]:c&&l?u?(d=0,f=s,p=1):(p=i,d=p>0?0:s,f=p>0?s:0):c?(d=r>0?0:s,f=r,u?p=r>0?1:-1:(p=i,Math.sign(f-d)!==Math.sign(p)&&(m=[n.InfiniteLoopCondition]))):l?(d=t,u?(f=t>0?s:0,p=t>0?1:-1):(p=i,f=p>0?s:0,Math.sign(f-d)!==Math.sign(p)&&(m=[n.InfiniteLoopCondition]))):(d=t,f=r,u?p=f>=d?1:-1:(p=i,Math.sign(f-d)!==Math.sign(p)&&(m=[n.InfiniteLoopCondition]))):c&&l&&u||c&&l||c&&u||c||l?m=[n.MalformedLoop,n.MalformedLoopParams,n.MalformedLoopBounds]:(d=t,f=r,p=i||(f-d>0?1:-1),Math.sign(f-d)!==Math.sign(p)&&(m=[n.InfiniteLoopCondition])),a&&(d<0||d>a.length||f<0||f>a.length)&&(m=[n.MalformedLoop,n.MalformedLoopParams,n.MalformedLoopBounds]),m.length&&(a=d=f=p=null),{over:a,from:d,to:f,step:p,errors:m}},d=e=>{let i=[],a=t.Children.toArray(e.children);return a?.length===0?(i.push(n.ChildrenExpected),i):(a.forEach(e=>{let{displayName:t=r.Unknown}=e.type??{};(t===r.If||t===r.ElseIf||t===r.Else)&&(i.push(n.InvalidElement),i.push(n.CheckBlockExpected))}),i)},f=e=>{let i=[],a={},o=t.Children.toArray(e.children);return o.length===0?(i.push(n.ChildrenExpected,n.IfBlockExpected),i):(o.forEach((e,t)=>{let{displayName:n=r.Unknown}=e.type??{},s=a[n]??0;a[n]=s+1,p(n,t,a,i),m(n,t,o.length,a,i),h(n,t,i),g(n,i)}),a[r.If]||i.push(n.IfBlockExpected),i)},p=(e,t,i,a)=>{e===r.If&&(t!==0&&a.push(n.InvalidIfBlockOrdinal),i[r.If]>1&&a.push(n.OnlyOneIfBlockExpected))},m=(e,t,i,a,o)=>{e===r.Else&&(a[r.Else]>1&&o.push(n.OnlyOneElseBlockExpected),(t===0||t!==i-1)&&o.push(n.InvalidElseBlockOrdinal))},h=(e,t,i)=>{e===r.ElseIf&&t===0&&i.push(n.InvalidElseIfBlockOrdinal)},g=(e,t)=>{e!==r.If&&e!==r.ElseIf&&e!==r.Else&&t.push(n.InvalidElement)},_=e=>{let i=[],{errors:a}=e;i.push(...a);let o=t.Children.toArray(e.children);if(o.length===0)i.push(n.ChildrenExpected,n.TemplateBlockExpected);else if(o.length>1)i.push(n.SingleChildExpected,n.OnlyOneTemplateBlockExpected);else{let{displayName:e=r.Unknown}=o[0].type;e!==r.Template&&i.push(n.InvalidElement,n.TemplateBlockExpected)}return i},v=class{static get(e){let t=()=>[];switch(e){case r.Check:t=f;break;case r.If:case r.ElseIf:case r.Else:t=d;break;case r.Loop:t=_}return t}},y=e=>{let n=w(e,r.Check);return n.length?c(n):l(t.Children.toArray(e.children).filter(t.isValidElement))},b=e=>{let t=w(e,`If`);if(t.length)return c(t);let{condition:n,children:r}=e;return n?r:null},x=e=>{let t=w(e,`ElseIf`);if(t.length)return c(t);let{condition:n,children:r}=e;return n?r:null},S=e=>{let t=w(e,`Else`);if(t.length)return c(t);let{children:n}=e;return n??null},C=e=>{let n=(0,t.useId)(),{over:i,from:a,to:o,step:s,errors:l}=u(e),{children:d}=e,f=[],p=w({over:i,from:a,to:o,step:s,children:d,errors:l},r.Loop);if(p.length)return c(p);for(let e=a;s>0?e<=o:e>=o;e+=s)f.push((0,t.cloneElement)(d,{key:`${n}-${e}`,data:i?.[e]??e,index:e}));return f},w=(e,n)=>(0,t.useMemo)(()=>v.get(n),[n])(e),T=t=>(0,e.jsx)(e.Fragment,{children:y(t)});T.displayName=r.Check;var E=t=>(0,e.jsx)(e.Fragment,{children:S(t)});E.displayName=r.Else;var D=t=>(0,e.jsx)(e.Fragment,{children:x(t)});D.displayName=r.ElseIf;var O=t=>(0,e.jsx)(e.Fragment,{children:b(t)});O.displayName=r.If;var k=t=>(0,e.jsx)(e.Fragment,{children:C(t)});k.displayName=r.Loop;var A=e=>{let{index:t,data:n,children:r}=e;return t===void 0||n===void 0?null:r?.({index:t,data:n})??null};A.displayName=r.Template,exports.Check=T,exports.Else=E,exports.ElseIf=D,exports.If=O,exports.Loop=k,exports.Template=A,exports.configure=o;

package/dist/ts-react-directives.d.ts

@@ -1,24 +1,2 @@
-import { FC } from 'react';
-import { PropsWithChildren } from 'react';
-
-export declare const Check: FC<PropsWithChildren<CheckProps>>;
-
-export declare type CheckProps = {};
-
-export declare const Else: FC<PropsWithChildren<ElseProps>>;
-
-export declare const ElseIf: FC<ElseIfProps>;
-
-export declare type ElseIfProps = PropsWithChildren<{
-    condition: boolean;
-}>;
-
-export declare type ElseProps = {};
-
-export declare const If: FC<IfProps>;
-
-export declare type IfProps = PropsWithChildren<{
-    condition: boolean;
-}>;
-
-export { }
+export * from './index.js'
+export {}