@salt-ds/lab 1.0.0-alpha.84 → 1.0.0-alpha.86

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.86
+
+### Minor Changes
+
+- a16cbc5: `Rating` has been added to allow users to provide feedback relating to your product or experience.
+
+  Basic usage:
+
+  ```jsx
+  import { Rating } from "@salt-ds/lab";
+
+  function App() {
+    const [value, setValue] = useState(0);
+
+    return (
+      <Rating
+        value={value}
+        onValueChange={(event, newValue) => setValue(newValue)}
+      />
+    );
+  }
+  ```
+
+### Patch Changes
+
+- Updated dependencies [47d113d]
+- Updated dependencies [a16cbc5]
+  - @salt-ds/core@1.57.0
+
+## 1.0.0-alpha.85
+
+### Minor Changes
+
+- 972e37e: Added mobile density tokens.
+- 4507919: Removed `Table` from labs and promoted to core.
+- 4badc14: Added `Kbd` component.
+
+  `Kbd` is a decorative element used to represent specific keyboard keys.
+
+  ```tsx
+  <Kbd>Option</Kbd>
+  <Kbd>Cmd</Kbd>
+  <Kbd>L</Kbd>
+  ```
+
+### Patch Changes
+
+- Updated dependencies [972e37e]
+- Updated dependencies [4507919]
+  - @salt-ds/core@1.56.0
+
 ## 1.0.0-alpha.84
 
 ### Minor Changes

package/css/salt-lab.css

@@ -1771,6 +1771,36 @@
   padding-right: var(--inputLegacy-staticAdornment-padding);
 }
 
+/* src/kbd/Kbd.css */
+.saltKbd-primary {
+  --kbd-background: var(--salt-container-primary-background);
+}
+.saltKbd-secondary {
+  --kbd-background: var(--salt-container-secondary-background);
+}
+.saltKbd-tertiary {
+  --kbd-background: var(--salt-container-tertiary-background);
+}
+.saltKbd {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: fit-content;
+  border-radius: var(--salt-palette-corner-weaker);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  background: var(--kbd-background);
+  box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-primary-borderColor);
+  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  align-items: center;
+  padding: 0 var(--salt-spacing-50);
+  text-transform: capitalize;
+  color: var(--salt-content-primary-foreground);
+  font-family: var(--salt-text-code-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-style: normal;
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+}
+
 /* src/layer-layout/LayerLayout.css */
 .saltLayerLayout {
   --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));
@@ -2440,6 +2470,118 @@
   z-index: var(--salt-zIndex-default);
 }
 
+/* src/rating/Rating.css */
+.saltRating {
+  display: flex;
+  gap: calc(2 * var(--salt-spacing-fixed-600));
+  align-items: center;
+  box-sizing: border-box;
+}
+.saltFormField .saltRating {
+  min-height: var(--salt-size-base);
+}
+.saltRating-wrapper-top,
+.saltRating-wrapper-bottom {
+  flex-direction: column;
+}
+.saltRating-wrapper-left,
+.saltRating-wrapper-right {
+  flex-direction: row;
+}
+.saltRating-container {
+  display: flex;
+  flex-direction: row;
+  gap: calc(2 * var(--salt-spacing-fixed-600));
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.saltRating-label {
+  color: var(--salt-content-primary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+}
+.saltRating-label.saltRating-label-top,
+.saltRating-label.saltRating-label-bottom {
+  text-align: center;
+}
+.saltRating-label.saltRating-label-left {
+  text-align: right;
+}
+
+/* src/rating/RatingItem.css */
+.saltRatingItem {
+  height: var(--salt-size-icon);
+  width: var(--salt-size-icon);
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  cursor: var(--salt-cursor-hover);
+}
+.saltRatingItem-disabled,
+.saltRatingItem-readOnly {
+  cursor: default;
+}
+.saltRatingItem-input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: inherit;
+  z-index: 1;
+}
+.saltRatingItem-input::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: var(--salt-spacing-fixed-600);
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  box-sizing: content-box;
+}
+.saltRatingItem-icon {
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--salt-sentiment-neutral-dataviz);
+}
+.saltRatingItem-icon .saltIcon {
+  --saltIcon-size: var(--salt-size-icon);
+}
+.saltRatingItem-input:focus-visible ~ .saltRatingItem-icon::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: var(--salt-spacing-fixed-600);
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  box-sizing: content-box;
+  border-radius: var(--salt-palette-corner-strongest);
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(-1 * var(--salt-spacing-fixed-200));
+}
+.saltRatingItem-disabled {
+  cursor: var(--salt-cursor-disabled);
+  opacity: var(--salt-palette-opacity-disabled);
+}
+.saltRatingItem-disabled .saltRatingItem-input {
+  cursor: var(--salt-cursor-disabled);
+}
+.saltRatingItem-selected .saltRatingItem-icon,
+.saltRatingItem-hovered .saltRatingItem-icon,
+.saltRatingItem-unselecting .saltRatingItem-icon {
+  color: var(--salt-sentiment-accent-dataviz);
+}
+
 /* src/search-input/SearchInput.css */
 .saltSearchInput .saltInputLegacy-input::-webkit-search-cancel-button {
   display: none;
@@ -2529,186 +2671,6 @@
   color: var(--salt-content-bold-foreground);
 }
 
