@sakura-ui/sakura-ui 0.1.21 → 0.3.0

package/README.md

@@ -9,15 +9,20 @@ Sakura UI - UI components built with Tailwind CSS for React. Sakura UI is an uno
 
 ## Install
 ```
-$ npm install @sakura-ui/sakura-ui
+$ npm install @sakura-ui/core @sakura-ui/forms @sakura-ui/tailwind-theme-plugin @sakura-ui/markdown
 ```
 or
 ```
-$ yarn add @sakura-ui/sakura-ui
+$ yarn add @sakura-ui/core @sakura-ui/forms @sakura-ui/tailwind-theme-plugin @sakura-ui/markdown
 ```
 or
 ```
-$ pnpm add @sakura-ui/core @sakura-ui/forms @sakura-ui/config
+$ pnpm add @sakura-ui/core @sakura-ui/forms @sakura-ui/tailwind-theme-plugin @sakura-ui/markdown
+```
+
+### For React 18
+```
+$ pnpm add @sakura-ui/core@0.3.1 @sakura-ui/forms@0.2.2 @sakura-ui/tailwind-theme-plugin@0.2.2 @sakura-ui/markdown@0.0.17
 ```
 
 ## Configuration
@@ -28,9 +33,10 @@ module.exports = {
   content: [
     './src/pages/**/*.{jsx,tsx}',
     './node_modules/@sakura-ui/core/**/*.{js,jsx,ts,tsx}',
-    './node_modules/@sakura-ui/forms/**/*.{js,jsx,ts,tsx}'
+    './node_modules/@sakura-ui/forms/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@sakura-ui/markdown/**/*.{js,jsx,ts,tsx}'
   ],
-  plugins: [require('@sakura-ui/config')]
+  plugins: [require('@sakura-ui/tailwind-theme-plugin')]
 }
 ```
 
@@ -96,7 +102,7 @@ export default App
 - H1-H6 Headings
 - Link
 - Card
-- InfoCard
+- LinkCard
 - Ol
 - Ul
 - Table
@@ -117,6 +123,10 @@ export default App
 - Checkbox
 - Select
 - Input
+- FileInput
 - Textarea
 - LabelControl
 - FieldsetControl
+
+## Markdwon extension
+- Markdown

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.21",
+  "version": "0.3.0",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -12,32 +12,38 @@
   "files": [
     "packages"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
-    "build": "pnpm --parallel --filter \"./**\" build"
+    "build": "turbo build"
+  },
+  "packageManager": "pnpm@9.15.1",
+  "engines": {
+    "pnpm": ">=9.15.1"
   },
   "dependencies": {
-    "@sakura-ui/config": "workspace:*",
     "@sakura-ui/core": "workspace:*",
-    "@sakura-ui/forms": "workspace:*"
+    "@sakura-ui/forms": "workspace:*",
+    "@sakura-ui/helper": "workspace:*",
+    "@sakura-ui/tailwind-theme-plugin": "workspace:*"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.2.7"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^3.4.5"
   },
   "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"
+    "@biomejs/biome": "^1.9.4",
+    "@types/node": "^22.10.2",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "npm-run-all2": "^7.0.1",
+    "rimraf": "^6.0.1",
+    "ts-node": "^10.9.2",
+    "tsc-alias": "^1.8.10",
+    "turbo": "^2.3.3",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8"
   }
 }

package/packages/core/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.1.38",
+  "version": "0.3.2",
   "description": "",
-  "keywords": [],
+  "keywords": [
+    "react",
+    "ui",
+    "design-system",
+    "accessible",
+    "components",
+    "library"
+  ],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
   "repository": {
@@ -25,9 +32,12 @@
   "files": [
     "dist"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "lint": "run-s lint:*",
-    "lint:eslint": "eslint . --ext .ts,.tsx --fix",
+    "lint:lint": "biome lint ./",
     "lint:prettier": "prettier --write --ignore-path .gitignore './src/*.ts'",
     "prebuild": "rimraf dist",
     "build": "run-p build:*",
@@ -36,22 +46,24 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.2.7"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^3.4.5"
+  },
+  "dependencies": {
+    "@sakura-ui/helper": "0.0.5"
   },
   "devDependencies": {
-    "@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",
-    "jsdom": "^24.0.0",
-    "postcss": "^8.4.35",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.1"
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "autoprefixer": "catalog:",
+    "happy-dom": "^15.11.7",
+    "postcss": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tailwindcss": "catalog:",
+    "vitest": "catalog:"
   }
 }

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

@@ -1,6 +1,5 @@
-import { cx } from '../libs/cx'
-import { ComponentWithAs } from '../types/component'
-import { forwardRef } from '../libs/forward-ref'
+import React, { type ComponentProps } from 'react'
+import { cx } from '@sakura-ui/helper'
 import {
   type ButtonVariant,
   type ButtonSize,
@@ -9,37 +8,39 @@ import {
   getSizeStyle
 } from './buttonStyle'
 
-export interface ButtonProps {
-  variant?: ButtonVariant
-  size?: ButtonSize
+export namespace Button {
+  export interface Props<T extends React.ElementType> {
+    as?: T
+    variant?: ButtonVariant
+    size?: ButtonSize
+  }
 }
 
-export const Button: ComponentWithAs<'button', ButtonProps> = forwardRef(
-  (props, ref) => {
-    const {
-      as: Component = 'button',
-      variant = 'primary',
-      size = 'lg',
-      className,
-      children,
-      ...restProps
-    } = props
+export const Button = <T extends React.ElementType = 'button'>(
+  props: Button.Props<T> & Omit<React.ComponentProps<T>, keyof Button.Props<T>>
+) => {
+  const {
+    as: Component = 'button',
+    variant = 'solid-fill',
+    size = 'lg',
+    className,
+    children,
+    ...restProps
+  } = props
 
-    return (
-      <Component
-        className={cx(
-          base,
-          getVariantStyle(variant),
-          getSizeStyle(size),
-          className
-        )}
-        {...restProps}
-        ref={ref}
-      >
-        {children}
-      </Component>
-    )
-  }
-)
+  return (
+    <Component
+      className={cx(
+        base,
+        getVariantStyle(variant),
+        getSizeStyle(size),
+        className
+      )}
+      {...restProps}
+    >
+      {children}
+    </Component>
+  )
+}
 
 Button.displayName = 'Button'

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
 interface IdContextType {
   id: string
@@ -7,9 +7,11 @@ interface IdContextType {
 
 const IdContext = React.createContext<IdContextType>({ id: '' })
 
-export interface CardProps extends React.ComponentPropsWithoutRef<'section'> {}
+export namespace Card {
+  export interface Props extends React.ComponentPropsWithoutRef<'article'> {}
+}
 
-export const Card = (props: CardProps) => {
+export const Card = (props: Card.Props) => {
   const { className, children, ...restProps } = props
 
   const id = React.useId()
@@ -18,51 +20,58 @@ export const Card = (props: CardProps) => {
   const style = `
     border
     border-solid
