@torpor/ui 0.2.0 → 0.3.0

package/dist/icons/index.d.ts

@@ -1,252 +1,397 @@
 import { type SlotRender } from "@torpor/view";
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function ArrowDown($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<polygon points="25,40 50,70 75,40" />
+		</g>
+		</svg>
+	}
+}
+
 declare function ArrowDown(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function ArrowLeft($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<polygon points="60,25 30,50 60,75" />
+		</g>
+		</svg>
+	}
+}
+
 declare function ArrowLeft(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function ArrowRight($props: IconProps | any) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<polygon points="40,25 70,50 40,75" />
+		</g>
+		</svg>
+	}
+}
+
 declare function ArrowRight(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | any,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function ArrowUp($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<polygon points="25,60 50,30 75,60" />
+		</g>
+		</svg>
+	}
+}
+
 declare function ArrowUp(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function Bars($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M10,25 L90,25" />
+		<path d="M10,50 L90,50" />
+		<path d="M10,75 L90,75" />
+		</g>
+		</svg>
+	}
+}
+
 declare function Bars(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function Check($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M10,55 L35,80 L90,25" fill="none" />
+		</g>
+		</svg>
+	}
+}
+
 declare function Check(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function ChevronDown($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M10,30 L50,70 L90,30" fill="none" />
+		</g>
+		</svg>
+	}
+}
+
 declare function ChevronDown(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function ChevronLeft($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M70,10 L30,50 L70,90" fill="none" />
+		</g>
+		</svg>
+	}
+}
+
 declare function ChevronLeft(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function ChevronRight($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M30,10 L70,50 L30,90" fill="none" />
+		</g>
+		</svg>
+	}
+}
+
 declare function ChevronRight(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function ChevronUp($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M10,70 L50,30 L90,70" fill="none" />
+		</g>
+		</svg>
+	}
+}
+
 declare function ChevronUp(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function Cross($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M15,15 L85,85" />
+		<path d="M15,85 L85,15" />
+		</g>
+		</svg>
+	}
+}
+
 declare function Cross(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function Loading($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="20"
+		>
+		<g>
+		<circle cx="50" cy="50" r="40" fill="none" opacity="0.3" />
+		<path d="M 22 22 A 40 40 0 0 1 78 22" fill="none" />
+		</g>
+		</svg>
+	}
+}
+
 declare function Loading(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function Minus($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M10,50 L90,50" />
+		</g>
+		</svg>
+	}
+}
+
 declare function Minus(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-/**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
- */
+type IconProps } from "./IconTypes";
+
+export default function Plus($props: IconProps | undefined) {
+	@render {
+		<svg
+		{$props?.id}
+		class={`torp-icon ${$props?.class ?? ""}`.trim()}
+		viewBox="0 0 100 100"
+		stroke-linejoin="round"
+		stroke-width="12"
+		>
+		<g>
+		<path d="M50,10 L50,90" />
+		<path d="M10,50 L90,50" />
+		</g>
+		</svg>
+	}
+}
+
 declare function Plus(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: IconProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/index.d.ts

@@ -1,6 +1,19 @@
-interface AnimationFrame {
-    opacity: number;
+import { Animation } from '@torpor/view';
+
+declare function fade(_el: HTMLElement, options?: number | KeyframeAnimationOptions): Animation;
+
+declare function grow(el: HTMLElement, options?: number | KeyframeAnimationOptions): Animation;
+
+/**
+ * Measures an element before it is added to the DOM
+ * @param el The element to measure
+ * @param fn The function to use to get the desired measurement (e.g. el.offsetHeight)
+ */
+declare function measure(el: HTMLElement, fn: (_: HTMLElement) => number): number;
+
+interface Options extends KeyframeAnimationOptions {
+    side: "left" | "right" | "top" | "bottom";
 }
-declare const animationFrames: AnimationFrame[];
+declare function slide(el: HTMLElement, options?: Options): Animation;
 
-export { animationFrames as fade };
+export { fade, grow, measure, slide };