@sakura-ui/sakura-ui 0.0.8 → 0.0.10

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 (63) hide show
  1. package/README.md +49 -2
  2. package/examples/README.md +14 -0
  3. package/examples/index.html +4 -3
  4. package/examples/package.json +25 -0
  5. package/examples/postcss.config.js +6 -0
  6. package/examples/public/vite.svg +1 -0
  7. package/examples/src/App.tsx +56 -0
  8. package/examples/src/main.css +3 -0
  9. package/examples/src/{index.tsx → main.tsx} +2 -3
  10. package/examples/src/vite-env.d.ts +1 -0
  11. package/examples/tailwind.config.js +9 -0
  12. package/examples/tsconfig.json +21 -0
  13. package/examples/tsconfig.node.json +9 -0
  14. package/examples/vite.config.ts +7 -0
  15. package/package.json +3 -3
  16. package/packages/react/src/components/Button.tsx +6 -3
  17. package/packages/react/src/components/Card.tsx +2 -2
  18. package/packages/react/src/components/Checkbox.tsx +56 -0
  19. package/packages/react/src/components/Code.tsx +1 -1
  20. package/packages/react/src/components/Heading.tsx +1 -1
  21. package/packages/react/src/components/IconButton.tsx +5 -54
  22. package/packages/react/src/components/InfoCard.tsx +2 -2
  23. package/packages/react/src/components/Link.tsx +1 -1
  24. package/packages/react/src/components/List.tsx +2 -2
  25. package/packages/react/src/components/Pre.tsx +1 -1
  26. package/packages/react/src/components/Radio.tsx +4 -1
  27. package/packages/react/src/components/Select.tsx +2 -2
  28. package/packages/react/src/components/Table.tsx +7 -7
  29. package/packages/react/src/components/Text.tsx +2 -2
  30. package/packages/react/src/components/Textarea.tsx +3 -2
  31. package/packages/react/src/components/index.ts +1 -0
  32. package/packages/react/src/index.ts +1 -0
  33. package/packages/config/coverage/clover.xml +0 -12
  34. package/packages/config/coverage/coverage-final.json +0 -2
  35. package/packages/config/coverage/lcov-report/base.css +0 -224
  36. package/packages/config/coverage/lcov-report/block-navigation.js +0 -87
  37. package/packages/config/coverage/lcov-report/favicon.png +0 -0
  38. package/packages/config/coverage/lcov-report/index.html +0 -116
  39. package/packages/config/coverage/lcov-report/index.ts.html +0 -385
  40. package/packages/config/coverage/lcov-report/prettify.css +0 -1
  41. package/packages/config/coverage/lcov-report/prettify.js +0 -2
  42. package/packages/config/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  43. package/packages/config/coverage/lcov-report/sorter.js +0 -196
  44. package/packages/config/coverage/lcov.info +0 -14
  45. package/src/components/Button.tsx +0 -72
  46. package/src/components/Card.tsx +0 -22
  47. package/src/components/Code.tsx +0 -19
  48. package/src/components/Heading.tsx +0 -109
  49. package/src/components/IconButton.tsx +0 -71
  50. package/src/components/InfoCard.tsx +0 -36
  51. package/src/components/Link.tsx +0 -73
  52. package/src/components/List.tsx +0 -38
  53. package/src/components/Pre.tsx +0 -22
  54. package/src/components/Radio.tsx +0 -39
  55. package/src/components/RadioGroup.tsx +0 -38
  56. package/src/components/Select.tsx +0 -41
  57. package/src/components/Table.tsx +0 -111
  58. package/src/components/Text.tsx +0 -35
  59. package/src/components/Textarea.tsx +0 -32
  60. package/src/components/index.ts +0 -15
  61. package/src/configs/index.ts +0 -92
  62. package/src/index.ts +0 -59
  63. package/src/utils/index.ts +0 -1
package/README.md CHANGED
@@ -3,11 +3,58 @@ Sakura UI - UI components built with Tailwind CSS for React.
3
3
 
4
4
  ## Install
5
5
  ```
6
- $ npm install @glassonion1/sakura-ui
6
+ $ npm install @sakura-ui/sakura-ui
7
7
  ```
