@salt-ds/lab 1.0.0-alpha.46 → 1.0.0-alpha.47

package/css/salt-lab.css

@@ -978,7 +978,7 @@
   overflow: hidden;
   overflow-y: auto;
   position: relative;
-  z-index: var(--salt-zIndex-popout);
+  z-index: var(--salt-zIndex-flyover);
   box-shadow: var(--salt-overlayable-shadow-popout);
   box-sizing: border-box;
   display: flex;
@@ -1029,6 +1029,30 @@
   transform: translateY(var(--deckLayout-transform-value));
 }
 
+/* src/divider/Divider.css */
+.saltDivider-primary {
+  --divider-background: var(--salt-separable-primary-borderColor);
+}
+.saltDivider-secondary {
+  --divider-background: var(--salt-separable-secondary-borderColor);
+}
+.saltDivider-tertiary {
+  --divider-background: var(--salt-separable-tertiary-borderColor);
+}
+.saltDivider {
+  background: var(--divider-background);
+  align-self: stretch;
+  margin: 0;
+  border: none;
+}
+.saltDivider-horizontal {
+  height: var(--salt-size-border);
+}
+.saltDivider-vertical {
+  width: var(--salt-size-border);
+  height: auto;
+}
+
 /* src/dropdown/Dropdown.css */
 .saltDropdown {
   --saltIcon-margin: 2px 0 0 8px;
@@ -4056,4 +4080,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/25be4337-3526-4263-9693-0e8a7f630de8.css */
+/* src/c3ed18f7-b895-46ac-bd1c-a7070ee9c1bf.css */

package/dist-cjs/date-picker/DatePickerPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltDatePickerPanel {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-popout);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  display: flex;\n}\n.saltDatePickerPanel-container {\n  width: min-content;\n  gap: 1px;\n}\n\n.saltDatePickerPanel-header {\n  padding: var(--salt-spacing-100);\n}\n";
+var css_248z = ".saltDatePickerPanel {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  display: flex;\n}\n.saltDatePickerPanel-container {\n  width: min-content;\n  gap: 1px;\n}\n\n.saltDatePickerPanel-header {\n  padding: var(--salt-spacing-100);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=DatePickerPanel.css.js.map

package/dist-cjs/divider/Divider.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDivider-primary {\n  --divider-background: var(--salt-separable-primary-borderColor);\n}\n\n.saltDivider-secondary {\n  --divider-background: var(--salt-separable-secondary-borderColor);\n}\n\n.saltDivider-tertiary {\n  --divider-background: var(--salt-separable-tertiary-borderColor);\n}\n\n.saltDivider {\n  background: var(--divider-background);\n  align-self: stretch;\n  margin: 0;\n  border: none;\n}\n\n.saltDivider-horizontal {\n  height: var(--salt-size-border);\n}\n\n.saltDivider-vertical {\n  width: var(--salt-size-border);\n  height: auto;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Divider.css.js.map

package/dist-cjs/divider/Divider.css.js.map

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

package/dist-cjs/divider/Divider.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Divider$1 = require('./Divider.css.js');
+
+const withBaseName = core.makePrefixer("saltDivider");
+const Divider = React.forwardRef(
+  function Divider2(props, ref) {
+    const {
+      className,
+      orientation = "horizontal",
+      variant = "primary",
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-divider",
+      css: Divider$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(orientation),
+        withBaseName(variant),
+        className
+      ),
+      "aria-orientation": orientation,
+      role: "separator",
+      ref,
+      ...rest
+    });
+  }
+);
+
+exports.Divider = Divider;
+//# sourceMappingURL=Divider.js.map

package/dist-cjs/divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../src/divider/Divider.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dividerCss from \"./Divider.css\";\n\ntype a = HTMLElementTagNameMap;\n\nexport interface DividerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The orientation of the divider. Defaults to `\"horizontal\"`.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The variant of the divider. Defaults to `\"primary\"`.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDivider\");\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n  function Divider(props, ref) {\n    const {\n      className,\n      orientation = \"horizontal\",\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-divider\",\n      css: dividerCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(orientation),\n          withBaseName(variant),\n          className\n        )}\n        aria-orientation={orientation}\n        role=\"separator\"\n        ref={ref}\n        {...rest}\n      />\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Divider","useWindow","useComponentCssInjection","dividerCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAc,GAAA,YAAA;AAAA,MACd,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,WAAW,CAAA;AAAA,QACxB,aAAa,OAAO,CAAA;AAAA,QACpB,SAAA;AAAA,OACF;AAAA,MACA,kBAAkB,EAAA,WAAA;AAAA,MAClB,IAAK,EAAA,WAAA;AAAA,MACL,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/index.js

@@ -62,6 +62,7 @@ var DateInput = require('./date-input/DateInput.js');
 var DatePicker = require('./date-picker/DatePicker.js');
 var DeckItem = require('./deck-item/DeckItem.js');
 var DeckLayout = require('./deck-layout/DeckLayout.js');
+var Divider = require('./divider/Divider.js');
 var DropdownBase = require('./dropdown/DropdownBase.js');
 var DropdownButton = require('./dropdown/DropdownButton.js');
 var Dropdown = require('./dropdown/Dropdown.js');
