entangle-ui 0.2.0 → 0.4.0

package/dist/esm/assets/src/theme/darkTheme.css.ts.vanilla-V8lWHaQH.css

@@ -0,0 +1,95 @@
+:root {
+  --etui-color-bg-primary: #1a1a1a;
+  --etui-color-bg-secondary: #2d2d2d;
+  --etui-color-bg-tertiary: #3a3a3a;
+  --etui-color-bg-elevated: #404040;
+  --etui-color-surface-default: #2d2d2d;
+  --etui-color-surface-hover: #363636;
+  --etui-color-surface-active: #404040;
+  --etui-color-surface-disabled: #1f1f1f;
+  --etui-color-surface-white-overlay: rgba(255, 255, 255, 0.1);
+  --etui-color-border-default: #4a4a4a;
+  --etui-color-border-focus: #007acc;
+  --etui-color-border-error: #f44336;
+  --etui-color-border-success: #4caf50;
+  --etui-color-text-primary: #ffffff;
+  --etui-color-text-secondary: #cccccc;
+  --etui-color-text-muted: #888888;
+  --etui-color-text-disabled: #555555;
+  --etui-color-accent-primary: #007acc;
+  --etui-color-accent-secondary: #005a9e;
+  --etui-color-accent-success: #4caf50;
+  --etui-color-accent-warning: #ff9800;
+  --etui-color-accent-error: #f44336;
+  --etui-color-backdrop: rgba(0, 0, 0, 0.6);
+  --etui-spacing-xs: 2px;
+  --etui-spacing-sm: 4px;
+  --etui-spacing-md: 8px;
+  --etui-spacing-lg: 12px;
+  --etui-spacing-xl: 16px;
+  --etui-spacing-xxl: 24px;
+  --etui-spacing-xxxl: 32px;
+  --etui-font-size-xxs: 9px;
+  --etui-font-size-xs: 10px;
+  --etui-font-size-sm: 11px;
+  --etui-font-size-md: 12px;
+  --etui-font-size-lg: 14px;
+  --etui-font-size-xl: 16px;
+  --etui-font-weight-normal: 400;
+  --etui-font-weight-medium: 500;
+  --etui-font-weight-semibold: 600;
+  --etui-line-height-tight: 1.2;
+  --etui-line-height-normal: 1.4;
+  --etui-line-height-relaxed: 1.6;
+  --etui-font-family-mono: SF Mono, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --etui-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --etui-radius-none: 0px;
+  --etui-radius-sm: 2px;
+  --etui-radius-md: 4px;
+  --etui-radius-lg: 6px;
+  --etui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --etui-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
+  --etui-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
+  --etui-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.5);
+  --etui-shadow-focus: 0 0 0 2px rgba(0, 122, 204, 0.4);
+  --etui-shadow-separator-bottom: 0 1px 2px rgba(0, 0, 0, 0.18);
+  --etui-shadow-separator-right: 1px 0 2px rgba(0, 0, 0, 0.18);
+  --etui-shadow-separator-left: -1px 0 2px rgba(0, 0, 0, 0.18);
+  --etui-shadow-thumb: 0 0 2px rgba(0, 0, 0, 0.5);
+  --etui-transition-fast: 100ms ease-out;
+  --etui-transition-normal: 200ms ease-out;
+  --etui-transition-slow: 300ms ease-out;
+  --etui-z-base: 1;
+  --etui-z-dropdown: 1000;
+  --etui-z-popover: 1000;
+  --etui-z-tooltip: 1000;
+  --etui-z-modal: 1100;
+  --etui-shell-menubar-height: 28px;
+  --etui-shell-menubar-bg: #2d2d2d;
+  --etui-shell-menubar-hover-bg: #363636;
+  --etui-shell-menubar-active-bg: #005a9e;
+  --etui-shell-menubar-text: #ffffff;
+  --etui-shell-menubar-shortcut-text: #888888;
+  --etui-shell-toolbar-height-sm: 32px;
+  --etui-shell-toolbar-height-md: 40px;
+  --etui-shell-toolbar-bg: #2d2d2d;
+  --etui-shell-toolbar-separator: #4a4a4a;
+  --etui-shell-statusbar-height: 22px;
+  --etui-shell-statusbar-bg: #007acc;
+  --etui-shell-statusbar-text: #ffffff;
+  --etui-shell-dock-tab-height: 28px;
+  --etui-shell-dock-tab-bg: #2d2d2d;
+  --etui-shell-dock-tab-active-bg: #1a1a1a;
+  --etui-shell-dock-tab-hover-bg: #363636;
+  --etui-shell-dock-tab-text: #cccccc;
+  --etui-shell-dock-tab-active-text: #ffffff;
+  --etui-shell-dock-splitter-size: 4px;
+  --etui-shell-dock-splitter-color: #4a4a4a;
+  --etui-shell-dock-splitter-hover-color: #007acc;
+  --etui-shell-dock-border-bar-bg: #2d2d2d;
+  --etui-shell-dock-border-bar-size: 28px;
+  --etui-shell-dock-drop-overlay: rgba(0, 122, 204, 0.2);
+  --etui-storybook-gradient-start: #061f21;
+  --etui-storybook-gradient-mid: #031a1a;
+  --etui-storybook-gradient-end: #091010;
+}

