@sakura-ui/sakura-ui 0.1.11 → 0.1.12

package/packages/forms/coverage/lcov-report/src/utils/index.ts.html

@@ -64,7 +64,7 @@
     <div class='status-line high'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
-<a name='L2'></a><a href='#L2'>2</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">71x</span>
+<a name='L2'></a><a href='#L2'>2</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">89x</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">export const cx = (...classNames: any[]) =&gt; classNames.filter(Boolean).join(' ')
 &nbsp;</pre></td></tr></table></pre>
 
@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-03-27T00:09:49.121Z
+                at 2023-03-30T13:17:37.839Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/packages/forms/coverage/lcov.info

@@ -13,13 +13,13 @@ FN:14,(anonymous_9)
 FN:15,(anonymous_10)
 FN:16,(anonymous_11)
 FNF:12
-FNH:4
+FNH:6
 FNDA:0,(anonymous_0)
 FNDA:6,(anonymous_1)
-FNDA:0,(anonymous_2)
-FNDA:6,(anonymous_3)
-FNDA:0,(anonymous_4)
-FNDA:11,(anonymous_5)
+FNDA:2,(anonymous_2)
+FNDA:8,(anonymous_3)
+FNDA:2,(anonymous_4)
+FNDA:17,(anonymous_5)
 FNDA:11,(anonymous_6)
 FNDA:0,(anonymous_7)
 FNDA:0,(anonymous_8)
@@ -29,10 +29,10 @@ FNDA:0,(anonymous_11)
 DA:1,4
 DA:2,4
 DA:3,10
-DA:4,4
-DA:5,10
-DA:6,4
-DA:7,15
+DA:4,6
+DA:5,12
+DA:6,6
+DA:7,21
 DA:8,15
 DA:11,4
 DA:12,4
@@ -115,36 +115,38 @@ BRH:18
 end_of_record
 TN:
 SF:src/components/LabelControl.tsx
-FN:15,(anonymous_1)
+FN:17,(anonymous_1)
 FNF:1
 FNH:1
-FNDA:11,(anonymous_1)
+FNDA:17,(anonymous_1)
 DA:1,4
 DA:2,4
 DA:3,4
 DA:14,4
-DA:16,11
-DA:26,11
-DA:28,11
-DA:35,11
+DA:18,17
+DA:28,17
+DA:30,17
+DA:38,17
 LF:8
 LH:8
-BRDA:31,0,0,11
-BRDA:31,0,1,9
-BRDA:32,1,0,11
-BRDA:32,1,1,8
-BRDA:39,2,0,11
-BRDA:39,2,1,2
-BRDA:41,3,0,11
-BRDA:41,3,1,3
-BRDA:44,4,0,11
-BRDA:44,4,1,3
-BRDA:52,5,0,11
-BRDA:52,5,1,2
-BRDA:57,6,0,1
-BRDA:57,6,1,1
-BRF:14
-BRH:14
+BRDA:31,0,0,17
+BRDA:31,0,1,14
+BRDA:34,1,0,17
+BRDA:34,1,1,15
+BRDA:35,2,0,17
+BRDA:35,2,1,14
+BRDA:42,3,0,17
+BRDA:42,3,1,2
+BRDA:48,4,0,17
+BRDA:48,4,1,3
+BRDA:52,5,0,17
+BRDA:52,5,1,3
+BRDA:57,6,0,17
+BRDA:57,6,1,2
+BRDA:60,7,0,1
+BRDA:60,7,1,1
+BRF:16
+BRH:16
 end_of_record
 TN:
 SF:src/components/Radio.tsx
@@ -179,89 +181,95 @@ TN:
 SF:src/components/Select.tsx
 FN:8,(anonymous_1)
 FNF:1
-FNH:0
-FNDA:0,(anonymous_1)
+FNH:1
+FNDA:2,(anonymous_1)
 DA:1,4
 DA:2,4
 DA:3,4
 DA:7,4
-DA:9,0
-DA:10,0
-DA:11,0
+DA:9,2
+DA:10,2
+DA:11,2
 DA:12,0
-DA:15,0
-DA:17,0
-DA:31,0
+DA:15,2
+DA:17,2
+DA:32,2
 LF:11
-LH:4
+LH:10
 BRDA:11,0,0,0
 BRDA:15,1,0,0
