@openbytes/ts-react-directives 1.0.1 → 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 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 d=require("react/jsx-runtime"),o=require("react");var c=(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.InvalidElement=3002]="InvalidElement",e[e.ChildrenExpected=3003]="ChildrenExpected",e))(c||{}),t=(e=>(e.If="If",e.ElseIf="ElseIf",e.Else="Else",e.Check="Check",e.Unknown="Unknown",e))(t||{});const p={[c.IfBlockExpected]:"Missing 'If'",[c.OnlyOneIfBlockExpected]:"Can only have one 'If'",[c.OnlyOneElseBlockExpected]:"Can only have one 'Else'",[c.CheckBlockExpected]:"'If', 'ElseIf', 'Else' need to be wrapped in 'Check'",[c.InvalidElseBlockOrdinal]:"Invalid ordinals, 'Else' should be the last",[c.InvalidIfBlockOrdinal]:"Invalid ordinals, 'If' block should be the first",[c.InvalidElseIfBlockOrdinal]:"Invalid ordinals, cannot have 'ElseIf' before 'If'",[c.ChildrenExpected]:"Should at least have one child",[c.InvalidElement]:"Invalid element"},f=({errors:e})=>d.jsx("ol",{className:"trd-error-list",children:e.map((l,n)=>d.jsx("li",{children:p[l]},`${l}-${n}`))}),v=e=>{const l=[];return e.length===0?(l.push(c.ChildrenExpected),l):(e.forEach(n=>{const{displayName:s=t.Unknown}=n.type??{};(s===t.If||s===t.ElseIf||s===t.Else)&&(l.push(c.InvalidElement),l.push(c.CheckBlockExpected))}),l)},B=e=>{const l=[],n={};return e.length===0?(l.push(c.ChildrenExpected,c.IfBlockExpected),l):(e.forEach((s,a)=>{const{displayName:i=t.Unknown}=s.type,u=n[i]??0;n[i]=u+1,O(i,a,n,l),x(i,a,e.length,n,l),C(i,a,l),m(i,l)}),n[t.If]||l.push(c.IfBlockExpected),l)},O=(e,l,n,s)=>{e===t.If&&(l!==0&&s.push(c.InvalidIfBlockOrdinal),n[t.If]>1&&s.push(c.OnlyOneIfBlockExpected))},x=(e,l,n,s,a)=>{e===t.Else&&(s[t.Else]>1&&a.push(c.OnlyOneElseBlockExpected),(l===0||l!==n-1)&&a.push(c.InvalidElseBlockOrdinal))},C=(e,l,n)=>{e===t.ElseIf&&l===0&&n.push(c.InvalidElseIfBlockOrdinal)},m=(e,l)=>{e!==t.If&&e!==t.ElseIf&&e!==t.Else&&l.push(c.InvalidElement)};class y{static get(l){let n=()=>[];switch(l){case t.Check:n=B;break;case t.If:case t.ElseIf:case t.Else:n=v;break}return n}}const I=(e,l)=>{const{children:n}=e,s=o.Children.toArray(n);return y.get(l)(s)},j=e=>{const l=I(e,t.Check);if(l.length)return{children:o.createElement(f,{errors:l})};const s=o.Children.toArray(e.children).filter(o.isValidElement);return{children:b(s)}},b=e=>{for(const l of e){if(!l||!o.isValidElement(l))continue;const{displayName:n}=l.type;if(n){const{condition:s}=l.props;if((n==="If"||n==="ElseIf")&&s===!0||n==="Else")return l}}return null},h=e=>{const{children:l}=j(e);return d.jsx(d.Fragment,{children:l})};h.displayName=t.Check;const E=e=>{const l=I(e,"If"),{condition:n}=e,s=l.length===0?e.children:d.jsx(f,{errors:l});return d.jsx(d.Fragment,{children:n&&s})};E.displayName=t.If;const r=e=>{const l=I(e,"ElseIf"),{condition:n}=e,s=l.length===0?e.children:d.jsx(f,{errors:l});return d.jsx(d.Fragment,{children:n&&s})};r.displayName=t.ElseIf;const k=e=>{const l=I(e,"Else"),n=l.length===0?e.children:d.jsx(f,{errors:l});return d.jsx(d.Fragment,{children:n})};k.displayName=t.Else;exports.Check=h;exports.Else=k;exports.ElseIf=r;exports.If=E;
+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 {}