@bolio-ui/core 3.0.0-alpha.0 → 3.0.0-alpha.1

package/esm/chunk-P245HSVB.js

@@ -0,0 +1,450 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses,
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Calendar/Calendar.tsx
+import React, { useEffect, useId, useMemo, useRef, useState } from "react";
+
+// core/Calendar/date-utils.ts
+var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+var addDays = (date, amount) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+var addMonths = (date, amount) => {
+  const target = new Date(date.getFullYear(), date.getMonth() + amount, 1);
+  const lastDay = new Date(
+    target.getFullYear(),
+    target.getMonth() + 1,
+    0
+  ).getDate();
+  return new Date(
+    target.getFullYear(),
+    target.getMonth(),
+    Math.min(date.getDate(), lastDay)
+  );
+};
+var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var clampDate = (date, min, max) => {
+  if (min && date < min) return min;
+  if (max && date > max) return max;
+  return date;
+};
+var pad = (value) => String(value).padStart(2, "0");
+var toISO = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+var fromISO = (text) => {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text.trim());
+  if (!match) return null;
+  const [year, month, day] = [+match[1], +match[2], +match[3]];
+  const date = new Date(year, month - 1, day);
+  const isReal = date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+  return isReal ? date : null;
+};
+var getISOWeek = (date) => {
+  const thursday = addDays(date, 3 - (date.getDay() + 6) % 7);
+  const firstThursday = new Date(thursday.getFullYear(), 0, 4);
+  const weekOne = addDays(firstThursday, 3 - (firstThursday.getDay() + 6) % 7);
+  return 1 + Math.round((thursday.getTime() - weekOne.getTime()) / 6048e5);
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Calendar/Calendar.module.css.bolio-css-module-source
+var Calendar_module_css_default = { "calendar": "Calendar-module_calendar__KlHdi", "months": "Calendar-module_months__vypnr", "header": "Calendar-module_header__d6VGN", "navSpacer": "Calendar-module_navSpacer__TcVxJ", "title": "Calendar-module_title__r0GX1", "table": "Calendar-module_table__q-H-S", "th": "Calendar-module_th__N9m4h", "td": "Calendar-module_td__YyI6L", "button": "Calendar-module_button__h3ZK-", "navButton": "Calendar-module_navButton__jmnwu", "dayButton": "Calendar-module_dayButton__-4eeR", "today": "Calendar-module_today__fx9vj", "selected": "Calendar-module_selected__kIUsl", "outside": "Calendar-module_outside__cSs5z", "inRange": "Calendar-module_inRange__0XK-F", "rangeStart": "Calendar-module_rangeStart__T1amH", "rangeEnd": "Calendar-module_rangeEnd__B55oD", "weekNumber": "Calendar-module_weekNumber__J1hkP" };
+
+// core/Calendar/Calendar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CalendarComponent = React.forwardRef(
+  ({
+    mode = "single",
+    value: customValue,
+    onChange,
+    maxSelected,
+    min,
+    max,
+    shouldDisableDate,
+    locale = "en-US",
+    weekStartsOn = 0,
+    showOutsideDays = false,
+    showWeekNumbers = false,
+    numberOfMonths = 1,
+    month: customMonth,
+    defaultMonth,
+    onMonthChange,
+    autoFocus = false,
+    previousLabel = "Previous month",
+    nextLabel = "Next month",
+    weekLabel = "Week",
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const headingId = useId();
+    const minDay = useMemo(() => min ? startOfDay(min) : void 0, [min]);
+    const maxDay = useMemo(() => max ? startOfDay(max) : void 0, [max]);
+    const [selfValue, setSelfValue] = useState(
+      mode === "multiple" ? [] : mode === "range" ? [null, null] : null
+    );
+    const current = customValue !== void 0 ? customValue : selfValue;
+    const isRange = mode === "range";
+    const [rangeStart, rangeEnd] = isRange ? current : [];
+    const selectedDays = isRange ? [rangeStart, rangeEnd].filter(Boolean) : mode === "multiple" ? current : current ? [current] : [];
+    const anchor = selectedDays[0] || null;
+    const [hovered, setHovered] = useState(null);
+    const [focused, setFocused] = useState(
+      () => clampDate(
+        startOfDay(anchor || customMonth || defaultMonth || /* @__PURE__ */ new Date()),
+        minDay,
+        maxDay
+      )
+    );
+    const count = Math.max(1, Math.floor(numberOfMonths));
+    const focusedIndex = focused.getFullYear() * 12 + focused.getMonth();
+    const [viewStart, setViewStart] = useState(focusedIndex);
+    let first = viewStart;
+    if (focusedIndex < first) first = focusedIndex;
+    else if (focusedIndex > first + count - 1)
+      first = focusedIndex - (count - 1);
+    if (first !== viewStart) setViewStart(first);
+    const gridRef = useRef(null);
+    const moveFocus = useRef(autoFocus);
+    const time = anchor ? anchor.getTime() : null;
+    useEffect(() => {
+      if (time === null) return;
+      setFocused(clampDate(startOfDay(new Date(time)), minDay, maxDay));
+    }, [time, minDay, maxDay]);
+    const monthTime = customMonth ? new Date(customMonth.getFullYear(), customMonth.getMonth(), 1).getTime() : null;
+    useEffect(() => {
+      if (monthTime === null) return;
+      const target = new Date(monthTime);
+      setViewStart(target.getFullYear() * 12 + target.getMonth());
+      setFocused(
+        (last) => last.getFullYear() === target.getFullYear() && last.getMonth() === target.getMonth() ? last : clampDate(target, minDay, maxDay)
+      );
+    }, [monthTime, minDay, maxDay]);
+    useEffect(() => {
+      var _a, _b;
+      if (!moveFocus.current) return;
+      moveFocus.current = false;
+      (_b = (_a = gridRef.current) == null ? void 0 : _a.querySelector(`[data-date="${toISO(focused)}"]`)) == null ? void 0 : _b.focus();
+    }, [focused]);
+    const formats = useMemo(
+      () => ({
+        month: new Intl.DateTimeFormat(locale, {
+          month: "long",
+          year: "numeric"
+        }),
+        day: new Intl.DateTimeFormat(locale, {
+          weekday: "long",
+          year: "numeric",
+          month: "long",
+          day: "numeric"
+        }),
+        short: new Intl.DateTimeFormat(locale, { weekday: "short" }),
+        long: new Intl.DateTimeFormat(locale, { weekday: "long" })
+      }),
+      [locale]
+    );
+    const weekdays = useMemo(
+      () => Array.from({ length: 7 }, (_, index) => {
+        const date = new Date(2023, 0, 1 + (weekStartsOn + index) % 7);
+        return {
+          short: formats.short.format(date),
+          long: formats.long.format(date)
+        };
+      }),
+      [formats, weekStartsOn]
+    );
+    const outsideDays = showOutsideDays && count === 1;
+    const monthViews = useMemo(
+      () => Array.from({ length: count }, (_, step) => {
+        const index = first + step;
+        const year = Math.floor(index / 12);
+        const month = index % 12;
+        const offset = (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7;
+        const total = new Date(year, month + 1, 0).getDate();
+        const cells = [
+          ...Array.from(
+            { length: offset },
+            (_2, cell) => outsideDays ? new Date(year, month, cell - offset + 1) : null
+          ),
+          ...Array.from(
+            { length: total },
+            (_2, cell) => new Date(year, month, cell + 1)
+          )
+        ];
+        while (cells.length % 7)
+          cells.push(
+            outsideDays ? new Date(year, month, cells.length - offset + 1) : null
+          );
+        const weeks = Array.from(
+          { length: cells.length / 7 },
+          (_2, row) => cells.slice(row * 7, row * 7 + 7)
+        );
+        return { year, month, date: new Date(year, month, 1), weeks };
+      }),
+      [first, count, weekStartsOn, outsideDays]
+    );
+    const firstMonth = monthViews[0];
+    const lastMonthView = monthViews[count - 1];
+    const lastMonth = useRef(first);
+    useEffect(() => {
+      if (first === lastMonth.current) return;
+      lastMonth.current = first;
+      if (onMonthChange) onMonthChange(firstMonth.date);
+    }, [first]);
+    const isDisabled = (date) => Boolean(
+      minDay && date < minDay || maxDay && date > maxDay || shouldDisableDate && shouldDisableDate(date)
+    );
+    const today = /* @__PURE__ */ new Date();
+    const previousDisabled = Boolean(
+      minDay && new Date(firstMonth.year, firstMonth.month, 0) < minDay
+    );
+    const nextDisabled = Boolean(
+      maxDay && new Date(lastMonthView.year, lastMonthView.month + 1, 1) > maxDay
+    );
+    const goToMonth = (step) => {
+      setViewStart(first + step);
+      setFocused(clampDate(addMonths(focused, step), minDay, maxDay));
+    };
+    const commit = (next) => {
+      if (customValue === void 0) setSelfValue(next);
+      if (onChange) onChange(next);
+    };
+    const select = (date) => {
+      if (isDisabled(date)) return;
+      setFocused(date);
+      if (isRange) {
+        const start = rangeStart;
+        const startsNew = !start || rangeEnd || date < start;
+        return commit(startsNew ? [date, null] : [start, date]);
+      }
+      if (mode === "multiple") {
+        const list = current;
+        if (list.some((item) => isSameDay(item, date)))
+          return commit(list.filter((item) => !isSameDay(item, date)));
+        if (maxSelected !== void 0 && list.length >= maxSelected) return;
+        return commit([...list, date].sort((a, b) => +a - +b));
+      }
+      commit(date);
+    };
+    const isSelected = (date) => selectedDays.some((item) => isSameDay(item, date));
+    const previewEnd = isRange ? rangeEnd || hovered : null;
+    const [low, high] = rangeStart && previewEnd ? rangeStart <= previewEnd ? [rangeStart, previewEnd] : [previewEnd, rangeStart] : [null, null];
+    const isInRange = (date) => Boolean(low && high && date > low && date < high);
+    const keyDownHandler = (event, date) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        return select(date);
+      }
+      const weekIndex = (date.getDay() - weekStartsOn + 7) % 7;
+      const targets = {
+        ArrowLeft: addDays(date, -1),
+        ArrowRight: addDays(date, 1),
+        ArrowUp: addDays(date, -7),
+        ArrowDown: addDays(date, 7),
+        Home: addDays(date, -weekIndex),
+        End: addDays(date, 6 - weekIndex),
+        PageUp: addMonths(date, event.shiftKey ? -12 : -1),
+        PageDown: addMonths(date, event.shiftKey ? 12 : 1)
+      };
+      if (!(event.key in targets)) return;
+      event.preventDefault();
+      moveFocus.current = true;
+      setFocused(clampDate(targets[event.key], minDay, maxDay));
+    };
+    const calendarStyle = {
+      "--calendar-font-size": SCALES.font(1),
+      "--calendar-text-color": theme.palette.foreground,
+      "--calendar-width": SCALES.width(1, "auto"),
+      "--calendar-height": SCALES.height(1, "auto"),
+      "--calendar-padding-top": SCALES.pt(0),
+      "--calendar-padding-right": SCALES.pr(0),
+      "--calendar-padding-bottom": SCALES.pb(0),
+      "--calendar-padding-left": SCALES.pl(0),
+      "--calendar-margin-top": SCALES.mt(0),
+      "--calendar-margin-right": SCALES.mr(0),
+      "--calendar-margin-bottom": SCALES.mb(0),
+      "--calendar-margin-left": SCALES.ml(0),
+      "--calendar-weekday-color": theme.palette.accents_5,
+      "--calendar-radius": theme.layout.radius,
+      "--calendar-hover-bg": theme.palette.accents_2,
+      "--calendar-focus-outline": theme.palette.primary,
+      "--calendar-disabled-color": theme.palette.accents_3,
+      "--calendar-today-border": theme.palette.accents_4,
+      "--calendar-selected-color": "#fff",
+      "--calendar-selected-bg": theme.palette.primary,
+      "--calendar-range-bg": `color-mix(in srgb, ${theme.palette.primary} 18%, transparent)`,
+      "--calendar-outside-color": theme.palette.accents_4,
+      "--calendar-week-color": theme.palette.accents_4,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: use_classes_default(Calendar_module_css_default.calendar, className),
+        style: calendarStyle,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: gridRef,
+            className: Calendar_module_css_default.months,
+            onMouseLeave: () => setHovered(null),
+            children: monthViews.map(({ month, date: monthDate, weeks }, step) => /* @__PURE__ */ jsxs("div", { className: Calendar_module_css_default.month, children: [
+              /* @__PURE__ */ jsxs("div", { className: Calendar_module_css_default.header, children: [
+                step === 0 ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: joinClasses(Calendar_module_css_default.button, Calendar_module_css_default.navButton),
+                    "aria-label": previousLabel,
+                    disabled: previousDisabled,
+                    onClick: () => goToMonth(-1),
+                    children: "\u2039"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: Calendar_module_css_default.navSpacer, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    id: `${headingId}-${step}`,
+                    className: Calendar_module_css_default.title,
+                    "aria-live": "polite",
+                    children: formats.month.format(monthDate)
+                  }
+                ),
+                step === count - 1 ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: joinClasses(Calendar_module_css_default.button, Calendar_module_css_default.navButton),
+                    "aria-label": nextLabel,
+                    disabled: nextDisabled,
+                    onClick: () => goToMonth(1),
+                    children: "\u203A"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: Calendar_module_css_default.navSpacer, "aria-hidden": "true" })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "table",
+                {
+                  role: "grid",
+                  "aria-labelledby": `${headingId}-${step}`,
+                  className: Calendar_module_css_default.table,
+                  "aria-multiselectable": mode !== "single" || void 0,
+                  children: [
+                    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { role: "row", children: [
+                      showWeekNumbers && /* @__PURE__ */ jsx("th", { role: "columnheader", className: Calendar_module_css_default.th }),
+                      weekdays.map((weekday) => /* @__PURE__ */ jsx(
+                        "th",
+                        {
+                          role: "columnheader",
+                          scope: "col",
+                          className: Calendar_module_css_default.th,
+                          children: /* @__PURE__ */ jsx("abbr", { title: weekday.long, children: weekday.short })
+                        },
+                        weekday.long
+                      ))
+                    ] }) }),
+                    /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, index) => {
+                      const reference = week.find(Boolean);
+                      const weekNumber = getISOWeek(
+                        addDays(reference, 3 - week.indexOf(reference))
+                      );
+                      return /* @__PURE__ */ jsxs("tr", { role: "row", children: [
+                        showWeekNumbers && /* @__PURE__ */ jsx(
+                          "th",
+                          {
+                            role: "rowheader",
+                            scope: "row",
+                            className: Calendar_module_css_default.weekNumber,
+                            "aria-label": `${weekLabel} ${weekNumber}`,
+                            children: weekNumber
+                          }
+                        ),
+                        week.map((date, cell) => {
+                          if (!date)
+                            return /* @__PURE__ */ jsx(
+                              "td",
+                              {
+                                role: "gridcell",
+                                className: Calendar_module_css_default.td,
+                                "aria-hidden": "true"
+                              },
+                              cell
+                            );
+                          const selectedDay = isSelected(date);
+                          const outside = date.getMonth() !== month;
+                          return /* @__PURE__ */ jsx(
+                            "td",
+                            {
+                              role: "gridcell",
+                              className: joinClasses(Calendar_module_css_default.td, {
+                                [Calendar_module_css_default.inRange]: isInRange(date),
+                                [Calendar_module_css_default.rangeStart]: Boolean(
+                                  low && isSameDay(date, low) && high
+                                ),
+                                [Calendar_module_css_default.rangeEnd]: Boolean(
+                                  high && isSameDay(date, high) && low
+                                )
+                              }),
+                              "aria-selected": selectedDay || isInRange(date),
+                              children: /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  "data-date": toISO(date),
+                                  "aria-label": formats.day.format(date),
+                                  "aria-current": isSameDay(date, today) ? "date" : void 0,
+                                  className: joinClasses(
+                                    Calendar_module_css_default.button,
+                                    Calendar_module_css_default.dayButton,
+                                    {
+                                      [Calendar_module_css_default.selected]: selectedDay,
+                                      [Calendar_module_css_default.today]: isSameDay(date, today),
+                                      [Calendar_module_css_default.outside]: outside
+                                    }
+                                  ),
+                                  tabIndex: isSameDay(date, focused) ? 0 : -1,
+                                  disabled: isDisabled(date),
+                                  onClick: () => select(date),
+                                  onMouseEnter: () => isRange && setHovered(date),
+                                  onKeyDown: (event) => keyDownHandler(event, date),
+                                  children: date.getDate()
+                                }
+                              )
+                            },
+                            cell
+                          );
+                        })
+                      ] }, index);
+                    }) })
+                  ]
+                }
+              )
+            ] }, step))
+          }
+        )
+      }
+    );
+  }
+);
+CalendarComponent.displayName = "BolioUICalendar";
+var Calendar = with_scale_default(CalendarComponent);
+var Calendar_default = Calendar;
+
+// core/Calendar/index.ts
+var Calendar_default2 = Calendar_default;
+
+export {
+  startOfDay,
+  toISO,
+  fromISO,
+  Calendar_default2 as Calendar_default
+};