package/dist/esm/components/Icons/CheckIcon.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Check icon component for confirmation and selection states.
+ *
+ * A standard checkmark icon commonly used for checkboxes, confirmation dialogs,
+ * completed tasks, and success states in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CheckIcon />
+ *
+ * // With custom size and color
+ * <CheckIcon size="lg" color="success" />
+ *
+ * // In a confirmation button
+ * <Button icon={<CheckIcon />}>Confirm</Button>
+ * ```
+ */
+const CheckIcon = props => {
+    return (jsx(Icon, { ...props, children: jsx("polyline", { points: "20,6 9,17 4,12" }) }));
+};
+
+export { CheckIcon };
+//# sourceMappingURL=CheckIcon.js.map

package/dist/esm/components/Icons/CheckIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckIcon.js","sources":["../../../../../src/components/Icons/CheckIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAKA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,SAAS,GAA0C,KAAK,IAAG;AACtE,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,gBAAgB,EAAA,CAAG,EAAA,CAC/B;AAEX;;;;"}

package/dist/esm/components/Icons/ChevronDownIcon.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Chevron Down icon component for dropdown and expansion indicators.
+ *
+ * A subtle downward chevron commonly used for dropdown menus,
+ * accordion expansion, and subtle directional cues in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ChevronDownIcon />
+ *
+ * // With custom size and color
+ * <ChevronDownIcon size="sm" color="muted" />
+ *
+ * // In a dropdown
+ * <Select icon={<ChevronDownIcon />}>Options</Select>
+ * ```
+ */
+const ChevronDownIcon = props => {
+    return (jsx(Icon, { ...props, children: jsx("polyline", { points: "6,9 12,15 18,9" }) }));
+};
+
+export { ChevronDownIcon };
+//# sourceMappingURL=ChevronDownIcon.js.map

package/dist/esm/components/Icons/ChevronDownIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronDownIcon.js","sources":["../../../../../src/components/Icons/ChevronDownIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,eAAe,GAA0C,KAAK,IAAG;AAC5E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,gBAAgB,EAAA,CAAG,EAAA,CAC/B;AAEX;;;;"}

package/dist/esm/components/Icons/ChevronUpIcon.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Chevron Up icon component for collapse and upward indicators.
+ *
+ * A subtle upward chevron commonly used for collapsing content,
+ * accordion collapse, and subtle directional cues in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ChevronUpIcon />
+ *
+ * // With custom size and color
+ * <ChevronUpIcon size="sm" color="muted" />
+ *
+ * // In a collapsible section
+ * <Button icon={<ChevronUpIcon />}>Collapse</Button>
+ * ```
+ */
+const ChevronUpIcon = props => {
+    return (jsx(Icon, { ...props, children: jsx("polyline", { points: "18,15 12,9 6,15" }) }));
+};
+
+export { ChevronUpIcon };
+//# sourceMappingURL=ChevronUpIcon.js.map

package/dist/esm/components/Icons/ChevronUpIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronUpIcon.js","sources":["../../../../../src/components/Icons/ChevronUpIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,aAAa,GAA0C,KAAK,IAAG;AAC1E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,iBAAiB,EAAA,CAAG,EAAA,CAChC;AAEX;;;;"}

package/dist/esm/components/Icons/CircleIcon.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Circle icon component for radio buttons and dot indicators.
+ *
+ * A standard circle icon commonly used for radio button selections,
+ * dot indicators, and circular markers in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CircleIcon />
+ *
+ * // With custom size and color
+ * <CircleIcon size="lg" color="primary" />
+ *
+ * // In a radio selection
+ * <Button icon={<CircleIcon />}>Option</Button>
+ * ```
+ */
+const CircleIcon = props => {
+    return (jsx(Icon, { ...props, children: jsx("circle", { cx: "12", cy: "12", r: "10" }) }));
+};
+
+export { CircleIcon };
+//# sourceMappingURL=CircleIcon.js.map

