@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-MBF6DLMA.js

@@ -0,0 +1,156 @@
+import {
+  PillControl
+} from "./chunk-WSVVWL3G.js";
+import {
+  PanelRangeField
+} from "./chunk-LGCMG7AT.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-2UXQV7JY.js";
+import {
+  StackedModal
+} from "./chunk-UFJ7DSIL.js";
+import {
+  StackedModalContent
+} from "./chunk-SWELYVW5.js";
+
+// src/components/data-display/DataViews/data-views-filter-panel.tsx
+import { Box, Link } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PillField({
+  field,
+  selected,
+  testIdPrefix,
+  onTogglePill,
+  onClearField
+}) {
+  const testId = `${testIdPrefix}-filter-${field.id}`;
+  if (field.searchEnabled || field.control === "multiselect" || field.control === "category") {
+    return /* @__PURE__ */ jsx(
+      PillControl,
+      {
+        fieldId: field.id,
+        pill: field,
+        selected,
+        onTogglePill,
+        onClearField,
+        testIdPrefix,
+        layout: "stacked"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TableFilter.CheckboxField,
+    {
+      label: field.label,
+      options: field.options,
+      selected: new Set(selected),
+      onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+      testId
+    }
+  );
+}
+function FilterControls({
+  testIdPrefix,
+  search,
+  fields,
+  rangeFields,
+  pills,
+  ranges,
+  onSearchChange,
+  onTogglePill,
+  onChangeRange,
+  onClearField
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TableFilter.Keyword,
+      {
+        value: search,
+        onChange: onSearchChange,
+        label: copy.search.allColumnsLabel,
+        placeholder: copy.search.keywordPlaceholder,
+        testId: `${testIdPrefix}-search-all`
+      }
+    ),
+    (fields.length > 0 || rangeFields.length > 0) && /* @__PURE__ */ jsxs(TableFilter.Section, { title: copy.filters.panelTitle, children: [
+      fields.map((field) => /* @__PURE__ */ jsx(
+        PillField,
+        {
+          field,
+          selected: pills[field.id] ?? [],
+          testIdPrefix,
+          onTogglePill,
+          onClearField
+        },
+        field.id
+      )),
+      rangeFields.map((field) => /* @__PURE__ */ jsx(
+        PanelRangeField,
+        {
+          field,
+          value: ranges[field.id] ?? {},
+          onChange: (range) => onChangeRange(field.id, range),
+          testId: `${testIdPrefix}-range-${field.id}`
+        },
+        field.id
+      ))
+    ] })
+  ] });
+}
+function GridFilterPanel(props) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    TableFilter.Panel,
+    {
+      onClearAll: props.onClearAll,
+      clearTestId: `${props.testIdPrefix}-clear-filters`,
+      ariaLabel: copy.filters.panelTitle,
+      children: /* @__PURE__ */ jsx(FilterControls, { ...props })
+    }
+  );
+}
+function FilterDialog({
+  open,
+  onClose,
+  ...props
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    StackedModal,
+    {
+      open,
+      onClose,
+      navigationTitle: copy.filters.panelTitle,
+      backLabel: copy.nav.goBack,
+      modalId: `${props.testIdPrefix}-filters`,
+      maxWidth: "xs",
+      dataTestId: `${props.testIdPrefix}-filter-dialog`,
+      children: /* @__PURE__ */ jsx(StackedModalContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            component: "button",
+            type: "button",
+            underline: "hover",
+            onClick: props.onClearAll,
+            "data-testid": `${props.testIdPrefix}-clear-filters`,
+            sx: { fontSize: "0.75rem", color: "text.secondary" },
+            children: copy.filters.clearAllFilters
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FilterControls, { ...props })
+      ] }) })
+    }
+  );
+}
+
+export {
+  GridFilterPanel,
+  FilterDialog
+};
+//# sourceMappingURL=chunk-MBF6DLMA.js.map

