nitro-web 0.0.30 → 0.0.32

package/client/index.ts

@@ -42,10 +42,10 @@ export { Checkbox } from '../components/partials/form/checkbox'
 export { Drop } from '../components/partials/form/drop'
 export { DropHandler } from '../components/partials/form/drop-handler'
 export { FormError } from '../components/partials/form/form-error'
-export { Field } from '../components/partials/form/input'
-export { FieldColor, type FieldColorProps } from '../components/partials/form/input-color'
-export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/input-currency'
-export { FieldDate, type FieldDateProps } from '../components/partials/form/input-date'
+export { Field } from '../components/partials/form/field'
+export { FieldColor, type FieldColorProps } from '../components/partials/form/field-color'
+export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/field-currency'
+export { FieldDate, type FieldDateProps } from '../components/partials/form/field-date'
 export { Location } from '../components/partials/form/location'
 export { Select, getSelectStyle } from '../components/partials/form/select'
 export { Toggle } from '../components/partials/form/toggle'

package/components/dashboard/dashboard.tsx

@@ -1,10 +1,11 @@
 import { css, theme } from 'twin.macro'
+import { injectedConfig } from 'nitro-web'
 
-export function Dashboard({ config }: { config: { isStatic?: boolean } }) {
+export function Dashboard() {
   const [store] = useTracked()
-  const textColor = store.apiAvailable ? 'text-green-700' : config.isStatic ? 'text-gray-700' : 'text-pink-700'
-  const fillColor = store.apiAvailable ? 'fill-green-500' : config.isStatic ? 'fill-gray-500' : 'fill-pink-500'
-  const bgColor = store.apiAvailable ? 'bg-green-100' : config.isStatic ? 'bg-[#eeeeee]' : 'bg-pink-100'
+  const textColor = store.apiAvailable ? 'text-green-700' : injectedConfig.isStatic ? 'text-gray-700' : 'text-pink-700'
+  const fillColor = store.apiAvailable ? 'fill-green-500' : injectedConfig.isStatic ? 'fill-gray-500' : 'fill-pink-500'
+  const bgColor = store.apiAvailable ? 'bg-green-100' : injectedConfig.isStatic ? 'bg-[#eeeeee]' : 'bg-pink-100'
 
   return (
     <div css={style}>
@@ -17,7 +18,7 @@ export function Dashboard({ config }: { config: { isStatic?: boolean } }) {
           <svg viewBox="0 0 6 6" aria-hidden="true" className={`size-1.5 ${fillColor}`}>
             <circle r={3} cx={3} cy={3} />
           </svg>
-          { store.apiAvailable ? 'API Available' : `API Unavailable${config.isStatic ? ' (Static Example)' : ''}` }
+          { store.apiAvailable ? 'API Available' : `API Unavailable${injectedConfig.isStatic ? ' (Static Example)' : ''}` }
         </span>
       </p>
     </div>
@@ -26,6 +27,6 @@ export function Dashboard({ config }: { config: { isStatic?: boolean } }) {
 
 const style = css`
   .example-usage-of-tailwind-variable {
-    color: ${theme('colors.dark')};
+    color: ${theme('colors.primary')};
   }
 `

package/components/partials/element/accordion.tsx

@@ -80,7 +80,7 @@ export function Accordion({ children, className, expanded, onChange }: Accordion
   return (
     <div
       ref={el}
-      class={['accordion', className, state ? 'is-expanded' : ''].filter(o => o).join(' ')}
+      class={['accordion', className, state ? 'is-expanded' : ''].filter(o => o).join(' nitro-accordion')}
       onClick={onClick}
       css={style}
     >

package/components/partials/element/avatar.tsx

@@ -13,7 +13,7 @@ type AvatarProps = {
 }
 
 export function Avatar({ awsUrl, isRound, user, showPlaceholderImage, className }: AvatarProps) {
-  const classes = 'rounded-full w-[30px] h-[30px] object-cover transition-all duration-150 ease ' + (className || '')
+  const classes = 'rounded-full w-[30px] h-[30px] object-cover transition-all duration-150 ease nitro-avatar ' + (className || '')
 
   function getInitials(user: User) {
     const text = (user.firstName ? [user.firstName, user.lastName] : (user?.name||'').split(' ')).map((o) => o?.charAt(0))

package/components/partials/element/button.tsx

@@ -41,10 +41,10 @@ export function Button({
 
   // Button sizes
   const sizes = {
-    xs: 'px-2 py-1 text-xs rounded',
-    sm: 'px-2.5 py-1.5 text-sm rounded-md',
-    md: 'px-3 py-2 text-sm rounded-md',
-    lg: 'px-3.5 py-2.5 text-sm rounded-md',
+    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',
   }
 
   const contentLayout = `w-full gap-x-1.5 ${iconPosition == 'none' ? '' : 'inline-flex items-center justify-center'}`
@@ -57,7 +57,7 @@ export function Button({
   }
   
   return (
-    <button class={twMerge(`${base} ${colors[color]} ${sizes[size]} ${contentLayout} ${loading} ${className||''}`)} {...props}>
+    <button class={twMerge(`${base} ${colors[color]} ${sizes[size]} ${contentLayout} ${loading} nitro-button ${className||''}`)} {...props}>
       {IconLeft && getIcon(IconLeft)}
       {IconLeftEnd && getIcon(IconLeftEnd)}
       <span class={`${iconPosition == 'leftEnd' || iconPosition == 'rightEnd' ? 'flex-1' : ''}`}>{children}</span>

package/components/partials/element/calendar.tsx

@@ -83,7 +83,7 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
       range_middle: `${d.range_middle} rangemiddle`,
     },
     classNames: {
-      root: `${d.root} flex`,
+      root: `${d.root} flex nitro-calendar`,
       months: `${d.months} flex-nowrap`,
       month_caption: `${d.month_caption} text-2xs pl-2`,
       caption_label: `${d.caption_label} z-auto`,

package/components/partials/element/dropdown.tsx

@@ -91,6 +91,7 @@ export const Dropdown = forwardRef(function Dropdown({
         (isHoverable ? ' is-hoverable' : '') +
         (isActive ? ' is-active' : '') +
         (!animate ? ' no-animation' : '') +
+        ' nitro-dropdown' +
         (className ? ` ${className}` : '')
       }
       onClick={(e) => e.stopPropagation()} // required for dropdowns inside row links

package/components/partials/element/github-link.tsx

@@ -9,7 +9,7 @@ export function GithubLink({ filename }: { filename: string }) {
   
   return (
     // <a href={link}>Go to Github</a>
-    <a href={link} className="fixed top-0 right-0">
+    <a href={link} className="fixed top-0 right-0 nitro-github">
       <GithubIcon />
     </a>
   )

package/components/partials/element/initials.tsx

@@ -20,6 +20,7 @@ export function Initials({ icon, isBig, isMedium, isSmall, isRound, className }:
         (isSmall ? ' is-small' : '') + 
         (isRound ? ' is-round' : '') + 
         (icon ? '' : ' is-empty') + 
+        ' nitro-initials' +
         (className ? ' ' + className : '')
       }
       style={icon ? {backgroundColor: icon?.hex + '15', color: icon?.hex} : {}}

package/components/partials/element/message.tsx

@@ -82,7 +82,7 @@ export function Message() {
       {/* Global notification live region, render this permanently at the end of the document */}
       <div
         aria-live="assertive"
-        className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-20"
+        className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-20 nitro-message"
       >
         <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
           {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}

package/components/partials/element/modal.tsx

@@ -64,7 +64,7 @@ export function Modal({ show, setShow, children, maxWidth, minHeight, dismissabl
   return (
     <div 
       onClick={(e) => e.stopPropagation()} 
-      class={`fixed top-0 w-[100vw] h-[100vh] z-[700] ${_state.root}`}
+      class={`fixed top-0 w-[100vw] h-[100vh] z-[700] nitro-modal ${_state.root}`}
     >
       <div class={`!absolute inset-0 box-content bg-gray-500/70 transition-opacity ${_state.bg}`}></div>
       <div class={`relative h-[100vh] overflow-y-auto transition-[opacity,transform] ${_state.container}`}>

package/components/partials/element/sidebar.tsx

@@ -27,7 +27,7 @@ export function Sidebar({ Logo, menu, links }: SidebarProps) {
   return (
     <>
       {/* mobile sidebar opened */}
-      <Dialog open={sidebarOpen} onClose={setSidebarOpen} className="relative z-50 lg:hidden">
+      <Dialog open={sidebarOpen} onClose={setSidebarOpen} className="relative z-50 lg:hidden nitro-sidebar">
         <DialogBackdrop
           transition
           className="fixed inset-0 bg-gray-900/80 transition-opacity duration-300 ease-linear data-[closed]:opacity-0"

package/components/partials/element/tooltip.tsx

@@ -11,7 +11,7 @@ type TooltipProps = {
 
 export function Tooltip({ text, children, className, classNamePopup, isSmall }: TooltipProps) {
   return (
-    <div class={`${className} relative inline-block align-middle`} css={style}>
+    <div class={`${className} relative inline-block align-middle nitro-tooltip`} css={style}>
       {
         text
         ? <>

package/components/partials/element/topbar.tsx

@@ -8,7 +8,7 @@ type TopbarProps = {
 
 export function Topbar({ title, subtitle, submenu, btns, className }: TopbarProps) {
   return (
-    <div class={`flex justify-between items-end mb-6 ${className||''}`}>
+    <div class={`flex justify-between items-end mb-6 nitro-topbar ${className||''}`}>
       <div class="flex flex-col min-h-12">
         { subtitle && <div class="py-2 text-sm">{subtitle}</div>}
         <div class="flex items-center py-2">

package/components/partials/form/checkbox.tsx

@@ -32,7 +32,7 @@ export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox',
   const _size = sizeMap[size]
 
   return (
-    <div className={`mt-input-before mb-input-after flex gap-3 ${props.className || ''}`}>
+    <div className={`mt-2.5 mb-6 mt-input-before mb-input-after flex gap-3 nitro-checkbox ${props.className || ''}`}>
       <div className="flex shrink-0 mt-[2px]">
         {
           type !== 'toggle'

package/components/partials/form/drop.tsx

@@ -99,7 +99,7 @@ export function Drop({ awsUrl, className, id, name, onChange, multiple, state, .
   // }
 
   return (
-    <div class={`mt-input-before mb-input-after ${className || ''}`}>
+    <div class={`mt-2.5 mb-6 mt-input-before mb-input-after nitro-field nitro-drop ${className || ''}`}>
       <input 
         {...props}
         id={inputId}

package/components/partials/form/{input-currency.tsx → 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-dark' : ''}`}
+        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' : ''}`}
       >
         {settings.prefix || settings.suffix}
       </span>

package/components/partials/form/{input.tsx → field.tsx}

@@ -46,7 +46,7 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
   const iconPos = ip == 'left' || (type == 'color' && !ip) ? 'left' : 'right'
 
   if (!props.name) {
-    throw new Error('Input component requires a `name` prop')
+    throw new Error('Field component requires a `name` prop')
   }
   
   // Input type
@@ -58,7 +58,7 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
   if (props.value) value = props.value as string
   else if (typeof state == 'object') value = util.deepFind(state, props.name) ?? ''
 
-  // Errors: find any that match this input path
+  // Errors: find any that match this field path
   for (const item of (state?.errors || [])) {
     if (util.isRegex(props.name) && (item.title || '').match(props.name)) error = item
     else if (item.title == props.name) error = item
@@ -126,22 +126,26 @@ 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-input-before mb-input-after grid grid-cols-1 ${className || ''}`}>
+    <div css={style} className={`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">{error.detail}</div>}
+      {error && <div class="mt-1.5 text-xs text-danger nitro-error">{error.detail}</div>}
     </div>
   )
 }
 
 function getInputClasses({ error, Icon, iconPos, type }: { error: Error, Icon?: React.ReactNode, iconPos: string, type?: string }) {
-  const paddingLeft = type == 'color' ? 'sm:pl-9 pl-9' : 'sm:pl-8 pl-8'
-  const paddingRight = type == 'color' ? 'sm:pr-9 pr-9' : 'sm:pr-8 pr-8'
+  const pl = 'pl-3 pl-input-x'
+  const pr = 'pr-3 pr-input-x'
+  const py = 'py-2 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 (
-    'col-start-1 row-start-1 block w-full rounded-md bg-white py-2 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 leading-[1.65] outline outline-1 -outline-offset-1 ` +
     'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' +
-    (iconPos == 'right' && Icon ? `${paddingRight} pl-3 ` : (Icon ? `${paddingLeft} pr-3 ` : 'px-3 ')) +
+    (iconPos == 'right' && Icon ? `${pl} ${prWithIcon} ` : (Icon ? `${plWithIcon} ${pr} ` : `${pl} ${pr} `)) +
     (error ? 'text-red-900 outline-danger focus:outline-danger ' : 'text-input outline-input-border focus:outline-primary ') + 
-    (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ')
+    (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ') + 
+    'nitro-input'
   )
 }
 

package/components/partials/form/form-error.tsx

@@ -18,7 +18,7 @@ export function FormError({ state, fields, className }: FormError) {
   return (
     <>
       {error ? (
-        <div class={`text-danger mt-1 text-sm ${className||''}`}>
+        <div class={`text-danger mt-1 text-sm nitro-error ${className||''}`}>
           {error.detail}
         </div>
       ) : null}

package/components/partials/form/select.tsx

@@ -58,7 +58,7 @@ export function Select({ inputId, minMenuWidth, name, prefix='', onChange, optio
   }
 
   return (
-    <div css={style} class="mt-input-before mb-input-after">
+    <div css={style} class="mt-2.5 mb-6 mt-input-before mb-input-after nitro-select">
       <ReactSelect
         /**
          * react-select prop quick reference (https://react-select.com/props#api):
@@ -241,7 +241,7 @@ const selectStyles = {
     focus: 'outline-2 -outline-offset-2 outline-primary',
     error: 'outline-danger',
   },
-  valueContainer: 'py-2 px-3 gap-1',
+  valueContainer: 'py-2 px-3 py-input-y px-input-x gap-1',
   // Input container objects
   input: {
     base: 'text-input',
@@ -249,7 +249,7 @@ const selectStyles = {
   },
   multiValue: 'bg-primary text-white rounded items-center pl-2 pr-1.5 gap-1.5',
   multiValueLabel: '',
-  multiValueRemove: 'border border-black/10 bg-clip-content bg-white rounded-md text-dark hover:bg-red-50',
+  multiValueRemove: 'border border-black/10 bg-clip-content bg-white rounded-md text-foreground hover:bg-red-50',
   placeholder: 'text-input-placeholder',
   singleValue: {
     base: 'text-input',

package/components/partials/form/toggle.tsx

@@ -11,7 +11,7 @@ export function Toggle({ name, id, subtext, text, type='checkbox', ...props }: T
   id = id || name
   // https://tailwindui.com/components/application-ui/forms/checkboxes#component-744ed4fa65ba36b925701eb4da5c6e31
   return (
-    <div className={`mt-input-before mb-input-after flex gap-3 ${props.className || ''}`}>
+    <div className={`mt-2.5 mb-6 mt-input-before mb-input-after flex gap-3 nitro-toggle ${props.className || ''}`}>
       <div className="flex h-6 shrink-0 items-center">
         <div className="group grid size-4 grid-cols-1">
           <input

package/components/partials/styleguide.tsx

@@ -1,9 +1,8 @@
 import { Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, Modal, Calendar, injectedConfig } from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
 import { CheckIcon } from '@heroicons/react/20/solid'
-import { Config } from 'nitro-web/types'
 
-export function Styleguide({ config }: { config: Config }) {
+export function Styleguide() {
   const [customerSearch, setCustomerSearch] = useState('')
   const [showModal1, setShowModal1] = useState(false)
   const [state, setState] = useState({
@@ -167,7 +166,7 @@ export function Styleguide({ config }: { config: Config }) {
             name="country" 
             type="country" 
             state={state} 
-            options={useMemo(() => getCountryOptions(config.countries), [])} 
+            options={useMemo(() => getCountryOptions(injectedConfig.countries), [])} 
             onChange={onInputChange}
           />
         </div>
@@ -204,7 +203,7 @@ export function Styleguide({ config }: { config: Config }) {
           <Select 
             name="currency"
             state={state} 
-            options={useMemo(() => getCurrencyOptions(config.currencies), [])} 
+            options={useMemo(() => getCurrencyOptions(injectedConfig.currencies), [])} 
             onChange={onInputChange}
           />
         </div>
@@ -249,7 +248,8 @@ export function Styleguide({ config }: { config: Config }) {
         </div>
         <div>
           <label for="amount">Amount ({state.amount})</label>
-          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} config={config} />
+          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} 
+            config={injectedConfig} />
         </div>
       </div>
 
@@ -273,7 +273,7 @@ export function Styleguide({ config }: { config: Config }) {
       <div class="grid grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="avatar">Avatar</label>
-          <Drop class="is-small" name="avatar" state={state} onChange={onInputChange} awsUrl={config.awsUrl} />
+          <Drop class="is-small" name="avatar" state={state} onChange={onInputChange} awsUrl={injectedConfig.awsUrl} />
         </div>
         <div>
           <label for="calendar">Calendar</label>

package/components/settings/settings-business.tsx

@@ -4,9 +4,9 @@
 ////// look at the select type error below
 import * as util from 'nitro-web/util'
 import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
-import { Button, Field, Select, Topbar, Tabbar } from 'nitro-web'
+import { Button, Field, Select, Topbar, Tabbar, injectedConfig } from 'nitro-web'
 
-export function SettingsBusiness({ config }) {
+export function SettingsBusiness() {
   const isLoading = useState(false)
   const [{ user }, setStore] = sharedStore.useTracked()
   const [state, setState] = useState(() => {
@@ -64,7 +64,7 @@ export function SettingsBusiness({ config }) {
                 name="business.country" 
                 type="country" 
                 state={state} 
-                options={useMemo(() => util.getCountryOptions(config.countries), [])} 
+                options={useMemo(() => util.getCountryOptions(injectedConfig.countries), [])} 
                 onChange={onChange.bind(setState)}
               />
             </div>
@@ -74,7 +74,7 @@ export function SettingsBusiness({ config }) {
                 name="business.currency" 
                 type="country" 
                 state={state} 
-                options={useMemo(() => util.getCurrencyOptions(config.currencies), [])}
+                options={useMemo(() => util.getCurrencyOptions(injectedConfig.currencies), [])}
                 onChange={onChange.bind(setState)}
               />
             </div>

package/components/settings/settings-team--member.tsx

@@ -1,16 +1,14 @@
 // @ts-nocheck
 // todo: finish tailwind conversion
-import { Button, FormError, Field, Modal, Select } from 'nitro-web'
+import { Button, FormError, Field, Modal, Select, injectedConfig } from 'nitro-web'
 import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
-import { Config } from 'nitro-web/types'
 
 type SettingsTeamMemberProps = {
   showModal: boolean
   setShowModal: (showModal: boolean) => void
-  config?: Config
 }
 
-export function SettingsTeamMember ({ showModal, setShowModal, config }: SettingsTeamMemberProps) {
+export function SettingsTeamMember ({ showModal, setShowModal }: SettingsTeamMemberProps) {
   // @param {object} showModal - user
   const [{ user }] = sharedStore.useTracked()
   const [isLoading] = useState(false)
@@ -34,7 +32,7 @@ export function SettingsTeamMember ({ showModal, setShowModal, config }: Setting
     <Modal show={showModal} setShow={setShowModal} class="p-modal">
 
       <h2 class="h2"><em>Add</em> Team Member</h2>
-      <p class="subtitle">Invite a new team member to collaborate with you on {config?.name || 'Nitro'}.</p>
+      <p class="subtitle">Invite a new team member to collaborate with you on {injectedConfig?.name || 'Nitro'}.</p>
       
       <form class="form" onSubmit={onSubmit}>
         <div class="cols cols-6 cols-gap-2-5">
@@ -89,7 +87,7 @@ export function SettingsTeamMember ({ showModal, setShowModal, config }: Setting
             <Field 
               name="message" 
               type="textarea" 
-              placeholder={`${user.firstName} is inviting you to collaborate on ${config?.name || 'Nitro'}.`} 
+              placeholder={`${user.firstName} is inviting you to collaborate on ${injectedConfig?.name || 'Nitro'}.`} 
               state={state} onChange={onChange.bind(setState)} 
             />
           </div>

package/components/settings/settings-team.tsx

@@ -2,9 +2,9 @@
 // todo: finish tailwind conversion
 import * as util from 'nitro-web/util'
 import SvgPlus from 'nitro-web/client/imgs/icons/plus.svg'
-import { Button, Table, Avatar, Tabbar, Topbar, SettingsTeamMember } from 'nitro-web'
+import { Button, Table, Avatar, Tabbar, Topbar, SettingsTeamMember, injectedConfig } from 'nitro-web'
 
-export function SettingsTeam({ config }) {
+export function SettingsTeam() {
   const isLoading = useState(false)
   const [showModal, setShowModal] = useState()
   const [{ user }] = sharedStore.useTracked()
@@ -48,7 +48,7 @@ export function SettingsTeam({ config }) {
             key: user._id,
             name: (
               <>
-                <Avatar awsUrl={config.awsUrl} user={user} isRound={true} class="mt--1 mb--1" />
+                <Avatar awsUrl={injectedConfig.awsUrl} user={user} isRound={true} class="mt--1 mb--1" />
                 <b>{util.ucFirst(user.name)}</b>
                 {user.status != 'invited' && <span class="text-grey">(Invitation pending)</span>}
               </>

package/package.json

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