@synerise/ds-panel 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2026-02-02)
+
+### Features
+
+- **panel:** new component ([a9d4ff8](https://github.com/Synerise/synerise-design/commit/a9d4ff8f766e2a7b6b6fe34068d7231584eb3056))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+---
+id: panel
+title: Panel
+---
+
+Panel UI Component
+
+## Installation
+```
+npm i @synerise/ds-panel
+or
+yarn add @synerise/ds-panel
+```
+
+## Usage
+```
+import Panel from '@synerise/ds-panel'
+
+<Panel />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-panel--default"></iframe>
+
+## API
+
+### 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>` | -       |   |
+
+
+**Note:** Panel also accepts all standard `BoxProps` from `@rebass/grid`, including:

package/dist/Panel.const.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_RADIUS = 8;
+export declare const DEFAULT_PADDING = 8;

package/dist/Panel.const.js

@@ -0,0 +1,2 @@
+export var DEFAULT_RADIUS = 8;
+export var DEFAULT_PADDING = 8;

package/dist/Panel.d.ts

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

package/dist/Panel.js

@@ -0,0 +1,16 @@
+var _excluded = ["children"];
+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,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(S.PanelWrapper, _extends({
+    ref: ref,
+    p: DEFAULT_PADDING,
+    radius: DEFAULT_RADIUS
+  }, props), children);
+});
+export default Panel;

package/dist/Panel.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const PanelWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@synerise/ds-flex-box").BoxProps>, any, {
+    radius: number;
+}, never>;

package/dist/Panel.styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Box } from '@synerise/ds-flex-box';
+export var PanelWrapper = styled(Box).withConfig({
+  displayName: "Panelstyles__PanelWrapper",
+  componentId: "sc-xt9txn-0"
+})(["border:solid 1px ", ";border-radius:", "px;"], function (props) {
+  return props.theme.palette['grey-200'];
+}, function (props) {
+  return props.radius;
+});

package/dist/Panel.types.d.ts

@@ -0,0 +1,4 @@
+import { type BoxProps } from '@synerise/ds-flex-box';
+export type PanelProps = BoxProps & {
+    radius?: number;
+};

package/dist/Panel.types.js

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

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Panel';
+export type { PanelProps } from './Panel.types';

package/dist/index.js

@@ -0,0 +1 @@
+export { default } from './Panel';

package/dist/modules.d.js

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

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@synerise/ds-panel",
+  "version": "1.1.0",
+  "description": "Panel UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "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": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "prepublish": "npm run build",
+    "types": "tsc --noEmit",
+    "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-flex-box": "^1.1.0"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1"
+  },
+  "gitHead": "6a3a82f8bc80e10eeb818795035e05393550e82e"
+}