@pie-element/number-line 13.1.0-next.19 → 13.1.1-next.0

package/dist/delivery/number-line/colors.js

@@ -0,0 +1,5 @@
+import { color as e } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/colors.ts
+var t = e.primaryDark(), n = e.correct(), r = e.incorrect();
+//#endregion
+export { n as correct, r as incorrect, t as selected };

package/dist/delivery/number-line/feedback.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/feedback.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+declare const Feedback: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        width: PropTypes.Requireable<number>;
+        message: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+    };
+};
+export default Feedback;

package/dist/delivery/number-line/feedback.js

@@ -0,0 +1,57 @@
+import { useRef as e } from "react";
+import { styled as t } from "@mui/material/styles";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { color as a } from "@pie-lib/render-ui";
+import { CSSTransition as o, TransitionGroup as s } from "react-transition-group";
+import { Correct as c, Incorrect as l, NothingSubmitted as u, PartiallyCorrect as d, ShowRationale as f } from "@pie-lib/icons";
+//#region src/delivery/number-line/feedback.tsx
+var p = (e) => {
+	switch (e) {
+		case "unanswered": return u;
+		case "correct": return c;
+		case "incorrect": return l;
+		case "partial": return d;
+		case "info": return f;
+		default: return;
+	}
+}, m = t("div")(({ $type: e }) => ({
+	marginTop: "10px",
+	backgroundColor: "#dddddd",
+	padding: "10px",
+	display: "flex",
+	alignItems: "center",
+	...e === "correct" && { backgroundColor: a.correct() },
+	...e === "incorrect" && { backgroundColor: a.incorrect() },
+	"& svg": { height: "30px" },
+	"& h1": {
+		padding: "0px",
+		margin: "0px"
+	}
+})), h = t("span")({
+	paddingLeft: "5px",
+	userSelect: "none"
+}), g = (t) => {
+	let { type: n, width: a, message: c } = t, l = p(n), u = e(null);
+	return /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(o, {
+		classNames: "fb",
+		timeout: 300,
+		nodeRef: u,
+		children: /* @__PURE__ */ i(m, {
+			ref: u,
+			$type: n,
+			style: { width: a },
+			children: [/* @__PURE__ */ r(l, {
+				iconSet: "emoji",
+				shape: "square"
+			}), /* @__PURE__ */ r(h, { dangerouslySetInnerHTML: { __html: c } })]
+		}, "panel")
+	}, "fb") });
+};
+g.propTypes = {
+	width: n.number,
+	message: n.string,
+	type: n.string
+};
+//#endregion
+export { g as default };

package/dist/delivery/number-line/graph/arrow.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/arrow.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare function Arrow({ x, y, direction, className }: {
+    x: any;
+    y: any;
+    direction: any;
+    className: any;
+}): React.JSX.Element;
+export declare namespace Arrow {
+    var propTypes: {
+        y: PropTypes.Requireable<number>;
+        x: PropTypes.Requireable<number>;
+        direction: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+    };
+    var defaultProps: {
+        y: number;
+        x: number;
+        direction: string;
+    };
+}
+export default Arrow;

package/dist/delivery/number-line/graph/arrow.js

@@ -0,0 +1,27 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import t from "prop-types";
+import { jsx as n } from "react/jsx-runtime";
+import { color as r } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/graph/arrow.tsx
+var i = e("path")({ fill: r.primary() });
+function a({ x: e, y: t, direction: r, className: a }) {
+	let o = `translate(${e || 0},${t})`;
+	return r && r === "right" && (o += " rotate(180)"), /* @__PURE__ */ n(i, {
+		d: "m 0,0 8,-5 0,10 -8,-5",
+		transform: o,
+		className: a
+	});
+}
+a.propTypes = {
+	y: t.number,
+	x: t.number,
+	direction: t.oneOf(["left", "right"]),
+	className: t.string
+}, a.defaultProps = {
+	y: 0,
+	x: 0,
+	direction: "left"
+};
+//#endregion
+export { a as default };

