@sakura-ui/sakura-ui 0.1.12 → 0.1.14

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

@@ -1,23 +1,102 @@
 import React from 'react'
 import { cx } from '../utils/class'
 
+interface IdContextType {
+  id: string
+}
+
+const IdContext = React.createContext<IdContextType>({ id: '' })
+
 export interface CardProps extends React.ComponentPropsWithoutRef<'section'> {}
 
-export const Card: React.ElementType<CardProps> = (props: CardProps) => {
+export const Card = (props: CardProps) => {
   const { className, children, ...restProps } = props
 
+  const id = React.useId()
+  const ctx: IdContextType = { id: id }
+
   const style = `
-    bg-sumi-50
     border
     border-solid
     border-sumi-300
-    rounded-[12px]
-    p-4
+    rounded-2xl
+    sm:rounded-3xl
     text-sumi-900
+    overflow-hidden
+    flex
+    flex-col
+  `
+
+  return (
+    <IdContext.Provider value={ctx}>
+      <section
+        aria-labelledby={ctx.id}
+        className={cx(style, className)}
+        {...restProps}
+      >
+        {children}
+      </section>
+    </IdContext.Provider>
+  )
+}
+
+export interface CardHeaderProps extends React.ComponentPropsWithoutRef<'h2'> {}
+
+export const CardHeader = (props: CardHeaderProps) => {
+  const { className, children, ...restProps } = props
+
+  const ctx = React.useContext(IdContext)
+
+  const style = `
+    py-6
+    px-6
+    text-h-xxs-m
+    sm:text-h-xxs
+    leading-none
+  `
+
+  return (
+    <h2 id={ctx.id} className={cx(style, className)} {...restProps}>
+      {children}
+    </h2>
+  )
+}
+
+export interface CardBodyProps extends React.ComponentPropsWithoutRef<'p'> {}
+
+export const CardBody = (props: CardBodyProps) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    px-6
+    first:pt-6
+    pb-6
+    text-base
+  `
+
+  return (
+    <div className={cx(style, className)} {...restProps}>
+      {children}
+    </div>
+  )
+}
+
+export interface CardFooterProps
+  extends React.ComponentPropsWithoutRef<'div'> {}
+
+export const CardFooter = (props: CardFooterProps) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    mt-auto
+    px-6
+    first:pt-6
+    pb-6
   `
+
   return (
-    <section className={cx(style, props.className)} {...restProps}>
-      {props.children}
-    </section>
+    <div className={cx(style, className)} {...restProps}>
+      {children}
+    </div>
   )
 }

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

@@ -3,7 +3,7 @@ import { cx } from '../utils/class'
 
 export interface CodeProps extends React.ComponentPropsWithoutRef<'code'> {}
 
