@sakura-ui/sakura-ui 0.0.16 → 0.1.1

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 (133) hide show
  1. package/README.md +43 -11
  2. package/package.json +3 -3
  3. package/packages/{react → core}/package.json +3 -3
  4. package/packages/{react → core}/src/components/Button.tsx +2 -2
  5. package/packages/{react → core}/src/components/Card.tsx +2 -2
  6. package/packages/{react → core}/src/components/Code.tsx +2 -2
  7. package/packages/{react → core}/src/components/Heading.tsx +18 -18
  8. package/packages/{react → core}/src/components/Icon.tsx +2 -2
  9. package/packages/{react → core}/src/components/IconButton.tsx +2 -2
  10. package/packages/{react → core}/src/components/InfoCard.tsx +4 -4
  11. package/packages/{react → core}/src/components/Link.tsx +6 -6
  12. package/packages/{react → core}/src/components/List.tsx +4 -4
  13. package/packages/{react → core}/src/components/Pre.tsx +2 -2
  14. package/packages/{react → core}/src/components/Table.tsx +14 -14
  15. package/packages/core/tsconfig.json +11 -0
  16. package/packages/forms/coverage/clover.xml +209 -0
  17. package/packages/forms/coverage/coverage-final.json +18 -0
  18. package/packages/forms/coverage/lcov-report/base.css +224 -0
  19. package/packages/forms/coverage/lcov-report/block-navigation.js +87 -0
  20. package/packages/forms/coverage/lcov-report/favicon.png +0 -0
  21. package/packages/forms/coverage/lcov-report/index.html +161 -0
  22. package/packages/forms/coverage/lcov-report/prettify.css +1 -0
  23. package/packages/forms/coverage/lcov-report/prettify.js +2 -0
  24. package/packages/forms/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  25. package/packages/forms/coverage/lcov-report/sorter.js +196 -0
  26. package/packages/forms/coverage/lcov-report/src/components/Checkbox.tsx.html +295 -0
  27. package/packages/forms/coverage/lcov-report/src/components/FieldsetControl.tsx.html +295 -0
  28. package/packages/forms/coverage/lcov-report/src/components/LabelControl.tsx.html +289 -0
  29. package/packages/forms/coverage/lcov-report/src/components/Radio.tsx.html +262 -0
  30. package/packages/forms/coverage/lcov-report/src/components/Select.tsx.html +259 -0
  31. package/packages/forms/coverage/lcov-report/src/components/Text.tsx.html +220 -0
  32. package/packages/forms/coverage/lcov-report/src/components/Textarea.tsx.html +229 -0
  33. package/packages/forms/coverage/lcov-report/src/components/context.ts.html +136 -0
  34. package/packages/forms/coverage/lcov-report/src/components/controlled/CheckboxGroup.tsx.html +244 -0
  35. package/packages/forms/coverage/lcov-report/src/components/controlled/RadioGroup.tsx.html +265 -0
  36. package/packages/forms/coverage/lcov-report/src/components/controlled/SelectControl.tsx.html +205 -0
  37. package/packages/forms/coverage/lcov-report/src/components/controlled/TextControl.tsx.html +202 -0
  38. package/packages/forms/coverage/lcov-report/src/components/controlled/TextareaControl.tsx.html +205 -0
  39. package/packages/forms/coverage/lcov-report/src/components/controlled/index.html +191 -0
  40. package/packages/forms/coverage/lcov-report/src/components/controlled/index.ts.html +100 -0
  41. package/packages/forms/coverage/lcov-report/src/components/index.html +236 -0
  42. package/packages/forms/coverage/lcov-report/src/components/index.ts.html +106 -0
  43. package/packages/forms/coverage/lcov-report/src/index.html +116 -0
  44. package/packages/forms/coverage/lcov-report/src/index.ts.html +136 -0
  45. package/packages/forms/coverage/lcov-report/src/utils/index.html +116 -0
  46. package/packages/forms/coverage/lcov-report/src/utils/index.ts.html +88 -0
  47. package/packages/forms/coverage/lcov.info +434 -0
  48. package/packages/forms/dist/index.cjs.js +20 -24
  49. package/packages/forms/dist/index.cjs.js.map +1 -1
  50. package/packages/forms/dist/index.es.js +561 -375
  51. package/packages/forms/dist/index.es.js.map +1 -1
  52. package/packages/forms/jest.config.ts +14 -0
  53. package/packages/forms/node_modules/.bin/autoprefixer +2 -2
  54. package/packages/forms/node_modules/.bin/browserslist +17 -0
  55. package/packages/forms/node_modules/.bin/jest +4 -4
  56. package/packages/forms/node_modules/.bin/npm-run-all +2 -2
  57. package/packages/forms/node_modules/.bin/run-p +2 -2
  58. package/packages/forms/node_modules/.bin/run-s +2 -2
  59. package/packages/forms/node_modules/.bin/tailwind +4 -4
  60. package/packages/forms/node_modules/.bin/tailwindcss +4 -4
  61. package/packages/forms/node_modules/.bin/ts-jest +4 -4
  62. package/packages/forms/node_modules/.bin/ts-node +4 -4
  63. package/packages/forms/node_modules/.bin/ts-node-cwd +4 -4
  64. package/packages/forms/node_modules/.bin/ts-node-esm +4 -4
  65. package/packages/forms/node_modules/.bin/ts-node-script +4 -4
  66. package/packages/forms/node_modules/.bin/ts-node-transpile-only +4 -4
  67. package/packages/forms/node_modules/.bin/ts-script +4 -4
  68. package/packages/forms/node_modules/.bin/tsc +2 -2
  69. package/packages/forms/node_modules/.bin/tsc-alias +2 -2
  70. package/packages/forms/node_modules/.bin/tsserver +2 -2
  71. package/packages/forms/node_modules/.bin/vite +2 -2
  72. package/packages/forms/package.json +6 -1
  73. package/packages/forms/src/components/Checkbox.tsx +19 -8
  74. package/packages/forms/src/components/FieldsetControl.tsx +70 -0
  75. package/packages/forms/src/components/LabelControl.tsx +68 -0
  76. package/packages/forms/src/components/Radio.tsx +24 -9
  77. package/packages/forms/src/components/Select.tsx +22 -7
  78. package/packages/forms/src/components/Text.tsx +14 -4
  79. package/packages/forms/src/components/Textarea.tsx +18 -3
  80. package/packages/forms/src/components/context.ts +17 -0
  81. package/packages/forms/src/components/controlled/CheckboxGroup.tsx +37 -15
  82. package/packages/forms/src/components/controlled/RadioGroup.tsx +44 -20
  83. package/packages/forms/src/components/controlled/SelectControl.tsx +40 -0
  84. package/packages/forms/src/components/controlled/TextControl.tsx +39 -0
  85. package/packages/forms/src/components/controlled/TextareaControl.tsx +40 -0
  86. package/packages/forms/src/components/controlled/index.ts +3 -3
  87. package/packages/forms/src/components/index.ts +2 -0
  88. package/packages/forms/src/index.ts +12 -4
  89. package/packages/forms/tests/FieldsetControl.test.tsx +54 -0
  90. package/packages/forms/tests/LabelControl.test.tsx +116 -0
  91. package/packages/forms/tests/Radio.test.tsx +99 -0
  92. package/packages/forms/tests/Text.test.tsx +96 -0
  93. package/packages/forms/tsconfig.json +1 -17
  94. package/packages/forms/dist/components/Checkbox.d.ts +0 -5
  95. package/packages/forms/dist/components/Checkbox.d.ts.map +0 -1
  96. package/packages/forms/dist/components/Radio.d.ts +0 -5
  97. package/packages/forms/dist/components/Radio.d.ts.map +0 -1
  98. package/packages/forms/dist/components/Select.d.ts +0 -5
  99. package/packages/forms/dist/components/Select.d.ts.map +0 -1
  100. package/packages/forms/dist/components/Text.d.ts +0 -5
  101. package/packages/forms/dist/components/Text.d.ts.map +0 -1
  102. package/packages/forms/dist/components/Textarea.d.ts +0 -5
  103. package/packages/forms/dist/components/Textarea.d.ts.map +0 -1
  104. package/packages/forms/dist/components/controlled/CheckboxGroup.d.ts +0 -9
  105. package/packages/forms/dist/components/controlled/CheckboxGroup.d.ts.map +0 -1
  106. package/packages/forms/dist/components/controlled/InputItem.d.ts +0 -5
  107. package/packages/forms/dist/components/controlled/InputItem.d.ts.map +0 -1
  108. package/packages/forms/dist/components/controlled/RadioGroup.d.ts +0 -9
  109. package/packages/forms/dist/components/controlled/RadioGroup.d.ts.map +0 -1
  110. package/packages/forms/dist/components/controlled/Select.d.ts +0 -6
  111. package/packages/forms/dist/components/controlled/Select.d.ts.map +0 -1
  112. package/packages/forms/dist/components/controlled/Text.d.ts +0 -6
  113. package/packages/forms/dist/components/controlled/Text.d.ts.map +0 -1
  114. package/packages/forms/dist/components/controlled/Textarea.d.ts +0 -6
  115. package/packages/forms/dist/components/controlled/Textarea.d.ts.map +0 -1
  116. package/packages/forms/dist/components/controlled/index.d.ts +0 -6
  117. package/packages/forms/dist/components/controlled/index.d.ts.map +0 -1
  118. package/packages/forms/dist/components/index.d.ts +0 -6
  119. package/packages/forms/dist/components/index.d.ts.map +0 -1
  120. package/packages/forms/dist/index.d.ts +0 -3
  121. package/packages/forms/dist/index.d.ts.map +0 -1
  122. package/packages/forms/dist/utils/index.d.ts +0 -2
  123. package/packages/forms/dist/utils/index.d.ts.map +0 -1
  124. package/packages/forms/src/components/controlled/Select.tsx +0 -22
  125. package/packages/forms/src/components/controlled/Text.tsx +0 -22
  126. package/packages/forms/src/components/controlled/Textarea.tsx +0 -23
  127. package/packages/forms/src/vite-env.d.ts +0 -1
  128. package/packages/react/tsconfig.json +0 -27
  129. /package/packages/{react → core}/src/components/index.ts +0 -0
  130. /package/packages/{react → core}/src/index.ts +0 -0
  131. /package/packages/{react → core}/src/utils/index.ts +0 -0
  132. /package/packages/{react → core}/tsconfig.node.json +0 -0
  133. /package/packages/{react → core}/vite.config.ts +0 -0
