playbook_ui 16.12.0 → 16.13.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 695718ce4199498d981356863cbd33f923adeef7717130aa1c2117efd33df8ce
-  data.tar.gz: aadcf260a0280c8fb927e249297bfd9b797862212556ad6a7fe3a4c2a0b1a4ab
+  metadata.gz: f88b832ff7611e88af8ad226ab93b3a482b433e054224ebc50e160b0408b4507
+  data.tar.gz: 3823106c98aee4b2f75df5a55b323e4f0053f3601bbe89c26de6a9b8805abee3
 SHA512:
-  metadata.gz: b319aa412f4f3b6d50efe91040b8fcbd959541ff974ad34c893cfaed93a7e433b81ce017f9c4c9058ebeb63db50589ebbe028445cd53c04fb98736b188257a96
-  data.tar.gz: bc670f02e8ddd0c4bc10045e84e5c499ace1c3eba9b56e85ccf454c75e1107eb98385bf133e36b2b8984f53ffbbb40a9b73b2684e2f20bfb5fbc44a1837fdf6a
+  metadata.gz: 61f636f888ecc07287dbbd756660c9ee48c699ff058359360ff943fca29b84ece948acb08fccbd460f8592958358eb191480ce1539a1f979a37094f52ddd7252
+  data.tar.gz: 2ecfc8e99e535d7eba067ad09bcb30cdac8c3be243e4ee8f3a94be3a00bec5d042f3d256c31894da51e70c3a3359a70c317b48dd77e90f5ca3ce2ac40c69381f

data/app/pb_kits/playbook/_playbook.scss

@@ -120,6 +120,7 @@
 @import 'utilities/line_height';
 @import 'utilities/display';
 @import 'utilities/flexbox';
+@import 'utilities/grid';
 @import 'utilities/focus';
 @import 'utilities/border_radius';
 @import 'utilities/hover';

data/app/pb_kits/playbook/pb_map/docs/_playground.json

