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

.changeset/three-dogs-carry.md

@@ -0,0 +1,10 @@
+---
+'@genseki/react': patch
+'@example/erp': patch
+---
+
+- Deprecated `link` component
+- Remove button `link` variant
+- Add example for `link` usage
+- Update button variants
+- update design tokens

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/button-section.tsx

@@ -28,13 +28,39 @@ import { PlaygroundCard } from '~/src/components/card'
 // Basic Button Variants
 function ButtonVariants() {
   return (
-    <div className="flex flex-wrap gap-4">
-      <Button variant="default">Default</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="destructive">Destructive</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="link">Link</Button>
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-4">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="tertiary">Tertiary</Button>
+        <Button variant="naked">Naked</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="destructive">Destructive</Button>
+      </div>
+      <div className="flex flex-wrap gap-4">
+        <Button disabled variant="primary">
+          Primary
+        </Button>
+        <Button disabled variant="secondary">
+          Secondary
+        </Button>
+        <Button disabled variant="tertiary">
+          Tertiary
+        </Button>
+        <Button disabled variant="naked">
+          Naked
+        </Button>
+        <Button disabled variant="outline">
+          Outline
+        </Button>
+        <Button disabled variant="ghost">
+          Ghost
+        </Button>
+        <Button disabled variant="destructive">
+          Destructive
+        </Button>
+      </div>
     </div>
   )
 }
