@persona/design-system 0.10.8 → 0.10.9

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 (125) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/{Badge-8YzapjWf.mjs → Badge-BCdsVKuj.mjs} +2 -2
  3. package/dist/{Badge-8YzapjWf.mjs.map → Badge-BCdsVKuj.mjs.map} +1 -1
  4. package/dist/{Breadcrumbs-Dft2TR4v.mjs → Breadcrumbs-CMf3Uvow.mjs} +4 -4
  5. package/dist/{Breadcrumbs-Dft2TR4v.mjs.map → Breadcrumbs-CMf3Uvow.mjs.map} +1 -1
  6. package/dist/Card2.d.mts +2 -2
  7. package/dist/{CardV2-BRJbRSts.mjs → CardV2-ACI5RIzF.mjs} +5 -5
  8. package/dist/{CardV2-BRJbRSts.mjs.map → CardV2-ACI5RIzF.mjs.map} +1 -1
  9. package/dist/{Combobox-DQxaOCLA.mjs → Combobox-Gb_j1dg6.mjs} +5 -5
  10. package/dist/{Combobox-DQxaOCLA.mjs.map → Combobox-Gb_j1dg6.mjs.map} +1 -1
  11. package/dist/{CompactBar-D67CdcIo.d.mts → CompactBar-BLZZWtIE.d.mts} +2 -2
  12. package/dist/CompactBar.d.mts +1 -1
  13. package/dist/{ControlBar-34th2yt4.d.mts → ControlBar-B3Jn8G0k.d.mts} +5 -4
  14. package/dist/ControlBar.d.mts +1 -1
  15. package/dist/{DataTable-BZtzdtVs.d.mts → DataTable-Bf1WDY0z.d.mts} +2 -2
  16. package/dist/{DataTable-BvA2H9D9.mjs → DataTable-CIZJ1vO8.mjs} +10 -10
  17. package/dist/{DataTable-BvA2H9D9.mjs.map → DataTable-CIZJ1vO8.mjs.map} +1 -1
  18. package/dist/DataTable.d.mts +1 -1
  19. package/dist/{DatePicker-D-_ibUd1.mjs → DatePicker-C9redLBr.mjs} +4 -4
  20. package/dist/{DatePicker-D-_ibUd1.mjs.map → DatePicker-C9redLBr.mjs.map} +1 -1
  21. package/dist/{DropdownButton-BiFRlSVD.mjs → DropdownButton-DpLG-cIj.mjs} +3 -3
  22. package/dist/{DropdownButton-BiFRlSVD.mjs.map → DropdownButton-DpLG-cIj.mjs.map} +1 -1
  23. package/dist/{DropdownMenu-Q8S-9rXm.mjs → DropdownMenu-c8XK2Lr4.mjs} +2 -2
  24. package/dist/{DropdownMenu-Q8S-9rXm.mjs.map → DropdownMenu-c8XK2Lr4.mjs.map} +1 -1
  25. package/dist/{FloatingToolbar-Df90f7Dm.mjs → FloatingToolbar-DLRaE0o7.mjs} +3 -3
  26. package/dist/{FloatingToolbar-Df90f7Dm.mjs.map → FloatingToolbar-DLRaE0o7.mjs.map} +1 -1
  27. package/dist/{FormField-BStxmlZT.mjs → FormField-Cf1VMvoa.mjs} +7 -7
  28. package/dist/{FormField-BStxmlZT.mjs.map → FormField-Cf1VMvoa.mjs.map} +1 -1
  29. package/dist/{HoverCopyableField-CW7Jxmni.mjs → HoverCopyableField-XHC_n9tp.mjs} +2 -2
  30. package/dist/{HoverCopyableField-CW7Jxmni.mjs.map → HoverCopyableField-XHC_n9tp.mjs.map} +1 -1
  31. package/dist/{IconButton-DftINsp7.mjs → IconButton-DxHB2g80.mjs} +2 -2
  32. package/dist/{IconButton-DftINsp7.mjs.map → IconButton-DxHB2g80.mjs.map} +1 -1
  33. package/dist/IndexTableLayout.d.mts +3 -3
  34. package/dist/{Input-DtO3qMnE.mjs → Input-RHXujO9u.mjs} +2 -2
  35. package/dist/{Input-DtO3qMnE.mjs.map → Input-RHXujO9u.mjs.map} +1 -1
  36. package/dist/{Link-DKYmdL9t.mjs → Link-D_kCyLYX.mjs} +2 -2
  37. package/dist/{Link-DKYmdL9t.mjs.map → Link-D_kCyLYX.mjs.map} +1 -1
  38. package/dist/{ListBox-CDG0EAPg.mjs → ListBox-BZp6exb8.mjs} +6 -6
  39. package/dist/{ListBox-CDG0EAPg.mjs.map → ListBox-BZp6exb8.mjs.map} +1 -1
  40. package/dist/{Menu-EIT_MwK6.mjs → Menu-BVn1jh46.mjs} +2 -2
  41. package/dist/{Menu-EIT_MwK6.mjs.map → Menu-BVn1jh46.mjs.map} +1 -1
  42. package/dist/{Modal-BGlRX63w.mjs → Modal-De5_bPJ_.mjs} +4 -4
  43. package/dist/{Modal-BGlRX63w.mjs.map → Modal-De5_bPJ_.mjs.map} +1 -1
  44. package/dist/PageHeader-7_Hf6rHl.mjs +81 -0
  45. package/dist/PageHeader-7_Hf6rHl.mjs.map +1 -0
  46. package/dist/{PageHeader-DRatgscC.d.mts → PageHeader-UPiqJpIF.d.mts} +11 -3
  47. package/dist/PageHeader.d.mts +1 -1
  48. package/dist/{Pagination-C8hPOu0l.mjs → Pagination-DMH2IaV0.mjs} +5 -5
  49. package/dist/{Pagination-C8hPOu0l.mjs.map → Pagination-DMH2IaV0.mjs.map} +1 -1
  50. package/dist/{Pii-Bvh_kfGN.mjs → Pii-24D_nSRQ.mjs} +2 -2
  51. package/dist/{Pii-Bvh_kfGN.mjs.map → Pii-24D_nSRQ.mjs.map} +1 -1
  52. package/dist/{Select-DkUMz4LG.mjs → Select-DOlw_LPR.mjs} +4 -4
  53. package/dist/{Select-DkUMz4LG.mjs.map → Select-DOlw_LPR.mjs.map} +1 -1
  54. package/dist/{StatusIndicator-Zf75KK3O.mjs → StatusIndicator-CzRaEFSz.mjs} +2 -2
  55. package/dist/{StatusIndicator-Zf75KK3O.mjs.map → StatusIndicator-CzRaEFSz.mjs.map} +1 -1
  56. package/dist/{Sticker-Bi_fezCO.mjs → Sticker-C1_6I08u.mjs} +3 -3
  57. package/dist/{Sticker-Bi_fezCO.mjs.map → Sticker-C1_6I08u.mjs.map} +1 -1
  58. package/dist/{TabBar-DpXYsWgS.mjs → TabBar-BCFO38E0.mjs} +3 -3
  59. package/dist/{TabBar-DpXYsWgS.mjs.map → TabBar-BCFO38E0.mjs.map} +1 -1
  60. package/dist/{TableBox-BfSF36Gy.mjs → TableBox-DNQsgQ8x.mjs} +4 -4
  61. package/dist/{TableBox-BfSF36Gy.mjs.map → TableBox-DNQsgQ8x.mjs.map} +1 -1
  62. package/dist/{TableControls-BZ8RrYOc.mjs → TableControls-BrP_BqnF.mjs} +14 -14
  63. package/dist/TableControls-BrP_BqnF.mjs.map +1 -0
  64. package/dist/{TableControls-DT2YpFK8.d.mts → TableControls-ODHrCDJM.d.mts} +2 -2
  65. package/dist/TableControls.d.mts +1 -1
  66. package/dist/{TechnicalSticker-B_JlBkXZ.mjs → TechnicalSticker-Cq5jzYKQ.mjs} +2 -2
  67. package/dist/{TechnicalSticker-B_JlBkXZ.mjs.map → TechnicalSticker-Cq5jzYKQ.mjs.map} +1 -1
  68. package/dist/components/Accordion/index.mjs +1 -1
  69. package/dist/components/Attribute/index.mjs +2 -2
  70. package/dist/components/Badge/index.mjs +1 -1
  71. package/dist/components/Banner/index.mjs +1 -1
  72. package/dist/components/BottomPanel/index.mjs +4 -4
  73. package/dist/components/Breadcrumbs/index.mjs +1 -1
  74. package/dist/components/Button/index.mjs +1 -1
  75. package/dist/components/ButtonGroup/index.mjs +1 -1
  76. package/dist/components/CardV2/index.mjs +1 -1
  77. package/dist/components/CodeHighlight/index.mjs +1 -1
  78. package/dist/components/Combobox/index.mjs +1 -1
  79. package/dist/components/DataTable/TableControls/index.d.mts +3 -3
  80. package/dist/components/DataTable/TableControls/index.mjs +1 -1
  81. package/dist/components/DataTable/index.d.mts +1 -1
  82. package/dist/components/DataTable/index.mjs +1 -1
  83. package/dist/components/DatePicker/index.mjs +1 -1
  84. package/dist/components/DropdownButton/index.mjs +1 -1
  85. package/dist/components/DropdownMenu/index.mjs +1 -1
  86. package/dist/components/FloatingPanel/index.mjs +2 -2
  87. package/dist/components/FloatingToolbar/index.mjs +1 -1
  88. package/dist/components/FormField/index.mjs +1 -1
  89. package/dist/components/HoverCopyableField/index.mjs +1 -1
  90. package/dist/components/ImageTile/index.mjs +2 -2
  91. package/dist/components/Input/index.mjs +1 -1
  92. package/dist/components/Link/index.mjs +1 -1
  93. package/dist/components/ListBox/index.mjs +1 -1
  94. package/dist/components/MaskedInput/index.mjs +1 -1
  95. package/dist/components/Menu/index.mjs +1 -1
  96. package/dist/components/Modal/index.mjs +1 -1
  97. package/dist/components/PageHeader/index.d.mts +1 -1
  98. package/dist/components/PageHeader/index.mjs +1 -1
  99. package/dist/components/Pagination/index.mjs +1 -1
  100. package/dist/components/Pii/index.mjs +1 -1
  101. package/dist/components/RichTextEditor/index.mjs +4 -4
  102. package/dist/components/RightPanel/index.mjs +1 -1
  103. package/dist/components/Select/index.mjs +1 -1
  104. package/dist/components/SmartTextInput/index.mjs +2 -2
  105. package/dist/components/StatusIndicator/index.mjs +1 -1
  106. package/dist/components/Sticker/index.mjs +1 -1
  107. package/dist/components/TabBar/index.mjs +1 -1
  108. package/dist/components/TableBox/index.mjs +1 -1
  109. package/dist/components/TechnicalSticker/index.mjs +1 -1
  110. package/dist/components/Tile/index.mjs +1 -1
  111. package/dist/components/Toast/index.mjs +1 -1
  112. package/dist/components/VersionHistory/index.mjs +4 -4
  113. package/dist/lib/GlobalStyles.d.mts +19 -2
  114. package/dist/lib/GlobalStyles.mjs +50 -1
  115. package/dist/lib/GlobalStyles.mjs.map +1 -1
  116. package/dist/patterns/CardGrouping/index.mjs +4 -4
  117. package/dist/patterns/IndexTableLayout/index.mjs +2 -2
  118. package/dist/patterns/LayoutLoadingShimmer/index.mjs +2 -2
  119. package/dist/patterns/WizardModal/index.mjs +2 -2
  120. package/dist/theme.mjs +1 -1
  121. package/llms.txt +1 -1
  122. package/package.json +1 -1
  123. package/dist/PageHeader-DEKTopzU.mjs +0 -75
  124. package/dist/PageHeader-DEKTopzU.mjs.map +0 -1
  125. package/dist/TableControls-BZ8RrYOc.mjs.map +0 -1
