@pihanga2/shadcn 0.2.14 → 0.2.17
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/AGENT.building-cards.md +68 -0
- package/AGENT.using-cards.md +15 -3
- package/README.md +3 -1
- package/cards/conditional/conditional.component.js +30 -12
- package/cards/conditional/conditional.component.js.map +1 -1
- package/cards/conditional/conditional.types.d.ts +21 -3
- package/cards/conditional/conditional.types.js +1 -1
- package/cards/conditional/conditional.types.js.map +1 -1
- package/cards/fileDrop/fileDrop.component.js +64 -49
- package/cards/fileDrop/fileDrop.component.js.map +1 -1
- package/cards/fileDrop/fileDrop.css +1 -1
- package/cards/fileDrop/fileDrop.types.d.ts +49 -0
- package/cards/fileDrop/fileDrop.types.js +9 -2
- package/cards/fileDrop/fileDrop.types.js.map +1 -1
- package/cards/fileDrop/index.js +14 -8
- package/cards/fileDrop/index.js.map +1 -1
- package/cards/jsonViewer/jsonViewer.css +1 -1
- package/cards/keyboardOverlay/index.d.ts +1 -0
- package/cards/keyboardOverlay/index.js +13 -0
- package/cards/keyboardOverlay/index.js.map +1 -0
- package/cards/keyboardOverlay/keyboardOverlay.component.d.ts +4 -0
- package/cards/keyboardOverlay/keyboardOverlay.component.js +76 -0
- package/cards/keyboardOverlay/keyboardOverlay.component.js.map +1 -0
- package/cards/keyboardOverlay/keyboardOverlay.types.d.ts +92 -0
- package/cards/keyboardOverlay/keyboardOverlay.types.js +7 -0
- package/cards/keyboardOverlay/keyboardOverlay.types.js.map +1 -0
- package/cards/loadingOverlay/loadingOverlay.css +1 -1
- package/cards/modeToggle/mode-toggle.component.js +1 -1
- package/cards/modeToggle/mode-toggle.component.js.map +1 -1
- package/cards/pageWithNavbar/pageWithNavbar.css +1 -1
- package/cards/pasteTarget/pasteTarget.css +1 -1
- package/cards/resizableColumns/index.d.ts +1 -0
- package/cards/resizableColumns/resizableColumns.component.d.ts +4 -0
- package/cards/resizableColumns/resizableColumns.types.d.ts +22 -0
- package/cards/resizableGrid/index.d.ts +1 -0
- package/cards/resizableGrid/resizableGrid.component.d.ts +4 -0
- package/cards/resizableGrid/resizableGrid.types.d.ts +33 -0
- package/cards/scrollbarWithAnnotations/scrollbarWithAnnotations.css +1 -1
- package/cards/suspense/index.d.ts +1 -0
- package/cards/suspense/index.js +12 -0
- package/cards/suspense/index.js.map +1 -0
- package/cards/suspense/suspense.component.d.ts +15 -0
- package/cards/suspense/suspense.component.js +45 -0
- package/cards/suspense/suspense.component.js.map +1 -0
- package/cards/suspense/suspense.types.d.ts +67 -0
- package/cards/suspense/suspense.types.js +7 -0
- package/cards/suspense/suspense.types.js.map +1 -0
- package/cards/typography/typography.component.js +13 -12
- package/cards/typography/typography.component.js.map +1 -1
- package/cards/typography/typography.types.d.ts +2 -0
- package/cards/typography/typography.types.js.map +1 -1
- package/package.json +12 -2
package/AGENT.building-cards.md
CHANGED
|
@@ -740,6 +740,74 @@ rethemable by the consumer:
|
|
|
740
740
|
<div className="bg-white text-gray-900 border border-gray-200 rounded-xl shadow-sm">
|
|
741
741
|
```
|
|
742
742
|
|
|
743
|
+
### ⚠️ CSS variables are oklch values — critical rules for card CSS files
|
|
744
|
+
|
|
745
|
+
This project uses **Tailwind v4 with oklch colour values**. The CSS custom
|
|
746
|
+
properties (`--border`, `--muted`, `--foreground`, etc.) are **complete** CSS
|
|
747
|
+
colour values — they are **not** HSL channel triplets.
|
|
748
|
+
|
|
749
|
+
**Rule 1 — Never wrap a variable in `hsl()`:**
|
|
750
|
+
|
|
751
|
+
```css
|
|
752
|
+
/* ❌ Invalid — wraps a full oklch(...) value inside hsl() */
|
|
753
|
+
background-color: hsl(var(--border, 214 32% 91%));
|
|
754
|
+
|
|
755
|
+
/* ✅ Correct — use the variable directly */
|
|
756
|
+
background-color: var(--border);
|
|
757
|
+
```
|
|
758
|
+
|
|
759
|
+
**Rule 2 — Never use `@media (prefers-color-scheme: dark)` in card CSS.**
|
|
760
|
+
The project uses class-based dark mode (a `.dark` class on `<html>`). A media
|
|
761
|
+
query won't fire when the user toggles the theme via the `modeToggle` card.
|
|
762
|
+
|
|
763
|
+
```css
|
|
764
|
+
/* ❌ Wrong — ignored when the .dark class is toggled programmatically */
|
|
765
|
+
@media (prefers-color-scheme: dark) {
|
|
766
|
+
.my-card { background-color: #161b22; }
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
/* ✅ Correct — use .dark class override */
|
|
770
|
+
.dark .my-card { background-color: var(--card); }
|
|
771
|
+
|
|
772
|
+
/* ✅ Even better — use a CSS variable that adapts automatically */
|
|
773
|
+
.my-card { background-color: var(--card); } /* no dark override needed */
|
|
774
|
+
```
|
|
775
|
+
|
|
776
|
+
**Rule 3 — Use `color-mix()` for alpha/transparency:**
|
|
777
|
+
|
|
778
|
+
```css
|
|
779
|
+
/* ❌ Wrong — hardcoded rgba */
|
|
780
|
+
background: rgba(0, 0, 0, 0.3);
|
|
781
|
+
|
|
782
|
+
/* ✅ Correct — theme-aware semi-transparent foreground */
|
|
783
|
+
background: color-mix(in srgb, var(--foreground) 30%, transparent);
|
|
784
|
+
|
|
785
|
+
/* ✅ Correct — semi-transparent background overlay */
|
|
786
|
+
background: color-mix(in srgb, var(--background) 70%, transparent);
|
|
787
|
+
```
|
|
788
|
+
|
|
789
|
+
**Rule 4 — Expose component-level colour tokens for cards with semantic colours.**
|
|
790
|
+
When a card needs colours that have no shadcn/ui equivalent (syntax highlighting,
|
|
791
|
+
annotation markers, etc.), define them as CSS custom properties in `:root` / `.dark`
|
|
792
|
+
rather than hardcoding hex values:
|
|
793
|
+
|
|
794
|
+
```css
|
|
795
|
+
/* ✅ Correct — semantic tokens with dark-mode variants */
|
|
796
|
+
:root {
|
|
797
|
+
--jv-color-string: oklch(0.45 0.15 145); /* green */
|
|
798
|
+
--jv-color-number: oklch(0.40 0.18 265); /* blue */
|
|
799
|
+
}
|
|
800
|
+
.dark {
|
|
801
|
+
--jv-color-string: oklch(0.70 0.12 145);
|
|
802
|
+
--jv-color-number: oklch(0.68 0.14 265);
|
|
803
|
+
}
|
|
804
|
+
.jv-string { color: var(--jv-color-string); }
|
|
805
|
+
|
|
806
|
+
/* ❌ Wrong — hardcoded per-class dark overrides */
|
|
807
|
+
.jv-string { color: #2e7d32; }
|
|
808
|
+
.dark .jv-string { color: #81c784; }
|
|
809
|
+
```
|
|
810
|
+
|
|
743
811
|
Standard shadcn tokens available as Tailwind utilities:
|
|
744
812
|
|
|
745
813
|
| Tailwind class | CSS variable | Default (light) |
|
package/AGENT.using-cards.md
CHANGED
|
@@ -626,7 +626,11 @@ import {registerFramework, registerCard, register} from "@pihanga2/core";
|
|
|
626
626
|
import {SdFramework} from "./cards/framework";
|
|
627
627
|
|
|
628
628
|
export function appPiInit(): void {
|
|
629
|
-
|
|
629
|
+
// theme: "system" defers to the OS preference on first load;
|
|
630
|
+
// "light" / "dark" force a specific mode.
|
|
631
|
+
// The user's choice (once they click the modeToggle) is persisted
|
|
632
|
+
// to localStorage under the key "shadcn-ui-theme".
|
|
633
|
+
registerFramework(SdFramework({page: "app/main", theme: "system"}));
|
|
630
634
|
registerCard("app/main", /* … card def … */);
|
|
631
635
|
}
|
|
632
636
|
```
|
|
@@ -675,12 +679,13 @@ import {
|
|
|
675
679
|
PageWithNavbar,
|
|
676
680
|
onPageWithNavbarNavigateTo,
|
|
677
681
|
} from "@/cards/pageWithNavbar";
|
|
682
|
+
import {ModeToggle} from "@/cards/modeToggle";
|
|
678
683
|
import {memo, register, registerCard, registerFramework} from "@pihanga2/core";
|
|
679
684
|
import {SdFramework} from "@/cards/framework";
|
|
680
685
|
import type {AppState} from "@/app.state";
|
|
681
686
|
|
|
682
687
|
export function appPiInit(): void {
|
|
683
|
-
registerFramework(SdFramework({page: "app/main", theme: "
|
|
688
|
+
registerFramework(SdFramework({page: "app/main", theme: "system"}));
|
|
684
689
|
|
|
685
690
|
register((r) => {
|
|
686
691
|
onPageWithNavbarNavigateTo(r, (state: AppState, {id}) => {
|
|
@@ -688,6 +693,9 @@ export function appPiInit(): void {
|
|
|
688
693
|
});
|
|
689
694
|
});
|
|
690
695
|
|
|
696
|
+
// Register the theme toggle button and place it in the navbar
|
|
697
|
+
registerCard("app/mode-toggle", ModeToggle({}));
|
|
698
|
+
|
|
691
699
|
registerCard("app/main", PageWithNavbar({
|
|
692
700
|
title: "My App",
|
|
693
701
|
navLinks: [
|
|
@@ -698,6 +706,10 @@ export function appPiInit(): void {
|
|
|
698
706
|
(s: AppState) => s.currentPage ?? "home",
|
|
699
707
|
(page) => `app/page/${page}`, // resolves to "app/page/home" etc.
|
|
700
708
|
),
|
|
709
|
+
// ── Theme toggle in the top-right of the navbar header ─────────────────
|
|
710
|
+
// Clicking the Sun/Moon button toggles light ↔ dark and persists the
|
|
711
|
+
// choice to localStorage. Remove this line to hide the toggle.
|
|
712
|
+
headerRightCard: "app/mode-toggle",
|
|
701
713
|
}));
|
|
702
714
|
|
|
703
715
|
registerCard("app/page/home", /* … */);
|
|
@@ -794,7 +806,7 @@ const inits = [appPiInit, playgroundPiInit];
|
|
|
794
806
|
// registerFramework call from playgroundPiInit.
|
|
795
807
|
export function appPiInit(): void {
|
|
796
808
|
playgroundPiInit(); // no longer calls registerFramework
|
|
797
|
-
registerFramework(SdFramework({page: "app/main", theme: "
|
|
809
|
+
registerFramework(SdFramework({page: "app/main", theme: "system"}));
|
|
798
810
|
// …
|
|
799
811
|
}
|
|
800
812
|
```
|
package/README.md
CHANGED
|
@@ -62,7 +62,7 @@ import "@pihanga2/shadcn/cards/dataTable";
|
|
|
62
62
|
|
|
63
63
|
---
|
|
64
64
|
|
|
65
|
-
## Included cards (
|
|
65
|
+
## Included cards (45)
|
|
66
66
|
|
|
67
67
|
- `avatar`
|
|
68
68
|
- `badge`
|
|
@@ -84,6 +84,7 @@ import "@pihanga2/shadcn/cards/dataTable";
|
|
|
84
84
|
- `infoCard`
|
|
85
85
|
- `input`
|
|
86
86
|
- `jsonViewer`
|
|
87
|
+
- `keyboardOverlay`
|
|
87
88
|
- `list`
|
|
88
89
|
- `loadingOverlay`
|
|
89
90
|
- `loadingSkeleton`
|
|
@@ -101,6 +102,7 @@ import "@pihanga2/shadcn/cards/dataTable";
|
|
|
101
102
|
- `sliderValue`
|
|
102
103
|
- `stack`
|
|
103
104
|
- `stepper`
|
|
105
|
+
- `suspense`
|
|
104
106
|
- `switch`
|
|
105
107
|
- `tabs`
|
|
106
108
|
- `textField`
|
|
@@ -1,23 +1,41 @@
|
|
|
1
1
|
import { useBreakpoint as e, useContainerBreakpoint as t } from "../../components/hooks/use-breakpoint.js";
|
|
2
2
|
import * as n from "react";
|
|
3
3
|
import { Card as r } from "@pihanga2/core";
|
|
4
|
-
import {
|
|
4
|
+
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
5
5
|
//#region src/cards/conditional/conditional.component.tsx
|
|
6
|
-
var
|
|
7
|
-
let { cardName:
|
|
8
|
-
return
|
|
9
|
-
ref:
|
|
6
|
+
var s = (s) => {
|
|
7
|
+
let { cardName: c, show: l = !0, showOn: u, containerQuery: d = !1, content: f, alternativeContent: p, keepMounted: m = !1 } = s, h = n.useRef(null), g = e(d ? void 0 : u), _ = t(d ? u : void 0, h), v = l && (d ? _ : g);
|
|
8
|
+
return d ? /* @__PURE__ */ a("div", {
|
|
9
|
+
ref: h,
|
|
10
10
|
style: { width: "100%" },
|
|
11
|
-
children:
|
|
12
|
-
cardName:
|
|
13
|
-
parentCard:
|
|
11
|
+
children: v ? /* @__PURE__ */ a(r, {
|
|
12
|
+
cardName: f,
|
|
13
|
+
parentCard: c
|
|
14
|
+
}) : p && /* @__PURE__ */ a(r, {
|
|
15
|
+
cardName: p,
|
|
16
|
+
parentCard: c
|
|
14
17
|
})
|
|
15
|
-
}) : m ? /* @__PURE__ */ i(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
}) : m ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
|
|
19
|
+
style: { display: v ? "contents" : "none" },
|
|
20
|
+
children: /* @__PURE__ */ a(r, {
|
|
21
|
+
cardName: f,
|
|
22
|
+
parentCard: c
|
|
23
|
+
})
|
|
24
|
+
}), p && /* @__PURE__ */ a("div", {
|
|
25
|
+
style: { display: v ? "none" : "contents" },
|
|
26
|
+
children: /* @__PURE__ */ a(r, {
|
|
27
|
+
cardName: p,
|
|
28
|
+
parentCard: c
|
|
29
|
+
})
|
|
30
|
+
})] }) : v ? /* @__PURE__ */ a(r, {
|
|
31
|
+
cardName: f,
|
|
32
|
+
parentCard: c
|
|
33
|
+
}) : p ? /* @__PURE__ */ a(r, {
|
|
34
|
+
cardName: p,
|
|
35
|
+
parentCard: c
|
|
18
36
|
}) : null;
|
|
19
37
|
};
|
|
20
38
|
//#endregion
|
|
21
|
-
export {
|
|
39
|
+
export { s as ConditionalComponent };
|
|
22
40
|
|
|
23
41
|
//# sourceMappingURL=conditional.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conditional.component.js","names":[],"sources":["../../../src/cards/conditional/conditional.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n useBreakpoint,\n useContainerBreakpoint,\n} from \"@/components/hooks/use-breakpoint\";\nimport type {ConditionalProps} from \"./conditional.types\";\n\n/**\n * ConditionalComponent\n *\n * Renders the `content` card when the combined visibility condition is `true`,\n * returns `null` otherwise.\n *\n * Visibility rules (all must be satisfied):\n * 1. `show` — manual boolean gate (defaults to `true` when omitted)\n * 2. `showOn` — breakpoint selector (always `true` when omitted)\n * • `containerQuery: false` (default) → evaluated against the **viewport**\n * via `window.matchMedia`\n * • `containerQuery: true` → evaluated against the width of the\n * **enclosing container** via `ResizeObserver`; a thin `<div>` wrapper\n * is rendered so the container width can be measured\n *\n * Both hooks are always called unconditionally (React rules); whichever is not\n * \"active\" receives `undefined` and returns `true` immediately.\n */\nexport const ConditionalComponent = (\n props: PiCardProps<ConditionalProps>,\n): React.ReactNode => {\n const {\n cardName,\n show = true,\n showOn,\n containerQuery = false,\n content,\n } = props;\n\n // Ref for container-query mode — attached to the wrapper div.\n // Always created (hooks must not be conditional).\n const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n // Viewport breakpoint: active when containerQuery is false.\n const viewportMatch = useBreakpoint(containerQuery ? undefined : showOn);\n\n // Container breakpoint: active when containerQuery is true.\n const containerMatch = useContainerBreakpoint(\n containerQuery ? showOn : undefined,\n wrapperRef,\n );\n\n const breakpointMatch = containerQuery ? containerMatch : viewportMatch;\n const visible = show && breakpointMatch;\n\n // ── Container-query mode ─────────────────────────────────────────────────\n // Render a full-width wrapper so ResizeObserver has something to measure.\n // The wrapper is always in the DOM (measuring must be continuous), but the\n // content card inside it is mounted/unmounted based on `visible`.\n if (containerQuery) {\n return (\n <div ref={wrapperRef} style={{width: \"100%\"}}>\n {visible
|
|
1
|
+
{"version":3,"file":"conditional.component.js","names":[],"sources":["../../../src/cards/conditional/conditional.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n useBreakpoint,\n useContainerBreakpoint,\n} from \"@/components/hooks/use-breakpoint\";\nimport type {ConditionalProps} from \"./conditional.types\";\n\n/**\n * ConditionalComponent\n *\n * Renders the `content` card when the combined visibility condition is `true`,\n * returns `null` otherwise.\n *\n * Visibility rules (all must be satisfied):\n * 1. `show` — manual boolean gate (defaults to `true` when omitted)\n * 2. `showOn` — breakpoint selector (always `true` when omitted)\n * • `containerQuery: false` (default) → evaluated against the **viewport**\n * via `window.matchMedia`\n * • `containerQuery: true` → evaluated against the width of the\n * **enclosing container** via `ResizeObserver`; a thin `<div>` wrapper\n * is rendered so the container width can be measured\n *\n * Both hooks are always called unconditionally (React rules); whichever is not\n * \"active\" receives `undefined` and returns `true` immediately.\n */\nexport const ConditionalComponent = (\n props: PiCardProps<ConditionalProps>,\n): React.ReactNode => {\n const {\n cardName,\n show = true,\n showOn,\n containerQuery = false,\n content,\n alternativeContent,\n keepMounted = false,\n } = props;\n\n // Ref for container-query mode — attached to the wrapper div.\n // Always created (hooks must not be conditional).\n const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n // Viewport breakpoint: active when containerQuery is false.\n const viewportMatch = useBreakpoint(containerQuery ? undefined : showOn);\n\n // Container breakpoint: active when containerQuery is true.\n const containerMatch = useContainerBreakpoint(\n containerQuery ? showOn : undefined,\n wrapperRef,\n );\n\n const breakpointMatch = containerQuery ? containerMatch : viewportMatch;\n const visible = show && breakpointMatch;\n\n // ── Container-query mode ─────────────────────────────────────────────────\n // Render a full-width wrapper so ResizeObserver has something to measure.\n // The wrapper is always in the DOM (measuring must be continuous), but the\n // content card inside it is mounted/unmounted based on `visible`.\n if (containerQuery) {\n return (\n <div ref={wrapperRef} style={{width: \"100%\"}}>\n {visible ? (\n <Card cardName={content} parentCard={cardName} />\n ) : (\n alternativeContent && (\n <Card cardName={alternativeContent} parentCard={cardName} />\n )\n )}\n </div>\n );\n }\n\n // ── keepMounted mode ─────────────────────────────────────────────────────\n // Keep the subtree mounted at all times; toggle display so React never\n // destroys expensive components (e.g. Plate editors) on hide.\n // `display:contents` makes the wrapper transparent to layout when visible;\n // `display:none` hides it entirely when not.\n if (keepMounted) {\n return (\n <>\n <div style={{display: visible ? \"contents\" : \"none\"}}>\n <Card cardName={content} parentCard={cardName} />\n </div>\n {alternativeContent && (\n <div style={{display: visible ? \"none\" : \"contents\"}}>\n <Card cardName={alternativeContent} parentCard={cardName} />\n </div>\n )}\n </>\n );\n }\n\n // ── Viewport / manual mode ───────────────────────────────────────────────\n // Transparent pass-through — no extra DOM node.\n if (!visible) {\n return alternativeContent ? (\n <Card cardName={alternativeContent} parentCard={cardName} />\n ) : null;\n }\n return <Card cardName={content} parentCard={cardName} />;\n};\n"],"mappings":";;;;;AA0BA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,aACA,UAAO,IACP,WACA,oBAAiB,IACjB,YACA,uBACA,iBAAc,OACZ,GAIE,IAAa,EAAM,OAAuB,IAAI,GAG9C,IAAgB,EAAc,IAAiB,KAAA,IAAY,CAAM,GAGjE,IAAiB,EACrB,IAAiB,IAAS,KAAA,GAC1B,CACF,GAGM,IAAU,MADQ,IAAiB,IAAiB;CAgD1D,OAzCI,IAEA,kBAAC,OAAD;EAAK,KAAK;EAAY,OAAO,EAAC,OAAO,OAAM;YACxC,IACC,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAW,CAAA,IAEhD,KACE,kBAAC,GAAD;GAAM,UAAU;GAAoB,YAAY;EAAW,CAAA;CAG5D,CAAA,IASL,IAEA,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,OAAO,EAAC,SAAS,IAAU,aAAa,OAAM;YACjD,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAW,CAAA;CAC7C,CAAA,GACJ,KACC,kBAAC,OAAD;EAAK,OAAO,EAAC,SAAS,IAAU,SAAS,WAAU;YACjD,kBAAC,GAAD;GAAM,UAAU;GAAoB,YAAY;EAAW,CAAA;CACxD,CAAA,CAEP,EAAA,CAAA,IAMD,IAKE,kBAAC,GAAD;EAAM,UAAU;EAAS,YAAY;CAAW,CAAA,IAJ9C,IACL,kBAAC,GAAD;EAAM,UAAU;EAAoB,YAAY;CAAW,CAAA,IACzD;AAGR"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PiCardRef } from '@pihanga2/core';
|
|
2
|
-
export declare const CONDITIONAL_CARD = "
|
|
2
|
+
export declare const CONDITIONAL_CARD = "pi/conditional";
|
|
3
3
|
export declare const Conditional: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<ConditionalProps, S, {}>) => import('@pihanga2/core').PiCardDef;
|
|
4
4
|
/**
|
|
5
5
|
* Named Tailwind-compatible breakpoints.
|
|
@@ -94,6 +94,14 @@ export type BreakpointMap<T = string> = Partial<Record<BreakpointName, T>>;
|
|
|
94
94
|
* ```
|
|
95
95
|
*/
|
|
96
96
|
export type ConditionalProps = {
|
|
97
|
+
/** The card to render when the visibility condition is met. */
|
|
98
|
+
content: PiCardRef;
|
|
99
|
+
/**
|
|
100
|
+
* Optional fallback card to render when **all** visibility conditions
|
|
101
|
+
* (`show`, `showOn`) evaluate to `false`. When omitted, nothing is
|
|
102
|
+
* rendered in the hidden state (existing behaviour).
|
|
103
|
+
*/
|
|
104
|
+
alternativeContent?: PiCardRef;
|
|
97
105
|
/**
|
|
98
106
|
* Manual boolean gate. When omitted it defaults to `true` so that a
|
|
99
107
|
* `showOn`-only card does not need to set it explicitly.
|
|
@@ -131,6 +139,16 @@ export type ConditionalProps = {
|
|
|
131
139
|
* @default false
|
|
132
140
|
*/
|
|
133
141
|
containerQuery?: boolean;
|
|
134
|
-
/**
|
|
135
|
-
|
|
142
|
+
/**
|
|
143
|
+
* When `true`, the content card stays **mounted** even when the visibility
|
|
144
|
+
* condition is `false`. Instead of returning `null`, the component wraps
|
|
145
|
+
* the card in a `<div style="display:none">` (hidden) or
|
|
146
|
+
* `<div style="display:contents">` (transparent pass-through when visible).
|
|
147
|
+
*
|
|
148
|
+
* Use this for expensive subtrees — such as Plate editors — where
|
|
149
|
+
* remounting from scratch on every show/hide is too costly.
|
|
150
|
+
*
|
|
151
|
+
* @default false
|
|
152
|
+
*/
|
|
153
|
+
keepMounted?: boolean;
|
|
136
154
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conditional.types.js","names":[],"sources":["../../../src/cards/conditional/conditional.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\n// ── Card id ───────────────────────────────────────────────────────────────────\n\nexport const CONDITIONAL_CARD = \"
|
|
1
|
+
{"version":3,"file":"conditional.types.js","names":[],"sources":["../../../src/cards/conditional/conditional.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\n// ── Card id ───────────────────────────────────────────────────────────────────\n\nexport const CONDITIONAL_CARD = \"pi/conditional\";\n\n// ── Card declaration factory ──────────────────────────────────────────────────\n\nexport const Conditional =\n createCardDeclaration<ConditionalProps>(CONDITIONAL_CARD);\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\n/**\n * Named Tailwind-compatible breakpoints.\n *\n * `xs` → viewport < 640 px (mobile-first default)\n * `sm` → viewport ≥ 640 px\n * `md` → viewport ≥ 768 px\n * `lg` → viewport ≥ 1024 px\n * `xl` → viewport ≥ 1280 px\n * `2xl` → viewport ≥ 1536 px\n */\nexport type BreakpointName = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\n/**\n * A `BreakpointName` **or** a custom pixel expression.\n *\n * Pixel expressions\n * ─────────────────\n * `400px` → viewport ≥ 400 px (bare value = min-width)\n * `>=640px` → viewport ≥ 640 px\n * `>640px` → viewport > 640 px (min-width: 641px)\n * `<=1024px` → viewport ≤ 1024 px\n * `<1024px` → viewport < 1024 px (max-width: 1023px)\n */\nexport type BreakpointSelector =\n | BreakpointName\n | (string & Record<never, never>); // allows arbitrary strings with IDE hints\n\n/**\n * A partial map from each named breakpoint to a value of type `T`.\n *\n * Useful for props that need per-breakpoint configuration — e.g. the CSS\n * `display` value to apply at each viewport width.\n *\n * @example\n * ```ts\n * const display: BreakpointMap = { xs: \"none\", md: \"flex\" };\n * ```\n */\nexport type BreakpointMap<T = string> = Partial<Record<BreakpointName, T>>;\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * Props for the `shad/conditional` card.\n *\n * The card renders `content` only when the combined visibility condition is\n * `true`; it renders nothing otherwise. This is a transparent pass-through —\n * no extra DOM wrapper is added.\n *\n * ## Modes\n *\n * ### 1 · Manual boolean (existing behaviour)\n *\n * Drive `show` from a `memo()` selector so the card reactively mounts/unmounts\n * as state changes:\n *\n * ```ts\n * import {memo, registerCard} from \"@pihanga2/core\";\n * import {Conditional} from \"@/cards/conditional\";\n *\n * registerCard(\"myApp/hint\", Conditional({\n * show: memo((s: AppState) => s.items.length === 0 && !s.isLoading),\n * content: \"myApp/emptyStateHint\",\n * }));\n * ```\n *\n * ### 2 · Breakpoint-based auto-selection (new)\n *\n * Set `showOn` to a breakpoint name or pixel expression. The component\n * subscribes to `window.matchMedia` and automatically mounts/unmounts the\n * content card as the viewport crosses the breakpoint — no state, no memo:\n *\n * ```ts\n * // Show only on tablet-sized screens and up\n * registerCard(\"myApp/sidebar\", Conditional({\n * showOn: \"md\",\n * content: \"myApp/desktopSidebar\",\n * }));\n *\n * // Show only on narrow viewports (mobile drawer)\n * registerCard(\"myApp/mobileNav\", Conditional({\n * showOn: \"<768px\",\n * content: \"myApp/drawer\",\n * }));\n * ```\n *\n * ### 3 · Combined\n *\n * Both conditions are ANDed — content renders only when the breakpoint matches\n * **and** `show` is `true`:\n *\n * ```ts\n * registerCard(\"myApp/adminSidebar\", Conditional({\n * show: memo((s: AppState) => s.isAdmin),\n * showOn: \"lg\",\n * content: \"myApp/adminPanel\",\n * }));\n * ```\n */\nexport type ConditionalProps = {\n /** The card to render when the visibility condition is met. */\n content: PiCardRef;\n\n /**\n * Optional fallback card to render when **all** visibility conditions\n * (`show`, `showOn`) evaluate to `false`. When omitted, nothing is\n * rendered in the hidden state (existing behaviour).\n */\n alternativeContent?: PiCardRef;\n\n /**\n * Manual boolean gate. When omitted it defaults to `true` so that a\n * `showOn`-only card does not need to set it explicitly.\n *\n * Drive with `memo()` for reactive mount/unmount behaviour.\n */\n show?: boolean;\n\n /**\n * Viewport-width breakpoint selector. When set, the component subscribes\n * to `window.matchMedia` and reactively shows/hides the content card\n * whenever the viewport crosses the breakpoint.\n *\n * Supported values: `xs` | `sm` | `md` | `lg` | `xl` | `2xl` (Tailwind),\n * or pixel expressions such as `>400px`, `>=640px`, `<768px`, `<=1024px`,\n * `400px`.\n *\n * When both `show` and `showOn` are provided the content is rendered only\n * when **both** conditions are satisfied.\n *\n * By default the breakpoint is evaluated against the **viewport** width via\n * `window.matchMedia`. Set `containerQuery: true` to evaluate it against\n * the width of the **enclosing container** instead (uses `ResizeObserver`).\n */\n showOn?: BreakpointSelector;\n\n /**\n * When `true`, the `showOn` breakpoint is measured against the width of the\n * component's **enclosing container** rather than the viewport.\n *\n * Internally the component renders a transparent `<div style=\"width:100%\">`\n * wrapper and observes it with `ResizeObserver`. This means a single extra\n * DOM node is added when `containerQuery` is `true`.\n *\n * Has no effect when `showOn` is not set.\n *\n * @default false\n */\n containerQuery?: boolean;\n\n /**\n * When `true`, the content card stays **mounted** even when the visibility\n * condition is `false`. Instead of returning `null`, the component wraps\n * the card in a `<div style=\"display:none\">` (hidden) or\n * `<div style=\"display:contents\">` (transparent pass-through when visible).\n *\n * Use this for expensive subtrees — such as Plate editors — where\n * remounting from scratch on every show/hide is too costly.\n *\n * @default false\n */\n keepMounted?: boolean;\n};\n"],"mappings":";;AAKA,IAAa,IAAmB,kBAInB,IACX,EAAwC,CAAgB"}
|
|
@@ -1,90 +1,105 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getIcon as e } from "../icons.js";
|
|
2
|
+
import { DEF_FILE_DROP_FILE_TYPES as t, getFileDropTheme as n } from "./fileDrop.types.js";
|
|
2
3
|
import './fileDrop.css';/* empty css */
|
|
3
4
|
import "react";
|
|
4
|
-
import { jsx as
|
|
5
|
-
import { FileUploader as
|
|
5
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
6
|
+
import { FileUploader as a } from "react-drag-drop-files";
|
|
6
7
|
//#region src/cards/fileDrop/fileDrop.component.tsx
|
|
7
|
-
var
|
|
8
|
-
function
|
|
9
|
-
let t =
|
|
8
|
+
var o = Symbol.for("pihanga.card.FileDrop.LastDropped"), s = globalThis;
|
|
9
|
+
function c(e) {
|
|
10
|
+
let t = s[o] ??= null;
|
|
10
11
|
return t?.name === e ? t.file : null;
|
|
11
12
|
}
|
|
12
|
-
function
|
|
13
|
-
|
|
13
|
+
function l(e) {
|
|
14
|
+
s[o] = e;
|
|
14
15
|
}
|
|
15
|
-
function
|
|
16
|
-
|
|
16
|
+
function u() {
|
|
17
|
+
s[o] = null;
|
|
17
18
|
}
|
|
18
|
-
var
|
|
19
|
-
let { fileTypes:
|
|
20
|
-
|
|
19
|
+
var d = (o) => {
|
|
20
|
+
let { fileTypes: s = t, title: c = "Click or drop a file right here", description: d, showProgress: f = !1, progress: p = 0, progressStyle: m = {}, dropStyle: h = {}, icon: g, iconProps: _, browseLabel: v, onFileDropped: y, onError: b, cardName: x, theme: S, classNames: C, className: w, _cls: T } = o, E = {
|
|
21
|
+
...S ? n(S) : {},
|
|
22
|
+
...C
|
|
23
|
+
};
|
|
24
|
+
function D(e) {
|
|
21
25
|
let t = Array.isArray(e) ? e[0] : e;
|
|
22
26
|
if (!t) return;
|
|
23
27
|
let { name: n, size: r, type: i } = t;
|
|
24
|
-
|
|
28
|
+
l({
|
|
25
29
|
name: n,
|
|
26
30
|
file: t
|
|
27
|
-
}),
|
|
31
|
+
}), y({
|
|
28
32
|
name: n,
|
|
29
33
|
size: r,
|
|
30
34
|
type: i
|
|
31
|
-
}), setTimeout(
|
|
35
|
+
}), setTimeout(u, 2e3);
|
|
32
36
|
}
|
|
33
|
-
function
|
|
34
|
-
|
|
37
|
+
function O(e) {
|
|
38
|
+
b({ error: String(e) });
|
|
35
39
|
}
|
|
36
|
-
function
|
|
37
|
-
let e = `${
|
|
40
|
+
function k() {
|
|
41
|
+
let e = `${p}%`, t = `${e} Complete`, n = {
|
|
38
42
|
width: "50%",
|
|
39
|
-
...
|
|
43
|
+
...m
|
|
40
44
|
};
|
|
41
|
-
return /* @__PURE__ */
|
|
45
|
+
return /* @__PURE__ */ i("div", {
|
|
42
46
|
className: "pi-progress",
|
|
43
|
-
children: [/* @__PURE__ */
|
|
47
|
+
children: [/* @__PURE__ */ r("div", {
|
|
44
48
|
className: "pi-progress-label",
|
|
45
49
|
children: e
|
|
46
|
-
}), /* @__PURE__ */
|
|
50
|
+
}), /* @__PURE__ */ r("div", {
|
|
47
51
|
className: "pi-progress-container",
|
|
48
|
-
style:
|
|
49
|
-
children: /* @__PURE__ */
|
|
52
|
+
style: n,
|
|
53
|
+
children: /* @__PURE__ */ r("div", {
|
|
50
54
|
className: "pi-progress-bar",
|
|
51
55
|
style: { width: e },
|
|
52
56
|
role: "progressbar",
|
|
53
|
-
"aria-label":
|
|
57
|
+
"aria-label": t
|
|
54
58
|
})
|
|
55
59
|
})]
|
|
56
60
|
});
|
|
57
61
|
}
|
|
58
|
-
function
|
|
59
|
-
return /* @__PURE__ */
|
|
60
|
-
className: "dropzone-msg",
|
|
61
|
-
style:
|
|
62
|
-
children: [
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
62
|
+
function A() {
|
|
63
|
+
return /* @__PURE__ */ i("div", {
|
|
64
|
+
className: ["dropzone-msg", E.dropZone].filter(Boolean).join(" "),
|
|
65
|
+
style: h,
|
|
66
|
+
children: [
|
|
67
|
+
g && /* @__PURE__ */ r("div", {
|
|
68
|
+
className: E.icon,
|
|
69
|
+
children: e(g, _)
|
|
70
|
+
}),
|
|
71
|
+
c && /* @__PURE__ */ r("h3", {
|
|
72
|
+
className: ["dropzone-msg-title", E.title].filter(Boolean).join(" "),
|
|
73
|
+
children: c
|
|
74
|
+
}),
|
|
75
|
+
d && /* @__PURE__ */ r("span", {
|
|
76
|
+
className: ["dropzone-msg-desc", E.description].filter(Boolean).join(" "),
|
|
77
|
+
children: d
|
|
78
|
+
}),
|
|
79
|
+
v && /* @__PURE__ */ r("div", {
|
|
80
|
+
className: E.browseButton,
|
|
81
|
+
children: v
|
|
82
|
+
})
|
|
83
|
+
]
|
|
69
84
|
});
|
|
70
85
|
}
|
|
71
|
-
function
|
|
72
|
-
return /* @__PURE__ */
|
|
73
|
-
handleChange:
|
|
74
|
-
onTypeError:
|
|
86
|
+
function j() {
|
|
87
|
+
return /* @__PURE__ */ r(a, {
|
|
88
|
+
handleChange: D,
|
|
89
|
+
onTypeError: O,
|
|
75
90
|
name: "file",
|
|
76
|
-
types:
|
|
91
|
+
types: s,
|
|
77
92
|
hoverTitle: " ",
|
|
78
|
-
children:
|
|
93
|
+
children: A()
|
|
79
94
|
});
|
|
80
95
|
}
|
|
81
|
-
return /* @__PURE__ */
|
|
82
|
-
className:
|
|
83
|
-
"data-pihanga":
|
|
84
|
-
children:
|
|
96
|
+
return /* @__PURE__ */ r("div", {
|
|
97
|
+
className: T("root", E.root ?? w),
|
|
98
|
+
"data-pihanga": x,
|
|
99
|
+
children: f ? k() : j()
|
|
85
100
|
});
|
|
86
101
|
};
|
|
87
102
|
//#endregion
|
|
88
|
-
export {
|
|
103
|
+
export { d as FileDropComponent, c as get_last_dropped };
|
|
89
104
|
|
|
90
105
|
//# sourceMappingURL=fileDrop.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fileDrop.component.js","names":[],"sources":["../../../src/cards/fileDrop/fileDrop.component.tsx"],"sourcesContent":["import React from \"react\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport {FileUploader} from \"react-drag-drop-files\";\nimport {\n DEF_FILE_DROP_FILE_TYPES,\n type FileDropEvents,\n type FileDropProps,\n} from \"./fileDrop.types\";\nimport \"./fileDrop.css\";\n\ntype LastDropped = {name: string; file: File};\n\nconst KEY = Symbol.for(\"pihanga.card.FileDrop.LastDropped\");\n\nconst globalForCache = globalThis as unknown as Record<\n symbol,\n LastDropped | null | undefined\n>;\n\nexport function get_last_dropped(name: string): File | null {\n const slot = (globalForCache[KEY] ??= null);\n if (slot?.name === name) {\n return slot.file;\n }\n return null;\n}\n\nfunction setLastDropped(value: LastDropped): void {\n globalForCache[KEY] = value;\n}\n\nfunction clearLastDropped(): void {\n globalForCache[KEY] = null;\n}\n\nexport const FileDropComponent = (\n props: PiCardProps<FileDropProps, FileDropEvents>,\n): React.ReactNode => {\n const {\n fileTypes = DEF_FILE_DROP_FILE_TYPES,\n title = \"Click or drop a file right here\",\n description,\n showProgress = false,\n progress = 0,\n progressStyle = {},\n dropStyle = {},\n onFileDropped,\n onError,\n cardName,\n className,\n _cls,\n } = props;\n\n function handleChange(file: File | File[]): void {\n const f = Array.isArray(file) ? file[0] : file;\n if (!f) return;\n const {name, size, type} = f;\n setLastDropped({name, file: f});\n onFileDropped({name, size, type});\n // clean up reference to File in a few sec to avoid dangling reference\n setTimeout(clearLastDropped, 2000);\n }\n\n function handleTypeError(err: unknown): void {\n onError({error: String(err)});\n }\n\n function renderProgress(): React.ReactNode {\n const label = `${progress}%`;\n const msg = `${label} Complete`;\n const containerStyle = {width: \"50%\", ...progressStyle};\n return (\n <div className=\"pi-progress\">\n <div className=\"pi-progress-label\">{label}</div>\n <div\n className=\"pi-progress-container\"\n style={containerStyle as React.CSSProperties}\n >\n <div\n className=\"pi-progress-bar\"\n style={{width: label}}\n role=\"progressbar\"\n aria-label={msg}\n />\n </div>\n </div>\n );\n }\n\n function renderDropZone(): React.ReactElement {\n return (\n <div className
|
|
1
|
+
{"version":3,"file":"fileDrop.component.js","names":[],"sources":["../../../src/cards/fileDrop/fileDrop.component.tsx"],"sourcesContent":["import React from \"react\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport {FileUploader} from \"react-drag-drop-files\";\nimport {\n DEF_FILE_DROP_FILE_TYPES,\n getFileDropTheme,\n type FileDropEvents,\n type FileDropProps,\n} from \"./fileDrop.types\";\nimport {getIcon} from \"../icons\";\nimport \"./fileDrop.css\";\n\ntype LastDropped = {name: string; file: File};\n\nconst KEY = Symbol.for(\"pihanga.card.FileDrop.LastDropped\");\n\nconst globalForCache = globalThis as unknown as Record<\n symbol,\n LastDropped | null | undefined\n>;\n\nexport function get_last_dropped(name: string): File | null {\n const slot = (globalForCache[KEY] ??= null);\n if (slot?.name === name) {\n return slot.file;\n }\n return null;\n}\n\nfunction setLastDropped(value: LastDropped): void {\n globalForCache[KEY] = value;\n}\n\nfunction clearLastDropped(): void {\n globalForCache[KEY] = null;\n}\n\nexport const FileDropComponent = (\n props: PiCardProps<FileDropProps, FileDropEvents>,\n): React.ReactNode => {\n const {\n fileTypes = DEF_FILE_DROP_FILE_TYPES,\n title = \"Click or drop a file right here\",\n description,\n showProgress = false,\n progress = 0,\n progressStyle = {},\n dropStyle = {},\n icon,\n iconProps,\n browseLabel,\n onFileDropped,\n onError,\n cardName,\n theme,\n classNames,\n className,\n _cls,\n } = props;\n\n // Merge theme (base) with per-card classNames (overrides)\n const cn = {...(theme ? getFileDropTheme(theme) : {}), ...classNames};\n\n function handleChange(file: File | File[]): void {\n const f = Array.isArray(file) ? file[0] : file;\n if (!f) return;\n const {name, size, type} = f;\n setLastDropped({name, file: f});\n onFileDropped({name, size, type});\n // clean up reference to File in a few sec to avoid dangling reference\n setTimeout(clearLastDropped, 2000);\n }\n\n function handleTypeError(err: unknown): void {\n onError({error: String(err)});\n }\n\n function renderProgress(): React.ReactNode {\n const label = `${progress}%`;\n const msg = `${label} Complete`;\n const containerStyle = {width: \"50%\", ...progressStyle};\n return (\n <div className=\"pi-progress\">\n <div className=\"pi-progress-label\">{label}</div>\n <div\n className=\"pi-progress-container\"\n style={containerStyle as React.CSSProperties}\n >\n <div\n className=\"pi-progress-bar\"\n style={{width: label}}\n role=\"progressbar\"\n aria-label={msg}\n />\n </div>\n </div>\n );\n }\n\n function renderDropZone(): React.ReactElement {\n const dzCn = [\"dropzone-msg\", cn.dropZone].filter(Boolean).join(\" \");\n return (\n <div className={dzCn} style={dropStyle as React.CSSProperties}>\n {icon && <div className={cn.icon}>{getIcon(icon, iconProps)}</div>}\n {title && (\n <h3\n className={[\"dropzone-msg-title\", cn.title]\n .filter(Boolean)\n .join(\" \")}\n >\n {title}\n </h3>\n )}\n {description && (\n <span\n className={[\"dropzone-msg-desc\", cn.description]\n .filter(Boolean)\n .join(\" \")}\n >\n {description}\n </span>\n )}\n {browseLabel && <div className={cn.browseButton}>{browseLabel}</div>}\n </div>\n );\n }\n\n function renderFileUploader(): React.ReactNode {\n return (\n <FileUploader\n handleChange={handleChange}\n onTypeError={handleTypeError}\n name=\"file\"\n types={fileTypes}\n hoverTitle=\" \"\n >\n {renderDropZone()}\n </FileUploader>\n );\n }\n\n // classNames.root takes precedence over the legacy className prop\n const rootCn = _cls(\"root\", cn.root ?? className);\n return (\n <div className={rootCn} data-pihanga={cardName}>\n {showProgress ? renderProgress() : renderFileUploader()}\n </div>\n );\n};\n"],"mappings":";;;;;;;AAcA,IAAM,IAAM,OAAO,IAAI,mCAAmC,GAEpD,IAAiB;AAKvB,SAAgB,EAAiB,GAA2B;CAC1D,IAAM,IAAQ,EAAe,OAAS;CAItC,OAHI,GAAM,SAAS,IACV,EAAK,OAEP;AACT;AAEA,SAAS,EAAe,GAA0B;CAChD,EAAe,KAAO;AACxB;AAEA,SAAS,IAAyB;CAChC,EAAe,KAAO;AACxB;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,eAAY,GACZ,WAAQ,mCACR,gBACA,kBAAe,IACf,cAAW,GACX,mBAAgB,CAAC,GACjB,eAAY,CAAC,GACb,SACA,cACA,gBACA,kBACA,YACA,aACA,UACA,eACA,cACA,YACE,GAGE,IAAK;EAAC,GAAI,IAAQ,EAAiB,CAAK,IAAI,CAAC;EAAI,GAAG;CAAU;CAEpE,SAAS,EAAa,GAA2B;EAC/C,IAAM,IAAI,MAAM,QAAQ,CAAI,IAAI,EAAK,KAAK;EAC1C,IAAI,CAAC,GAAG;EACR,IAAM,EAAC,SAAM,SAAM,YAAQ;EAI3B,AAHA,EAAe;GAAC;GAAM,MAAM;EAAC,CAAC,GAC9B,EAAc;GAAC;GAAM;GAAM;EAAI,CAAC,GAEhC,WAAW,GAAkB,GAAI;CACnC;CAEA,SAAS,EAAgB,GAAoB;EAC3C,EAAQ,EAAC,OAAO,OAAO,CAAG,EAAC,CAAC;CAC9B;CAEA,SAAS,IAAkC;EACzC,IAAM,IAAQ,GAAG,EAAS,IACpB,IAAM,GAAG,EAAM,YACf,IAAiB;GAAC,OAAO;GAAO,GAAG;EAAa;EACtD,OACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAqB;GAAW,CAAA,GAC/C,kBAAC,OAAD;IACE,WAAU;IACV,OAAO;cAEP,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAC,OAAO,EAAK;KACpB,MAAK;KACL,cAAY;IACb,CAAA;GACE,CAAA,CACF;;CAET;CAEA,SAAS,IAAqC;EAE5C,OACE,kBAAC,OAAD;GAAK,WAFM,CAAC,gBAAgB,EAAG,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,GAE9C;GAAM,OAAO;aAA7B;IACG,KAAQ,kBAAC,OAAD;KAAK,WAAW,EAAG;eAAO,EAAQ,GAAM,CAAS;IAAO,CAAA;IAChE,KACC,kBAAC,MAAD;KACE,WAAW,CAAC,sBAAsB,EAAG,KAAK,EACvC,OAAO,OAAO,EACd,KAAK,GAAG;eAEV;IACC,CAAA;IAEL,KACC,kBAAC,QAAD;KACE,WAAW,CAAC,qBAAqB,EAAG,WAAW,EAC5C,OAAO,OAAO,EACd,KAAK,GAAG;eAEV;IACG,CAAA;IAEP,KAAe,kBAAC,OAAD;KAAK,WAAW,EAAG;eAAe;IAAiB,CAAA;GAChE;;CAET;CAEA,SAAS,IAAsC;EAC7C,OACE,kBAAC,GAAD;GACgB;GACd,aAAa;GACb,MAAK;GACL,OAAO;GACP,YAAW;aAEV,EAAe;EACJ,CAAA;CAElB;CAIA,OACE,kBAAC,OAAD;EAAK,WAFQ,EAAK,QAAQ,EAAG,QAAQ,CAErB;EAAQ,gBAAc;YACnC,IAAe,EAAe,IAAI,EAAmB;CACnD,CAAA;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pi-file-drop-root label{border:2px
|
|
1
|
+
.pi-file-drop-root label{border:dashed 2px var(--border);flex-grow:1;justify-content:space-between;max-width:100%;display:flex}.pi-file-drop-root .dropzone-msg{cursor:pointer;text-align:center;flex-grow:4;margin:3em 0}.pi-file-drop-root .pi-progress{max-width:100%;padding:1.25em}.pi-file-drop-root .pi-progress-label{font-size:1rem;font-weight:600;line-height:1.5rem}.pi-file-drop-root.pi-progress-container{border-radius:var(--radius-sm);background-color:var(--muted);height:1rem;display:flex;position:relative;overflow:hidden}.pi-file-drop-root .pi-progress-bar{background-color:var(--primary);color:var(--primary-foreground);flex-direction:column;justify-content:center;display:flex;overflow:hidden}.pi-file-drop-root .pi-progress .label{font-size:1em;display:block}
|
|
@@ -10,6 +10,38 @@ export declare const onFileDropped: <S extends import('@pihanga2/core').ReduxSta
|
|
|
10
10
|
export declare const onFileDropError: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
|
|
11
11
|
cardID: string;
|
|
12
12
|
} & FileDropErrorEvent>) => void;
|
|
13
|
+
/** Per-element Tailwind / CSS class overrides for the FileDrop card. */
|
|
14
|
+
export type FileDropClassNames = {
|
|
15
|
+
/** Outermost wrapper `<div>`. Overrides the legacy `className` prop. */
|
|
16
|
+
root?: string;
|
|
17
|
+
/** Inner drop-zone content wrapper `<div>`. */
|
|
18
|
+
dropZone?: string;
|
|
19
|
+
/** Icon wrapper `<div>`. */
|
|
20
|
+
icon?: string;
|
|
21
|
+
/** `<h3>` title element. */
|
|
22
|
+
title?: string;
|
|
23
|
+
/** Description `<span>`. */
|
|
24
|
+
description?: string;
|
|
25
|
+
/** Browse-button `<div>`. */
|
|
26
|
+
browseButton?: string;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Register a named FileDrop theme.
|
|
30
|
+
* Use the returned name string as the `theme` prop on a `FileDrop` card.
|
|
31
|
+
* Per-card `classNames` always override the theme.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```ts
|
|
35
|
+
* export const UPLOAD_THEME = registerFileDropTheme("upload-card", {
|
|
36
|
+
* root: "flex items-center justify-center p-8 rounded-2xl border border-dashed ...",
|
|
37
|
+
* dropZone: "flex flex-col items-center gap-3 text-center",
|
|
38
|
+
* ...
|
|
39
|
+
* });
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
42
|
+
export declare function registerFileDropTheme(name: string, classNames: FileDropClassNames): string;
|
|
43
|
+
/** Resolve a registered theme by name. Returns `undefined` for unknown names. */
|
|
44
|
+
export declare function getFileDropTheme(name: string): FileDropClassNames | undefined;
|
|
13
45
|
export type FileDropProps<S = Record<string, unknown>> = {
|
|
14
46
|
/** Accepted file extensions, e.g. ["JPG", "PNG", "PDF"]. Defaults to ["JPG", "PNG", "GIF"]. */
|
|
15
47
|
fileTypes?: string[];
|
|
@@ -25,7 +57,24 @@ export type FileDropProps<S = Record<string, unknown>> = {
|
|
|
25
57
|
progressStyle?: Record<string, unknown>;
|
|
26
58
|
/** Current upload progress (0–100). Only used when `showProgress` is true. */
|
|
27
59
|
progress?: number;
|
|
60
|
+
/** Registered icon name (see src/pihanga/icons.ts) rendered above the title. */
|
|
61
|
+
icon?: string;
|
|
62
|
+
/** Extra props forwarded to the icon element (e.g. `{ className: "size-6" }`). */
|
|
63
|
+
iconProps?: Record<string, any>;
|
|
64
|
+
/** Label for the browse-files button. When omitted the button is not rendered. */
|
|
65
|
+
browseLabel?: string;
|
|
28
66
|
style?: S;
|
|
67
|
+
/**
|
|
68
|
+
* Name of a pre-registered theme (see `registerFileDropTheme`).
|
|
69
|
+
* Per-card `classNames` always override the theme on a key-by-key basis.
|
|
70
|
+
*/
|
|
71
|
+
theme?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Per-element class overrides. Merged on top of any resolved `theme`.
|
|
74
|
+
* `classNames.root` takes precedence over the legacy `className` prop.
|
|
75
|
+
*/
|
|
76
|
+
classNames?: FileDropClassNames;
|
|
77
|
+
/** @deprecated Prefer `classNames.root`. Kept for backward compatibility. */
|
|
29
78
|
className?: string;
|
|
30
79
|
};
|
|
31
80
|
export declare const DEF_FILE_DROP_FILE_TYPES: string[];
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
|
|
2
2
|
//#region src/cards/fileDrop/fileDrop.types.ts
|
|
3
|
-
var r = "shad/file-drop", i = e(r), a = n(r, ["file_dropped", "error"]), o = t(a.FILE_DROPPED), s = t(a.ERROR), c =
|
|
3
|
+
var r = "shad/file-drop", i = e(r), a = n(r, ["file_dropped", "error"]), o = t(a.FILE_DROPPED), s = t(a.ERROR), c = {};
|
|
4
|
+
function l(e, t) {
|
|
5
|
+
return c[e] !== void 0 && console.warn(`FileDrop theme '${e}' is already registered — overwriting`), c[e] = t, e;
|
|
6
|
+
}
|
|
7
|
+
function u(e) {
|
|
8
|
+
return c[e];
|
|
9
|
+
}
|
|
10
|
+
var d = [
|
|
4
11
|
"JPG",
|
|
5
12
|
"PNG",
|
|
6
13
|
"GIF"
|
|
7
14
|
];
|
|
8
15
|
//#endregion
|
|
9
|
-
export {
|
|
16
|
+
export { d as DEF_FILE_DROP_FILE_TYPES, a as FILE_DROP_ACTION, r as FILE_DROP_CARD, i as FileDrop, u as getFileDropTheme, s as onFileDropError, o as onFileDropped, l as registerFileDropTheme };
|
|
10
17
|
|
|
11
18
|
//# sourceMappingURL=fileDrop.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fileDrop.types.js","names":[],"sources":["../../../src/cards/fileDrop/fileDrop.types.ts"],"sourcesContent":["import {\n createCardDeclaration,\n createOnAction,\n registerActions,\n} from \"@pihanga2/core\";\n\nexport const FILE_DROP_CARD = \"shad/file-drop\";\n\nexport const FileDrop = createCardDeclaration<FileDropProps, FileDropEvents>(\n FILE_DROP_CARD,\n);\n\nexport const FILE_DROP_ACTION = registerActions(FILE_DROP_CARD, [\n \"file_dropped\",\n \"error\",\n]);\n\nexport const onFileDropped = createOnAction<FileDroppedEvent>(\n FILE_DROP_ACTION.FILE_DROPPED,\n);\n\nexport const onFileDropError = createOnAction<FileDropErrorEvent>(\n FILE_DROP_ACTION.ERROR,\n);\n\nexport type FileDropProps<S = Record<string, unknown>> = {\n /** Accepted file extensions, e.g. [\"JPG\", \"PNG\", \"PDF\"]. Defaults to [\"JPG\", \"PNG\", \"GIF\"]. */\n fileTypes?: string[];\n /** Heading shown inside the drop zone. */\n title?: string;\n /** Secondary text shown inside the drop zone. */\n description?: string;\n /** When true, shows a progress bar instead of the drop zone. */\n showProgress?: boolean;\n /** Inline styles applied to the drop zone wrapper. */\n dropStyle?: Record<string, unknown>;\n /** Inline styles applied to the progress bar container. */\n progressStyle?: Record<string, unknown>;\n /** Current upload progress (0–100). Only used when `showProgress` is true. */\n progress?: number;\n\n style?: S;\n className?: string;\n};\n\nexport const DEF_FILE_DROP_FILE_TYPES = [\"JPG\", \"PNG\", \"GIF\"];\n\nexport type FileDroppedEvent = {\n name: string;\n size: number;\n type: string;\n};\n\nexport type FileDropErrorEvent = {\n error: string;\n};\n\nexport type FileDropEvents = {\n onFileDropped: FileDroppedEvent;\n onError: FileDropErrorEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,kBAEjB,IAAW,EACtB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAC9D,gBACA,OACF,CAAC,GAEY,IAAgB,EAC3B,EAAiB,YACnB,GAEa,IAAkB,EAC7B,EAAiB,KACnB,
|
|
1
|
+
{"version":3,"file":"fileDrop.types.js","names":[],"sources":["../../../src/cards/fileDrop/fileDrop.types.ts"],"sourcesContent":["import {\n createCardDeclaration,\n createOnAction,\n registerActions,\n} from \"@pihanga2/core\";\n\nexport const FILE_DROP_CARD = \"shad/file-drop\";\n\nexport const FileDrop = createCardDeclaration<FileDropProps, FileDropEvents>(\n FILE_DROP_CARD,\n);\n\nexport const FILE_DROP_ACTION = registerActions(FILE_DROP_CARD, [\n \"file_dropped\",\n \"error\",\n]);\n\nexport const onFileDropped = createOnAction<FileDroppedEvent>(\n FILE_DROP_ACTION.FILE_DROPPED,\n);\n\nexport const onFileDropError = createOnAction<FileDropErrorEvent>(\n FILE_DROP_ACTION.ERROR,\n);\n\n/** Per-element Tailwind / CSS class overrides for the FileDrop card. */\nexport type FileDropClassNames = {\n /** Outermost wrapper `<div>`. Overrides the legacy `className` prop. */\n root?: string;\n /** Inner drop-zone content wrapper `<div>`. */\n dropZone?: string;\n /** Icon wrapper `<div>`. */\n icon?: string;\n /** `<h3>` title element. */\n title?: string;\n /** Description `<span>`. */\n description?: string;\n /** Browse-button `<div>`. */\n browseButton?: string;\n};\n\n// ── Theme registry ───────────────────────────────────────────────────────────\n\nconst _fileDropThemes: Record<string, FileDropClassNames> = {};\n\n/**\n * Register a named FileDrop theme.\n * Use the returned name string as the `theme` prop on a `FileDrop` card.\n * Per-card `classNames` always override the theme.\n *\n * @example\n * ```ts\n * export const UPLOAD_THEME = registerFileDropTheme(\"upload-card\", {\n * root: \"flex items-center justify-center p-8 rounded-2xl border border-dashed ...\",\n * dropZone: \"flex flex-col items-center gap-3 text-center\",\n * ...\n * });\n * ```\n */\nexport function registerFileDropTheme(\n name: string,\n classNames: FileDropClassNames,\n): string {\n if (_fileDropThemes[name] !== undefined) {\n console.warn(\n `FileDrop theme '${name}' is already registered — overwriting`,\n );\n }\n _fileDropThemes[name] = classNames;\n return name;\n}\n\n/** Resolve a registered theme by name. Returns `undefined` for unknown names. */\nexport function getFileDropTheme(name: string): FileDropClassNames | undefined {\n return _fileDropThemes[name];\n}\n\nexport type FileDropProps<S = Record<string, unknown>> = {\n /** Accepted file extensions, e.g. [\"JPG\", \"PNG\", \"PDF\"]. Defaults to [\"JPG\", \"PNG\", \"GIF\"]. */\n fileTypes?: string[];\n /** Heading shown inside the drop zone. */\n title?: string;\n /** Secondary text shown inside the drop zone. */\n description?: string;\n /** When true, shows a progress bar instead of the drop zone. */\n showProgress?: boolean;\n /** Inline styles applied to the drop zone wrapper. */\n dropStyle?: Record<string, unknown>;\n /** Inline styles applied to the progress bar container. */\n progressStyle?: Record<string, unknown>;\n /** Current upload progress (0–100). Only used when `showProgress` is true. */\n progress?: number;\n\n /** Registered icon name (see src/pihanga/icons.ts) rendered above the title. */\n icon?: string;\n /** Extra props forwarded to the icon element (e.g. `{ className: \"size-6\" }`). */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n iconProps?: Record<string, any>;\n /** Label for the browse-files button. When omitted the button is not rendered. */\n browseLabel?: string;\n\n style?: S;\n /**\n * Name of a pre-registered theme (see `registerFileDropTheme`).\n * Per-card `classNames` always override the theme on a key-by-key basis.\n */\n theme?: string;\n /**\n * Per-element class overrides. Merged on top of any resolved `theme`.\n * `classNames.root` takes precedence over the legacy `className` prop.\n */\n classNames?: FileDropClassNames;\n /** @deprecated Prefer `classNames.root`. Kept for backward compatibility. */\n className?: string;\n};\n\nexport const DEF_FILE_DROP_FILE_TYPES = [\"JPG\", \"PNG\", \"GIF\"];\n\nexport type FileDroppedEvent = {\n name: string;\n size: number;\n type: string;\n};\n\nexport type FileDropErrorEvent = {\n error: string;\n};\n\nexport type FileDropEvents = {\n onFileDropped: FileDroppedEvent;\n onError: FileDropErrorEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,kBAEjB,IAAW,EACtB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAC9D,gBACA,OACF,CAAC,GAEY,IAAgB,EAC3B,EAAiB,YACnB,GAEa,IAAkB,EAC7B,EAAiB,KACnB,GAoBM,IAAsD,CAAC;AAgB7D,SAAgB,EACd,GACA,GACQ;CAOR,OANI,EAAgB,OAAU,KAAA,KAC5B,QAAQ,KACN,mBAAmB,EAAK,sCAC1B,GAEF,EAAgB,KAAQ,GACjB;AACT;AAGA,SAAgB,EAAiB,GAA8C;CAC7E,OAAO,EAAgB;AACzB;AAyCA,IAAa,IAA2B;CAAC;CAAO;CAAO;AAAK"}
|