@@ -116,6 +116,13 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "maplibre-gl"
+    ],
+    "optional": true,
+    "note": "Map wraps MapLibre. The host app must already have maplibre-gl (and any required CSS) installed. Agents must not install packages — tell the user if they are missing."
+  },
   "structureModes": {
     "default": "maplibre",
     "modes": {

data/app/pb_kits/playbook/pb_map/docs/_playground.overrides.json

@@ -1,4 +1,9 @@
 {
+  "externalDependencies": {
+    "packages": ["maplibre-gl"],
+    "optional": true,
+    "note": "Map wraps MapLibre. The host app must already have maplibre-gl (and any required CSS) installed. Agents must not install packages — tell the user if they are missing."
+  },
   "structureModes": {
     "default": "maplibre",
     "modes": {

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_playground.json

@@ -389,6 +389,15 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "highcharts",
+      "highcharts-react-official"
+    ],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "externalImports": [
     "import { PbBarGraph } from 'playbook-ui/charts'"
   ]

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_playground.overrides.json

@@ -1,4 +1,10 @@
 {
+  "externalDependencies": {
+    "packages": ["highcharts", "highcharts-react-official"],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "template": "<PbBarGraph{{props}} />",
   "externalImports": [
     "import { PbBarGraph } from 'playbook-ui/charts'"

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_playground.json

@@ -226,6 +226,15 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "highcharts",
+      "highcharts-react-official"
+    ],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "externalImports": [
     "import { PbCircleChart } from 'playbook-ui/charts'"
   ]

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_playground.overrides.json

@@ -1,4 +1,10 @@
 {
+  "externalDependencies": {
+    "packages": ["highcharts", "highcharts-react-official"],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "template": "<PbCircleChart{{props}} />",
   "externalImports": [
     "import { PbCircleChart } from 'playbook-ui/charts'"

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_playground.json

@@ -160,6 +160,15 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "highcharts",
+      "highcharts-react-official"
+    ],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "externalImports": [
     "import { PbGaugeChart } from 'playbook-ui/charts'"
   ]

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_playground.overrides.json

@@ -1,4 +1,10 @@
 {
+  "externalDependencies": {
+    "packages": ["highcharts", "highcharts-react-official"],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "template": "<PbGaugeChart{{props}} />",
   "externalImports": [
     "import { PbGaugeChart } from 'playbook-ui/charts'"

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_playground.json

@@ -403,6 +403,15 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "highcharts",
+      "highcharts-react-official"
+    ],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "externalImports": [
     "import { PbLineGraph } from 'playbook-ui/charts'"
   ]

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_playground.overrides.json

@@ -1,4 +1,10 @@
 {
+  "externalDependencies": {
+    "packages": ["highcharts", "highcharts-react-official"],
+    "optional": true,
+    "note": "This kit wraps Highcharts and does not ship it. The host app must already have these packages installed before using the kit. Agents must not install packages — tell the user if they are missing.",
+    "docs": "https://api.highcharts.com/highcharts/"
+  },
   "template": "<PbLineGraph{{props}} />",
   "externalImports": [
     "import { PbLineGraph } from 'playbook-ui/charts'"

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_playground.json

@@ -127,6 +127,17 @@
       "type": "info"
     }
   },
+  "externalDependencies": {
+    "packages": [
+      "react-trix",
+      "trix",
+      "@tiptap/react",
+      "@tiptap/starter-kit",
+      "@tiptap/extension-link"
+    ],
+    "optional": true,
+    "note": "Default React editor uses Trix (pass TrixEditor from react-trix). Advanced editor uses TipTap. The host app must already have the needed packages installed. Agents must not install packages — tell the user if they are missing. Rails advanced TipTap may load via the kit’s esm.sh script."
+  },
   "structureModes": {
     "default": "advanced",
     "modes": {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_playground.overrides.json

@@ -1,4 +1,15 @@
 {
+  "externalDependencies": {
+    "packages": [
+      "react-trix",
+      "trix",
+      "@tiptap/react",
+      "@tiptap/starter-kit",
+      "@tiptap/extension-link"
+    ],
+    "optional": true,
+    "note": "Default React editor uses Trix (pass TrixEditor from react-trix). Advanced editor uses TipTap. The host app must already have the needed packages installed. Agents must not install packages — tell the user if they are missing. Rails advanced TipTap may load via the kit’s esm.sh script."
+  },
   "structureModes": {
     "default": "advanced",
     "modes": {

data/app/pb_kits/playbook/utilities/_grid.scss

@@ -0,0 +1,2 @@
+@import './grid_global_props/justify_items';
+@import './grid_global_props/grid_auto_flow';

data/app/pb_kits/playbook/utilities/global-props.schema.json

@@ -395,6 +395,103 @@
       "description": "Justify self.",
       "example": "justifySelf=\"start\" or justifySelf={{ default: \"start\", md: \"end\" }}"
     },
+    "justifyItems": {
+      "type": "enum | responsive",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "start",
+        "end",
+        "center",
+        "stretch"
+      ],
+      "responsive": true,
+      "description": "Justify items.",
+      "example": "justifyItems=\"start\" or justifyItems={{ default: \"start\", md: \"end\" }}"
+    },
+    "gridTemplateColumns": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "description": "Grid template columns."
+    },
+    "gridTemplateRows": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "description": "Grid template rows."
+    },
+    "gridTemplateAreas": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "description": "Grid template areas."
+    },
+    "gridColumn": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "description": "Grid column."
+    },
+    "gridRow": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "description": "Grid row."
+    },
+    "gridArea": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "description": "Grid area."
+    },
+    "gridAutoColumns": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "description": "Grid auto columns."
+    },
+    "gridAutoRows": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "description": "Grid auto rows."
+    },
+    "gridAutoFlow": {
+      "type": "enum | responsive",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "row",
+        "column",
+        "dense",
+        "rowDense",
+        "columnDense"
+      ],
+      "responsive": true,
+      "description": "Grid auto flow.",
+      "example": "gridAutoFlow=\"row\" or gridAutoFlow={{ default: \"row\", md: \"column\" }}"
+    },
     "lineHeight": {
       "type": "enum",
       "platforms": [

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -139,6 +139,46 @@ type RowGap = {
   rowGap?: string,
 }
 
+type GridTemplateColumns = {
+  gridTemplateColumns?: string,
+}
+
+type GridTemplateRows = {
+  gridTemplateRows?: string,
+}
+
+type GridTemplateAreas = {
+  gridTemplateAreas?: string,
+}
+
+type GridColumn = {
+  gridColumn?: string,
+}
+
+type GridRow = {
+  gridRow?: string,
+}
+
+type GridArea = {
+  gridArea?: string,
+}
+
+type GridAutoColumns = {
+  gridAutoColumns?: string,
+}
+
+type GridAutoRows = {
+  gridAutoRows?: string,
+}
+
+type GridAutoFlow = {
+  gridAutoFlow?: "row" | "column" | "dense" | "rowDense" | "columnDense"
+}
+
+type JustifyItems = {
+  justifyItems?: Alignment | "stretch"
+}
+
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -226,7 +266,9 @@ type MinHeight = {
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderProp & BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
-  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
+  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf & JustifyItems &
+  GridTemplateColumns & GridTemplateRows & GridTemplateAreas & GridColumn & GridRow & GridArea &
+  GridAutoColumns & GridAutoRows & GridAutoFlow &
   LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & ColumnGap & RowGap & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
@@ -644,6 +686,20 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       return justifySelf ? `justify_self_${justifySelf}` : ''
     }
   },
+  justifyItemsProps: ({ justifyItems }: JustifyItems) => {
+    if (typeof justifyItems === 'object') {
+      return getResponsivePropClasses(justifyItems, 'justify_items')
+    } else {
+      return justifyItems ? `justify_items_${camelToSnakeCase(justifyItems)}` : ''
+    }
+  },
+  gridAutoFlowProps: ({ gridAutoFlow }: GridAutoFlow) => {
+    if (typeof gridAutoFlow === 'object') {
+      return getResponsivePropClasses(gridAutoFlow, 'grid_auto_flow')
+    } else {
+      return gridAutoFlow ? `grid_auto_flow_${camelToSnakeCase(gridAutoFlow)}` : ''
+    }
+  },
   orderProps: ({ order }: Order) => {
     if (typeof order === 'object') {
       return getResponsivePropClasses(order, 'flex_order')
@@ -696,6 +752,38 @@ const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[
   minHeightProps: ({ minHeight }: MinHeight) => {
     return minHeight ? { minHeight } : {};
   },
+
+  gridTemplateColumnsProps: ({ gridTemplateColumns }: GridTemplateColumns) => {
+    return gridTemplateColumns ? { gridTemplateColumns } : {};
+  },
+
+  gridTemplateRowsProps: ({ gridTemplateRows }: GridTemplateRows) => {
+    return gridTemplateRows ? { gridTemplateRows } : {};
+  },
+
+  gridTemplateAreasProps: ({ gridTemplateAreas }: GridTemplateAreas) => {
+    return gridTemplateAreas ? { gridTemplateAreas } : {};
+  },
+
+  gridColumnProps: ({ gridColumn }: GridColumn) => {
+    return gridColumn ? { gridColumn } : {};
+  },
+
+  gridRowProps: ({ gridRow }: GridRow) => {
+    return gridRow ? { gridRow } : {};
+  },
+
+  gridAreaProps: ({ gridArea }: GridArea) => {
+    return gridArea ? { gridArea } : {};
+  },
+
+  gridAutoColumnsProps: ({ gridAutoColumns }: GridAutoColumns) => {
+    return gridAutoColumns ? { gridAutoColumns } : {};
+  },
+
+  gridAutoRowsProps: ({ gridAutoRows }: GridAutoRows) => {
+    return gridAutoRows ? { gridAutoRows } : {};
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>

data/app/pb_kits/playbook/utilities/grid_global_props/_grid_auto_flow.scss

@@ -0,0 +1,9 @@
+$grid_auto_flow_values: (
+  row: row,
+  column: column,
+  dense: dense,
+  row_dense: row dense,
+  column_dense: column dense,
+);
+
+@include global_props_responsive_css($grid_auto_flow_values, 'grid_auto_flow', 'grid-auto-flow');

data/app/pb_kits/playbook/utilities/grid_global_props/_justify_items.scss

@@ -0,0 +1,8 @@
+$justify_items_values: (
+  start: start,
+  center: center,
+  end: end,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($justify_items_values, 'justify_items', 'justify-items');

data/app/pb_kits/playbook/utilities/test/globalProps/grid.test.js

@@ -0,0 +1,72 @@
+import { render, screen } from '../../test-utils'
+import React from 'react'
+import Card from '../../../pb_card/_card'
+
+test('Global Props: gridTemplateColumns applies inline style on Card', () => {
+  render(
+    <Card
+        data={{ testid: 'grid-template-columns' }}
+        display="grid"
+        gridTemplateColumns="repeat(3, 1fr)"
+    >
+      Test
+    </Card>
+  )
+  expect(screen.getByTestId('grid-template-columns')).toHaveStyle({
+    gridTemplateColumns: 'repeat(3, 1fr)',
+  })
+})
+
+test('Global Props: gridTemplateRows applies inline style on Card', () => {
+  render(
+    <Card
+        data={{ testid: 'grid-template-rows' }}
+        display="grid"
+        gridTemplateRows="59px 341px"
+    >
+      Test
+    </Card>
+  )
+  expect(screen.getByTestId('grid-template-rows')).toHaveStyle({
+    gridTemplateRows: '59px 341px',
+  })
+})
+
+test('Global Props: grid placement props apply inline styles on Card', () => {
+  render(
+    <Card
+        data={{ testid: 'grid-placement' }}
+        gridArea="header"
+        gridColumn="1 / 3"
+        gridRow="2"
+    >
+      Test
+    </Card>
+  )
+  const kit = screen.getByTestId('grid-placement')
+  expect(kit).toHaveStyle({
+    gridColumn: '1 / 3',
+    gridRow: '2',
+    gridArea: 'header',
+  })
+})
+
+test('Global Props: grid auto track sizes apply inline styles on Card', () => {
+  render(
+    <Card
+        data={{ testid: 'grid-auto-tracks' }}
+        display="grid"
+        gridAutoColumns="minmax(100px, 1fr)"
+        gridAutoRows="auto"
+        gridTemplateAreas="'header header' 'sidebar main'"
+    >
+      Test
+    </Card>
+  )
+  const kit = screen.getByTestId('grid-auto-tracks')
+  expect(kit).toHaveStyle({
+    gridAutoColumns: 'minmax(100px, 1fr)',
+    gridAutoRows: 'auto',
+    gridTemplateAreas: "'header header' 'sidebar main'",
+  })
+})

data/app/pb_kits/playbook/utilities/test/globalProps/gridAutoFlow.test.js

@@ -0,0 +1,41 @@
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { camelToSnakeCase } from '../../../utilities/text'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+const kits = [Body, Button, Card, Title, Flex, Link, Badge]
+
+testGlobalProp(
+  'gridAutoFlow',
+  ['row', 'column', 'dense', 'rowDense', 'columnDense'],
+  (v) => `grid_auto_flow_${camelToSnakeCase(v)}`,
+  (size, v) => `grid_auto_flow_${size}_${camelToSnakeCase(v)}`,
+  kits
+)
+
+testGlobalPropResponsiveWithDefault(
+  'gridAutoFlow',
+  { default: 'row', xs: 'column', sm: 'dense', md: 'rowDense' },
+  (v) => `grid_auto_flow_${camelToSnakeCase(v)}`,
+  (size, v) => `grid_auto_flow_${size}_${camelToSnakeCase(v)}`
+)
+
+testGlobalPropAbsence(
+  'gridAutoFlow',
+  ['grid_auto_flow_row', 'grid_auto_flow_column', 'grid_auto_flow_dense', 'grid_auto_flow_row_dense', 'grid_auto_flow_column_dense'],
+  undefined,
+  { skipNull: true }
+)
+
+testGlobalPropInvalidValues(
+  'gridAutoFlow',
+  ['invalid', 'bad_value', 'not_a_flow_value', 'special-chars!@#'],
+  ['grid_auto_flow_invalid', 'grid_auto_flow_bad_value', 'grid_auto_flow_not_a_flow_value', 'grid_auto_flow_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/justifyItems.test.js

@@ -0,0 +1,41 @@
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { camelToSnakeCase } from '../../../utilities/text'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+const kits = [Body, Button, Card, Title, Flex, Link, Badge]
+
+testGlobalProp(
+  'justifyItems',
+  ['start', 'center', 'end', 'stretch'],
+  (v) => `justify_items_${camelToSnakeCase(v)}`,
+  (size, v) => `justify_items_${size}_${camelToSnakeCase(v)}`,
+  kits
+)
+
+testGlobalPropResponsiveWithDefault(
+  'justifyItems',
+  { default: 'start', xs: 'center', sm: 'end', md: 'stretch' },
+  (v) => `justify_items_${camelToSnakeCase(v)}`,
+  (size, v) => `justify_items_${size}_${camelToSnakeCase(v)}`
+)
+
+testGlobalPropAbsence(
+  'justifyItems',
+  ['justify_items_start', 'justify_items_center', 'justify_items_end', 'justify_items_stretch'],
+  undefined,
+  { skipNull: true }
+)
+
+testGlobalPropInvalidValues(
+  'justifyItems',
+  ['invalid', 'bad_value', 'not_a_justify_value', 'special-chars!@#'],
+  ['justify_items_invalid', 'justify_items_bad_value', 'justify_items_not_a_justify_value', 'justify_items_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/dist/chunks/{_pb_line_graph-xWHipZZB.js → _pb_line_graph-BL9pXDkX.js}

@@ -1 +1 @@
-import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-Bf9KbYid.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-DYWDQgCv.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};
+import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-BQqb1ZGy.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-CYrXqTdQ.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};