@sakura-ui/sakura-ui 0.5.1 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -19,7 +19,7 @@
     "pnpm": ">=9.15.1"
   },
   "dependencies": {
-    "@sakura-ui/core": "0.5.1",
+    "@sakura-ui/core": "0.5.2",
     "@sakura-ui/helper": "0.0.10",
     "@sakura-ui/forms": "0.4.3",
     "@sakura-ui/tailwind-theme-plugin": "0.4.2"

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "",
   "keywords": [
     "react",

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

@@ -1,6 +1,16 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
+export const cardStyle = `
+  border
+  border-solid
+  border-solid-gray-500
+  rounded-2xl
+  sm:rounded-3xl
+  text-solid-gray-900
+  overflow-hidden
+`
+
 export namespace Card {
   export interface Props<T extends React.ElementType> {
     as?: T
@@ -12,20 +22,10 @@ export const Card = <T extends React.ElementType = 'div'>(
 ) => {
   const { as: Component = 'div', className, children, ...restProps } = props
 
-  const style = `
-    border
-    border-solid
-    border-solid-gray-500
-    rounded-2xl
-    sm:rounded-3xl
-    text-solid-gray-900
-    overflow-hidden
-  `
-
   // A div cannot carry an accessible name, so no ARIA is set here. See the
   // Accessible names section of the README before adding any.
   return (
-    <Component className={cx(style, className)} {...restProps}>
+    <Component className={cx(cardStyle, className)} {...restProps}>
       {children}
     </Component>
   )
@@ -33,6 +33,40 @@ export const Card = <T extends React.ElementType = 'div'>(
 
 Card.displayName = 'Card'
 
+export const cardImgStyle = `
+  object-cover
+  mb-2
+`
+
+/**
+ * Resets the browser defaults of the heading and paragraph elements, so that
+ * the element CardHeader renders does not change how the card looks.
+ */
+export const cardHeaderStyle = `
+  m-0
+  text-base
+  leading-[2rem]
+  font-medium
+  first:pt-4
+  pt-2
+  last:pb-4
+  px-6
+`
+
+export const cardBodyStyle = `
+  text-base-sm
+  leading-[1.85rem]
+  first:pt-4
+  pt-2
+  last:pb-4
+  px-6
+`
+
+export const cardFooterPositionStyle = `
+  sticky
+  top-full
+`
+
 export namespace CardImg {
   export interface Props extends React.ComponentPropsWithoutRef<'img'> {}
 }
@@ -40,13 +74,8 @@ export namespace CardImg {
 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} />
+  return <img className={cx(cardImgStyle, className)} {...restProps} />
 }
 
 CardImg.displayName = 'CardImg'
@@ -76,21 +105,8 @@ export const CardHeader = (props: CardHeader.Props) => {
     )
   }
 
-  // Reset the browser defaults of the heading and paragraph elements so that the
-  // rendered element does not change how the card looks.
-  const style = `
-    m-0
-    text-base
-    leading-[2rem]
-    font-medium
-    first:pt-4
-    pt-2
-    last:pb-4
-    px-6
-  `
-
   return (
-    <Component className={cx(style, className)} {...restProps}>
+    <Component className={cx(cardHeaderStyle, className)} {...restProps}>
       {children}
     </Component>
   )
@@ -105,19 +121,10 @@ export namespace CardBody {
 export const CardBody = (props: CardBody.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    text-base-sm
-    leading-[1.85rem]
-    first:pt-4
-    pt-2
-    last:pb-4
-    px-6
-  `
-
   // No generated id here. Callers that want the body to describe the card pass
   // their own id and point aria-describedby at it.
   return (
-    <div className={cx(style, className)} {...restProps}>
+    <div className={cx(cardBodyStyle, className)} {...restProps}>
       {children}
     </div>
   )
@@ -132,22 +139,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]
-    first:pt-4
-    pt-2
-    last:pb-4
-    px-6
-  `
-
   return (
-    <div className={cx(stylePosition, style, className)} {...restProps}>
+    <div
+      className={cx(cardFooterPositionStyle, cardBodyStyle, className)}
+      {...restProps}
+    >
       {children}
     </div>
   )

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

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

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

@@ -1,27 +1,43 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
-export namespace Faq {
-  export interface Props extends React.ComponentPropsWithoutRef<'dl'> {}
-}
-
-const headingStyle = `
+/** The size of the Q and A markers, matching a medium heading. */
+export const faqMarkerStyle = `
   text-h-med-m
   sm:text-h-med
 `
 
+export const faqStyle = `
+  flex
+  flex-col
+  gap-8
+`
+
+export const questionStyle = `
+  flex
+  flex-row
+  gap-8
+  mt-8
+`
+
+export const answerStyle = `
+  flex
+  flex-row
+  items-start
+  gap-8
+`
+
+export namespace Faq {
+  export interface Props extends React.ComponentPropsWithoutRef<'dl'> {}
+}
+
 export const Faq = (props: Faq.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    flex
-    flex-col
-    gap-8
-  `
   // No schema.org FAQPage markup here. Google discontinued the FAQ rich result
   // in May 2026, so it is not implemented.
   return (
-    <dl className={cx(style, className)} {...restProps}>
+    <dl className={cx(faqStyle, className)} {...restProps}>
       {children}
     </dl>
   )
@@ -34,14 +50,8 @@ export namespace Question {
 export const Question = (props: Question.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    flex
-    flex-row
-    gap-8
-    mt-8
-  `
   return (
-    <dt className={cx(style, headingStyle, className)} {...restProps}>
+    <dt className={cx(questionStyle, faqMarkerStyle, className)} {...restProps}>
       <span aria-hidden="true">Q</span>
       <span>{children}</span>
     </dt>
@@ -55,15 +65,9 @@ export namespace Answer {
 export const Answer = (props: Answer.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    flex
-    flex-row
-    items-start
-    gap-8
-  `
   return (
-    <dd className={cx(style, className)} {...restProps}>
-      <span className={cx(headingStyle, '!leading-none')} aria-hidden="true">
+    <dd className={cx(answerStyle, className)} {...restProps}>
+      <span className={cx(faqMarkerStyle, '!leading-none')} aria-hidden="true">
         A
       </span>
       <span>{children}</span>

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

@@ -1,6 +1,50 @@
 import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
+/**
+ * The classes each heading level carries. Exported so that anything rendering
+ * headings without React — @sakura-ui/markdown builds HTML strings — reads the
+ * same values instead of keeping a copy that drifts.
+ */
+export const headingStyle = {
+  h1: `
+    text-h-lg-m
+    sm:text-h-lg
+    pt-[2rem]
+    sm:pt-[6.5rem]
+  `,
+  h2: `
+    text-h-med-m
+    sm:text-h-med
+    pt-[4rem]
+    sm:pt-[4.5rem]
+  `,
+  h3: `
+    text-h-sm-m
+    sm:text-h-sm
+    pt-[4rem]
+    sm:pt-[4.5rem]
+  `,
+  h4: `
+    text-h-xs-m
+    sm:text-h-xs
+    pt-[3.5rem]
+    sm:pt-[4.5rem]
+  `,
+  h5: `
+    text-h-xxs-m
+    sm:text-h-xxs
+    pt-[3rem]
+    sm:pt-[4rem]
+  `,
+  h6: `
+    text-h-xxs-m
+    sm:text-h-xxs
+    pt-[2.5rem]
+    sm:pt-[3.5rem]
+  `
+} as const
+
 export namespace H1 {
   export interface Props extends React.ComponentPropsWithoutRef<'h1'> {}
 }
@@ -8,15 +52,8 @@ export namespace H1 {
 export const H1 = (props: H1.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    text-h-lg-m
-    sm:text-h-lg
-    pt-[2rem]
-    sm:pt-[6.5rem]
-  `
-
   return (
-    <h1 className={cx(style, className)} {...restProps}>
+    <h1 className={cx(headingStyle.h1, className)} {...restProps}>
       {children}
     </h1>
   )
@@ -29,15 +66,8 @@ export namespace H2 {
 export const H2 = (props: H2.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    text-h-med-m
-    sm:text-h-med
-    pt-[4rem]
-    sm:pt-[4.5rem]
-  `
-
   return (
-    <h2 className={cx(style, className)} {...restProps}>
+    <h2 className={cx(headingStyle.h2, className)} {...restProps}>
       {children}
     </h2>
   )
@@ -50,15 +80,8 @@ export namespace H3 {
 export const H3 = (props: H3.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    text-h-sm-m
-    sm:text-h-sm
-    pt-[4rem]
-    sm:pt-[4.5rem]
-  `
-
   return (
-    <h3 className={cx(style, className)} {...restProps}>
+    <h3 className={cx(headingStyle.h3, className)} {...restProps}>
       {children}
     </h3>
   )
@@ -71,15 +94,8 @@ export namespace H4 {
 export const H4 = (props: H4.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    text-h-xs-m
-    sm:text-h-xs
-    pt-[3.5rem]
-    sm:pt-[4.5rem]
-  `
-
   return (
-    <h4 className={cx(style, className)} {...restProps}>
+    <h4 className={cx(headingStyle.h4, className)} {...restProps}>
       {children}
     </h4>
   )
@@ -92,15 +108,8 @@ export namespace H5 {
 export const H5 = (props: H5.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    text-h-xxs-m
-    sm:text-h-xxs
-    pt-[3rem]
-    sm:pt-[4rem]
-  `
-
   return (
-    <h5 className={cx(style, className)} {...restProps}>
+    <h5 className={cx(headingStyle.h5, className)} {...restProps}>
       {children}
     </h5>
   )
@@ -113,15 +122,8 @@ export namespace H6 {
 export const H6 = (props: H6.Props) => {
   const { className, children, ...restProps } = props
 
-  const style = `
-    text-h-xxs-m
-    sm:text-h-xxs
-    pt-[2.5rem]
-    sm:pt-[3.5rem]
-  `
-
   return (
-    <h6 className={cx(style, className)} {...restProps}>
+    <h6 className={cx(headingStyle.h6, className)} {...restProps}>
       {children}
     </h6>
   )

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

@@ -8,43 +8,43 @@ export namespace Icon {
   }
 }
 
-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]'
-  }
+export const iconSizeStyle = {
+  16: '!text-[16px]',
+  20: '!text-[20px]',
+  24: '!text-[24px]',
+  40: '!text-[40px]',
+  44: '!text-[44px]',
+  48: '!text-[48px]'
+} as const
 
-  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;
+//}
+export const iconStyle = `
+  font-icon
+  font-light
+  inline-block
+  leading-none
+  align-middle
+  whitespace-nowrap
+`
 
-  // @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;
-  //}
+export const Icon = React.forwardRef<HTMLElement, Icon.Props>((props, ref) => {
+  const { className, altText = '', opticalSize = 24, children, ...rest } = props
 
-  const style = `
-    font-icon
-    font-light
-    inline-block
-    leading-none
-    align-middle
-    whitespace-nowrap
-  `
+  const fontSize = iconSizeStyle[opticalSize]
+  const style = iconStyle
 
   return (
     <>

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

@@ -2,6 +2,18 @@ import React from 'react'
 import { cx, Style } from '@sakura-ui/helper'
 import { Icon } from './Icon'
 
+// Make lines break at each word
+export const linkStyle = `
+  cursor-pointer
+  text-blue-1000
+  active:text-orange-700
+  visited:text-magenta-900
+  ${Style.focusRoundedWithBg}
+  ${Style.underline}
+  disabled:border-solid-gray-500
+  [overflow-wrap:anywhere]
+`
+
 export namespace Link {
   export interface Props<T extends React.ElementType> {
     as?: T
@@ -12,18 +24,7 @@ export const Link = <T extends React.ElementType = 'a'>(
   props: Link.Props<T> & Omit<React.ComponentProps<T>, keyof Link.Props<T>>
 ) => {
   const { as: Component = 'a', className, children, ...restProps } = props
-
-  // Make lines break at each word
-  const style = `
-    cursor-pointer
-    text-blue-1000
-    active:text-orange-700
-    visited:text-magenta-900
-    ${Style.focusRoundedWithBg}
-    ${Style.underline}
-    disabled:border-solid-gray-500
-    [overflow-wrap:anywhere]
-  `
+  const style = linkStyle
 
   if (restProps.href?.startsWith('http') || restProps.target === '_blank') {
     return (