package/dist/delivery/number-line/graph/elements/base.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/base.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+export declare const basePropTypes: () => {
+    interval: PropTypes.Validator<number>;
+    domain: PropTypes.Requireable<PropTypes.InferProps<{
+        min: PropTypes.Validator<number>;
+        max: PropTypes.Validator<number>;
+    }>>;
+};

package/dist/delivery/number-line/graph/elements/base.js

@@ -0,0 +1,11 @@
+import e from "prop-types";
+//#region src/delivery/number-line/graph/elements/base.ts
+var t = () => ({
+	interval: e.number.isRequired,
+	domain: e.shape({
+		min: e.number.isRequired,
+		max: e.number.isRequired
+	})
+});
+//#endregion
+export { t as basePropTypes };

package/dist/delivery/number-line/graph/elements/builder.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/builder.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare function buildElementModel(position: any, elementType: any, domain: any, interval: any): {
+    position: any;
+    type: string;
+    pointType: string;
+    leftPoint?: undefined;
+    rightPoint?: undefined;
+    direction?: undefined;
+} | {
+    type: string;
+    leftPoint: string;
+    rightPoint: string;
+    position: {
+        left: any;
+        right: any;
+    };
+    pointType?: undefined;
+    direction?: undefined;
+} | {
+    type: string;
+    direction: string;
+    pointType: string;
+    position: any;
+    leftPoint?: undefined;
+    rightPoint?: undefined;
+} | undefined;

package/dist/delivery/number-line/graph/elements/builder.js

@@ -0,0 +1,30 @@
+//#region src/delivery/number-line/graph/elements/builder.ts
+function e(e, t, n, r) {
+	if (t.startsWith("p")) return {
+		position: e,
+		type: "point",
+		pointType: t.endsWith("e") ? "empty" : "full"
+	};
+	if (t.startsWith("l")) {
+		let i = e + r <= n.max ? e : e - r, a = i + r;
+		return {
+			type: "line",
+			leftPoint: t.charAt(1) === "e" ? "empty" : "full",
+			rightPoint: t.charAt(2) === "e" ? "empty" : "full",
+			position: {
+				left: i,
+				right: a
+			}
+		};
+	} else if (t.startsWith("r")) {
+		let n = t.charAt(1) === "f";
+		return {
+			type: "ray",
+			direction: t.charAt(2) === "p" ? "positive" : "negative",
+			pointType: n ? "full" : "empty",
+			position: e
+		};
+	}
+}
+//#endregion
+export { e as buildElementModel };

package/dist/delivery/number-line/graph/elements/line.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/line.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Line extends React.Component {
+    static propTypes: {
+        empty: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            left: PropTypes.Validator<boolean>;
+            right: PropTypes.Validator<boolean>;
+        }>>>;
+        position: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            left: PropTypes.Validator<number>;
+            right: PropTypes.Validator<number>;
+        }>>>;
+        y: PropTypes.Requireable<number>;
+        selected: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        correct: PropTypes.Requireable<boolean>;
+        onMoveLine: PropTypes.Validator<(...args: any[]) => any>;
+        onToggleSelect: PropTypes.Validator<(...args: any[]) => any>;
+        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStop: PropTypes.Requireable<(...args: any[]) => any>;
+        interval: PropTypes.Validator<number>;
+        domain: PropTypes.Requireable<PropTypes.InferProps<{
+            min: PropTypes.Validator<number>;
+            max: PropTypes.Validator<number>;
+        }>>;
+    };
+    static defaultProps: {
+        selected: boolean;
+        y: number;
+        disabled: boolean;
+        correct: undefined;
+    };
+    static contextTypes: {
+        xScale: PropTypes.Validator<(...args: any[]) => any>;
+        snapValue: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    onDrag(side: any, p: any): void;
+    onMove(side: any, d: any): void;
+    render(): React.JSX.Element;
+}
+export default Line;

package/dist/delivery/number-line/graph/elements/line.js

