@salt-ds/lab 1.0.0-alpha.0

package/dist-es/packages/lab/src/pagination/PageButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler } from \"react\";\nimport { withBaseName } from \"./utils\";\nimport { Button } from \"@salt-ds/core\";\nimport cn from \"classnames\";\n\nexport interface PageButtonProps {\n  page: number;\n  isSelected?: boolean;\n  onPageChange: (page: number) => void;\n  disabled?: boolean;\n}\n\nexport const PageButton = ({\n  page,\n  isSelected,\n  onPageChange,\n  disabled,\n}: PageButtonProps) => {\n  const name = `Page ${page}`;\n\n  const onKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    if (event.key === \"Enter\") {\n      onPageChange(page);\n    }\n  };\n\n  const onClick: MouseEventHandler<HTMLButtonElement> = () => {\n    onPageChange(page);\n  };\n\n  return (\n    <Button\n      aria-label={name}\n      name={name}\n      aria-current={isSelected ? \"page\" : undefined}\n      variant=\"secondary\"\n      className={cn(withBaseName(\"pageButton\"), {\n        [withBaseName(\"pageButtonSelected\")]: isSelected,\n        [withBaseName(\"pageButtonFixed\")]: page < 100,\n      })}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      role=\"link\"\n      disabled={disabled}\n    >\n      {page}\n    </Button>\n  );\n};\n"],"names":["cn"],"mappings":";;;;;AAYO,MAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,OAAO,CAAQ,KAAA,EAAA,IAAA,CAAA,CAAA,CAAA;AAErB,EAAM,MAAA,SAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,KACnB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UAAgD,MAAM;AAC1D,IAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,YAAY,EAAA,IAAA;AAAA,IACZ,IAAA;AAAA,IACA,cAAA,EAAc,aAAa,MAAS,GAAA,KAAA,CAAA;AAAA,IACpC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAAA,EAAA,CAAG,YAAa,CAAA,YAAY,CAAG,EAAA;AAAA,MACxC,CAAC,YAAa,CAAA,oBAAoB,CAAI,GAAA,UAAA;AAAA,MACtC,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,IAAO,GAAA,GAAA;AAAA,KAC3C,CAAA;AAAA,IACD,OAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAK,EAAA,MAAA;AAAA,IACL,QAAA;AAAA,IAEC,QAAA,EAAA,IAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/pagination/Pagination.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".salt-density-medium {\n  --pagination-button-size: 28px;\n  --pagination-fontSize: 12px;\n}\n\n.salt-density-high {\n  --pagination-button-size: 20px;\n  --pagination-fontSize: 11px;\n}\n\n.salt-density-low {\n  --pagination-button-size: 36px;\n  --pagination-fontSize: 14px;\n}\n\n.salt-density-touch {\n  --pagination-button-size: 44px;\n  --pagination-fontSize: 16px;\n}\n\n.saltPagination {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltPagination-arrowButton {\n  width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n}\n\n.saltPagination-previousButton {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltPagination-nextButton {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltPagination-pageButton {\n  min-width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n  --saltButton-fontWeight: var(--salt-text-fontWeight);\n}\n\n.saltPagination-pageButtonSelected {\n  background: var(--salt-selectable-background-selected);\n  color: var(--salt-selectable-cta-foreground-selected);\n}\n\n.saltPagination-pageButtonFixed {\n  padding: 0;\n}\n\n.saltPagination-ellipsis {\n  width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n  text-align: center;\n}\n\n.saltPagination-accessibleText {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  opacity: 0;\n}\n\n.saltPagination-compactInputField {\n}\n\n.saltPagination-compactInput {\n  height: var(--pagination-button-size);\n  min-width: unset;\n}\n\n.saltPagination-compactInputFixed {\n  min-width: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n}\n\n.saltPagination-compactSeparator {\n  height: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n  text-align: center;\n  font-size: var(--pagination-fontSize);\n  line-height: var(--pagination-button-size);\n}\n\n.saltPagination-goToInputWrapper {\n}\n\n.saltPagination-leftGoToInput {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltPagination-rightGoToInput {\n  margin-left: var(--salt-size-unit);\n  min-width: unset;\n}\n\n.saltPagination-goToInputField {\n}\n\n.saltPagination-goToInput {\n  height: var(--pagination-button-size);\n  min-width: unset;\n}\n\n.saltPagination-goToInputFixed {\n  min-width: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Pagination.css.js.map

package/dist-es/packages/lab/src/pagination/Pagination.css.js.map

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

package/dist-es/packages/lab/src/pagination/Pagination.js

@@ -0,0 +1,91 @@
+import { jsx } from 'react/jsx-runtime';
+import { useControlled, useAriaAnnouncer } from '@salt-ds/core';
+import cx from 'classnames';
+import { forwardRef, useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { paginationContext } from './PaginationContext.js';
+import { withBaseName } from './utils.js';
+
+const { Provider } = paginationContext;
+const Pagination = forwardRef(
+  ({
+    className,
+    count,
+    children,
+    initialPage = 1,
+    page: pageProp,
+    onPageChange: onPageChangeProp,
+    compact = false,
+    ...restProps
+  }, ref) => {
+    const [pageState, setPageState] = useControlled({
+      controlled: pageProp,
+      default: initialPage,
+      name: "Paginator",
+      state: "page"
+    });
+    const [paginatorElement, setPaginatorElement] = useState();
+    const onPageChange = useCallback(
+      (page) => {
+        setPageState(page);
+        onPageChangeProp && onPageChangeProp(page);
+      },
+      [onPageChangeProp, setPageState]
+    );
+    const contextValue = useMemo(
+      () => ({
+        page: pageState,
+        count,
+        compact,
+        onPageChange,
+        paginatorElement,
+        setPaginatorElement
+      }),
+      [pageState, count, onPageChange]
+    );
+    const onKeyDown = useCallback(
+      ({ altKey, key }) => {
+        if (altKey) {
+          switch (key) {
+            case "PageDown":
+              onPageChange(Math.min(pageState + 1, count));
+              break;
+            case "PageUp":
+              onPageChange(Math.max(pageState - 1, 1));
+              break;
+          }
+        }
+      },
+      [onPageChange]
+    );
+    const { announce } = useAriaAnnouncer();
+    const mounted = useRef(false);
+    useEffect(() => {
+      if (mounted.current) {
+        announce(`Page ${pageState}`);
+      } else {
+        mounted.current = true;
+      }
+    }, [announce, pageState]);
+    useEffect(() => {
+      if (count < pageState) {
+        onPageChange(1);
+      }
+    }, [count, pageState, onPageChange]);
+    if (count < 2) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Provider, {
+      value: contextValue,
+      children: /* @__PURE__ */ jsx("nav", {
+        className: cx(withBaseName(), className),
+        onKeyDown,
+        ref,
+        ...restProps,
+        children
+      })
+    });
+  }
+);
+
+export { Pagination };
+//# sourceMappingURL=Pagination.js.map

package/dist-es/packages/lab/src/pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import { useAriaAnnouncer, useControlled } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { PaginationContext, paginationContext } from \"./PaginationContext\";\nimport { withBaseName } from \"./utils\";\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n  count: number;\n  page?: number;\n  initialPage?: number;\n  onPageChange?: (page: number) => void;\n  compact?: boolean;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      className,\n      count,\n      children,\n      initialPage = 1,\n      page: pageProp,\n      onPageChange: onPageChangeProp,\n      compact = false,\n      ...restProps\n    },\n    ref\n  ) => {\n    const [pageState, setPageState] = useControlled({\n      controlled: pageProp,\n      default: initialPage,\n      name: \"Paginator\",\n      state: \"page\",\n    });\n\n    const [paginatorElement, setPaginatorElement] = useState<HTMLDivElement>();\n\n    const onPageChange = useCallback(\n      (page: number) => {\n        setPageState(page);\n        onPageChangeProp && onPageChangeProp(page);\n      },\n      [onPageChangeProp, setPageState]\n    );\n\n    const contextValue: PaginationContext = useMemo(\n      () => ({\n        page: pageState,\n        count,\n        compact,\n        onPageChange,\n        paginatorElement,\n        setPaginatorElement,\n      }),\n      [pageState, count, onPageChange]\n    );\n\n    const onKeyDown: KeyboardEventHandler = useCallback(\n      ({ altKey, key }) => {\n        if (altKey) {\n          switch (key) {\n            case \"PageDown\":\n              onPageChange(Math.min(pageState + 1, count));\n              break;\n            case \"PageUp\":\n              onPageChange(Math.max(pageState - 1, 1));\n              break;\n            default:\n          }\n        }\n      },\n      [onPageChange]\n    );\n\n    const { announce } = useAriaAnnouncer();\n    const mounted = useRef<boolean>(false);\n\n    useEffect(() => {\n      if (mounted.current) {\n        announce(`Page ${pageState}`);\n      } else {\n        mounted.current = true;\n      }\n    }, [announce, pageState]);\n\n    useEffect(() => {\n      if (count < pageState) {\n        onPageChange(1);\n      }\n    }, [count, pageState, onPageChange]);\n\n    if (count < 2) {\n      return null;\n    }\n\n    return (\n      <Provider value={contextValue}>\n        <nav\n          className={cn(withBaseName(), className)}\n          onKeyDown={onKeyDown}\n          ref={ref}\n          {...restProps}\n        >\n          {children}\n        </nav>\n      </Provider>\n    );\n  }\n);\n"],"names":["cn"],"mappings":"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"}

package/dist-es/packages/lab/src/pagination/PaginationContext.js

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+const paginationContext = createContext({
+  page: 0,
+  count: 0,
+  compact: false,
+  onPageChange: () => {
+  },
+  paginatorElement: void 0,
+  setPaginatorElement: () => {
+  }
+});
+if (process.env.NODE_ENV !== "production") {
+  paginationContext.displayName = "PaginationContext";
+}
+
+export { paginationContext };
+//# sourceMappingURL=PaginationContext.js.map

package/dist-es/packages/lab/src/pagination/PaginationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationContext.js","sources":["../src/pagination/PaginationContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport interface PaginationContext {\n  page: number;\n  count: number;\n  compact: boolean;\n  onPageChange: (page: number) => void;\n  paginatorElement?: HTMLDivElement;\n  setPaginatorElement: (element: HTMLDivElement) => void;\n}\n\nexport const paginationContext = createContext<PaginationContext>({\n  page: 0,\n  count: 0,\n  compact: false,\n  onPageChange: () => {},\n  paginatorElement: undefined,\n  setPaginatorElement: () => {},\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  paginationContext.displayName = \"PaginationContext\";\n}\n"],"names":[],"mappings":";;AAWO,MAAM,oBAAoB,aAAiC,CAAA;AAAA,EAChE,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,CAAA;AAAA,EACP,OAAS,EAAA,KAAA;AAAA,EACT,cAAc,MAAM;AAAA,GAAC;AAAA,EACrB,gBAAkB,EAAA,KAAA,CAAA;AAAA,EAClB,qBAAqB,MAAM;AAAA,GAAC;AAC9B,CAAC,EAAA;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,iBAAA,CAAkB,WAAc,GAAA,mBAAA,CAAA;AAClC;;;;"}

package/dist-es/packages/lab/src/pagination/Paginator.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useForkRef } from '@salt-ds/core';
+import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
+import cx from 'classnames';
+import { forwardRef, useCallback } from 'react';
+import { ArrowButton } from './ArrowButton.js';
+import { CompactControls } from './CompactControls.js';
+import { RegularControls } from './RegularControls.js';
+import { usePaginationContext } from './usePaginationContext.js';
+import { withBaseName } from './utils.js';
+import './Pagination.css.js';
+
+const Paginator = forwardRef(
+  ({
+    className,
+    boundaryCount,
+    siblingCount,
+    showPreviousNext = true,
+    FormFieldProps: FormFieldProps2,
+    ...restProps
+  }, forwardedRef) => {
+    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 isOnFirstPage = page === 1;
+    const isOnLastPage = page === count;
+    return /* @__PURE__ */ jsxs("div", {
+      className: cx(withBaseName(), className),
+      ...restProps,
+      ref,
+      children: [
+        showPreviousNext && /* @__PURE__ */ jsx(ArrowButton, {
+          arrowButtonType: "previous",
+          onPress: onPreviousPage,
+          disabled: isOnFirstPage,
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+        }),
+        compact ? /* @__PURE__ */ jsx(CompactControls, {
+          count,
+          page,
+          onPageChange,
+          FormFieldProps: FormFieldProps2
+        }) : /* @__PURE__ */ jsx(RegularControls, {
+          count,
+          page,
+          onPageChange,
+          siblingCount,
+          boundaryCount
+        }),
+        showPreviousNext && /* @__PURE__ */ jsx(ArrowButton, {
+          arrowButtonType: "next",
+          onPress: onNextPage,
+          disabled: isOnLastPage,
+          children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+        })
+      ]
+    });
+  }
+);
+
+export { Paginator };
+//# sourceMappingURL=Paginator.js.map

package/dist-es/packages/lab/src/pagination/Paginator.js.map

@@ -0,0 +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 cn from \"classnames\";\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 { FormFieldProps } from \"../form-field\";\n\nimport \"./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 { 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={cn(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","cn"],"mappings":";;;;;;;;;;;;AAoBO,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,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,EAAAC,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,MAC3D,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;;;;"}

