@synerise/ds-panel 1.2.1 → 1.2.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panel@1.2.2...@synerise/ds-panel@1.2.3) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-panel
+
+## [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)
+
+### Bug Fixes
+
+- panel regressions ([c88aad5](https://github.com/Synerise/synerise-design/commit/c88aad5c4584a172c41c50dd8d64e5f86784de65))
+- **panel:** add lebel above ([0c9606b](https://github.com/Synerise/synerise-design/commit/0c9606bb99acb5848b7434b5b3d689fcf70f82ae))
+
 ## [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)
 
 ### Bug Fixes

package/README.md

@@ -10,6 +10,8 @@ Panel UI Component
 npm i @synerise/ds-panel
 or
 yarn add @synerise/ds-panel
+or
+pnpm add @synerise/ds-panel
 ```
 
 ## Usage
@@ -28,12 +30,17 @@ import Panel from '@synerise/ds-panel'
 
 ### PanelProps
 
-| Property   | Description                               | Type                        | Default |   |
-|------------|-------------------------------------------|-----------------------------|---------|---|
-| `radius`   | Border radius of the panel in pixels      | `number`                    | `8`     |   |
-| `p`        | Padding applied to the panel              | `string \ number`           | `8`     |   |
-| `children` | Panel content                             | `React.ReactNode`           | -       |   |
-| `ref`      | Forward ref to the underlying DOM element | `React.Ref<HTMLDivElement>` | -       |   |
+| Property          | Description                                                                                      | Type                        | Default     |
+|-------------------|--------------------------------------------------------------------------------------------------|-----------------------------|-------------|
+| `radius`          | Border radius of the panel in pixels                                                             | `number`                    | `8`         |
+| `greyBackground`  | When `true`, renders with a drop shadow instead of a border                                      | `boolean`                   | -           |
+| `label`           | Label text/node rendered above the panel via `FormFieldLabel`                                    | `React.ReactNode`           | -           |
+| `tooltip`         | Tooltip content shown next to the label                                                          | `React.ReactNode`           | -           |
+| `tooltipConfig`   | Extra configuration for the label tooltip                                                        | `TooltipProps`              | -           |
+| `children`        | Panel content                                                                                    | `React.ReactNode`           | -           |
+| `className`       | CSS class applied to the outer wrapper div                                                       | `string`                    | -           |
+| `style`           | Inline styles applied to the outer wrapper div                                                   | `React.CSSProperties`       | -           |
 
+The component uses `forwardRef` — pass a `ref` to access the outer `div` element.
 
-**Note:** Panel also accepts all standard `BoxProps` from `@rebass/grid`, including:
+**Note:** Panel also accepts all `BoxProps` from `@synerise/ds-flex-box` (via `@rebass/grid`), including:

package/dist/Panel.const.js

@@ -1,2 +1,6 @@
-export var DEFAULT_RADIUS = 8;
-export var DEFAULT_PADDING = 8;
+const DEFAULT_RADIUS = 8;
+const DEFAULT_PADDING = 8;
+export {
+  DEFAULT_PADDING,
+  DEFAULT_RADIUS
+};

package/dist/Panel.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { PanelProps } from './Panel.types';
+import { default as React } from 'react';
+import { PanelProps } from './Panel.types';
 declare const Panel: React.ForwardRefExoticComponent<Omit<PanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Panel;

package/dist/Panel.js

@@ -1,18 +1,23 @@
-var _excluded = ["children", "radius"];
-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, { forwardRef } from 'react';
-import { DEFAULT_PADDING, DEFAULT_RADIUS } from './Panel.const';
-import * as S from './Panel.styles';
-var Panel = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    _ref$radius = _ref.radius,
-    radius = _ref$radius === void 0 ? DEFAULT_RADIUS : _ref$radius,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(S.PanelWrapper, _extends({
-    ref: ref,
-    p: DEFAULT_PADDING,
-    $radius: radius
-  }, props), children);
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { FormFieldLabel } from "@synerise/ds-form-field";
+import { DEFAULT_RADIUS, DEFAULT_PADDING } from "./Panel.const.js";
+import { PanelContainer, PanelWrapper } from "./Panel.styles.js";
+const Panel = forwardRef(({
+  children,
+  radius = DEFAULT_RADIUS,
+  label,
+  tooltip,
+  tooltipConfig,
+  className,
+  style,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsxs(PanelContainer, { ref, className, style, children: [
+    label && /* @__PURE__ */ jsx(FormFieldLabel, { label, tooltip, tooltipConfig }),
+    /* @__PURE__ */ jsx(PanelWrapper, { p: DEFAULT_PADDING, $radius: radius, ...props, children })
+  ] });
 });
-export default Panel;
+export {
+  Panel as default
+};

package/dist/Panel.styles.d.ts

@@ -1,4 +1,5 @@
-export declare const PanelWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@synerise/ds-flex-box").BoxProps>, any, {
+export declare const PanelWrapper: import('styled-components').StyledComponent<import('react').FunctionComponent<import('@synerise/ds-flex-box').BoxProps>, any, {
     $radius: number;
     greyBackground?: boolean;
 }, never>;
+export declare const PanelContainer: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Panel.styles.js

@@ -1,12 +1,16 @@
-import styled from 'styled-components';
-import { Box } from '@synerise/ds-flex-box';
-export var PanelWrapper = styled(Box).withConfig({
+import styled from "styled-components";
+import { Box } from "@synerise/ds-flex-box";
+const PanelWrapper = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "Panelstyles__PanelWrapper",
   componentId: "sc-xt9txn-0"
-})(["background-color:", ";", " border-radius:", "px;"], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  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'] + ";";
-}, function (props) {
-  return props.$radius;
-});
+})(["background-color:", ";", " border-radius:", "px;"], (props) => props.theme.palette.white, (props) => props.greyBackground ? `
+         box-shadow: 0 4px 12px 0 rgba(35, 41, 54, 0.04);` : `
+         border: solid 1px ${props.theme.palette["grey-200"]};`, (props) => props.$radius);
+const PanelContainer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Panelstyles__PanelContainer",
+  componentId: "sc-xt9txn-1"
+})(["display:flex;gap:8px;flex-direction:column;"]);
+export {
+  PanelContainer,
+  PanelWrapper
+};

package/dist/Panel.types.d.ts

@@ -1,5 +1,6 @@
-import { type BoxProps } from '@synerise/ds-flex-box';
-export type PanelProps = BoxProps & {
+import { BoxProps } from '@synerise/ds-flex-box';
+import { BaseLabelProps } from '@synerise/ds-form-field';
+export type PanelProps = Omit<BoxProps, 'label'> & BaseLabelProps & {
     radius?: number;
     greyBackground?: boolean;
 };

package/dist/Panel.types.js

@@ -1 +1 @@
-export {};
+

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './Panel';
+import { default as default2 } from "./Panel.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-panel",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Panel UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "prepublish": "pnpm run build",
     "types": "tsc --noEmit",
@@ -35,11 +35,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-flex-box": "^1.1.0"
+    "@synerise/ds-flex-box": "^1.1.2",
+    "@synerise/ds-form-field": "^1.3.10"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "react": ">=16.9.0 <= 18.3.1"
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
   },
-  "gitHead": "4ffbd56e9bf6277c4507efeaf000b66b9bb09781"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }