@sakura-ui/sakura-ui 0.2.0 → 0.3.0

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

@@ -1,33 +1,43 @@
-import { cx } from '../libs/cx'
-import type { ComponentWithAs } from '../types/component'
-import { forwardRef } from '../libs/forward-ref'
-import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
+import React, { type ComponentProps } from 'react'
+import { cx } from '@sakura-ui/helper'
+import {
+  base,
+  getVariantStyle,
+  getSizeStyle,
+  type ButtonVariant,
+  type ButtonSize
+} from './buttonStyle'
 
-export interface IconButtonProps {
-  variant?: 'primary' | 'secondary'
-  size?: 'lg' | 'md' | 'sm' | 'xs'
-  iconLayout?: 'left' | 'right'
-  icon: string
-  rounded?: string
+export namespace IconButton {
+  export interface Props<T extends React.ElementType> {
+    as?: T
+    variant?: ButtonVariant
+    size?: ButtonSize
+    iconLayout?: 'left' | 'right'
+    icon: string
+    rounded?: string
+  }
 }
 
-export const IconButton: ComponentWithAs<'button', IconButtonProps> =
-  forwardRef((props, ref) => {
-    const {
-      as: Component = 'button',
-      variant = 'primary',
-      size = 'lg',
-      iconLayout = 'left',
-      icon,
-      rounded,
-      className,
-      children,
-      ...restProps
-    } = props
+export const IconButton = <T extends React.ElementType = 'button'>(
+  props: IconButton.Props<T> &
+    Omit<React.ComponentProps<T>, keyof IconButton.Props<T>>
+) => {
+  const {
+    as: Component = 'button',
+    variant = 'solid-fill',
+    size = 'lg',
+    iconLayout = 'left',
+    icon,
+    rounded,
+    className,
+    children,
+    ...restProps
+  } = props
 
-    const styleFontSize = `${size === 'xs' ? 'scale-105' : 'scale-125'}`
+  const styleFontSize = `${size === 'xs' ? 'scale-105' : 'scale-125'}`
 
-    const styleIcon = `
+  const styleIcon = `
       inline-block
       align-middle
       mb-1
@@ -37,23 +47,23 @@ export const IconButton: ComponentWithAs<'button', IconButtonProps> =
       antialiased
     `
 
-    const styleRounded = `${rounded ? 'aspect-square !rounded-full !py-0' : ''}`
+  const styleRounded = `${rounded ? 'aspect-square !rounded-full !py-0' : ''}`
 
-    // When text is specified on a button, set the 'aria-hidden' attribute of the icon to true.
-    const ariaHidden = !!children
+  // When text is specified on a button, set the 'aria-hidden' attribute of the icon to true.
+  const ariaHidden = !!children
 
-    return (
-      <Component
-        className={cx(
-          base,
-          getVariantStyle(variant),
-          getSizeStyle(size),
-          styleRounded,
-          className
-        )}
-        {...restProps}
-        ref={ref}
-      >
+  return (
+    <Component
+      className={cx(
+        base,
+        getVariantStyle(variant),
+        getSizeStyle(size),
+        styleRounded,
+        className
+      )}
+      {...restProps}
+    >
+      <span>
         {iconLayout === 'left' && (
           <span
             className={cx(styleIcon, styleFontSize)}
@@ -71,8 +81,9 @@ export const IconButton: ComponentWithAs<'button', IconButtonProps> =
             {icon}
           </span>
         )}
-      </Component>
-    )
-  })
+      </span>
+    </Component>
+  )
+}
 
 IconButton.displayName = 'IconButton'

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

@@ -0,0 +1,135 @@
+import React from 'react'
+import { cx, mod, focusableSelector, Style } from '@sakura-ui/helper'
+import { Language, LanguageMobile, KeyboadArrowDown } from '@/icons'
+import { PopoverMenu, PopoverMenuItem } from './PopoverMenu'
+
+export namespace LangSelector {
+  interface Lang {
+    code: string
+    title: string
+    path: string
+  }
+  // Tailwind 3.4.5 or higher is required to use anchor-name.
+  // https://github.com/tailwindlabs/tailwindcss/issues/13818
+  export interface Props extends React.ComponentPropsWithRef<'button'> {
+    current: string
+    langs: Lang[]
+  }
+}
+
+export const LangSelector = ({
+  current,
+  langs,
+  className,
+  ...restProps
+}: LangSelector.Props) => {
+  const styleRoot = `
+    relative
+    group
+  `
+
+  const styleAnchorName = `
+    [anchor-name:--target]
+  `
+
+  // height: text-base(16px)*1.375 + p-3(12px)*2 + border(1px)*2  = 48px
+  const styleButton = `
+    w-fit
+    py-[1px]
+    sm:py-3
+    text-base
+    leading-snug
+    ${Style.clickable}
+    ${Style.focusRoundedWithBg}
+    ${Style.hoverUnderline}
+    ${styleAnchorName}
+    flex items-center
+  `
+
+  const stylePositionBottomRight = `
+    absolute
+    top-[anchor(--target_bottom)]
+    right-[anchor(--target_right)] 
+    position-try-options:flip-block]
+    inset-[unset]
+  `
+
+  const targetId = React.useId()
+
+  const menuRef = React.useRef<HTMLUListElement>(null)
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    if (e.key === 'Tab') {
+      e.preventDefault()
+
+      const focusables: HTMLElement[] = Array.from(
+        menuRef.current?.querySelectorAll(focusableSelector) || []
+      )
+      if (focusables.length === 0) return
+
+      const tabIndex = focusables.findIndex(
+        (el) => el === document.activeElement
+      )
+      // 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
+    }
+  }
+
+  React.useEffect(() => {
+    const handleToggle = () => {
+      const focusable: HTMLElement | null | undefined =
+        menuRef.current?.querySelector(focusableSelector)
+      if (!focusable) return
+      focusable.focus()
+    }
+
+    menuRef.current?.addEventListener('toggle', handleToggle)
+
+    return () => menuRef.current?.removeEventListener('toggle', handleToggle)
+  }, [])
+
+  return (
+    <div className={cx(className, styleRoot)}>
+      <button
+        popoverTarget={targetId}
+        type="button"
+        className={styleButton}
+        {...restProps}
+      >
+        <Language size={20} className="hidden sm:mt-0.5 sm:inline-block" />
+        <span className="hidden sm:mx-1 sm:inline">Language</span>
+        <LanguageMobile size={44} className="inline-block sm:hidden" />
+        <KeyboadArrowDown
+          size={16}
+          className="inline-block sm:mt-1 group-[:has(:popover-open)]:rotate-180"
+        />
+      </button>
+      <PopoverMenu
+        ref={menuRef}
+        id={targetId}
+        popover="auto"
+        onKeyDown={handleKeyDown}
+        className={stylePositionBottomRight}
+      >
+        {langs.map((lang) => (
+          <PopoverMenuItem
+            key={lang.code}
+            aria-current={current === lang.code}
+            href={lang.path}
+          >
+            {lang.title}
+          </PopoverMenuItem>
+        ))}
+      </PopoverMenu>
+    </div>
+  )
+}
+
+LangSelector.displayName = 'LangSelector'

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

@@ -1,79 +1,51 @@
-import { cx } from '../libs/cx'
-import type { ComponentWithAs } from '../types/component'
-import { forwardRef } from '../libs/forward-ref'
+import React from 'react'
+import { cx, Style } from '@sakura-ui/helper'
+import { Icon } from './Icon'
 
-// biome-ignore lint/suspicious/noEmptyInterface:
-export interface LinkProps {}
-
-export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
-  (props, ref) => {
-    const {
-      as: Component = 'a',
-      href,
-      className,
-      children,
-      ...restProps
-    } = props
-
-    const styleUnderLine = `
-      underline
-      underline-offset-[0.125em]
-    `
+export namespace Link {
+  export interface Props<T extends React.ElementType> {
+    as?: T
+  }
+}
 
-    // Make lines break at each word
-    const style = `
-      rounded-sm
-      cursor-pointer
-      text-sea-600
-      hover:text-sea-800
-      active:text-sea-800
-      visited:text-sea-900
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-500
-      disabled:border-sumi-500
-      [overflow-wrap:anywhere]
-    `
+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
 
-    const styleIcon = `
-      align-middle
-      ml-0.5
-      text-sumi-700
-      font-icon
-      font-light
-      leading-4
-      antialiased
-    `
+  // 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]
+  `
 
-    if (href?.startsWith('http')) {
-      return (
-        <Component
-          className={cx(style, className)}
-          href={href}
-          target="_blank"
-          rel="noopener noreferrer"
-          {...restProps}
-          ref={ref}
-        >
-          <span className={styleUnderLine}>{children}</span>
-          <span className={cx(styleIcon)} aria-hidden="true">
-            open_in_new
-          </span>
-          <span className="sr-only">Opens in new tab</span>
-        </Component>
-      )
-    }
+  if (restProps.href?.startsWith('http') || restProps.target === '_blank') {
     return (
       <Component
-        className={cx(style, styleUnderLine, className)}
-        href={href}
+        className={cx(style, className)}
+        target="_blank"
+        rel="noopener noreferrer"
         {...restProps}
-        ref={ref}
       >
-        {children}
+        <span>{children}</span>
+        <Icon opticalSize={16} altText="Opens in new tab" className="ml-0.5">
+          open_in_new
+        </Icon>
       </Component>
     )
   }
-)
+
+  return (
+    <Component className={cx(style, className)} {...restProps}>
+      {children}
+    </Component>
+  )
+}
 
 Link.displayName = 'Link'

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

@@ -0,0 +1,91 @@
+import React from 'react'
+import { cx, Style } from '@sakura-ui/helper'
+import { Card, 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'> {
+    href: string
+  }
+}
+
+export const LinkCard = ({
+  href,
+  className,
+  children,
+  ...rest
+}: LinkCard.Props) => {
+  const styleLink = `
+    grid
+    outline-offset-4
+    rounded-2xl
+    sm:rounded-3xl
+    w-full h-full
+    ${Style.focusCard}
+  `
+
+  const styleHover = `
+    hover:text-blue-1000
+    hover:border-blue-1000
+  `
+
+  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>
+  )
+}
+
+export interface LinkCardHeaderProps extends React.ComponentProps<'div'> {}
+
+export const LinkCardHeader = ({
+  className,
+  children
+}: LinkCardHeaderProps) => {
+  const { href } = React.useContext(LinkContext)
+
+  const styleHeading = `
+    flex
+    justify-between
+    items-center
+  `
+
+  const isExternal = href.startsWith('https://')
+
+  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>
+  )
+}

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.findIndex(
+        (el) => el === document.activeElement
+      )
+      // 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, { type ComponentProps } 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/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>
+  )
+}