@synerise/ds-panel 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +14 -7
  3. package/dist/Panel.js +16 -3
  4. package/dist/Panel.styles.d.ts +1 -0
  5. package/dist/Panel.styles.js +5 -1
  6. package/dist/Panel.types.d.ts +2 -1
  7. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,13 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.2.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panel@1.2.1...@synerise/ds-panel@1.2.2) (2026-03-20)
7
+
8
+ ### Bug Fixes
9
+
10
+ - panel regressions ([c88aad5](https://github.com/Synerise/synerise-design/commit/c88aad5c4584a172c41c50dd8d64e5f86784de65))
11
+ - **panel:** add lebel above ([0c9606b](https://github.com/Synerise/synerise-design/commit/0c9606bb99acb5848b7434b5b3d689fcf70f82ae))
12
+
6
13
  ## [1.2.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panel@1.2.0...@synerise/ds-panel@1.2.1) (2026-02-26)
7
14
 
8
15
  ### Bug Fixes
package/README.md CHANGED
@@ -10,6 +10,8 @@ Panel UI Component
10
10
  npm i @synerise/ds-panel
11
11
  or
12
12
  yarn add @synerise/ds-panel
13
+ or
14
+ pnpm add @synerise/ds-panel
13
15
  ```
14
16
 
15
17
  ## Usage
@@ -28,12 +30,17 @@ import Panel from '@synerise/ds-panel'
28
30
 
29
31
  ### PanelProps
30
32
 
31
- | Property | Description | Type | Default | |
32
- |------------|-------------------------------------------|-----------------------------|---------|---|
33
- | `radius` | Border radius of the panel in pixels | `number` | `8` | |
34
- | `p` | Padding applied to the panel | `string \ number` | `8` | |
35
- | `children` | Panel content | `React.ReactNode` | - | |
36
- | `ref` | Forward ref to the underlying DOM element | `React.Ref<HTMLDivElement>` | - | |
33
+ | Property | Description | Type | Default |
34
+ |-------------------|--------------------------------------------------------------------------------------------------|-----------------------------|-------------|
35
+ | `radius` | Border radius of the panel in pixels | `number` | `8` |
36
+ | `greyBackground` | When `true`, renders with a drop shadow instead of a border | `boolean` | - |
37
+ | `label` | Label text/node rendered above the panel via `FormFieldLabel` | `React.ReactNode` | - |
38
+ | `tooltip` | Tooltip content shown next to the label | `React.ReactNode` | - |
39
+ | `tooltipConfig` | Extra configuration for the label tooltip | `TooltipProps` | - |
40
+ | `children` | Panel content | `React.ReactNode` | - |
41
+ | `className` | CSS class applied to the outer wrapper div | `string` | - |
42
+ | `style` | Inline styles applied to the outer wrapper div | `React.CSSProperties` | - |
37
43
 
44
+ The component uses `forwardRef` — pass a `ref` to access the outer `div` element.
38
45
 
39
- **Note:** Panel also accepts all standard `BoxProps` from `@rebass/grid`, including:
46
+ **Note:** Panel also accepts all `BoxProps` from `@synerise/ds-flex-box` (via `@rebass/grid`), including:
package/dist/Panel.js CHANGED
@@ -1,18 +1,31 @@
1
- var _excluded = ["children", "radius"];
1
+ var _excluded = ["children", "radius", "label", "tooltip", "tooltipConfig", "className", "style"];
2
2
  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); }
3
3
  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; }
4
4
  import React, { forwardRef } from 'react';
5
+ import { FormFieldLabel } from '@synerise/ds-form-field';
5
6
  import { DEFAULT_PADDING, DEFAULT_RADIUS } from './Panel.const';
6
7
  import * as S from './Panel.styles';
7
8
  var Panel = /*#__PURE__*/forwardRef(function (_ref, ref) {
8
9
  var children = _ref.children,
9
10
  _ref$radius = _ref.radius,
10
11
  radius = _ref$radius === void 0 ? DEFAULT_RADIUS : _ref$radius,
12
+ label = _ref.label,
13
+ tooltip = _ref.tooltip,
14
+ tooltipConfig = _ref.tooltipConfig,
15
+ className = _ref.className,
16
+ style = _ref.style,
11
17
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
12
- return /*#__PURE__*/React.createElement(S.PanelWrapper, _extends({
18
+ return /*#__PURE__*/React.createElement(S.PanelContainer, {
13
19
  ref: ref,
20
+ className: className,
21
+ style: style
22
+ }, label && /*#__PURE__*/React.createElement(FormFieldLabel, {
23
+ label: label,
24
+ tooltip: tooltip,
25
+ tooltipConfig: tooltipConfig
26
+ }), /*#__PURE__*/React.createElement(S.PanelWrapper, _extends({
14
27
  p: DEFAULT_PADDING,
15
28
  $radius: radius
16
- }, props), children);
29
+ }, props), children));
17
30
  });
18
31
  export default Panel;
package/dist/Panel.styles.d.ts CHANGED
@@ -2,3 +2,4 @@ export declare const PanelWrapper: import("styled-components").StyledComponent<i
2
2
  $radius: number;
3
3
  greyBackground?: boolean;
4
4
  }, never>;
5
+ export declare const PanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/Panel.styles.js CHANGED
@@ -9,4 +9,8 @@ export var PanelWrapper = styled(Box).withConfig({
9
9
  return props.greyBackground ? "\n box-shadow: 0 4px 12px 0 rgba(35, 41, 54, 0.04);" : "\n border: solid 1px " + props.theme.palette['grey-200'] + ";";
10
10
  }, function (props) {
11
11
  return props.$radius;
12
- });
12
+ });
13
+ export var PanelContainer = styled.div.withConfig({
14
+ displayName: "Panelstyles__PanelContainer",
15
+ componentId: "sc-xt9txn-1"
16
+ })(["display:flex;gap:8px;flex-direction:column;"]);
package/dist/Panel.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { type BoxProps } from '@synerise/ds-flex-box';
2
- export type PanelProps = BoxProps & {
2
+ import { type BaseLabelProps } from '@synerise/ds-form-field';
3
+ export type PanelProps = Omit<BoxProps, 'label'> & BaseLabelProps & {
3
4
  radius?: number;
4
5
  greyBackground?: boolean;
5
6
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-panel",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "description": "Panel UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,11 +35,12 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-flex-box": "^1.1.0"
38
+ "@synerise/ds-flex-box": "^1.1.1",
39
+ "@synerise/ds-form-field": "^1.3.9"
39
40
  },
40
41
  "peerDependencies": {
41
42
  "@synerise/ds-core": "*",
42
43
  "react": ">=16.9.0 <= 18.3.1"
43
44
  },
44
- "gitHead": "4ffbd56e9bf6277c4507efeaf000b66b9bb09781"
45
+ "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
45
46
  }