@salt-ds/lab 1.0.0-alpha.24 → 1.0.0-alpha.26

package/dist-es/pagination/Paginator.js

@@ -1,40 +1,30 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useForkRef } from '@salt-ds/core';
-import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
 import { clsx } from 'clsx';
-import { forwardRef, useCallback } from 'react';
-import { ArrowButton } from './ArrowButton.js';
-import { CompactControls } from './CompactControls.js';
-import { RegularControls } from './RegularControls.js';
+import { forwardRef } from 'react';
+import { makePrefixer, Button } from '@salt-ds/core';
+import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
+import { PageRanges } from './PageRanges.js';
 import { usePaginationContext } from './usePaginationContext.js';
-import { withBaseName } from './utils.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
-import css_248z from './Pagination.css.js';
+import css_248z from './Paginator.css.js';
 
+const withBaseName = makePrefixer("saltPaginator");
 const Paginator = forwardRef(
-  ({
-    className,
-    boundaryCount,
-    siblingCount,
-    showPreviousNext = true,
-    FormFieldProps: FormFieldProps2,
-    ...restProps
-  }, forwardedRef) => {
+  function Paginator2({ className, boundaryCount, siblingCount, ...restProps }, ref) {
     const targetWindow = useWindow();
     useComponentCssInjection({
-      testId: "salt-pagination",
+      testId: "salt-paginator",
       css: css_248z,
       window: targetWindow
     });
-    const { count, page, onPageChange, compact, setPaginatorElement } = usePaginationContext();
-    const ref = useForkRef(setPaginatorElement, forwardedRef);
-    const onPreviousPage = useCallback(() => {
-      onPageChange(Math.max(1, page - 1));
-    }, [page, onPageChange]);
-    const onNextPage = useCallback(() => {
-      onPageChange(Math.min(page + 1, count));
-    }, [page, onPageChange, count]);
+    const { count, page, onPageChange } = usePaginationContext();
+    const onPreviousPage = (event) => {
+      onPageChange(event, Math.max(1, page - 1));
+    };
+    const onNextPage = (event) => {
+      onPageChange(event, Math.min(page + 1, count));
+    };
     const isOnFirstPage = page === 1;
     const isOnLastPage = page === count;
     return /* @__PURE__ */ jsxs("div", {
@@ -42,29 +32,29 @@ const Paginator = forwardRef(
       ...restProps,
       ref,
       children: [
-        showPreviousNext && /* @__PURE__ */ jsx(ArrowButton, {
-          arrowButtonType: "previous",
-          onPress: onPreviousPage,
+        /* @__PURE__ */ jsx(Button, {
+          variant: "secondary",
+          "aria-label": "Previous Page",
+          onClick: onPreviousPage,
           disabled: isOnFirstPage,
-          children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+          className: withBaseName("arrowButton-previous"),
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
+            "aria-hidden": true
+          })
         }),
-        compact ? /* @__PURE__ */ jsx(CompactControls, {
-          count,
-          page,
-          onPageChange,
-          FormFieldProps: FormFieldProps2
-        }) : /* @__PURE__ */ jsx(RegularControls, {
-          count,
-          page,
-          onPageChange,
+        /* @__PURE__ */ jsx(PageRanges, {
           siblingCount,
           boundaryCount
         }),
-        showPreviousNext && /* @__PURE__ */ jsx(ArrowButton, {
-          arrowButtonType: "next",
-          onPress: onNextPage,
+        /* @__PURE__ */ jsx(Button, {
+          variant: "secondary",
+          "aria-label": "Next Page",
+          onClick: onNextPage,
           disabled: isOnLastPage,
-          children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+          className: withBaseName("arrowButton-next"),
+          children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+            "aria-hidden": true
+          })
         })
       ]
     });

package/dist-es/pagination/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginator.js","sources":["../src/pagination/Paginator.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { ArrowButton } from \"./ArrowButton\";\nimport { CompactControls } from \"./CompactControls\";\nimport { RegularControls } from \"./RegularControls\";\nimport { usePaginationContext } from \"./usePaginationContext\";\nimport { withBaseName } from \"./utils\";\nimport { FormFieldLegacyProps as FormFieldProps } from \"../form-field-legacy\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginationCss from \"./Pagination.css\";\n\nexport interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {\n  boundaryCount?: number;\n  siblingCount?: number;\n  showPreviousNext?: boolean;\n  FormFieldProps?: Partial<FormFieldProps>;\n}\n\nexport const Paginator = forwardRef<HTMLDivElement, PaginatorProps>(\n  (\n    {\n      className,\n      boundaryCount,\n      siblingCount,\n      showPreviousNext = true,\n      FormFieldProps,\n      ...restProps\n    },\n    forwardedRef\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-pagination\",\n      css: paginationCss,\n      window: targetWindow,\n    });\n\n    const { count, page, onPageChange, compact, setPaginatorElement } =\n      usePaginationContext();\n\n    const ref = useForkRef(setPaginatorElement, forwardedRef);\n\n    const onPreviousPage = useCallback(() => {\n      onPageChange(Math.max(1, page - 1));\n    }, [page, onPageChange]);\n\n    const onNextPage = useCallback(() => {\n      onPageChange(Math.min(page + 1, count));\n    }, [page, onPageChange, count]);\n\n    const isOnFirstPage = page === 1;\n    const isOnLastPage = page === count;\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n        {showPreviousNext && (\n          <ArrowButton\n            arrowButtonType=\"previous\"\n            onPress={onPreviousPage}\n            disabled={isOnFirstPage}\n          >\n            <ChevronLeftIcon />\n          </ArrowButton>\n        )}\n        {compact ? (\n          <CompactControls\n            count={count}\n            page={page}\n            onPageChange={onPageChange}\n            FormFieldProps={FormFieldProps}\n          />\n        ) : (\n          <RegularControls\n            count={count}\n            page={page}\n            onPageChange={onPageChange}\n            siblingCount={siblingCount}\n            boundaryCount={boundaryCount}\n          />\n        )}\n        {showPreviousNext && (\n          <ArrowButton\n            arrowButtonType=\"next\"\n            onPress={onNextPage}\n            disabled={isOnLastPage}\n          >\n            <ChevronRightIcon />\n          </ArrowButton>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["FormFieldProps","paginationCss"],"mappings":";;;;;;;;;;;;;;AAuBO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,SAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAmB,GAAA,IAAA;AAAA,IACnB,cAAAA,EAAAA,eAAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,cAAc,OAAS,EAAA,mBAAA,KAC1C,oBAAqB,EAAA,CAAA;AAEvB,IAAM,MAAA,GAAA,GAAM,UAAW,CAAA,mBAAA,EAAqB,YAAY,CAAA,CAAA;AAExD,IAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,MAAA,YAAA,CAAa,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,KACjC,EAAA,CAAC,IAAM,EAAA,YAAY,CAAC,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,YAAA,CAAa,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,KACrC,EAAA,CAAC,IAAM,EAAA,YAAA,EAAc,KAAK,CAAC,CAAA,CAAA;AAE9B,IAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA,CAAA;AAC/B,IAAA,MAAM,eAAe,IAAS,KAAA,KAAA,CAAA;AAE9B,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,MAC7D,QAAA,EAAA;AAAA,QAAA,gBAAA,oBACE,GAAA,CAAA,WAAA,EAAA;AAAA,UACC,eAAgB,EAAA,UAAA;AAAA,UAChB,OAAS,EAAA,cAAA;AAAA,UACT,QAAU,EAAA,aAAA;AAAA,UAEV,8BAAC,eAAgB,EAAA,EAAA,CAAA;AAAA,SACnB,CAAA;AAAA,QAED,0BACE,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,KAAA;AAAA,UACA,IAAA;AAAA,UACA,YAAA;AAAA,UACA,cAAgBD,EAAAA,eAAAA;AAAA,SAClB,oBAEC,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,KAAA;AAAA,UACA,IAAA;AAAA,UACA,YAAA;AAAA,UACA,YAAA;AAAA,UACA,aAAA;AAAA,SACF,CAAA;AAAA,QAED,oCACE,GAAA,CAAA,WAAA,EAAA;AAAA,UACC,eAAgB,EAAA,MAAA;AAAA,UAChB,OAAS,EAAA,UAAA;AAAA,UACT,QAAU,EAAA,YAAA;AAAA,UAEV,8BAAC,gBAAiB,EAAA,EAAA,CAAA;AAAA,SACpB,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Paginator.js","sources":["../src/pagination/Paginator.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, MouseEventHandler } from \"react\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { PageRanges } from \"./PageRanges\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginatorCss from \"./Paginator.css\";\n\nconst withBaseName = makePrefixer(\"saltPaginator\");\n\nexport interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Number of pages next to the arrow buttons when page range is truncated.\n   */\n  boundaryCount?: number;\n  /**\n   * Number of pages on each side of the current page when page range is truncated.\n   */\n  siblingCount?: number;\n}\n\nexport const Paginator = forwardRef<HTMLDivElement, PaginatorProps>(\n  function Paginator(\n    { className, boundaryCount, siblingCount, ...restProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-paginator\",\n      css: paginatorCss,\n      window: targetWindow,\n    });\n\n    const { count, page, onPageChange } = usePaginationContext();\n\n    const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, Math.max(1, page - 1));\n    };\n\n    const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, Math.min(page + 1, count));\n    };\n\n    const isOnFirstPage = page === 1;\n    const isOnLastPage = page === count;\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n        <Button\n          variant=\"secondary\"\n          aria-label=\"Previous Page\"\n          onClick={onPreviousPage}\n          disabled={isOnFirstPage}\n          className={withBaseName(\"arrowButton-previous\")}\n        >\n          <ChevronLeftIcon aria-hidden />\n        </Button>\n        <PageRanges siblingCount={siblingCount} boundaryCount={boundaryCount} />\n        <Button\n          variant=\"secondary\"\n          aria-label=\"Next Page\"\n          onClick={onNextPage}\n          disabled={isOnLastPage}\n          className={withBaseName(\"arrowButton-next\")}\n        >\n          <ChevronRightIcon aria-hidden />\n        </Button>\n      </div>\n    );\n  }\n);\n"],"names":["Paginator","paginatorCss"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAa1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,WACP,EAAE,SAAA,EAAW,eAAe,YAAiB,EAAA,GAAA,SAAA,IAC7C,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA,CAAA;AAE3D,IAAM,MAAA,cAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,KAC3C,CAAA;AAEA,IAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,KAC/C,CAAA;AAEA,IAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA,CAAA;AAC/B,IAAA,MAAM,eAAe,IAAS,KAAA,KAAA,CAAA;AAE9B,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,YAAW,EAAA,eAAA;AAAA,UACX,OAAS,EAAA,cAAA;AAAA,UACT,QAAU,EAAA,aAAA;AAAA,UACV,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,UAE9C,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,YAAgB,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,SAC/B,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA;AAAA,UAAW,YAAA;AAAA,UAA4B,aAAA;AAAA,SAA8B,CAAA;AAAA,wBACrE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,YAAW,EAAA,WAAA;AAAA,UACX,OAAS,EAAA,UAAA;AAAA,UACT,QAAU,EAAA,YAAA;AAAA,UACV,SAAA,EAAW,aAAa,kBAAkB,CAAA;AAAA,UAE1C,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,YAAiB,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,SAChC,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/pagination/usePaginationContext.js

@@ -1,5 +1,5 @@
-import { paginationContext } from './PaginationContext.js';
 import { useContext } from 'react';
+import { paginationContext } from './PaginationContext.js';
 
 const usePaginationContext = () => {
   const context = useContext(paginationContext);

package/dist-es/pagination/usePaginationContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePaginationContext.js","sources":["../src/pagination/usePaginationContext.ts"],"sourcesContent":["import { paginationContext } from \"./PaginationContext\";\nimport { useContext } from \"react\";\n\nexport const usePaginationContext = () => {\n  const context = useContext(paginationContext);\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!context) {\n      console.error(`usePaginationContext should be used inside of Pagination`);\n    }\n  }\n  return context;\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,uBAAuB,MAAM;AACxC,EAAM,MAAA,OAAA,GAAU,WAAW,iBAAiB,CAAA,CAAA;AAC5C,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA,CAAQ,MAAM,CAA0D,wDAAA,CAAA,CAAA,CAAA;AAAA,KAC1E;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"usePaginationContext.js","sources":["../src/pagination/usePaginationContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { paginationContext } from \"./PaginationContext\";\n\nexport const usePaginationContext = () => {\n  const context = useContext(paginationContext);\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!context) {\n      console.error(`usePaginationContext should be used inside of Pagination`);\n    }\n  }\n  return context;\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,uBAAuB,MAAM;AACxC,EAAM,MAAA,OAAA,GAAU,WAAW,iBAAiB,CAAA,CAAA;AAC5C,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA,CAAQ,MAAM,CAA0D,wDAAA,CAAA,CAAA,CAAA;AAAA,KAC1E;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}

package/dist-es/pill-next/PillNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element */\n\n.saltPillNext {\n  display: flex;\n  max-width: 100%;\n}\n\n.saltPillNext-action {\n  --pillNext-background: var(--salt-actionable-primary-background);\n  --pillNext-background-active: var(--salt-actionable-primary-background-active);\n  --pillNext-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --pillNext-background-hover: var(--salt-actionable-primary-background-hover);\n  --pillNext-text-color: var(--salt-actionable-primary-foreground);\n  --pillNext-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --pillNext-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n  --pillNext-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n}\n\n.saltPillNext-action {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  background: var(--pillNext-background);\n  border-radius: 0;\n  border: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  outline: 0;\n  position: relative;\n  gap: var(--salt-spacing-50);\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  color: var(--pillNext-text-color);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltPillNext-label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.saltPillNext-close-button {\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-padding: var(--salt-spacing-50);\n}\n\n.saltPillNext-action .saltIcon {\n  --saltIcon-color: currentColor;\n}\n\n/* Style applied to Pill if `onClick` prop is provided  */\n.saltPillNext-clickable {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPillNext-clickable:hover,\n.saltPillNext-clickable:focus-visible {\n  color: var(--pillNext-text-color-hover);\n  background: var(--pillNext-background-hover);\n}\n\n.saltPillNext-clickable.saltPillNext-disabled:hover {\n  color: var(--pillNext-text-color);\n  background: var(--pillNext-background);\n}\n\n.saltPillNext-clickable.saltPillNext-active,\n.saltPillNext-clickable:active {\n  background: var(--pillNext-background-active);\n  color: var(--pillNext-text-color-active);\n}\n\n.saltPillNext-clickable.saltPillNext-disabled.saltPillNext-active,\n.saltPillNext-clickable.saltPillNext-disabled:active {\n  background: var(--pillNext-background);\n  color: var(--pillNext-text-color);\n}\n\n/* Style applied to Pill on focus */\n.saltPillNext-action:focus-visible {\n  outline: var(--salt-focused-outline);\n  /* increase index by one so the focus ring sits on top of the sibling button */\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Style applied to Pill when disabled */\n.saltPillNext-action.saltPillNext-disabled,\n.saltPillNext-action.saltPillNext-disabled:hover {\n  color: var(--pillNext-text-color-disabled);\n  background: var(--pillNext-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltPillNext {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  background: var(--saltPillNext-background, var(--salt-actionable-primary-background));\n  border-radius: 0;\n  border: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  outline: 0;\n  position: relative;\n  gap: var(--salt-spacing-50);\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  color: var(--saltPillNext-color, var(--salt-actionable-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable  */\n.saltPillNext-clickable {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPillNext-clickable:hover,\n.saltPillNext-clickable:focus-visible {\n  color: var(--salt-actionable-primary-foreground-hover);\n  background: var(--salt-actionable-primary-background-hover);\n}\n\n.saltPillNext-clickable.saltPillNext-active,\n.saltPillNext-clickable:active {\n  background: var(--salt-actionable-primary-background-active);\n  color: var(--salt-actionable-primary-foreground-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPillNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Style applied to Pill when disabled */\n.saltPillNext:disabled,\n.saltPillNext:disabled:hover {\n  color: var(--salt-actionable-primary-foreground-disabled);\n  background: var(--salt-actionable-primary-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=PillNext.css.js.map

package/dist-es/pill-next/PillNext.js

@@ -1,15 +1,23 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
-import { makePrefixer, useButton, Button } from '@salt-ds/core';
+import { makePrefixer, useButton } from '@salt-ds/core';
 import css_248z from './PillNext.css.js';
-import { CloseIcon } from '@salt-ds/icons';
 
 const withBaseName = makePrefixer("saltPillNext");
 const PillNext = forwardRef(
-  function PillNext2({ children, className, icon, disabled, onClose, ...restProps }, ref) {
+  function PillNext2({
+    children,
+    className,
+    disabled,
+    onKeyUp,
+    onKeyDown,
+    onClick,
+    onBlur,
+    ...rest
+  }, ref) {
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-pill-next",
@@ -18,37 +26,24 @@ const PillNext = forwardRef(
     });
     const { buttonProps, active } = useButton({
       disabled,
-      ...restProps
+      onKeyUp,
+      onKeyDown,
+      onClick,
+      onBlur
     });
     const { tabIndex, ...restButtonProps } = buttonProps;
-    return /* @__PURE__ */ jsxs("div", {
-      className: clsx(withBaseName(), className),
-      children: [
-        /* @__PURE__ */ jsxs("button", {
-          "data-testid": "pill",
-          ref,
-          className: clsx(withBaseName("action"), withBaseName("clickable"), {
-            [withBaseName("active")]: active,
-            [withBaseName("disabled")]: disabled
-          }),
-          ...restButtonProps,
-          ...restProps,
-          children: [
-            icon,
-            /* @__PURE__ */ jsx("span", {
-              className: withBaseName("label"),
-              children
-            })
-          ]
-        }),
-        onClose && /* @__PURE__ */ jsx(Button, {
-          "data-testid": "pill-close-button",
-          className: withBaseName("close-button"),
-          disabled,
-          onClick: onClose,
-          children: /* @__PURE__ */ jsx(CloseIcon, {})
-        })
-      ]
+    return /* @__PURE__ */ jsx("button", {
+      "data-testid": "pill",
+      ref,
+      className: clsx(
+        withBaseName(),
+        withBaseName("clickable"),
+        { [withBaseName("active")]: active },
+        className
+      ),
+      ...restButtonProps,
+      ...rest,
+      children
     });
   }
 );

package/dist-es/pill-next/PillNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillNext.js","sources":["../src/pill-next/PillNext.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef, MouseEvent } from \"react\";\nimport clsx from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Button, makePrefixer, useButton } from \"@salt-ds/core\";\nimport pillCss from \"./PillNext.css\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nexport interface PillNextProps extends ComponentPropsWithoutRef<\"button\"> {\n  /* If true the pill will be disabled */\n  disabled?: boolean;\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /* Pass an element to render an icon descriptor on the left of the label */\n  icon?: React.ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltPillNext\");\n\nexport const PillNext = forwardRef<HTMLButtonElement, PillNextProps>(\n  function PillNext(\n    { children, className, icon, disabled, onClose, ...restProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-pill-next\",\n      css: pillCss,\n      window: targetWindow,\n    });\n    const { buttonProps, active } = useButton<HTMLButtonElement>({\n      disabled,\n      ...restProps,\n    });\n    // we do not want to spread tab index in this case because the button element\n    // does not require tabindex=\"0\" attribute\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { tabIndex, ...restButtonProps } = buttonProps;\n\n    return (\n      <div className={clsx(withBaseName(), className)}>\n        <button\n          data-testid=\"pill\"\n          ref={ref}\n          className={clsx(withBaseName(\"action\"), withBaseName(\"clickable\"), {\n            [withBaseName(\"active\")]: active,\n            [withBaseName(\"disabled\")]: disabled,\n          })}\n          {...restButtonProps}\n          {...restProps}\n        >\n          {icon}\n          <span className={withBaseName(\"label\")}>{children}</span>\n        </button>\n        {onClose && (\n          <Button\n            data-testid=\"pill-close-button\"\n            className={withBaseName(\"close-button\")}\n            disabled={disabled}\n            onClick={onClose}\n          >\n            <CloseIcon />\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["PillNext","pillCss"],"mappings":";;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,MAAM,QAAU,EAAA,OAAA,EAAA,GAAY,SAAU,EAAA,EAC7D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAI,SAA6B,CAAA;AAAA,MAC3D,QAAA;AAAA,MACA,GAAG,SAAA;AAAA,KACJ,CAAA,CAAA;AAID,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AAEzC,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAC5C,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,QAAA,EAAA;AAAA,UACC,aAAY,EAAA,MAAA;AAAA,UACZ,GAAA;AAAA,UACA,WAAW,IAAK,CAAA,YAAA,CAAa,QAAQ,CAAG,EAAA,YAAA,CAAa,WAAW,CAAG,EAAA;AAAA,YACjE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC7B,CAAA;AAAA,UACA,GAAG,eAAA;AAAA,UACH,GAAG,SAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,IAAA;AAAA,4BACA,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,QAAA;AAAA,aAAS,CAAA;AAAA,WAAA;AAAA,SACpD,CAAA;AAAA,QACC,2BACE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,aAAY,EAAA,mBAAA;AAAA,UACZ,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACtC,QAAA;AAAA,UACA,OAAS,EAAA,OAAA;AAAA,UAET,8BAAC,SAAU,EAAA,EAAA,CAAA;AAAA,SACb,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"PillNext.js","sources":["../src/pill-next/PillNext.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useButton } from \"@salt-ds/core\";\nimport pillCss from \"./PillNext.css\";\n\nconst withBaseName = makePrefixer(\"saltPillNext\");\n\n/* eslint-disable @typescript-eslint/no-empty-interface */\nexport interface PillNextProps extends ComponentPropsWithoutRef<\"button\"> {}\n\nexport const PillNext = forwardRef<HTMLButtonElement, PillNextProps>(\n  function PillNext(\n    {\n      children,\n      className,\n      disabled,\n      onKeyUp,\n      onKeyDown,\n      onClick,\n      onBlur,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-pill-next\",\n      css: pillCss,\n      window: targetWindow,\n    });\n    const { buttonProps, active } = useButton<HTMLButtonElement>({\n      disabled,\n      onKeyUp,\n      onKeyDown,\n      onClick,\n      onBlur,\n    });\n    // we do not want to spread tab index in this case because the button element\n    // does not require tabindex=\"0\" attribute\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { tabIndex, ...restButtonProps } = buttonProps;\n    return (\n      <button\n        data-testid=\"pill\"\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          withBaseName(\"clickable\"),\n          { [withBaseName(\"active\")]: active },\n          className\n        )}\n        {...restButtonProps}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n"],"names":["PillNext","pillCss"],"mappings":";;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAKzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAI,SAA6B,CAAA;AAAA,MAC3D,QAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,KACD,CAAA,CAAA;AAID,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AACzC,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,aAAY,EAAA,MAAA;AAAA,MACZ,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,WAAW,CAAA;AAAA,QACxB,EAAE,CAAC,YAAa,CAAA,QAAQ,IAAI,MAAO,EAAA;AAAA,QACnC,SAAA;AAAA,OACF;AAAA,MACC,GAAG,eAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-types/combo-box-next/useComboBox.d.ts

@@ -17,8 +17,8 @@ export declare const useComboBox: ({ defaultInputValue, onFocus, onMouseOver, on
     portalProps: {
         open: boolean;
         setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-        floating: (node: HTMLElement | null) => void;
-        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+        reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
         getTriggerProps: () => Record<string, unknown>;
         getPortalProps: () => import("react").HTMLProps<HTMLDivElement>;
         getPosition: () => {

package/dist-types/combo-box-next/useComboboxPortal.d.ts

@@ -8,8 +8,8 @@ export interface UseComboBoxPortalProps {
 export declare function useComboboxPortal(props?: UseComboBoxPortalProps): {
     open: boolean;
     setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    floating: (node: HTMLElement | null) => void;
-    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+    reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
     getPortalProps: () => HTMLProps<HTMLDivElement>;
     getTriggerProps: () => Record<string, unknown>;
     getPosition: () => {

package/dist-types/dialog/useDialog.d.ts

@@ -3,19 +3,18 @@ export declare type UseDialogProps = Partial<Pick<UseFloatingUIProps, "onOpenCha
 export declare function useDialog(props: UseDialogProps): {
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
-    floating: (node: HTMLElement | null) => void;
+    floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
     context: {
-        x: number | null;
-        y: number | null;
+        x: number;
+        y: number;
         placement: import("@floating-ui/utils").Placement;
         strategy: import("@floating-ui/utils").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;
-        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-        floating: (node: HTMLElement | null) => void;
-        update: () => void;
         isPositioned: boolean;
+        update: () => void;
+        floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;

package/dist-types/drawer/useDrawer.d.ts

@@ -3,19 +3,18 @@ export declare type UseDrawerProps = Partial<Pick<UseFloatingUIProps, "onOpenCha
 export declare function useDrawer(props: UseDrawerProps): {
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
-    floating: (node: HTMLElement | null) => void;
+    floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
     context: {
-        x: number | null;
-        y: number | null;
+        x: number;
+        y: number;
         placement: import("@floating-ui/utils").Placement;
         strategy: import("@floating-ui/utils").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;
-        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-        floating: (node: HTMLElement | null) => void;
-        update: () => void;
         isPositioned: boolean;
+        update: () => void;
+        floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;

package/dist-types/dropdown-next/useDropdownNext.d.ts

@@ -13,10 +13,18 @@ export declare const useDropdownNext: ({ listProps, openControlProp, onOpenChang
         mouseDownHandler: () => void;
         listSelectHandler: () => void;
     };
-    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     open: boolean;
     getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => Record<string, unknown>;
-    getItemProps: (userProps?: HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: (Omit<HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean | undefined;
+        selected?: boolean | undefined;
+    }) | undefined) => Record<string, unknown>;
     activeDescendant: string | undefined;
     selectedItem: string | undefined;
     setSelectedItem: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
@@ -26,8 +34,8 @@ export declare const useDropdownNext: ({ listProps, openControlProp, onOpenChang
     portalProps: {
         open: boolean;
         setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-        floating: (node: HTMLElement | null) => void;
-        reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+        floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+        reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
         getFloatingProps: (userProps?: HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
         getDropdownNextProps: () => HTMLProps<HTMLDivElement>;
         getPosition: () => {

package/dist-types/file-drop-zone/FileDropZone.d.ts

@@ -1,54 +1,17 @@
-import { HTMLAttributes, ReactNode, SyntheticEvent } from "react";
-import { FilesValidator } from "./validators";
-export declare type FilesAcceptedEventHandler = (files: ReadonlyArray<File>, event: SyntheticEvent) => void;
-export declare type FilesRejectedEventHandler<ErrorType = string> = (errors: ReadonlyArray<ErrorType>, event: SyntheticEvent) => void;
-/**
- * Removed deprecated props
- *
- * - onDrop
- * - onFileTypeError
- * - showUploadButton
- */
-export interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * `accept` attribute for HTML <input>.
-     *
-     * A comma separated list of file types the user can pick from the file input dialog box.
-     */
-    accept?: string;
-    /**
-     * The text content of the drop area component.
-     */
-    children?: ReactNode;
-    /**
-     * Additional usage information.
-     */
-    description?: string;
+import { ValidationStatus } from "@salt-ds/core";
+import { DragEvent, ComponentPropsWithoutRef } from "react";
+export interface FileDropZoneProps extends Omit<ComponentPropsWithoutRef<"div">, "onDrop"> {
     /**
      * If `true`, the file drop zone will be disabled.
      */
     disabled?: boolean;
     /**
-     * This prop is used to help implement the accessibility logic.
-     * If you don't provide this prop. It falls back to a randomly generated id.
-     */
-    id?: string;
-    /**
-     * Callback on successful file drop or selection.
-     */
-    onFilesAccepted?: FilesAcceptedEventHandler;
-    /**
-     * @see `validate` prop
-     * Callback on drop or input in case of an error. A list of errors will be provided as input.
+     * Status indicator to be displayed.
      */
-    onFilesRejected?: FilesRejectedEventHandler;
+    status?: Omit<ValidationStatus, "info" | "warning">;
     /**
-     * A list of custom validation functions. Every function is provided with the entire file list as input
-     * thus can perform validations on all files. Each function needs to return one or more errors in case of
-     * a failed validation, or `undefined` in case of a successful one.
-     *
-     * All errors are collected in the end and returned as an array to `onFilesRejected`.
+     * Callback for on drop event
      */
-    validate?: ReadonlyArray<FilesValidator<any>>;
+    onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;
 }
 export declare const FileDropZone: import("react").ForwardRefExoticComponent<FileDropZoneProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/file-drop-zone/FileDropZoneIcon.d.ts

@@ -0,0 +1,9 @@
+import { ValidationStatus } from "@salt-ds/core";
+import { IconProps } from "@salt-ds/icons";
+export interface FileDropZoneIconProps extends IconProps {
+    /**
+     * Status indicator to be displayed.
+     */
+    status?: ValidationStatus;
+}
+export declare const FileDropZoneIcon: import("react").ForwardRefExoticComponent<FileDropZoneIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, SyntheticEvent } from "react";
+export interface FileDropZoneTriggerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /**
+     * `accept` attribute for HTML <input>.
+     *
+     * A comma separated list of file types the user can pick from the file input dialog box.
+     */
+    accept?: string;
+    /**
+     * Disable all trigger elements.
+     */
+    disabled?: boolean;
+    /**
+     * Allows multiple files to be uploaded.
+     */
+    multiple?: boolean;
+    /**
+     * Callback for input change event
+     */
+    onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;
+}
+export declare const FileDropZoneTrigger: import("react").ForwardRefExoticComponent<FileDropZoneTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/file-drop-zone/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./FileDropZone";
-export * from "./validators";
+export * from "./FileDropZoneIcon";
+export * from "./FileDropZoneTrigger";

package/dist-types/file-drop-zone/internal/utils.d.ts

@@ -1,9 +1,3 @@
 import { DragEvent } from "react";
-import { FilesValidator } from "../validators";
-export declare const toArray: (obj: any) => any[];
 export declare const containsFiles: (e: DragEvent) => boolean | FileList | null;
 export declare const extractFiles: (e: DragEvent) => File[];
-export declare const validateFiles: ({ files, validate, }: {
-    files: ReadonlyArray<File>;
-    validate: ReadonlyArray<FilesValidator>;
-}) => string[];

package/dist-types/pagination/CompactInput.d.ts

@@ -1,8 +1,2 @@
-import { FormFieldLegacyProps as FormFieldProps } from "../form-field-legacy";
-export interface CompactInputProps {
-    count: number;
-    page: number;
-    onPageChange: (page: number) => void;
-    FormFieldProps?: Partial<FormFieldProps>;
-}
-export declare const CompactInput: ({ page, count, onPageChange, FormFieldProps: { className, ...restFormFieldLegacyProps }, }: CompactInputProps) => JSX.Element;
+import { InputProps } from "@salt-ds/core";
+export declare const CompactInput: import("react").ForwardRefExoticComponent<Pick<InputProps, "variant" | "inputRef"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist-types/pagination/CompactPaginator.d.ts

@@ -0,0 +1 @@
+export declare const CompactPaginator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/pagination/GoToInput.d.ts

@@ -1,7 +1,16 @@
-import { HTMLAttributes } from "react";
-import { FormFieldLegacyProps as FormFieldProps } from "../form-field-legacy";
+import { HTMLAttributes, Ref } from "react";
 export interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Input label.
+     */
     label?: string;
-    FormFieldProps?: Partial<FormFieldProps>;
+    /**
+     * Optional ref for the input component
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Change input variant.
+     */
+    inputVariant?: "primary" | "secondary";
 }
-export declare const GoToInput: import("react").ForwardRefExoticComponent<GoToInputProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const GoToInput: import("react").ForwardRefExoticComponent<GoToInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/pagination/PageButton.d.ts

@@ -1,7 +1,6 @@
 export interface PageButtonProps {
     page: number;
-    isSelected?: boolean;
-    onPageChange: (page: number) => void;
+    selected?: boolean;
     disabled?: boolean;
 }
-export declare const PageButton: ({ page, isSelected, onPageChange, disabled, }: PageButtonProps) => JSX.Element;
+export declare const PageButton: import("react").ForwardRefExoticComponent<PageButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/pagination/PageRanges.d.ts

@@ -0,0 +1,5 @@
+export interface PageRangesProps {
+    boundaryCount?: number;
+    siblingCount?: number;
+}
+export declare function PageRanges({ siblingCount, boundaryCount, }: PageRangesProps): JSX.Element;

package/dist-types/pagination/Pagination.d.ts

@@ -1,9 +1,20 @@
-import { HTMLAttributes } from "react";
+import { HTMLAttributes, SyntheticEvent } from "react";
 export interface PaginationProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Number of pages.
+     */
     count: number;
+    /**
+     * Current/active page.
+     */
     page?: number;
-    initialPage?: number;
-    onPageChange?: (page: number) => void;
-    compact?: boolean;
+    /**
+     * Default current/active page.
+     */
+    defaultPage?: number;
+    /**
+     * Callback function triggered when current page changed.
+     */
+    onPageChange?: (event: SyntheticEvent, page: number) => void;
 }
 export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/dist-types/pagination/PaginationContext.d.ts

@@ -1,9 +1,7 @@
+import { SyntheticEvent } from "react";
 export interface PaginationContext {
     page: number;
     count: number;
-    compact: boolean;
-    onPageChange: (page: number) => void;
-    paginatorElement?: HTMLDivElement;
-    setPaginatorElement: (element: HTMLDivElement) => void;
+    onPageChange: (event: SyntheticEvent, page: number) => void;
 }
 export declare const paginationContext: import("react").Context<PaginationContext>;

package/dist-types/pagination/Paginator.d.ts

@@ -1,9 +1,12 @@
 import { HTMLAttributes } from "react";
-import { FormFieldLegacyProps as FormFieldProps } from "../form-field-legacy";
 export interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number of pages next to the arrow buttons when page range is truncated.
+     */
     boundaryCount?: number;
+    /**
+     * Number of pages on each side of the current page when page range is truncated.
+     */
     siblingCount?: number;
-    showPreviousNext?: boolean;
-    FormFieldProps?: Partial<FormFieldProps>;
 }
 export declare const Paginator: import("react").ForwardRefExoticComponent<PaginatorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/pagination/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./Pagination";
 export * from "./Paginator";
+export * from "./CompactInput";
+export * from "./CompactPaginator";
 export * from "./GoToInput";