@@ -0,0 +1,189 @@
+import e from "../../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
+import t from "../../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isNumber.js";
+import { Draggable as n } from "../../../draggable/index.js";
+import r from "./point.js";
+import { basePropTypes as i } from "./base.js";
+import a from "react";
+import { styled as o } from "@mui/material/styles";
+import s from "prop-types";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { color as u } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/graph/elements/line.tsx
+var d = "150ms", f = o("g")(({ $disabled: e, $selected: t, $correct: n }) => ({
+	"& .line-handle": {
+		stroke: u.primary(),
+		cursor: "pointer",
+		strokeWidth: "5px",
+		transition: `opacity ${d} linear, 
+    stroke-width ${d} linear,
+    stroke ${d} linear`
+	},
+	"&.dnd-kit-dragging": {
+		opacity: .6,
+		"& .line-handle": {
+			opacity: 1,
+			strokeWidth: "12px"
+		}
+	},
+	...e && {
+		cursor: "not-allowed",
+		opacity: .8
+	},
+	...t && { "& .line-handle": { stroke: u.primaryDark() } },
+	...n === !0 && { "& .line-handle": {
+		cursor: "inherit",
+		stroke: u.correct()
+	} },
+	...n === !1 && { "& .line-handle": {
+		cursor: "inherit",
+		stroke: u.incorrect()
+	} }
+})), p = class extends a.Component {
+	static propTypes = {
+		...i(),
+		empty: s.shape({
+			left: s.bool.isRequired,
+			right: s.bool.isRequired
+		}).isRequired,
+		position: s.shape({
+			left: s.number.isRequired,
+			right: s.number.isRequired
+		}).isRequired,
+		y: s.number,
+		selected: s.bool,
+		disabled: s.bool,
+		correct: s.bool,
+		onMoveLine: s.func.isRequired,
+		onToggleSelect: s.func.isRequired,
+		onDragStart: s.func,
+		onDragStop: s.func
+	};
+	static defaultProps = {
+		selected: !1,
+		y: 0,
+		disabled: !1,
+		correct: void 0
+	};
+	static contextTypes = {
+		xScale: s.func.isRequired,
+		snapValue: s.func.isRequired
+	};
+	constructor(e) {
+		super(e), this.state = {
+			left: null,
+			right: null
+		};
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		if (e) {
+			let { position: t } = e;
+			this.setState({
+				left: t.left,
+				right: t.right
+			});
+		}
+	}
+	onDrag(e, t) {
+		let { domain: n } = this.props;
+		if (t >= n.min && t <= n.max) {
+			let n = {};
+			n[e] = t, this.setState(n);
+		}
+	}
+	onMove(e, t) {
+		let { position: n } = this.props, r = {
+			left: n.left,
+			right: n.right
+		};
+		r[e] = t, this.props.onMoveLine(r);
+	}
+	render() {
+		let { interval: i, empty: a, position: o, domain: s, y: u, selected: d, disabled: p, correct: m } = this.props, { xScale: h } = this.context, { onDrag: g, onMove: _ } = this, v = _.bind(this, "left"), y = _.bind(this, "right"), b = g.bind(this, "left"), x = g.bind(this, "right"), S = t(this.state.left) ? this.state.left : o.left, C = t(this.state.right) ? this.state.right : o.right, w = h(i) - h(0), T = (e) => e.nativeEvent.preventDefault(), E = () => {
+			this.props.onToggleSelect();
+		}, D = () => {
+			this.props.onToggleSelect();
+		}, O = (t) => {
+			if (Math.abs(t) < w / 10) {
+				this.props.onToggleSelect();
+				return;
+			}
+			let n = h.invert(t + h(0)), r = {
+				left: o.left + n,
+				right: o.right + n
+			};
+			e(r, this.props.position) || this.props.onMoveLine(r);
+		}, k = {
+			left: (s.min - o.left) / i * w,
+			right: (s.max - o.right) / i * w
+		}, A = {
+			interval: i,
+			selected: d,
+			disabled: p,
+			correct: m
+		};
+		return /* @__PURE__ */ c(n, {
+			id: `line-${o.left}-${o.right}-${u}`,
+			disabled: p,
+			grid: [w],
+			bounds: k,
+			onMouseDown: T,
+			onDragEnd: O,
+			children: ({ setNodeRef: e, attributes: t, listeners: n, translateX: i, isDragging: g, onMouseDown: _ }) => /* @__PURE__ */ c(f, {
+				ref: e,
+				$disabled: p,
+				$selected: d,
+				$correct: m,
+				className: g ? "dnd-kit-dragging" : void 0,
+				onMouseDown: _,
+				...t,
+				children: /* @__PURE__ */ l("g", {
+					transform: `translate(${i}, ${u})`,
+					children: [
+						/* @__PURE__ */ c("rect", {
+							x: h(S),
+							width: Math.abs(h(C) - h(S)),
+							fill: "red",
+							fillOpacity: "0.0",
+							y: "-8",
+							height: 16,
+							onClick: D
+						}),
+						/* @__PURE__ */ c("line", {
+							className: "line-handle",
+							x1: h(S),
+							x2: h(C),
+							onClick: E,
+							...n
+						}),
+						/* @__PURE__ */ c(r, {
+							...A,
+							empty: a.left,
+							bounds: {
+								left: s.min - o.left,
+								right: s.max - o.left
+							},
+							position: o.left,
+							onDrag: b,
+							onMove: v,
+							onClick: D
+						}),
+						/* @__PURE__ */ c(r, {
+							...A,
+							empty: a.right,
+							bounds: {
+								left: s.min - o.right,
+								right: s.max - o.right
+							},
+							position: o.right,
+							onDrag: x,
+							onMove: y,
+							onClick: D
+						})
+					]
+				})
+			})
+		});
+	}
+};
+//#endregion
+export { p as default };

