@camstack/ui-library 1.1.25 → 1.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +145 -139
  2. package/dist/index.js +145 -139
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -15695,8 +15695,10 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
15695
15695
  const confirm = useConfirm();
15696
15696
  const [presetsOpen, setPresetsOpen] = (0, react$1.useState)(false);
15697
15697
  const [presetName, setPresetName] = (0, react$1.useState)("");
15698
- const presetsVisible = (showPresets ?? presets.length > 0) && presets.length > 0;
15699
15698
  const isPanel = mode === "panel";
15699
+ const zoomVisible = showZoom && (options?.hasZoom ?? true);
15700
+ const supportsPresets = options?.supportsPresets ?? presets.length > 0;
15701
+ const presetsVisible = (showPresets ?? supportsPresets) && supportsPresets;
15700
15702
  const presetManagementVisible = isPanel && (options?.supportsPresets ?? false);
15701
15703
  const maxPresetsReached = options?.maxPresets !== void 0 && presets.length >= options.maxPresets;
15702
15704
  const handleSavePreset = (0, react$1.useCallback)(async () => {
@@ -15726,109 +15728,112 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
15726
15728
  const sepClass = isPanel ? "h-12 w-px bg-border mx-1" : "h-12 w-px bg-white/15 mx-1";
15727
15729
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15728
15730
  className: cn(containerClass, className),
15729
- children: [
15730
- error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15731
- className: "rounded bg-danger/90 px-2 py-1 text-[10px] font-medium text-white shadow-lg max-w-[200px] self-center",
15732
- children: ["PTZ: ", error]
15733
- }),
15734
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15735
- className: cn(rowClass, isPanel && "justify-center"),
15736
- children: [
15737
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15738
- className: "grid grid-cols-3 gap-0.5",
15731
+ children: [error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15732
+ className: "rounded bg-danger/90 px-2 py-1 text-[10px] font-medium text-white shadow-lg max-w-[200px] self-center",
15733
+ children: ["PTZ: ", error]
15734
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15735
+ className: cn(rowClass, isPanel && "justify-center"),
15736
+ children: [
15737
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15738
+ className: "grid grid-cols-3 gap-0.5",
15739
+ children: [
15740
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
15741
+ "aria-hidden": true,
15742
+ className: isPanel ? "h-9 w-9" : "h-7 w-7"
15743
+ }),
15744
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
15745
+ direction: "up",
15746
+ icon: ArrowUp,
15747
+ variant: mode,
15748
+ onMove: move,
15749
+ onStart: startContinuous,
15750
+ onStop: stopContinuous
15751
+ }),
15752
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
15753
+ "aria-hidden": true,
15754
+ className: isPanel ? "h-9 w-9" : "h-7 w-7"
15755
+ }),
15756
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
15757
+ direction: "left",
15758
+ icon: ArrowLeft,
15759
+ variant: mode,
15760
+ onMove: move,
15761
+ onStart: startContinuous,
15762
+ onStop: stopContinuous
15763
+ }),
15764
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
15765
+ "aria-hidden": true,
15766
+ className: isPanel ? "h-9 w-9" : "h-7 w-7"
15767
+ }),
15768
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
15769
+ direction: "right",
15770
+ icon: ArrowRight,
15771
+ variant: mode,
15772
+ onMove: move,
15773
+ onStart: startContinuous,
15774
+ onStop: stopContinuous
15775
+ }),
15776
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
15777
+ "aria-hidden": true,
15778
+ className: isPanel ? "h-9 w-9" : "h-7 w-7"
15779
+ }),
15780
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
15781
+ direction: "down",
15782
+ icon: ArrowDown,
15783
+ variant: mode,
15784
+ onMove: move,
15785
+ onStart: startContinuous,
15786
+ onStop: stopContinuous
15787
+ }),
15788
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
15789
+ "aria-hidden": true,
15790
+ className: isPanel ? "h-9 w-9" : "h-7 w-7"
15791
+ })
15792
+ ]
15793
+ }),
15794
+ (zoomVisible || showHome) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: sepClass }),
15795
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15796
+ className: "flex flex-col gap-0.5",
15797
+ children: [zoomVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
15798
+ type: "button",
15799
+ onClick: () => zoom("in"),
15800
+ disabled: busy,
15801
+ title: "Zoom in",
15802
+ className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15803
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomIn, { className: sideIconSize })
15804
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
15805
+ type: "button",
15806
+ onClick: () => zoom("out"),
15807
+ disabled: busy,
15808
+ title: "Zoom out",
15809
+ className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15810
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomOut, { className: sideIconSize })
15811
+ })] }), showHome && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
15812
+ type: "button",
15813
+ onClick: () => goHome(),
15814
+ disabled: busy,
15815
+ title: "Go home",
15816
+ className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15817
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(House, { className: sideIconSize })
15818
+ })]
15819
+ }),
15820
+ presetsVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15821
+ className: "relative",
15822
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
15823
+ type: "button",
15824
+ onClick: () => setPresetsOpen((v) => !v),
15825
+ disabled: busy,
15826
+ className: cn("flex items-center gap-1 rounded px-2 text-[10px] disabled:opacity-40", isPanel ? "h-9 text-foreground hover:bg-surface-hover" : "h-7 text-white hover:bg-white/15"),
15827
+ title: "Presets",
15828
+ children: ["Presets", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: cn("h-3 w-3 transition-transform", presetsOpen && "rotate-180") })]
15829
+ }), presetsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15830
+ className: cn("absolute right-0 top-full mt-1 rounded-lg shadow-xl py-1 z-20", presetManagementVisible ? "min-w-[220px]" : "min-w-[140px]", isPanel ? "bg-surface border border-border" : "border border-white/30 bg-zinc-900/95 backdrop-blur-md"),
15739
15831
  children: [
15740
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
15741
- "aria-hidden": true,
15742
- className: isPanel ? "h-9 w-9" : "h-7 w-7"
15743
- }),
15744
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
15745
- direction: "up",
15746
- icon: ArrowUp,
15747
- variant: mode,
15748
- onMove: move,
15749
- onStart: startContinuous,
15750
- onStop: stopContinuous
15751
- }),
15752
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
15753
- "aria-hidden": true,
15754
- className: isPanel ? "h-9 w-9" : "h-7 w-7"
15755
- }),
15756
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
15757
- direction: "left",
15758
- icon: ArrowLeft,
15759
- variant: mode,
15760
- onMove: move,
15761
- onStart: startContinuous,
15762
- onStop: stopContinuous
15763
- }),
15764
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
15765
- "aria-hidden": true,
15766
- className: isPanel ? "h-9 w-9" : "h-7 w-7"
15767
- }),
15768
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
15769
- direction: "right",
15770
- icon: ArrowRight,
15771
- variant: mode,
15772
- onMove: move,
15773
- onStart: startContinuous,
15774
- onStop: stopContinuous
15775
- }),
15776
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
15777
- "aria-hidden": true,
15778
- className: isPanel ? "h-9 w-9" : "h-7 w-7"
15832
+ presets.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
15833
+ className: cn("px-3 py-1.5 text-[10px]", isPanel ? "text-foreground-subtle" : "text-white/60"),
15834
+ children: "No presets yet"
15779
15835
  }),
