@synerise/ds-divider 1.1.1 → 1.1.3

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-divider@1.1.2...@synerise/ds-divider@1.1.3) (2025-09-30)
+
+**Note:** Version bump only for package @synerise/ds-divider
+
+
+
+
+
+## [1.1.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-divider@1.1.1...@synerise/ds-divider@1.1.2) (2025-09-30)
+
+
+### Bug Fixes
+
+* **divider:** fix style ([7a1db45](https://github.com/Synerise/synerise-design/commit/7a1db453d85eb52f887486f74575de17bb3f8ee0))
+
+
+
+
+
 ## [1.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-divider@1.1.0...@synerise/ds-divider@1.1.1) (2025-09-26)
 
 

package/dist/components/Line.const.d.ts

@@ -0,0 +1,6 @@
+import { type SVGAttributes } from 'react';
+import { type DividerType } from '../Divider.types';
+export declare const SVG_PROPS: Record<DividerType, {
+    svgAttributes: SVGAttributes<SVGElement>;
+    lineAttributes: SVGAttributes<SVGLineElement>;
+}>;

package/dist/components/Line.const.js

@@ -0,0 +1,26 @@
+export var SVG_PROPS = {
+  horizontal: {
+    svgAttributes: {
+      viewBox: '0 0 1 1',
+      width: '100%'
+    },
+    lineAttributes: {
+      x1: '0',
+      y1: '0',
+      x2: '1',
+      y2: '0'
+    }
+  },
+  vertical: {
+    svgAttributes: {
+      viewBox: '0 0 1 1',
+      height: '100%'
+    },
+    lineAttributes: {
+      x1: '0',
+      y1: '0',
+      x2: '0',
+      y2: '1'
+    }
+  }
+};

package/dist/components/Line.js

@@ -2,6 +2,7 @@ var _excluded = ["marginBottom", "marginTop", "type", "dashed", "className"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React from 'react';
+import { SVG_PROPS } from './Line.const';
 import * as S from './Line.styles';
 export var Line = function Line(_ref) {
   var marginBottom = _ref.marginBottom,
@@ -11,6 +12,7 @@ export var Line = function Line(_ref) {
     dashed = _ref.dashed,
     className = _ref.className,
     htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var svgProps = SVG_PROPS[type];
   return /*#__PURE__*/React.createElement(S.Line, _extends({
     className: "ds-divider-line ds-divider-" + type + " ds-divider-" + (dashed ? 'dashed' : 'solid') + " " + className,
     role: "separator",
@@ -18,5 +20,12 @@ export var Line = function Line(_ref) {
     marginBottom: marginBottom,
     type: type,
     dashed: dashed
-  }, htmlAttributes));
+  }, htmlAttributes), /*#__PURE__*/React.createElement("svg", _extends({}, svgProps.svgAttributes, {
+    preserveAspectRatio: "none"
+  }), /*#__PURE__*/React.createElement("line", _extends({}, svgProps.lineAttributes, {
+    strokeWidth: 2,
+    vectorEffect: "non-scaling-stroke",
+    stroke: "currentColor",
+    "stroke-dasharray": "" + (dashed ? '1 2' : '')
+  }))));
 };

package/dist/components/Line.styles.js

@@ -1,14 +1,8 @@
 import styled from 'styled-components';
-var getDashed = function getDashed(dashed, theme) {
-  if (dashed) {
-    return "1px dashed " + theme.palette['grey-400'] + ";";
-  }
-  return "1px solid " + theme.palette['grey-300'];
-};
 export var Line = styled.div.withConfig({
   displayName: "Linestyles__Line",
   componentId: "sc-1fokvnj-0"
-})(["display:", ";vertical-align:", ";margin:", ";margin-bottom:", "px;margin-top:", "px;width:", ";height:", ";", ";", ";"], function (props) {
+})(["display:", ";vertical-align:", ";margin:", ";margin-bottom:", "px;margin-top:", "px;width:", ";height:", ";color:", ";"], function (props) {
   return props.type === 'vertical' ? 'inline-block' : 'flex';
 }, function (props) {
   return props.type === 'vertical' ? 'middle' : undefined;
@@ -19,11 +13,9 @@ export var Line = styled.div.withConfig({
 }, function (props) {
   return props.marginTop;
 }, function (props) {
-  return props.type === 'horizontal' ? '100%' : '0';
+  return props.type === 'horizontal' ? '100%' : '1px';
 }, function (props) {
-  return props.type === 'vertical' ? '0.9em' : '0';
+  return props.type === 'vertical' ? '0.9em' : '1px';
 }, function (props) {
-  return props.type === 'horizontal' && "border-bottom: " + getDashed(props.dashed, props.theme);
-}, function (props) {
-  return props.type === 'vertical' && "border-left: " + getDashed(props.dashed, props.theme);
+  return props.dashed ? props.theme.palette['grey-400'] : props.theme.palette['grey-300'];
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-divider",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Divider UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,12 +35,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-typography": "^1.0.21"
+    "@synerise/ds-typography": "^1.0.21",
+    "@synerise/ds-utils": "^1.4.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "25221abb694880c2416ceb5f7598a5c7329f3379"
+  "gitHead": "a89d4a4d780cd537376fbc58a58ed572fdad925b"
 }