package/dist/esm/components/Icons/CircleIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleIcon.js","sources":["../../../../../src/components/Icons/CircleIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAKA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,UAAU,GAA0C,KAAK,IAAG;IACvE,QACEA,IAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,CAAG,EAAA,CAC5B;AAEX;;;;"}

package/dist/esm/components/Icons/CloseIcon.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Close icon component for dismissing and closing actions.
+ *
+ * A standard X icon commonly used for closing modals,
+ * dismissing notifications, and cancel actions in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CloseIcon />
+ *
+ * // With custom size and color
+ * <CloseIcon size="sm" color="muted" />
+ *
+ * // In a close button
+ * <IconButton icon={<CloseIcon />} aria-label="Close" />
+ * ```
+ */
+const CloseIcon = props => {
+    return (jsxs(Icon, { ...props, children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+};
+
+export { CloseIcon };
+//# sourceMappingURL=CloseIcon.js.map

package/dist/esm/components/Icons/CloseIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseIcon.js","sources":["../../../../../src/components/Icons/CloseIcon.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,SAAS,GAA0C,KAAK,IAAG;AACtE,IAAA,QACEA,IAAA,CAAC,IAAI,OAAK,KAAK,EAAA,QAAA,EAAA,CACbC,cAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,EACtCA,cAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,CAAA,EAAA,CACjC;AAEX;;;;"}

package/dist/esm/components/Icons/EyeDropperIcon.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * EyeDropper icon component for color sampling actions.
+ *
+ * A pipette/eyedropper icon commonly used for color picking,
+ * sampling colors from the canvas, and color-related tools
+ * in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <EyeDropperIcon />
+ *
+ * // With custom size and color
+ * <EyeDropperIcon size="md" color="primary" />
+ *
+ * // In a color picker button
+ * <Button icon={<EyeDropperIcon />}>Pick Color</Button>
+ * ```
+ */
+const EyeDropperIcon = props => {
+    return (jsx(Icon, { ...props, children: jsx("path", { d: "M21.17 2.06A3.12 3.12 0 0 0 19 1.05a2.99 2.99 0 0 0-2.15.88l-2.7 2.7-1.28-1.27a1 1 0 0 0-1.41 0 1 1 0 0 0 0 1.41l.27.27-7.07 7.08a2 2 0 0 0-.54 1l-.72 3.61a1 1 0 0 0 .28.87 1 1 0 0 0 .71.3h.16l3.61-.72a2 2 0 0 0 1-.54l7.08-7.07.27.27a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-1.27-1.28 2.7-2.7a3.05 3.05 0 0 0 .02-4.29z" }) }));
+};
+
+export { EyeDropperIcon };
+//# sourceMappingURL=EyeDropperIcon.js.map

package/dist/esm/components/Icons/EyeDropperIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EyeDropperIcon.js","sources":["../../../../../src/components/Icons/EyeDropperIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;;AAkBG;AACI,MAAM,cAAc,GAA0C,KAAK,IAAG;AAC3E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,0TAA0T,EAAA,CAAG,EAAA,CAChU;AAEX;;;;"}

package/dist/esm/components/Icons/TangentAlignedIcon.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+const TangentAlignedIcon = props => {
+    return (jsxs(Icon, { ...props, children: [jsx("g", { strokeWidth: "2.25", children: jsx("line", { x1: "3", y1: "18", x2: "21", y2: "6" }) }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: "currentColor", stroke: "none" })] }));
+};
+
+export { TangentAlignedIcon };
+//# sourceMappingURL=TangentAlignedIcon.js.map