package/dist-es/packages/lab/src/pagination/RegularControls.js

@@ -0,0 +1,54 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { withBaseName } from './utils.js';
+import { usePagination } from './usePagination.js';
+import { PageButton } from './PageButton.js';
+
+const Ellipsis = () => {
+  return /* @__PURE__ */ jsx("div", {
+    className: withBaseName("ellipsis"),
+    children: `\u2026`
+  });
+};
+const mapRange = (range, fn) => {
+  const result = [];
+  for (let i = range[0]; i <= range[1]; ++i) {
+    result.push(fn(i));
+  }
+  return result;
+};
+function RegularControls({
+  page,
+  count,
+  onPageChange,
+  siblingCount = 2,
+  boundaryCount = 1
+}) {
+  const renderPages = (range, selectedPage) => {
+    if (!range) {
+      return null;
+    }
+    return mapRange(range, (i) => /* @__PURE__ */ jsx(PageButton, {
+      page: i,
+      isSelected: selectedPage === i,
+      onPageChange
+    }, i));
+  };
+  const [leftPages, middlePages, rightPages] = usePagination(
+    page,
+    count,
+    Math.max(1, boundaryCount),
+    siblingCount
+  );
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      renderPages(leftPages, page),
+      leftPages && /* @__PURE__ */ jsx(Ellipsis, {}),
+      renderPages(middlePages, page),
+      rightPages && /* @__PURE__ */ jsx(Ellipsis, {}),
+      renderPages(rightPages, page)
+    ]
+  });
+}
+
+export { RegularControls };
+//# sourceMappingURL=RegularControls.js.map