-BRDA:15,1,1,0
-BRDA:37,2,0,0
-BRDA:37,2,1,0
-BRF:5
-BRH:0
+BRDA:15,1,1,2
+BRDA:35,2,0,2
+BRDA:35,2,1,2
+BRDA:39,3,0,2
+BRDA:39,3,1,0
+BRF:7
+BRH:4
 end_of_record
 TN:
 SF:src/components/Text.tsx
 FN:8,(anonymous_1)
 FNF:1
 FNH:1
-FNDA:6,(anonymous_1)
+FNDA:8,(anonymous_1)
 DA:1,4
 DA:2,4
 DA:3,4
 DA:7,4
-DA:9,6
-DA:10,6
-DA:11,6
+DA:9,8
+DA:10,8
+DA:11,8
 DA:12,2
-DA:15,6
-DA:17,6
-DA:32,6
+DA:15,8
+DA:17,8
+DA:32,8
 LF:11
 LH:11
 BRDA:11,0,0,2
 BRDA:15,1,0,1
-BRDA:15,1,1,5
-BRDA:38,2,0,6
-BRDA:38,2,1,0
-BRF:5
-BRH:4
+BRDA:15,1,1,7
+BRDA:35,2,0,8
+BRDA:35,2,1,8
+BRDA:39,3,0,8
+BRDA:39,3,1,0
+BRF:7
+BRH:6
 end_of_record
 TN:
 SF:src/components/Textarea.tsx
 FN:9,(anonymous_1)
 FNF:1
-FNH:0
-FNDA:0,(anonymous_1)
+FNH:1
+FNDA:2,(anonymous_1)
 DA:1,4
 DA:2,4
 DA:3,4
 DA:8,4
-DA:10,0
-DA:12,0
-DA:13,0
+DA:10,2
+DA:12,2
+DA:13,2
 DA:14,0
-DA:17,0
-DA:19,0
-DA:34,0
+DA:17,2
+DA:19,2
+DA:34,2
 LF:11
-LH:4
+LH:10
 BRDA:13,0,0,0
 BRDA:17,1,0,0
-BRDA:17,1,1,0
-BRDA:39,2,0,0
-BRDA:39,2,1,0
-BRF:5
-BRH:0
+BRDA:17,1,1,2
+BRDA:36,2,0,2
+BRDA:36,2,1,2
+BRDA:40,3,0,2
+BRDA:40,3,1,0
+BRF:7
+BRH:4
 end_of_record
 TN:
 SF:src/components/context.ts
 FNF:0
 FNH:0
 DA:1,4
-DA:11,4
+DA:12,4
 LF:2
 LH:2
 BRF:0
@@ -277,20 +285,20 @@ FN:5,(anonymous_4)
 FN:6,(anonymous_5)
 FN:7,(anonymous_6)
 FNF:7
-FNH:4
+FNH:6
 FNDA:0,(anonymous_0)
 FNDA:6,(anonymous_1)
-FNDA:0,(anonymous_2)
-FNDA:6,(anonymous_3)
-FNDA:0,(anonymous_4)
-FNDA:11,(anonymous_5)
+FNDA:2,(anonymous_2)
+FNDA:8,(anonymous_3)
+FNDA:2,(anonymous_4)
+FNDA:17,(anonymous_5)
 FNDA:11,(anonymous_6)
 DA:1,4
 DA:2,10
-DA:3,4
-DA:4,10
-DA:5,4
-DA:6,15
+DA:3,6
+DA:4,12
+DA:5,6
+DA:6,21
 DA:7,15
 LF:7
 LH:7
@@ -417,8 +425,8 @@ SF:src/utils/index.ts
 FN:1,(anonymous_0)
 FNF:1
 FNH:1
-FNDA:71,(anonymous_0)
-DA:1,71
+FNDA:89,(anonymous_0)
+DA:1,89
 LF:1
 LH:1
 BRF:0

package/packages/forms/dist/components/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface CheckboxProps extends React.ComponentProps<'input'> {
+export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
 }
-export declare const Checkbox: React.ElementType<any>;
+export declare const Checkbox: React.ElementType<CheckboxProps>;
 //# sourceMappingURL=Checkbox.d.ts.map

package/packages/forms/dist/components/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;CAAG;AAEvE,eAAO,MAAM,QAAQ,wBA8DC,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC;CAAG;AAE9E,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,aAAa,CA+DpD,CAAA"}

