@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-YMWONFSI.js

@@ -0,0 +1,170 @@
+import { Count } from './chunk-BHHIIK3M.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Tabs-VLICJFVB.css';
+import React, { useRef, useLayoutEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function tabStop(items, selected) {
+  if (selected >= 0 && !items[selected]?.disabled) return selected;
+  return items.findIndex((item) => !item.disabled);
+}
+function useRoving(count, select) {
+  const buttons = useRef([]);
+  function step(from, by) {
+    for (let i = 0; i < count; i += 1) {
+      const at = ((from + by * i) % count + count) % count;
+      const el = buttons.current[at];
+      if (el && !el.disabled) return at;
+    }
+    return null;
+  }
+  function moveTo(key, at, vertical) {
+    if (count === 0) return null;
+    switch (key) {
+      case "ArrowRight":
+        return step(at + 1, 1);
+      case "ArrowLeft":
+        return step(at - 1, -1);
+      case "ArrowDown":
+        return vertical ? step(at + 1, 1) : null;
+      case "ArrowUp":
+        return vertical ? step(at - 1, -1) : null;
+      case "Home":
+        return step(0, 1);
+      case "End":
+        return step(count - 1, -1);
+      default:
+        return null;
+    }
+  }
+  const onKeyDown = (event, vertical) => {
+    const at = buttons.current.findIndex((button) => button === document.activeElement);
+    if (at < 0) return;
+    const next = moveTo(event.key, at, vertical);
+    if (next === null) return;
+    event.preventDefault();
+    buttons.current[next]?.focus();
+    select?.(next);
+  };
+  return { buttons, onKeyDown };
+}
+function tabId(panelId, value) {
+  return `${panelId}-tab-${value}`;
+}
+function reveal(nav) {
+  const active = nav.querySelector(".crewlet-tabs__tab.is-active");
+  if (!active) return;
+  const row = nav.getBoundingClientRect();
+  const tab = active.getBoundingClientRect();
+  if (tab.left < row.left) nav.scrollLeft -= row.left - tab.left;
+  else if (tab.right > row.right) nav.scrollLeft += tab.right - row.right;
+}
+function Tabs({
+  items,
+  variant = "pill",
+  size = "md",
+  ariaLabel,
+  className = "",
+  value,
+  onValueChange,
+  panelId,
+  renderItem
+}) {
+  const navRef = useRef(null);
+  const { buttons, onKeyDown } = useRoving(items.length, null);
+  useLayoutEffect(() => {
+    if (variant !== "underline") return;
+    const nav = navRef.current;
+    if (!nav) return;
+    const update = () => {
+      const active = nav.querySelector(".crewlet-tabs__tab.is-active");
+      if (!active) {
+        nav.style.setProperty("--crewlet-tabs-slider-width", "0px");
+        return;
+      }
+      const navRect = nav.getBoundingClientRect();
+      const activeRect = active.getBoundingClientRect();
+      const left = activeRect.left - navRect.left + nav.scrollLeft;
+      nav.style.setProperty("--crewlet-tabs-slider-left", `${left}px`);
+      nav.style.setProperty("--crewlet-tabs-slider-width", `${activeRect.width}px`);
+    };
+    update();
+    reveal(nav);
+    const mutation = new MutationObserver(update);
+    nav.querySelectorAll(".crewlet-tabs__tab").forEach((tab) => {
+      mutation.observe(tab, { attributes: true, attributeFilter: ["class"] });
+    });
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(update) : null;
+    resize?.observe(nav);
+    return () => {
+      mutation.disconnect();
+      resize?.disconnect();
+    };
+  }, [variant, value, items]);
+  const rootClass = cx("crewlet-tabs", `crewlet-tabs--${variant}`, `crewlet-tabs--${size}`, className);
+  const selected = tabStop(
+    items,
+    Math.max(
+      0,
+      items.findIndex((item) => item.value === value)
+    )
+  );
+  const rows = items.map((item, index) => {
+    const isActive = value !== void 0 && value === item.value;
+    const tabClassName = cx(
+      "crewlet-tabs__tab",
+      isActive && "is-active",
+      item.disabled && "is-disabled"
+    );
+    const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+      item.icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__icon", children: item.icon }) : null,
+      /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__label", children: item.label }),
+      item.count != null ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null
+    ] });
+    const onSelect = () => {
+      if (item.disabled) return;
+      onValueChange?.(item.value);
+    };
+    if (renderItem) {
+      return /* @__PURE__ */ jsx(React.Fragment, { children: renderItem({ item, className: tabClassName, isActive, onSelect, children }) }, item.value);
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (el) => {
+          buttons.current[index] = el;
+        },
+        type: "button",
+        role: "tab",
+        id: panelId ? tabId(panelId, item.value) : void 0,
+        "aria-selected": isActive,
+        "aria-controls": panelId,
+        tabIndex: index === selected ? 0 : -1,
+        disabled: item.disabled,
+        className: tabClassName,
+        onClick: onSelect,
+        onKeyDown: (event) => onKeyDown(event, false),
+        children
+      },
+      item.value
+    );
+  });
+  if (renderItem) {
+    return /* @__PURE__ */ jsx("nav", { ref: navRef, className: rootClass, "aria-label": ariaLabel, children: rows });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: navRef, className: rootClass, "aria-label": ariaLabel, role: "tablist", children: rows });
+}
+function TabPanel({ id, value, children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id,
+      "aria-labelledby": tabId(id, value),
+      className: cx("crewlet-tab-panel", className),
+      children
+    }
+  );
+}
+
+export { TabPanel, Tabs, tabId, tabStop, useRoving };

