nitro-web 0.0.32 → 0.0.33

package/client/index.ts

@@ -48,7 +48,6 @@ export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/f
 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'
 
 // Component Other
 export { IsFirstRender } from '../components/partials/is-first-render'

package/components/partials/element/calendar.tsx

@@ -87,8 +87,8 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
       months: `${d.months} flex-nowrap`,
       month_caption: `${d.month_caption} text-2xs pl-2`,
       caption_label: `${d.caption_label} z-auto`,
-      button_previous: `${d.button_previous} size-8`,// [&:hover>svg]:fill-primary-dark`,
-      button_next: `${d.button_next} size-8`,// [&:hover>svg]:fill-primary-dark`,
+      button_previous: `${d.button_previous} size-8`,// [&:hover>svg]:fill-input-border-focus`,
+      button_next: `${d.button_next} size-8`,// [&:hover>svg]:fill-input-border-focus`,
       chevron: `${d.chevron} fill-black size-[18px]`,
 
       // Days
@@ -98,12 +98,12 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
 
       // States
       focused: `${d.focused} [&>button]:bg-gray-200 [&>button]:border-gray-200`,
-      range_start: `${d.range_start} [&>button]:!bg-primary-dark [&>button]:!border-primary-dark`,
-      range_end: `${d.range_end} [&>button]:!bg-primary-dark [&>button]:!border-primary-dark`,
+      range_start: `${d.range_start} [&>button]:!bg-input-border-focus [&>button]:!border-input-border-focus`,
+      range_end: `${d.range_end} [&>button]:!bg-input-border-focus [&>button]:!border-input-border-focus`,
       selected: `${d.selected} font-normal `
         + '[&:not(.rangemiddle)>button]:!text-white '
-        + '[&:not(.rangemiddle)>button]:!bg-primary-dark '
-        + '[&:not(.rangemiddle)>button]:!border-primary-dark ',
+        + '[&:not(.rangemiddle)>button]:!bg-input-border-focus '
+        + '[&:not(.rangemiddle)>button]:!border-input-border-focus ',
     },
   }
 

package/components/partials/element/sidebar.tsx

@@ -10,6 +10,7 @@ import {
   ArrowLeftCircleIcon,
   PaintBrushIcon,
 } from '@heroicons/react/24/outline'
