@salt-ds/lab 1.0.0-alpha.6 → 1.0.0-alpha.60

package/dist-cjs/date-picker/DatePickerSinglePanel.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var Calendar = require('../calendar/Calendar.js');
+var CalendarNavigation = require('../calendar/CalendarNavigation.js');
+var CalendarWeekHeader = require('../calendar/CalendarWeekHeader.js');
+var CalendarGrid = require('../calendar/CalendarGrid.js');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
+require('../calendar/internal/CalendarContext.js');
+require('../calendar/useCalendarSelection.js');
+var DatePickerContext = require('./DatePickerContext.js');
+var DatePickerPanel = require('./DatePickerPanel.css.js');
+
+const withBaseName = core.makePrefixer("saltDatePickerPanel");
+const DatePickerSinglePanel = react.forwardRef(function DatePickerSinglePanel2(props, ref) {
+  const { dateAdapter } = LocalizationProvider.useLocalization();
+  const {
+    CalendarProps,
+    CalendarWeekHeaderProps,
+    CalendarNavigationProps,
+    CalendarDataGridProps,
+    className,
+    defaultVisibleMonth,
+    visibleMonth: visibleMonthProp,
+    onVisibleMonthChange,
+    helperText,
+    onSelectionChange,
+    ...rest
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-date-picker-single-panel",
+    css: DatePickerPanel,
+    window: targetWindow
+  });
+  const {
+    state: {
+      selectedDate,
+      minDate = dateAdapter.startOf(dateAdapter.today(), "month"),
+      maxDate = dateAdapter.add(minDate, { months: 1 })
+    },
+    helpers: { select }
+  } = DatePickerContext.useDatePickerContext({ selectionVariant: "single" });
+  const [hoveredDate, setHoveredDate] = react.useState(null);
+  const [uncontrolledDefaultVisibleMonth] = react.useState(() => {
+    const validDate = dateAdapter.isValid(selectedDate) ? selectedDate : dateAdapter.today();
+    return defaultVisibleMonth || dateAdapter.startOf(validDate, "month");
+  });
+  const [visibleMonth, setVisibleMonth] = core.useControlled({
+    controlled: visibleMonthProp,
+    default: uncontrolledDefaultVisibleMonth,
+    name: "DatePickerSinglePanel",
+    state: "visibleMonth"
+  });
+  const handleSelectionChange = react.useCallback(
+    (event, newDate) => {
+      select(event, newDate);
+      onSelectionChange == null ? void 0 : onSelectionChange(event, newDate);
+    },
+    [select, onSelectionChange]
+  );
+  const handleHoveredDateChange = react.useCallback(
+    (event, newHoveredDate) => {
+      setHoveredDate(newHoveredDate);
+      if (newHoveredDate && (CalendarProps == null ? void 0 : CalendarProps.onHoveredDateChange)) {
+        CalendarProps.onHoveredDateChange(event, newHoveredDate);
+      }
+    },
+    [CalendarProps == null ? void 0 : CalendarProps.onHoveredDateChange]
+  );
+  const handleVisibleMonthChange = react.useCallback(
+    (event, newVisibleMonth) => {
+      setVisibleMonth(newVisibleMonth);
+      if (onVisibleMonthChange) {
+        onVisibleMonthChange(event, newVisibleMonth);
+      }
+    },
+    [onVisibleMonthChange]
+  );
+  const baseCalendarProps = {
+    selectionVariant: "single",
+    visibleMonth,
+    hoveredDate,
+    onHoveredDateChange: handleHoveredDateChange,
+    onVisibleMonthChange: handleVisibleMonthChange,
+    onSelectionChange: handleSelectionChange,
+    hideOutOfRangeDates: true,
+    selectedDate,
+    minDate,
+    maxDate,
+    ...CalendarProps
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.StackLayout,
+    {
+      separators: true,
+      gap: 0,
+      className: clsx(className, withBaseName("container")),
+      ref,
+      ...rest,
+      children: [
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, { className: withBaseName("header"), children: /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldHelperText, { children: helperText }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, { gap: 0, children: /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldContext.Provider, { value: {}, children: /* @__PURE__ */ jsxRuntime.jsxs(Calendar.Calendar, { selectionVariant: "single", ...baseCalendarProps, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CalendarNavigation.CalendarNavigation, { ...CalendarNavigationProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(CalendarWeekHeader.CalendarWeekHeader, { ...CalendarWeekHeaderProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid.CalendarGrid, { ...CalendarDataGridProps })
+        ] }) }) })
+      ]
+    }
+  );
+});
+
+exports.DatePickerSinglePanel = DatePickerSinglePanel;
+//# sourceMappingURL=DatePickerSinglePanel.js.map

