@cloudflare/kumo 1.6.0 → 1.8.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/CHANGELOG.md +47 -0
- package/ai/component-registry.json +30 -35
- package/ai/component-registry.md +54 -117
- package/ai/schemas.ts +4 -2
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +11 -3
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/banner-BKDBfLHA.js +75 -0
- package/dist/banner-BKDBfLHA.js.map +1 -0
- package/dist/catalog.js +1 -1
- package/dist/{checkbox-Dt8iSNOg.js → checkbox-BUV90tNU.js} +56 -56
- package/dist/checkbox-BUV90tNU.js.map +1 -0
- package/dist/{clipboard-text-Bw5rKPXz.js → clipboard-text-BVKGunue.js} +4 -4
- package/dist/{clipboard-text-Bw5rKPXz.js.map → clipboard-text-BVKGunue.js.map} +1 -1
- package/dist/{combobox-BIC-YZ2L.js → combobox-DyTgHki4.js} +83 -61
- package/dist/combobox-DyTgHki4.js.map +1 -0
- package/dist/{command-palette-D3MNR7w9.js → command-palette-B2hkPSQm.js} +2 -2
- package/dist/{command-palette-D3MNR7w9.js.map → command-palette-B2hkPSQm.js.map} +1 -1
- package/dist/components/banner.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/command-palette.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/flow.js +5640 -0
- package/dist/components/flow.js.map +1 -0
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/meter.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/components/tooltip.js +1 -1
- package/dist/date-range-picker-CbKEQ9pi.js.map +1 -1
- package/dist/{dialog-toS9krNF.js → dialog-B2EHaSoL.js} +2 -2
- package/dist/{dialog-toS9krNF.js.map → dialog-B2EHaSoL.js.map} +1 -1
- package/dist/{dropdown-BquiYKKC.js → dropdown-mGDt95gv.js} +3 -3
- package/dist/{dropdown-BquiYKKC.js.map → dropdown-mGDt95gv.js.map} +1 -1
- package/dist/{field-DCq04TgZ.js → field-Bkh5pJay.js} +3 -3
- package/dist/{field-DCq04TgZ.js.map → field-Bkh5pJay.js.map} +1 -1
- package/dist/index.js +37 -35
- package/dist/index.js.map +1 -1
- package/dist/{input-CCR8NGG7.js → input-DjItb3_k.js} +3 -3
- package/dist/{input-CCR8NGG7.js.map → input-DjItb3_k.js.map} +1 -1
- package/dist/{input-area-DU2Yvp_t.js → input-area-BcidmGaO.js} +3 -3
- package/dist/{input-area-DU2Yvp_t.js.map → input-area-BcidmGaO.js.map} +1 -1
- package/dist/{input-group-C365-qBq.js → input-group-CMAvOKIV.js} +2 -2
- package/dist/{input-group-C365-qBq.js.map → input-group-CMAvOKIV.js.map} +1 -1
- package/dist/{label-zjtV7oXa.js → label-Cjpb7l1F.js} +2 -2
- package/dist/{label-zjtV7oXa.js.map → label-Cjpb7l1F.js.map} +1 -1
- package/dist/{link-C8pUZ4Q-.js → link-DUqZGMVk.js} +2 -2
- package/dist/{link-C8pUZ4Q-.js.map → link-DUqZGMVk.js.map} +1 -1
- package/dist/{menubar-D7WvAf6x.js → menubar-bgBP3EJi.js} +2 -2
- package/dist/{menubar-D7WvAf6x.js.map → menubar-bgBP3EJi.js.map} +1 -1
- package/dist/{meter-jQGKS1z4.js → meter-BziPAH9D.js} +2 -2
- package/dist/{meter-jQGKS1z4.js.map → meter-BziPAH9D.js.map} +1 -1
- package/dist/{pagination-BN80iKY6.js → pagination-dNzgZRjV.js} +2 -2
- package/dist/{pagination-BN80iKY6.js.map → pagination-dNzgZRjV.js.map} +1 -1
- package/dist/{popover-syU1104E.js → popover-C2w2uRlu.js} +2 -2
- package/dist/{popover-syU1104E.js.map → popover-C2w2uRlu.js.map} +1 -1
- package/dist/primitives/accordion.js +1 -1
- package/dist/primitives/alert-dialog.js +1 -1
- package/dist/primitives/autocomplete.js +1 -1
- package/dist/primitives/avatar.js +1 -1
- package/dist/primitives/button.js +1 -1
- package/dist/primitives/checkbox-group.js +1 -1
- package/dist/primitives/checkbox.js +1 -1
- package/dist/primitives/collapsible.js +1 -1
- package/dist/primitives/combobox.js +1 -1
- package/dist/primitives/context-menu.js +1 -1
- package/dist/primitives/dialog.js +1 -1
- package/dist/primitives/direction-provider.js +1 -1
- package/dist/primitives/field.js +1 -1
- package/dist/primitives/fieldset.js +1 -1
- package/dist/primitives/form.js +1 -1
- package/dist/primitives/input.js +1 -1
- package/dist/primitives/menu.js +1 -1
- package/dist/primitives/menubar.js +1 -1
- package/dist/primitives/meter.js +1 -1
- package/dist/primitives/navigation-menu.js +1 -1
- package/dist/primitives/number-field.js +1 -1
- package/dist/primitives/popover.js +1 -1
- package/dist/primitives/preview-card.js +1 -1
- package/dist/primitives/progress.js +1 -1
- package/dist/primitives/radio-group.js +1 -1
- package/dist/primitives/radio.js +1 -1
- package/dist/primitives/scroll-area.js +1 -1
- package/dist/primitives/select.js +1 -1
- package/dist/primitives/separator.js +1 -1
- package/dist/primitives/slider.js +1 -1
- package/dist/primitives/switch.js +1 -1
- package/dist/primitives/tabs.js +1 -1
- package/dist/primitives/toast.js +1 -1
- package/dist/primitives/toggle-group.js +1 -1
- package/dist/primitives/toggle.js +1 -1
- package/dist/primitives/toolbar.js +1 -1
- package/dist/primitives/tooltip.js +1 -1
- package/dist/primitives.js +1 -1
- package/dist/{radio-CWMtSx65.js → radio-B8Jk1PFe.js} +2 -2
- package/dist/{radio-CWMtSx65.js.map → radio-B8Jk1PFe.js.map} +1 -1
- package/dist/{schemas-DbIwo0ET.js → schemas-DKFFjjzb.js} +216 -213
- package/dist/{schemas-DbIwo0ET.js.map → schemas-DKFFjjzb.js.map} +1 -1
- package/dist/{select-G6JqBVkg.js → select-BWTULnCR.js} +3 -3
- package/dist/{select-G6JqBVkg.js.map → select-BWTULnCR.js.map} +1 -1
- package/dist/{sensitive-input-DNFpycoy.js → sensitive-input-CgjTfZLO.js} +4 -4
- package/dist/{sensitive-input-DNFpycoy.js.map → sensitive-input-CgjTfZLO.js.map} +1 -1
- package/dist/src/components/banner/banner.d.ts +28 -11
- package/dist/src/components/banner/banner.d.ts.map +1 -1
- package/dist/src/components/checkbox/checkbox.d.ts.map +1 -1
- package/dist/src/components/combobox/combobox.d.ts +4 -1
- package/dist/src/components/combobox/combobox.d.ts.map +1 -1
- package/dist/src/components/date-range-picker/date-range-picker.d.ts +7 -0
- package/dist/src/components/date-range-picker/date-range-picker.d.ts.map +1 -1
- package/dist/src/components/date-range-picker/index.d.ts +3 -0
- package/dist/src/components/date-range-picker/index.d.ts.map +1 -1
- package/dist/src/components/flow/connectors.d.ts +35 -0
- package/dist/src/components/flow/connectors.d.ts.map +1 -0
- package/dist/src/components/flow/diagram.d.ts +62 -0
- package/dist/src/components/flow/diagram.d.ts.map +1 -0
- package/dist/src/components/flow/index.d.ts +26 -0
- package/dist/src/components/flow/index.d.ts.map +1 -0
- package/dist/src/components/flow/node.d.ts +52 -0
- package/dist/src/components/flow/node.d.ts.map +1 -0
- package/dist/src/components/flow/parallel.d.ts +5 -0
- package/dist/src/components/flow/parallel.d.ts.map +1 -0
- package/dist/src/components/flow/use-children.d.ts +69 -0
- package/dist/src/components/flow/use-children.d.ts.map +1 -0
- package/dist/src/index.d.ts +4 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/styles/kumo-standalone.css +1 -1
- package/dist/styles/theme-kumo.css +1 -1
- package/dist/{switch-CmsZ4z-g.js → switch-DdjM7eh6.js} +3 -3
- package/dist/{switch-CmsZ4z-g.js.map → switch-DdjM7eh6.js.map} +1 -1
- package/dist/{table-Dc0AGcLV.js → table-D1EXUDHL.js} +2 -2
- package/dist/{table-Dc0AGcLV.js.map → table-D1EXUDHL.js.map} +1 -1
- package/dist/{tabs-BpD1iUiz.js → tabs-Bs43O3E4.js} +2 -2
- package/dist/{tabs-BpD1iUiz.js.map → tabs-Bs43O3E4.js.map} +1 -1
- package/dist/{toast-BrR0pjLE.js → toast-BqZw7a2p.js} +2 -2
- package/dist/{toast-BrR0pjLE.js.map → toast-BqZw7a2p.js.map} +1 -1
- package/dist/{tooltip-daVJYtXY.js → tooltip-BwOFPK5h.js} +2 -2
- package/dist/{tooltip-daVJYtXY.js.map → tooltip-BwOFPK5h.js.map} +1 -1
- package/dist/{vendor-base-ui-9w7J6BvW.js → vendor-base-ui-B61LL9jT.js} +3 -3
- package/dist/{vendor-base-ui-9w7J6BvW.js.map → vendor-base-ui-B61LL9jT.js.map} +1 -1
- package/package.json +7 -1
- package/scripts/theme-generator/config.ts +1 -1
- package/dist/banner-4fkH6Sbt.js +0 -51
- package/dist/banner-4fkH6Sbt.js.map +0 -1
- package/dist/checkbox-Dt8iSNOg.js.map +0 -1
- package/dist/combobox-BIC-YZ2L.js.map +0 -1
package/dist/components/input.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { I as t, i as e } from "../input-
|
|
3
|
-
import { I as o, T as s } from "../input-area-
|
|
4
|
-
import { I as u } from "../input-group-
|
|
2
|
+
import { I as t, i as e } from "../input-DjItb3_k.js";
|
|
3
|
+
import { I as o, T as s } from "../input-area-BcidmGaO.js";
|
|
4
|
+
import { I as u } from "../input-group-CMAvOKIV.js";
|
|
5
5
|
export {
|
|
6
6
|
t as Input,
|
|
7
7
|
o as InputArea,
|
package/dist/components/label.js
CHANGED
package/dist/components/link.js
CHANGED
package/dist/components/meter.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { g as r, K as s, P, f as a, c as p, e as t, a as v, d as O, b as i } from "../popover-
|
|
2
|
+
import { g as r, K as s, P, f as a, c as p, e as t, a as v, d as O, b as i } from "../popover-C2w2uRlu.js";
|
|
3
3
|
export {
|
|
4
4
|
r as KUMO_POPOVER_DEFAULT_VARIANTS,
|
|
5
5
|
s as KUMO_POPOVER_VARIANTS,
|
package/dist/components/radio.js
CHANGED
package/dist/components/table.js
CHANGED
package/dist/components/tabs.js
CHANGED
package/dist/components/toast.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { a as s, T as e, c as r, u as t } from "../toast-
|
|
3
|
-
import { i as u } from "../vendor-base-ui-
|
|
2
|
+
import { a as s, T as e, c as r, u as t } from "../toast-BqZw7a2p.js";
|
|
3
|
+
import { i as u } from "../vendor-base-ui-B61LL9jT.js";
|
|
4
4
|
export {
|
|
5
5
|
u as Toast,
|
|
6
6
|
s as ToastProvider,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-range-picker-CbKEQ9pi.js","sources":["../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n CaretLeftIcon,\n CaretRightIcon,\n GlobeHemisphereWestIcon,\n} from \"@phosphor-icons/react\";\nimport { useCallback, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** DateRangePicker size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_DATE_RANGE_PICKER_VARIANTS = {\n size: {\n sm: {\n classes: \"p-3 gap-2\",\n cellHeight: \"h-[22px]\",\n cellWidth: \"w-6\",\n calendarWidth: \"w-[168px]\",\n textSize: \"text-xs\",\n iconSize: 14,\n description: \"Compact calendar for tight spaces\",\n },\n base: {\n classes: \"p-4 gap-2.5\",\n cellHeight: \"h-[26px]\",\n cellWidth: \"w-7\",\n calendarWidth: \"w-[196px]\",\n textSize: \"text-sm\",\n iconSize: 16,\n description: \"Default calendar size\",\n },\n lg: {\n classes: \"p-5 gap-3\",\n cellHeight: \"h-[32px]\",\n cellWidth: \"w-9\",\n calendarWidth: \"w-[252px]\",\n textSize: \"text-base\",\n iconSize: 18,\n description: \"Large calendar for prominent date selection\",\n },\n },\n variant: {\n default: {\n classes: \"bg-kumo-overlay\",\n description: \"Default calendar appearance\",\n },\n subtle: {\n classes: \"bg-kumo-base\",\n description: \"Subtle calendar with minimal background\",\n },\n },\n} as const;\n\nexport const KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_DATE_RANGE_PICKER_VARIANTS\nexport type KumoDateRangePickerSize =\n keyof typeof KUMO_DATE_RANGE_PICKER_VARIANTS.size;\nexport type KumoDateRangePickerVariant =\n keyof typeof KUMO_DATE_RANGE_PICKER_VARIANTS.variant;\n\nexport interface KumoDateRangePickerVariantsProps {\n /**\n * Calendar size.\n * - `\"sm\"` — Compact calendar for tight spaces\n * - `\"base\"` — Default calendar size\n * - `\"lg\"` — Large calendar for prominent date selection\n * @default \"base\"\n */\n size?: KumoDateRangePickerSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard appearance with overlay background\n * - `\"subtle\"` — Minimal background\n * @default \"default\"\n */\n variant?: KumoDateRangePickerVariant;\n}\n\nexport function dateRangePickerVariants({\n size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n variant = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n}: KumoDateRangePickerVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex w-fit flex-col rounded-xl select-none\",\n // Apply variant and size styles\n KUMO_DATE_RANGE_PICKER_VARIANTS.variant[variant].classes,\n KUMO_DATE_RANGE_PICKER_VARIANTS.size[size].classes,\n );\n}\n\n// Helper to get size config\nfunction getSizeConfig(size: KumoDateRangePickerSize) {\n return KUMO_DATE_RANGE_PICKER_VARIANTS.size[size];\n}\n\nenum DateRangeCellMode {\n OUT_OF_RANGE,\n ENABLED,\n SELECTED_START_NODE,\n SELECTED_END_NODE,\n SELECTED,\n SELECTED_OUT_OF_RANGE,\n}\n\nconst DAYS_OF_WEEK = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"] as const;\n\n/**\n * DateRangePicker component props.\n *\n * Dual-calendar date range selector with hover preview, timezone display, and reset support.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n * onStartDateChange={(d) => setStart(d)}\n * onEndDateChange={(d) => setEnd(d)}\n * timezone=\"New York, NY, USA (GMT-4)\"\n * />\n *\n * // Compact variant\n * <DateRangePicker\n * size=\"sm\"\n * variant=\"subtle\"\n * onStartDateChange={setStart}\n * onEndDateChange={setEnd}\n * />\n * ```\n */\nexport interface DateRangePickerProps extends KumoDateRangePickerVariantsProps {\n /** Callback fired when start date changes. Receives `null` on reset. */\n onStartDateChange: (date: Date | null) => void;\n /** Callback fired when end date changes. Receives `null` on reset. */\n onEndDateChange: (date: Date | null) => void;\n /**\n * Display timezone string shown in the footer.\n * @default \"New York, NY, USA (GMT-4)\"\n */\n timezone?: string;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n}\n\n/**\n * DateRangePicker — dual-calendar date range selector.\n *\n * Renders two side-by-side month calendars with click-to-select start/end dates,\n * hover preview of the range, a timezone footer, and a reset button.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n * onStartDateChange={setStart}\n * onEndDateChange={setEnd}\n * />\n * ```\n */\nexport function DateRangePicker({\n onStartDateChange,\n onEndDateChange,\n size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n variant = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n timezone = \"New York, NY, USA (GMT-4)\",\n className,\n}: DateRangePickerProps) {\n const [startDate, setStartDate] = useState<Date | null>(null);\n const [endDate, setEndDate] = useState<Date | null>(null);\n const [viewingMonth, setViewingMonth] = useState<Date>(new Date());\n const [hoveringDate, setHoveringDate] = useState<Date | null>(null);\n\n const sizeConfig = getSizeConfig(size);\n\n const handleStartDateChange = (date: Date | null) => {\n setStartDate(date);\n onStartDateChange(date); // Pass the updated startDate to the parent component\n };\n\n const handleEndDateChange = (date: Date | null) => {\n setEndDate(date);\n onEndDateChange(date); // Pass the updated endDate to the parent component\n };\n\n const getMonthName = useCallback((date: Date, monthOffset?: number) => {\n const copyDate = new Date(date);\n copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n return copyDate.toLocaleString(\"default\", { month: \"long\" });\n }, []);\n\n const getDateYear = useCallback((date: Date, monthOffset?: number) => {\n const copyDate = new Date(date);\n copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n return copyDate.getFullYear();\n }, []);\n\n const getMonthsStartingDay = useCallback(\n (date: Date, monthOffset?: number) => {\n const copyDate = new Date(date);\n copyDate.setDate(1);\n copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n return copyDate.getDay();\n },\n [],\n );\n\n const getNumberOfDaysInMonth = useCallback(\n (date: Date, monthOffset?: number) => {\n const copyDate = new Date(date);\n copyDate.setDate(1);\n copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n copyDate.setMonth(copyDate.getMonth() + 1);\n copyDate.setDate(0);\n return copyDate.getDate();\n },\n [],\n );\n\n const adjustMonth = useCallback((monthOffset: number) => {\n setViewingMonth((prev) => {\n const newDate = new Date(prev);\n newDate.setMonth(newDate.getMonth() + monthOffset);\n return newDate;\n });\n }, []);\n\n const getDateFromIndex = useCallback(\n (date: Date, monthOffset: number, index: number) => {\n const startingDay = getMonthsStartingDay(date, monthOffset);\n\n if (index < startingDay) {\n // Get the last day of the previous month\n const previousMonth = new Date(date);\n previousMonth.setMonth(previousMonth.getMonth() + monthOffset);\n previousMonth.setDate(1);\n previousMonth.setDate(previousMonth.getDate() - (startingDay - index));\n return previousMonth;\n } else if (\n index >\n getNumberOfDaysInMonth(date, monthOffset) + startingDay - 1\n ) {\n // Get the first day of the next month\n const nextMonth = new Date(date);\n nextMonth.setMonth(nextMonth.getMonth() + monthOffset);\n nextMonth.setMonth(nextMonth.getMonth() + 1);\n nextMonth.setDate(\n index - getNumberOfDaysInMonth(date, monthOffset) - startingDay + 1,\n );\n return nextMonth;\n } else {\n // Get the current month's date\n const newDate = new Date(date);\n newDate.setMonth(newDate.getMonth() + monthOffset);\n newDate.setDate(index - startingDay + 1);\n return newDate;\n }\n },\n [getMonthsStartingDay, getNumberOfDaysInMonth],\n );\n\n const isDateEqual = useCallback((date1: Date | null, date2: Date | null) => {\n if (!date1 || !date2) return false;\n return date1.toDateString() === date2.toDateString();\n }, []);\n\n return (\n <div className={cn(dateRangePickerVariants({ size, variant }), className)}>\n <div className=\"flex gap-4\">\n <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n <button\n type=\"button\"\n aria-label=\"Previous month\"\n className=\"absolute top-0 left-0 cursor-pointer rounded bg-kumo-interact/85 p-1.5 hover:bg-kumo-interact\"\n onClick={() => adjustMonth(-1)}\n >\n <CaretLeftIcon size={sizeConfig.iconSize} />\n </button>\n\n <DateRangeMonthHeader\n month={getMonthName(viewingMonth)}\n year={getDateYear(viewingMonth)}\n size={size}\n updateCurrentMonth={(dateString) => {\n setViewingMonth(new Date(dateString));\n }}\n />\n\n <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n {Array.from({ length: 42 }).map((_, index) => (\n <DateRangeDayCell\n key={index}\n date={getDateFromIndex(viewingMonth, 0, index)}\n size={size}\n mode={\n // After current month range\n (startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n index >\n getNumberOfDaysInMonth(viewingMonth, 0) +\n getMonthsStartingDay(viewingMonth, 0) -\n 1) ||\n // Before current month range\n (startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n index < getMonthsStartingDay(viewingMonth, 0))\n ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n : // Before current month range\n index < getMonthsStartingDay(viewingMonth, 0)\n ? DateRangeCellMode.OUT_OF_RANGE\n : // After current month range\n index >\n getNumberOfDaysInMonth(viewingMonth, 0) +\n getMonthsStartingDay(viewingMonth, 0) -\n 1\n ? DateRangeCellMode.OUT_OF_RANGE\n : // Selected start date\n isDateEqual(\n getDateFromIndex(viewingMonth, 0, index),\n startDate,\n )\n ? DateRangeCellMode.SELECTED_START_NODE\n : // Selected end date\n isDateEqual(\n getDateFromIndex(viewingMonth, 0, index),\n endDate,\n )\n ? DateRangeCellMode.SELECTED_END_NODE\n : // Selected date range\n startDate &&\n getDateFromIndex(viewingMonth, 0, index) >=\n startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 0, index) <=\n endDate\n ? DateRangeCellMode.SELECTED\n : // Hovering past a starting date and no end date selected\n startDate &&\n !endDate &&\n hoveringDate &&\n hoveringDate > startDate &&\n getDateFromIndex(viewingMonth, 0, index) <=\n hoveringDate &&\n getDateFromIndex(viewingMonth, 0, index) >\n startDate\n ? DateRangeCellMode.SELECTED\n : // Default to enabled date\n DateRangeCellMode.ENABLED\n }\n onClick={(date) => {\n if (!startDate || date < startDate) {\n handleStartDateChange(date);\n setHoveringDate(date);\n } else {\n handleEndDateChange(date);\n }\n }}\n isHoveringDate={(date) => {\n if (startDate && !endDate && date > startDate) {\n setHoveringDate(date);\n }\n }}\n />\n ))}\n </div>\n </div>\n <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n <button\n type=\"button\"\n aria-label=\"Next month\"\n className=\"absolute top-0 right-0 cursor-pointer rounded bg-kumo-interact/85 p-1.5 hover:bg-kumo-interact\"\n onClick={() => adjustMonth(1)}\n >\n <CaretRightIcon size={sizeConfig.iconSize} />\n </button>\n\n <DateRangeMonthHeader\n month={getMonthName(viewingMonth, 1)}\n year={getDateYear(viewingMonth, 1)}\n size={size}\n updateCurrentMonth={(dateString) => {\n const date = new Date(dateString);\n date.setMonth(date.getMonth() - 1);\n setViewingMonth(date);\n }}\n />\n\n <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n {Array.from({ length: 42 }).map((_, index) => (\n <DateRangeDayCell\n key={index}\n date={getDateFromIndex(viewingMonth, 1, index)}\n size={size}\n mode={\n // After current month range\n (startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n index >\n getNumberOfDaysInMonth(viewingMonth, 1) +\n getMonthsStartingDay(viewingMonth, 1) -\n 1) ||\n // Before current month range\n (startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n index < getMonthsStartingDay(viewingMonth, 1))\n ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n : // Before current month range\n index < getMonthsStartingDay(viewingMonth, 1)\n ? DateRangeCellMode.OUT_OF_RANGE\n : // After current month range\n index >\n getNumberOfDaysInMonth(viewingMonth, 1) +\n getMonthsStartingDay(viewingMonth, 1) -\n 1\n ? DateRangeCellMode.OUT_OF_RANGE\n : // Selected start date\n isDateEqual(\n getDateFromIndex(viewingMonth, 1, index),\n startDate,\n )\n ? DateRangeCellMode.SELECTED_START_NODE\n : // Selected end date\n isDateEqual(\n getDateFromIndex(viewingMonth, 1, index),\n endDate,\n )\n ? DateRangeCellMode.SELECTED_END_NODE\n : // Selected date range\n startDate &&\n getDateFromIndex(viewingMonth, 1, index) >=\n startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 1, index) <=\n endDate\n ? DateRangeCellMode.SELECTED\n : // Hovering past a starting date and no end date selected\n startDate &&\n !endDate &&\n hoveringDate &&\n hoveringDate > startDate &&\n getDateFromIndex(viewingMonth, 1, index) <=\n hoveringDate &&\n getDateFromIndex(viewingMonth, 1, index) >\n startDate\n ? DateRangeCellMode.SELECTED\n : // Default to enabled date\n DateRangeCellMode.ENABLED\n }\n onClick={(date) => {\n if (!startDate || date < startDate) {\n handleStartDateChange(date);\n setHoveringDate(date);\n } else {\n handleEndDateChange(date);\n }\n }}\n isHoveringDate={(date) => {\n if (startDate && !endDate && date > startDate) {\n setHoveringDate(date);\n }\n }}\n />\n ))}\n </div>\n </div>\n </div>\n\n <DateRangeFooter\n timezone={timezone}\n size={size}\n reset={() => {\n handleStartDateChange(null);\n handleEndDateChange(null);\n }}\n />\n </div>\n );\n}\n\nfunction DateRangeDayCell({\n date,\n mode,\n size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n onClick,\n isHoveringDate,\n}: {\n date: Date;\n mode?: DateRangeCellMode;\n size?: KumoDateRangePickerSize;\n onClick?: (date: Date) => void;\n isHoveringDate?: (date: Date) => void;\n}) {\n const sizeConfig = getSizeConfig(size);\n\n const getDateNumberFromDate = useCallback((date: Date) => {\n return date.getDate();\n }, []);\n\n const getBackgroundColor = useCallback(() => {\n switch (mode) {\n case DateRangeCellMode.OUT_OF_RANGE:\n return \"bg-transparent\";\n case DateRangeCellMode.ENABLED:\n return \"bg-transparent\";\n case DateRangeCellMode.SELECTED_START_NODE:\n return \"!bg-kumo-contrast rounded-tl-[5px] rounded-bl-[5px]\";\n case DateRangeCellMode.SELECTED_END_NODE:\n return \"!bg-kumo-contrast rounded-tr-[5px] rounded-br-[5px]\";\n case DateRangeCellMode.SELECTED:\n return \"bg-kumo-interact\";\n case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n return \"bg-kumo-fill\";\n }\n }, [mode]);\n\n const getTextColor = useCallback(() => {\n switch (mode) {\n case DateRangeCellMode.OUT_OF_RANGE:\n case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n return \"!text-kumo-strong\";\n case DateRangeCellMode.SELECTED_START_NODE:\n case DateRangeCellMode.SELECTED_END_NODE:\n return \"!text-kumo-inverse\";\n default:\n return \"text-kumo-default\";\n }\n }, [mode]);\n\n const getAriaLabel = useCallback(() => {\n const dateStr = date.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\",\n });\n switch (mode) {\n case DateRangeCellMode.SELECTED_START_NODE:\n return `${dateStr}, selected as start date`;\n case DateRangeCellMode.SELECTED_END_NODE:\n return `${dateStr}, selected as end date`;\n case DateRangeCellMode.SELECTED:\n return `${dateStr}, within selected range`;\n default:\n return dateStr;\n }\n }, [date, mode]);\n\n return (\n <button\n type=\"button\"\n aria-label={getAriaLabel()}\n id={date.toDateString()}\n className={cn(\n sizeConfig.cellHeight,\n sizeConfig.cellWidth,\n sizeConfig.textSize,\n \"cursor-pointer text-center text-kumo-default transition-all duration-[50]\",\n `leading-[${sizeConfig.cellHeight.replace(\"h-[\", \"\").replace(\"]\", \"\")}]`,\n mode !== DateRangeCellMode.OUT_OF_RANGE &&\n mode !== DateRangeCellMode.SELECTED_OUT_OF_RANGE\n ? \"hover:bg-kumo-interact\"\n : \"\",\n getBackgroundColor(),\n getTextColor(),\n )}\n onClick={() => onClick?.(date)}\n onMouseOver={() => isHoveringDate?.(date)}\n onFocus={() => isHoveringDate?.(date)}\n >\n {getDateNumberFromDate(date)}\n </button>\n );\n}\n\nfunction DateRangeMonthHeader({\n month,\n year,\n size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n updateCurrentMonth,\n}: {\n month?: string;\n year?: number;\n size?: KumoDateRangePickerSize;\n updateCurrentMonth?: (dateString: string) => void;\n}) {\n const sizeConfig = getSizeConfig(size);\n\n return (\n <div>\n <div className=\"mb-3 text-center\">\n <input\n key={`${month}-${year}`}\n aria-label=\"Edit month and year\"\n defaultValue={`${month} ${year}`}\n className={cn(\n \"w-full rounded-md border-none bg-transparent py-1.5 text-center font-semibold text-kumo-default transition-all duration-200 focus:outline-none\",\n sizeConfig.textSize,\n )}\n onBlur={(e) => {\n if (e.currentTarget.value.length === 0) return;\n updateCurrentMonth?.(e.currentTarget.value);\n }}\n />\n </div>\n\n <div className=\"mt-2 grid grid-cols-7 gap-1\">\n {DAYS_OF_WEEK.map((day) => (\n <div\n key={day}\n className={cn(\n \"h-[22px] text-center text-kumo-subtle\",\n sizeConfig.cellWidth,\n sizeConfig.textSize,\n )}\n >\n {day}\n </div>\n ))}\n </div>\n </div>\n );\n}\n\nfunction DateRangeFooter({\n timezone,\n size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n reset,\n}: {\n timezone?: string;\n size?: KumoDateRangePickerSize;\n reset?: () => void;\n}) {\n const sizeConfig = getSizeConfig(size);\n\n return (\n <div\n className={cn(\"flex items-center gap-2 text-kumo-strong\", sizeConfig.textSize)}\n >\n <GlobeHemisphereWestIcon size={sizeConfig.iconSize} />\n <span className=\"flex-1\">Timezone: {timezone}</span>\n <button\n type=\"button\"\n onClick={reset}\n className=\"cursor-pointer font-semibold text-kumo-default underline underline-offset-2\"\n >\n Reset Dates\n </button>\n </div>\n );\n}\n\n// Default export for backwards compatibility\nexport default DateRangePicker;\n"],"names":["KUMO_DATE_RANGE_PICKER_VARIANTS","KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS","dateRangePickerVariants","size","variant","cn","getSizeConfig","DAYS_OF_WEEK","DateRangePicker","onStartDateChange","onEndDateChange","timezone","className","startDate","setStartDate","useState","endDate","setEndDate","viewingMonth","setViewingMonth","hoveringDate","setHoveringDate","sizeConfig","handleStartDateChange","date","handleEndDateChange","getMonthName","useCallback","monthOffset","copyDate","getDateYear","getMonthsStartingDay","getNumberOfDaysInMonth","adjustMonth","prev","newDate","getDateFromIndex","index","startingDay","previousMonth","nextMonth","isDateEqual","date1","date2","jsxs","jsx","CaretLeftIcon","DateRangeMonthHeader","dateString","_","DateRangeDayCell","CaretRightIcon","DateRangeFooter","mode","onClick","isHoveringDate","getDateNumberFromDate","getBackgroundColor","getTextColor","getAriaLabel","dateStr","month","year","updateCurrentMonth","e","day","reset","GlobeHemisphereWestIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"date-range-picker-CbKEQ9pi.js","sources":["../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n CaretLeftIcon,\n CaretRightIcon,\n GlobeHemisphereWestIcon,\n} from \"@phosphor-icons/react\";\nimport { useCallback, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** DateRangePicker size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_DATE_RANGE_PICKER_VARIANTS = {\n size: {\n sm: {\n classes: \"p-3 gap-2\",\n cellHeight: \"h-[22px]\",\n cellWidth: \"w-6\",\n calendarWidth: \"w-[168px]\",\n textSize: \"text-xs\",\n iconSize: 14,\n description: \"Compact calendar for tight spaces\",\n },\n base: {\n classes: \"p-4 gap-2.5\",\n cellHeight: \"h-[26px]\",\n cellWidth: \"w-7\",\n calendarWidth: \"w-[196px]\",\n textSize: \"text-sm\",\n iconSize: 16,\n description: \"Default calendar size\",\n },\n lg: {\n classes: \"p-5 gap-3\",\n cellHeight: \"h-[32px]\",\n cellWidth: \"w-9\",\n calendarWidth: \"w-[252px]\",\n textSize: \"text-base\",\n iconSize: 18,\n description: \"Large calendar for prominent date selection\",\n },\n },\n variant: {\n default: {\n classes: \"bg-kumo-overlay\",\n description: \"Default calendar appearance\",\n },\n subtle: {\n classes: \"bg-kumo-base\",\n description: \"Subtle calendar with minimal background\",\n },\n },\n} as const;\n\nexport const KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_DATE_RANGE_PICKER_VARIANTS\nexport type KumoDateRangePickerSize =\n keyof typeof KUMO_DATE_RANGE_PICKER_VARIANTS.size;\nexport type KumoDateRangePickerVariant =\n keyof typeof KUMO_DATE_RANGE_PICKER_VARIANTS.variant;\n\nexport interface KumoDateRangePickerVariantsProps {\n /**\n * Calendar size.\n * - `\"sm\"` — Compact calendar for tight spaces\n * - `\"base\"` — Default calendar size\n * - `\"lg\"` — Large calendar for prominent date selection\n * @default \"base\"\n */\n size?: KumoDateRangePickerSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard appearance with overlay background\n * - `\"subtle\"` — Minimal background\n * @default \"default\"\n */\n variant?: KumoDateRangePickerVariant;\n}\n\nexport function dateRangePickerVariants({\n size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n variant = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n}: KumoDateRangePickerVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex w-fit flex-col rounded-xl select-none\",\n // Apply variant and size styles\n KUMO_DATE_RANGE_PICKER_VARIANTS.variant[variant].classes,\n KUMO_DATE_RANGE_PICKER_VARIANTS.size[size].classes,\n );\n}\n\n// Helper to get size config\nfunction getSizeConfig(size: KumoDateRangePickerSize) {\n return KUMO_DATE_RANGE_PICKER_VARIANTS.size[size];\n}\n\nenum DateRangeCellMode {\n OUT_OF_RANGE,\n ENABLED,\n SELECTED_START_NODE,\n SELECTED_END_NODE,\n SELECTED,\n SELECTED_OUT_OF_RANGE,\n}\n\nconst DAYS_OF_WEEK = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"] as const;\n\n/**\n * DateRangePicker component props.\n *\n * Dual-calendar date range selector with hover preview, timezone display, and reset support.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n * onStartDateChange={(d) => setStart(d)}\n * onEndDateChange={(d) => setEnd(d)}\n * timezone=\"New York, NY, USA (GMT-4)\"\n * />\n *\n * // Compact variant\n * <DateRangePicker\n * size=\"sm\"\n * variant=\"subtle\"\n * onStartDateChange={setStart}\n * onEndDateChange={setEnd}\n * />\n * ```\n *\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport interface DateRangePickerProps extends KumoDateRangePickerVariantsProps {\n /** Callback fired when start date changes. Receives `null` on reset. */\n onStartDateChange: (date: Date | null) => void;\n /** Callback fired when end date changes. Receives `null` on reset. */\n onEndDateChange: (date: Date | null) => void;\n /**\n * Display timezone string shown in the footer.\n * @default \"New York, NY, USA (GMT-4)\"\n */\n timezone?: string;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n}\n\n/**\n * DateRangePicker — dual-calendar date range selector.\n *\n * Renders two side-by-side month calendars with click-to-select start/end dates,\n * hover preview of the range, a timezone footer, and a reset button.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n * onStartDateChange={setStart}\n * onEndDateChange={setEnd}\n * />\n * ```\n *\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport function DateRangePicker({\n onStartDateChange,\n onEndDateChange,\n size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n variant = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n timezone = \"New York, NY, USA (GMT-4)\",\n className,\n}: DateRangePickerProps) {\n const [startDate, setStartDate] = useState<Date | null>(null);\n const [endDate, setEndDate] = useState<Date | null>(null);\n const [viewingMonth, setViewingMonth] = useState<Date>(new Date());\n const [hoveringDate, setHoveringDate] = useState<Date | null>(null);\n\n const sizeConfig = getSizeConfig(size);\n\n const handleStartDateChange = (date: Date | null) => {\n setStartDate(date);\n onStartDateChange(date); // Pass the updated startDate to the parent component\n };\n\n const handleEndDateChange = (date: Date | null) => {\n setEndDate(date);\n onEndDateChange(date); // Pass the updated endDate to the parent component\n };\n\n const getMonthName = useCallback((date: Date, monthOffset?: number) => {\n const copyDate = new Date(date);\n copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n return copyDate.toLocaleString(\"default\", { month: \"long\" });\n }, []);\n\n const getDateYear = useCallback((date: Date, monthOffset?: number) => {\n const copyDate = new Date(date);\n copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n return copyDate.getFullYear();\n }, []);\n\n const getMonthsStartingDay = useCallback(\n (date: Date, monthOffset?: number) => {\n const copyDate = new Date(date);\n copyDate.setDate(1);\n copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n return copyDate.getDay();\n },\n [],\n );\n\n const getNumberOfDaysInMonth = useCallback(\n (date: Date, monthOffset?: number) => {\n const copyDate = new Date(date);\n copyDate.setDate(1);\n copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n copyDate.setMonth(copyDate.getMonth() + 1);\n copyDate.setDate(0);\n return copyDate.getDate();\n },\n [],\n );\n\n const adjustMonth = useCallback((monthOffset: number) => {\n setViewingMonth((prev) => {\n const newDate = new Date(prev);\n newDate.setMonth(newDate.getMonth() + monthOffset);\n return newDate;\n });\n }, []);\n\n const getDateFromIndex = useCallback(\n (date: Date, monthOffset: number, index: number) => {\n const startingDay = getMonthsStartingDay(date, monthOffset);\n\n if (index < startingDay) {\n // Get the last day of the previous month\n const previousMonth = new Date(date);\n previousMonth.setMonth(previousMonth.getMonth() + monthOffset);\n previousMonth.setDate(1);\n previousMonth.setDate(previousMonth.getDate() - (startingDay - index));\n return previousMonth;\n } else if (\n index >\n getNumberOfDaysInMonth(date, monthOffset) + startingDay - 1\n ) {\n // Get the first day of the next month\n const nextMonth = new Date(date);\n nextMonth.setMonth(nextMonth.getMonth() + monthOffset);\n nextMonth.setMonth(nextMonth.getMonth() + 1);\n nextMonth.setDate(\n index - getNumberOfDaysInMonth(date, monthOffset) - startingDay + 1,\n );\n return nextMonth;\n } else {\n // Get the current month's date\n const newDate = new Date(date);\n newDate.setMonth(newDate.getMonth() + monthOffset);\n newDate.setDate(index - startingDay + 1);\n return newDate;\n }\n },\n [getMonthsStartingDay, getNumberOfDaysInMonth],\n );\n\n const isDateEqual = useCallback((date1: Date | null, date2: Date | null) => {\n if (!date1 || !date2) return false;\n return date1.toDateString() === date2.toDateString();\n }, []);\n\n return (\n <div className={cn(dateRangePickerVariants({ size, variant }), className)}>\n <div className=\"flex gap-4\">\n <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n <button\n type=\"button\"\n aria-label=\"Previous month\"\n className=\"absolute top-0 left-0 cursor-pointer rounded bg-kumo-interact/85 p-1.5 hover:bg-kumo-interact\"\n onClick={() => adjustMonth(-1)}\n >\n <CaretLeftIcon size={sizeConfig.iconSize} />\n </button>\n\n <DateRangeMonthHeader\n month={getMonthName(viewingMonth)}\n year={getDateYear(viewingMonth)}\n size={size}\n updateCurrentMonth={(dateString) => {\n setViewingMonth(new Date(dateString));\n }}\n />\n\n <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n {Array.from({ length: 42 }).map((_, index) => (\n <DateRangeDayCell\n key={index}\n date={getDateFromIndex(viewingMonth, 0, index)}\n size={size}\n mode={\n // After current month range\n (startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n index >\n getNumberOfDaysInMonth(viewingMonth, 0) +\n getMonthsStartingDay(viewingMonth, 0) -\n 1) ||\n // Before current month range\n (startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n index < getMonthsStartingDay(viewingMonth, 0))\n ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n : // Before current month range\n index < getMonthsStartingDay(viewingMonth, 0)\n ? DateRangeCellMode.OUT_OF_RANGE\n : // After current month range\n index >\n getNumberOfDaysInMonth(viewingMonth, 0) +\n getMonthsStartingDay(viewingMonth, 0) -\n 1\n ? DateRangeCellMode.OUT_OF_RANGE\n : // Selected start date\n isDateEqual(\n getDateFromIndex(viewingMonth, 0, index),\n startDate,\n )\n ? DateRangeCellMode.SELECTED_START_NODE\n : // Selected end date\n isDateEqual(\n getDateFromIndex(viewingMonth, 0, index),\n endDate,\n )\n ? DateRangeCellMode.SELECTED_END_NODE\n : // Selected date range\n startDate &&\n getDateFromIndex(viewingMonth, 0, index) >=\n startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 0, index) <=\n endDate\n ? DateRangeCellMode.SELECTED\n : // Hovering past a starting date and no end date selected\n startDate &&\n !endDate &&\n hoveringDate &&\n hoveringDate > startDate &&\n getDateFromIndex(viewingMonth, 0, index) <=\n hoveringDate &&\n getDateFromIndex(viewingMonth, 0, index) >\n startDate\n ? DateRangeCellMode.SELECTED\n : // Default to enabled date\n DateRangeCellMode.ENABLED\n }\n onClick={(date) => {\n if (!startDate || date < startDate) {\n handleStartDateChange(date);\n setHoveringDate(date);\n } else {\n handleEndDateChange(date);\n }\n }}\n isHoveringDate={(date) => {\n if (startDate && !endDate && date > startDate) {\n setHoveringDate(date);\n }\n }}\n />\n ))}\n </div>\n </div>\n <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n <button\n type=\"button\"\n aria-label=\"Next month\"\n className=\"absolute top-0 right-0 cursor-pointer rounded bg-kumo-interact/85 p-1.5 hover:bg-kumo-interact\"\n onClick={() => adjustMonth(1)}\n >\n <CaretRightIcon size={sizeConfig.iconSize} />\n </button>\n\n <DateRangeMonthHeader\n month={getMonthName(viewingMonth, 1)}\n year={getDateYear(viewingMonth, 1)}\n size={size}\n updateCurrentMonth={(dateString) => {\n const date = new Date(dateString);\n date.setMonth(date.getMonth() - 1);\n setViewingMonth(date);\n }}\n />\n\n <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n {Array.from({ length: 42 }).map((_, index) => (\n <DateRangeDayCell\n key={index}\n date={getDateFromIndex(viewingMonth, 1, index)}\n size={size}\n mode={\n // After current month range\n (startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n index >\n getNumberOfDaysInMonth(viewingMonth, 1) +\n getMonthsStartingDay(viewingMonth, 1) -\n 1) ||\n // Before current month range\n (startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n index < getMonthsStartingDay(viewingMonth, 1))\n ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n : // Before current month range\n index < getMonthsStartingDay(viewingMonth, 1)\n ? DateRangeCellMode.OUT_OF_RANGE\n : // After current month range\n index >\n getNumberOfDaysInMonth(viewingMonth, 1) +\n getMonthsStartingDay(viewingMonth, 1) -\n 1\n ? DateRangeCellMode.OUT_OF_RANGE\n : // Selected start date\n isDateEqual(\n getDateFromIndex(viewingMonth, 1, index),\n startDate,\n )\n ? DateRangeCellMode.SELECTED_START_NODE\n : // Selected end date\n isDateEqual(\n getDateFromIndex(viewingMonth, 1, index),\n endDate,\n )\n ? DateRangeCellMode.SELECTED_END_NODE\n : // Selected date range\n startDate &&\n getDateFromIndex(viewingMonth, 1, index) >=\n startDate &&\n endDate &&\n getDateFromIndex(viewingMonth, 1, index) <=\n endDate\n ? DateRangeCellMode.SELECTED\n : // Hovering past a starting date and no end date selected\n startDate &&\n !endDate &&\n hoveringDate &&\n hoveringDate > startDate &&\n getDateFromIndex(viewingMonth, 1, index) <=\n hoveringDate &&\n getDateFromIndex(viewingMonth, 1, index) >\n startDate\n ? DateRangeCellMode.SELECTED\n : // Default to enabled date\n DateRangeCellMode.ENABLED\n }\n onClick={(date) => {\n if (!startDate || date < startDate) {\n handleStartDateChange(date);\n setHoveringDate(date);\n } else {\n handleEndDateChange(date);\n }\n }}\n isHoveringDate={(date) => {\n if (startDate && !endDate && date > startDate) {\n setHoveringDate(date);\n }\n }}\n />\n ))}\n </div>\n </div>\n </div>\n\n <DateRangeFooter\n timezone={timezone}\n size={size}\n reset={() => {\n handleStartDateChange(null);\n handleEndDateChange(null);\n }}\n />\n </div>\n );\n}\n\nfunction DateRangeDayCell({\n date,\n mode,\n size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n onClick,\n isHoveringDate,\n}: {\n date: Date;\n mode?: DateRangeCellMode;\n size?: KumoDateRangePickerSize;\n onClick?: (date: Date) => void;\n isHoveringDate?: (date: Date) => void;\n}) {\n const sizeConfig = getSizeConfig(size);\n\n const getDateNumberFromDate = useCallback((date: Date) => {\n return date.getDate();\n }, []);\n\n const getBackgroundColor = useCallback(() => {\n switch (mode) {\n case DateRangeCellMode.OUT_OF_RANGE:\n return \"bg-transparent\";\n case DateRangeCellMode.ENABLED:\n return \"bg-transparent\";\n case DateRangeCellMode.SELECTED_START_NODE:\n return \"!bg-kumo-contrast rounded-tl-[5px] rounded-bl-[5px]\";\n case DateRangeCellMode.SELECTED_END_NODE:\n return \"!bg-kumo-contrast rounded-tr-[5px] rounded-br-[5px]\";\n case DateRangeCellMode.SELECTED:\n return \"bg-kumo-interact\";\n case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n return \"bg-kumo-fill\";\n }\n }, [mode]);\n\n const getTextColor = useCallback(() => {\n switch (mode) {\n case DateRangeCellMode.OUT_OF_RANGE:\n case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n return \"!text-kumo-strong\";\n case DateRangeCellMode.SELECTED_START_NODE:\n case DateRangeCellMode.SELECTED_END_NODE:\n return \"!text-kumo-inverse\";\n default:\n return \"text-kumo-default\";\n }\n }, [mode]);\n\n const getAriaLabel = useCallback(() => {\n const dateStr = date.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\",\n });\n switch (mode) {\n case DateRangeCellMode.SELECTED_START_NODE:\n return `${dateStr}, selected as start date`;\n case DateRangeCellMode.SELECTED_END_NODE:\n return `${dateStr}, selected as end date`;\n case DateRangeCellMode.SELECTED:\n return `${dateStr}, within selected range`;\n default:\n return dateStr;\n }\n }, [date, mode]);\n\n return (\n <button\n type=\"button\"\n aria-label={getAriaLabel()}\n id={date.toDateString()}\n className={cn(\n sizeConfig.cellHeight,\n sizeConfig.cellWidth,\n sizeConfig.textSize,\n \"cursor-pointer text-center text-kumo-default transition-all duration-[50]\",\n `leading-[${sizeConfig.cellHeight.replace(\"h-[\", \"\").replace(\"]\", \"\")}]`,\n mode !== DateRangeCellMode.OUT_OF_RANGE &&\n mode !== DateRangeCellMode.SELECTED_OUT_OF_RANGE\n ? \"hover:bg-kumo-interact\"\n : \"\",\n getBackgroundColor(),\n getTextColor(),\n )}\n onClick={() => onClick?.(date)}\n onMouseOver={() => isHoveringDate?.(date)}\n onFocus={() => isHoveringDate?.(date)}\n >\n {getDateNumberFromDate(date)}\n </button>\n );\n}\n\nfunction DateRangeMonthHeader({\n month,\n year,\n size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n updateCurrentMonth,\n}: {\n month?: string;\n year?: number;\n size?: KumoDateRangePickerSize;\n updateCurrentMonth?: (dateString: string) => void;\n}) {\n const sizeConfig = getSizeConfig(size);\n\n return (\n <div>\n <div className=\"mb-3 text-center\">\n <input\n key={`${month}-${year}`}\n aria-label=\"Edit month and year\"\n defaultValue={`${month} ${year}`}\n className={cn(\n \"w-full rounded-md border-none bg-transparent py-1.5 text-center font-semibold text-kumo-default transition-all duration-200 focus:outline-none\",\n sizeConfig.textSize,\n )}\n onBlur={(e) => {\n if (e.currentTarget.value.length === 0) return;\n updateCurrentMonth?.(e.currentTarget.value);\n }}\n />\n </div>\n\n <div className=\"mt-2 grid grid-cols-7 gap-1\">\n {DAYS_OF_WEEK.map((day) => (\n <div\n key={day}\n className={cn(\n \"h-[22px] text-center text-kumo-subtle\",\n sizeConfig.cellWidth,\n sizeConfig.textSize,\n )}\n >\n {day}\n </div>\n ))}\n </div>\n </div>\n );\n}\n\nfunction DateRangeFooter({\n timezone,\n size = KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n reset,\n}: {\n timezone?: string;\n size?: KumoDateRangePickerSize;\n reset?: () => void;\n}) {\n const sizeConfig = getSizeConfig(size);\n\n return (\n <div\n className={cn(\"flex items-center gap-2 text-kumo-strong\", sizeConfig.textSize)}\n >\n <GlobeHemisphereWestIcon size={sizeConfig.iconSize} />\n <span className=\"flex-1\">Timezone: {timezone}</span>\n <button\n type=\"button\"\n onClick={reset}\n className=\"cursor-pointer font-semibold text-kumo-default underline underline-offset-2\"\n >\n Reset Dates\n </button>\n </div>\n );\n}\n\n// Default export for backwards compatibility\n/**\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport default DateRangePicker;\n"],"names":["KUMO_DATE_RANGE_PICKER_VARIANTS","KUMO_DATE_RANGE_PICKER_DEFAULT_VARIANTS","dateRangePickerVariants","size","variant","cn","getSizeConfig","DAYS_OF_WEEK","DateRangePicker","onStartDateChange","onEndDateChange","timezone","className","startDate","setStartDate","useState","endDate","setEndDate","viewingMonth","setViewingMonth","hoveringDate","setHoveringDate","sizeConfig","handleStartDateChange","date","handleEndDateChange","getMonthName","useCallback","monthOffset","copyDate","getDateYear","getMonthsStartingDay","getNumberOfDaysInMonth","adjustMonth","prev","newDate","getDateFromIndex","index","startingDay","previousMonth","nextMonth","isDateEqual","date1","date2","jsxs","jsx","CaretLeftIcon","DateRangeMonthHeader","dateString","_","DateRangeDayCell","CaretRightIcon","DateRangeFooter","mode","onClick","isHoveringDate","getDateNumberFromDate","getBackgroundColor","getTextColor","getAriaLabel","dateStr","month","year","updateCurrentMonth","e","day","reset","GlobeHemisphereWestIcon"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as t, jsxs as m } from "react/jsx-runtime";
|
|
3
3
|
import { S as p } from "./surface-BIC6CXiz.js";
|
|
4
4
|
import { c as o } from "./cn-Bhsu1vx2.js";
|
|
5
|
-
import { am as u, an as D, ao as f, ap as y, aq as x, ar as w, as as T, at as b } from "./vendor-base-ui-
|
|
5
|
+
import { am as u, an as D, ao as f, ap as y, aq as x, ar as w, as as T, at as b } from "./vendor-base-ui-B61LL9jT.js";
|
|
6
6
|
const N = {
|
|
7
7
|
size: {
|
|
8
8
|
base: {
|
|
@@ -94,4 +94,4 @@ export {
|
|
|
94
94
|
r as d,
|
|
95
95
|
c as e
|
|
96
96
|
};
|
|
97
|
-
//# sourceMappingURL=dialog-
|
|
97
|
+
//# sourceMappingURL=dialog-B2EHaSoL.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-toS9krNF.js","sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { Surface } from \"../surface\";\nimport { cn } from \"../../utils/cn\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. */\nexport const KUMO_DIALOG_VARIANTS = {\n size: {\n base: {\n classes: \"sm:min-w-96\",\n description: \"Default dialog width\",\n },\n sm: {\n classes: \"min-w-72\",\n description: \"Small dialog for simple confirmations\",\n },\n lg: {\n classes: \"min-w-[32rem]\",\n description: \"Large dialog for complex content\",\n },\n xl: {\n classes: \"min-w-[48rem]\",\n description: \"Extra large dialog for detailed views\",\n },\n },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n dimensions: {\n sm: {\n width: 350,\n titleSize: 20,\n descSize: 16,\n padding: 16,\n gap: 8,\n buttonSize: \"sm\",\n },\n base: {\n width: 384,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n lg: {\n width: 512,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n xl: {\n width: 768,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n },\n baseTokens: {\n background: \"color-surface\",\n text: \"text-color-surface\",\n borderRadius: 12,\n shadow: \"shadow-m\",\n },\n backdrop: {\n background: \"color-surface-secondary\",\n opacity: 0.8,\n },\n header: {\n title: { fontWeight: 600, color: \"text-color-surface\" },\n closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n },\n description: {\n fontWeight: 400,\n color: \"text-color-muted\",\n },\n buttons: {\n primary: { background: \"color-primary\", text: \"white\" },\n secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\n\nexport interface KumoDialogVariantsProps {\n /**\n * Dialog width.\n * - `\"sm\"` — Small (min 288px) for simple confirmations\n * - `\"base\"` — Default (min 384px)\n * - `\"lg\"` — Large (min 512px) for complex content\n * - `\"xl\"` — Extra large (min 768px) for detailed views\n * @default \"base\"\n */\n size?: KumoDialogSize;\n}\n\nexport function dialogVariants({\n size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n return cn(\n // Base styles\n \"shadow-m fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n // Apply size from KUMO_DIALOG_VARIANTS\n KUMO_DIALOG_VARIANTS.size[size].classes,\n );\n}\n\n/**\n * Dialog component props — the modal content panel.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Confirm Action</Dialog.Title>\n * <Dialog.Description>Are you sure?</Dialog.Description>\n * <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n */\nexport type DialogProps = KumoDialogVariantsProps & {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Dialog content (typically Title, Description, Close, and action buttons). */\n children: ReactNode;\n /** Inline styles. */\n style?: CSSProperties;\n};\n\n/**\n * Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,\n * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Delete Item</Dialog.Title>\n * <Dialog.Description>This action cannot be undone.</Dialog.Description>\n * <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n */\nfunction DialogContent({\n className,\n children,\n style,\n size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: DialogProps) {\n return (\n <DialogBase.Portal>\n <DialogBase.Backdrop className=\"fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n <Surface\n as={DialogBase.Popup}\n className={cn(dialogVariants({ size }), className)}\n style={\n {\n transitionProperty: \"scale, opacity\",\n transitionTimingFunction:\n \"var(--default-transition-timing-function)\",\n \"--tw-shadow\":\n \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n ...style,\n } as CSSProperties\n }\n >\n {children}\n </Surface>\n </DialogBase.Portal>\n );\n}\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\n\nexport type DialogRootProps = BaseDialogRootProps;\n\nfunction DialogRoot({ children, ...props }: DialogRootProps) {\n return <DialogBase.Root {...props}>{children}</DialogBase.Root>;\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n typeof DialogBase.Trigger\n>;\n\nexport type DialogTriggerProps = BaseDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n return <DialogBase.Trigger {...props}>{children}</DialogBase.Trigger>;\n}\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\ntype BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;\n\nexport type DialogTitleProps = BaseDialogTitleProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n return <DialogBase.Title className={className} {...props} />;\n}\n\nDialogTitle.displayName = \"Dialog.Title\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\ntype BaseDialogDescriptionProps = ComponentPropsWithoutRef<\n typeof DialogBase.Description\n>;\n\nexport type DialogDescriptionProps = BaseDialogDescriptionProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n return <DialogBase.Description className={className} {...props} />;\n}\n\nDialogDescription.displayName = \"Dialog.Description\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\ntype BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;\n\nexport type DialogCloseProps = BaseDialogCloseProps;\n\nfunction DialogClose({ children, ...props }: DialogCloseProps) {\n return <DialogBase.Close {...props}>{children}</DialogBase.Close>;\n}\n\nDialogClose.displayName = \"Dialog.Close\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst Dialog = Object.assign(DialogContent, {\n Root: DialogRoot,\n Trigger: DialogTrigger,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n});\n\nexport {\n Dialog,\n DialogRoot,\n DialogTrigger,\n DialogTitle,\n DialogDescription,\n DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","dialogVariants","size","cn","DialogContent","className","children","style","jsxs","DialogBase.Portal","jsx","DialogBase.Backdrop","Surface","DialogBase.Popup","DialogRoot","props","DialogBase.Root","DialogTrigger","DialogBase.Trigger","DialogTitle","DialogBase.Title","DialogDescription","DialogBase.Description","DialogClose","DialogBase.Close","Dialog"],"mappings":";;;;;AAMO,MAAMA,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,MAAM;AACR;AA4EO,SAASC,EAAe;AAAA,EAC7B,MAAAC,IAAOF,EAA6B;AACtC,IAA6B,IAAI;AAC/B,SAAOG;AAAA;AAAA,IAEL;AAAA;AAAA,IAEAJ,EAAqB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEpC;AA0CA,SAASE,EAAc;AAAA,EACrB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAL,IAAOF,EAA6B;AACtC,GAAgB;AACd,SACE,gBAAAQ,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,WAAU,iIAAA,CAAiI;AAAA,IAChK,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,IAAIC;AAAAA,QACJ,WAAWV,EAAGF,EAAe,EAAE,MAAAC,EAAA,CAAM,GAAGG,CAAS;AAAA,QACjD,OACE;AAAA,UACE,oBAAoB;AAAA,UACpB,0BACE;AAAA,UACF,eACE;AAAA,UACF,GAAGE;AAAA,QAAA;AAAA,QAIN,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;AAUA,SAASQ,EAAW,EAAE,UAAAR,GAAU,GAAGS,KAA0B;AAC3D,2BAAQC,GAAA,EAAiB,GAAGD,GAAQ,UAAAT,EAAA,CAAS;AAC/C;AAEAQ,EAAW,cAAc;AAYzB,SAASG,EAAc,EAAE,UAAAX,GAAU,GAAGS,KAA6B;AACjE,2BAAQG,GAAA,EAAoB,GAAGH,GAAQ,UAAAT,EAAA,CAAS;AAClD;AAEAW,EAAc,cAAc;AAU5B,SAASE,EAAY,EAAE,WAAAd,GAAW,GAAGU,KAA2B;AAC9D,2BAAQK,GAAA,EAAiB,WAAAf,GAAuB,GAAGU,EAAA,CAAO;AAC5D;AAEAI,EAAY,cAAc;AAY1B,SAASE,EAAkB,EAAE,WAAAhB,GAAW,GAAGU,KAAiC;AAC1E,2BAAQO,GAAA,EAAuB,WAAAjB,GAAuB,GAAGU,EAAA,CAAO;AAClE;AAEAM,EAAkB,cAAc;AAUhC,SAASE,EAAY,EAAE,UAAAjB,GAAU,GAAGS,KAA2B;AAC7D,2BAAQS,GAAA,EAAkB,GAAGT,GAAQ,UAAAT,EAAA,CAAS;AAChD;AAEAiB,EAAY,cAAc;AAM1B,MAAME,IAAS,OAAO,OAAOrB,GAAe;AAAA,EAC1C,MAAMU;AAAA,EACN,SAASG;AAAA,EACT,OAAOE;AAAA,EACP,aAAaE;AAAA,EACb,OAAOE;AACT,CAAC;"}
|
|
1
|
+
{"version":3,"file":"dialog-B2EHaSoL.js","sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { Surface } from \"../surface\";\nimport { cn } from \"../../utils/cn\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. */\nexport const KUMO_DIALOG_VARIANTS = {\n size: {\n base: {\n classes: \"sm:min-w-96\",\n description: \"Default dialog width\",\n },\n sm: {\n classes: \"min-w-72\",\n description: \"Small dialog for simple confirmations\",\n },\n lg: {\n classes: \"min-w-[32rem]\",\n description: \"Large dialog for complex content\",\n },\n xl: {\n classes: \"min-w-[48rem]\",\n description: \"Extra large dialog for detailed views\",\n },\n },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n dimensions: {\n sm: {\n width: 350,\n titleSize: 20,\n descSize: 16,\n padding: 16,\n gap: 8,\n buttonSize: \"sm\",\n },\n base: {\n width: 384,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n lg: {\n width: 512,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n xl: {\n width: 768,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n },\n baseTokens: {\n background: \"color-surface\",\n text: \"text-color-surface\",\n borderRadius: 12,\n shadow: \"shadow-m\",\n },\n backdrop: {\n background: \"color-surface-secondary\",\n opacity: 0.8,\n },\n header: {\n title: { fontWeight: 600, color: \"text-color-surface\" },\n closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n },\n description: {\n fontWeight: 400,\n color: \"text-color-muted\",\n },\n buttons: {\n primary: { background: \"color-primary\", text: \"white\" },\n secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\n\nexport interface KumoDialogVariantsProps {\n /**\n * Dialog width.\n * - `\"sm\"` — Small (min 288px) for simple confirmations\n * - `\"base\"` — Default (min 384px)\n * - `\"lg\"` — Large (min 512px) for complex content\n * - `\"xl\"` — Extra large (min 768px) for detailed views\n * @default \"base\"\n */\n size?: KumoDialogSize;\n}\n\nexport function dialogVariants({\n size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n return cn(\n // Base styles\n \"shadow-m fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n // Apply size from KUMO_DIALOG_VARIANTS\n KUMO_DIALOG_VARIANTS.size[size].classes,\n );\n}\n\n/**\n * Dialog component props — the modal content panel.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Confirm Action</Dialog.Title>\n * <Dialog.Description>Are you sure?</Dialog.Description>\n * <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n */\nexport type DialogProps = KumoDialogVariantsProps & {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Dialog content (typically Title, Description, Close, and action buttons). */\n children: ReactNode;\n /** Inline styles. */\n style?: CSSProperties;\n};\n\n/**\n * Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,\n * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Delete Item</Dialog.Title>\n * <Dialog.Description>This action cannot be undone.</Dialog.Description>\n * <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n */\nfunction DialogContent({\n className,\n children,\n style,\n size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: DialogProps) {\n return (\n <DialogBase.Portal>\n <DialogBase.Backdrop className=\"fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n <Surface\n as={DialogBase.Popup}\n className={cn(dialogVariants({ size }), className)}\n style={\n {\n transitionProperty: \"scale, opacity\",\n transitionTimingFunction:\n \"var(--default-transition-timing-function)\",\n \"--tw-shadow\":\n \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n ...style,\n } as CSSProperties\n }\n >\n {children}\n </Surface>\n </DialogBase.Portal>\n );\n}\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\n\nexport type DialogRootProps = BaseDialogRootProps;\n\nfunction DialogRoot({ children, ...props }: DialogRootProps) {\n return <DialogBase.Root {...props}>{children}</DialogBase.Root>;\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n typeof DialogBase.Trigger\n>;\n\nexport type DialogTriggerProps = BaseDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n return <DialogBase.Trigger {...props}>{children}</DialogBase.Trigger>;\n}\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\ntype BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;\n\nexport type DialogTitleProps = BaseDialogTitleProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n return <DialogBase.Title className={className} {...props} />;\n}\n\nDialogTitle.displayName = \"Dialog.Title\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\ntype BaseDialogDescriptionProps = ComponentPropsWithoutRef<\n typeof DialogBase.Description\n>;\n\nexport type DialogDescriptionProps = BaseDialogDescriptionProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n return <DialogBase.Description className={className} {...props} />;\n}\n\nDialogDescription.displayName = \"Dialog.Description\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\ntype BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;\n\nexport type DialogCloseProps = BaseDialogCloseProps;\n\nfunction DialogClose({ children, ...props }: DialogCloseProps) {\n return <DialogBase.Close {...props}>{children}</DialogBase.Close>;\n}\n\nDialogClose.displayName = \"Dialog.Close\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst Dialog = Object.assign(DialogContent, {\n Root: DialogRoot,\n Trigger: DialogTrigger,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n});\n\nexport {\n Dialog,\n DialogRoot,\n DialogTrigger,\n DialogTitle,\n DialogDescription,\n DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","dialogVariants","size","cn","DialogContent","className","children","style","jsxs","DialogBase.Portal","jsx","DialogBase.Backdrop","Surface","DialogBase.Popup","DialogRoot","props","DialogBase.Root","DialogTrigger","DialogBase.Trigger","DialogTitle","DialogBase.Title","DialogDescription","DialogBase.Description","DialogClose","DialogBase.Close","Dialog"],"mappings":";;;;;AAMO,MAAMA,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,MAAM;AACR;AA4EO,SAASC,EAAe;AAAA,EAC7B,MAAAC,IAAOF,EAA6B;AACtC,IAA6B,IAAI;AAC/B,SAAOG;AAAA;AAAA,IAEL;AAAA;AAAA,IAEAJ,EAAqB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEpC;AA0CA,SAASE,EAAc;AAAA,EACrB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAL,IAAOF,EAA6B;AACtC,GAAgB;AACd,SACE,gBAAAQ,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,WAAU,iIAAA,CAAiI;AAAA,IAChK,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,IAAIC;AAAAA,QACJ,WAAWV,EAAGF,EAAe,EAAE,MAAAC,EAAA,CAAM,GAAGG,CAAS;AAAA,QACjD,OACE;AAAA,UACE,oBAAoB;AAAA,UACpB,0BACE;AAAA,UACF,eACE;AAAA,UACF,GAAGE;AAAA,QAAA;AAAA,QAIN,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;AAUA,SAASQ,EAAW,EAAE,UAAAR,GAAU,GAAGS,KAA0B;AAC3D,2BAAQC,GAAA,EAAiB,GAAGD,GAAQ,UAAAT,EAAA,CAAS;AAC/C;AAEAQ,EAAW,cAAc;AAYzB,SAASG,EAAc,EAAE,UAAAX,GAAU,GAAGS,KAA6B;AACjE,2BAAQG,GAAA,EAAoB,GAAGH,GAAQ,UAAAT,EAAA,CAAS;AAClD;AAEAW,EAAc,cAAc;AAU5B,SAASE,EAAY,EAAE,WAAAd,GAAW,GAAGU,KAA2B;AAC9D,2BAAQK,GAAA,EAAiB,WAAAf,GAAuB,GAAGU,EAAA,CAAO;AAC5D;AAEAI,EAAY,cAAc;AAY1B,SAASE,EAAkB,EAAE,WAAAhB,GAAW,GAAGU,KAAiC;AAC1E,2BAAQO,GAAA,EAAuB,WAAAjB,GAAuB,GAAGU,EAAA,CAAO;AAClE;AAEAM,EAAkB,cAAc;AAUhC,SAASE,EAAY,EAAE,UAAAjB,GAAU,GAAGS,KAA2B;AAC7D,2BAAQS,GAAA,EAAkB,GAAGT,GAAQ,UAAAT,EAAA,CAAS;AAChD;AAEAiB,EAAY,cAAc;AAM1B,MAAME,IAAS,OAAO,OAAOrB,GAAe;AAAA,EAC1C,MAAMU;AAAA,EACN,SAASG;AAAA,EACT,OAAOE;AAAA,EACP,aAAaE;AAAA,EACb,OAAOE;AACT,CAAC;"}
|
|
@@ -3,9 +3,9 @@ import { jsx as n, jsxs as u, Fragment as j } from "react/jsx-runtime";
|
|
|
3
3
|
import * as i from "react";
|
|
4
4
|
import { c as s } from "./cn-Bhsu1vx2.js";
|
|
5
5
|
import { u as z } from "./link-provider-DPBGo-0n.js";
|
|
6
|
-
import { C as F } from "./checkbox-
|
|
6
|
+
import { C as F } from "./checkbox-BUV90tNU.js";
|
|
7
7
|
import { CheckIcon as b, CaretRightIcon as U } from "@phosphor-icons/react";
|
|
8
|
-
import { au as K, av as W, aw as B, ax as H, ay as x, S as w, az as N, aA as q, aB as J, aC as M, aD as y, aE as Q, aF as X, aG as R, aH as Y } from "./vendor-base-ui-
|
|
8
|
+
import { au as K, av as W, aw as B, ax as H, ay as x, S as w, az as N, aA as q, aB as J, aC as M, aD as y, aE as Q, aF as X, aG as R, aH as Y } from "./vendor-base-ui-B61LL9jT.js";
|
|
9
9
|
const Z = {
|
|
10
10
|
variant: {
|
|
11
11
|
default: {
|
|
@@ -260,4 +260,4 @@ const ie = Object.assign(K, {
|
|
|
260
260
|
export {
|
|
261
261
|
ie as D
|
|
262
262
|
};
|
|
263
|
-
//# sourceMappingURL=dropdown-
|
|
263
|
+
//# sourceMappingURL=dropdown-mGDt95gv.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-BquiYKKC.js","sources":["../src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { Menu as DropdownMenuPrimitive } from \"@base-ui/react/menu\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Checkbox } from \"../checkbox\";\nimport {\n CaretRightIcon as CaretRight,\n CheckIcon as Check,\n type Icon,\n} from \"@phosphor-icons/react\";\n\n/** Dropdown item variant definitions (default and danger styles). */\nexport const KUMO_DROPDOWN_VARIANTS = {\n variant: {\n default: {\n classes: \"\",\n description: \"Default dropdown item appearance\",\n },\n danger: {\n classes:\n \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n description: \"Destructive action item\",\n },\n },\n} as const;\n\nexport const KUMO_DROPDOWN_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_DROPDOWN_VARIANTS\nexport type KumoDropdownVariant = keyof typeof KUMO_DROPDOWN_VARIANTS.variant;\n\nexport interface KumoDropdownVariantsProps {\n /**\n * Visual style of the dropdown item.\n * - `\"default\"` — Standard item appearance\n * - `\"danger\"` — Destructive action with red text\n * @default \"default\"\n */\n variant?: KumoDropdownVariant;\n}\n\nexport function dropdownVariants({\n variant = KUMO_DROPDOWN_DEFAULT_VARIANTS.variant,\n}: KumoDropdownVariantsProps = {}) {\n return cn(KUMO_DROPDOWN_VARIANTS.variant[variant].classes);\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubmenuTrigger>,\n React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.SubmenuTrigger\n > & {\n inset?: boolean;\n icon?: Icon;\n }\n>(({ className, inset, children, icon: IconComponent, ...props }, ref) => (\n <DropdownMenuPrimitive.SubmenuTrigger\n ref={ref}\n className={cn(\n \"flex cursor-default items-center rounded-sm text-base outline-hidden select-none\", // base styles\n \"px-2 py-1.5\", // spacing\n \"focus:bg-kumo-tint\", // focus state\n \"data-[state=open]:bg-kumo-tint\", // open state\n inset && \"pl-8\", // conditional inset\n className,\n )}\n {...props}\n >\n {IconComponent && <IconComponent className=\"mr-2 h-4 w-4\" />}\n {children}\n <CaretRight className=\"ml-auto h-4 w-4\" />\n </DropdownMenuPrimitive.SubmenuTrigger>\n));\n\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubmenuTrigger.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Positioner>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Positioner>\n>(({ className, sideOffset = 8, children, ...props }, ref) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Positioner\n ref={ref}\n sideOffset={sideOffset}\n {...props}\n >\n <DropdownMenuPrimitive.Popup\n className={cn(\n \"overflow-hidden bg-kumo-control text-kumo-default\", // background\n \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n \"min-w-36 p-1.5\", // spacing\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\", // open animation\n \"data-[side=bottom]:slide-in-from-top-2\", // bottom side animation\n \"data-[side=left]:slide-in-from-right-2\", // left side animation\n \"data-[side=right]:slide-in-from-left-2\", // right side animation\n \"data-[side=top]:slide-in-from-bottom-2\", // top side animation\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\", // close animation\n className,\n )}\n >\n {children}\n </DropdownMenuPrimitive.Popup>\n </DropdownMenuPrimitive.Positioner>\n </DropdownMenuPrimitive.Portal>\n));\n\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n if (!IconComponent) return null;\n if (React.isValidElement(IconComponent)) return IconComponent;\n const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n return <Comp className=\"mr-2 h-4 w-4\" />;\n};\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n icon?: Icon | React.ReactNode;\n selected?: boolean;\n href?: string;\n variant?: \"default\" | \"danger\";\n }\n>(\n (\n {\n className,\n inset,\n icon: IconComponent,\n children,\n selected,\n render,\n href,\n variant = \"default\",\n ...props\n },\n ref,\n ) => {\n const LinkComponent = useLinkComponent();\n const content = React.useMemo(() => {\n const innerContent = (\n <>\n {IconComponent && renderIconNode(IconComponent)}\n {children}\n {selected && (\n <span className=\"inline-flex\">\n <Check />\n </span>\n )}\n </>\n );\n\n if (!href) return innerContent;\n\n // Matches http://, https://, or protocol-relative //\n const isExternal = /^(https?:)?\\/\\//.test(href);\n const styles = cn(\n \"flex items-center\",\n variant === \"danger\" &&\n \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n );\n if (isExternal) {\n return (\n <a\n className={cn(styles, \"w-full text-inherit! no-underline!\")}\n href={href}\n target=\"_blank\"\n rel=\"noreferrer\"\n /**\n * For some reason we need this here to prevent the outer link\n * from being clicked (thereby going to the worker details\n * instead of visiting the link)\n */\n onClick={(e) => e.stopPropagation()}\n >\n {innerContent}\n </a>\n );\n }\n return (\n <LinkComponent\n className={cn(styles, \"w-full text-inherit! no-underline!\")}\n href={href}\n to={href}\n /**\n * For some reason we need this here to prevent the outer link\n * from being clicked (thereby going to the worker details\n * instead of visiting the link)\n */\n onClick={(e) => e.stopPropagation()}\n >\n {innerContent}\n </LinkComponent>\n );\n }, [href, IconComponent, children, selected, variant, LinkComponent]);\n\n // When href is provided, content already contains children via innerContent\n // When render prop is provided, caller controls children rendering\n // Only pass children directly when neither href nor render is used\n const useRenderProp = href || render;\n\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-overlay\",\n inset && \"pl-8\",\n dropdownVariants({ variant }),\n className,\n )}\n render={href ? content : render}\n {...props}\n >\n {useRenderProp ? undefined : children}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\n\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden transition-colors select-none focus:bg-kumo-tint focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-inherit\">\n <Checkbox checked={checked} />\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.GroupLabel>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.GroupLabel> & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n <DropdownMenuPrimitive.GroupLabel\n ref={ref}\n className={cn(\n \"px-2 py-1.5 text-base font-semibold\",\n inset && \"pl-8\",\n className,\n )}\n {...props}\n />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.GroupLabel.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-kumo-line\", className)}\n {...props}\n />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n {...props}\n />\n );\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {\n inset?: boolean;\n icon?: Icon | React.ReactNode;\n }\n>(({ className, children, inset, icon: IconComponent, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none\",\n \"data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-tint\",\n inset && \"pl-8\",\n className,\n )}\n {...props}\n >\n {IconComponent && renderIconNode(IconComponent)}\n {children}\n </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\nconst DropdownMenuRadioItemIndicator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItemIndicator>,\n React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.RadioItemIndicator\n >\n>(({ className, children, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItemIndicator\n ref={ref}\n className={cn(\"ml-auto\", className)}\n {...props}\n >\n {children ?? <Check className=\"h-4 w-4\" />}\n </DropdownMenuPrimitive.RadioItemIndicator>\n));\nDropdownMenuRadioItemIndicator.displayName = \"DropdownMenuRadioItemIndicator\";\n\n/**\n * Custom Trigger that converts a single child element to the `render` prop\n * to avoid nested button issues with base-ui's Menu.Trigger.\n */\nconst DropdownMenuTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ children, render, ...props }, ref) => {\n // If render prop is provided, use it directly\n // Otherwise, convert single child element to render prop\n const childElement = React.isValidElement(children) ? children : null;\n const effectiveRender = render ?? childElement;\n\n return (\n <DropdownMenuPrimitive.Trigger\n ref={ref}\n {...props}\n {...(effectiveRender && {\n render: effectiveRender as React.ReactElement<Record<string, unknown>>,\n })}\n >\n {/* Only pass children if not using as render prop */}\n {childElement ? undefined : children}\n </DropdownMenuPrimitive.Trigger>\n );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/**\n * DropdownMenu — accessible dropdown menu anchored to a trigger.\n *\n * Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`,\n * `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`,\n * `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.\n *\n * Built on `@base-ui/react/menu`.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n * <DropdownMenu.Trigger>\n * <Button>Actions</Button>\n * </DropdownMenu.Trigger>\n * <DropdownMenu.Content>\n * <DropdownMenu.Item>Edit</DropdownMenu.Item>\n * <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>\n * <DropdownMenu.Separator />\n * <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n * </DropdownMenu.Content>\n * </DropdownMenu>\n * ```\n *\n * @see https://base-ui.com/react/components/menu\n */\nexport const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {\n Trigger: DropdownMenuTrigger,\n Portal: DropdownMenuPrimitive.Portal,\n Sub: DropdownMenuPrimitive.SubmenuRoot,\n SubTrigger: DropdownMenuSubTrigger,\n SubContent: DropdownMenuContent,\n Content: DropdownMenuContent,\n Item: DropdownMenuItem,\n CheckboxItem: DropdownMenuCheckboxItem,\n RadioGroup: DropdownMenuPrimitive.RadioGroup,\n RadioItem: DropdownMenuRadioItem,\n RadioItemIndicator: DropdownMenuRadioItemIndicator,\n Label: DropdownMenuLabel,\n Separator: DropdownMenuSeparator,\n Shortcut: DropdownMenuShortcut,\n Group: DropdownMenuPrimitive.Group,\n});\n"],"names":["KUMO_DROPDOWN_VARIANTS","KUMO_DROPDOWN_DEFAULT_VARIANTS","dropdownVariants","variant","cn","DropdownMenuSubTrigger","React","className","inset","children","IconComponent","props","ref","jsxs","DropdownMenuPrimitive.SubmenuTrigger","jsx","CaretRight","DropdownMenuContent","sideOffset","DropdownMenuPrimitive.Portal","DropdownMenuPrimitive.Positioner","DropdownMenuPrimitive.Popup","renderIconNode","DropdownMenuItem","selected","render","href","LinkComponent","useLinkComponent","content","innerContent","Fragment","Check","isExternal","styles","e","useRenderProp","DropdownMenuPrimitive.Item","DropdownMenuCheckboxItem","checked","DropdownMenuPrimitive.CheckboxItem","Checkbox","DropdownMenuLabel","DropdownMenuPrimitive.GroupLabel","DropdownMenuSeparator","DropdownMenuPrimitive.Separator","DropdownMenuShortcut","DropdownMenuRadioItem","DropdownMenuPrimitive.RadioItem","DropdownMenuRadioItemIndicator","DropdownMenuPrimitive.RadioItemIndicator","DropdownMenuTrigger","childElement","effectiveRender","DropdownMenuPrimitive.Trigger","DropdownMenu","DropdownMenuPrimitive.Root","DropdownMenuPrimitive.SubmenuRoot","DropdownMenuPrimitive.RadioGroup","DropdownMenuPrimitive.Group"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown-mGDt95gv.js","sources":["../src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { Menu as DropdownMenuPrimitive } from \"@base-ui/react/menu\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Checkbox } from \"../checkbox\";\nimport {\n CaretRightIcon as CaretRight,\n CheckIcon as Check,\n type Icon,\n} from \"@phosphor-icons/react\";\n\n/** Dropdown item variant definitions (default and danger styles). */\nexport const KUMO_DROPDOWN_VARIANTS = {\n variant: {\n default: {\n classes: \"\",\n description: \"Default dropdown item appearance\",\n },\n danger: {\n classes:\n \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n description: \"Destructive action item\",\n },\n },\n} as const;\n\nexport const KUMO_DROPDOWN_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_DROPDOWN_VARIANTS\nexport type KumoDropdownVariant = keyof typeof KUMO_DROPDOWN_VARIANTS.variant;\n\nexport interface KumoDropdownVariantsProps {\n /**\n * Visual style of the dropdown item.\n * - `\"default\"` — Standard item appearance\n * - `\"danger\"` — Destructive action with red text\n * @default \"default\"\n */\n variant?: KumoDropdownVariant;\n}\n\nexport function dropdownVariants({\n variant = KUMO_DROPDOWN_DEFAULT_VARIANTS.variant,\n}: KumoDropdownVariantsProps = {}) {\n return cn(KUMO_DROPDOWN_VARIANTS.variant[variant].classes);\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubmenuTrigger>,\n React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.SubmenuTrigger\n > & {\n inset?: boolean;\n icon?: Icon;\n }\n>(({ className, inset, children, icon: IconComponent, ...props }, ref) => (\n <DropdownMenuPrimitive.SubmenuTrigger\n ref={ref}\n className={cn(\n \"flex cursor-default items-center rounded-sm text-base outline-hidden select-none\", // base styles\n \"px-2 py-1.5\", // spacing\n \"focus:bg-kumo-tint\", // focus state\n \"data-[state=open]:bg-kumo-tint\", // open state\n inset && \"pl-8\", // conditional inset\n className,\n )}\n {...props}\n >\n {IconComponent && <IconComponent className=\"mr-2 h-4 w-4\" />}\n {children}\n <CaretRight className=\"ml-auto h-4 w-4\" />\n </DropdownMenuPrimitive.SubmenuTrigger>\n));\n\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubmenuTrigger.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Positioner>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Positioner>\n>(({ className, sideOffset = 8, children, ...props }, ref) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Positioner\n ref={ref}\n sideOffset={sideOffset}\n {...props}\n >\n <DropdownMenuPrimitive.Popup\n className={cn(\n \"overflow-hidden bg-kumo-control text-kumo-default\", // background\n \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n \"min-w-36 p-1.5\", // spacing\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\", // open animation\n \"data-[side=bottom]:slide-in-from-top-2\", // bottom side animation\n \"data-[side=left]:slide-in-from-right-2\", // left side animation\n \"data-[side=right]:slide-in-from-left-2\", // right side animation\n \"data-[side=top]:slide-in-from-bottom-2\", // top side animation\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\", // close animation\n className,\n )}\n >\n {children}\n </DropdownMenuPrimitive.Popup>\n </DropdownMenuPrimitive.Positioner>\n </DropdownMenuPrimitive.Portal>\n));\n\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n if (!IconComponent) return null;\n if (React.isValidElement(IconComponent)) return IconComponent;\n const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n return <Comp className=\"mr-2 h-4 w-4\" />;\n};\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n icon?: Icon | React.ReactNode;\n selected?: boolean;\n href?: string;\n variant?: \"default\" | \"danger\";\n }\n>(\n (\n {\n className,\n inset,\n icon: IconComponent,\n children,\n selected,\n render,\n href,\n variant = \"default\",\n ...props\n },\n ref,\n ) => {\n const LinkComponent = useLinkComponent();\n const content = React.useMemo(() => {\n const innerContent = (\n <>\n {IconComponent && renderIconNode(IconComponent)}\n {children}\n {selected && (\n <span className=\"inline-flex\">\n <Check />\n </span>\n )}\n </>\n );\n\n if (!href) return innerContent;\n\n // Matches http://, https://, or protocol-relative //\n const isExternal = /^(https?:)?\\/\\//.test(href);\n const styles = cn(\n \"flex items-center\",\n variant === \"danger\" &&\n \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n );\n if (isExternal) {\n return (\n <a\n className={cn(styles, \"w-full text-inherit! no-underline!\")}\n href={href}\n target=\"_blank\"\n rel=\"noreferrer\"\n /**\n * For some reason we need this here to prevent the outer link\n * from being clicked (thereby going to the worker details\n * instead of visiting the link)\n */\n onClick={(e) => e.stopPropagation()}\n >\n {innerContent}\n </a>\n );\n }\n return (\n <LinkComponent\n className={cn(styles, \"w-full text-inherit! no-underline!\")}\n href={href}\n to={href}\n /**\n * For some reason we need this here to prevent the outer link\n * from being clicked (thereby going to the worker details\n * instead of visiting the link)\n */\n onClick={(e) => e.stopPropagation()}\n >\n {innerContent}\n </LinkComponent>\n );\n }, [href, IconComponent, children, selected, variant, LinkComponent]);\n\n // When href is provided, content already contains children via innerContent\n // When render prop is provided, caller controls children rendering\n // Only pass children directly when neither href nor render is used\n const useRenderProp = href || render;\n\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-overlay\",\n inset && \"pl-8\",\n dropdownVariants({ variant }),\n className,\n )}\n render={href ? content : render}\n {...props}\n >\n {useRenderProp ? undefined : children}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\n\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden transition-colors select-none focus:bg-kumo-tint focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-inherit\">\n <Checkbox checked={checked} />\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.GroupLabel>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.GroupLabel> & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n <DropdownMenuPrimitive.GroupLabel\n ref={ref}\n className={cn(\n \"px-2 py-1.5 text-base font-semibold\",\n inset && \"pl-8\",\n className,\n )}\n {...props}\n />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.GroupLabel.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-kumo-line\", className)}\n {...props}\n />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n {...props}\n />\n );\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {\n inset?: boolean;\n icon?: Icon | React.ReactNode;\n }\n>(({ className, children, inset, icon: IconComponent, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none\",\n \"data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-tint\",\n inset && \"pl-8\",\n className,\n )}\n {...props}\n >\n {IconComponent && renderIconNode(IconComponent)}\n {children}\n </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\nconst DropdownMenuRadioItemIndicator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItemIndicator>,\n React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.RadioItemIndicator\n >\n>(({ className, children, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItemIndicator\n ref={ref}\n className={cn(\"ml-auto\", className)}\n {...props}\n >\n {children ?? <Check className=\"h-4 w-4\" />}\n </DropdownMenuPrimitive.RadioItemIndicator>\n));\nDropdownMenuRadioItemIndicator.displayName = \"DropdownMenuRadioItemIndicator\";\n\n/**\n * Custom Trigger that converts a single child element to the `render` prop\n * to avoid nested button issues with base-ui's Menu.Trigger.\n */\nconst DropdownMenuTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ children, render, ...props }, ref) => {\n // If render prop is provided, use it directly\n // Otherwise, convert single child element to render prop\n const childElement = React.isValidElement(children) ? children : null;\n const effectiveRender = render ?? childElement;\n\n return (\n <DropdownMenuPrimitive.Trigger\n ref={ref}\n {...props}\n {...(effectiveRender && {\n render: effectiveRender as React.ReactElement<Record<string, unknown>>,\n })}\n >\n {/* Only pass children if not using as render prop */}\n {childElement ? undefined : children}\n </DropdownMenuPrimitive.Trigger>\n );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/**\n * DropdownMenu — accessible dropdown menu anchored to a trigger.\n *\n * Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`,\n * `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`,\n * `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.\n *\n * Built on `@base-ui/react/menu`.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n * <DropdownMenu.Trigger>\n * <Button>Actions</Button>\n * </DropdownMenu.Trigger>\n * <DropdownMenu.Content>\n * <DropdownMenu.Item>Edit</DropdownMenu.Item>\n * <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>\n * <DropdownMenu.Separator />\n * <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n * </DropdownMenu.Content>\n * </DropdownMenu>\n * ```\n *\n * @see https://base-ui.com/react/components/menu\n */\nexport const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {\n Trigger: DropdownMenuTrigger,\n Portal: DropdownMenuPrimitive.Portal,\n Sub: DropdownMenuPrimitive.SubmenuRoot,\n SubTrigger: DropdownMenuSubTrigger,\n SubContent: DropdownMenuContent,\n Content: DropdownMenuContent,\n Item: DropdownMenuItem,\n CheckboxItem: DropdownMenuCheckboxItem,\n RadioGroup: DropdownMenuPrimitive.RadioGroup,\n RadioItem: DropdownMenuRadioItem,\n RadioItemIndicator: DropdownMenuRadioItemIndicator,\n Label: DropdownMenuLabel,\n Separator: DropdownMenuSeparator,\n Shortcut: DropdownMenuShortcut,\n Group: DropdownMenuPrimitive.Group,\n});\n"],"names":["KUMO_DROPDOWN_VARIANTS","KUMO_DROPDOWN_DEFAULT_VARIANTS","dropdownVariants","variant","cn","DropdownMenuSubTrigger","React","className","inset","children","IconComponent","props","ref","jsxs","DropdownMenuPrimitive.SubmenuTrigger","jsx","CaretRight","DropdownMenuContent","sideOffset","DropdownMenuPrimitive.Portal","DropdownMenuPrimitive.Positioner","DropdownMenuPrimitive.Popup","renderIconNode","DropdownMenuItem","selected","render","href","LinkComponent","useLinkComponent","content","innerContent","Fragment","Check","isExternal","styles","e","useRenderProp","DropdownMenuPrimitive.Item","DropdownMenuCheckboxItem","checked","DropdownMenuPrimitive.CheckboxItem","Checkbox","DropdownMenuLabel","DropdownMenuPrimitive.GroupLabel","DropdownMenuSeparator","DropdownMenuPrimitive.Separator","DropdownMenuShortcut","DropdownMenuRadioItem","DropdownMenuPrimitive.RadioItem","DropdownMenuRadioItemIndicator","DropdownMenuPrimitive.RadioItemIndicator","DropdownMenuTrigger","childElement","effectiveRender","DropdownMenuPrimitive.Trigger","DropdownMenu","DropdownMenuPrimitive.Root","DropdownMenuPrimitive.SubmenuRoot","DropdownMenuPrimitive.RadioGroup","DropdownMenuPrimitive.Group"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as h, jsx as e } from "react/jsx-runtime";
|
|
3
3
|
import { c as a } from "./cn-Bhsu1vx2.js";
|
|
4
|
-
import { L as m } from "./label-
|
|
5
|
-
import { K as f, L as p, aI as u, aJ as x } from "./vendor-base-ui-
|
|
4
|
+
import { L as m } from "./label-Cjpb7l1F.js";
|
|
5
|
+
import { K as f, L as p, aI as u, aJ as x } from "./vendor-base-ui-B61LL9jT.js";
|
|
6
6
|
const g = {
|
|
7
7
|
// Field currently has no variant options but structure is ready for future additions
|
|
8
8
|
}, L = {};
|
|
@@ -68,4 +68,4 @@ export {
|
|
|
68
68
|
L as a,
|
|
69
69
|
d as f
|
|
70
70
|
};
|
|
71
|
-
//# sourceMappingURL=field-
|
|
71
|
+
//# sourceMappingURL=field-Bkh5pJay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-
|
|
1
|
+
{"version":3,"file":"field-Bkh5pJay.js","sources":["../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\n/** Field variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_FIELD_VARIANTS = {\n // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_FIELD_VARIANTS\nexport interface KumoFieldVariantsProps {\n /**\n * When true, places the control (checkbox/switch) before the label visually.\n * When false (default), places the label before the control.\n * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n */\n controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n controlFirst = false,\n}: KumoFieldVariantsProps = {}) {\n return cn(\n // Base styles - vertical layout (default)\n \"grid gap-2\",\n\n // Horizontal layout for checkbox and switch\n // Default: Grid auto-reverses in RTL (desired)\n \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n controlFirst && [\n \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n \"[&>label]:flex-1\",\n ],\n );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n | boolean\n | \"badInput\"\n | \"customError\"\n | \"patternMismatch\"\n | \"rangeOverflow\"\n | \"rangeUnderflow\"\n | \"stepMismatch\"\n | \"tooLong\"\n | \"tooShort\"\n | \"typeMismatch\"\n | \"valid\"\n | \"valueMissing\";\n\n/**\n * Field component props — wraps a form control with label, description, and error message.\n *\n * @example\n * ```tsx\n * <Field label=\"Email\" required>\n * <Input placeholder=\"you@example.com\" />\n * </Field>\n *\n * <Field label=\"Phone\" required={false} description=\"We'll only use this for account recovery.\">\n * <Input placeholder=\"+1 555-0000\" />\n * </Field>\n * ```\n */\nexport interface FieldProps extends KumoFieldVariantsProps {\n /** The form control element(s) to wrap (Input, Select, Checkbox, etc.). */\n children: ReactNode;\n /** The label content — can be a string or any React node. */\n label: ReactNode;\n /**\n * When explicitly `false`, shows gray \"(optional)\" text after the label.\n * When `true` or `undefined`, no indicator is shown.\n */\n required?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n labelTooltip?: ReactNode;\n /** Validation error with a message and a browser `ValidityState` match key. */\n error?: {\n message: ReactNode;\n match: FieldErrorMatch;\n };\n /** Helper text displayed below the control (hidden when `error` is present). */\n description?: ReactNode;\n /** When `true`, places the control before the label (for checkbox/switch layouts). */\n controlFirst?: boolean;\n}\n\n/**\n * Form field wrapper that provides a label, optional description, and error display\n * around any form control. Built on Base UI Field primitives.\n *\n * @example\n * ```tsx\n * <Field label=\"Username\">\n * <Input placeholder=\"Choose a username\" />\n * </Field>\n * ```\n */\nexport function Field({\n children,\n label,\n required,\n labelTooltip,\n error,\n description,\n controlFirst = false,\n}: FieldProps) {\n // Show \"(optional)\" when required is explicitly false\n const showOptional = required === false;\n\n return (\n <FieldBase.Root className={fieldVariants({ controlFirst })}>\n <FieldBase.Label className=\"text-base font-medium text-kumo-default\">\n <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n {label}\n </Label>\n </FieldBase.Label>\n {children}\n {error ? (\n <FieldBase.Error\n className={cn(\n \"text-sm text-kumo-danger\",\n // Span full width in horizontal layout\n \"col-span-full\",\n )}\n match={error.match}\n >\n {error.message}\n </FieldBase.Error>\n ) : (\n description && (\n <FieldBase.Description\n className={cn(\n \"text-sm leading-snug text-kumo-subtle\",\n // Span full width in horizontal layout\n \"col-span-full\",\n )}\n >\n {description}\n </FieldBase.Description>\n )\n )}\n </FieldBase.Root>\n );\n}\n"],"names":["KUMO_FIELD_VARIANTS","KUMO_FIELD_DEFAULT_VARIANTS","fieldVariants","controlFirst","cn","Field","children","label","required","labelTooltip","error","description","showOptional","jsxs","FieldBase.Root","jsx","FieldBase.Label","Label","FieldBase.Error","FieldBase.Description"],"mappings":";;;;;AAMO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAYpC,SAASC,EAAc;AAAA,EAC5B,cAAAC,IAAe;AACjB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA,IAIAD,KAAgB;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAqEO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAR,IAAe;AACjB,GAAe;AAEb,QAAMS,IAAeJ,MAAa;AAElC,SACE,gBAAAK,EAACC,GAAA,EAAe,WAAWZ,EAAc,EAAE,cAAAC,EAAA,CAAc,GACvD,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,2CACzB,UAAA,gBAAAD,EAACE,GAAA,EAAM,cAAAL,GAA4B,SAASH,GAAc,WAAS,IAChE,aACH,GACF;AAAA,IACCH;AAAA,IACAI,IACC,gBAAAK;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,WAAWd;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAEF,OAAOM,EAAM;AAAA,QAEZ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,IAGTC,KACE,gBAAAI;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWf;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGD,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGN;AAEJ;"}
|