@openameba/spindle-ui 2.10.0 → 3.0.0

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 (142) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/Form/Checkbox/Checkbox.d.ts +8 -0
  3. package/Form/Checkbox/Checkbox.d.ts.map +1 -0
  4. package/Form/Checkbox/Checkbox.figma.d.ts.map +1 -0
  5. package/Form/{Checkbox.figma.js → Checkbox/Checkbox.figma.js} +3 -2
  6. package/Form/Checkbox/Checkbox.figma.js.map +1 -0
  7. package/Form/{Checkbox.figma.mjs → Checkbox/Checkbox.figma.mjs} +2 -1
  8. package/Form/Checkbox/Checkbox.js +79 -0
  9. package/Form/Checkbox/Checkbox.js.map +1 -0
  10. package/Form/Checkbox/Checkbox.mjs +16 -0
  11. package/Form/Checkbox.css +1 -1
  12. package/Form/Checkbox.d.ts +1 -6
  13. package/Form/Checkbox.d.ts.map +1 -1
  14. package/Form/Checkbox.js +4 -70
  15. package/Form/Checkbox.js.map +1 -1
  16. package/Form/Checkbox.mjs +3 -11
  17. package/Form/DropDown/DropDown.d.ts +9 -0
  18. package/Form/DropDown/DropDown.d.ts.map +1 -0
  19. package/Form/DropDown/DropDown.js +101 -0
  20. package/Form/DropDown/DropDown.js.map +1 -0
  21. package/Form/DropDown/DropDown.mjs +38 -0
  22. package/Form/DropDown.d.ts +1 -8
  23. package/Form/DropDown.d.ts.map +1 -1
  24. package/Form/DropDown.js +4 -97
  25. package/Form/DropDown.js.map +1 -1
  26. package/Form/DropDown.mjs +3 -38
  27. package/Form/InlineDropDown/InlineDropDown.d.ts +10 -0
  28. package/Form/InlineDropDown/InlineDropDown.d.ts.map +1 -0
  29. package/Form/InlineDropDown/InlineDropDown.js +93 -0
  30. package/Form/InlineDropDown/InlineDropDown.js.map +1 -0
  31. package/Form/InlineDropDown/InlineDropDown.mjs +30 -0
  32. package/Form/InlineDropDown.d.ts +1 -9
  33. package/Form/InlineDropDown.d.ts.map +1 -1
  34. package/Form/InlineDropDown.js +4 -89
  35. package/Form/InlineDropDown.js.map +1 -1
  36. package/Form/InlineDropDown.mjs +3 -30
  37. package/Form/InputLabel/InputLabel.d.ts +8 -0
  38. package/Form/InputLabel/InputLabel.d.ts.map +1 -0
  39. package/Form/InputLabel/InputLabel.js +36 -0
  40. package/Form/InputLabel/InputLabel.js.map +1 -0
  41. package/Form/InputLabel/InputLabel.mjs +5 -0
  42. package/Form/InputLabel.d.ts +1 -7
  43. package/Form/InputLabel.d.ts.map +1 -1
  44. package/Form/InputLabel.js +4 -32
  45. package/Form/InputLabel.js.map +1 -1
  46. package/Form/InputLabel.mjs +3 -5
  47. package/Form/InvalidMessage/InvalidMessage.d.ts +8 -0
  48. package/Form/InvalidMessage/InvalidMessage.d.ts.map +1 -0
  49. package/Form/InvalidMessage/InvalidMessage.js +40 -0
  50. package/Form/InvalidMessage/InvalidMessage.js.map +1 -0
  51. package/Form/InvalidMessage/InvalidMessage.mjs +9 -0
  52. package/Form/InvalidMessage.d.ts +1 -7
  53. package/Form/InvalidMessage.d.ts.map +1 -1
  54. package/Form/InvalidMessage.js +4 -36
  55. package/Form/InvalidMessage.js.map +1 -1
  56. package/Form/InvalidMessage.mjs +3 -9
  57. package/Form/Radio/Radio.d.ts +8 -0
  58. package/Form/Radio/Radio.d.ts.map +1 -0
  59. package/Form/Radio/Radio.figma.d.ts.map +1 -0
  60. package/Form/Radio/Radio.figma.js.map +1 -0
  61. package/Form/Radio/Radio.js +74 -0
  62. package/Form/Radio/Radio.js.map +1 -0
  63. package/Form/Radio/Radio.mjs +11 -0
  64. package/Form/Radio.d.ts +1 -7
  65. package/Form/Radio.d.ts.map +1 -1
  66. package/Form/Radio.js +4 -70
  67. package/Form/Radio.js.map +1 -1
  68. package/Form/Radio.mjs +3 -11
  69. package/Form/TextArea/TextArea.d.ts +9 -0
  70. package/Form/TextArea/TextArea.d.ts.map +1 -0
  71. package/Form/TextArea/TextArea.js +65 -0
  72. package/Form/TextArea/TextArea.js.map +1 -0
  73. package/Form/TextArea/TextArea.mjs +5 -0
  74. package/Form/TextArea.d.ts +1 -8
  75. package/Form/TextArea.d.ts.map +1 -1
  76. package/Form/TextArea.js +4 -61
  77. package/Form/TextArea.js.map +1 -1
  78. package/Form/TextArea.mjs +3 -5
  79. package/Form/TextField/TextField.d.ts +10 -0
  80. package/Form/TextField/TextField.d.ts.map +1 -0
  81. package/Form/TextField/TextField.js +69 -0
  82. package/Form/TextField/TextField.js.map +1 -0
  83. package/Form/TextField/TextField.mjs +9 -0
  84. package/Form/TextField.d.ts +1 -9
  85. package/Form/TextField.d.ts.map +1 -1
  86. package/Form/TextField.js +4 -65
  87. package/Form/TextField.js.map +1 -1
  88. package/Form/TextField.mjs +3 -9
  89. package/Form/ToggleSwitch/ToggleSwitch.d.ts +7 -0
  90. package/Form/ToggleSwitch/ToggleSwitch.d.ts.map +1 -0
  91. package/Form/ToggleSwitch/ToggleSwitch.figma.d.ts.map +1 -0
  92. package/Form/ToggleSwitch/ToggleSwitch.figma.js.map +1 -0
  93. package/Form/ToggleSwitch/ToggleSwitch.js +71 -0
  94. package/Form/ToggleSwitch/ToggleSwitch.js.map +1 -0
  95. package/Form/ToggleSwitch/ToggleSwitch.mjs +11 -0
  96. package/Form/ToggleSwitch.d.ts +1 -6
  97. package/Form/ToggleSwitch.d.ts.map +1 -1
  98. package/Form/ToggleSwitch.js +4 -67
  99. package/Form/ToggleSwitch.js.map +1 -1
  100. package/Form/ToggleSwitch.mjs +3 -11
  101. package/Form/index.css +1 -1
  102. package/Modal/AppealModal/AppealModal.d.ts +23 -0
  103. package/Modal/AppealModal/AppealModal.d.ts.map +1 -0
  104. package/Modal/AppealModal/AppealModal.js +156 -0
  105. package/Modal/AppealModal/AppealModal.js.map +1 -0
  106. package/Modal/AppealModal/AppealModal.mjs +87 -0
  107. package/Modal/AppealModal.d.ts +1 -22
  108. package/Modal/AppealModal.d.ts.map +1 -1
  109. package/Modal/AppealModal.js +4 -152
  110. package/Modal/AppealModal.js.map +1 -1
  111. package/Modal/AppealModal.mjs +3 -87
  112. package/Modal/SemiModal/SemiModal.d.ts +27 -0
  113. package/Modal/SemiModal/SemiModal.d.ts.map +1 -0
  114. package/Modal/SemiModal/SemiModal.js +145 -0
  115. package/Modal/SemiModal/SemiModal.js.map +1 -0
  116. package/Modal/SemiModal/SemiModal.mjs +76 -0
  117. package/Modal/SemiModal.d.ts +1 -26
  118. package/Modal/SemiModal.d.ts.map +1 -1
  119. package/Modal/SemiModal.js +4 -141
  120. package/Modal/SemiModal.js.map +1 -1
  121. package/Modal/SemiModal.mjs +3 -76
  122. package/Table/Table.css +1 -1
  123. package/Table/Table.d.ts +1 -1
  124. package/Table/Table.d.ts.map +1 -1
  125. package/Table/Table.js +4 -8
  126. package/Table/Table.js.map +1 -1
  127. package/Table/Table.mjs +4 -8
  128. package/index.css +2 -2
  129. package/package.json +4 -4
  130. package/Form/Checkbox.figma.d.ts.map +0 -1
  131. package/Form/Checkbox.figma.js.map +0 -1
  132. package/Form/Radio.figma.d.ts.map +0 -1
  133. package/Form/Radio.figma.js.map +0 -1
  134. package/Form/ToggleSwitch.figma.d.ts.map +0 -1
  135. package/Form/ToggleSwitch.figma.js.map +0 -1
  136. /package/Form/{Checkbox.figma.d.ts → Checkbox/Checkbox.figma.d.ts} +0 -0
  137. /package/Form/{Radio.figma.d.ts → Radio/Radio.figma.d.ts} +0 -0
  138. /package/Form/{Radio.figma.js → Radio/Radio.figma.js} +0 -0
  139. /package/Form/{Radio.figma.mjs → Radio/Radio.figma.mjs} +0 -0
  140. /package/Form/{ToggleSwitch.figma.d.ts → ToggleSwitch/ToggleSwitch.figma.d.ts} +0 -0
  141. /package/Form/{ToggleSwitch.figma.js → ToggleSwitch/ToggleSwitch.figma.js} +0 -0
  142. /package/Form/{ToggleSwitch.figma.mjs → ToggleSwitch/ToggleSwitch.figma.mjs} +0 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [3.0.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.11.0...@openameba/spindle-ui@3.0.0) (2025-10-15)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **spindle-ui:** セルにbox-sizing border-boxを指定する ([736ec21](https://github.com/openameba/spindle/commit/736ec211f557c51f02fa2c89c2b139964f193ed2))
11
+
12
+ - fix(spindle-ui)!: tableからdivにrefを移動 ([ee49a86](https://github.com/openameba/spindle/commit/ee49a86d894de269c998b34ca6b7da4c828b18f1))
13
+ - fix(spindle-ui)!: layoutの種類に関わらずdivでwrapしdivにclassNameを当てるよう変更 ([45b14f3](https://github.com/openameba/spindle/commit/45b14f3a89386efd1288054e854a6aa32936893f))
14
+
15
+ ### BREAKING CHANGES
16
+
17
+ - Table コンポーネントの ref 属性が変更されました:
18
+
19
+ * ref プロパティが table 要素から外側の div 要素に移動されました
20
+ * ref の型が HTMLTableElement から HTMLDivElement に変更されました
21
+
22
+ - Table コンポーネントの DOM 構造が変更されました:
23
+
24
+ * すべての layout タイプで table 要素が div 要素でラップされるようになりました(以前は scrollable のみ)
25
+ * className プロパティの適用先が table 要素から外側の div 要素に変更されました
26
+
27
+ # [2.11.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.10.0...@openameba/spindle-ui@2.11.0) (2025-10-15)
28
+
29
+ ### Features
30
+
31
+ - **spindle-ui:** add inverse style to Checkbox component ([885559e](https://github.com/openameba/spindle/commit/885559e823afea1a7b995259fafb2560a2af7d7b))
32
+
6
33
  # [2.10.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.9.1...@openameba/spindle-ui@2.10.0) (2025-10-10)
7
34
 
8
35
  ### Features
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
3
+ children?: React.ReactNode;
4
+ inverse?: boolean;
5
+ }
6
+ export declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
7
+ export {};
8
+ //# sourceMappingURL=Checkbox.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,KACR,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAID,eAAO,MAAM,QAAQ,gFA0BnB,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.figma.d.ts","sourceRoot":"","sources":["../../../src/Form/Checkbox/Checkbox.figma.tsx"],"names":[],"mappings":""}
@@ -13,6 +13,7 @@ code_connect_1.default.connect(Checkbox_1.Checkbox, 'https://www.figma.com/desig
13
13
  ],
14
14
  props: {
15
15
  active: code_connect_1.default.boolean('Active'),
16
+ inverse: code_connect_1.default.boolean('Inverse'),
16
17
  hover: code_connect_1.default.boolean('Focus Ring'),
17
18
  label: code_connect_1.default.string('Label'),
18
19
  name: code_connect_1.default.string('Name'),
@@ -20,8 +21,8 @@ code_connect_1.default.connect(Checkbox_1.Checkbox, 'https://www.figma.com/desig
20
21
  value: code_connect_1.default.string('value'),
21
22
  },
22
23
  example: function (_a) {
23
- var active = _a.active, label = _a.label, name = _a.name, id = _a.id, value = _a.value;
24
- return (react_1.default.createElement(Checkbox_1.Checkbox, { id: id, name: name, value: value, "aria-label": label, checked: active }));
24
+ var active = _a.active, inverse = _a.inverse, label = _a.label, name = _a.name, id = _a.id, value = _a.value;
25
+ return (react_1.default.createElement(Checkbox_1.Checkbox, { id: id, name: name, value: value, "aria-label": label, checked: active, inverse: inverse }));
25
26
  },
26
27
  });
27
28
  //# sourceMappingURL=Checkbox.figma.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.figma.js","sourceRoot":"","sources":["../../../src/Form/Checkbox/Checkbox.figma.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,uCAAsC;AACtC,qEAAwC;AAExC,sBAAK,CAAC,OAAO,CACX,mBAAQ,EACR,uGAAuG,EACvG;IACE,OAAO,EAAE;QACP,wDAAwD;QACxD,mDAAmD;KACpD;IACD,KAAK,EAAE;QACL,MAAM,EAAE,sBAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;QAC/B,OAAO,EAAE,sBAAK,CAAC,OAAO,CAAC,SAAS,CAAC;QACjC,KAAK,EAAE,sBAAK,CAAC,OAAO,CAAC,YAAY,CAAC;QAClC,KAAK,EAAE,sBAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,IAAI,EAAE,sBAAK,CAAC,MAAM,CAAC,MAAM,CAAC;QAC1B,EAAE,EAAE,sBAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QACtB,KAAK,EAAE,sBAAK,CAAC,MAAM,CAAC,OAAO,CAAC;KAC7B;IACD,OAAO,EAAE,UAAC,EAA2C;YAAzC,MAAM,YAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,EAAE,QAAA,EAAE,KAAK,WAAA;QAAO,OAAA,CACxD,8BAAC,mBAAQ,IACP,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,gBACA,KAAK,EACjB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,OAAO,GACN,CACb;IATyD,CASzD;CACF,CACF,CAAC"}
@@ -8,11 +8,12 @@ figma.connect(Checkbox, 'https://www.figma.com/design/FSgvRthUiMMXWgrSE4RUgr/Spi
8
8
  ],
9
9
  props: {
10
10
  active: figma.boolean('Active'),
11
+ inverse: figma.boolean('Inverse'),
11
12
  hover: figma.boolean('Focus Ring'),
12
13
  label: figma.string('Label'),
13
14
  name: figma.string('Name'),
14
15
  id: figma.string('id'),
15
16
  value: figma.string('value'),
16
17
  },
17
- example: ({ active, label, name, id, value }) => (React.createElement(Checkbox, { id: id, name: name, value: value, "aria-label": label, checked: active })),
18
+ example: ({ active, inverse, label, name, id, value }) => (React.createElement(Checkbox, { id: id, name: name, value: value, "aria-label": label, checked: active, inverse: inverse })),
18
19
  });
@@ -0,0 +1,79 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ var desc = Object.getOwnPropertyDescriptor(m, k);
16
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
+ desc = { enumerable: true, get: function() { return m[k]; } };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || (function () {
30
+ var ownKeys = function(o) {
31
+ ownKeys = Object.getOwnPropertyNames || function (o) {
32
+ var ar = [];
33
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
34
+ return ar;
35
+ };
36
+ return ownKeys(o);
37
+ };
38
+ return function (mod) {
39
+ if (mod && mod.__esModule) return mod;
40
+ var result = {};
41
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
42
+ __setModuleDefault(result, mod);
43
+ return result;
44
+ };
45
+ })();
46
+ var __rest = (this && this.__rest) || function (s, e) {
47
+ var t = {};
48
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
49
+ t[p] = s[p];
50
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
51
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
52
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
53
+ t[p[i]] = s[p[i]];
54
+ }
55
+ return t;
56
+ };
57
+ var __importDefault = (this && this.__importDefault) || function (mod) {
58
+ return (mod && mod.__esModule) ? mod : { "default": mod };
59
+ };
60
+ Object.defineProperty(exports, "__esModule", { value: true });
61
+ exports.Checkbox = void 0;
62
+ var react_1 = __importStar(require("react"));
63
+ var CheckBold_1 = __importDefault(require("../../Icon/CheckBold"));
64
+ var BLOCK_NAME = 'spui-Checkbox';
65
+ exports.Checkbox = (0, react_1.forwardRef)(function Checkbox(_a, ref) {
66
+ var children = _a.children, _b = _a.inverse, inverse = _b === void 0 ? false : _b, rest = __rest(_a, ["children", "inverse"]);
67
+ return (react_1.default.createElement("label", { className: [
68
+ "".concat(BLOCK_NAME, "-label"),
69
+ inverse && "".concat(BLOCK_NAME, "-label--inverse"),
70
+ ]
71
+ .filter(Boolean)
72
+ .join(' ') },
73
+ react_1.default.createElement("input", __assign({ className: "".concat(BLOCK_NAME, "-input"), ref: ref, type: "checkbox" }, rest)),
74
+ react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-icon") },
75
+ react_1.default.createElement(CheckBold_1.default, { "aria-hidden": "true" })),
76
+ react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-outline") }),
77
+ children && react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-text") }, children)));
78
+ });
79
+ //# sourceMappingURL=Checkbox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/Form/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0C;AAE1C,mEAA6C;AAQ7C,IAAM,UAAU,GAAG,eAAe,CAAC;AAEtB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAA0B,SAAS,QAAQ,CAC3E,EAA6C,EAC7C,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EAAK,IAAI,cAApC,uBAAsC,CAAF;IAGpC,OAAO,CACL,yCACE,SAAS,EAAE;YACT,UAAG,UAAU,WAAQ;YACrB,OAAO,IAAI,UAAG,UAAU,oBAAiB;SAC1C;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;QAEZ,kDACE,SAAS,EAAE,UAAG,UAAU,WAAQ,EAChC,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,IACX,IAAI,EACR;QACF,wCAAM,SAAS,EAAE,UAAG,UAAU,UAAO;YACnC,8BAAC,mBAAS,mBAAa,MAAM,GAAG,CAC3B;QACP,wCAAM,SAAS,EAAE,UAAG,UAAU,aAAU,GAAS;QAChD,QAAQ,IAAI,wCAAM,SAAS,EAAE,UAAG,UAAU,UAAO,IAAG,QAAQ,CAAQ,CAC/D,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}
@@ -0,0 +1,16 @@
1
+ import React, { forwardRef } from 'react';
2
+ import CheckBold from "../../Icon/CheckBold.mjs";
3
+ const BLOCK_NAME = 'spui-Checkbox';
4
+ export const Checkbox = forwardRef(function Checkbox({ children, inverse = false, ...rest }, ref) {
5
+ return (React.createElement("label", { className: [
6
+ `${BLOCK_NAME}-label`,
7
+ inverse && `${BLOCK_NAME}-label--inverse`,
8
+ ]
9
+ .filter(Boolean)
10
+ .join(' ') },
11
+ React.createElement("input", { className: `${BLOCK_NAME}-input`, ref: ref, type: "checkbox", ...rest }),
12
+ React.createElement("span", { className: `${BLOCK_NAME}-icon` },
13
+ React.createElement(CheckBold, { "aria-hidden": "true" })),
14
+ React.createElement("span", { className: `${BLOCK_NAME}-outline` }),
15
+ children && React.createElement("span", { className: `${BLOCK_NAME}-text` }, children)));
16
+ });
package/Form/Checkbox.css CHANGED
@@ -1 +1 @@
1
- :root{--Checkbox-backGroundColor:var(--color-surface-primary)}.spui-Checkbox-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-text:not(:empty)){box-shadow:0 0 0 2px var(--Checkbox-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-input:not(:focus-visible)){box-shadow:none}.spui-Checkbox-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Checkbox-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:4px;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:18px;justify-content:center;width:18px}.spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Checkbox-input:disabled+.spui-Checkbox-icon{opacity:.3}.spui-Checkbox-outline{border-radius:2px;height:22px;inset:-2px;position:absolute;width:22px}.spui-Checkbox-label:has(:not(.spui-Checkbox-text)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-label:has(.spui-Checkbox-text):has(:not(.spui-Checkbox-text:empty)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:none}.spui-Checkbox-text:not(:empty){margin-left:8px}.spui-Checkbox-input:checked~.spui-Checkbox-text{color:var(--color-object-accent-primary)}.spui-Checkbox-input:disabled~.spui-Checkbox-text{color:var(--color-text-disabled)}
1
+ :root{--Checkbox-backGroundColor:var(--color-surface-primary)}.spui-Checkbox-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-text:not(:empty)){box-shadow:0 0 0 2px var(--Checkbox-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-input:not(:focus-visible)){box-shadow:none}.spui-Checkbox-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Checkbox-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:4px;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:18px;justify-content:center;width:18px}.spui-Checkbox-label--inverse .spui-Checkbox-icon{border:1px solid var(--color-border-low-emphasis-inverse)}.spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Checkbox-input:disabled+.spui-Checkbox-icon{opacity:.3}.spui-Checkbox-label--inverse .spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-surface-primary);border:1px solid var(--color-surface-primary);color:var(--color-object-accent-primary)}.spui-Checkbox-outline{border-radius:2px;height:22px;inset:-2px;position:absolute;width:22px}.spui-Checkbox-label:has(:not(.spui-Checkbox-text)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-label:has(.spui-Checkbox-text):has(:not(.spui-Checkbox-text:empty)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:none}.spui-Checkbox-text:not(:empty){margin-left:8px}.spui-Checkbox-input:checked~.spui-Checkbox-text{color:var(--color-object-accent-primary)}.spui-Checkbox-input:disabled~.spui-Checkbox-text{color:var(--color-text-disabled)}
@@ -1,7 +1,2 @@
1
- import React from 'react';
2
- interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
3
- children?: React.ReactNode;
4
- }
5
- export declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
6
- export {};
1
+ export { Checkbox } from './Checkbox/Checkbox';
7
2
  //# sourceMappingURL=Checkbox.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,KACR,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,eAAO,MAAM,QAAQ,gFAmBnB,CAAC"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Form/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC"}
package/Form/Checkbox.js CHANGED
@@ -1,74 +1,8 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || (function () {
30
- var ownKeys = function(o) {
31
- ownKeys = Object.getOwnPropertyNames || function (o) {
32
- var ar = [];
33
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
34
- return ar;
35
- };
36
- return ownKeys(o);
37
- };
38
- return function (mod) {
39
- if (mod && mod.__esModule) return mod;
40
- var result = {};
41
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
42
- __setModuleDefault(result, mod);
43
- return result;
44
- };
45
- })();
46
- var __rest = (this && this.__rest) || function (s, e) {
47
- var t = {};
48
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
49
- t[p] = s[p];
50
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
51
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
52
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
53
- t[p[i]] = s[p[i]];
54
- }
55
- return t;
56
- };
57
- var __importDefault = (this && this.__importDefault) || function (mod) {
58
- return (mod && mod.__esModule) ? mod : { "default": mod };
59
- };
60
2
  Object.defineProperty(exports, "__esModule", { value: true });
