@sakura-ui/sakura-ui 0.2.0 → 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.2.0",
+  "version": "0.3.0",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -16,28 +16,34 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm --parallel --filter=./packages/* build"
+    "build": "turbo build"
+  },
+  "packageManager": "pnpm@9.15.1",
+  "engines": {
+    "pnpm": ">=9.15.1"
   },
   "dependencies": {
-    "@sakura-ui/tailwind-theme-plugin": "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": {
-    "@biomejs/biome": "^1.8.0",
-    "@types/node": "^20.14.1",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "npm-run-all2": "^6.2.0",
-    "rimraf": "^5.0.7",
+    "@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",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.12",
-    "vitest": "^1.6.0"
+    "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.2.0",
+  "version": "0.3.2",
   "description": "",
-  "keywords": [],
+  "keywords": [
+    "react",
+    "ui",
+    "design-system",
+    "accessible",
+    "components",
+    "library"
+  ],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
   "repository": {
@@ -39,20 +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.5",
-    "@testing-library/react": "^16.0.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "autoprefixer": "^10.4.19",
-    "happy-dom": "^14.12.0",
-    "postcss": "^8.4.38",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.3"
+    "@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 type { 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<'article'> {}
+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,13 +20,11 @@ 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 (
@@ -41,9 +41,11 @@ export const Card = (props: CardProps) => {
   )
 }
 
-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 = `
@@ -55,18 +57,21 @@ export const CardImg = (props: CardImgProps) => {
   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
   `
@@ -78,16 +83,20 @@ 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
   `
@@ -99,15 +108,18 @@ export const CardBody = (props: CardBodyProps) => {
   )
 }
 
-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 (

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

@@ -1,32 +1,62 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
-export interface IconProps extends React.ComponentPropsWithRef<'span'> {
-  icon: string
-  srText?: string
+export namespace Icon {
+  export interface Props extends React.ComponentPropsWithRef<'span'> {
+    opticalSize?: 16 | 20 | 24 | 40 | 44 | 48
+    altText?: string
+  }
 }
 
-export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
-  const { className, icon, srText, ...restProps } = props
+export const Icon = React.forwardRef<HTMLElement, Icon.Props>((props, ref) => {
+  const { className, altText = '', opticalSize = 24, children, ...rest } = props
+
+  const size = {
+    16: '!text-[16px]',
+    20: '!text-[20px]',
+    24: '!text-[24px]',
+    40: '!text-[40px]',
+    44: '!text-[44px]',
+    48: '!text-[48px]'
+  }
+
+  const fontSize = size[opticalSize]
+
+  // @see: https://developers.google.com/fonts/docs/material_symbols
+  //.material-symbols-outlined {
+  //  font-family: 'Material Symbols Outlined';
+  //  font-weight: normal;
+  //  font-style: normal;
+  //  font-size: 24px;  /* Preferred icon size */
+  //  display: inline-block;
+  //  line-height: 1;
+  //  text-transform: none;
+  //  letter-spacing: normal;
+  //  word-wrap: normal;
+  //  white-space: nowrap;
+  //  direction: ltr;
+  //}
 
   const style = `
-    inline
-    align-middle
     font-icon
-    antialiased
+    font-light
+    inline-block
+    leading-none
+    align-middle
+    whitespace-nowrap
   `
 
   return (
     <>
       <span
         aria-hidden="true"
-        className={cx(style, className)}
-        {...restProps}
+        className={cx(className, fontSize, style)}
+        {...rest}
         ref={ref}
       >
-        {icon}
+        {children}
       </span>
-      <span className="sr-only">{srText}</span>
+      <span className="sr-only">{altText}</span>
     </>
   )
 })