erp-pro-ui 0.1.9 → 0.2.0
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/README.md +14 -0
- package/dist/button.cjs +1 -1
- package/dist/button.mjs +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.mjs +1 -1
- package/dist/charts.cjs +1 -1
- package/dist/charts.mjs +1 -1
- package/dist/chip.cjs +1 -1
- package/dist/chip.mjs +1 -1
- package/dist/chunks/{DropdownMenu-CeD9kl_N.cjs → DropdownMenu-BDrNYO-D.cjs} +5 -4
- package/dist/chunks/DropdownMenu-BDrNYO-D.cjs.map +1 -0
- package/dist/chunks/{DropdownMenu-CBdZoVQs.mjs → DropdownMenu-BtTOri-A.mjs} +5 -4
- package/dist/chunks/DropdownMenu-BtTOri-A.mjs.map +1 -0
- package/dist/chunks/{tooltip-PJaQa8_l.cjs → Tooltip-DD30yj3A.cjs} +1 -1
- package/dist/chunks/{tooltip-PJaQa8_l.cjs.map → Tooltip-DD30yj3A.cjs.map} +1 -1
- package/dist/chunks/{tooltip-CmB8xKOF.mjs → Tooltip-DK3B879v.mjs} +1 -1
- package/dist/chunks/{tooltip-CmB8xKOF.mjs.map → Tooltip-DK3B879v.mjs.map} +1 -1
- package/dist/chunks/{button-DddUhuR-.mjs → button-A6UTvrOu.mjs} +2 -2
- package/dist/chunks/{button-DddUhuR-.mjs.map → button-A6UTvrOu.mjs.map} +1 -1
- package/dist/chunks/{button-xqernofO.cjs → button-C4MXPxsC.cjs} +2 -2
- package/dist/chunks/{button-xqernofO.cjs.map → button-C4MXPxsC.cjs.map} +1 -1
- package/dist/chunks/{calendar-BVuDnWUc.mjs → calendar-5XzPqKbE.mjs} +4 -4
- package/dist/chunks/calendar-5XzPqKbE.mjs.map +1 -0
- package/dist/chunks/{calendar-CYxkfvDv.cjs → calendar-CQJgQ5H_.cjs} +4 -4
- package/dist/chunks/calendar-CQJgQ5H_.cjs.map +1 -0
- package/dist/chunks/{charts-DuVZD7el.cjs → charts-BmIV-mJy.cjs} +40 -9
- package/dist/chunks/charts-BmIV-mJy.cjs.map +1 -0
- package/dist/chunks/{charts-mfevxJSU.mjs → charts-DkVu0rFc.mjs} +40 -9
- package/dist/chunks/charts-DkVu0rFc.mjs.map +1 -0
- package/dist/chunks/{chip-BDrpg5Ux.cjs → chip-B0YzBwkz.cjs} +7 -4
- package/dist/chunks/chip-B0YzBwkz.cjs.map +1 -0
- package/dist/chunks/{chip-Dt0p0_zd.mjs → chip-CqcdcSs2.mjs} +7 -4
- package/dist/chunks/chip-CqcdcSs2.mjs.map +1 -0
- package/dist/chunks/color-palette-C3lesasJ.mjs +329 -0
- package/dist/chunks/color-palette-C3lesasJ.mjs.map +1 -0
- package/dist/chunks/color-palette-pLh6En3n.cjs +384 -0
- package/dist/chunks/color-palette-pLh6En3n.cjs.map +1 -0
- package/dist/chunks/{combobox-0n1_tB8L.mjs → combobox-B6yk5U82.mjs} +4 -4
- package/dist/chunks/combobox-B6yk5U82.mjs.map +1 -0
- package/dist/chunks/{combobox-Ca7-BcLO.cjs → combobox-CtNrGmuR.cjs} +4 -4
- package/dist/chunks/combobox-CtNrGmuR.cjs.map +1 -0
- package/dist/chunks/{data-table-Bt2c9dog.mjs → data-table-Dtf6lKpp.mjs} +11 -11
- package/dist/chunks/{data-table-Bt2c9dog.mjs.map → data-table-Dtf6lKpp.mjs.map} +1 -1
- package/dist/chunks/{data-table-DhCpQjdf.cjs → data-table-fAEuevPn.cjs} +12 -12
- package/dist/chunks/{data-table-DhCpQjdf.cjs.map → data-table-fAEuevPn.cjs.map} +1 -1
- package/dist/chunks/{date-picker-CDACysPq.mjs → date-picker-BmQ0rgwH.mjs} +2 -2
- package/dist/chunks/{date-picker-CDACysPq.mjs.map → date-picker-BmQ0rgwH.mjs.map} +1 -1
- package/dist/chunks/{date-picker-duwF35Rk.cjs → date-picker-qpUZMtZC.cjs} +2 -2
- package/dist/chunks/{date-picker-duwF35Rk.cjs.map → date-picker-qpUZMtZC.cjs.map} +1 -1
- package/dist/chunks/{form-CvNNjA1i.mjs → form-CtZ6U-_B.mjs} +2 -2
- package/dist/chunks/{form-CvNNjA1i.mjs.map → form-CtZ6U-_B.mjs.map} +1 -1
- package/dist/chunks/{form-C_JxqsSZ.cjs → form-X6Vyaavl.cjs} +2 -2
- package/dist/chunks/{form-C_JxqsSZ.cjs.map → form-X6Vyaavl.cjs.map} +1 -1
- package/dist/chunks/{input-BvTrWtRn.mjs → input-Bqo9Q5zF.mjs} +33 -12
- package/dist/chunks/input-Bqo9Q5zF.mjs.map +1 -0
- package/dist/chunks/{input-wAznik-_.cjs → input-DkCPyWXi.cjs} +33 -12
- package/dist/chunks/input-DkCPyWXi.cjs.map +1 -0
- package/dist/chunks/{label-CxmbGh0l.cjs → label-BKzqfAAq.cjs} +2 -2
- package/dist/chunks/{label-CxmbGh0l.cjs.map → label-BKzqfAAq.cjs.map} +1 -1
- package/dist/chunks/{label-C1Ekt3j2.mjs → label-Drxg0cG2.mjs} +2 -2
- package/dist/chunks/{label-C1Ekt3j2.mjs.map → label-Drxg0cG2.mjs.map} +1 -1
- package/dist/chunks/{multi-select-combobox-CdPcvP_S.cjs → multi-select-combobox-C0DoDzxQ.cjs} +5 -5
- package/dist/chunks/multi-select-combobox-C0DoDzxQ.cjs.map +1 -0
- package/dist/chunks/{multi-select-combobox-_nuc3cZ3.mjs → multi-select-combobox-Do23ZfOQ.mjs} +5 -5
- package/dist/chunks/multi-select-combobox-Do23ZfOQ.mjs.map +1 -0
- package/dist/chunks/{password-strength-meter-BEx94cfy.mjs → password-strength-meter-BsvqQBAg.mjs} +3 -3
- package/dist/chunks/{password-strength-meter-BEx94cfy.mjs.map → password-strength-meter-BsvqQBAg.mjs.map} +1 -1
- package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs → password-strength-meter-DCi_BP7e.cjs} +3 -3
- package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs.map → password-strength-meter-DCi_BP7e.cjs.map} +1 -1
- package/dist/chunks/radio-CuiM_gDv.mjs +50 -0
- package/dist/chunks/radio-CuiM_gDv.mjs.map +1 -0
- package/dist/chunks/radio-zx9xEW_C.cjs +56 -0
- package/dist/chunks/radio-zx9xEW_C.cjs.map +1 -0
- package/dist/chunks/{select-B3tfHqQo.mjs → select-CUaSNR09.mjs} +4 -4
- package/dist/chunks/select-CUaSNR09.mjs.map +1 -0
- package/dist/chunks/{select-BwB9MsSv.cjs → select-bZ9WqLOc.cjs} +4 -4
- package/dist/chunks/select-bZ9WqLOc.cjs.map +1 -0
- package/dist/chunks/{sidebar-CCKZ_NMW.mjs → sidebar-DYEDFV2u.mjs} +3 -3
- package/dist/chunks/{sidebar-CCKZ_NMW.mjs.map → sidebar-DYEDFV2u.mjs.map} +1 -1
- package/dist/chunks/{sidebar-WG9Wnwnv.cjs → sidebar-Kkr45nuN.cjs} +3 -3
- package/dist/chunks/{sidebar-WG9Wnwnv.cjs.map → sidebar-Kkr45nuN.cjs.map} +1 -1
- package/dist/chunks/{stepper-CvuyKYXC.cjs → stepper-DepvEGfr.cjs} +2 -2
- package/dist/chunks/{stepper-CvuyKYXC.cjs.map → stepper-DepvEGfr.cjs.map} +1 -1
- package/dist/chunks/{stepper-CjywisS9.mjs → stepper-Jv5OS1nY.mjs} +2 -2
- package/dist/chunks/{stepper-CjywisS9.mjs.map → stepper-Jv5OS1nY.mjs.map} +1 -1
- package/dist/chunks/{sun-to-moon-button-azXKWDYT.mjs → sun-to-moon-button-BJtBEaa3.mjs} +69 -50
- package/dist/chunks/sun-to-moon-button-BJtBEaa3.mjs.map +1 -0
- package/dist/chunks/{sun-to-moon-button-A__wuc_4.cjs → sun-to-moon-button-PwgTPsTW.cjs} +69 -50
- package/dist/chunks/sun-to-moon-button-PwgTPsTW.cjs.map +1 -0
- package/dist/chunks/{switch-DPyzVrNh.cjs → switch-X3l8xnle.cjs} +10 -29
- package/dist/chunks/switch-X3l8xnle.cjs.map +1 -0
- package/dist/chunks/{switch-C1gKE0m0.mjs → switch-iPsN1NS2.mjs} +10 -29
- package/dist/chunks/switch-iPsN1NS2.mjs.map +1 -0
- package/dist/color-palette.cjs +9 -1
- package/dist/color-palette.mjs +2 -2
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.mjs +1 -1
- package/dist/components/data-display/charts/BarChart.d.ts +5 -0
- package/dist/components/data-display/charts/BarChart.d.ts.map +1 -1
- package/dist/components/data-display/chip/Chip.d.ts +1 -1
- package/dist/components/data-display/chip/Chip.d.ts.map +1 -1
- package/dist/components/data-display/color-palette/ColorPalette.d.ts +24 -16
- package/dist/components/data-display/color-palette/ColorPalette.d.ts.map +1 -1
- package/dist/components/data-display/color-palette/index.d.ts +2 -1
- package/dist/components/data-display/color-palette/index.d.ts.map +1 -1
- package/dist/components/data-display/dashboard-cards/StatCard.d.ts +11 -3
- package/dist/components/data-display/dashboard-cards/StatCard.d.ts.map +1 -1
- package/dist/components/effects/sun-to-moon-button/ThemeSwitcherButtons.d.ts +16 -1
- package/dist/components/effects/sun-to-moon-button/ThemeSwitcherButtons.d.ts.map +1 -1
- package/dist/components/effects/sun-to-moon-button/index.d.ts +1 -1
- package/dist/components/effects/sun-to-moon-button/index.d.ts.map +1 -1
- package/dist/components/forms/input/Input.d.ts.map +1 -1
- package/dist/components/forms/input/types.d.ts +2 -0
- package/dist/components/forms/input/types.d.ts.map +1 -1
- package/dist/components/forms/radio/Radio.d.ts.map +1 -1
- package/dist/components/forms/switch/Switch.d.ts.map +1 -1
- package/dist/components/overlays/dropdown-menu/DropdownMenu.d.ts +1 -1
- package/dist/components/overlays/dropdown-menu/DropdownMenu.d.ts.map +1 -1
- package/dist/components/overlays/dropdown-menu/types.d.ts +1 -0
- package/dist/components/overlays/dropdown-menu/types.d.ts.map +1 -1
- package/dist/data-table.cjs +1 -1
- package/dist/data-table.mjs +1 -1
- package/dist/date-picker.cjs +1 -1
- package/dist/date-picker.mjs +1 -1
- package/dist/form.cjs +1 -1
- package/dist/form.mjs +1 -1
- package/dist/index.cjs +81 -67
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +74 -68
- package/dist/index.mjs.map +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.mjs +1 -1
- package/dist/label.cjs +1 -1
- package/dist/label.mjs +1 -1
- package/dist/multi-select-combobox.cjs +1 -1
- package/dist/multi-select-combobox.mjs +1 -1
- package/dist/password-strength-meter.cjs +1 -1
- package/dist/password-strength-meter.mjs +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.mjs +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.mjs +1 -1
- package/dist/sidebar.cjs +1 -1
- package/dist/sidebar.mjs +1 -1
- package/dist/stepper.cjs +1 -1
- package/dist/stepper.mjs +1 -1
- package/dist/sun-to-moon-button.cjs +1 -1
- package/dist/sun-to-moon-button.mjs +1 -1
- package/dist/switch.cjs +1 -1
- package/dist/switch.mjs +1 -1
- package/dist/tooltip.cjs +2 -2
- package/dist/tooltip.mjs +1 -1
- package/package.json +5 -5
- package/dist/chunks/DropdownMenu-CBdZoVQs.mjs.map +0 -1
- package/dist/chunks/DropdownMenu-CeD9kl_N.cjs.map +0 -1
- package/dist/chunks/calendar-BVuDnWUc.mjs.map +0 -1
- package/dist/chunks/calendar-CYxkfvDv.cjs.map +0 -1
- package/dist/chunks/charts-DuVZD7el.cjs.map +0 -1
- package/dist/chunks/charts-mfevxJSU.mjs.map +0 -1
- package/dist/chunks/chip-BDrpg5Ux.cjs.map +0 -1
- package/dist/chunks/chip-Dt0p0_zd.mjs.map +0 -1
- package/dist/chunks/color-palette-BmQC14gE.cjs +0 -789
- package/dist/chunks/color-palette-BmQC14gE.cjs.map +0 -1
- package/dist/chunks/color-palette-DnX1sODj.mjs +0 -782
- package/dist/chunks/color-palette-DnX1sODj.mjs.map +0 -1
- package/dist/chunks/combobox-0n1_tB8L.mjs.map +0 -1
- package/dist/chunks/combobox-Ca7-BcLO.cjs.map +0 -1
- package/dist/chunks/input-BvTrWtRn.mjs.map +0 -1
- package/dist/chunks/input-wAznik-_.cjs.map +0 -1
- package/dist/chunks/multi-select-combobox-CdPcvP_S.cjs.map +0 -1
- package/dist/chunks/multi-select-combobox-_nuc3cZ3.mjs.map +0 -1
- package/dist/chunks/radio-DOkKyKKL.mjs +0 -44
- package/dist/chunks/radio-DOkKyKKL.mjs.map +0 -1
- package/dist/chunks/radio-DyQ3jF-M.cjs +0 -50
- package/dist/chunks/radio-DyQ3jF-M.cjs.map +0 -1
- package/dist/chunks/select-B3tfHqQo.mjs.map +0 -1
- package/dist/chunks/select-BwB9MsSv.cjs.map +0 -1
- package/dist/chunks/sun-to-moon-button-A__wuc_4.cjs.map +0 -1
- package/dist/chunks/sun-to-moon-button-azXKWDYT.mjs.map +0 -1
- package/dist/chunks/switch-C1gKE0m0.mjs.map +0 -1
- package/dist/chunks/switch-DPyzVrNh.cjs.map +0 -1
package/README.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
Typed React 19 component library for ERP, admin, and SaaS products.
|
|
4
4
|
|
|
5
|
+
## What's New in v0.2.0
|
|
6
|
+
|
|
7
|
+
- **RTL support across all form controls** — `Combobox`, `Select`, `MultiSelectCombobox`, `Label`, `Form`, `PasswordStrengthMeter`, and `Switch` now use CSS logical properties (`ms-*`, `me-*`, `ps-*`, `pe-*`) throughout. No extra configuration needed when the parent carries `dir="rtl"`.
|
|
8
|
+
- **`Switch` RTL + dark mode** — Pass `dir="rtl"` directly on the component (or inherit it from the document). The thumb position and label alignment respond automatically. The unchecked track now uses the correct `--ds-surface-5` design token in both light and dark mode.
|
|
9
|
+
- **`Radio` rewrite** — The native `<input type="radio">` was replaced with a fully custom styled indicator. Selected state and active ring now render correctly in dark mode.
|
|
10
|
+
- **`Drawer` RTL** — Logical CSS properties are used internally so slide direction and spacing flip automatically with `dir="rtl"`.
|
|
11
|
+
- **`DropdownMenu` panel width** — The panel is now `min-w-max`, so it no longer collapses narrower than its content in RTL and tight-layout contexts.
|
|
12
|
+
- **`StatCard` size variants** — Three sizes available: `"sm"`, `"md"` (default), and `"lg"`. `sm` hides the chart slot; `lg` shows a legend row in the header.
|
|
13
|
+
- **`PositiveNegativeBarChart`** — Border radius is now applied to the free end of every bar (away from the zero line), for both positive and negative bars in horizontal layout.
|
|
14
|
+
|
|
5
15
|
This package is designed to be consumed from a different project, not only inside this monorepo. It ships compiled styles, typed components, root imports, subpath imports, icons, helpers, machine-readable docs metadata, and a publishable npm package surface.
|
|
6
16
|
|
|
7
17
|
Live docs: [daniel-heydari-dev.github.io/erp-pro-ui](https://daniel-heydari-dev.github.io/erp-pro-ui/)
|
|
@@ -721,6 +731,10 @@ The tables below document the public surface you can use from another project.
|
|
|
721
731
|
| `NeonLineChart` | `erp-pro-ui/charts` | Glowing line charts |
|
|
722
732
|
| `StackedBarChart` | `erp-pro-ui/charts` | Stacked comparisons |
|
|
723
733
|
| `ThinBreakdownBar` | `erp-pro-ui/charts` | Compact segmented metric bars |
|
|
734
|
+
| `PositiveNegativeBarChart`, `PositiveNegativeBarChartData` | `erp-pro-ui/charts` | Horizontal bar chart with positive/negative bars |
|
|
735
|
+
| `StatCard`, `StatCardProps`, `StatCardSize`, `StatCardLegendItem` | root import only | KPI stat card with sm / md / lg size variants |
|
|
736
|
+
| `ChartCard` | root import only | Dashboard chart container card |
|
|
737
|
+
| `TopProductsCard`, `TopProductsCardProps`, `TopProductItem` | root import only | Ranked list card for top items |
|
|
724
738
|
|
|
725
739
|
### Visual Effects And Text Components
|
|
726
740
|
|
package/dist/button.cjs
CHANGED
package/dist/button.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Button } from "./chunks/button-
|
|
1
|
+
import { t as Button } from "./chunks/button-A6UTvrOu.mjs";
|
|
2
2
|
export { Button };
|
package/dist/calendar.cjs
CHANGED
package/dist/calendar.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Calendar } from "./chunks/calendar-
|
|
1
|
+
import { t as Calendar } from "./chunks/calendar-5XzPqKbE.mjs";
|
|
2
2
|
export { Calendar };
|
package/dist/charts.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const require_charts = require("./chunks/charts-
|
|
2
|
+
const require_charts = require("./chunks/charts-BmIV-mJy.cjs");
|
|
3
3
|
exports.AreaChart = require_charts.AreaChart;
|
|
4
4
|
exports.BarChart = require_charts.BarChart;
|
|
5
5
|
exports.MiniNeonSparkline = require_charts.MiniNeonSparkline;
|
package/dist/charts.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as ThinBreakdownBar, c as NeonLineChart, d as getChartPalette, i as AreaChart, l as chartColorTokens, n as PositiveNegativeBarChart, o as StackedBarChart, r as BarChart, s as MiniNeonSparkline, t as PieChart, u as getChartColorVar } from "./chunks/charts-
|
|
1
|
+
import { a as ThinBreakdownBar, c as NeonLineChart, d as getChartPalette, i as AreaChart, l as chartColorTokens, n as PositiveNegativeBarChart, o as StackedBarChart, r as BarChart, s as MiniNeonSparkline, t as PieChart, u as getChartColorVar } from "./chunks/charts-DkVu0rFc.mjs";
|
|
2
2
|
export { AreaChart, BarChart, MiniNeonSparkline, NeonLineChart, PieChart, PositiveNegativeBarChart, StackedBarChart, ThinBreakdownBar, chartColorTokens, getChartColorVar, getChartPalette };
|
package/dist/chip.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const require_chip = require("./chunks/chip-
|
|
2
|
+
const require_chip = require("./chunks/chip-B0YzBwkz.cjs");
|
|
3
3
|
exports.Chip = require_chip.Chip;
|
|
4
4
|
exports.SplitChip = require_chip.SplitChip;
|
|
5
5
|
exports.StatusDotChip = require_chip.StatusDotChip;
|
package/dist/chip.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as StatusDotChip, r as Chip, t as SplitChip } from "./chunks/chip-
|
|
1
|
+
import { n as StatusDotChip, r as Chip, t as SplitChip } from "./chunks/chip-CqcdcSs2.mjs";
|
|
2
2
|
export { Chip, SplitChip, StatusDotChip };
|
|
@@ -3,7 +3,7 @@ const require_utils = require("./utils-LRbEQHYs.cjs");
|
|
|
3
3
|
let react = require("react");
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
5
|
//#region src/components/overlays/dropdown-menu/DropdownMenu.tsx
|
|
6
|
-
function DropdownMenu({ trigger, children, open, onOpenChange, className, panelClassName, animationClassName, closeOnItemClick = false }) {
|
|
6
|
+
function DropdownMenu({ trigger, children, open, onOpenChange, className, panelClassName, animationClassName, closeOnItemClick = false, align }) {
|
|
7
7
|
const wrapperRef = (0, react.useRef)(null);
|
|
8
8
|
const [internalOpen, setInternalOpen] = (0, react.useState)(false);
|
|
9
9
|
const isControlled = open !== void 0;
|
|
@@ -27,18 +27,19 @@ function DropdownMenu({ trigger, children, open, onOpenChange, className, panelC
|
|
|
27
27
|
document.removeEventListener("keydown", handleKeyDown);
|
|
28
28
|
};
|
|
29
29
|
}, []);
|
|
30
|
+
const defaultAnimation = align === "start" ? "origin-top-right" : "origin-top-right";
|
|
30
31
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
31
32
|
ref: wrapperRef,
|
|
32
33
|
className: require_utils.mergeClassNames("relative inline-flex", className),
|
|
33
34
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
34
|
-
className: "
|
|
35
|
+
className: "flex w-full",
|
|
35
36
|
onMouseDown: (event) => {
|
|
36
37
|
event.preventDefault();
|
|
37
38
|
setOpen((current) => !current);
|
|
38
39
|
},
|
|
39
40
|
children: trigger
|
|
40
41
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
41
|
-
className: require_utils.mergeClassNames("absolute z-
|
|
42
|
+
className: require_utils.mergeClassNames("absolute z-1200 min-w-max rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl", "top-full mt-1 transition-all duration-300 ease-in-out", align === "end" ? "end-5" : align === "start" ? "start-5" : "", animationClassName ?? defaultAnimation, resolvedOpen ? "scale-100" : "scale-0", panelClassName),
|
|
42
43
|
onClick: () => {
|
|
43
44
|
if (closeOnItemClick) setOpen(false);
|
|
44
45
|
},
|
|
@@ -54,4 +55,4 @@ Object.defineProperty(exports, "DropdownMenu", {
|
|
|
54
55
|
}
|
|
55
56
|
});
|
|
56
57
|
|
|
57
|
-
//# sourceMappingURL=DropdownMenu-
|
|
58
|
+
//# sourceMappingURL=DropdownMenu-BDrNYO-D.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownMenu-BDrNYO-D.cjs","names":[],"sources":["../../src/components/overlays/dropdown-menu/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\nimport type { DropdownMenuProps } from \"./types\";\n\nexport function DropdownMenu({\n trigger,\n children,\n open,\n onOpenChange,\n className,\n panelClassName,\n animationClassName,\n closeOnItemClick = false,\n align,\n}: DropdownMenuProps) {\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [internalOpen, setInternalOpen] = useState(false);\n const isControlled = open !== undefined;\n const resolvedOpen = isControlled ? open : internalOpen;\n\n const setOpen = (nextOpen: boolean | ((current: boolean) => boolean)) => {\n const finalValue =\n typeof nextOpen === \"function\"\n ? nextOpen(resolvedOpen)\n : nextOpen;\n\n if (!isControlled) {\n setInternalOpen(finalValue);\n }\n\n onOpenChange?.(finalValue);\n };\n\n useEffect(() => {\n function handleClickOutside(event: MouseEvent) {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n setOpen(false);\n }\n }\n\n function handleKeyDown(event: KeyboardEvent) {\n if (event.key === \"Escape\") {\n setOpen(false);\n }\n }\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n const defaultAnimation = align === \"start\" ? \"origin-top-right\": \"origin-top-right\";\n\n return (\n <div ref={wrapperRef} className={mergeClassNames(\"relative inline-flex\", className)}>\n <div\n className=\"flex w-full\"\n onMouseDown={(event) => {\n event.preventDefault();\n setOpen((current) => !current);\n }}\n >\n {trigger}\n </div>\n\n <div\n className={mergeClassNames(\n \"absolute z-1200 min-w-max rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl\",\n \"top-full mt-1 transition-all duration-300 ease-in-out\",\n align === \"end\" ? \"end-5\" : align === \"start\" ? \"start-5\" : \"\",\n animationClassName ?? defaultAnimation,\n resolvedOpen ? \"scale-100\" : \"scale-0\",\n panelClassName,\n )}\n onClick={() => {\n if (closeOnItemClick) {\n setOpen(false);\n }\n }}\n >\n {children}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;AAKA,SAAgB,aAAa,EAC3B,SACA,UACA,MACA,cACA,WACA,gBACA,oBACA,mBAAmB,OACnB,SACoB;CACpB,MAAM,cAAA,GAAA,MAAA,QAAoC,KAAK;CAC/C,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAA4B,MAAM;CACvD,MAAM,eAAe,SAAS,KAAA;CAC9B,MAAM,eAAe,eAAe,OAAO;CAE3C,MAAM,WAAW,aAAwD;EACvE,MAAM,aACJ,OAAO,aAAa,aAChB,SAAS,aAAa,GACtB;AAEN,MAAI,CAAC,aACH,iBAAgB,WAAW;AAG7B,iBAAe,WAAW;;AAG5B,EAAA,GAAA,MAAA,iBAAgB;EACd,SAAS,mBAAmB,OAAmB;AAC7C,OAAI,WAAW,WAAW,CAAC,WAAW,QAAQ,SAAS,MAAM,OAAe,CAC1E,SAAQ,MAAM;;EAIlB,SAAS,cAAc,OAAsB;AAC3C,OAAI,MAAM,QAAQ,SAChB,SAAQ,MAAM;;AAIlB,WAAS,iBAAiB,aAAa,mBAAmB;AAC1D,WAAS,iBAAiB,WAAW,cAAc;AAEnD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,YAAS,oBAAoB,WAAW,cAAc;;IAEvD,EAAE,CAAC;CAEN,MAAM,mBAAmB,UAAU,UAAW,qBAAoB;AAElE,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,KAAK;EAAY,WAAW,cAAA,gBAAgB,wBAAwB,UAAU;YAAnF,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAU;GACV,cAAc,UAAU;AACtB,UAAM,gBAAgB;AACtB,aAAS,YAAY,CAAC,QAAQ;;aAG/B;GACG,CAAA,EAEN,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,WAAW,cAAA,gBACT,4GACA,yDACA,UAAU,QAAQ,UAAU,UAAU,UAAU,YAAY,IAC5D,sBAAsB,kBACtB,eAAe,cAAc,WAC7B,eACD;GACD,eAAe;AACb,QAAI,iBACF,SAAQ,MAAM;;GAIjB;GACG,CAAA,CACF"}
|
|
@@ -2,7 +2,7 @@ import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
|
|
|
2
2
|
import { useEffect, useRef, useState } from "react";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
//#region src/components/overlays/dropdown-menu/DropdownMenu.tsx
|
|
5
|
-
function DropdownMenu({ trigger, children, open, onOpenChange, className, panelClassName, animationClassName, closeOnItemClick = false }) {
|
|
5
|
+
function DropdownMenu({ trigger, children, open, onOpenChange, className, panelClassName, animationClassName, closeOnItemClick = false, align }) {
|
|
6
6
|
const wrapperRef = useRef(null);
|
|
7
7
|
const [internalOpen, setInternalOpen] = useState(false);
|
|
8
8
|
const isControlled = open !== void 0;
|
|
@@ -26,18 +26,19 @@ function DropdownMenu({ trigger, children, open, onOpenChange, className, panelC
|
|
|
26
26
|
document.removeEventListener("keydown", handleKeyDown);
|
|
27
27
|
};
|
|
28
28
|
}, []);
|
|
29
|
+
const defaultAnimation = align === "start" ? "origin-top-right" : "origin-top-right";
|
|
29
30
|
return /* @__PURE__ */ jsxs("div", {
|
|
30
31
|
ref: wrapperRef,
|
|
31
32
|
className: mergeClassNames("relative inline-flex", className),
|
|
32
33
|
children: [/* @__PURE__ */ jsx("div", {
|
|
33
|
-
className: "
|
|
34
|
+
className: "flex w-full",
|
|
34
35
|
onMouseDown: (event) => {
|
|
35
36
|
event.preventDefault();
|
|
36
37
|
setOpen((current) => !current);
|
|
37
38
|
},
|
|
38
39
|
children: trigger
|
|
39
40
|
}), /* @__PURE__ */ jsx("div", {
|
|
40
|
-
className: mergeClassNames("absolute z-
|
|
41
|
+
className: mergeClassNames("absolute z-1200 min-w-max rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl", "top-full mt-1 transition-all duration-300 ease-in-out", align === "end" ? "end-5" : align === "start" ? "start-5" : "", animationClassName ?? defaultAnimation, resolvedOpen ? "scale-100" : "scale-0", panelClassName),
|
|
41
42
|
onClick: () => {
|
|
42
43
|
if (closeOnItemClick) setOpen(false);
|
|
43
44
|
},
|
|
@@ -48,4 +49,4 @@ function DropdownMenu({ trigger, children, open, onOpenChange, className, panelC
|
|
|
48
49
|
//#endregion
|
|
49
50
|
export { DropdownMenu as t };
|
|
50
51
|
|
|
51
|
-
//# sourceMappingURL=DropdownMenu-
|
|
52
|
+
//# sourceMappingURL=DropdownMenu-BtTOri-A.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownMenu-BtTOri-A.mjs","names":[],"sources":["../../src/components/overlays/dropdown-menu/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\nimport type { DropdownMenuProps } from \"./types\";\n\nexport function DropdownMenu({\n trigger,\n children,\n open,\n onOpenChange,\n className,\n panelClassName,\n animationClassName,\n closeOnItemClick = false,\n align,\n}: DropdownMenuProps) {\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [internalOpen, setInternalOpen] = useState(false);\n const isControlled = open !== undefined;\n const resolvedOpen = isControlled ? open : internalOpen;\n\n const setOpen = (nextOpen: boolean | ((current: boolean) => boolean)) => {\n const finalValue =\n typeof nextOpen === \"function\"\n ? nextOpen(resolvedOpen)\n : nextOpen;\n\n if (!isControlled) {\n setInternalOpen(finalValue);\n }\n\n onOpenChange?.(finalValue);\n };\n\n useEffect(() => {\n function handleClickOutside(event: MouseEvent) {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n setOpen(false);\n }\n }\n\n function handleKeyDown(event: KeyboardEvent) {\n if (event.key === \"Escape\") {\n setOpen(false);\n }\n }\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, []);\n\n const defaultAnimation = align === \"start\" ? \"origin-top-right\": \"origin-top-right\";\n\n return (\n <div ref={wrapperRef} className={mergeClassNames(\"relative inline-flex\", className)}>\n <div\n className=\"flex w-full\"\n onMouseDown={(event) => {\n event.preventDefault();\n setOpen((current) => !current);\n }}\n >\n {trigger}\n </div>\n\n <div\n className={mergeClassNames(\n \"absolute z-1200 min-w-max rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl\",\n \"top-full mt-1 transition-all duration-300 ease-in-out\",\n align === \"end\" ? \"end-5\" : align === \"start\" ? \"start-5\" : \"\",\n animationClassName ?? defaultAnimation,\n resolvedOpen ? \"scale-100\" : \"scale-0\",\n panelClassName,\n )}\n onClick={() => {\n if (closeOnItemClick) {\n setOpen(false);\n }\n }}\n >\n {children}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;AAKA,SAAgB,aAAa,EAC3B,SACA,UACA,MACA,cACA,WACA,gBACA,oBACA,mBAAmB,OACnB,SACoB;CACpB,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,eAAe,SAAS,KAAA;CAC9B,MAAM,eAAe,eAAe,OAAO;CAE3C,MAAM,WAAW,aAAwD;EACvE,MAAM,aACJ,OAAO,aAAa,aAChB,SAAS,aAAa,GACtB;AAEN,MAAI,CAAC,aACH,iBAAgB,WAAW;AAG7B,iBAAe,WAAW;;AAG5B,iBAAgB;EACd,SAAS,mBAAmB,OAAmB;AAC7C,OAAI,WAAW,WAAW,CAAC,WAAW,QAAQ,SAAS,MAAM,OAAe,CAC1E,SAAQ,MAAM;;EAIlB,SAAS,cAAc,OAAsB;AAC3C,OAAI,MAAM,QAAQ,SAChB,SAAQ,MAAM;;AAIlB,WAAS,iBAAiB,aAAa,mBAAmB;AAC1D,WAAS,iBAAiB,WAAW,cAAc;AAEnD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,YAAS,oBAAoB,WAAW,cAAc;;IAEvD,EAAE,CAAC;CAEN,MAAM,mBAAmB,UAAU,UAAW,qBAAoB;AAElE,QACE,qBAAC,OAAD;EAAK,KAAK;EAAY,WAAW,gBAAgB,wBAAwB,UAAU;YAAnF,CACE,oBAAC,OAAD;GACE,WAAU;GACV,cAAc,UAAU;AACtB,UAAM,gBAAgB;AACtB,aAAS,YAAY,CAAC,QAAQ;;aAG/B;GACG,CAAA,EAEN,oBAAC,OAAD;GACE,WAAW,gBACT,4GACA,yDACA,UAAU,QAAQ,UAAU,UAAU,UAAU,YAAY,IAC5D,sBAAsB,kBACtB,eAAe,cAAc,WAC7B,eACD;GACD,eAAe;AACb,QAAI,iBACF,SAAQ,MAAM;;GAIjB;GACG,CAAA,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-PJaQa8_l.cjs","names":[],"sources":["../../src/components/overlays/tooltip/Tooltip.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nexport type TooltipPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type TooltipTrigger = \"hover\" | \"click\" | \"focus\";\n\nexport interface TooltipProps {\n /** The content to display in the tooltip */\n content: React.ReactNode;\n /** The element that triggers the tooltip */\n children: React.ReactElement;\n /** Position of the tooltip relative to the trigger */\n position?: TooltipPosition;\n /** How the tooltip is triggered */\n trigger?: TooltipTrigger;\n /** Delay before showing tooltip (ms) */\n delayShow?: number;\n /** Delay before hiding tooltip (ms) */\n delayHide?: number;\n /** Whether the tooltip is disabled */\n disabled?: boolean;\n /** Custom className for the tooltip */\n className?: string;\n /** Whether to show an arrow pointing to the trigger */\n arrow?: boolean;\n /** Maximum width of the tooltip */\n maxWidth?: number;\n /** Controlled open state */\n open?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n}\n\nconst positionStyles: Record<TooltipPosition, string> = {\n top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n bottom: \"top-full left-1/2 -translate-x-1/2 mt-2\",\n left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n};\n\nconst arrowStyles: Record<TooltipPosition, string> = {\n top: \"top-full left-1/2 -translate-x-1/2 border-t-ds-surface-2 border-x-transparent border-b-transparent border-t-[6px] border-x-[6px] border-b-0\",\n bottom:\n \"bottom-full left-1/2 -translate-x-1/2 border-b-ds-surface-2 border-x-transparent border-t-transparent border-b-[6px] border-x-[6px] border-t-0\",\n left: \"left-full top-1/2 -translate-y-1/2 border-l-ds-surface-2 border-y-transparent border-r-transparent border-l-[6px] border-y-[6px] border-r-0\",\n right:\n \"right-full top-1/2 -translate-y-1/2 border-r-ds-surface-2 border-y-transparent border-l-transparent border-r-[6px] border-y-[6px] border-l-0\",\n};\n\nconst motionVariants = {\n top: {\n initial: { opacity: 0, y: 4, scale: 0.95 },\n animate: { opacity: 1, y: 0, scale: 1 },\n exit: { opacity: 0, y: 4, scale: 0.95 },\n },\n bottom: {\n initial: { opacity: 0, y: -4, scale: 0.95 },\n animate: { opacity: 1, y: 0, scale: 1 },\n exit: { opacity: 0, y: -4, scale: 0.95 },\n },\n left: {\n initial: { opacity: 0, x: 4, scale: 0.95 },\n animate: { opacity: 1, x: 0, scale: 1 },\n exit: { opacity: 0, x: 4, scale: 0.95 },\n },\n right: {\n initial: { opacity: 0, x: -4, scale: 0.95 },\n animate: { opacity: 1, x: 0, scale: 1 },\n exit: { opacity: 0, x: -4, scale: 0.95 },\n },\n} as const;\n\nexport default function Tooltip({\n content,\n children,\n position = \"top\",\n trigger = \"hover\",\n delayShow = 200,\n delayHide = 0,\n disabled = false,\n className = \"\",\n arrow = true,\n maxWidth = 250,\n open: controlledOpen,\n onOpenChange,\n}: TooltipProps) {\n const [internalOpen, setInternalOpen] = useState(false);\n const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : internalOpen;\n\n const setOpen = useCallback(\n (value: boolean) => {\n if (isControlled) {\n onOpenChange?.(value);\n } else {\n setInternalOpen(value);\n }\n },\n [isControlled, onOpenChange],\n );\n\n const clearTimeouts = useCallback(() => {\n if (showTimeoutRef.current) {\n clearTimeout(showTimeoutRef.current);\n showTimeoutRef.current = null;\n }\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n }, []);\n\n const showTooltip = useCallback(() => {\n if (disabled) return;\n clearTimeouts();\n if (delayShow > 0) {\n showTimeoutRef.current = setTimeout(() => setOpen(true), delayShow);\n } else {\n setOpen(true);\n }\n }, [disabled, delayShow, setOpen, clearTimeouts]);\n\n const hideTooltip = useCallback(() => {\n clearTimeouts();\n if (delayHide > 0) {\n hideTimeoutRef.current = setTimeout(() => setOpen(false), delayHide);\n } else {\n setOpen(false);\n }\n }, [delayHide, setOpen, clearTimeouts]);\n\n const toggleTooltip = useCallback(() => {\n if (disabled) return;\n setOpen(!isOpen);\n }, [disabled, isOpen, setOpen]);\n\n useEffect(() => {\n return () => clearTimeouts();\n }, [clearTimeouts]);\n\n // Close on click outside for click trigger\n useEffect(() => {\n if (trigger !== \"click\" || !isOpen) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n triggerRef.current &&\n !triggerRef.current.contains(event.target as Node)\n ) {\n setOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [trigger, isOpen, setOpen]);\n\n // Close on Escape\n useEffect(() => {\n if (!isOpen) return;\n\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setOpen(false);\n }\n };\n\n document.addEventListener(\"keydown\", handleEscape);\n return () => document.removeEventListener(\"keydown\", handleEscape);\n }, [isOpen, setOpen]);\n\n const triggerProps = {\n ...(trigger === \"hover\" && {\n onMouseEnter: showTooltip,\n onMouseLeave: hideTooltip,\n }),\n ...(trigger === \"click\" && {\n onClick: toggleTooltip,\n }),\n ...(trigger === \"focus\" && {\n onFocus: showTooltip,\n onBlur: hideTooltip,\n }),\n };\n\n return (\n <div ref={triggerRef} className=\"relative inline-flex\" {...triggerProps}>\n {children}\n <AnimatePresence>\n {isOpen && !disabled && (\n <motion.div\n role=\"tooltip\"\n initial={motionVariants[position].initial}\n animate={motionVariants[position].animate}\n exit={motionVariants[position].exit}\n transition={{ duration: 0.15, ease: \"easeOut\" }}\n className={`\n absolute z-50 ${positionStyles[position]}\n px-3 py-2 text-sm font-medium\n rounded-lg border border-ds-border-2 bg-ds-surface-2 text-ds-1 shadow-lg\n whitespace-normal break-words\n ${className}\n `}\n style={{ maxWidth }}\n >\n {content}\n {arrow && (\n <span\n className={`absolute w-0 h-0 ${arrowStyles[position]}`}\n aria-hidden=\"true\"\n />\n )}\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n\nexport { Tooltip };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip-DD30yj3A.cjs","names":[],"sources":["../../src/components/overlays/tooltip/Tooltip.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nexport type TooltipPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type TooltipTrigger = \"hover\" | \"click\" | \"focus\";\n\nexport interface TooltipProps {\n /** The content to display in the tooltip */\n content: React.ReactNode;\n /** The element that triggers the tooltip */\n children: React.ReactElement;\n /** Position of the tooltip relative to the trigger */\n position?: TooltipPosition;\n /** How the tooltip is triggered */\n trigger?: TooltipTrigger;\n /** Delay before showing tooltip (ms) */\n delayShow?: number;\n /** Delay before hiding tooltip (ms) */\n delayHide?: number;\n /** Whether the tooltip is disabled */\n disabled?: boolean;\n /** Custom className for the tooltip */\n className?: string;\n /** Whether to show an arrow pointing to the trigger */\n arrow?: boolean;\n /** Maximum width of the tooltip */\n maxWidth?: number;\n /** Controlled open state */\n open?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n}\n\nconst positionStyles: Record<TooltipPosition, string> = {\n top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n bottom: \"top-full left-1/2 -translate-x-1/2 mt-2\",\n left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n};\n\nconst arrowStyles: Record<TooltipPosition, string> = {\n top: \"top-full left-1/2 -translate-x-1/2 border-t-ds-surface-2 border-x-transparent border-b-transparent border-t-[6px] border-x-[6px] border-b-0\",\n bottom:\n \"bottom-full left-1/2 -translate-x-1/2 border-b-ds-surface-2 border-x-transparent border-t-transparent border-b-[6px] border-x-[6px] border-t-0\",\n left: \"left-full top-1/2 -translate-y-1/2 border-l-ds-surface-2 border-y-transparent border-r-transparent border-l-[6px] border-y-[6px] border-r-0\",\n right:\n \"right-full top-1/2 -translate-y-1/2 border-r-ds-surface-2 border-y-transparent border-l-transparent border-r-[6px] border-y-[6px] border-l-0\",\n};\n\nconst motionVariants = {\n top: {\n initial: { opacity: 0, y: 4, scale: 0.95 },\n animate: { opacity: 1, y: 0, scale: 1 },\n exit: { opacity: 0, y: 4, scale: 0.95 },\n },\n bottom: {\n initial: { opacity: 0, y: -4, scale: 0.95 },\n animate: { opacity: 1, y: 0, scale: 1 },\n exit: { opacity: 0, y: -4, scale: 0.95 },\n },\n left: {\n initial: { opacity: 0, x: 4, scale: 0.95 },\n animate: { opacity: 1, x: 0, scale: 1 },\n exit: { opacity: 0, x: 4, scale: 0.95 },\n },\n right: {\n initial: { opacity: 0, x: -4, scale: 0.95 },\n animate: { opacity: 1, x: 0, scale: 1 },\n exit: { opacity: 0, x: -4, scale: 0.95 },\n },\n} as const;\n\nexport default function Tooltip({\n content,\n children,\n position = \"top\",\n trigger = \"hover\",\n delayShow = 200,\n delayHide = 0,\n disabled = false,\n className = \"\",\n arrow = true,\n maxWidth = 250,\n open: controlledOpen,\n onOpenChange,\n}: TooltipProps) {\n const [internalOpen, setInternalOpen] = useState(false);\n const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : internalOpen;\n\n const setOpen = useCallback(\n (value: boolean) => {\n if (isControlled) {\n onOpenChange?.(value);\n } else {\n setInternalOpen(value);\n }\n },\n [isControlled, onOpenChange],\n );\n\n const clearTimeouts = useCallback(() => {\n if (showTimeoutRef.current) {\n clearTimeout(showTimeoutRef.current);\n showTimeoutRef.current = null;\n }\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n }, []);\n\n const showTooltip = useCallback(() => {\n if (disabled) return;\n clearTimeouts();\n if (delayShow > 0) {\n showTimeoutRef.current = setTimeout(() => setOpen(true), delayShow);\n } else {\n setOpen(true);\n }\n }, [disabled, delayShow, setOpen, clearTimeouts]);\n\n const hideTooltip = useCallback(() => {\n clearTimeouts();\n if (delayHide > 0) {\n hideTimeoutRef.current = setTimeout(() => setOpen(false), delayHide);\n } else {\n setOpen(false);\n }\n }, [delayHide, setOpen, clearTimeouts]);\n\n const toggleTooltip = useCallback(() => {\n if (disabled) return;\n setOpen(!isOpen);\n }, [disabled, isOpen, setOpen]);\n\n useEffect(() => {\n return () => clearTimeouts();\n }, [clearTimeouts]);\n\n // Close on click outside for click trigger\n useEffect(() => {\n if (trigger !== \"click\" || !isOpen) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n triggerRef.current &&\n !triggerRef.current.contains(event.target as Node)\n ) {\n setOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [trigger, isOpen, setOpen]);\n\n // Close on Escape\n useEffect(() => {\n if (!isOpen) return;\n\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setOpen(false);\n }\n };\n\n document.addEventListener(\"keydown\", handleEscape);\n return () => document.removeEventListener(\"keydown\", handleEscape);\n }, [isOpen, setOpen]);\n\n const triggerProps = {\n ...(trigger === \"hover\" && {\n onMouseEnter: showTooltip,\n onMouseLeave: hideTooltip,\n }),\n ...(trigger === \"click\" && {\n onClick: toggleTooltip,\n }),\n ...(trigger === \"focus\" && {\n onFocus: showTooltip,\n onBlur: hideTooltip,\n }),\n };\n\n return (\n <div ref={triggerRef} className=\"relative inline-flex\" {...triggerProps}>\n {children}\n <AnimatePresence>\n {isOpen && !disabled && (\n <motion.div\n role=\"tooltip\"\n initial={motionVariants[position].initial}\n animate={motionVariants[position].animate}\n exit={motionVariants[position].exit}\n transition={{ duration: 0.15, ease: \"easeOut\" }}\n className={`\n absolute z-50 ${positionStyles[position]}\n px-3 py-2 text-sm font-medium\n rounded-lg border border-ds-border-2 bg-ds-surface-2 text-ds-1 shadow-lg\n whitespace-normal break-words\n ${className}\n `}\n style={{ maxWidth }}\n >\n {content}\n {arrow && (\n <span\n className={`absolute w-0 h-0 ${arrowStyles[position]}`}\n aria-hidden=\"true\"\n />\n )}\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n\nexport { Tooltip };\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"Tooltip-DK3B879v.mjs","names":[],"sources":["../../src/components/overlays/tooltip/Tooltip.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nexport type TooltipPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type TooltipTrigger = \"hover\" | \"click\" | \"focus\";\n\nexport interface TooltipProps {\n /** The content to display in the tooltip */\n content: React.ReactNode;\n /** The element that triggers the tooltip */\n children: React.ReactElement;\n /** Position of the tooltip relative to the trigger */\n position?: TooltipPosition;\n /** How the tooltip is triggered */\n trigger?: TooltipTrigger;\n /** Delay before showing tooltip (ms) */\n delayShow?: number;\n /** Delay before hiding tooltip (ms) */\n delayHide?: number;\n /** Whether the tooltip is disabled */\n disabled?: boolean;\n /** Custom className for the tooltip */\n className?: string;\n /** Whether to show an arrow pointing to the trigger */\n arrow?: boolean;\n /** Maximum width of the tooltip */\n maxWidth?: number;\n /** Controlled open state */\n open?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n}\n\nconst positionStyles: Record<TooltipPosition, string> = {\n top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n bottom: \"top-full left-1/2 -translate-x-1/2 mt-2\",\n left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n};\n\nconst arrowStyles: Record<TooltipPosition, string> = {\n top: \"top-full left-1/2 -translate-x-1/2 border-t-ds-surface-2 border-x-transparent border-b-transparent border-t-[6px] border-x-[6px] border-b-0\",\n bottom:\n \"bottom-full left-1/2 -translate-x-1/2 border-b-ds-surface-2 border-x-transparent border-t-transparent border-b-[6px] border-x-[6px] border-t-0\",\n left: \"left-full top-1/2 -translate-y-1/2 border-l-ds-surface-2 border-y-transparent border-r-transparent border-l-[6px] border-y-[6px] border-r-0\",\n right:\n \"right-full top-1/2 -translate-y-1/2 border-r-ds-surface-2 border-y-transparent border-l-transparent border-r-[6px] border-y-[6px] border-l-0\",\n};\n\nconst motionVariants = {\n top: {\n initial: { opacity: 0, y: 4, scale: 0.95 },\n animate: { opacity: 1, y: 0, scale: 1 },\n exit: { opacity: 0, y: 4, scale: 0.95 },\n },\n bottom: {\n initial: { opacity: 0, y: -4, scale: 0.95 },\n animate: { opacity: 1, y: 0, scale: 1 },\n exit: { opacity: 0, y: -4, scale: 0.95 },\n },\n left: {\n initial: { opacity: 0, x: 4, scale: 0.95 },\n animate: { opacity: 1, x: 0, scale: 1 },\n exit: { opacity: 0, x: 4, scale: 0.95 },\n },\n right: {\n initial: { opacity: 0, x: -4, scale: 0.95 },\n animate: { opacity: 1, x: 0, scale: 1 },\n exit: { opacity: 0, x: -4, scale: 0.95 },\n },\n} as const;\n\nexport default function Tooltip({\n content,\n children,\n position = \"top\",\n trigger = \"hover\",\n delayShow = 200,\n delayHide = 0,\n disabled = false,\n className = \"\",\n arrow = true,\n maxWidth = 250,\n open: controlledOpen,\n onOpenChange,\n}: TooltipProps) {\n const [internalOpen, setInternalOpen] = useState(false);\n const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : internalOpen;\n\n const setOpen = useCallback(\n (value: boolean) => {\n if (isControlled) {\n onOpenChange?.(value);\n } else {\n setInternalOpen(value);\n }\n },\n [isControlled, onOpenChange],\n );\n\n const clearTimeouts = useCallback(() => {\n if (showTimeoutRef.current) {\n clearTimeout(showTimeoutRef.current);\n showTimeoutRef.current = null;\n }\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n }, []);\n\n const showTooltip = useCallback(() => {\n if (disabled) return;\n clearTimeouts();\n if (delayShow > 0) {\n showTimeoutRef.current = setTimeout(() => setOpen(true), delayShow);\n } else {\n setOpen(true);\n }\n }, [disabled, delayShow, setOpen, clearTimeouts]);\n\n const hideTooltip = useCallback(() => {\n clearTimeouts();\n if (delayHide > 0) {\n hideTimeoutRef.current = setTimeout(() => setOpen(false), delayHide);\n } else {\n setOpen(false);\n }\n }, [delayHide, setOpen, clearTimeouts]);\n\n const toggleTooltip = useCallback(() => {\n if (disabled) return;\n setOpen(!isOpen);\n }, [disabled, isOpen, setOpen]);\n\n useEffect(() => {\n return () => clearTimeouts();\n }, [clearTimeouts]);\n\n // Close on click outside for click trigger\n useEffect(() => {\n if (trigger !== \"click\" || !isOpen) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n triggerRef.current &&\n !triggerRef.current.contains(event.target as Node)\n ) {\n setOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [trigger, isOpen, setOpen]);\n\n // Close on Escape\n useEffect(() => {\n if (!isOpen) return;\n\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setOpen(false);\n }\n };\n\n document.addEventListener(\"keydown\", handleEscape);\n return () => document.removeEventListener(\"keydown\", handleEscape);\n }, [isOpen, setOpen]);\n\n const triggerProps = {\n ...(trigger === \"hover\" && {\n onMouseEnter: showTooltip,\n onMouseLeave: hideTooltip,\n }),\n ...(trigger === \"click\" && {\n onClick: toggleTooltip,\n }),\n ...(trigger === \"focus\" && {\n onFocus: showTooltip,\n onBlur: hideTooltip,\n }),\n };\n\n return (\n <div ref={triggerRef} className=\"relative inline-flex\" {...triggerProps}>\n {children}\n <AnimatePresence>\n {isOpen && !disabled && (\n <motion.div\n role=\"tooltip\"\n initial={motionVariants[position].initial}\n animate={motionVariants[position].animate}\n exit={motionVariants[position].exit}\n transition={{ duration: 0.15, ease: \"easeOut\" }}\n className={`\n absolute z-50 ${positionStyles[position]}\n px-3 py-2 text-sm font-medium\n rounded-lg border border-ds-border-2 bg-ds-surface-2 text-ds-1 shadow-lg\n whitespace-normal break-words\n ${className}\n `}\n style={{ maxWidth }}\n >\n {content}\n {arrow && (\n <span\n className={`absolute w-0 h-0 ${arrowStyles[position]}`}\n aria-hidden=\"true\"\n />\n )}\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n\nexport { Tooltip };\n"],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ var baseClasses = `
|
|
|
12
12
|
transition-all
|
|
13
13
|
duration-200
|
|
14
14
|
ease-in-out
|
|
15
|
-
active:scale-
|
|
15
|
+
active:scale-99
|
|
16
16
|
hover:opacity-90
|
|
17
17
|
disabled:opacity-50
|
|
18
18
|
disabled:cursor-not-allowed
|
|
@@ -40,4 +40,4 @@ var Button = ({ primary = false, variant, size = "medium", backgroundColor, labe
|
|
|
40
40
|
//#endregion
|
|
41
41
|
export { Button as t };
|
|
42
42
|
|
|
43
|
-
//# sourceMappingURL=button-
|
|
43
|
+
//# sourceMappingURL=button-A6UTvrOu.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-
|
|
1
|
+
{"version":3,"file":"button-A6UTvrOu.mjs","names":[],"sources":["../../src/components/forms/button/Button.tsx"],"sourcesContent":["import type { ButtonProps, ButtonVariant } from \"./types\";\n\nconst baseClasses = `\n inline-flex\n items-center\n justify-center\n gap-2\n cursor-pointer\n rounded-lg\n font-semibold\n leading-none\n transition-all\n duration-200\n ease-in-out\n active:scale-99\n hover:opacity-90\n disabled:opacity-50\n disabled:cursor-not-allowed\n`;\nconst variantClassMap = {\n primary: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent shadow-2\",\n secondary:\n \"bg-ds-surface-1 border border-ds-border-2 text-ds-1 shadow-1 hover:border-ds-border-1 hover:bg-ds-canvas\",\n tertiary:\n \"bg-transparent text-ds-1 shadow-none hover:bg-ds-canvas/70 hover:text-ds-1 border border-transparent\",\n} satisfies Record<ButtonVariant, string>;\nconst sizeClassMap = {\n small: \"py-2 px-3 text-xs\",\n medium: \"py-2.5 px-4 text-sm\",\n large: \"py-3 px-6 text-base\",\n};\n\nexport const Button = ({\n primary = false,\n variant,\n size = \"medium\",\n backgroundColor,\n label,\n children,\n type = \"button\",\n className = \"\",\n ...props\n}: ButtonProps) => {\n const resolvedVariant = variant ?? (primary ? \"primary\" : \"secondary\");\n const variantClasses = variantClassMap[resolvedVariant];\n const sizeClasses =\n sizeClassMap[size as keyof typeof sizeClassMap] || sizeClassMap.medium;\n\n return (\n <button\n type={type}\n className={`${baseClasses} ${variantClasses} ${sizeClasses} ${className}`.trim()}\n style={backgroundColor ? { backgroundColor } : undefined}\n {...props}\n >\n {children}\n {label && <span>{label}</span>}\n </button>\n );\n};\n"],"mappings":";;AAEA,IAAM,cAAc;;;;;;;;;;;;;;;;;AAiBpB,IAAM,kBAAkB;CACtB,SAAS;CACT,WACE;CACF,UACE;CACH;AACD,IAAM,eAAe;CACnB,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAa,UAAU,EACrB,UAAU,OACV,SACA,OAAO,UACP,iBACA,OACA,UACA,OAAO,UACP,YAAY,IACZ,GAAG,YACc;CAEjB,MAAM,iBAAiB,gBADC,YAAY,UAAU,YAAY;AAK1D,QACE,qBAAC,UAAD;EACQ;EACN,WAAW,GAAG,YAAY,GAAG,eAAe,GAL9C,aAAa,SAAsC,aAAa,OAKH,GAAG,YAAY,MAAM;EAChF,OAAO,kBAAkB,EAAE,iBAAiB,GAAG,KAAA;EAC/C,GAAI;YAJN,CAMG,UACA,SAAS,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,CACvB"}
|
|
@@ -13,7 +13,7 @@ var baseClasses = `
|
|
|
13
13
|
transition-all
|
|
14
14
|
duration-200
|
|
15
15
|
ease-in-out
|
|
16
|
-
active:scale-
|
|
16
|
+
active:scale-99
|
|
17
17
|
hover:opacity-90
|
|
18
18
|
disabled:opacity-50
|
|
19
19
|
disabled:cursor-not-allowed
|
|
@@ -46,4 +46,4 @@ Object.defineProperty(exports, "Button", {
|
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
48
|
|
|
49
|
-
//# sourceMappingURL=button-
|
|
49
|
+
//# sourceMappingURL=button-C4MXPxsC.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-
|
|
1
|
+
{"version":3,"file":"button-C4MXPxsC.cjs","names":[],"sources":["../../src/components/forms/button/Button.tsx"],"sourcesContent":["import type { ButtonProps, ButtonVariant } from \"./types\";\n\nconst baseClasses = `\n inline-flex\n items-center\n justify-center\n gap-2\n cursor-pointer\n rounded-lg\n font-semibold\n leading-none\n transition-all\n duration-200\n ease-in-out\n active:scale-99\n hover:opacity-90\n disabled:opacity-50\n disabled:cursor-not-allowed\n`;\nconst variantClassMap = {\n primary: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent shadow-2\",\n secondary:\n \"bg-ds-surface-1 border border-ds-border-2 text-ds-1 shadow-1 hover:border-ds-border-1 hover:bg-ds-canvas\",\n tertiary:\n \"bg-transparent text-ds-1 shadow-none hover:bg-ds-canvas/70 hover:text-ds-1 border border-transparent\",\n} satisfies Record<ButtonVariant, string>;\nconst sizeClassMap = {\n small: \"py-2 px-3 text-xs\",\n medium: \"py-2.5 px-4 text-sm\",\n large: \"py-3 px-6 text-base\",\n};\n\nexport const Button = ({\n primary = false,\n variant,\n size = \"medium\",\n backgroundColor,\n label,\n children,\n type = \"button\",\n className = \"\",\n ...props\n}: ButtonProps) => {\n const resolvedVariant = variant ?? (primary ? \"primary\" : \"secondary\");\n const variantClasses = variantClassMap[resolvedVariant];\n const sizeClasses =\n sizeClassMap[size as keyof typeof sizeClassMap] || sizeClassMap.medium;\n\n return (\n <button\n type={type}\n className={`${baseClasses} ${variantClasses} ${sizeClasses} ${className}`.trim()}\n style={backgroundColor ? { backgroundColor } : undefined}\n {...props}\n >\n {children}\n {label && <span>{label}</span>}\n </button>\n );\n};\n"],"mappings":";;;AAEA,IAAM,cAAc;;;;;;;;;;;;;;;;;AAiBpB,IAAM,kBAAkB;CACtB,SAAS;CACT,WACE;CACF,UACE;CACH;AACD,IAAM,eAAe;CACnB,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAa,UAAU,EACrB,UAAU,OACV,SACA,OAAO,UACP,iBACA,OACA,UACA,OAAO,UACP,YAAY,IACZ,GAAG,YACc;CAEjB,MAAM,iBAAiB,gBADC,YAAY,UAAU,YAAY;AAK1D,QACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;EACQ;EACN,WAAW,GAAG,YAAY,GAAG,eAAe,GAL9C,aAAa,SAAsC,aAAa,OAKH,GAAG,YAAY,MAAM;EAChF,OAAO,kBAAkB,EAAE,iBAAiB,GAAG,KAAA;EAC/C,GAAI;YAJN,CAMG,UACA,SAAS,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,OAAa,CAAA,CACvB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as Select } from "./select-
|
|
1
|
+
import { t as Select } from "./select-CUaSNR09.mjs";
|
|
2
2
|
import { useMemo, useState } from "react";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
//#region src/components/forms/calendar/Calendar.tsx
|
|
@@ -113,7 +113,7 @@ var Calendar = ({ value = null, range, selectionMode = "single", onSelect, onRan
|
|
|
113
113
|
options: monthOptions,
|
|
114
114
|
containerClassName: "min-w-0",
|
|
115
115
|
triggerClassName: "font-medium",
|
|
116
|
-
dropdownClassName: "
|
|
116
|
+
dropdownClassName: "start-0 end-auto min-w-full w-max",
|
|
117
117
|
optionClassName: "justify-start",
|
|
118
118
|
placeholder: "Month",
|
|
119
119
|
size: "compact",
|
|
@@ -128,7 +128,7 @@ var Calendar = ({ value = null, range, selectionMode = "single", onSelect, onRan
|
|
|
128
128
|
options: yearOptions,
|
|
129
129
|
containerClassName: "min-w-0",
|
|
130
130
|
triggerClassName: "font-medium",
|
|
131
|
-
dropdownClassName: "
|
|
131
|
+
dropdownClassName: "start-auto end-0 min-w-full w-max",
|
|
132
132
|
optionClassName: "justify-start",
|
|
133
133
|
placeholder: "Year",
|
|
134
134
|
size: "compact",
|
|
@@ -175,4 +175,4 @@ var Calendar = ({ value = null, range, selectionMode = "single", onSelect, onRan
|
|
|
175
175
|
//#endregion
|
|
176
176
|
export { Calendar as t };
|
|
177
177
|
|
|
178
|
-
//# sourceMappingURL=calendar-
|
|
178
|
+
//# sourceMappingURL=calendar-5XzPqKbE.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-5XzPqKbE.mjs","names":[],"sources":["../../src/components/forms/calendar/Calendar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nimport { Select } from \"../select\";\n\nimport type { CalendarProps } from \"./types\";\n\nconst dayNames = [\"SUN\", \"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\", \"SAT\"];\nconst monthNames = Array.from({ length: 12 }, (_, monthIndex) =>\n new Date(2026, monthIndex, 1).toLocaleString(undefined, {\n month: \"long\",\n }),\n);\nconst monthOptions = monthNames.map((monthName, monthIndex) => ({\n label: monthName,\n value: String(monthIndex),\n}));\n\nconst getDaysInMonth = (month: number, year: number) => {\n const firstDay = new Date(year, month, 1);\n const lastDay = new Date(year, month + 1, 0);\n const startWeekday = firstDay.getDay();\n const daysInMonth = lastDay.getDate();\n const days: Array<Date | null> = [];\n\n for (let index = 0; index < startWeekday; index += 1) {\n days.push(null);\n }\n\n for (let day = 1; day <= daysInMonth; day += 1) {\n days.push(new Date(year, month, day));\n }\n\n while (days.length % 7 !== 0) {\n days.push(null);\n }\n\n return days;\n};\n\nconst normalizeRange = (range?: { start: Date | null; end: Date | null }) => ({\n start: range?.start ?? null,\n end: range?.end ?? null,\n});\n\nconst isSameDay = (left: Date | null, right: Date | null) => {\n if (!left || !right) {\n return false;\n }\n\n return (\n left.getFullYear() === right.getFullYear() &&\n left.getMonth() === right.getMonth() &&\n left.getDate() === right.getDate()\n );\n};\n\nexport const Calendar = ({\n value = null,\n range,\n selectionMode = \"single\",\n onSelect,\n onRangeSelect,\n month,\n year,\n onMonthChange,\n footer,\n className = \"\",\n}: CalendarProps) => {\n const today = new Date();\n const [internalMonth, setInternalMonth] = useState(month ?? today.getMonth());\n const [internalYear, setInternalYear] = useState(year ?? today.getFullYear());\n const [internalRange, setInternalRange] = useState(normalizeRange(range));\n\n const currentMonth = month ?? internalMonth;\n const currentYear = year ?? internalYear;\n const currentRange = range ? normalizeRange(range) : internalRange;\n const yearOptions = useMemo(() => {\n const startYear = 1980;\n const endYear = Math.max(new Date().getFullYear() + 10, currentYear + 5);\n\n return Array.from({ length: endYear - startYear + 1 }, (_, index) => ({\n label: String(endYear - index),\n value: String(endYear - index),\n }));\n }, [currentYear]);\n\n const setDisplayedMonth = (nextMonth: number, nextYear: number) => {\n if (month === undefined) {\n setInternalMonth(nextMonth);\n }\n\n if (year === undefined) {\n setInternalYear(nextYear);\n }\n\n onMonthChange?.(nextMonth, nextYear);\n };\n\n const updateMonth = (offset: number) => {\n const nextDate = new Date(currentYear, currentMonth + offset, 1);\n\n setDisplayedMonth(nextDate.getMonth(), nextDate.getFullYear());\n };\n\n const days = useMemo(\n () => getDaysInMonth(currentMonth, currentYear),\n [currentMonth, currentYear],\n );\n\n const isInRange = (date: Date | null) => {\n if (!date || !currentRange.start || !currentRange.end) {\n return false;\n }\n\n const time = date.getTime();\n const start = currentRange.start.getTime();\n const end = currentRange.end.getTime();\n\n return time >= Math.min(start, end) && time <= Math.max(start, end);\n };\n\n const handleSelect = (date: Date) => {\n if (selectionMode === \"range\") {\n const existingRange = currentRange;\n let nextRange = existingRange;\n\n if (!existingRange.start || existingRange.end) {\n nextRange = { start: date, end: null };\n } else if (date.getTime() < existingRange.start.getTime()) {\n nextRange = { start: date, end: existingRange.start };\n } else {\n nextRange = { start: existingRange.start, end: date };\n }\n\n if (!range) {\n setInternalRange(nextRange);\n }\n\n onRangeSelect?.(nextRange);\n return;\n }\n\n onSelect?.(date);\n };\n\n return (\n <div\n className={`w-[360px] max-w-[calc(100vw-1.5rem)] rounded-lg border border-ds-border-2 bg-ds-surface-1/95 p-4 shadow-xl backdrop-blur-xl ${className}`.trim()}\n >\n <div className=\"mb-4 flex items-center gap-2\">\n <button\n type=\"button\"\n className=\"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-ds-border-field bg-ds-surface-1 text-sm text-ds-2 transition-colors hover:border-ds-border-accent hover:text-ds-1\"\n onClick={() => updateMonth(-1)}\n aria-label=\"Previous month\"\n >\n ←\n </button>\n\n <div className=\"grid flex-1 grid-cols-[minmax(0,1fr)_7rem] gap-2\">\n <Select\n name=\"calendar-month-select\"\n value={String(currentMonth)}\n onChange={(event) => {\n setDisplayedMonth(Number(event.target.value), currentYear);\n }}\n options={monthOptions}\n containerClassName=\"min-w-0\"\n triggerClassName=\"font-medium\"\n dropdownClassName=\"start-0 end-auto min-w-full w-max\"\n optionClassName=\"justify-start\"\n placeholder=\"Month\"\n size=\"compact\"\n selectionIndicator=\"none\"\n aria-label=\"Select month\"\n />\n\n <Select\n name=\"calendar-year-select\"\n value={String(currentYear)}\n onChange={(event) => {\n setDisplayedMonth(currentMonth, Number(event.target.value));\n }}\n options={yearOptions}\n containerClassName=\"min-w-0\"\n triggerClassName=\"font-medium\"\n dropdownClassName=\"start-auto end-0 min-w-full w-max\"\n optionClassName=\"justify-start\"\n placeholder=\"Year\"\n size=\"compact\"\n selectionIndicator=\"none\"\n aria-label=\"Select year\"\n />\n </div>\n\n <button\n type=\"button\"\n className=\"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-ds-border-field bg-ds-surface-1 text-sm text-ds-2 transition-colors hover:border-ds-border-accent hover:text-ds-1\"\n onClick={() => updateMonth(1)}\n aria-label=\"Next month\"\n >\n →\n </button>\n </div>\n\n <div className=\"grid grid-cols-7 gap-2 text-center\">\n {dayNames.map((dayName) => (\n <span key={dayName} className=\"text-xs font-medium text-ds-2\">\n {dayName}\n </span>\n ))}\n\n {days.map((date, index) => {\n const isSelected =\n selectionMode === \"single\" && isSameDay(date, value);\n const isToday = isSameDay(date, today);\n const inRange = selectionMode === \"range\" && isInRange(date);\n const isRangeStart =\n selectionMode === \"range\" && isSameDay(date, currentRange.start);\n const isRangeEnd =\n selectionMode === \"range\" && isSameDay(date, currentRange.end);\n\n if (!date) {\n return <span key={`empty-${index}`} />;\n }\n\n return (\n <button\n type=\"button\"\n key={date.toISOString()}\n className={`rounded-md px-0 py-2 text-sm transition-colors ${\n isSelected || isRangeStart || isRangeEnd\n ? \"bg-ds-accent text-ds-on-accent\"\n : inRange\n ? \"bg-ds-accent-subtle text-ds-1\"\n : isToday\n ? \"border border-ds-border-accent text-ds-1\"\n : \"text-ds-2\"\n }`}\n onClick={() => handleSelect(date)}\n >\n {date.getDate()}\n </button>\n );\n })}\n </div>\n\n {footer ? <div className=\"mt-4\">{footer}</div> : null}\n </div>\n );\n};\n"],"mappings":";;;;AAMA,IAAM,WAAW;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAM;AAMlE,IAAM,eALa,MAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,GAAG,eAChD,IAAI,KAAK,MAAM,YAAY,EAAE,CAAC,eAAe,KAAA,GAAW,EACtD,OAAO,QACR,CAAC,CAEiB,CAAW,KAAK,WAAW,gBAAgB;CAC9D,OAAO;CACP,OAAO,OAAO,WAAW;CAC1B,EAAE;AAEH,IAAM,kBAAkB,OAAe,SAAiB;CACtD,MAAM,WAAW,IAAI,KAAK,MAAM,OAAO,EAAE;CACzC,MAAM,UAAU,IAAI,KAAK,MAAM,QAAQ,GAAG,EAAE;CAC5C,MAAM,eAAe,SAAS,QAAQ;CACtC,MAAM,cAAc,QAAQ,SAAS;CACrC,MAAM,OAA2B,EAAE;AAEnC,MAAK,IAAI,QAAQ,GAAG,QAAQ,cAAc,SAAS,EACjD,MAAK,KAAK,KAAK;AAGjB,MAAK,IAAI,MAAM,GAAG,OAAO,aAAa,OAAO,EAC3C,MAAK,KAAK,IAAI,KAAK,MAAM,OAAO,IAAI,CAAC;AAGvC,QAAO,KAAK,SAAS,MAAM,EACzB,MAAK,KAAK,KAAK;AAGjB,QAAO;;AAGT,IAAM,kBAAkB,WAAsD;CAC5E,OAAO,OAAO,SAAS;CACvB,KAAK,OAAO,OAAO;CACpB;AAED,IAAM,aAAa,MAAmB,UAAuB;AAC3D,KAAI,CAAC,QAAQ,CAAC,MACZ,QAAO;AAGT,QACE,KAAK,aAAa,KAAK,MAAM,aAAa,IAC1C,KAAK,UAAU,KAAK,MAAM,UAAU,IACpC,KAAK,SAAS,KAAK,MAAM,SAAS;;AAItC,IAAa,YAAY,EACvB,QAAQ,MACR,OACA,gBAAgB,UAChB,UACA,eACA,OACA,MACA,eACA,QACA,YAAY,SACO;CACnB,MAAM,wBAAQ,IAAI,MAAM;CACxB,MAAM,CAAC,eAAe,oBAAoB,SAAS,SAAS,MAAM,UAAU,CAAC;CAC7E,MAAM,CAAC,cAAc,mBAAmB,SAAS,QAAQ,MAAM,aAAa,CAAC;CAC7E,MAAM,CAAC,eAAe,oBAAoB,SAAS,eAAe,MAAM,CAAC;CAEzE,MAAM,eAAe,SAAS;CAC9B,MAAM,cAAc,QAAQ;CAC5B,MAAM,eAAe,QAAQ,eAAe,MAAM,GAAG;CACrD,MAAM,cAAc,cAAc;EAChC,MAAM,YAAY;EAClB,MAAM,UAAU,KAAK,qBAAI,IAAI,MAAM,EAAC,aAAa,GAAG,IAAI,cAAc,EAAE;AAExE,SAAO,MAAM,KAAK,EAAE,QAAQ,UAAU,YAAY,GAAG,GAAG,GAAG,WAAW;GACpE,OAAO,OAAO,UAAU,MAAM;GAC9B,OAAO,OAAO,UAAU,MAAM;GAC/B,EAAE;IACF,CAAC,YAAY,CAAC;CAEjB,MAAM,qBAAqB,WAAmB,aAAqB;AACjE,MAAI,UAAU,KAAA,EACZ,kBAAiB,UAAU;AAG7B,MAAI,SAAS,KAAA,EACX,iBAAgB,SAAS;AAG3B,kBAAgB,WAAW,SAAS;;CAGtC,MAAM,eAAe,WAAmB;EACtC,MAAM,WAAW,IAAI,KAAK,aAAa,eAAe,QAAQ,EAAE;AAEhE,oBAAkB,SAAS,UAAU,EAAE,SAAS,aAAa,CAAC;;CAGhE,MAAM,OAAO,cACL,eAAe,cAAc,YAAY,EAC/C,CAAC,cAAc,YAAY,CAC5B;CAED,MAAM,aAAa,SAAsB;AACvC,MAAI,CAAC,QAAQ,CAAC,aAAa,SAAS,CAAC,aAAa,IAChD,QAAO;EAGT,MAAM,OAAO,KAAK,SAAS;EAC3B,MAAM,QAAQ,aAAa,MAAM,SAAS;EAC1C,MAAM,MAAM,aAAa,IAAI,SAAS;AAEtC,SAAO,QAAQ,KAAK,IAAI,OAAO,IAAI,IAAI,QAAQ,KAAK,IAAI,OAAO,IAAI;;CAGrE,MAAM,gBAAgB,SAAe;AACnC,MAAI,kBAAkB,SAAS;GAC7B,MAAM,gBAAgB;GACtB,IAAI,YAAY;AAEhB,OAAI,CAAC,cAAc,SAAS,cAAc,IACxC,aAAY;IAAE,OAAO;IAAM,KAAK;IAAM;YAC7B,KAAK,SAAS,GAAG,cAAc,MAAM,SAAS,CACvD,aAAY;IAAE,OAAO;IAAM,KAAK,cAAc;IAAO;OAErD,aAAY;IAAE,OAAO,cAAc;IAAO,KAAK;IAAM;AAGvD,OAAI,CAAC,MACH,kBAAiB,UAAU;AAG7B,mBAAgB,UAAU;AAC1B;;AAGF,aAAW,KAAK;;AAGlB,QACE,qBAAC,OAAD;EACE,WAAW,+HAA+H,YAAY,MAAM;YAD9J;GAGE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,eAAe,YAAY,GAAG;MAC9B,cAAW;gBACZ;MAEQ,CAAA;KAET,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OACE,MAAK;OACL,OAAO,OAAO,aAAa;OAC3B,WAAW,UAAU;AACnB,0BAAkB,OAAO,MAAM,OAAO,MAAM,EAAE,YAAY;;OAE5D,SAAS;OACT,oBAAmB;OACnB,kBAAiB;OACjB,mBAAkB;OAClB,iBAAgB;OAChB,aAAY;OACZ,MAAK;OACL,oBAAmB;OACnB,cAAW;OACX,CAAA,EAEF,oBAAC,QAAD;OACE,MAAK;OACL,OAAO,OAAO,YAAY;OAC1B,WAAW,UAAU;AACnB,0BAAkB,cAAc,OAAO,MAAM,OAAO,MAAM,CAAC;;OAE7D,SAAS;OACT,oBAAmB;OACnB,kBAAiB;OACjB,mBAAkB;OAClB,iBAAgB;OAChB,aAAY;OACZ,MAAK;OACL,oBAAmB;OACnB,cAAW;OACX,CAAA,CACE;;KAEN,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,eAAe,YAAY,EAAE;MAC7B,cAAW;gBACZ;MAEQ,CAAA;KACL;;GAEN,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,SAAS,KAAK,YACb,oBAAC,QAAD;KAAoB,WAAU;eAC3B;KACI,EAFI,QAEJ,CACP,EAED,KAAK,KAAK,MAAM,UAAU;KACzB,MAAM,aACJ,kBAAkB,YAAY,UAAU,MAAM,MAAM;KACtD,MAAM,UAAU,UAAU,MAAM,MAAM;KACtC,MAAM,UAAU,kBAAkB,WAAW,UAAU,KAAK;KAC5D,MAAM,eACJ,kBAAkB,WAAW,UAAU,MAAM,aAAa,MAAM;KAClE,MAAM,aACJ,kBAAkB,WAAW,UAAU,MAAM,aAAa,IAAI;AAEhE,SAAI,CAAC,KACH,QAAO,oBAAC,QAAD,EAA+B,EAApB,SAAS,QAAW;AAGxC,YACE,oBAAC,UAAD;MACE,MAAK;MAEL,WAAW,kDACT,cAAc,gBAAgB,aAC1B,mCACA,UACE,kCACA,UACE,6CACA;MAEV,eAAe,aAAa,KAAK;gBAEhC,KAAK,SAAS;MACR,EAbF,KAAK,aAAa,CAahB;MAEX,CACE;;GAEL,SAAS,oBAAC,OAAD;IAAK,WAAU;cAAQ;IAAa,CAAA,GAAG;GAC7C"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
require("./chunk-B_GkZjkl.cjs");
|
|
2
|
-
const require_select = require("./select-
|
|
2
|
+
const require_select = require("./select-bZ9WqLOc.cjs");
|
|
3
3
|
let react = require("react");
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
5
|
//#region src/components/forms/calendar/Calendar.tsx
|
|
@@ -114,7 +114,7 @@ var Calendar = ({ value = null, range, selectionMode = "single", onSelect, onRan
|
|
|
114
114
|
options: monthOptions,
|
|
115
115
|
containerClassName: "min-w-0",
|
|
116
116
|
triggerClassName: "font-medium",
|
|
117
|
-
dropdownClassName: "
|
|
117
|
+
dropdownClassName: "start-0 end-auto min-w-full w-max",
|
|
118
118
|
optionClassName: "justify-start",
|
|
119
119
|
placeholder: "Month",
|
|
120
120
|
size: "compact",
|
|
@@ -129,7 +129,7 @@ var Calendar = ({ value = null, range, selectionMode = "single", onSelect, onRan
|
|
|
129
129
|
options: yearOptions,
|
|
130
130
|
containerClassName: "min-w-0",
|
|
131
131
|
triggerClassName: "font-medium",
|
|
132
|
-
dropdownClassName: "
|
|
132
|
+
dropdownClassName: "start-auto end-0 min-w-full w-max",
|
|
133
133
|
optionClassName: "justify-start",
|
|
134
134
|
placeholder: "Year",
|
|
135
135
|
size: "compact",
|
|
@@ -181,4 +181,4 @@ Object.defineProperty(exports, "Calendar", {
|
|
|
181
181
|
}
|
|
182
182
|
});
|
|
183
183
|
|
|
184
|
-
//# sourceMappingURL=calendar-
|
|
184
|
+
//# sourceMappingURL=calendar-CQJgQ5H_.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar-CQJgQ5H_.cjs","names":[],"sources":["../../src/components/forms/calendar/Calendar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nimport { Select } from \"../select\";\n\nimport type { CalendarProps } from \"./types\";\n\nconst dayNames = [\"SUN\", \"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\", \"SAT\"];\nconst monthNames = Array.from({ length: 12 }, (_, monthIndex) =>\n new Date(2026, monthIndex, 1).toLocaleString(undefined, {\n month: \"long\",\n }),\n);\nconst monthOptions = monthNames.map((monthName, monthIndex) => ({\n label: monthName,\n value: String(monthIndex),\n}));\n\nconst getDaysInMonth = (month: number, year: number) => {\n const firstDay = new Date(year, month, 1);\n const lastDay = new Date(year, month + 1, 0);\n const startWeekday = firstDay.getDay();\n const daysInMonth = lastDay.getDate();\n const days: Array<Date | null> = [];\n\n for (let index = 0; index < startWeekday; index += 1) {\n days.push(null);\n }\n\n for (let day = 1; day <= daysInMonth; day += 1) {\n days.push(new Date(year, month, day));\n }\n\n while (days.length % 7 !== 0) {\n days.push(null);\n }\n\n return days;\n};\n\nconst normalizeRange = (range?: { start: Date | null; end: Date | null }) => ({\n start: range?.start ?? null,\n end: range?.end ?? null,\n});\n\nconst isSameDay = (left: Date | null, right: Date | null) => {\n if (!left || !right) {\n return false;\n }\n\n return (\n left.getFullYear() === right.getFullYear() &&\n left.getMonth() === right.getMonth() &&\n left.getDate() === right.getDate()\n );\n};\n\nexport const Calendar = ({\n value = null,\n range,\n selectionMode = \"single\",\n onSelect,\n onRangeSelect,\n month,\n year,\n onMonthChange,\n footer,\n className = \"\",\n}: CalendarProps) => {\n const today = new Date();\n const [internalMonth, setInternalMonth] = useState(month ?? today.getMonth());\n const [internalYear, setInternalYear] = useState(year ?? today.getFullYear());\n const [internalRange, setInternalRange] = useState(normalizeRange(range));\n\n const currentMonth = month ?? internalMonth;\n const currentYear = year ?? internalYear;\n const currentRange = range ? normalizeRange(range) : internalRange;\n const yearOptions = useMemo(() => {\n const startYear = 1980;\n const endYear = Math.max(new Date().getFullYear() + 10, currentYear + 5);\n\n return Array.from({ length: endYear - startYear + 1 }, (_, index) => ({\n label: String(endYear - index),\n value: String(endYear - index),\n }));\n }, [currentYear]);\n\n const setDisplayedMonth = (nextMonth: number, nextYear: number) => {\n if (month === undefined) {\n setInternalMonth(nextMonth);\n }\n\n if (year === undefined) {\n setInternalYear(nextYear);\n }\n\n onMonthChange?.(nextMonth, nextYear);\n };\n\n const updateMonth = (offset: number) => {\n const nextDate = new Date(currentYear, currentMonth + offset, 1);\n\n setDisplayedMonth(nextDate.getMonth(), nextDate.getFullYear());\n };\n\n const days = useMemo(\n () => getDaysInMonth(currentMonth, currentYear),\n [currentMonth, currentYear],\n );\n\n const isInRange = (date: Date | null) => {\n if (!date || !currentRange.start || !currentRange.end) {\n return false;\n }\n\n const time = date.getTime();\n const start = currentRange.start.getTime();\n const end = currentRange.end.getTime();\n\n return time >= Math.min(start, end) && time <= Math.max(start, end);\n };\n\n const handleSelect = (date: Date) => {\n if (selectionMode === \"range\") {\n const existingRange = currentRange;\n let nextRange = existingRange;\n\n if (!existingRange.start || existingRange.end) {\n nextRange = { start: date, end: null };\n } else if (date.getTime() < existingRange.start.getTime()) {\n nextRange = { start: date, end: existingRange.start };\n } else {\n nextRange = { start: existingRange.start, end: date };\n }\n\n if (!range) {\n setInternalRange(nextRange);\n }\n\n onRangeSelect?.(nextRange);\n return;\n }\n\n onSelect?.(date);\n };\n\n return (\n <div\n className={`w-[360px] max-w-[calc(100vw-1.5rem)] rounded-lg border border-ds-border-2 bg-ds-surface-1/95 p-4 shadow-xl backdrop-blur-xl ${className}`.trim()}\n >\n <div className=\"mb-4 flex items-center gap-2\">\n <button\n type=\"button\"\n className=\"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-ds-border-field bg-ds-surface-1 text-sm text-ds-2 transition-colors hover:border-ds-border-accent hover:text-ds-1\"\n onClick={() => updateMonth(-1)}\n aria-label=\"Previous month\"\n >\n ←\n </button>\n\n <div className=\"grid flex-1 grid-cols-[minmax(0,1fr)_7rem] gap-2\">\n <Select\n name=\"calendar-month-select\"\n value={String(currentMonth)}\n onChange={(event) => {\n setDisplayedMonth(Number(event.target.value), currentYear);\n }}\n options={monthOptions}\n containerClassName=\"min-w-0\"\n triggerClassName=\"font-medium\"\n dropdownClassName=\"start-0 end-auto min-w-full w-max\"\n optionClassName=\"justify-start\"\n placeholder=\"Month\"\n size=\"compact\"\n selectionIndicator=\"none\"\n aria-label=\"Select month\"\n />\n\n <Select\n name=\"calendar-year-select\"\n value={String(currentYear)}\n onChange={(event) => {\n setDisplayedMonth(currentMonth, Number(event.target.value));\n }}\n options={yearOptions}\n containerClassName=\"min-w-0\"\n triggerClassName=\"font-medium\"\n dropdownClassName=\"start-auto end-0 min-w-full w-max\"\n optionClassName=\"justify-start\"\n placeholder=\"Year\"\n size=\"compact\"\n selectionIndicator=\"none\"\n aria-label=\"Select year\"\n />\n </div>\n\n <button\n type=\"button\"\n className=\"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-ds-border-field bg-ds-surface-1 text-sm text-ds-2 transition-colors hover:border-ds-border-accent hover:text-ds-1\"\n onClick={() => updateMonth(1)}\n aria-label=\"Next month\"\n >\n →\n </button>\n </div>\n\n <div className=\"grid grid-cols-7 gap-2 text-center\">\n {dayNames.map((dayName) => (\n <span key={dayName} className=\"text-xs font-medium text-ds-2\">\n {dayName}\n </span>\n ))}\n\n {days.map((date, index) => {\n const isSelected =\n selectionMode === \"single\" && isSameDay(date, value);\n const isToday = isSameDay(date, today);\n const inRange = selectionMode === \"range\" && isInRange(date);\n const isRangeStart =\n selectionMode === \"range\" && isSameDay(date, currentRange.start);\n const isRangeEnd =\n selectionMode === \"range\" && isSameDay(date, currentRange.end);\n\n if (!date) {\n return <span key={`empty-${index}`} />;\n }\n\n return (\n <button\n type=\"button\"\n key={date.toISOString()}\n className={`rounded-md px-0 py-2 text-sm transition-colors ${\n isSelected || isRangeStart || isRangeEnd\n ? \"bg-ds-accent text-ds-on-accent\"\n : inRange\n ? \"bg-ds-accent-subtle text-ds-1\"\n : isToday\n ? \"border border-ds-border-accent text-ds-1\"\n : \"text-ds-2\"\n }`}\n onClick={() => handleSelect(date)}\n >\n {date.getDate()}\n </button>\n );\n })}\n </div>\n\n {footer ? <div className=\"mt-4\">{footer}</div> : null}\n </div>\n );\n};\n"],"mappings":"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"}
|
|
@@ -652,8 +652,8 @@ var AreaChart = ({ data, categories, height = 300, className = "", showGrid = tr
|
|
|
652
652
|
};
|
|
653
653
|
//#endregion
|
|
654
654
|
//#region src/components/data-display/charts/BarChart.tsx
|
|
655
|
-
var BarChart = ({ data, categories, height = 300, className = "", layout = "horizontal", maxBarSize }) => {
|
|
656
|
-
const resolvedMaxBarSize = maxBarSize ?? (layout === "horizontal" ? 40 : 22);
|
|
655
|
+
var BarChart = ({ data, categories, height = 300, className = "", layout = "horizontal", maxBarSize, compact = false }) => {
|
|
656
|
+
const resolvedMaxBarSize = maxBarSize ?? (compact ? 8 : layout === "horizontal" ? 40 : 22);
|
|
657
657
|
const normalizedCategories = react.default.useMemo(() => {
|
|
658
658
|
const normalizedColors = normalizeChartColors(categories.map((category) => category.color));
|
|
659
659
|
return categories.map((category, index) => ({
|
|
@@ -661,6 +661,42 @@ var BarChart = ({ data, categories, height = 300, className = "", layout = "hori
|
|
|
661
661
|
color: normalizedColors[index] ?? category.color
|
|
662
662
|
}));
|
|
663
663
|
}, [categories]);
|
|
664
|
+
if (compact) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
665
|
+
className: `w-full h-full ${className}`,
|
|
666
|
+
style: { height },
|
|
667
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
|
|
668
|
+
width: "100%",
|
|
669
|
+
height: "100%",
|
|
670
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.BarChart, {
|
|
671
|
+
data,
|
|
672
|
+
layout,
|
|
673
|
+
barCategoryGap: "20%",
|
|
674
|
+
margin: {
|
|
675
|
+
top: 2,
|
|
676
|
+
right: 2,
|
|
677
|
+
left: 2,
|
|
678
|
+
bottom: 2
|
|
679
|
+
},
|
|
680
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
|
|
681
|
+
contentStyle: chartTooltipContentStyle,
|
|
682
|
+
cursor: chartBandHoverCursorStyle,
|
|
683
|
+
itemStyle: chartTooltipItemStyle,
|
|
684
|
+
labelStyle: chartTooltipLabelStyle,
|
|
685
|
+
wrapperStyle: chartTooltipWrapperStyle
|
|
686
|
+
}), normalizedCategories.map((cat) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
|
|
687
|
+
dataKey: cat.key,
|
|
688
|
+
fill: cat.color,
|
|
689
|
+
maxBarSize: resolvedMaxBarSize,
|
|
690
|
+
radius: [
|
|
691
|
+
3,
|
|
692
|
+
3,
|
|
693
|
+
0,
|
|
694
|
+
0
|
|
695
|
+
]
|
|
696
|
+
}, cat.key))]
|
|
697
|
+
})
|
|
698
|
+
})
|
|
699
|
+
});
|
|
664
700
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
665
701
|
className: `w-full ${className}`,
|
|
666
702
|
style: { height },
|
|
@@ -760,16 +796,11 @@ var getBarRadius = (value, layout) => {
|
|
|
760
796
|
6,
|
|
761
797
|
6
|
|
762
798
|
];
|
|
763
|
-
if (layout === "horizontal") return
|
|
799
|
+
if (layout === "horizontal") return [
|
|
764
800
|
6,
|
|
765
801
|
6,
|
|
766
802
|
0,
|
|
767
803
|
0
|
|
768
|
-
] : [
|
|
769
|
-
0,
|
|
770
|
-
0,
|
|
771
|
-
6,
|
|
772
|
-
6
|
|
773
804
|
];
|
|
774
805
|
return value > 0 ? [
|
|
775
806
|
0,
|
|
@@ -1049,4 +1080,4 @@ Object.defineProperty(exports, "getChartPalette", {
|
|
|
1049
1080
|
}
|
|
1050
1081
|
});
|
|
1051
1082
|
|
|
1052
|
-
//# sourceMappingURL=charts-
|
|
1083
|
+
//# sourceMappingURL=charts-BmIV-mJy.cjs.map
|