nitro-web 0.0.46 → 0.0.48

package/client/index.ts

@@ -29,6 +29,7 @@ export { Avatar } from '../components/partials/element/avatar'
 export { Button } from '../components/partials/element/button'
 export { Calendar, type CalendarProps } from '../components/partials/element/calendar'
 export { Dropdown } from '../components/partials/element/dropdown'
+export { Filters, type FiltersHandleType, type FilterType } from '../components/partials/element/filters'
 export { GithubLink } from '../components/partials/element/github-link'
 export { Initials } from '../components/partials/element/initials'
 export { Message } from '../components/partials/element/message'
@@ -36,7 +37,6 @@ export { Modal } from '../components/partials/element/modal'
 export { Sidebar, type SidebarProps } from '../components/partials/element/sidebar'
 export { Tooltip } from '../components/partials/element/tooltip'
 export { Topbar } from '../components/partials/element/topbar'
-
 // Component Form
 export { Checkbox } from '../components/partials/form/checkbox'
 export { Drop } from '../components/partials/form/drop'

package/components/partials/element/accordion.tsx

@@ -3,21 +3,16 @@ import { css } from 'twin.macro'
 import { IsFirstRender } from 'nitro-web'
 
 type AccordionProps = {
-  children: React.ReactNode
+  ariaControls?: string // pass to add aria-controls attribute to the accordion
+  children: React.ReactNode // first child is the header, second child is the contents
   className?: string
-  expanded?: boolean
-  onChange?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void
+  classNameWhenExpanded?: string // handy for group styling
+  expanded?: boolean // initial value (or controlled value if onChange is passed)
+  onChange?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number) => void 
+    // called when the header is clicked
 }
 
