@lizzelabs/react-harmony 1.0.0 → 1.1.0

package/dist/animations-B09mMqCx.js

@@ -0,0 +1,24 @@
+import { useMemo as o, useInsertionEffect as m, memo as s } from "react";
+import { S as u } from "./styles-DofTX6nZ.js";
+import { u as l, i as r } from "./piece-provider-DTglah_F.js";
+const c = (e) => {
+  const { theme: n } = l(), a = o(() => new u(), []);
+  return m(() => (a.apply(
+    Array.isArray(e.value) ? e.value.reduce(
+      (i, t) => ({
+        ...i,
+        ...typeof t == "function" ? t(n).animation : t.animation
+      }),
+      {}
+    ) : typeof e.value == "function" ? e.value(n).animation : e.value.animation
+  ), () => {
+    a.delete();
+  }), [e.value, n]), {};
+}, f = (e) => (c(e), e.children), d = s(
+  f,
+  r
+);
+export {
+  d as A,
+  c as u
+};

package/dist/animations.es.js

@@ -0,0 +1,5 @@
+import { A as i, u as n } from "./animations-B09mMqCx.js";
+export {
+  i as Animations,
+  n as useAnimations
+};

package/dist/components/animations/animations.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { AnimationsProperties } from './animations.types';
+declare const InternalAnimations: <Theme extends object | undefined>(props: AnimationsProperties<Theme>) => ReactNode;
+export declare const Animations: typeof InternalAnimations;
+export {};

package/dist/components/animations/animations.hook.d.ts

@@ -0,0 +1,2 @@
+import { AnimationsProperties } from './animations.types';
+export declare const useAnimations: <Theme extends object | undefined>(props: AnimationsProperties<Theme>) => {};

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

@@ -0,0 +1,16 @@
+import { PropWithTheme } from '../../types';
+import { CSSProperties, ReactNode } from 'react';
+export type KeyFramesFromTo = `${number}%` | `from` | 'to';
+export type CssAnimation<Name extends string> = {
+    [keyframes in `@keyframes ${Name}`]: {
+        [key in KeyFramesFromTo]?: CSSProperties;
+    };
+};
+export type HarmonyAnimation<Name extends string> = {
+    name: Name;
+    animation: CssAnimation<Name>;
+};
+export type AnimationsProperties<Theme extends object | undefined> = {
+    value: PropWithTheme<HarmonyAnimation<string>, Theme> | PropWithTheme<HarmonyAnimation<string>, Theme>[];
+    children?: ReactNode | ReactNode[];
+};

package/dist/components/animations/index.d.ts

@@ -0,0 +1,3 @@
+export * from './animations';
+export * from './animations.hook';
+export * from './animations.types';

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './animations';
+export * from './piece';
+export * from './piece-provider';
+export * from './scrollable';
+export * from './screen';
+export * from './text';
+export * from './media';

package/dist/components/media/index.d.ts

@@ -0,0 +1,3 @@
+export * from './media';
+export * from './media.hook';
+export * from './media.types';

package/dist/components/media/media.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { MediaProperties } from './media.types';
+declare const InternalMedia: <Theme extends object | undefined>(props: MediaProperties<Theme>) => ReactNode;
+export declare const Media: typeof InternalMedia;
+export {};

package/dist/components/media/media.hook.d.ts

@@ -0,0 +1,2 @@
+import { MediaProperties, UseMedia } from './media.types';
+export declare const useMedia: <Theme extends object | undefined>({ keyframes, withStyle, animateAs, query, removeFromHtml, }: MediaProperties<Theme>) => UseMedia;

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

@@ -0,0 +1,15 @@
+import { PropWithTheme, WithStyle } from '../../types';
+import { ReactNode } from 'react';
+import { HarmonyAnimation } from '../animations';
+export type MediaProperties<Theme extends object | undefined> = {
+    query: string | ((theme: Theme | undefined) => string);
+    children: ReactNode | ReactNode[];
+    removeFromHtml?: boolean;
+    keyframes?: HarmonyAnimation<string>;
+    animateAs?: string;
+    withStyle?: PropWithTheme<WithStyle, Theme>[] | PropWithTheme<WithStyle[] | WithStyle, Theme>;
+};
+export type UseMedia = {
+    style: WithStyle;
+    shouldRemoveComponent: boolean;
+};

package/dist/components/piece/index.d.ts

@@ -0,0 +1,3 @@
+export * from './piece';
+export * from './piece.hook';
+export * from './piece.types';