package/dist/esm/components/Icons/TangentAlignedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TangentAlignedIcon.js","sources":["../../../../../src/components/Icons/TangentAlignedIcon.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAIO,MAAM,kBAAkB,GAE3B,KAAK,IAAG;IACV,QACEA,IAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,aACbC,GAAA,CAAA,GAAA,EAAA,EAAG,WAAW,EAAC,MAAM,EAAA,QAAA,EACnBA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAA,CAAG,EAAA,CACpC,EACJA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CAAA,EAAA,CAC7D;AAEX;;;;"}

package/dist/esm/components/Icons/TangentAutoIcon.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+const TangentAutoIcon = props => {
+    return (jsx(Icon, { ...props, children: jsx("g", { strokeWidth: "2.25", children: jsx("path", { d: "M3 18 C7.5 18, 9 6, 12 6 C15 6, 16.5 18, 21 18" }) }) }));
+};
+
+export { TangentAutoIcon };
+//# sourceMappingURL=TangentAutoIcon.js.map

package/dist/esm/components/Icons/TangentAutoIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TangentAutoIcon.js","sources":["../../../../../src/components/Icons/TangentAutoIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAIO,MAAM,eAAe,GAA0C,KAAK,IAAG;AAC5E,IAAA,QACEA,GAAA,CAAC,IAAI,OAAK,KAAK,EAAA,QAAA,EACbA,WAAG,WAAW,EAAC,MAAM,EAAA,QAAA,EACnBA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,gDAAgD,GAAG,EAAA,CACzD,EAAA,CACC;AAEX;;;;"}

package/dist/esm/components/Icons/TangentFreeIcon.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+const TangentFreeIcon = props => {
+    return (jsxs(Icon, { ...props, children: [jsxs("g", { strokeWidth: "2.25", children: [jsx("line", { x1: "4.5", y1: "19.5", x2: "12", y2: "12" }), jsx("line", { x1: "12", y1: "12", x2: "21", y2: "7.5" })] }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: "currentColor", stroke: "none" })] }));
+};
+
+export { TangentFreeIcon };
+//# sourceMappingURL=TangentFreeIcon.js.map

package/dist/esm/components/Icons/TangentFreeIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TangentFreeIcon.js","sources":["../../../../../src/components/Icons/TangentFreeIcon.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAIO,MAAM,eAAe,GAA0C,KAAK,IAAG;AAC5E,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EAAA,CACbA,IAAA,CAAA,GAAA,EAAA,EAAG,WAAW,EAAC,MAAM,EAAA,QAAA,EAAA,CACnBC,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,EAC3CA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAA,CAAG,IACvC,EACJA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CAAA,EAAA,CAC7D;AAEX;;;;"}

package/dist/esm/components/Icons/TangentLinearIcon.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+const TangentLinearIcon = props => {
+    return (jsx(Icon, { ...props, children: jsx("g", { strokeWidth: "2.25", children: jsx("line", { x1: "3", y1: "19.5", x2: "21", y2: "4.5" }) }) }));
+};
+
+export { TangentLinearIcon };
+//# sourceMappingURL=TangentLinearIcon.js.map

package/dist/esm/components/Icons/TangentLinearIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TangentLinearIcon.js","sources":["../../../../../src/components/Icons/TangentLinearIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAIO,MAAM,iBAAiB,GAE1B,KAAK,IAAG;AACV,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAA,CAAA,GAAA,EAAA,EAAG,WAAW,EAAC,MAAM,EAAA,QAAA,EACnBA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAA,CAAG,EAAA,CACxC,EAAA,CACC;AAEX;;;;"}

package/dist/esm/components/Icons/TangentMirroredIcon.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+const TangentMirroredIcon = props => {
+    return (jsxs(Icon, { ...props, children: [jsx("g", { strokeWidth: "2.25", children: jsx("line", { x1: "3", y1: "18", x2: "21", y2: "6" }) }), jsx("circle", { cx: "6", cy: "16.5", r: "2.25", fill: "currentColor", stroke: "none" }), jsx("circle", { cx: "18", cy: "7.5", r: "2.25", fill: "currentColor", stroke: "none" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: "currentColor", stroke: "none" })] }));
+};
+
+export { TangentMirroredIcon };
+//# sourceMappingURL=TangentMirroredIcon.js.map