package/esm/{chunk-6KMHJRCY.js → chunk-TDJGMSGT.js}

@@ -25,6 +25,7 @@ var CssBaseline = ({
         html {
           font-size: 16px;
           --bolioui-icons-background: ${theme.palette.background};
+          box-sizing: border-box;
         }
 
         body {

package/esm/{chunk-FQU5SKDF.js → chunk-WFGUAR7K.js}

@@ -4,12 +4,12 @@ import {
 import {
   log_warning_default
 } from "./chunk-AXYDJGTN.js";
-import {
-  use_latest_default
-} from "./chunk-ZRORQ2WH.js";
 import {
   use_current_state_default
 } from "./chunk-33BUV2RX.js";
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
 import {
   use_scale_default,
   with_scale_default
@@ -25,7 +25,7 @@ import {
 } from "./chunk-5KUROAEP.js";
 
 // core/Collapse/Collapse.tsx
-import React4, { useEffect as useEffect2 } from "react";
+import React4, { useEffect as useEffect2, useId } from "react";
 
 // core/Collapse/CollapseIcon.tsx
 import React from "react";
@@ -127,7 +127,7 @@ var CollapseContext = React3.createContext(defaultContext);
 var useCollapseContext = () => React3.useContext(CollapseContext);
 
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Collapse/Collapse.module.css.bolio-css-module-source
-var Collapse_module_css_default = { "view": "Collapse-module_view__wymqp", "title": "Collapse-module_title__ceZ1h", "subtitle": "Collapse-module_subtitle__wv5KS", "content": "Collapse-module_content__xZkpG" };
+var Collapse_module_css_default = { "view": "Collapse-module_view__wymqp", "title": "Collapse-module_title__ceZ1h", "trigger": "Collapse-module_trigger__0Q0YR", "label": "Collapse-module_label__tdCh3", "subtitle": "Collapse-module_subtitle__wv5KS", "content": "Collapse-module_content__xZkpG" };
 
 // core/Collapse/Collapse.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
@@ -137,6 +137,9 @@ var CollapseComponent = React4.forwardRef(
     title,
     subtitle,
     initialVisible = false,
+    visible: controlledVisible,
+    onVisibleChange,
+    disabled = false,
     shadow = false,
     className = "",
     index,
@@ -146,7 +149,12 @@ var CollapseComponent = React4.forwardRef(
     const theme = use_theme_default();
     const { SCALES } = use_scale_default();
     const { values, updateValues } = useCollapseContext();
-    const [visible, setVisible, visibleRef] = use_current_state_default(initialVisible);
+    const [selfVisible, setVisible, visibleRef] = use_current_state_default(initialVisible);
+    const isControlled = controlledVisible !== void 0;
+    const visible = isControlled ? controlledVisible : selfVisible;
+    const baseId = useId();
+    const triggerId = `${baseId}-trigger`;
+    const panelId = `${baseId}-panel`;
     if (!title) {
       log_warning_default('"title" is required.', "Collapse");
     }
@@ -156,15 +164,12 @@ var CollapseComponent = React4.forwardRef(
       setVisible(isActive);
     }, [index, setVisible, values]);
     const clickHandler = () => {
-      const next = !visibleRef.current;
-      setVisible(next);
+      if (disabled) return;
+      const next = !(isControlled ? controlledVisible : visibleRef.current);
+      if (!isControlled) setVisible(next);
+      if (onVisibleChange) onVisibleChange(next);
       if (updateValues) updateValues(index, next);
     };
-    const keyDownHandler = (event) => {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      clickHandler();
-    };
     const collapseStyle = shadow ? {
       boxShadow: theme.expressiveness.shadowSmall,
       border: "none",
@@ -195,27 +200,29 @@ var CollapseComponent = React4.forwardRef(
             "div",
             {
               className: Collapse_module_css_default.view,
-              role: "button",
-              tabIndex: 0,
-              "aria-expanded": visible,
               onClick: clickHandler,
-              onKeyDown: keyDownHandler,
               style: {
-                "--collapse-focus-color": theme.palette.primary
+                "--collapse-focus-color": theme.palette.primary,
+                cursor: disabled ? "not-allowed" : void 0
               },
               children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
+                /* @__PURE__ */ jsx3("h3", { className: Collapse_module_css_default.title, children: /* @__PURE__ */ jsxs(
+                  "button",
                   {
-                    className: Collapse_module_css_default.title,
+                    type: "button",
+                    id: triggerId,
+                    className: Collapse_module_css_default.trigger,
+                    "data-collapse-trigger": "",
+                    "aria-expanded": visible,
+                    "aria-controls": panelId,
+                    disabled,
                     style: { color: theme.palette.foreground },
                     children: [
-                      /* @__PURE__ */ jsx3("h3", { children: title }),
-                      " ",
+                      /* @__PURE__ */ jsx3("span", { className: Collapse_module_css_default.label, children: title }),
                       /* @__PURE__ */ jsx3(CollapseIcon_default, { active: visible })
                     ]
                   }
-                ),
+                ) }),
                 subtitle && /* @__PURE__ */ jsx3(
                   "div",
                   {
@@ -230,9 +237,10 @@ var CollapseComponent = React4.forwardRef(
           /* @__PURE__ */ jsx3(expand_default, { isExpanded: visible, children: /* @__PURE__ */ jsx3(
             "div",
             {
+              id: panelId,
               className: Collapse_module_css_default.content,
               style: {
-                padding: `${SCALES.pt(1.2)} ${SCALES.pr(0)} ${SCALES.pb(1.2)} ${SCALES.pl(0)}`
+                padding: `${SCALES.pt(0.6)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`
               },
               children
             }
@@ -259,6 +267,7 @@ function CollapseGroupComponent({
   accordion = true,
   className = "",
   style,
+  onKeyDown,
   ...props
 }) {
   const { SCALES } = use_scale_default();
@@ -290,6 +299,22 @@ function CollapseGroupComponent({
     () => setChildrenIndex(children, [Collapse_default]),
     [children]
   );
+  const keyDownHandler = (event) => {
+    if (onKeyDown) onKeyDown(event);
+    const { key } = event;
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(key)) return;
+    const triggers = Array.from(
+      event.currentTarget.querySelectorAll(
+        "[data-collapse-trigger]"
+      )
+    ).filter((trigger) => !trigger.disabled);
+    const current = triggers.indexOf(event.target);
+    if (current < 0) return;
+    event.preventDefault();
+    const last = triggers.length - 1;
+    const next = key === "Home" ? 0 : key === "End" ? last : key === "ArrowDown" ? (current + 1) % triggers.length : (current + last) % triggers.length;
+    triggers[next].focus();
+  };
   const groupStyle = {
     width: SCALES.width(1, "auto"),
     height: SCALES.height(1, "auto"),
@@ -297,7 +322,16 @@ function CollapseGroupComponent({
     margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
     ...style
   };
-  return /* @__PURE__ */ jsx4(CollapseContext.Provider, { value: initialValue, children: /* @__PURE__ */ jsx4("div", { className: classes, ...props, style: groupStyle, children: hasIndexChildren }) });
+  return /* @__PURE__ */ jsx4(CollapseContext.Provider, { value: initialValue, children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: classes,
+      ...props,
+      onKeyDown: keyDownHandler,
+      style: groupStyle,
+      children: hasIndexChildren
+    }
+  ) });
 }
 CollapseGroupComponent.displayName = "BolioUICollapseGroup";
 var CollapseGroup = with_scale_default(CollapseGroupComponent);