package/dist/chunk-MBF6DLMA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-filter-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Link } from \"@mui/material\";\n\nimport { StackedModal, StackedModalContent } from \"../../feedback/StackedModal\";\nimport { TableFilter } from \"../../layout/TableFilter\";\n\nimport { PillControl } from \"./data-views-category-pill\";\nimport { PanelRangeField } from \"./data-views-range-pill\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport type {\n  FilterFieldConfig,\n  RangeFieldConfig,\n  RangeValue,\n} from \"./data-views-types\";\n\n/* ── Filter panel ────────────────────────────────────────────────────────── */\n\nexport interface GridFilterPanelProps<T extends Record<string, unknown>> {\n  testIdPrefix: string;\n  search: string;\n  fields: FilterFieldConfig<T>[];\n  rangeFields: RangeFieldConfig<T>[];\n  pills: Record<string, string[]>;\n  ranges: Record<string, RangeValue>;\n  onSearchChange: (value: string) => void;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onChangeRange: (fieldId: string, range: RangeValue) => void;\n  onClearField: (fieldId: string) => void;\n  onClearAll: () => void;\n}\n\n/** One pill field: a compact multi-select for long lists, else a checkbox list. */\nfunction PillField<T extends Record<string, unknown>>({\n  field,\n  selected,\n  testIdPrefix,\n  onTogglePill,\n  onClearField,\n}: {\n  field: FilterFieldConfig<T>;\n  selected: string[];\n  testIdPrefix: string;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onClearField: (fieldId: string) => void;\n}): React.JSX.Element {\n  const testId = `${testIdPrefix}-filter-${field.id}`;\n  // `searchEnabled` forces the searchable multi-select; a plain `multiselect`\n  // keeps the auto \"search only when the list is long\" rule. `category` is the\n  // hierarchical tree — see PillControl.\n  if (field.searchEnabled || field.control === \"multiselect\" || field.control === \"category\") {\n    return (\n      <PillControl\n        fieldId={field.id}\n        pill={field}\n        selected={selected}\n        onTogglePill={onTogglePill}\n        onClearField={onClearField}\n        testIdPrefix={testIdPrefix}\n        layout=\"stacked\"\n      />\n    );\n  }\n  return (\n    <TableFilter.CheckboxField\n      label={field.label}\n      options={field.options}\n      selected={new Set(selected)}\n      onToggle={(value, checked) => onTogglePill(field.id, value, checked)}\n      testId={testId}\n    />\n  );\n}\n\n/** The filter controls (keyword + pill facets + numeric ranges), surface-agnostic. */\nfunction FilterControls<T extends Record<string, unknown>>({\n  testIdPrefix,\n  search,\n  fields,\n  rangeFields,\n  pills,\n  ranges,\n  onSearchChange,\n  onTogglePill,\n  onChangeRange,\n  onClearField,\n}: Omit<GridFilterPanelProps<T>, \"onClearAll\">): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <>\n      <TableFilter.Keyword\n        value={search}\n        onChange={onSearchChange}\n        label={copy.search.allColumnsLabel}\n        placeholder={copy.search.keywordPlaceholder}\n        testId={`${testIdPrefix}-search-all`}\n      />\n      {(fields.length > 0 || rangeFields.length > 0) && (\n        <TableFilter.Section title={copy.filters.panelTitle}>\n          {fields.map((field) => (\n            <PillField\n              key={field.id}\n              field={field}\n              selected={pills[field.id] ?? []}\n              testIdPrefix={testIdPrefix}\n              onTogglePill={onTogglePill}\n              onClearField={onClearField}\n            />\n          ))}\n          {rangeFields.map((field) => (\n            <PanelRangeField\n              key={field.id}\n              field={field}\n              value={ranges[field.id] ?? {}}\n              onChange={(range) => onChangeRange(field.id, range)}\n              testId={`${testIdPrefix}-range-${field.id}`}\n            />\n          ))}\n        </TableFilter.Section>\n      )}\n    </>\n  );\n}\n\n/** The slide-in filter panel: keyword + checkbox facets + numeric ranges. */\nexport function GridFilterPanel<T extends Record<string, unknown>>(\n  props: GridFilterPanelProps<T>,\n): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <TableFilter.Panel\n      onClearAll={props.onClearAll}\n      clearTestId={`${props.testIdPrefix}-clear-filters`}\n      ariaLabel={copy.filters.panelTitle}\n    >\n      <FilterControls {...props} />\n    </TableFilter.Panel>\n  );\n}\n\n/** Props for the modal filter surface used below the inline breakpoint. */\ninterface FilterDialogProps<T extends Record<string, unknown>> extends GridFilterPanelProps<T> {\n  open: boolean;\n  onClose: () => void;\n}\n\n/**\n * The same filter controls in a centered modal — used on smaller screens where the\n * slide-in panel would overlap the table. The \"Filtros\" toolbar button opens it.\n */\nexport function FilterDialog<T extends Record<string, unknown>>({\n  open,\n  onClose,\n  ...props\n}: FilterDialogProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <StackedModal\n      open={open}\n      onClose={onClose}\n      navigationTitle={copy.filters.panelTitle}\n      backLabel={copy.nav.goBack}\n      modalId={`${props.testIdPrefix}-filters`}\n      maxWidth=\"xs\"\n      dataTestId={`${props.testIdPrefix}-filter-dialog`}\n    >\n      <StackedModalContent>\n        <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 2.5 }}>\n          <Box sx={{ display: \"flex\", justifyContent: \"flex-end\" }}>\n            <Link\n              component=\"button\"\n              type=\"button\"\n              underline=\"hover\"\n              onClick={props.onClearAll}\n              data-testid={`${props.testIdPrefix}-clear-filters`}\n              sx={{ fontSize: \"0.75rem\", color: \"text.secondary\" }}\n            >\n              {copy.filters.clearAllFilters}\n            </Link>\n          </Box>\n          <FilterControls {...props} />\n        </Box>\n      </StackedModalContent>\n    </StackedModal>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA,SAAS,KAAK,YAAY;AAkDpB,SAqCF,UArCE,KA8CE,YA9CF;AAnBN,SAAS,UAA6C;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMsB;AACpB,QAAM,SAAS,GAAG,YAAY,WAAW,MAAM,EAAE;AAIjD,MAAI,MAAM,iBAAiB,MAAM,YAAY,iBAAiB,MAAM,YAAY,YAAY;AAC1F,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AAAA,QACf,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AACA,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA,MACf,UAAU,IAAI,IAAI,QAAQ;AAAA,MAC1B,UAAU,CAAC,OAAO,YAAY,aAAa,MAAM,IAAI,OAAO,OAAO;AAAA,MACnE;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,eAAkD;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmE;AACjE,QAAM,OAAO,iBAAiB;AAC9B,SACE,iCACE;AAAA;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACC,OAAO;AAAA,QACP,UAAU;AAAA,QACV,OAAO,KAAK,OAAO;AAAA,QACnB,aAAa,KAAK,OAAO;AAAA,QACzB,QAAQ,GAAG,YAAY;AAAA;AAAA,IACzB;AAAA,KACE,OAAO,SAAS,KAAK,YAAY,SAAS,MAC1C,qBAAC,YAAY,SAAZ,EAAoB,OAAO,KAAK,QAAQ,YACtC;AAAA,aAAO,IAAI,CAAC,UACX;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,UAAU,MAAM,MAAM,EAAE,KAAK,CAAC;AAAA,UAC9B;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QALK,MAAM;AAAA,MAMb,CACD;AAAA,MACA,YAAY,IAAI,CAAC,UAChB;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,OAAO,OAAO,MAAM,EAAE,KAAK,CAAC;AAAA,UAC5B,UAAU,CAAC,UAAU,cAAc,MAAM,IAAI,KAAK;AAAA,UAClD,QAAQ,GAAG,YAAY,UAAU,MAAM,EAAE;AAAA;AAAA,QAJpC,MAAM;AAAA,MAKb,CACD;AAAA,OACH;AAAA,KAEJ;AAEJ;AAGO,SAAS,gBACd,OACmB;AACnB,QAAM,OAAO,iBAAiB;AAC9B,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,YAAY,MAAM;AAAA,MAClB,aAAa,GAAG,MAAM,YAAY;AAAA,MAClC,WAAW,KAAK,QAAQ;AAAA,MAExB,8BAAC,kBAAgB,GAAG,OAAO;AAAA;AAAA,EAC7B;AAEJ;AAYO,SAAS,aAAgD;AAAA,EAC9D;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,QAAM,OAAO,iBAAiB;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,KAAK,QAAQ;AAAA,MAC9B,WAAW,KAAK,IAAI;AAAA,MACpB,SAAS,GAAG,MAAM,YAAY;AAAA,MAC9B,UAAS;AAAA,MACT,YAAY,GAAG,MAAM,YAAY;AAAA,MAEjC,8BAAC,uBACC,+BAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAC5D;AAAA,4BAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,gBAAgB,WAAW,GACrD;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM;AAAA,YACf,eAAa,GAAG,MAAM,YAAY;AAAA,YAClC,IAAI,EAAE,UAAU,WAAW,OAAO,iBAAiB;AAAA,YAElD,eAAK,QAAQ;AAAA;AAAA,QAChB,GACF;AAAA,QACA,oBAAC,kBAAgB,GAAG,OAAO;AAAA,SAC7B,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-MFE3GSKU.js

