@sakura-ui/sakura-ui 0.1.3 → 0.1.5

package/README.md

@@ -11,6 +11,10 @@ or
 ```
 $ yarn add @sakura-ui/sakura-ui
 ```
+or
+```
+$ pnpm add @sakura-ui/core @sakura-ui/forms @sakura-ui/config
+```
 
 ## Configuration
 tailwind.config.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -13,9 +13,9 @@
     "packages"
   ],
   "dependencies": {
-    "@sakura-ui/core": "0.0.2",
-    "@sakura-ui/forms": "0.0.5",
-    "@sakura-ui/config": "0.0.10"
+    "@sakura-ui/config": "0.0.11",
+    "@sakura-ui/core": "0.0.4",
+    "@sakura-ui/forms": "0.0.6"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -23,6 +23,6 @@
     "tailwindcss": "^3.2.7"
   },
   "scripts": {
-    "build": "pnpm  --parallel --filter \"./**\" build"
+    "build": "pnpm --parallel --filter \"./**\" build"
   }
 }

package/packages/config/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@sakura-ui/config",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
@@ -36,16 +35,16 @@
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.14.1",
-    "autoprefixer": "^10.4.13",
-    "jest": "^29.4.3",
+    "@types/jest": "^29.5.1",
+    "@types/node": "^18.16.15",
+    "autoprefixer": "^10.4.14",
+    "jest": "^29.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7",
-    "ts-jest": "^29.0.5",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.2",
+    "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "typescript": "^5.0.4",
+    "vite": "^4.3.9"
   }
 }

package/packages/config/tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "useDefineForClassFields": true,
     "module": "ESNext",
     "lib": ["ESNext", "DOM"],
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
+    "useDefineForClassFields": true,
     "strict": true,
     "resolveJsonModule": true,
     "isolatedModules": true,

package/packages/core/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
@@ -40,22 +39,22 @@
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.14.1",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "autoprefixer": "^10.4.13",
-    "jest": "^29.4.3",
+    "@types/jest": "^29.5.1",
+    "@types/node": "^18.16.15",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "@vitejs/plugin-react-swc": "^3.3.1",
+    "autoprefixer": "^10.4.14",
+    "jest": "^29.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.23",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.2.7",
-    "ts-jest": "^29.0.5",
+    "tailwindcss": "^3.3.2",
+    "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
-    "tsc-alias": "^1.8.2",
-    "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "tsc-alias": "^1.8.6",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.9"
   }
 }

package/packages/core/src/components/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils'
+import { cx } from '../utils/class'
 
 export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
   variant?: 'primary' | 'secondary'
@@ -14,51 +14,39 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const align = textAlign ?? 'center'
 
     const style = `
-    inline-block
-    p-4
-    text-base
-    font-bold
-    rounded-lg
-    text-${align}
-    cursor-pointer
-    whitespace-nowrap
-  `
+      inline-block
+      p-4
+      text-base
+      font-bold
+      rounded-lg
+      text-${align}
+      cursor-pointer
+      whitespace-nowrap
+      border
+      border-solid
+      border-sea-600
+      focus:outline
+      focus:outline-2
+      focus:outline-wood-500
+      disabled:border-sumi-500
+      disabled:cursor-not-allowed
+    `
 
     const primary = `