package/dist/delivery/number-line/graph/elements/point.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/point.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Point extends React.Component {
+    static defaultProps: {
+        y: number;
+        selected: boolean;
+        empty: boolean;
+        disabled: boolean;
+        correct: undefined;
+    };
+    static propTypes: {
+        interval: PropTypes.Validator<number>;
+        position: PropTypes.Validator<number>;
+        bounds: PropTypes.Requireable<PropTypes.InferProps<{
+            left: PropTypes.Validator<number>;
+            right: PropTypes.Validator<number>;
+        }>>;
+        selected: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        correct: PropTypes.Requireable<boolean>;
+        empty: PropTypes.Requireable<boolean>;
+        y: PropTypes.Requireable<number>;
+        onMove: PropTypes.Validator<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onDrag: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStop: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static contextTypes: {
+        xScale: PropTypes.Validator<(...args: any[]) => any>;
+        snapValue: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    render(): React.JSX.Element;
+}
+export default Point;

package/dist/delivery/number-line/graph/elements/point.js

@@ -0,0 +1,127 @@
+import { Draggable as e } from "../../../draggable/index.js";
+import t from "react";
+import { styled as n } from "@mui/material/styles";
+import r from "prop-types";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { color as o } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/graph/elements/point.tsx
+var s = "150ms", c = n("circle")(({ $selected: e, $disabled: t, $correct: n, $empty: r }) => ({
+	cursor: "pointer",
+	transition: `r ${s} linear,  
+  opacity ${s} linear, 
+  fill ${s} linear,
+  stroke ${s} linear`,
+	stroke: o.primary(),
+	fill: o.primary(),
+	"&.dnd-kit-dragging": {
+		opacity: .25,
+		r: "10px"
+	},
+	"&:hover": { stroke: o.primaryDark() },
+	...e && { stroke: o.primaryDark() },
+	...t && {
+		cursor: "not-allowed",
+		opacity: .8
+	},
+	...n === !0 && {
+		cursor: "inherit",
+		stroke: o.correct(),
+		fill: o.correct()
+	},
+	...n === !1 && {
+		cursor: "inherit",
+		stroke: o.incorrect(),
+		fill: o.incorrect()
+	},
+	...r && { fill: "white" }
+})), l = class extends t.Component {
+	static defaultProps = {
+		y: 0,
+		selected: !1,
+		empty: !1,
+		disabled: !1,
+		correct: void 0
+	};
+	static propTypes = {
+		interval: r.number.isRequired,
+		position: r.number.isRequired,
+		bounds: r.shape({
+			left: r.number.isRequired,
+			right: r.number.isRequired
+		}),
+		selected: r.bool,
+		disabled: r.bool,
+		correct: r.bool,
+		empty: r.bool,
+		y: r.number,
+		onMove: r.func.isRequired,
+		onClick: r.func,
+		onDrag: r.func,
+		onDragStop: r.func,
+		onDragStart: r.func
+	};
+	static contextTypes = {
+		xScale: r.func.isRequired,
+		snapValue: r.func.isRequired
+	};
+	render() {
+		let { onDragStop: t, onDragStart: n, onDrag: r, onClick: s, onMove: l, interval: u, y: d, bounds: f, selected: p, position: m, disabled: h, correct: g, empty: _ } = this.props, { snapValue: v, xScale: y } = this.context, b = y(u) - y(0), x = (e) => {
+			let t = e + y(0);
+			return v(m + y.invert(t));
+		}, S = f ? {
+			left: f.left / u * b,
+			right: f.right / u * b
+		} : null;
+		return /* @__PURE__ */ i(e, {
+			id: `point-${m}-${d}`,
+			disabled: h,
+			grid: [b],
+			bounds: S,
+			onMouseDown: (e) => e.nativeEvent.preventDefault(),
+			onDragStart: () => {
+				n && n();
+			},
+			onDragMove: (e) => {
+				let t = x(e);
+				r && r(t);
+			},
+			onDragEnd: (e) => {
+				if (t && t(), Math.abs(e) < b / 10) {
+					s && s();
+					return;
+				}
+				l(x(e));
+			},
+			children: ({ setNodeRef: e, attributes: t, listeners: n, translateX: r, isDragging: s, onMouseDown: l }) => /* @__PURE__ */ a("g", {
+				ref: e,
+				onMouseDown: l,
+				transform: `translate(${r}, 0)`,
+				...t,
+				...n,
+				children: [/* @__PURE__ */ i("circle", {
+					r: "20",
+					strokeWidth: "3",
+					style: {
+						fill: "transparent",
+						pointerEvents: "visibleStroke"
+					},
+					cx: y(m),
+					cy: d,
+					stroke: p ? o.primaryDark() : "none"
+				}), /* @__PURE__ */ i(c, {
+					r: "5",
+					strokeWidth: "3",
+					cx: y(m),
+					cy: d,
+					$selected: p,
+					$disabled: h,
+					$correct: g,
+					$empty: _,
+					className: s ? "dnd-kit-dragging" : void 0
+				})]
+			})
+		});
+	}
+};
+//#endregion
+export { l as default };

package/dist/delivery/number-line/graph/elements/ray.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/ray.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Ray extends React.Component {
+    static propTypes: {
+        width: PropTypes.Validator<number>;
+        selected: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        empty: PropTypes.Requireable<boolean>;
+        direction: PropTypes.Requireable<string>;
+        y: PropTypes.Requireable<number>;
+        position: PropTypes.Validator<number>;
+        onMove: PropTypes.Validator<(...args: any[]) => any>;
+        onToggleSelect: PropTypes.Validator<(...args: any[]) => any>;
+        interval: PropTypes.Validator<number>;
+        domain: PropTypes.Requireable<PropTypes.InferProps<{
+            min: PropTypes.Validator<number>;
+            max: PropTypes.Validator<number>;
+        }>>;
+    };
+    static defaultProps: {
+        selected: boolean;
+        direction: string;
+        y: number;
+        disabled: boolean;
+    };
+    static contextTypes: {
+        xScale: PropTypes.Validator<(...args: any[]) => any>;
+        snapValue: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    drag(p: any): void;
+    stopDrag(): void;
+    render(): React.JSX.Element;
+}
+export default Ray;