package/dist/components/piece/piece.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { HtmlTag } from '../../types';
+import { PieceProperties } from './piece.types';
+declare function InternalPiece<const Theme extends object | undefined = object, const Element extends HtmlTag = 'div', const Component extends HTMLElement = HTMLElementTagNameMap[Element]>(props: PieceProperties<Theme, Element, Component>): ReactNode;
+export declare const Piece: typeof InternalPiece;
+export {};

package/dist/components/piece/piece.hook.d.ts

@@ -0,0 +1,5 @@
+import { HtmlTag } from '../../types';
+import { PieceProperties } from './piece.types';
+export declare const usePiece: <const Theme extends object | undefined = object, const Element extends HtmlTag = "div", const Component extends HTMLElement = HTMLElementTagNameMap[Element]>(props: PieceProperties<Theme, Element, Component>) => {
+    element: import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/piece/piece.static.d.ts

@@ -0,0 +1,2 @@
+import { PieceProperties } from './piece.types';
+export declare const PieceInvalidProps: (keyof PieceProperties<any, any, any>)[];

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

@@ -0,0 +1,37 @@
+import { ElementEvents, HtmlTag, NoEventsAndAria, PropWithTheme, WithStyle } from '../../types';
+import { AriaAttributes, ComponentPropsWithoutRef, CSSProperties, ReactNode, RefObject } from 'react';
+export type PieceAlignmentAndStyleProperties<Theme extends object | undefined> = {
+    containerType?: CSSProperties['containerType'];
+    containerName?: CSSProperties['containerName'];
+    cursor?: CSSProperties['cursor'];
+    margin?: PropWithTheme<string, Theme>;
+    padding?: PropWithTheme<string, Theme>;
+    textColor?: PropWithTheme<string, Theme>;
+    background?: PropWithTheme<string, Theme>;
+    backgroundColor?: PropWithTheme<string, Theme>;
+    fontSize?: PropWithTheme<string, Theme>;
+    gap?: CSSProperties['gap'];
+    direction?: CSSProperties['flexDirection'];
+    alignContent?: CSSProperties['alignContent'];
+    justifyContent?: CSSProperties['justifyContent'];
+    alignItems?: CSSProperties['alignItems'];
+    justifyItems?: CSSProperties['justifyItems'];
+    height?: CSSProperties['height'];
+    width?: CSSProperties['width'];
+    display?: CSSProperties['display'];
+    contentColumns?: CSSProperties['gridTemplateColumns'] | number;
+    contentRows?: CSSProperties['gridTemplateRows'] | number;
+    atColumn?: CSSProperties['gridColumn'] | number;
+    atRow?: CSSProperties['gridRow'] | number;
+    flex?: CSSProperties['flex'];
+    withStyle?: PropWithTheme<WithStyle, Theme>[] | PropWithTheme<WithStyle[] | WithStyle, Theme>;
+};
+export type PieceProperties<Theme extends object | undefined = any, Element extends HtmlTag = 'div', Component extends HTMLElement = HTMLElementTagNameMap[Element]> = {
+    ref?: RefObject<Component | null>;
+    as?: Element;
+    kind?: string;
+    id?: string;
+    children?: ReactNode | ReactNode[];
+    aria?: AriaAttributes;
+    className?: string | undefined;
+} & ElementEvents<Element> & NoEventsAndAria<ComponentPropsWithoutRef<Element>> & PieceAlignmentAndStyleProperties<Theme>;

package/dist/components/piece/piece.utils.d.ts

@@ -0,0 +1,7 @@
+import { PieceProperties } from './piece.types';
+import { HtmlTag, PropWithTheme, WithStyle } from '../../types';
+export declare const PieceUtils: {
+    pickComponentProps: <Theme extends object | undefined, Element extends HtmlTag, Component extends HTMLElement>(props: PieceProperties<Theme, Element, Component>) => PieceProperties<Theme, Element, Component>;
+    pickComponentStyle: <Theme extends object | undefined>(theme: Theme | undefined, style?: PropWithTheme<WithStyle, Theme>[] | PropWithTheme<WithStyle[] | WithStyle, Theme>) => WithStyle | undefined;
+    loadPositionProps: <Theme extends object | undefined, Element extends HtmlTag, Component extends HTMLElement>(props: PieceProperties<Theme, Element, Component>, style: WithStyle | undefined, theme: Theme) => WithStyle | undefined;
+};

package/dist/components/piece-provider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './piece-provider.hook';
+export * from './piece-provider.types';
+export * from './piece-provider';

package/dist/components/piece-provider/piece-provider.context.d.ts

@@ -0,0 +1,2 @@
+import { PieceProviderData } from './piece-provider.types';
+export declare const PieceProviderContext: import('react').Context<PieceProviderData<any>>;

package/dist/components/piece-provider/piece-provider.d.ts

@@ -0,0 +1,4 @@
+import { PieceProviderProperties } from './piece-provider.types';
+declare const InternalPieceProvider: <Theme extends object>(props: PieceProviderProperties<Theme>) => import("react/jsx-runtime").JSX.Element;
+export declare const PieceProvider: typeof InternalPieceProvider;
+export {};

package/dist/components/piece-provider/piece-provider.hook.d.ts

@@ -0,0 +1,2 @@
+import { PieceProviderData } from './piece-provider.types';
+export declare const usePieceProvider: <T extends object | undefined>() => PieceProviderData<T>;

package/dist/components/piece-provider/piece-provider.types.d.ts

@@ -0,0 +1,24 @@
+import { HtmlTag, PropWithTheme, WithStyle } from '../../types';
+import { ReactNode } from 'react';
+import { PieceProperties } from '../piece/piece.types';
+export type ApplyFn = <T extends object | undefined, Element extends HtmlTag, Component extends HTMLElement, Piece extends PieceProperties<T, Element, Component>>(props: Piece, theme: T) => boolean;
+export type ProviderPattern<T extends object | undefined, Element extends HtmlTag, Component extends HTMLElement = HTMLElementTagNameMap[Element]> = {
+    applyOn: HtmlTag | 'all' | ApplyFn;
+    defaults?: PropWithTheme<PieceProperties<T, Element, Component>, T>;
+    style?: PropWithTheme<WithStyle, T>;
+};
+export interface PieceProviderProperties<T extends object | undefined> {
+    children?: ReactNode;
+    patterns: ProviderPattern<T, any, any>[];
+    theme?: T;
+}
+export type PieceContext<T extends object | undefined, Element extends HtmlTag, Component extends HTMLElement> = {
+    className: string;
+    style: WithStyle;
+    defaults: PieceProperties<T, Element, Component>;
+};
+export interface PieceProviderData<Theme extends object | undefined> {
+    getContext: <Element extends HtmlTag, Component extends HTMLElement, Piece extends PieceProperties<Theme, Element, Component>>(properties: Piece) => PieceContext<Theme, Element, Component>;
+    theme: Theme | undefined;
+    updateTheme: (theme: Theme) => void;
+}

package/dist/components/screen/index.d.ts

@@ -0,0 +1,3 @@
+export * from './screen';
+export * from './screen.hook';
+export * from './screen.types';

package/dist/components/screen/screen.d.ts

@@ -0,0 +1,4 @@
+import { ScreenProperties } from './screen.types';
+declare const InternalScreen: <Theme extends object | undefined>(props: ScreenProperties<Theme>) => import("react/jsx-runtime").JSX.Element;
+export declare const Screen: typeof InternalScreen;
+export {};

package/dist/components/screen/screen.hook.d.ts

@@ -0,0 +1,4 @@
+import { ScreenProperties } from './screen.types';
+export declare const useScreen: <Theme extends object | undefined>(props: ScreenProperties<Theme>) => {
+    id: string;
+};

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

@@ -0,0 +1,15 @@
+import { JSX, ReactNode } from 'react';
+import { PropWithTheme, WithStyle } from '../../types';
+export interface ProviderArg<Props> {
+    Provider: (props: Props) => JSX.Element;
+    props: Props;
+}
+export type ScreenProperties<T extends object | undefined> = {
+    id?: string;
+    containerId: string;
+    fontFamily?: string;
+    fontSize: string;
+    overflow?: boolean;
+    globalStyle?: PropWithTheme<WithStyle, T> | PropWithTheme<WithStyle, T>[];
+    children: ReactNode;
+};

package/dist/components/scrollable/index.d.ts

@@ -0,0 +1,3 @@
+export * from './scrollable';
+export * from './scrollable.hook';
+export * from './scrollable.types';

package/dist/components/scrollable/scrollable.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { HtmlTag } from '../../types';
+import { ScrollableProperties } from './scrollable.types';
+declare const InternalScrollable: <T extends object | undefined, Element extends HtmlTag, Component extends HTMLElement = HTMLElementTagNameMap[Element]>(props: ScrollableProperties<T, Element, Component>) => ReactNode;
+export declare const Scrollable: typeof InternalScrollable;
+export {};

package/dist/components/scrollable/scrollable.hook.d.ts

@@ -0,0 +1,5 @@
+import { HtmlTag } from '../../types';
+import { ScrollableProperties } from './scrollable.types';
+export declare const useScrollable: <Theme extends object | undefined, Element extends HtmlTag, Component extends HTMLElement = HTMLElementTagNameMap[Element]>(props: ScrollableProperties<Theme, Element, Component>) => {
+    element: import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/scrollable/scrollable.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const ScrollbarRoot: (size: any, behavior: any, color: string, highlight: string, horizontal: boolean, vertical: boolean, scrollSnap: any) => {
+    minHeight: number;
+    boxSizing: "content-box";
+    transition: "all 0.3s ease-in-out";
+    display: "flex";
+    flex: string;
+    scrollbarWidth: any;
+    scrollbarColor: `${string} ${string}`;
+    scrollSnapType?: any;
+    scrollBehavior: any;
+    overflowX: "hidden" | "auto";
+    overflowY: "hidden" | "auto";
+    flexDirection: "row" | "column";
+};

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

@@ -0,0 +1,12 @@
+import { HtmlTag, PropWithTheme } from '../../types';
+import { PieceProperties } from '../piece';
+import { CSSProperties } from 'react';
+export type ScrollableProperties<Theme extends object | undefined, Element extends HtmlTag, Component extends HTMLElement = HTMLElementTagNameMap[Element]> = PieceProperties<Theme, Element, Component> & {
+    horizontal?: boolean;
+    vertical?: boolean;
+    size?: 'auto' | 'thin' | 'none';
+    behavior?: ScrollBehavior;
+    scrollSnap?: CSSProperties['scrollSnapType'];
+    primary?: PropWithTheme<string, Theme>;
+    highlight?: PropWithTheme<string, Theme>;
+};

package/dist/components/text/index.d.ts

@@ -0,0 +1,3 @@
+export * from './text';
+export * from './text.hook';
+export * from './text.types';

package/dist/components/text/text.d.ts

@@ -0,0 +1,4 @@
+import { TextTag } from '../../types';
+import { TextProperties } from './text.types';
+export declare const InternalText: <T extends object | undefined, Element extends TextTag, Component extends HTMLElement = HTMLElementTagNameMap[Element]>(props: TextProperties<T, Element, Component>) => import("react/jsx-runtime").JSX.Element;
+export declare const Text: typeof InternalText;

package/dist/components/text/text.hook.d.ts

@@ -0,0 +1,5 @@
+import { TextTag } from '../../types';
+import { TextProperties } from './text.types';
+export declare const useText: <T extends object | undefined, Element extends TextTag, Component extends HTMLElement = HTMLElementTagNameMap[Element]>(props: TextProperties<T, Element, Component>) => {
+    element: import("react/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1,3 @@
+import { TextTag } from '../../types';
+import { PieceProperties } from '../piece';
+export type TextProperties<Theme extends object | undefined, Element extends TextTag, Component extends HTMLElement = HTMLElementTagNameMap[Element]> = {} & PieceProperties<Theme, Element, Component>;

package/dist/components.es.js

@@ -0,0 +1,24 @@
+import { A as r, u as a } from "./animations-B09mMqCx.js";
+import { P as u, u as t } from "./piece-CqJl-F6G.js";
+import { P as x, u as m } from "./piece-provider-DTglah_F.js";
+import { S as n, u as P } from "./scrollable-Dg_gmKLH.js";
+import { S as l, u as p } from "./screen-C0RCelCe.js";
+import { I as d, T, u as A } from "./text-E5g5oMHP.js";
+import { M as b, u as v } from "./media-C5LK6pq4.js";
+export {
+  r as Animations,
+  d as InternalText,
+  b as Media,
+  u as Piece,
+  x as PieceProvider,
+  l as Screen,
+  n as Scrollable,
+  T as Text,
+  a as useAnimations,
+  v as useMedia,
+  t as usePiece,
+  m as usePieceProvider,
+  p as useScreen,
+  P as useScrollable,
+  A as useText
+};

package/dist/fillObjectWithDefaults-AoLKqRgC.js

@@ -0,0 +1,13 @@
+const n = (...a) => a.join(" ").trim(), c = (a, ...f) => {
+  const t = { ...a };
+  for (const r of f)
+    for (const e in r) {
+      const o = r[e], s = t[e];
+      typeof s == "object" && Array.isArray(s) === !1 && typeof o == "object" && Array.isArray(o) === !1 ? t[e] = { ...s, ...o } : s === void 0 && (t[e] = o);
+    }
+  return t;
+};
+export {
+  n as a,
+  c as f
+};

package/dist/hocs/index.d.ts

@@ -0,0 +1 @@
+export * from './withPieceAsContainer';

package/dist/hocs/withPieceAsContainer.d.ts

@@ -0,0 +1,7 @@
+import { PieceAlignmentAndStyleProperties } from '../components';
+import { ComponentType, RefObject } from 'react';
+export declare function withPieceAsContainer<Props, Theme extends object | undefined, InjectProps extends boolean>(Component: ComponentType<InjectProps extends true ? Props & PieceAlignmentAndStyleProperties<Theme> : Props>, defaultContainerProps?: PieceAlignmentAndStyleProperties<Theme> & {
+    injectContainerProps?: InjectProps;
+}): ComponentType<Props & PieceAlignmentAndStyleProperties<Theme> & {
+    containerRef?: RefObject<HTMLElement>;
+}>;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './systems';
+export * from './types';
+export * from './utils';
+export * from './hocs';

package/dist/index.es.js

@@ -0,0 +1,36 @@
+import { A as r, u as a } from "./animations-B09mMqCx.js";
+import { P as t, u as i } from "./piece-CqJl-F6G.js";
+import { P as u, u as m } from "./piece-provider-DTglah_F.js";
+import { S as f, u as l } from "./scrollable-Dg_gmKLH.js";
+import { S as n, u as P } from "./screen-C0RCelCe.js";
+import { I as d, T as A, u as M, w as T } from "./text-E5g5oMHP.js";
+import { M as h, u as v } from "./media-C5LK6pq4.js";
+import { HARMONY_SYSTEM as y, mergeSystems as C } from "./systems.es.js";
+import { S as O, e as Y } from "./styles-DofTX6nZ.js";
+import { a as j, f as D } from "./fillObjectWithDefaults-AoLKqRgC.js";
+import { splitProps as H } from "./utils.es.js";
+export {
+  r as Animations,
+  y as HARMONY_SYSTEM,
+  d as InternalText,
+  h as Media,
+  t as Piece,
+  u as PieceProvider,
+  n as Screen,
+  f as Scrollable,
+  O as Styles,
+  A as Text,
+  j as appendClasses,
+  Y as excludeProperties,
+  D as fillObjectWithDefaults,
+  C as mergeSystems,
+  H as splitProps,
+  a as useAnimations,
+  v as useMedia,
+  i as usePiece,
+  m as usePieceProvider,
+  P as useScreen,
+  l as useScrollable,
+  M as useText,
+  T as withPieceAsContainer
+};

package/dist/media-C5LK6pq4.js

@@ -0,0 +1,48 @@
+import { u as f, i as l, j as p } from "./piece-provider-DTglah_F.js";
+import { useMemo as r, memo as u } from "react";
+import { P as M } from "./piece-CqJl-F6G.js";
+const v = ({
+  keyframes: e,
+  withStyle: o,
+  animateAs: i,
+  query: n,
+  removeFromHtml: a
+}) => {
+  const { theme: s } = f(), m = r(
+    () => ({
+      ...e?.animation,
+      ...Array.isArray(o) ? o.reduce(
+        (d, t) => ({
+          ...d,
+          ...typeof t == "function" ? t(s) : t
+        }),
+        {}
+      ) : typeof o == "function" ? o(s) : o,
+      animation: i,
+      [`@media not ${typeof n == "function" ? n(s) : n}`]: {
+        display: "none",
+        pointerEvents: "none"
+      }
+    }),
+    [o, s, n, e, i]
+  ), c = window.matchMedia(`(${typeof n == "function" ? n(s) : n})`).matches === !1 && a || !1;
+  return {
+    style: m,
+    shouldRemoveComponent: c
+  };
+}, x = (e) => {
+  const { style: o, shouldRemoveComponent: i } = v(e);
+  return i === !1 ? /* @__PURE__ */ p.jsx(
+    M,
+    {
+      kind: "media",
+      as: "section",
+      withStyle: o,
+      children: e.children
+    }
+  ) : null;
+}, E = u(x, l);
+export {
+  E as M,
+  v as u
+};

package/dist/media.es.js

@@ -0,0 +1,5 @@
+import { M as s, u as M } from "./media-C5LK6pq4.js";
+export {
+  s as Media,
+  M as useMedia
+};