nitro-web 0.0.122 → 0.0.123

package/components/partials/element/filters.tsx

@@ -5,6 +5,7 @@ import { ListFilterIcon } from 'lucide-react'
 
 type CommonProps = {
   label?: string
+  size?: 'full' | 'half' | 'third' | 'quarter' | 'fifth'
   rowClassName?: string
 }
 export type FilterType = (
@@ -123,6 +124,15 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
     const queryStr = queryString(omit(stateRef.current, includePagination ? [] : ['page']))
     navigate(locationRef.current.pathname + queryStr, { replace: true })
   }
+  
+  function getBasisWidth(size: 'full' | 'half' | 'third' | 'quarter' | 'fifth') {
+    // Need to splay out the classnames for tailwind to work
+    if (size == 'full') return 'w-full'
+    else if (size == 'half') return 'shrink basis-[calc(50%-8px)]'
+    else if (size == 'third') return 'shrink basis-[calc(33.33%-8px)]'
+    else if (size == 'quarter') return 'shrink basis-[calc(25%-8px)]'
+    else if (size == 'fifth') return 'shrink basis-[calc(20%-8px)]'
+  }
 
   return (
     <Elements.Dropdown 
@@ -141,10 +151,10 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
             This div shouldnt produce a page scrollbar when the dropdown is closed.
             But should be visibile if allowedOverflow is true.
           </div> */}
-          <div class={twMerge(`flex flex-wrap gap-4 px-4 py-4 pb-6 ${dropdownFiltersClassName || ''}`)}>
+          <div class={twMerge(`flex flex-wrap gap-[16px] p-[16px] pb-6 ${dropdownFiltersClassName || ''}`)}>
             {
-              filters?.map(({label, rowClassName, ...filter}, i) => (
-                <div key={i} class={twMerge(`w-full ${rowClassName||''}`)}>
+              filters?.map(({label, size='full', rowClassName, ...filter}, i) => (
+                <div key={i} class={twMerge(getBasisWidth(size), rowClassName || '')}>
                   <div class="flex justify-between"> 
                     <label for={filter.id || filter.name}>{label || camelCaseToTitle(filter.name)}</label>
                     <a href="#" class="label font-normal text-secondary underline" onClick={(e) => reset(e, filter)}>Reset</a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.122",
+  "version": "0.0.123",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",