-export const Code: React.ElementType<CodeProps> = (props: CodeProps) => {
+export const Code = (props: CodeProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

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

@@ -0,0 +1,82 @@
+import React from 'react'
+import { cx } from '../utils/class'
+
+export interface FaqProps extends React.ComponentPropsWithoutRef<'dl'> {}
+
+const headingStyle = `
+  text-h-med-m
+  sm:text-h-med
+  !leading-none
+`
+
+export const Faq = (props: FaqProps) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    flex
+    flex-col
+    gap-8
+  `
+  return (
+    <article itemScope itemType="https://schema.org/FAQPage">
+      <dl
+        className={cx(style, className)}
+        itemScope
+        itemProp="mainEntity"
+        itemType="https://schema.org/Question"
+        {...restProps}
+      >
+        {children}
+      </dl>
+    </article>
+  )
+}
+
+export interface QuestionProps extends React.ComponentPropsWithoutRef<'dt'> {}
+
+export const Question = (props: QuestionProps) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    flex
+    flex-row
+    gap-8
+  `
+  return (
+    <dl
+      className={cx(style, headingStyle, className)}
+      itemProp="name"
+      {...restProps}
+    >
+      <span aria-hidden="true">Q</span>
+      <span>{children}</span>
+    </dl>
+  )
+}
+
+export interface AnswerProps extends React.ComponentPropsWithoutRef<'dd'> {}
+
+export const Answer = (props: AnswerProps) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    flex
+    flex-row
+    items-start
+    gap-8
+  `
+  return (
+    <dd
+      className={cx(style, className)}
+      itemScope
+      itemProp="acceptedAnswer"
+      itemType="https://schema.org/Answer"
+      {...restProps}
+    >
+      <span className={headingStyle} aria-hidden="true">
+        A
+      </span>
+      <span itemProp="text">{children}</span>
+    </dd>
+  )
+}

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

@@ -3,14 +3,16 @@ import { cx } from '../utils/class'
 
 export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {}
 
-export const H1: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H1 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-4xlm
-    sm:text-4xl
-    mt-16
-    mb-6
+    text-h-lg-m
+    sm:text-h-lg
+    mt-8
+    mb-3
+    sm:mt-16
+    sm:mb-6
   `
 
   return (
@@ -20,14 +22,16 @@ export const H1: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   )
 }
 
-export const H2: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H2 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-3xlm
-    sm:text-3xl
-    mt-16
-    mb-6
+    text-h-med-m
+    sm:text-h-med
+    mt-8
+    mb-3
+    sm:mt-16
+    sm:mb-6
   `
 
   return (
@@ -37,14 +41,16 @@ export const H2: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   )
 }
 
-export const H3: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H3 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-2xlm
-    sm:text-2xl
-    mt-10
-    mb-6
+    text-h-sm-m
+    sm:text-h-sm
+    mt-5
+    mb-3
+    sm:mt-10
+    sm:mb-6
   `
 
   return (
@@ -54,14 +60,16 @@ export const H3: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   )
 }
 
-export const H4: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H4 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-xlm
-    sm:text-xl
-    mt-10
-    mb-4
+    text-h-xs-m
+    sm:text-h-xs
+    mt-5
+    mb-2
+    sm:mt-10
+    sm:mb-4
   `
 
   return (
@@ -71,14 +79,16 @@ export const H4: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   )
 }
 
-export const H5: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H5 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-lgm
-    sm:text-lg
-    mt-10
-    mb-4
+    text-h-xxs-m
+    sm:text-h-xxs
+    mt-5
+    mb-2
+    sm:mt-10
+    sm:mb-4
   `
 
   return (
@@ -88,14 +98,16 @@ export const H5: React.ElementType<HeadingProps> = (props: HeadingProps) => {
   )
 }
 