@@ -1,6 +1,13 @@
1
1
  import { n as createGlobalStyle, r as css } from "../styledComponentsInterop-Cs5CCPRy.mjs";
2
+ import { semanticOnly } from "./semanticColor.mjs";
3
+ import { semanticLight } from "../variables/semantic.mjs";
2
4
  import { Color, Typography } from "@persona/design-tokens";
3
5
  //#region src/lib/GlobalStyles.tsx
6
+ /**
7
+ * Theme-independent base sheet. It must stay static (no theme interpolations): consumers serialize
8
+ * it outside React (`globalStylesRaw.join('')`, e.g. for themeless iframes), so a function here
9
+ * would stringify into the CSS.
10
+ */
4
11
  const globalStylesRaw = css`
5
12
  body {
6
13
  height: 100%;
@@ -42,10 +49,52 @@ const globalStylesRaw = css`
42
49
  }
43
50
  }
44
51
  `;
52
+ /**
53
+ * Re-points the page chrome (canvas, text, links) at the theme's semantic palette, so a dark
54
+ * `PDSProvider colorMode` paints a dark page instead of the static light `globalStylesRaw` colours.
55
+ * Emits nothing under a theme without the semantic namespace (no `colorMode`, Relay), so those keep
56
+ * exactly the `globalStylesRaw` output. Print always uses the light palette.
57
+ */
58
+ const semanticPageChromeRaw = css`
59
+ ${semanticOnly((tokens) => css`
60
+ html,
61
+ body {
62
+ background: ${tokens.SurfacePage};
63
+ }
64
+
65
+ body {
66
+ color: ${tokens.FgPrimary};
67
+ }
68
+
69
+ a {
70
+ color: ${tokens.FgAccent};
71
+
72
+ &:focus-visible {
73
+ outline-color: ${tokens.BorderFocus};
74
+ }
75
+ }
76
+
77
+ @media print {
78
+ html,
79
+ body {
80
+ background: ${semanticLight.SurfacePage};
81
+ }
82
+
83
+ body {
84
+ color: ${semanticLight.FgPrimary};
85
+ }
86
+
87
+ a {
88
+ color: ${semanticLight.FgAccent};
89
+ }
90
+ }
91
+ `)}
92
+ `;
45
93
  var GlobalStyles_default = createGlobalStyle`