15780
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DPadButton, {
15781
- direction: "down",
15782
- icon: ArrowDown,
15783
- variant: mode,
15784
- onMove: move,
15785
- onStart: startContinuous,
15786
- onStop: stopContinuous
15787
- }),
15788
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
15789
- "aria-hidden": true,
15790
- className: isPanel ? "h-9 w-9" : "h-7 w-7"
15791
- })
15792
- ]
15793
- }),
15794
- (showZoom || showHome) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: sepClass }),
15795
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15796
- className: "flex flex-col gap-0.5",
15797
- children: [showZoom && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
15798
- type: "button",
15799
- onClick: () => zoom("in"),
15800
- disabled: busy,
15801
- title: "Zoom in",
15802
- className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15803
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomIn, { className: sideIconSize })
15804
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
15805
- type: "button",
15806
- onClick: () => zoom("out"),
15807
- disabled: busy,
15808
- title: "Zoom out",
15809
- className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15810
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomOut, { className: sideIconSize })
15811
- })] }), showHome && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
15812
- type: "button",
15813
- onClick: () => goHome(),
15814
- disabled: busy,
15815
- title: "Go home",
15816
- className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15817
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(House, { className: sideIconSize })
15818
- })]
15819
- }),
15820
- presetsVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15821
- className: "relative",
15822
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
15823
- type: "button",
15824
- onClick: () => setPresetsOpen((v) => !v),
15825
- disabled: busy,
15826
- className: cn("flex items-center gap-1 rounded px-2 text-[10px] disabled:opacity-40", isPanel ? "h-9 text-foreground hover:bg-surface-hover" : "h-7 text-white hover:bg-white/15"),
15827
- title: "Presets",
15828
- children: ["Presets", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: cn("h-3 w-3 transition-transform", presetsOpen && "rotate-180") })]
15829
- }), presetsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
15830
- className: cn("absolute right-0 top-full mt-1 min-w-[140px] rounded-lg shadow-xl py-1 z-20", isPanel ? "bg-surface border border-border" : "border border-white/30 bg-zinc-900/95 backdrop-blur-md"),
15831
- children: presets.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15836
+ presets.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15832
15837
  className: cn("group flex items-center", isPanel ? "hover:bg-surface-hover" : "hover:bg-white/15"),
