@intlayer/design-system 6.1.6 → 7.0.0-canary.0

package/dist/types/components/MarkDownRender/processor.d.ts

@@ -0,0 +1,363 @@
+import { FC, HTMLAttributes, JSX, Key, ReactNode, createElement } from "react";
+
+//#region src/components/MarkDownRender/processor.d.ts
+
+/**
+ * Analogous to `node.type`. Please note that the values here may change at any time,
+ * so do not hard code against the value directly.
+ */
+declare const RuleType: {
+  readonly blockQuote: "0";
+  readonly breakLine: "1";
+  readonly breakThematic: "2";
+  readonly codeBlock: "3";
+  readonly codeFenced: "4";
+  readonly codeInline: "5";
+  readonly footnote: "6";
+  readonly footnoteReference: "7";
+  readonly gfmTask: "8";
+  readonly heading: "9";
+  readonly headingSetext: "10";
+  /** only available if not `disableHTMLParsing` */
+  readonly htmlBlock: "11";
+  readonly htmlComment: "12";
+  /** only available if not `disableHTMLParsing` */
+  readonly htmlSelfClosing: "13";
+  /** Custom components like <Tabs>, <TabItem> */
+  readonly customComponent: "34";
+  readonly image: "14";
+  readonly link: "15";
+  /** emits a `link` 'node', does not render directly */
+  readonly linkAngleBraceStyleDetector: "16";
+  /** emits a `link` 'node', does not render directly */
+  readonly linkBareUrlDetector: "17";
+  /** emits a `link` 'node', does not render directly */
+  readonly newlineCoalescer: "19";
+  readonly orderedList: "20";
+  readonly paragraph: "21";
+  readonly ref: "22";
+  readonly refImage: "23";
+  readonly refLink: "24";
+  readonly table: "25";
+  readonly tableSeparator: "26";
+  readonly text: "27";
+  readonly textBolded: "28";
+  readonly textEmphasized: "29";
+  readonly textEscaped: "30";
+  readonly textMarked: "31";
+  readonly textStrikethroughed: "32";
+  readonly unorderedList: "33";
+};
+type RuleType = (typeof RuleType)[keyof typeof RuleType];
+declare const slugify: (str: string) => string;
+declare const sanitizer: (input: string) => string | null;
+declare const compiler: (markdown?: string, options?: MarkdownProcessorOptions) => JSX.Element;
+/**
+ * A simple HOC for easy React use. Feed the markdown content as a direct child
+ * and the rest is taken care of automatically.
+ */
+declare const MarkdownProcessor: FC<Omit<HTMLAttributes<Element>, 'children'> & {
+  children: string;
+  options?: MarkdownProcessorOptions;
+}>;
+/**
+ * RequireAtLeastOne<{ ... }> <- only requires at least one key
+ */
+type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & { [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>> }[Keys];
+type CreateElement = typeof createElement;
+type HTMLTags = keyof JSX.IntrinsicElements;
+type State = {
+  /** true if the current content is inside anchor link grammar */
+  inAnchor?: boolean;
+  /** true if parsing in an HTML context */
+  inHTML?: boolean;
+  /** true if parsing in an inline context (subset of rules around formatting and links) */
+  inline?: boolean;
+  /** true if in a table */
+  inTable?: boolean;
+  /** use this for the `key` prop */
+  key?: Key;
+  /** true if in a list */
+  list?: boolean;
+  /** used for lookbacks */
+  prevCapture?: string;
+  /** true if parsing in inline context w/o links */
+  simple?: boolean;
+};
+type BlockQuoteNode = {
+  alert?: string;
+  children: ParserResult[];
+  type: typeof RuleType.blockQuote;
+};
+type BreakLineNode = {
+  type: typeof RuleType.breakLine;
+};
+type BreakThematicNode = {
+  type: typeof RuleType.breakThematic;
+};
+type CodeBlockNode = {
+  type: typeof RuleType.codeBlock;
+  attrs?: JSX.IntrinsicAttributes;
+  lang?: string;
+  text: string;
+};
+type CodeFencedNode = {
+  type: typeof RuleType.codeFenced;
+};
+type CodeInlineNode = {
+  type: typeof RuleType.codeInline;
+  text: string;
+};
+type FootnoteNode = {
+  type: typeof RuleType.footnote;
+};
+type FootnoteReferenceNode = {
+  type: typeof RuleType.footnoteReference;
+  target: string;
+  text: string;
+};
+type GFMTaskNode = {
+  type: typeof RuleType.gfmTask;
+  completed: boolean;
+};
+type HeadingNode = {
+  type: typeof RuleType.heading;
+  children: ParserResult[];
+  id: string;
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+};
+type HeadingSetextNode = {
+  type: typeof RuleType.headingSetext;
+};
+type HTMLCommentNode = {
+  type: typeof RuleType.htmlComment;
+};
+type ImageNode = {
+  type: typeof RuleType.image;
+  alt?: string;
+  target: string;
+  title?: string;
+};
+type LinkNode = {
+  type: typeof RuleType.link;
+  children: ParserResult[];
+  target: string;
+  title?: string;
+};
+type LinkAngleBraceNode = {
+  type: typeof RuleType.linkAngleBraceStyleDetector;
+};
+type LinkBareURLNode = {
+  type: typeof RuleType.linkBareUrlDetector;
+};
+type LinkMailtoNode = {
+  type: typeof RuleType.linkAngleBraceStyleDetector;
+};
+type OrderedListNode = {
+  type: typeof RuleType.orderedList;
+  items: ParserResult[][];
+  ordered: true;
+  start?: number;
+};
+type UnorderedListNode = {
+  type: typeof RuleType.unorderedList;
+  items: ParserResult[][];
+  ordered: false;
+};
+type NewlineNode = {
+  type: typeof RuleType.newlineCoalescer;
+};
+type ParagraphNode = {
+  type: typeof RuleType.paragraph;
+  children: ParserResult[];
+};
+type ReferenceNode = {
+  type: typeof RuleType.ref;
+};
+type ReferenceImageNode = {
+  type: typeof RuleType.refImage;
+  alt?: string;
+  ref: string;
+};
+type ReferenceLinkNode = {
+  type: typeof RuleType.refLink;
+  children: ParserResult[];
+  fallbackChildren: string;
+  ref: string;
+};
+type TableNode = {
+  type: typeof RuleType.table;
+  /**
+   * alignment for each table column
+   */
+  align: ('left' | 'right' | 'center')[];
+  cells: ParserResult[][][];
+  header: ParserResult[][];
+};
+type TableSeparatorNode = {
+  type: typeof RuleType.tableSeparator;
+};
+type TextNode = {
+  type: typeof RuleType.text;
+  text: string;
+};
+type BoldTextNode = {
+  type: typeof RuleType.textBolded;
+  children: ParserResult[];
+};
+type ItalicTextNode = {
+  type: typeof RuleType.textEmphasized;
+  children: ParserResult[];
+};
+type EscapedTextNode = {
+  type: typeof RuleType.textEscaped;
+};
+type MarkedTextNode = {
+  type: typeof RuleType.textMarked;
+  children: ParserResult[];
+};
+type StrikethroughTextNode = {
+  type: typeof RuleType.textStrikethroughed;
+  children: ParserResult[];
+};
+type HTMLNode = {
+  type: typeof RuleType.htmlBlock;
+  attrs: JSX.IntrinsicAttributes | null;
+  children?: ReturnType<NestedParser> | undefined;
+  noInnerParse: boolean;
+  tag: HTMLTags;
+  text?: string | undefined;
+};
+type HTMLSelfClosingNode = {
+  type: typeof RuleType.htmlSelfClosing;
+  attrs: JSX.IntrinsicAttributes | null;
+  tag: string;
+};
+type CustomComponentNode = {
+  type: typeof RuleType.customComponent;
+  attrs: JSX.IntrinsicAttributes | null;
+  children?: ReturnType<NestedParser> | undefined;
+  noInnerParse: boolean;
+  tag: string;
+  text?: string | undefined;
+};
+type ParserResult = BlockQuoteNode | BreakLineNode | BreakThematicNode | CodeBlockNode | CodeFencedNode | CodeInlineNode | CustomComponentNode | FootnoteNode | FootnoteReferenceNode | GFMTaskNode | HeadingNode | HeadingSetextNode | HTMLCommentNode | ImageNode | LinkNode | LinkAngleBraceNode | LinkBareURLNode | LinkMailtoNode | OrderedListNode | UnorderedListNode | NewlineNode | ParagraphNode | ReferenceNode | ReferenceImageNode | ReferenceLinkNode | TableNode | TableSeparatorNode | TextNode | BoldTextNode | ItalicTextNode | EscapedTextNode | MarkedTextNode | StrikethroughTextNode | HTMLNode | HTMLSelfClosingNode;
+type NestedParser = (input: string, state: State) => ParserResult[];
+type RuleOutput = (ast: ParserResult | ParserResult[], state: State) => ReactNode;
+type Override = RequireAtLeastOne<{
+  component: any;
+  props: Record<string, any>;
+}> | any;
+type Overrides = { [tag in HTMLTags]?: Override } & {
+  [customComponent: string]: Override;
+};
+type MarkdownProcessorOptions = Partial<{
+  /**
+   * Ultimate control over the output of all rendered JSX.
+   */
+  createElement: (tag: Parameters<CreateElement>[0], props: JSX.IntrinsicAttributes, ...children: ReactNode[]) => ReactNode;
+  /**
+   * The library automatically generates an anchor tag for bare URLs included in the markdown
+   * document, but this behavior can be disabled if desired.
+   */
+  disableAutoLink: boolean;
+  /**
+   * Disable the compiler's best-effort transcription of provided raw HTML
+   * into JSX-equivalent. This is the functionality that prevents the need to
+   * use `dangerouslySetInnerHTML` in
+   */
+  disableParsingRawHTML: boolean;
+  /**
+   * Forces the compiler to have space between hash sign and the header text which
+   * is explicitly stated in the most of the markdown specs.
+   * https://github.github.com/gfm/#atx-heading
+   * `The opening sequence of # characters must be followed by a space or by the end of line.`
+   */
+  enforceAtxHeadings: boolean;
+  /**
+   * Forces the compiler to always output content with a block-level wrapper
+   * (`<p>` or any block-level syntax your markdown already contains.)
+   */
+  forceBlock: boolean;
+  /**
+   * Forces the compiler to always output content with an inline wrapper (`<span>`)
+   */
+  forceInline: boolean;
+  /**
+   * Forces the compiler to wrap results, even if there is only a single
+   * child or no children.
+   */
+  forceWrapper: boolean;
+  /**
+   * Supply additional HTML entity: unicode replacement mappings.
+   *
+   * Pass only the inner part of the entity as the key,
+   * e.g. `&le;` -> `{ "le": "\u2264" }`
+   *
+   * By default
+   * the following entities are replaced with their unicode equivalents:
+   *
+   * ```
+   * &amp;
+   * &apos;
+   * &gt;
+   * &lt;
+   * &nbsp;
+   * &quot;
+   * ```
+   */
+  namedCodesToUnicode: {
+    [key: string]: string;
+  };
+  /**
+   * Selectively control the output of particular HTML tags as they would be
+   * emitted by the compiler.
+   */
+  overrides: Overrides;
+  /**
+   * Allows for full control over rendering of particular rules.
+   * For example, to implement a LaTeX renderer such as `react-katex`:
+   *
+   * ```
+   * renderRule(next, node, renderChildren, state) {
+   *   if (node.type === RuleType.codeBlock && node.lang === 'latex') {
+   *     return (
+   *       <TeX as="div" key={state.key}>
+   *         {String.raw`${node.text}`}
+   *       </TeX>
+   *     )
+   *   }
+   *
+   *   return next();
+   * }
+   * ```
+   *
+   * Thar be dragons obviously, but you can do a lot with this
+   * (have fun!) To see how things work internally, check the `render`
+   * method in source for a particular rule.
+   */
+  renderRule: (/** Resume normal processing, call this function as a fallback if you are not returning custom JSX. */
+  next: () => ReactNode, /** the current AST node, use `RuleType` against `node.type` for identification */
+  node: ParserResult, /** use as `renderChildren(node.children)` for block nodes */
+  renderChildren: RuleOutput, /** contains `key` which should be supplied to the topmost JSX element */
+  state: State) => ReactNode;
+  /**
+   * Override the built-in sanitizer function for URLs, etc if desired. The built-in version is available as a library export called `sanitizer`.
+   */
+  sanitizer: (value: string, tag: HTMLTags, attribute: string) => string | null;
+  /**
+   * Override normalization of non-URI-safe characters for use in generating
+   * HTML IDs for anchor linking purposes.
+   */
+  slugify: (input: string, defaultFn: (input: string) => string) => string;
+  /**
+   * Declare the type of the wrapper to be used when there are multiple
+   * children to render. Set to `null` to get an array of children back
+   * without any wrapper, or use `Fragment` to get a React element
+   * that won't show up in the DOM.
+   */
+  wrapper: any | null;
+}>;
+//#endregion
+export { MarkdownProcessor, MarkdownProcessorOptions, RuleType, compiler, sanitizer, slugify };
+//# sourceMappingURL=processor.d.ts.map

package/dist/types/components/MarkDownRender/processor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"processor.d.ts","names":[],"sources":["../../../../src/components/MarkDownRender/processor.tsx"],"sourcesContent":[],"mappings":";;;;AA4qCA;AA+OA;AAmzCA;;AACO,cA3rFM,QA2rFN,EAAA;EAAL,SAAA,UAAA,EAAA,GAAA;EAEY,SAAA,SAAA,EAAA,GAAA;EAHkB,SAAA,aAAA,EAAA,GAAA;EAAE,SAAA,SAAA,EAAA,GAAA;EAsB7B,SAAA,UAAA,EAAiB,GAAA;EAAuB,SAAA,UAAA,EAAA,GAAA;EAAU,SAAA,QAAA,EAAA,GAAA;EACrD,SAAA,iBAAA,EAAA,GAAA;EACc,SAAA,OAAA,EAAA,GAAA;EAAG,SAAA,OAAA,EAAA,GAAA;EAAjB,SAAA,aAAA,EAAA,IAAA;EAF0D;EAKlD,SAAA,SAAA,EAAA,IAAA;EAAuB,SAAA,WAAA,EAAA,IAAA;EAAG;EAAR,SAAA,eAAA,EAAA,IAAA;EAAT;EAAoC,SAAA,eAAA,EAAA,IAAA;EAAW,SAAA,KAAA,EAAA,IAAA;EAAM,SAAA,IAAA,EAAA,IAAA;EAAd;EAAR,SAAA,2BAAA,EAAA,IAAA;EAAR;EACtC,SAAA,mBAAA,EAAA,IAAA;EAAI;EAEH,SAAA,gBAAa,EAAA,IAAU;EAEvB,SAAA,WAAQ,EAAA,IAAS;EAEjB,SAAK,SAAA,EAAA,IAUF;EASH,SAAA,GAAA,EAAA,IAAc;EAMd,SAAA,QAAa,EAAA,IAAA;EAIb,SAAA,OAAA,EAAA,IAAiB;EAIjB,SAAA,KAAA,EAAa,IAAA;EAOb,SAAA,cAAc,EAAA,IAAA;EAId,SAAA,IAAA,EAAA,IAAc;EAKd,SAAA,UAAY,EAAA,IAAA;EAIZ,SAAA,cAAA,EAAqB,IAAA;EAMrB,SAAA,WAAW,EAAA,IAAA;EAKX,SAAA,UAAW,EAAA,IAAA;EAOX,SAAA,mBAAiB,EAAA,IACP;EAGV,SAAA,aAAe,EAAA,IAAA;AACe,CAAA;AAIN,KA1vFxB,QAAA,GAgwFQ,CAAA,OAhwFW,QAiwFT,CAAA,CAAA,MAAS,OAjwFuB,QAkwFnC,CAAY;AAKnB,cAlrEQ,OAkrEU,EAAA,CAAA,GAAA,EAAA,MACR,EAAA,GAAS,MAAA;AAGnB,cArqDQ,SAqqDO,EAAA,CAAA,KACL,EAAA,MAAS,EAAA,GAAA,MAAA,GAAA,IAAmB;AAGtC,cA17CQ,QA07CM,EAAA,CAAA,QACK,CAAT,EAAS,MAAA,EAAA,OAA2B,CAA3B,EAz7Cb,wBAy7CwC,EAAA,GAx7ChD,GAAA,CAAI,OAw7C4C;AAAA;AAK9B;AAOA;AAKmB;AAQnC,cAjKQ,iBAkKE,EAlKiB,EAkKR,CAjKtB,IAiKyB,CAjKpB,cAiKoB,CAjKL,OAiKK,CAAA,EAAA,UAAA,CAAA,GAAA;EAGtB,QAAA,EAAA,MAAA;EAMA,OAAA,CAAA,EAxKS,wBAyKC;AACS,CAAA,CAAA;;;;KAvJnB,iBAmKiB,CAAA,CAAA,EAAA,aAAA,MAnKuB,CAmKvB,GAAA,MAnKiC,CAmKjC,CAAA,GAnKsC,IAmKtC,CAlKpB,CAkKoB,EAjKpB,OAiKoB,CAAA,MAjKN,CAiKM,EAjKH,IAiKG,CAAA,CAAA,GAAA,QA9JZ,IAiKL,KAjKc,QAiKI,CAjKK,IAiKL,CAjKU,CAiKV,EAjKa,CAiKb,CACR,CAAA,GAlK2B,OAkKlB,CAlK0B,IAkK1B,CAlK+B,CAkK/B,EAlKkC,OAkKpB,CAlK4B,IAkK5B,EAlKkC,CAkKlC,CAAA,CAAA,CAAA,EAAA,CAjKlC,IAoKC,CAAA;AACuB,KAnKvB,aAAA,GAuKY,OAvKW,aAwKJ;AACA,KAvKnB,QAAA,GA0KA,MA1KiB,GAAA,CAAI,iBA2KF;AACA,KA1KnB,KAAA,GA6KA;EAIA;EAKA,QAAA,CAAA,EAAA,OAAA;EAKA;EACU,MAAS,CAAA,EAAA,OAAA;EACf;EACe,MAAA,CAAA,EAAA,OAAA;EAAX;EAEN,OAAA,CAAA,EAAA,OAAA;EAAQ;EAIV,GAAA,CAAA,EA1LG,GA0LH;EAMA;EACU,IAAA,CAAA,EAAS,OAAA;EACf;EACe,WAAA,CAAA,EAAA,MAAA;EAAX;EAAU,MAAA,CAAA,EAAA,OAAA;AAAA,CAAA;KA1LlB,cAAA,GAiMD;EACA,KAAA,CAAA,EAAA,MAAA;EACA,QAAA,EAjMQ,YAiMR,EAAA;EACA,IAAA,EAAA,OAjMW,QAAA,CAAS,UAiMpB;CACA;KA/LC,aAAA,GAgMD;EACA,IAAA,EAAA,OAhMW,QAAA,CAAS,SAgMpB;CACA;KA9LC,iBAAA,GA+LD;EACA,IAAA,EAAA,OA/LW,QAAA,CAAS,aA+LpB;CACA;KA7LC,aAAA,GA8LD;EACA,IAAA,EAAA,OA9LW,QAAA,CAAS,SA8LpB;EACA,KAAA,CAAA,EA9LM,GAAA,CAAI,mBA8LV;EACA,IAAA,CAAA,EAAA,MAAA;EACA,IAAA,EAAA,MAAA;CACA;KA5LC,cAAA,GA6LD;EACA,IAAA,EAAA,OA7LW,QAAA,CAAS,UA6LpB;CACA;KA3LC,cAAA,GA4LD;EACA,IAAA,EAAA,OA5LW,QAAA,CAAS,UA4LpB;EACA,IAAA,EAAA,MAAA;CACA;KA1LC,YAAA,GA2LD;EACA,IAAA,EAAA,OA3LW,QAAA,CAAS,QA2LpB;CACA;KAzLC,qBAAA,GA0LD;EACA,IAAA,EAAA,OA1LW,QAAA,CAAS,iBA0LpB;EACA,MAAA,EAAA,MAAA;EACA,IAAA,EAAA,MAAA;CACA;KAxLC,WAAA,GAyLD;EACA,IAAA,EAAA,OAzLW,QAAA,CAAS,OAyLpB;EACA,SAAA,EAAA,OAAA;CAAmB;AAAA,KAtLlB,WAAA,GAwLY;EAQZ,IAAA,EAAA,OA/LU,QAAA,CAAS,OA+LT;EACR,QAAA,EA/LK,YA+LL,EAAA;EAAe,EAAA,EAAA,MAAA;EACb,KAAA,EAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA;CACJ;KA5LA,iBAAA,GA4LS;EAoCT,IAAA,EAAA,OA/NU,QAAA,CAAS,aAgOpB;AAAiB,CAAA;KA7NhB,eAAA,GAoOK;EAAY,IAAA,EAAA,OAnOP,QAAA,CAAS,WAmOF;CAEO;KAlOxB,SAAA,GAkOgC;EAGzB,IAAA,EAAA,OApOG,QAAA,CAAS,KAoOY;EAKhB,GAAA,CAAA,EAAA,MAAA;EAAX,MAAA,EAAA,MAAA;EACE,KAAI,CAAA,EAAA,MAAA;CACE;KArOZ,QAAA,GAsOE;EAkEM,IAAA,EAAA,OAvSE,QAAA,CAAS,IAuSX;EA0BG,QAAA,EAhUJ,YAgUI,EAAA;EAEN,MAAA,EAAA,MAAA;EAEU,KAAA,CAAA,EAAA,MAAA;CAET;KAjUN,kBAAA,GAkUE;EAK2B,IAAA,EAAA,OAtUnB,QAAA,CAAS,2BAsUU;CAhHK;KAnNlC,eAAA,GAmNyC;eAlN/B,QAAA,CAAS;;KAGnB,cAAA;eACU,QAAA,CAAS;;KAGnB,eAAA;eACU,QAAA,CAAS;SACf;;;;KAKJ,iBAAA;eACU,QAAA,CAAS;SACf;;;KAIJ,WAAA;eACU,QAAA,CAAS;;KAGnB,aAAA;eACU,QAAA,CAAS;YACZ;;KAGP,aAAA;eACU,QAAA,CAAS;;KAGnB,kBAAA;eACU,QAAA,CAAS;;;;KAKnB,iBAAA;eACU,QAAA,CAAS;YACZ;;;;KAKP,SAAA;eACU,QAAA,CAAS;;;;;SAKf;UACC;;KAGL,kBAAA;eACU,QAAA,CAAS;;KAGnB,QAAA;eACU,QAAA,CAAS;;;KAInB,YAAA;eACU,QAAA,CAAS;YACZ;;KAGP,cAAA;eACU,QAAA,CAAS;YACZ;;KAGP,eAAA;eACU,QAAA,CAAS;;KAGnB,cAAA;eACU,QAAA,CAAS;YACZ;;KAGP,qBAAA;eACU,QAAA,CAAS;YACZ;;KAGP,QAAA;eACU,QAAA,CAAS;SACf,GAAA,CAAI;aACA,WAAW;;OAEjB;;;KAIF,mBAAA;eACU,QAAA,CAAS;SACf,GAAA,CAAI;;;KAIR,mBAAA;eACU,QAAA,CAAS;SACf,GAAA,CAAI;aACA,WAAW;;;;;KAMnB,YAAA,GACD,iBACA,gBACA,oBACA,gBACA,iBACA,iBACA,sBACA,eACA,wBACA,cACA,cACA,oBACA,kBACA,YACA,WACA,qBACA,kBACA,iBACA,kBACA,oBACA,cACA,gBACA,gBACA,qBACA,oBACA,YACA,qBACA,WACA,eACA,iBACA,kBACA,iBACA,wBACA,WACA;KAEC,YAAA,0BAAsC,UAAU;KAQhD,UAAA,SACE,eAAe,uBACb,UACJ;KAoCA,QAAA,GACD;;SAES;;KAIR,SAAA,aACK,YAAY;6BAEO;;KAGjB,wBAAA,GAA2B;;;;uBAK9B,WAAW,0BACT,GAAA,CAAI,kCACE,gBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAkEM;;;;;;;;;;;;;;;;;;;;;;;;cA0BG;QAEN;kBAEU;SAET,UACJ;;;;kCAK2B"}

