@xenide-io/the-old-ui-theme 0.5.3 → 0.5.4
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/dist/{index-Od4pIP4F.d.mts → Chip-C5hRFAhe.d.mts} +10 -606
- package/dist/{index-Od4pIP4F.d.ts → Chip-C5hRFAhe.d.ts} +10 -606
- package/dist/{chunk-G53YLHVE.mjs → chunk-E5ZBQYEX.mjs} +59 -9
- package/dist/{chunk-VFTZXPXM.mjs → chunk-SBBKXV35.mjs} +144 -79
- package/dist/index.d.mts +3 -79
- package/dist/index.d.ts +3 -79
- package/dist/index.js +524 -3595
- package/dist/index.mjs +3 -765
- package/dist/suite.d.mts +38 -12
- package/dist/suite.d.ts +38 -12
- package/dist/suite.js +84 -15
- package/dist/suite.mjs +53 -13
- package/dist/ui.d.mts +608 -2
- package/dist/ui.d.ts +608 -2
- package/dist/ui.js +202 -87
- package/dist/ui.mjs +2 -2
- package/package.json +2 -6
- package/scripts/install-theme-dev.sh +60 -0
- package/scripts/sync-posthog-icons.mjs +75 -0
- package/src/components/ui/Chip.tsx +36 -18
- package/src/components/ui/CommandPalette.test.tsx +41 -0
- package/src/components/ui/CommandPalette.tsx +58 -9
- package/src/components/ui/DropdownMenu.tsx +50 -11
- package/src/components/ui/SegmentedControl.tsx +2 -1
- package/src/components/ui/SettingsLayout.tsx +19 -5
- package/src/components/ui/interaction-primitives.test.tsx +52 -0
- package/src/styles/suite-skin.css +17 -35
- package/src/suite/components/app-switcher.tsx +32 -25
- package/src/suite/components/command-palette-host.tsx +20 -8
- package/src/suite/components/suite-app-layout.tsx +1 -1
- package/src/suite/components/suite-bottom-nav.tsx +23 -18
- package/src/suite/components/suite-layout.test.tsx +44 -0
- package/src/suite/components/suite-layout.tsx +3 -3
- package/src/suite/components/suite-mobile-drawer.tsx +12 -0
- package/src/suite/components/suite-mobile-header.tsx +15 -9
- package/src/suite/components/suite-notification-bell.tsx +23 -11
- package/src/suite/components/suite-settings-mobile-nav.tsx +2 -0
- package/src/suite/components/suite-sidebar.tsx +6 -3
- package/src/suite/components/suite-user-menu.tsx +6 -0
- package/src/suite/lib/injected.ts +12 -11
- package/src/components/charts/index.ts +0 -9
- package/src/components/charts/quill/BarChart.tsx +0 -85
- package/src/components/charts/quill/FunnelChart.tsx +0 -49
- package/src/components/charts/quill/InsightShell.tsx +0 -27
- package/src/components/charts/quill/MetricCard.tsx +0 -44
- package/src/components/charts/quill/PieChart.tsx +0 -81
- package/src/components/charts/quill/Sparkline.tsx +0 -57
- package/src/components/charts/quill/TimeSeriesLineChart.tsx +0 -62
- package/src/components/charts/quill/index.ts +0 -9
|
@@ -596,7 +596,14 @@ function DropdownContent({
|
|
|
596
596
|
sticky: "partial",
|
|
597
597
|
children: [
|
|
598
598
|
children,
|
|
599
|
-
/* @__PURE__ */ jsx5(
|
|
599
|
+
/* @__PURE__ */ jsx5(
|
|
600
|
+
DropdownPrimitive.Arrow,
|
|
601
|
+
{
|
|
602
|
+
className: "ph-dropdown-arrow",
|
|
603
|
+
width: 12,
|
|
604
|
+
height: 6
|
|
605
|
+
}
|
|
606
|
+
)
|
|
600
607
|
]
|
|
601
608
|
}
|
|
602
609
|
) });
|
|
@@ -604,6 +611,8 @@ function DropdownContent({
|
|
|
604
611
|
function DropdownMenu(_a) {
|
|
605
612
|
var _b = _a, {
|
|
606
613
|
trigger,
|
|
614
|
+
triggerId,
|
|
615
|
+
triggerDataTest,
|
|
607
616
|
children,
|
|
608
617
|
align,
|
|
609
618
|
side,
|
|
@@ -621,6 +630,8 @@ function DropdownMenu(_a) {
|
|
|
621
630
|
disabled
|
|
622
631
|
} = _b, props = __objRest(_b, [
|
|
623
632
|
"trigger",
|
|
633
|
+
"triggerId",
|
|
634
|
+
"triggerDataTest",
|
|
624
635
|
"children",
|
|
625
636
|
"align",
|
|
626
637
|
"side",
|
|
@@ -645,7 +656,17 @@ function DropdownMenu(_a) {
|
|
|
645
656
|
onOpenChange,
|
|
646
657
|
modal,
|
|
647
658
|
children: [
|
|
648
|
-
/* @__PURE__ */ jsx5(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx5(
|
|
659
|
+
/* @__PURE__ */ jsx5(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx5(
|
|
660
|
+
"button",
|
|
661
|
+
{
|
|
662
|
+
type: "button",
|
|
663
|
+
id: triggerId,
|
|
664
|
+
"data-test": triggerDataTest,
|
|
665
|
+
className: "ph-dropdown-trigger",
|
|
666
|
+
"aria-label": ariaLabel,
|
|
667
|
+
children: trigger
|
|
668
|
+
}
|
|
669
|
+
) }),
|
|
649
670
|
/* @__PURE__ */ jsx5(
|
|
650
671
|
DropdownContent,
|
|
651
672
|
{
|
|
@@ -733,7 +754,15 @@ function DropdownButton(_a) {
|
|
|
733
754
|
split && "ph-btn-split"
|
|
734
755
|
),
|
|
735
756
|
"aria-label": ariaLabel,
|
|
736
|
-
children: /* @__PURE__ */ jsx5(
|
|
757
|
+
children: /* @__PURE__ */ jsx5(
|
|
758
|
+
ButtonChrome,
|
|
759
|
+
{
|
|
760
|
+
label,
|
|
761
|
+
icon,
|
|
762
|
+
sideIcon: trailing,
|
|
763
|
+
split
|
|
764
|
+
}
|
|
765
|
+
)
|
|
737
766
|
}
|
|
738
767
|
) }),
|
|
739
768
|
/* @__PURE__ */ jsx5(
|
|
@@ -754,7 +783,15 @@ function DropdownButton(_a) {
|
|
|
754
783
|
) }));
|
|
755
784
|
}
|
|
756
785
|
function DropdownItem(_a) {
|
|
757
|
-
var _b = _a, {
|
|
786
|
+
var _b = _a, {
|
|
787
|
+
className,
|
|
788
|
+
children,
|
|
789
|
+
disabled
|
|
790
|
+
} = _b, props = __objRest(_b, [
|
|
791
|
+
"className",
|
|
792
|
+
"children",
|
|
793
|
+
"disabled"
|
|
794
|
+
]);
|
|
758
795
|
return /* @__PURE__ */ jsx5(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ jsx5(
|
|
759
796
|
"button",
|
|
760
797
|
__spreadProps(__spreadValues({
|
|
@@ -770,11 +807,24 @@ function DropdownRadioGroup(props) {
|
|
|
770
807
|
return /* @__PURE__ */ jsx5(DropdownPrimitive.RadioGroup, __spreadValues({}, props));
|
|
771
808
|
}
|
|
772
809
|
function DropdownRadioItem(_a) {
|
|
773
|
-
var _b = _a, {
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
810
|
+
var _b = _a, {
|
|
811
|
+
className,
|
|
812
|
+
children
|
|
813
|
+
} = _b, props = __objRest(_b, [
|
|
814
|
+
"className",
|
|
815
|
+
"children"
|
|
816
|
+
]);
|
|
817
|
+
return /* @__PURE__ */ jsxs3(
|
|
818
|
+
DropdownPrimitive.RadioItem,
|
|
819
|
+
__spreadProps(__spreadValues({
|
|
820
|
+
className: cn("ph-dropdown-item ph-dropdown-radio-item", className)
|
|
821
|
+
}, props), {
|
|
822
|
+
children: [
|
|
823
|
+
/* @__PURE__ */ jsx5("span", { className: "ph-dropdown-item-indicator", "aria-hidden": true, children: /* @__PURE__ */ jsx5(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(IconCheck, { className: "h-3.5 w-3.5" }) }) }),
|
|
824
|
+
/* @__PURE__ */ jsx5("span", { children })
|
|
825
|
+
]
|
|
826
|
+
})
|
|
827
|
+
);
|
|
778
828
|
}
|
|
779
829
|
|
|
780
830
|
// src/components/ui/Tooltip.tsx
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
IconStar,
|
|
20
20
|
IconTuning,
|
|
21
21
|
cn
|
|
22
|
-
} from "./chunk-
|
|
22
|
+
} from "./chunk-E5ZBQYEX.mjs";
|
|
23
23
|
import {
|
|
24
24
|
__objRest,
|
|
25
25
|
__spreadProps,
|
|
@@ -553,7 +553,12 @@ function SettingsNav(_a) {
|
|
|
553
553
|
"a",
|
|
554
554
|
{
|
|
555
555
|
href: item.href,
|
|
556
|
-
|
|
556
|
+
id: `settings-nav-${item.id}`,
|
|
557
|
+
"data-test": `settings-nav-${item.id}`,
|
|
558
|
+
className: cn(
|
|
559
|
+
"ph-settings-nav__item",
|
|
560
|
+
item.active && "ph-settings-nav__item--active"
|
|
561
|
+
),
|
|
557
562
|
"aria-current": item.active ? "page" : void 0,
|
|
558
563
|
children: [
|
|
559
564
|
item.icon ? /* @__PURE__ */ jsx9("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
|
|
@@ -1761,9 +1766,10 @@ function SegmentedControl({ options, value, onChange, className }) {
|
|
|
1761
1766
|
"button",
|
|
1762
1767
|
{
|
|
1763
1768
|
type: "button",
|
|
1769
|
+
"aria-pressed": value === option.value,
|
|
1764
1770
|
onClick: () => onChange(option.value),
|
|
1765
1771
|
className: cn(
|
|
1766
|
-
"relative flex items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all",
|
|
1772
|
+
"relative flex min-h-11 items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all sm:min-h-9",
|
|
1767
1773
|
value === option.value ? "bg-ph-surface text-ph-ink shadow-ph" : "text-ph-subtle hover:text-ph-ink"
|
|
1768
1774
|
),
|
|
1769
1775
|
children: [
|
|
@@ -1785,32 +1791,44 @@ function CommandPalette({
|
|
|
1785
1791
|
isOpen,
|
|
1786
1792
|
onClose,
|
|
1787
1793
|
placeholder = "Type a command or search...",
|
|
1788
|
-
className
|
|
1794
|
+
className,
|
|
1795
|
+
id,
|
|
1796
|
+
dataTest,
|
|
1797
|
+
inputId,
|
|
1798
|
+
inputDataTest
|
|
1789
1799
|
}) {
|
|
1790
1800
|
const [query, setQuery] = useState3("");
|
|
1791
1801
|
const [selectedIndex, setSelectedIndex] = useState3(0);
|
|
1792
1802
|
const inputRef = useRef2(null);
|
|
1803
|
+
const panelRef = useRef2(null);
|
|
1804
|
+
const previousFocusRef = useRef2(null);
|
|
1793
1805
|
const filtered = items.filter(
|
|
1794
1806
|
(item) => item.label.toLowerCase().includes(query.toLowerCase())
|
|
1795
1807
|
);
|
|
1796
1808
|
useEffect2(() => {
|
|
1797
1809
|
var _a;
|
|
1798
|
-
if (isOpen)
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1810
|
+
if (!isOpen) return;
|
|
1811
|
+
previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
1812
|
+
setQuery("");
|
|
1813
|
+
setSelectedIndex(0);
|
|
1814
|
+
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
1815
|
+
return () => {
|
|
1816
|
+
var _a2;
|
|
1817
|
+
return (_a2 = previousFocusRef.current) == null ? void 0 : _a2.focus();
|
|
1818
|
+
};
|
|
1803
1819
|
}, [isOpen]);
|
|
1804
1820
|
useEffect2(() => {
|
|
1805
1821
|
const handleKeyDown = (e) => {
|
|
1806
|
-
var _a;
|
|
1822
|
+
var _a, _b;
|
|
1807
1823
|
if (!isOpen) return;
|
|
1808
1824
|
switch (e.key) {
|
|
1809
1825
|
case "ArrowDown":
|
|
1826
|
+
if (!filtered.length) break;
|
|
1810
1827
|
e.preventDefault();
|
|
1811
1828
|
setSelectedIndex((i) => (i + 1) % filtered.length);
|
|
1812
1829
|
break;
|
|
1813
1830
|
case "ArrowUp":
|
|
1831
|
+
if (!filtered.length) break;
|
|
1814
1832
|
e.preventDefault();
|
|
1815
1833
|
setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
|
|
1816
1834
|
break;
|
|
@@ -1822,62 +1840,98 @@ function CommandPalette({
|
|
|
1822
1840
|
case "Escape":
|
|
1823
1841
|
onClose();
|
|
1824
1842
|
break;
|
|
1843
|
+
case "Tab": {
|
|
1844
|
+
const focusable = (_b = panelRef.current) == null ? void 0 : _b.querySelectorAll(
|
|
1845
|
+
'input, button, [href], [tabindex]:not([tabindex="-1"])'
|
|
1846
|
+
);
|
|
1847
|
+
if (!(focusable == null ? void 0 : focusable.length)) break;
|
|
1848
|
+
const first = focusable[0];
|
|
1849
|
+
const last = focusable[focusable.length - 1];
|
|
1850
|
+
if (e.shiftKey && document.activeElement === first) {
|
|
1851
|
+
e.preventDefault();
|
|
1852
|
+
last.focus();
|
|
1853
|
+
} else if (!e.shiftKey && document.activeElement === last) {
|
|
1854
|
+
e.preventDefault();
|
|
1855
|
+
first.focus();
|
|
1856
|
+
}
|
|
1857
|
+
break;
|
|
1858
|
+
}
|
|
1825
1859
|
}
|
|
1826
1860
|
};
|
|
1827
1861
|
window.addEventListener("keydown", handleKeyDown);
|
|
1828
1862
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
1829
1863
|
}, [isOpen, filtered, selectedIndex, onClose]);
|
|
1830
1864
|
if (!isOpen) return null;
|
|
1831
|
-
return /* @__PURE__ */ jsx26(
|
|
1865
|
+
return /* @__PURE__ */ jsx26(
|
|
1832
1866
|
"div",
|
|
1833
1867
|
{
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
)
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
},
|
|
1851
|
-
placeholder,
|
|
1852
|
-
className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
|
|
1853
|
-
}
|
|
1868
|
+
id,
|
|
1869
|
+
"data-test": dataTest,
|
|
1870
|
+
className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm",
|
|
1871
|
+
onMouseDown: (event) => {
|
|
1872
|
+
if (event.target === event.currentTarget) onClose();
|
|
1873
|
+
},
|
|
1874
|
+
children: /* @__PURE__ */ jsxs23(
|
|
1875
|
+
"div",
|
|
1876
|
+
{
|
|
1877
|
+
ref: panelRef,
|
|
1878
|
+
role: "dialog",
|
|
1879
|
+
"aria-modal": "true",
|
|
1880
|
+
"aria-label": "Command palette",
|
|
1881
|
+
className: cn(
|
|
1882
|
+
"w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
|
|
1883
|
+
className
|
|
1854
1884
|
),
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1885
|
+
children: [
|
|
1886
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
|
|
1887
|
+
/* @__PURE__ */ jsx26(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
|
|
1888
|
+
/* @__PURE__ */ jsx26(
|
|
1889
|
+
"input",
|
|
1890
|
+
{
|
|
1891
|
+
ref: inputRef,
|
|
1892
|
+
id: inputId,
|
|
1893
|
+
"data-test": inputDataTest,
|
|
1894
|
+
type: "text",
|
|
1895
|
+
"aria-label": "Search commands",
|
|
1896
|
+
value: query,
|
|
1897
|
+
onChange: (e) => {
|
|
1898
|
+
setQuery(e.target.value);
|
|
1899
|
+
setSelectedIndex(0);
|
|
1900
|
+
},
|
|
1901
|
+
placeholder,
|
|
1902
|
+
className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
|
|
1903
|
+
}
|
|
1904
|
+
),
|
|
1905
|
+
/* @__PURE__ */ jsx26("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
|
|
1906
|
+
] }),
|
|
1907
|
+
/* @__PURE__ */ jsx26("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ jsx26("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ jsxs23(
|
|
1908
|
+
"button",
|
|
1909
|
+
{
|
|
1910
|
+
type: "button",
|
|
1911
|
+
id: `command-${item.id}`,
|
|
1912
|
+
"data-test": `command-${item.id}`,
|
|
1913
|
+
onClick: () => {
|
|
1914
|
+
item.onSelect();
|
|
1915
|
+
onClose();
|
|
1916
|
+
},
|
|
1917
|
+
onMouseEnter: () => setSelectedIndex(index),
|
|
1918
|
+
className: cn(
|
|
1919
|
+
"flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
|
|
1920
|
+
index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
|
|
1921
|
+
),
|
|
1922
|
+
children: [
|
|
1923
|
+
item.icon && /* @__PURE__ */ jsx26("span", { className: "h-5 w-5", children: item.icon }),
|
|
1924
|
+
/* @__PURE__ */ jsx26("span", { className: "flex-1", children: item.label }),
|
|
1925
|
+
item.shortcut && /* @__PURE__ */ jsx26("kbd", { className: "rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext", children: item.shortcut })
|
|
1926
|
+
]
|
|
1927
|
+
},
|
|
1928
|
+
item.id
|
|
1929
|
+
)) })
|
|
1930
|
+
]
|
|
1931
|
+
}
|
|
1932
|
+
)
|
|
1879
1933
|
}
|
|
1880
|
-
)
|
|
1934
|
+
);
|
|
1881
1935
|
}
|
|
1882
1936
|
|
|
1883
1937
|
// src/components/ui/Calendar.tsx
|
|
@@ -4175,34 +4229,45 @@ var Chip = forwardRef13(function Chip2(_a, ref) {
|
|
|
4175
4229
|
"children",
|
|
4176
4230
|
"className"
|
|
4177
4231
|
]);
|
|
4178
|
-
|
|
4232
|
+
const chipClassName = cn(
|
|
4233
|
+
"ph-chip",
|
|
4234
|
+
selected && "ph-chip--selected",
|
|
4235
|
+
className
|
|
4236
|
+
);
|
|
4237
|
+
if (onRemove) {
|
|
4238
|
+
const removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove";
|
|
4239
|
+
return /* @__PURE__ */ jsxs60("span", { className: chipClassName, children: [
|
|
4240
|
+
/* @__PURE__ */ jsx72(
|
|
4241
|
+
"button",
|
|
4242
|
+
__spreadProps(__spreadValues({
|
|
4243
|
+
ref,
|
|
4244
|
+
type: "button",
|
|
4245
|
+
className: "min-w-0 bg-transparent p-0 text-inherit"
|
|
4246
|
+
}, props), {
|
|
4247
|
+
children: /* @__PURE__ */ jsx72("span", { className: "ph-chip__text", children })
|
|
4248
|
+
})
|
|
4249
|
+
),
|
|
4250
|
+
/* @__PURE__ */ jsx72(
|
|
4251
|
+
"button",
|
|
4252
|
+
{
|
|
4253
|
+
type: "button",
|
|
4254
|
+
onClick: onRemove,
|
|
4255
|
+
disabled: props.disabled,
|
|
4256
|
+
className: "ph-chip__remove",
|
|
4257
|
+
"aria-label": removeLabel,
|
|
4258
|
+
children: /* @__PURE__ */ jsx72("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx72("path", { d: "M2 2l6 6M8 2l-6 6" }) })
|
|
4259
|
+
}
|
|
4260
|
+
)
|
|
4261
|
+
] });
|
|
4262
|
+
}
|
|
4263
|
+
return /* @__PURE__ */ jsx72(
|
|
4179
4264
|
"button",
|
|
4180
4265
|
__spreadProps(__spreadValues({
|
|
4181
4266
|
ref,
|
|
4182
4267
|
type: "button",
|
|
4183
|
-
className:
|
|
4184
|
-
"ph-chip",
|
|
4185
|
-
selected && "ph-chip--selected",
|
|
4186
|
-
className
|
|
4187
|
-
)
|
|
4268
|
+
className: chipClassName
|
|
4188
4269
|
}, props), {
|
|
4189
|
-
children:
|
|
4190
|
-
/* @__PURE__ */ jsx72("span", { className: "ph-chip__text", children }),
|
|
4191
|
-
onRemove && /* @__PURE__ */ jsx72(
|
|
4192
|
-
"span",
|
|
4193
|
-
{
|
|
4194
|
-
role: "button",
|
|
4195
|
-
tabIndex: -1,
|
|
4196
|
-
onClick: (e) => {
|
|
4197
|
-
e.stopPropagation();
|
|
4198
|
-
onRemove();
|
|
4199
|
-
},
|
|
4200
|
-
className: "ph-chip__remove",
|
|
4201
|
-
"aria-label": "Remove",
|
|
4202
|
-
children: /* @__PURE__ */ jsx72("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx72("path", { d: "M2 2l6 6M8 2l-6 6" }) })
|
|
4203
|
-
}
|
|
4204
|
-
)
|
|
4205
|
-
]
|
|
4270
|
+
children: /* @__PURE__ */ jsx72("span", { className: "ph-chip__text", children })
|
|
4206
4271
|
})
|
|
4207
4272
|
);
|
|
4208
4273
|
});
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { A as Accordion, a as Alert, b as
|
|
1
|
+
import { b9 as IconProps } from './Chip-C5hRFAhe.mjs';
|
|
2
|
+
export { A as Accordion, a as Alert, b as AlertProps, c as AlertStatus, d as AuthCard, e as AuthCardProps, f as AuthDivider, g as AuthDividerProps, h as AuthLayout, i as AuthLayoutProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Badge, p as BadgeProps, q as BadgeSize, r as BadgeVariant, s as Button, t as ButtonChrome, u as ButtonChromeProps, v as ButtonProps, w as ButtonShape, x as ButtonSize, y as ButtonVariant, C as CANONICAL_ICONS, z as Calendar, D as CanonicalIconName, E as Caption, F as Card, G as CardProps, H as CardVariant, I as Checkbox, J as CheckboxProps, K as Chip, L as ChipProps, M as CommandPalette, N as Display, O as Dot, P as DotProps, Q as DropdownAlign, R as DropdownButton, S as DropdownButtonProps, T as DropdownItem, U as DropdownItemProps, V as DropdownMenu, W as DropdownMenuProps, X as DropdownRadioGroup, Y as DropdownRadioGroupProps, Z as DropdownRadioItem, _ as DropdownRadioItemProps, $ as DropdownSide, a0 as EmptyState, a1 as FileUpload, a2 as FileUploadProps, a3 as FilterBar, a4 as FilterBarProps, a5 as FilterChip, a6 as FilterChips, a7 as FilterChipsProps, a8 as FilterMenu, a9 as FilterMenuOption, aa as FilterMenuProps, ab as FormField, ac as FormFieldControlProps, ad as FormFieldProps, ae as H1, af as H2, ag as H3, ah as H4, ai as H5, ao as Icon, aj as IconActivity, ak as IconAliasName, al as IconAreaChart, am as IconArrowDown, an as IconArrowUp, ao as IconBase, ap as IconBell, aq as IconBellOff, ar as IconBolt, as as IconBox, at as IconByName, au as IconCancel, av as IconCheck, aw as IconCheckCircle, ax as IconChevronDown, ay as IconChevronLeft, az as IconChevronRight, aA as IconClipboardEdit, aB as IconClose, aC as IconCodePreview, aD as IconCohort, aE as IconCommandCursor, aF as IconCopy, aG as IconCumulativeChart, aH as IconDataReel, aI as IconDatabase, aJ as IconDownload, aK as IconEdit, aL as IconErrorOutline, aM as IconEventStream, aN as IconExclamation, aO as IconExperimentSplit, aP as IconFeatureGate, aQ as IconFlag, aR as IconFlare, aS as IconFlask, aT as IconGift, aU as IconGridView, aV as IconHandClick, aW as IconHome, aX as IconInfo, aY as IconInsightBoard, aZ as IconLayers, a_ as IconListView, a$ as IconLogout, b0 as IconMail, b1 as IconMoon, b2 as IconName, b3 as IconOldWindow, b4 as IconPanelRight, b5 as IconPerson, b6 as IconPlayCircle, b7 as IconPlus, b8 as IconPremium, ba as IconQueryEditor, bb as IconQueryStack, bc as IconRadar, bd as IconRecording, be as IconReplayFrame, bf as IconRobot, bg as IconRocket, bh as IconSave, bi as IconSearch, bj as IconSelectEvents, bk as IconShoppingCart, bl as IconSpinner, bm as IconStar, bn as IconSubArrowRight, bo as IconSun, bp as IconSurveyCard, bq as IconSurveys, br as IconSync, bs as IconTableChart, bt as IconTerminal, bu as IconToggle, bv as IconTrash, bw as IconTuning, bx as IconUpload, by as IconVolume, bz as IconVolumeOff, bA as Input, bB as InputProps, bC as InputSize, bD as InputVariant, bE as Label, bF as Lead, bG as Link, bH as LinkProps, bI as Loader, bJ as LoaderProps, bK as LoaderSize, bL as LoaderVariant, bM as LoadingState, bN as LoadingStateProps, bO as Modal, bP as ModalProps, bQ as ModalSize, bR as Mono, bS as OLD_UI_ICONS, bT as Overline, bU as P, bV as PH_ICONS, bW as PH_ICON_ALIASES, bX as Panel, bY as PanelProps, bZ as Progress, b_ as ProgressProps, b$ as Radio, c0 as RadioProps, c5 as SearchInput, c6 as SearchInputProps, c7 as SegmentedControl, c8 as Select, c9 as SelectProps, ca as SettingsLayout, cb as SettingsLayoutProps, cc as SettingsNav, cd as SettingsNavGroup, ce as SettingsNavItem, cf as SettingsNavProps, cg as Skeleton, ch as SkeletonProps, ci as SkeletonShape, cj as Small, ck as SortMenu, cl as SortMenuProps, cm as Spinner, cn as SpinnerProps, co as Stat, cp as StatProps, cq as StatTone, cr as Table, cs as TableColumn, ct as TableProps, cu as Textarea, cv as TextareaProps, cw as Toggle, cx as ToggleProps, cy as Tooltip, cz as TooltipAlign, cA as TooltipProps, cB as TooltipProvider, cC as TooltipProviderProps, cD as TooltipSide } from './Chip-C5hRFAhe.mjs';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ReactNode } from 'react';
|
|
5
5
|
import '@radix-ui/react-dropdown-menu';
|
|
@@ -34,80 +34,4 @@ declare const THEME_INIT_SCRIPT: string;
|
|
|
34
34
|
declare function persistTheme(themeId: string): void;
|
|
35
35
|
declare function readStoredTheme(): string;
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
key: string;
|
|
39
|
-
label: string;
|
|
40
|
-
data: number[];
|
|
41
|
-
color?: string;
|
|
42
|
-
}
|
|
43
|
-
interface TimeSeriesLineChartProps {
|
|
44
|
-
series: TimeSeriesLineChartSeries[];
|
|
45
|
-
labels: string[];
|
|
46
|
-
className?: string;
|
|
47
|
-
showGrid?: boolean;
|
|
48
|
-
showCrosshair?: boolean;
|
|
49
|
-
height?: number;
|
|
50
|
-
}
|
|
51
|
-
declare function TimeSeriesLineChart({ series, labels, className, showGrid, showCrosshair, height, }: TimeSeriesLineChartProps): react.JSX.Element;
|
|
52
|
-
|
|
53
|
-
interface BarChartSeries {
|
|
54
|
-
key: string;
|
|
55
|
-
label: string;
|
|
56
|
-
data: number[];
|
|
57
|
-
color?: string;
|
|
58
|
-
}
|
|
59
|
-
interface BarChartProps {
|
|
60
|
-
series: BarChartSeries[];
|
|
61
|
-
labels: string[];
|
|
62
|
-
className?: string;
|
|
63
|
-
height?: number;
|
|
64
|
-
}
|
|
65
|
-
declare function BarChart({ series, labels, className, height }: BarChartProps): react.JSX.Element;
|
|
66
|
-
|
|
67
|
-
interface PieChartSlice {
|
|
68
|
-
key: string;
|
|
69
|
-
label: string;
|
|
70
|
-
value: number;
|
|
71
|
-
color?: string;
|
|
72
|
-
}
|
|
73
|
-
interface PieChartProps {
|
|
74
|
-
slices: PieChartSlice[];
|
|
75
|
-
className?: string;
|
|
76
|
-
size?: number;
|
|
77
|
-
}
|
|
78
|
-
declare function PieChart({ slices, className, size }: PieChartProps): react.JSX.Element;
|
|
79
|
-
|
|
80
|
-
interface SparklineProps {
|
|
81
|
-
data: number[];
|
|
82
|
-
color?: string;
|
|
83
|
-
className?: string;
|
|
84
|
-
width?: number;
|
|
85
|
-
height?: number;
|
|
86
|
-
strokeWidth?: number;
|
|
87
|
-
}
|
|
88
|
-
declare function Sparkline({ data, color, className, width, height, strokeWidth, }: SparklineProps): react.JSX.Element | null;
|
|
89
|
-
|
|
90
|
-
interface MetricCardProps {
|
|
91
|
-
value: string | number;
|
|
92
|
-
label: string;
|
|
93
|
-
change?: {
|
|
94
|
-
value: number;
|
|
95
|
-
positive?: boolean;
|
|
96
|
-
};
|
|
97
|
-
sparklineData?: number[];
|
|
98
|
-
icon?: ReactNode;
|
|
99
|
-
className?: string;
|
|
100
|
-
}
|
|
101
|
-
declare function MetricCard({ value, label, change, sparklineData, icon, className, }: MetricCardProps): react.JSX.Element;
|
|
102
|
-
|
|
103
|
-
interface FunnelStep {
|
|
104
|
-
label: string;
|
|
105
|
-
count: number;
|
|
106
|
-
}
|
|
107
|
-
interface FunnelChartProps {
|
|
108
|
-
steps: FunnelStep[];
|
|
109
|
-
className?: string;
|
|
110
|
-
}
|
|
111
|
-
declare function FunnelChart({ steps, className }: FunnelChartProps): react.JSX.Element;
|
|
112
|
-
|
|
113
|
-
export { BarChart, type BarChartProps, type BarChartSeries, DEFAULT_THEME_ID, FunnelChart, type FunnelChartProps, type FunnelStep, IconProps, MetricCard, type MetricCardProps, PieChart, type PieChartProps, type PieChartSlice, Sparkline, type SparklineProps, THEMES, THEME_GROUPS, THEME_INIT_SCRIPT, type ThemeDefinition, type ThemeId, TimeSeriesLineChart, type TimeSeriesLineChartProps, type TimeSeriesLineChartSeries, createIconBase, createIconBasePath, getTheme, isThemeId, persistTheme, readStoredTheme };
|
|
37
|
+
export { DEFAULT_THEME_ID, IconProps, THEMES, THEME_GROUPS, THEME_INIT_SCRIPT, type ThemeDefinition, type ThemeId, createIconBase, createIconBasePath, getTheme, isThemeId, persistTheme, readStoredTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { A as Accordion, a as Alert, b as
|
|
1
|
+
import { b9 as IconProps } from './Chip-C5hRFAhe.js';
|
|
2
|
+
export { A as Accordion, a as Alert, b as AlertProps, c as AlertStatus, d as AuthCard, e as AuthCardProps, f as AuthDivider, g as AuthDividerProps, h as AuthLayout, i as AuthLayoutProps, j as Avatar, k as AvatarGroup, l as AvatarGroupProps, m as AvatarProps, n as AvatarSize, o as AvatarStatus, B as Badge, p as BadgeProps, q as BadgeSize, r as BadgeVariant, s as Button, t as ButtonChrome, u as ButtonChromeProps, v as ButtonProps, w as ButtonShape, x as ButtonSize, y as ButtonVariant, C as CANONICAL_ICONS, z as Calendar, D as CanonicalIconName, E as Caption, F as Card, G as CardProps, H as CardVariant, I as Checkbox, J as CheckboxProps, K as Chip, L as ChipProps, M as CommandPalette, N as Display, O as Dot, P as DotProps, Q as DropdownAlign, R as DropdownButton, S as DropdownButtonProps, T as DropdownItem, U as DropdownItemProps, V as DropdownMenu, W as DropdownMenuProps, X as DropdownRadioGroup, Y as DropdownRadioGroupProps, Z as DropdownRadioItem, _ as DropdownRadioItemProps, $ as DropdownSide, a0 as EmptyState, a1 as FileUpload, a2 as FileUploadProps, a3 as FilterBar, a4 as FilterBarProps, a5 as FilterChip, a6 as FilterChips, a7 as FilterChipsProps, a8 as FilterMenu, a9 as FilterMenuOption, aa as FilterMenuProps, ab as FormField, ac as FormFieldControlProps, ad as FormFieldProps, ae as H1, af as H2, ag as H3, ah as H4, ai as H5, ao as Icon, aj as IconActivity, ak as IconAliasName, al as IconAreaChart, am as IconArrowDown, an as IconArrowUp, ao as IconBase, ap as IconBell, aq as IconBellOff, ar as IconBolt, as as IconBox, at as IconByName, au as IconCancel, av as IconCheck, aw as IconCheckCircle, ax as IconChevronDown, ay as IconChevronLeft, az as IconChevronRight, aA as IconClipboardEdit, aB as IconClose, aC as IconCodePreview, aD as IconCohort, aE as IconCommandCursor, aF as IconCopy, aG as IconCumulativeChart, aH as IconDataReel, aI as IconDatabase, aJ as IconDownload, aK as IconEdit, aL as IconErrorOutline, aM as IconEventStream, aN as IconExclamation, aO as IconExperimentSplit, aP as IconFeatureGate, aQ as IconFlag, aR as IconFlare, aS as IconFlask, aT as IconGift, aU as IconGridView, aV as IconHandClick, aW as IconHome, aX as IconInfo, aY as IconInsightBoard, aZ as IconLayers, a_ as IconListView, a$ as IconLogout, b0 as IconMail, b1 as IconMoon, b2 as IconName, b3 as IconOldWindow, b4 as IconPanelRight, b5 as IconPerson, b6 as IconPlayCircle, b7 as IconPlus, b8 as IconPremium, ba as IconQueryEditor, bb as IconQueryStack, bc as IconRadar, bd as IconRecording, be as IconReplayFrame, bf as IconRobot, bg as IconRocket, bh as IconSave, bi as IconSearch, bj as IconSelectEvents, bk as IconShoppingCart, bl as IconSpinner, bm as IconStar, bn as IconSubArrowRight, bo as IconSun, bp as IconSurveyCard, bq as IconSurveys, br as IconSync, bs as IconTableChart, bt as IconTerminal, bu as IconToggle, bv as IconTrash, bw as IconTuning, bx as IconUpload, by as IconVolume, bz as IconVolumeOff, bA as Input, bB as InputProps, bC as InputSize, bD as InputVariant, bE as Label, bF as Lead, bG as Link, bH as LinkProps, bI as Loader, bJ as LoaderProps, bK as LoaderSize, bL as LoaderVariant, bM as LoadingState, bN as LoadingStateProps, bO as Modal, bP as ModalProps, bQ as ModalSize, bR as Mono, bS as OLD_UI_ICONS, bT as Overline, bU as P, bV as PH_ICONS, bW as PH_ICON_ALIASES, bX as Panel, bY as PanelProps, bZ as Progress, b_ as ProgressProps, b$ as Radio, c0 as RadioProps, c5 as SearchInput, c6 as SearchInputProps, c7 as SegmentedControl, c8 as Select, c9 as SelectProps, ca as SettingsLayout, cb as SettingsLayoutProps, cc as SettingsNav, cd as SettingsNavGroup, ce as SettingsNavItem, cf as SettingsNavProps, cg as Skeleton, ch as SkeletonProps, ci as SkeletonShape, cj as Small, ck as SortMenu, cl as SortMenuProps, cm as Spinner, cn as SpinnerProps, co as Stat, cp as StatProps, cq as StatTone, cr as Table, cs as TableColumn, ct as TableProps, cu as Textarea, cv as TextareaProps, cw as Toggle, cx as ToggleProps, cy as Tooltip, cz as TooltipAlign, cA as TooltipProps, cB as TooltipProvider, cC as TooltipProviderProps, cD as TooltipSide } from './Chip-C5hRFAhe.js';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ReactNode } from 'react';
|
|
5
5
|
import '@radix-ui/react-dropdown-menu';
|
|
@@ -34,80 +34,4 @@ declare const THEME_INIT_SCRIPT: string;
|
|
|
34
34
|
declare function persistTheme(themeId: string): void;
|
|
35
35
|
declare function readStoredTheme(): string;
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
key: string;
|
|
39
|
-
label: string;
|
|
40
|
-
data: number[];
|
|
41
|
-
color?: string;
|
|
42
|
-
}
|
|
43
|
-
interface TimeSeriesLineChartProps {
|
|
44
|
-
series: TimeSeriesLineChartSeries[];
|
|
45
|
-
labels: string[];
|
|
46
|
-
className?: string;
|
|
47
|
-
showGrid?: boolean;
|
|
48
|
-
showCrosshair?: boolean;
|
|
49
|
-
height?: number;
|
|
50
|
-
}
|
|
51
|
-
declare function TimeSeriesLineChart({ series, labels, className, showGrid, showCrosshair, height, }: TimeSeriesLineChartProps): react.JSX.Element;
|
|
52
|
-
|
|
53
|
-
interface BarChartSeries {
|
|
54
|
-
key: string;
|
|
55
|
-
label: string;
|
|
56
|
-
data: number[];
|
|
57
|
-
color?: string;
|
|
58
|
-
}
|
|
59
|
-
interface BarChartProps {
|
|
60
|
-
series: BarChartSeries[];
|
|
61
|
-
labels: string[];
|
|
62
|
-
className?: string;
|
|
63
|
-
height?: number;
|
|
64
|
-
}
|
|
65
|
-
declare function BarChart({ series, labels, className, height }: BarChartProps): react.JSX.Element;
|
|
66
|
-
|
|
67
|
-
interface PieChartSlice {
|
|
68
|
-
key: string;
|
|
69
|
-
label: string;
|
|
70
|
-
value: number;
|
|
71
|
-
color?: string;
|
|
72
|
-
}
|
|
73
|
-
interface PieChartProps {
|
|
74
|
-
slices: PieChartSlice[];
|
|
75
|
-
className?: string;
|
|
76
|
-
size?: number;
|
|
77
|
-
}
|
|
78
|
-
declare function PieChart({ slices, className, size }: PieChartProps): react.JSX.Element;
|
|
79
|
-
|
|
80
|
-
interface SparklineProps {
|
|
81
|
-
data: number[];
|
|
82
|
-
color?: string;
|
|
83
|
-
className?: string;
|
|
84
|
-
width?: number;
|
|
85
|
-
height?: number;
|
|
86
|
-
strokeWidth?: number;
|
|
87
|
-
}
|
|
88
|
-
declare function Sparkline({ data, color, className, width, height, strokeWidth, }: SparklineProps): react.JSX.Element | null;
|
|
89
|
-
|
|
90
|
-
interface MetricCardProps {
|
|
91
|
-
value: string | number;
|
|
92
|
-
label: string;
|
|
93
|
-
change?: {
|
|
94
|
-
value: number;
|
|
95
|
-
positive?: boolean;
|
|
96
|
-
};
|
|
97
|
-
sparklineData?: number[];
|
|
98
|
-
icon?: ReactNode;
|
|
99
|
-
className?: string;
|
|
100
|
-
}
|
|
101
|
-
declare function MetricCard({ value, label, change, sparklineData, icon, className, }: MetricCardProps): react.JSX.Element;
|
|
102
|
-
|
|
103
|
-
interface FunnelStep {
|
|
104
|
-
label: string;
|
|
105
|
-
count: number;
|
|
106
|
-
}
|
|
107
|
-
interface FunnelChartProps {
|
|
108
|
-
steps: FunnelStep[];
|
|
109
|
-
className?: string;
|
|
110
|
-
}
|
|
111
|
-
declare function FunnelChart({ steps, className }: FunnelChartProps): react.JSX.Element;
|
|
112
|
-
|
|
113
|
-
export { BarChart, type BarChartProps, type BarChartSeries, DEFAULT_THEME_ID, FunnelChart, type FunnelChartProps, type FunnelStep, IconProps, MetricCard, type MetricCardProps, PieChart, type PieChartProps, type PieChartSlice, Sparkline, type SparklineProps, THEMES, THEME_GROUPS, THEME_INIT_SCRIPT, type ThemeDefinition, type ThemeId, TimeSeriesLineChart, type TimeSeriesLineChartProps, type TimeSeriesLineChartSeries, createIconBase, createIconBasePath, getTheme, isThemeId, persistTheme, readStoredTheme };
|
|
37
|
+
export { DEFAULT_THEME_ID, IconProps, THEMES, THEME_GROUPS, THEME_INIT_SCRIPT, type ThemeDefinition, type ThemeId, createIconBase, createIconBasePath, getTheme, isThemeId, persistTheme, readStoredTheme };
|