@@ -6,12 +6,12 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-jest@29.0.5_@babel+core@7.21.0_@jest+types@29.5.0_jest@29.4.3_typescript@4.9.5/node_modules/ts-jest/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-jest@29.0.5_@babel+core@7.21.0_@jest+types@29.5.0_jest@29.4.3_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-jest@29.0.5_@babel+core@7.21.0_@jest+types@29.5.0_jest@29.4.3_typescript@4.9.5/node_modules/ts-jest/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-jest@29.0.5_@babel+core@7.21.0_@jest+types@29.5.0_jest@29.4.3_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
- exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-jest@29.0.5_orzzknleilowtsz34rkaotjvzm/node_modules/ts-jest/cli.js" "$@"
14
+ exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-jest@29.0.5_@babel+core@7.21.0_@jest+types@29.5.0_jest@29.4.3_typescript@4.9.5/node_modules/ts-jest/cli.js" "$@"
15
15
  else
16
- exec node "$basedir/../../../../node_modules/.pnpm/ts-jest@29.0.5_orzzknleilowtsz34rkaotjvzm/node_modules/ts-jest/cli.js" "$@"
16
+ exec node "$basedir/../../../../node_modules/.pnpm/ts-jest@29.0.5_@babel+core@7.21.0_@jest+types@29.5.0_jest@29.4.3_typescript@4.9.5/node_modules/ts-jest/cli.js" "$@"
17
17
  fi
