@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-Q73PTVNO.js

@@ -0,0 +1,208 @@
+import {
+  EN_US_SOCIAL_LOGIN_COPY
+} from "./chunk-INGPH3YQ.js";
+import {
+  Heading
+} from "./chunk-IJFAF3A7.js";
+import {
+  Separator
+} from "./chunk-Q4CAZ2TP.js";
+import {
+  Card,
+  CardContent
+} from "./chunk-N6CSXHFJ.js";
+import {
+  Button
+} from "./chunk-2EAAWOZ2.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/social-login-button/social-login-button.tsx
+import * as React from "react";
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GoogleIcon = () => {
+  const logo = uiInk(useTheme()).socialBrand.googleLogo;
+  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+        fill: logo.blue
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+        fill: logo.green
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+        fill: logo.yellow
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+        fill: logo.red
+      }
+    )
+  ] });
+};
+var FacebookIcon = () => {
+  const { logo } = uiInk(useTheme()).socialBrand.facebook;
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z",
+      fill: logo
+    }
+  ) });
+};
+var AppleIcon = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) });
+var GOOGLE_LOGO_WHEN_DISABLED_SX = {
+  "&.Mui-disabled .MuiButton-startIcon": {
+    filter: "brightness(0)",
+    opacity: (theme) => theme.palette.action.disabledOpacity
+  }
+};
+var FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX = {
+  "& .MuiButton-startIcon path": { fill: "currentColor" }
+};
+var brand = (pick) => (theme) => pick(uiInk(theme).socialBrand);
+var providerConfig = {
+  google: {
+    Icon: GoogleIcon,
+    variant: "outline",
+    color: "neutral",
+    sx: {
+      backgroundColor: brand((c) => c.google.background),
+      color: brand((c) => c.google.text),
+      borderColor: brand((c) => c.google.border),
+      "&:hover": {
+        backgroundColor: brand((c) => c.google.hover),
+        borderColor: brand((c) => c.google.hoverBorder)
+      },
+      ...GOOGLE_LOGO_WHEN_DISABLED_SX
+    }
+  },
+  facebook: {
+    Icon: FacebookIcon,
+    variant: "solid",
+    color: "primary",
+    sx: {
+      backgroundColor: brand((c) => c.facebook.background),
+      color: brand((c) => c.facebook.text),
+      "&:hover": {
+        backgroundColor: brand((c) => c.facebook.hover)
+      },
+      ...FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX
+    }
+  },
+  apple: {
+    Icon: AppleIcon,
+    variant: "solid",
+    color: "neutral",
+    sx: {
+      backgroundColor: brand((c) => c.apple.background),
+      color: brand((c) => c.apple.text),
+      "&:hover": {
+        backgroundColor: brand((c) => c.apple.hover)
+      }
+    }
+  }
+};
+var ICON_ONLY_SX = {
+  justifyContent: "center",
+  gap: 0,
+  "& .MuiButton-startIcon": { margin: 0 }
+};
+var SocialLoginButton = React.forwardRef(
+  ({
+    provider,
+    onClick,
+    loading = false,
+    disabled = false,
+    fullWidth = true,
+    copy = EN_US_SOCIAL_LOGIN_COPY,
+    dataTestId,
+    iconOnly = false
+  }, ref) => {
+    const config = providerConfig[provider];
+    const label = copy[provider];
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: config.variant,
+        color: config.color,
+        size: "lg",
+        loading,
+        disabled,
+        onClick,
+        icon: /* @__PURE__ */ jsx(config.Icon, {}),
+        dataTestId,
+        fullWidth,
+        ...iconOnly ? { "aria-label": label, title: label } : {},
+        sx: {
+          minHeight: 48,
+          justifyContent: "flex-start",
+          gap: 2,
+          ...iconOnly ? ICON_ONLY_SX : {},
+          ...config.sx
+        },
+        children: iconOnly ? void 0 : label
+      }
+    );
+  }
+);
+SocialLoginButton.displayName = "SocialLoginButton";
+function SocialLoginContainer({
+  children,
+  title = "Sign in to continue",
+  subtitle,
+  showDivider = false,
+  dividerText = "or",
+  maxWidth = 400
+}) {
+  return (
+    // `width: 100%` is what makes the cap below mean anything. Every caller
+    // centres this card in a flex column (`Container variant="centered"` does),
+    // and a flex item under `align-items: center` sizes to its CONTENT — so the
+    // card sat at whatever the longest label happened to need, ~267px, at every
+    // viewport from 390 to 1280. The 400 was never reached, which is why raising
+    // it would have changed nothing; the card had no width to cap.
+    /* @__PURE__ */ jsx(Card, { variant: "elevated", borderRadius: "lg", sx: { width: "100%", maxWidth }, children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 3, sx: { width: "100%" }, children: [
+      title && /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: title }),
+        subtitle && /* @__PURE__ */ jsx(Text, { color: "secondary", size: "sm", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx(Stack, { spacing: 2, children }),
+      showDivider && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx(Text, { color: "secondary", size: "sm", children: dividerText }),
+        /* @__PURE__ */ jsx(Separator, {})
+      ] })
+    ] }) }) })
+  );
+}
+
+export {
+  GoogleIcon,
+  FacebookIcon,
+  AppleIcon,
+  SocialLoginButton,
+  SocialLoginContainer
+};
+//# sourceMappingURL=chunk-Q73PTVNO.js.map