@@ -0,0 +1,216 @@
+import {
+  useDragGestures
+} from "./chunk-CRN4KKNI.js";
+import {
+  SPRING_CONFIG
+} from "./chunk-GVBSCGFZ.js";
+
+// src/components/data-display/Sheet/Sheet.hooks.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+var closestSnapPoint = (points, position, from, velocity, velocityThreshold) => {
+  if (Math.abs(velocity) > velocityThreshold) {
+    const index = points.findIndex((point) => Math.abs(point - from) < 0.01);
+    if (velocity > 0 && index < points.length - 1) return points[index + 1];
+    if (velocity < 0 && index > 0) return points[index - 1];
+  }
+  return points.reduce(
+    (closest, point) => Math.abs(position - point) < Math.abs(position - closest) ? point : closest,
+    points[0] ?? from
+  );
+};
+var useSheetHeight = (input) => {
+  const { isVerticalSheet, isBottomSheet, isTopSheet } = input;
+  const [currentHeight, setCurrentHeight] = useState(null);
+  const sheetRef = useRef(null);
+  const updateSheetHeight = useCallback(
+    (snapPoint) => {
+      if (!sheetRef.current || !isVerticalSheet) return;
+      const height = Math.round(window.innerHeight * snapPoint);
+      if (isBottomSheet) {
+        sheetRef.current.style.height = `${height}px`;
+        sheetRef.current.style.transform = "translateY(0)";
+      } else if (isTopSheet) {
+        sheetRef.current.style.height = `${height}px`;
+      }
+      setCurrentHeight(height);
+    },
+    [isBottomSheet, isTopSheet, isVerticalSheet]
+  );
+  return { sheetRef, currentHeight, updateSheetHeight };
+};
+var useSnapAnimation = ({
+  isVerticalSheet,
+  animationConfig,
+  updateSheetHeight,
+  onSettled,
+  enabled
+}) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const animationFrameRef = useRef(void 0);
+  const animateToSnapPoint = useCallback(
+    (from, to, velocity = 0) => {
+      if (!enabled() || !isVerticalSheet) return;
+      setIsAnimating(true);
+      const distance = to - from;
+      const startTime = globalThis.performance.now();
+      const { tension, friction } = { ...SPRING_CONFIG, ...animationConfig };
+      let currentVelocity = velocity * 1e3;
+      const animate = () => {
+        const elapsed = (globalThis.performance.now() - startTime) / 1e3;
+        const springForce = -tension * (from - to);
+        const dampingForce = -friction * currentVelocity;
+        currentVelocity += (springForce + dampingForce) * 0.016;
+        const progress = Math.min(1, elapsed * 4);
+        updateSheetHeight(from + distance * progress);
+        if (progress < 1) {
+          animationFrameRef.current = window.requestAnimationFrame(animate);
+          return;
+        }
+        setIsAnimating(false);
+        onSettled(to);
+        updateSheetHeight(to);
+      };
+      animate();
+    },
+    [isVerticalSheet, animationConfig, updateSheetHeight, onSettled, enabled]
+  );
+  const cancelAnimation = useCallback(() => {
+    if (animationFrameRef.current) {
+      window.cancelAnimationFrame(animationFrameRef.current);
+    }
+  }, []);
+  return { isAnimating, animateToSnapPoint, cancelAnimation };
+};
+var useSnapGeometry = (input) => {
+  const {
+    isVerticalSheet,
+    snapPoints,
+    defaultSnapPoint,
+    minSnapPoint,
+    maxSnapPoint,
+    velocityThreshold,
+    animationConfig,
+    onSnapPointChange
+  } = input;
+  const [currentSnapPoint, setCurrentSnapPoint] = useState(defaultSnapPoint);
+  const { sheetRef, currentHeight, updateSheetHeight } = useSheetHeight(input);
+  const sortedSnapPoints = useMemo(
+    () => [...snapPoints].sort((a, b) => a - b).filter((point) => point >= minSnapPoint && point <= maxSnapPoint),
+    [snapPoints, minSnapPoint, maxSnapPoint]
+  );
+  const onSettled = useCallback(
+    (snapPoint) => {
+      setCurrentSnapPoint(snapPoint);
+      onSnapPointChange?.(snapPoint);
+    },
+    [onSnapPointChange]
+  );
+  const hasPanel = useCallback(() => Boolean(sheetRef.current), [sheetRef]);
+  const { isAnimating, animateToSnapPoint, cancelAnimation } = useSnapAnimation({
+    isVerticalSheet,
+    animationConfig,
+    updateSheetHeight,
+    onSettled,
+    enabled: hasPanel
+  });
+  const settleAt = useCallback(
+    (position, velocity) => {
+      const target = closestSnapPoint(
+        sortedSnapPoints,
+        position,
+        currentSnapPoint,
+        velocity,
+        velocityThreshold
+      );
+      if (target === void 0) return void 0;
+      animateToSnapPoint(currentSnapPoint, target, velocity);
+      return target;
+    },
+    [sortedSnapPoints, currentSnapPoint, velocityThreshold, animateToSnapPoint]
+  );
+  const resetToDefaultSnapPoint = useCallback(() => {
+    setCurrentSnapPoint(defaultSnapPoint);
+    updateSheetHeight(defaultSnapPoint);
+  }, [defaultSnapPoint, updateSheetHeight]);
+  return {
+    sheetRef,
+    currentSnapPoint,
+    currentHeight,
+    isAnimating,
+    updateSheetHeight,
+    settleAt,
+    resetToDefaultSnapPoint,
+    cancelAnimation
+  };
+};
+var useSheetDrag = (input) => {
+  const geometry = useSnapGeometry(input);
+  const { isDragging, handleDragStart } = useDragGestures(input, geometry);
+  return {
+    sheetRef: geometry.sheetRef,
+    currentHeight: geometry.currentHeight,
+    isAnimating: geometry.isAnimating,
+    resetToDefaultSnapPoint: geometry.resetToDefaultSnapPoint,
+    isDragging,
+    handleDragStart
+  };
+};
+var useSheetOpen = (input) => {
+  const {
+    open,
+    persistent,
+    disabled,
+    closeOnEscape,
+    closeOnOverlayClick,
+    isDraggableVariant,
+    isVerticalSheet,
+    resetToDefaultSnapPoint,
+    onOpenChange,
+    onClose,
+    onOpen
+  } = input;
+  const [isOpen, setIsOpen] = useState(open);
+  const handleClose = useCallback(() => {
+    if (!persistent && !disabled) {
+      setIsOpen(false);
+      onOpenChange?.(false);
+      onClose?.();
+    }
+  }, [persistent, disabled, onOpenChange, onClose]);
+  const handleOverlayClick = useCallback(() => {
+    if (closeOnOverlayClick && !persistent) {
+      handleClose();
+    }
+  }, [closeOnOverlayClick, persistent, handleClose]);
+  const handleSwipeOpen = useCallback(() => {
+    setIsOpen(true);
+    onOpenChange?.(true);
+    onOpen?.();
+  }, [onOpenChange, onOpen]);
+  useEffect(() => {
+    setIsOpen(open);
+    if (open) {
+      onOpen?.();
+      if (isDraggableVariant && isVerticalSheet) {
+        resetToDefaultSnapPoint();
+      }
+    }
+  }, [open, onOpen, isDraggableVariant, isVerticalSheet, resetToDefaultSnapPoint]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e) => {
+      if (closeOnEscape && e.key === "Escape") {
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEscape, handleClose]);
+  return { isOpen, handleClose, handleOverlayClick, handleSwipeOpen };
+};
+
+export {
+  useSheetDrag,
+  useSheetOpen
+};
+//# sourceMappingURL=chunk-MFE3GSKU.js.map

