@sakura-ui/sakura-ui 0.2.0 → 0.4.1

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

@@ -0,0 +1,126 @@
+import React from 'react'
+import { cx, Style } from '@sakura-ui/helper'
+import { Card, CardFooter, CardHeader } from './Card'
+import { Icon } from './Icon'
+
+export namespace LinkCard {
+  export interface Props<T extends React.ElementType>
+    extends React.ComponentProps<'article'> {
+    href: string
+    target?: string
+    linkAs?: T
+  }
+}
+
+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
+    rounded-2xl
+    sm:rounded-3xl
+    w-full h-full
+    ${Style.focusCard}
+    group
+  `
+
+  const styleHover = `
+    group-hover:outline
+    group-hover:outline-blue-900
+    group-hover:outline-4
+    group-hover:outline-offset-[-1px]
+  `
+
+  return (
+    <Component className={cx(styleLink)} href={href} target={target}>
+      <Card className={cx(styleHover, className)} {...rest}>
+        {children}
+      </Card>
+    </Component>
+  )
+}
+
+export namespace LinkCardHeader {
+  export interface Props extends React.ComponentProps<'div'> {
+    target?: string
+  }
+}
+
+export const LinkCardHeader = ({
+  target,
+  className,
+  children
+}: 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 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 (
+    <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/List.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
-export interface UlProps extends React.ComponentPropsWithoutRef<'ul'> {}
+export namespace Ul {
+  export interface Props extends React.ComponentPropsWithoutRef<'ul'> {}
+}
 
-export const Ul = (props: UlProps) => {
+export const Ul = (props: Ul.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     list-disc
-    list-inside
-    -indent-4
-    pl-4
-    marker:text-base-sm
+    [&_&]:list-circle
+    [&_&_&]:list-square
+    pl-8
   `
   return (
     <ul className={cx(style, className)} {...restProps}>
@@ -20,16 +21,17 @@ export const Ul = (props: UlProps) => {
   )
 }
 
-export interface OlProps extends React.ComponentPropsWithoutRef<'ol'> {}
+export namespace Ol {
+  export interface Props extends React.ComponentPropsWithoutRef<'ol'> {}
+}
 