-    border-sumi-300
+    border-solid-gray-500
     rounded-2xl
     sm:rounded-3xl
-    text-sumi-900
+    text-solid-gray-900
     overflow-hidden
-    flex flex-col
-    gap-2
   `
 
   return (
     <IdContext.Provider value={ctx}>
-      <section
+      <article
         aria-labelledby={ctx.id}
+        aria-describedby={`${ctx.id}-desc`}
         className={cx(style, className)}
         {...restProps}
       >
         {children}
-      </section>
+      </article>
     </IdContext.Provider>
   )
 }
 
-export interface CardImgProps extends React.ComponentPropsWithoutRef<'img'> {}
+export namespace CardImg {
+  export interface Props extends React.ComponentPropsWithoutRef<'img'> {}
+}
 
-export const CardImg = (props: CardImgProps) => {
+export const CardImg = (props: CardImg.Props) => {
   const { className, ...restProps } = props
 
   const style = `
     object-cover
+    mb-2
   `
 
+  // biome-ignore lint/a11y/useAltText: things to check on the user side
   return <img className={cx(style, className)} {...restProps} />
 }
 
-export interface CardHeaderProps
-  extends React.ComponentPropsWithoutRef<'div'> {}
+export namespace CardHeader {
+  export interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+}
 
-export const CardHeader = (props: CardHeaderProps) => {
+export const CardHeader = (props: CardHeader.Props) => {
   const { className, children, ...restProps } = props
 
   const ctx = React.useContext(IdContext)
 
   const style = `
     text-base
+    leading-[2rem]
     font-medium
+    first:pt-4
+    pt-2
     last:pb-4
     px-6
   `
@@ -74,34 +83,43 @@ export const CardHeader = (props: CardHeaderProps) => {
   )
 }
 
-export interface CardBodyProps extends React.ComponentPropsWithoutRef<'div'> {}
+export namespace CardBody {
+  export interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+}
 
-export const CardBody = (props: CardBodyProps) => {
+export const CardBody = (props: CardBody.Props) => {
   const { className, children, ...restProps } = props
 
+  const ctx = React.useContext(IdContext)
+
   const style = `
     text-base-sm
+    leading-[1.85rem]
     first:pt-4
+    pt-2
     last:pb-4
     px-6
   `
 
   return (
-    <div className={cx(style, className)} {...restProps}>
+    <div id={`${ctx.id}-desc`} className={cx(style, className)} {...restProps}>
       {children}
     </div>
   )
 }
 
-export interface CardFooterProps
-  extends React.ComponentPropsWithoutRef<'div'> {}
+export namespace CardFooter {
+  export interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+}
 
-export const CardFooter = (props: CardFooterProps) => {
+export const CardFooter = (props: CardFooter.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     text-base-sm
+    leading-[1.85rem]
     first:pt-4
+    pt-2
     last:pb-4
     px-6
   `

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