8
8
  or
9
9
  ```
10
- $ yarn add @glassonion1/sakura-ui
10
+ $ yarn add @sakura-ui/sakura-ui
11
+ ```
12
+
13
+ ## Configuration
14
+ tailwind.config.js
15
+ ```
16
+ module.exports = {
17
+ mode: 'jit',
18
+ content: [
19
+ './src/pages/**/*.{jsx,tsx}',
20
+ './node_modules/@sakura-ui/sakura-ui/packages/react/**/*.{jsx,tsx}'
21
+ ],
22
+ plugins: [require('@sakura-ui/config')]
23
+ }
24
+ ```
25
+
26
+ ## Usage
27
+ ```ts
28
+ import { useState } from 'react'
29
+ import { H1, H2, H3, H4, H5, H6, Button } from '@sakura-ui/react'
30
+
31
+ const App = () => {
32
+ const [count, setCount] = useState(0)
33
+
34
+ return (
35
+ <div>
36
+ <H1>SakuraUI Heading1</H1>
37
+ <H2>SakuraUI Heading2</H2>
38
+ <H3>SakuraUI Heading3</H3>
39
+ <H4>SakuraUI Heading4</H4>
40
+ <H5>SakuraUI Heading5</H5>
41
+ <H6>SakuraUI Heading6</H6>
42
+ <div>
43
+ <Button onClick={() => setCount((count) => count + 1)}>
44
+ count is {count}
45
+ </Button>
46
+ <Button
47
+ variant="secondary"
48
+ onClick={() => setCount((count) => count + 1)}
49
+ >
50
+ count is {count}
51
+ </Button>
52
+ </div>
53
+ </div>
54
+ )
55
+ }
56
+
57
+ export default App
11
58
  ```
12
59
 
13
60
  ## Standard Components
package/examples/README.md ADDED
@@ -0,0 +1,14 @@
1
+ # SakuraUI examples
2
+
3
+ ## Install
4
+ ```
5
+ $ pnpm install
6
+ ```
7
+
8
+ ## Run
9
+ ```
10
+ $ pnpm dev
11
+ ```
12
+
13
+ ## Browse
14
+ http://localhost:5173/
package/examples/index.html CHANGED
@@ -2,12 +2,13 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <link rel="stylesheet" href="/src/main.css" />
5
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Sakura UI Example</title>
7
- <link href="../../dist/style.css" rel="stylesheet" />
8
+ <title>Vite + React + TS</title>
8
9
  </head>
9
10
  <body>
10
11
  <div id="root"></div>
11
- <script type="module" src="./src/index.tsx"></script>
12
+ <script type="module" src="/src/main.tsx"></script>
12
13
  </body>
13
14
  </html>
