cssier 0.2.1 → 0.2.3

package/dist/hooks/index.d.ts

@@ -1 +1,3 @@
 export { default as useStylesheet } from './useStylesheet';
+export { default as useAnimation } from './useAnimation';
+export { default as useCssProperty } from './useCssProperty';

package/dist/hooks/index.js

@@ -1,198 +1,81 @@
-import { useState as o, useEffect as d } from "react";
-const p = [
-  "active",
-  "checked",
-  "disabled",
-  "empty",
-  "enabled",
-  "firstChild",
-  "firstOfType",
-  "focus",
-  "hover",
-  "inRange",
-  "invalid",
-  "lastChild",
-  "lastOfType",
-  "link",
-  "not",
-  "nthChild",
-  "nthLastChild",
-  "nthLastOfType",
-  "nthOfType",
-  "onlyOfType",
-  "onlyChild",
-  "optional",
-  "outOfRange",
-  "readOnly",
-  "readWrite",
-  "required",
-  "root",
-  "target",
-  "valid",
-  "visited"
-], s = [
-  // Shadow DOM elements
-  "part",
-  "theme",
-  // Shadow DOM elements for specific controls
-  "part(container)",
-  "part(label)",
-  "part(option)",
-  "part(item)",
-  "part(placeholder)",
-  "part(header)",
-  "part(footer)",
-  "part(overlay)",
-  "part(menu)",
-  "part(menuitem)",
-  "part(list)",
-  "part(listitem)",
-  "part(progress-bar)",
-  "part(progress-value)",
-  "part(input-container)",
-  "part(input)",
-  "part(select)",
-  "part(option-group)",
-  "part(option-item)",
-  "part(button)",
-  "part(dialog)",
-  "part(menu-button)",
-  "part(tablist)",
-  "part(tab)",
-  "part(tab-panel)",
-  "part(carousel)",
-  "part(slider)",
-  "part(tooltip)",
-  "part(radio)",
-  "part(checkbox)",
-  "part(switch)",
-  "part(range)",
-  "part(textarea)",
-  "part(search)",
-  "part(navbar)",
-  "part(breadcrumbs)",
-  // Standard pseudoelements
-  "before",
-  "after",
-  "first-line",
-  "first-letter",
-  "selection",
-  "placeholder",
-  "backdrop",
-  "marker",
-  // WebKit-prefixed pseudoelements
-  "-webkit-before",
-  "-webkit-after",
-  "-webkit-first-line",
-  "-webkit-first-letter",
-  "-webkit-selection",
-  "-webkit-placeholder",
-  "-webkit-backdrop",
-  "-webkit-marker",
-  // WebKit scrollbar pseudo-elements
-  "-webkit-scrollbar",
-  "-webkit-scrollbar-thumb",
-  "-webkit-scrollbar-track",
-  "-webkit-scrollbar-track-piece",
-  "-webkit-scrollbar-corner",
-  "-webkit-scrollbar-button",
-  "-webkit-resizer",
-  // Other WebKit-prefixed pseudoelements
-  "-webkit-file-upload-button",
-  "-webkit-inner-spin-button",
-  "-webkit-outer-spin-button",
-  "-webkit-progress-bar",
-  "-webkit-progress-value",
-  "-webkit-progress-inner-element",
-  "-webkit-progress-outer-element",
-  // Additional pseudo-elements related to shadow DOM and Web Components
-  "slotted(*)",
-  "slotted(div)",
-  "slotted(span)",
-  "slotted(p)",
-  "slotted(a)",
-  "slotted(img)",
-  "slotted(button)",
-  "slotted(input)",
-  // Custom and experimental shadow DOM parts (subject to changes)
-  "part(dialog-overlay)",
-  "part(tab-content)",
-  "part(slider-track)",
-  "part(slider-thumb)",
-  "part(menu-icon)",
-  "part(menu-label)",
-  "part(list-group)",
-  "part(list-item)"
-];
-function k(t, r) {
-  if (!r) {
-    const a = document.head.querySelector(`style#${t}`);
-    return a && a.remove(), "";
+import { g as $ } from "../useStylesheet-42306f27.mjs";
+import { u as V } from "../useStylesheet-42306f27.mjs";
+import { useState as s, useEffect as d } from "react";
+function v(t, e) {
+  if (!e) {
+    const y = document.head.querySelector(`style#${t}`);
+    return y && y.remove(), "";
   }
-  let e = document.head.querySelector(`style#${t}`);
-  e || (e = document.createElement("style"), e.id = t, e.type = "text/css", document.head.appendChild(e));
+  let a = document.head.querySelector(`style#${t}`);
+  console.log(t), a || (a = document.createElement("style"), a.id = t, a.type = "text/css", document.head.appendChild(a));
   let n = "";
-  return Object.entries(r).forEach(([a, l]) => {
-    let i = "";
-    a === "neutral" ? i = `.${t}` : p.includes(a) ? i = `.${t}:${a}` : s.includes(a) ? i = `.${t}::${a}` : (console.error(`Invalid pseudo class: ${a}`), console.log(
-      p,
-      s,
-      a,
-      a in p,
-      a in s
-    )), n += `${i} { ${Object.entries(l).map(([f, b]) => `${f.replace(/[A-Z]/g, (u) => `-${u.toLowerCase()}`)}: ${b}`).join("; ")} }`;
-  }), e.textContent = n, n;
+  n += `@keyframes ${e.name} {`, Object.entries(e.keyframes).forEach(([y, g]) => {
+    n += `${y} {
+`, n += Object.entries(g).map(([h, C]) => `${h.replace(/[A-Z]/g, (x) => `-${x.toLowerCase()}`)}: ${C}`).join(`; 
+`), n += `
 }
-function c(t, r) {
-  if (t == null && r == null)
-    return !0;
-  if (t == null && typeof r == "object" || r == null && typeof t == "object" || Object.keys(t).length !== Object.keys(r).length)
-    return !1;
-  for (const e in t)
-    if (t[e] !== r[e])
-      return typeof t[e] == "object" && typeof r[e] == "object" && !c(t[e], r[e]), !1;
-  return !0;
+`;
+  }), n += `}
+`, n += `.${t} {
+`;
+  const r = e.delay ?? "0s", u = e.direction ?? "normal", i = e.duration ?? "2s", c = e.fillMode ?? "none", l = e.iterationCount ?? "1", m = e.playState ?? "running", f = e.timingFunction ?? "ease";
+  n += `    animation-name: ${e.name};
+`, e.delay && (n += `    animation-delay: ${r};
+`), e.direction && (n += `    animation-direction: ${u};
+`), e.duration && (n += `    animation-duration: ${i};
+`), e.fillMode && (n += `    animation-fill-mode: ${c};
+`), e.iterationCount && (n += `    animation-iteration-count: ${l};
+`), e.playState && (n += `    animation-play-state: ${m};
+`), e.timingFunction && (n += `    animation-timing-function: ${f};
+`), n += `}
+`, a.textContent = n;
+  const S = `${e.name} ${i} ${f} ${r} ${l} ${u} ${c} ${m}`;
+  return [n, S];
 }
-const h = [
-  "A",
-  "B",
-  "C",
-  "D",
-  "E",
-  "F",
-  "G",
-  "H",
-  "I",
-  "J",
-  "K",
-  "L",
-  "M",
-  "N",
-  "O",
-  "P",
-  "Q",
-  "R",
-  "S",
-  "T",
-  "U",
-  "V",
-  "W",
-  "X",
-  "Y",
-  "Z"
-];
-function m() {
-  let t = "";
-  for (let r = 0; r < 6; r++)
-    t += h[Math.floor(Math.random() * 24)];
-  return t;
+function p(t) {
+  const e = Array.isArray(t.syntax) ? t.syntax.join(", ") : t.syntax;
+  return `@property ${t.name} {
+    syntax: ${e};
+    inherits: ${t.inherits};
+    initial-value: ${t.initialValue};
 }
-function w(t, r) {
-  const [e] = o(() => r ?? m()), [n, a] = o({}), [l, i] = o("");
+    
+body{
+    ${t.name}: ${t.initialValue};
+}
+`;
+}
+function P(t, e) {
+  if (!e) {
+    const r = document.head.querySelector(`style#${t}`);
+    return r && r.remove(), "";
+  }
+  let a = document.head.querySelector(`style#${t}`);
+  a || (a = document.createElement("style"), a.id = t, a.type = "text/css", document.head.appendChild(a));
+  let n = p(e);
+  return a.textContent = n, n;
+}
+function k(t, e) {
+  return t == null && e == null ? !0 : !(t == null && typeof e == "object" || e == null && typeof t == "object" || Object.keys(t).length !== Object.keys(e).length || (t == null ? void 0 : t.duration) !== (e == null ? void 0 : e.duration) || (t == null ? void 0 : t.delay) !== (e == null ? void 0 : e.delay) || (t == null ? void 0 : t.direction) !== (e == null ? void 0 : e.direction) || (t == null ? void 0 : t.fillMode) !== (e == null ? void 0 : e.fillMode) || (t == null ? void 0 : t.iterationCount) !== (e == null ? void 0 : e.iterationCount) || (t == null ? void 0 : t.name) !== (e == null ? void 0 : e.name) || (t == null ? void 0 : t.playState) !== (e == null ? void 0 : e.playState) || (t == null ? void 0 : t.timingFunction) !== (e == null ? void 0 : e.timingFunction) || JSON.stringify(t == null ? void 0 : t.keyframes) !== JSON.stringify(e == null ? void 0 : e.keyframes));
+}
+function A(t, e) {
+  const [a] = s(() => e ?? $()), [n, r] = s({}), [u, i] = s(""), [c, l] = s("");
+  return d(() => {
+    if (!k(n, t)) {
+      r(t);
+      const [m, f] = v(a, t);
+      i(m), l(f);
+    }
+  }, [a, t, n, i]), [a, c, u];
+}
+function F(t, e) {
+  const [a] = s(() => e ?? $()), [n, r] = s("");
   return d(() => {
-    c(n, t) || (a(t), i(k(e, t)));
-  }, [e, t, n, i]), [e, l];
+    r(P(a, t));
+  }, [a, r, t]), [a, `var(${t.name})`, n];
 }
 export {
-  w as useStylesheet
+  A as useAnimation,
+  F as useCssProperty,
+  V as useStylesheet
 };

package/dist/hooks/useAnimation.d.ts

@@ -0,0 +1,2 @@
+import type { AnimationDefinition } from '../types';
+export default function useAnimation(styles: AnimationDefinition, animationId?: string): string[];

package/dist/hooks/useCssProperty.d.ts

@@ -0,0 +1,2 @@
+import type { ICssProperty } from '../types';
+export default function useStylesheet(property: ICssProperty, propertyId?: string): string[];

package/dist/hooks/useStylesheet.d.ts

@@ -1,2 +1,2 @@
-import { PseudoCss } from '../types';
+import type { PseudoCss } from '../types';
 export default function useStylesheet(styles: PseudoCss | undefined, pseudoId?: string): string[];

package/dist/index.d.ts

@@ -1,24 +1,21 @@
+export { default as useAnimation } from './hooks/useAnimation';
+export { default as useCssProperty } from './hooks/useCssProperty';
 export { default as useStylesheet } from './hooks/useStylesheet';
 export { default as A } from './components/A';
 export { default as Abbr } from './components/Abbr';
 export { default as Address } from './components/Address';
-export { default as Area } from './components/Area';
 export { default as Article } from './components/Article';
 export { default as Aside } from './components/Aside';
-export { default as Audio } from './components/Audio';
 export { default as B } from './components/B';
-export { default as Base } from './components/Base';
 export { default as Bdi } from './components/Bdi';
 export { default as Bdo } from './components/Bdo';
 export { default as Blockquote } from './components/Blockquote';
 export { default as Body } from './components/Body';
-export { default as Br } from './components/Br';
 export { default as Button } from './components/Button';
 export { default as Canvas } from './components/Canvas';
 export { default as Caption } from './components/Caption';
 export { default as Cite } from './components/Cite';
 export { default as Code } from './components/Code';
-export { default as Col } from './components/Col';
 export { default as Colgroup } from './components/Colgroup';
 export { default as Data } from './components/Data';
 export { default as Datalist } from './components/Datalist';
@@ -31,7 +28,6 @@ export { default as Div } from './components/Div';
 export { default as Dl } from './components/Dl';
 export { default as Dt } from './components/Dt';
 export { default as Em } from './components/Em';
-export { default as Embed } from './components/Embed';
 export { default as Fieldset } from './components/Fieldset';
 export { default as Figcaption } from './components/Figcaption';
 export { default as Figure } from './components/Figure';
@@ -46,22 +42,17 @@ export { default as H6 } from './components/H6';
 export { default as Head } from './components/Head';
 export { default as Header } from './components/Header';
 export { default as Hgroup } from './components/Hgroup';
-export { default as Hr } from './components/Hr';
 export { default as Html } from './components/Html';
 export { default as I } from './components/I';
 export { default as Iframe } from './components/Iframe';
-export { default as Img } from './components/Img';
-export { default as Input } from './components/Input';
 export { default as Ins } from './components/Ins';
 export { default as Kbd } from './components/Kbd';
 export { default as Label } from './components/Label';
 export { default as Legend } from './components/Legend';
 export { default as Li } from './components/Li';
-export { default as Link } from './components/Link';
 export { default as Main } from './components/Main';
 export { default as Map } from './components/Map';
 export { default as Mark } from './components/Mark';
-export { default as Meta } from './components/Meta';
 export { default as Meter } from './components/Meter';
 export { default as Nav } from './components/Nav';
 export { default as Noscript } from './components/Noscript';
@@ -71,7 +62,6 @@ export { default as Optgroup } from './components/Optgroup';
 export { default as Option } from './components/Option';
 export { default as Output } from './components/Output';
 export { default as P } from './components/P';
-export { default as Param } from './components/Param';
 export { default as Picture } from './components/Picture';
 export { default as Pre } from './components/Pre';
 export { default as Progress } from './components/Progress';
@@ -85,7 +75,6 @@ export { default as Script } from './components/Script';
 export { default as Section } from './components/Section';
 export { default as Select } from './components/Select';
 export { default as Small } from './components/Small';
-export { default as Source } from './components/Source';
 export { default as Span } from './components/Span';
 export { default as Strong } from './components/Strong';
 export { default as Style } from './components/Style';
@@ -107,7 +96,6 @@ export { default as U } from './components/U';
 export { default as Ul } from './components/Ul';
 export { default as Var } from './components/Var';
 export { default as Video } from './components/Video';
-export { default as Wbr } from './components/Wbr';
 export { default as Svg } from './components/Svg';
 export { default as Animate } from './components/Animate';
 export { default as AnimateTransform } from './components/AnimateTransform';
@@ -160,3 +148,17 @@ export { default as TextPath } from './components/TextPath';
 export { default as Tspan } from './components/Tspan';
 export { default as Use } from './components/Use';
 export { default as View } from './components/View';
+export { default as Area } from './components/Area';
+export { default as Audio } from './components/Audio';
+export { default as Base } from './components/Base';
+export { default as Br } from './components/Br';
+export { default as Col } from './components/Col';
+export { default as Embed } from './components/Embed';
+export { default as Hr } from './components/Hr';
+export { default as Img } from './components/Img';
+export { default as Input } from './components/Input';
+export { default as Link } from './components/Link';
+export { default as Meta } from './components/Meta';
+export { default as Param } from './components/Param';
+export { default as Source } from './components/Source';
+export { default as Wbr } from './components/Wbr';

package/dist/templates/ChildlessComponentTemplate.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+import type { PseudoCss } from '../lib/types';
+export default function COMPONENT_NAME(props: ComponentProps<'TAG'> & {
+    pseudo?: PseudoCss;
+    pseudoId?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/templates/ChildlessStoryTemplate.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import COMPONENT_NAME from './COMPONENT_NAME';
+declare const meta: Meta<typeof COMPONENT_NAME>;
+export default meta;
+type Story = StoryObj<typeof COMPONENT_NAME>;
+export declare const Primary: Story;

package/dist/templates/ComponentTemplate.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { PseudoCss } from '../lib/types';
+import type { PseudoCss } from '../lib/types';
 export default function COMPONENT_NAME(props: ComponentProps<'TAG'> & {
     pseudo?: PseudoCss;
     pseudoId?: string;

package/dist/templates/InputStoryTemplate.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import COMPONENT_NAME from './COMPONENT_NAME';
+declare const meta: Meta<typeof COMPONENT_NAME>;
+export default meta;
+type Story = StoryObj<typeof COMPONENT_NAME>;
+export declare const Primary: Story;

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 export type PseudoClass = 'active' | 'checked' | 'disabled' | 'empty' | 'enabled' | 'firstChild' | 'firstOfType' | 'focus' | 'hover' | 'inRange' | 'invalid' | 'lastChild' | 'lastOfType' | 'link' | 'not' | 'nthChild' | 'nthLastChild' | 'nthLastOfType' | 'nthOfType' | 'onlyOfType' | 'onlyChild' | 'optional' | 'outOfRange' | 'readOnly' | 'readWrite' | 'required' | 'root' | 'target' | 'valid' | 'visited';
 export type PseudoElement = 'part' | 'theme' | 'part(container)' | 'part(label)' | 'part(option)' | 'part(item)' | 'part(placeholder)' | 'part(header)' | 'part(footer)' | 'part(overlay)' | 'part(menu)' | 'part(menuitem)' | 'part(list)' | 'part(listitem)' | 'part(progress-bar)' | 'part(progress-value)' | 'part(input-container)' | 'part(input)' | 'part(select)' | 'part(option-group)' | 'part(option-item)' | 'part(button)' | 'part(dialog)' | 'part(menu-button)' | 'part(tablist)' | 'part(tab)' | 'part(tab-panel)' | 'part(carousel)' | 'part(slider)' | 'part(tooltip)' | 'part(radio)' | 'part(checkbox)' | 'part(switch)' | 'part(range)' | 'part(textarea)' | 'part(search)' | 'part(navbar)' | 'part(breadcrumbs)' | 'before' | 'after' | 'first-line' | 'first-letter' | 'selection' | 'placeholder' | 'backdrop' | 'marker' | '-webkit-before' | '-webkit-after' | '-webkit-first-line' | '-webkit-first-letter' | '-webkit-selection' | '-webkit-placeholder' | '-webkit-backdrop' | '-webkit-marker' | '-webkit-scrollbar' | '-webkit-scrollbar-thumb' | '-webkit-scrollbar-track' | '-webkit-scrollbar-track-piece' | '-webkit-scrollbar-corner' | '-webkit-scrollbar-button' | '-webkit-resizer' | '-webkit-file-upload-button' | '-webkit-inner-spin-button' | '-webkit-outer-spin-button' | '-webkit-progress-bar' | '-webkit-progress-value' | '-webkit-progress-inner-element' | '-webkit-progress-outer-element' | 'slotted(*)' | 'slotted(div)' | 'slotted(span)' | 'slotted(p)' | 'slotted(a)' | 'slotted(img)' | 'slotted(button)' | 'slotted(input)' | 'part(dialog-overlay)' | 'part(tab-content)' | 'part(slider-track)' | 'part(slider-thumb)' | 'part(menu-icon)' | 'part(menu-label)' | 'part(list-group)' | 'part(list-item)';
 type CssVariable = `--${string}`;
@@ -6,6 +6,27 @@ export type ExtendedCssProperties = React.CSSProperties & {
     [key: CssVariable]: string;
 };
 export type PseudoCss = Partial<{
-    [key in PseudoClass | 'neutral' | PseudoElement]: React.CSSProperties | PseudoCss;
+    [key in PseudoClass | 'neutral' | PseudoElement]: ExtendedCssProperties & {
+        and?: PseudoCss;
+    };
 }>;
+export type CssVariableName = `--${string}`;
+export type CssPropertySyntax = '<length>' | '<number>' | '<percentage>' | '<length-percentage>' | '<color>' | '<image>' | '<url>' | '<integer>' | '<angle>' | '<time>' | '<resolution>' | '<transform-function>' | '<custom-ident>';
+export type ICssProperty = {
+    syntax: CssPropertySyntax | CssPropertySyntax[];
+    name: CssVariableName;
+    inherits: boolean;
+    initialValue: string;
+};
+export type AnimationDefinition = {
+    delay?: CSSProperties['animationDelay'];
+    direction?: CSSProperties['animationDirection'];
+    duration?: CSSProperties['animationDuration'];
+    fillMode?: CSSProperties['animationFillMode'];
+    iterationCount?: CSSProperties['animationIterationCount'];
+    name: CSSProperties['animationName'];
+    playState?: CSSProperties['animationPlayState'];
+    timingFunction?: CSSProperties['animationTimingFunction'];
+    keyframes: Record<string, ExtendedCssProperties>;
+};
 export {};

package/dist/useStylesheet-42306f27.mjs

@@ -0,0 +1,212 @@
+import { useState as o, useEffect as b } from "react";
+const h = [
+  "active",
+  "checked",
+  "disabled",
+  "empty",
+  "enabled",
+  "firstChild",
+  "firstOfType",
+  "focus",
+  "hover",
+  "inRange",
+  "invalid",
+  "lastChild",
+  "lastOfType",
+  "link",
+  "not",
+  "nthChild",
+  "nthLastChild",
+  "nthLastOfType",
+  "nthOfType",
+  "onlyOfType",
+  "onlyChild",
+  "optional",
+  "outOfRange",
+  "readOnly",
+  "readWrite",
+  "required",
+  "root",
+  "target",
+  "valid",
+  "visited"
+], k = [
+  // Shadow DOM elements
+  "part",
+  "theme",
+  // Shadow DOM elements for specific controls
+  "part(container)",
+  "part(label)",
+  "part(option)",
+  "part(item)",
+  "part(placeholder)",
+  "part(header)",
+  "part(footer)",
+  "part(overlay)",
+  "part(menu)",
+  "part(menuitem)",
+  "part(list)",
+  "part(listitem)",
+  "part(progress-bar)",
+  "part(progress-value)",
+  "part(input-container)",
+  "part(input)",
+  "part(select)",
+  "part(option-group)",
+  "part(option-item)",
+  "part(button)",
+  "part(dialog)",
+  "part(menu-button)",
+  "part(tablist)",
+  "part(tab)",
+  "part(tab-panel)",
+  "part(carousel)",
+  "part(slider)",
+  "part(tooltip)",
+  "part(radio)",
+  "part(checkbox)",
+  "part(switch)",
+  "part(range)",
+  "part(textarea)",
+  "part(search)",
+  "part(navbar)",
+  "part(breadcrumbs)",
+  // Standard pseudoelements
+  "before",
+  "after",
+  "first-line",
+  "first-letter",
+  "selection",
+  "placeholder",
+  "backdrop",
+  "marker",
+  // WebKit-prefixed pseudoelements
+  "-webkit-before",
+  "-webkit-after",
+  "-webkit-first-line",
+  "-webkit-first-letter",
+  "-webkit-selection",
+  "-webkit-placeholder",
+  "-webkit-backdrop",
+  "-webkit-marker",
+  // WebKit scrollbar pseudo-elements
+  "-webkit-scrollbar",
+  "-webkit-scrollbar-thumb",
+  "-webkit-scrollbar-track",
+  "-webkit-scrollbar-track-piece",
+  "-webkit-scrollbar-corner",
+  "-webkit-scrollbar-button",
+  "-webkit-resizer",
+  // Other WebKit-prefixed pseudoelements
+  "-webkit-file-upload-button",
+  "-webkit-inner-spin-button",
+  "-webkit-outer-spin-button",
+  "-webkit-progress-bar",
+  "-webkit-progress-value",
+  "-webkit-progress-inner-element",
+  "-webkit-progress-outer-element",
+  // Additional pseudo-elements related to shadow DOM and Web Components
+  "slotted(*)",
+  "slotted(div)",
+  "slotted(span)",
+  "slotted(p)",
+  "slotted(a)",
+  "slotted(img)",
+  "slotted(button)",
+  "slotted(input)",
+  // Custom and experimental shadow DOM parts (subject to changes)
+  "part(dialog-overlay)",
+  "part(tab-content)",
+  "part(slider-track)",
+  "part(slider-thumb)",
+  "part(menu-icon)",
+  "part(menu-label)",
+  "part(list-group)",
+  "part(list-item)"
+];
+function s(t, r) {
+  let e = "";
+  return Object.entries(r).forEach(([a, i]) => {
+    let n = t;
+    h.includes(a) ? n = `${t}:${a}` : k.includes(a) ? n = `${t}::${a}` : a === "neutral" || (console.error(`Invalid pseudo class: ${a}`), console.log(r));
+    const { and: l, ...c } = i;
+    l && (e += s(n, l)), e += `${n} { ${Object.entries(c).map(([u, f]) => `${u.replace(/[A-Z]/g, (d) => `-${d.toLowerCase()}`)}: ${f}`).join("; ")} }`;
+  }), e;
+}
+function m(t, r) {
+  if (!r) {
+    const i = document.head.querySelector(`style#${t}`);
+    return i && i.remove(), "";
+  }
+  let e = document.head.querySelector(`style#${t}`);
+  e || (e = document.createElement("style"), e.id = t, e.type = "text/css", document.head.appendChild(e));
+  let a = s(`.${t}`, r);
+  return e.textContent = a, a;
+}
+const w = [
+  "A",
+  "B",
+  "C",
+  "D",
+  "E",
+  "F",
+  "G",
+  "H",
+  "I",
+  "J",
+  "K",
+  "L",
+  "M",
+  "N",
+  "O",
+  "P",
+  "Q",
+  "R",
+  "S",
+  "T",
+  "U",
+  "V",
+  "W",
+  "X",
+  "Y",
+  "Z"
+];
+function y(t) {
+  return new Array(t).fill(0).map(() => w[Math.floor(Math.random() * 24)]).join("");
+}
+function* g() {
+  const t = [];
+  for (; ; ) {
+    let r = y(6);
+    t.includes(r) || (t.push(r), yield r);
+  }
+}
+const v = g();
+function $() {
+  return v.next().value;
+}
+function p(t, r) {
+  if (t == null && r == null)
+    return !0;
+  if (t == null && typeof r == "object" || r == null && typeof t == "object" || Object.keys(t).length !== Object.keys(r).length)
+    return !1;
+  for (const e in t)
+    if (t[e] !== r[e]) {
+      if (typeof t[e] == "object" && typeof r[e] == "object") {
+        if (!p(t[e], r[e]))
+          return !1;
+      } else if (t[e] !== r[e])
+        return !1;
+    }
+  return !0;
+}
+function S(t, r) {
+  const [e] = o(() => r ?? $()), [a, i] = o({}), [n, l] = o("");
+  return b(() => {
+    p(a, t) || (i(t), l(m(e, t)));
+  }, [e, t, a, l]), [e, n];
+}
+export {
+  $ as g,
+  S as u
+};

package/dist/utilities/createAnimation.d.ts

@@ -0,0 +1,2 @@
+import type { AnimationDefinition } from '../types';
+export default function createAnimation(animationId: string, definition: AnimationDefinition | undefined): "" | string[];