-export const H6: React.ElementType<HeadingProps> = (props: HeadingProps) => {
+export const H6 = (props: HeadingProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    text-lgm
-    sm:text-lg
-    mt-6
-    mb-4
+    text-h-xxs-m
+    sm:text-h-xxs
+    mt-3
+    mb-2
+    sm:mt-6
+    sm:mb-4
   `
 
   return (

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

@@ -5,10 +5,7 @@ export interface IconProps extends React.ComponentPropsWithRef<'span'> {
   icon: string
 }
 
-export const Icon: React.ElementType<IconProps> = React.forwardRef<
-  HTMLElement,
-  IconProps
->((props, ref) => {
+export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
   const { className, icon, ...restProps } = props
 
   const style = `

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

@@ -8,85 +8,100 @@ export interface IconButtonProps extends React.ComponentPropsWithRef<'button'> {
   icon: string
 }
 
-export const IconButton: React.ElementType<IconButtonProps> = React.forwardRef<
-  HTMLButtonElement,
-  IconButtonProps
->((props, ref) => {
-  const {
-    className,
-    children,
-    variant,
-    icon,
-    iconLayout,
-    rounded,
-    ...restProps
-  } = props
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => {
+    const {
+      className,
+      children,
+      variant,
+      icon,
+      iconLayout,
+      rounded,
+      ...restProps
+    } = props
 
-  const layout = iconLayout ?? 'left'
+    const layout = iconLayout ?? 'left'
 
-  const align = 'center'
+    const align = 'center'
 
-  const style = `
-      ${rounded === 'full' ? 'aspect-square' : ''}
-      inline-block
-      p-4
-      text-button
-      text-${align}
-      rounded-${rounded ? rounded : 'lg'}
-      cursor-pointer
-      whitespace-nowrap
-      border
-      border-solid
-      border-sea-600
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-500
-      disabled:border-sumi-500
-      disabled:cursor-not-allowed
-    `
+    const style = `
+    ${rounded === 'full' ? 'aspect-square' : ''}
+    inline-block
+    p-4
+    text-button
+    text-${align}
+    rounded-${rounded ? rounded : 'lg'}
+    cursor-pointer
+    whitespace-nowrap
+    border
+    border-solid
+    border-sea-800
+    active:enabled:border-sea-800/[.8]
+    hover:enabled:border-sea-800/[.85]
+    focus:outline
+    focus:outline-2
+    focus:outline-wood-600
+    disabled:border-sumi-500
+    disabled:cursor-not-allowed
+  `
 
-  const primary = `
-      text-white-1000
-      bg-sea-600
-      hover:enabled:bg-sea-700
-      active:enabled:bg-sea-800
-      disabled:bg-sumi-500
-      disabled:text-white-1000
-    `
-  const secondary = `
-      text-sea-600
-      hover:enabled:bg-sea-100
-      active:enabled:bg-sea-200
-      disabled:text-sumi-500
-    `
+    const primary = `
+    text-white-1000
+    bg-sea-800
+    active:enabled:bg-sea-800/[.8]
+    hover:enabled:bg-sea-800/[.85]
+    disabled:bg-sumi-500
+    disabled:text-white-1000
+  `
+    const secondary = `
+    text-sea-800
+    bg-transparent
+    active:enabled:bg-sea-50/[.60]
+    hover:enabled:bg-sea-50
+    active:enabled:text-sea-800/[.85]
+    hover:enabled:text-sea-800/[.85]
+    disabled:text-sumi-500
+  `
 
-  const styles = {
-    primary: primary,
-    secondary: secondary
-  }
+    const styles = {
+      primary: primary,
+      secondary: secondary
+    }
+
+    const iconStyle = `
+    inline-block
+    align-middle
+    font-icon
+    text-2xl
+    font-light
+    leading-4
+    antialiased
+    mb-1
+  `
 
-  const iconStyle = `
-      inline-block
-      align-middle
-      font-icon
-      text-2xl
-      font-light
-      leading-4
-      antialiased
-      mb-1
-    `
+    // When text is specified on a button, set the 'aria-hidden' attribute of the icon to true.
+    const ariaHidden = children ? true : false
 
-  return (
-    <button
-      className={cx(style, styles[variant ?? 'primary'], className)}
-      {...restProps}
-      ref={ref}
-    >
-      {layout == 'left' && <span className={cx(iconStyle)}>{icon}</span>}
-      {children && <span className="mx-1 inline-block">{children}</span>}
-      {layout == 'right' && <span className={cx(iconStyle)}>{icon}</span>}
-    </button>
-  )
-})
+    return (
+      <button
+        className={cx(style, styles[variant ?? 'primary'], className)}
+        {...restProps}
+        ref={ref}
+      >
+        {layout == 'left' && (
+          <span className={cx(iconStyle)} aria-hidden={ariaHidden}>
+            {icon}
+          </span>
+        )}
+        {children && <span className="mx-1 inline-block">{children}</span>}
+        {layout == 'right' && (
+          <span className={cx(iconStyle)} aria-hidden={ariaHidden}>
+            {icon}
+          </span>
+        )}
+      </button>
+    )
+  }
+)
 
 IconButton.displayName = 'IconButton'

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

@@ -6,31 +6,31 @@ export interface InfoCardProps
   title?: string
 }
 
