@sakura-ui/sakura-ui 0.1.0 → 0.1.1

package/packages/forms/coverage/lcov-report/src/components/LabelControl.tsx.html

@@ -32,7 +32,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>14/14</span>
+                <span class='fraction'>16/16</span>
             </div>
         
             
@@ -146,9 +146,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">17x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -156,19 +156,19 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">17x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">17x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">17x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -204,7 +204,7 @@ import { cx } from '../utils'
 import { ControllerContext } from './context'
 &nbsp;
 export interface LabelControlProps
-  extends React.ComponentPropsWithoutRef&lt;'div'&gt; {
+  extends React.ComponentPropsWithoutRef&lt;'label'&gt; {
   labelText: string
   helperText?: string
   errorMessage?: string
@@ -212,61 +212,61 @@ export interface LabelControlProps
   isRequired?: boolean
 }
 &nbsp;
-export const LabelControl = React.forwardRef&lt;HTMLDivElement, LabelControlProps&gt;(
-  (props, ref) =&gt; {
-    const id = React.useId()
-    const {
-      labelText,
-      className,
-      helperText,
-      errorMessage,
-      isInvalid,
-      isRequired,
-      children,
-      ...newProps
-    } = props
+export const LabelControl = React.forwardRef&lt;
+  HTMLLabelElement,
+  LabelControlProps
+&gt;((props, ref) =&gt; {
+  const id = React.useId()
+  const {
+    labelText,
+    className,
+    helperText,
+    errorMessage,
+    isInvalid,
+    isRequired,
+    children,
+    ...restProps
+  } = props
 &nbsp;
-    const context = {
-      helperTextId: `helper-text-${id}`,
-      errorMessageId: `error-message-${id}`,
-      isInvalid: isInvalid ?? false,
-      isRequired: isRequired ?? false
-    }
-&nbsp;
-    return (
-      &lt;ControllerContext.Provider value={context}&gt;
-        &lt;div className={cx('mb-4', className)} ref={ref} {...newProps}&gt;
-          &lt;label&gt;
-            &lt;p className={cx('block mb-2', isInvalid &amp;&amp; 'text-sun-800')}&gt;
-              {labelText}
-              {isRequired &amp;&amp; &lt;span className="text-sun-800"&gt;&amp;nbsp;*&lt;/span&gt;}
-            &lt;/p&gt;
-            {children}
-            {helperText &amp;&amp; (
-              &lt;p
-                id={context.helperTextId}
-                className="text-sm text-sumi-700 mt-2"
-              &gt;
-                {helperText}
-              &lt;/p&gt;
-            )}
-            {isInvalid &amp;&amp; (
-              &lt;p
-                id={context.errorMessageId}
-                className={cx(
-                  'text-sm text-sun-800',
-                  helperText ? 'mt-1' : 'mt-2'
-                )}
-              &gt;
-                {errorMessage}
-              &lt;/p&gt;
-            )}
-          &lt;/label&gt;
-        &lt;/div&gt;
-      &lt;/ControllerContext.Provider&gt;
-    )
+  const context = {
+    id: props.htmlFor ?? `input-${id}`,
+    helperTextId: `helper-text-${id}`,
+    errorMessageId: `error-message-${id}`,
+    isInvalid: isInvalid ?? false,
+    isRequired: isRequired ?? false
   }
-)
+&nbsp;
+  return (
+    &lt;ControllerContext.Provider value={context}&gt;
+      &lt;div className={cx('mb-4', className)}&gt;
+        &lt;label
+          className={cx('block mb-2', isInvalid &amp;&amp; 'text-sun-800')}
+          htmlFor={context.id}
+          ref={ref}
+          {...restProps}
+        &gt;
+          {labelText}
+          {isRequired &amp;&amp; &lt;span className="text-sun-800"&gt;&amp;nbsp;*&lt;/span&gt;}
+        &lt;/label&gt;
+        {children}
+&nbsp;
+        {helperText &amp;&amp; (
+          &lt;p id={context.helperTextId} className="text-sm text-sumi-700 mt-2"&gt;
+            {helperText}
+          &lt;/p&gt;
+        )}
+        {isInvalid &amp;&amp; (
+          &lt;p
+            id={context.errorMessageId}
+            className={cx('text-sm text-sun-800', helperText ? 'mt-1' : 'mt-2')}
+          &gt;
+            {errorMessage}
+          &lt;/p&gt;
+        )}
+      &lt;/div&gt;
+    &lt;/ControllerContext.Provider&gt;
+  )
+})
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -274,7 +274,7 @@ export const LabelControl = React.forwardRef&lt;HTMLDivElement, LabelControlProp
             <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-report/src/components/Radio.tsx.html

@@ -224,7 +224,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref
   `
   return (
     <label htmlFor={newProps.id} className={cx(style, className)}>
-      <div className="flex items-center">
+      <span className="flex items-center">
         <input
           className={styleInput}
           type="radio"
@@ -236,7 +236,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref
         />
         <span className={styleRadio}></span>
         {children}
-      </div>
+      </span>
     </label>
   )
 })
@@ -247,7 +247,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref
             <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-report/src/components/Select.tsx.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.36% </span>
+                <span class="strong">90.9% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>4/11</span>
+                <span class='fraction'>10/11</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">57.14% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/5</span>
+                <span class='fraction'>4/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/1</span>
+                <span class='fraction'>1/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.36% </span>
+                <span class="strong">90.9% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>4/11</span>
+                <span class='fraction'>10/11</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <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>
@@ -119,7 +119,9 @@
 <a name='L54'></a><a href='#L54'>54</a>
 <a name='L55'></a><a href='#L55'>55</a>
 <a name='L56'></a><a href='#L56'>56</a>
-<a name='L57'></a><a href='#L57'>57</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
+<a name='L57'></a><a href='#L57'>57</a>
+<a name='L58'></a><a href='#L58'>58</a>
+<a name='L59'></a><a href='#L59'>59</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -127,15 +129,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -149,7 +151,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -182,16 +186,17 @@ import { ControllerContext } from './context'
 export interface SelectProps extends React.ComponentPropsWithoutRef&lt;'select'&gt; {}
 &nbsp;
 export const Select = React.forwardRef&lt;HTMLSelectElement, SelectProps&gt;(
-<span class="fstat-no" title="function not covered" >  (p</span>rops, ref) =&gt; {
-    const { className, children, ...newProps } = <span class="cstat-no" title="statement not covered" >props</span>
-    const ctx = <span class="cstat-no" title="statement not covered" >React.useContext(ControllerContext)</span>
-<span class="cstat-no" title="statement not covered" >    <span class="missing-if-branch" title="if path not taken" >I</span>if (ctx.isRequired) {</span>
-<span class="cstat-no" title="statement not covered" >      newProps.required = true</span>
+  (props, ref) =&gt; {
+    const { className, children, ...restProps } = props
+    const ctx = React.useContext(ControllerContext)
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (ctx.isRequired) {
+<span class="cstat-no" title="statement not covered" >      restProps.required = true</span>
     }
 &nbsp;
-    const invalidStyle = <span class="cstat-no" title="statement not covered" >ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'</span>
+    const invalidStyle = ctx.isInvalid ? <span class="branch-0 cbranch-no" title="branch not covered" >'border-sun-800' </span>: 'border-sumi-900'
 &nbsp;
-    const style = <span class="cstat-no" title="statement not covered" >`</span>
+    const style = `
+      cursor-pointer
       appearance-none
       text-base
       w-full
@@ -205,19 +210,20 @@ export const Select = React.forwardRef&lt;HTMLSelectElement, SelectProps&gt;(
       focus:outline-wood-500
     `
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    return (</span>
-      &lt;div className="inline-block relative"&gt;
+    return (
+      &lt;span className="inline-block relative"&gt;
         &lt;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}
-          {...newProps}
+          aria-invalid={ctx.isInvalid ?? <span class="branch-1 cbranch-no" title="branch not covered" >false}</span>
+          {...restProps}
           ref={ref}
         &gt;
           {children}
         &lt;/select&gt;
-        &lt;div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2"&gt;
+        &lt;span className="flex items-center absolute inset-y-0 right-0 px-2 pointer-events-none"&gt;
           &lt;svg
             xmlns="http://www.w3.org/2000/svg"
             className="fill-sumi-900"
@@ -226,8 +232,8 @@ export const Select = React.forwardRef&lt;HTMLSelectElement, SelectProps&gt;(
           &gt;
             &lt;path d="M12 15.05 6.35 9.4 7.4 8.35l4.6 4.6 4.6-4.6 1.05 1.05Z" /&gt;
           &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/div&gt;
+        &lt;/span&gt;
+      &lt;/span&gt;
     )
   }
 )
@@ -238,7 +244,7 @@ export const Select = React.forwardRef&lt;HTMLSelectElement, SelectProps&gt;(
             <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-report/src/components/Text.tsx.html

@@ -30,9 +30,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80% </span>
+                <span class="strong">85.71% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>4/5</span>
+                <span class='fraction'>6/7</span>
             </div>
         
             
@@ -107,7 +107,8 @@
 <a name='L42'></a><a href='#L42'>42</a>
 <a name='L43'></a><a href='#L43'>43</a>
 <a name='L44'></a><a href='#L44'>44</a>
-<a name='L45'></a><a href='#L45'>45</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
+<a name='L45'></a><a href='#L45'>45</a>
+<a name='L46'></a><a href='#L46'>46</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -115,15 +116,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -138,7 +139,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -159,10 +161,10 @@ export interface TextProps extends React.ComponentPropsWithoutRef&lt;'input'&gt;
 &nbsp;
 export const Text = React.forwardRef&lt;HTMLInputElement, TextProps&gt;(
   (props, ref) =&gt; {
-    const { className, ...newProps } = props
+    const { className, ...restProps } = props
     const ctx = React.useContext(ControllerContext)
     if (ctx.isRequired) {
-      newProps.required = true
+      restProps.required = true
     }
 &nbsp;
     const invalidStyle = ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'
@@ -185,11 +187,12 @@ export const Text = React.forwardRef&lt;HTMLInputElement, TextProps&gt;(
     return (
       &lt;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 ?? <span class="branch-1 cbranch-no" title="branch not covered" >false}</span>
-        {...newProps}
+        {...restProps}
         ref={ref}
       /&gt;
     )
@@ -202,7 +205,7 @@ export const Text = React.forwardRef&lt;HTMLInputElement, TextProps&gt;(
             <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-report/src/components/Textarea.tsx.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.36% </span>
+                <span class="strong">90.9% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>4/11</span>
+                <span class='fraction'>10/11</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">57.14% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/5</span>
+                <span class='fraction'>4/7</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/1</span>
+                <span class='fraction'>1/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.36% </span>
+                <span class="strong">90.9% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>4/11</span>
+                <span class='fraction'>10/11</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <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>
@@ -110,7 +110,8 @@
 <a name='L45'></a><a href='#L45'>45</a>
 <a name='L46'></a><a href='#L46'>46</a>
 <a name='L47'></a><a href='#L47'>47</a>
-<a name='L48'></a><a href='#L48'>48</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
+<a name='L48'></a><a href='#L48'>48</a>
+<a name='L49'></a><a href='#L49'>49</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -119,16 +120,16 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -143,7 +144,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -165,17 +167,17 @@ export interface TextareaProps
   extends React.ComponentPropsWithoutRef&lt;'textarea'&gt; {}
 &nbsp;
 export const Textarea = React.forwardRef&lt;HTMLTextAreaElement, TextareaProps&gt;(
-<span class="fstat-no" title="function not covered" >  (p</span>rops, ref) =&gt; {
-    const { className, children, ...newProps } = <span class="cstat-no" title="statement not covered" >props</span>
+  (props, ref) =&gt; {
+    const { className, children, ...restProps } = props
 &nbsp;
-    const ctx = <span class="cstat-no" title="statement not covered" >React.useContext(ControllerContext)</span>
-<span class="cstat-no" title="statement not covered" >    <span class="missing-if-branch" title="if path not taken" >I</span>if (ctx.isRequired) {</span>
-<span class="cstat-no" title="statement not covered" >      newProps.required = true</span>
+    const ctx = React.useContext(ControllerContext)
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (ctx.isRequired) {
+<span class="cstat-no" title="statement not covered" >      restProps.required = true</span>
     }
 &nbsp;
-    const invalidStyle = <span class="cstat-no" title="statement not covered" >ctx.isInvalid ? 'border-sun-800' : 'border-sumi-900'</span>
+    const invalidStyle = ctx.isInvalid ? <span class="branch-0 cbranch-no" title="branch not covered" >'border-sun-800' </span>: 'border-sumi-900'
 &nbsp;
-    const style = <span class="cstat-no" title="statement not covered" >`</span>
+    const style = `
       p-4
       rounded-lg
       border
@@ -190,13 +192,14 @@ export const Textarea = React.forwardRef&lt;HTMLTextAreaElement, TextareaProps&g
       disabled:border-sumi-500
     `
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    return (</span>
+    return (
       &lt;textarea
+        id={restProps.id ?? ctx.id}
         className={cx(style, invalidStyle, className)}
         aria-describedby={ctx.helperTextId}
         aria-errormessage={ctx.errorMessageId}
-        aria-invalid={ctx.isInvalid ?? false}
-        {...newProps}
+        aria-invalid={ctx.isInvalid ?? <span class="branch-1 cbranch-no" title="branch not covered" >false}</span>
+        {...restProps}
         ref={ref}
       &gt;
         {children}
@@ -211,7 +214,7 @@ export const Textarea = React.forwardRef&lt;HTMLTextAreaElement, TextareaProps&g
             <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-report/src/components/context.ts.html

@@ -79,7 +79,9 @@
 <a name='L14'></a><a href='#L14'>14</a>
 <a name='L15'></a><a href='#L15'>15</a>
 <a name='L16'></a><a href='#L16'>16</a>
-<a name='L17'></a><a href='#L17'>17</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
+<a name='L17'></a><a href='#L17'>17</a>
+<a name='L18'></a><a href='#L18'>18</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -98,6 +100,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from 'react'
 &nbsp;
 export interface ControllerContextType {
+  id?: string
   groupName?: string
   helperTextId: string
   errorMessageId: string
@@ -118,7 +121,7 @@ export const ControllerContext = React.createContext&lt;ControllerContextType&gt
             <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>