package/dist/types/components/MaxHeightSmoother/index.d.ts

@@ -0,0 +1,167 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+
+//#region src/components/MaxHeightSmoother/index.d.ts
+
+/**
+ * Props for the MaxHeightSmoother component
+ */
+interface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {
+  /** Content to render within the smoother container */
+  children: ReactNode;
+  /** Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior */
+  isHidden?: boolean;
+  /** Enable expand-on-hover behavior */
+  isOverable?: boolean;
+  /** Enable expand-on-focus behavior for accessibility and keyboard navigation */
+  isFocusable?: boolean;
+  /** Minimum height in pixels for the collapsed state */
+  minHeight?: number;
+}
+/**
+ * MaxHeightSmoother Component
+ *
+ * A sophisticated container component that provides smooth height transitions
+ * for collapsible content. Uses CSS Grid's fractional rows to create fluid
+ * animations without JavaScript height calculations, making it performant
+ * and smooth across all devices and screen sizes.
+ *
+ * @component
+ * @example
+ * Basic controlled usage:
+ * ```tsx
+ * const [isCollapsed, setIsCollapsed] = useState(true);
+ *
+ * <MaxHeightSmoother isHidden={isCollapsed}>
+ *   <div>Your collapsible content here</div>
+ * </MaxHeightSmoother>
+ * ```
+ *
+ * @example
+ * Hover-triggered expansion:
+ * ```tsx
+ * <MaxHeightSmoother isOverable={true}>
+ *   <div>
+ *     <p>This content expands when you hover over the container.</p>
+ *     <p>Perfect for preview cards or tooltips.</p>
+ *   </div>
+ * </MaxHeightSmoother>
+ * ```
+ *
+ * @example
+ * Accessible focus-triggered expansion:
+ * ```tsx
+ * <MaxHeightSmoother isFocusable={true}>
+ *   <div>
+ *     <h3>Expandable Section</h3>
+ *     <p>Tab to focus this container to expand the content.</p>
+ *     <p>Great for accessible progressive disclosure.</p>
+ *   </div>
+ * </MaxHeightSmoother>
+ * ```
+ *
+ * @example
+ * With minimum height for preview:
+ * ```tsx
+ * <MaxHeightSmoother
+ *   isOverable={true}
+ *   minHeight={100}
+ *   className="border rounded-lg p-4"
+ * >
+ *   <div>
+ *     <h3>Article Preview</h3>
+ *     <p>This article preview shows the first few lines...</p>
+ *     <p>Hover to see the full content with smooth expansion.</p>
+ *     <p>The minHeight ensures some content is always visible.</p>
+ *   </div>
+ * </MaxHeightSmoother>
+ * ```
+ *
+ * @example
+ * Combined hover and focus behavior:
+ * ```tsx
+ * <MaxHeightSmoother
+ *   isOverable={true}
+ *   isFocusable={true}
+ *   minHeight={80}
+ * >
+ *   <div>
+ *     <h4>Interactive Card</h4>
+ *     <p>Expands on both hover and keyboard focus.</p>
+ *     <p>Accessible to both mouse and keyboard users.</p>
+ *   </div>
+ * </MaxHeightSmoother>
+ * ```
+ *
+ * Features:
+ * - Smooth CSS Grid-based height transitions (700ms duration)
+ * - Three interaction modes: controlled, hover, and focus
+ * - Configurable minimum height for collapsed state
+ * - Accessible keyboard navigation support
+ * - Overflow handling with smooth scrolling
+ * - ARIA attributes for screen reader compatibility
+ * - Performance-optimized with CSS-only animations
+ * - Responsive design that works on all screen sizes
+ *
+ * Animation Technique:
+ * Uses CSS Grid `grid-rows-[0fr]` to `grid-rows-[1fr]` transitions
+ * instead of height animations, which provides:
+ * - Smooth animations without knowing content height
+ * - Better performance (no layout recalculations)
+ * - More reliable across different content types
+ * - Automatic adaptation to dynamic content changes
+ *
+ * Interaction Modes:
+ * 1. **Controlled**: Use `isHidden` prop for external state control
+ * 2. **Hover**: Set `isOverable={true}` for mouse hover expansion
+ * 3. **Focus**: Set `isFocusable={true}` for keyboard focus expansion
+ * 4. **Combined**: Use both `isOverable` and `isFocusable` together
+ *
+ * Accessibility Features:
+ * - `role="button"` when focusable for proper screen reader context
+ * - `tabIndex={0}` for keyboard navigation when focusable
+ * - `aria-hidden` attribute for screen reader control
+ * - Semantic focus management with focus-within pseudo-class
+ * - High contrast focus indicators
+ * - Respects prefers-reduced-motion settings
+ *
+ * Use Cases:
+ * - FAQ accordions and expandable sections
+ * - Article previews and read-more functionality
+ * - Card hover effects and content previews
+ * - Progressive disclosure for complex forms
+ * - Tooltip and popover content containers
+ * - Mobile-friendly collapsible navigation
+ * - Dashboard widget expansion
+ * - Email preview in mail clients
+ *
+ * Performance Considerations:
+ * - Pure CSS animations (no JavaScript timer overhead)
+ * - GPU acceleration through transform-based animations
+ * - Minimal repaints and layout shifts
+ * - Efficient event handling with CSS pseudo-classes
+ * - No DOM measurements or calculations required
+ *
+ * @param props - Component props extending HTML div attributes
+ * @param props.children - Content to render within the container
+ * @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)
+ * @param props.isOverable - Enable hover-to-expand behavior
+ * @param props.isFocusable - Enable focus-to-expand behavior with keyboard navigation
+ * @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)
+ * @param props.className - Additional CSS classes for styling
+ * @param props.style - Inline styles (note: minHeight style will be applied)
+ * @param props.role - ARIA role (automatically set to "button" when focusable)
+ * @param props.tabIndex - Tab index (automatically set to 0 when focusable)
+ * @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)
+ * @param props.onClick - Click event handler
+ * @param props.onMouseEnter - Mouse enter event handler
+ * @param props.onMouseLeave - Mouse leave event handler
+ * @param props.onFocus - Focus event handler
+ * @param props.onBlur - Blur event handler
+ * @param props...rest - All other standard HTML div attributes
+ *
+ * @returns A smooth height-transitioning container with configurable interaction modes
+ */
+declare const MaxHeightSmoother: FC<MaxHeightSmootherProps>;
+//#endregion
+export { MaxHeightSmoother };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/MaxHeightSmoother/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":[],"mappings":";;;;;;AAA2D;UAMjD,sBAAA,SAA+B,cAAe,CAAA,cAAA,CAAA,CAAA;EAE5C;EAF6B,QAAA,EAE7B,SAF6B;EAAc;EA6J1C,QAAA,CAAA,EAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAA,mBAAmB,GAAG"}