package/dist/chunk-QB3TVUPD.js

@@ -0,0 +1,127 @@
+import {
+  panelSx
+} from "./chunk-EJYJLVPK.js";
+import {
+  useSheetDrag,
+  useSheetOpen
+} from "./chunk-LYVTJLCF.js";
+import {
+  SheetBody
+} from "./chunk-3U3H3BZM.js";
+import {
+  SheetOverlay
+} from "./chunk-FPVYD7BO.js";
+import {
+  DEFAULT_DRAG_RESISTANCE,
+  DEFAULT_VELOCITY_THRESHOLD,
+  SPRING_CONFIG
+} from "./chunk-IM4DMKH4.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/data-display/Sheet/Sheet.tsx
+import Drawer from "@mui/material/Drawer/index.js";
+import SwipeableDrawer from "@mui/material/SwipeableDrawer/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  open: false,
+  position: "bottom",
+  variant: "default",
+  size: "md",
+  color: "primary",
+  glow: false,
+  pulse: false,
+  glass: false,
+  gradient: false,
+  loading: false,
+  disabled: false,
+  showOverlay: true,
+  closeOnOverlayClick: true,
+  closeOnEscape: true,
+  showCloseButton: true,
+  showHandle: true,
+  swipeable: true,
+  snapPoints: [0.25, 0.5, 0.75, 1],
+  defaultSnapPoint: 0.5,
+  minSnapPoint: 0,
+  maxSnapPoint: 1,
+  velocityThreshold: DEFAULT_VELOCITY_THRESHOLD,
+  dragResistance: DEFAULT_DRAG_RESISTANCE,
+  animationConfig: SPRING_CONFIG,
+  persistent: false,
+  fullHeight: false,
+  rounded: true,
+  elevation: 16,
+  dataTestId: "sheet"
+};
+var NoBackdrop = React.forwardRef(
+  (_props, _ref) => null
+);
+NoBackdrop.displayName = "NoBackdrop";
+var orientationOf = ({ position, variant }) => {
+  const isBottomSheet = position === "bottom";
+  const isTopSheet = position === "top";
+  return {
+    isBottomSheet,
+    isTopSheet,
+    isVerticalSheet: isBottomSheet || isTopSheet,
+    isDraggableVariant: variant === "draggable"
+  };
+};
+var Sheet = (props) => {
+  const resolved = withDefaults(props, DEFAULTS);
+  const { position, variant, showOverlay, swipeable, className, dataTestId } = resolved;
+  const theme = useTheme();
+  const orientation = orientationOf(resolved);
+  const testId = resolved["data-testid"] || dataTestId;
+  const { sheetRef, currentHeight, isDragging, isAnimating, handleDragStart, resetToDefaultSnapPoint } = useSheetDrag({ ...resolved, ...orientation });
+  const { isOpen, handleClose, handleOverlayClick, handleSwipeOpen } = useSheetOpen({
+    ...resolved,
+    ...orientation,
+    resetToDefaultSnapPoint
+  });
+  const drawerProps = {
+    anchor: position,
+    open: isOpen,
+    className,
+    onClose: handleClose,
+    PaperProps: {
+      ref: sheetRef,
+      sx: panelSx({ ...resolved, ...orientation, theme, currentHeight, isDragging, isAnimating })
+    },
+    ModalProps: { keepMounted: true, BackdropComponent: NoBackdrop }
+  };
+  const body = /* @__PURE__ */ jsx(
+    SheetBody,
+    {
+      ...resolved,
+      ...orientation,
+      testId,
+      isDragging,
+      onClose: handleClose,
+      onDragStart: handleDragStart
+    }
+  );
+  const isSwipeable = swipeable && !orientation.isDraggableVariant;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showOverlay && isOpen && /* @__PURE__ */ jsx(SheetOverlay, { open: isOpen, onClick: handleOverlayClick, blur: variant === "glass" }),
+    isSwipeable ? /* @__PURE__ */ jsx(
+      SwipeableDrawer,
+      {
+        ...drawerProps,
+        onOpen: handleSwipeOpen,
+        disableSwipeToOpen: false,
+        swipeAreaWidth: 20,
+        children: body
+      }
+    ) : /* @__PURE__ */ jsx(Drawer, { ...drawerProps, children: body })
+  ] });
+};
+
+export {
+  Sheet
+};
+//# sourceMappingURL=chunk-QB3TVUPD.js.map