-export const InfoCard: React.ElementType<InfoCardProps> = (
-  props: InfoCardProps
-) => {
+export const InfoCard = (props: InfoCardProps) => {
   const { className, children, title, ...restProps } = props
 
   const style = `
-    bg-sumi-50
-    border-sumi-300
     border
     border-solid
-    rounded-[12px]
+    border-sumi-300
+    rounded-2xl
+    sm:rounded-3xl
     text-sumi-900
   `
 
   const topStyle = `
-    px-4
-    pt-4
-    mb-1
-    text-lgm
-    sm:text-lg
+    pt-6
+    px-6
+    text-h-xxs-m
+    sm:text-h-xxs
+    leading-none
+    mb-2
   `
 
   const bottmStyle = `
-    px-4
-    pb-4
+    pb-6
+    px-6
+    text-base
   `
 
   const headingId = React.useId()

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

@@ -30,15 +30,13 @@ const getFileType = (url: string) => {
 
 export interface LinkProps extends React.ComponentPropsWithRef<'a'> {}
 
-export const Link: React.ElementType<LinkProps> = React.forwardRef<
-  HTMLAnchorElement,
-  LinkProps
->((props, ref) => {
-  const { className, children, ...restProps } = props
-  const href = props.href ?? ''
-  const fileType = getFileType(href)
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, ref) => {
+    const { className, children, ...restProps } = props
+    const href = props.href ?? ''
+    const fileType = getFileType(href)
 
-  const style = `
+    const style = `
       rounded-sm
       cursor-pointer
       text-sea-600
@@ -53,27 +51,28 @@ export const Link: React.ElementType<LinkProps> = React.forwardRef<
       disabled:border-sumi-500
     `
 
-  if (href.startsWith('http')) {
+    if (href.startsWith('http')) {
+      return (
+        <a
+          className={cx(style, className)}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          {...restProps}
+          ref={ref}
+        >
+          {children}
+          {fileType ? `（${fileType}）` : null}
+        </a>
+      )
+    }
     return (
-      <a
-        className={cx(style, className)}
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        {...restProps}
-        ref={ref}
-      >
+      <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
         {children}
         {fileType ? `（${fileType}）` : null}
       </a>
     )
   }
-  return (
-    <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
-      {children}
-      {fileType ? `（${fileType}）` : null}
-    </a>
-  )
-})
+)
 
 Link.displayName = 'Link'

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

@@ -3,7 +3,7 @@ import { cx } from '../utils/class'
 
 export interface UlProps extends React.ComponentPropsWithoutRef<'ul'> {}
 
-export const Ul: React.ElementType<UlProps> = (props: UlProps) => {
+export const Ul = (props: UlProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -11,7 +11,7 @@ export const Ul: React.ElementType<UlProps> = (props: UlProps) => {
     list-inside
     -indent-4
     pl-4
-    marker:text-xs
+    marker:text-base-sm
   `
   return (
     <ul className={cx(style, className)} {...restProps}>
@@ -22,7 +22,7 @@ export const Ul: React.ElementType<UlProps> = (props: UlProps) => {
 
 export interface OlProps extends React.ComponentPropsWithoutRef<'ol'> {}
 
-export const Ol: React.ElementType<OlProps> = (props: OlProps) => {
+export const Ol = (props: OlProps) => {
   const { className, children, ...restProps } = props
 
   const style = `

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

@@ -3,7 +3,7 @@ import { cx } from '../utils/class'
 
 export interface PreProps extends React.ComponentPropsWithoutRef<'pre'> {}
 
-export const Pre: React.ElementType<PreProps> = (props: PreProps) => {
+export const Pre = (props: PreProps) => {
   const { className, children, ...restProps } = props
 
   const style = `