@xjur-ui/react 1.0.4 → 2.0.0

package/src/components/select.tsx

@@ -1,6 +1,6 @@
-import type { ComponentProps } from 'react'
+import { createContext, useContext, type ComponentProps } from 'react'
 import * as RadixPopover from '@radix-ui/react-popover'
-import { cx } from '@xjur-ui/util'
+import { tv, twMerge } from '@xjur-ui/util'
 import {
   ListContent,
   ListItem,
@@ -17,25 +17,57 @@ import {
 import { Icon } from './icon'
 import { Typography, type TypographyProps } from './typography'
 
-export function SelectRoot(props: ComponentProps<typeof RadixPopover.Root>) {
-  return <RadixPopover.Root {...props} />
+const SelectContext = createContext({
+  disabled: false,
+  hasError: false
+})
+
+function useSelect() {
+  const context = useContext(SelectContext)
+
+  if (!context) {
+    throw new Error('useSelect must be used within a SelectRoot')
+  }
+
+  return context
+}
+
+export function SelectRoot({
+  disabled = false,
+  hasError = false,
+  ...props
+}: ComponentProps<typeof RadixPopover.Root> & {
+  disabled?: boolean
+  hasError?: boolean
+}) {
+  return (
+    <SelectContext.Provider value={{ disabled, hasError }}>
+      <RadixPopover.Root {...props} />
+    </SelectContext.Provider>
+  )
 }
 
 export function SelectTrigger({
   className,
   ...props
 }: ComponentProps<typeof RadixPopover.Trigger>) {
+  const { disabled, hasError } = useSelect()
+
   return (
     <RadixPopover.Trigger
-      className={cx(
+      className={twMerge(
         className,
         'group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center',
         'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border',
-        'data-[state=open]:border-primary-idle',
-        'has-[input:not(:placeholder-shown)]:text-primary-idle',
-        'has-[input:not(:placeholder-shown)]:border-primary-idle'
+        'data-[state=open]:border-primary-idle data-[state=open]:data-[has-error=true]:border-danger-label-active',
+        'has-[input:not(:placeholder-shown)]:text-primary-idle has-[input:not(:placeholder-shown)]:data-[has-error=true]:text-danger-label-active',
+        'has-[input:not(:placeholder-shown)]:border-primary-idle has-[input:not(:placeholder-shown)]:data-[has-error=true]:border-danger-label-active',
+        'disabled:bg-layer-2-idle disabled:cursor-text disabled:border-none disabled:select-text',
+        'data-[has-error=true]:border-danger-idle data-[has-error=true]:hover:border-danger-idle'
       )}
       {...props}
+      data-has-error={hasError}
+      disabled={disabled}
     />
   )
 }
@@ -52,7 +84,7 @@ export function SelectContent({
     <RadixPopover.Portal>
       <RadixPopover.Content
         align={align}
-        className={cx(
+        className={twMerge(
           className,
           'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]'
         )}
@@ -74,7 +106,14 @@ export function SelectValue({
   return (
     <>
       {!!displayValue && (
-        <Typography className="text-neutral-dark group-has-[div[data-slot=select-left-slot]]:pl-large-1x">
+        <Typography
+          className={twMerge(
+            className,
+            'text-neutral-dark',
+            // if has left slot, add the left slot padding
+            'group-has-[div[data-slot=select-left-slot]]:pl-large-1x'
+          )}
+        >
           {displayValue}
         </Typography>
       )}
@@ -82,7 +121,7 @@ export function SelectValue({
       <input
         {...props}
         aria-readonly={true}
-        className={cx(className, 'pointer-events-none')}
+        className={twMerge(className, 'pointer-events-none')}
         hidden={true}
         placeholder={props.placeholder ?? ' '}
         readOnly={true}
@@ -99,9 +138,13 @@ export function SelectMultiValue({
 }: ComponentProps<'div'> & { values: string[] }) {
   return (
     <div
-      className={cx(
+      className={twMerge(
         className,
-        'gap-small-1x scrollbar-hide group-has-[div[data-slot=select-left-slot]]:pl-large-1x overflow-x-small flex'
+        'gap-small-1x scrollbar-hide overflow-x-small flex',
+        // if has left slot, add the left slot padding
+        'group-has-[div[data-slot=select-left-slot]]:pl-large-1x',
+        // if the trigger is disabled, remove the left slot padding
+        'group-disabled:!pl-0'
       )}
       {...props}
     >
@@ -109,7 +152,7 @@ export function SelectMultiValue({
 
       <input
         aria-readonly={true}
-        className={cx(className, 'pointer-events-none')}
+        className={twMerge(className, 'pointer-events-none')}
         hidden={true}
         placeholder={' '}
         readOnly={true}
@@ -125,20 +168,22 @@ export function SelectLabel({
   children,
   ...props
 }: TypographyProps & { htmlFor?: string }) {
+  const { hasError } = useSelect()
+
   return (
     <Typography
       asChild={true}
-      className={cx(
+      className={twMerge(
         'inline-block max-w-full truncate text-left font-normal',
         'left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2',
         'ease transition-all duration-250',
         // Content Open
-        'group-data-[state=open]:text-primary-idle',
+        'group-data-[state=open]:!text-primary-idle group-data-[state=open]:data-[has-error=true]:!text-danger-label-active',
         'group-data-[state=open]:-top-[3px]',
         'group-data-[state=open]:text-size-label-sm-1x',
         'group-data-[state=open]:font-medium',
         // Filled
-        'group-has-[input:not(:placeholder-shown)]:text-primary-idle',
+        'group-has-[input:not(:placeholder-shown)]:!text-primary-idle group-has-[input:not(:placeholder-shown)]:data-[has-error=true]:!text-danger-label-active',
         'group-has-[input:not(:placeholder-shown)]:-top-[3px]',
         'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',
         'group-has-[input:not(:placeholder-shown)]:font-medium',
@@ -154,9 +199,10 @@ export function SelectLabel({
         'group-data-[state=open]:animate-in',
         'group-data-[state=closed]:animate-out',
         'group-has-[input:not(:placeholder-shown)]:animate-out',
+        'group-disabled:hidden',
         className
       )}
-      weight="medium"
+      data-has-error={hasError}
       {...props}
     >
       <label htmlFor={htmlFor}>
@@ -176,7 +222,9 @@ export function SelectOption({
   className,
   ...props
 }: ComponentProps<typeof ListItem>) {
-  return <ListItem className={cx(className, 'cursor-pointer')} {...props} />
+  return (
+    <ListItem className={twMerge(className, 'cursor-pointer')} {...props} />
+  )
 }
 
 export function SelectOptionText(props: ComponentProps<typeof Typography>) {
@@ -193,15 +241,11 @@ export function SelectHeaderTitle(
   return <ListHeaderTitle {...props} />
 }
 
-export function SelectDropdown(props: ComponentProps<'div'>) {
-  return <div {...props} />
-}
-
 export function SelectLeftSlot({ className, ...props }: ComponentProps<'div'>) {
   return (
     <div
       {...props}
-      className={cx(
+      className={twMerge(
         className,
         'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
       )}
@@ -217,9 +261,10 @@ export function SelectRightSlot({
   return (
     <div
       {...props}
-      className={cx(
+      className={twMerge(
         className,
-        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
+        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center',
+        'group-disabled:hidden'
       )}
       data-slot="select-right-slot"
     />
@@ -238,3 +283,36 @@ export function SelectSearch(props: ComponentProps<typeof SearchInputText>) {
     </SearchInputRoot>
   )
 }
+
+export function SelectCaption({
+  className,
+  variant = 'body',
+  size = 'sm',
+  weight = 'normal',
+  ...props
+}: ComponentProps<typeof Typography>) {
+  const { hasError } = useSelect()
+
+  const caption = tv({
+    base: 'text-size-body-sm mt-small-1x font-normal',
+    variants: {
+      state: {
+        error: 'text-danger-label-active',
+        idle: 'text-neutral-dark'
+      }
+    }
+  })
+
+  return (
+    <Typography
+      className={caption({
+        state: hasError ? 'error' : 'idle',
+        className
+      })}
+      size={size}
+      variant={variant}
+      weight={weight}
+      {...props}
+    />
+  )
+}

package/src/components/status.tsx

@@ -0,0 +1,43 @@
+import type { ComponentProps } from 'react'
+import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
+import { Typography } from './typography'
+
+export const statusVariants = cva(
+  [
+    'inline-flex items-center justify-center px-small py-small-1x rounded-small-1x text-label-sm font-medium text-neutral-label h-large-2x'
+  ],
+  {
+    variants: {
+      variant: {
+        success: 'bg-success-idle',
+        warning: 'bg-warning-idle',
+        danger: 'bg-danger-idle',
+        neutral: 'bg-alt-3'
+      }
+    },
+    defaultVariants: {
+      variant: 'neutral'
+    }
+  }
+)
+
+export interface StatusProps
+  extends ComponentProps<'div'>,
+    ClassVariantProps<typeof statusVariants> {
+  text?: string
+}
+
+export function Status({
+  text = 'Status',
+  variant = 'neutral',
+  className,
+  ...props
+}: StatusProps) {
+  return (
+    <div className={cx(statusVariants({ variant }), className)} {...props}>
+      <Typography size="sm" variant="label" weight="medium">
+        {text}
+      </Typography>
+    </div>
+  )
+}

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'

package/src/index.css

@@ -1,5 +1,5 @@
 @import "tailwindcss";
 @import "@xjur-ui/styles/theme.css";
 @import "tw-animate-css";
-@plugin "tailwind-scrollbar-hide";
-@plugin "tailwind-scrollbar";
+@plugin "tailwind-scrollbar";
+@plugin "tailwind-scrollbar-hide";

package/src/resources/logo/index.tsx

@@ -0,0 +1,33 @@
+import { Horizontal } from './horizontal'
+import { Vertical } from './vertical'
+import { Icon } from './icon'
+
+interface LogoWrapperProps {
+  mode: 'horizontal' | 'vertical' | 'icon'
+  variant: 'colorful' | 'orange' | 'purple' | 'white' | 'gray'
+  color?: string
+}
+
+export default function LogoWrapper({
+  mode,
+  variant,
+  color
+}: LogoWrapperProps) {
+  switch (mode) {
+    case 'icon':
+      if (variant === 'colorful' || !color) {
+        return <Icon.Colorful />
+      }
+      return <Icon.Solid color={color} />
+    case 'vertical':
+      if (variant === 'colorful' || !color) {
+        return <Vertical.Colorful />
+      }
+      return <Vertical.Solid color={color} />
+    case 'horizontal':
+      if (variant === 'colorful' || !color) {
+        return <Horizontal.Colorful />
+      }
+      return <Horizontal.Solid color={color} />
+  }
+}

package/tsup.config.ts

@@ -1,12 +1,30 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  // all js and ts
-  entry: ['src/index.ts', 'src/components/**/*.ts', 'src/components/**/*.tsx'],
+  entry: [
+    'src/index.ts',
+    'src/components/**/*.ts',
+    'src/components/**/*.tsx',
+    'src/hooks/index.ts',
+    'src/index.css'
+  ],
   format: ['esm'],
   outDir: 'dist',
-  external: ['react', 'react-dom'],
+  external: [
+    'react',
+    'react-dom',
+    'react/jsx-runtime',
+    '@radix-ui/**',
+    '@tiptap/**',
+    'react-day-picker',
+    '@react-input/**'
+  ],
   dts: true,
-  splitting: false,
-  clean: true
+  splitting: true,
+  treeshake: true,
+  minify: true,
+  sourcemap: true,
+  clean: true,
+  target: 'esnext',
+  platform: 'browser'
 })

package/src/index.ts

@@ -1 +0,0 @@
-import './index.css'

package/src/resources/logo/index.ts

@@ -1,3 +0,0 @@
-export { Horizontal } from './horizontal'
-export { Vertical } from './vertical'
-export { Icon } from './icon'