@sakura-ui/sakura-ui 0.3.0 → 0.4.2

package/README.md

@@ -128,5 +128,76 @@ export default App
 - LabelControl
 - FieldsetControl
 
+Every form control takes its accessible name from the label it is associated with, so wrap it in `LabelControl` — or `FieldsetControl` for a group of radios or checkboxes. A control rendered without a label has no name for assistive technology.
+
+```tsx
+<LabelControl labelText="添付書類" isRequired>
+  <FileInput />
+</LabelControl>
+```
+
+If a visible label is not an option, pass `aria-label` yourself; it is forwarded to the underlying element.
+
 ## 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.3.0",
+  "version": "0.4.2",
   "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,35 +15,36 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "turbo build"
-  },
-  "packageManager": "pnpm@9.15.1",
   "engines": {
     "pnpm": ">=9.15.1"
   },
   "dependencies": {
-    "@sakura-ui/core": "workspace:*",
-    "@sakura-ui/forms": "workspace:*",
-    "@sakura-ui/helper": "workspace:*",
-    "@sakura-ui/tailwind-theme-plugin": "workspace:*"
+    "@sakura-ui/forms": "0.4.2",
+    "@sakura-ui/helper": "0.0.9",
+    "@sakura-ui/core": "0.4.1",
+    "@sakura-ui/tailwind-theme-plugin": "0.4.1"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwindcss": "^3.4.5"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tailwindcss": "^4.1.17"
   },
   "devDependencies": {
-    "@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"
+    "@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,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "",
   "keywords": [
     "react",
@@ -14,7 +14,7 @@
   "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",
@@ -43,23 +43,25 @@
     "build": "run-p build:*",
     "build:scripts": "vite build",
     "build:types": "tsc && tsc-alias",
-    "test": "vitest"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwindcss": "^3.4.5"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tailwindcss": "^4.1.17"
   },
   "dependencies": {
-    "@sakura-ui/helper": "0.0.5"
+    "@sakura-ui/helper": "workspace:*"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "catalog:",
     "@testing-library/react": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "@tailwindcss/vite": "catalog:",
     "autoprefixer": "catalog:",
-    "happy-dom": "^15.11.7",
+    "happy-dom": "catalog:",
     "postcss": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",

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

@@ -17,7 +17,7 @@ export namespace Button {
 }
 
 export const Button = <T extends React.ElementType = 'button'>(
-  props: Button.Props<T> & Omit<React.ComponentProps<T>, keyof Button.Props<T>>
+  props: Button.Props<T> & Omit<ComponentProps<T>, keyof Button.Props<T>>
 ) => {
   const {
     as: Component = 'button',

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

@@ -28,7 +28,7 @@ export const Card = (props: Card.Props) => {
   `
 
   return (
-    <IdContext.Provider value={ctx}>
+    <IdContext value={ctx}>
       <article
         aria-labelledby={ctx.id}
         aria-describedby={`${ctx.id}-desc`}
@@ -37,7 +37,7 @@ export const Card = (props: Card.Props) => {
       >
         {children}
       </article>
-    </IdContext.Provider>
+    </IdContext>
   )
 }
 
@@ -115,6 +115,11 @@ export namespace CardFooter {
 export const CardFooter = (props: CardFooter.Props) => {
   const { className, children, ...restProps } = props
 
+  const stylePosition = `
+    sticky
+    top-full
+  `
+
   const style = `
     text-base-sm
     leading-[1.85rem]
@@ -125,7 +130,7 @@ export const CardFooter = (props: CardFooter.Props) => {
   `
 
   return (
-    <div className={cx(style, className)} {...restProps}>
+    <div className={cx(stylePosition, style, className)} {...restProps}>
       {children}
     </div>
   )

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

@@ -1,4 +1,4 @@
-import React, { type ComponentProps } from 'react'
+import React from 'react'
 import { cx } from '@sakura-ui/helper'
 import {
   base,

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

@@ -67,8 +67,8 @@ export const LangSelector = ({
       )
       if (focusables.length === 0) return
 
-      const tabIndex = focusables.findIndex(
-        (el) => el === document.activeElement
+      const tabIndex = focusables.indexOf(
+        document.activeElement as HTMLElement
       )
       // If there is no focused element, focus the first element
       if (tabIndex === -1) {

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

@@ -30,7 +30,6 @@ export const Link = <T extends React.ElementType = 'a'>(
       <Component
         className={cx(style, className)}
         target="_blank"
-        rel="noopener noreferrer"
         {...restProps}
       >
         <span>{children}</span>

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

@@ -1,25 +1,29 @@
 import React from 'react'
 import { cx, Style } from '@sakura-ui/helper'
-import { Card, CardHeader } from './Card'
+import { Card, CardFooter, CardHeader } from './Card'
 import { Icon } from './Icon'
 
-interface LinkContextType {
-  href: string
-}
-const LinkContext = React.createContext<LinkContextType>({ href: '' })
-
 export namespace LinkCard {
-  export interface Props extends React.ComponentProps<'article'> {
+  export interface Props<T extends React.ElementType>
+    extends React.ComponentProps<'article'> {
     href: string
+    target?: string
+    linkAs?: T
   }
 }
 
-export const LinkCard = ({
-  href,
-  className,
-  children,
-  ...rest
-}: LinkCard.Props) => {
+export const LinkCard = <T extends React.ElementType = 'a'>(
+  props: LinkCard.Props<T>
+) => {
+  const {
+    href,
+    target,
+    linkAs: Component = 'a',
+    className,
+    children,
+    ...rest
+  } = props
+
   const styleLink = `
     grid
     outline-offset-4
@@ -27,65 +31,96 @@ export const LinkCard = ({
     sm:rounded-3xl
     w-full h-full
     ${Style.focusCard}
+    group
   `
 
   const styleHover = `
-    hover:text-blue-1000
-    hover:border-blue-1000
+    group-hover:outline
+    group-hover:outline-blue-900
+    group-hover:outline-4
+    group-hover:outline-offset-[-1px]
   `
 
-  const isExternal = href?.startsWith('https://')
-
   return (
-    <LinkContext.Provider value={{ href: href }}>
-      <a
-        className={cx(styleLink)}
-        href={href}
-        target={isExternal ? '_blank' : ''}
-      >
-        <Card className={cx(styleHover, className)} {...rest}>
-          {children}
-        </Card>
-      </a>
-    </LinkContext.Provider>
+    <Component className={cx(styleLink)} href={href} target={target}>
+      <Card className={cx(styleHover, className)} {...rest}>
+        {children}
+      </Card>
+    </Component>
   )
 }
 
-export interface LinkCardHeaderProps extends React.ComponentProps<'div'> {}
+export namespace LinkCardHeader {
+  export interface Props extends React.ComponentProps<'div'> {
+    target?: string
+  }
+}
 
 export const LinkCardHeader = ({
+  target,
   className,
   children
-}: LinkCardHeaderProps) => {
-  const { href } = React.useContext(LinkContext)
-
+}: LinkCardHeader.Props) => {
   const styleHeading = `
+    decoration-blue-900
+    underline
+    underline-offset-[calc(3/16*1rem)]
+  `
+  const styleHover = `
+    group-hover:text-blue-900
+    group-hover:decoration-[calc(3/16*1rem)]
+  `
+
+  return (
+    <CardHeader className={cx(className, styleHeading, styleHover)}>
+      <span>
+        {children}
+        {target === '_blank' && (
+          <Icon opticalSize={16} className="ml-1">
+            open_in_new
+          </Icon>
+        )}
+      </span>
+    </CardHeader>
+  )
+}
+
+export namespace LinkCardFooter {
+  export interface Props extends React.ComponentProps<'div'> {}
+}
+
+export const LinkCardFooter = ({
+  className,
+  children
+}: LinkCardFooter.Props) => {
+  const style = `
     flex
     justify-between
     items-center
   `
 
-  const isExternal = href.startsWith('https://')
+  const styleIcon = `
+    inline-flex
+    items-center
+    justify-center
+    w-6 h-6
+    text-blue-1000
+    border
+    border-blue-1000
+    rounded-full
+  `
+
+  const styleIconHover = `
+    group-hover:bg-blue-1000
+    group-hover:text-white
+  `
 
   return (
-    <CardHeader className={cx(className, styleHeading)}>
-      {href === '' ? (
-        children
-      ) : (
-        <>
-          <span>
-            {children}
-            {isExternal ? (
-              <Icon opticalSize={16} className="ml-1">
-                open_in_new
-              </Icon>
-            ) : (
-              ''
-            )}
-          </span>
-          {isExternal ? '' : <Icon opticalSize={16}>arrow_forward</Icon>}
-        </>
-      )}
-    </CardHeader>
+    <CardFooter className={cx(className, style)}>
+      <span>{children}</span>
+      <span className={cx(styleIcon, styleIconHover)}>
+        <Icon opticalSize={16}>arrow_forward</Icon>
+      </span>
+    </CardFooter>
   )
 }

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

@@ -48,8 +48,8 @@ export const MenuButton = ({
       )
       if (focusables.length === 0) return
 
-      const tabIndex = focusables.findIndex(
-        (el) => el === document.activeElement
+      const tabIndex = focusables.indexOf(
+        document.activeElement as HTMLElement
       )
       // If there is no focused element, focus the first element
       if (tabIndex === -1) {

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

@@ -1,4 +1,4 @@
-import React, { type ComponentProps } from 'react'
+import React from 'react'
 import { cx, Style } from '@sakura-ui/helper'
 
 export namespace NavigationItem {

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import { cx } from '@sakura-ui/helper'
+import { Card } from './Card'
+
+export namespace NotificationBanner {
+  export interface Props extends React.ComponentPropsWithoutRef<'article'> {}
+}
+
+export const NotificationBanner = (props: NotificationBanner.Props) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+  `
+
+  return (
+    <Card className={cx(style, className)} {...restProps}>
+      {children}
+    </Card>
+  )
+}

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

@@ -26,6 +26,7 @@ export const PopoverMenu = React.forwardRef<
   `
 
   return (
+    // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: the WAI-ARIA authoring practices build menus from a ul with role="menu"
     <ul ref={ref} role="menu" className={cx(className, style)} {...rest}>
       {children}
     </ul>

package/packages/core/src/components/buttonStyle.ts

@@ -102,7 +102,7 @@ const params: { [key in ButtonSize]: string } = {
     py-1.5
     my-2
     text-button-sm
-    rounded
+    rounded-sm
   `
 }
 

package/packages/core/src/components/index.ts

@@ -1,7 +1,7 @@
 export { Button } from './Button'
 export { MenuButton } from './MenuButton'
 export { Card, CardImg, CardHeader, CardBody, CardFooter } from './Card'
-export { LinkCard, LinkCardHeader } from './LinkCard'
+export { LinkCard, LinkCardHeader, LinkCardFooter } from './LinkCard'
 export { Code } from './Code'
 export { Faq, Question, Answer } from './Faq'
 export { H1, H2, H3, H4, H5, H6 } from './Heading'

package/packages/core/src/icons/index.ts

@@ -5,4 +5,4 @@ export { MenuMobile } from './MenuMobile'
 export { KeyboadArrowDown } from './KeyboardArrowDown'
 export { Language } from './Language'
 export { LanguageMobile } from './LanguageMobile'
-export { type IconProps } from './props'
+export type { IconProps } from './props'

package/packages/core/src/index.ts

@@ -8,6 +8,7 @@ export {
   CardFooter,
   LinkCard,
   LinkCardHeader,
+  LinkCardFooter,
   Code,
   Faq,
   Question,

package/packages/core/vite.config.ts

@@ -3,10 +3,11 @@ import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import { peerDependencies } from './package.json'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src')

package/packages/forms/.turbo/turbo-build.log

@@ -1,22 +1,12 @@
-
-
-> @sakura-ui/forms@0.3.0 prebuild /Users/t.fujita/Documents/Repos/sakura-ui/packages/forms
-> rimraf dist
-
-
-> @sakura-ui/forms@0.3.0 build /Users/t.fujita/Documents/Repos/sakura-ui/packages/forms
-> run-p build:*
-
-
-> @sakura-ui/forms@0.3.0 build:types /Users/t.fujita/Documents/Repos/sakura-ui/packages/forms
-> tsc && tsc-alias
-
-
-> @sakura-ui/forms@0.3.0 build:scripts /Users/t.fujita/Documents/Repos/sakura-ui/packages/forms
-> vite build
-
-vite v6.0.3 building for production...
-transforming (1) src/index.ts✓ 25 modules transformed.
-rendering chunks (1)...computing gzip size (0)...computing gzip size (1)...dist/index.es.js  31.87 kB │ gzip: 8.19 kB
-rendering chunks (1)...computing gzip size (1)...dist/index.cjs.js  21.92 kB │ gzip: 7.09 kB
-✓ built in 170ms
+$ rimraf dist
+$ run-p build:*
+$ tsc && tsc-alias
+$ vite build
+vite v7.3.6 building client environment for production...
+transforming...
+✓ 25 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.es.js  24.36 kB │ gzip: 6.13 kB
+dist/index.cjs.js  16.94 kB │ gzip: 5.27 kB
+✓ built in 582ms