nitro-web 0.0.192 → 0.0.193

package/components/partials/element/initials.tsx

@@ -1,38 +1,68 @@
 import { twMerge } from 'nitro-web/util'
 
+type NamedSize = 'big' | 'medium' | 'normal' | 'small'
+type Size = NamedSize | number
+
 type InitialsProps = {
-  icon?: { initials: string, hex?: string }
-  isBig?: boolean
-  isMedium?: boolean
-  isSmall?: boolean
+  initials: string,
+  color?: string, // e.g. '#067306' or 'text-primary'
+  colorBg?: string, // e.g. '#06730618' or 'bg-primary' (if not passed, color will be used)
+  opacityBg?: number, // e.g. 0.18
+  colors?: string[], // e.g. ['#067306']
+  size?: Size, // named ('big', 'medium', 'small') or pixel number (e.g. 20)
   isRound?: boolean
   className?: string
 }
 
-export function Initials({ icon, isBig, isMedium, isSmall, isRound, className }: InitialsProps) {
-  const color = icon?.hex || icon?.initials && getColorByLetter(icon?.initials) || '#000000'
+// Returns tailwind classes for the nearest named size bucket
+function sizeClasses(size: Size): string {
+  const px = typeof size === 'number' ? size : { big: 30, medium: 26, normal: 24, small: 21 }[size]
+  if (px <= 21) return 'size-[21px] text-[10px]'
+  else if (px <= 24) return 'size-[24px] text-[11px]' // default
+  else if (px <= 26) return 'size-[26px] text-[12px]'
+  else return 'size-[30px] text-[13px]'
+}
+
+export function Initials({ initials, color, colorBg, colors, opacityBg, size, isRound, className }: InitialsProps) {
+  // Check if className colors were passed
+  const colorFgClass = color?.startsWith('text-') ? color : undefined
+  const colorBgClass = colorBg?.startsWith('bg-') ? colorBg : undefined
+  if ((colorFgClass || colorBgClass) && (!color || !colorBg)) {
+    throw new Error('When using className colors, `color` and `colorBg` params are required')
+  }
+  // Check if hex colors were passed, otherwise use the color by letter
+  const colorFgHex = colorFgClass ? undefined : (color || getColorByLetter(initials, colors))
+  const colorBgHex = colorBgClass ? undefined : (colorBg || colorFgHex)
+
+  const sizeStyle = typeof size === 'number' ? { width: `${size}px`, height: `${size}px` } : {}
+
   return (
-    <span 
+    <span
+      style={{ color: colorFgHex, ...sizeStyle }}
       className={twMerge(
-        'nitro-initials flex items-center justify-center rounded-[5px] font-bold text-[11px] size-[24px]',
-        isBig && 'size-[40px] text-sm',
-        isMedium && 'size-[30px] text-xs',
-        isSmall && 'size-[22px]',
+        (
+          'nitro-initials flex-shrink-0 inline-flex items-center justify-center font-bold text-[11px] size-[24px] relative rounded-md ' +
+          `overflow-hidden ring-1 ring-inset ring-[#00000012] ${colorFgClass}`
+        ),
+        sizeClasses(size || 'normal'),
         isRound && 'rounded-full',
-        !icon && 'w-0',
+        !initials && 'w-0',
         className
       )}
-      style={icon ? {backgroundColor: color + '18', color: color} : {}}
     >
-      {icon?.initials}
+      <span 
+        style={colorBgHex ? { backgroundColor: colorBgHex } : {}} 
+        className={`absolute inset-0  ${opacityBg || 'opacity-[10%]'} ${colorBgClass}`}
+      />
+      {initials}
     </span>
   )
 }
 
-export function getColorByLetter(letter: string) {
-  const colors = ['#067306', '#AA33FF', '#FF54AF', '#F44336', '#c03c3c', '#5451e0', '#d88c1b']
+export function getColorByLetter(letter: string, colors?: string[]) {
+  const colors2 = colors || ['#067306', '#AA33FF', '#FF54AF', '#F44336', '#c03c3c', '#5451e0', '#d88c1b']
   const charIndex = letter.toLowerCase().charCodeAt(0) - 97
   const charIndexLimited = (charIndex < 0 || charIndex > 25) ? 25 : charIndex
-  const index = Math.round(charIndexLimited / 25 * (colors.length-1))
-  return colors[index]
+  const index = Math.round(charIndexLimited / 25 * (colors2.length-1))
+  return colors2[index]
 }

package/components/partials/form/select.tsx

@@ -26,6 +26,8 @@ type GetSelectClassName = {
 export type SelectOption = { 
   value: unknown, 
   label: string | React.ReactNode, 
+  labelSearch?: string,
+  noTruncate?: boolean,
   fixed?: boolean,
   IconLeft?: React.ReactNode,
   flag?: string | React.ReactNode,
@@ -131,7 +133,8 @@ function SelectBase({
         id={containerId}
         filterOption={(option, searchText) => {
           if ((option.data as {fixed?: boolean}).fixed) return true
-          return filterFn(option, searchText)
+          const labelSearch = (option.data as {labelSearch?: string}).labelSearch
+          return filterFn(labelSearch ? { ...option, label: labelSearch } : option, searchText)
         }}
         menuPlacement="auto"
         minMenuHeight={250}
@@ -206,7 +209,7 @@ function ValueContainer({ children, ...props}: ValueContainerProps) {
 }
 
 function SingleValue({ children, ...props }: SingleValueProps) {
-  const selectedOption = props.getValue()[0] as { labelControl?: string, flag?: string | React.ReactNode, IconLeft?: React.ReactNode }
+  const selectedOption = props.getValue()[0] as { labelControl?: string } & SelectOption
   // @ts-expect-error 
   const flagClassName = props.getClassNames('flag')
 
@@ -218,7 +221,10 @@ function SingleValue({ children, ...props }: SingleValueProps) {
           : <Fragment>
               {selectedOption?.flag && <span className={flagClassName}>{selectedOption.flag}</span>}
               {selectedOption?.IconLeft}
-              <span class="overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+              {selectedOption?.noTruncate 
+                ? children
+                : <span class="overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+              }
             </Fragment>
       }
     </components.SingleValue>
@@ -226,14 +232,14 @@ function SingleValue({ children, ...props }: SingleValueProps) {
 }
 
 function Option(props: OptionProps) {
-  const data = props.data as { className?: string, flag?: string | React.ReactNode, IconLeft?: React.ReactNode }
+  const data = props.data as { className?: string } & SelectOption
   // const _nitro = (props.selectProps as { _nitro?: { mode?: string } })?._nitro
   // @ts-expect-error
   const flagClassName = props.getClassNames('flag')
   return (
     <components.Option className={data.className} {...props}>
       <span class="flex-auto min-w-0">{data.flag && <span className={flagClassName}>{data.flag}</span>}{data.IconLeft}{props.label}</span>
-      {props.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-0.5" />}
+      {props.isSelected && <CheckCircleIcon className="flex-shrink-0 size-[22px] text-primary -my-1 -mx-0.5" />}
     </components.Option>
   )
 }

package/components/partials/styleguide.tsx

@@ -9,6 +9,23 @@ import { Check, EllipsisVerticalIcon, FileEditIcon } from 'lucide-react'
 import React from 'react'
 
 const perPage = 10
+const allGroups = [
+  'Links', 
+  'Dropdowns', 
+  'Filters', 
+  'Button Colors & Sizes', 
+  'Button Icons', 
+  'Loading Elements', 
+  'Varients', 
+  'Selects', 
+  'Inputs', 
+  'Date Inputs', 
+  'File Inputs & Calendar & Time', 
+  'Tables', 
+  'Modals & Notifications', 
+  'Custom Components',
+] as const
+
 const statusColors = function(status: string) {
   return {
     pending: 'bg-yellow-400',
@@ -22,6 +39,7 @@ type StyleguideProps = {
   elements?: { Button?: typeof ButtonNitro }
   children?: React.ReactNode
   currencies?: { [key: string]: { name: string, symbol: string, digits: number } }
+  groups?: Array<typeof allGroups[number]>
 }
 
 type QuoteExample = {
@@ -33,29 +51,14 @@ type QuoteExample = {
   status: string
 }
 
-export function Styleguide({ className, elements, children, currencies }: StyleguideProps) {
+export function Styleguide({ className, elements, children, currencies, groups }: StyleguideProps) {
   const Button = elements?.Button || ButtonNitro
   const [, setStore] = useTracked()
   const [customerSearch, setCustomerSearch] = useState('')
   const [showModal1, setShowModal1] = useState(false)
 
   // Tip: handy when developing or updating components, you can hide/show the groups you want to see
-  const groups = [
-    'Links',
-    'Dropdowns',
-    'Filters',
-    'Button Colors & Sizes',
-    'Button Icons',
-    'Loading Elements',
-    'Varients',
-    'Selects',
-    'Inputs',
-    'Date Inputs',
-    'File Inputs & Calendar & Time',
-    'Tables',
-    'Modals & Notifications',
-    'Custom Components',
-  ]
+  const visibleGroups = groups || allGroups
   const [state, setState] = useState(() => getState())
 
   function getState(useOldValues?: boolean) {
@@ -252,7 +255,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </p>
       </div>
 
-      {groups.includes('Links') && (
+      {visibleGroups.includes('Links') && (
         <div>
           <h2 class="h3">Links</h2>
           <div class="mb-6">
@@ -263,7 +266,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
   
-      {groups.includes('Dropdowns') && (
+      {visibleGroups.includes('Dropdowns') && (
         <div>
           <h2 class="h3">Dropdowns</h2>
           <div class="flex flex-wrap gap-x-6 gap-y-4 mb-6">
@@ -297,7 +300,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('Filters') && (
+      {visibleGroups.includes('Filters') && (
         <div>
           <h2 class="h3">Filters</h2>
           <div class="flex flex-wrap gap-x-6 gap-y-4 mb-6">
@@ -327,7 +330,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('Button Colors & Sizes') && (
+      {visibleGroups.includes('Button Colors & Sizes') && (
         <div>
           <h2 class="h3">Button Colors & Sizes</h2>
           <div class="flex flex-wrap gap-x-6 gap-y-4 mb-6">
@@ -351,7 +354,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('Button Icons') && (
+      {visibleGroups.includes('Button Icons') && (
         <div>
           <h2 class="h3">Button Icons</h2>
           <div class="flex flex-wrap gap-x-6 gap-y-4 mb-6">
@@ -371,7 +374,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('Loading Elements') && (
+      {visibleGroups.includes('Loading Elements') && (
         <div>
           <h2 class="h3">Loading Elements</h2>
           <div class="flex flex-wrap gap-x-6 gap-y-4 items-center mb-6">
@@ -383,7 +386,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('Varients') && (
+      {visibleGroups.includes('Varients') && (
         <div>
           <h2 class="h3">Varients</h2>
           <div class="grid grid-cols-3 gap-x-6">
@@ -409,7 +412,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('Selects') && (
+      {visibleGroups.includes('Selects') && (
         <div>
           <h2 class="h3">Selects</h2>
           <div class="grid grid-cols-3 lg:grid-cols-3 gap-x-6">
@@ -484,17 +487,17 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
                   {
                     value: '1', 
                     label: 'Wayne Enterprises',
-                    IconLeft: <Initials icon={{ initials: 'WE' }} className="inline-flex my-[-3px] mr-2 flex-shrink-0" />,
+                    IconLeft: <Initials initials="WE" className="inline-flex my-[-3px] mr-2 flex-shrink-0" />,
                   },
                   {
                     value: '2', 
                     label: 'Iceberg Lounge Limited',
-                    IconLeft: <Initials icon={{ initials: 'IL' }} className="inline-flex my-[-3px] mr-2 flex-shrink-0" />,
+                    IconLeft: <Initials initials="IL" className="inline-flex my-[-3px] mr-2 flex-shrink-0" />,
                   },
                   {
                     value: '3', 
                     label: 'Ace Chemicals Company',
-                    IconLeft: <Initials icon={{ initials: 'AC' }} className="inline-flex my-[-3px] mr-2 flex-shrink-0" />,
+                    IconLeft: <Initials initials="AC" className="inline-flex my-[-3px] mr-2 flex-shrink-0" />,
                   },
                 ], [customerSearch])}
               />
@@ -526,7 +529,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('Inputs') && (
+      {visibleGroups.includes('Inputs') && (
         <div>
           <h2 class="h3">Inputs</h2>
           <div class="grid grid-cols-3 gap-x-6">
@@ -587,7 +590,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('Date Inputs') && (
+      {visibleGroups.includes('Date Inputs') && (
         <div>
           <h2 class="h3">Date Inputs</h2>
           <div class="grid grid-cols-1 gap-x-6 sm:grid-cols-3">
@@ -638,7 +641,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('File Inputs & Calendar & Time') && (
+      {visibleGroups.includes('File Inputs & Calendar & Time') && (
         <div>
           <h2 class="h3">File Inputs & Calendar & Time</h2>
           <div class="grid grid-cols-3 gap-x-6">
@@ -675,7 +678,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('Tables') && (
+      {visibleGroups.includes('Tables') && (
         <div>
           <div class="flex justify-between items-start">
             <h2 class="h3">Tables</h2>
@@ -738,7 +741,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </div>
       )}
 
-      {groups.includes('Modals & Notifications') && (
+      {visibleGroups.includes('Modals & Notifications') && (
         <React.Fragment>
           <div>
             <h2 class="h3">Modals & Notifications</h2>
@@ -782,7 +785,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         </React.Fragment>
       )}
 
-      {groups.includes('Custom Components') && (
+      {visibleGroups.includes('Custom Components') && (
         <React.Fragment>
           {children}
         </React.Fragment>

package/package.json

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