-export function Accordion({ children, className, expanded, onChange }: AccordionProps) {
-  /**
-   * @param {rxjs} children - first child is the header, second child is the contents
-   *   <Accordion>
-   *     <div>Header</div><div>Contents</div>
-   *   </Accordion>
-   * @param {boolean} <expanded> - initial value (or controlled value if onChange is passed)
-   * @param {function} <onChange> - called when the header is clicked
-   */
+export function Accordion({ ariaControls, children, className, classNameWhenExpanded, expanded, onChange }: AccordionProps) {
   const [preState, setPreState] = useState(expanded)
   const [state, setState] = useState(expanded)
   const [height, setHeight] = useState('auto')
@@ -28,9 +23,17 @@ export function Accordion({ children, className, expanded, onChange }: Accordion
       height: 0;
       overflow: hidden;
       transition: height ease 0.2s;
+      a, button {
+        visibility: hidden;   /* removes from tab order */
+        transition: visibility 0s 0.2s;
+      }
     }
-    &.is-expanded > div:last-child {
+    &.is-expanded > *:last-child {
       height: ${height.replace('-', '')};
+      a, button {
+        visibility: visible;
+        transition: visibility 0s;
+      }
     }
   `
 
@@ -60,9 +63,9 @@ export function Accordion({ children, className, expanded, onChange }: Accordion
     return () => timeout && clearTimeout(timeout)
   }, [height])
 
-  const onClick = function(e: React.MouseEvent<HTMLDivElement>) {
+  const onClick = function(e: React.MouseEvent<HTMLDivElement>|React.KeyboardEvent<HTMLDivElement>) {
     // Click came from inside the accordion header/summary
-    if (e.currentTarget.children[0].contains(e.target as Node) || e.currentTarget.children[0] == e.target) {
+    if (e.currentTarget.children[0].contains(e.target as HTMLElement) || e.currentTarget.children[0] == e.target) {
       if (onChange) {
         onChange(e, getElementIndex(e.currentTarget))
       } else {
@@ -77,11 +80,20 @@ export function Accordion({ children, className, expanded, onChange }: Accordion
     return index
   }
 
+  const onKeyDown = function(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      onClick(e)
+    }
+  }
+
   return (
     <div
       ref={el}
-      class={['accordion', className, state ? 'is-expanded' : ''].filter(o => o).join(' nitro-accordion')}
+      aria-controls={ariaControls}
+      aria-expanded={ariaControls ? state : undefined}
+      class={['accordion', className, state ? `is-expanded ${classNameWhenExpanded}` : '', 'nitro-accordion'].filter(o => o).join(' ')}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       css={style}
     >
       {children}

package/components/partials/element/button.tsx

@@ -1,8 +1,8 @@
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from 'nitro-web'
 import { ChevronDown, ChevronUp } from 'lucide-react'
 
 type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  color?: 'primary'|'secondary'|'black'|'white'
+  color?: 'primary'|'secondary'|'black'|'white'|'clear'
   size?: 'xs'|'sm'|'md'|'lg'
   className?: string
   isLoading?: boolean
@@ -37,14 +37,15 @@ export function Button({
     secondary: 'bg-secondary hover:bg-secondary-hover',
     black: 'bg-black hover:bg-gray-700',
     white: 'bg-white ring-1 ring-inset ring-gray-300 hover:bg-gray-50 text-gray-900 [&>.loader]:border-black',
+    clear: 'ring-1 ring-inset ring-gray-300 hover:bg-gray-50 text-foreground [&>.loader]:border-foreground !shadow-none',
   }
   
   // Button sizes
   const sizes = {
     xs: 'px-2 py-1 px-button-x-xs py-button-y-xs text-xs rounded',
-    sm: 'px-2.5 py-1.5 px-button-x-sm py-button-y-sm text-sm rounded-md',
-    md: 'px-3 py-2 px-button-x py-button-y text-sm rounded-md',
-    lg: 'px-3.5 py-2.5 px-button-x-lg py-button-y-lg text-sm rounded-md',
+    sm: 'px-2.5 py-1.5 px-button-x-sm py-button-y-sm text-sm text-sm-button rounded-md',
+    md: 'px-3 py-[0.58rem] px-button-x-md py-button-y-md text-sm text-sm-button rounded-md', // default
+    lg: 'px-3.5 py-2.5 px-button-x-lg py-button-y-lg text-sm text-sm-button rounded-md',
   }
 
   const contentLayout = `gap-x-1.5 ${iconPosition == 'none' ? '' : 'inline-flex items-center justify-center'}`

package/components/partials/element/dropdown.tsx

@@ -16,7 +16,8 @@ type DropdownProps = {
   /** The minimum width of the menu **/
   minWidth?: number | string
   /** The content to render inside the top of the dropdown **/
-  menuChildren?: React.ReactNode
+  menuContent?: React.ReactNode
+  menuClassName?: string
   menuIsOpen?: boolean
   menuToggles?: boolean
   toggleCallback?: (isActive: boolean) => void
@@ -30,7 +31,8 @@ export const Dropdown = forwardRef(function Dropdown({
   options, 
   isHoverable,
   minWidth, 
-  menuChildren, 
+  menuClassName,
+  menuContent, 
   menuIsOpen, 
   menuToggles=true,
   toggleCallback,
@@ -39,7 +41,7 @@ export const Dropdown = forwardRef(function Dropdown({
   isHoverable = isHoverable && !menuIsOpen
   const dropdownRef = useRef<HTMLDivElement|null>(null)
   const [isActive, setIsActive] = useState(!!menuIsOpen)
-  const menuStyle = getSelectStyle({ name: 'menu', usePrefixes: true })
+  const menuStyle = getSelectStyle({ name: 'menu' })
 
   // Expose the setIsActive function to the parent component
   useImperativeHandle(ref, () => ({ setIsActive }))
@@ -106,9 +108,9 @@ export const Dropdown = forwardRef(function Dropdown({
       }
       <ul
         style={{ minWidth }}
-        class={`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1]`}
+        class={`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName}`}
       >
-        {menuChildren}
+        {menuContent}
         {
           options && options.map((option, i) => {
             const optionStyle = getSelectStyle({ name: 'option', usePrefixes: true, isSelected: option.isSelected })
@@ -131,10 +133,12 @@ export const Dropdown = forwardRef(function Dropdown({
 })
 
 const style = css`
-  ul {
+  &>ul {
     transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s 0.15s ease, max-width 0s 0.15s ease, max-height 0s 0.15s ease;
     max-width: 0; // handy if the dropdown ul exceeds the viewport width
     max-height: 0; // handy if the dropdown ul exceeds the viewport height
+    /* overflow: visible !important; // override menustyle  */
+    pointer-events: none; 
   }
   &.is-bottom-right,
   &.is-top-right {
@@ -145,14 +149,14 @@ const style = css`
   }
   &.is-bottom-left,
   &.is-bottom-right {
-    ul {
+    &>ul {
       top: 100%;
       transform: translateY(6px);
     }
   }
   &.is-top-left,
   &.is-top-right {
-    ul {
+    &>ul {
       bottom: 100%;
       transform: translateY(-10px);
     }
@@ -161,15 +165,17 @@ const style = css`
   &.is-hoverable:hover,
   &:focus,
   &.is-active,
-  li:hover,
-  li:focus,
-  li.is-active {
-    ul {
+  &>ul>li:hover,
+  &>ul>li:focus,
+  &>ul>li.is-active {
+    &>ul {
       opacity: 1;
       visibility: visible;
       transition: transform 0.15s ease, opacity 0.15s ease;
       max-width: 1000px;
       max-height: 1000px;
+      pointer-events: auto;
+      overflow: visible;
     }
     &.is-bottom-left > ul,
     &.is-bottom-right > ul {
@@ -182,7 +188,7 @@ const style = css`
   }
   // no animation
   &.no-animation {
-    ul {
+    &>ul {
       transition: none;
     }
   }

package/components/partials/element/filters.tsx

@@ -0,0 +1,183 @@
+import { forwardRef, Dispatch, SetStateAction, useRef, useEffect, useImperativeHandle } from 'react'
+import { Button, Dropdown, Field, Select, twMerge } from 'nitro-web'
+import { camelCaseToTitle, debounce, omit, queryString, queryObject } from 'nitro-web/util'
+import { ListFilterIcon } from 'lucide-react'
+
+export type FilterType = {
+  name: string
+  type: 'text'|'date'|'search'|'select'
+  label?: string
+  enums?: { label: string, value: string }[]
+  placeholder?: string
+}
+
+type FilterState = {
+  [key: string]: string | true
+}
+
+type FiltersProps = {
+  filters?: FilterType[]
+  state: FilterState
+  setState: Dispatch<SetStateAction<FilterState>>
+  elements?: {
+    Button?: typeof Button
+    Dropdown?: typeof Dropdown
+    Field?: typeof Field
+    Select?: typeof Select
+    FilterIcon?: typeof ListFilterIcon
+  }
+  dropdownProps?: Partial<React.ComponentProps<typeof Dropdown>>
+  buttonProps?: Partial<React.ComponentProps<typeof Button>>
+  buttonClassName?: string
+  buttonText?: string
+  buttonCounterClassName?: string
+}
+
+export type FiltersHandleType = {
+  submit: (includePagination?: boolean) => void
+}
+
+export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({ 
+  filters, state, setState, elements, dropdownProps, buttonProps, buttonClassName, buttonText, buttonCounterClassName,
+}, ref) => {
+  const location = useLocation()
+  const stateRef = useRef(state)
+  const [debouncedSubmit] = useState(() => debounce(submit, 150))
+  const count = Object.keys(state).length - (Object.keys(state).includes('page') ? 1 : 0)
+  const Elements = {
+    Button: elements?.Button || Button,
+    Dropdown: elements?.Dropdown || Dropdown,
+    Field: elements?.Field || Field,
+    Select: elements?.Select || Select,
+    FilterIcon: elements?.FilterIcon || ListFilterIcon,
+  }
+
+  useImperativeHandle(ref, () => ({
+    submit: debouncedSubmit,
+  }))
+  
+  useEffect(() => {
+    return () => debouncedSubmit.cancel()
+  }, [])
+  
+  useEffect(() => {
+    stateRef.current = state
+  }, [state])
+
+  useEffect(() => {
+    setState(() => ({
+      ...queryObject(location.search),
+    }))
+  }, [location.search])
+
+  function reset(e: React.MouseEvent<HTMLAnchorElement>, filter: FilterType) {
+    e.preventDefault()
+    setState((s) => omit(s, [filter.name]) as FilterState)
+    debouncedSubmit()
+  }
+
+  function resetAll(e: React.MouseEvent<HTMLButtonElement>) {
+    e.preventDefault()
+    setState((s) => ({
+      ...(s.page ? { page: s.page } : {}), // keep pagination
+    } as FilterState))
+    debouncedSubmit()
+  }
+
+  async function _onChange(e: {target: {id: string, value: unknown}}) {
+    await onChange(setState, e)
+    debouncedSubmit()
+  }
+
+  // Submit the filters and update the URL
+  function submit(includePagination?: boolean) {
+    const queryStr = queryString(omit(stateRef.current, includePagination ? [] : ['page']))
+    history.pushState(null, '', location.pathname + queryStr)
+  }
+
+  if (!filters) return null
+  return (
+    <Elements.Dropdown 
+      dir="bottom-right"
+      // menuIsOpen={true}
+      menuClassName="!rounded-lg"
+      menuContent={
+        <div class="w-[330px]">
+          <div class="flex justify-between items-center border-b p-4 py-3.5">
+            <div class="text-lg font-semibold">Filters</div>
+            <Button color="clear" size="sm" onClick={resetAll}>Reset All</Button>
+          </div>
+          <div class="flex flex-col px-4 py-4 mb-[-6px]">
+            {
+              filters.map((filter) => (
+                <div key={filter.name}>
+                  <div class="flex justify-between"> 
+                    <label for={filter.name}>{filter.label || camelCaseToTitle(filter.name)}</label>
+                    <a href="#" class="label font-normal text-secondary underline" onClick={(e) => reset(e, filter)}>Reset</a>
+                  </div>
+                  {
+                    (filter.type === 'text' || filter.type === 'search') &&
+                    <Elements.Field 
+                      class="mb-4"
+                      name={filter.name}
+                      type={filter.type}
+                      placeholder={filter.placeholder} 
+                      state={state} 
+                      onChange={_onChange}
+                    />
+                  }
+                  {
+                    filter.type === 'date' &&
+                    <Elements.Field
+                      class="mb-4"
+                      name={filter.name}
+                      type="date"
+                      mode="range"
+                      state={state}
+                      onChange={_onChange}
+                      placeholder={filter.placeholder || 'Select range...'}
+                    />
+                  }
+                  {
+                    filter.type === 'select' &&
+                    <Elements.Select
+                      class="mb-4"
+                      name={filter.name} 
+                      type="country" 
+                      state={state} 
+                      options={filter.enums || []} 
+                      onChange={_onChange}
+                      placeholder={filter.placeholder}
+                    />
+                  }
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      }
+      {...dropdownProps}
+    >
+      <Elements.Button 
+        color="white" 
+        IconLeft={<Elements.FilterIcon size={16} />} 
+        className={twMerge(`flex gap-x-2.5 ${buttonClassName || ''}`)}
+        {...buttonProps}
+      >
+        <span class="flex items-center gap-x-2.5">
+          { buttonText || 'Filter By' }
+          {
+            !!count && 
+            <span 
+              class={twMerge(`inline-flex items-center justify-center rounded-full text-xs text-white bg-primary w-[19px] h-[19px] ${buttonCounterClassName || ''}`)}
+            >
+              {count}
+            </span>
+          }
+        </span>
+      </Elements.Button>
+    </Elements.Dropdown>
+  )
+})
+
+Filters.displayName = 'Filters'

package/components/partials/form/field-color.tsx

@@ -26,7 +26,7 @@ export function FieldColor({ defaultColor='#333', Icon, onChange, value, ...prop
     <Dropdown 
       dir="bottom-left"
       menuToggles={false}
-      menuChildren={
+      menuContent={
         <ColorPicker key={lastChanged} defaultColor={defaultColor} id={id} name={props.name} value={value} onChange={onChange} />
       }
     >

package/components/partials/form/field-currency.tsx

@@ -148,7 +148,7 @@ export function FieldCurrency({ config, currency='nzd', onChange, value, default
         defaultValue={defaultValue}
       />
       <span
-        class={`absolute top-[1px] bottom-0 left-3 inline-flex items-center select-none text-gray-500 text-sm sm:text-sm/6 ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
+        class={`absolute top-0 bottom-0 left-3 inline-flex items-center select-none text-gray-500 text-sm text-sm-input ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
       >
         {settings.prefix || settings.suffix}
       </span>

package/components/partials/form/field-date.tsx

@@ -44,7 +44,8 @@ export function FieldDate({
   const dropdownRef = useRef<DropdownRef>(null)
   const id = props.id || props.name
   const [month, setMonth] = useState<number|undefined>()
-
+  const [lastUpdated, setLastUpdated] = useState(0)
+  
   // Convert the value to an array of valid* dates
   const dates = useMemo(() => {
     const _dates = Array.isArray(value) ? value : [value]
@@ -54,6 +55,11 @@ export function FieldDate({
   // Hold the input value in state
   const [inputValue, setInputValue] = useState(() => getInputValue(dates))
 
+  // Update the date's inputValue (text) when the value changes outside of the component
+  useEffect(() => {
+    if (new Date().getTime() > lastUpdated + 100) setInputValue(getInputValue(dates))
+  }, [value])
+
   // Get the prefix content width
   useEffect(() => {
     setPrefixWidth(getPrefixWidth(prefix, 4))
@@ -62,7 +68,11 @@ export function FieldDate({
   function onCalendarChange(mode: Mode, value: null|number|(null|number)[]) {
     if (mode == 'single' && !showTime) dropdownRef.current?.setIsActive(false) // Close the dropdown
     setInputValue(getInputValue(value))
-    if (onChange) onChange({ target: { id: id, value: value as any } })
+    // Update the value
+    if (onChange) {
+      onChange({ target: { id: id, value: value as any } })
+      setLastUpdated(new Date().getTime())
+    }
   }
 
   function getInputValue(dates: Date|number|null|(Date|number|null)[]) {
@@ -79,7 +89,7 @@ export function FieldDate({
     })
     
     // For single/range we need limit the array
-    if (mode == 'range') split.length = 2
+    if (mode == 'range' && split.length > 1) split.length = 2
     else if (mode == 'multiple') split = split.filter(o => o) // remove invalid dates
 
     // Swap dates if needed
@@ -91,9 +101,12 @@ export function FieldDate({
       break
     }
     
-    // Update 
+    // Update the value
     const value = mode == 'single' ? split[0]?.getTime() ?? null : split.map(d => d?.getTime() ?? null)
-    if (onChange) onChange({ target: { id: id, value: value as any }})
+    if (onChange) {
+      onChange({ target: { id: id, value: value as any }})
+      setLastUpdated(new Date().getTime())
+    }
   } 
 
   return (
@@ -103,7 +116,7 @@ export function FieldDate({
       // animate={false}
       // menuIsOpen={true}
       minWidth={0}
-      menuChildren={
+      menuContent={
         <div className="flex">
           <Calendar 
             {...{ mode, value, numberOfMonths, month }} 
@@ -121,7 +134,9 @@ export function FieldDate({
         {
           prefix && 
           // Similar classNames to the input.tsx:IconWrapper()
-          <span className="relative col-start-1 row-start-1 self-center select-none z-[1] justify-self-start text-sm ml-3">{prefix}</span>
+          <span className="z-[0] col-start-1 row-start-1 self-center select-none justify-self-start text-sm text-sm-input ml-3">
+            {prefix}
+          </span>
         }
         <input 
           {...props}

package/components/partials/form/field.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { css } from 'twin.macro'
-import { twMerge } from 'tailwind-merge'
-import { util, FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps } from 'nitro-web'
+import { util, FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps, twMerge } from 'nitro-web'
 import { Errors, type Error } from 'nitro-web/types'
 import {
   EnvelopeIcon,
@@ -131,7 +130,7 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
 
 function FieldContainer({ children, className, error }: { children: React.ReactNode, className?: string, error?: Error }) {
   return (
-    <div css={style} className={`mt-2.5 mb-6 mt-input-before mb-input-after grid grid-cols-1 nitro-field ${className || ''}`}>
+    <div css={style} className={twMerge(`mt-2.5 mb-6 mt-input-before mb-input-after grid grid-cols-1 nitro-field ${className || ''}`)}>
       {children}
       {error && <div class="mt-1.5 text-xs text-danger nitro-error">{error.detail}</div>}
     </div>
@@ -141,11 +140,11 @@ function FieldContainer({ children, className, error }: { children: React.ReactN
 function getInputClasses({ error, Icon, iconPos, type }: { error: Error, Icon?: React.ReactNode, iconPos: string, type?: string }) {
   const pl = 'pl-3 pl-input-x'
   const pr = 'pr-3 pr-input-x'
-  const py = 'py-2 py-input-y'
+  const py = 'py-[0.58rem] py-input-y'
   const plWithIcon = type == 'color' ? 'pl-9' : 'pl-8' // was sm:pl-8 pl-8, etc
   const prWithIcon = type == 'color' ? 'pr-9' : 'pr-8'
   return (
-    `block ${py} col-start-1 row-start-1 w-full rounded-md bg-white text-sm leading-[1.65] outline outline-1 -outline-offset-1 ` +
+    `block ${py} col-start-1 row-start-1 w-full rounded-md bg-white text-sm text-sm-input outline outline-1 -outline-offset-1 ` +
     'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' +
     (iconPos == 'right' && Icon ? `${pl} ${prWithIcon} ` : (Icon ? `${plWithIcon} ${pr} ` : `${pl} ${pr} `)) +
     (error 
@@ -161,11 +160,11 @@ function IconWrapper({ icon, iconPos, ...props }: IconWrapperProps) {
     !!icon && 
     <div
       {...props}
-      className={twMerge(
-        'relative size-[14px] col-start-1 row-start-1 self-center text-[#c6c8ce] select-none z-[1] ' +
+      className={
+        'z-[0] size-[14px] col-start-1 row-start-1 self-center text-[#c6c8ce] select-none ' +
         (iconPos == 'right' ? 'justify-self-end mr-3 ' : 'justify-self-start ml-3 ') + 
         props.className || ''
-      )}
+      }
     >{icon}</div>
   )
 }

package/components/partials/form/select.tsx

@@ -1,5 +1,5 @@
 import { css } from 'twin.macro'
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from 'nitro-web'
 import ReactSelect, { components, ControlProps, createFilter, OptionProps, SingleValueProps } from 'react-select'
 import { ClearIndicatorProps, DropdownIndicatorProps, MultiValueRemoveProps } from 'react-select'
 import { ChevronUpDownIcon, CheckCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
@@ -31,7 +31,7 @@ type SelectProps = {
   /** The options to display in the dropdown **/
   options: { value: unknown, label: string | React.ReactNode, fixed?: boolean, [key: string]: unknown }[]
   /** The state object to get the value and check errors from **/
-  state?: { errors: Errors, [key: string]: unknown }
+  state?: { errors?: Errors, [key: string]: unknown }
   /** Select variations **/
   type?: 'country'|'customer'|''
   /** All other props are passed to react-select **/
@@ -58,7 +58,7 @@ export function Select({ inputId, minMenuWidth, name, prefix='', onChange, optio
   }
 
   return (
-    <div css={style} class="mt-2.5 mb-6 mt-input-before mb-input-after nitro-select">
+    <div css={style} class={twMerge(`mt-2.5 mb-6 mt-input-before mb-input-after nitro-select ${props.className||''}`)}>
       <ReactSelect
         /**
          * react-select prop quick reference (https://react-select.com/props#api):
@@ -237,11 +237,11 @@ const selectStyles = {
   // Based off https://www.jussivirtanen.fi/writing/styling-react-select-with-tailwind
   // Input container
   control: {
-    base: 'rounded-md bg-white hover:cursor-pointer text-sm leading-[1.65] outline outline-1 -outline-offset-1 outline-input-border',
+    base: 'rounded-md bg-white hover:cursor-pointer text-sm text-sm-input outline outline-1 -outline-offset-1 outline-input-border',
     focus: 'outline-2 -outline-offset-2 outline-input-border-focus',
     error: 'outline-danger',
   },
-  valueContainer: 'py-2 px-3 py-input-y px-input-x gap-1',
+  valueContainer: 'py-[0.58rem] px-3 py-input-y px-input-x gap-1',
   // Input container objects
   input: {
     base: 'text-input',
@@ -261,8 +261,8 @@ const selectStyles = {
   indicatorsContainer: 'p-1 px-2 gap-1',
   indicatorSeparator: 'py-0.5 before:content-[""] before:block before:bg-gray-100 before:w-px before:h-full',
   // Dropdown menu
-  menu: 'mt-1.5 border border-dropdown-ul-border bg-white rounded-md text-sm overflow-hidden shadow-dropdown-ul',
-  groupHeading: 'ml-3 mt-2 mb-1 text-gray-500 text-sm',
+  menu: 'mt-1.5 border border-dropdown-ul-border bg-white rounded-md text-sm text-sm-input overflow-hidden shadow-dropdown-ul',
+  groupHeading: 'ml-3 mt-2 mb-1 text-gray-500 text-sm text-sm-input',
   noOptionsMessage: 'm-1 text-gray-500 p-2 bg-gray-50 border border-dashed border-gray-200 rounded-sm',
   option: {
     base: 'relative px-3 py-2 !flex items-center gap-2 cursor-default',

package/components/partials/styleguide.tsx

@@ -1,8 +1,12 @@
-import { Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, Modal, Calendar, injectedConfig } from 'nitro-web'
+import { 
+  Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, Modal, Calendar, injectedConfig, 
+  Filters, FiltersHandleType,
+  FilterType,
+} from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
 import { Check } from 'lucide-react'
 
-export function Styleguide() {
+export function Styleguide({ className }: { className?: string }) {
   const [customerSearch, setCustomerSearch] = useState('')
   const [showModal1, setShowModal1] = useState(false)
   const [state, setState] = useState({
@@ -20,6 +24,29 @@ export function Styleguide() {
       { title: 'address', detail: 'Address is required' },
     ],
   })
+  const [filterState, setFilterState] = useState({})
+  const filtersRef = useRef<FiltersHandleType>(null)
+  const filters: FilterType[] = [
+    { 
+      name: 'dateRange',
+      type: 'date',
+    },
+    { 
+      name: 'search',
+      type: 'search',
+      label: 'Keyword Search',
+      placeholder: 'Job, employee name...',
+    },
+    { 
+      name: 'status', 
+      type: 'select',
+      enums: [
+        { label: 'Pending', value: 'pending' }, 
+        { label: 'Approved', value: 'approved' }, 
+        { label: 'Rejected', value: 'rejected' },
+      ],
+    },
+  ]
 
   // Example of updating state
   // useEffect(() => {
@@ -52,7 +79,7 @@ export function Styleguide() {
   }
 
   return (
-    <div class="mb-10 text-left max-w-[1100px]">
+    <div class={`text-left max-w-[1100px] ${className}`}>
       <GithubLink filename={__filename} />
       <div class="mb-7">
         <h1 class="h1">{injectedConfig.isDemo ? 'Design System' : 'Style Guide'}</h1>
@@ -98,6 +125,31 @@ export function Styleguide() {
         </div>
       </div>
 
+      <h2 class="h3">Filters</h2>
+      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-10">
+        {/* Filter dropdown */}
+        <Filters 
+          ref={filtersRef} 
+          filters={filters} 
+          state={filterState} 
+          setState={setFilterState}
+          dropdownProps={{ dir: 'bottom-left' }}
+        />
+        {/* Search bar */}
+        <Field
+          class="!my-0 min-w-[242px]" 
+          type="search" 
+          name="search" 
+          iconPos="left" 
+          state={filterState}
+          onChange={(e) => {
+            onChange(setFilterState, e)
+            filtersRef.current?.submit()
+          }}
+          placeholder="Linked search bar..."
+        />
+      </div>
+
       <h2 class="h3">Buttons</h2>
       <div class="flex flex-wrap gap-x-6 gap-y-4 mb-10">
         <div><Button color="primary">primary (default)</Button></div>
@@ -273,7 +325,7 @@ export function Styleguide() {
       </div>
 
       <h2 class="h3">File Inputs & Calendar</h2>
-      <div class="grid grid-cols-3 gap-x-6 mb-4">
+      <div class="grid grid-cols-3 gap-x-6">
         <div>
           <label for="avatar">Avatar</label>
           <Drop class="is-small" name="avatar" state={state} onChange={(e) => onChange(setState, e)} awsUrl={injectedConfig.awsUrl} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "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 🚀",

package/types/util.d.ts

@@ -117,30 +117,31 @@ export function currencyToCents(currency: string): string;
  */
 export function date(date: number | Date, format?: string, timezone?: string): string;
 /**
+ * @template {(...args: any[]) => any} T
  * Creates a debounced function that delays invoking `func` until after `wait`
  * milliseconds have elapsed since the last time the debounced function was invoked.
  *
- * @param {Function} func - The function to debounce.
+ * @param {T} func - The function to debounce.
  * @param {number} [wait=0] - Number of milliseconds to delay.
  * @param {{
  *   leading?: boolean,  // invoke on the leading edge of the timeout (default: false)
  *   maxWait?: number,   // maximum time `func` is allowed to be delayed before it's invoked
  *   trailing?: boolean, // invoke on the trailing edge of the timeout (default: true)
  * }} [options] - Options to control behavior.
- * @returns {(...args: any[]) => any & {
- *   cancel: () => void,
- *   flush: () => any
- * }} - A new debounced function with `cancel` and `flush` methods.
+ * @returns {((...args: Parameters<T>) => ReturnType<T>) & {
+ *     cancel: () => void;
+ *     flush: () => ReturnType<T>
+ * }}
  *
  * @see https://lodash.com/docs/4.17.15#debounce
  */
-export function debounce(func: Function, wait?: number, options?: {
+export function debounce<T extends (...args: any[]) => any>(func: T, wait?: number, options?: {
     leading?: boolean;
     maxWait?: number;
     trailing?: boolean;
-}): (...args: any[]) => any & {
+}): ((...args: Parameters<T>) => ReturnType<T>) & {
     cancel: () => void;
-    flush: () => any;
+    flush: () => ReturnType<T>;
 };
 /**
  * Deep clones an object or array, preserving its type
@@ -508,6 +509,12 @@ export function pick(obj: {
 export function queryObject(searchString: string, trueDefaults?: boolean): {
     [key: string]: string | true;
 };
+/**
+ * Parses a query string into an array of objects
+ * @param {string} searchString - location.search or location.href, e.g. '?page=1', 'https://...co.nz?page=1'
+ * @returns {object[]} - e.g. [{ page: '1' }]
+ */
+export function queryArray(searchString: string): object[];
 /**
  * Parses an object and returns a query string
  * @param {{[key: string]: unknown}} [obj] - query object
@@ -595,7 +602,7 @@ export function sortByKey(collection: {
 }[], key: string): object[];
 /**
    * Creates a throttled function that only invokes `func` at most once per every `wait` milliseconds
- * @param {function} func
+ * @param {(...args: any[]) => any} func
  * @param {number} [wait=0] - the number of milliseconds to throttle invocations to
  * @param {{
  *    leading?: boolean, // invoke on the leading edge of the timeout
@@ -605,7 +612,7 @@ export function sortByKey(collection: {
  * @example const throttled = util.throttle(updatePosition, 100)
  * @see lodash
  */
-export function throttle(func: Function, wait?: number, options?: {
+export function throttle(func: (...args: any[]) => any, wait?: number, options?: {
     leading?: boolean;
     trailing?: boolean;
 }): Function;
@@ -622,6 +629,12 @@ export function toArray<T>(variable: T | undefined): (T extends any[] ? T : T[])
  * @returns {string}
  */
 export function trim(string: string): string;
+/**
+ * Merge tailwind classes, but ignore classes that shouldn't be merged, and intended as an override
+ * @param  {...string} args
+ * @returns {string}
+ */
+export function twMerge(...args: string[]): string;
 /**
  * Capitalize the first letter of a string
  * @param {string} string

package/types/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"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"}

package/util.js

@@ -2,6 +2,7 @@ import _axios from 'axios'
 import axiosRetry from 'axios-retry'
 import dateformat from 'dateformat'
 import { loadStripe } from '@stripe/stripe-js/pure.js' // pure removes ping
+import { twMerge as _twMerge } from 'tailwind-merge'
 
 /** @type {{[key: string]: {[key: string]: string|true}}} */
 let queryObjectCache = {}
@@ -191,20 +192,21 @@ export function date (date, format, timezone) {
 }
 
 /**
+ * @template {(...args: any[]) => any} T
  * Creates a debounced function that delays invoking `func` until after `wait`
  * milliseconds have elapsed since the last time the debounced function was invoked.
  *
- * @param {Function} func - The function to debounce.
+ * @param {T} func - The function to debounce.
  * @param {number} [wait=0] - Number of milliseconds to delay.
  * @param {{
  *   leading?: boolean,  // invoke on the leading edge of the timeout (default: false)
  *   maxWait?: number,   // maximum time `func` is allowed to be delayed before it's invoked 
  *   trailing?: boolean, // invoke on the trailing edge of the timeout (default: true)
  * }} [options] - Options to control behavior.
- * @returns {(...args: any[]) => any & {
- *   cancel: () => void, 
- *   flush: () => any
- * }} - A new debounced function with `cancel` and `flush` methods.
+ * @returns {((...args: Parameters<T>) => ReturnType<T>) & {
+ *     cancel: () => void;
+ *     flush: () => ReturnType<T>
+ * }}
  *
  * @see https://lodash.com/docs/4.17.15#debounce
  */
@@ -1244,6 +1246,18 @@ export function queryObject (searchString, trueDefaults) {
   return obj
 }
 
+/**
+ * Parses a query string into an array of objects
+ * @param {string} searchString - location.search or location.href, e.g. '?page=1', 'https://...co.nz?page=1'
+ * @returns {object[]} - e.g. [{ page: '1' }]
+ */
+export function queryArray (searchString) {
+  const query = queryObject(searchString)
+  return Object.keys(query).map((key) => {
+    return { [key]: query[key] }
+  })
+}
+
 /**
  * Parses an object and returns a query string
  * @param {{[key: string]: unknown}} [obj] - query object
@@ -1488,7 +1502,7 @@ export function sortByKey (collection, key) {
 
 /**
    * Creates a throttled function that only invokes `func` at most once per every `wait` milliseconds
- * @param {function} func
+ * @param {(...args: any[]) => any} func
  * @param {number} [wait=0] - the number of milliseconds to throttle invocations to
  * @param {{
  *    leading?: boolean, // invoke on the leading edge of the timeout
@@ -1540,6 +1554,26 @@ export function trim (string) {
   return string.trim().replace(/\n\s+\n/g, '\n\n')
 }
 
+/**
+ * Merge tailwind classes, but ignore classes that shouldn't be merged, and intended as an override
+ * @param  {...string} args 
+ * @returns {string}
+ */
+export function twMerge(...args) {
+  const ignoredClasses = /** @type {string[]} */([])
+  const ignoreClasses = ['text-sm-button', 'text-sm-input']
+  const classes = args.filter(Boolean).join(' ').split(' ')
+
+  const filteredClasses = classes.filter(c => {
+    if (ignoreClasses.includes(c)) {
+      ignoredClasses.push(c)
+      return false
+    }
+    return true
+  })
+  return _twMerge(...filteredClasses) + ' ' + ignoredClasses.join(' ')
+}
+
 /**
  * Capitalize the first letter of a string
  * @param {string} string