@xjur-ui/react 2.0.0 → 2.1.1

package/dist/components/select.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/select.tsx"],"names":["SelectContext","createContext","useSelect","context","useContext","SelectRoot","disabled","hasError","props","jsx","SelectTrigger","className","twMerge","SelectContent","children","sideOffset","side","align","ListRoot","SelectValue","displayValue","jsxs","Fragment","Typography","SelectMultiValue","values","SelectLabel","htmlFor","SelectOptions","ListContent","SelectOption","ListItem","SelectOptionText","SelectHeader","ListHeader","SelectHeaderTitle","ListHeaderTitle","SelectLeftSlot","SelectRightSlot","SelectSearch","SearchInputRoot","SearchInputContent","SearchInputSlot","Icon","SearchInputText","SelectCaption","variant","size","weight","caption","tv"],"mappings":"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","file":"select.js","sourcesContent":["import { createContext, useContext, type ComponentProps } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport { tv, twMerge } from '@xjur-ui/util'\nimport {\n  ListContent,\n  ListItem,\n  ListRoot,\n  ListHeader,\n  ListHeaderTitle\n} from './list'\nimport {\n  SearchInputContent,\n  SearchInputText,\n  SearchInputRoot,\n  SearchInputSlot\n} from './search-input'\nimport { Icon } from './icon'\nimport { Typography, type TypographyProps } from './typography'\n\nconst SelectContext = createContext({\n  disabled: false,\n  hasError: false\n})\n\nfunction useSelect() {\n  const context = useContext(SelectContext)\n\n  if (!context) {\n    throw new Error('useSelect must be used within a SelectRoot')\n  }\n\n  return context\n}\n\nexport function SelectRoot({\n  disabled = false,\n  hasError = false,\n  ...props\n}: ComponentProps<typeof RadixPopover.Root> & {\n  disabled?: boolean\n  hasError?: boolean\n}) {\n  return (\n    <SelectContext.Provider value={{ disabled, hasError }}>\n      <RadixPopover.Root {...props} />\n    </SelectContext.Provider>\n  )\n}\n\nexport function SelectTrigger({\n  className,\n  ...props\n}: ComponentProps<typeof RadixPopover.Trigger>) {\n  const { disabled, hasError } = useSelect()\n\n  return (\n    <RadixPopover.Trigger\n      className={twMerge(\n        className,\n        'group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center',\n        'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border',\n        'data-[state=open]:border-primary-idle data-[state=open]:data-[has-error=true]:border-danger-label-active',\n        'has-[input:not(:placeholder-shown)]:text-primary-idle has-[input:not(:placeholder-shown)]:data-[has-error=true]:text-danger-label-active',\n        'has-[input:not(:placeholder-shown)]:border-primary-idle has-[input:not(:placeholder-shown)]:data-[has-error=true]:border-danger-label-active',\n        'disabled:bg-layer-2-idle disabled:cursor-text disabled:border-none disabled:select-text',\n        'data-[has-error=true]:border-danger-idle data-[has-error=true]:hover:border-danger-idle'\n      )}\n      {...props}\n      data-has-error={hasError}\n      disabled={disabled}\n    />\n  )\n}\n\nexport function SelectContent({\n  className,\n  children,\n  sideOffset = 4,\n  side = 'bottom',\n  align = 'start',\n  ...props\n}: ComponentProps<typeof RadixPopover.Content>) {\n  return (\n    <RadixPopover.Portal>\n      <RadixPopover.Content\n        align={align}\n        className={twMerge(\n          className,\n          '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)]'\n        )}\n        side={side}\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <ListRoot>{children}</ListRoot>\n      </RadixPopover.Content>\n    </RadixPopover.Portal>\n  )\n}\n\nexport function SelectValue({\n  className,\n  displayValue = '',\n  ...props\n}: ComponentProps<'input'> & { displayValue?: string }) {\n  return (\n    <>\n      {!!displayValue && (\n        <Typography\n          className={twMerge(\n            className,\n            'text-neutral-dark',\n            // if has left slot, add the left slot padding\n            'group-has-[div[data-slot=select-left-slot]]:pl-large-1x'\n          )}\n        >\n          {displayValue}\n        </Typography>\n      )}\n\n      <input\n        {...props}\n        aria-readonly={true}\n        className={twMerge(className, 'pointer-events-none')}\n        hidden={true}\n        placeholder={props.placeholder ?? ' '}\n        readOnly={true}\n      />\n    </>\n  )\n}\n\nexport function SelectMultiValue({\n  className,\n  values,\n  children,\n  ...props\n}: ComponentProps<'div'> & { values: string[] }) {\n  return (\n    <div\n      className={twMerge(\n        className,\n        'gap-small-1x scrollbar-hide overflow-x-small flex',\n        // if has left slot, add the left slot padding\n        'group-has-[div[data-slot=select-left-slot]]:pl-large-1x',\n        // if the trigger is disabled, remove the left slot padding\n        'group-disabled:!pl-0'\n      )}\n      {...props}\n    >\n      {children}\n\n      <input\n        aria-readonly={true}\n        className={twMerge(className, 'pointer-events-none')}\n        hidden={true}\n        placeholder={' '}\n        readOnly={true}\n        value={values.join(',')}\n      />\n    </div>\n  )\n}\n\nexport function SelectLabel({\n  className,\n  htmlFor,\n  children,\n  ...props\n}: TypographyProps & { htmlFor?: string }) {\n  const { hasError } = useSelect()\n\n  return (\n    <Typography\n      asChild={true}\n      className={twMerge(\n        'inline-block max-w-full truncate text-left font-normal',\n        'left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2',\n        'ease transition-all duration-250',\n        // Content Open\n        'group-data-[state=open]:!text-primary-idle group-data-[state=open]:data-[has-error=true]:!text-danger-label-active',\n        'group-data-[state=open]:-top-[3px]',\n        'group-data-[state=open]:text-size-label-sm-1x',\n        'group-data-[state=open]:font-medium',\n        // Filled\n        'group-has-[input:not(:placeholder-shown)]:!text-primary-idle group-has-[input:not(:placeholder-shown)]:data-[has-error=true]:!text-danger-label-active',\n        'group-has-[input:not(:placeholder-shown)]:-top-[3px]',\n        'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',\n        'group-has-[input:not(:placeholder-shown)]:font-medium',\n        // If has left slot\n        'group-has-[div[data-slot=select-left-slot]]:left-large-4x',\n        'group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-small',\n        'group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',\n        // If has right slot\n        'group-has-[div[data-slot=select-right-slot]]:right-large-4x',\n        'group-has-[div[data-slot=select-right-slot]]:group-data-[state=open]:right-small',\n        'group-has-[div[data-slot=select-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',\n        // Animate\n        'group-data-[state=open]:animate-in',\n        'group-data-[state=closed]:animate-out',\n        'group-has-[input:not(:placeholder-shown)]:animate-out',\n        'group-disabled:hidden',\n        className\n      )}\n      data-has-error={hasError}\n      {...props}\n    >\n      <label htmlFor={htmlFor}>\n        <span className=\"bg-layer-2-idle rounded-small-1x max-w-full\">\n          {children}\n        </span>\n      </label>\n    </Typography>\n  )\n}\n\nexport function SelectOptions(props: ComponentProps<typeof ListContent>) {\n  return <ListContent {...props} />\n}\n\nexport function SelectOption({\n  className,\n  ...props\n}: ComponentProps<typeof ListItem>) {\n  return (\n    <ListItem className={twMerge(className, 'cursor-pointer')} {...props} />\n  )\n}\n\nexport function SelectOptionText(props: ComponentProps<typeof Typography>) {\n  return <Typography {...props} />\n}\n\nexport function SelectHeader(props: ComponentProps<typeof ListHeader>) {\n  return <ListHeader {...props} />\n}\n\nexport function SelectHeaderTitle(\n  props: ComponentProps<typeof ListHeaderTitle>\n) {\n  return <ListHeaderTitle {...props} />\n}\n\nexport function SelectLeftSlot({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      {...props}\n      className={twMerge(\n        className,\n        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'\n      )}\n      data-slot=\"select-left-slot\"\n    />\n  )\n}\n\nexport function SelectRightSlot({\n  className,\n  ...props\n}: ComponentProps<'div'>) {\n  return (\n    <div\n      {...props}\n      className={twMerge(\n        className,\n        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center',\n        'group-disabled:hidden'\n      )}\n      data-slot=\"select-right-slot\"\n    />\n  )\n}\n\nexport function SelectSearch(props: ComponentProps<typeof SearchInputText>) {\n  return (\n    <SearchInputRoot variant=\"line\">\n      <SearchInputContent>\n        <SearchInputSlot>\n          <Icon className=\"text-icon-neutral-3\" name=\"search\" />\n        </SearchInputSlot>\n        <SearchInputText {...props} />\n      </SearchInputContent>\n    </SearchInputRoot>\n  )\n}\n\nexport function SelectCaption({\n  className,\n  variant = 'body',\n  size = 'sm',\n  weight = 'normal',\n  ...props\n}: ComponentProps<typeof Typography>) {\n  const { hasError } = useSelect()\n\n  const caption = tv({\n    base: 'text-size-body-sm mt-small-1x font-normal',\n    variants: {\n      state: {\n        error: 'text-danger-label-active',\n        idle: 'text-neutral-dark'\n      }\n    }\n  })\n\n  return (\n    <Typography\n      className={caption({\n        state: hasError ? 'error' : 'idle',\n        className\n      })}\n      size={size}\n      variant={variant}\n      weight={weight}\n      {...props}\n    />\n  )\n}\n"]}

package/dist/components/switch.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/switch.tsx"],"names":["Switch","className","props","jsx","cx"],"mappings":"0HAIA,SAASA,CAAAA,CAAO,CACd,SAAA,CAAAC,CAAAA,CACA,GAAGC,CACL,CAAA,CAAsD,CACpD,OACEC,GAAAA,CAAiB,CAAA,CAAA,IAAA,CAAhB,CACC,SAAA,CAAWC,EAAAA,CACT,gGACA,2EAAA,CACA,kIAAA,CACA,qCACAH,CACF,CAAA,CACA,WAAA,CAAU,QAAA,CACT,GAAGC,CAAAA,CAEJ,SAAAC,GAAAA,CAAiB,CAAA,CAAA,KAAA,CAAhB,CACC,SAAA,CAAWC,EAAAA,CACT,iLACF,CAAA,CACA,WAAA,CAAU,cAAA,CACZ,CAAA,CACF,CAEJ","file":"switch.js","sourcesContent":["import * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cx } from '@xjur-ui/util'\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      className={cx(\n        'w-large-3x h-large rounded-circle inline-flex shrink-0 items-center border border-transparent',\n        'peer data-[state=checked]:bg-primary-idle data-[state=unchecked]:bg-alt-4',\n        'focus-visible:border-ring focus-visible:ring-ring/50 transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        'hover:shadow-focus-primary p-[2px]',\n        className\n      )}\n      data-slot=\"switch\"\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cx(\n          'bg-layer-2-idle size-medium pointer-events-none rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'\n        )}\n        data-slot=\"switch-thumb\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n"]}

package/dist/components/table.d.ts

@@ -1,17 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare function Table({ className, ...props }: React.ComponentProps<'table'>): react_jsx_runtime.JSX.Element;
-declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): react_jsx_runtime.JSX.Element;
-declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): react_jsx_runtime.JSX.Element;
-declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): react_jsx_runtime.JSX.Element;
-declare function TableRow({ className, isSelected, ...props }: React.ComponentProps<'tr'> & {
-    isSelected?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): react_jsx_runtime.JSX.Element;
-declare function TableHeadContent({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function TableSort({ className, sortedDirection, ...props }: React.ComponentProps<'button'> & {
-    sortedDirection?: 'asc' | 'desc';
-}): react_jsx_runtime.JSX.Element;
-declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): react_jsx_runtime.JSX.Element;
-
-export { Table, TableBody, TableCell, TableFooter, TableHead, TableHeadContent, TableHeader, TableRow, TableSort };

package/dist/components/table.js

@@ -1,2 +0,0 @@
-import {b as b$1}from'../chunk-SHHXKVVR.js';import {cx}from'@xjur-ui/util';import {jsx}from'react/jsx-runtime';function s({className:t,...e}){return jsx("div",{className:"text-size-body-md scrollbar-thin relative w-full overflow-hidden transition-all hover:overflow-x-auto","data-slot":"table-container",children:jsx("table",{className:cx("w-full caption-bottom",t),"data-slot":"table",...e})})}function i({className:t,...e}){return jsx("thead",{className:cx("group/table-header [&_tr]:border-border-layer-2 hover:bg-layer-2-hover [&_tr]:border-b",t),"data-slot":"table-header",...e})}function b({className:t,...e}){return jsx("tbody",{className:cx("[&_tr]:border-border-layer-2 [&_tr]:border-b [&_tr:last-child]:border-0",t),"data-slot":"table-body",...e})}function p({className:t,...e}){return jsx("tfoot",{className:cx("border-border-layer-2 border-t font-medium [&>tr]:last:border-b-0",t),"data-slot":"table-footer",...e})}function c({className:t,isSelected:e=false,...o}){return jsx("tr",{className:cx("bg-layer-2-idle hover:bg-layer-2-hover ease border-b transition-colors duration-100","active:bg-layer-2-pressed","data-[selected=true]:bg-primary-alt-active",t),"data-selected":e,"data-slot":"table-row",...o})}function u({className:t,...e}){return jsx("th",{className:cx("group/th text-neutral-placeholder text-size-label-sm h-large-4x py-small-1x px-small text-left align-middle font-medium whitespace-nowrap","pr-large-2x relative","animate-in fade-in duration-200 ease-in",t),"data-slot":"table-head",...e})}function m({className:t,...e}){return jsx("div",{className:cx("gap-small pr-large-3x relative flex w-fit items-center",t),...e})}function f({className:t,sortedDirection:e,...o}){return jsx("button",{className:cx("size-large-1x rounded-small-1x","flex cursor-pointer items-center justify-center","hidden group-hover/th:flex","data-[sorted=true]:flex","transition-all duration-200 ease-out","data-[sorted=true]:bg-primary-alt-active data-[sorted=true]:text-primary-label-active","absolute top-1/2 right-0 -translate-y-1/2",t),"data-sorted":e!==void 0,type:"button",...o,children:e!==void 0?jsx(b$1,{name:e==="asc"?"arrow_downward":"arrow_upward"}):jsx(b$1,{name:"swap_vert"})})}function x({className:t,...e}){return jsx("td",{className:cx("px-small py-none h-large-8x text-left align-middle whitespace-nowrap",t),"data-slot":"table-cell",...e})}export{s as Table,b as TableBody,x as TableCell,p as TableFooter,u as TableHead,m as TableHeadContent,i as TableHeader,c as TableRow,f as TableSort};//# sourceMappingURL=table.js.map
-//# sourceMappingURL=table.js.map

package/dist/components/table.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/table.tsx"],"names":["Table","className","props","jsx","cx","TableHeader","TableBody","TableFooter","TableRow","isSelected","TableHead","TableHeadContent","TableSort","sortedDirection","Icon","TableCell"],"mappings":"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","file":"table.js","sourcesContent":["import { cx } from '@xjur-ui/util'\nimport { Icon } from './icon'\n\nexport function Table({ className, ...props }: React.ComponentProps<'table'>) {\n  return (\n    <div\n      className=\"text-size-body-md scrollbar-thin relative w-full overflow-hidden transition-all hover:overflow-x-auto\"\n      data-slot=\"table-container\"\n    >\n      <table\n        className={cx('w-full caption-bottom', className)}\n        data-slot=\"table\"\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function TableHeader({\n  className,\n  ...props\n}: React.ComponentProps<'thead'>) {\n  return (\n    <thead\n      className={cx(\n        'group/table-header [&_tr]:border-border-layer-2 hover:bg-layer-2-hover [&_tr]:border-b',\n        className\n      )}\n      data-slot=\"table-header\"\n      {...props}\n    />\n  )\n}\n\nexport function TableBody({\n  className,\n  ...props\n}: React.ComponentProps<'tbody'>) {\n  return (\n    <tbody\n      className={cx(\n        '[&_tr]:border-border-layer-2 [&_tr]:border-b [&_tr:last-child]:border-0',\n        className\n      )}\n      data-slot=\"table-body\"\n      {...props}\n    />\n  )\n}\n\nexport function TableFooter({\n  className,\n  ...props\n}: React.ComponentProps<'tfoot'>) {\n  return (\n    <tfoot\n      className={cx(\n        'border-border-layer-2 border-t font-medium [&>tr]:last:border-b-0',\n        className\n      )}\n      data-slot=\"table-footer\"\n      {...props}\n    />\n  )\n}\n\nexport function TableRow({\n  className,\n  isSelected = false,\n  ...props\n}: React.ComponentProps<'tr'> & { isSelected?: boolean }) {\n  return (\n    <tr\n      className={cx(\n        'bg-layer-2-idle hover:bg-layer-2-hover ease border-b transition-colors duration-100',\n        'active:bg-layer-2-pressed',\n        'data-[selected=true]:bg-primary-alt-active',\n        className\n      )}\n      data-selected={isSelected}\n      data-slot=\"table-row\"\n      {...props}\n    />\n  )\n}\n\nexport function TableHead({ className, ...props }: React.ComponentProps<'th'>) {\n  return (\n    <th\n      className={cx(\n        'group/th text-neutral-placeholder text-size-label-sm h-large-4x py-small-1x px-small text-left align-middle font-medium whitespace-nowrap',\n        'pr-large-2x relative',\n        'animate-in fade-in duration-200 ease-in',\n        className\n      )}\n      data-slot=\"table-head\"\n      {...props}\n    />\n  )\n}\n\nexport function TableHeadContent({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cx(\n        'gap-small pr-large-3x relative flex w-fit items-center',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function TableSort({\n  className,\n  sortedDirection,\n  ...props\n}: React.ComponentProps<'button'> & { sortedDirection?: 'asc' | 'desc' }) {\n  return (\n    <button\n      className={cx(\n        'size-large-1x rounded-small-1x',\n        'flex cursor-pointer items-center justify-center',\n        'hidden group-hover/th:flex',\n        'data-[sorted=true]:flex',\n        'transition-all duration-200 ease-out',\n        'data-[sorted=true]:bg-primary-alt-active data-[sorted=true]:text-primary-label-active',\n        'absolute top-1/2 right-0 -translate-y-1/2',\n        className\n      )}\n      data-sorted={sortedDirection !== undefined}\n      type=\"button\"\n      {...props}\n    >\n      {sortedDirection !== undefined ? (\n        <Icon\n          name={sortedDirection === 'asc' ? 'arrow_downward' : 'arrow_upward'}\n        />\n      ) : (\n        <Icon name=\"swap_vert\" />\n      )}\n    </button>\n  )\n}\n\nexport function TableCell({ className, ...props }: React.ComponentProps<'td'>) {\n  return (\n    <td\n      className={cx(\n        'px-small py-none h-large-8x text-left align-middle whitespace-nowrap',\n        className\n      )}\n      data-slot=\"table-cell\"\n      {...props}\n    />\n  )\n}\n"]}

package/src/components/date-picker.tsx

@@ -1,263 +0,0 @@
-import { createContext, useContext } from 'react'
-import type { ComponentProps } from 'react'
-import * as RadixPopover from '@radix-ui/react-popover'
-import { tv, twJoin, twMerge } from '@xjur-ui/util'
-import { Typography, type TypographyProps } from './typography'
-
-const DatePickerContext = createContext({
-  disabled: false,
-  variant: 'filled' as 'filled' | 'outlined',
-  hasError: false
-})
-
-function useDatePicker() {
-  const context = useContext(DatePickerContext)
-  if (!context) {
-    throw new Error('useDatePicker must be used within a DatePickerRoot')
-  }
-  return context
-}
-
-export function DatePickerRoot({
-  disabled = false,
-  variant = 'filled',
-  hasError = false,
-  ...props
-}: ComponentProps<typeof RadixPopover.Root> & {
-  disabled?: boolean
-  variant?: 'filled' | 'outlined'
-  hasError?: boolean
-}) {
-  return (
-    <DatePickerContext.Provider value={{ disabled, variant, hasError }}>
-      <RadixPopover.Root {...props} />
-    </DatePickerContext.Provider>
-  )
-}
-
-export function DatePickerTrigger({
-  className,
-  ...props
-}: ComponentProps<typeof RadixPopover.Trigger>) {
-  const { disabled, variant, hasError } = useDatePicker()
-
-  const trigger = tv({
-    base: twMerge(
-      'border border-transparent group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full items-center cursor-pointer',
-      'data-[state=open]:border-primary-idle',
-      'has-[input:not(:placeholder-shown)]:text-primary-idle',
-      'has-[input:not(:placeholder-shown)]:border-primary-idle',
-      'focus-within:border-primary-idle focus-within:hover:border-primary-idle',
-      'hover:border-border-layer-1'
-    ),
-    variants: {
-      variant: {
-        filled: 'bg-layer-2-hover',
-        outlined:
-          'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3',
-        disabled:
-          'hover:border-transparent border-none bg-layer-2-idle cursor-text select-text'
-      },
-      state: {
-        idle: '',
-        error: twMerge(
-          'focus-within:border-danger-idle hover:border-danger-idle border-danger-idle focus-within:hover:border-danger-idle',
-          'data-[state=open]:border-danger-idle has-[input:not(:placeholder-shown)]:border-danger-idle'
-        )
-      }
-    },
-    defaultVariants: {
-      variant: 'filled',
-      state: 'idle'
-    }
-  })
-
-  return (
-    <RadixPopover.Trigger
-      className={trigger({
-        variant: disabled ? 'disabled' : variant,
-        state: hasError ? 'error' : 'idle',
-        className
-      })}
-      {...props}
-      disabled={disabled}
-    />
-  )
-}
-
-export function DatePickerContent({
-  className,
-  sideOffset = 5,
-  side = 'bottom',
-  align = 'start',
-  ...props
-}: ComponentProps<typeof RadixPopover.Content>) {
-  return (
-    <RadixPopover.Portal>
-      <RadixPopover.Content
-        align={align}
-        className={twJoin(
-          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)]'
-        )}
-        side={side}
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </RadixPopover.Portal>
-  )
-}
-
-export function DatePickerValue({
-  className,
-  displayValue = '',
-  value,
-  ...props
-}: ComponentProps<'input'> & { displayValue?: string }) {
-  return (
-    <>
-      {!!displayValue && (
-        <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
-          {displayValue}
-        </Typography>
-      )}
-
-      <input
-        {...props}
-        aria-readonly={true}
-        className={twJoin('pointer-events-none', className)}
-        hidden={true}
-        placeholder={props.placeholder ?? ' '}
-        readOnly={true}
-        value={value ?? ''}
-      />
-    </>
-  )
-}
-
-export function DatePickerLabel({
-  className,
-  htmlFor,
-  children,
-  ...props
-}: TypographyProps & { htmlFor?: string }) {
-  const { variant, disabled, hasError } = useDatePicker()
-
-  return (
-    <Typography
-      asChild={true}
-      className={twJoin(
-        'group 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]:data-[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)]:data-[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',
-        // If has left slot
-        'group-has-[div[data-slot=date-picker-left-slot]]:left-large-4x',
-        'group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small',
-        'group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
-        // If has right slot
-        'group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x',
-        'group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small',
-        'group-has-[div[data-slot=date-picker-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
-        // Animate
-        'group-data-[state=open]:animate-in',
-        'group-data-[state=closed]:animate-out',
-        'group-has-[input:not(:placeholder-shown)]:animate-out',
-        'data-[disabled=true]:hidden',
-
-        className
-      )}
-      data-disabled={disabled}
-      data-error={hasError}
-      data-variant={variant}
-      weight="medium"
-      {...props}
-    >
-      <label htmlFor={htmlFor}>
-        <span
-          className={twJoin(
-            'rounded-small-1x max-w-full',
-            'group-data-[variant=outlined]:bg-layer-2-idle',
-            'group-data-[variant=filled]:bg-layer-2-hover'
-          )}
-        >
-          {children}
-        </span>
-      </label>
-    </Typography>
-  )
-}
-
-export function DatePickerLeftSlot({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twJoin(
-        className,
-        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="date-picker-left-slot"
-    />
-  )
-}
-
-export function DatePickerRightSlot({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twJoin(
-        className,
-        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="date-picker-right-slot"
-    />
-  )
-}
-
-export function DatePickerCaption({
-  className,
-  variant = 'body',
-  size = 'sm',
-  weight = 'normal',
-  ...props
-}: ComponentProps<typeof Typography>) {
-  const { hasError } = useDatePicker()
-
-  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/input.tsx

@@ -1,320 +0,0 @@
-import { tv, twMerge } from '@xjur-ui/util'
-import type { ComponentProps } from 'react'
-import { createContext, useContext, useMemo } from 'react'
-import { InputMask, type MaskOptions } from '@react-input/mask'
-import {
-  InputNumberFormat,
-  type InputNumberFormatProps
-} from '@react-input/number-format'
-import { inputMask, type InputMaskType } from '../resources/input-mask'
-import { Typography } from './typography'
-
-export { inputMask, type InputMaskType, type MaskOptions }
-
-export type InputProps = {
-  variant?: 'outlined' | 'filled'
-  disabled?: boolean
-  hasError?: boolean
-}
-
-const FieldContext = createContext<InputProps>({
-  variant: 'filled',
-  disabled: false,
-  hasError: false
-})
-
-function useInput() {
-  const context = useContext(FieldContext)
-  if (!context) {
-    throw new Error('useInput must be used within a InputRoot')
-  }
-  return context
-}
-
-export function InputRoot({
-  className,
-  children,
-  variant = 'filled',
-  disabled = false,
-  hasError = false,
-  ...props
-}: ComponentProps<'div'> & InputProps) {
-  const providerValue = useMemo(
-    () => ({ variant, disabled, hasError }),
-    [variant, disabled, hasError]
-  )
-
-  return (
-    <FieldContext.Provider value={providerValue}>
-      <div
-        className={twMerge('group relative flex w-full flex-col', className)}
-        {...props}
-      >
-        {children}
-      </div>
-    </FieldContext.Provider>
-  )
-}
-
-export function InputContent({ className, ...props }: ComponentProps<'div'>) {
-  const content = tv({
-    base: twMerge(
-      'border border-transparent relative h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small flex items-center w-full',
-      'group-has-[div[data-slot=input-right-action-slot]]:rounded-r-none',
-      'group-has-[div[data-slot=input-left-action-slot]]:rounded-l-none',
-      'focus-within:border-primary-idle focus-within:hover:border-primary-idle',
-      'hover:border-border-layer-1'
-    ),
-    variants: {
-      variant: {
-        filled: 'bg-layer-2-hover',
-        outlined:
-          'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3',
-        disabled: 'hover:border-transparent border-none bg-layer-2-idle'
-      },
-      state: {
-        idle: '',
-        error:
-          'focus-within:border-danger-idle hover:border-danger-idle border-danger-idle focus-within:hover:border-danger-idle'
-      }
-    },
-    defaultVariants: {
-      variant: 'filled',
-      state: 'idle'
-    }
-  })
-
-  return (
-    <FieldContext.Consumer>
-      {({ variant, disabled, hasError }) => {
-        return (
-          <div
-            className={content({
-              variant: disabled ? 'disabled' : variant,
-              state: hasError ? 'error' : 'idle',
-              className
-            })}
-            {...props}
-          />
-        )
-      }}
-    </FieldContext.Consumer>
-  )
-}
-
-export function InputLabel({
-  htmlFor,
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof Typography> & { htmlFor: string }) {
-  return (
-    <FieldContext.Consumer>
-      {({ variant, disabled, hasError }) => {
-        return (
-          <Typography
-            asChild={true}
-            className={twMerge(
-              'group inline-block max-w-full truncate text-left',
-              'ease animate-in left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2 transition-all duration-250',
-              // Filled
-              'group-focus-within:!text-primary-idle group-focus-within:data-[has-error=true]:!text-danger-label-active group-focus-within:-top-[3px]',
-              'group-focus-within:text-size-label-sm-1x group-focus-within:font-medium',
-              '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',
-              'group-has-[input:not(:placeholder-shown)]:!text-primary-idle',
-              'group-has-[input:not(:placeholder-shown)]:!text-danger-label-active',
-              // If has left slot
-              'group-has-[div[data-slot=input-left-slot]]:left-large-4x',
-              'group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-small',
-              'group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
-              // If has right slot
-              'group-has-[div[data-slot=input-right-slot]]:right-large-4x',
-              'group-has-[div[data-slot=input-right-slot]]:group-focus-within:right-small',
-              'group-has-[div[data-slot=input-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
-              // Animate
-              'group-focus-within:animate-in',
-              'group-has-[input:not(:placeholder-shown)]:animate-out',
-              'data-[disabled=true]:hidden',
-              className
-            )}
-            data-disabled={disabled}
-            data-has-error={hasError}
-            data-variant={variant}
-            {...props}
-          >
-            <label htmlFor={htmlFor}>
-              <span
-                className={twMerge(
-                  'rounded-small-1x max-w-full',
-                  'group-data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-data-[variant=filled]:group-focus-within:bg-layer-2-hover',
-                  'group-data-[variant=outlined]:bg-layer-2-idle group-data-[variant=filled]:bg-layer-2-hover'
-                )}
-              >
-                {children}
-              </span>
-            </label>
-          </Typography>
-        )
-      }}
-    </FieldContext.Consumer>
-  )
-}
-
-export function InputText({
-  className,
-  maskOptions,
-  maskType,
-  ...props
-}: ComponentProps<'input'> & {
-  maskOptions?: MaskOptions
-  maskType?: InputMaskType
-}) {
-  const { disabled } = useInput()
-  const Component = maskOptions || maskType ? InputMask : 'input'
-
-  return (
-    <Component
-      {...props}
-      disabled={disabled}
-      {...(maskType
-        ? { ...inputMask(maskType) }
-        : maskOptions && { ...maskOptions })}
-      className={twMerge(
-        className,
-        'peer !text-size-body-md text-neutral-dark flex-1 outline-none',
-        'group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x'
-      )}
-      placeholder={props.placeholder || ' '}
-      {...(maskOptions && { ...maskOptions })}
-    />
-  )
-}
-
-export function InputNumber({
-  className,
-  locales = 'pt-BR',
-  ...props
-}: InputNumberFormatProps) {
-  const { disabled } = useInput()
-  return (
-    <InputNumberFormat
-      {...props}
-      className={twMerge(
-        className,
-        'peer !text-size-body-md text-neutral-dark flex-1 font-medium outline-none',
-        'group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x'
-      )}
-      disabled={disabled}
-      locales={locales}
-      placeholder={props.placeholder || ' '}
-    />
-  )
-}
-
-export function InputLeftSlot({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="input-left-slot"
-    />
-  )
-}
-
-export function InputRightSlot({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="input-right-slot"
-    />
-  )
-}
-
-export function InputCaption({
-  className,
-  variant = 'body',
-  size = 'sm',
-  weight = 'normal',
-  ...props
-}: ComponentProps<typeof Typography>) {
-  const { hasError } = useInput()
-
-  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}
-    />
-  )
-}
-
-export function InputContainer({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twMerge(className, 'flex items-center')}
-      data-slot="input-content"
-    />
-  )
-}
-
-export function InputAction({
-  className,
-  side,
-  ...props
-}: ComponentProps<'div'> & {
-  side: 'left' | 'right'
-}) {
-  const { disabled } = useInput()
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        'group h-large-4x flex items-center justify-center data-[disabled=true]:hidden'
-      )}
-      data-disabled={disabled}
-      data-side={side}
-      data-slot={`input-${side}-action-slot`}
-    />
-  )
-}
-
-export function InputActionButton({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        'h-large-4x w-large-4x bg-layer-2-hover flex cursor-pointer items-center justify-center'
-      )}
-    />
-  )
-}