package/examples/package.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "name": "examples",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "tsc && vite build",
8
+ "preview": "vite preview"
9
+ },
10
+ "dependencies": {
11
+ "@sakura-ui/sakura-ui": "workspace:^0.0.9",
12
+ "react": "^18.2.0",
13
+ "react-dom": "^18.2.0"
14
+ },
15
+ "devDependencies": {
16
+ "@types/react": "^18.0.27",
17
+ "@types/react-dom": "^18.0.10",
18
+ "@vitejs/plugin-react-swc": "^3.0.0",
19
+ "autoprefixer": "^10.4.13",
20
+ "postcss": "^8.4.21",
21
+ "tailwindcss": "^3.2.7",
22
+ "typescript": "^4.9.3",
23
+ "vite": "^4.1.4"
24
+ }
25
+ }
package/examples/postcss.config.js ADDED
@@ -0,0 +1,6 @@
1
+ module.exports = {
2
+ plugins: {
3
+ tailwindcss: {},
4
+ autoprefixer: {},
5
+ },
6
+ }
package/examples/public/vite.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/examples/src/App.tsx ADDED
@@ -0,0 +1,56 @@
1
+ import { useState } from 'react'
2
+ import {
3
+ H1,
4
+ H2,
5
+ H3,
6
+ H4,
7
+ H5,
8
+ H6,
9
+ Button,
10
+ Checkbox,
11
+ Radio,
12
+ Text,
13
+ Textarea
14
+ } from '../../packages/react/src'
15
+
16
+ const App = () => {
17
+ const [count, setCount] = useState(0)
18
+
19
+ return (
20
+ <div className="text-sumi-900 text-base">
21
+ <H1>SakuraUI Heading1</H1>
22
+ <H2>SakuraUI Heading2</H2>
23
+ <H3>SakuraUI Heading3</H3>
24
+ <H4>SakuraUI Heading4</H4>
25
+ <H5>SakuraUI Heading5</H5>
26
+ <H6>SakuraUI Heading6</H6>
27
+ <div>
28
+ <Button onClick={() => setCount((count) => count + 1)}>
29
+ count is {count}
30
+ </Button>
31
+ <Button
32
+ variant="secondary"
33
+ onClick={() => setCount((count) => count + 1)}
34
+ >
35
+ count is {count}
36
+ </Button>
37
+ <Button onClick={() => setCount((count) => count + 1)} disabled>
38
+ count is {count}
39
+ </Button>
40
+ <Button
41
+ variant="secondary"
42
+ onClick={() => setCount((count) => count + 1)}
43
+ disabled
44
+ >
45
+ count is {count}
46
+ </Button>
47
+ <Radio name="sample">ラジオ1</Radio>
48
+ <Radio name="sample">ラジオ2</Radio>
49
+ <Checkbox>選択肢1</Checkbox>
50
+ <Checkbox>選択肢2</Checkbox>
51
+ </div>
52
+ </div>
53
+ )
54
+ }
55
+
56
+ export default App
package/examples/src/main.css ADDED
@@ -0,0 +1,3 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
package/examples/src/{index.tsx → main.tsx} RENAMED
@@ -1,10 +1,9 @@
1
1
  import React from 'react'
2
2
  import ReactDOM from 'react-dom/client'
3
-
4
- import { Button } from '../../src'
3
+ import App from './App'
5
4
 
6
5
  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7
6
  <React.StrictMode>
8
- <Button>Test</Button>
7
+ <App />
9
8
  </React.StrictMode>
10
9
  )
package/examples/src/vite-env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
package/examples/tailwind.config.js ADDED
@@ -0,0 +1,9 @@
1
+ module.exports = {
2
+ mode: 'jit',
3
+ content: [
4
+ './index.html',
5
+ './src/**/*.{jsx,tsx}',
6
+ './node_modules/@sakura-ui/sakura-ui/packages/react/**/*.{jsx,tsx}'
7
+ ],
8
+ plugins: [require('@sakura-ui/config')]
9
+ }
package/examples/tsconfig.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ESNext",
4
+ "useDefineForClassFields": true,
5
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
6
+ "allowJs": false,
7
+ "skipLibCheck": true,
8
+ "esModuleInterop": false,
9
+ "allowSyntheticDefaultImports": true,
10
+ "strict": true,
11
+ "forceConsistentCasingInFileNames": true,
12
+ "module": "ESNext",
13
+ "moduleResolution": "Node",
14
+ "resolveJsonModule": true,
15
+ "isolatedModules": true,
16
+ "noEmit": true,
17
+ "jsx": "react-jsx"
18
+ },
19
+ "include": ["src"],
20
+ "references": [{ "path": "./tsconfig.node.json" }]
21
+ }
package/examples/tsconfig.node.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true,
4
+ "module": "ESNext",
5
+ "moduleResolution": "Node",
6
+ "allowSyntheticDefaultImports": true
7
+ },
8
+ "include": ["vite.config.ts"]
9
+ }
package/examples/vite.config.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { defineConfig } from 'vite'
2
+ import react from '@vitejs/plugin-react-swc'
3
+
4
+ // https://vitejs.dev/config/
5
+ export default defineConfig({
6
+ plugins: [react()],
7
+ })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sakura-ui/sakura-ui",
3
- "version": "0.0.8",
3
+ "version": "0.0.10",
4
4
  "keywords": [],
5
5
  "author": "glassonion1",
6
6
  "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -10,8 +10,8 @@
10
10
  },
