@salt-ds/lab 1.0.0-alpha.30 → 1.0.0-alpha.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/css/salt-lab.css +101 -160
  2. package/dist-cjs/combo-box-next/ComboBoxNext.js +288 -290
  3. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
  4. package/dist-cjs/combo-box-next/useComboBoxNext.js.map +1 -1
  5. package/dist-cjs/content-status/internal/StatusIndicator.js +1 -3
  6. package/dist-cjs/content-status/internal/StatusIndicator.js.map +1 -1
  7. package/dist-cjs/dialog/Dialog.css.js +1 -1
  8. package/dist-cjs/dialog/Dialog.js +53 -48
  9. package/dist-cjs/dialog/Dialog.js.map +1 -1
  10. package/dist-cjs/dialog/DialogActions.js.map +1 -1
  11. package/dist-cjs/dialog/DialogContent.css.js +1 -1
  12. package/dist-cjs/dialog/DialogContent.js +17 -8
  13. package/dist-cjs/dialog/DialogContent.js.map +1 -1
  14. package/dist-cjs/dialog/DialogContext.js +3 -1
  15. package/dist-cjs/dialog/DialogContext.js.map +1 -1
  16. package/dist-cjs/dialog/DialogTitle.js +4 -5
  17. package/dist-cjs/dialog/DialogTitle.js.map +1 -1
  18. package/dist-cjs/dropdown-next/DropdownNext.js +303 -308
  19. package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
  20. package/dist-cjs/index.js +0 -6
  21. package/dist-cjs/index.js.map +1 -1
  22. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  23. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  24. package/dist-cjs/option/Option.js.map +1 -1
  25. package/dist-cjs/parent-child-layout/ParentChildLayout.css.js +1 -1
  26. package/dist-cjs/parent-child-layout/ParentChildLayout.js +30 -38
  27. package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
  28. package/dist-cjs/slider/Slider.css.js +1 -1
  29. package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js +1 -1
  30. package/dist-es/combo-box-next/ComboBoxNext.js +288 -290
  31. package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
  32. package/dist-es/combo-box-next/useComboBoxNext.js.map +1 -1
  33. package/dist-es/content-status/internal/StatusIndicator.js +1 -3
  34. package/dist-es/content-status/internal/StatusIndicator.js.map +1 -1
  35. package/dist-es/dialog/Dialog.css.js +1 -1
  36. package/dist-es/dialog/Dialog.js +55 -50
  37. package/dist-es/dialog/Dialog.js.map +1 -1
  38. package/dist-es/dialog/DialogActions.js.map +1 -1
  39. package/dist-es/dialog/DialogContent.css.js +1 -1
  40. package/dist-es/dialog/DialogContent.js +19 -10
  41. package/dist-es/dialog/DialogContent.js.map +1 -1
  42. package/dist-es/dialog/DialogContext.js +3 -1
  43. package/dist-es/dialog/DialogContext.js.map +1 -1
  44. package/dist-es/dialog/DialogTitle.js +4 -5
  45. package/dist-es/dialog/DialogTitle.js.map +1 -1
  46. package/dist-es/dropdown-next/DropdownNext.js +303 -308
  47. package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
  48. package/dist-es/index.js +0 -3
  49. package/dist-es/index.js.map +1 -1
  50. package/dist-es/list-control/ListControlContext.js.map +1 -1
  51. package/dist-es/list-control/ListControlState.js.map +1 -1
  52. package/dist-es/option/Option.js.map +1 -1
  53. package/dist-es/parent-child-layout/ParentChildLayout.css.js +1 -1
  54. package/dist-es/parent-child-layout/ParentChildLayout.js +32 -40
  55. package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
  56. package/dist-es/slider/Slider.css.js +1 -1
  57. package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js +1 -1
  58. package/dist-types/combo-box-next/ComboBoxNext.d.ts +5 -3
  59. package/dist-types/combo-box-next/useComboBoxNext.d.ts +11 -11
  60. package/dist-types/content-status/internal/StatusIndicator.d.ts +1 -1
  61. package/dist-types/dialog/Dialog.d.ts +9 -1
  62. package/dist-types/dialog/DialogContext.d.ts +0 -2
  63. package/dist-types/dialog/DialogTitle.d.ts +9 -3
  64. package/dist-types/dropdown-next/DropdownNext.d.ts +5 -3
  65. package/dist-types/index.d.ts +0 -2
  66. package/dist-types/list-control/ListControlContext.d.ts +10 -10
  67. package/dist-types/list-control/ListControlState.d.ts +15 -15
  68. package/dist-types/option/Option.d.ts +1 -1
  69. package/dist-types/parent-child-layout/ParentChildLayout.d.ts +8 -13
  70. package/package.json +2 -2
  71. package/dist-cjs/dialog/useDialog.js +0 -31
  72. package/dist-cjs/dialog/useDialog.js.map +0 -1
  73. package/dist-cjs/parent-child-item/ParentChildItem.css.js +0 -6
  74. package/dist-cjs/parent-child-item/ParentChildItem.css.js.map +0 -1
  75. package/dist-cjs/parent-child-item/ParentChildItem.js +0 -48
  76. package/dist-cjs/parent-child-item/ParentChildItem.js.map +0 -1
  77. package/dist-cjs/progress/CircularProgress/CircularProgress.css.js +0 -6
  78. package/dist-cjs/progress/CircularProgress/CircularProgress.css.js.map +0 -1
  79. package/dist-cjs/progress/CircularProgress/CircularProgress.js +0 -89
  80. package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +0 -1
  81. package/dist-cjs/progress/Info.js +0 -20
  82. package/dist-cjs/progress/Info.js.map +0 -1
  83. package/dist-cjs/progress/LinearProgress/LinearProgress.css.js +0 -6
  84. package/dist-cjs/progress/LinearProgress/LinearProgress.css.js.map +0 -1
  85. package/dist-cjs/progress/LinearProgress/LinearProgress.js +0 -63
  86. package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +0 -1
  87. package/dist-es/dialog/useDialog.js +0 -27
  88. package/dist-es/dialog/useDialog.js.map +0 -1
  89. package/dist-es/parent-child-item/ParentChildItem.css.js +0 -4
  90. package/dist-es/parent-child-item/ParentChildItem.css.js.map +0 -1
  91. package/dist-es/parent-child-item/ParentChildItem.js +0 -44
  92. package/dist-es/parent-child-item/ParentChildItem.js.map +0 -1
  93. package/dist-es/progress/CircularProgress/CircularProgress.css.js +0 -4
  94. package/dist-es/progress/CircularProgress/CircularProgress.css.js.map +0 -1
  95. package/dist-es/progress/CircularProgress/CircularProgress.js +0 -85
  96. package/dist-es/progress/CircularProgress/CircularProgress.js.map +0 -1
  97. package/dist-es/progress/Info.js +0 -16
  98. package/dist-es/progress/Info.js.map +0 -1
  99. package/dist-es/progress/LinearProgress/LinearProgress.css.js +0 -4
  100. package/dist-es/progress/LinearProgress/LinearProgress.css.js.map +0 -1
  101. package/dist-es/progress/LinearProgress/LinearProgress.js +0 -59
  102. package/dist-es/progress/LinearProgress/LinearProgress.js.map +0 -1
  103. package/dist-types/dialog/useDialog.d.ts +0 -25
  104. package/dist-types/parent-child-item/ParentChildItem.d.ts +0 -31
  105. package/dist-types/parent-child-item/index.d.ts +0 -1
  106. package/dist-types/progress/CircularProgress/CircularProgress.d.ts +0 -25
  107. package/dist-types/progress/Info.d.ts +0 -6
  108. package/dist-types/progress/LinearProgress/LinearProgress.d.ts +0 -26
  109. package/dist-types/progress/index.d.ts +0 -2
