Component Improvements: (#127)

* Component Improvements:

- Fix handle positions when aligned with the header
- Fix segment-picker to properly occupy space within its container
- Add flex-shrink: 0 to switch component to maintain a defined size, even in flex containers

* npm package version bump

Author: piotrblaszczyk

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@synergycodes/axiom",
   "type": "module",
-  "version": "1.0.0-beta.18",
+  "version": "1.0.0-beta.19",
   "description": "A React library for creating node-based UIs and diagram-driven applications. Perfect for React Flow users, providing ready-to-use node templates and components that work seamlessly with React Flow's ecosystem.",
   "keywords": [
     "react",

packages/ui/src/components/node/node-panel/handle.module.css

@@ -16,11 +16,15 @@
     position: relative;
 
     :global(.react-flow__handle.react-flow__handle-right) {
-      right: calc(-1 * var(--ax-public-node-padding));
+      right: calc(
+        -1 * (var(--ax-public-node-padding) + var(--ax-public-node-border-size))
+      );
     }
 
     :global(.react-flow__handle.react-flow__handle-left) {
-      left: calc(-1 * var(--ax-public-node-padding));
+      left: calc(
+        -1 * (var(--ax-public-node-padding) + var(--ax-public-node-border-size))
+      );
     }
   }
 

packages/ui/src/components/segment-picker/segment-picker.module.css

@@ -22,6 +22,7 @@
 
     &:not(.circle) {
       width: 100%;
+      box-sizing: border-box;
     }
   }
 }

packages/ui/src/components/switch/switch.module.css

@@ -25,6 +25,7 @@
 @layer ui.base {
   .container {
     display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     position: relative;

packages/website/generated/css-variables.json

@@ -500,7 +500,12 @@
       "name": "--ax-public-checkbox-size-small"
     }
   ],
-  "components/collapsible/collapsible.module.css": [],
+  "components/collapsible/collapsible.module.css": [
+    {
+      "comment": "",
+      "name": "--ax-public-collapsible-transition-duration"
+    }
+  ],
   "components/date-picker/data-picker-mantine.css": [
     {
       "comment": "",

packages/website/generated/props.json

@@ -1602,6 +1602,13 @@
       "displayName": "NodeDescription",
       "methods": [],
       "props": {
+        "className": {
+          "description": "",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "description": {
           "description": "",
           "required": false,