@@ -6,12 +6,12 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
- exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin.js" "$@"
14
+ exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin.js" "$@"
15
15
  else
16
- exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin.js" "$@"
16
+ exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin.js" "$@"
17
17
  fi
@@ -6,12 +6,12 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
- exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin-cwd.js" "$@"
14
+ exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin-cwd.js" "$@"
15
15
  else
16
- exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin-cwd.js" "$@"
16
+ exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin-cwd.js" "$@"
17
17
  fi
@@ -6,12 +6,12 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
- exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin-esm.js" "$@"
14
+ exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin-esm.js" "$@"
15
15
  else
16
- exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin-esm.js" "$@"
16
+ exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin-esm.js" "$@"
17
17
  fi
@@ -6,12 +6,12 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
- exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin-script.js" "$@"
14
+ exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin-script.js" "$@"
15
15
  else
16
- exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin-script.js" "$@"
16
+ exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin-script.js" "$@"
17
17
  fi
@@ -6,12 +6,12 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
- exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin-transpile.js" "$@"
14
+ exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin-transpile.js" "$@"
15
15
  else
16
- exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin-transpile.js" "$@"
16
+ exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin-transpile.js" "$@"
17
17
  fi
@@ -6,12 +6,12 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
- exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin-script-deprecated.js" "$@"
14
+ exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin-script-deprecated.js" "$@"
15
15
  else