-export const Ol = (props: OlProps) => {
+export const Ol = (props: Ol.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     list-decimal
-    list-inside
-    -indent-4
-    pl-4
+    [&_&]:list-lower-latin
+    pl-8
   `
   return (
     <ol className={cx(style, className)} {...restProps}>

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

@@ -0,0 +1,112 @@
+import React from 'react'
+import { cx, mod, focusableSelector, Style } from '@sakura-ui/helper'
+import { Menu, MenuMobile, Close, CloseMobile } from '@/icons'
+
+export namespace MenuButton {
+  export interface Props extends React.ComponentPropsWithRef<'button'> {}
+}
+
+export const MenuButton = ({
+  className,
+  children,
+  onChange,
+  ...rest
+}: MenuButton.Props) => {
+  // leading 16px * 1.375(snug) + padding top 12px + padding bottom 12px + border * 2 = 48px
+  const styleMenuItem = `
+    w-fit
+    py-[1px]
+    sm:py-3
+    text-base
+    leading-snug
+    ${Style.clickable}
+    ${Style.hoverUnderline}
+    ${Style.focusRoundedWithBg}
+  `
+
+  const dialogRef = React.useRef<HTMLDialogElement>(null)
+
+  React.useEffect(() => {
+    document.body.style.overflow = 'auto'
+  }, [])
+
+  const open = () => {
+    dialogRef.current?.showModal()
+    document.body.style.overflow = 'hidden'
+  }
+  const close = () => {
+    dialogRef.current?.close()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    // Focus trap
+    if (e.key === 'Tab') {
+      e.preventDefault()
+
+      const focusables: HTMLElement[] = Array.from(
+        dialogRef.current?.querySelectorAll(focusableSelector) || []
+      )
+      if (focusables.length === 0) return
+
+      const tabIndex = focusables.indexOf(
+        document.activeElement as HTMLElement
+      )
+      // If there is no focused element, focus the first element
+      if (tabIndex === -1) {
+        focusables[0].focus()
+        return
+      }
+      const nextIndex = mod(tabIndex + (e.shiftKey ? -1 : 1), focusables.length)
+      focusables[nextIndex].focus()
+
+      return
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+
+      close()
+    }
+  }
+
+  const handleOnClose = (_: React.KeyboardEvent<HTMLDialogElement>) => {
+    document.body.style.overflow = 'auto'
+  }
+
+  const handleOnClick = (e: React.MouseEvent<HTMLElement>) => {
+    if ((e.target as HTMLElement).nodeName === 'DIALOG') {
+      close()
+    }
+  }
+
+  return (
+    <div className={className}>
+      <dialog
+        ref={dialogRef}
+        className="peer"
+        onKeyDown={handleKeyDown}
+        onClick={handleOnClick}
+        onClose={handleOnClose}
+      >
+        {children}
+      </dialog>
+      <button
+        className={cx(styleMenuItem, 'flex items-center peer-open:hidden')}
+        onClick={open}
+        {...rest}
+      >
+        <MenuMobile size={44} className="inline-block sm:hidden" />
+        <Menu size={22} className="hidden sm:inline-block mr-1" />
+        <span className="hidden sm:inline">Menu</span>
+      </button>
+      <button
+        className={cx(styleMenuItem, 'peer-open:flex items-center hidden')}
+        onClick={close}
+        {...rest}
+      >
+        <CloseMobile size={44} className="inline-block sm:hidden" />
+        <Close size={22} className="hidden sm:inline-block mr-1" />
+        <span className="hidden sm:inline">Close</span>
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import { cx, Style } from '@sakura-ui/helper'
+
+export namespace NavigationItem {
+  export interface Props<T extends React.ElementType> {
+    as?: T
+  }
+}
+
+export const NavigationItem = <T extends React.ElementType = 'a'>(
+  props: NavigationItem.Props<T> &
+    Omit<React.ComponentProps<T>, keyof NavigationItem.Props<T>>
+) => {
+  const { as, className, children, ...rest } = props
+
+  const Component = as || 'a'
+
+  // leading 16px * 1.375(snug) + padding top 12px + padding bottom 12px + border * 2 = 48px
+  const style = `
+      inline-block
+      w-fit
+      py-3
+      text-base
+      leading-snug
+      ${Style.clickable}
+      ${Style.hoverUnderline}
+      ${Style.focusRectWithBg}
+    `
+
+  return (
+    <Component
+      className={cx(style, className)}
+      rel="noopener noreferrer"
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}
+
+NavigationItem.displayName = '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/OverflowContainer.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { cx } from '@sakura-ui/helper'
+
+export namespace OverflowContainer {
+  export interface Props extends React.ComponentPropsWithoutRef<'div'> {}
+}
+
+export const OverflowContainer = (props: OverflowContainer.Props) => {
+  const { className, children, ...restProps } = props
+
+  const style = `
+    w-full
+    overflow-x-auto
+    whitespace-nowrap
+    print:overflow-visible
+    print:whitespace-normal
+  `
+
+  return (
+    <div className={cx(style, className)} {...restProps}>
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,82 @@
+import React from 'react'
+import { cx, Style } from '@sakura-ui/helper'
+import { Icon } from './Icon'
+
+export const PopoverMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>((props, ref) => {
+  const { className, children, ...rest } = props
+  const stylePopover = `
+    min-w-fit
+    w-auto
+    py-2
+    bg-white
+    shadow-1
+    rounded-lg
+    border
+    border-solid-grey-420
+    has-[>:nth-child(7)]:rounded-r-none
+  `
+
+  const style = `
+    font-normal
+    whitespace-nowrap
+    ${stylePopover}
+  `
+
+  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>
+  )
+})
+
+PopoverMenu.displayName = 'PopoverMenu'
+
+export const PopoverMenuItem = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<'a'>
+>((props, ref) => {
+  const { className, children, ...rest } = props
+
+  const style = `
+    py-1.5 pl-1.5 pr-4
+    flex
+    items-center
+    gap-x-1.5
+    hover:bg-solid-grey-50
+    ${Style.focusRectCondensedWithBg}
+  `
+
+  const styleSelected = `
+    !text-blue-1000
+    !bg-blue-100
+    font-bold
+  `
+
+  const current = rest['aria-current'] ?? false
+
+  return (
+    <li role="presentation">
+      <a
+        aria-current={current}
+        ref={ref}
+        role="menuitem"
+        className={cx(style, current && styleSelected)}
+        {...rest}
+      >
+        <Icon
+          opticalSize={20}
+          className={`flex-none ${!current && 'invisible'}`}
+        >
+          check
+        </Icon>
+        <span className={Style.hoverUnderline}>{children}</span>
+      </a>
+    </li>
+  )
+})
+
+PopoverMenuItem.displayName = 'PopoverMenuItem'

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

@@ -1,14 +1,16 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
-export interface PreProps extends React.ComponentPropsWithoutRef<'pre'> {}
+export namespace Pre {
+  export interface Props extends React.ComponentPropsWithoutRef<'pre'> {}
+}
 
-export const Pre = (props: PreProps) => {
+export const Pre = (props: Pre.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
     p-4
-    bg-sumi-50
+    bg-solid-gray-50
     rounded-lg
     whitespace-pre-wrap
     overflow-y-scroll

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

@@ -1,35 +1,31 @@
 import React from 'react'
-import { cx } from '../libs/cx'
+import { cx } from '@sakura-ui/helper'
 
-export interface TableProps extends React.ComponentPropsWithoutRef<'table'> {}
+export namespace Table {
+  export interface Props extends React.ComponentPropsWithoutRef<'table'> {}
+}
 
 const styleBorder = `
   border
   border-collapse
-  border-[#cccccc]
+  border-solid-grey-420
 `
 
-export const Table = (props: TableProps) => {
+export const Table = (props: Table.Props) => {
   const { className, children, ...restProps } = props
 
-  // If there is no break-all setting, the table will protrude when using a smartphone
-  const style = `
-    w-full
-    table-auto
-    break-all
-  `
-
   return (
-    <table className={cx(style, styleBorder, className)} {...restProps}>
+    <table className={cx(styleBorder, className)} {...restProps}>
       {children}
     </table>
   )
 }
 
-export interface CaptionProps
-  extends React.ComponentPropsWithoutRef<'caption'> {}
+export namespace Caption {
+  export interface Props extends React.ComponentPropsWithoutRef<'caption'> {}
+}
 
-export const Caption = (props: CaptionProps) => {
+export const Caption = (props: Caption.Props) => {
   const { className, children, ...restProps } = props
 
   const style = 'text-left'
@@ -40,9 +36,11 @@ export const Caption = (props: CaptionProps) => {
   )
 }
 
-export interface TheadProps extends React.ComponentPropsWithoutRef<'thead'> {}
+export namespace Thead {
+  export interface Props extends React.ComponentPropsWithoutRef<'thead'> {}
+}
 
-export const Thead = (props: TheadProps) => {
+export const Thead = (props: Thead.Props) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -52,9 +50,11 @@ export const Thead = (props: TheadProps) => {
   )
 }
 
-export interface TbodyProps extends React.ComponentPropsWithoutRef<'tbody'> {}
+export namespace Tbody {
+  export interface Props extends React.ComponentPropsWithoutRef<'tbody'> {}
+}
 
-export const Tbody = (props: TbodyProps) => {
+export const Tbody = (props: Tbody.Props) => {
   const { className, children, ...restProps } = props
 
   return (
@@ -64,9 +64,11 @@ export const Tbody = (props: TbodyProps) => {
   )
 }
 
-export interface ThProps extends React.ComponentPropsWithoutRef<'th'> {}
+export namespace Th {
+  export interface Props extends React.ComponentPropsWithoutRef<'th'> {}
+}
 
-export const Th = (props: ThProps) => {
+export const Th = (props: Th.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `
@@ -82,9 +84,11 @@ export const Th = (props: ThProps) => {
   )
 }
 
-export interface TrProps extends React.ComponentPropsWithoutRef<'tr'> {}
+export namespace Tr {
+  export interface Props extends React.ComponentPropsWithoutRef<'tr'> {}
+}
 
-export const Tr = (props: TrProps) => {
+export const Tr = (props: Tr.Props) => {
   const { className, children, ...restProps } = props
 
   const style = ''
@@ -96,9 +100,11 @@ export const Tr = (props: TrProps) => {
   )
 }
 
-export interface TdProps extends React.ComponentPropsWithoutRef<'td'> {}
+export namespace Td {
+  export interface Props extends React.ComponentPropsWithoutRef<'td'> {}
+}
 
-export const Td = (props: TdProps) => {
+export const Td = (props: Td.Props) => {
   const { className, children, ...restProps } = props
 
   const style = `