package/dist/chunk-MFE3GSKU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.hooks.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { SPRING_CONFIG } from './Sheet.animations';\nimport { useDragGestures } from './Sheet.drag';\nimport type { SheetProps } from './Sheet.types';\n\nexport interface SheetDragInput {\n  isDraggableVariant: boolean;\n  isVerticalSheet: boolean;\n  isBottomSheet: boolean;\n  isTopSheet: boolean;\n  snapPoints: number[];\n  defaultSnapPoint: number;\n  minSnapPoint: number;\n  maxSnapPoint: number;\n  velocityThreshold: number;\n  dragResistance: number;\n  animationConfig: NonNullable<SheetProps['animationConfig']>;\n  onSnapPointChange?: (snapPoint: number) => void;\n  onDragStart?: () => void;\n  onDragEnd?: (snapPoint: number) => void;\n}\n\n/**\n * Which snap point a drag ending at `position` should land on.\n *\n * A flick past the velocity threshold advances one point in the direction of\n * travel rather than landing on whichever is nearest — that is what makes a\n * short fast drag feel like a throw. Anything slower simply snaps to the\n * closest point.\n */\nconst closestSnapPoint = (\n  points: number[],\n  position: number,\n  from: number,\n  velocity: number,\n  velocityThreshold: number,\n) => {\n  if (Math.abs(velocity) > velocityThreshold) {\n    const index = points.findIndex((point) => Math.abs(point - from) < 0.01);\n\n    if (velocity > 0 && index < points.length - 1) return points[index + 1];\n    if (velocity < 0 && index > 0) return points[index - 1];\n  }\n\n  return points.reduce(\n    (closest, point) =>\n      Math.abs(position - point) < Math.abs(position - closest) ? point : closest,\n    points[0] ?? from,\n  );\n};\n\n/** Owns the panel element and the height writes that realise a snap point. */\nconst useSheetHeight = (input: Pick<SheetDragInput, 'isVerticalSheet' | 'isBottomSheet' | 'isTopSheet'>) => {\n  const { isVerticalSheet, isBottomSheet, isTopSheet } = input;\n  const [currentHeight, setCurrentHeight] = useState<number | null>(null);\n  const sheetRef = useRef<HTMLDivElement>(null);\n\n  const updateSheetHeight = useCallback(\n    (snapPoint: number) => {\n      if (!sheetRef.current || !isVerticalSheet) return;\n\n      const height = Math.round(window.innerHeight * snapPoint);\n\n      if (isBottomSheet) {\n        sheetRef.current.style.height = `${height}px`;\n        sheetRef.current.style.transform = 'translateY(0)';\n      } else if (isTopSheet) {\n        sheetRef.current.style.height = `${height}px`;\n      }\n\n      setCurrentHeight(height);\n    },\n    [isBottomSheet, isTopSheet, isVerticalSheet],\n  );\n\n  return { sheetRef, currentHeight, updateSheetHeight };\n};\n\ninterface SnapAnimationInput {\n  isVerticalSheet: boolean;\n  animationConfig: NonNullable<SheetProps['animationConfig']>;\n  updateSheetHeight: (snapPoint: number) => void;\n  onSettled: (snapPoint: number) => void;\n  enabled: () => boolean;\n}\n\n/** The spring that carries the panel from one snap point to another. */\nconst useSnapAnimation = ({\n  isVerticalSheet,\n  animationConfig,\n  updateSheetHeight,\n  onSettled,\n  enabled,\n}: SnapAnimationInput) => {\n  const [isAnimating, setIsAnimating] = useState(false);\n  const animationFrameRef = useRef<number | undefined>(undefined);\n\n  const animateToSnapPoint = useCallback(\n    (from: number, to: number, velocity = 0) => {\n      if (!enabled() || !isVerticalSheet) return;\n\n      setIsAnimating(true);\n      const distance = to - from;\n      const startTime = globalThis.performance.now();\n\n      const { tension, friction } = { ...SPRING_CONFIG, ...animationConfig };\n      let currentVelocity = velocity * 1000; // px per second\n\n      const animate = () => {\n        const elapsed = (globalThis.performance.now() - startTime) / 1000;\n\n        const springForce = -tension * (from - to);\n        const dampingForce = -friction * currentVelocity;\n        currentVelocity += (springForce + dampingForce) * 0.016; // 60fps timestep\n\n        const progress = Math.min(1, elapsed * 4);\n        updateSheetHeight(from + distance * progress);\n\n        if (progress < 1) {\n          animationFrameRef.current = window.requestAnimationFrame(animate);\n          return;\n        }\n\n        setIsAnimating(false);\n        onSettled(to);\n        updateSheetHeight(to);\n      };\n\n      animate();\n    },\n    [isVerticalSheet, animationConfig, updateSheetHeight, onSettled, enabled],\n  );\n\n  const cancelAnimation = useCallback(() => {\n    if (animationFrameRef.current) {\n      window.cancelAnimationFrame(animationFrameRef.current);\n    }\n  }, []);\n\n  return { isAnimating, animateToSnapPoint, cancelAnimation };\n};\n\n/**\n * Where the sheet rests and how it gets there. Knows nothing about pointers —\n * `useDragGestures` supplies the positions.\n */\nconst useSnapGeometry = (input: SheetDragInput) => {\n  const {\n    isVerticalSheet,\n    snapPoints,\n    defaultSnapPoint,\n    minSnapPoint,\n    maxSnapPoint,\n    velocityThreshold,\n    animationConfig,\n    onSnapPointChange,\n  } = input;\n\n  const [currentSnapPoint, setCurrentSnapPoint] = useState(defaultSnapPoint);\n  const { sheetRef, currentHeight, updateSheetHeight } = useSheetHeight(input);\n\n  const sortedSnapPoints = useMemo(\n    () =>\n      [...snapPoints]\n        .sort((a, b) => a - b)\n        .filter((point) => point >= minSnapPoint && point <= maxSnapPoint),\n    [snapPoints, minSnapPoint, maxSnapPoint],\n  );\n\n  const onSettled = useCallback(\n    (snapPoint: number) => {\n      setCurrentSnapPoint(snapPoint);\n      onSnapPointChange?.(snapPoint);\n    },\n    [onSnapPointChange],\n  );\n\n  const hasPanel = useCallback(() => Boolean(sheetRef.current), [sheetRef]);\n\n  const { isAnimating, animateToSnapPoint, cancelAnimation } = useSnapAnimation({\n    isVerticalSheet,\n    animationConfig,\n    updateSheetHeight,\n    onSettled,\n    enabled: hasPanel,\n  });\n\n  const settleAt = useCallback(\n    (position: number, velocity: number) => {\n      const target = closestSnapPoint(\n        sortedSnapPoints,\n        position,\n        currentSnapPoint,\n        velocity,\n        velocityThreshold,\n      );\n      if (target === undefined) return undefined;\n\n      animateToSnapPoint(currentSnapPoint, target, velocity);\n      return target;\n    },\n    [sortedSnapPoints, currentSnapPoint, velocityThreshold, animateToSnapPoint],\n  );\n\n  /** Re-seat the panel at its default snap point each time it opens. */\n  const resetToDefaultSnapPoint = useCallback(() => {\n    setCurrentSnapPoint(defaultSnapPoint);\n    updateSheetHeight(defaultSnapPoint);\n  }, [defaultSnapPoint, updateSheetHeight]);\n\n  return {\n    sheetRef,\n    currentSnapPoint,\n    currentHeight,\n    isAnimating,\n    updateSheetHeight,\n    settleAt,\n    resetToDefaultSnapPoint,\n    cancelAnimation,\n  };\n};\n\nexport type SnapGeometry = ReturnType<typeof useSnapGeometry>;\n\n/**\n * The draggable variant's whole state machine. It lives apart from the component\n * because none of it is about what the sheet renders — the component only needs\n * the ref to attach, the current height to size with, and the two flags that\n * suppress the CSS transition mid-drag.\n */\nexport const useSheetDrag = (input: SheetDragInput) => {\n  const geometry = useSnapGeometry(input);\n  const { isDragging, handleDragStart } = useDragGestures(input, geometry);\n\n  return {\n    sheetRef: geometry.sheetRef,\n    currentHeight: geometry.currentHeight,\n    isAnimating: geometry.isAnimating,\n    resetToDefaultSnapPoint: geometry.resetToDefaultSnapPoint,\n    isDragging,\n    handleDragStart,\n  };\n};\n\ninterface SheetOpenInput {\n  open: boolean;\n  persistent: boolean;\n  disabled: boolean;\n  closeOnEscape: boolean;\n  closeOnOverlayClick: boolean;\n  isDraggableVariant: boolean;\n  isVerticalSheet: boolean;\n  resetToDefaultSnapPoint: () => void;\n  onOpenChange?: (open: boolean) => void;\n  onClose?: () => void;\n  onOpen?: () => void;\n}\n\n/**\n * Open/closed state and the three ways it changes: the `open` prop, the Escape\n * key, and a click on the overlay. `persistent` and `disabled` block every\n * close path, so they are checked once here rather than at each caller.\n */\nexport const useSheetOpen = (input: SheetOpenInput) => {\n  const {\n    open, persistent, disabled, closeOnEscape, closeOnOverlayClick,\n    isDraggableVariant, isVerticalSheet, resetToDefaultSnapPoint,\n    onOpenChange, onClose, onOpen,\n  } = input;\n\n  const [isOpen, setIsOpen] = useState(open);\n\n  const handleClose = useCallback(() => {\n    if (!persistent && !disabled) {\n      setIsOpen(false);\n      onOpenChange?.(false);\n      onClose?.();\n    }\n  }, [persistent, disabled, onOpenChange, onClose]);\n\n  const handleOverlayClick = useCallback(() => {\n    if (closeOnOverlayClick && !persistent) {\n      handleClose();\n    }\n  }, [closeOnOverlayClick, persistent, handleClose]);\n\n  const handleSwipeOpen = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n    onOpen?.();\n  }, [onOpenChange, onOpen]);\n\n  useEffect(() => {\n    setIsOpen(open);\n    if (open) {\n      onOpen?.();\n      if (isDraggableVariant && isVerticalSheet) {\n        resetToDefaultSnapPoint();\n      }\n    }\n  }, [open, onOpen, isDraggableVariant, isVerticalSheet, resetToDefaultSnapPoint]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleEscape = (e: globalThis.KeyboardEvent) => {\n      if (closeOnEscape && e.key === 'Escape') {\n        handleClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isOpen, closeOnEscape, handleClose]);\n\n  return { isOpen, handleClose, handleOverlayClick, handleSwipeOpen };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-MHWZHOTX.js

@@ -0,0 +1,75 @@
+// src/components/form/InputOTP/InputOTP.styles.ts
+import { alpha } from "@mui/material";
+var neutralPalette = (theme) => ({
+  main: theme.palette.grey[700],
+  dark: theme.palette.grey[800],
+  light: theme.palette.grey[500],
+  contrastText: "#fff"
+});
+var namedPalette = (theme, color) => {
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || "#fff"
+  };
+};
+var SIZES = {
+  xs: { side: "32px", fontSize: "0.75rem" },
+  sm: { side: "40px", fontSize: "0.875rem" },
+  md: { side: "48px", fontSize: "1rem" },
+  lg: { side: "56px", fontSize: "1.125rem" },
+  xl: { side: "64px", fontSize: "1.25rem" }
+};
+var otpSlotSx = (theme, flags) => {
+  const { customColor = "primary", customSize = "md", glass, gradient } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  const { side, fontSize } = SIZES[customSize] ?? SIZES.md;
+  return {
+    width: side,
+    height: side,
+    "& .MuiOutlinedInput-root": {
+      width: side,
+      height: side,
+      fontSize,
+      fontWeight: 600,
+      textAlign: "center",
+      borderRadius: theme.spacing(1),
+      ...glass && {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: "blur(20px)",
+        "& fieldset": { border: `1px solid ${alpha(theme.palette.divider, 0.2)}` }
+      },
+      ...gradient && {
+        "&.Mui-focused fieldset": {
+          background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,
+          borderWidth: "2px"
+        }
+      },
+      "& input": { textAlign: "center", padding: 0, fontWeight: "inherit" },
+      "&:hover fieldset": { borderColor: palette.main },
+      "&.Mui-focused fieldset": { borderColor: palette.main, borderWidth: "2px" }
+    }
+  };
+};
+
+export {
+  otpSlotSx
+};
+//# sourceMappingURL=chunk-MHWZHOTX.js.map

package/dist/chunk-MHWZHOTX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/InputOTP/InputOTP.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\n\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */\nconst neutralPalette = (theme: Theme): ColorPalette => ({\n  main: theme.palette.grey[700],\n  dark: theme.palette.grey[800],\n  light: theme.palette.grey[500],\n  contrastText: '#fff',\n});\n\n/** `danger` is this component's name for the error palette. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n  const colorMap: Record<string, ColorPalette> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const palette = namedPalette(theme, color);\n  const { primary } = theme.palette;\n\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || '#fff',\n  };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Each slot is a square, so width and height always match. */\nconst SIZES: Record<SizeKey, { side: string; fontSize: string }> = {\n  xs: { side: '32px', fontSize: '0.75rem' },\n  sm: { side: '40px', fontSize: '0.875rem' },\n  md: { side: '48px', fontSize: '1rem' },\n  lg: { side: '56px', fontSize: '1.125rem' },\n  xl: { side: '64px', fontSize: '1.25rem' },\n};\n\nexport interface OtpSlotFlags {\n  customColor?: string;\n  customSize?: string;\n  glass?: boolean;\n  gradient?: boolean;\n}\n\nexport const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {\n  const { customColor = 'primary', customSize = 'md', glass, gradient } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n  const { side, fontSize } = SIZES[customSize as SizeKey] ?? SIZES.md;\n\n  return {\n    width: side,\n    height: side,\n    '& .MuiOutlinedInput-root': {\n      width: side,\n      height: side,\n      fontSize,\n      fontWeight: 600,\n      textAlign: 'center',\n      borderRadius: theme.spacing(1),\n      ...(glass && {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        '& fieldset': { border: `1px solid ${alpha(theme.palette.divider, 0.2)}` },\n      }),\n      ...(gradient && {\n        '&.Mui-focused fieldset': {\n          background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,\n          borderWidth: '2px',\n        },\n      }),\n      '& input': { textAlign: 'center', padding: 0, fontWeight: 'inherit' },\n      '&:hover fieldset': { borderColor: palette.main },\n      '&.Mui-focused fieldset': { borderColor: palette.main, borderWidth: '2px' },\n    },\n  };\n};\n"],"mappings":";AAAA,SAAS,aAAa;AAWtB,IAAM,iBAAiB,CAAC,WAAgC;AAAA,EACtD,MAAM,MAAM,QAAQ,KAAK,GAAG;AAAA,EAC5B,MAAM,MAAM,QAAQ,KAAK,GAAG;AAAA,EAC5B,OAAO,MAAM,QAAQ,KAAK,GAAG;AAAA,EAC7B,cAAc;AAChB;AAGA,IAAM,eAAe,CAAC,OAAc,UAAgC;AAClE,QAAM,WAAyC;AAAA,IAC7C,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ;AAC1C;AAEA,IAAM,oBAAoB,CAAC,OAAc,UAAgC;AACvE,MAAI,UAAU,WAAW;AACvB,WAAO,eAAe,KAAK;AAAA,EAC7B;AAEA,QAAM,UAAU,aAAa,OAAO,KAAK;AACzC,QAAM,EAAE,QAAQ,IAAI,MAAM;AAE1B,SAAO;AAAA,IACL,MAAM,QAAQ,QAAQ,QAAQ;AAAA,IAC9B,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,IAC9C,OAAO,QAAQ,SAAS,QAAQ,QAAQ,QAAQ;AAAA,IAChD,cAAc,QAAQ,gBAAgB;AAAA,EACxC;AACF;AAKA,IAAM,QAA6D;AAAA,EACjE,IAAI,EAAE,MAAM,QAAQ,UAAU,UAAU;AAAA,EACxC,IAAI,EAAE,MAAM,QAAQ,UAAU,WAAW;AAAA,EACzC,IAAI,EAAE,MAAM,QAAQ,UAAU,OAAO;AAAA,EACrC,IAAI,EAAE,MAAM,QAAQ,UAAU,WAAW;AAAA,EACzC,IAAI,EAAE,MAAM,QAAQ,UAAU,UAAU;AAC1C;AASO,IAAM,YAAY,CAAC,OAAc,UAAmC;AACzE,QAAM,EAAE,cAAc,WAAW,aAAa,MAAM,OAAO,SAAS,IAAI;AACxE,QAAM,UAAU,kBAAkB,OAAO,WAAW;AACpD,QAAM,EAAE,MAAM,SAAS,IAAI,MAAM,UAAqB,KAAK,MAAM;AAEjE,SAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,4BAA4B;AAAA,MAC1B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,cAAc,MAAM,QAAQ,CAAC;AAAA,MAC7B,GAAI,SAAS;AAAA,QACX,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,QAC1D,gBAAgB;AAAA,QAChB,cAAc,EAAE,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC,GAAG;AAAA,MAC3E;AAAA,MACA,GAAI,YAAY;AAAA,QACd,0BAA0B;AAAA,UACxB,YAAY,2BAA2B,QAAQ,IAAI,KAAK,QAAQ,KAAK;AAAA,UACrE,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MACA,WAAW,EAAE,WAAW,UAAU,SAAS,GAAG,YAAY,UAAU;AAAA,MACpE,oBAAoB,EAAE,aAAa,QAAQ,KAAK;AAAA,MAChD,0BAA0B,EAAE,aAAa,QAAQ,MAAM,aAAa,MAAM;AAAA,IAC5E;AAAA,EACF;AACF;","names":[]}