package/dist-es/packages/lab/src/pagination/RegularControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegularControls.js","sources":["../src/pagination/RegularControls.tsx"],"sourcesContent":["import { withBaseName } from \"./utils\";\nimport { PageRange, usePagination } from \"./usePagination\";\nimport { ReactElement } from \"react\";\nimport { PageButton } from \"./PageButton\";\n\nexport interface RegularControlsProps {\n  count: number;\n  page: number;\n  onPageChange: (page: number) => void;\n  boundaryCount?: number;\n  siblingCount?: number;\n}\n\nconst Ellipsis = () => {\n  return <div className={withBaseName(\"ellipsis\")}>{`\\u2026`}</div>;\n};\n\nconst mapRange = (range: PageRange, fn: (i: number) => ReactElement) => {\n  const result: ReactElement[] = [];\n  for (let i = range[0]; i <= range[1]; ++i) {\n    result.push(fn(i));\n  }\n  return result;\n};\n\nexport function RegularControls({\n  page,\n  count,\n  onPageChange,\n  siblingCount = 2,\n  boundaryCount = 1,\n}: RegularControlsProps) {\n  const renderPages = (range?: PageRange, selectedPage?: number) => {\n    if (!range) {\n      return null;\n    }\n    return mapRange(range, (i) => (\n      <PageButton\n        key={i}\n        page={i}\n        isSelected={selectedPage === i}\n        onPageChange={onPageChange}\n      />\n    ));\n  };\n\n  const [leftPages, middlePages, rightPages] = usePagination(\n    page,\n    count,\n    Math.max(1, boundaryCount),\n    siblingCount\n  );\n\n  return (\n    <>\n      {renderPages(leftPages, page)}\n      {leftPages && <Ellipsis />}\n      {renderPages(middlePages, page)}\n      {rightPages && <Ellipsis />}\n      {renderPages(rightPages, page)}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;AAaA,MAAM,WAAW,MAAM;AACrB,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,IAAI,QAAA,EAAA,CAAA,MAAA,CAAA;AAAA,GAAS,CAAA,CAAA;AAC7D,CAAA,CAAA;AAEA,MAAM,QAAA,GAAW,CAAC,KAAA,EAAkB,EAAoC,KAAA;AACtE,EAAA,MAAM,SAAyB,EAAC,CAAA;AAChC,EAAA,KAAA,IAAS,IAAI,KAAM,CAAA,CAAA,CAAA,EAAI,KAAK,KAAM,CAAA,CAAA,CAAA,EAAI,EAAE,CAAG,EAAA;AACzC,IAAO,MAAA,CAAA,IAAA,CAAK,EAAG,CAAA,CAAC,CAAC,CAAA,CAAA;AAAA,GACnB;AACA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA,CAAA;AAEO,SAAS,eAAgB,CAAA;AAAA,EAC9B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAe,GAAA,CAAA;AAAA,EACf,aAAgB,GAAA,CAAA;AAClB,CAAyB,EAAA;AACvB,EAAM,MAAA,WAAA,GAAc,CAAC,KAAA,EAAmB,YAA0B,KAAA;AAChE,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AACA,IAAA,OAAO,QAAS,CAAA,KAAA,EAAO,CAAC,CAAA,qBACrB,GAAA,CAAA,UAAA,EAAA;AAAA,MAEC,IAAM,EAAA,CAAA;AAAA,MACN,YAAY,YAAiB,KAAA,CAAA;AAAA,MAC7B,YAAA;AAAA,KAAA,EAHK,CAIP,CACD,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,WAAa,EAAA,UAAU,CAAI,GAAA,aAAA;AAAA,IAC3C,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,aAAa,CAAA;AAAA,IACzB,YAAA;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACG,QAAA,EAAA;AAAA,MAAA,WAAA,CAAY,WAAW,IAAI,CAAA;AAAA,MAC3B,SAAA,wBAAc,QAAS,EAAA,EAAA,CAAA;AAAA,MACvB,WAAA,CAAY,aAAa,IAAI,CAAA;AAAA,MAC7B,UAAA,wBAAe,QAAS,EAAA,EAAA,CAAA;AAAA,MACxB,WAAA,CAAY,YAAY,IAAI,CAAA;AAAA,KAAA;AAAA,GAC/B,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/pagination/usePagination.js

