@xjur-ui/react 1.0.6 → 2.1.0

package/src/components/sheet.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as SheetPrimitive from '@radix-ui/react-dialog'
 import { cx } from '@xjur-ui/util'
-import { Button } from './button'
+import { Button } from './form/button'
 import { Icon } from './icon'
 
 export function SheetRoot({
@@ -44,7 +44,7 @@ export function SheetOverlay({
   return (
     <SheetPrimitive.Overlay
       className={cx(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50',
         className
       )}
       data-slot="sheet-overlay"

package/src/components/tabs.tsx

@@ -1,53 +1,72 @@
+import * as React from 'react'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
-import { cva, cx } from '@xjur-ui/util'
+import { tv } from '@xjur-ui/util'
 
-export function TabsRoot({
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Tabs>) {
+const tabsStyles = tv({
+  slots: {
+    list: 'flex items-center gap-0',
+    trigger:
+      'inline-flex items-center justify-center gap-small px-small py-small_1x-alt h-large-4x ' +
+      'font-medium cursor-pointer transition-colors !text-size-label-md ' +
+      'disabled:opacity-38 disabled:pointer-events-none',
+    content: ''
+  },
+  variants: {
+    variant: {
+      line: {
+        trigger:
+          'rounded-small-1x text-neutral-dark border-b-[3px] border-b-transparent ' +
+          'hover:bg-layer-2-hover ' +
+          'data-[state=active]:text-primary-active ' +
+          'data-[state=active]:border-b-primary-active ' +
+          'data-[state=active]:rounded-none data-[state=active]:bg-transparent'
+      },
+      button: {
+        trigger:
+          'rounded-tl-small-1x rounded-tr-small-1x rounded-bl-none rounded-br-none px-large ' +
+          'bg-primary-idle text-neutral-label ' +
+          'hover:bg-primary-hover ' +
+          'data-[state=active]:bg-layer-2-idle data-[state=active]:text-primary-active'
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'button'
+  }
+})
+
+export function TabsRoot(
+  props: React.ComponentProps<typeof TabsPrimitive.Tabs>
+) {
   return <TabsPrimitive.Tabs {...props} />
 }
 
-export function TabsList({
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.TabsList>) {
-  return <TabsPrimitive.TabsList {...props} />
+export type TabsListProps = React.ComponentProps<typeof TabsPrimitive.TabsList>
+
+export function TabsList({ className, ...props }: TabsListProps) {
+  const { list } = tabsStyles({})
+  return <TabsPrimitive.TabsList className={list({ className })} {...props} />
+}
+
+export interface TabsTriggerProps
+  extends React.ComponentProps<typeof TabsPrimitive.TabsTrigger> {
+  variant?: 'line' | 'button'
 }
 
 export function TabsTrigger({
   variant,
   className,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.TabsTrigger> & {
-  variant?: 'line' | 'button'
-}) {
-  const variants = cva(
-    [
-      'rounded-small-1x h-large-4x cursor-pointer text-size-label-md text-neutral-dark'
-    ],
-    {
-      variants: {
-        variant: {
-          line: 'py-small_1x-alt px-small data-[state=active]:border-b-[3px] data-[state=active]:border-b-primary-active data-[state=active]:rounded-none hover:bg-layer-2-hover',
-          button:
-            'rounded-br-none rounded-bl-none py-small_1x-alt px-large bg-primary-idle text-neutral-label hover:bg-primary-hover data-[state=active]:bg-layer-2-idle data-[state=active]:text-primary-label-active'
-        }
-      },
-      defaultVariants: {
-        variant: 'button'
-      }
-    }
-  )
-
+}: TabsTriggerProps) {
+  const { trigger } = tabsStyles({ variant })
   return (
-    <TabsPrimitive.TabsTrigger
-      className={cx(className, variants({ variant }))}
-      {...props}
-    />
+    <TabsPrimitive.TabsTrigger className={trigger({ className })} {...props} />
   )
 }
 
-export function TabsContent({
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.TabsContent>) {
-  return <TabsPrimitive.TabsContent {...props} />
+export function TabsContent(
+  props: React.ComponentProps<typeof TabsPrimitive.TabsContent>
+) {
+  const { content } = tabsStyles()
+  return <TabsPrimitive.TabsContent className={content()} {...props} />
 }

package/src/components/tag.tsx

@@ -27,9 +27,17 @@ const tagVariants = cva(
 export function TagRoot({
   className,
   variant = 'primary',
+  disabled = false,
   ...props
-}: ComponentProps<'div'> & ClassVariantProps<typeof tagVariants>) {
-  return <div className={cx(tagVariants({ variant }), className)} {...props} />
+}: ComponentProps<'div'> &
+  ClassVariantProps<typeof tagVariants> & { disabled?: boolean }) {
+  return (
+    <div
+      className={cx(tagVariants({ variant }), className)}
+      data-disabled={disabled}
+      {...props}
+    />
+  )
 }
 
 export function TagText({
@@ -77,7 +85,7 @@ export function TagClose({
       className={cx(
         className,
         'cursor-pointer bg-inherit',
-        'invisible items-center justify-center group-hover/tag:visible',
+        'invisible items-center justify-center group-hover/tag:data-[disabled=false]:visible',
         'absolute top-0 right-0',
         'h-large-2x w-large-2x rounded-circle',
         'transition-[visibility] duration-200'