46
94
  ${globalStylesRaw}
95
+ ${semanticPageChromeRaw}
47
96
  `;
48
97
  //#endregion
49
- export { GlobalStyles_default as default, globalStylesRaw };
98
+ export { GlobalStyles_default as default, globalStylesRaw, semanticPageChromeRaw };
50
99
 
51
100
  //# sourceMappingURL=GlobalStyles.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"GlobalStyles.mjs","names":[],"sources":["../../src/lib/GlobalStyles.tsx"],"sourcesContent":["import { createGlobalStyle, css } from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nexport const globalStylesRaw = css`\n body {\n height: 100%;\n width: 100%;\n background: ${Color.BackgroundSecondary};\n color: ${Color.TextPrimary};\n ${Typography.TextMedium};\n -webkit-font-smoothing: antialiased;\n\n /* For iOS scrolling */\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n a {\n color: ${Color.PrimaryPurple};\n font-size: inherit;\n line-height: inherit;\n text-decoration: none;\n\n /* Only show outline when focused via keyboard */\n &:focus-visible {\n outline: 2px auto ${Color.BorderFocus};\n outline-offset: 2px;\n }\n }\n\n b {\n font-weight: ${Typography.TextMediumBold.fontWeight};\n }\n\n @page {\n size: portrait;\n }\n\n @media print {\n body {\n overflow: visible;\n }\n }\n`;\n\nexport default createGlobalStyle`\n ${globalStylesRaw}\n`;\n"],"mappings":";;;AAIA,MAAa,kBAAkB,GAAG;;;;kBAIhB,MAAM,oBAAoB;aAC/B,MAAM,YAAY;MACzB,WAAW,WAAW;;;;;;;;;aASf,MAAM,cAAc;;;;;;;0BAOP,MAAM,YAAY;;;;;;mBAMzB,WAAW,eAAe,WAAW;;;;;;;;;;;;;AAcxD,IAAA,uBAAe,iBAAiB;IAC5B,gBAAgB"}
1
+ {"version":3,"file":"GlobalStyles.mjs","names":[],"sources":["../../src/lib/GlobalStyles.tsx"],"sourcesContent":["import { createGlobalStyle, css } from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport { semanticOnly } from '#src/lib/semanticColor';\nimport { semanticLight } from '#src/variables/semantic';\n\n/**\n * Theme-independent base sheet. It must stay static (no theme interpolations): consumers serialize\n * it outside React (`globalStylesRaw.join('')`, e.g. for themeless iframes), so a function here\n * would stringify into the CSS.\n */\nexport const globalStylesRaw = css`\n body {\n height: 100%;\n width: 100%;\n background: ${Color.BackgroundSecondary};\n color: ${Color.TextPrimary};\n ${Typography.TextMedium};\n -webkit-font-smoothing: antialiased;\n\n /* For iOS scrolling */\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n a {\n color: ${Color.PrimaryPurple};\n font-size: inherit;\n line-height: inherit;\n text-decoration: none;\n\n /* Only show outline when focused via keyboard */\n &:focus-visible {\n outline: 2px auto ${Color.BorderFocus};\n outline-offset: 2px;\n }\n }\n\n b {\n font-weight: ${Typography.TextMediumBold.fontWeight};\n }\n\n @page {\n size: portrait;\n }\n\n @media print {\n body {\n overflow: visible;\n }\n }\n`;\n\n/**\n * Re-points the page chrome (canvas, text, links) at the theme's semantic palette, so a dark\n * `PDSProvider colorMode` paints a dark page instead of the static light `globalStylesRaw` colours.\n * Emits nothing under a theme without the semantic namespace (no `colorMode`, Relay), so those keep\n * exactly the `globalStylesRaw` output. Print always uses the light palette.\n */\nexport const semanticPageChromeRaw = css`\n ${semanticOnly(\n (tokens) => css`\n html,\n body {\n background: ${tokens.SurfacePage};\n }\n\n body {\n color: ${tokens.FgPrimary};\n }\n\n a {\n color: ${tokens.FgAccent};\n\n &:focus-visible {\n outline-color: ${tokens.BorderFocus};\n }\n }\n\n @media print {\n html,\n body {\n background: ${semanticLight.SurfacePage};\n }\n\n body {\n color: ${semanticLight.FgPrimary};\n }\n\n a {\n color: ${semanticLight.FgAccent};\n }\n }\n `,\n )}\n`;\n\nexport default createGlobalStyle`\n ${globalStylesRaw}\n ${semanticPageChromeRaw}\n`;\n"],"mappings":";;;;;;;;;;AAYA,MAAa,kBAAkB,GAAG;;;;kBAIhB,MAAM,oBAAoB;aAC/B,MAAM,YAAY;MACzB,WAAW,WAAW;;;;;;;;;aASf,MAAM,cAAc;;;;;;;0BAOP,MAAM,YAAY;;;;;;mBAMzB,WAAW,eAAe,WAAW;;;;;;;;;;;;;;;;;;;AAoBxD,MAAa,wBAAwB,GAAG;IACpC,cACC,WAAW,GAAG;;;sBAGG,OAAO,YAAY;;;;iBAIxB,OAAO,UAAU;;;;iBAIjB,OAAO,SAAS;;;2BAGN,OAAO,YAAY;;;;;;;wBAOtB,cAAc,YAAY;;;;mBAI/B,cAAc,UAAU;;;;mBAIxB,cAAc,SAAS;;;MAIvC,CAAC;;AAGJ,IAAA,uBAAe,iBAAiB;IAC5B,gBAAgB;IAChB,sBAAsB"}
@@ -1,16 +1,16 @@
1
1
  import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
2
+ import { semanticColor } from "../../lib/semanticColor.mjs";
2
3
  import { HeadlessAriaButton } from "../../lib/HeadlessAriaButton.mjs";
3
4
  import { n as RouterLink } from "../../router-BxmA940v.mjs";
4
5
  import { TruncatedText } from "../../lib/TruncatedText.mjs";
5
- import { semanticColor } from "../../lib/semanticColor.mjs";
6
6
  import { i as Paragraph, n as Heading$1 } from "../../Text-D0vEReED.mjs";
7
7
  import "../../variables/transitions.mjs";
8
8
  import { a as Tooltip } from "../../Tooltip-YViXzMdm.mjs";
9
9
  import { focusStyle } from "../../mixins/focus.mjs";
10
10
  import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
11
- import { n as Button$1, t as IconButton } from "../../IconButton-DftINsp7.mjs";
12
- import { n as DropdownMenu_default } from "../../DropdownMenu-Q8S-9rXm.mjs";
13
- import { t as DropdownButton } from "../../DropdownButton-BiFRlSVD.mjs";
11
+ import { n as Button$1, t as IconButton } from "../../IconButton-DxHB2g80.mjs";
12
+ import { n as DropdownMenu_default } from "../../DropdownMenu-c8XK2Lr4.mjs";
13
+ import { t as DropdownButton } from "../../DropdownButton-DpLG-cIj.mjs";
14
14
  import { n as SingleColumnLayout } from "../../PageLayout-DjtGrvJa.mjs";
15
15
  import { cloneElement } from "react";
16
16
  import { Color, Spacing } from "@persona/design-tokens";
@@ -1,6 +1,6 @@
1
1
  import { t as Card_default } from "../../Card-DuQHyroh.mjs";
2
- import { t as DataTable } from "../../DataTable-BvA2H9D9.mjs";
3
- import { t as PageHeader } from "../../PageHeader-DEKTopzU.mjs";
2
+ import { t as DataTable } from "../../DataTable-CIZJ1vO8.mjs";
3
+ import { t as PageHeader } from "../../PageHeader-7_Hf6rHl.mjs";
4
4
  import { a as Section, i as Container } from "../../PageLayout-DjtGrvJa.mjs";
5
5
  import { useMemo } from "react";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -1,9 +1,9 @@
1
1
  import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
2
2
  import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
3
3
  import { t as LoadingShimmer } from "../../LoadingShimmer-oPIv2ESr.mjs";
4
- import { t as Card_default } from "../../CardV2-BRJbRSts.mjs";
4
+ import { t as Card_default } from "../../CardV2-ACI5RIzF.mjs";
5
5
  import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-DPi4Dt5H.mjs";
6
- import { n as PageHeaderContainer } from "../../PageHeader-DEKTopzU.mjs";
6
+ import { n as PageHeaderContainer } from "../../PageHeader-7_Hf6rHl.mjs";
7
7
  import { Color, Spacing } from "@persona/design-tokens";
8
8
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
9
  //#region src/patterns/containers.tsx
@@ -1,8 +1,8 @@
1
1
  import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
2
2
  import { semanticColor } from "../../lib/semanticColor.mjs";
3
3
  import { t as HStack } from "../../Stack-Bzom2BTR.mjs";
4
- import { n as Button } from "../../IconButton-DftINsp7.mjs";
5
- import { i as Modal_default } from "../../Modal-BGlRX63w.mjs";
4
+ import { n as Button } from "../../IconButton-DxHB2g80.mjs";
5
+ import { i as Modal_default } from "../../Modal-De5_bPJ_.mjs";
6
6
  import { t as ProgressIndicator } from "../../ProgressIndicator-zt3ndT9U.mjs";
7
7
  import { useState } from "react";
8
8
  import { Color, Spacing } from "@persona/design-tokens";
package/dist/theme.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { chartingDark, chartingLight } from "./variables/charting.mjs";
2
1
  import { semanticDark, semanticLight } from "./variables/semantic.mjs";
2
+ import { chartingDark, chartingLight } from "./variables/charting.mjs";
3
3
  import { Color, FontFamilies, Typography } from "@persona/design-tokens";
4
4
  //#region src/theme.ts
5
5
  const primary = {
package/llms.txt CHANGED
@@ -40,7 +40,7 @@ their own subpaths.
40
40
  - Modal close button: localize the default with `PDSProvider strings={{ closeModal: translatedLabel }}` (English: "Close"), or override one modal with `contentProps.closeButtonLabel`.
41
41
  - Forms: `ConfigFormGroup`, `FormField` (`TextField`, `TextAreaField`, `TableBoxField`), `Input`, `TextArea`, `Select`, `Combobox`, `Checkbox`, `Radio`, `Toggle`, `DatePicker`, `RichTextEditor` (tiptap-based Markdown/HTML editor with menu bar and optional floating toolbar), `FloatingToolbar` (tiptap bubble-menu toolbar)
42
42
  - Status: `Sticker` (status badges), `Badge` (counts), `StatusIndicator`
43
- - Saved views: `TableControls` (or `DataTable.controls`) requires `onSetDefaultView` and `onUnsetDefaultView` together, or neither. Editable views offer "Set as default" / "Unset default" based on `view.isDefault`; the design system confirms before calling either callback and warns that both changes affect the entire organization. Consumers own persistence and must remove their own confirmations to avoid double prompts. Compact controls omit saved views. Pass `starredDefaultView` to star the default view: the `isDefault` view is pinned first with a star icon, cannot be dragged, hidden, deleted or unset, and its menu offers only Save and Duplicate (its name field still renames it); every other view gets the full menu. Rename and Duplicate on it call `onViewNameChange` / `onDuplicateView` with its id; Save calls `onSaveView()` with no id, saving whatever the consumer treats as the current view. A null `currentView` is shown as the starred view, so `onSaveView` and toolbar Save must treat null as the starred view; while an `isDefault` view exists, pass its id as `currentView` rather than null. A lazy default is a consumer-owned placeholder view with `isDefault: true`. While a view is the default the built-in tab is not shown and a `null` `currentView` is displayed as the starred view; with no `isDefault` view the built-in tab is shown starred and read-only.
43
+ - Saved views: `TableControls` (or `DataTable.controls`) requires `onSetDefaultView` and `onUnsetDefaultView` together, or neither. Editable views offer "Set as default" / "Unset default" based on `view.isDefault`; the design system confirms before calling either callback and warns that both changes affect the entire organization. Consumers own persistence and must remove their own confirmations to avoid double prompts. Compact controls omit saved views. Pass `starredDefaultView` to star the default view: the `isDefault` view is pinned first with a star icon, cannot be dragged, hidden, deleted or unset, and its menu offers only Save, Duplicate and Reset (its name field still renames it); every other view gets the full menu. Rename and Duplicate on it call `onViewNameChange` / `onDuplicateView` with its id; Save calls `onSaveView()` with no id, saving whatever the consumer treats as the current view. A null `currentView` is shown as the starred view, so `onSaveView` and toolbar Save must treat null as the starred view; while an `isDefault` view exists, pass its id as `currentView` rather than null. A lazy default is a consumer-owned placeholder view with `isDefault: true`. While a view is the default the built-in tab is not shown and a `null` `currentView` is displayed as the starred view; with no `isDefault` view the built-in tab is shown starred and read-only.
44
44
  - DataTable filters: pass `filtersV2` (`TableControlsFiltersV2Props` / `FilterBarProps`) through `DataTable.controls` or directly to `TableControls` for a first-class FilterBar; defaults visible with size derived from `compact`. Hosts own V2 data filtering and feed `onChange` back to `initialState` for active-filter messaging; hydration needs no remount key. Precedence: `filterPanel` → `filtersV2` → legacy `filters`. Legacy `filters` supports `input`, `select`, `multiselect`, `combobox`, and `daterange` with optional `filterResolver`. With `clientFiltering`, `column.filter` generates legacy-only controls backed by TanStack column-filter state, not V2 filtering.
45
45
  - SmartTextInput: when method chains are allowed (`ValueType.MethodChain` or `{{...}}` interpolation), you MUST pass `renderFunctionForm`. PDS does not build the function-parameter form, so without it the dialog opened by placing the cursor in a call like `convert_to(...)` shows only the function name over an empty body. It receives `FunctionFormRenderProps` and must call `onComplete(nodes)` or `onCancel()`. In persona-web, `useDashboardSmartTextInputProps` supplies it (backed by `InputMethodChain/FunctionForm`). See components/SmartTextInput/SmartTextInput.mdx.
46
46
  - FilterBar: optional `FilterField.condition`, `pickerGroup`, and `disabledReason` support host-defined individual predicates in pills and native Rules; existing aggregate fields stay unchanged. See components/DataTable/DataTable.mdx. Hosts own feature activation and serialization.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@persona/design-system",
3
- "version": "0.10.8",
3
+ "version": "0.10.9",
4
4
  "description": "React components for Persona UI",
5
5
  "keywords": [
6
6
  "tanstack-intent"
@@ -1,75 +0,0 @@
1
- import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
2
- import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
3
- import { i as Paragraph, n as Heading } from "./Text-D0vEReED.mjs";
4
- import { t as Breadcrumbs } from "./Breadcrumbs-Dft2TR4v.mjs";
5
- import { Spacing } from "@persona/design-tokens";
6
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
7
- //#region src/components/PageHeader/PageHeader.tsx
8
- const PageHeaderContainer = styled.header`
9
- display: flex;
10
- width: 100%;
11
- justify-content: space-between;
12
- align-items: center;
13
- padding: ${Spacing[3]} ${Spacing[5]};
14
- background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
15
- border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderDivider", theme.color.border.primary)};
16
- box-sizing: border-box;
17
- min-height: 56px; /* Standardize height for most PageHeaders */
18
- `;
19
- const TitleContainer = styled.div`
20
- display: flex;
21
- flex: 0 1 auto;
22
- min-width: 0;
23
- align-items: center;
24
- h1 {
25
- margin: 0;
26
- ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
27
- }
28
- p {
29
- margin: 0 0 0 ${Spacing[2]};
30
- ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}
31
- }
32
- `;
33
- const LeftContainer = styled.div`
34
- display: flex;
35
- flex: 1 1 auto;
36
- align-items: center;
37
- gap: ${Spacing[2]};
38
- min-width: 0;
39
- & > :not(${TitleContainer}) {
40
- flex-shrink: 0;
41
- }
42
- `;
43
- const RightContainer = styled.div`
44
- display: flex;
45
- gap: ${Spacing[2]};
46
- margin-left: ${Spacing[3]};
47
- flex-shrink: 0;
48
- `;
49
- const PageHeader = ({ title, breadcrumbs, subtitle, level = "product", prepend, append, children, ...props }) => /* @__PURE__ */ jsxs(PageHeaderContainer, {
50
- ...props,
51
- children: [/* @__PURE__ */ jsxs(LeftContainer, { children: [
52
- prepend,
53
- /* @__PURE__ */ jsxs(TitleContainer, { children: [breadcrumbs ? /* @__PURE__ */ jsx(Breadcrumbs, {
54
- size: "lg",
55
- ...breadcrumbs
56
- }) : /* @__PURE__ */ jsxs(Fragment, { children: [level === "product" && /* @__PURE__ */ jsx(Heading, {
57
- as: "h1",
58
- size: "sm",
59
- children: title
60
- }), level === "detail" && /* @__PURE__ */ jsx(Paragraph, {
61
- as: "h1",
62
- size: "lg",
63
- color: "primary",
64
- children: title
65
- })] }), subtitle && /* @__PURE__ */ jsx(Paragraph, {
66
- size: "md",
67
- children: subtitle
68
- })] }),
69
- append
70
- ] }), children && /* @__PURE__ */ jsx(RightContainer, { children })]
71
- });
72
- //#endregion
73
- export { PageHeaderContainer as n, PageHeader as t };
74
-
75
- //# sourceMappingURL=PageHeader-DEKTopzU.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PageHeader-DEKTopzU.mjs","names":[],"sources":["../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Breadcrumbs, { type BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport { Heading, Paragraph } from '#src/components/Text';\nimport { semanticColor, semanticOnly } from '#src/lib/semanticColor';\n\nexport const PageHeaderContainer = styled.header`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ${Spacing[3]} ${Spacing[5]};\n background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n box-sizing: border-box;\n min-height: 56px; /* Standardize height for most PageHeaders */\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n flex: 0 1 auto;\n min-width: 0;\n align-items: center;\n h1 {\n margin: 0;\n ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n }\n p {\n margin: 0 0 0 ${Spacing[2]};\n ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n }\n`;\n\nconst LeftContainer = styled.div`\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n gap: ${Spacing[2]};\n min-width: 0;\n & > :not(${TitleContainer}) {\n flex-shrink: 0;\n }\n`;\n\nconst RightContainer = styled.div`\n display: flex;\n gap: ${Spacing[2]};\n margin-left: ${Spacing[3]};\n flex-shrink: 0;\n`;\n\ninterface PageHeaderCommonProps {\n level?: 'product' | 'detail';\n prepend?: ReactNode;\n append?: ReactNode;\n children?: ReactNode;\n}\n\n/** Exactly one heading source is required: either `title` or `breadcrumbs`. */\nexport type PageHeaderProps = PageHeaderCommonProps &\n (\n | { title: ReactNode; subtitle?: ReactNode; breadcrumbs?: never }\n | {\n title?: never;\n /**\n * The subtitle is sunset in the breadcrumbs variant (PX-1299); fold the value it\n * carried (e.g. an object ID) into the current crumb, with a copy action if useful.\n */\n subtitle?: never;\n /** Renders in place of `title`; the current crumb becomes the page `h1`, at `lg` size. */\n breadcrumbs: BreadcrumbsProps;\n }\n );\n\nconst PageHeader = ({\n title,\n breadcrumbs,\n subtitle,\n level = 'product',\n prepend,\n append,\n children,\n ...props\n}: PageHeaderProps) => (\n <PageHeaderContainer {...props}>\n <LeftContainer>\n {prepend}\n <TitleContainer>\n {breadcrumbs ? (\n <Breadcrumbs size='lg' {...breadcrumbs} />\n ) : (\n <>\n {level === 'product' && (\n <Heading as='h1' size='sm'>\n {title}\n </Heading>\n )}\n {level === 'detail' && (\n <Paragraph as='h1' size='lg' color='primary'>\n {title}\n </Paragraph>\n )}\n </>\n )}\n {subtitle && <Paragraph size='md'>{subtitle}</Paragraph>}\n </TitleContainer>\n {append}\n </LeftContainer>\n {children && <RightContainer>{children}</RightContainer>}\n </PageHeaderContainer>\n);\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AASA,MAAa,sBAAsB,OAAO,MAAM;;;;;aAKnC,QAAQ,GAAG,GAAG,QAAQ,GAAG;uBACf,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ,CAAC;8BAC9E,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,QAAQ,CAAC;;;;AAK9G,MAAM,iBAAiB,OAAO,GAAG;;;;;;;MAO3B,cAAc,WAAW,UAAU,OAAO,UAAU,GAAG,CAAC;;;oBAG1C,QAAQ,GAAG;MACzB,cAAc,WAAW,UAAU,OAAO,YAAY,GAAG,CAAC;;;AAIhE,MAAM,gBAAgB,OAAO,GAAG;;;;SAIvB,QAAQ,GAAG;;aAEP,eAAe;;;;AAK5B,MAAM,iBAAiB,OAAO,GAAG;;SAExB,QAAQ,GAAG;iBACH,QAAQ,GAAG;;;AA2B5B,MAAM,cAAc,EAClB,OACA,aACA,UACA,QAAQ,WACR,SACA,QACA,UACA,GAAG,YAEH,qBAAC,qBAAD;CAAqB,GAAI;WAAzB,CACE,qBAAC,eAAD,EAAA,UAAA;EACG;EACD,qBAAC,gBAAD,EAAA,UAAA,CACG,cACC,oBAAC,aAAD;GAAa,MAAK;GAAK,GAAI;GAAe,CAAA,GAE1C,qBAAA,UAAA,EAAA,UAAA,CACG,UAAU,aACT,oBAAC,SAAD;GAAS,IAAG;GAAK,MAAK;aACnB;GACO,CAAA,EAEX,UAAU,YACT,oBAAC,WAAD;GAAW,IAAG;GAAK,MAAK;GAAK,OAAM;aAChC;GACS,CAAA,CAEb,EAAA,CAAA,EAEJ,YAAY,oBAAC,WAAD;GAAW,MAAK;aAAM;GAAqB,CAAA,CACzC,EAAA,CAAA;EAChB;EACa,EAAA,CAAA,EACf,YAAY,oBAAC,gBAAD,EAAiB,UAA0B,CAAA,CACpC"}