-/* src/table/Table.css */
-.saltTable {
-  --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
-  --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
-  --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
-}
-.saltTable-primary {
-  --table-background: var(--salt-container-primary-background);
-}
-.saltTable-secondary {
-  --table-background: var(--salt-container-secondary-background);
-}
-.saltTable-tertiary {
-  --table-background: var(--salt-container-tertiary-background);
-}
-.saltTable-divider-primary {
-  --table-divider-color: var(--salt-separable-primary-borderColor);
-}
-.saltTable-divider-secondary {
-  --table-divider-color: var(--salt-separable-secondary-borderColor);
-}
-.saltTable-divider-tertiary {
-  --table-divider-color: var(--salt-separable-tertiary-borderColor);
-}
-table.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {
-  --table-background: var(--salt-container-tertiary-background);
-}
-table.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) {
-  --table-background: var(--salt-container-secondary-background);
-}
-table.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) {
-  --table-background: var(--salt-container-primary-background);
-}
-table.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) {
-  --table-background: var(--salt-container-primary-background);
-}
-table.saltTable {
-  border-spacing: 0;
-  border-radius: var(--salt-palette-corner, 0);
-  border-collapse: collapse;
-  color: var(--salt-content-primary-foreground);
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  line-height: var(--salt-text-lineHeight);
-  width: 100%;
-}
-table.saltTable tr {
-  background: var(--table-background);
-}
-table.saltTable tbody tr {
-  height: var(--table-row-height);
-  min-height: var(--table-row-height);
-}
-table.saltTable tbody tr:not(:last-child) {
-  border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);
-}
-table.saltTable.saltTable-divider-none tbody tr {
-  --table-divider-color: transparent;
-}
-table.saltTable thead {
-  border-start-start-radius: var(--salt-palette-corner);
-  border-start-end-radius: var(--salt-palette-corner);
-  color: var(--salt-content-secondary-foreground);
-  height: var(--table-header-height);
-  min-height: var(--table-header-height);
-  font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-label-fontWeight-strong);
-  line-height: var(--salt-text-label-lineHeight);
-}
-table.saltTable thead.saltTable-thead-sticky {
-  position: sticky;
-  top: 0;
-}
-table.saltTable thead.saltTable-thead-primary tr {
-  background: var(--salt-container-primary-background);
-}
-table.saltTable thead.saltTable-thead-secondary tr {
-  background: var(--salt-container-secondary-background);
-}
-table.saltTable thead.saltTable-thead-tertiary tr {
-  background: var(--salt-container-tertiary-background);
-}
-table.saltTable thead.saltTable-thead tr {
-  border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100);
-}
-table.saltTable thead.saltTable-thead-divider-primary {
-  --table-header-divider-color: var(--salt-separable-primary-borderColor);
-}
-table.saltTable thead.saltTable-thead-divider-secondary {
-  --table-header-divider-color: var(--salt-separable-secondary-borderColor);
-}
-table.saltTable thead.saltTable-thead-divider-tertiary {
-  --table-header-divider-color: var(--salt-separable-tertiary-borderColor);
-}
-table.saltTable thead.saltTable-thead-divider-none {
-  --table-header-divider-color: transparent;
-}
-table.saltTable tfoot {
-  border-end-start-radius: var(--salt-palette-corner);
-  border-end-end-radius: var(--salt-palette-corner);
-  color: var(--salt-content-primary-foreground);
-  height: var(--table-footer-height);
-  min-height: var(--table-footer-height);
-  font-size: var(--salt-text-fontSize);
-  line-height: var(--salt-text-lineHeight);
-  font-weight: var(--salt-text-fontWeight-strong);
-}
-table.saltTable tfoot.saltTable-tfoot-sticky {
-  position: sticky;
-  bottom: 0;
-}
-table.saltTable tfoot.saltTable-tfoot tr {
-  border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100);
-}
-table.saltTable tfoot.saltTable-tfoot-primary tr {
-  background: var(--salt-container-primary-background);
-}
-table.saltTable tfoot.saltTable-tfoot-secondary tr {
-  background: var(--salt-container-secondary-background);
-}
-table.saltTable tfoot.saltTable-tfoot-tertiary tr {
-  background: var(--salt-container-tertiary-background);
-}
-table.saltTable tfoot.saltTable-tfoot-divider-primary tr {
-  --table-footer-divider-color: var(--salt-separable-primary-borderColor);
-}
-table.saltTable tfoot.saltTable-tfoot-divider-secondary tr {
-  --table-footer-divider-color: var(--salt-separable-secondary-borderColor);
-}
-table.saltTable tfoot.saltTable-tfoot-divider-tertiary tr {
-  --table-footer-divider-color: var(--salt-separable-tertiary-borderColor);
-}
-table.saltTable tfoot.saltTable-tfoot-divider-none tr {
-  --table-footer-divider-color: transparent;
-}
-table.saltTable th {
-  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);
-  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50) + var(--salt-size-fixed-100));
-  position: relative;
-  text-align: start;
-  vertical-align: top;
-  font-weight: inherit;
-}
-table.saltTable th.saltTable-th-align-left {
-  text-align: start;
-}
-table.saltTable th.saltTable-th-align-right {
-  text-align: end;
-}
-table.saltTable tbody th[scope=row] {
-  font-weight: var(--salt-text-fontWeight-strong);
-  line-height: var(--salt-text-lineHeight);
-}
-table.saltTable th + th::before {
-  background: var(--salt-separable-tertiary-borderColor);
-  content: "";
-  position: absolute;
-  z-index: 1;
-  display: block;
-  width: var(--salt-size-fixed-100);
-  height: calc(100% - var(--salt-spacing-200));
-  left: 0;
-  top: var(--salt-spacing-100);
-}
-table.saltTable td {
-  height: 100%;
-  vertical-align: top;
-  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);
-}
-table.saltTable td.saltTable-td-align-left {
-  text-align: start;
-}
-table.saltTable td.saltTable-td-align-right {
-  text-align: end;
-}
-.saltTable-container {
-  width: 100%;
-  overflow: auto;
-}
-
 /* src/tabs/Tab.css */
 .saltTab {
   --saltEditableLabel-padding: 0;
@@ -4349,4 +4311,4 @@ table.saltTable td.saltTable-td-align-right {
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/fcee4d88-fa75-4903-ad49-3fe9dde7a824.css */
+/* src/e9027b72-c8b2-4bef-b218-a3ff3976ba17.css */

package/dist-cjs/index.js

@@ -66,6 +66,7 @@ var FormGroup = require('./form-group/FormGroup.js');
 var FormattedInput = require('./formatted-input/FormattedInput.js');
 var InputLegacy = require('./input-legacy/InputLegacy.js');
 var StaticInputAdornment = require('./input-legacy/StaticInputAdornment.js');
+var Kbd = require('./kbd/Kbd.js');
 var LayerLayout = require('./layer-layout/LayerLayout.js');
 var Highlighter = require('./list/Highlighter.js');
 var List = require('./list/List.js');
@@ -108,6 +109,7 @@ var MetricHeader = require('./metric/MetricHeader.js');
 var Portal = require('./portal/Portal.js');
 var QueryInput = require('./query-input/QueryInput.js');
 var useQueryInput = require('./query-input/useQueryInput.js');
+var Rating = require('./rating/Rating.js');
 var overflowUtils = require('./responsive/overflowUtils.js');
 var useDynamicCollapse = require('./responsive/useDynamicCollapse.js');
 var useInstantCollapse = require('./responsive/useInstantCollapse.js');
@@ -125,14 +127,6 @@ var StaticListItemContent = require('./static-list/StaticListItemContent.js');
 var SystemStatus = require('./system-status/SystemStatus.js');
 var SystemStatusActions = require('./system-status/SystemStatusActions.js');
 var SystemStatusContent = require('./system-status/SystemStatusContent.js');
-var Table = require('./table/Table.js');
-var TableContainer = require('./table/TableContainer.js');
-var TBody = require('./table/TBody.js');
-var TD = require('./table/TD.js');
-var TFoot = require('./table/TFoot.js');
-var TH = require('./table/TH.js');
-var THead = require('./table/THead.js');
-var TR = require('./table/TR.js');
 var Tab = require('./tabs/Tab.js');
 var TabActivationIndicator = require('./tabs/TabActivationIndicator.js');
 var TabPanel = require('./tabs/TabPanel.js');
@@ -243,6 +237,7 @@ exports.FormGroup = FormGroup.FormGroup;
 exports.FormattedInput = FormattedInput.FormattedInput;
 exports.Input = InputLegacy.InputLegacy;
 exports.StaticInputAdornment = StaticInputAdornment.StaticInputAdornment;
+exports.Kbd = Kbd.Kbd;
 exports.LAYER_POSITIONS = LayerLayout.LAYER_POSITIONS;
 exports.LayerLayout = LayerLayout.LayerLayout;
 exports.Highlighter = Highlighter.Highlighter;
@@ -282,6 +277,7 @@ exports.MetricHeader = MetricHeader.MetricHeader;
 exports.Portal = Portal.Portal;
 exports.QueryInput = QueryInput.QueryInput;
 exports.useQueryInput = useQueryInput.useQueryInput;
+exports.Rating = Rating.Rating;
 exports.DropdownPlaceholder = overflowUtils.DropdownPlaceholder;
 exports.NO_DATA = overflowUtils.NO_DATA;
 exports.addAll = overflowUtils.addAll;
@@ -324,15 +320,6 @@ exports.StaticListItemContent = StaticListItemContent.StaticListItemContent;
 exports.SystemStatus = SystemStatus.SystemStatus;
 exports.SystemStatusActions = SystemStatusActions.SystemStatusActions;
 exports.SystemStatusContent = SystemStatusContent.SystemStatusContent;
-exports.Table = Table.Table;
-exports.withTableBaseName = Table.withTableBaseName;
-exports.TableContainer = TableContainer.TableContainer;
-exports.TBody = TBody.TBody;
-exports.TD = TD.TD;
-exports.TFoot = TFoot.TFoot;
-exports.TH = TH.TH;
-exports.THead = THead.THead;
-exports.TR = TR.TR;
 exports.Tab = Tab.Tab;
 exports.TabActivationIndicator = TabActivationIndicator.TabActivationIndicator;
 exports.TabPanel = TabPanel.TabPanel;

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-cjs/kbd/Kbd.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltKbd-primary {\n  --kbd-background: var(--salt-container-primary-background);\n}\n\n.saltKbd-secondary {\n  --kbd-background: var(--salt-container-secondary-background);\n}\n\n.saltKbd-tertiary {\n  --kbd-background: var(--salt-container-tertiary-background);\n}\n\n.saltKbd {\n  display: inline-flex;\n  box-sizing: border-box;\n  width: fit-content;\n  border-radius: var(--salt-palette-corner-weaker);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  background: var(--kbd-background);\n  box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-primary-borderColor);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  align-items: center;\n  padding: 0 var(--salt-spacing-50);\n  text-transform: capitalize;\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-code-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-style: normal;\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Kbd.css.js.map

package/dist-cjs/kbd/Kbd.css.js.map

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

package/dist-cjs/kbd/Kbd.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var Kbd$1 = require('./Kbd.css.js');
+
+const withBaseName = core.makePrefixer("saltKbd");
+const Kbd = react.forwardRef(
+  function Kbd2(props, ref) {
+    const { children, className, variant = "primary", ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-kbd",
+      css: Kbd$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "kbd",
+      {
+        ref,
+        className: clsx.clsx(withBaseName(), withBaseName(variant), className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.Kbd = Kbd;
+//# sourceMappingURL=Kbd.js.map

package/dist-cjs/kbd/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","sources":["../src/kbd/Kbd.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport kbdCss from \"./Kbd.css\";\n\nexport interface KbdProps extends ComponentPropsWithoutRef<\"kbd\"> {\n  /**\n   * The variant of the kbd. Defaults to `\"primary\"`.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltKbd\");\n\nexport const Kbd = forwardRef<HTMLDivElement, KbdProps>(\n  function Kbd(props, ref) {\n    const { children, className, variant = \"primary\", ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-kbd\",\n      css: kbdCss,\n      window: targetWindow,\n    });\n\n    return (\n      <kbd\n        ref={ref}\n        className={clsx(withBaseName(), withBaseName(variant), className)}\n        {...rest}\n      >\n        {children}\n      </kbd>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Kbd","useWindow","useComponentCssInjection","kbdCss","jsx","clsx"],"mappings":";;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,SAAS,CAAA;AAEpC,MAAM,GAAA,GAAMC,gBAAA;AAAA,EACjB,SAASC,IAAAA,CAAI,KAAA,EAAO,GAAA,EAAK;AACvB,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE9D,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,UAAA;AAAA,MACR,GAAA,EAAKC,KAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,QAC/D,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/rating/Rating.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltRating {\n  display: flex;\n  gap: calc(2 * var(--salt-spacing-fixed-600));\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.saltFormField .saltRating {\n  min-height: var(--salt-size-base);\n}\n\n.saltRating-wrapper-top,\n.saltRating-wrapper-bottom {\n  flex-direction: column;\n}\n\n.saltRating-wrapper-left,\n.saltRating-wrapper-right {\n  flex-direction: row;\n}\n\n.saltRating-container {\n  display: flex;\n  flex-direction: row;\n  gap: calc(2 * var(--salt-spacing-fixed-600));\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n.saltRating-label {\n  color: var(--salt-content-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}\n\n.saltRating-label.saltRating-label-top,\n.saltRating-label.saltRating-label-bottom {\n  text-align: center;\n}\n\n.saltRating-label.saltRating-label-left {\n  text-align: right;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Rating.css.js.map

package/dist-cjs/rating/Rating.css.js.map

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

package/dist-cjs/rating/Rating.js

@@ -0,0 +1,136 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var Rating$1 = require('./Rating.css.js');
+var RatingItem = require('./RatingItem.js');
+
+const withBaseName = core.makePrefixer("saltRating");
+const defaultGetLabel = (value) => `${value} Star${value > 1 ? "s" : ""}`;
+const Rating = react.forwardRef(function Rating2({
+  value: valueProp,
+  defaultValue = 0,
+  name: nameProp,
+  onChange,
+  className,
+  readOnly,
+  disabled,
+  max = 5,
+  getLabel = defaultGetLabel,
+  getVisibleLabel,
+  labelPlacement = "right",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...restProps
+}, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-rating",
+    css: Rating$1,
+    window: targetWindow
+  });
+  const {
+    a11yProps: {
+      "aria-describedby": formFieldDescribedBy,
+      "aria-labelledby": formFieldLabelledBy
+    } = {}
+  } = core.useFormFieldProps();
+  const [hoveredValue, setHoveredValue] = react.useState(0);
+  const [selected, setSelected] = core.useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Rating",
+    state: "value"
+  });
+  const radioGroupRef = react.useRef(null);
+  const name = core.useId(nameProp);
+  const updateRating = (newValue, event) => {
+    setSelected(newValue);
+    onChange == null ? void 0 : onChange(event, newValue);
+  };
+  const handleMouseEnter = (event) => {
+    if (readOnly || disabled) return;
+    const itemValue = Number.parseInt(event.currentTarget.value, 10);
+    setHoveredValue(itemValue);
+  };
+  const handleChange = (event) => {
+    if (readOnly) {
+      event.preventDefault();
+      return;
+    }
+    const itemValue = Number.parseInt(event.currentTarget.value, 10);
+    updateRating(itemValue, event);
+  };
+  const isTopLeft = labelPlacement === "top" || labelPlacement === "left";
+  const displayLabel = getVisibleLabel && /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(
+        withBaseName("label"),
+        withBaseName(`label-${labelPlacement}`)
+      ),
+      "aria-hidden": true,
+      children: getVisibleLabel(hoveredValue || selected, max)
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(`label${core.capitalize(labelPlacement)}`),
+        className
+      ),
+      ...restProps,
+      children: [
+        isTopLeft && displayLabel,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "radiogroup",
+            className: withBaseName("container"),
+            ref: radioGroupRef,
+            "aria-readonly": readOnly || void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": clsx.clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
+            "aria-describedby": clsx.clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
+            onMouseLeave: () => setHoveredValue(0),
+            children: Array.from({ length: max }, (_, index) => {
+              const itemValue = index + 1;
+              const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;
+              const isSelected = hoveredValue === 0 && itemValue <= selected;
+              const isUnselecting = hoveredValue > 0 && itemValue > hoveredValue && itemValue <= selected;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                RatingItem.RatingItem,
+                {
+                  currentRating: selected,
+                  isHovered,
+                  isSelected,
+                  isUnselecting,
+                  onMouseEnter: handleMouseEnter,
+                  onChange: handleChange,
+                  value: itemValue,
+                  readOnly,
+                  disabled,
+                  name,
+                  "aria-label": getLabel == null ? void 0 : getLabel(itemValue)
+                },
+                itemValue
+              );
+            })
+          }
+        ),
+        !isTopLeft && displayLabel
+      ]
+    }
+  );
+});
+
+exports.Rating = Rating;
+//# sourceMappingURL=Rating.js.map