@@ -137,7 +163,9 @@ function ButtonGroupBasic() {
   return (
     <ButtonGroup>
       <Button variant="outline">One</Button>
+      <ButtonGroupSeparator />
       <Button variant="outline">Two</Button>
+      <ButtonGroupSeparator />
       <Button variant="outline">Three</Button>
     </ButtonGroup>
   )
@@ -229,12 +257,10 @@ function ButtonGroupVariants() {
   return (
     <div className="space-y-4">
       <ButtonGroup>
-        <Button variant="default">Primary</Button>
+        <Button variant="primary">Primary</Button>
         <Button variant="secondary">Secondary</Button>
+        <Button variant="naked">Naked</Button>
         <Button variant="outline">Outline</Button>
-      </ButtonGroup>
-
-      <ButtonGroup>
         <Button variant="ghost">Ghost</Button>
         <Button variant="destructive">Destructive</Button>
       </ButtonGroup>

examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx

@@ -256,7 +256,7 @@ function CustomTriggerComboboxSingle() {
     <ComboboxProvider items={frameworks}>
       <ComboboxTrigger>
         {(selectedItem) => (
-          <Button variant="secondary" className="w-[250px] justify-between">
+          <Button variant="outline" className="w-[250px] justify-between">
             {selectedItem ? (
               <span>🚀 {selectedItem.label}</span>
             ) : (
@@ -292,7 +292,7 @@ export function ComboboxSection() {
     <div className="grid gap-8">
       <PlaygroundCard title="Basic Combobox (Multiple selection)" categoryTitle="Component">
         <Typography type="body" className="text-muted-foreground mb-4">
-          A simple combobox with default styling and behavior.
+          A simple combobox with default styling and mbehavior.
         </Typography>
         <div className="p-4 bg-background w-full rounded-lg">
           <BasicComboboxMultiple />

examples/ui-playground/src/app/playground/shadcn/input-section.tsx

@@ -246,7 +246,7 @@ function InputGroupWithButtons() {
           <Input placeholder="Enter your message" />
         </InputGroupControl>
         <InputGroupAddon align="inline-end">
-          <InputGroupButton size="xs" variant="default">
+          <InputGroupButton size="xs" variant="primary">
             <PaperPlaneRightIcon />
             Send
           </InputGroupButton>

examples/ui-playground/src/app/playground/shadcn/link-section.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import Link from 'next/link'
+
+import { linkVariants, Typography } from '@genseki/react'
+
+import { PlaygroundCard } from '../../../components/card'
+
+export const LinkSection = () => {
+  return (
+    <div className="grid gap-8">
+      <PlaygroundCard title="Basic Link" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A simple Link component examples
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg flex gap-x-2">
+          <Link className={linkVariants({ variant: 'underline', size: 'sm' })} href=".">
+            Link
+          </Link>
+          <Link className={linkVariants({ variant: 'plain', size: 'sm' })} href=".">
+            Link
+          </Link>
+        </div>
+      </PlaygroundCard>
+    </div>
+  )
+}

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

@@ -1,11 +1,14 @@
 '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'
 import { InputSection } from './input-section'
+import { LinkSection } from './link-section'
 
 export default function ComboboxPage() {
   return (
@@ -29,6 +32,11 @@ export default function ComboboxPage() {
           Input
         </Typography>
         <InputSection />
+
+        <Typography type="h2" weight="bold" id="link">
+          Link
+        </Typography>
+        <LinkSection />
       </div>
       <div className="relative bg-card border-l border-border w-[200px]">
         <div className="sticky inset-0 max-h-screen [overscroll-behavior:none] p-4">
@@ -38,6 +46,8 @@ export default function ComboboxPage() {
             <Link href="#combobox">{'>'} Combobox</Link>
             <hr />
             <Link href="#input">{'>'} Input</Link>
+            <hr />
+            <Link href="#link">{'>'} Link</Link>
           </div>
         </div>
       </div>

examples/ui-playground/src/components/card.tsx

@@ -1,6 +1,5 @@
 import { StarIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { BaseIcon } from '@genseki/react'
 import { Typography } from '@genseki/react'
 
 type PlaygroundCardProps = React.PropsWithChildren<{
@@ -14,11 +13,11 @@ export const PlaygroundCard = ({
   children,
 }: PlaygroundCardProps) => {
   return (
-    <div className="border-border inline-flex min-w-[260px] flex-col rounded-lg border">
+    <div className="border-border inline-flex min-w-[260px] flex-col rounded-lg border bg-background">
       <div className="border-border flex w-full flex-col gap-y-4 border-b px-4 py-6">
         <div className="flex items-center gap-x-2">
           <div className="rounded-md bg-blue-500 p-2">
-            <BaseIcon icon={StarIcon} size="sm" weight="duotone" className="text-text-inverse" />
+            <StarIcon className="text-text-inverse" />
           </div>
           <Typography type="caption" weight="medium" className="text-blue-500">
             {categoryTitle}

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/button.tsx

@@ -202,20 +202,26 @@ export { AriaButton, AriaButtonLink, type AriaButtonLinkProps, type AriaButtonPr
 
 const buttonVariants = cva(
   [
-    "inline-flex items-center justify-center gap-4 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "inline-flex items-center justify-center gap-4 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring ring-offset-1 focus-visible:ring-ring/50 focus-visible:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     'disabled:opacity-80 cursor-pointer',
   ],
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary',
+        primary:
+          ' bg-surface-button-primary shadow-[inset_0px_-12px_12px_-6px_var(--color-surface-button-primary-hover)] text-text-inverse hover:bg-surface-button-primary-hover active:bg-surface-button-primary disabled:bg-surface-button-primary-disabled disabled:shadow-none disabled:text-text-disabled disabled:border disabled:border-border-button-primary-disabled',
+        secondary:
+          ' bg-surface-button-secondary text-text-brand hover:bg-surface-button-secondary-hover active:bg-surface-button-secondary disabled:bg-surface-button-secondary-disabled disabled:shadow-none disabled:text-text-disabled',
+        tertiary:
+          ' bg-surface-button-tertiary border border-border-button-tertiary text-text-brand hover:bg-surface-button-tertiary-hover active:bg-surface-button-tertiary hover:border-border-button-tertiary-hover disabled:bg-surface-button-tertiary-disabled disabled:border-border-button-tertiary-disabled disabled:text-text-disabled',
+        naked:
+          'shadow-sm ring-offset-0 text-text-secondary hover:bg-surface-button-naked-hover active:bg-transparent disabled:bg-surface-button-naked-disabled  disabled:text-text-disabled',
+        outline:
+          ' border border-border-button-outline text-text-secondary bg-surface-button-outline shadow-xs hover:bg-surface-button-outline-hover active:bg-surface-button-outline hover:border-border-button-outline-hover disabled:bg-surface-button-outline-disabled disabled:text-text-disabled disabled:border disabled:border-border-button-outline-disabled dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        ghost:
+          ' bg-surface-button-ghost hover:bg-surface-button-ghost-hover active:bg-surface-button-ghost text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50',
         destructive:
           'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline hover:border-0',
       },
       size: {
         default: 'h-18 px-8 py-4 has-[>svg]:px-6',
@@ -227,7 +233,7 @@ const buttonVariants = cva(
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: 'primary',
       size: 'default',
     },
   }

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

@@ -9,6 +9,7 @@ import {
   MagnifyingGlassIcon,
   SpinnerIcon,
   XCircleIcon,
+  XIcon,
 } from '@phosphor-icons/react'
 import { useControllableState } from '@radix-ui/react-use-controllable-state'
 import { tv } from 'tailwind-variants'
@@ -533,8 +534,20 @@ function ComboboxTriggerMultiValue(props: {
     return (
       <span className="flex flex-wrap flex-1 gap-2 pr-8">
         {selectedItems.map((selectedItem) => (
-          <Badge shape="square" intent="gray" key={selectedItem.value}>
+          <Badge
+            onClick={(e) => {
+              e.stopPropagation()
+              ctx.onValueChange((prevItems) =>
+                prevItems.filter((prevItem) => prevItem !== selectedItem.value)
+              )
+            }}
+            shape="square"
+            intent="gray"
+            key={selectedItem.value}
+            className="flex "
+          >
             {selectedItem.label}
+            <XIcon className="size-5 ml-1" />
           </Badge>
         ))}
       </span>
@@ -614,7 +627,10 @@ function ComboboxContent({
 >) {
   return (
     <Command loop className="w-fit">
-      <PopoverContent className={cn('w-(--radix-popover-trigger-width) p-0', className)} {...props}>
+      <PopoverContent
+        className={cn('w-(--radix-popover-trigger-width) bg-background p-0', className)}
+        {...props}
+      >
         {children}
       </PopoverContent>
     </Command>