11
11
  "license": "MIT",
12
12
  "dependencies": {
13
- "@sakura-ui/config": "0.0.2",
14
- "@sakura-ui/react": "0.0.1"
13
+ "@sakura-ui/react": "0.0.1",
14
+ "@sakura-ui/config": "0.0.2"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": "^18.2.0",
package/packages/react/src/components/Button.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
4
+ export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
5
5
  variant?: 'primary' | 'secondary'
6
6
  textAlign?: 'left' | 'right' | 'center'
7
7
  }
@@ -37,8 +37,10 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
37
37
  disabled:border
38
38
  disabled:border-solid
39
39
  disabled:border-sumi-500
40
+ disabled:cursor-not-allowed
40
41
  `
41
42
  const secondary = `
43
+ text-sea-600
42
44
  border
43
45
  border-solid
44
46
  border-sea-600
@@ -47,11 +49,12 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
47
49
  focus:outline
48
50
  focus:outline-2
49
51
  focus:outline-wood-500
50
- disabled:bg-sumi-500
51
- disabled:text-white-1000
52
+ disabled:hover:bg-white-1000
53
+ disabled:text-sumi-500
52
54
  disabled:border
53
55
  disabled:border-solid
54
56
  disabled:border-sumi-500
57
+ disabled:cursor-not-allowed
55
58
  `
56
59
 
57
60
  const styles = {
package/packages/react/src/components/Card.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type Props = React.ComponentProps<'div'>
4
+ export interface CardProps extends React.ComponentProps<'div'> {}
5
5
 
6
- export const Card = (props: Props) => {
6
+ export const Card = (props: CardProps) => {
7
7
  const { className, children, ...newProps } = props
8
8
 
9
9
  const style = `
package/packages/react/src/components/Checkbox.tsx ADDED
@@ -0,0 +1,56 @@
1
+ import React from 'react'
2
+ import { cx } from '../utils'
3
+
4
+ export interface CheckboxProps extends React.ComponentProps<'input'> {}
5
+
6
+ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
7
+ (props, ref) => {
8
+ const { className, children, ...newProps } = props
9
+
10
+ const style = `
11
+ flex
12
+ items-center
13
+ text-sm
14
+ cursor-pointer
15
+ py-2
16
+ `
17
+ const styleInput = `
18
+ hidden
19
+ peer
20
+ `
21
+
22
+ const styleCheck = `
23
+ inline-block
24
+ bg-clip-content
25
+ w-6 h-6
26
+ ml-1
27
+ mr-2
28
+ rounded
29
+ border
30
+ border-solid
31
+ border-sumi-900
32
+ peer-checked:bg-sea-600
33
+ peer-checked:border-none
34
+ `
35
+
36
+ return (
37
+ <label htmlFor={newProps.id} className={cx(style, className)}>
38
+ <input className={styleInput} type="checkbox" {...newProps} ref={ref} />
39
+ <span className={styleCheck}>
40
+ <svg
41
+ xmlns="http://www.w3.org/2000/svg"
42
+ width="w-6"
43
+ height="w-6"
44
+ viewBox="0 0 24 24"
45
+ >
46
+ <path
47
+ d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
48
+ fill="#fff"
49
+ />
50
+ </svg>
51
+ </span>
52
+ {children}
53
+ </label>
54
+ )
55
+ }
56
+ )
package/packages/react/src/components/Code.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type CodeProps = React.ComponentProps<'code'>
4
+ export interface CodeProps extends React.ComponentProps<'code'> {}
5
5
 