package/packages/forms/dist/components/Checkbox.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cx } from '../utils/class';
+import { ControllerContext } from './context';
+export const Checkbox = React.forwardRef((props, ref) => {
+    const { className, children, ...restProps } = props;
+    const ctx = React.useContext(ControllerContext);
+    if (ctx.isRequired) {
+        restProps.required = true;
+    }
+    if (ctx.groupName) {
+        restProps.name = ctx.groupName;
+    }
+    const style = `
+    inline-block
+    text-base
+    cursor-pointer
+    py-2
+    mr-4
+  `;
+    const styleInput = `
+    peer
+    hidden
+  `;
+    const styleCheck = `
+    bg-clip-content
+    w-6 h-6
+    ml-1
+    mr-2
+    rounded
+    border
+    border-solid
+    border-sumi-900
+    fill-transparent
+    peer-checked:fill-white-1000
+    peer-checked:bg-sea-600
+    peer-checked:border-none
+    peer-disabled:border-sumi-500
+  `;
+    return (_jsx("label", { htmlFor: restProps.id, className: cx(style, className), children: _jsxs("span", { className: "flex items-center", children: [_jsx("input", { className: styleInput, type: "checkbox", "aria-describedby": ctx.helperTextId, "aria-errormessage": ctx.errorMessageId, "aria-invalid": ctx.isInvalid ?? false, ...restProps, ref: ref }), _jsx("span", { className: styleCheck, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", children: _jsx("path", { d: "m9.55 17.65-5.325-5.325 1.05-1.075 4.275 4.275 9.175-9.175 1.05 1.075Z" }) }) }), _jsx("span", { className: "peer-disabled:text-sumi-500", children: children })] }) }));
+});
+Checkbox.displayName = 'Checkbox';
+//# sourceMappingURL=Checkbox.js.map

package/packages/forms/dist/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,MAAM,CAAC,MAAM,QAAQ,GAAqC,KAAK,CAAC,UAAU,CAGxE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC/C,IAAI,GAAG,CAAC,UAAU,EAAE;QAClB,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAA;KAC1B;IACD,IAAI,GAAG,CAAC,SAAS,EAAE;QACjB,SAAS,CAAC,IAAI,GAAG,GAAG,CAAC,SAAS,CAAA;KAC/B;IAED,MAAM,KAAK,GAAG;;;;;;GAMb,CAAA;IAED,MAAM,UAAU,GAAG;;;GAGlB,CAAA;IAED,MAAM,UAAU,GAAG;;;;;;;;;;;;;;GAclB,CAAA;IAED,OAAO,CACL,gBAAO,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,YAC3D,gBAAM,SAAS,EAAC,mBAAmB,aACjC,gBACE,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,UAAU,sBACG,GAAG,CAAC,YAAY,uBACf,GAAG,CAAC,cAAc,kBACvB,GAAG,CAAC,SAAS,IAAI,KAAK,KAChC,SAAS,EACb,GAAG,EAAE,GAAG,GACR,EACF,eAAM,SAAS,EAAE,UAAU,YACzB,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YAC5D,eAAM,CAAC,EAAC,wEAAwE,GAAG,GAC/E,GACD,EACP,eAAM,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAQ,IAC1D,GACD,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}

package/packages/forms/dist/components/FieldsetControl.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface FieldsetControlProps extends React.ComponentProps<'fieldset'> {
+export interface FieldsetControlProps extends React.ComponentPropsWithRef<'fieldset'> {
     labelText: string;
     helperText?: string;
     errorMessage?: string;
@@ -7,5 +7,5 @@ export interface FieldsetControlProps extends React.ComponentProps<'fieldset'> {
     isRequired?: boolean;
     direction?: 'flex-col' | 'flex-row';
 }
-export declare const FieldsetControl: React.ElementType<any>;
+export declare const FieldsetControl: React.ElementType<FieldsetControlProps>;
 //# sourceMappingURL=FieldsetControl.d.ts.map

package/packages/forms/dist/components/FieldsetControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldsetControl.d.ts","sourceRoot":"","sources":["../../src/components/FieldsetControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;IAC5E,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CACpC;AAED,eAAO,MAAM,eAAe,wBAyDL,CAAA"}
+{"version":3,"file":"FieldsetControl.d.ts","sourceRoot":"","sources":["../../src/components/FieldsetControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CACpC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,WAAW,CAAC,oBAAoB,CA6DhE,CAAA"}

package/packages/forms/dist/components/FieldsetControl.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cx } from '../utils/class';
+import { ControllerContext } from './context';
+export const FieldsetControl = React.forwardRef((props, ref) => {
+    const id = React.useId();
+    const { labelText, className, helperText, errorMessage, isInvalid, isRequired, direction, children, ...restProps } = props;
+    const groupName = restProps.name ?? `group-${id}`;
+    const context = {
+        groupName: groupName,
+        helperTextId: `helper-text-${id}`,
+        errorMessageId: `error-message-${id}`,
+        isInvalid: isInvalid ?? false,
+        isRequired: isRequired ?? false
+    };
+    const styleDirection = direction ?? 'flex-col';
+    return (_jsx(ControllerContext.Provider, { value: context, children: _jsxs("fieldset", { className: cx('mb-4', className), ref: ref, ...restProps, children: [_jsx("legend", { children: _jsxs("p", { className: cx('block mb-2 text-label', isInvalid && 'text-sun-800'), children: [labelText, isRequired && _jsx("span", { className: "text-sun-800", children: "\u00A0*" })] }) }), _jsx("div", { className: cx('inline-flex', styleDirection), children: children }), helperText && (_jsx("p", { id: context.helperTextId, className: "text-xs text-sumi-700 mt-2", children: helperText })), isInvalid && (_jsx("p", { id: context.errorMessageId, className: cx('text-xs text-sun-800', helperText ? 'mt-1' : 'mt-2'), children: errorMessage }))] }) }));
+});
+FieldsetControl.displayName = 'FieldsetControl';
+//# sourceMappingURL=FieldsetControl.js.map

package/packages/forms/dist/components/FieldsetControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldsetControl.js","sourceRoot":"","sources":["../../src/components/FieldsetControl.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAY7C,MAAM,CAAC,MAAM,eAAe,GAC1B,KAAK,CAAC,UAAU,CAA4C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IACxB,MAAM,EACJ,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,SAAS,EACT,UAAU,EACV,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,EAAE,EAAE,CAAA;IAEjD,MAAM,OAAO,GAAG;QACd,SAAS,EAAE,SAAS;QACpB,YAAY,EAAE,eAAe,EAAE,EAAE;QACjC,cAAc,EAAE,iBAAiB,EAAE,EAAE;QACrC,SAAS,EAAE,SAAS,IAAI,KAAK;QAC7B,UAAU,EAAE,UAAU,IAAI,KAAK;KAChC,CAAA;IAED,MAAM,cAAc,GAAG,SAAS,IAAI,UAAU,CAAA;IAE9C,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YACxC,oBAAU,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,aACjE,2BACE,aACE,SAAS,EAAE,EAAE,CACX,uBAAuB,EACvB,SAAS,IAAI,cAAc,CAC5B,aAEA,SAAS,EACT,UAAU,IAAI,eAAM,SAAS,EAAC,cAAc,wBAAe,IAC1D,GACG,EACT,cAAK,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC,YAAG,QAAQ,GAAO,EAClE,UAAU,IAAI,CACb,YAAG,EAAE,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,EAAC,4BAA4B,YAChE,UAAU,GACT,CACL,EACA,SAAS,IAAI,CACZ,YACE,EAAE,EAAE,OAAO,CAAC,cAAc,EAC1B,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAC7B,YAEA,YAAY,GACX,CACL,IACQ,GACgB,CAC9B,CAAA;AACH,CAAC,CAAC,CAAA;AAEJ,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA"}

package/packages/forms/dist/components/Input.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface InputProps extends React.ComponentProps<'input'> {
+export interface InputProps extends React.ComponentPropsWithRef<'input'> {
 }
-export declare const Input: React.ElementType<any>;
+export declare const Input: React.ElementType<InputProps>;
 //# sourceMappingURL=Input.d.ts.map

package/packages/forms/dist/components/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;CAAG;AAEpE,eAAO,MAAM,KAAK,wBAoCI,CAAA"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC;CAAG;AAE3E,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,UAAU,CAqC9C,CAAA"}

package/packages/forms/dist/components/Input.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cx } from '../utils/class';
+import { ControllerContext } from './context';
+export const Input = React.forwardRef((props, ref) => {
+    const { className, ...restProps } = props;
+    const ctx = React.useContext(ControllerContext);
+    if (ctx.isRequired) {
+        restProps.required = true;
+    }
+    const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900';
+    const style = `
+    p-4
+    rounded-lg
+    border
+    border-solid
+    focus:outline
+    focus:outline-2
+    focus:outline-wood-500
+    disabled:bg-transparent
+    disabled:text-sumi-500
+    disabled:border-sumi-500
+  `;
+    return (_jsx("input", { type: "text", id: restProps.id ?? ctx.id, className: cx(style, invalidStyle, className), "aria-describedby": ctx.helperTextId, "aria-errormessage": ctx.errorMessageId, "aria-invalid": ctx.isInvalid ?? false, ref: ref, ...restProps }));
+});
+Input.displayName = 'Input';
+//# sourceMappingURL=Input.js.map

package/packages/forms/dist/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,MAAM,CAAC,MAAM,KAAK,GAAkC,KAAK,CAAC,UAAU,CAGlE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IACzC,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC/C,IAAI,GAAG,CAAC,UAAU,EAAE;QAClB,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAA;KAC1B;IAED,MAAM,YAAY,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAA;IAEzE,MAAM,KAAK,GAAG;;;;;;;;;;;GAWb,CAAA;IAED,OAAO,CACL,gBACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,SAAS,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,EAC1B,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,CAAC,sBAC3B,GAAG,CAAC,YAAY,uBACf,GAAG,CAAC,cAAc,kBACvB,GAAG,CAAC,SAAS,IAAI,KAAK,EACpC,GAAG,EAAE,GAAG,KACJ,SAAS,GACb,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA"}

package/packages/forms/dist/components/LabelControl.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-export interface LabelControlProps extends React.ComponentProps<'label'> {
+export interface LabelControlProps extends React.ComponentPropsWithRef<'label'> {
     labelText: string;
     helperText?: string;
     errorMessage?: string;
     isInvalid?: boolean;
     isRequired?: boolean;
 }
-export declare const LabelControl: React.ElementType<any>;
+export declare const LabelControl: React.ElementType<LabelControlProps>;
 //# sourceMappingURL=LabelControl.d.ts.map

package/packages/forms/dist/components/LabelControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelControl.d.ts","sourceRoot":"","sources":["../../src/components/LabelControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IACtE,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,YAAY,wBAqDF,CAAA"}
+{"version":3,"file":"LabelControl.d.ts","sourceRoot":"","sources":["../../src/components/LabelControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAsD1D,CAAA"}

package/packages/forms/dist/components/LabelControl.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cx } from '../utils/class';
+import { ControllerContext } from './context';
+export const LabelControl = React.forwardRef((props, ref) => {
+    const id = React.useId();
+    const { labelText, className, helperText, errorMessage, isInvalid, isRequired, children, ...restProps } = props;
+    const context = {
+        id: props.htmlFor ?? `input-${id}`,
+        helperTextId: `helper-text-${id}`,
+        errorMessageId: `error-message-${id}`,
+        isInvalid: isInvalid ?? false,
+        isRequired: isRequired ?? false
+    };
+    return (_jsx(ControllerContext.Provider, { value: context, children: _jsxs("div", { className: cx('mb-4', className), children: [_jsxs("label", { className: cx('block mb-2 text-label', isInvalid && 'text-sun-800'), htmlFor: context.id, ref: ref, ...restProps, children: [labelText, isRequired && _jsx("span", { className: "text-sun-800", children: "\u00A0*" })] }), helperText && (_jsx("p", { id: context.helperTextId, className: "text-xs text-sumi-700 mb-2", children: helperText })), children, isInvalid && (_jsx("p", { id: context.errorMessageId, className: cx('text-xs text-sun-800', helperText ? 'mt-1' : 'mt-2'), children: errorMessage }))] }) }));
+});
+LabelControl.displayName = 'LabelControl';
+//# sourceMappingURL=LabelControl.js.map

package/packages/forms/dist/components/LabelControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelControl.js","sourceRoot":"","sources":["../../src/components/LabelControl.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAW7C,MAAM,CAAC,MAAM,YAAY,GACvB,KAAK,CAAC,UAAU,CAAsC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACnE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IACxB,MAAM,EACJ,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,OAAO,GAAG;QACd,EAAE,EAAE,KAAK,CAAC,OAAO,IAAI,SAAS,EAAE,EAAE;QAClC,YAAY,EAAE,eAAe,EAAE,EAAE;QACjC,cAAc,EAAE,iBAAiB,EAAE,EAAE;QACrC,SAAS,EAAE,SAAS,IAAI,KAAK;QAC7B,UAAU,EAAE,UAAU,IAAI,KAAK;KAChC,CAAA;IAED,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YACxC,eAAK,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,aACnC,iBACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,IAAI,cAAc,CAAC,EACnE,OAAO,EAAE,OAAO,CAAC,EAAE,EACnB,GAAG,EAAE,GAAG,KACJ,SAAS,aAEZ,SAAS,EACT,UAAU,IAAI,eAAM,SAAS,EAAC,cAAc,wBAAe,IACtD,EACP,UAAU,IAAI,CACb,YAAG,EAAE,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,EAAC,4BAA4B,YAChE,UAAU,GACT,CACL,EACA,QAAQ,EACR,SAAS,IAAI,CACZ,YACE,EAAE,EAAE,OAAO,CAAC,cAAc,EAC1B,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAC7B,YAEA,YAAY,GACX,CACL,IACG,GACqB,CAC9B,CAAA;AACH,CAAC,CAAC,CAAA;AAEJ,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA"}

package/packages/forms/dist/components/Radio.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface Props extends React.ComponentProps<'input'> {
+export interface RadioProps extends React.ComponentPropsWithRef<'input'> {
 }
-export declare const Radio: React.ElementType<any>;
+export declare const Radio: React.ElementType<RadioProps>;
 //# sourceMappingURL=Radio.d.ts.map

package/packages/forms/dist/components/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;CAAG;AAE/D,eAAO,MAAM,KAAK,wBAsDK,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC;CAAG;AAE3E,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,UAAU,CAyD9C,CAAA"}

package/packages/forms/dist/components/Radio.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cx } from '../utils/class';
+import { ControllerContext } from './context';
+export const Radio = React.forwardRef((props, ref) => {
+    const { className, children, ...newProps } = props;
+    const ctx = React.useContext(ControllerContext);
+    if (ctx.isRequired) {
+        newProps.required = true;
+    }
+    if (ctx.groupName) {
+        newProps.name = ctx.groupName;
+    }
+    const style = `
+    inline-block
+    text-base
+    cursor-pointer
+    py-2
+    mr-4
+    
+  `;
+    const styleInput = `
+    peer
+    hidden
+  `;
+    const styleRadio = `
+    bg-clip-content
+    w-6 h-6
+    ml-1
+    mr-2
+    p-1
+    rounded-full
+    border
+    border-solid
+    border-sumi-900
+    peer-checked:bg-sea-600
+    peer-checked:border-sea-600
+    peer-disabled:border-sumi-500
+  `;
+    return (_jsx("label", { htmlFor: newProps.id, className: cx(style, className), children: _jsxs("span", { className: "flex items-center", children: [_jsx("input", { className: styleInput, type: "radio", "aria-describedby": ctx.helperTextId, "aria-errormessage": ctx.errorMessageId, "aria-invalid": ctx.isInvalid ?? false, ...newProps, ref: ref }), _jsx("span", { className: styleRadio }), _jsx("span", { className: "peer-disabled:text-sumi-500", children: children })] }) }));
+});
+Radio.displayName = 'Radio';
+//# sourceMappingURL=Radio.js.map

package/packages/forms/dist/components/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,MAAM,CAAC,MAAM,KAAK,GAAkC,KAAK,CAAC,UAAU,CAGlE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAA;IAClD,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC/C,IAAI,GAAG,CAAC,UAAU,EAAE;QAClB,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAA;KACzB;IACD,IAAI,GAAG,CAAC,SAAS,EAAE;QACjB,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC,SAAS,CAAA;KAC9B;IAED,MAAM,KAAK,GAAG;;;;;;;GAOb,CAAA;IACD,MAAM,UAAU,GAAG;;;GAGlB,CAAA;IAED,MAAM,UAAU,GAAG;;;;;;;;;;;;;GAalB,CAAA;IACD,OAAO,CACL,gBAAO,OAAO,EAAE,QAAQ,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,YAC1D,gBAAM,SAAS,EAAC,mBAAmB,aACjC,gBACE,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,OAAO,sBACM,GAAG,CAAC,YAAY,uBACf,GAAG,CAAC,cAAc,kBACvB,GAAG,CAAC,SAAS,IAAI,KAAK,KAChC,QAAQ,EACZ,GAAG,EAAE,GAAG,GACR,EACF,eAAM,SAAS,EAAE,UAAU,GAAS,EACpC,eAAM,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAQ,IAC1D,GACD,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA"}

package/packages/forms/dist/components/Select.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface SelectProps extends React.ComponentProps<'select'> {
+export interface SelectProps extends React.ComponentPropsWithRef<'select'> {
 }
-export declare const Select: React.ElementType<any>;
+export declare const Select: React.ElementType<SelectProps>;
 //# sourceMappingURL=Select.d.ts.map

package/packages/forms/dist/components/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;CAAG;AAEtE,eAAO,MAAM,MAAM,wBA0DG,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC;CAAG;AAE7E,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CA2DhD,CAAA"}

package/packages/forms/dist/components/Select.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cx } from '../utils/class';
+import { ControllerContext } from './context';
+export const Select = React.forwardRef((props, ref) => {
+    const { className, children, ...restProps } = props;
+    const ctx = React.useContext(ControllerContext);
+    if (ctx.isRequired) {
+        restProps.required = true;
+    }
+    const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900';
+    const style = `
+    peer
+    cursor-pointer
+    appearance-none
+    text-base
+    w-full
+    bg-white-100
+    border
+    border-solid
+    py-4 px-4 pr-8
+    rounded-[8px]
+    focus:outline
+    focus:outline-2
+    focus:outline-wood-500
+    disabled:bg-transparent
+    disabled:text-sumi-500
+    disabled:border-sumi-500
+  `;
+    const styleArrow = `
+    flex items-center
+    absolute inset-y-0 right-0
+    px-2
+    pointer-events-none
+    peer-disabled:fill-sumi-500
+  `;
+    return (_jsxs("label", { className: "inline-block relative", children: [_jsx("select", { id: restProps.id ?? ctx.id, className: cx(style, invalidStyle, props.className), "aria-describedby": ctx.helperTextId, "aria-errormessage": ctx.errorMessageId, "aria-invalid": ctx.isInvalid ?? false, ...restProps, ref: ref, children: children }), _jsx("span", { className: styleArrow, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", width: "24", children: _jsx("path", { d: "M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z" }) }) })] }));
+});
+//# sourceMappingURL=Select.js.map

package/packages/forms/dist/components/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,MAAM,CAAC,MAAM,MAAM,GAAmC,KAAK,CAAC,UAAU,CAGpE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC/C,IAAI,GAAG,CAAC,UAAU,EAAE;QAClB,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAA;KAC1B;IAED,MAAM,YAAY,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAA;IAEzE,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;GAiBb,CAAA;IAED,MAAM,UAAU,GAAG;;;;;;GAMlB,CAAA;IAED,OAAO,CACL,iBAAO,SAAS,EAAC,uBAAuB,aACtC,iBACE,EAAE,EAAE,SAAS,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,EAC1B,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,sBACjC,GAAG,CAAC,YAAY,uBACf,GAAG,CAAC,cAAc,kBACvB,GAAG,CAAC,SAAS,IAAI,KAAK,KAChC,SAAS,EACb,GAAG,EAAE,GAAG,YAEP,QAAQ,GACF,EACT,eAAM,SAAS,EAAE,UAAU,YACzB,cAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,YAC5D,eAAM,CAAC,EAAC,wDAAwD,GAAG,GAC/D,GACD,IACD,CACT,CAAA;AACH,CAAC,CAAC,CAAA"}

package/packages/forms/dist/components/Textarea.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface TextareaProps extends React.ComponentProps<'textarea'> {
+export interface TextareaProps extends React.ComponentPropsWithRef<'textarea'> {
 }
-export declare const Textarea: React.ElementType<any>;
+export declare const Textarea: React.ElementType<TextareaProps>;
 //# sourceMappingURL=Textarea.d.ts.map

package/packages/forms/dist/components/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;CAAG;AAE1E,eAAO,MAAM,QAAQ,wBA2DC,CAAA"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC;CAAG;AAEpD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,aAAa,CA4DpD,CAAA"}