61
3
  exports.Checkbox = void 0;
62
- var react_1 = __importStar(require("react"));
63
- var CheckBold_1 = __importDefault(require("../Icon/CheckBold"));
64
- var BLOCK_NAME = 'spui-Checkbox';
65
- exports.Checkbox = (0, react_1.forwardRef)(function Checkbox(_a, ref) {
66
- var children = _a.children, rest = __rest(_a, ["children"]);
67
- return (react_1.default.createElement("label", { className: "".concat(BLOCK_NAME, "-label") },
68
- react_1.default.createElement("input", __assign({ className: "".concat(BLOCK_NAME, "-input"), ref: ref, type: "checkbox" }, rest)),
69
- react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-icon") },
70
- react_1.default.createElement(CheckBold_1.default, { "aria-hidden": "true" })),
71
- react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-outline") }),
72
- children && react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-text") }, children)));
73
- });
4
+ // Re-export for backward compatibility after directory structure refactoring
5
+ // TODO: Remove this file in a future major version
6
+ var Checkbox_1 = require("./Checkbox/Checkbox");
7
+ Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
74
8
  //# sourceMappingURL=Checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Form/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0C;AAE1C,gEAA0C;AAO1C,IAAM,UAAU,GAAG,eAAe,CAAC;AAEtB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAA0B,SAAS,QAAQ,CAC3E,EAA4B,EAC5B,GAAG;IADD,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAGnB,OAAO,CACL,yCAAO,SAAS,EAAE,UAAG,UAAU,WAAQ;QACrC,kDACE,SAAS,EAAE,UAAG,UAAU,WAAQ,EAChC,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,IACX,IAAI,EACR;QACF,wCAAM,SAAS,EAAE,UAAG,UAAU,UAAO;YACnC,8BAAC,mBAAS,mBAAa,MAAM,GAAG,CAC3B;QACP,wCAAM,SAAS,EAAE,UAAG,UAAU,aAAU,GAAS;QAChD,QAAQ,IAAI,wCAAM,SAAS,EAAE,UAAG,UAAU,UAAO,IAAG,QAAQ,CAAQ,CAC/D,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Form/Checkbox.tsx"],"names":[],"mappings":";;;AAAA,6EAA6E;AAC7E,mDAAmD;AACnD,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA"}
package/Form/Checkbox.mjs CHANGED
@@ -1,11 +1,3 @@
1
- import React, { forwardRef } from 'react';
2
- import CheckBold from "../Icon/CheckBold.mjs";
3
- const BLOCK_NAME = 'spui-Checkbox';
4
- export const Checkbox = forwardRef(function Checkbox({ children, ...rest }, ref) {
5
- return (React.createElement("label", { className: `${BLOCK_NAME}-label` },
6
- React.createElement("input", { className: `${BLOCK_NAME}-input`, ref: ref, type: "checkbox", ...rest }),
7
- React.createElement("span", { className: `${BLOCK_NAME}-icon` },
8
- React.createElement(CheckBold, { "aria-hidden": "true" })),
9
- React.createElement("span", { className: `${BLOCK_NAME}-outline` }),
10
- children && React.createElement("span", { className: `${BLOCK_NAME}-text` }, children)));
11
- });
1
+ // Re-export for backward compatibility after directory structure refactoring
2
+ // TODO: Remove this file in a future major version
3
+ export { Checkbox } from "./Checkbox/Checkbox.mjs";
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ interface Props extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
3
+ children?: React.ReactNode;
4
+ hasError?: boolean;
5
+ onChange?: React.ChangeEventHandler<HTMLSelectElement>;
6
+ }
7
+ export declare const DropDown: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSelectElement>>;
8
+ export {};
9
+ //# sourceMappingURL=DropDown.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../src/Form/DropDown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,UAAU,KACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;CACxD;AAID,eAAO,MAAM,QAAQ,iFAuDnB,CAAC"}
@@ -0,0 +1,101 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ var desc = Object.getOwnPropertyDescriptor(m, k);
16
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
+ desc = { enumerable: true, get: function() { return m[k]; } };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || (function () {
30
+ var ownKeys = function(o) {
31
+ ownKeys = Object.getOwnPropertyNames || function (o) {
32
+ var ar = [];
33
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
34
+ return ar;
35
+ };
36
+ return ownKeys(o);
37
+ };
38
+ return function (mod) {
39
+ if (mod && mod.__esModule) return mod;
40
+ var result = {};
41
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
42
+ __setModuleDefault(result, mod);
43
+ return result;
44
+ };
45
+ })();
46
+ var __rest = (this && this.__rest) || function (s, e) {
47
+ var t = {};
48
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
49
+ t[p] = s[p];
50
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
51
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
52
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
53
+ t[p[i]] = s[p[i]];
54
+ }
55
+ return t;
56
+ };
57
+ var __importDefault = (this && this.__importDefault) || function (mod) {
58
+ return (mod && mod.__esModule) ? mod : { "default": mod };
59
+ };
60
+ Object.defineProperty(exports, "__esModule", { value: true });
61
+ exports.DropDown = void 0;
62
+ var react_1 = __importStar(require("react"));
63
+ var use_callback_ref_1 = require("use-callback-ref");
64
+ var ChevronDownBold_1 = __importDefault(require("../../Icon/ChevronDownBold"));
65
+ var BLOCK_NAME = 'spui-DropDown';
66
+ exports.DropDown = (0, react_1.forwardRef)(function DropDown(_a, ref) {
67
+ var children = _a.children, _b = _a.hasError, hasError = _b === void 0 ? false : _b, onChange = _a.onChange, rest = __rest(_a, ["children", "hasError", "onChange"]);
68
+ var selectEl = (0, react_1.useRef)(null);
69
+ var _c = (0, react_1.useState)(''), text = _c[0], setText = _c[1];
70
+ var _d = (0, react_1.useState)(false), disabled = _d[0], setDisabled = _d[1];
71
+ var update = function () {
72
+ if (selectEl && selectEl.current) {
73
+ var selectedEl = selectEl.current.options[selectEl.current.selectedIndex];
74
+ var value = selectedEl.text;
75
+ var disabled_1 = selectedEl.disabled;
76
+ setText(value);
77
+ setDisabled(disabled_1);
78
+ }
79
+ };
80
+ var handleChange = function (event) {
81
+ if (typeof onChange === 'function') {
82
+ onChange(event);
83
+ }
84
+ update();
85
+ };
86
+ // Update text once
87
+ (0, react_1.useEffect)(update, []);
88
+ return (react_1.default.createElement("label", { className: [
89
+ "".concat(BLOCK_NAME, "-label"),
90
+ !disabled ? 'is-active' : '',
91
+ hasError ? 'is-error' : '',
92
+ ]
93
+ .filter(Boolean)
94
+ .join(' ') },
95
+ react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-visual") }, text),
96
+ react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-icon") },
97
+ react_1.default.createElement(ChevronDownBold_1.default, { "aria-hidden": "true" })),
98
+ react_1.default.createElement("select", __assign({ className: "".concat(BLOCK_NAME, "-select"), ref: (0, use_callback_ref_1.useMergeRefs)([selectEl, ref]), onChange: handleChange }, rest), children),
99
+ react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-outline") })));
100
+ });
101
+ //# sourceMappingURL=DropDown.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DropDown.js","sourceRoot":"","sources":["../../../src/Form/DropDown/DropDown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,qDAAgD;AAEhD,+EAAyD;AASzD,IAAM,UAAU,GAAG,eAAe,CAAC;AAEtB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAA2B,SAAS,QAAQ,CAC5E,EAAwD,EACxD,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAA/C,oCAAiD,CAAF;IAG/C,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAE3C,IAAA,KAAkB,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAA7B,IAAI,QAAA,EAAE,OAAO,QAAgB,CAAC;IAC/B,IAAA,KAA0B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAxC,QAAQ,QAAA,EAAE,WAAW,QAAmB,CAAC;IAEhD,IAAM,MAAM,GAAG;QACb,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACjC,IAAM,UAAU,GACd,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YAC3D,IAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC;YAC9B,IAAM,UAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC;YACrC,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,WAAW,CAAC,UAAQ,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAA2C;QAC/D,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;YACnC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;QACD,MAAM,EAAE,CAAC;IACX,CAAC,CAAC;IAEF,mBAAmB;IACnB,IAAA,iBAAS,EAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAEtB,OAAO,CACL,yCACE,SAAS,EAAE;YACT,UAAG,UAAU,WAAQ;YACrB,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;YAC5B,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAC3B;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;QAEZ,wCAAM,SAAS,EAAE,UAAG,UAAU,YAAS,IAAG,IAAI,CAAQ;QACtD,wCAAM,SAAS,EAAE,UAAG,UAAU,UAAO;YACnC,8BAAC,yBAAe,mBAAa,MAAM,GAAG,CACjC;QACP,mDACE,SAAS,EAAE,UAAG,UAAU,YAAS,EACjC,GAAG,EAAE,IAAA,+BAAY,EAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAClC,QAAQ,EAAE,YAAY,IAClB,IAAI,GAEP,QAAQ,CACF;QACT,wCAAM,SAAS,EAAE,UAAG,UAAU,aAAU,GAAS,CAC3C,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}
@@ -0,0 +1,38 @@
1
+ import React, { forwardRef, useEffect, useRef, useState } from 'react';
2
+ import { useMergeRefs } from 'use-callback-ref';
3
+ import ChevronDownBold from "../../Icon/ChevronDownBold.mjs";
4
+ const BLOCK_NAME = 'spui-DropDown';
5
+ export const DropDown = forwardRef(function DropDown({ children, hasError = false, onChange, ...rest }, ref) {
6
+ const selectEl = useRef(null);
7
+ const [text, setText] = useState('');
8
+ const [disabled, setDisabled] = useState(false);
9
+ const update = () => {
10
+ if (selectEl && selectEl.current) {
11
+ const selectedEl = selectEl.current.options[selectEl.current.selectedIndex];
12
+ const value = selectedEl.text;
13
+ const disabled = selectedEl.disabled;
14
+ setText(value);
15
+ setDisabled(disabled);
16
+ }
17
+ };
18
+ const handleChange = (event) => {
19
+ if (typeof onChange === 'function') {
20
+ onChange(event);
21
+ }
22
+ update();
23
+ };
24
+ // Update text once
25
+ useEffect(update, []);
26
+ return (React.createElement("label", { className: [
27
+ `${BLOCK_NAME}-label`,
28
+ !disabled ? 'is-active' : '',
29
+ hasError ? 'is-error' : '',
30
+ ]
31
+ .filter(Boolean)
32
+ .join(' ') },
33
+ React.createElement("span", { className: `${BLOCK_NAME}-visual` }, text),
34
+ React.createElement("span", { className: `${BLOCK_NAME}-icon` },
35
+ React.createElement(ChevronDownBold, { "aria-hidden": "true" })),
36
+ React.createElement("select", { className: `${BLOCK_NAME}-select`, ref: useMergeRefs([selectEl, ref]), onChange: handleChange, ...rest }, children),
37
+ React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
38
+ });
@@ -1,9 +1,2 @@
1
- import React from 'react';
2
- interface Props extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
3
- children?: React.ReactNode;
4
- hasError?: boolean;
5
- onChange?: React.ChangeEventHandler<HTMLSelectElement>;
6
- }
7
- export declare const DropDown: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSelectElement>>;
8
- export {};
1
+ export { DropDown } from './DropDown/DropDown';
9
2
  //# sourceMappingURL=DropDown.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../src/Form/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,UAAU,KACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;CACxD;AAID,eAAO,MAAM,QAAQ,iFAuDnB,CAAC"}
1
+ {"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../src/Form/DropDown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC"}
package/Form/DropDown.js CHANGED
@@ -1,101 +1,8 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || (function () {
30
- var ownKeys = function(o) {
31
- ownKeys = Object.getOwnPropertyNames || function (o) {
32
- var ar = [];
33
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
34
- return ar;
35
- };
36
- return ownKeys(o);
37
- };
38
- return function (mod) {
39
- if (mod && mod.__esModule) return mod;
40
- var result = {};
41
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
42
- __setModuleDefault(result, mod);
43
- return result;
44
- };
45
- })();
46
- var __rest = (this && this.__rest) || function (s, e) {
47
- var t = {};
48
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
49
- t[p] = s[p];
50
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
51
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
52
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
53
- t[p[i]] = s[p[i]];
54
- }
55
- return t;
56
- };
57
- var __importDefault = (this && this.__importDefault) || function (mod) {
58
- return (mod && mod.__esModule) ? mod : { "default": mod };
59
- };
60
2
  Object.defineProperty(exports, "__esModule", { value: true });
61
3
  exports.DropDown = void 0;
62
- var react_1 = __importStar(require("react"));
63
- var use_callback_ref_1 = require("use-callback-ref");
64
- var ChevronDownBold_1 = __importDefault(require("../Icon/ChevronDownBold"));
65
- var BLOCK_NAME = 'spui-DropDown';
66
- exports.DropDown = (0, react_1.forwardRef)(function DropDown(_a, ref) {
67
- var children = _a.children, _b = _a.hasError, hasError = _b === void 0 ? false : _b, onChange = _a.onChange, rest = __rest(_a, ["children", "hasError", "onChange"]);
68
- var selectEl = (0, react_1.useRef)(null);
69
- var _c = (0, react_1.useState)(''), text = _c[0], setText = _c[1];
70
- var _d = (0, react_1.useState)(false), disabled = _d[0], setDisabled = _d[1];
71
- var update = function () {
72
- if (selectEl && selectEl.current) {
73
- var selectedEl = selectEl.current.options[selectEl.current.selectedIndex];
74
- var value = selectedEl.text;
75
- var disabled_1 = selectedEl.disabled;
76
- setText(value);
77
- setDisabled(disabled_1);
78
- }
79
- };
80
- var handleChange = function (event) {
81
- if (typeof onChange === 'function') {
82
- onChange(event);
83
- }
84
- update();
85
- };
86
- // Update text once
87
- (0, react_1.useEffect)(update, []);
88
- return (react_1.default.createElement("label", { className: [
89
- "".concat(BLOCK_NAME, "-label"),
90
- !disabled ? 'is-active' : '',
91
- hasError ? 'is-error' : '',
92
- ]
93
- .filter(Boolean)
94
- .join(' ') },
95
- react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-visual") }, text),
96
- react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-icon") },
97
- react_1.default.createElement(ChevronDownBold_1.default, { "aria-hidden": "true" })),
98
- react_1.default.createElement("select", __assign({ className: "".concat(BLOCK_NAME, "-select"), ref: (0, use_callback_ref_1.useMergeRefs)([selectEl, ref]), onChange: handleChange }, rest), children),
99
- react_1.default.createElement("span", { className: "".concat(BLOCK_NAME, "-outline") })));
100
- });
4
+ // Re-export for backward compatibility after directory structure refactoring
5
+ // TODO: Remove this file in a future major version
6
+ var DropDown_1 = require("./DropDown/DropDown");
7
+ Object.defineProperty(exports, "DropDown", { enumerable: true, get: function () { return DropDown_1.DropDown; } });
101
8
  //# sourceMappingURL=DropDown.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropDown.js","sourceRoot":"","sources":["../../src/Form/DropDown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuE;AACvE,qDAAgD;AAEhD,4EAAsD;AAStD,IAAM,UAAU,GAAG,eAAe,CAAC;AAEtB,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAA2B,SAAS,QAAQ,CAC5E,EAAwD,EACxD,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAA/C,oCAAiD,CAAF;IAG/C,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAE3C,IAAA,KAAkB,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAA7B,IAAI,QAAA,EAAE,OAAO,QAAgB,CAAC;IAC/B,IAAA,KAA0B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAxC,QAAQ,QAAA,EAAE,WAAW,QAAmB,CAAC;IAEhD,IAAM,MAAM,GAAG;QACb,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACjC,IAAM,UAAU,GACd,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YAC3D,IAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC;YAC9B,IAAM,UAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC;YACrC,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,WAAW,CAAC,UAAQ,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG,UAAC,KAA2C;QAC/D,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;YACnC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;QACD,MAAM,EAAE,CAAC;IACX,CAAC,CAAC;IAEF,mBAAmB;IACnB,IAAA,iBAAS,EAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAEtB,OAAO,CACL,yCACE,SAAS,EAAE;YACT,UAAG,UAAU,WAAQ;YACrB,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;YAC5B,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAC3B;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;QAEZ,wCAAM,SAAS,EAAE,UAAG,UAAU,YAAS,IAAG,IAAI,CAAQ;QACtD,wCAAM,SAAS,EAAE,UAAG,UAAU,UAAO;YACnC,8BAAC,yBAAe,mBAAa,MAAM,GAAG,CACjC;QACP,mDACE,SAAS,EAAE,UAAG,UAAU,YAAS,EACjC,GAAG,EAAE,IAAA,+BAAY,EAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAClC,QAAQ,EAAE,YAAY,IAClB,IAAI,GAEP,QAAQ,CACF;QACT,wCAAM,SAAS,EAAE,UAAG,UAAU,aAAU,GAAS,CAC3C,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}
1
+ {"version":3,"file":"DropDown.js","sourceRoot":"","sources":["../../src/Form/DropDown.tsx"],"names":[],"mappings":";;;AAAA,6EAA6E;AAC7E,mDAAmD;AACnD,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA"}