6
6
  export const Code = (props: CodeProps) => {
7
7
  const { className, children, ...newProps } = props
package/packages/react/src/components/Heading.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type HeadingProps = React.ComponentProps<'h1'>
4
+ export interface HeadingProps extends React.ComponentProps<'h1'> {}
5
5
 
6
6
  const common = `
7
7
  font-bold
package/packages/react/src/components/IconButton.tsx CHANGED
@@ -1,71 +1,22 @@
1
1
  import React from 'react'
2
- import { cx } from '../utils'
2
+ import { Button } from './Button'
3
3
 
4
- export type IconButtonProps = React.ComponentProps<'button'> & {
4
+ export interface IconButtonProps extends React.ComponentProps<'button'> {
5
5
  variant?: 'primary' | 'secondary'
6
6
  icon: string
7
7
  }
8
8
 
9
9
  export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
10
10
  (props, ref) => {
11
- const { className, children, icon, variant, ...newProps } = props
11
+ const { children, icon, ...newProps } = props
12
12
 
13
13
  const align = 'center'
14
14
 
15
- const style = `
16
- inline-block
17
- p-4
18
- text-base
19
- font-bold
20
- rounded-lg
21
- text-${align}
22
- cursor-pointer
23
- `
24
-
25
- const primary = `
26
- text-white-1000
27
- bg-sea-600
28
- hover:bg-sea-800
29
- active:bg-sea-800
30
- focus:outline
31
- focus:outline-2
32
- focus:outline-wood-500
33
- disabled:bg-sumi-500
34
- disabled:text-white-1000
35
- disabled:border
36
- disabled:border-solid
37
- disabled:border-sumi-500
38
- `
39
- const secondary = `
40
- border
41
- border-solid
42
- border-sea-600
43
- hover:bg-sea-100
44
- active:bg-sea-100
45
- focus:outline
46
- focus:outline-2
47
- focus:outline-wood-500
48
- disabled:bg-sumi-500
49
- disabled:text-white-1000
50
- disabled:border
51
- disabled:border-solid
52
- disabled:border-sumi-500
53
- `
54
-
55
- const styles = {
56
- primary: primary,
57
- secondary: secondary
58
- }
59
-
60
15
  return (
61
- <button
62
- className={cx(style, styles[variant ?? 'primary'], className)}
63
- {...newProps}
64
- ref={ref}
65
- >
16
+ <Button textAlign={align} {...newProps} ref={ref}>
66
17
  <img src={`/icons/${props.icon}.svg`} alt={props.icon} width="24" />
67
18
  {children}
68
- </button>
19
+ </Button>
69
20
  )
70
21
  }
71
22
  )
package/packages/react/src/components/InfoCard.tsx CHANGED
@@ -1,11 +1,11 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type Props = React.ComponentProps<'div'> & {
4
+ export interface InfoCardProps extends React.ComponentProps<'div'> {
5
5
  title?: string
6
6
  }
7
7
 
8
- export const InfoCard = (props: Props) => {
8
+ export const InfoCard = (props: InfoCardProps) => {
9
9
  const { className, children, ...newProps } = props
10
10
 
11
11
  const style = `
package/packages/react/src/components/Link.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type LinkProps = React.ComponentProps<'a'>
4
+ export interface LinkProps extends React.ComponentProps<'a'> {}
5
5
 
6
6
  const getFileType = (url: string) => {
7
7
  const converted = url.toLowerCase()
package/packages/react/src/components/List.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type UlProps = React.ComponentProps<'ul'>
4
+ export interface UlProps extends React.ComponentProps<'ul'> {}
5
5
 
6
6
  export const Ul = (props: UlProps) => {
7
7
  const { className, children, ...newprops } = props
@@ -19,7 +19,7 @@ export const Ul = (props: UlProps) => {
19
19
  )
20
20
  }
21
21
 
22
- export type OlProps = React.ComponentProps<'ol'>
22
+ export interface OlProps extends React.ComponentProps<'ol'> {}
23
23
 
24
24
  export const Ol = (props: OlProps) => {
25
25
  const { className, children, ...newprops } = props
package/packages/react/src/components/Pre.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type PreProps = React.ComponentProps<'pre'>
4
+ export interface PreProps extends React.ComponentProps<'pre'> {}
5
5
 
6
6
  export const Pre = (props: PreProps) => {
7
7
  const { className, children, ...newProps } = props
package/packages/react/src/components/Radio.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type Props = React.ComponentProps<'input'> & {}
4
+ export interface Props extends React.ComponentProps<'input'> {}
5
5
 
6
6
  export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
7
7
  const { className, children, ...newProps } = props
@@ -11,6 +11,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
11
11
  items-center
12
12
  text-sm
13
13
  cursor-pointer
14
+ py-2
14
15
  `
15
16
  const styleInput = `
16
17
  hidden
@@ -21,6 +22,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
21
22
  inline-block
22
23
  bg-clip-content
23
24
  w-6 h-6
25
+ ml-1
24
26
  mr-2
25
27
  p-1
26
28
  rounded-full
@@ -28,6 +30,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
28
30
  border-solid
29
31
  border-sumi-900
30
32
  peer-checked:bg-sea-600
33
+ peer-checked:border-sea-600
31
34
  `
32
35
  return (
33
36
  <label htmlFor={newProps.id} className={cx(style, className)}>
package/packages/react/src/components/Select.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type Props = React.ComponentPropsWithoutRef<'select'>
4
+ export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {}
5
5
 
6
- export const Select = React.forwardRef<HTMLSelectElement, Props>(
6
+ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
7
7
  (props, ref) => {
8
8
  const { className, children, ...newProps } = props
9
9
 
package/packages/react/src/components/Table.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type TableProps = React.ComponentProps<'table'>
4
+ export interface TableProps extends React.ComponentProps<'table'> {}
5
5
 
6
6
  const styleBorder = `
7
7
  border
@@ -26,7 +26,7 @@ export const Table = (props: TableProps) => {
26
26
  )
27
27
  }
28
28
 
29
- export type CaptionProps = React.ComponentProps<'caption'>
29
+ export interface CaptionProps extends React.ComponentProps<'caption'> {}
30
30
 
31
31
  export const Caption = (props: CaptionProps) => {
32
32
  const { className, children, ...newprops } = props
@@ -39,7 +39,7 @@ export const Caption = (props: CaptionProps) => {
39
39
  )
40
40
  }
41
41
 
42
- export type TheadProps = React.ComponentProps<'thead'>
42
+ export interface TheadProps extends React.ComponentProps<'thead'> {}
43
43
 
44
44
  export const Thead = (props: TheadProps) => {
45
45
  const { className, children, ...newprops } = props
@@ -51,7 +51,7 @@ export const Thead = (props: TheadProps) => {
51
51
  )
52
52
  }
53
53
 
54
- export type TbodyProps = React.ComponentProps<'tbody'>
54
+ export interface TbodyProps extends React.ComponentProps<'tbody'> {}
55
55
 
56
56
  export const Tbody = (props: TbodyProps) => {
57
57
  const { className, children, ...newprops } = props
@@ -63,7 +63,7 @@ export const Tbody = (props: TbodyProps) => {
63
63
  )
64
64
  }
65
65
 
66
- export type ThProps = React.ComponentProps<'th'>
66
+ export interface ThProps extends React.ComponentProps<'th'> {}
67
67
 
68
68
  export const Th = (props: ThProps) => {
69
69
  const { className, children, ...newprops } = props
@@ -80,7 +80,7 @@ export const Th = (props: ThProps) => {
80
80
  )
81
81
  }
82
82
 
83
- export type TrProps = React.ComponentProps<'tr'>
83
+ export interface TrProps extends React.ComponentProps<'tr'> {}
84
84
 
85
85
  export const Tr = (props: TrProps) => {
86
86
  const { className, children, ...newprops } = props
@@ -94,7 +94,7 @@ export const Tr = (props: TrProps) => {
94
94
  )
95
95
  }
96
96
 
97
- export type TdProps = React.ComponentProps<'td'>
97
+ export interface TdProps extends React.ComponentProps<'td'> {}
98
98
 
99
99
  export const Td = (props: TdProps) => {
100
100
  const { className, children, ...newprops } = props
package/packages/react/src/components/Text.tsx CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react'
2
2
  import { cx } from '../utils'
3
3
 
4
- export type TextProps = React.ComponentPropsWithoutRef<'input'>
4
+ export interface TextProps extends React.ComponentPropsWithoutRef<'input'> {}
5
5
 
6
6
  export const Text = React.forwardRef<HTMLInputElement, TextProps>(
7
- ({ ...props }, ref) => {
7
+ (props, ref) => {
8
8
  const { className, ...newProps } = props
9
9
 
10
10
  const style = `