-    text-white-1000
-    border
-    border-solid
-    border-sea-600
-    bg-sea-600
-    hover:bg-sea-800
-    active:bg-sea-800
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-500
-    disabled:bg-sumi-500
-    disabled:text-white-1000
-    disabled:border
-    disabled:border-solid
-    disabled:border-sumi-500
-    disabled:cursor-not-allowed
-  `
+      text-white-1000
+      bg-sea-600
+      hover:enabled:bg-sea-700
+      active:enabled:bg-sea-800
+      disabled:bg-sumi-500
+      disabled:text-white-1000
+    `
     const secondary = `
-    text-sea-600
-    border
-    border-solid
-    border-sea-600
-    hover:bg-sea-100
-    active:bg-sea-100
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-500
-    disabled:hover:bg-white-1000
-    disabled:text-sumi-500
-    disabled:border
-    disabled:border-solid
-    disabled:border-sumi-500
-    disabled:cursor-not-allowed
-  `
+      text-sea-600
+      bg-transparent
+      hover:enabled:bg-sea-100
+      active:enabled:bg-sea-200
+      disabled:text-sumi-500
+    `
 
     const styles = {
       primary: primary,

package/packages/core/src/components/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { cx } from '../utils'
+import { cx } from '../utils/class'
 
-export interface CardProps extends React.ComponentProps<'div'> {}
+export interface CardProps extends React.ComponentProps<'section'> {}
 
 export const Card = (props: CardProps) => {
   const { className, children, ...restProps } = props
@@ -15,8 +15,8 @@ export const Card = (props: CardProps) => {
     p-4
   `
   return (
-    <div className={cx(style, props.className)} {...restProps}>
+    <section className={cx(style, props.className)} {...restProps}>
       {props.children}
-    </div>
+    </section>
   )
 }

package/packages/core/src/components/Code.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils'
+import { cx } from '../utils/class'
 
 export interface CodeProps extends React.ComponentProps<'code'> {}
 

package/packages/core/src/components/Heading.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils'
+import { cx } from '../utils/class'
 
 export interface HeadingProps extends React.ComponentProps<'h1'> {}
 