package/dist/esm/components/Icons/TangentMirroredIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TangentMirroredIcon.js","sources":["../../../../../src/components/Icons/TangentMirroredIcon.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAIO,MAAM,mBAAmB,GAE5B,KAAK,IAAG;IACV,QACEA,KAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EAAA,CACbC,GAAA,CAAA,GAAA,EAAA,EAAG,WAAW,EAAC,MAAM,YACnBA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAA,CAAG,EAAA,CACpC,EACJA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,EACtEA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,EACtEA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CAAA,EAAA,CAC7D;AAEX;;;;"}

package/dist/esm/components/Icons/TangentStepIcon.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+const TangentStepIcon = props => {
+    return (jsx(Icon, { ...props, children: jsx("g", { strokeWidth: "2.25", children: jsx("polyline", { points: "3,18 3,12 12,12 12,6 21,6" }) }) }));
+};
+
+export { TangentStepIcon };
+//# sourceMappingURL=TangentStepIcon.js.map

package/dist/esm/components/Icons/TangentStepIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TangentStepIcon.js","sources":["../../../../../src/components/Icons/TangentStepIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAIO,MAAM,eAAe,GAA0C,KAAK,IAAG;AAC5E,IAAA,QACEA,GAAA,CAAC,IAAI,OAAK,KAAK,EAAA,QAAA,EACbA,WAAG,WAAW,EAAC,MAAM,EAAA,QAAA,EACnBA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,2BAA2B,GAAG,EAAA,CAC7C,EAAA,CACC;AAEX;;;;"}

package/dist/esm/components/controls/CartesianPicker/CartesianPicker.css.js

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/controls/CartesianPicker/CartesianPicker.css.ts.vanilla-Ccao9ycw.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var bottomBarStyle = 'CartesianPicker_bottomBarStyle__tqma2q6';
+var cartesianPickerRecipe = createRuntimeFn({defaultClassName:'CartesianPicker_cartesianPickerRecipe__tqma2q1',variantClassNames:{disabled:{true:'CartesianPicker_cartesianPickerRecipe_disabled_true__tqma2q2',false:'CartesianPicker_cartesianPickerRecipe_disabled_false__tqma2q3'},responsive:{true:'CartesianPicker_cartesianPickerRecipe_responsive_true__tqma2q4',false:'CartesianPicker_cartesianPickerRecipe_responsive_false__tqma2q5'}},defaultVariants:{disabled:false,responsive:false},compoundVariants:[]});
+var pickerWidthVar = 'var(--pickerWidthVar__tqma2q0)';
+
+export { bottomBarStyle, cartesianPickerRecipe, pickerWidthVar };
+//# sourceMappingURL=CartesianPicker.css.js.map