package/dist/types/components/MaxWidthSmoother/index.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "react";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+
+//#region src/components/MaxWidthSmoother/index.d.ts
+type Align = 'left' | 'right';
+type MaxHeightSmootherProps = HTMLAttributes<HTMLDivElement> & {
+  isHidden: boolean;
+  minWidth?: number;
+  align?: Align;
+};
+declare const MaxWidthSmoother: ({
+  children,
+  isHidden,
+  minWidth,
+  align,
+  className,
+  ...props
+}: MaxHeightSmootherProps) => react_jsx_runtime16.JSX.Element;
+//#endregion
+export { MaxWidthSmoother };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/MaxWidthSmoother/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":[],"mappings":";;;;KAGK,KAAA;KAEA,sBAAA,GAAyB,eAAe;;EAFxC,QAAK,CAAA,EAAA,MAAA;EAEL,KAAA,CAAA,EAGK,KAHL;CAAwC;AAAf,cAMjB,gBANiB,EAAA,CAAA;EAAA,QAAA;EAAA,QAAA;EAAA,QAAA;EAAA,KAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAa3B,sBAb2B,EAAA,GAaL,mBAAA,CAAA,GAAA,CAAA,OAbK"}

package/dist/types/components/Modal/Modal.d.ts

@@ -0,0 +1,112 @@
+import { ContainerProps } from "../Container/index.js";
+import { FC, ReactNode } from "react";
+
+//#region src/components/Modal/Modal.d.ts
+
+/**
+ * Enumeration of available modal sizes
+ */
+declare enum ModalSize {
+  /** Small modal: max height 30vh, max width xl */
+  SM = "sm",
+  /** Medium modal: max height 50vh, max width xl */
+  MD = "md",
+  /** Large modal: max height 70vh, max width 2xl */
+  LG = "lg",
+  /** Extra large modal: max height 95vh, max width 6xl */
+  XL = "xl",
+  /** Unset size: max height 95vh, full width responsive */
+  UNSET = "unset",
+}
+/**
+ * Props for the Modal component
+ */
+type ModalProps = {
+  /** Content to be displayed inside the modal */
+  children: ReactNode;
+  /** Controls whether the modal is visible */
+  isOpen: boolean;
+  /** Callback function called when the modal should be closed */
+  onClose?: () => void;
+  /** Container element to render the modal into (defaults to document.body) */
+  container?: HTMLElement;
+  /** Whether to disable scrolling on the background content */
+  disableScroll?: boolean;
+  /** Whether to display a close button in the modal header */
+  hasCloseButton?: boolean;
+  /** Optional title displayed at the top of the modal */
+  title?: string;
+  /** Size variant for the modal */
+  size?: ModalSize | `${ModalSize}`;
+} & Pick<ContainerProps, 'className' | 'transparency' | 'border' | 'background' | 'roundedSize' | 'borderColor' | 'padding' | 'separator' | 'gap'>;
+/**
+ * Modal Component
+ *
+ * A highly customizable modal dialog component with portal rendering, Framer Motion animations,
+ * and comprehensive accessibility features. Supports multiple size variants and scroll management.
+ *
+ * Features:
+ * - Portal rendering to any container element (defaults to document.body)
+ * - Smooth animations with Framer Motion
+ * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing
+ * - Optional title and close button
+ * - Background scroll prevention
+ * - Click-outside-to-close functionality
+ * - Full accessibility support with ARIA attributes
+ * - Keyboard navigation support (ESC to close)
+ * - Extensible styling with Container props
+ *
+ * @example
+ * Basic usage:
+ * ```jsx
+ * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+ *   <p>Modal content goes here</p>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * With title and close button:
+ * ```jsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   title="Confirm Action"
+ *   hasCloseButton
+ *   size={ModalSize.LG}
+ * >
+ *   <div>
+ *     <p>Are you sure you want to continue?</p>
+ *     <Button onClick={onConfirm}>Confirm</Button>
+ *   </div>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * Custom container and styling:
+ * ```jsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   container={customContainer}
+ *   background="card"
+ *   padding="lg"
+ *   border="default"
+ * >
+ *   Content with custom styling
+ * </Modal>
+ * ```
+ *
+ * Accessibility Notes:
+ * - Modal receives focus when opened
+ * - Background content is hidden from screen readers when modal is open
+ * - ESC key closes modal (handled by browser for role="dialog")
+ * - Click outside modal closes it
+ * - Close button has descriptive label for screen readers
+ *
+ * @param props - Modal component props
+ * @returns JSX element rendered via createPortal
+ */
+declare const Modal: FC<ModalProps>;
+//#endregion
+export { Modal, ModalSize };
+//# sourceMappingURL=Modal.d.ts.map

package/dist/types/components/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","names":[],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAgBA;AAgBK,aAhBO,SAAA;EAkBA;EAME,EAAA,GAAA,IAAA;EAQL;EAAe,EAAA,GAAA,IAAA;EAEtB;EADE,EAAA,GAAA,IAAA;EAAI;EAiHK,EAAA,GAAA,IAiGZ;;;;;;;KAnOI,UAAA;;YAEO;;;;;;cAME;;;;;;;;SAQL,eAAe;IACpB,KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgHW,OAAO,GAAG"}

package/dist/types/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+import { Modal, ModalSize } from "./Modal.js";
+export { Modal, ModalSize };