@sakura-ui/sakura-ui 0.1.16 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.16",
+  "version": "0.1.19",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -24,5 +24,20 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.2.7"
+  },
+  "devDependencies": {
+    "@types/node": "^18.16.19",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
+    "npm-run-all2": "^6.1.2",
+    "rimraf": "^5.0.5",
+    "ts-node": "^10.9.1",
+    "tsc-alias": "^1.8.7",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.2",
+    "vitest": "^1.3.1"
   }
 }

package/packages/config/package.json

@@ -1,10 +1,22 @@
 {
   "name": "@sakura-ui/config",
-  "version": "0.1.5",
+  "version": "0.1.10",
+  "description": "",
+  "keywords": [],
+  "author": "glassonion1",
+  "homepage": "https://github.com/glassonion1/sakura-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
+    "directory": "packages/config"
+  },
+  "license": "MIT",
+  "type": "module",
   "main": "dist/index.cjs.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "require": "./dist/index.cjs.js",
       "import": "./dist/index.es.js"
     }
@@ -13,38 +25,22 @@
   "files": [
     "dist"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
+    "lint": "run-s lint:*",
+    "lint:eslint": "eslint . --ext .ts,.tsx --fix",
+    "lint:prettier": "prettier --write --ignore-path .gitignore './src/*.ts'",
+    "prebuild": "rimraf dist",
     "build": "run-p build:*",
     "build:scripts": "vite build",
-    "build:types": "tsc",
-    "test": "jest"
+    "build:types": "tsc && tsc-alias",
+    "test": "vitest"
   },
-  "keywords": [],
-  "author": "glassonion1",
-  "homepage": "https://github.com/glassonion1/sakura-ui",
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
-    "directory": "packages/config"
-  },
-  "license": "MIT",
   "peerDependencies": {
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.2",
-    "@types/node": "^18.16.19",
-    "autoprefixer": "^10.4.14",
-    "jest": "^29.6.1",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.25",
-    "tailwindcss": "^3.3.2",
-    "ts-jest": "^29.1.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.2"
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1"
   }
 }

package/packages/config/src/index.ts

@@ -1,7 +1,38 @@
 import plugin from 'tailwindcss/plugin'
 
