entangle-ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # entangle-ui
 
+## 0.3.0
+
+### Minor Changes
+
+- [#24](https://github.com/SebastianWebdev/entangle-ui/pull/24) [`7c350bb`](https://github.com/SebastianWebdev/entangle-ui/commit/7c350bb1ec812a4c4e3ab44c36bc280920aa61c0) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Switch to fully tree-shakeable ESM build with preserveModules
+
+  - Replace monolithic bundle with per-module ESM output (`dist/esm/`)
+  - Drop CJS output — ESM-only package
+  - Add `sideEffects: false` and `exports` field to package.json
+  - Fix externals: add @emotion/react, @emotion/styled, @floating-ui/react, react/jsx-runtime
+  - Fix wrong external name: @base-ui/react → @base-ui-components/react
+  - Remove @emotion/react and @emotion/styled from dependencies (keep in peerDependencies only)
+  - Add `/*#__PURE__*/` annotations for tree-shaking (Object.assign, createContext, React.memo, forwardRef)
+  - Add `entangle-ui/palettes` deep import entry point
+  - Add size-limit bundle size guards
+  - Create tsconfig.build.json (excludes tests/stories from build)
+
+### Patch Changes
+
+- [#23](https://github.com/SebastianWebdev/entangle-ui/pull/23) [`1e67018`](https://github.com/SebastianWebdev/entangle-ui/commit/1e6701877b283cdd954d61e726d323f98d59c56a) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Replace hardcoded rgba values with theme tokens (whiteOverlay, separator shadows, thumb) and deduplicate AppShell toolbar slots. Fix SplitPane panel collapse regression where collapsed panels were clamped back to minSize.
+
+- [#21](https://github.com/SebastianWebdev/entangle-ui/pull/21) [`df53065`](https://github.com/SebastianWebdev/entangle-ui/commit/df53065ac21a89a257ca5a66d7943c19399940a9) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Optimize new components: memoize context values, wrap leaf components with React.memo, replace hardcoded z-index/spacing with theme tokens, extract constants
+
 ## 0.2.0
 
 ### Minor Changes

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;AACU,MAAA,SAAS,GAA0C,KAAK,IAAG;AACtE,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAU,CAAA,UAAA,EAAA,EAAA,MAAM,EAAC,gBAAgB,EAAG,CAAA,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;AACU,MAAA,eAAe,GAA0C,KAAK,IAAG;AAC5E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAU,CAAA,UAAA,EAAA,EAAA,MAAM,EAAC,gBAAgB,EAAG,CAAA,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;AACU,MAAA,aAAa,GAA0C,KAAK,IAAG;AAC1E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAU,CAAA,UAAA,EAAA,EAAA,MAAM,EAAC,iBAAiB,EAAG,CAAA,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;AACU,MAAA,UAAU,GAA0C,KAAK,IAAG;IACvE,QACEA,IAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EACb,QAAA,EAAAA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,CAAG,EAC5B,CAAA;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;AACU,MAAA,SAAS,GAA0C,KAAK,IAAG;AACtE,IAAA,QACEA,IAAC,CAAA,IAAI,OAAK,KAAK,EAAA,QAAA,EAAA,CACbC,cAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAG,CAAA,EACtCA,cAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAG,CAAA,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;AACU,MAAA,cAAc,GAA0C,KAAK,IAAG;AAC3E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,0TAA0T,EAAG,CAAA,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":";;;AAIa,MAAA,kBAAkB,GAE3B,KAAK,IAAG;IACV,QACEA,IAAC,CAAA,IAAI,EAAK,EAAA,GAAA,KAAK,aACbC,GAAG,CAAA,GAAA,EAAA,EAAA,WAAW,EAAC,MAAM,EACnB,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAG,CAAA,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,CAC7D,EAAA,CAAA;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":";;;AAIa,MAAA,eAAe,GAA0C,KAAK,IAAG;AAC5E,IAAA,QACEA,GAAC,CAAA,IAAI,OAAK,KAAK,EAAA,QAAA,EACbA,WAAG,WAAW,EAAC,MAAM,EACnB,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,gDAAgD,GAAG,EACzD,CAAA,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":";;;AAIa,MAAA,eAAe,GAA0C,KAAK,IAAG;AAC5E,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EACb,QAAA,EAAA,CAAAA,IAAA,CAAA,GAAA,EAAA,EAAG,WAAW,EAAC,MAAM,EAAA,QAAA,EAAA,CACnBC,GAAM,CAAA,MAAA,EAAA,EAAA,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,EAAG,CAAA,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":";;;AAIa,MAAA,iBAAiB,GAE1B,KAAK,IAAG;AACV,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAG,CAAA,GAAA,EAAA,EAAA,WAAW,EAAC,MAAM,EACnB,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAA,CAAG,EACxC,CAAA,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":";;;AAIa,MAAA,mBAAmB,GAE5B,KAAK,IAAG;IACV,QACEA,KAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EACb,QAAA,EAAA,CAAAC,GAAA,CAAA,GAAA,EAAA,EAAG,WAAW,EAAC,MAAM,YACnBA,GAAM,CAAA,MAAA,EAAA,EAAA,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAG,CAAA,EAAA,CACpC,EACJA,GAAQ,CAAA,QAAA,EAAA,EAAA,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,EACtEA,GAAQ,CAAA,QAAA,EAAA,EAAA,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,EACtEA,GAAQ,CAAA,QAAA,EAAA,EAAA,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CAC7D,EAAA,CAAA;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":";;;AAIa,MAAA,eAAe,GAA0C,KAAK,IAAG;AAC5E,IAAA,QACEA,GAAC,CAAA,IAAI,OAAK,KAAK,EAAA,QAAA,EACbA,WAAG,WAAW,EAAC,MAAM,EACnB,QAAA,EAAAA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,2BAA2B,GAAG,EAC7C,CAAA,EAAA,CACC;AAEX;;;;"}

package/dist/esm/components/controls/ColorPicker/AlphaSlider.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import styled from '@emotion/styled';
+
+const StyledTrack = styled.div `
+  position: relative;
+  width: 100%;
+  height: 4px;
+  border-radius: ${props => props.theme.borderRadius.sm}px;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+
+  /* Checkerboard for transparency */
+  background-image:
+    linear-gradient(45deg, #ccc 25%, transparent 25%),
+    linear-gradient(-45deg, #ccc 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ccc 75%),
+    linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 8px 8px;
+  background-position:
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0px;
+`;
+const StyledGradient = styled.div `
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+`;
+const StyledThumb = styled.div `
+  position: absolute;
+  top: 50%;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 2px solid white;
+  box-shadow: ${props => props.theme.shadows.sm};
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+`;
+const AlphaSlider = ({ alpha, color, onChange, onChangeComplete, }) => {
+    const trackRef = useRef(null);
+    const getAlpha = useCallback((clientX) => {
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+        const a = Number((x / rect.width).toFixed(2));
+        onChange(a);
+    }, [onChange]);
+    const handlePointerDown = useCallback((e) => {
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        getAlpha(e.clientX);
+    }, [getAlpha]);
+    const handlePointerMove = useCallback((e) => {
+        if (e.buttons === 0)
+            return;
+        getAlpha(e.clientX);
+    }, [getAlpha]);
+    const handlePointerUp = useCallback(() => {
+        onChangeComplete?.();
+    }, [onChangeComplete]);
+    const handleKeyDown = useCallback((e) => {
+        const step = e.shiftKey ? 0.01 : 0.05;
+        let newAlpha = alpha;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                newAlpha = Math.min(1, alpha + step);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                newAlpha = Math.max(0, alpha - step);
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        onChange(Number(newAlpha.toFixed(2)));
+    }, [alpha, onChange]);
+    const thumbPosition = `${alpha * 100}%`;
+    return (jsxs(StyledTrack, { ref: trackRef, role: "slider", tabIndex: 0, "aria-label": "Opacity", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(alpha * 100), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onKeyDown: handleKeyDown, children: [jsx(StyledGradient, { style: {
+                    background: `linear-gradient(to right, transparent, ${color})`,
+                } }), jsx(StyledThumb, { style: { left: thumbPosition } })] }));
+};
+AlphaSlider.displayName = 'AlphaSlider';
+
+export { AlphaSlider };
+//# sourceMappingURL=AlphaSlider.js.map

package/dist/esm/components/controls/ColorPicker/AlphaSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaSlider.js","sources":["../../../../../../src/components/controls/ColorPicker/AlphaSlider.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/controls/ColorPicker/ColorArea.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import styled from '@emotion/styled';
+import { rgbToHex, hsvToRgb } from './colorUtils.js';
+
+const StyledArea = styled.div `
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: ${props => props.theme.borderRadius.sm}px;
+  cursor: crosshair;
+  user-select: none;
+  touch-action: none;
+  overflow: hidden;
+`;
+const StyledSaturationGradient = styled.div `
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to right, #ffffff, transparent);
+`;
+const StyledValueGradient = styled.div `
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, #000000, transparent);
+`;
+const StyledThumb = styled.div `
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid white;
+  box-shadow: ${({ theme }) => theme.shadows.thumb};
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+`;
+const ColorArea = ({ hue, saturation, value, onChange, onChangeComplete, }) => {
+    const areaRef = useRef(null);
+    const getSV = useCallback((clientX, clientY) => {
+        const rect = areaRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+        const y = Math.max(0, Math.min(clientY - rect.top, rect.height));
+        const s = Math.round((x / rect.width) * 100);
+        const v = Math.round((1 - y / rect.height) * 100);
+        onChange(s, v);
+    }, [onChange]);
+    const handlePointerDown = useCallback((e) => {
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        getSV(e.clientX, e.clientY);
+    }, [getSV]);
+    const handlePointerMove = useCallback((e) => {
+        if (e.buttons === 0)
+            return;
+        getSV(e.clientX, e.clientY);
+    }, [getSV]);
+    const handlePointerUp = useCallback(() => {
+        onChangeComplete?.();
+    }, [onChangeComplete]);
+    const handleKeyDown = useCallback((e) => {
+        const step = e.shiftKey ? 1 : 5;
+        let newS = saturation;
+        let newV = value;
+        switch (e.key) {
+            case 'ArrowRight':
+                newS = Math.min(100, saturation + step);
+                break;
+            case 'ArrowLeft':
+                newS = Math.max(0, saturation - step);
+                break;
+            case 'ArrowUp':
+                newV = Math.min(100, value + step);
+                break;
+            case 'ArrowDown':
+                newV = Math.max(0, value - step);
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        onChange(newS, newV);
+    }, [saturation, value, onChange]);
+    const { r, g, b } = hsvToRgb(hue, 100, 100);
+    const hueColor = rgbToHex(r, g, b);
+    const thumbX = `${saturation}%`;
+    const thumbY = `${100 - value}%`;
+    return (jsxs(StyledArea, { ref: areaRef, role: "slider", tabIndex: 0, "aria-label": "Color saturation and brightness", "aria-valuetext": `Saturation ${saturation}%, Brightness ${value}%`, style: { backgroundColor: hueColor }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onKeyDown: handleKeyDown, children: [jsx(StyledSaturationGradient, {}), jsx(StyledValueGradient, {}), jsx(StyledThumb, { style: { left: thumbX, top: thumbY } })] }));
+};
+ColorArea.displayName = 'ColorArea';
+
+export { ColorArea };
+//# sourceMappingURL=ColorArea.js.map

package/dist/esm/components/controls/ColorPicker/ColorArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorArea.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}