16
- exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_ellgaeuoqnti3hful2ny2iugba/node_modules/ts-node/dist/bin-script-deprecated.js" "$@"
16
+ exec node "$basedir/../../../../node_modules/.pnpm/ts-node@10.9.1_@types+node@18.14.2_typescript@4.9.5/node_modules/ts-node/dist/bin-script-deprecated.js" "$@"
17
17
  fi
@@ -6,9 +6,9 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/bin/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/bin/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
14
  exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/bin/tsc" "$@"
@@ -6,9 +6,9 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/tsc-alias@1.8.2/node_modules/tsc-alias/dist/bin/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/tsc-alias@1.8.2/node_modules/tsc-alias/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/tsc-alias@1.8.2/node_modules/tsc-alias/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/tsc-alias@1.8.2/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/tsc-alias@1.8.2/node_modules/tsc-alias/dist/bin/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/tsc-alias@1.8.2/node_modules/tsc-alias/dist/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/tsc-alias@1.8.2/node_modules/tsc-alias/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/tsc-alias@1.8.2/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
14
  exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/tsc-alias@1.8.2/node_modules/tsc-alias/dist/bin/index.js" "$@"
@@ -6,9 +6,9 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/bin/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/bin/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/typescript@4.9.5/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
14
  exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/bin/tsserver" "$@"
@@ -6,9 +6,9 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/vite@4.1.4_@types+node@18.14.2/node_modules/vite/bin/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/vite@4.1.4_@types+node@18.14.2/node_modules/vite/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/vite@4.1.4_@types+node@18.14.2/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/Users/taisukefujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/vite@4.1.4_@types+node@18.14.2/node_modules/vite/bin/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/vite@4.1.4_@types+node@18.14.2/node_modules/vite/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/vite@4.1.4_@types+node@18.14.2/node_modules:/Users/t.fujita/Documents/Repos/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
14
  exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/vite@4.1.4_@types+node@18.14.2/node_modules/vite/bin/vite.js" "$@"
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sakura-ui/forms",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",
@@ -40,13 +40,18 @@
40
40
  "tailwindcss": "^3.2.7"
41
41
  },
