feat: toggle group single & mulitple type

.todo

@@ -3,3 +3,5 @@
 - fix: kbd, no exproted hook
 - refactor(maybe): slight close timeout on combobox/select value select
 - feat: add skeleton animation duration
+- fix: higher specificty needed to change text color on button
+- fix: button loader not being visible

app.tsx

@@ -1,48 +1,14 @@
 import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogTrigger,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
   NavigationMenuTrigger,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  Skeleton,
-  Toaster,
-  toastError,
 } from '@/components'
 import React from 'react'
 
 const App = () => {
   return (
     <div className='h-screen w-full flex flex-col justify-center items-center gap-8'>
-      {/* <Button
-        onClick={() =>
-          toastError({
-            title: 'Uspjeh',
-            description: 'Uspjesna akcija obavljena',
-            action: { label: 'afe', onClick: () => {} },
-          })
-        }
-      >
-        TSuccess
-      </Button>
-      <Dialog>
-        <DialogTrigger>Trigger</DialogTrigger>
-        <DialogContent>Content</DialogContent>
-      </Dialog>
-      <Select>
-        <SelectTrigger className='w-[200px]' placeholder='Select item...' endContent={'end'} />
-        <SelectContent>
-          <SelectItem value='item-1'>Item 1</SelectItem>
-          <SelectItem value='item-2'>Item 2</SelectItem>
-          <SelectItem value='item-3'>Item 3</SelectItem>
-        </SelectContent>
-      </Select> */}
       <NavigationMenu className='z-30' viewportProps={{ className: 'bg-mode-accent' }}>
         <NavigationMenuItem value='AEF'>
           <NavigationMenuTrigger>Trigger 1</NavigationMenuTrigger>
@@ -68,19 +34,6 @@ const App = () => {
           </NavigationMenuContent>
         </NavigationMenuItem>
       </NavigationMenu>
-      <div className='relative z-20'>Text bellow popover</div>
-      <Select>
-        <SelectTrigger className='w-[200px]'>Select</SelectTrigger>
-        <SelectContent hasScroll>
-          {Array.from({ length: 20 }).map((_, index) => (
-            <SelectItem value={index}>{index}</SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <div className='grid gap-4'>
-        <Skeleton className='h-[40px] w-[200px]' />
-      </div>
-      <Toaster />
     </div>
   )
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@renderui/core",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "private": false,
   "description": "React UI library with highly modular and ready-out-of-the-box components",
   "license": "MIT",

src/components/combobox/components/combobox-trigger.tsx

@@ -32,6 +32,7 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerRef, ComboboxTriggerProp
     'aria-haspopup': ariaHasPopup = 'listbox',
     variant = 'solid',
     color = 'mode-accent',
+    hasIndicator = true,
     hasTruncatedText = false,
     hasDefaultPressedStyles = false,
     hasRipple = false,
@@ -113,10 +114,12 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerRef, ComboboxTriggerProp
       endContent={(props) => (
         <>
           {typeof endContent === 'function' ? endContent(props) : endContent}
-          <CaretSortIcon
-            className={cn(DEFAULT_COMBOBOX_TRIGGER_ICON_CLASSNAME, iconClassName)}
-            {...iconProps}
-          />
+          {hasIndicator ? (
+            <CaretSortIcon
+              className={cn(DEFAULT_COMBOBOX_TRIGGER_ICON_CLASSNAME, iconClassName)}
+              {...iconProps}
+            />
+          ) : null}
         </>
       )}
       {...restProps}

src/components/combobox/types/combobox-trigger.ts

@@ -11,6 +11,7 @@ type ComboboxTriggerCustomProps = {
   variant?: 'solid' | 'outline'
   placeholder?: string
   hasTruncatedText?: boolean
+  hasIndicator?: boolean
   children?: React.ReactNode
   iconProps?: React.ComponentPropsWithoutRef<typeof CaretSortIcon>
 }

src/components/index.ts

@@ -32,6 +32,7 @@ export * from '@/components/separator'
 export * from '@/components/sheet'
 export * from '@/components/skeleton'
 export * from '@/components/slot'
+export * from '@/components/slider'
 export * from '@/components/sub-layer'
 export * from '@/components/switch'
 export * from '@/components/tabs'

src/components/number-input/hooks/use-number-input.ts

@@ -31,7 +31,6 @@ function useNumberInput(props: NumberInputProps, ref: React.Ref<NumberInputRef>)
     isReadOnly,
     isInvalid,
     isRequired,
-    hasSpinButtons,
     inputContainerProps,
     spinButtonContainerProps,
     incrementButtonProps,
@@ -51,6 +50,7 @@ function useNumberInput(props: NumberInputProps, ref: React.Ref<NumberInputRef>)
     size = 'md',
     variant = 'solid',
     defaultValue = '',
+    hasSpinButtons = true,
     ...restProps
   } = props
 

src/components/toggle-group/components/toggle-group-item.tsx

@@ -25,14 +25,20 @@ const ToggleGroupItem = React.forwardRef<ToggleGroupItemRef, ToggleGroupItemProp
 
   const { value: rootValue } = useToggleGroupContext()
 
+  const isOn = Array.isArray(rootValue)
+    ? Boolean(rootValue.includes(value as never))
+    : value.toString() === rootValue.toString()
+
   return (
     <ToggleGroupItemPrimitive asChild value={value as string} className={cn(className)}>
       <Button
         ref={ref}
+        data-slot='item'
         color={color}
-        variant={variant ?? (rootValue?.includes(value as never) ? 'solid' : 'plain')}
+        variant={variant ?? (isOn ? 'solid' : 'plain')}
         hasRipple={hasRipple}
         className={cn(DEFAUL_TOGGLE_CLASSNAME, className)}
+        data-state={isOn ? 'on' : 'off'}
         {...restProps}
       >
         {children}

src/components/toggle-group/components/toggle-group.tsx

@@ -17,11 +17,11 @@ const ToggleGroup = React.forwardRef<ToggleGroupRef, ToggleGroupProps>((props, r
     className,
     children,
     defaultValue = EMPTY_ARRAY as string[],
-    type = 'multiple',
+    type = 'single',
     ...restProps
   } = props
 
-  const [value, onValueChange] = useControllableState<string[] | number[]>({
+  const [value, onValueChange] = useControllableState<any>({
     onChange: onValueChangeProp,
     defaultProp: defaultValue,
     prop: valueProp,
@@ -30,8 +30,9 @@ const ToggleGroup = React.forwardRef<ToggleGroupRef, ToggleGroupProps>((props, r
   return (
     <ToggleGroupPrimitive
       ref={ref}
-      value={value as string[] | undefined}
-      type={type as 'multiple'}
+      data-slot='group'
+      value={value as any}
+      type={type as any}
       onValueChange={onValueChange}
       className={cn(DEFAULT_TOGGLE_GROUP_CLASSNAME, className)}
       {...restProps}

src/components/toggle-group/types/toggle-group-context.ts

@@ -1,5 +1,5 @@
 type ToggleGroupContext = {
-  value: string[] | number[]
+  value: string[] | number[] | string | number
 }
 
 export type { ToggleGroupContext }

src/components/toggle-group/types/toggle-group.ts

@@ -11,13 +11,22 @@ type ToggleGroupPrimitiveProps = Omit<
   'value' | 'defaultValue' | 'onValueChange' | 'type'
 >
 
-type ToggleGroupCustomProps = {
-  type?: 'single' | 'multiple'
+type ToggleGroupCustomSingleProps = {
+  type?: 'single'
+  value?: string | number
+  defaultValue?: string | number
+  onValueChange?: (value: string | number | undefined) => void
+}
+
+type ToggleGroupCustomMultipleProps = {
+  type?: 'multiple'
   value?: string[] | number[]
   defaultValue?: string[] | number[]
   onValueChange?: (value: string[] | number[] | undefined) => void
 }
 
-type ToggleGroupProps = Simplify<ToggleGroupPrimitiveProps & ToggleGroupCustomProps>
+type ToggleGroupProps = Simplify<
+  ToggleGroupPrimitiveProps & (ToggleGroupCustomSingleProps | ToggleGroupCustomMultipleProps)
+>
 
 export type { ToggleGroupProps, ToggleGroupRef }