update

glassonion1 · Sep 7, 2024 · 8c39156 · 8c39156
1 parent 2bb4492
commit 8c39156
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 59 deletions.
diff --git a/examples/package.json b/examples/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sakura-ui/core": "^0.2.7-beta.11",
+    "@sakura-ui/core": "^0.2.8",
     "@sakura-ui/forms": "^0.2.1",
     "@sakura-ui/tailwind-theme-plugin": "^0.2.1",
     "react": "^18.3.1",

diff --git a/examples/src/pages/Home.tsx b/examples/src/pages/Home.tsx
@@ -25,7 +25,9 @@ import {
   Tbody,
   Tr,
   Th,
-  Td
+  Td,
+  LinkCard,
+  LinkCardHeader
 } from '@sakura-ui/core'
 import {
   Checkbox,
@@ -52,30 +54,42 @@ const Home = () => {
         rounded="full"
         onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
       />
-      <H1>SakuraUI Heading1</H1>
-      <H2>SakuraUI Heading2</H2>
-      <H3>SakuraUI Heading3</H3>
-      <H4>SakuraUI Heading4</H4>
-      <H5>SakuraUI Heading5</H5>
-      <H6>SakuraUI Heading6</H6>
-      <p>
-        <Icon className="text-sea-600 !leading-7 align-middle" opticalSize={16}>
-          home
-        </Icon>
-        test1,test2,test3
-      </p>
-      <p>
-        test1,test2,abcdefghijk
-        <Icon className="text-sea-600 !leading-7 align-middle" opticalSize={16}>
-          shopping_cart
-        </Icon>
-        test3 <Link>link text here</Link>
-      </p>
-      <p>
-        External link: <Link href="https://google.com">link text here</Link>
-      </p>
       <div>
-        List
+        <H2>Headings</H2>
+        <H1>SakuraUI Heading1</H1>
+        <H2>SakuraUI Heading2</H2>
+        <H3>SakuraUI Heading3</H3>
+        <H4>SakuraUI Heading4</H4>
+        <H5>SakuraUI Heading5</H5>
+        <H6>SakuraUI Heading6</H6>
+      </div>
+      <div>
+        <H2>Text</H2>
+        <p>
+          <Icon
+            className="text-sea-600 !leading-7 align-middle"
+            opticalSize={16}
+          >
+            home
+          </Icon>
+          test1,test2,test3
+        </p>
+        <p>
+          test1,test2,abcdefghijk
+          <Icon
+            className="text-sea-600 !leading-7 align-middle"
+            opticalSize={16}
+          >
+            shopping_cart
+          </Icon>
+          test3 <Link>link text here</Link>
+        </p>
+        <p>
+          External link: <Link href="https://google.com">link text here</Link>
+        </p>
+      </div>
+      <div>
+        <H2>List</H2>
         <Ul>
           <li>
             External link: <Link href="https://google.com">link text here</Link>
@@ -99,7 +113,7 @@ const Home = () => {
       </div>
       <div>
         <H2>Icons</H2>
-        <div className="flex gap-2">
+        <div className="flex gap-4">
           {[16, 20, 24, 40, 44, 48].map((size) => (
             <div className="inline-flex flex-col items-center">
               <Icon
@@ -176,16 +190,10 @@ const Home = () => {
             XXXXXxxxxxxxxxxxxxXXX
           </CardBody>
         </Card>
-        <Card className="flex justify-between items-center">
-          <span>
-            <CardHeader>xxxXXX</CardHeader>
-            <CardBody>xxxxxxxxXXX</CardBody>
-          </span>
-          <Icon
-            className="text-base-sm !font-medium mr-6"
-            icon="arrow_forward"
-          />
-        </Card>
+        <LinkCard href="/">
+          <LinkCardHeader>xxxXXX</LinkCardHeader>
+          <CardBody>xxxxxxxxXXX</CardBody>
+        </LinkCard>
         <Card>
           <CardImg src="bg-mt.webp" className="h-48 w-full" />
           <CardHeader>Header: XXXxxx</CardHeader>

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.2.7-beta.11",
+  "version": "0.2.8",
   "description": "",
   "keywords": [
     "react",

diff --git a/packages/core/src/components/Button.tsx b/packages/core/src/components/Button.tsx
@@ -16,7 +16,7 @@ export const Button: ComponentWithAs<'button', ButtonProps> = forwardRef(
   (props, ref) => {
     const {
       as: Component = 'button',
-      variant = 'primary',
+      variant = 'solid-fill',
       size = 'lg',
       className,
       children,

diff --git a/packages/core/src/components/Icon.tsx b/packages/core/src/components/Icon.tsx
@@ -48,7 +48,11 @@ export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
     <>
       <span
         aria-hidden="true"
-        className={cx(fontSize, 'material-symbols-outlined', className)}
+        className={cx(
+          fontSize,
+          'material-symbols-outlined align-middle',
+          className
+        )}
         {...rest}
         ref={ref}
       >

diff --git a/packages/core/src/components/IconButton.tsx b/packages/core/src/components/IconButton.tsx
@@ -1,9 +1,15 @@
 import { type ComponentWithAs, cx, forwardRef } from '@sakura-ui/helper'
-import { base, getVariantStyle, getSizeStyle } from './buttonStyle'
+import {
+  base,
+  getVariantStyle,
+  getSizeStyle,
+  ButtonVariant,
+  ButtonSize
+} from './buttonStyle'
 
 export interface IconButtonProps {
-  variant?: 'primary' | 'secondary'
-  size?: 'lg' | 'md' | 'sm' | 'xs'
+  variant?: ButtonVariant
+  size?: ButtonSize
   iconLayout?: 'left' | 'right'
   icon: string
   rounded?: string
@@ -13,7 +19,7 @@ export const IconButton: ComponentWithAs<'button', IconButtonProps> =
   forwardRef((props, ref) => {
     const {
       as: Component = 'button',
-      variant = 'primary',
+      variant = 'solid-fill',
       size = 'lg',
       iconLayout = 'left',
       icon,

diff --git a/packages/core/src/components/Link.tsx b/packages/core/src/components/Link.tsx
@@ -43,11 +43,7 @@ export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
           ref={ref}
         >
           <span>{children}</span>
-          <Icon
-            opticalSize={16}
-            altText="Opens in new tab"
-            className="ml-0.5 !leading-7 align-middle"
-          >
+          <Icon opticalSize={16} altText="Opens in new tab" className="ml-0.5">
             open_in_new
           </Icon>
         </Component>

diff --git a/packages/core/src/components/LinkCard.tsx b/packages/core/src/components/LinkCard.tsx
@@ -75,16 +75,14 @@ export const LinkCardHeader = ({
           <span>
             {children}
             {isExternal ? (
-              <Icon className="text-base ml-1 font-light" icon="open_in_new" />
+              <Icon opticalSize={16} className="ml-1">
+                open_in_new
+              </Icon>
             ) : (
               ''
             )}
           </span>
-          {isExternal ? (
-            ''
-          ) : (
-            <Icon className="text-base-sm !font-medium" icon="arrow_forward" />
-          )}
+          {isExternal ? '' : <Icon opticalSize={16}>arrow_forward</Icon>}
         </>
       )}
     </CardHeader>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml