@xjur-ui/react 2.1.0 → 2.1.1

package/src/components/list.tsx

@@ -17,7 +17,7 @@ export function ListRoot({
       {...props}
       className={cx(
         className,
-        'rounded-small scrollbar-hide bg-layer-2-idle border-border-layer-2 shadow-elevation-3 z-10 max-h-[400px] list-none overflow-y-auto border'
+        'rounded-small scrollbar-hide bg-layer-2-idle border-border-layer-2 shadow-elevation-3 z-1000 max-h-[400px] list-none overflow-y-auto border'
       )}
     />
   )

package/src/components/selection-bar.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps, ReactNode } from 'react'
 import { createContext, useContext, useState, useCallback } from 'react'
 import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
 import { Icon, type IconType } from './icon'
-import { Button } from './form/button'
+import { Button } from './controls/button'
 
 const selectionBarVariants = cva(
   [

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 './form/button'
+import { cx, tv } from '@xjur-ui/util'
+import { Button } from './controls/button'
 import { Icon } from './icon'
 
 export function SheetRoot({
@@ -63,22 +63,31 @@ export function SheetContent({
   side?: 'top' | 'right' | 'bottom' | 'left'
   overlay?: boolean
 }) {
+  const content = tv({
+    base: [
+      'border-border-layer-2 bg-layer-2-idle shadow-elevation-2 fixed z-50 flex flex-col gap-medium',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500'
+    ],
+    variants: {
+      side: {
+        right:
+          'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full border-l sm:max-w-sm',
+        left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full border-r sm:max-w-sm',
+        top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+        bottom:
+          'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t'
+      }
+    },
+    defaultVariants: {
+      side: 'right'
+    }
+  })
+
   return (
     <SheetPortal>
       {overlay && <SheetOverlay />}
       <SheetPrimitive.Content
-        className={cx(
-          'border-border-layer-2 bg-layer-2-idle data-[state=open]:animate-in data-[state=closed]:animate-out shadow-elevation-2 fixed z-50 flex flex-col gap-4 transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          side === 'right' &&
-            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-          side === 'left' &&
-            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-          side === 'top' &&
-            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-          className
-        )}
+        className={content({ side, className })}
         data-slot="sheet-content"
         {...props}
       >
@@ -92,7 +101,7 @@ export function SheetBody({
   className,
   ...props
 }: React.ComponentProps<'div'>) {
-  return <div className={cx('px-large-2x', className)} {...props} />
+  return <div className={cx('px-large-2x h-full', className)} {...props} />
 }
 
 export function SheetHeader({
@@ -133,7 +142,7 @@ export function SheetTitle({
 }: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
-      className={cx('text-size-title-lg font-medium', className)}
+      className={cx('text-size-title-lg font-normal', className)}
       data-slot="sheet-title"
       {...props}
     />

package/src/components/steps/index.ts

@@ -0,0 +1,6 @@
+export * from './steps-context'
+export * from './steps-root'
+export * from './steps-navigation'
+export * from './steps-content'
+export * from './step'
+export * from './steps-action'

package/src/components/steps/step.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react'
+import { twMerge } from '@xjur-ui/util'
+import { useSteps } from './steps-context'
+
+export function Step({
+  stepIndex,
+  className,
+  ...props
+}: ComponentProps<'div'> & { stepIndex: number }) {
+  const { currentStepIndex } = useSteps()
+
+  if (currentStepIndex !== stepIndex) {
+    return null
+  }
+
+  return (
+    <div
+      className={twMerge('h-full w-full', className)}
+      data-slot="step-item"
+      {...props}
+    />
+  )
+}

package/src/components/steps/steps-action.tsx

@@ -0,0 +1,65 @@
+import { useCallback, type ComponentProps } from 'react'
+import { Button } from '../controls/button'
+import { useSteps } from './steps-context'
+
+export function NextStep({
+  children = 'Próximo',
+  type,
+  onClick,
+  ...props
+}: Omit<ComponentProps<typeof Button>, 'children'> & {
+  children?: React.ReactNode | ((stepIndex: number) => React.ReactNode)
+}) {
+  const { handleNextStep, currentStepIndex, isLastStep } = useSteps()
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (onClick) {
+        onClick(event)
+      } else {
+        event.preventDefault()
+        handleNextStep()
+      }
+    },
+    [onClick, handleNextStep]
+  )
+
+  const buttonType = type || (isLastStep ? 'submit' : 'button')
+
+  return (
+    <Button
+      type={buttonType}
+      {...(buttonType === 'button' ? { onClick: handleClick } : {})}
+      {...props}
+    >
+      {typeof children === 'function' ? children(currentStepIndex) : children}
+    </Button>
+  )
+}
+
+export function PreviousStep({
+  appearance = 'ghost',
+  children = 'Anterior',
+  onClick,
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { handlePreviousStep } = useSteps()
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (onClick) {
+        onClick(event)
+      } else {
+        event.preventDefault()
+        handlePreviousStep()
+      }
+    },
+    [onClick, handlePreviousStep]
+  )
+
+  return (
+    <Button appearance={appearance} onClick={handleClick} {...props}>
+      {children}
+    </Button>
+  )
+}

package/src/components/steps/steps-content.tsx

@@ -0,0 +1,12 @@
+import { twMerge } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+
+export function Steps({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      className={twMerge('h-full w-full', className)}
+      data-slot="steps-content"
+      {...props}
+    />
+  )
+}

package/src/components/steps/steps-context.tsx

@@ -0,0 +1,121 @@
+import { twMerge } from '@xjur-ui/util'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ComponentProps
+} from 'react'
+
+export interface StepsContextValue {
+  steps: string[]
+  currentStepIndex: number
+  isLastStep: boolean
+
+  handleStepChange: (index: number) => void
+  handleNextStep: () => void
+  handlePreviousStep: () => void
+}
+
+export const StepsContext = createContext<StepsContextValue>({
+  steps: [],
+  currentStepIndex: 0,
+  isLastStep: false,
+  handleStepChange: () => {},
+  handleNextStep: () => {},
+  handlePreviousStep: () => {}
+})
+
+export function StepsProvider({
+  steps,
+  currentStepIndex: currentStepIndexProp = 0,
+  onStepChange,
+  children,
+  className,
+  ...props
+}: {
+  steps: string[]
+  currentStepIndex?: number
+  onStepChange?: (index: number) => void
+  children: React.ReactNode | ((context: StepsContextValue) => React.ReactNode)
+} & Omit<ComponentProps<'div'>, 'children'>) {
+  const [currentStepIndex, setCurrentStepIndex] = useState(currentStepIndexProp)
+
+  const handleStepChange = useCallback(
+    (index: number) => {
+      setCurrentStepIndex(index)
+      onStepChange?.(index)
+    },
+    [onStepChange]
+  )
+
+  const handleNextStep = useCallback(() => {
+    const isLastStep = currentStepIndex === steps.length - 1
+
+    if (isLastStep) {
+      return
+    }
+
+    setCurrentStepIndex(prev => prev + 1)
+    onStepChange?.(currentStepIndex + 1)
+  }, [currentStepIndex, onStepChange, steps])
+
+  const handlePreviousStep = useCallback(() => {
+    if (currentStepIndex === 0) {
+      return
+    }
+
+    setCurrentStepIndex(prev => prev - 1)
+    onStepChange?.(currentStepIndex - 1)
+  }, [currentStepIndex, onStepChange])
+
+  const isLastStep = useMemo(
+    () => currentStepIndex === steps.length - 1,
+    [currentStepIndex, steps]
+  )
+
+  const providerValue = useMemo(
+    () => ({
+      steps,
+      currentStepIndex,
+      isLastStep,
+      setCurrentStepIndex,
+
+      handleStepChange,
+      handleNextStep,
+      handlePreviousStep
+    }),
+    [
+      steps,
+      currentStepIndex,
+      isLastStep,
+      setCurrentStepIndex,
+      handleStepChange,
+      handleNextStep,
+      handlePreviousStep
+    ]
+  )
+
+  return (
+    <StepsContext.Provider value={providerValue}>
+      <div
+        className={twMerge('h-full w-full', className)}
+        data-slot="steps-root"
+        {...props}
+      >
+        {typeof children === 'function' ? children(providerValue) : children}
+      </div>
+    </StepsContext.Provider>
+  )
+}
+
+export function useSteps() {
+  const context = useContext(StepsContext)
+
+  if (!context) {
+    throw new Error('useSteps must be used within a StepsContext.Provider')
+  }
+
+  return context
+}

package/src/components/steps/steps-navigation.tsx

@@ -0,0 +1,80 @@
+import { Fragment, useCallback, type ComponentProps } from 'react'
+import { twMerge } from '@xjur-ui/util'
+import { useSteps } from './steps-context'
+
+export function StepsNavigation({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  const { steps, currentStepIndex } = useSteps()
+
+  const isLastStep = useCallback(
+    (stepIndex: number) => stepIndex === steps.length - 1,
+    [steps]
+  )
+
+  const stepState = useCallback(
+    (stepIndex: number) => {
+      const isActive = stepIndex === currentStepIndex
+      const isPassed = stepIndex < currentStepIndex
+
+      if (isPassed) {
+        return 'disabled'
+      }
+
+      return isActive ? 'active' : 'normal'
+    },
+    [currentStepIndex]
+  )
+
+  return (
+    <div
+      className={twMerge('gap-small flex items-center', className)}
+      data-slot="steps-navigation"
+      {...props}
+    >
+      {steps.map((step, stepIndex) => {
+        const state = stepState(stepIndex)
+
+        return (
+          <Fragment key={`${step}-${stepIndex}`}>
+            <div
+              className="group gap-small flex items-center"
+              data-disabled={state === 'disabled'}
+              data-slot="step-trigger"
+              data-state={state}
+              {...props}
+            >
+              <div
+                className={twMerge(
+                  'size-large-4x rounded-circle border-border-layer-2 text-size-label-sm bg-layer-2-idle flex items-center justify-center border',
+                  'group-data-[state=active]:border-primary-active group-data-[state=active]:bg-primary-alt-active group-data-[state=active]:text-primary-label-active',
+                  'group-data-[state=disabled]:bg-layer-1-idle group-data-[state=disabled]:border-border-layer-2 group-data-[state=disabled]:text-neutral-light'
+                )}
+                data-slot="step-number"
+              >
+                {stepIndex + 1}
+              </div>
+
+              <span
+                className="text-size-label-sm group-data-[state=active]:text-primary-label-active group-data-[state=disabled]:text-neutral-light font-medium"
+                data-slot="step-title"
+              >
+                {step}
+              </span>
+            </div>
+
+            {!isLastStep(stepIndex) && (
+              <div
+                className={twMerge(
+                  'bg-border-layer-2 mx-2 h-px flex-1',
+                  className
+                )}
+              />
+            )}
+          </Fragment>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/steps/steps-root.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react'
+import { StepsProvider } from './steps-context'
+
+export function StepsRoot({
+  className,
+  ...props
+}: ComponentProps<typeof StepsProvider>) {
+  return <StepsProvider className={className} {...props} />
+}

package/src/components/table/index.ts

@@ -0,0 +1,8 @@
+export * from './table'
+export * from './table-body'
+export * from './table-cell'
+export * from './table-footer'
+export * from './table-header'
+export * from './table-head'
+export * from './table-row'
+export * from './table-sort'

package/src/components/table/table-body.tsx

@@ -0,0 +1,17 @@
+import { cx } from '@xjur-ui/util'
+
+export function TableBody({
+  className,
+  ...props
+}: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      className={cx(
+        '[&_tr]:border-border-layer-2 [&_tr]:border-b [&_tr:last-child]:border-0',
+        className
+      )}
+      data-slot="table-body"
+      {...props}
+    />
+  )
+}

package/src/components/table/table-cell.tsx

@@ -0,0 +1,14 @@
+import { cx } from '@xjur-ui/util'
+
+export function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      className={cx(
+        'px-small py-none h-large-8x text-left align-middle whitespace-nowrap',
+        className
+      )}
+      data-slot="table-cell"
+      {...props}
+    />
+  )
+}

package/src/components/table/table-footer.tsx

@@ -0,0 +1,17 @@
+import { cx } from '@xjur-ui/util'
+
+export function TableFooter({
+  className,
+  ...props
+}: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      className={cx(
+        'border-border-layer-2 border-t font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      data-slot="table-footer"
+      {...props}
+    />
+  )
+}

package/src/components/table/table-head.tsx

@@ -0,0 +1,31 @@
+import { cx } from '@xjur-ui/util'
+
+export function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <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',
+        className
+      )}
+      data-slot="table-head"
+      {...props}
+    />
+  )
+}
+
+export function TableHeadContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx(
+        'gap-small pr-large-3x relative flex w-fit items-center',
+        className
+      )}
+      {...props}
+    />
+  )
+}

package/src/components/table/table-header.tsx

@@ -0,0 +1,17 @@
+import { cx } from '@xjur-ui/util'
+
+export function TableHeader({
+  className,
+  ...props
+}: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      className={cx(
+        'group/table-header [&_tr]:border-border-layer-2 hover:bg-layer-2-hover [&_tr]:border-b',
+        className
+      )}
+      data-slot="table-header"
+      {...props}
+    />
+  )
+}

package/src/components/table/table-row.tsx

@@ -0,0 +1,21 @@
+import { cx } from '@xjur-ui/util'
+
+export function TableRow({
+  className,
+  isSelected = false,
+  ...props
+}: React.ComponentProps<'tr'> & { isSelected?: boolean }) {
+  return (
+    <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',
+        className
+      )}
+      data-selected={isSelected}
+      data-slot="table-row"
+      {...props}
+    />
+  )
+}

package/src/components/table/table-sort.tsx

@@ -0,0 +1,34 @@
+import { cx } from '@xjur-ui/util'
+import { Icon } from '../icon'
+
+export function TableSort({
+  className,
+  sortedDirection,
+  ...props
+}: React.ComponentProps<'button'> & { sortedDirection?: 'asc' | 'desc' }) {
+  return (
+    <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',
+        className
+      )}
+      data-sorted={sortedDirection !== undefined}
+      type="button"
+      {...props}
+    >
+      {sortedDirection !== undefined ? (
+        <Icon
+          name={sortedDirection === 'asc' ? 'arrow_downward' : 'arrow_upward'}
+        />
+      ) : (
+        <Icon name="swap_vert" />
+      )}
+    </button>
+  )
+}

package/src/components/table/table.tsx

@@ -0,0 +1,16 @@
+import { cx } from '@xjur-ui/util'
+
+export function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      className="text-size-body-md scrollbar-thin relative w-full overflow-hidden transition-all hover:overflow-x-auto"
+      data-slot="table-container"
+    >
+      <table
+        className={cx('w-full caption-bottom', className)}
+        data-slot="table"
+        {...props}
+      />
+    </div>
+  )
+}

package/src/components/upload.tsx

@@ -2,15 +2,15 @@ import type { ComponentProps, DragEvent, ChangeEvent } from 'react'
 import { useRef, useState, useCallback, createContext, useContext } from 'react'
 import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
 import { Icon, type IconType } from './icon'
