migrate: depreacted link component, update design token, buttom variants

.changeset/three-dogs-carry.md

@@ -0,0 +1,6 @@
+---
+'@genseki/react': patch
+'@example/erp': patch
+---
+
+- Migrate `link` component

examples/ui-playground/src/app/playground/page.tsx

@@ -27,6 +27,7 @@ import {
   AriaButton,
   AriaButtonGroup,
   AriaButtonGroupItem,
+  AriaLink,
   AriaModal,
   AriaModalBody,
   AriaModalClose,
@@ -50,7 +51,6 @@ import {
   Breadcrumbs,
   BreadcrumbsItem,
   Card,
-  Link,
   PageSizeSelect,
   Pagination,
   ProgressBar,
@@ -772,9 +772,9 @@ export default function UIPlayground() {
                       />
                       <div className="my-4 flex items-center justify-between">
                         <Checkbox name="remember-me">Remember me</Checkbox>
-                        <Link className="text-sm" href="#">
+                        <AriaLink className="text-sm" href="#">
                           Forgot password?
-                        </Link>
+                        </AriaLink>
                       </div>
                       <div>
                         <CheckboxGroup

examples/ui-playground/src/app/playground/shadcn/page.tsx

@@ -1,7 +1,9 @@
 'use client'
 import * as React from 'react'
 
-import { Link, Typography } from '@genseki/react'
+import Link from 'next/link'
+
+import { Typography } from '@genseki/react'
 
 import { ButtonSection } from './button-section'
 import { ComboboxSection } from './combobox-section'

packages/react/src/auth/plugins/email-and-password/views/login/login.client.tsx

@@ -15,7 +15,7 @@ import {
   FormItem,
   FormMessage,
 } from '../../../../../react/components/primitives/form'
-import { Link } from '../../../../../react/components/primitives/link'
+import { AriaLink } from '../../../../../react/components/primitives/link'
 import { AriaTextField } from '../../../../../react/components/primitives/text-field'
 import { useNavigation } from '../../../../../react/providers/navigation'
 import { useServerFunction } from '../../../../../react/providers/root'
@@ -125,9 +125,9 @@ export function LoginClientForm() {
               </FormItem>
             )}
           />
-          <Link href="./forgot-password" intent="primary" className="text-sm ml-auto">
+          <AriaLink href="./forgot-password" intent="primary" className="text-sm ml-auto">
             Forgot Password?
-          </Link>
+          </AriaLink>
           <SubmitButton pending={isLoading}>Login</SubmitButton>
         </form>
       </Form>

packages/react/src/react/components/compound/collection-card.tsx

@@ -2,7 +2,7 @@ import { CaretRightIcon, CubeIcon, FolderIcon } from '@phosphor-icons/react/dist
 
 import { Badge } from '../../icons/badge'
 import { BaseIcon } from '../primitives/base-icon'
-import { Link } from '../primitives/link'
+import { AriaLink } from '../primitives/link'
 import { Typography } from '../primitives/typography'
 
 interface CollectionCardProps {
@@ -51,7 +51,7 @@ export const CollectionCard = ({
           {description}
         </Typography>
       </div>
-      <Link
+      <AriaLink
         href={url}
         className="[&>*]:text-primary group flex w-full justify-end rounded-[calc(var(--spacing)*4)] p-5 text-end transition-all [background-image:linear-gradient(120deg,_--alpha(var(--color-primary)/5%)_35%,--alpha(var(--color-primary)/10%)_40%,--alpha(var(--color-primary)/0%)_80%,--alpha(var(--color-primary)/5%))] hover:[background-position:40px_0]"
       >
@@ -64,7 +64,7 @@ export const CollectionCard = ({
           weight="regular"
           className="transition-transform group-hover:translate-x-2"
         />
-      </Link>
+      </AriaLink>
     </div>
   )
 }

packages/react/src/react/components/primitives/breadcrumbs.tsx

@@ -6,7 +6,7 @@ import { Breadcrumb, Breadcrumbs as BreadcrumbsPrimitive } from 'react-aria-comp
 import { IconChevronLgRight } from '@intentui/icons'
 import { twMerge } from 'tailwind-merge'
 
-import { Link } from './link'
+import { AriaLink } from './link'
 import { composeTailwindRenderProps } from './primitive'
 
 interface BreadcrumbsContextProps {
@@ -54,7 +54,7 @@ const BreadcrumbsItem = ({
     >
       {({ isCurrent }) => (
         <>
-          <Link href={href} {...props} />
+          <AriaLink href={href} {...props} />
           {trailing}
           {!isCurrent && separator !== false && <Separator separator={separatorValue} />}
         </>

packages/react/src/react/components/primitives/link.tsx

@@ -6,12 +6,19 @@ import { twJoin } from 'tailwind-merge'
 
 import { composeTailwindRenderProps } from './primitive'
 
-interface LinkProps extends LinkPrimitiveProps {
+/**
+ * @deprecated
+ */
+interface AriaLinkProps extends LinkPrimitiveProps {
   intent?: 'primary' | 'secondary' | 'unstyled'
   ref?: React.RefObject<HTMLAnchorElement>
 }
 
-const Link = ({ className, ref, intent = 'unstyled', ...props }: LinkProps) => {
+/**
+ * @deprecated
+ * Use anchor tag instead
+ */
+const AriaLink = ({ className, ref, intent = 'unstyled', ...props }: AriaLinkProps) => {
   return (
     <LinkPrimitive
       ref={ref}
@@ -34,5 +41,5 @@ const Link = ({ className, ref, intent = 'unstyled', ...props }: LinkProps) => {
   )
 }
 
-export type { LinkProps }
-export { Link }
+export type { AriaLinkProps }
+export { AriaLink }

packages/react/src/react/pages/401.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { Link } from '../components'
+import { AriaLink } from '../components'
 import { BaseIcon } from '../components/primitives/base-icon'
 import { Typography } from '../components/primitives/typography'
 
@@ -45,10 +45,10 @@ export const NotAuthorizedPage = ({
         {description}
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
-      <Link intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
+      <AriaLink intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
         <BaseIcon size="sm" icon={ArrowLeftIcon} className="text-text-brand" weight="bold" />
         {redirectSentence}
-      </Link>
+      </AriaLink>
     </div>
   )
 }

packages/react/src/react/pages/403.tsx

@@ -1,6 +1,6 @@
 import { ArrowRightIcon, LockKeyIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { Link } from '../components'
+import { AriaLink } from '../components'
 import { BaseIcon } from '../components/primitives/base-icon'
 import { Typography } from '../components/primitives/typography'
 
@@ -22,10 +22,10 @@ export const UnauthorizedPage = () => {
         You are not authorized to access this page. Please check your permission and try again.
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
-      <Link intent="primary" href="/" className="mt-12 flex items-end gap-x-2">
+      <AriaLink intent="primary" href="/" className="mt-12 flex items-end gap-x-2">
         Back to home
         <BaseIcon size="sm" icon={ArrowRightIcon} className="text-text-brand" weight="bold" />
-      </Link>
+      </AriaLink>
     </div>
   )
 }

packages/react/src/react/pages/404.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { Link } from '../components'
+import { AriaLink } from '../components'
 import { BaseIcon } from '../components/primitives/base-icon'
 import { Typography } from '../components/primitives/typography'
 
@@ -45,10 +45,10 @@ export const NotfoundPage = ({
         {description}
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
-      <Link intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
+      <AriaLink intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
         <BaseIcon size="sm" icon={ArrowLeftIcon} className="text-text-brand" weight="bold" />
         {redirectSentence}
-      </Link>
+      </AriaLink>
     </div>
   )
 }