+
 const sidebarWidth = 'lg:w-80'
 
 export type SidebarProps = {

package/components/partials/element/topbar.tsx

@@ -1,27 +1,15 @@
 type TopbarProps = {
   title: React.ReactNode
   subtitle?: React.ReactNode
-  submenu?: React.ReactNode
-  btns?: React.ReactNode
   className?: string
 }
 
-export function Topbar({ title, subtitle, submenu, btns, className }: TopbarProps) {
+export function Topbar({ title, subtitle, className }: TopbarProps) {
   return (
-    <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">
-          <h1 class="h1 mb-0">{title}</h1>
-        </div>
-        { 
-          submenu && 
-          <div class="pt-2 text-large weight-500">{submenu}</div>
-        }
-      </div>
-      <div class="">
-        {btns}
-      </div>
+    <div class={`flex flex-col min-h-12 gap-0.5 mb-6 nitro-topbar ${className||''}`}>
+      <div class="text-2xl font-bold">{title}</div>
+      { subtitle && <div class="text-sm text-muted-foreground">{subtitle}</div>}
+      {/* { submenu && <div class="pt-2 text-large weight-500">{submenu}</div> } */}
     </div>
   )
 }

package/components/partials/form/checkbox.tsx

@@ -42,7 +42,13 @@ export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox',
                 id={id}
                 name={name}
                 type={type}
-                className={`${type === 'radio' ? 'rounded-full' : 'rounded'} col-start-1 row-start-1 appearance-none border border-gray-300 bg-white checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto`}
+                className={
+                  `${type === 'radio' ? 'rounded-full' : 'rounded'} col-start-1 row-start-1 appearance-none border border-gray-300 bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto ` + 
+                  // Default
+                  'checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-blue-600 ' +
+                  // Variable-selected color defined?
+                  'checked:!border-variable-selected checked:!bg-variable-selected indeterminate:!border-variable-selected indeterminate:!bg-variable-selected focus-visible:!outline-variable-selected'
+                }
               />
               <svg
                 fill="none"
@@ -89,7 +95,15 @@ export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox',
               />
               <label 
                 for={id}
-                className={`col-start-1 row-start-1 relative ${_size.toggleWidth} ${_size.toggleHeight} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 peer-focus-visible:ring-blue-300 dark:peer-focus-visible:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${_size.toggleAfterSize} after:transition-all dark:border-gray-600 peer-checked:bg-blue-600`}
+                className={
+                  `col-start-1 row-start-1 relative ${_size.toggleWidth} ${_size.toggleHeight} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${_size.toggleAfterSize} after:transition-all ` +
+                  // Default
+                  'peer-focus-visible:ring-blue-300 peer-checked:bg-blue-600 ' +
+                  // Variable-selected color defined?
+                  'peer-focus-visible:!ring-variable-selected peer-checked:!bg-variable-selected '
+                  // Dark mode not used yet...
+                  // 'dark:peer-focus-visible:ring-blue-800 dark:bg-gray-700 dark:border-gray-600 '
+                }
               />
             </div>
         }

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

@@ -179,7 +179,7 @@ function TimePicker({ date, onChange }: TimePickerProps) {
                   key={item}
                   className={
                     'size-[33px] rounded-full flex justify-center items-center group-hover:bg-gray-100 '
-                    + (item === currentValue ? '!bg-primary-dark text-white' : '')
+                    + (item === currentValue ? '!bg-input-border-focus text-white' : '')
                   }
                   onClick={() => handleTimeChange(type, item)}
                 >

package/components/partials/form/field.tsx

@@ -143,7 +143,9 @@ function getInputClasses({ error, Icon, iconPos, type }: { error: Error, Icon?:
     `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 ? `${pl} ${prWithIcon} ` : (Icon ? `${plWithIcon} ${pr} ` : `${pl} ${pr} `)) +
-    (error ? 'text-red-900 outline-danger focus:outline-danger ' : 'text-input outline-input-border focus:outline-primary ') + 
+    (error 
+      ? 'text-red-900 outline-danger focus:outline-danger ' 
+      : 'text-input outline-input-border focus:outline-input-border-focus ') + 
     (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ') + 
     'nitro-input'
   )

package/components/partials/form/select.tsx

@@ -238,7 +238,7 @@ const selectStyles = {
   // 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',
-    focus: 'outline-2 -outline-offset-2 outline-primary',
+    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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "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/components/partials/form/toggle.tsx

@@ -1,54 +0,0 @@
-type ToggleProps = {
-  className?: string
-  id?: string
-  name: string
-  subtext?: string
-  text?: string
-  type?: 'checkbox'
-}
-
-export function Toggle({ name, id, subtext, text, type='checkbox', ...props }: ToggleProps) {
-  id = id || name
-  // https://tailwindui.com/components/application-ui/forms/checkboxes#component-744ed4fa65ba36b925701eb4da5c6e31
-  return (
-    <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
-            {...props}
-            id={id}
-            name={name}
-            type={type}
-            className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
-          />
-          <svg
-            fill="none"
-            viewBox="0 0 14 14"
-            className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
-          >
-            <path
-              d="M3 8L6 11L11 3.5"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="opacity-0 group-has-[:checked]:opacity-100"
-            />
-            <path
-              d="M3 7H11"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="opacity-0 group-has-[:indeterminate]:opacity-100"
-            />
-          </svg>
-        </div>
-      </div>
-      {text && <div className="text-sm/6">
-        <label for={id}>
-          <span className="font-medium text-gray-900">{text}</span>
-          <span className="ml-2 text-gray-500">{subtext}</span>
-        </label>
-      </div>}
-    </div>
-  )
-}