@@ -0,0 +1,23 @@
+function usePagination(page, count, boundaryCount, siblingCount) {
+  const totalButtonsVisible = 2 * (boundaryCount + siblingCount) + 3;
+  const isEnoughSpace = totalButtonsVisible >= count;
+  const isLeftEllipsis = !isEnoughSpace && page - boundaryCount - siblingCount > 2;
+  const isRightEllipsis = !isEnoughSpace && page + boundaryCount + siblingCount + 1 < count;
+  const leftPages = isLeftEllipsis ? [1, boundaryCount] : void 0;
+  const rightPages = isRightEllipsis ? [count - boundaryCount + 1, count] : void 0;
+  let middlePages;
+  if (!isLeftEllipsis) {
+    middlePages = [
+      1,
+      isRightEllipsis ? boundaryCount + 2 + 2 * siblingCount : count
+    ];
+  } else if (!isRightEllipsis) {
+    middlePages = [count - boundaryCount - 1 - 2 * siblingCount, count];
+  } else {
+    middlePages = [page - siblingCount, page + siblingCount];
+  }
+  return [leftPages, middlePages, rightPages];
+}
+
+export { usePagination };
+//# sourceMappingURL=usePagination.js.map

package/dist-es/packages/lab/src/pagination/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.js","sources":["../src/pagination/usePagination.ts"],"sourcesContent":["export type PageRange = [number, number];\n\nexport function usePagination(\n  page: number,\n  count: number,\n  boundaryCount: number,\n  siblingCount: number\n) {\n  const totalButtonsVisible = 2 * (boundaryCount + siblingCount) + 3;\n  const isEnoughSpace = totalButtonsVisible >= count;\n\n  const isLeftEllipsis =\n    !isEnoughSpace && page - boundaryCount - siblingCount > 2;\n\n  const isRightEllipsis =\n    !isEnoughSpace && page + boundaryCount + siblingCount + 1 < count;\n\n  const leftPages = isLeftEllipsis\n    ? ([1, boundaryCount] as PageRange)\n    : undefined;\n\n  const rightPages = isRightEllipsis\n    ? ([count - boundaryCount + 1, count] as PageRange)\n    : undefined;\n\n  let middlePages: PageRange;\n\n  if (!isLeftEllipsis) {\n    middlePages = [\n      1,\n      isRightEllipsis ? boundaryCount + 2 + 2 * siblingCount : count,\n    ];\n  } else if (!isRightEllipsis) {\n    middlePages = [count - boundaryCount - 1 - 2 * siblingCount, count];\n  } else {\n    middlePages = [page - siblingCount, page + siblingCount];\n  }\n\n  return [leftPages, middlePages, rightPages] as const;\n}\n"],"names":[],"mappings":"AAEO,SAAS,aACd,CAAA,IAAA,EACA,KACA,EAAA,aAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,mBAAA,GAAsB,CAAK,IAAA,aAAA,GAAgB,YAAgB,CAAA,GAAA,CAAA,CAAA;AACjE,EAAA,MAAM,gBAAgB,mBAAuB,IAAA,KAAA,CAAA;AAE7C,EAAA,MAAM,cACJ,GAAA,CAAC,aAAiB,IAAA,IAAA,GAAO,gBAAgB,YAAe,GAAA,CAAA,CAAA;AAE1D,EAAA,MAAM,kBACJ,CAAC,aAAA,IAAiB,IAAO,GAAA,aAAA,GAAgB,eAAe,CAAI,GAAA,KAAA,CAAA;AAE9D,EAAA,MAAM,SAAY,GAAA,cAAA,GACb,CAAC,CAAA,EAAG,aAAa,CAClB,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,MAAM,aAAa,eACd,GAAA,CAAC,QAAQ,aAAgB,GAAA,CAAA,EAAG,KAAK,CAClC,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAI,IAAA,WAAA,CAAA;AAEJ,EAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,IAAc,WAAA,GAAA;AAAA,MACZ,CAAA;AAAA,MACA,eAAkB,GAAA,aAAA,GAAgB,CAAI,GAAA,CAAA,GAAI,YAAe,GAAA,KAAA;AAAA,KAC3D,CAAA;AAAA,GACF,MAAA,IAAW,CAAC,eAAiB,EAAA;AAC3B,IAAA,WAAA,GAAc,CAAC,KAAQ,GAAA,aAAA,GAAgB,CAAI,GAAA,CAAA,GAAI,cAAc,KAAK,CAAA,CAAA;AAAA,GAC7D,MAAA;AACL,IAAA,WAAA,GAAc,CAAC,IAAA,GAAO,YAAc,EAAA,IAAA,GAAO,YAAY,CAAA,CAAA;AAAA,GACzD;AAEA,EAAO,OAAA,CAAC,SAAW,EAAA,WAAA,EAAa,UAAU,CAAA,CAAA;AAC5C;;;;"}