package/dist/chunk-QEG3P5D4.js

@@ -0,0 +1,241 @@
+import {
+  GridMain
+} from "./chunk-57JLS55D.js";
+import {
+  FilterDialog,
+  GridFilterPanel
+} from "./chunk-AER4245J.js";
+import {
+  DataViewsEmpty
+} from "./chunk-CQPFSEJB.js";
+import {
+  InlineFilterControls
+} from "./chunk-HU7TX7RB.js";
+import {
+  GridHeaderRow
+} from "./chunk-KK57AHWS.js";
+import {
+  DataViewsPagination
+} from "./chunk-CRZXSZ5O.js";
+import {
+  toOverflowFields,
+  useFilterOverflow
+} from "./chunk-TQ6FPOPD.js";
+import {
+  resolveSelectionExtra
+} from "./chunk-KX75HM5U.js";
+import {
+  ScopeTabsSlot
+} from "./chunk-H5BEWPEY.js";
+import {
+  ShellToolbar
+} from "./chunk-35S6QI5G.js";
+import {
+  togglePillValues
+} from "./chunk-75LOTMSN.js";
+import {
+  DataViewsLayoutProvider,
+  useDataViewsLayout
+} from "./chunk-PMOEG36E.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-HXEBKOSM.js";
+import {
+  default as default2
+} from "./chunk-WEBEOBN5.js";
+
+// src/components/data-display/DataViews/data-views-grid-parts.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LayoutStateSync({
+  c
+}) {
+  const { layout } = useDataViewsLayout();
+  const stored = c.state.layout;
+  useEffect(() => {
+    if (stored !== layout) c.patch({ layout });
+  }, [layout, stored]);
+  return null;
+}
+function useGridShellFilters({
+  c,
+  inlineFilters,
+  fields,
+  rangeFields,
+  testIdPrefix,
+  alwaysShowSearch,
+  hasExport
+}) {
+  const { state } = c;
+  const [openControls, setOpenControls] = useState(0);
+  const split = useFilterOverflow(
+    toOverflowFields(fields, rangeFields),
+    state.pills,
+    c.ranges,
+    openControls > 0,
+    hasExport
+  );
+  const showInline = inlineFilters;
+  const useModal = false;
+  const inlineVisible = showInline && (alwaysShowSearch || fields.length > 0 || rangeFields.length > 0 || state.search !== "");
+  const filterProps = {
+    testIdPrefix,
+    search: state.search,
+    fields,
+    rangeFields,
+    pills: state.pills,
+    ranges: c.ranges,
+    onSearchChange: (value) => c.patch({ search: value }),
+    // Updater, never the render's `state` — see {@link DataViewStatePatch}.
+    onTogglePill: (fieldId, value, checked) => c.patch(({ pills }) => ({ pills: { ...pills, [fieldId]: togglePillValues(pills[fieldId], value, checked) } })),
+    onChangeRange: (fieldId, range) => c.patch({ ranges: { ...c.ranges, [fieldId]: range } }),
+    onClearField: (fieldId) => c.patch({ pills: { ...state.pills, [fieldId]: [] } }),
+    onClearAll: () => c.patch({ search: "", pills: {}, ranges: {} })
+  };
+  return {
+    showInline,
+    useModal,
+    inlineVisible,
+    filterProps,
+    split,
+    onControlOpenChange: (open) => setOpenControls((count) => Math.max(0, count + (open ? 1 : -1)))
+  };
+}
+function ShellStack({
+  props,
+  filters
+}) {
+  const copy = useDataViewsCopy();
+  const { c, testIdPrefix, dataTestId, scopes = [], emptyState, inlineFilters = false } = props;
+  const { showInline, useModal, inlineVisible, filterProps, split, onControlOpenChange } = filters;
+  const body = /* @__PURE__ */ jsx(
+    DataViewsEmpty,
+    {
+      filtered: c.activeFilterCount > 0 || c.state.search !== "",
+      onClearFilters: () => c.patch({ search: "", pills: {}, ranges: {} }),
+      emptyState,
+      testIdPrefix
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    TableFilter,
+    {
+      copy: copy.tableFilter,
+      open: c.filterOpen,
+      onOpenChange: c.setFilterOpen,
+      hasActiveFilters: c.activeFilterCount > 0,
+      children: /* @__PURE__ */ jsxs(default2, { spacing: 0, "data-testid": dataTestId ? `${dataTestId}-container` : void 0, children: [
+        /* @__PURE__ */ jsx(GridHeaderRow, { title: props.title, headerActions: props.headerActions, testIdPrefix }),
+        /* @__PURE__ */ jsx(
+          ShellToolbar,
+          {
+            c,
+            rows: props.rows,
+            sortKinds: props.sortKinds,
+            displayView: props.displayView,
+            exportConfig: props.exportConfig,
+            filterControls: inlineVisible ? /* @__PURE__ */ jsx(
+              InlineFilterControls,
+              {
+                ...filterProps,
+                split,
+                activeFilterCount: c.activeFilterCount,
+                onControlOpenChange
+              }
+            ) : void 0,
+            barRef: split.barRef,
+            testIdPrefix,
+            rowActions: props.rowActions,
+            bulkActions: props.bulkActions,
+            selectionExtra: resolveSelectionExtra(props),
+            toolbarRightSlot: props.toolbarRightSlot,
+            compactControls: showInline && split.compactControls,
+            counterHidden: showInline && split.counterHidden,
+            showInline
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ScopeTabsSlot,
+          {
+            scopes,
+            scopeFieldId: props.scopeFieldId,
+            board: props.board,
+            value: c.scope,
+            onChange: c.setScope,
+            counts: c.scopeCounts,
+            testIdPrefix
+          }
+        ),
+        /* @__PURE__ */ jsxs(TableFilter.Layout, { children: [
+          /* @__PURE__ */ jsxs(TableFilter.Main, { children: [
+            /* @__PURE__ */ jsx(
+              GridMain,
+              {
+                c,
+                getRowId: props.getRowId,
+                renderCard: props.renderCard,
+                renderListRow: props.renderListRow,
+                listGroup: props.listGroup,
+                board: props.board,
+                rowDetail: props.rowDetail,
+                dataTestId,
+                testIdPrefix,
+                emptyState: body
+              }
+            ),
+            /* @__PURE__ */ jsx(DataViewsPagination, { c, testIdPrefix })
+          ] }),
+          inlineFilters ? null : /* @__PURE__ */ jsx(GridFilterPanel, { ...filterProps })
+        ] }),
+        useModal && /* @__PURE__ */ jsx(FilterDialog, { open: c.filterOpen, onClose: () => c.setFilterOpen(false), ...filterProps })
+      ] })
+    }
+  );
+}
+function GridShell(props) {
+  const {
+    c,
+    fields,
+    rangeFields,
+    testIdPrefix,
+    renderCard,
+    renderListRow,
+    board,
+    defaultLayout,
+    ignoreStoredLayout,
+    inlineFilters = false,
+    alwaysShowSearch = false
+  } = props;
+  const filters = useGridShellFilters({
+    c,
+    inlineFilters,
+    fields,
+    rangeFields,
+    testIdPrefix,
+    alwaysShowSearch,
+    hasExport: props.exportConfig !== void 0
+  });
+  return /* @__PURE__ */ jsxs(
+    DataViewsLayoutProvider,
+    {
+      canUseCards: Boolean(renderCard),
+      canUseList: Boolean(renderListRow),
+      canUseBoard: Boolean(board && renderCard),
+      defaultLayout,
+      ignoreStoredLayout,
+      viewLayout: c.state.layout,
+      children: [
+        /* @__PURE__ */ jsx(LayoutStateSync, { c }),
+        /* @__PURE__ */ jsx(ShellStack, { props, filters })
+      ]
+    }
+  );
+}
+
+export {
+  GridShell
+};
+//# sourceMappingURL=chunk-QEG3P5D4.js.map