@sakura-ui/sakura-ui 0.0.15 → 0.0.16

package/packages/forms/src/components/{CheckboxGroup.tsx → controlled/CheckboxGroup.tsx}

@@ -1,30 +1,26 @@
 import React from 'react'
-import { Checkbox } from './Checkbox'
+import { Checkbox } from '../Checkbox'
 import { InputItem } from './InputItem'
+import { cx } from '../../utils'
 
 export interface CheckboxGroupProps
   extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
   items: InputItem[]
   onChange: React.ChangeEventHandler<HTMLInputElement>
-  label?: string
+  label: string
 }
 
 export const CheckboxGroup = (props: CheckboxGroupProps) => {
-  const { items, onChange, label, className, children, ...newProps } = props
-  const groupName = 'checkbox group ' + Math.random() * 100000
+  const { items, onChange, label, className, ...newProps } = props
+  const groupName = `checkbox_group_${Math.random()}`
 
   return (
-    <fieldset {...newProps}>
-      {label && <legend>{label}</legend>}
+    <fieldset className={cx('mb-4', className)} {...newProps}>
+      <legend>{label}</legend>
       {items.map(({ label, value }, index) => {
         return (
           <div key={index}>
-            <Checkbox
-              className=""
-              name={groupName}
-              value={value}
-              onChange={onChange}
-            >
+            <Checkbox name={groupName} value={value} onChange={onChange}>
               {label}
             </Checkbox>
           </div>

package/packages/forms/src/components/{RadioGroup.tsx → controlled/RadioGroup.tsx}

@@ -1,26 +1,26 @@
 import React from 'react'
-import { Radio } from './Radio'
+import { Radio } from '../Radio'
 import { InputItem } from './InputItem'
+import { cx } from '../../utils'
 
 export interface RadioGroupProps
   extends Omit<React.ComponentProps<'fieldset'>, 'onChange'> {
   items: InputItem[]
   onChange: React.ChangeEventHandler<HTMLInputElement>
-  label?: string
+  label: string
 }
 
 export const RadioGroup = (props: RadioGroupProps) => {
-  const { items, onChange, label, className, children, ...newProps } = props
-  const groupName = 'radio group ' + Math.random() * 100000
+  const { items, onChange, label, className, ...newProps } = props
+  const groupName = `radio_group_${Math.random()}`
 
   return (
-    <fieldset {...newProps}>
-      {label && <legend>{label}</legend>}
+    <fieldset className={cx('mb-4', className)} {...newProps}>
+      <legend>{label}</legend>
       {items.map(({ label, value }, index) => {
         return (
           <div key={index}>
             <Radio
-              className=""
               name={groupName}
               value={value}
               onChange={onChange}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { cx } from '../../utils'
+import { Select as Atom } from '../Select'
+
+export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {
+  label: string
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  (props, ref) => {
+    const { label, className, ...newProps } = props
+
+    return (
+      <div className={cx('mb-4', className)}>
+        <label>
+          <div className="block mb-2">{label}</div>
+          <Atom ref={ref} {...newProps} />
+        </label>
+      </div>
+    )
+  }
+)

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { cx } from '../../utils'
+import { Text as Atom } from '../Text'
+
+export interface TextProps extends React.ComponentPropsWithoutRef<'input'> {
+  label: string
+}
+
+export const Text = React.forwardRef<HTMLInputElement, TextProps>(
+  (props, ref) => {
+    const { label, className, ...newProps } = props
+
+    return (
+      <div className={cx('mb-4', className)}>
+        <label>
+          <div className="block mb-2">{label}</div>
+          <Atom ref={ref} {...newProps} />
+        </label>
+      </div>
+    )
+  }
+)

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { cx } from '../../utils'
+import { Textarea as Atom } from '../Textarea'
+
+export interface TextareaProps
+  extends React.ComponentPropsWithoutRef<'textarea'> {
+  label: string
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const { label, className, ...newProps } = props
+
+    return (
+      <div className={cx('mb-4', className)}>
+        <label>
+          <div className="block mb-2">{label}</div>
+          <Atom ref={ref} {...newProps} />
+        </label>
+      </div>
+    )
+  }
+)

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

@@ -0,0 +1,5 @@
+export { CheckboxGroup } from './CheckboxGroup'
+export { RadioGroup } from './RadioGroup'
+export { Select } from './Select'
+export { Text } from './Text'
+export { Textarea } from './Textarea'

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

@@ -1,7 +1,5 @@
 export { Checkbox } from './Checkbox'
-export { CheckboxGroup } from './CheckboxGroup'
 export { Radio } from './Radio'
-export { RadioGroup } from './RadioGroup'
 export { Select } from './Select'
 export { Text } from './Text'
 export { Textarea } from './Textarea'

package/packages/forms/src/index.ts

@@ -1,9 +1,9 @@
+export { Checkbox, Radio, Select, Text, Textarea } from './components'
+
 export {
-  Checkbox,
   CheckboxGroup,
-  Radio,
   RadioGroup,
-  Select,
-  Text,
-  Textarea
-} from './components'
+  Select as SelectControl,
+  Text as TextControl,
+  Textarea as TextareaControl
+} from './components/controlled'

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

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC;IAC1D,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBAuBtD,CAAA"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"InputItem.d.ts","sourceRoot":"","sources":["../../src/components/InputItem.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC;IAC1D,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,UAAU,UAAW,eAAe,gBAwBhD,CAAA"}