package/dist/chunk-ZCR6YGQ4.js

@@ -0,0 +1 @@
+

package/dist/generated/index.d.ts

@@ -0,0 +1,83 @@
+export * from '../Accordion/index.js';
+export * from '../AddPill/index.js';
+export * from '../Announcer/index.js';
+export * from '../AppShell/index.js';
+export * from '../Avatar/index.js';
+export * from '../BrandLockup/index.js';
+export * from '../Button/index.js';
+export * from '../CalendarGrid/index.js';
+export * from '../Callout/index.js';
+export * from '../Canvas/index.js';
+export * from '../Card/index.js';
+export * from '../Charts/index.js';
+export * from '../Checkbox/index.js';
+export * from '../CodeBlock/index.js';
+export * from '../Combobox/index.js';
+export * from '../CommandPalette/index.js';
+export * from '../Container/index.js';
+export * from '../Copyable/index.js';
+export * from '../Count/index.js';
+export * from '../DataTable/index.js';
+export * from '../DataView/index.js';
+export * from '../DateTimePicker/index.js';
+export * from '../DescriptionList/index.js';
+export * from '../DiffList/index.js';
+export * from '../Disclosure/index.js';
+export * from '../EmptyState/index.js';
+export * from '../EmptyValue/index.js';
+export * from '../EntityChip/index.js';
+export * from '../ErrorBoundary/index.js';
+export * from '../Eyebrow/index.js';
+export * from '../FilterChip/index.js';
+export * from '../Fullscreen/index.js';
+export * from '../IconButton/index.js';
+export * from '../ImageUpload/index.js';
+export * from '../InlineCode/index.js';
+export * from '../Input/index.js';
+export * from '../Kbd/index.js';
+export * from '../Layer/index.js';
+export * from '../Layout/index.js';
+export * from '../Link/index.js';
+export * from '../List/index.js';
+export * from '../ListInput/index.js';
+export * from '../Listbox/index.js';
+export * from '../Menu/index.js';
+export * from '../Meter/index.js';
+export * from '../Modal/index.js';
+export * from '../NewItemsNotice/index.js';
+export * from '../OrgLabel/index.js';
+export * from '../OrgNode/index.js';
+export * from '../OrgTable/index.js';
+export * from '../PageHeader/index.js';
+export * from '../Popover/index.js';
+export * from '../PricingCard/index.js';
+export * from '../Prose/index.js';
+export * from '../RelativeTime/index.js';
+export * from '../SearchTrigger/index.js';
+export * from '../Section/index.js';
+export * from '../SegmentedControl/index.js';
+export * from '../Select/index.js';
+export * from '../Shortcut/index.js';
+export * from '../SidebarNav/index.js';
+export * from '../Skeleton/index.js';
+export * from '../StatCard/index.js';
+export * from '../StatGroup/index.js';
+export * from '../StatusDot/index.js';
+export * from '../Switch/index.js';
+export * from '../Table/index.js';
+export * from '../Tabs/index.js';
+export * from '../Tag/index.js';
+export * from '../TagGroup/index.js';
+export * from '../TagsInput/index.js';
+export * from '../Text/index.js';
+export * from '../ThemeSwitcher/index.js';
+export * from '../TimeWindowPicker/index.js';
+export * from '../Timeline/index.js';
+export * from '../Toaster/index.js';
+export * from '../Toolbar/index.js';
+export * from '../Tooltip/index.js';
+export * from '../Tree/index.js';
+export * from '../TreeCanvas/index.js';
+export * from '../TreeGrid/index.js';
+export * from '../VisuallyHidden/index.js';
+export * from '../utils/index.js';

package/dist/generated/index.js