package/dist-cjs/date-picker/DatePickerSinglePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerSinglePanel.js","sources":["../src/date-picker/DatePickerSinglePanel.tsx"],"sourcesContent":["import {\n  FlexItem,\n  FlexLayout,\n  FormFieldContext,\n  type FormFieldContextValue,\n  FormFieldHelperText,\n  StackLayout,\n  makePrefixer,\n  useControlled,\n} from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport {\n  CalendarGrid,\n  type CalendarGridProps,\n  CalendarNavigation,\n  type CalendarNavigationProps,\n  type CalendarSingleProps,\n  CalendarWeekHeader,\n  type CalendarWeekHeaderProps,\n} from \"../calendar\";\nimport { Calendar, type SingleDateSelection } from \"../calendar\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\n\n/**\n * Props for the DatePickerSinglePanel component.\n * @template T - The type of the selected date.\n */\nexport interface DatePickerSinglePanelProps<TDate extends DateFrameworkType>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Callback fired when a date is selected.\n   * @param event - The synthetic event.\n   * @param selectedDate - The selected date or null.\n   */\n  onSelectionChange?: (\n    event: SyntheticEvent,\n    selectedDate?: TDate | null,\n  ) => void;\n\n  /**\n   * Helper text to be displayed below the date picker.\n   */\n  helperText?: string;\n\n  /**\n   * The currently visible month.\n   */\n  visibleMonth?: TDate;\n\n  /**\n   * The default visible month.\n   */\n  defaultVisibleMonth?: TDate;\n\n  /**\n   * Callback fired when the visible month changes.\n   * @param event - The synthetic event.\n   * @param visibleMonth - The new visible month.\n   */\n  onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: TDate) => void;\n\n  /**\n   * Props to be passed to the Calendar component.\n   */\n  CalendarProps?: Partial<\n    Omit<\n      CalendarSingleProps<TDate>,\n      | \"selectionVariant\"\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectionChange\"\n      | \"onVisibleMonthChange\"\n    >\n  >;\n  /**\n   * Props to be passed to the CalendarNavigation component.\n   */\n  CalendarNavigationProps?: CalendarNavigationProps<TDate>;\n  /**\n   * Props to be passed to the CalendarWeekHeader component.\n   */\n  CalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n  /**\n   * Props to be passed to the CalendarDataGrid component.\n   */\n  CalendarDataGridProps?: CalendarGridProps<TDate>;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerSinglePanel = forwardRef(function DatePickerSinglePanel<\n  TDate extends DateFrameworkType,\n>(\n  props: DatePickerSinglePanelProps<SingleDateSelection<TDate>>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const { dateAdapter } = useLocalization<TDate>();\n\n  const {\n    CalendarProps,\n    CalendarWeekHeaderProps,\n    CalendarNavigationProps,\n    CalendarDataGridProps,\n    className,\n    defaultVisibleMonth,\n    visibleMonth: visibleMonthProp,\n    onVisibleMonthChange,\n    helperText,\n    onSelectionChange,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-single-panel\",\n    css: datePickerPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: {\n      selectedDate,\n      minDate = dateAdapter.startOf(dateAdapter.today(), \"month\"),\n      maxDate = dateAdapter.add(minDate, { months: 1 }),\n    },\n    helpers: { select },\n  } = useDatePickerContext<TDate>({ selectionVariant: \"single\" });\n\n  const [hoveredDate, setHoveredDate] = useState<TDate | null>(null);\n\n  const [uncontrolledDefaultVisibleMonth] = useState(() => {\n    const validDate = dateAdapter.isValid(selectedDate)\n      ? selectedDate\n      : dateAdapter.today();\n    return defaultVisibleMonth || dateAdapter.startOf(validDate, \"month\");\n  });\n  const [visibleMonth, setVisibleMonth] = useControlled({\n    controlled: visibleMonthProp,\n    default: uncontrolledDefaultVisibleMonth,\n    name: \"DatePickerSinglePanel\",\n    state: \"visibleMonth\",\n  });\n\n  const handleSelectionChange = useCallback(\n    (event: SyntheticEvent, newDate: SingleDateSelection<TDate> | null) => {\n      select(event, newDate);\n      onSelectionChange?.(event, newDate);\n    },\n    [select, onSelectionChange],\n  );\n\n  const handleHoveredDateChange = useCallback(\n    (\n      event: SyntheticEvent,\n      newHoveredDate: SingleDateSelection<TDate> | null,\n    ) => {\n      setHoveredDate(newHoveredDate);\n      if (newHoveredDate && CalendarProps?.onHoveredDateChange) {\n        CalendarProps.onHoveredDateChange(event, newHoveredDate);\n      }\n    },\n    [CalendarProps?.onHoveredDateChange],\n  );\n\n  const handleVisibleMonthChange = useCallback(\n    (event: SyntheticEvent, newVisibleMonth: TDate) => {\n      setVisibleMonth(newVisibleMonth);\n      if (onVisibleMonthChange) {\n        onVisibleMonthChange(event, newVisibleMonth);\n      }\n    },\n    [onVisibleMonthChange],\n  );\n\n  const baseCalendarProps: Partial<CalendarSingleProps<TDate>> = {\n    selectionVariant: \"single\",\n    visibleMonth,\n    hoveredDate,\n    onHoveredDateChange: handleHoveredDateChange,\n    onVisibleMonthChange: handleVisibleMonthChange,\n    onSelectionChange: handleSelectionChange,\n    hideOutOfRangeDates: true,\n    selectedDate,\n    minDate,\n    maxDate,\n    ...CalendarProps,\n  };\n\n  return (\n    <StackLayout\n      separators\n      gap={0}\n      className={clsx(className, withBaseName(\"container\"))}\n      ref={ref}\n      {...rest}\n    >\n      {helperText && (\n        <FlexItem className={withBaseName(\"header\")}>\n          <FormFieldHelperText>{helperText}</FormFieldHelperText>\n        </FlexItem>\n      )}\n      <FlexLayout gap={0}>\n        {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n        <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n          <Calendar selectionVariant=\"single\" {...baseCalendarProps}>\n            <CalendarNavigation {...CalendarNavigationProps} />\n            <CalendarWeekHeader {...CalendarWeekHeaderProps} />\n            <CalendarGrid {...CalendarDataGridProps} />\n          </Calendar>\n        </FormFieldContext.Provider>\n      </FlexLayout>\n    </StackLayout>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DatePickerSinglePanel","useLocalization","useWindow","useComponentCssInjection","datePickerPanelCss","useDatePickerContext","useState","useControlled","useCallback","jsxs","StackLayout","jsx","FlexItem","FormFieldHelperText","FlexLayout","FormFieldContext","Calendar","CalendarNavigation","CalendarWeekHeader","CalendarGrid"],"mappings":";;;;;;;;;;;;;;;;;;AAoGA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAEhD,MAAM,qBAAwB,GAAAC,gBAAA,CAAW,SAASC,sBAAAA,CAGvD,OACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,oCAAuB,EAAA;AAE/C,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,uBAAA;AAAA,IACA,uBAAA;AAAA,IACA,qBAAA;AAAA,IACA,SAAA;AAAA,IACA,mBAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,oBAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,+BAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA;AAAA,MACL,YAAA;AAAA,MACA,UAAU,WAAY,CAAA,OAAA,CAAQ,WAAY,CAAA,KAAA,IAAS,OAAO,CAAA;AAAA,MAC1D,UAAU,WAAY,CAAA,GAAA,CAAI,SAAS,EAAE,MAAA,EAAQ,GAAG;AAAA,KAClD;AAAA,IACA,OAAA,EAAS,EAAE,MAAO;AAAA,GAChB,GAAAC,sCAAA,CAA4B,EAAE,gBAAA,EAAkB,UAAU,CAAA;AAE9D,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,eAAuB,IAAI,CAAA;AAEjE,EAAA,MAAM,CAAC,+BAA+B,CAAI,GAAAA,cAAA,CAAS,MAAM;AACvD,IAAA,MAAM,YAAY,WAAY,CAAA,OAAA,CAAQ,YAAY,CAC9C,GAAA,YAAA,GACA,YAAY,KAAM,EAAA;AACtB,IAAA,OAAO,mBAAuB,IAAA,WAAA,CAAY,OAAQ,CAAA,SAAA,EAAW,OAAO,CAAA;AAAA,GACrE,CAAA;AACD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACpD,UAAY,EAAA,gBAAA;AAAA,IACZ,OAAS,EAAA,+BAAA;AAAA,IACT,IAAM,EAAA,uBAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAC5B,CAAC,OAAuB,OAA+C,KAAA;AACrE,MAAA,MAAA,CAAO,OAAO,OAAO,CAAA;AACrB,MAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,OAAA,CAAA;AAAA,KAC7B;AAAA,IACA,CAAC,QAAQ,iBAAiB;AAAA,GAC5B;AAEA,EAAA,MAAM,uBAA0B,GAAAA,iBAAA;AAAA,IAC9B,CACE,OACA,cACG,KAAA;AACH,MAAA,cAAA,CAAe,cAAc,CAAA;AAC7B,MAAI,IAAA,cAAA,KAAkB,+CAAe,mBAAqB,CAAA,EAAA;AACxD,QAAc,aAAA,CAAA,mBAAA,CAAoB,OAAO,cAAc,CAAA;AAAA;AACzD,KACF;AAAA,IACA,CAAC,+CAAe,mBAAmB;AAAA,GACrC;AAEA,EAAA,MAAM,wBAA2B,GAAAA,iBAAA;AAAA,IAC/B,CAAC,OAAuB,eAA2B,KAAA;AACjD,MAAA,eAAA,CAAgB,eAAe,CAAA;AAC/B,MAAA,IAAI,oBAAsB,EAAA;AACxB,QAAA,oBAAA,CAAqB,OAAO,eAAe,CAAA;AAAA;AAC7C,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,iBAAyD,GAAA;AAAA,IAC7D,gBAAkB,EAAA,QAAA;AAAA,IAClB,YAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAqB,EAAA,uBAAA;AAAA,IACrB,oBAAsB,EAAA,wBAAA;AAAA,IACtB,iBAAmB,EAAA,qBAAA;AAAA,IACnB,mBAAqB,EAAA,IAAA;AAAA,IACrB,YAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EACE,uBAAAC,eAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,UAAU,EAAA,IAAA;AAAA,MACV,GAAK,EAAA,CAAA;AAAA,MACL,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,CAAa,WAAW,CAAC,CAAA;AAAA,MACpD,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QACC,UAAA,oBAAAC,cAAA,CAACC,iBAAS,SAAW,EAAA,YAAA,CAAa,QAAQ,CACxC,EAAA,QAAA,kBAAAD,cAAA,CAACE,wBAAqB,EAAA,EAAA,QAAA,EAAA,UAAA,EAAW,CACnC,EAAA,CAAA;AAAA,uCAEDC,eAAW,EAAA,EAAA,GAAA,EAAK,CAEf,EAAA,QAAA,kBAAAH,cAAA,CAACI,sBAAiB,QAAjB,EAAA,EAA0B,KAAO,EAAA,IAChC,QAAC,kBAAAN,eAAA,CAAAO,iBAAA,EAAA,EAAS,gBAAiB,EAAA,QAAA,EAAU,GAAG,iBACtC,EAAA,QAAA,EAAA;AAAA,0BAACL,cAAA,CAAAM,qCAAA,EAAA,EAAoB,GAAG,uBAAyB,EAAA,CAAA;AAAA,0BACjDN,cAAA,CAACO,qCAAoB,EAAA,EAAA,GAAG,uBAAyB,EAAA,CAAA;AAAA,0BACjDP,cAAA,CAACQ,yBAAc,EAAA,EAAA,GAAG,qBAAuB,EAAA;AAAA,SAAA,EAC3C,GACF,CACF,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist-cjs/date-picker/DatePickerTrigger.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
+
+const withBaseName = core.makePrefixer("saltDatePickerTrigger");
+const DatePickerTrigger = react.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  const {
+    state: { floatingUIResult },
+    helpers: { getReferenceProps }
+  } = DatePickerOverlayProvider.useDatePickerOverlay();
+  const triggerRef = core.useForkRef(
+    ref,
+    floatingUIResult == null ? void 0 : floatingUIResult.reference
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(withBaseName(), className),
+      ref: triggerRef,
+      ...getReferenceProps(rest),
+      children
+    }
+  );
+});
+
+exports.DatePickerTrigger = DatePickerTrigger;
+//# sourceMappingURL=DatePickerTrigger.js.map

