@sakura-ui/sakura-ui 0.2.0 → 0.4.1

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,71 @@ export default App
 - Checkbox
 - Select
 - Input
+- FileInput
 - Textarea
 - LabelControl
 - FieldsetControl
+
+## Markdwon extension
+- Markdown
+
+## Development
+
+### Setup
+```
+$ pnpm install
+```
+
+### Run the example app
+`examples` resolves each package to its `src` through Vite aliases, so **no build step is required**. Changes under `packages/*/src` are reflected through HMR.
+
+```
+$ pnpm dev
+```
+
+Then open http://localhost:5173/sakura-ui/
+
+### Build
+```
+$ pnpm build
+```
+
+Builds go through turbo, which resolves the dependency order — `@sakura-ui/helper` is built before `core` / `forms` / `markdown`. To build a single package, use a filter so that its dependencies are built as well.
+
+```
+$ pnpm build --filter @sakura-ui/core
+```
+
+Running `pnpm build` inside a package directory (e.g. `cd packages/core && pnpm build`) fails while `@sakura-ui/helper` has not been built yet.
+
+### Test
+```
+$ pnpm test
+```
+
+Runs every package through turbo. To watch a single package while working on it:
+
+```
+$ pnpm --filter @sakura-ui/core test:watch
+```
+
+### Lint
+```
+$ pnpm lint
+```
+
+`pnpm lint`, `pnpm build` and `pnpm test` all run on pull requests through the `CI` workflow.
+
+### Publish
+Releases go through npm trusted publishing (OIDC), so no npm token is stored anywhere.
+
+1. Bump the `version` field of the packages to release and merge that to `main`
+2. Publish a GitHub Release
+
+The `Publish` workflow then builds the packages and runs `pnpm publish -r`, which walks the workspace in dependency order and skips versions that are already on npm — `@sakura-ui/helper` goes out before the packages that depend on it.
+
+To rehearse without releasing anything, run the workflow manually from the Actions tab: manual runs default to a dry run.
+
+Each package needs this repository and `.github/workflows/publish.yaml` registered as its trusted publisher on npmjs.com.
+
+Publishing by hand is not supported. npm requires 2FA for direct publishes, and `npm publish` would upload `"@sakura-ui/helper": "workspace:*"` verbatim, since only pnpm expands the workspace protocol at publish time.

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.2.0",
+  "version": "0.4.1",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git"
+    "url": "git+https://github.com/glassonion1/sakura-ui.git"
   },
   "license": "MIT",
   "files": [
@@ -15,29 +15,36 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "pnpm --parallel --filter=./packages/* build"
+  "engines": {
+    "pnpm": ">=9.15.1"
   },
   "dependencies": {
-    "@sakura-ui/tailwind-theme-plugin": "workspace:*",
-    "@sakura-ui/core": "workspace:*",
-    "@sakura-ui/forms": "workspace:*"
+    "@sakura-ui/core": "0.4.1",
+    "@sakura-ui/helper": "0.0.9",
+    "@sakura-ui/forms": "0.4.1",
+    "@sakura-ui/tailwind-theme-plugin": "0.4.1"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.2.7"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tailwindcss": "^4.1.17"
   },
   "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",
-    "ts-node": "^10.9.2",
-    "tsc-alias": "^1.8.10",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.12",
-    "vitest": "^1.6.0"
+    "@biomejs/biome": "^2.5.9",
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-react-swc": "^4.3.3",
+    "npm-run-all2": "^9.0.3",
+    "rimraf": "^6.1.3",
+    "tsc-alias": "^1.9.2",
+    "turbo": "^2.10.11",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.6",
+    "vitest": "^4.1.11"
+  },
+  "scripts": {
+    "build": "turbo build",
+    "dev": "pnpm --filter examples dev",
+    "lint": "biome lint ./",
+    "test": "turbo test"
   }
-}
+}

package/packages/core/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.2.0",
+  "version": "0.4.1",
   "description": "",
-  "keywords": [],
+  "keywords": [
+    "react",
+    "ui",
+    "design-system",
+    "accessible",
+    "components",
+    "library"
+  ],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com:glassonion1/sakura-ui.git",
+    "url": "git+https://github.com/glassonion1/sakura-ui.git",
     "directory": "packages/core"
   },
   "license": "MIT",
@@ -36,23 +43,29 @@
     "build": "run-p build:*",
     "build:scripts": "vite build",
     "build:types": "tsc && tsc-alias",
-    "test": "vitest"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^3.2.7"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tailwindcss": "^4.1.17"
+  },
+  "dependencies": {
+    "@sakura-ui/helper": "workspace:*"
   },
   "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:",
+    "@tailwindcss/vite": "catalog:",
+    "autoprefixer": "catalog:",
+    "happy-dom": "catalog:",
+    "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<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,17 +20,15 @@ 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}>
+    <IdContext value={ctx}>
       <article
         aria-labelledby={ctx.id}
         aria-describedby={`${ctx.id}-desc`}
@@ -37,13 +37,15 @@ export const Card = (props: CardProps) => {
       >
         {children}
       </article>
-    </IdContext.Provider>
+    </IdContext>
   )
 }
 
-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,21 +108,29 @@ 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 stylePosition = `
+    sticky
+    top-full
+  `
+
   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 className={cx(stylePosition, style, className)} {...restProps}>
       {children}
     </div>
   )

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 = `