@sakura-ui/sakura-ui 0.1.16 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",

package/packages/config/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@sakura-ui/config",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs.js",
       "import": "./dist/index.es.js"
     }

package/packages/config/src/index.ts

@@ -155,6 +155,14 @@ const sakuraPlugin = plugin(
               fontWeight: '700'
             }
           ],
+          'button-sm': [
+            '14px',
+            {
+              lineHeight: '14px',
+              letterSpacing: '0.04em',
+              fontWeight: '700'
+            }
+          ],
           label: [
             '14px',
             {

package/packages/core/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.1.16",
+  "version": "0.1.27",
   "type": "module",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs.js",
       "import": "./dist/index.es.js"
     }

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

@@ -1,70 +1,37 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
+import { ComponentWithAs } from '../types/component'
+import { forwardRef } from '../libs/forward-ref'
+import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
 
-export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
+export interface ButtonProps {
   variant?: 'primary' | 'secondary'
-  textAlign?: 'left' | 'right' | 'center'
+  size?: 'lg' | 'md' | 'sm' | 'xs'
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+export const Button: ComponentWithAs<'button', ButtonProps> = forwardRef(
   (props, ref) => {
-    // Make sure that there is no problem even if className is specified on the side that uses the component
-    const { className, children, textAlign, variant, ...restProps } = props
-
-    const align = textAlign ?? 'center'
-
-    const style = `
-    select-none
-    inline-block
-    p-4
-    text-button
-    text-${align}
-    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-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 {
+      as: Component = 'button',
+      variant = 'primary',
+      size = 'lg',
+      className,
+      children,
+      ...restProps
+    } = props
 
     return (
-      <button
-        className={cx(style, styles[variant ?? 'primary'], className)}
+      <Component
+        className={cx(
+          base,
+          getVariantStyle(variant),
+          getSizeStyle(size),
+          className
+        )}
         {...restProps}
         ref={ref}
       >
         {children}
-      </button>
+      </Component>
     )
   }
 )

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 interface IdContextType {
   id: string
@@ -23,8 +23,6 @@ export const Card = (props: CardProps) => {
     sm:rounded-3xl
     text-sumi-900
     overflow-hidden
-    flex
-    flex-col
   `
 
   return (
@@ -48,21 +46,22 @@ export const CardHeader = (props: CardHeaderProps) => {
   const ctx = React.useContext(IdContext)
 
   const style = `
-    py-6
     px-6
-    text-h-xxs-m
-    sm:text-h-xxs
-    leading-none
+    first:pt-6
+    last:pb-6
+    py-3
+    text-base
+    font-medium
   `
 
   return (
-    <h2 id={ctx.id} className={cx(style, className)} {...restProps}>
+    <div id={ctx.id} className={cx(style, className)} {...restProps}>
       {children}
-    </h2>
+    </div>
   )
 }
 
-export interface CardBodyProps extends React.ComponentPropsWithoutRef<'p'> {}
+export interface CardBodyProps extends React.ComponentPropsWithoutRef<'div'> {}
 
 export const CardBody = (props: CardBodyProps) => {
   const { className, children, ...restProps } = props
@@ -70,8 +69,9 @@ export const CardBody = (props: CardBodyProps) => {
   const style = `
     px-6
     first:pt-6
-    pb-6
-    text-base
+    last:pb-6
+    pb-3
+    text-base-sm
   `
 
   return (
@@ -88,10 +88,10 @@ export const CardFooter = (props: CardFooterProps) => {
   const { className, children, ...restProps } = props
 
   const style = `
-    mt-auto
     px-6
     first:pt-6
-    pb-6
+    last:pb-6
+    text-base-sm
   `
 
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface CodeProps extends React.ComponentPropsWithoutRef<'code'> {}
 

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

@@ -1,12 +1,11 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface FaqProps extends React.ComponentPropsWithoutRef<'dl'> {}
 
 const headingStyle = `
   text-h-med-m
   sm:text-h-med
-  !leading-none
 `
 
 export const Faq = (props: FaqProps) => {
@@ -41,8 +40,7 @@ export const Question = (props: QuestionProps) => {
     flex
     flex-row
     gap-8
-    mt-10
-    first:mt-0
+    mt-8
   `
   return (
     <dt
@@ -75,7 +73,7 @@ export const Answer = (props: AnswerProps) => {
       itemType="https://schema.org/Answer"
       {...restProps}
     >
-      <span className={headingStyle} aria-hidden="true">
+      <span className={cx(headingStyle, '!leading-none')} aria-hidden="true">
         A
       </span>
       <span itemProp="text">{children}</span>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {}
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface IconProps extends React.ComponentPropsWithRef<'span'> {
   icon: string
@@ -9,14 +9,10 @@ export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
   const { className, icon, ...restProps } = props
 
   const style = `
-    inline-block
+    inline
     align-middle
     font-icon
-    text-2xl
-    font-light
-    leading-none
     antialiased
-    mb-1
   `
 
   return (

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

@@ -1,107 +1,78 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
+import { ComponentWithAs } from '../types/component'
+import { forwardRef } from '../libs/forward-ref'
+import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
 
-export interface IconButtonProps extends React.ComponentPropsWithRef<'button'> {
+export interface IconButtonProps {
   variant?: 'primary' | 'secondary'
+  size?: 'lg' | 'md' | 'sm' | 'xs'
   iconLayout?: 'left' | 'right'
-  rounded?: string
   icon: string
+  rounded?: string
 }
 
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  (props, ref) => {
+export const IconButton: ComponentWithAs<'button', IconButtonProps> =
+  forwardRef((props, ref) => {
     const {
-      className,
-      children,
-      variant,
+      as: Component = 'button',
+      variant = 'primary',
+      size = 'lg',
+      iconLayout = 'left',
       icon,
-      iconLayout,
       rounded,
+      className,
+      children,
       ...restProps
     } = props
 
-    const layout = iconLayout ?? 'left'
-
-    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-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 styleFontSize = `${size === 'xs' ? `scale-105` : `scale-125`}`
 
-    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 styleIcon = `
+      inline-block
+      align-middle
+      mb-1
+      font-icon
+      font-light
+      leading-[0px]      
+      antialiased
+    `
 
-    const styles = {
-      primary: primary,
-      secondary: secondary
-    }
-
-    const iconStyle = `
-    inline-block
-    align-middle
-    font-icon
-    text-2xl
-    font-light
-    leading-4
-    antialiased
-    mb-1
-  `
+    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 ? true : false
 
     return (
-      <button
-        className={cx(style, styles[variant ?? 'primary'], className)}
+      <Component
+        className={cx(
+          base,
+          getVariantStyle(variant),
+          getSizeStyle(size),
+          styleRounded,
+          className
+        )}
         {...restProps}
         ref={ref}
       >
-        {layout == 'left' && (
-          <span className={cx(iconStyle)} aria-hidden={ariaHidden}>
+        {iconLayout == 'left' && (
+          <span
+            className={cx(styleIcon, styleFontSize)}
+            aria-hidden={ariaHidden}
+          >
             {icon}
           </span>
         )}
-        {children && <span className="mx-1 inline-block">{children}</span>}
-        {layout == 'right' && (
-          <span className={cx(iconStyle)} aria-hidden={ariaHidden}>
+        {children && <span className="mx-1">{children}</span>}
+        {iconLayout == 'right' && (
+          <span
+            className={cx(styleIcon, styleFontSize)}
+            aria-hidden={ariaHidden}
+          >
             {icon}
           </span>
         )}
-      </button>
+      </Component>
     )
-  }
-)
+  })
 
 IconButton.displayName = 'IconButton'

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface InfoCardProps
   extends React.ComponentPropsWithoutRef<'section'> {

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

@@ -1,47 +1,29 @@
-import React from 'react'
-import { cx } from '../utils/class'
+import { useState, useEffect } from 'react'
+import { cx } from '../libs/cx'
+import { ComponentWithAs } from '../types/component'
+import { forwardRef } from '../libs/forward-ref'
 
-const getFileType = (url: string) => {
-  const converted = url.toLowerCase()
+export interface LinkProps {}
 
-  if (converted.endsWith('.pdf')) {
-    return 'PDF'
-  }
-  if (converted.endsWith('.doc') || converted.endsWith('.docx')) {
-    return 'Word'
-  }
-  if (converted.endsWith('.xls') || converted.endsWith('.xlsx')) {
-    return 'Excel'
-  }
-  if (converted.endsWith('.csv')) {
-    return 'CSV'
-  }
-  if (converted.endsWith('.json')) {
-    return 'JSON'
-  }
-  if (converted.endsWith('.ndjson')) {
-    return 'NDJSON'
-  }
-  if (converted.includes('youtu.be')) {
-    return 'YouTube'
-  }
-  return null
-}
-
-export interface LinkProps extends React.ComponentPropsWithRef<'a'> {}
-
-export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
   (props, ref) => {
-    const { className, children, ...restProps } = props
-    const href = props.href ?? ''
-    const fileType = getFileType(href)
+    const {
+      as: Component = 'a',
+      href,
+      className,
+      children,
+      ...restProps
+    } = props
+
+    const styleUnderLine = `
+      underline
+      underline-offset-[0.125em]
+    `
 
     const style = `
       rounded-sm
       cursor-pointer
       text-sea-600
-      underline
-      underline-offset-[0.125em]
       hover:text-sea-800
       active:text-sea-800
       visited:text-sea-900
@@ -51,9 +33,30 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       disabled:border-sumi-500
     `
 
-    if (href.startsWith('http')) {
+    const styleIcon = `
+      align-middle
+      ml-0.5
+      text-sumi-700
+      font-icon
+      font-light
+      leading-4
+      antialiased
+    `
+
+    const [iconLabel, setIconLabel] = useState('')
+    useEffect(() => {
+      const language =
+        (window.navigator.languages && window.navigator.languages[0]) ||
+        window.navigator.language
+      if (language === 'ja') {
+        setIconLabel('新規タブで開きます')
+      }
+      setIconLabel('Opens in new tab')
+    }, [])
+
+    if (href?.startsWith('http')) {
       return (
-        <a
+        <Component
           className={cx(style, className)}
           href={href}
           target="_blank"
@@ -61,16 +64,22 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           {...restProps}
           ref={ref}
         >
-          {children}
-          {fileType ? `（${fileType}）` : null}
-        </a>
+          <span className={styleUnderLine}>{children}</span>
+          <span className={cx(styleIcon)} aria-label={iconLabel}>
+            open_in_new
+          </span>
+        </Component>
       )
     }
     return (
-      <a className={cx(style, className)} href={href} {...restProps} ref={ref}>
+      <Component
+        className={cx(style, styleUnderLine, className)}
+        href={href}
+        {...restProps}
+        ref={ref}
+      >
         {children}
-        {fileType ? `（${fileType}）` : null}
-      </a>
+      </Component>
     )
   }
 )

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface UlProps extends React.ComponentPropsWithoutRef<'ul'> {}
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface PreProps extends React.ComponentPropsWithoutRef<'pre'> {}
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '../utils/class'
+import { cx } from '../libs/cx'
 
 export interface TableProps extends React.ComponentPropsWithoutRef<'table'> {}
 

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

@@ -0,0 +1,83 @@
+//   select-none
+export const base = `
+  inline-block
+  text-button
+  text-center
+  cursor-pointer
+  whitespace-nowrap
+  outline-offset-2
+  border
+  border-solid
+  border-sea-800
+  active:border-sea-1200
+  hover:border-sea-900
+  focus:outline
+  focus:outline-2
+  focus:outline-wood-600
+  disabled:border-sumi-500
+  disabled:cursor-not-allowed
+`
+
+const primary = `
+  text-white-1000
+  bg-sea-800
+  active:bg-sea-1200
+  hover:bg-sea-900
+  disabled:bg-sumi-500
+  disabled:text-white-1000
+`
+
+const secondary = `
+  text-sea-800
+  bg-transparent
+  active:bg-sea-200
+  hover:bg-sea-100
+  active:text-sea-1200
+  hover:text-sea-900
+  disabled:text-sumi-500
+  disabled:bg-transparent
+`
+
+const styles: { [key: string]: string } = {
+  primary: primary,
+  secondary: secondary
+}
+
+export const getVariantStyle = (variant: 'primary' | 'secondary') => {
+  return styles[variant]
+}
+
+const params: {
+  [key: string]: string
+} = {
+  lg: `
+    p-4
+    text-button
+    rounded-lg
+  `,
+  md: `
+    px-4
+    py-3
+    text-button
+    rounded-lg
+  `,
+  sm: `
+    px-3
+    py-1.5
+    my-1
+    text-button
+    rounded-md
+  `,
+  xs: `
+    px-2
+    py-[7px]
+    my-2
+    text-button-sm
+    !leading-[14px]
+    rounded
+  `
+}
+
+export const getSizeStyle = (size: 'lg' | 'md' | 'sm' | 'xs') => {
+  return params[size]
+}