package/dist/esm/components/controls/CartesianPicker/CartesianPicker.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianPicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/esm/components/controls/CartesianPicker/CartesianPicker.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useCallback } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
+import { roundToPrecision } from '../../../utils/mathUtils.js';
+import { CanvasContainer } from '../../primitives/canvas/CanvasContainer.js';
+import { useCartesianInteraction } from './useCartesianInteraction.js';
+import { useCartesianRenderer } from './useCartesianRenderer.js';
+import { bottomBarStyle, pickerWidthVar, cartesianPickerRecipe } from './CartesianPicker.css.js';
+
+const CartesianPicker = ({ value, defaultValue, domainX = [-1, 1], domainY = [-1, 1], showGrid = true, gridSubdivisions = 4, showAxisLabels = true, showOriginAxes = true, showCrosshair = true, crosshairStyle = 'dashed', labelX, labelY, markerRadius = 6, snapToGrid = false, step, clampToRange = true, precision = 2, width = 200, height = 200, responsive = false, disabled = false, readOnly = false, onChange, onChangeComplete, renderBackground, renderBottomBar, className, testId, id, style, ...rest }) => {
+    const canvasRef = useRef(null);
+    // Controlled / uncontrolled
+    const [internalValue, setInternalValue] = useState(() => defaultValue ?? { x: 0, y: 0 });
+    const isControlled = value !== undefined;
+    const currentPoint = useMemo(() => (isControlled ? value : internalValue), [isControlled, value, internalValue]);
+    const handleChange = useCallback((newPoint) => {
+        if (!isControlled) {
+            setInternalValue(newPoint);
+        }
+        onChange?.(newPoint);
+    }, [isControlled, onChange]);
+    const handleChangeComplete = useCallback((newPoint) => {
+        onChangeComplete?.(newPoint);
+    }, [onChangeComplete]);
+    // Viewport with padding
+    const viewport = useMemo(() => {
+        const hasAxisNames = Boolean(labelX ?? labelY);
+        const padding = hasAxisNames && showAxisLabels ? 0.12 : 0.08;
+        const [dxMin, dxMax] = domainX;
+        const [dyMin, dyMax] = domainY;
+        const xPad = (dxMax - dxMin) * padding;
+        const yPad = (dyMax - dyMin) * padding;
+        return {
+            viewX: [dxMin - xPad, dxMax + xPad],
+            viewY: [dyMin - yPad, dyMax + yPad],
+        };
+    }, [domainX, domainY, labelX, labelY, showAxisLabels]);
+    // Interaction hook
+    const interaction = useCartesianInteraction({
+        point: currentPoint,
+        viewport,
+        canvasRef,
+        domainX,
+        domainY,
+        disabled,
+        readOnly,
+        clampToRange,
+        snapToGrid,
+        gridSubdivisions,
+        step,
+        precision,
+        onChange: handleChange,
+        onChangeComplete: handleChangeComplete,
+    });
+    // Renderer hook
+    useCartesianRenderer({
+        canvasRef,
+        point: currentPoint,
+        viewport,
+        domainX,
+        domainY,
+        showGrid,
+        gridSubdivisions,
+        showAxisLabels,
+        showOriginAxes,
+        showCrosshair,
+        crosshairStyle,
+        labelX,
+        labelY,
+        markerRadius,
+        disabled,
+        isHovered: interaction.isHovered,
+        isDragging: interaction.isDragging,
+        renderBackground,
+    });
+    // ARIA description
+    const ariaDescription = `2D point picker, current value X: ${roundToPrecision(currentPoint.x, precision)}, Y: ${roundToPrecision(currentPoint.y, precision)}`;
+    // Live announcement
+    const liveAnnouncement = `X: ${roundToPrecision(currentPoint.x, precision)}, Y: ${roundToPrecision(currentPoint.y, precision)}`;
+    return (jsxs("div", { className: cx(cartesianPickerRecipe({ disabled, responsive }), className), style: {
+            ...style,
+            ...(!responsive
+                ? assignInlineVars({ [pickerWidthVar]: `${width}px` })
+                : {}),
+        }, "data-testid": testId, id: id, ...rest, children: [jsx(CanvasContainer, { canvasRef: canvasRef, height: height, responsive: responsive, disabled: disabled, ariaLabel: "Cartesian point picker", ariaRoledescription: ariaDescription, liveAnnouncement: liveAnnouncement, handlers: interaction.handlers, testId: testId ? `${testId}-canvas` : undefined }), renderBottomBar && (jsx("div", { className: bottomBarStyle, "data-testid": testId ? `${testId}-bottom-bar` : undefined, children: renderBottomBar({
+                    point: currentPoint,
+                    disabled,
+                    readOnly,
+                    isDragging: interaction.isDragging,
+                    domainX,
+                    domainY,
+                }) }))] }));
+};
+CartesianPicker.displayName = 'CartesianPicker';
+
+export { CartesianPicker };
+//# sourceMappingURL=CartesianPicker.js.map

package/dist/esm/components/controls/CartesianPicker/CartesianPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianPicker.js","sources":["../../../../../../src/components/controls/CartesianPicker/CartesianPicker.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAiBO;AAiCL;;;AAOA;;AAMA;;;;AAKI;AACF;AAIF;AAEI;AACF;;AAKF;;AAEE;AACA;AACA;;;;;;;AAOF;;;AAIE;;;;;;;;;;;;AAYA;AACA;AACD;;AAGD;;AAEE;;;;;;;;;;;;;;;;;AAiBD;;;;;AAQD;AAIM;;AAEE;;AAEH;AAsBK;;;;;;AAMD;AAKX;AAEA;;"}