package/dist-cjs/date-picker/DatePickerTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerTrigger.js","sources":["../src/date-picker/DatePickerTrigger.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ReactNode, forwardRef } from \"react\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerTrigger\");\n\n/**\n * Props for the DatePickerTrigger component.\n */\nexport interface DatePickerTriggerProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const DatePickerTrigger = forwardRef<\n  HTMLDivElement,\n  DatePickerTriggerProps\n>((props: DatePickerTriggerProps, ref: React.Ref<HTMLDivElement>) => {\n  const { children, className, ...rest } = props;\n\n  const {\n    state: { floatingUIResult },\n    helpers: { getReferenceProps },\n  } = useDatePickerOverlay();\n\n  const triggerRef = useForkRef<HTMLDivElement>(\n    ref,\n    floatingUIResult?.reference,\n  );\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      ref={triggerRef}\n      {...getReferenceProps(rest)}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","useDatePickerOverlay","useForkRef","jsx","clsx"],"mappings":";;;;;;;;AAKA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AAUlD,MAAM,iBAAoB,GAAAC,gBAAA,CAG/B,CAAC,KAAA,EAA+B,GAAmC,KAAA;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzC,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,gBAAiB,EAAA;AAAA,IAC1B,OAAA,EAAS,EAAE,iBAAkB;AAAA,MAC3BC,8CAAqB,EAAA;AAEzB,EAAA,MAAM,UAAa,GAAAC,eAAA;AAAA,IACjB,GAAA;AAAA,IACA,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA;AAAA,GACpB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAK,EAAA,UAAA;AAAA,MACJ,GAAG,kBAAkB,IAAI,CAAA;AAAA,MAEzB;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/date-picker/useDatePicker.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
+var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
+
+function useDatePicker(props, ref) {
+  const {
+    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate }
+  } = LocalizationProvider.useLocalization();
+  const {
+    readOnly = false,
+    disabled,
+    selectionVariant,
+    defaultSelectedDate,
+    selectedDate: selectedDateProp,
+    onSelectionChange,
+    onApply,
+    minDate = defaultMinDate,
+    maxDate = defaultMaxDate,
+    onCancel
+  } = props;
+  const previousSelectedDate = react.useRef();
+  const datePickerRef = react.useRef(null);
+  const containerRef = core.useForkRef(ref, datePickerRef);
+  const {
+    state: { open },
+    helpers: { setOpen, setOnDismiss }
+  } = DatePickerOverlayProvider.useDatePickerOverlay();
+  const [selectedDate, setSelectedDate] = core.useControlled({
+    controlled: selectedDateProp,
+    default: defaultSelectedDate,
+    name: "DatePicker",
+    state: "selectedDate"
+  });
+  const [enableApply, setEnableApply] = react.useState(false);
+  const [cancelled, setCancelled] = react.useState(false);
+  react.useEffect(() => {
+    if (open) {
+      previousSelectedDate.current = selectedDate;
+      if (enableApply) {
+        setOnDismiss(cancel);
+      }
+      setCancelled(false);
+    }
+  }, [enableApply, open, setOnDismiss, setCancelled]);
+  react.useEffect(() => {
+    if (cancelled) {
+      setSelectedDate(previousSelectedDate == null ? void 0 : previousSelectedDate.current);
+    }
+  }, [cancelled, setSelectedDate]);
+  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = core.useFormFieldProps();
+  const isReadOnly = readOnly || formFieldReadOnly || false;
+  const isDisabled = disabled || formFieldDisabled || false;
+  const applySingle = react.useCallback(
+    (event, date) => {
+      setCancelled(false);
+      setOpen(false);
+      if (selectionVariant === "single") {
+        onApply == null ? void 0 : onApply(event, date);
+      }
+    },
+    [setCancelled, setOpen, onApply]
+  );
+  const selectSingle = react.useCallback(
+    (event, date, details) => {
+      setSelectedDate(date);
+      if (selectionVariant === "single") {
+        onSelectionChange == null ? void 0 : onSelectionChange(event, date, details);
+      }
+      if (!enableApply && date) {
+        applySingle(event, date);
+      }
+    },
+    [
+      applySingle,
+      enableApply,
+      onSelectionChange,
+      selectionVariant,
+      setSelectedDate
+    ]
+  );
+  const applyRange = react.useCallback(
+    (event, date) => {
+      setCancelled(false);
+      setOpen(false);
+      if (selectionVariant === "range") {
+        onApply == null ? void 0 : onApply(event, date);
+      }
+    },
+    [onApply, setCancelled, setOpen, selectionVariant]
+  );
+  const selectRange = react.useCallback(
+    (event, date, details) => {
+      setSelectedDate(date);
+      if (selectionVariant === "range") {
+        onSelectionChange == null ? void 0 : onSelectionChange(event, date, details);
+      }
+      if (!enableApply && (date == null ? void 0 : date.startDate) && (date == null ? void 0 : date.endDate)) {
+        applyRange(event, date);
+      }
+    },
+    [
+      applyRange,
+      enableApply,
+      onSelectionChange,
+      selectionVariant,
+      setSelectedDate
+    ]
+  );
+  const cancel = react.useCallback(() => {
+    setCancelled(true);
+    setOpen(false);
+    onCancel == null ? void 0 : onCancel();
+  }, [setCancelled, setOpen, onCancel]);
+  const returnValue = {
+    state: {
+      selectionVariant,
+      selectedDate,
+      cancelled,
+      enableApply,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      containerRef,
+      minDate,
+      maxDate
+    },
+    helpers: {
+      cancel,
+      setEnableApply
+    }
+  };
+  if (props.selectionVariant === "range") {
+    return {
+      ...returnValue,
+      helpers: {
+        ...returnValue.helpers,
+        apply: applyRange,
+        select: selectRange
+      }
+    };
+  }
+  return {
+    ...returnValue,
+    helpers: {
+      ...returnValue.helpers,
+      apply: applySingle,
+      select: selectSingle
+    }
+  };
+}
+
+exports.useDatePicker = useDatePicker;
+//# sourceMappingURL=useDatePicker.js.map

