@sakura-ui/sakura-ui 0.1.11 → 0.1.13

package/packages/forms/src/components/controlled/CheckboxGroup.tsx

@@ -4,7 +4,7 @@ import { FieldsetControl } from '../FieldsetControl'
 import { InputItem } from './InputItem'
 
 export interface CheckboxGroupProps
-  extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
+  extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
   items: InputItem[]
   onChange: React.ChangeEventHandler<HTMLInputElement>
   labelText: string
@@ -14,40 +14,40 @@ export interface CheckboxGroupProps
   isRequired?: boolean
 }
 
-export const CheckboxGroup = React.forwardRef<
-  HTMLFieldSetElement,
-  CheckboxGroupProps
->((props, ref) => {
-  const {
-    items,
-    onChange,
-    className,
-    labelText,
-    helperText,
-    errorMessage,
-    isInvalid,
-    isRequired,
-    ...restProps
-  } = props
+export const CheckboxGroup: React.ElementType<CheckboxGroupProps> =
+  React.forwardRef<HTMLFieldSetElement, CheckboxGroupProps>((props, ref) => {
+    const {
+      items,
+      onChange,
+      className,
+      labelText,
+      helperText,
+      errorMessage,
+      isInvalid,
+      isRequired,
+      ...restProps
+    } = props
 
-  return (
-    <FieldsetControl
-      className={className}
-      labelText={labelText}
-      helperText={helperText}
-      errorMessage={errorMessage}
-      isInvalid={isInvalid}
-      isRequired={isRequired}
-      ref={ref}
-      {...restProps}
-    >
-      {items.map(({ label, value }, index) => {
-        return (
-          <Checkbox key={index} value={value} onChange={onChange}>
-            {label}
-          </Checkbox>
-        )
-      })}
-    </FieldsetControl>
-  )
-}) as React.ElementType
+    return (
+      <FieldsetControl
+        className={className}
+        labelText={labelText}
+        helperText={helperText}
+        errorMessage={errorMessage}
+        isInvalid={isInvalid}
+        isRequired={isRequired}
+        ref={ref}
+        {...restProps}
+      >
+        {items.map(({ label, value }, index) => {
+          return (
+            <Checkbox key={index} value={value} onChange={onChange}>
+              {label}
+            </Checkbox>
+          )
+        })}
+      </FieldsetControl>
+    )
+  })
+
+CheckboxGroup.displayName = 'CheckboxGroup'

package/packages/forms/src/components/controlled/RadioGroup.tsx

@@ -4,7 +4,7 @@ import { FieldsetControl } from '../FieldsetControl'
 import { InputItem } from './InputItem'
 
 export interface RadioGroupProps
-  extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
+  extends Omit<React.ComponentPropsWithRef<'fieldset'>, 'onChange'> {
   items: InputItem[]
   onChange: React.ChangeEventHandler<HTMLInputElement>
   labelText: string
@@ -15,7 +15,7 @@ export interface RadioGroupProps
   defaultValue?: string
 }
 
-export const RadioGroup = React.forwardRef<
+export const RadioGroup: React.ElementType<RadioGroupProps> = React.forwardRef<
   HTMLFieldSetElement,
   RadioGroupProps
 >((props, ref) => {
@@ -57,4 +57,6 @@ export const RadioGroup = React.forwardRef<
       })}
     </FieldsetControl>
   )
-}) as React.ElementType
+})
+
+RadioGroup.displayName = 'RadioGroup'

package/packages/forms/src/components/controlled/SelectControl.tsx

@@ -2,7 +2,8 @@ import React from 'react'
 import { LabelControl } from '../LabelControl'
 import { Select } from '../Select'
 