15833
15838
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
15834
15839
  type: "button",
@@ -15847,44 +15852,45 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
15847
15852
  className: cn("mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded", "text-foreground-subtle hover:bg-danger/15 hover:text-danger disabled:opacity-40"),
15848
15853
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "h-3 w-3" })
15849
15854
  })]
15850
- }, p.id))
15851
- })]
15852
- })
15853
- ]
15854
- }),
15855
- presetManagementVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15856
- className: "flex flex-col gap-1 rounded-lg border border-border p-2",
15857
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15858
- className: "flex items-center gap-2",
15859
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
15860
- type: "text",
15861
- value: presetName,
15862
- onChange: (e) => setPresetName(e.target.value),
15863
- onKeyDown: (e) => {
15864
- if (e.key === "Enter") handleSavePreset();
15865
- },
15866
- disabled: busy || maxPresetsReached,
15867
- placeholder: "New preset name",
15868
- maxLength: 64,
15869
- className: cn("min-w-0 flex-1 rounded border border-border bg-surface px-2 py-1 text-[11px] text-foreground", "placeholder:text-foreground-subtle focus:outline-none focus:ring-1 focus:ring-primary/50", "disabled:opacity-40")
15870
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
15871
- type: "button",
15872
- onClick: () => void handleSavePreset(),
15873
- disabled: busy || maxPresetsReached || presetName.trim().length === 0,
15874
- title: maxPresetsReached ? `Camera preset limit reached (${options?.maxPresets})` : "Save current position as a new preset",
15875
- className: cn("flex h-7 shrink-0 items-center gap-1 rounded px-2 text-[10px] font-medium", "bg-primary/15 text-primary hover:bg-primary/25 disabled:opacity-40"),
15876
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), "Save current position"]
15855
+ }, p.id)),
15856
+ presetManagementVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
15857
+ presets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: cn("my-1 h-px", isPanel ? "bg-border" : "bg-white/15") }),
15858
+ /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
15859
+ className: "flex items-center gap-1 px-2 py-1",
15860
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
15861
+ type: "text",
15862
+ value: presetName,
15863
+ onChange: (e) => setPresetName(e.target.value),
15864
+ onKeyDown: (e) => {
15865
+ if (e.key === "Enter") handleSavePreset();
15866
+ },
15867
+ disabled: busy || maxPresetsReached,
15868
+ placeholder: "New preset name",
15869
+ maxLength: 64,
15870
+ className: cn("min-w-0 flex-1 rounded border px-2 py-1 text-[11px]", "focus:outline-none focus:ring-1 focus:ring-primary/50 disabled:opacity-40", isPanel ? "border-border bg-surface text-foreground placeholder:text-foreground-subtle" : "border-white/30 bg-zinc-800 text-white placeholder:text-white/40")
15871
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
15872
+ type: "button",
15873
+ onClick: () => void handleSavePreset(),
15874
+ disabled: busy || maxPresetsReached || presetName.trim().length === 0,
15875
+ title: maxPresetsReached ? `Camera preset limit reached (${options?.maxPresets})` : "Save current position as a new preset",
15876
+ className: cn("flex h-7 w-7 shrink-0 items-center justify-center rounded", "bg-primary/15 text-primary hover:bg-primary/25 disabled:opacity-40"),
15877
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3.5 w-3.5" })
15878
+ })]
15879
+ }),
15880
+ maxPresetsReached && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
15881
+ className: cn("block px-2 pb-1 text-[10px]", isPanel ? "text-foreground-subtle" : "text-white/60"),
15882
+ children: [
15883
+ "Preset limit reached (",
15884
+ options?.maxPresets,
15885
+ ")."
15886
+ ]
15887
+ })
15888
+ ] })
15889
+ ]
15877
15890
  })]
