nitro-web 0.0.31 → 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

@@ -27,6 +27,6 @@ export function Dashboard() {
 
 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/package.json

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