package/dist-cjs/date-picker/useDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport {\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n  DateInputRangeDetails,\n  DateInputSingleDetails,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport type {\n  RangeDatePickerState,\n  SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<TDate> {\n  /** If `true`, the component is disabled. */\n  disabled?: boolean;\n  /** If `true`, the component is read-only. */\n  readOnly?: boolean;\n  /**\n   * The minimum date for the range, default is 1900.\n   */\n  minDate?: TDate;\n  /**\n   * The maximum date for the range, default is 2100.\n   */\n  maxDate?: TDate;\n  /**\n   * Handler for when the date selection is cancelled.\n   */\n  onCancel?: () => void;\n}\n\n/**\n * Props for single date selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerSingleProps<TDate extends DateFrameworkType>\n  extends UseDatePickerBaseProps<TDate> {\n  /**\n   * Single date selection.\n   */\n  selectionVariant: \"single\";\n  /**\n   * The selected date. The selected date will be controlled when this prop is provided.\n   */\n  selectedDate?: SingleDateSelection<TDate> | null;\n  /**\n   * The initial selected date, when the selected date is uncontrolled.\n   */\n  defaultSelectedDate?: SingleDateSelection<TDate> | null;\n  /**\n   * Handler called when the selected date changes.\n   * @param event - The synthetic event.\n   * @param date - The selected date or null.\n   * @param details - The selected date details.\n   */\n  onSelectionChange?: (\n    event: SyntheticEvent,\n    date: SingleDateSelection<TDate> | null,\n    details?: DateInputSingleDetails,\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param event - The synthetic event.\n   * @param date - The selected date or null.\n   */\n  onApply?: (\n    event: SyntheticEvent,\n    date: SingleDateSelection<TDate> | null,\n  ) => void;\n}\n\n/**\n * Props for date range selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerRangeProps<TDate extends DateFrameworkType>\n  extends UseDatePickerBaseProps<TDate> {\n  /**\n   * Date range selection.\n   */\n  selectionVariant: \"range\";\n  /**\n   * The selected date range. The selected date will be controlled when this prop is provided.\n   */\n  selectedDate?: DateRangeSelection<TDate> | null;\n  /**\n   * The initial selected date range, when the selected date is uncontrolled.\n   */\n  defaultSelectedDate?: DateRangeSelection<TDate> | null;\n  /**\n   * Handler called when the selected date range changes.\n   * @param event - The synthetic event.\n   * @param date - The selected date range or null.\n   * @param details - The selected date range details.\n   */\n  onSelectionChange?: (\n    event: SyntheticEvent,\n    date: DateRangeSelection<TDate> | null,\n    details?: DateInputRangeDetails,\n  ) => void;\n  /**\n   * Handler called when the selected date range is confirmed/applied.\n   * @param event - The synthetic event.\n   * @param date - The selected date range.\n   */\n  onApply?: (\n    event: SyntheticEvent,\n    date: DateRangeSelection<TDate> | null,\n  ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type UseDatePickerProps<\n  TDate extends DateFrameworkType,\n  SelectionVariant,\n> = SelectionVariant extends \"single\"\n  ? UseDatePickerSingleProps<TDate>\n  : SelectionVariant extends \"range\"\n    ? UseDatePickerRangeProps<TDate>\n    : never;\n\n/**\n * Custom hook for managing date picker state.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n * @param props - The props for the date picker.\n * @param ref - The ref for the date picker container.\n * @returns The date picker state and helpers.\n */\nexport function useDatePicker<\n  TDate extends DateFrameworkType,\n  SelectionVariant extends \"single\" | \"range\",\n>(\n  props: UseDatePickerProps<TDate, SelectionVariant>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState<TDate> | RangeDatePickerState<TDate> {\n  const {\n    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n  } = useLocalization<TDate>();\n  const {\n    readOnly = false,\n    disabled,\n    selectionVariant,\n    defaultSelectedDate,\n    selectedDate: selectedDateProp,\n    onSelectionChange,\n    onApply,\n    minDate = defaultMinDate,\n    maxDate = defaultMaxDate,\n    onCancel,\n  } = props;\n\n  const previousSelectedDate = useRef<typeof selectedDateProp>();\n  const datePickerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(ref, datePickerRef);\n\n  const {\n    state: { open },\n    helpers: { setOpen, setOnDismiss },\n  } = useDatePickerOverlay();\n\n  const [selectedDate, setSelectedDate] = useControlled({\n    controlled: selectedDateProp,\n    default: defaultSelectedDate,\n    name: \"DatePicker\",\n    state: \"selectedDate\",\n  });\n\n  const [enableApply, setEnableApply] = useState<boolean>(false);\n  const [cancelled, setCancelled] = useState<boolean>(false);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n  useEffect(() => {\n    if (open) {\n      previousSelectedDate.current = selectedDate;\n      if (enableApply) {\n        setOnDismiss(cancel);\n      }\n      setCancelled(false);\n    }\n  }, [enableApply, open, setOnDismiss, setCancelled]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n  useEffect(() => {\n    if (cancelled) {\n      setSelectedDate(previousSelectedDate?.current);\n    }\n  }, [cancelled, setSelectedDate]);\n\n  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n    useFormFieldProps();\n  const isReadOnly = readOnly || formFieldReadOnly || false;\n  const isDisabled = disabled || formFieldDisabled || false;\n\n  const applySingle = useCallback(\n    (event: SyntheticEvent, date: SingleDateSelection<TDate> | null): void => {\n      setCancelled(false);\n      setOpen(false);\n      if (selectionVariant === \"single\") {\n        onApply?.(event, date);\n      }\n    },\n    [setCancelled, setOpen, onApply],\n  );\n\n  const selectSingle = useCallback(\n    (\n      event: SyntheticEvent,\n      date: SingleDateSelection<TDate> | null,\n      details: DateInputSingleDetails,\n    ) => {\n      setSelectedDate(date);\n      if (selectionVariant === \"single\") {\n        onSelectionChange?.(event, date, details);\n      }\n      if (!enableApply && date) {\n        applySingle(event, date);\n      }\n    },\n    [\n      applySingle,\n      enableApply,\n      onSelectionChange,\n      selectionVariant,\n      setSelectedDate,\n    ],\n  );\n\n  const applyRange = useCallback(\n    (event: SyntheticEvent, date: DateRangeSelection<TDate> | null): void => {\n      setCancelled(false);\n      setOpen(false);\n      if (selectionVariant === \"range\") {\n        onApply?.(event, date);\n      }\n    },\n    [onApply, setCancelled, setOpen, selectionVariant],\n  );\n\n  const selectRange = useCallback(\n    (\n      event: SyntheticEvent,\n      date: DateRangeSelection<TDate> | null,\n      details: DateInputRangeDetails,\n    ) => {\n      setSelectedDate(date);\n      if (selectionVariant === \"range\") {\n        onSelectionChange?.(event, date, details);\n      }\n      if (!enableApply && date?.startDate && date?.endDate) {\n        applyRange(event, date);\n      }\n    },\n    [\n      applyRange,\n      enableApply,\n      onSelectionChange,\n      selectionVariant,\n      setSelectedDate,\n    ],\n  );\n\n  const cancel = useCallback(() => {\n    setCancelled(true);\n    setOpen(false);\n    onCancel?.();\n  }, [setCancelled, setOpen, onCancel]);\n\n  const returnValue = {\n    state: {\n      selectionVariant,\n      selectedDate,\n      cancelled,\n      enableApply,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      containerRef,\n      minDate,\n      maxDate,\n    },\n    helpers: {\n      cancel,\n      setEnableApply,\n    },\n  };\n  if (props.selectionVariant === \"range\") {\n    return {\n      ...returnValue,\n      helpers: {\n        ...returnValue.helpers,\n        apply: applyRange,\n        select: selectRange,\n      },\n    } as RangeDatePickerState<TDate>;\n  }\n  return {\n    ...returnValue,\n    helpers: {\n      ...returnValue.helpers,\n      apply: applySingle,\n      select: selectSingle,\n    },\n  } as SingleDatePickerState<TDate>;\n}\n"],"names":["useLocalization","useRef","useForkRef","useDatePickerOverlay","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"mappings":"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"}

package/dist-cjs/deck-item/DeckItem.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDeckItem {\n  display: inline-block;\n}\n\n.saltDeckLayout-slide-vertical .saltDeckItem {\n  display: block;\n}\n\n.saltDeckItem-fade-previous,\n.saltDeckItem-fade-next,\n.saltDeckItem-static-previous,\n.saltDeckItem-static-next {\n  display: none;\n}\n\n.saltDeckItem-fade-in {\n  animation: var(--salt-animation-fade-in-center);\n}\n.saltDeckItem-fade-out {\n  animation: var(--salt-animation-fade-out-back);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DeckItem.css.js.map

package/dist-cjs/deck-item/DeckItem.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/deck-item/DeckItem.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var DeckItem$1 = require('./DeckItem.css.js');
+
+const withBaseName = core.makePrefixer("saltDeckItem");
+const DeckItem = react.forwardRef(
+  function DeckItem2({
+    activeIndex = 0,
+    animation,
+    children,
+    className,
+    index,
+    role = "group",
+    id: idProp,
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-deck-item",
+      css: DeckItem$1,
+      window: targetWindow
+    });
+    const sliderRef = react.useRef(null);
+    const isCurrent = activeIndex === index;
+    const position = react.useMemo(() => {
+      return isCurrent ? "current" : activeIndex < index ? "next" : "previous";
+    }, [activeIndex, index, isCurrent]);
+    const classesIndex = animation && position === "current" ? 0 : 1;
+    const getActiveClasses = [
+      `${animation || "fade"}-in`,
+      // in-right
+      `${animation || "fade"}-out`
+      // out-left
+    ];
+    const id = core.useId(idProp);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx.clsx(
+          withBaseName(),
+          withBaseName(`${animation ? animation : "static"}-${position}`),
+          {
+            [withBaseName(getActiveClasses[classesIndex])]: animation === "fade"
+          },
+          className
+        ),
+        ref: core.useForkRef(ref, sliderRef),
+        role,
+        tabIndex: isCurrent ? 0 : -1,
+        id,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.DeckItem = DeckItem;
+//# sourceMappingURL=DeckItem.js.map

package/dist-cjs/deck-item/DeckItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckItem.js","sources":["../src/deck-item/DeckItem.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useMemo, useRef } from \"react\";\nimport type { LayoutAnimation } from \"../deck-layout\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport deckItemCss from \"./DeckItem.css\";\n\nconst withBaseName = makePrefixer(\"saltDeckItem\");\n\nexport interface DeckItemProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex?: number;\n  animation?: LayoutAnimation;\n  index: number;\n  role?: string;\n}\n\nexport const DeckItem = forwardRef<HTMLDivElement, DeckItemProps>(\n  function DeckItem(\n    {\n      activeIndex = 0,\n      animation,\n      children,\n      className,\n      index,\n      role = \"group\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-item\",\n      css: deckItemCss,\n      window: targetWindow,\n    });\n\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const isCurrent = activeIndex === index;\n\n    const position = useMemo(() => {\n      return isCurrent ? \"current\" : activeIndex < index ? \"next\" : \"previous\";\n    }, [activeIndex, index, isCurrent]);\n\n    const classesIndex = animation && position === \"current\" ? 0 : 1;\n\n    const getActiveClasses = [\n      `${animation || \"fade\"}-in`, // in-right\n      `${animation || \"fade\"}-out`, // out-left\n    ];\n\n    const id = useId(idProp);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(`${animation ? animation : \"static\"}-${position}`),\n          {\n            [withBaseName(getActiveClasses[classesIndex])]:\n              animation === \"fade\",\n          },\n          className,\n        )}\n        ref={useForkRef(ref, sliderRef)}\n        role={role}\n        tabIndex={isCurrent ? 0 : -1}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DeckItem","useWindow","useComponentCssInjection","deckItemCss","useRef","useMemo","useId","jsx","clsx","useForkRef"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AASzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SACP,CAAA;AAAA,IACE,WAAc,GAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAYC,aAA8B,IAAI,CAAA;AAEpD,IAAA,MAAM,YAAY,WAAgB,KAAA,KAAA;AAElC,IAAM,MAAA,QAAA,GAAWC,cAAQ,MAAM;AAC7B,MAAA,OAAO,SAAY,GAAA,SAAA,GAAY,WAAc,GAAA,KAAA,GAAQ,MAAS,GAAA,UAAA;AAAA,KAC7D,EAAA,CAAC,WAAa,EAAA,KAAA,EAAO,SAAS,CAAC,CAAA;AAElC,IAAA,MAAM,YAAe,GAAA,SAAA,IAAa,QAAa,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA;AAE/D,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,CAAA,EAAG,aAAa,MAAM,CAAA,GAAA,CAAA;AAAA;AAAA,MACtB,CAAA,EAAG,aAAa,MAAM,CAAA,IAAA;AAAA;AAAA,KACxB;AAEA,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AAEvB,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,CAAG,EAAA,SAAA,GAAY,YAAY,QAAQ,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;AAAA,UAC9D;AAAA,YACE,CAAC,YAAa,CAAA,gBAAA,CAAiB,YAAY,CAAC,CAAC,GAC3C,SAAc,KAAA;AAAA,WAClB;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA,EAAKC,eAAW,CAAA,GAAA,EAAK,SAAS,CAAA;AAAA,QAC9B,IAAA;AAAA,QACA,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,QAC1B,EAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/deck-layout/DeckLayout.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDeckLayout {\n  overflow: hidden;\n}\n\n.saltDeckLayout-animate {\n  white-space: nowrap;\n}\n\n.saltDeckLayout-slide-horizontal {\n  width: var(--deckLayout-width);\n  transition: transform var(--salt-animation-duration);\n  transform: translateX(var(--deckLayout-transform-value));\n}\n\n.saltDeckLayout-slide-vertical {\n  height: var(--deckLayout-height);\n  transition: transform var(--salt-animation-duration);\n  transform: translateY(var(--deckLayout-transform-value));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DeckLayout.css.js.map

package/dist-cjs/deck-layout/DeckLayout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/deck-layout/DeckLayout.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var DeckItem = require('../deck-item/DeckItem.js');
+require('../responsive/useResizeObserver.js');
+var useWidth = require('../responsive/useWidth.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var DeckLayout$1 = require('./DeckLayout.css.js');
+
+const withBaseName = core.makePrefixer("saltDeckLayout");
+const DeckLayout = react.forwardRef(
+  function DeckLayout2({
+    activeIndex = 0,
+    animation,
+    className,
+    children,
+    direction = "horizontal",
+    style,
+    deckItemProps,
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-deck-layout",
+      css: DeckLayout$1,
+      window: targetWindow
+    });
+    const [deckItemRef, deckItemWidth] = useWidth.useWidth(true);
+    const [deckItemHeight, setDeckItemHeight] = react.useState(0);
+    const handleResize = react.useCallback(function handleResize2(contentRect) {
+      setDeckItemHeight(contentRect.height);
+    }, []);
+    core.useIsomorphicLayoutEffect(() => {
+      if (!deckItemRef.current) {
+        return void 0;
+      }
+      handleResize(deckItemRef.current.getBoundingClientRect());
+      const observer = new ResizeObserver(
+        ([{ contentRect }]) => {
+          handleResize(contentRect);
+        }
+      );
+      observer.observe(deckItemRef.current);
+      return () => {
+        observer.disconnect();
+      };
+    }, [deckItemRef, handleResize]);
+    const deckLayoutStyles = {
+      ...style,
+      "--deckLayout-width": `${deckItemWidth}px`,
+      "--deckLayout-height": `${deckItemHeight}px`
+    };
+    const innerStyles = {
+      "--deckLayout-transform-value": `-${activeIndex * 100}%`
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx.clsx(withBaseName(), className),
+        style: deckLayoutStyles,
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: clsx.clsx(
+              {
+                [withBaseName("animate")]: animation
+              },
+              {
+                [withBaseName(`${animation || "slide"}-${direction}`)]: animation
+              }
+            ),
+            style: innerStyles,
+            children: react.Children.map(children, (child, index) => {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                DeckItem.DeckItem,
+                {
+                  ref: deckItemRef,
+                  index,
+                  activeIndex,
+                  animation,
+                  ...deckItemProps,
+                  children: child
+                }
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+
+exports.DeckLayout = DeckLayout;
+//# sourceMappingURL=DeckLayout.js.map

package/dist-cjs/deck-layout/DeckLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport { DeckItem, type DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport deckLayoutCss from \"./DeckLayout.css\";\n\nexport type LayoutAnimation = \"slide\" | \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" | \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" | \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial item to render.\n   **/\n  activeIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   **/\n  animation?: LayoutAnimation;\n  /**\n   * The direction in which items will transition.\n   **/\n  direction?: LayoutAnimationDirection;\n  /**\n   * Props to be passed to the DeckItem component.\n   */\n  deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n  function DeckLayout(\n    {\n      activeIndex = 0,\n      animation,\n      className,\n      children,\n      direction = \"horizontal\",\n      style,\n      deckItemProps,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-layout\",\n      css: deckLayoutCss,\n      window: targetWindow,\n    });\n\n    const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n    const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n    const handleResize = useCallback(function handleResize(\n      contentRect: DOMRect,\n    ) {\n      setDeckItemHeight(contentRect.height);\n    }, []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!deckItemRef.current) {\n        return undefined;\n      }\n\n      handleResize(deckItemRef.current.getBoundingClientRect());\n\n      const observer = new ResizeObserver(\n        ([{ contentRect }]: ResizeObserverEntry[]) => {\n          handleResize(contentRect);\n        },\n      );\n      observer.observe(deckItemRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [deckItemRef, handleResize]);\n\n    const deckLayoutStyles = {\n      ...style,\n      \"--deckLayout-width\": `${deckItemWidth}px`,\n      \"--deckLayout-height\": `${deckItemHeight}px`,\n    };\n\n    const innerStyles = {\n      \"--deckLayout-transform-value\": `-${activeIndex * 100}%`,\n    } as CSSProperties;\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        style={deckLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={clsx(\n            {\n              [withBaseName(\"animate\")]: animation,\n            },\n            {\n              [withBaseName(`${animation || \"slide\"}-${direction}`)]: animation,\n            },\n          )}\n          style={innerStyles}\n        >\n          {Children.map(children, (child, index) => {\n            return (\n              <DeckItem\n                ref={deckItemRef}\n                index={index}\n                activeIndex={activeIndex}\n                animation={animation}\n                {...deckItemProps}\n              >\n                {child}\n              </DeckItem>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DeckLayout","useWindow","useComponentCssInjection","deckLayoutCss","useWidth","useState","useCallback","handleResize","useIsomorphicLayoutEffect","jsx","clsx","Children","DeckItem"],"mappings":"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"}

package/dist-cjs/dialog/DialogHeader.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n.saltDialogHeader-header {\n  margin: 0;\n}\n\n.saltDialogHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n}\n\n.saltDialogHeader-header > .saltText {\n  margin: 0;\n}\n\n.saltDialogHeader-actionsContainer {\n  align-self: flex-start;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n}\n\n/* Styles applied to DialogHeader when accent={true} */\n.saltDialogHeader-withAccent {\n  position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-300);\n  width: var(--salt-size-bar);\n  background: var(--salt-accent-background);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DialogHeader.css.js.map

package/dist-cjs/dialog/DialogHeader.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}