ss6-futuristic-component 1.0.1 → 1.1.1

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.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,37 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file.
4
4
 
5
+ ## 1.1.1 (2026-10-11)
6
+
7
+ ### Improvements
8
+
9
+ - **Footer:** frosted glass bar on the bottom 16px with yellow accents on its top edge; the center panel now auto-fits the `text`, with corner lines and slashes attached to it.
10
+ - **Header:** swapped the slant of the left and right yellow slash groups.
11
+ - **Toast.Inline:** uses a lighter `simple-*` icon set (floating `Toast` and `Confirmation` keep the full icons).
12
+
13
+ ## 1.1.0 (2026-10-11)
14
+
15
+ ### Features
16
+
17
+ - **Header:** new HUD title bar with a glowing title panel, interlocking shortcut tabs split around the title, `left` / `right` slots for your own components, and a CSS-only drop-down page list (yellow arrow) with tiles that light up on hover. `activeUrl` marks the current tab and page; `CustomComponent` accepts e.g. Next.js `Link`. Server component, no client JS.
18
+ - **Footer:** matching bottom bar with a flipped center panel, accent corner lines, yellow slashes and centered `text`.
19
+ - **Theme:** new `--yellow` / `--yellow-hi` tokens (secondary accent) for both light and dark.
20
+
21
+ ## 1.0.1 (2026-10-08)
22
+
23
+ ### Features
24
+
25
+ - **ProgressBar:** new component with `value`/`max`, `label`, `showValue` and `primary` | `info` | `success` | `warning` | `danger` colors; chamfered glass track with glowing fill.
26
+ - **Badge:** futuristic status chip (chamfered glass, status tint, pulsing glowing dot).
27
+ - **Confirmation:** dialog rebuilt from `Card` and `Button`, bundled status icons, frosted glass backdrop.
28
+ - **ThemeToggle:** checking it switches the page to dark (pure CSS, works in server components); an explicit `data-theme` on an ancestor still wins.
29
+ - **Button:** white text on filled buttons in light mode.
30
+
31
+ ### ⚠ Behavior changes
32
+
33
+ - **Light is now the default theme** (was dark). Set `data-theme="dark"` on `<html>`, or start a `ThemeToggle` with `defaultChecked`, to keep dark.
34
+ - `Confirmation` markup changed: the old `confirmation__card` / `baloon__*` classes are gone.
35
+
5
36
  ## 1.0.0 (2026-10-08)
6
37
 
7
38
  First release of `ss6-futuristic-component`, forked from `@safestrong/ppa-component-library` 1.11.1 and redesigned with a futuristic HUD look (glass panels, chamfered corners, glowing accents, navy/cyan palette with light theme via `data-theme`).
package/dist/index.d.mts CHANGED
@@ -176,4 +176,36 @@ type ProgressBar = {
176
176
  };
177
177
  declare function ProgressBar({ value, max, label, showValue, color, className, }: Readonly<ProgressBar>): React.JSX.Element;
178
178
 
179
- export { Badge, Button, Card, Confirmation, Dashboard, Expandable, MultiSelect, NavTabClient, Navigation, ProgressBar, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };
179
+ type HeaderLink = {
180
+ label: string;
181
+ href: string;
182
+ };
183
+ type HeaderPage = HeaderLink & {
184
+ description?: string;
185
+ icon?: IconProp;
186
+ };
187
+ type Header = {
188
+ title: string;
189
+ /** shortcut tabs; first half sits left of the title, the rest on the right */
190
+ tabs?: HeaderLink[];
191
+ /** pages for the drop-down list (the yellow arrow appears only when given) */
192
+ pages?: HeaderPage[];
193
+ activeUrl?: string;
194
+ left?: React.ReactNode;
195
+ right?: React.ReactNode;
196
+ drawerTitle?: string;
197
+ /** link component, e.g. Next.js Link; defaults to <a> */
198
+ CustomComponent?: React.ElementType;
199
+ /** id of the hidden toggle; change it if a page renders more than one Header */
200
+ menuId?: string;
201
+ className?: string;
202
+ };
203
+ declare function Header({ title, tabs, pages, activeUrl, left, right, drawerTitle, CustomComponent, menuId, className, }: Readonly<Header>): React.JSX.Element;
204
+
205
+ type Footer = {
206
+ text: React.ReactNode;
207
+ className?: string;
208
+ };
209
+ declare function Footer({ text, className }: Readonly<Footer>): React.JSX.Element;
210
+
211
+ export { Badge, Button, Card, Confirmation, Dashboard, Expandable, Footer, Header, MultiSelect, NavTabClient, Navigation, ProgressBar, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };
package/dist/index.d.ts CHANGED
@@ -176,4 +176,36 @@ type ProgressBar = {
176
176
  };
