@sakura-ui/sakura-ui 0.2.0 → 0.4.1

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

@@ -1,4 +1,10 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
+import { Style } from '@sakura-ui/helper'
+
+// Deprecated, replace to ButtonVariantV2
+export type ButtonVariantV1 = 'primary' | 'secondary' | 'tertiary'
+export type ButtonVariantV2 = 'solid-fill' | 'outline' | 'text'
+export type ButtonVariant = ButtonVariantV1 | ButtonVariantV2
+
 export type ButtonSize = 'lg' | 'md' | 'sm' | 'xs'
 
 export const base = `
@@ -12,52 +18,57 @@ export const base = `
   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
+  border-blue-900
+  hover:border-blue-1000
+  active:border-blue-1200
+  disabled:border-solid-gray-500
   disabled:cursor-not-allowed
 `
 
-const primary = `
+const solidFill = `
   text-white
-  bg-sea-800
-  active:bg-sea-1200
-  hover:bg-sea-900
-  disabled:bg-sumi-500
+  bg-blue-900
+  hover:bg-blue-1000
+  active:bg-blue-1200
+  disabled:bg-solid-gray-500
   disabled:text-white
+  ${Style.hoverUnderline}
+  ${Style.focusRounded}
 `
 
-const secondary = `
-  text-sea-800
+const outline = `
+  text-blue-900
+  hover:text-blue-1000
+  active:text-blue-1200
   bg-transparent
-  active:bg-sea-200
-  hover:bg-sea-100
-  active:text-sea-1200
-  hover:text-sea-900
-  disabled:text-sumi-500
+  hover:bg-blue-200
+  active:bg-blue-300
   disabled:bg-transparent