package/dist-es/packages/lab/src/pagination/usePaginationContext.js

@@ -0,0 +1,15 @@
+import { paginationContext } from './PaginationContext.js';
+import { useContext } from 'react';
+
+const usePaginationContext = () => {
+  const context = useContext(paginationContext);
+  if (process.env.NODE_ENV !== "production") {
+    if (!context) {
+      console.error(`usePaginationContext should be used inside of Pagination`);
+    }
+  }
+  return context;
+};
+
+export { usePaginationContext };
+//# sourceMappingURL=usePaginationContext.js.map

package/dist-es/packages/lab/src/pagination/usePaginationContext.js.map

@@ -0,0 +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;;;;"}

package/dist-es/packages/lab/src/pagination/utils.js

@@ -0,0 +1,6 @@
+import { makePrefixer } from '@salt-ds/core';
+
+const withBaseName = makePrefixer("saltPagination");
+
+export { withBaseName };
+//# sourceMappingURL=utils.js.map

package/dist-es/packages/lab/src/pagination/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/pagination/utils.ts"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\n\nexport const withBaseName = makePrefixer(\"saltPagination\");\n"],"names":[],"mappings":";;AAEa,MAAA,YAAA,GAAe,aAAa,gBAAgB;;;;"}

package/dist-es/packages/lab/src/panel/Panel.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Styles applied to the root element */\n.saltPanel {\n  background: var(--saltPanel-background, var(--salt-container-primary-background));\n  color: var(--saltPanel-color, var(--salt-text-primary-foreground));\n  height: var(--saltPanel-height, auto);\n  overflow: auto;\n  padding: var(--saltPanel-padding, calc(var(--salt-size-unit) * 3));\n  width: var(--saltPanel-width, 100%);\n}\n\n.saltPanel-secondary.saltPanel {\n  background: var(--saltPanel-background, var(--salt-container-secondary-background));\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Panel.css.js.map

package/dist-es/packages/lab/src/panel/Panel.css.js.map

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

package/dist-es/packages/lab/src/panel/Panel.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'classnames';
+import { forwardRef } from 'react';
+import { makePrefixer } from '@salt-ds/core';
+import './Panel.css.js';
+
+const withBaseName = makePrefixer("saltPanel");
+const Panel = forwardRef(function Panel2({ className, children, variant = "primary", ...restProps }, ref) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(withBaseName(), className, {
+      [withBaseName(variant)]: variant === "secondary"
+    }),
+    ref,
+    ...restProps,
+    children
+  });
+});
+
+export { Panel };
+//# sourceMappingURL=Panel.js.map