-import { Button } from './form/button'
-import { Switch } from './form/switch'
-import { InputRoot, InputContent, InputText } from './form/input'
+import { Button } from './controls/button'
+import { Switch } from './controls/switch'
+import { InputRoot, InputContent, InputText } from './controls/input'
 import {
   SelectRoot,
   SelectTrigger,
   SelectContent,
   SelectOption
-} from './form/select'
+} from './controls/select'
 
 export interface FileFormat {
   name: string

package/src/resources/icons.ts

@@ -42,6 +42,7 @@ export const icons = [
   'edit',
   'error',
   'expand_all',
+  'expand_content',
   'file_export',
   'filter_alt',
   'filter_list',

package/dist/chunk-2CM3SFOY.js

@@ -1,2 +0,0 @@
-import {a as a$1}from'./chunk-TSVURBUY.js';import {a,b}from'./chunk-IRHU7PDO.js';import {a as a$2}from'./chunk-CBFC4QME.js';import {b as b$1}from'./chunk-WV7QV2PU.js';import {tv,twMerge}from'@xjur-ui/util';import {InputMask}from'@react-input/mask';import {InputNumberFormat}from'@react-input/number-format';import {jsx,jsxs}from'react/jsx-runtime';function m(t,e){switch(t){case "cpf":return {...e,...x};case "cnpj":return {...e,...g};case "telefone":return {...e,...v};case "cep":return {...e,...y};case "numero-processo":return {...e,...h};case "data":return {...e,...k};case "hora":return {...e,...M};case "data-hora":return {...e,...I};case "custom":throw new Error("Options are required for custom mask");}}var x={mask:"###.###.###-##",replacement:{"#":/\d/}},g={mask:"##.###.###/####-##",replacement:{"#":/\d/}},v={mask:"(##) #####-####",replacement:{"#":/\d/}},y={mask:"#####-###",replacement:{"#":/\d/}},h={mask:"#######-##.####.#.##.####",replacement:{"#":/\d/}},k={mask:"##/##/####",replacement:{"#":/\d/}},M={mask:"##:##",replacement:{"#":/\d/}},I={mask:"##/##/#### ##:##",replacement:{"#":/\d/}};var w=tv({slots:{wrapper:"group flex w-full flex-col gap-small-2x",trigger:["h-large-4x w-full relative","flex items-center gap-small rounded-small-1x","py-small_1x-alt px-small","bg-layer-2-hover border border-transparent","group-has-[div[data-slot=input-action-slot]]:rounded-r-none","transition-all duration-200"],content:"flex w-full",value:"text-size-body-md font-normal placeholder:text-neutral-placeholder flex-1 outline-none",icon:"size-large text-icon-neutral-3 flex items-center justify-center",slotText:"size-large flex items-center justify-center !text-size-label-md text-neutral-placeholder",caption:"!text-size-body-sm font-normal",action:"h-large-4x overflow-hidden"},variants:{state:{normal:{trigger:"hover:border-border-layer-1 focus-within:border-primary-idle focus-within:hover:border-primary-idle"},error:{trigger:"border-danger-idle hover:border-danger-idle focus-within:border-danger-idle focus-within:hover:border-danger-idle",caption:"text-danger-label-idle"},disabled:{trigger:"pointer-events-none border-transparent bg-layer-2-idle"}}}}),{wrapper:O,trigger:_,content:T,value:p,icon:A,caption:S,action:F,slotText:E}=w();function U({className:t,state:e="normal",customMask:r,variant:o="normal",mask:a$1,...l}){return jsx(a.Provider,{value:{state:e,customMask:r,mask:a$1,variant:o},children:jsx("div",{className:O({className:t,state:e}),...l})})}function G({className:t,...e}){let{state:r}=b();return jsx("div",{className:T({className:t,state:r}),...e})}function Q(t){return jsx(a$1,{...t})}function W({className:t,...e}){let{state:r,variant:o}=b(),a=tv({base:["group bg-layer-2-idle relative"],variants:{state:{normal:["border-border-layer-2 hover:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle"],error:["border-danger-idle hover:border-danger-idle"],disabled:["border border-border-layer-2 opacity-60"]}}}),l=twMerge(_({state:r,className:t}),o==="filter"&&a({state:r,className:t}));return jsx("div",{"aria-disabled":r==="disabled",className:l,...e})}function X({className:t,placeholder:e,...r}){let{customMask:o,state:a,mask:l,variant:f}=b();return jsx(InputMask,{...r,...l?{...m(l)}:o&&{...o},className:p({className:t,state:a}),disabled:a==="disabled",placeholder:f==="filter"?" ":e,readOnly:a==="disabled"})}function Y({className:t,placeholder:e,...r}){let{state:o,variant:a}=b();return jsx("input",{...r,className:p({className:t,state:o}),disabled:o==="disabled",placeholder:a==="filter"?" ":e,readOnly:o==="disabled"})}function Z({className:t,locales:e="pt-BR",placeholder:r,...o}){let{state:a,variant:l}=b();return jsx(InputNumberFormat,{...o,className:p({className:t,state:a}),disabled:a==="disabled",locales:e,placeholder:l==="filter"?" ":r,readOnly:a==="disabled"})}function $({className:t,name:e,...r}){let{state:o}=b();return jsx("div",{className:A({className:t,state:o}),...r,children:jsx(b$1,{name:e})})}function ee({className:t,...e}){let{state:r}=b();return jsx("span",{className:E({className:t,state:r}),...e})}function te({className:t,...e}){let{state:r}=b();return jsx("p",{className:S({className:t,state:r}),...e})}function K({className:t,...e}){let{state:r}=b();return jsx("div",{className:F({className:t,state:r}),"data-slot":"input-action-slot",...e})}function re({handleIncrement:t,handleDecrement:e}){return jsxs(K,{className:"w-large-4x border-border-layer-2 rounded-r-small-1x bg-layer-2-hover flex flex-col items-center justify-center border",children:[jsx("button",{className:"flex h-1/2 items-center justify-center",type:"button",onClick:t,children:jsx(b$1,{className:"text-icon-neutral-3",name:"keyboard_arrow_up"})}),jsx(a$2,{}),jsx("button",{className:"flex h-1/2 items-center justify-center",type:"button",onClick:e,children:jsx(b$1,{className:"text-icon-neutral-3",name:"keyboard_arrow_down"})})]})}export{w as a,U as b,G as c,Q as d,W as e,X as f,Y as g,Z as h,$ as i,ee as j,te as k,K as l,re as m};//# sourceMappingURL=chunk-2CM3SFOY.js.map
-//# sourceMappingURL=chunk-2CM3SFOY.js.map