42
42
  "devDependencies": {
43
+ "@jest/types": "^29.5.0",
44
+ "@testing-library/jest-dom": "^5.16.5",
45
+ "@testing-library/react": "^14.0.0",
43
46
  "@types/jest": "^29.4.0",
44
47
  "@types/node": "^18.14.1",
45
48
  "@types/react": "^18.0.27",
46
49
  "@types/react-dom": "^18.0.10",
50
+ "@types/testing-library__jest-dom": "^5.14.5",
47
51
  "@vitejs/plugin-react-swc": "^3.0.0",
48
52
  "autoprefixer": "^10.4.13",
49
53
  "jest": "^29.4.3",
54
+ "jest-environment-jsdom": "^29.5.0",
50
55
  "npm-run-all": "^4.1.5",
51
56
  "postcss": "^8.4.21",
52
57
  "react": "^18.2.0",
@@ -1,18 +1,26 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
+ import { ControllerContext } from './context'
3
4
 
4
5
  export interface CheckboxProps extends React.ComponentProps<'input'> {}
5
6
 
6
7
  export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
7
8
  (props, ref) => {
8
- const { className, children, ...newProps } = props
9
+ const { className, children, ...restProps } = props
10
+ const ctx = React.useContext(ControllerContext)
11
+ if (ctx.isRequired) {
12
+ restProps.required = true
13
+ }
14
+ if (ctx.groupName) {
15
+ restProps.name = ctx.groupName
16
+ }
9
17
 
10
18
  const style = `
11
- flex
12
- items-center
19
+ inline-block
13
20
  text-sm
14
21
  cursor-pointer
15
22
  py-2
23
+ mr-4
16
24
  `
17
25
 
18
26
  const styleInput = `
@@ -35,12 +43,15 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
35
43
  `
36
44
 
37
45
  return (
38
- <div className="inline-block">
39
- <label htmlFor={newProps.id} className={cx(style, className)}>
46
+ <label htmlFor={restProps.id} className={cx(style, className)}>
47
+ <span className="flex items-center">
40
48
  <input
41
49
  className={styleInput}
42
50
  type="checkbox"
43
- {...newProps}
51
+ aria-describedby={ctx.helperTextId}
52
+ aria-errormessage={ctx.errorMessageId}
53
+ aria-invalid={ctx.isInvalid ?? false}
54
+ {...restProps}
44
55
  ref={ref}
45
56
  />
46
57
  <span className={styleCheck}>
@@ -52,8 +63,8 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
52
63
  </svg>
53
64
  </span>
54
65
  {children}
55
- </label>
56
- </div>
66
+ </span>
67
+ </label>
57
68
  )
58
69
  }
59
70
  )