package/dist-es/packages/lab/src/panel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../src/panel/Panel.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./Panel.css\";\n\n/**\n * Panel component that acts as wrapper around a node\n *\n * @example\n * const PanelExample = () => (\n *   <Panel>\n *     <p>This is a panel around some text.</p>\n *   </Panel>\n * );\n *\n */\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltPanel\");\n\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  { className, children, variant = \"primary\", ...restProps },\n  ref\n) {\n  return (\n    <div\n      className={cx(withBaseName(), className, {\n        [withBaseName(variant)]: variant === \"secondary\",\n      })}\n      ref={ref}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["Panel"],"mappings":";;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQ,UAAuC,CAAA,SAASA,MACnE,CAAA,EAAE,SAAW,EAAA,QAAA,EAAU,OAAU,GAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACzD,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,MACvC,CAAC,YAAA,CAAa,OAAO,CAAA,GAAI,OAAY,KAAA,WAAA;AAAA,KACtC,CAAA;AAAA,IACD,GAAA;AAAA,IACC,GAAG,SAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/parent-child-item/ParentChildItem.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltParentChildItem-slide-top {\n  animation: var(--salt-animation-slide-in-top);\n}\n.saltParentChildItem-slide-bottom {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n.saltParentChildItem-slide-left {\n  animation: var(--salt-animation-slide-in-left);\n}\n.saltParentChildItem-slide-right {\n  animation: var(--salt-animation-slide-in-right);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=ParentChildItem.css.js.map

package/dist-es/packages/lab/src/parent-child-item/ParentChildItem.css.js.map

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

package/dist-es/packages/lab/src/parent-child-item/ParentChildItem.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import cx from 'classnames';
+import { makePrefixer, FlexItem } from '@salt-ds/core';
+import './ParentChildItem.css.js';
+
+const withBaseName = makePrefixer("saltParentChildItem");
+const ParentChildItem = forwardRef(
+  function ParentChildItem2({
+    disableAnimations = false,
+    direction,
+    isStacked,
+    children,
+    className,
+    ...rest
+  }, ref) {
+    return /* @__PURE__ */ jsx(FlexItem, {
+      className: cx(className, withBaseName(), {
+        ...direction && {
+          [withBaseName(`slide-${direction}`)]: !disableAnimations
+        },
+        "saltFlexItem-stacked": isStacked
+      }),
+      ref,
+      ...rest,
+      children
+    });
+  }
+);
+
+export { ParentChildItem };
+//# sourceMappingURL=ParentChildItem.js.map

package/dist-es/packages/lab/src/parent-child-item/ParentChildItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParentChildItem.js","sources":["../src/parent-child-item/ParentChildItem.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"classnames\";\nimport {\n  FlexItem,\n  flexItemAlignment,\n  makePrefixer,\n  ResponsiveProp,\n} from \"@salt-ds/core\";\nimport \"./ParentChildItem.css\";\n\nexport type SlideDirection = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n   */\n  align?: flexItemAlignment;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Direction for slide animations.\n   */\n  direction?: SlideDirection;\n  /**\n   * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n   */\n  grow?: ResponsiveProp<number>;\n  /**\n   * Determines whether the component is stacked\n   */\n  isStacked?: boolean;\n  /**\n   * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n   */\n  shrink?: ResponsiveProp<number>;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildItem\");\nexport const ParentChildItem = forwardRef<HTMLDivElement, ParentChildItemProps>(\n  function ParentChildItem(\n    {\n      disableAnimations = false,\n      direction,\n      isStacked,\n      children,\n      className,\n      ...rest\n    },\n    ref\n  ) {\n    return (\n      <FlexItem\n        className={cx(className, withBaseName(), {\n          ...(direction && {\n            [withBaseName(`slide-${direction}`)]: !disableAnimations,\n          }),\n          \"saltFlexItem-stacked\": isStacked,\n        })}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </FlexItem>\n    );\n  }\n);\n"],"names":["ParentChildItem"],"mappings":";;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAChD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBACP,CAAA;AAAA,IACE,iBAAoB,GAAA,KAAA;AAAA,IACpB,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,YAAA,EAAgB,EAAA;AAAA,QACvC,GAAI,SAAa,IAAA;AAAA,UACf,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,iBAAA;AAAA,SACzC;AAAA,QACA,sBAAwB,EAAA,SAAA;AAAA,OACzB,CAAA;AAAA,MACD,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/parent-child-layout/ParentChildLayout.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltParentChildLayout {\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=ParentChildLayout.css.js.map

package/dist-es/packages/lab/src/parent-child-layout/ParentChildLayout.css.js.map

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

package/dist-es/packages/lab/src/parent-child-layout/ParentChildLayout.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { makePrefixer, FlexLayout } from '@salt-ds/core';
+import cx from 'classnames';
+import { forwardRef } from 'react';
+import { ParentChildItem } from '../parent-child-item/ParentChildItem.js';
+import { useIsViewportLargerThanBreakpoint } from '../utils/useIsViewportLargerThanBreakpoint.js';
+import './ParentChildLayout.css.js';
+
+const withBaseName = makePrefixer("saltParentChildLayout");
+const getDirection = (orientation, stackedViewElement) => {
+  let direction = "right";
+  if (orientation === "horizontal") {
+    if (stackedViewElement === "parent") {
+      direction = "left";
+    } else {
+      direction = "right";
+    }
+  } else {
+    if (stackedViewElement === "parent") {
+      direction = "bottom";
+    } else {
+      direction = "top";
+    }
+  }
+  return direction;
+};
+const ParentChildLayout = forwardRef(function ParentChildLayout2({
+  stackedAtBreakpoint = "sm",
+  stackedViewElement = "parent",
+  disableAnimations = false,
+  parent,
+  child,
+  className,
+  orientation = "horizontal",
+  ...rest
+}, ref) {
+  const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);
+  const parentChildDirection = getDirection(orientation, stackedViewElement);
+  const stackedViewChildren = {
+    parent: /* @__PURE__ */ jsx(ParentChildItem, {
+      disableAnimations,
+      direction: parentChildDirection,
+      isStacked: stackedView,
+      children: parent
+    }),
+    child: /* @__PURE__ */ jsx(ParentChildItem, {
+      disableAnimations,
+      direction: parentChildDirection,
+      isStacked: stackedView,
+      children: child
+    })
+  };
+  return /* @__PURE__ */ jsx(FlexLayout, {
+    className: cx(className, withBaseName()),
+    ref,
+    ...rest,
+    children: stackedView ? stackedViewChildren[stackedViewElement] : /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(ParentChildItem, {
+          grow: 0,
+          disableAnimations,
+          children: parent
+        }),
+        /* @__PURE__ */ jsx(ParentChildItem, {
+          grow: 2,
+          disableAnimations,
+          children: child
+        })
+      ]
+    })
+  });
+});
+
+export { ParentChildLayout };
+//# sourceMappingURL=ParentChildLayout.js.map