+  disabled:text-solid-gray-500
+  ${Style.hoverUnderline}
+  ${Style.focusRounded}
 `
 
-const tertiary = `
+const text = `
   bg-transparent
   text-blue-900
-  underline
-  hover:bg-blue-200
   hover:text-blue-1000
-  active:bg-blue-300
   active:text-blue-1200
+  hover:bg-blue-200
+  active:bg-blue-300
   disabled:bg-transparent
-  disabled:text-solid-grey-420
+  disabled:text-solid-gray-500
+  ${Style.underlineNoDeco}
+  ${Style.focusRoundedWithBg}
 `
 
 const styles: { [key in ButtonVariant]: string } = {
-  primary: primary,
-  secondary: secondary,
-  tertiary: tertiary
+  primary: solidFill,
+  secondary: outline,
+  tertiary: text,
+  'solid-fill': solidFill,
+  outline: outline,
+  text: text
 }
 
 const params: { [key in ButtonSize]: string } = {
@@ -65,16 +76,16 @@ const params: { [key in ButtonSize]: string } = {
   lg: `
     p-4
     text-button
-    rounded-lg
     leading-snug
+    rounded-lg
   `,
   // 12(py-3) * 2 + 22(text-button * leading-snug) + boader * 2 = 48px
   md: `
     px-4
     py-3
     text-button
-    rounded-lg
     leading-snug
+    rounded-lg
   `,
   // 6(py-1.5) * 2 + 22(text-button * leading-snug) + boader * 2 = 36px
   sm: `
@@ -82,8 +93,8 @@ const params: { [key in ButtonSize]: string } = {
     py-1.5
     my-1
     text-button
-    rounded-md
     leading-snug
+    rounded-md
   `,
   // 6(py-1.5) * 2 + 14(text-button-sm) + boader * 2 = 28p
   xs: `
@@ -91,7 +102,7 @@ const params: { [key in ButtonSize]: string } = {
     py-1.5
     my-2
     text-button-sm
-    rounded
+    rounded-sm
   `
 }
 

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

@@ -1,29 +1,17 @@
-export { Button, type ButtonProps } from './Button'
+export { Button } from './Button'
+export { MenuButton } from './MenuButton'
 export { Card, CardImg, CardHeader, CardBody, CardFooter } from './Card'
-export type {
-  CardProps,
-  CardImgProps,
-  CardHeaderProps,
-  CardBodyProps,
-  CardFooterProps
-} from './Card'
-export { Code, type CodeProps } from './Code'
+export { LinkCard, LinkCardHeader, LinkCardFooter } from './LinkCard'
+export { Code } from './Code'
 export { Faq, Question, Answer } from './Faq'
-export type { FaqProps, QuestionProps, AnswerProps } from './Faq'
 export { H1, H2, H3, H4, H5, H6 } from './Heading'
-export type { HeadingProps } from './Heading'
-export { Icon, type IconProps } from './Icon'
-export { IconButton, type IconButtonProps } from './IconButton'
-export { Link, type LinkProps } from './Link'
-export { Ol, Ul, type OlProps, type UlProps } from './List'
-export { Pre, type PreProps } from './Pre'
+export { Icon } from './Icon'
+export { IconButton } from './IconButton'
+export { Link } from './Link'
+export { Ol, Ul } from './List'
+export { NavigationItem } from './NavigationItem'
+export { Pre } from './Pre'
 export { Table, Caption, Thead, Tbody, Th, Tr, Td } from './Table'
-export type {
-  TableProps,
-  CaptionProps,
-  TheadProps,
-  TbodyProps,
-  ThProps,
-  TrProps,
-  TdProps
-} from './Table'
+export { OverflowContainer } from './OverflowContainer'
+export { LangSelector } from './LangSelector'
+export { PopoverMenu, PopoverMenuItem } from './PopoverMenu'

package/packages/core/src/icons/Close.tsx

@@ -0,0 +1,21 @@
+import type { IconProps } from './props'
+
+export const Close = (props: IconProps) => {
+  const { size, className, ...rest } = props
+  return (
+    <svg
+      aria-hidden={true}
+      className={className}
+      fill="none"
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      {...rest}
+    >
+      <path
+        d="M6.39961 18.6496L5.34961 17.5996L10.9496 11.9996L5.34961 6.39961L6.39961 5.34961L11.9996 10.9496L17.5996 5.34961L18.6496 6.39961L13.0496 11.9996L18.6496 17.5996L17.5996 18.6496L11.9996 13.0496L6.39961 18.6496Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/packages/core/src/icons/CloseMobile.tsx

@@ -0,0 +1,43 @@
+import type { IconProps } from './props'
+
+export const CloseMobile = (props: IconProps) => {
+  const { size, className, ...rest } = props
+  return (
+    <svg
+      role="img"
+      aria-label={`${rest['aria-label'] ?? 'Language'}`}
+      className={className}
+      fill="none"
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      {...rest}
+    >
+      <title>Close</title>
+      <path
+        d="M37.0023 38.8911H32.8164V31.1197H37.0023V32.121H33.941V34.3415H36.8149V35.3319H33.941V37.8789H37.0023V38.8911Z"
+        fill="currentColor"
+      />
+      <path
+        d="M31.4644 36.7904C31.4644 37.2548 31.3568 37.6503 31.1416 37.9768C30.9264 38.3034 30.6175 38.5573 30.2148 38.7387C29.8122 38.9129 29.3332 39 28.7779 39C28.5071 39 28.2468 38.9818 27.9969 38.9455C27.747 38.9165 27.5145 38.873 27.2993 38.8149C27.0841 38.7569 26.8932 38.6843 26.7266 38.5972V37.487C27.0042 37.6177 27.3305 37.7374 27.7054 37.8462C28.0802 37.9478 28.462 37.9986 28.8508 37.9986C29.184 37.9986 29.4616 37.9514 29.6838 37.8571C29.9059 37.7628 30.0725 37.6322 30.1836 37.4653C30.2947 37.2984 30.3502 37.1025 30.3502 36.8775C30.3502 36.6381 30.2912 36.4385 30.1732 36.2789C30.0621 36.112 29.8851 35.9596 29.6421 35.8217C29.4061 35.6766 29.0868 35.5242 28.6842 35.3646C28.4065 35.2558 28.1531 35.136 27.924 35.0054C27.7019 34.8675 27.504 34.7079 27.3305 34.5265C27.1639 34.3451 27.0355 34.1347 26.9452 33.8952C26.855 33.6558 26.8099 33.3764 26.8099 33.0571C26.8099 32.629 26.9105 32.2626 27.1118 31.9578C27.3201 31.653 27.6047 31.4208 27.9657 31.2612C28.3267 31.0943 28.7466 31.0109 29.2256 31.0109C29.6282 31.0109 29.9996 31.0544 30.3398 31.1415C30.6869 31.2213 31.0166 31.3338 31.329 31.4789L30.975 32.4476C30.6903 32.3242 30.4023 32.2227 30.1107 32.1428C29.8191 32.063 29.5137 32.0231 29.1944 32.0231C28.9167 32.0231 28.6842 32.0666 28.4967 32.1537C28.3093 32.2408 28.167 32.3605 28.0698 32.5129C27.9796 32.6653 27.9344 32.8431 27.9344 33.0462C27.9344 33.2857 27.9865 33.4852 28.0906 33.6449C28.1948 33.8045 28.3614 33.9533 28.5904 34.0911C28.8195 34.2217 29.1215 34.3669 29.4964 34.5265C29.9129 34.6934 30.2669 34.8748 30.5585 35.0707C30.857 35.2666 31.0826 35.5025 31.2353 35.7782C31.388 36.0467 31.4644 36.3841 31.4644 36.7904Z"
+        fill="currentColor"
+      />
+      <path
+        d="M25.6862 34.9946C25.6862 35.5968 25.6133 36.1447 25.4675 36.6381C25.3287 37.1243 25.1135 37.5451 24.8219 37.9007C24.5373 38.2562 24.1763 38.5283 23.739 38.717C23.3086 38.9057 22.8053 39 22.2292 39C21.6391 39 21.1254 38.9057 20.6881 38.717C20.2577 38.5211 19.8967 38.249 19.6052 37.9007C19.3205 37.5451 19.1088 37.1206 18.97 36.6272C18.8311 36.1338 18.7617 35.5859 18.7617 34.9837C18.7617 34.1855 18.8867 33.4889 19.1366 32.8939C19.3865 32.2989 19.7683 31.8345 20.282 31.5007C20.8026 31.1669 21.4552 31 22.2396 31C23.0032 31 23.6384 31.1669 24.1451 31.5007C24.6588 31.8272 25.0441 32.2916 25.3009 32.8939C25.5578 33.4889 25.6862 34.1891 25.6862 34.9946ZM19.9488 34.9946C19.9488 35.6186 20.0286 36.1555 20.1883 36.6054C20.3479 37.0481 20.5978 37.3927 20.938 37.6394C21.2781 37.8789 21.7085 37.9986 22.2292 37.9986C22.7567 37.9986 23.1871 37.8789 23.5203 37.6394C23.8536 37.3927 24.1 37.0481 24.2596 36.6054C24.4193 36.1555 24.4991 35.6186 24.4991 34.9946C24.4991 34.0585 24.3187 33.3292 23.9577 32.8068C23.6036 32.2771 23.0309 32.0122 22.2396 32.0122C21.712 32.0122 21.2781 32.132 20.938 32.3714C20.5978 32.6109 20.3479 32.9519 20.1883 33.3946C20.0286 33.8372 19.9488 34.3705 19.9488 34.9946Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.8516 38.8911V31.1197H14.9761V37.8789H18.152V38.8911H13.8516Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.5403 32.0231C10.1724 32.0231 9.84268 32.092 9.55112 32.2299C9.25957 32.3605 9.00966 32.5564 8.80141 32.8177C8.60009 33.0789 8.4439 33.3945 8.33283 33.7646C8.2287 34.1347 8.17664 34.5519 8.17664 35.0163C8.17664 35.6258 8.26341 36.1555 8.43696 36.6054C8.61051 37.048 8.87082 37.3891 9.21792 37.6285C9.56501 37.868 10.0023 37.9877 10.5299 37.9877C10.8492 37.9877 11.1547 37.9587 11.4462 37.9007C11.7447 37.8353 12.0467 37.7519 12.3522 37.6503V38.6626C12.0606 38.7787 11.7621 38.8621 11.4567 38.9129C11.1512 38.9709 10.7972 39 10.3946 39C9.6379 39 9.00619 38.8367 8.49944 38.5102C7.99962 38.1836 7.62477 37.7192 7.37486 37.117C7.12495 36.5147 7 35.8109 7 35.0054C7 34.4177 7.07636 33.8807 7.22908 33.3945C7.38874 32.9011 7.61782 32.4766 7.91632 32.1211C8.21482 31.7655 8.58274 31.4934 9.02007 31.3047C9.46435 31.1088 9.97458 31.0109 10.5507 31.0109C10.9256 31.0109 11.2935 31.0544 11.6545 31.1415C12.0155 31.2213 12.3417 31.3374 12.6333 31.4898L12.2168 32.4694C11.9738 32.3533 11.71 32.2517 11.4254 32.1646C11.1477 32.0703 10.8527 32.0231 10.5403 32.0231Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.8947 26L11 24.1053L20.1053 15L11 5.89474L12.8947 4L22 13.1053L31.1053 4L33 5.89474L23.8947 15L33 24.1053L31.1053 26L22 16.8947L12.8947 26Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/packages/core/src/icons/KeyboardArrowDown.tsx

@@ -0,0 +1,24 @@
+import type { IconProps } from './props'
+
+export const KeyboadArrowDown = (props: IconProps) => {
+  const { size, className, ...rest } = props
+  return (
+    <svg
+      aria-hidden={true}
+      className={className}
+      fill="none"
+      height={size}
+      role="img"
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      {...rest}
+    >
+      <g>
+        <path
+          d="M8 11.4L2 5.33332L2.66667 4.66666L8 9.99999L13.3333 4.66666L14 5.33332L8 11.4Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  )
+}

package/packages/core/src/icons/Language.tsx

@@ -0,0 +1,25 @@
+import type { IconProps } from './props'
+
+export const Language = (props: IconProps) => {
+  const { size, className, ...rest } = props
+  return (
+    <svg
+      aria-hidden={true}
+      className={className}
+      fill="none"
+      height={size}
+      role="img"
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      {...rest}
+    >
+      <g>
+        <path
+          d="M10.0006 17.9166C8.91516 17.9166 7.89086 17.7086 6.92773 17.2924C5.9646 16.8763 5.12458 16.3098 4.40769 15.5929C3.69082 14.876 3.12432 14.036 2.70819 13.0729C2.29205 12.1098 2.08398 11.0855 2.08398 9.99999C2.08398 8.90598 2.29205 7.87954 2.70819 6.92068C3.12432 5.96182 3.69082 5.12394 4.40769 4.40705C5.12458 3.69018 5.9646 3.12368 6.92773 2.70755C7.89086 2.29141 8.91516 2.08334 10.0006 2.08334C11.0946 2.08334 12.1211 2.29141 13.0799 2.70755C14.0388 3.12368 14.8767 3.69018 15.5936 4.40705C16.3104 5.12394 16.8769 5.96182 17.2931 6.92068C17.7092 7.87954 17.9173 8.90598 17.9173 9.99999C17.9173 11.0855 17.7092 12.1098 17.2931 13.0729C16.8769 14.036 16.3104 14.876 15.5936 15.5929C14.8767 16.3098 14.0388 16.8763 13.0799 17.2924C12.1211 17.7086 11.0946 17.9166 10.0006 17.9166ZM10.0006 16.649C10.4259 16.0849 10.7838 15.516 11.0744 14.9423C11.365 14.3686 11.6016 13.7414 11.7843 13.0609H8.21696C8.41034 13.7628 8.64966 14.4006 8.93492 14.9743C9.22017 15.5481 9.57541 16.1063 10.0006 16.649ZM8.38688 16.4199C8.06744 15.9615 7.78057 15.4404 7.5263 14.8566C7.27202 14.2727 7.07437 13.6741 6.93334 13.0609H4.10638C4.54656 13.9263 5.13685 14.6533 5.87723 15.242C6.61764 15.8307 7.45419 16.2233 8.38688 16.4199ZM11.6144 16.4199C12.5471 16.2233 13.3836 15.8307 14.124 15.242C14.8644 14.6533 15.4547 13.9263 15.8949 13.0609H13.0679C12.9002 13.6795 12.6892 14.2807 12.4349 14.8646C12.1806 15.4484 11.9071 15.9669 11.6144 16.4199ZM3.58236 11.8109H6.68013C6.62778 11.5011 6.58986 11.1974 6.56636 10.8998C6.54286 10.6023 6.53111 10.3023 6.53111 9.99999C6.53111 9.69764 6.54286 9.39769 6.56636 9.10014C6.58986 8.80259 6.62778 8.49891 6.68013 8.18907H3.58236C3.50223 8.4722 3.4408 8.76654 3.39807 9.07209C3.35533 9.37765 3.33396 9.68695 3.33396 9.99999C3.33396 10.313 3.35533 10.6223 3.39807 10.9279C3.4408 11.2334 3.50223 11.5278 3.58236 11.8109ZM7.93011 11.8109H12.0712C12.1235 11.5011 12.1614 11.2001 12.1849 10.9078C12.2084 10.6157 12.2202 10.313 12.2202 9.99999C12.2202 9.68695 12.2084 9.38433 12.1849 9.09214C12.1614 8.79993 12.1235 8.49891 12.0712 8.18907H7.93011C7.87776 8.49891 7.83983 8.79993 7.81632 9.09214C7.79282 9.38433 7.78107 9.68695 7.78107 9.99999C7.78107 10.313 7.79282 10.6157 7.81632 10.9078C7.83983 11.2001 7.87776 11.5011 7.93011 11.8109ZM13.3211 11.8109H16.4189C16.499 11.5278 16.5605 11.2334 16.6032 10.9279C16.6459 10.6223 16.6673 10.313 16.6673 9.99999C16.6673 9.68695 16.6459 9.37765 16.6032 9.07209C16.5605 8.76654 16.499 8.4722 16.4189 8.18907H13.3211C13.3735 8.49891 13.4114 8.80259 13.4349 9.10014C13.4584 9.39769 13.4702 9.69764 13.4702 9.99999C13.4702 10.3023 13.4584 10.6023 13.4349 10.8998C13.4114 11.1974 13.3735 11.5011 13.3211 11.8109ZM13.0679 6.93912H15.8949C15.4494 6.06303 14.8631 5.33599 14.136 4.75799C13.409 4.18 12.5685 3.78471 11.6144 3.57209C11.9338 4.05714 12.218 4.58759 12.4669 5.16345C12.7159 5.73931 12.9162 6.3312 13.0679 6.93912ZM8.21696 6.93912H11.7843C11.5909 6.24253 11.3476 5.6007 11.0543 5.01361C10.7611 4.42655 10.4098 3.87232 10.0006 3.35095C9.59144 3.87232 9.24021 4.42655 8.94694 5.01361C8.65367 5.6007 8.41034 6.24253 8.21696 6.93912ZM4.10638 6.93912H6.93334C7.08505 6.3312 7.28537 5.73931 7.53432 5.16345C7.78325 4.58759 8.06744 4.05714 8.38688 3.57209C7.42748 3.78471 6.58559 4.18134 5.86121 4.76201C5.13685 5.34268 4.55191 6.06838 4.10638 6.93912Z"
+          fill="currentColor"
+          fillOpacity="0.9"
+        />
+      </g>
+    </svg>
+  )
+}

package/packages/core/src/icons/LanguageMobile.tsx

@@ -0,0 +1,40 @@
+import type { IconProps } from './props'
+
+export const LanguageMobile = (props: IconProps) => {
+  const { size, className, ...rest } = props
+  return (
+    <svg
+      role="img"
+      aria-label={`${rest['aria-label'] ?? 'Language'}`}
+      className={className}
+      fill="none"
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      {...rest}
+    >
+      <g>
+        <path
+          d="M22 27.0669C20.3718 27.0669 18.8353 26.7548 17.3906 26.1306C15.9459 25.5064 14.6859 24.6567 13.6106 23.5814C12.5353 22.506 11.6855 21.246 11.0613 19.8013C10.4371 18.3566 10.125 16.8202 10.125 15.192C10.125 13.5509 10.4371 12.0113 11.0613 10.573C11.6855 9.1347 12.5353 7.87788 13.6106 6.80255C14.6859 5.72724 15.9459 4.87749 17.3906 4.2533C18.8353 3.62909 20.3718 3.31699 22 3.31699C23.641 3.31699 25.1806 3.62909 26.6189 4.2533C28.0572 4.87749 29.314 5.72724 30.3894 6.80255C31.4647 7.87788 32.3144 9.1347 32.9386 10.573C33.5628 12.0113 33.8749 13.5509 33.8749 15.192C33.8749 16.8202 33.5628 18.3566 32.9386 19.8013C32.3144 21.246 31.4647 22.506 30.3894 23.5814C29.314 24.6567 28.0572 25.5064 26.6189 26.1306C25.1806 26.7548 23.641 27.0669 22 27.0669ZM22 25.1655C22.6378 24.3194 23.1747 23.466 23.6106 22.6054C24.0465 21.7448 24.4014 20.8041 24.6755 19.7833H19.3245C19.6145 20.8362 19.9735 21.7929 20.4014 22.6535C20.8293 23.5141 21.3621 24.3514 22 25.1655ZM19.5793 24.8218C19.1002 24.1343 18.6699 23.3526 18.2885 22.4768C17.9071 21.601 17.6106 20.7031 17.399 19.7833H13.1586C13.8189 21.0814 14.7043 22.1719 15.8149 23.055C16.9255 23.938 18.1803 24.5269 19.5793 24.8218ZM24.4206 24.8218C25.8196 24.5269 27.0745 23.938 28.1851 23.055C29.2956 22.1719 30.1811 21.0814 30.8413 19.7833H26.6009C26.3493 20.7112 26.0328 21.613 25.6514 22.4888C25.27 23.3646 24.8597 24.1423 24.4206 24.8218ZM12.3726 17.9083H17.0192C16.9407 17.4436 16.8838 16.9881 16.8486 16.5417C16.8133 16.0954 16.7957 15.6455 16.7957 15.192C16.7957 14.7384 16.8133 14.2885 16.8486 13.8422C16.8838 13.3959 16.9407 12.9403 17.0192 12.4756H12.3726C12.2524 12.9003 12.1602 13.3418 12.0961 13.8001C12.032 14.2584 12 14.7224 12 15.192C12 15.6615 12.032 16.1255 12.0961 16.5838C12.1602 17.0421 12.2524 17.4836 12.3726 17.9083ZM18.8942 17.9083H25.1058C25.1843 17.4436 25.2412 16.9921 25.2764 16.5537C25.3117 16.1154 25.3293 15.6615 25.3293 15.192C25.3293 14.7224 25.3117 14.2685 25.2764 13.8302C25.2412 13.3919 25.1843 12.9403 25.1058 12.4756H18.8942C18.8157 12.9403 18.7588 13.3919 18.7235 13.8302C18.6883 14.2685 18.6706 14.7224 18.6706 15.192C18.6706 15.6615 18.6883 16.1154 18.7235 16.5537C18.7588 16.9921 18.8157 17.4436 18.8942 17.9083ZM26.9807 17.9083H31.6274C31.7476 17.4836 31.8397 17.0421 31.9038 16.5838C31.9679 16.1255 32 15.6615 32 15.192C32 14.7224 31.9679 14.2584 31.9038 13.8001C31.8397 13.3418 31.7476 12.9003 31.6274 12.4756H26.9807C27.0592 12.9403 27.1161 13.3959 27.1514 13.8422C27.1866 14.2885 27.2043 14.7384 27.2043 15.192C27.2043 15.6455 27.1866 16.0954 27.1514 16.5417C27.1161 16.9881 27.0592 17.4436 26.9807 17.9083ZM26.6009 10.6006H30.8413C30.1731 9.28652 29.2936 8.19596 28.2031 7.32896C27.1125 6.46198 25.8517 5.86903 24.4206 5.55011C24.8998 6.27767 25.326 7.07335 25.6994 7.93714C26.0729 8.80094 26.3733 9.68877 26.6009 10.6006ZM19.3245 10.6006H24.6755C24.3854 9.55577 24.0204 8.59302 23.5805 7.71239C23.1406 6.83179 22.6138 6.00046 22 5.21839C21.3862 6.00046 20.8593 6.83179 20.4194 7.71239C19.9795 8.59302 19.6145 9.55577 19.3245 10.6006ZM13.1586 10.6006H17.399C17.6266 9.68877 17.9271 8.80094 18.3005 7.93714C18.6739 7.07335 19.1002 6.27767 19.5793 5.55011C18.1402 5.86903 16.8774 6.46399 15.7908 7.33499C14.7043 8.20599 13.8269 9.29454 13.1586 10.6006Z"
+          fill="currentColor"
+        />
+      </g>
+      <path
+        d="M34.0409 35.272H37.1369V39.544C36.6809 39.696 36.2129 39.808 35.7329 39.88C35.2609 39.96 34.7209 40 34.1129 40C33.2409 40 32.5009 39.824 31.8929 39.472C31.2929 39.12 30.8329 38.616 30.5129 37.96C30.2009 37.304 30.0449 36.516 30.0449 35.596C30.0449 34.7 30.2209 33.924 30.5729 33.268C30.9249 32.612 31.4289 32.104 32.0849 31.744C32.7489 31.376 33.5529 31.192 34.4969 31.192C34.9689 31.192 35.4209 31.24 35.8529 31.336C36.2849 31.424 36.6849 31.548 37.0529 31.708L36.5849 32.788C36.2889 32.652 35.9569 32.54 35.5889 32.452C35.2289 32.356 34.8489 32.308 34.4489 32.308C33.8169 32.308 33.2689 32.444 32.8049 32.716C32.3489 32.98 31.9969 33.36 31.7489 33.856C31.5089 34.344 31.3889 34.928 31.3889 35.608C31.3889 36.248 31.4889 36.816 31.6889 37.312C31.8889 37.808 32.2049 38.196 32.6369 38.476C33.0689 38.756 33.6329 38.896 34.3289 38.896C34.5609 38.896 34.7649 38.888 34.9409 38.872C35.1169 38.848 35.2769 38.824 35.4209 38.8C35.5729 38.768 35.7169 38.74 35.8529 38.716V36.388H34.0409V35.272Z"
+        fill="currentColor"
+      />
+      <path
+        d="M28.1804 39.88H26.6084L22.2764 32.956H22.2284C22.2364 33.116 22.2444 33.288 22.2524 33.472C22.2684 33.656 22.2804 33.852 22.2884 34.06C22.2964 34.26 22.3044 34.468 22.3124 34.684C22.3204 34.892 22.3244 35.104 22.3244 35.32V39.88H21.1484V31.312H22.7084L27.0284 38.2H27.0644C27.0564 38.08 27.0484 37.932 27.0404 37.756C27.0324 37.572 27.0244 37.376 27.0164 37.168C27.0164 36.96 27.0124 36.748 27.0044 36.532C26.9964 36.316 26.9884 36.112 26.9804 35.92V31.312H28.1804V39.88Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.6363 39.88L17.7242 37.408H14.4123L13.5002 39.88H12.1562L15.4083 31.276H16.7523L19.9923 39.88H18.6363ZM16.5002 33.868C16.4762 33.78 16.4323 33.648 16.3682 33.472C16.3123 33.288 16.2563 33.104 16.2003 32.92C16.1443 32.728 16.1002 32.572 16.0682 32.452C16.0282 32.612 15.9802 32.788 15.9242 32.98C15.8762 33.164 15.8283 33.336 15.7803 33.496C15.7323 33.648 15.6923 33.772 15.6603 33.868L14.7963 36.28H17.3643L16.5002 33.868Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.86328 39.88V31.312H8.15928V38.764H11.8193V39.88H6.86328Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/packages/core/src/icons/Menu.tsx

@@ -0,0 +1,24 @@
+import type { IconProps } from './props'
+
+export const Menu = (props: IconProps) => {
+  const { size, className, ...rest } = props
+  return (
+    <svg
+      aria-hidden={true}
+      className={className}
+      fill="none"
+      height={size}
+      role="img"
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      {...rest}
+    >
+      <path
+        clipRule="evenodd"
+        d="M21 5.5H3V7H21V5.5ZM21 11.2998H3V12.7998H21V11.2998ZM3 17H21V18.5H3V17Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/packages/core/src/icons/MenuMobile.tsx

@@ -0,0 +1,40 @@
+import type { IconProps } from './props'
+
+export const MenuMobile = (props: IconProps) => {
+  const { size, className, ...rest } = props
+  return (
+    <svg
+      role="img"
+      aria-label={`${rest['aria-label'] ?? 'Menu'}`}
+      className={className}
+      fill="none"
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M39 7H5V9H39V7ZM39 15H5V17H39V15ZM5 23H39V25H5V23Z"
+        fill="currentColor"
+      />
+      <path
+        d="M35.6474 38C33.6914 38 32.3594 37.0507 32.3594 34.4907V30H33.7514V34.576C33.7514 36.3467 34.5434 36.9227 35.6474 36.9227C36.7634 36.9227 37.5794 36.3467 37.5794 34.576V30H38.9234V34.4907C38.9234 37.0507 37.6034 38 35.6474 38Z"
+        fill="currentColor"
+      />
+      <path
+        d="M23.1172 37.8613V30H24.5452L27.4732 34.6187L28.3972 36.2827H28.4572C28.3852 35.472 28.2772 34.5227 28.2772 33.6693V30H29.5972V37.8613H28.1692L25.2412 33.232L24.3172 31.5893H24.2572C24.3292 32.4 24.4372 33.3067 24.4372 34.16V37.8613H23.1172Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.4414 37.8613V30H20.6614V31.0453H16.8334V33.232H20.0734V34.2773H16.8334V36.816H20.7934V37.8613H15.4414Z"
+        fill="currentColor"
+      />
+      <path
+        d="M5 37.8613V30H6.596L8.216 33.9787C8.42 34.5013 8.6 35.0347 8.804 35.5573H8.864C9.068 35.0347 9.236 34.5013 9.44 33.9787L11.036 30H12.644V37.8613H11.348V33.9787C11.348 33.2747 11.456 32.2613 11.528 31.5467H11.48L10.772 33.36L9.236 37.104H8.372L6.824 33.36L6.128 31.5467H6.08C6.14 32.2613 6.248 33.2747 6.248 33.9787V37.8613H5Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/packages/core/src/icons/index.ts

@@ -0,0 +1,8 @@
+export { Close } from './Close'
+export { CloseMobile } from './CloseMobile'
+export { Menu } from './Menu'
+export { MenuMobile } from './MenuMobile'
+export { KeyboadArrowDown } from './KeyboardArrowDown'
+export { Language } from './Language'
+export { LanguageMobile } from './LanguageMobile'
+export type { IconProps } from './props'

package/packages/core/src/icons/props.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react'
+
+export interface IconProps extends ComponentProps<'svg'> {
+  size: number
+}

package/packages/core/src/index.ts

@@ -1,10 +1,14 @@
 export {
   Button,
+  MenuButton,
   Card,
   CardImg,
   CardHeader,
   CardBody,
   CardFooter,
+  LinkCard,
+  LinkCardHeader,
+  LinkCardFooter,
   Code,
   Faq,
   Question,
@@ -27,32 +31,10 @@ export {
   Tbody,
   Th,
   Tr,
-  Td
-} from './components'
-
-export type {
-  ButtonProps,
-  CardProps,
-  CardImgProps,
-  CardHeaderProps,
-  CardBodyProps,
-  CardFooterProps,
-  CodeProps,
-  FaqProps,
-  QuestionProps,
-  AnswerProps,
-  HeadingProps,
-  IconProps,
-  IconButtonProps,
-  LinkProps,
-  OlProps,
-  UlProps,
-  PreProps,
-  TableProps,
-  CaptionProps,
-  TheadProps,
-  TbodyProps,
-  ThProps,
-  TrProps,
-  TdProps
+  Td,
+  OverflowContainer,
+  LangSelector,
+  NavigationItem,
+  PopoverMenu,
+  PopoverMenuItem
 } from './components'

package/packages/core/src/type.d.ts

@@ -0,0 +1 @@
+/// <reference types="react/canary" />

package/packages/core/tests/Button.test.tsx

@@ -1,23 +1,18 @@
 import React from 'react'
-import { describe, test, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
 import { Button } from '../src'
 
-describe('should labeled text from Button', () => {
-  test('text', async () => {
-    render(<Button>Button</Button>)
-
-    const text = screen.getByText(/Button/)
-    expect(text).toBeInTheDocument()
-  })
-  test('as button', async () => {
+describe('Button', () => {
+  it('should render a button', async () => {
     render(<Button>Button</Button>)
 
     const button = screen.getByRole('button')
     expect(button).toBeInTheDocument()
   })
-  test('as link', async () => {
+
+  it('should render a link', async () => {
     render(
       <Button as="a" href="https://example.com">
         Button
@@ -27,4 +22,19 @@ describe('should labeled text from Button', () => {
     const button = screen.getByRole('link')
     expect(button).toBeInTheDocument()
   })
+
+  it('should labeled text from Button', async () => {
+    render(<Button>button</Button>)
+
+    const text = screen.getByText(/button/)
+    expect(text).toBeInTheDocument()
+  })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+
+    render(<Button ref={ref}>button</Button>)
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
 })

package/packages/core/tests/Card.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { describe, test, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
 import { Card, CardBody, CardHeader } from '../src'
 
-describe('should labeled text from Card', () => {
-  test('text', async () => {
+describe('Card', () => {
+  it('should labeled text from Card', async () => {
     render(
       <Card>
         <CardHeader>Card-Header</CardHeader>
@@ -19,24 +19,29 @@ describe('should labeled text from Card', () => {
     const text2 = screen.getByText(/Card-Body/)
     expect(text2).toBeInTheDocument()
   })
-  test('role and id', async () => {
+  it('should set the role and id correctly', async () => {
     render(
       <Card>
-        <CardHeader>Card-Header</CardHeader>
-        <CardBody>Card-Body</CardBody>
+        <CardHeader data-testid="header">Card-Header</CardHeader>
+        <CardBody data-testid="body">Card-Body</CardBody>
       </Card>
     )
 
     const card = screen.getByRole('article')
     expect(card).toBeInTheDocument()
-    expect(card).toHaveProperty('id')
 
-    const header = screen.getByLabelText('Card-Header')
+    const header = screen.getByTestId('header')
     expect(header).toBeInTheDocument()
-    expect(header).toHaveProperty('id')
+    expect(header).toHaveAttribute('id')
 
-    const body = screen.getByRole('article', { description: 'Card-Body' })
+    const headerText = screen.getByLabelText('Card-Header')
+    expect(headerText).toBeInTheDocument()
+
+    const body = screen.getByTestId('body')
     expect(body).toBeInTheDocument()
-    expect(body).toHaveProperty('id')
+    expect(body).toHaveAttribute('id')
+
+    const bodyText = screen.getByRole('article', { description: 'Card-Body' })
+    expect(bodyText).toBeInTheDocument()
   })
 })

package/packages/core/tests/IconButton.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { IconButton } from '../src'
+
+describe('IconButton', () => {
+  it('should render a button with icon', async () => {
+    render(<IconButton icon="home">Button with icon</IconButton>)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+
+    const text = screen.getByText(/home/)
+    expect(text).toBeInTheDocument()
+  })
+
+  it('should render a link with icon', async () => {
+    render(
+      <IconButton as="a" icon="home" href="https://googl.com">
+        Button with icon
+      </IconButton>
+    )
+
+    const button = screen.getByRole('link')
+    expect(button).toBeInTheDocument()
+
+    const text = screen.getByText(/home/)
+    expect(text).toBeInTheDocument()
+  })
+
+  it('should aria-hidden true', async () => {
+    render(<IconButton icon="home">button</IconButton>)
+
+    const text = screen.getByText(/home/)
+    expect(text).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('should aria-hidden false', async () => {
+    render(<IconButton icon="home" />)
+
+    const text = screen.getByText(/home/)
+    expect(text).toHaveAttribute('aria-hidden', 'false')
+  })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+
+    render(
+      <IconButton icon="home" ref={ref}>
+        button
+      </IconButton>
+    )
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
+})