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 +31 -0
- package/dist/index.d.mts +33 -1
- package/dist/index.d.ts +33 -1
- package/dist/index.js +209 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +207 -1
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +524 -1
- package/package.json +1 -1
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
|
-
|
|
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
|
-
|
|
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:
|
|
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,
|