package/dist-es/packages/lab/src/parent-child-layout/ParentChildLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n  Breakpoints,\n  makePrefixer,\n  FlexLayout,\n  FlexLayoutProps,\n} from \"@salt-ds/core\";\n\nimport cx from \"classnames\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  stackedAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Change element that is displayed when in staked view.\n   */\n  stackedViewElement?: StackedViewElement;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Orientation for slide animations.\n   */\n  orientation?: Orientation;\n  /**\n   * Controls the space between columns.\n   */\n  gap?: FlexLayoutProps<ElementType>[\"gap\"];\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n  orientation: Orientation,\n  stackedViewElement: StackedViewElement\n) => {\n  let direction: SlideDirection = \"right\";\n\n  if (orientation === \"horizontal\") {\n    if (stackedViewElement === \"parent\") {\n      direction = \"left\";\n    } else {\n      direction = \"right\";\n    }\n  } else {\n    if (stackedViewElement === \"parent\") {\n      direction = \"bottom\";\n    } else {\n      direction = \"top\";\n    }\n  }\n\n  return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    stackedAtBreakpoint = \"sm\",\n    stackedViewElement = \"parent\",\n    disableAnimations = false,\n    parent,\n    child,\n    className,\n    orientation = \"horizontal\",\n    ...rest\n  },\n  ref\n) {\n  const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n  const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n  const stackedViewChildren = {\n    parent: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {parent}\n      </ParentChildItem>\n    ),\n    child: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {child}\n      </ParentChildItem>\n    ),\n  };\n\n  return (\n    <FlexLayout className={cx(className, withBaseName())} ref={ref} {...rest}>\n      {stackedView ? (\n        stackedViewChildren[stackedViewElement]\n      ) : (\n        <>\n          <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n            {parent}\n          </ParentChildItem>\n          <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n            {child}\n          </ParentChildItem>\n        </>\n      )}\n    </FlexLayout>\n  );\n});\n"],"names":["ParentChildLayout"],"mappings":";;;;;;;;AAiDA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAc,kCAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACG,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACG,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IAAW,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,YAAA,EAAc,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACjE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/pill/ClosablePill.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'classnames';
+import { forwardRef, useState, useCallback } from 'react';
+import { makePrefixer } from '@salt-ds/core';
+import { pillBaseName } from './constants.js';
+import { DeleteButton } from './internal/DeleteButton.js';
+import { PillBase } from './PillBase.js';
+
+const deleteKeys = ["Enter", "Delete", "Backspace"];
+const noop = () => void 0;
+const withBaseName = makePrefixer(pillBaseName);
+const ClosablePill = forwardRef(function ClosablePill2({
+  onDelete,
+  label,
+  disabled,
+  onClick = noop,
+  className,
+  deleteIcon,
+  ...rest
+}, ref) {
+  const [active, setActive] = useState(false);
+  const handleKeyDown = useCallback((event) => {
+    if (deleteKeys.includes(event.key)) {
+      setActive(true);
+    }
+  }, []);
+  const handleKeyUp = (event) => {
+    setActive(false);
+    if (!disabled && deleteKeys.includes(event.key)) {
+      onDelete == null ? void 0 : onDelete(event);
+    }
+  };
+  return /* @__PURE__ */ jsx(PillBase, {
+    "aria-roledescription": "Closable Pill",
+    className: cx(
+      {
+        [withBaseName("active")]: active
+      },
+      className
+    ),
+    deletable: true,
+    deleteIcon: deleteIcon || /* @__PURE__ */ jsx(DeleteButton, {
+      active,
+      disabled
+    }),
+    disabled,
+    label,
+    onDelete,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    ...rest,
+    ref
+  });
+});
+
+export { ClosablePill };
+//# sourceMappingURL=ClosablePill.js.map