@@ -201,6 +202,7 @@ exports.DateInput = DateInput.DateInput;
 exports.DatePicker = DatePicker.DatePicker;
 exports.DeckItem = DeckItem.DeckItem;
 exports.DeckLayout = DeckLayout.DeckLayout;
+exports.Divider = Divider.Divider;
 exports.DropdownBase = DropdownBase.DropdownBase;
 exports.DropdownButton = DropdownButton.DropdownButton;
 exports.Dropdown = Dropdown.Dropdown;

package/dist-cjs/index.js.map

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

package/dist-es/date-picker/DatePickerPanel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltDatePickerPanel {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-popout);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  display: flex;\n}\n.saltDatePickerPanel-container {\n  width: min-content;\n  gap: 1px;\n}\n\n.saltDatePickerPanel-header {\n  padding: var(--salt-spacing-100);\n}\n";
+var css_248z = ".saltDatePickerPanel {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  display: flex;\n}\n.saltDatePickerPanel-container {\n  width: min-content;\n  gap: 1px;\n}\n\n.saltDatePickerPanel-header {\n  padding: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DatePickerPanel.css.js.map

package/dist-es/divider/Divider.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltDivider-primary {\n  --divider-background: var(--salt-separable-primary-borderColor);\n}\n\n.saltDivider-secondary {\n  --divider-background: var(--salt-separable-secondary-borderColor);\n}\n\n.saltDivider-tertiary {\n  --divider-background: var(--salt-separable-tertiary-borderColor);\n}\n\n.saltDivider {\n  background: var(--divider-background);\n  align-self: stretch;\n  margin: 0;\n  border: none;\n}\n\n.saltDivider-horizontal {\n  height: var(--salt-size-border);\n}\n\n.saltDivider-vertical {\n  width: var(--salt-size-border);\n  height: auto;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Divider.css.js.map

package/dist-es/divider/Divider.css.js.map

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

package/dist-es/divider/Divider.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './Divider.css.js';
+
+const withBaseName = makePrefixer("saltDivider");
+const Divider = forwardRef(
+  function Divider2(props, ref) {
+    const {
+      className,
+      orientation = "horizontal",
+      variant = "primary",
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-divider",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", {
+      className: clsx(
+        withBaseName(),
+        withBaseName(orientation),
+        withBaseName(variant),
+        className
+      ),
+      "aria-orientation": orientation,
+      role: "separator",
+      ref,
+      ...rest
+    });
+  }
+);
+
+export { Divider };
+//# sourceMappingURL=Divider.js.map

package/dist-es/divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../src/divider/Divider.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dividerCss from \"./Divider.css\";\n\ntype a = HTMLElementTagNameMap;\n\nexport interface DividerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The orientation of the divider. Defaults to `\"horizontal\"`.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The variant of the divider. Defaults to `\"primary\"`.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDivider\");\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n  function Divider(props, ref) {\n    const {\n      className,\n      orientation = \"horizontal\",\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-divider\",\n      css: dividerCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(orientation),\n          withBaseName(variant),\n          className\n        )}\n        aria-orientation={orientation}\n        role=\"separator\"\n        ref={ref}\n        {...rest}\n      />\n    );\n  }\n);\n"],"names":["Divider","dividerCss"],"mappings":";;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAc,GAAA,YAAA;AAAA,MACd,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,WAAW,CAAA;AAAA,QACxB,aAAa,OAAO,CAAA;AAAA,QACpB,SAAA;AAAA,OACF;AAAA,MACA,kBAAkB,EAAA,WAAA;AAAA,MAClB,IAAK,EAAA,WAAA;AAAA,MACL,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/index.js

@@ -58,6 +58,7 @@ export { DateInput } from './date-input/DateInput.js';
 export { DatePicker } from './date-picker/DatePicker.js';
 export { DeckItem } from './deck-item/DeckItem.js';
 export { DeckLayout } from './deck-layout/DeckLayout.js';
+export { Divider } from './divider/Divider.js';
 export { DropdownBase } from './dropdown/DropdownBase.js';
 export { DropdownButton } from './dropdown/DropdownButton.js';
 export { Dropdown } from './dropdown/Dropdown.js';

package/dist-es/index.js.map

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

package/dist-types/divider/Divider.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface DividerProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The orientation of the divider. Defaults to `"horizontal"`.
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * The variant of the divider. Defaults to `"primary"`.
+     */
+    variant?: "primary" | "secondary" | "tertiary";
+}
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export * from "./Divider";

package/dist-types/index.d.ts

@@ -16,6 +16,7 @@ export * from "./date-input";
 export * from "./date-picker";
 export * from "./deck-item";
 export * from "./deck-layout";
+export * from "./divider";
 export * from "./dropdown";
 export * from "./editable-label";
 export { FormFieldLegacy as FormField, type FormFieldLegacyProps as FormFieldProps, FormLabel, } from "./form-field-legacy";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.46",
+  "version": "1.0.0-alpha.47",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.28.1",
+    "@salt-ds/core": "^1.29.0",
     "@salt-ds/window": "^0.1.1",
     "@salt-ds/styles": "^0.2.1",
     "@salt-ds/icons": "^1.12.0"