@@ -1,85 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import { clsx } from 'clsx';
4
- import { makePrefixer } from '@salt-ds/core';
5
- import { Info } from '../Info.js';
6
- import { useWindow } from '@salt-ds/window';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import css_248z from './CircularProgress.css.js';
9
-
10
- const withBaseName = makePrefixer("saltCircularProgress");
11
- const CircularProgress = forwardRef(function CircularProgress2({ "aria-label": ariaLabel, className, max = 100, value = 0, ...rest }, ref) {
12
- const targetWindow = useWindow();
13
- useComponentCssInjection({
14
- testId: "salt-circular-progress",
15
- css: css_248z,
16
- window: targetWindow
17
- });
18
- const subOverlayRightStyle = {};
19
- const subOverlayLeftStyle = {};
20
- const getRotationAngle = (progress2, shift = 0) => {
21
- return -180 + (progress2 - shift) / 50 * 180;
22
- };
23
- const progress = value / max * 100;
24
- if (progress <= 50) {
25
- const rotationAngle = getRotationAngle(progress);
26
- subOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;
27
- subOverlayLeftStyle.transform = "rotate(-180deg)";
28
- } else {
29
- const rotationAngle = getRotationAngle(progress, 50);
30
- subOverlayRightStyle.transform = "rotate(0deg)";
31
- subOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;
32
- }
33
- const progressInfo = /* @__PURE__ */ jsx(Info, {
34
- className: withBaseName("progressValue"),
35
- unit: "%",
36
- value: Math.round(progress)
37
- });
38
- return /* @__PURE__ */ jsxs("div", {
39
- className: clsx(withBaseName(), className),
40
- "data-testid": "circular-progress",
41
- ref,
42
- role: "progressbar",
43
- "aria-label": ariaLabel,
44
- "aria-valuemax": max,
45
- "aria-valuemin": 0,
46
- "aria-valuenow": Math.round(value),
47
- ...rest,
48
- children: [
49
- /* @__PURE__ */ jsx("div", {
50
- className: withBaseName("track")
51
- }),
52
- /* @__PURE__ */ jsxs("div", {
53
- className: withBaseName("bars"),
54
- children: [
55
- /* @__PURE__ */ jsx("div", {
56
- className: withBaseName("barOverlayRight"),
57
- children: /* @__PURE__ */ jsx("div", {
58
- className: withBaseName("barSubOverlayRight"),
59
- "data-testid": "barSubOverlayRight",
60
- style: subOverlayRightStyle,
61
- children: /* @__PURE__ */ jsx("div", {
62
- className: withBaseName("bar")
63
- })
64
- })
65
- }),
66
- /* @__PURE__ */ jsx("div", {
67
- className: withBaseName("barOverlayLeft"),
68
- children: /* @__PURE__ */ jsx("div", {
69
- className: withBaseName("barSubOverlayLeft"),
70
- "data-testid": "barSubOverlayLeft",
71
- style: subOverlayLeftStyle,
72
- children: /* @__PURE__ */ jsx("div", {
73
- className: withBaseName("bar")
74
- })
75
- })
76
- })
77
- ]
78
- }),
79
- progressInfo
80
- ]
81
- });
82
- });
83
-
84
- export { CircularProgress };
85
- //# sourceMappingURL=CircularProgress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Info } from \"../Info\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nexport interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * A label for accessibility\n */\n \"aria-label\"?: string;\n /**\n * The className(s) of the component\n */\n className?: string;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\n/**\n * Circular progress bar with an Info element showing the current value\n */\nexport const CircularProgress = forwardRef<\n HTMLDivElement,\n CircularProgressProps\n>(function CircularProgress(\n { \"aria-label\": ariaLabel, className, max = 100, value = 0, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-circular-progress\",\n css: circularProgressCSS,\n window: targetWindow,\n });\n\n const subOverlayRightStyle: CSSProperties = {};\n const subOverlayLeftStyle: CSSProperties = {};\n\n const getRotationAngle = (progress: number, shift = 0) => {\n return -180 + ((progress - shift) / 50) * 180;\n };\n\n const progress = (value / max) * 100;\n\n if (progress <= 50) {\n const rotationAngle = getRotationAngle(progress);\n subOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n subOverlayLeftStyle.transform = \"rotate(-180deg)\";\n } else {\n const rotationAngle = getRotationAngle(progress, 50);\n subOverlayRightStyle.transform = \"rotate(0deg)\";\n subOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n }\n\n const progressInfo = (\n <Info\n className={withBaseName(\"progressValue\")}\n unit=\"%\"\n value={Math.round(progress)}\n />\n );\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n data-testid=\"circular-progress\"\n ref={ref}\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuemax={max}\n aria-valuemin={0}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"track\")} />\n <div className={withBaseName(\"bars\")}>\n <div className={withBaseName(\"barOverlayRight\")}>\n <div\n className={withBaseName(\"barSubOverlayRight\")}\n data-testid=\"barSubOverlayRight\"\n style={subOverlayRightStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n <div className={withBaseName(\"barOverlayLeft\")}>\n <div\n className={withBaseName(\"barSubOverlayLeft\")}\n data-testid=\"barSubOverlayLeft\"\n style={subOverlayLeftStyle}\n >\n <div className={withBaseName(\"bar\")} />\n </div>\n </div>\n </div>\n {progressInfo}\n </div>\n );\n});\n"],"names":["CircularProgress","circularProgressCSS","progress"],"mappings":"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"}
@@ -1,16 +0,0 @@
1
- import { jsxs } from 'react/jsx-runtime';
2
- import { Text } from '@salt-ds/core';
3
-
4
- const Info = ({ className, value, unit }) => {
5
- return /* @__PURE__ */ jsxs(Text, {
6
- styleAs: "h2",
7
- className,
8
- children: [
9
- value,
10
- unit
11
- ]
12
- });
13
- };
14
-
15
- export { Info };
16
- //# sourceMappingURL=Info.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Info.js","sources":["../src/progress/Info.tsx"],"sourcesContent":["import { Text } from \"@salt-ds/core\";\nexport interface InfoProps {\n className: string;\n unit: string;\n value: number;\n}\n\nexport const Info = ({ className, value, unit }: InfoProps) => {\n return (\n <Text styleAs=\"h2\" className={className}>\n {value}\n {unit}\n </Text>\n );\n};\n"],"names":[],"mappings":";;;AAOO,MAAM,OAAO,CAAC,EAAE,SAAW,EAAA,KAAA,EAAO,MAAsB,KAAA;AAC7D,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IAAK,OAAQ,EAAA,IAAA;AAAA,IAAK,SAAA;AAAA,IAChB,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,IAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltLinearProgress {\n align-items: center;\n color: var(--salt-content-primary-foreground);\n display: flex;\n min-width: 400px;\n font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-barContainer {\n background: none;\n position: relative;\n width: 100%;\n overflow: hidden;\n height: var(--salt-size-bar-strong);\n}\n\n.saltLinearProgress-bar {\n width: 100%;\n position: absolute;\n left: 0;\n bottom: 0;\n top: 0;\n transition: transform 0.2s linear;\n transform-origin: left;\n background: var(--salt-accent-background);\n z-index: 2;\n}\n\n.saltLinearProgress-track {\n background: var(--salt-palette-neutral-secondary-border);\n width: 100%;\n height: var(--salt-size-bar-small);\n position: absolute;\n top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);\n transition: transform 0.2s linear;\n transform-origin: left;\n}\n\n.saltLinearProgress-progressValue {\n color: inherit;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n margin: 0;\n white-space: nowrap;\n padding-left: var(--salt-spacing-100);\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=LinearProgress.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LinearProgress.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,59 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import { clsx } from 'clsx';
4
- import { makePrefixer } from '@salt-ds/core';
5
- import { Info } from '../Info.js';
6
- import { useWindow } from '@salt-ds/window';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import css_248z from './LinearProgress.css.js';
9
-
10
- const withBaseName = makePrefixer("saltLinearProgress");
11
- const LinearProgress = forwardRef(
12
- function LinearProgress2({ className, max = 100, value = 0, ...rest }, ref) {
13
- const targetWindow = useWindow();
14
- useComponentCssInjection({
15
- testId: "salt-linear-progress",
16
- css: css_248z,
17
- window: targetWindow
18
- });
19
- const progress = value / max * 100;
20
- const progressInfo = /* @__PURE__ */ jsx(Info, {
21
- unit: "%",
22
- value: Math.round(progress),
23
- className: withBaseName("progressValue")
24
- });
25
- const barStyle = {};
26
- const trackStyle = {};
27
- barStyle.transform = `translateX(${progress - 100}%)`;
28
- trackStyle.transform = `translateX(${progress}%)`;
29
- return /* @__PURE__ */ jsxs("div", {
30
- className: clsx(withBaseName(), className),
31
- ref,
32
- "data-testid": "linear-progress",
33
- role: "progressbar",
34
- "aria-valuemax": max,
35
- "aria-valuemin": 0,
36
- "aria-valuenow": Math.round(value),
37
- ...rest,
38
- children: [
39
- /* @__PURE__ */ jsxs("div", {
40
- className: withBaseName("barContainer"),
41
- children: [
42
- /* @__PURE__ */ jsx("div", {
43
- className: withBaseName("bar"),
44
- style: barStyle
45
- }),
46
- /* @__PURE__ */ jsx("div", {
47
- className: withBaseName("track"),
48
- style: trackStyle
49
- })
50
- ]
51
- }),
52
- progressInfo
53
- ]
54
- });
55
- }
56
- );
57
-
58
- export { LinearProgress };
59
- //# sourceMappingURL=LinearProgress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { Info } from \"../Info\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The className(s) of the component.\n */\n className?: string;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The unit shown on the progress indicator.\n * Default unit is `%`.\n */\n unit?: string;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\n/**\n * Linear progress bar with an Info element showing the current value\n */\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n function LinearProgress({ className, max = 100, value = 0, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-linear-progress\",\n css: linearProgressCss,\n window: targetWindow,\n });\n\n const progress = (value / max) * 100;\n\n const progressInfo = (\n <Info\n unit=\"%\"\n value={Math.round(progress)}\n className={withBaseName(\"progressValue\")}\n />\n );\n\n const barStyle: CSSProperties = {};\n const trackStyle: CSSProperties = {};\n\n barStyle.transform = `translateX(${progress - 100}%)`;\n trackStyle.transform = `translateX(${progress}%)`;\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n data-testid=\"linear-progress\"\n role=\"progressbar\"\n aria-valuemax={max}\n aria-valuemin={0}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"barContainer\")}>\n <div className={withBaseName(\"bar\")} style={barStyle} />\n <div className={withBaseName(\"track\")} style={trackStyle} />\n </div>\n {progressInfo}\n </div>\n );\n }\n);\n"],"names":["LinearProgress","linearProgressCss"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AA2B/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,EAAE,SAAW,EAAA,GAAA,GAAM,KAAK,KAAQ,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAAG,GAAK,EAAA;AACzE,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,QAAA,GAAY,QAAQ,GAAO,GAAA,GAAA,CAAA;AAEjC,IAAA,MAAM,+BACH,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,IAAK,EAAA,GAAA;AAAA,MACL,KAAA,EAAO,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,MAC1B,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,KACzC,CAAA,CAAA;AAGF,IAAA,MAAM,WAA0B,EAAC,CAAA;AACjC,IAAA,MAAM,aAA4B,EAAC,CAAA;AAEnC,IAAS,QAAA,CAAA,SAAA,GAAY,cAAc,QAAW,GAAA,GAAA,CAAA,EAAA,CAAA,CAAA;AAC9C,IAAA,UAAA,CAAW,YAAY,CAAc,WAAA,EAAA,QAAA,CAAA,EAAA,CAAA,CAAA;AAErC,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,aAAY,EAAA,iBAAA;AAAA,MACZ,IAAK,EAAA,aAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,CAAA;AAAA,MACf,eAAA,EAAe,IAAK,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC9B,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACzC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAAG,KAAO,EAAA,QAAA;AAAA,aAAU,CAAA;AAAA,4BACrD,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAG,KAAO,EAAA,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SAC5D,CAAA;AAAA,QACC,YAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,25 +0,0 @@
1
- import { UseFloatingUIProps } from "@salt-ds/core";
2
- export declare type UseDialogProps = Partial<Pick<UseFloatingUIProps, "onOpenChange" | "open">>;
3
- export declare function useDialog(props: UseDialogProps): {
4
- getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
5
- getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
6
- floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
7
- context: {
8
- x: number;
9
- y: number;
10
- placement: import("@floating-ui/utils").Placement;
11
- strategy: import("@floating-ui/utils").Strategy;
12
- middlewareData: import("@floating-ui/core").MiddlewareData;
13
- isPositioned: boolean;
14
- update: () => void;
15
- floatingStyles: import("react").CSSProperties;
16
- open: boolean;
17
- onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
18
- events: import("@floating-ui/react").FloatingEvents;
19
- dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
20
- nodeId: string | undefined;
21
- floatingId: string;
22
- refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
23
- elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
24
- };
25
- };
@@ -1,31 +0,0 @@
1
- import { HTMLAttributes } from "react";
2
- import { flexItemAlignment, ResponsiveProp } from "@salt-ds/core";
3
- export declare type SlideDirection = "top" | "bottom" | "left" | "right";
4
- export interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {
5
- /**
6
- * Allows the alignment specified by parent to be overridden for individual items, default is "start".
7
- */
8
- align?: flexItemAlignment;
9
- /**
10
- * Disable all animations.
11
- */
12
- disableAnimations?: boolean;
13
- /**
14
- * Direction for slide animations.
15
- */
16
- direction?: SlideDirection;
17
- /**
18
- * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.
19
- */
20
- grow?: ResponsiveProp<number>;
21
- /**
22
- * Determines whether the component is stacked
23
- */
24
- isStacked?: boolean;
25
- /**
26
- * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.
27
-
28
- */
29
- shrink?: ResponsiveProp<number>;
30
- }
31
- export declare const ParentChildItem: import("react").ForwardRefExoticComponent<ParentChildItemProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -1 +0,0 @@
1
- export * from "./ParentChildItem";
@@ -1,25 +0,0 @@
1
- import { HTMLAttributes } from "react";
2
- export interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {
3
- /**
4
- * A label for accessibility
5
- */
6
- "aria-label"?: string;
7
- /**
8
- * The className(s) of the component
9
- */
10
- className?: string;
11
- /**
12
- * The value of the max progress indicator.
13
- * Default value is 100.
14
- */
15
- max?: number;
16
- /**
17
- * The value of the progress indicator.
18
- * Value between 0 and max.
19
- */
20
- value?: number;
21
- }
22
- /**
23
- * Circular progress bar with an Info element showing the current value
24
- */
25
- export declare const CircularProgress: import("react").ForwardRefExoticComponent<CircularProgressProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,6 +0,0 @@
1
- export interface InfoProps {
2
- className: string;
3
- unit: string;
4
- value: number;
5
- }
6
- export declare const Info: ({ className, value, unit }: InfoProps) => JSX.Element;
@@ -1,26 +0,0 @@
1
- import { HTMLAttributes } from "react";
2
- export interface LinearProgressProps extends HTMLAttributes<HTMLDivElement> {
3
- /**
4
- * The className(s) of the component.
5
- */
6
- className?: string;
7
- /**
8
- * The value of the max progress indicator.
9
- * Default value is 100.
10
- */
11
- max?: number;
12
- /**
13
- * The unit shown on the progress indicator.
14
- * Default unit is `%`.
15
- */
16
- unit?: string;
17
- /**
18
- * The value of the progress indicator.
19
- * Value between 0 and max.
20
- */
21
- value?: number;
22
- }
23
- /**
24
- * Linear progress bar with an Info element showing the current value
25
- */
26
- export declare const LinearProgress: import("react").ForwardRefExoticComponent<LinearProgressProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,2 +0,0 @@
1
- export * from "./CircularProgress/CircularProgress";
2
- export * from "./LinearProgress/LinearProgress";