package/dist-es/packages/lab/src/pill/ClosablePill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClosablePill.js","sources":["../src/pill/ClosablePill.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  useCallback,\n  useState,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { pillBaseName } from \"./constants\";\nimport { DeleteButton } from \"./internal/DeleteButton\";\nimport { PillBase, PillBaseProps } from \"./PillBase\";\n\nconst deleteKeys = [\"Enter\", \"Delete\", \"Backspace\"];\nconst noop = () => undefined;\n\nexport interface ClosablePillProps extends Omit<PillBaseProps, \"clickable\"> {\n  /**\n   * Clickable Pill is not supported by Closable variant.\n   */\n  clickable?: false;\n}\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport const ClosablePill = forwardRef(function ClosablePill(\n  {\n    onDelete,\n    label,\n    disabled,\n    onClick = noop,\n    className,\n    deleteIcon,\n    ...rest\n  }: PillBaseProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const [active, setActive] = useState(false);\n\n  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n    if (deleteKeys.includes(event.key)) {\n      setActive(true);\n    }\n  }, []);\n\n  const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n    setActive(false);\n    if (!disabled && deleteKeys.includes(event.key)) {\n      onDelete?.(event);\n    }\n  };\n\n  return (\n    <PillBase\n      aria-roledescription=\"Closable Pill\"\n      className={cn(\n        {\n          [withBaseName(\"active\")]: active,\n        },\n        className\n      )}\n      deletable\n      deleteIcon={\n        deleteIcon || <DeleteButton active={active} disabled={disabled} />\n      }\n      disabled={disabled}\n      label={label}\n      onDelete={onDelete}\n      onKeyDown={handleKeyDown}\n      onKeyUp={handleKeyUp}\n      {...rest}\n      ref={ref}\n    />\n  );\n});\n"],"names":["ClosablePill","cn"],"mappings":";;;;;;;;AAaA,MAAM,UAAa,GAAA,CAAC,OAAS,EAAA,QAAA,EAAU,WAAW,CAAA,CAAA;AAClD,MAAM,OAAO,MAAM,KAAA,CAAA,CAAA;AASnB,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEjC,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,IAAA;AAAA,EACV,SAAA;AAAA,EACA,UAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE1C,EAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,CAAC,KAAyC,KAAA;AAC1E,IAAA,IAAI,UAAW,CAAA,QAAA,CAAS,KAAM,CAAA,GAAG,CAAG,EAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KAChB;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAA,IAAI,CAAC,QAAY,IAAA,UAAA,CAAW,QAAS,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AAC/C,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb;AAAA,GACF,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,IACC,sBAAqB,EAAA,eAAA;AAAA,IACrB,SAAW,EAAAC,EAAA;AAAA,MACT;AAAA,QACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,SAAS,EAAA,IAAA;AAAA,IACT,UAAA,EACE,8BAAe,GAAA,CAAA,YAAA,EAAA;AAAA,MAAa,MAAA;AAAA,MAAgB,QAAA;AAAA,KAAoB,CAAA;AAAA,IAElE,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA,WAAA;AAAA,IACR,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}