@@ -1,13 +1,15 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
-export interface CodeProps extends React.ComponentPropsWithoutRef<'code'> {}
+export namespace Code {
+  export interface Props extends React.ComponentPropsWithoutRef<'code'> {}
+}
 
-export const Code = (props: CodeProps) => {
+export const Code = (props: Code.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    bg-sumi-50
+    bg-solid-gray-50
     font-mono
   `
 

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

@@ -1,14 +1,16 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
-export interface FaqProps extends React.ComponentPropsWithoutRef<'dl'> {}
+export namespace Faq {
+  export interface Props extends React.ComponentPropsWithoutRef<'dl'> {}
+}
 
 const headingStyle = `
   text-h-med-m
   sm:text-h-med
 `
 
-export const Faq = (props: FaqProps) => {
+export const Faq = (props: Faq.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -31,9 +33,11 @@ export const Faq = (props: FaqProps) => {
   )
 }
 
-export interface QuestionProps extends React.ComponentPropsWithoutRef<'dt'> {}
+export namespace Question {
+  export interface Props extends React.ComponentPropsWithoutRef<'dt'> {}
+}
 
-export const Question = (props: QuestionProps) => {
+export const Question = (props: Question.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -54,9 +58,11 @@ export const Question = (props: QuestionProps) => {
   )
 }
 
-export interface AnswerProps extends React.ComponentPropsWithoutRef<'dd'> {}
+export namespace Answer {
+  export interface Props extends React.ComponentPropsWithoutRef<'dd'> {}
+}
 
-export const Answer = (props: AnswerProps) => {
+export const Answer = (props: Answer.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `

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

@@ -1,18 +1,18 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
-export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {}
+export namespace H1 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h1'> {}
+}
 
-export const H1 = (props: HeadingProps) => {
+export const H1 = (props: H1.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     text-h-lg-m
     sm:text-h-lg
-    mt-8
-    mb-3
-    sm:mt-16
-    sm:mb-6
+    pt-[2rem]
+    sm:pt-[6.5rem]
   `
 
   return (
@@ -22,16 +22,18 @@ export const H1 = (props: HeadingProps) => {
   )
 }
 
-export const H2 = (props: HeadingProps) => {
+export namespace H2 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h2'> {}
+}
+
+export const H2 = (props: H2.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     text-h-med-m
     sm:text-h-med
-    mt-8
-    mb-3
-    sm:mt-16
-    sm:mb-6
+    pt-[4rem]
+    sm:pt-[4.5rem]
   `
 
   return (
@@ -41,16 +43,18 @@ export const H2 = (props: HeadingProps) => {
   )
 }
 
-export const H3 = (props: HeadingProps) => {
+export namespace H3 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h3'> {}
+}
+
+export const H3 = (props: H3.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     text-h-sm-m
     sm:text-h-sm
-    mt-5
-    mb-3
-    sm:mt-10
-    sm:mb-6
+    pt-[4rem]
+    sm:pt-[4.5rem]
   `
 
   return (
@@ -60,16 +64,18 @@ export const H3 = (props: HeadingProps) => {
   )
 }
 
-export const H4 = (props: HeadingProps) => {
+export namespace H4 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h4'> {}
+}
+
+export const H4 = (props: H4.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     text-h-xs-m
     sm:text-h-xs
-    mt-5
-    mb-2
-    sm:mt-10
-    sm:mb-4
+    pt-[3.5rem]
+    sm:pt-[4.5rem]
   `
 
   return (
@@ -79,16 +85,18 @@ export const H4 = (props: HeadingProps) => {
   )
 }
 
-export const H5 = (props: HeadingProps) => {
+export namespace H5 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h5'> {}
+}
+
+export const H5 = (props: H5.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     text-h-xxs-m
     sm:text-h-xxs
-    mt-5
-    mb-2
-    sm:mt-10
-    sm:mb-4
+    pt-[3rem]
+    sm:pt-[4rem]
   `
 
   return (
@@ -98,16 +106,18 @@ export const H5 = (props: HeadingProps) => {
   )
 }
 
-export const H6 = (props: HeadingProps) => {
+export namespace H6 {
+  export interface Props extends React.ComponentPropsWithoutRef<'h6'> {}
+}
+
+export const H6 = (props: H6.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     text-h-xxs-m
     sm:text-h-xxs
-    mt-3
-    mb-2
-    sm:mt-6
-    sm:mb-4
+    pt-[2.5rem]
+    sm:pt-[3.5rem]
   `
 
   return (