+const booleans = [
+  'atomic',
+  'busy',
+  'checked',
+  'current',
+  'disabled',
+  'expanded',
+  'grabbed',
+  'haspopup',
+  'hidden',
+  'invalid',
+  'live',
+  'modal',
+  'multiline',
+  'multiselectable',
+  'pressed',
+  'readonly',
+  'required',
+  'selected'
+]
+
+const enumerables = {
+  autocomplete: ['both', 'inline', 'list', 'none'],
+  current: ['date', 'location', 'page', 'step', 'time'],
+  dropeffect: ['copy', 'execute', 'link', 'move', 'none', 'popup'],
+  haspopup: ['dialog', 'grid', 'listbox', 'menu', 'tree'],
+  orientation: ['horizontal', 'undefined', 'vertial'],
+  relevant: ['additions', 'all', 'removals', 'text'],
+  sort: ['ascending', 'descending', 'none', 'other']
+}
+
 const sakuraPlugin = plugin(
-  ({ addBase }) => {
+  ({ addBase, addVariant }) => {
     addBase({
       '@font-face': {
         fontFamily: 'Material Symbols Outlined',
@@ -9,6 +40,32 @@ const sakuraPlugin = plugin(
         fontStyle: 'normal'
       }
     })
+    const addAriaVariant = (name: string, value: string) => {
+      addVariant(name, `[${name}="${value}"]&`)
+      addVariant(`peer-${name}`, `:merge(.peer)[${name}="${value}"] ~ &`)
+      addVariant(`group-${name}`, `:merge(.group)[${name}="${value}"] &`)
+    }
+    const addAriaEnumVariant = (name: string, value: string) => {
+      addVariant(`${name}-${value}`, `[${name}="${value}"]&`)
+      addVariant(
+        `peer-${name}-${value}`,
+        `:merge(.peer)[${name}="${value}"] ~ &`
+      )
+      addVariant(
+        `group-${name}-${value}`,
+        `:merge(.group)[${name}="${value}"] &`
+      )
+    }
+
+    for (const attribute of booleans) {
+      addAriaVariant(`aria-${attribute}`, 'true')
+    }
+
+    for (const [attribute, values] of Object.entries(enumerables)) {
+      for (const value of values) {
+        addAriaEnumVariant(`aria-${attribute}`, value)
+      }
+    }
   },
   {
     theme: {
@@ -155,6 +212,14 @@ const sakuraPlugin = plugin(
               fontWeight: '700'
             }
           ],
+          'button-sm': [
+            '14px',
+            {
+              lineHeight: '14px',
+              letterSpacing: '0.04em',
+              fontWeight: '700'
+            }
+          ],
           label: [
             '14px',
             {

package/packages/config/tests/index.test.ts

@@ -1,7 +1,7 @@
 import sakuraPlugin from '../src'
 
 describe('run tests', () => {
-  it('tests the sakuraCOnfig', () => {
+  it('tests the sakuraConfig', () => {
     const config = {
       mode: 'jit',
       content: ['./src/components/**/*.{js,ts,jsx,tsx}'],

package/packages/config/tsconfig.json

@@ -1,21 +1,13 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
-    "moduleResolution": "node",
-    "useDefineForClassFields": true,
-    "strict": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "skipLibCheck": true,
-    "outDir": "dist",
-    "declaration": true,
-    "declarationMap": true
+    "declarationDir": "./dist/types",
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

package/packages/config/tsconfig.node.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "composite": true
+  },
+  "include": ["vite.config.ts"]
+}

package/packages/config/vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import { peerDependencies } from './package.json'
@@ -17,8 +18,9 @@ export default defineConfig({
     },
     rollupOptions: {
       external: [...Object.keys(peerDependencies)]
-    },
-    target: 'esnext',
-    sourcemap: true
+    }
+  },
+  test: {
+    globals: true
   }
 })

package/packages/core/package.json

@@ -1,11 +1,22 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.1.16",
+  "version": "0.1.33",
+  "description": "",
+  "keywords": [],
+  "author": "glassonion1",
+  "homepage": "https://github.com/glassonion1/sakura-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
+    "directory": "packages/core"
+  },
+  "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "require": "./dist/index.cjs.js",
       "import": "./dist/index.es.js"
     }
@@ -14,61 +25,33 @@
   "files": [
     "dist"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
-    "dev": "vite",
+    "lint": "run-s lint:*",
+    "lint:eslint": "eslint . --ext .ts,.tsx --fix",
+    "lint:prettier": "prettier --write --ignore-path .gitignore './src/*.ts'",
+    "prebuild": "rimraf dist",
     "build": "run-p build:*",
     "build:scripts": "vite build",
     "build:types": "tsc && tsc-alias",
-    "test": "jest",
-    "lint": "run-p lint:*",
-    "lint:prettier": "prettier --write .",
-    "lint:eslint": "eslint --ext \".ts,.tsx\" --fix src"
+    "test": "vitest"
   },
-  "keywords": [],
-  "author": "glassonion1",
-  "homepage": "https://github.com/glassonion1/sakura-ui",
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
-    "directory": "packages/core"
-  },
-  "license": "MIT",
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@jest/types": "^29.6.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.2",
-    "@types/node": "^18.16.19",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/testing-library__jest-dom": "^5.14.7",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.47.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.2.60",
+    "@types/react-dom": "^18.2.19",
+    "autoprefixer": "^10.4.17",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
-    "jest": "^29.6.1",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.25",
-    "prettier": "^3.0.2",
+    "jsdom": "^24.0.0",
+    "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.3.2",
-    "ts-jest": "^29.1.1",
-    "ts-node": "^10.9.1",
-    "tsc-alias": "^1.8.7",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.2"
+    "tailwindcss": "^3.4.1"
   }
 }

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

@@ -1,70 +1,37 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
+import { ComponentWithAs } from '../types/component'
+import { forwardRef } from '../libs/forward-ref'
+import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
 
-export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
+export interface ButtonProps {
   variant?: 'primary' | 'secondary'
-  textAlign?: 'left' | 'right' | 'center'
+  size?: 'lg' | 'md' | 'sm' | 'xs'
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+export const Button: ComponentWithAs<'button', ButtonProps> = forwardRef(
   (props, ref) => {
-    // Make sure that there is no problem even if className is specified on the side that uses the component
-    const { className, children, textAlign, variant, ...restProps } = props
-
-    const align = textAlign ?? 'center'
-
-    const style = `
-    select-none
-    inline-block
-    p-4
-    text-button
-    text-${align}
-    rounded-lg
-    cursor-pointer
-    whitespace-nowrap
-    border
-    border-solid
-    border-sea-800
-    active:enabled:border-sea-800/[.8]
-    hover:enabled:border-sea-800/[.85]
-    focus:outline
-    focus:outline-2
-    focus:outline-wood-600
-    disabled:border-sumi-500
-    disabled:cursor-not-allowed
-  `
-
-    const primary = `
-    text-white-1000
-    bg-sea-800
-    active:enabled:bg-sea-800/[.8]
-    hover:enabled:bg-sea-800/[.85]
-    disabled:bg-sumi-500
-    disabled:text-white-1000
-  `
-    const secondary = `
-    text-sea-800
-    bg-transparent
-    active:enabled:bg-sea-50/[.60]
-    hover:enabled:bg-sea-50
-    active:enabled:text-sea-800/[.85]
-    hover:enabled:text-sea-800/[.85]
-    disabled:text-sumi-500
-  `
-
-    const styles = {
-      primary: primary,
-      secondary: secondary
-    }
+    const {
+      as: Component = 'button',
+      variant = 'primary',
+      size = 'lg',
+      className,
+      children,
+      ...restProps
+    } = props
 
     return (
-      <button
-        className={cx(style, styles[variant ?? 'primary'], className)}
+      <Component
+        className={cx(
+          base,
+          getVariantStyle(variant),
+          getSizeStyle(size),
+          className
+        )}
         {...restProps}
         ref={ref}
       >
         {children}
-      </button>
+      </Component>
     )
   }
 )

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 interface IdContextType {
   id: string
@@ -23,8 +23,10 @@ export const Card = (props: CardProps) => {
     sm:rounded-3xl
     text-sumi-900
     overflow-hidden
-    flex
-    flex-col
+    px-6
+    py-4
+    flex flex-col
+    gap-2
   `
 
   return (
@@ -40,7 +42,24 @@ export const Card = (props: CardProps) => {
   )
 }
 
-export interface CardHeaderProps extends React.ComponentPropsWithoutRef<'h2'> {}
+export interface CardImgProps extends React.ComponentPropsWithoutRef<'img'> {}
+
+export const CardImg = (props: CardImgProps) => {
+  const { className, children, ...restProps } = props
+
+  const ctx = React.useContext(IdContext)
+
+  const style = `
+    object-cover
+    -px-6
+    -py-4
+  `
+
+  return <img id={ctx.id} className={cx(style, className)} {...restProps} />
+}
+
+export interface CardHeaderProps
+  extends React.ComponentPropsWithoutRef<'div'> {}
 
 export const CardHeader = (props: CardHeaderProps) => {
   const { className, children, ...restProps } = props
@@ -48,30 +67,24 @@ export const CardHeader = (props: CardHeaderProps) => {
   const ctx = React.useContext(IdContext)
 
   const style = `
-    py-6
-    px-6
-    text-h-xxs-m
-    sm:text-h-xxs
-    leading-none
+    text-base
+    font-medium
   `
 
   return (
-    <h2 id={ctx.id} className={cx(style, className)} {...restProps}>
+    <div id={ctx.id} className={cx(style, className)} {...restProps}>
       {children}
-    </h2>
+    </div>
   )
 }
 
-export interface CardBodyProps extends React.ComponentPropsWithoutRef<'p'> {}
+export interface CardBodyProps extends React.ComponentPropsWithoutRef<'div'> {}
 
 export const CardBody = (props: CardBodyProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    px-6
-    first:pt-6
-    pb-6
-    text-base
+    text-base-sm
   `
 
   return (
@@ -88,10 +101,7 @@ export const CardFooter = (props: CardFooterProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    mt-auto
-    px-6
-    first:pt-6
-    pb-6
+    text-base-sm
   `
 
   return (

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

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

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

@@ -1,12 +1,11 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface FaqProps extends React.ComponentPropsWithoutRef<'dl'> {}
 
 const headingStyle = `
   text-h-med-m
   sm:text-h-med
-  !leading-none
 `
 
 export const Faq = (props: FaqProps) => {
@@ -41,8 +40,7 @@ export const Question = (props: QuestionProps) => {
     flex
     flex-row
     gap-8
-    mt-10
-    first:mt-0
+    mt-8
   `
   return (
     <dt
@@ -75,7 +73,7 @@ export const Answer = (props: AnswerProps) => {
       itemType="https://schema.org/Answer"
       {...restProps}
     >
-      <span className={headingStyle} aria-hidden="true">
+      <span className={cx(headingStyle, '!leading-none')} aria-hidden="true">
         A
       </span>
       <span itemProp="text">{children}</span>

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

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

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

@@ -1,28 +1,33 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface IconProps extends React.ComponentPropsWithRef<'span'> {
   icon: string
+  srText?: string
 }
 
 export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
-  const { className, icon, ...restProps } = props
+  const { className, icon, srText, ...restProps } = props
 
   const style = `
-    inline-block
+    inline
     align-middle
     font-icon
-    text-2xl
-    font-light
-    leading-none
     antialiased
-    mb-1
   `
 
   return (
-    <span className={cx(style, className)} {...restProps} ref={ref}>
-      {icon}
-    </span>
+    <>
+      <span
+        aria-hidden="true"
+        className={cx(style, className)}
+        {...restProps}
+        ref={ref}
+      >
+        {icon}
+      </span>
+      <span className="sr-only">{srText}</span>
+    </>
   )
 })