package/packages/core/src/components/Icon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils'
+import { cx } from '../utils/class'
 
 export interface IconProps extends React.ComponentProps<'span'> {
   icon: string
@@ -9,14 +9,14 @@ export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
   const { className, icon, ...restProps } = props
 
   const style = `
-  inline-block
-  align-middle
-  font-icon
-  text-2xl
-  font-light
-  leading-none
-  antialiased
-  mb-1
+    inline-block
+    align-middle
+    font-icon
+    text-2xl
+    font-light
+    leading-none
+    antialiased
+    mb-1
   `
 
   return (

package/packages/core/src/components/IconButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils'
+import { cx } from '../utils/class'
 
 export interface IconButtonProps extends React.ComponentProps<'button'> {
   variant?: 'primary' | 'secondary'
@@ -17,51 +17,38 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
     const align = 'center'
 
     const style = `
-    inline-block
-    p-4
-    text-base
-    font-bold
-    rounded-lg
-    text-${align}
-    cursor-pointer
-    whitespace-nowrap
-  `
+      inline-block
+      p-4
+      text-base
+      font-bold
+      rounded-lg
+      text-${align}
+      cursor-pointer
+      whitespace-nowrap
+      border
+      border-solid
+      border-sea-600
+      focus:outline
+      focus:outline-2
+      focus:outline-wood-500
+      disabled:border-sumi-500
+      disabled:cursor-not-allowed
+    `
 
     const primary = `
-    text-white-1000
-    border
-    border-solid
-    border-sea-600
-    bg-sea-600
-    hover:bg-sea-800
-    active:bg-sea-800
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-500
-    disabled:bg-sumi-500
-    disabled:text-white-1000
-    disabled:border
-    disabled:border-solid
-    disabled:border-sumi-500
-    disabled:cursor-not-allowed
-  `
+      text-white-1000
+      bg-sea-600
+      hover:enabled:bg-sea-700
+      active:enabled:bg-sea-800
+      disabled:bg-sumi-500
+      disabled:text-white-1000
+    `
     const secondary = `
-    text-sea-600
-    border
-    border-solid
-    border-sea-600
-    hover:bg-sea-100
-    active:bg-sea-100
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-500
-    disabled:hover:bg-white-1000
-    disabled:text-sumi-500
-    disabled:border
-    disabled:border-solid
-    disabled:border-sumi-500
-    disabled:cursor-not-allowed
-  `
+      text-sea-600
+      hover:enabled:bg-sea-100
+      active:enabled:bg-sea-200
+      disabled:text-sumi-500
+    `
 
     const styles = {
       primary: primary,
@@ -69,14 +56,14 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
     }
 
     const iconStyle = `
-    inline-block
-    align-middle
-    font-icon
-    text-2xl
-    font-light
-    leading-4
-    antialiased
-    mb-1
+      inline-block
+      align-middle
+      font-icon
+      text-2xl
+      font-light
+      leading-4
+      antialiased
+      mb-1
     `
 
     return (

package/packages/core/src/components/InfoCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { cx } from '../utils'
+import { cx } from '../utils/class'
 
-export interface InfoCardProps extends React.ComponentProps<'div'> {
+export interface InfoCardProps extends React.ComponentProps<'section'> {
   title?: string
 }
 
@@ -27,10 +27,18 @@ export const InfoCard = (props: InfoCardProps) => {
     pb-4
   `
 
+  const headingId = React.useId()
+
   return (
-    <div className={cx(style, className)} {...restProps}>
-      <h2 className={topStyle}>{title}</h2>
+    <section
+      aria-labelledby={headingId}
+      className={cx(style, className)}
+      {...restProps}
+    >
+      <h2 id={headingId} className={topStyle}>
+        {title}
+      </h2>
       <p className={bottmStyle}>{children}</p>
-    </div>
+    </section>
   )
 }

package/packages/core/src/components/Link.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import { cx } from '../utils'
-
-export interface LinkProps extends React.ComponentProps<'a'> {}
+import { cx } from '../utils/class'
 
 const getFileType = (url: string) => {
   const converted = url.toLowerCase()
@@ -30,44 +28,49 @@ const getFileType = (url: string) => {
   return null
 }
 
-export const Link = (props: LinkProps) => {
-  const { className, children, ...restProps } = props
-  const href = props.href ?? ''
-  const fileType = getFileType(href)
+export interface LinkProps extends React.ComponentProps<'a'> {}
 
-  const style = `
-    rounded-sm
-    cursor-pointer
-    text-sea-600
-    underline
-    underline-offset-[0.1em]
-    hover:text-sea-800
-    active:text-sea-800
-    visited:text-sea-900
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-500
-    disabled:border-sumi-500
-  `
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, ref) => {
+    const { className, children, ...restProps } = props
+    const href = props.href ?? ''
+    const fileType = getFileType(href)
 
-  if (href.startsWith('http')) {
+    const style = `
+      rounded-sm
+      cursor-pointer
+      text-sea-600
+      underline
+      underline-offset-[0.1em]
+      hover:text-sea-800
+      active:text-sea-800
+      visited:text-sea-900
+      focus:outline
+      focus:outline-2
+      focus:outline-wood-500
+      disabled:border-sumi-500
+    `
+
+    if (href.startsWith('http')) {
+      return (
+        <a
+          className={cx(style, className)}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          {...restProps}
+          ref={ref}
+        >
+          {children}
+          {fileType ? `（${fileType}）` : null}
+        </a>
+      )
+    }
     return (
-      <a
-        className={cx(style, className)}
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        {...restProps}
-      >
+      <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
         {children}
         {fileType ? `（${fileType}）` : null}
       </a>
     )
   }
-  return (
-    <a className={cx(style, className)} href={href} {...restProps}>
-      {children}
-      {fileType ? `（${fileType}）` : null}
-    </a>
-  )
-}
+)

package/packages/core/src/components/List.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils'
+import { cx } from '../utils/class'
 
 export interface UlProps extends React.ComponentProps<'ul'> {}
 

package/packages/core/src/components/Pre.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils'
+import { cx } from '../utils/class'
 
 export interface PreProps extends React.ComponentProps<'pre'> {}
 

package/packages/core/src/components/Table.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { cx } from '../utils'
+import { cx } from '../utils/class'
 
 export interface TableProps extends React.ComponentProps<'table'> {}
 
 const styleBorder = `
-    border
-    border-collapse
-    border-sumi-900
+  border
+  border-collapse
+  border-sumi-900
 `
 
 export const Table = (props: TableProps) => {

package/packages/core/tsconfig.node.json

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