15878
- }), maxPresetsReached && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
15879
- className: "text-[10px] text-foreground-subtle",
15880
- children: [
15881
- "Camera preset limit reached (",
15882
- options?.maxPresets,
15883
- "). Delete a preset to add a new one."
15884
- ]
15885
- })]
15886
- })
15887
- ]
15891
+ })
15892
+ ]
15893
+ })]
15888
15894
  });
15889
15895
  }
15890
15896
  //#endregion
package/dist/index.js CHANGED
@@ -15671,8 +15671,10 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
15671
15671
  const confirm = useConfirm();
15672
15672
  const [presetsOpen, setPresetsOpen] = useState(false);
15673
15673
  const [presetName, setPresetName] = useState("");
15674
- const presetsVisible = (showPresets ?? presets.length > 0) && presets.length > 0;
15675
15674
  const isPanel = mode === "panel";
15675
+ const zoomVisible = showZoom && (options?.hasZoom ?? true);
15676
+ const supportsPresets = options?.supportsPresets ?? presets.length > 0;
15677
+ const presetsVisible = (showPresets ?? supportsPresets) && supportsPresets;
15676
15678
  const presetManagementVisible = isPanel && (options?.supportsPresets ?? false);
15677
15679
  const maxPresetsReached = options?.maxPresets !== void 0 && presets.length >= options.maxPresets;