177
177
  declare function ProgressBar({ value, max, label, showValue, color, className, }: Readonly<ProgressBar>): React.JSX.Element;
178
178
 
179
- export { Badge, Button, Card, Confirmation, Dashboard, Expandable, MultiSelect, NavTabClient, Navigation, ProgressBar, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };
179
+ type HeaderLink = {
180
+ label: string;
181
+ href: string;
182
+ };
183
+ type HeaderPage = HeaderLink & {
184
+ description?: string;
185
+ icon?: IconProp;
186
+ };
187
+ type Header = {
188
+ title: string;
189
+ /** shortcut tabs; first half sits left of the title, the rest on the right */
190
+ tabs?: HeaderLink[];
191
+ /** pages for the drop-down list (the yellow arrow appears only when given) */
192
+ pages?: HeaderPage[];
193
+ activeUrl?: string;
194
+ left?: React.ReactNode;
195
+ right?: React.ReactNode;
196
+ drawerTitle?: string;
197
+ /** link component, e.g. Next.js Link; defaults to <a> */
198
+ CustomComponent?: React.ElementType;
199
+ /** id of the hidden toggle; change it if a page renders more than one Header */
200
+ menuId?: string;
201
+ className?: string;
202
+ };
203
+ declare function Header({ title, tabs, pages, activeUrl, left, right, drawerTitle, CustomComponent, menuId, className, }: Readonly<Header>): React.JSX.Element;
204
+
205
+ type Footer = {
206
+ text: React.ReactNode;
207
+ className?: string;
208
+ };
209
+ declare function Footer({ text, className }: Readonly<Footer>): React.JSX.Element;
210
+
211
+ export { Badge, Button, Card, Confirmation, Dashboard, Expandable, Footer, Header, MultiSelect, NavTabClient, Navigation, ProgressBar, SingleSelect, Skeleton, Slider, TextInput, ThemeToggle, Toast, Tooltip };
package/dist/index.js CHANGED
@@ -65,6 +65,8 @@ __export(index_exports, {
65
65
  Confirmation: () => Confirmation,
66
66
  Dashboard: () => Dashboard,
67
67
  Expandable: () => Expandable,
68
+ Footer: () => Footer2,
69
+ Header: () => Header,
68
70
  MultiSelect: () => MultiSelect,
69
71
  NavTabClient: () => NavTabClient,
70
72
  Navigation: () => Navigation,
@@ -430,6 +432,18 @@ var icon_warning_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/200
430
432
  // assets/icon-success.svg
431
433
  var icon_success_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120" role="img" aria-label="success">%0A <defs>%0A <radialGradient id="fx-success-glow"><stop offset="0" stop-color="%2319D3A2" stop-opacity=".45"/><stop offset="1" stop-color="%2319D3A2" stop-opacity="0"/></radialGradient>%0A <linearGradient id="fx-success-core" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%2386F7D6"/><stop offset=".55" stop-color="%2319D3A2"/><stop offset="1" stop-color="%230B8A68"/></linearGradient>%0A <linearGradient id="fx-success-beam" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%2319D3A2" stop-opacity="0"/><stop offset="1" stop-color="%2319D3A2" stop-opacity=".45"/></linearGradient>%0A <filter id="fx-success-blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.6"/></filter>%0A </defs>%0A <circle cx="60" cy="54" r="48" fill="url(%23fx-success-glow)"/>%0A <path d="M48 104 L72 104 L90 66 L30 66Z" fill="url(%23fx-success-beam)"/>%0A <ellipse cx="60" cy="106" rx="30" ry="6" fill="%230B8A68" opacity=".22"/>%0A <ellipse cx="60" cy="104" rx="22" ry="4" fill="none" stroke="%2319D3A2" stroke-width="2"/>%0A <ellipse cx="60" cy="104" rx="10" ry="1.8" fill="%2386F7D6"/>%0A <polygon points="60,14 92.9,33 92.9,71 60,90 27.1,71 27.1,33" fill="none" stroke="%2319D3A2" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="32 6" stroke-dashoffset="-3"/>%0A <polygon points="60,24 84.2,38 84.2,66 60,80 35.8,66 35.8,38" fill="url(%23fx-success-core)" stroke="%230B8A68" stroke-width="1.5" stroke-linejoin="round"/>%0A <polygon points="60,24 84.2,38 60,52 35.8,38" fill="%23fff" opacity=".18"/>%0A <path d="M40 72 H52 M68 72 H80" stroke="%23fff" stroke-width="1.5" stroke-linecap="round" opacity=".45"/>%0A <ellipse cx="60" cy="52" rx="52" ry="14" transform="rotate(-18 60 52)" fill="none" stroke="%2319D3A2" stroke-width="1.5" stroke-dasharray="4 4" opacity=".7"/>%0A <circle cx="109.5" cy="35.9" r="3.2" fill="%2386F7D6" stroke="%2319D3A2" stroke-width="1.5"/>%0A <circle cx="10.5" cy="68.1" r="2.2" fill="%2319D3A2"/>%0A <g filter="url(%23fx-success-blur)" opacity=".8"><path d="M48 53 L56 61 L72 44" fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g>%0A <path d="M48 53 L56 61 L72 44" fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A';
432
434
 
435
+ // assets/simple-info-icon.svg
436
+ var simple_info_icon_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -8 120 120" width="120" height="120" role="img" aria-label="info">%0A <defs>%0A <radialGradient id="fx-info-glow"><stop offset="0" stop-color="%233B9CFF" stop-opacity=".45"/><stop offset="1" stop-color="%233B9CFF" stop-opacity="0"/></radialGradient>%0A <linearGradient id="fx-info-core" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%239AD5FF"/><stop offset=".55" stop-color="%233B9CFF"/><stop offset="1" stop-color="%231550B8"/></linearGradient>%0A <filter id="fx-info-blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.6"/></filter>%0A </defs>%0A <circle cx="60" cy="52" r="50" fill="url(%23fx-info-glow)"/>%0A <polygon points="60,14 92.9,33 92.9,71 60,90 27.1,71 27.1,33" fill="none" stroke="%233B9CFF" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="32 6" stroke-dashoffset="-3"/>%0A <polygon points="60,24 84.2,38 84.2,66 60,80 35.8,66 35.8,38" fill="url(%23fx-info-core)" stroke="%231550B8" stroke-width="1.5" stroke-linejoin="round"/>%0A <polygon points="60,24 84.2,38 60,52 35.8,38" fill="%23fff" opacity=".18"/>%0A <g filter="url(%23fx-info-blur)" opacity=".8"><circle cx="60" cy="40" r="3.8" fill="%23fff"/><path d="M60 49 V64" fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g>%0A <circle cx="60" cy="40" r="3.8" fill="%23fff"/><path d="M60 49 V64" fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A';
437
+
438
+ // assets/simple-error-icon.svg
439
+ var simple_error_icon_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -8 120 120" width="120" height="120" role="img" aria-label="error">%0A <defs>%0A <radialGradient id="fx-error-glow"><stop offset="0" stop-color="%23FF4D6D" stop-opacity=".45"/><stop offset="1" stop-color="%23FF4D6D" stop-opacity="0"/></radialGradient>%0A <linearGradient id="fx-error-core" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23FFA3B5"/><stop offset=".55" stop-color="%23FF4D6D"/><stop offset="1" stop-color="%23B3123A"/></linearGradient>%0A <filter id="fx-error-blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.6"/></filter>%0A </defs>%0A <circle cx="60" cy="52" r="50" fill="url(%23fx-error-glow)"/>%0A <polygon points="60,14 92.9,33 92.9,71 60,90 27.1,71 27.1,33" fill="none" stroke="%23FF4D6D" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="32 6" stroke-dashoffset="-3"/>%0A <polygon points="60,24 84.2,38 84.2,66 60,80 35.8,66 35.8,38" fill="url(%23fx-error-core)" stroke="%23B3123A" stroke-width="1.5" stroke-linejoin="round"/>%0A <polygon points="60,24 84.2,38 60,52 35.8,38" fill="%23fff" opacity=".18"/>%0A <g filter="url(%23fx-error-blur)" opacity=".8"><path d="M51 43 L69 61 M69 43 L51 61" fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g>%0A <path d="M51 43 L69 61 M69 43 L51 61" fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A';
440
+
441
+ // assets/simple-warning-icon.svg
442
+ var simple_warning_icon_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -8 120 120" width="120" height="120" role="img" aria-label="warning">%0A <defs>%0A <radialGradient id="fx-warning-glow"><stop offset="0" stop-color="%23FFA53B" stop-opacity=".45"/><stop offset="1" stop-color="%23FFA53B" stop-opacity="0"/></radialGradient>%0A <linearGradient id="fx-warning-core" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23FFD98F"/><stop offset=".55" stop-color="%23FFA53B"/><stop offset="1" stop-color="%23C2600A"/></linearGradient>%0A <filter id="fx-warning-blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.6"/></filter>%0A </defs>%0A <circle cx="60" cy="52" r="50" fill="url(%23fx-warning-glow)"/>%0A <polygon points="60,14 92.9,33 92.9,71 60,90 27.1,71 27.1,33" fill="none" stroke="%23FFA53B" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="32 6" stroke-dashoffset="-3"/>%0A <polygon points="60,24 84.2,38 84.2,66 60,80 35.8,66 35.8,38" fill="url(%23fx-warning-core)" stroke="%23C2600A" stroke-width="1.5" stroke-linejoin="round"/>%0A <polygon points="60,24 84.2,38 60,52 35.8,38" fill="%23fff" opacity=".18"/>%0A <g filter="url(%23fx-warning-blur)" opacity=".8"><path d="M53 44 a7 7 0 1 1 10 6.3 c-2.2 1.1 -3 2.4 -3 4.7 v1.5" fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="60" cy="64.5" r="3.4" fill="%23fff"/></g>%0A <path d="M53 44 a7 7 0 1 1 10 6.3 c-2.2 1.1 -3 2.4 -3 4.7 v1.5" fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="60" cy="64.5" r="3.4" fill="%23fff"/>%0A</svg>%0A';
443
+
444
+ // assets/simple-success-icon.svg
445
+ var simple_success_icon_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -8 120 120" width="120" height="120" role="img" aria-label="success">%0A <defs>%0A <radialGradient id="fx-success-glow"><stop offset="0" stop-color="%2319D3A2" stop-opacity=".45"/><stop offset="1" stop-color="%2319D3A2" stop-opacity="0"/></radialGradient>%0A <linearGradient id="fx-success-core" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%2386F7D6"/><stop offset=".55" stop-color="%2319D3A2"/><stop offset="1" stop-color="%230B8A68"/></linearGradient>%0A <filter id="fx-success-blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.6"/></filter>%0A </defs>%0A <circle cx="60" cy="52" r="50" fill="url(%23fx-success-glow)"/>%0A <polygon points="60,14 92.9,33 92.9,71 60,90 27.1,71 27.1,33" fill="none" stroke="%2319D3A2" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="32 6" stroke-dashoffset="-3"/>%0A <polygon points="60,24 84.2,38 84.2,66 60,80 35.8,66 35.8,38" fill="url(%23fx-success-core)" stroke="%230B8A68" stroke-width="1.5" stroke-linejoin="round"/>%0A <polygon points="60,24 84.2,38 60,52 35.8,38" fill="%23fff" opacity=".18"/>%0A <g filter="url(%23fx-success-blur)" opacity=".8"><path d="M48 53 L56 61 L72 44" fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g>%0A <path d="M48 53 L56 61 L72 44" fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A';
446
+
433
447
  // src/components/Toast.tsx
434
448
  var import_react_fontawesome6 = require("@fortawesome/react-fontawesome");
435
449
  var statusIcons = {
@@ -438,6 +452,12 @@ var statusIcons = {
438
452
  success: icon_success_default,
439
453
  danger: icon_error_default
440
454
  };
455
+ var simpleIcons = {
456
+ info: simple_info_icon_default,
457
+ warning: simple_warning_icon_default,
458
+ success: simple_success_icon_default,
459
+ danger: simple_error_icon_default
460
+ };
441
461
  function Toast({
442
462
  title,
443
463
  description,
@@ -452,7 +472,7 @@ var Inline = ({
452
472
  type,
453
473
  icon = void 0
454
474
  }) => {
455
- return /* @__PURE__ */ import_react8.default.createElement("div", { className: `ft-inline ft--${type} ${className != null ? className : ""}` }, icon ? /* @__PURE__ */ import_react8.default.createElement(import_react_fontawesome6.FontAwesomeIcon, { icon, className: "ft-inline__fa" }) : /* @__PURE__ */ import_react8.default.createElement("img", { src: statusIcons[type], alt: "", className: "ft-inline__icon" }), /* @__PURE__ */ import_react8.default.createElement("p", null, text));
475
+ return /* @__PURE__ */ import_react8.default.createElement("div", { className: `ft-inline ft--${type} ${className != null ? className : ""}` }, icon ? /* @__PURE__ */ import_react8.default.createElement(import_react_fontawesome6.FontAwesomeIcon, { icon, className: "ft-inline__fa" }) : /* @__PURE__ */ import_react8.default.createElement("img", { src: simpleIcons[type], alt: "", className: "ft-inline__icon" }), /* @__PURE__ */ import_react8.default.createElement("p", null, text));
456
476
  };
457
477
  Toast.Inline = Inline;
458
478
 
@@ -698,6 +718,192 @@ function ProgressBar({
698
718
  /* @__PURE__ */ import_react17.default.createElement("div", { className: "fp__fill", style: { width: `${percent}%` } })
699
719
  ));
700
720
  }
721
+
722
+ // src/components/Header.tsx
723
+ var import_react18 = __toESM(require("react"));
724
+ var import_react_fontawesome10 = require("@fortawesome/react-fontawesome");
725
+ function Header({
726
+ title,
727
+ tabs = [],
728
+ pages = [],
729
+ activeUrl,
730
+ left: left2,
731
+ right: right2,
732
+ drawerTitle = "All Pages",
733
+ CustomComponent,
734
+ menuId = "ph-menu",
735
+ className = ""
736
+ }) {
737
+ const Link = CustomComponent || "a";
738
+ const current = (href) => href === activeUrl ? "page" : void 0;
739
+ const half = Math.ceil(tabs.length / 2);
740
+ const renderTabs = (list2, side) => /* @__PURE__ */ import_react18.default.createElement("nav", { className: `ph__tabs ph__tabs--${side}`, "aria-label": "Shortcuts" }, list2.map(({ label, href }) => /* @__PURE__ */ import_react18.default.createElement(
741
+ Link,
742
+ {
743
+ key: href,
744
+ href,
745
+ "aria-current": current(href),
746
+ className: `ph-tab ${side === "r" ? "ph-tab--r" : ""}`
747
+ },
748
+ label
749
+ )));
750
+ return /* @__PURE__ */ import_react18.default.createElement("header", { className: `ph ${className}` }, /* @__PURE__ */ import_react18.default.createElement(
751
+ "svg",
752
+ {
753
+ className: "ph__deco",
754
+ width: "840",
755
+ height: "64",
756
+ viewBox: "300 0 840 64",
757
+ fill: "none",
758
+ "aria-hidden": "true"
759
+ },
760
+ /* @__PURE__ */ import_react18.default.createElement("defs", null, /* @__PURE__ */ import_react18.default.createElement("linearGradient", { id: "ph-title", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "0", className: "ph__stop-panel-top" }), /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "1", className: "ph__stop-panel-bottom" })), /* @__PURE__ */ import_react18.default.createElement("linearGradient", { id: "ph-inner", x1: "0", y1: "1", x2: "0", y2: "0" }, /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "0", className: "ph__stop-accent", stopOpacity: ".32" }), /* @__PURE__ */ import_react18.default.createElement("stop", { offset: ".6", className: "ph__stop-accent", stopOpacity: "0" })), /* @__PURE__ */ import_react18.default.createElement("linearGradient", { id: "ph-fadeL", x1: "0", y1: "0", x2: "1", y2: "0" }, /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" })), /* @__PURE__ */ import_react18.default.createElement("linearGradient", { id: "ph-fadeR", x1: "1", y1: "0", x2: "0", y2: "0" }, /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react18.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" }))),
761
+ /* @__PURE__ */ import_react18.default.createElement("path", { d: "M540 0H900L866 56H574Z", fill: "url(#ph-title)" }),
762
+ /* @__PURE__ */ import_react18.default.createElement("path", { d: "M540 0H900L866 56H574Z", fill: "url(#ph-inner)" }),
763
+ /* @__PURE__ */ import_react18.default.createElement(
764
+ "path",
765
+ {
766
+ className: "ph__deco-corners",
767
+ d: "M562 35L574.5 55H612 M878 35L865.5 55H828",
768
+ strokeWidth: "2.5",
769
+ strokeLinejoin: "round",
770
+ strokeLinecap: "round"
771
+ }
772
+ ),
773
+ /* @__PURE__ */ import_react18.default.createElement(
774
+ "path",
775
+ {
776
+ d: "M320 40l-8-14 M330 40l-8-14 M340 40l-8-14 M350 40l-8-14 M360 40l-8-14",
777
+ stroke: "url(#ph-fadeL)",
778
+ strokeWidth: "3"
779
+ }
780
+ ),
781
+ /* @__PURE__ */ import_react18.default.createElement(
782
+ "path",
783
+ {
784
+ d: "M1080 40l8-14 M1090 40l8-14 M1100 40l8-14 M1110 40l8-14 M1120 40l8-14",
785
+ stroke: "url(#ph-fadeR)",
786
+ strokeWidth: "3"
787
+ }
788
+ )
789
+ ), /* @__PURE__ */ import_react18.default.createElement("h1", { className: "ph__title" }, title), tabs.length > 0 && renderTabs(tabs.slice(0, half), "l"), tabs.length > 1 && renderTabs(tabs.slice(half), "r"), left2 && /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__slot ph__slot--left" }, left2), right2 && /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__slot ph__slot--right" }, right2), pages.length > 0 && /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(
790
+ "input",
791
+ {
792
+ id: menuId,
793
+ type: "checkbox",
794
+ className: "ph__toggle",
795
+ "aria-label": "Show all pages"
796
+ }
797
+ ), /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph__arrow-glow" }, /* @__PURE__ */ import_react18.default.createElement(
798
+ "label",
799
+ {
800
+ htmlFor: menuId,
801
+ className: "ph__arrow",
802
+ "aria-hidden": "true"
803
+ }
804
+ )), /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__drawer" }, /* @__PURE__ */ import_react18.default.createElement(
805
+ "label",
806
+ {
807
+ htmlFor: menuId,
808
+ className: "ph__backdrop",
809
+ "aria-hidden": "true"
810
+ }
811
+ ), /* @__PURE__ */ import_react18.default.createElement("section", { className: "ph__panel", "aria-label": drawerTitle }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__panel-head" }, /* @__PURE__ */ import_react18.default.createElement("div", null, /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph__kicker" }, "// NAVIGATE"), /* @__PURE__ */ import_react18.default.createElement("h2", { className: "ph__panel-title" }, drawerTitle)), /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph__count" }, String(pages.length).padStart(2, "0"), " PAGES")), /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__grid" }, pages.map(({ label, href, description, icon }) => /* @__PURE__ */ import_react18.default.createElement(
812
+ Link,
813
+ {
814
+ key: href,
815
+ href,
816
+ "aria-current": current(href),
817
+ className: "ph-page"
818
+ },
819
+ icon && /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__icon" }, /* @__PURE__ */ import_react18.default.createElement(import_react_fontawesome10.FontAwesomeIcon, { icon })),
820
+ /* @__PURE__ */ import_react18.default.createElement("span", null, /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__name" }, label), description && /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__desc" }, description))
821
+ )))))));
822
+ }
823
+
824
+ // src/components/Footer.tsx
825
+ var import_react19 = __toESM(require("react"));
826
+ function Footer2({ text, className = "" }) {
827
+ return /* @__PURE__ */ import_react19.default.createElement("footer", { className: `pf ${className}` }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "pf__panel" }, /* @__PURE__ */ import_react19.default.createElement("p", { className: "pf__text" }, text), /* @__PURE__ */ import_react19.default.createElement(
828
+ "svg",
829
+ {
830
+ className: "pf__corner pf__corner--l",
831
+ width: "56",
832
+ height: "16",
833
+ viewBox: "0 0 56 16",
834
+ fill: "none",
835
+ "aria-hidden": "true"
836
+ },
837
+ /* @__PURE__ */ import_react19.default.createElement(
838
+ "path",
839
+ {
840
+ className: "ph__deco-corners",
841
+ d: "M14 15L24.5 0.5H56",
842
+ strokeWidth: "2.5",
843
+ strokeLinejoin: "round",
844
+ strokeLinecap: "round"
845
+ }
846
+ )
847
+ ), /* @__PURE__ */ import_react19.default.createElement(
848
+ "svg",
849
+ {
850
+ className: "pf__corner pf__corner--r",
851
+ width: "56",
852
+ height: "16",
853
+ viewBox: "0 0 56 16",
854
+ fill: "none",
855
+ "aria-hidden": "true"
856
+ },
857
+ /* @__PURE__ */ import_react19.default.createElement(
858
+ "path",
859
+ {
860
+ className: "ph__deco-corners",
861
+ d: "M42 15L31.5 0.5H0",
862
+ strokeWidth: "2.5",
863
+ strokeLinejoin: "round",
864
+ strokeLinecap: "round"
865
+ }
866
+ )
867
+ ), /* @__PURE__ */ import_react19.default.createElement(
868
+ "svg",
869
+ {
870
+ className: "pf__slash pf__slash--l",
871
+ width: "47",
872
+ height: "12",
873
+ viewBox: "0 0 47 12",
874
+ fill: "none",
875
+ "aria-hidden": "true"
876
+ },
877
+ /* @__PURE__ */ import_react19.default.createElement("defs", null, /* @__PURE__ */ import_react19.default.createElement("linearGradient", { id: "pf-fadeL", x1: "0", y1: "0", x2: "1", y2: "0" }, /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" }))),
878
+ /* @__PURE__ */ import_react19.default.createElement(
879
+ "path",
880
+ {
881
+ d: "M0 12l7-12 M10 12l7-12 M20 12l7-12 M30 12l7-12 M40 12l7-12",
882
+ stroke: "url(#pf-fadeL)",
883
+ strokeWidth: "3"
884
+ }
885
+ )
886
+ ), /* @__PURE__ */ import_react19.default.createElement(
887
+ "svg",
888
+ {
889
+ className: "pf__slash pf__slash--r",
890
+ width: "47",
891
+ height: "12",
892
+ viewBox: "0 0 47 12",
893
+ fill: "none",
894
+ "aria-hidden": "true"
895
+ },
896
+ /* @__PURE__ */ import_react19.default.createElement("defs", null, /* @__PURE__ */ import_react19.default.createElement("linearGradient", { id: "pf-fadeR", x1: "1", y1: "0", x2: "0", y2: "0" }, /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" }))),
897
+ /* @__PURE__ */ import_react19.default.createElement(
898
+ "path",
899
+ {
900
+ d: "M0 0l7 12 M10 0l7 12 M20 0l7 12 M30 0l7 12 M40 0l7 12",
901
+ stroke: "url(#pf-fadeR)",
902
+ strokeWidth: "3"
903
+ }
904
+ )
905
+ )));
906
+ }
701
907
  // Annotate the CommonJS export names for ESM import in node:
702
908
  0 && (module.exports = {
703
909
  Badge,
@@ -706,6 +912,8 @@ function ProgressBar({
706
912
  Confirmation,
707
913
  Dashboard,
708
914
  Expandable,
915
+ Footer,
916
+ Header,
709
917
  MultiSelect,
710
918
  NavTabClient,
711
919
  Navigation,