@@ -0,0 +1,91 @@
+import '../chunk-ZCR6YGQ4.js';
+export { TreeCanvas } from '../chunk-7HPRF5XN.js';
+import '../chunk-IJ7QXNIJ.js';
+export { Text } from '../chunk-23DHIMJA.js';
+export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from '../chunk-GUIF6Q6N.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-G2QFRTJ2.js';
+export { ToastProvider, Toaster, useToast } from '../chunk-NPZY6YYL.js';
+export { Timeline, TimelineItem } from '../chunk-O67VF5MS.js';
+export { Tooltip } from '../chunk-XV6WRMBC.js';
+export { StatGroup } from '../chunk-QNCVHRZL.js';
+export { Switch } from '../chunk-EV6IMYJ6.js';
+export { Table } from '../chunk-FEFTGVMF.js';
+export { TagGroup } from '../chunk-V2XMNLMS.js';
+export { TagsInput } from '../chunk-RDGD7Z7I.js';
+export { SearchTrigger } from '../chunk-Q4ZPPART.js';
+export { Section } from '../chunk-A2UXBCLO.js';
+export { SegmentedControl } from '../chunk-ARMRX2YV.js';
+export { TabPanel, Tabs, tabId } from '../chunk-YMWONFSI.js';
+export { Select } from '../chunk-5IMACPJS.js';
+export { matchesShortcut, useShortcut } from '../chunk-F6OE5FH3.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-3EYF6HKB.js';
+export { Skeleton } from '../chunk-W5J7R5EB.js';
+export { StatCard } from '../chunk-22O7LAW2.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-IAJLHVUA.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-H4FBTAYS.js';
+export { TreeGrid } from '../chunk-5SDBMKUO.js';
+export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from '../chunk-NTRZGNEX.js';
+export { OrgLabel } from '../chunk-5C5YMZQU.js';
+export { PricingCard } from '../chunk-KLJCCMF3.js';
+export { Tag } from '../chunk-S2XHHEW4.js';
+export { StatusDot } from '../chunk-PZSWF74H.js';
+export { Prose } from '../chunk-JCSA3XVH.js';
+export { List, ListItem } from '../chunk-HZ5XZNPS.js';
+export { Link } from '../chunk-2ZQMA2WB.js';
+export { ListInput } from '../chunk-EN6K2IFA.js';
+export { Meter, meterTone } from '../chunk-LGCPQIOZ.js';
+export { NewItemsNotice } from '../chunk-YLYOWZ4V.js';
+export { useFullscreen } from '../chunk-XDTYBF2F.js';
+export { ImageUpload } from '../chunk-5WS6L6FA.js';
+export { InlineCode } from '../chunk-NN62JQLR.js';
+export { AutoGrid, Inline, Spacer, Stack } from '../chunk-W4ENKCXJ.js';
+export { DIFF_LIST_LABELS, DiffList } from '../chunk-HQNHV7D6.js';
+export { Disclosure } from '../chunk-LWKJQTOM.js';
+export { EmptyState } from '../chunk-RA2ULG6H.js';
+export { EntityChip } from '../chunk-QYOFACSP.js';
+export { ErrorBoundary } from '../chunk-7EM5T4ME.js';
+export { Eyebrow } from '../chunk-RK4XPHVG.js';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-EPOOQZYA.js';
+export { CommandPalette } from '../chunk-ESCO4XYW.js';
+export { Container } from '../chunk-QVE4GJAT.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-GHYY2WPF.js';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-5EKIWVOR.js';
+export { PageHeader } from '../chunk-HOXGBLEY.js';
+export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-3CZ7XAVY.js';
+export { Kbd, isApplePlatform, keyGlyph } from '../chunk-SFZOKW2G.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-EHMQQHYR.js';
+export { Menu } from '../chunk-FBZAKNSX.js';
+export { EMPTY_VALUE, EmptyValue } from '../chunk-EUCC37WY.js';
+export { ConfirmModal, Modal } from '../chunk-2EOKFKHX.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-UG46QBLT.js';
+export { Popover } from '../chunk-DD5BBGBE.js';
+export { DescriptionList, DescriptionListItem } from '../chunk-XN4JBAN3.js';
+export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from '../chunk-GXQ3B46I.js';
+export { Callout } from '../chunk-3ZP55QZE.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-CMEE37QJ.js';
+import '../chunk-53DVJCVW.js';
+export { Card } from '../chunk-T7FKOJKW.js';
+export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
+export { ActivityStrip, BarList, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, TimeSeries, dataColor } from '../chunk-F4PJZ4ED.js';
+export { Checkbox } from '../chunk-2PRH365R.js';
+export { CodeBlock } from '../chunk-HTDFCRJZ.js';
+export { CopyButton, Copyable } from '../chunk-D3OADIM6.js';
+export { useClipboard } from '../chunk-V663QU4R.js';
+export { Combobox } from '../chunk-UOGSZKLT.js';
+export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from '../chunk-GTOUGQQK.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-O6232G37.js';
+export { Accordion, AccordionItem } from '../chunk-7FZ53WDJ.js';
+export { DisclosureAnatomy } from '../chunk-5KPQ6D7N.js';
+export { Count } from '../chunk-BHHIIK3M.js';
+export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
+export { ADD_PILL_MS, AddPill } from '../chunk-S4GZWSKR.js';
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-MNAXYY3R.js';
+export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-7RPGY3JE.js';
+export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-ITHXJHBB.js';
+export { IconButton } from '../chunk-F27EPQ7D.js';
+export { Announcer, announce, useAnnouncer } from '../chunk-RSAQOKH3.js';
+export { AVATAR_SIZES, Avatar, avatarPixels, avatarSquareCorner, avatarTint, getInitials } from '../chunk-PNFASD6F.js';
+export { BrandLockup } from '../chunk-WNI2WSJF.js';
+export { Button, ButtonLink } from '../chunk-BZYDZBAN.js';
+export { VisuallyHidden } from '../chunk-BZFWDIV6.js';
+export { cx } from '../chunk-ODEQTPFM.js';