15678
15680
  const handleSavePreset = useCallback(async () => {
@@ -15702,109 +15704,112 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
15702
15704
  const sepClass = isPanel ? "h-12 w-px bg-border mx-1" : "h-12 w-px bg-white/15 mx-1";
15703
15705
  return /* @__PURE__ */ jsxs("div", {
15704
15706
  className: cn(containerClass, className),
15705
- children: [
15706
- error && /* @__PURE__ */ jsxs("div", {
15707
- className: "rounded bg-danger/90 px-2 py-1 text-[10px] font-medium text-white shadow-lg max-w-[200px] self-center",
15708
- children: ["PTZ: ", error]
15709
- }),
15710
- /* @__PURE__ */ jsxs("div", {
15711
- className: cn(rowClass, isPanel && "justify-center"),
15712
- children: [
15713
- /* @__PURE__ */ jsxs("div", {
15714
- className: "grid grid-cols-3 gap-0.5",
15707
+ children: [error && /* @__PURE__ */ jsxs("div", {
15708
+ className: "rounded bg-danger/90 px-2 py-1 text-[10px] font-medium text-white shadow-lg max-w-[200px] self-center",
15709
+ children: ["PTZ: ", error]
15710
+ }), /* @__PURE__ */ jsxs("div", {
15711
+ className: cn(rowClass, isPanel && "justify-center"),
15712
+ children: [
15713
+ /* @__PURE__ */ jsxs("div", {
15714
+ className: "grid grid-cols-3 gap-0.5",
15715
+ children: [
15716
+ /* @__PURE__ */ jsx("span", {
15717
+ "aria-hidden": true,
15718
+ className: isPanel ? "h-9 w-9" : "h-7 w-7"
15719
+ }),
15720
+ /* @__PURE__ */ jsx(DPadButton, {
15721
+ direction: "up",
15722
+ icon: ArrowUp,
15723
+ variant: mode,
15724
+ onMove: move,
15725
+ onStart: startContinuous,
15726
+ onStop: stopContinuous
15727
+ }),
15728
+ /* @__PURE__ */ jsx("span", {
15729
+ "aria-hidden": true,
15730
+ className: isPanel ? "h-9 w-9" : "h-7 w-7"
15731
+ }),
15732
+ /* @__PURE__ */ jsx(DPadButton, {
15733
+ direction: "left",
15734
+ icon: ArrowLeft,
15735
+ variant: mode,
15736
+ onMove: move,
15737
+ onStart: startContinuous,
15738
+ onStop: stopContinuous
15739
+ }),
15740
+ /* @__PURE__ */ jsx("span", {
15741
+ "aria-hidden": true,
15742
+ className: isPanel ? "h-9 w-9" : "h-7 w-7"
15743
+ }),
15744
+ /* @__PURE__ */ jsx(DPadButton, {
15745
+ direction: "right",
15746
+ icon: ArrowRight,
15747
+ variant: mode,
15748
+ onMove: move,
15749
+ onStart: startContinuous,
15750
+ onStop: stopContinuous
15751
+ }),
15752
+ /* @__PURE__ */ jsx("span", {
15753
+ "aria-hidden": true,
15754
+ className: isPanel ? "h-9 w-9" : "h-7 w-7"
15755
+ }),
15756
+ /* @__PURE__ */ jsx(DPadButton, {
15757
+ direction: "down",
15758
+ icon: ArrowDown,
15759
+ variant: mode,
15760
+ onMove: move,
15761
+ onStart: startContinuous,
15762
+ onStop: stopContinuous
15763
+ }),
15764
+ /* @__PURE__ */ jsx("span", {
15765
+ "aria-hidden": true,
15766
+ className: isPanel ? "h-9 w-9" : "h-7 w-7"
15767
+ })
15768
+ ]
15769
+ }),
15770
+ (zoomVisible || showHome) && /* @__PURE__ */ jsx("div", { className: sepClass }),
15771
+ /* @__PURE__ */ jsxs("div", {
15772
+ className: "flex flex-col gap-0.5",
15773
+ children: [zoomVisible && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
15774
+ type: "button",
15775
+ onClick: () => zoom("in"),
15776
+ disabled: busy,
15777
+ title: "Zoom in",
15778
+ className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15779
+ children: /* @__PURE__ */ jsx(ZoomIn, { className: sideIconSize })
15780
+ }), /* @__PURE__ */ jsx("button", {
15781
+ type: "button",
15782
+ onClick: () => zoom("out"),
15783
+ disabled: busy,
15784
+ title: "Zoom out",
15785
+ className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15786
+ children: /* @__PURE__ */ jsx(ZoomOut, { className: sideIconSize })
15787
+ })] }), showHome && /* @__PURE__ */ jsx("button", {
15788
+ type: "button",
15789
+ onClick: () => goHome(),
15790
+ disabled: busy,
15791
+ title: "Go home",
15792
+ className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15793
+ children: /* @__PURE__ */ jsx(House, { className: sideIconSize })
15794
+ })]
15795
+ }),
15796
+ presetsVisible && /* @__PURE__ */ jsxs("div", {
15797
+ className: "relative",
15798
+ children: [/* @__PURE__ */ jsxs("button", {
15799
+ type: "button",
15800
+ onClick: () => setPresetsOpen((v) => !v),
15801
+ disabled: busy,
15802
+ className: cn("flex items-center gap-1 rounded px-2 text-[10px] disabled:opacity-40", isPanel ? "h-9 text-foreground hover:bg-surface-hover" : "h-7 text-white hover:bg-white/15"),
15803
+ title: "Presets",
15804
+ children: ["Presets", /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", presetsOpen && "rotate-180") })]
15805
+ }), presetsOpen && /* @__PURE__ */ jsxs("div", {
15806
+ className: cn("absolute right-0 top-full mt-1 rounded-lg shadow-xl py-1 z-20", presetManagementVisible ? "min-w-[220px]" : "min-w-[140px]", isPanel ? "bg-surface border border-border" : "border border-white/30 bg-zinc-900/95 backdrop-blur-md"),
15715
15807
  children: [
15716
- /* @__PURE__ */ jsx("span", {
15717
- "aria-hidden": true,
15718
- className: isPanel ? "h-9 w-9" : "h-7 w-7"
15719
- }),
15720
- /* @__PURE__ */ jsx(DPadButton, {
15721
- direction: "up",
15722
- icon: ArrowUp,
15723
- variant: mode,
15724
- onMove: move,
15725
- onStart: startContinuous,
15726
- onStop: stopContinuous
15727
- }),
15728
- /* @__PURE__ */ jsx("span", {
15729
- "aria-hidden": true,
15730
- className: isPanel ? "h-9 w-9" : "h-7 w-7"
15731
- }),
15732
- /* @__PURE__ */ jsx(DPadButton, {
15733
- direction: "left",
15734
- icon: ArrowLeft,
15735
- variant: mode,
15736
- onMove: move,
15737
- onStart: startContinuous,
15738
- onStop: stopContinuous
15739
- }),
15740
- /* @__PURE__ */ jsx("span", {
15741
- "aria-hidden": true,
15742
- className: isPanel ? "h-9 w-9" : "h-7 w-7"
15743
- }),
15744
- /* @__PURE__ */ jsx(DPadButton, {
15745
- direction: "right",
15746
- icon: ArrowRight,
15747
- variant: mode,
15748
- onMove: move,
15749
- onStart: startContinuous,
15750
- onStop: stopContinuous
15751
- }),
15752
- /* @__PURE__ */ jsx("span", {
15753
- "aria-hidden": true,
15754
- className: isPanel ? "h-9 w-9" : "h-7 w-7"
15808
+ presets.length === 0 && /* @__PURE__ */ jsx("div", {
15809
+ className: cn("px-3 py-1.5 text-[10px]", isPanel ? "text-foreground-subtle" : "text-white/60"),
15810
+ children: "No presets yet"
15755
15811
  }),
15756
- /* @__PURE__ */ jsx(DPadButton, {
15757
- direction: "down",
15758
- icon: ArrowDown,
15759
- variant: mode,
15760
- onMove: move,
15761
- onStart: startContinuous,
15762
- onStop: stopContinuous
15763
- }),
15764
- /* @__PURE__ */ jsx("span", {
15765
- "aria-hidden": true,
15766
- className: isPanel ? "h-9 w-9" : "h-7 w-7"
15767
- })
15768
- ]
15769
- }),
15770
- (showZoom || showHome) && /* @__PURE__ */ jsx("div", { className: sepClass }),
15771
- /* @__PURE__ */ jsxs("div", {
15772
- className: "flex flex-col gap-0.5",
15773
- children: [showZoom && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
15774
- type: "button",
15775
- onClick: () => zoom("in"),
15776
- disabled: busy,
15777
- title: "Zoom in",
15778
- className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15779
- children: /* @__PURE__ */ jsx(ZoomIn, { className: sideIconSize })
15780
- }), /* @__PURE__ */ jsx("button", {
15781
- type: "button",
15782
- onClick: () => zoom("out"),
15783
- disabled: busy,
15784
- title: "Zoom out",
15785
- className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15786
- children: /* @__PURE__ */ jsx(ZoomOut, { className: sideIconSize })
15787
- })] }), showHome && /* @__PURE__ */ jsx("button", {
15788
- type: "button",
15789
- onClick: () => goHome(),
15790
- disabled: busy,
15791
- title: "Go home",
15792
- className: cn("flex items-center justify-center rounded disabled:opacity-40", sideButtonSize, sideButtonHover),
15793
- children: /* @__PURE__ */ jsx(House, { className: sideIconSize })
15794
- })]
15795
- }),
15796
- presetsVisible && /* @__PURE__ */ jsxs("div", {
15797
- className: "relative",
15798
- children: [/* @__PURE__ */ jsxs("button", {
15799
- type: "button",
15800
- onClick: () => setPresetsOpen((v) => !v),
15801
- disabled: busy,
15802
- className: cn("flex items-center gap-1 rounded px-2 text-[10px] disabled:opacity-40", isPanel ? "h-9 text-foreground hover:bg-surface-hover" : "h-7 text-white hover:bg-white/15"),
15803
- title: "Presets",
15804
- children: ["Presets", /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", presetsOpen && "rotate-180") })]
15805
- }), presetsOpen && /* @__PURE__ */ jsx("div", {
15806
- className: cn("absolute right-0 top-full mt-1 min-w-[140px] rounded-lg shadow-xl py-1 z-20", isPanel ? "bg-surface border border-border" : "border border-white/30 bg-zinc-900/95 backdrop-blur-md"),
15807
- children: presets.map((p) => /* @__PURE__ */ jsxs("div", {
15812
+ presets.map((p) => /* @__PURE__ */ jsxs("div", {
15808
15813
  className: cn("group flex items-center", isPanel ? "hover:bg-surface-hover" : "hover:bg-white/15"),
15809
15814
  children: [/* @__PURE__ */ jsx("button", {
15810
15815
  type: "button",
@@ -15823,44 +15828,45 @@ function PTZOverlay({ controls, mode = "overlay", showPresets, showZoom = true,
15823
15828
  className: cn("mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded", "text-foreground-subtle hover:bg-danger/15 hover:text-danger disabled:opacity-40"),
15824
15829
  children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
15825
15830
  })]
15826
- }, p.id))
15827
- })]
15828
- })
15829
- ]
15830
- }),
15831
- presetManagementVisible && /* @__PURE__ */ jsxs("div", {
15832
- className: "flex flex-col gap-1 rounded-lg border border-border p-2",
15833
- children: [/* @__PURE__ */ jsxs("div", {
15834
- className: "flex items-center gap-2",
15835
- children: [/* @__PURE__ */ jsx("input", {
15836
- type: "text",
15837
- value: presetName,
15838
- onChange: (e) => setPresetName(e.target.value),
15839
- onKeyDown: (e) => {
15840
- if (e.key === "Enter") handleSavePreset();
15841
- },
15842
- disabled: busy || maxPresetsReached,
15843
- placeholder: "New preset name",
15844
- maxLength: 64,
15845
- className: cn("min-w-0 flex-1 rounded border border-border bg-surface px-2 py-1 text-[11px] text-foreground", "placeholder:text-foreground-subtle focus:outline-none focus:ring-1 focus:ring-primary/50", "disabled:opacity-40")
15846
- }), /* @__PURE__ */ jsxs("button", {
15847
- type: "button",
15848
- onClick: () => void handleSavePreset(),
15849
- disabled: busy || maxPresetsReached || presetName.trim().length === 0,
15850
- title: maxPresetsReached ? `Camera preset limit reached (${options?.maxPresets})` : "Save current position as a new preset",
15851
- className: cn("flex h-7 shrink-0 items-center gap-1 rounded px-2 text-[10px] font-medium", "bg-primary/15 text-primary hover:bg-primary/25 disabled:opacity-40"),
15852
- children: [/* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }), "Save current position"]
15831
+ }, p.id)),
15832
+ presetManagementVisible && /* @__PURE__ */ jsxs(Fragment$1, { children: [
15833
+ presets.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("my-1 h-px", isPanel ? "bg-border" : "bg-white/15") }),
15834
+ /* @__PURE__ */ jsxs("div", {
15835
+ className: "flex items-center gap-1 px-2 py-1",
15836
+ children: [/* @__PURE__ */ jsx("input", {
15837
+ type: "text",
15838
+ value: presetName,
15839
+ onChange: (e) => setPresetName(e.target.value),
15840
+ onKeyDown: (e) => {
15841
+ if (e.key === "Enter") handleSavePreset();
15842
+ },
15843
+ disabled: busy || maxPresetsReached,
15844
+ placeholder: "New preset name",
15845
+ maxLength: 64,
15846
+ className: cn("min-w-0 flex-1 rounded border px-2 py-1 text-[11px]", "focus:outline-none focus:ring-1 focus:ring-primary/50 disabled:opacity-40", isPanel ? "border-border bg-surface text-foreground placeholder:text-foreground-subtle" : "border-white/30 bg-zinc-800 text-white placeholder:text-white/40")
15847
+ }), /* @__PURE__ */ jsx("button", {
15848
+ type: "button",
15849
+ onClick: () => void handleSavePreset(),
15850
+ disabled: busy || maxPresetsReached || presetName.trim().length === 0,
15851
+ title: maxPresetsReached ? `Camera preset limit reached (${options?.maxPresets})` : "Save current position as a new preset",
15852
+ className: cn("flex h-7 w-7 shrink-0 items-center justify-center rounded", "bg-primary/15 text-primary hover:bg-primary/25 disabled:opacity-40"),
15853
+ children: /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" })
15854
+ })]
15855
+ }),
15856
+ maxPresetsReached && /* @__PURE__ */ jsxs("span", {
15857
+ className: cn("block px-2 pb-1 text-[10px]", isPanel ? "text-foreground-subtle" : "text-white/60"),
15858
+ children: [
15859
+ "Preset limit reached (",
15860
+ options?.maxPresets,
15861
+ ")."
15862
+ ]
15863
+ })
15864
+ ] })
15865
+ ]
15853
15866
  })]
15854
- }), maxPresetsReached && /* @__PURE__ */ jsxs("span", {
15855
- className: "text-[10px] text-foreground-subtle",
15856
- children: [
15857
- "Camera preset limit reached (",
15858
- options?.maxPresets,
15859
- "). Delete a preset to add a new one."
15860
- ]
15861
- })]
15862
- })
15863
- ]
15867
+ })
15868
+ ]
15869
+ })]
15864
15870
  });
15865
15871
  }
15866
15872
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@camstack/ui-library",
3
- "version": "1.1.25",
3
+ "version": "1.1.26",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",