@@ -0,0 +1,70 @@
1
+ import React from 'react'
2
+ import { cx } from '../utils'
3
+ import { ControllerContext } from './context'
4
+
5
+ export interface FieldsetControlProps
6
+ extends React.ComponentPropsWithoutRef<'fieldset'> {
7
+ labelText: string
8
+ helperText?: string
9
+ errorMessage?: string
10
+ isInvalid?: boolean
11
+ isRequired?: boolean
12
+ direction?: 'flex-col' | 'flex-row'
13
+ }
14
+
15
+ export const FieldsetControl = React.forwardRef<
16
+ HTMLFieldSetElement,
17
+ FieldsetControlProps
18
+ >((props, ref) => {
19
+ const id = React.useId()
20
+ const {
21
+ labelText,
22
+ className,
23
+ helperText,
24
+ errorMessage,
25
+ isInvalid,
26
+ isRequired,
27
+ direction,
28
+ children,
29
+ ...restProps
30
+ } = props
31
+
32
+ const groupName = restProps.name ?? `group-${id}`
33
+
34
+ const context = {
35
+ groupName: groupName,
36
+ helperTextId: `helper-text-${id}`,
37
+ errorMessageId: `error-message-${id}`,
38
+ isInvalid: isInvalid ?? false,
39
+ isRequired: isRequired ?? false
40
+ }
41
+
42
+ const styleDirection = direction ?? 'flex-col'
43
+
44
+ return (
45
+ <ControllerContext.Provider value={context}>
46
+ <fieldset className={cx('mb-4', className)} ref={ref} {...restProps}>
47
+ <legend>
48
+ <p className={cx('block mb-2', isInvalid && 'text-sun-800')}>
49
+ {labelText}
50
+ {isRequired && <span className="text-sun-800">&nbsp;*</span>}
51
+ </p>
52
+ </legend>
53
+ <div className={cx('inline-flex', styleDirection)}>{children}</div>
54
+ {helperText && (
55
+ <p id={context.helperTextId} className="text-sm text-sumi-700 mt-2">
56
+ {helperText}
57
+ </p>
58
+ )}
59
+ {isInvalid && (
60
+ <p
61
+ id={context.errorMessageId}
62
+ className={cx('text-sm text-sun-800', helperText ? 'mt-1' : 'mt-2')}
63
+ >
64
+ {errorMessage}
65
+ </p>
66
+ )}
67
+ </fieldset>
68
+ </ControllerContext.Provider>
69
+ )
70
+ })
@@ -0,0 +1,68 @@
1
+ import React from 'react'
2
+ import { cx } from '../utils'
3
+ import { ControllerContext } from './context'
4
+
5
+ export interface LabelControlProps
6
+ extends React.ComponentPropsWithoutRef<'label'> {
7
+ labelText: string
8
+ helperText?: string
9
+ errorMessage?: string
10
+ isInvalid?: boolean
11
+ isRequired?: boolean
12
+ }
13
+
14
+ export const LabelControl = React.forwardRef<
15
+ HTMLLabelElement,
16
+ LabelControlProps
17
+ >((props, ref) => {
18
+ const id = React.useId()
19
+ const {
20
+ labelText,
21
+ className,
22
+ helperText,
23
+ errorMessage,
24
+ isInvalid,
25
+ isRequired,
26
+ children,
27
+ ...restProps
28
+ } = props
29
+
30
+ const context = {
31
+ id: props.htmlFor ?? `input-${id}`,
32
+ helperTextId: `helper-text-${id}`,
33
+ errorMessageId: `error-message-${id}`,
34
+ isInvalid: isInvalid ?? false,
35
+ isRequired: isRequired ?? false
36
+ }
37
+
38
+ return (
39
+ <ControllerContext.Provider value={context}>
40
+ <div className={cx('mb-4', className)}>
41
+ <label
42
+ className={cx('block mb-2', isInvalid && 'text-sun-800')}
43
+ htmlFor={context.id}
44
+ ref={ref}
45
+ {...restProps}
46
+ >
47
+ {labelText}
48
+ {isRequired && <span className="text-sun-800">&nbsp;*</span>}
49
+ </label>
50
+ {children}
51
+
52
+ {helperText && (
53
+ <p id={context.helperTextId} className="text-sm text-sumi-700 mt-2">
54
+ {helperText}
55
+ </p>
56
+ )}
57
+ {isInvalid && (
58
+ <p
59
+ id={context.errorMessageId}
60
+ className={cx('text-sm text-sun-800', helperText ? 'mt-1' : 'mt-2')}
61
+ >
62
+ {errorMessage}
63
+ </p>
64
+ )}
65
+ </div>
66
+ </ControllerContext.Provider>
67
+ )
68
+ })
@@ -1,17 +1,25 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
+ import { ControllerContext } from './context'
3
4
 
4
- export interface Props extends React.ComponentProps<'input'> {}
5
+ export interface Props extends React.ComponentPropsWithoutRef<'input'> {}
5
6
 
6
7
  export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
7
8
  const { className, children, ...newProps } = props
9
+ const ctx = React.useContext(ControllerContext)
10
+ if (ctx.isRequired) {
11
+ newProps.required = true
12
+ }
13
+ if (ctx.groupName) {
14
+ newProps.name = ctx.groupName
15
+ }
8
16
 
9
17
  const style = `
10
- flex
11
- items-center
18
+ inline-block
12
19
  text-sm
13
20
  cursor-pointer
14
21
  py-2
22
+ mr-4
15
23
  `
16
24
  const styleInput = `
17
25
  hidden
@@ -19,7 +27,6 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
19
27
  `
20
28
 
21
29
  const styleRadio = `
22
- inline-block
23
30
  bg-clip-content
24
31
  w-6 h-6
25
32
  ml-1
@@ -33,12 +40,20 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
33
40
  peer-checked:border-sea-600
34
41
  `