-export interface SelectControlProps extends React.ComponentProps<'select'> {
+export interface SelectControlProps
+  extends React.ComponentPropsWithRef<'select'> {
   labelText: string
   helperText?: string
   errorMessage?: string
@@ -10,30 +11,30 @@ export interface SelectControlProps extends React.ComponentProps<'select'> {
   isRequired?: boolean
 }
 
-export const SelectControl = React.forwardRef<
-  HTMLSelectElement,
-  SelectControlProps
->((props, ref) => {
-  const {
-    className,
-    labelText,
-    helperText,
-    errorMessage,
-    isInvalid,
-    isRequired,
-    ...restProps
-  } = props
+export const SelectControl: React.ElementType<SelectControlProps> =
+  React.forwardRef<HTMLSelectElement, SelectControlProps>((props, ref) => {
+    const {
+      className,
+      labelText,
+      helperText,
+      errorMessage,
+      isInvalid,
+      isRequired,
+      ...restProps
+    } = props
 
-  return (
-    <LabelControl
-      className={className}
-      labelText={labelText}
-      helperText={helperText}
-      errorMessage={errorMessage}
-      isInvalid={isInvalid}
-      isRequired={isRequired}
-    >
-      <Select ref={ref} {...restProps} />
-    </LabelControl>
-  )
-}) as React.ElementType
+    return (
+      <LabelControl
+        className={className}
+        labelText={labelText}
+        helperText={helperText}
+        errorMessage={errorMessage}
+        isInvalid={isInvalid}
+        isRequired={isRequired}
+      >
+        <Select ref={ref} {...restProps} />
+      </LabelControl>
+    )
+  })
+
+SelectControl.displayName = 'SelectControl'

package/packages/forms/src/components/controlled/TextareaControl.tsx

@@ -2,7 +2,8 @@ import React from 'react'
 import { LabelControl } from '../LabelControl'
 import { Textarea } from '../Textarea'
 
-export interface TextareaControlProps extends React.ComponentProps<'textarea'> {
+export interface TextareaControlProps
+  extends React.ComponentPropsWithRef<'textarea'> {
   labelText: string
   helperText?: string
   errorMessage?: string
@@ -10,30 +11,30 @@ export interface TextareaControlProps extends React.ComponentProps<'textarea'> {
   isRequired?: boolean
 }
 
-export const TextareaControl = React.forwardRef<
-  HTMLTextAreaElement,
-  TextareaControlProps
->((props, ref) => {
-  const {
-    className,
-    labelText,
-    helperText,
-    errorMessage,
-    isInvalid,
-    isRequired,
-    ...restProps
-  } = props
+export const TextareaControl: React.ElementType<TextareaControlProps> =
+  React.forwardRef<HTMLTextAreaElement, TextareaControlProps>((props, ref) => {
+    const {
+      className,
+      labelText,
+      helperText,
+      errorMessage,
+      isInvalid,
+      isRequired,
+      ...restProps
+    } = props
 
-  return (
-    <LabelControl
-      className={className}
-      labelText={labelText}
-      helperText={helperText}
-      errorMessage={errorMessage}
-      isInvalid={isInvalid}
-      isRequired={isRequired}
-    >
-      <Textarea ref={ref} {...restProps} />
-    </LabelControl>
-  )
-}) as React.ElementType
+    return (
+      <LabelControl
+        className={className}
+        labelText={labelText}
+        helperText={helperText}
+        errorMessage={errorMessage}
+        isInvalid={isInvalid}
+        isRequired={isRequired}
+      >
+        <Textarea ref={ref} {...restProps} />
+      </LabelControl>
+    )
+  })
+
+TextareaControl.displayName = 'TextareaControl'

package/packages/forms/src/components/controlled/index.ts

@@ -1,5 +1,4 @@
 export { CheckboxGroup } from './CheckboxGroup'
 export { RadioGroup } from './RadioGroup'
 export { SelectControl } from './SelectControl'
-export { InputControl } from './InputControl'
 export { TextareaControl } from './TextareaControl'

package/packages/forms/src/index.ts

@@ -12,6 +12,5 @@ export {
   CheckboxGroup,
   RadioGroup,
   SelectControl,
-  InputControl,
   TextareaControl
 } from './components/controlled'

package/packages/forms/tsconfig.node.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "node",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]

package/packages/forms/vite.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, 'src', 'index.ts'),
       formats: ['es', 'cjs'],
-      fileName: (ext) => `index.${ext}.js`
+      fileName: (ext: string) => `index.${ext}.js`
     },
     rollupOptions: {
       external: [...Object.keys(peerDependencies)]

package/packages/forms/dist/components/controlled/InputControl.d.ts

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

package/packages/forms/dist/components/controlled/InputControl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputControl.d.ts","sourceRoot":"","sources":["../../../src/components/controlled/InputControl.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,wBA0BF,CAAA"}

package/packages/forms/src/components/controlled/InputControl.tsx

@@ -1,39 +0,0 @@
-import React from 'react'
-import { LabelControl } from '../LabelControl'
-import { Input } from '../Input'
-
-export interface InputControlProps extends React.ComponentProps<'input'> {
-  labelText: string
-  helperText?: string
-  errorMessage?: string
-  isInvalid?: boolean
-  isRequired?: boolean
-}
-
-export const InputControl = React.forwardRef<
-  HTMLInputElement,
-  InputControlProps
->((props, ref) => {
-  const {
-    className,
-    labelText,
-    helperText,
-    errorMessage,
-    isInvalid,
-    isRequired,
-    ...restProps
-  } = props
-
-  return (
-    <LabelControl
-      className={className}
-      labelText={labelText}
-      helperText={helperText}
-      errorMessage={errorMessage}
-      isInvalid={isInvalid}
-      isRequired={isRequired}
-    >
-      <Input ref={ref} {...restProps} />
-    </LabelControl>
-  )
-}) as React.ElementType