35
42
  return (
36
- <div className="inline-block">
37
- <label htmlFor={newProps.id} className={cx(style, className)}>
38
- <input className={styleInput} type="radio" {...newProps} ref={ref} />
43
+ <label htmlFor={newProps.id} className={cx(style, className)}>
44
+ <span className="flex items-center">
45
+ <input
46
+ className={styleInput}
47
+ type="radio"
48
+ aria-describedby={ctx.helperTextId}
49
+ aria-errormessage={ctx.errorMessageId}
50
+ aria-invalid={ctx.isInvalid ?? false}
51
+ {...newProps}
52
+ ref={ref}
53
+ />
39
54
  <span className={styleRadio}></span>
40
55
  {children}
41
- </label>
42
- </div>
56
+ </span>
57
+ </label>
43
58
  )
44
59
  })
@@ -1,20 +1,27 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
+ import { ControllerContext } from './context'
3
4
 
4
5
  export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {}
5
6
 
6
7
  export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
7
8
  (props, ref) => {
8
- const { className, children, ...newProps } = props
9
+ const { className, children, ...restProps } = props
10
+ const ctx = React.useContext(ControllerContext)
11
+ if (ctx.isRequired) {
12
+ restProps.required = true
13
+ }
14
+
15
+ const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
9
16
 
10
17
  const style = `
18
+ cursor-pointer
11
19
  appearance-none
12
20
  text-base
13
21
  w-full
14
22
  bg-white-100
15
23
  border
16
24
  border-solid
17
- border-sumi-900
18
25
  py-4 px-4 pr-8
19
26
  rounded-[8px]
20
27
  focus:outline
@@ -23,11 +30,19 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
23
30
  `
24
31
 
25
32
  return (
26
- <div className="inline-block relative">
27
- <select className={cx(style, props.className)} {...newProps} ref={ref}>
33
+ <span className="inline-block relative">
34
+ <select
35
+ id={restProps.id ?? ctx.id}
36
+ className={cx(style, invalidStyle, props.className)}
37
+ aria-describedby={ctx.helperTextId}
38
+ aria-errormessage={ctx.errorMessageId}
39
+ aria-invalid={ctx.isInvalid ?? false}
40
+ {...restProps}
41
+ ref={ref}
42
+ >
28
43
  {children}
29
44
  </select>
30
- <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
45
+ <span className="flex items-center absolute inset-y-0 right-0 px-2 pointer-events-none">
31
46
  <svg
32
47
  xmlns="http://www.w3.org/2000/svg"
33
48
  className="fill-sumi-900"
@@ -36,8 +51,8 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
36
51
  >
37
52
  <path d="M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z" />
38
53
  </svg>
39
- </div>
40
- </div>
54
+ </span>
55
+ </span>
41
56
  )
42
57
  }
43
58
  )
@@ -1,18 +1,24 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
+ import { ControllerContext } from './context'
3
4
 
4
5
  export interface TextProps extends React.ComponentPropsWithoutRef<'input'> {}
5
6
 
6
7
  export const Text = React.forwardRef<HTMLInputElement, TextProps>(
7
8
  (props, ref) => {
8
- const { className, ...newProps } = props
9
+ const { className, ...restProps } = props
10
+ const ctx = React.useContext(ControllerContext)
11
+ if (ctx.isRequired) {
12
+ restProps.required = true
13
+ }
14
+
15
+ const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
9
16
 
10
17
  const style = `
11
18
  p-4
12
19
  rounded-lg
13
20
  border
14
21
  border-solid
15
- border-sumi-900
16
22
  focus:outline
17
23
  focus:outline-2
18
24
  focus:outline-wood-500
@@ -26,8 +32,12 @@ export const Text = React.forwardRef<HTMLInputElement, TextProps>(
26
32
  return (
27
33
  <input
28
34
  type="text"
29
- className={cx(style, className)}
30
- {...newProps}
35
+ id={restProps.id ?? ctx.id}
36
+ className={cx(style, invalidStyle, className)}
37
+ aria-describedby={ctx.helperTextId}
38
+ aria-errormessage={ctx.errorMessageId}
39
+ aria-invalid={ctx.isInvalid ?? false}
40
+ {...restProps}
31
41
  ref={ref}
32
42
  />
33
43
  )