@furystack/shades-common-components 10.0.27 → 10.0.29

package/src/components/data-grid/data-grid-row.tsx

@@ -1,6 +1,5 @@
 import type { ChildrenList } from '@furystack/shades'
 import { attachStyles, createComponent, Shade } from '@furystack/shades'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import type { CollectionService } from '../../services/collection-service.js'
 import type { DataRowCells } from './data-grid.js'
 
@@ -23,19 +22,27 @@ export const DataGridRow: <T, Column extends string>(
 ) => JSX.Element<any> = Shade({
   shadowDomName: 'shades-data-grid-row',
 
-  render: ({ props, element, useObservable, injector }) => {
+  render: ({ props, element, useObservable }) => {
     const { entry, rowComponents, columns, service } = props
 
-    const { theme } = injector.getInstance(ThemeProviderService)
-
     const attachSelectedStyles = (selection: any[]) => {
       if (selection.includes(entry)) {
         element.classList.add('selected')
-        attachStyles(element, { style: props.selectedRowStyle || { backgroundColor: theme.background.default } })
+        attachStyles(element, {
+          style: props.selectedRowStyle || {
+            backgroundColor: 'rgba(128, 128, 128, 0.15)',
+            borderLeft: `3px solid var(--shades-theme-palette-primary-main)`,
+          },
+        })
         element.setAttribute('aria-selected', 'true')
       } else {
         element.classList.remove('selected')
-        attachStyles(element, { style: props.unselectedRowStyle || { backgroundColor: 'transparent' } })
+        attachStyles(element, {
+          style: props.unselectedRowStyle || {
+            backgroundColor: 'transparent',
+            borderLeft: '3px solid transparent',
+          },
+        })
         element.setAttribute('aria-selected', 'false')
       }
     }
@@ -44,9 +51,10 @@ export const DataGridRow: <T, Column extends string>(
       if (newEntry === props.entry) {
         attachStyles(element, {
           style: props.focusedRowStyle || {
-            boxShadow: `0 0 50px 1px rgba(255,255,255,0.2) inset, 0 0 35px 1px var(--shades-theme-palette-primary-main) inset, 2px 0px 5px 0px rgba(0,0,0,0.3)`,
-            transition: 'box-shadow 0.1s ease-in-out',
-            fontWeight: 'bolder',
+            boxShadow: `0 0 0 2px var(--shades-theme-palette-primary-main) inset, 0 2px 8px 0px rgba(0,0,0,0.15)`,
+            transition: 'box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out',
+            fontWeight: '500',
+            transform: 'scale(1.002)',
           },
         })
 
@@ -75,6 +83,7 @@ export const DataGridRow: <T, Column extends string>(
           style: props.unfocusedRowStyle || {
             boxShadow: 'none',
             fontWeight: 'inherit',
+            transform: 'scale(1)',
           },
         })
       }
@@ -93,6 +102,8 @@ export const DataGridRow: <T, Column extends string>(
     element.style.display = 'table-row'
     element.style.cursor = 'default'
     element.style.userSelect = 'none'
+    element.style.transition = 'background-color 0.15s ease'
+
     if (selection?.includes(entry)) {
       element.setAttribute('aria-selected', 'true')
       element.classList.add('selected')
@@ -103,11 +114,29 @@ export const DataGridRow: <T, Column extends string>(
     }
     element.setAttribute('aria-selected', selection?.includes(entry).toString() || 'false')
 
+    // Add hover effect
+    element.onmouseenter = () => {
+      if (!selection?.includes(entry)) {
+        element.style.backgroundColor = 'rgba(128, 128, 128, 0.08)'
+      }
+    }
+    element.onmouseleave = () => {
+      if (!selection?.includes(entry)) {
+        element.style.backgroundColor = 'transparent'
+      }
+    }
+
     return (
       <>
         {columns.map((column) => (
           <td
-            style={{ padding: '0.5em' }}
+            style={{
+              padding: '0.75em 1.2em',
+              borderBottom: '1px solid rgba(128, 128, 128, 0.1)',
+              verticalAlign: 'middle',
+              fontSize: '0.875rem',
+              lineHeight: '1.5',
+            }}
             onclick={(ev) => props.onRowClick?.(entry, ev)}
             ondblclick={(ev) => props.onRowDoubleClick?.(entry, ev)}
           >

package/src/components/data-grid/data-grid.tsx

@@ -1,14 +1,14 @@
+import type { FindOptions } from '@furystack/core'
 import type { ChildrenList } from '@furystack/shades'
 import { createComponent, Shade } from '@furystack/shades'
+import type { ObservableValue } from '@furystack/utils'
+import { ClickAwayService } from '../../services/click-away-service.js'
 import type { CollectionService } from '../../services/collection-service.js'
+import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import type { GridProps } from '../grid.js'
-import { DataGridHeader } from './header.js'
 import { DataGridBody } from './body.js'
 import { DataGridFooter } from './footer.js'
-import { ThemeProviderService } from '../../services/theme-provider-service.js'
-import { ClickAwayService } from '../../services/click-away-service.js'
-import type { FindOptions } from '@furystack/core'
-import type { ObservableValue } from '@furystack/utils'
+import { DataGridHeader } from './header.js'
 
 export type DataHeaderCells<Column extends string> = {
   [TKey in Column | 'default']?: (name: Column) => JSX.Element
@@ -101,14 +101,21 @@ export const DataGrid: <T, Column extends string>(
       backdropFilter: 'blur(12px) saturate(180%)',
       background: 'rgba(128,128,128,0.3)',
       color: theme.text.secondary,
-      height: '38px',
+      height: '48px',
+      padding: '0 1.2em',
       alignItems: 'center',
       borderRadius: '2px',
       top: '2px',
       position: 'sticky',
       fontVariant: 'all-petite-caps',
+      fontSize: '0.875rem',
+      fontWeight: '600',
+      letterSpacing: '0.05em',
+      textAlign: 'left',
       zIndex: '1',
       boxShadow: 'rgba(0, 0, 0, 0.2) 1px 1px 1px 2px',
+      borderBottom: `2px solid rgba(128, 128, 128, 0.2)`,
+      borderRight: `1px solid rgba(128, 128, 128, 0.2)`,
       ...props.styles?.header,
     }
 
@@ -127,7 +134,9 @@ export const DataGrid: <T, Column extends string>(
         }}
         ariaMultiSelectable="true"
       >
-        <table style={{ width: '100%', maxHeight: 'calc(100% - 4em)', position: 'relative' }}>
+        <table
+          style={{ width: '100%', maxHeight: 'calc(100% - 4em)', position: 'relative', borderCollapse: 'collapse' }}
+        >
           <thead>
             <tr>
               {props.columns.map((column) => {

package/src/components/data-grid/header.tsx

@@ -222,14 +222,14 @@ export const DataGridHeader: <T, Column extends string>(
             height: '48px',
             justifyContent: 'space-between',
             alignItems: 'center',
-            gap: '8px',
+            gap: '12px',
             overflow: 'hide',
           }}
         >
-          <div style={{ paddingLeft: '0.5em' }}>{props.field}</div>
+          <div style={{ paddingLeft: '0', fontWeight: '600' }}>{props.field}</div>
           <div
             className="header-controls"
-            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: '0.5em' }}
+            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: '0', gap: '4px' }}
           >
             <SearchButton
               onclick={() => {

package/src/components/data-grid/selection-cell.tsx

@@ -18,6 +18,12 @@ export const SelectionCell = Shade<{ entry: any; service: CollectionService<any>
         }}
         type="checkbox"
         checked={isSelected}
+        style={{
+          cursor: 'pointer',
+          width: '18px',
+          height: '18px',
+          accentColor: 'var(--shades-theme-palette-primary-main)',
+        }}
       />
     )
   },

package/src/components/grid.tsx

@@ -29,7 +29,7 @@ export const Grid: <T, Column extends string>(props: GridProps<T, Column>, child
     render: ({ props, injector }) => {
       const { theme } = injector.getInstance(ThemeProviderService)
       const headerStyle: Partial<CSSStyleDeclaration> = {
-        padding: '0 0.51em',
+        padding: '1em 1.2em',
         backgroundColor: theme.background.paper,
         color: theme.text.secondary,
         borderRadius: '2px',
@@ -37,8 +37,24 @@ export const Grid: <T, Column extends string>(props: GridProps<T, Column>, child
         position: 'sticky',
         cursor: 'pointer',
         fontVariant: 'all-petite-caps',
+        fontSize: '0.875rem',
+        fontWeight: '600',
+        letterSpacing: '0.05em',
+        textAlign: 'left',
+        borderBottom: `2px solid ${theme.background.default}`,
+        borderRight: `1px solid rgba(128, 128, 128, 0.2)`,
         ...props.styles?.header,
       }
+
+      const cellStyle: Partial<CSSStyleDeclaration> = {
+        padding: '0.75em 1.2em',
+        borderBottom: `1px solid rgba(128, 128, 128, 0.15)`,
+        transition: 'background-color 0.2s ease',
+        fontSize: '0.875rem',
+        lineHeight: '1.5',
+        ...props.styles?.cell,
+      }
+
       return (
         <div
           className="shade-grid-wrapper"
@@ -49,7 +65,7 @@ export const Grid: <T, Column extends string>(props: GridProps<T, Column>, child
             overflow: 'auto',
           }}
         >
-          <table style={{ width: '100%', position: 'relative' }}>
+          <table style={{ width: '100%', position: 'relative', borderCollapse: 'collapse' }}>
             <thead>
               <tr>
                 {props.columns.map((column) => {
@@ -65,9 +81,21 @@ export const Grid: <T, Column extends string>(props: GridProps<T, Column>, child
             </thead>
             <tbody>
               {props.entries.map((entry) => (
-                <tr>
+                <tr
+                  style={{
+                    transition: 'background-color 0.2s ease',
+                  }}
+                  onmouseenter={(e) => {
+                    const target = e.currentTarget as HTMLElement
+                    target.style.backgroundColor = `rgba(128, 128, 128, 0.08)`
+                  }}
+                  onmouseleave={(e) => {
+                    const target = e.currentTarget as HTMLElement
+                    target.style.backgroundColor = 'transparent'
+                  }}
+                >
                   {props.columns.map((column) => (
-                    <td style={props.styles?.cell}>
+                    <td style={cellStyle}>
                       {props.rowComponents?.[column]?.(entry, column) ||
                         props.rowComponents?.default?.(entry, column) ||
                         null}

package/src/components/inputs/input.tsx

@@ -85,47 +85,63 @@ const getLabelStyle = ({
   state: TextInputState
   validationResult?: InputValidationResult
 }): Partial<CSSStyleDeclaration> => {
+  const isError = state.validity?.valid === false || validationResult?.isValid === false
+  const isOutlined = props.variant === 'outlined'
+  const isContained = props.variant === 'contained'
+
   return {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
-    fontSize: '10px',
+    fontSize: '11px',
+    fontWeight: '500',
+    letterSpacing: '0.01em',
     color: props.disabled
       ? themeProvider.theme.text.disabled
-      : state.validity?.valid === false || validationResult?.isValid === false
+      : isError
         ? themeProvider.theme.palette.error.main
         : state.focused
-          ? themeProvider.theme.text.primary
+          ? themeProvider.theme.palette[props.defaultColor || 'primary'].main
           : themeProvider.theme.text.secondary,
-    marginBottom: '1em',
-    padding: '1em',
-    borderRadius: '5px',
-    background:
-      props.variant === 'contained'
-        ? themeProvider
-            .getRgbFromColorString(
-              state.validity?.valid === false || validationResult?.isValid === false
-                ? themeProvider.theme.palette.error.main
-                : themeProvider.theme.palette[props.defaultColor || 'primary'].main,
-            )
-            .update('a', state.focused ? 0.1 : 0.2)
-            .toString()
-        : 'transparent',
-    boxShadow:
-      props.variant === 'outlined' || props.variant === 'contained'
-        ? `0 0 0 1px ${
-            state.validity?.valid === false || validationResult?.isValid === false
+    marginBottom: '1.25em',
+    padding: '12px 14px',
+    borderRadius: '8px',
+    background: isContained
+      ? themeProvider
+          .getRgbFromColorString(
+            isError
+              ? themeProvider.theme.palette.error.main
+              : themeProvider.theme.palette[props.defaultColor || 'primary'].main,
+          )
+          .update('a', state.focused ? 0.12 : 0.08)
+          .toString()
+      : 'transparent',
+    border:
+      isOutlined || isContained
+        ? `2px solid ${
+            isError
               ? themeProvider.theme.palette.error.main
               : state.focused
                 ? themeProvider.theme.palette[props.defaultColor || 'primary'].main
-                : themeProvider.theme.text.primary
+                : themeProvider.getRgbFromColorString(themeProvider.theme.text.secondary).update('a', 0.3).toString()
           }`
+        : `2px solid transparent`,
+    boxShadow:
+      state.focused && !props.disabled
+        ? `0 0 0 3px ${themeProvider
+            .getRgbFromColorString(
+              isError
+                ? themeProvider.theme.palette.error.main
+                : themeProvider.theme.palette[props.defaultColor || 'primary'].main,
+            )
+            .update('a', 0.15)
+            .toString()}`
         : 'none',
     filter: props.disabled ? 'grayscale(100%)' : 'none',
     opacity: props.disabled ? '0.5' : '1',
-    transition:
-      'color 0.2s ease-in-out, filter 0.2s ease-in-out, opacity 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+    cursor: props.disabled ? 'not-allowed' : 'text',
     ...props.labelProps?.style,
   }
 }
@@ -212,12 +228,41 @@ export const Input = Shade<TextInputProps>({
         props.getHelperText?.({ state: newState, validationResult }) ||
         getDefaultMessagesForValidityState(newState.validity) ||
         ''
-      helper?.replaceChildren(helperNode)
+      if (helper) {
+        helper.replaceChildren(helperNode)
+        attachStyles(helper, {
+          style: {
+            fontSize: '11px',
+            marginTop: '6px',
+            opacity: '0.85',
+            lineHeight: '1.4',
+          },
+        })
+      }
 
       const startIcon = element.querySelector<HTMLSpanElement>('span.startIcon')
-      startIcon?.replaceChildren(props.getStartIcon?.({ state: newState, validationResult }) || '')
+      if (startIcon) {
+        startIcon.replaceChildren(props.getStartIcon?.({ state: newState, validationResult }) || '')
+        attachStyles(startIcon, {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: '16px',
+          },
+        })
+      }
+
       const endIcon = element.querySelector<HTMLSpanElement>('span.endIcon')
-      endIcon?.replaceChildren(props.getEndIcon?.({ state: newState, validationResult }) || '')
+      if (endIcon) {
+        endIcon.replaceChildren(props.getEndIcon?.({ state: newState, validationResult }) || '')
+        attachStyles(endIcon, {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            fontSize: '16px',
+          },
+        })
+      }
 
       if (injector.cachedSingletons.has(FormService)) {
         const formService = injector.getInstance(FormService)
@@ -245,9 +290,14 @@ export const Input = Shade<TextInputProps>({
             display: 'flex',
             alignItems: 'center',
             width: '100%',
+            gap: '8px',
           }}
         >
-          {props.getStartIcon ? <span className="startIcon">{props.getStartIcon?.({ state })}</span> : null}
+          {props.getStartIcon ? (
+            <span className="startIcon" style={{ display: 'flex', alignItems: 'center', fontSize: '16px' }}>
+              {props.getStartIcon?.({ state })}
+            </span>
+          ) : null}
           <input
             oninvalid={(ev) => {
               ev.preventDefault()
@@ -275,20 +325,36 @@ export const Input = Shade<TextInputProps>({
               border: 'none',
               backgroundColor: 'transparent',
               outline: 'none',
-              fontSize: '12px',
+              fontSize: '13px',
+              fontWeight: '400',
               width: '100%',
               textOverflow: 'ellipsis',
               padding: '0',
-              marginTop: '0.6em',
-              marginBottom: '0.4em',
+              marginTop: '8px',
+              marginBottom: '2px',
               flexGrow: '1',
+              lineHeight: '1.5',
               ...props.style,
             }}
             value={state.value}
           />
-          {props.getEndIcon ? <span className="endIcon">{props.getEndIcon({ state })}</span> : null}
+          {props.getEndIcon ? (
+            <span className="endIcon" style={{ display: 'flex', alignItems: 'center', fontSize: '16px' }}>
+              {props.getEndIcon({ state })}
+            </span>
+          ) : null}
         </div>
-        <span className="helperText">{props.getHelperText?.({ state })}</span>
+        <span
+          className="helperText"
+          style={{
+            fontSize: '11px',
+            marginTop: '6px',
+            opacity: '0.85',
+            lineHeight: '1.4',
+          }}
+        >
+          {props.getHelperText?.({ state })}
+        </span>
       </label>
     )
   },

package/src/components/noty-list.tsx

@@ -42,12 +42,14 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
   style: {
     margin: '8px',
     overflow: 'hidden',
-    borderRadius: '6px',
-    boxShadow: '1px 3px 6px rgba(0,0,0,0.3)',
-    width: '300px',
+    borderRadius: '12px',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08)',
+    width: '340px',
     display: 'flex',
     flexDirection: 'column',
     height: '0px',
+    border: '1px solid rgba(0, 0, 0, 0.1)',
+    backdropFilter: 'blur(10px)',
   },
   render: ({ props, injector, element }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
@@ -87,10 +89,10 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
-            padding: '0px 6px 0px 16px',
+            padding: '12px 12px 12px 20px',
             backgroundColor: colors.dark,
             color: headerTextColor,
-            fontSize: '1.3em',
+            borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
           }}
         >
           <h5
@@ -99,15 +101,30 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               margin: '0',
-              fontSize: '.7em',
+              fontSize: '0.95em',
+              fontWeight: '600',
+              letterSpacing: '0.01em',
             }}
             title={props.model.title}
           >
             {props.model.title}
           </h5>
           <Button
-            style={{ margin: '4px 0', padding: '0 4px', fontSize: '12px' }}
+            style={{
+              margin: '0',
+              padding: '4px 8px',
+              fontSize: '16px',
+              minWidth: '28px',
+              opacity: '0.8',
+              transition: 'opacity 0.2s ease',
+            }}
             className="dismissNoty"
+            onmouseenter={(e: MouseEvent) => {
+              ;(e.currentTarget as HTMLElement).style.opacity = '1'
+            }}
+            onmouseleave={(e: MouseEvent) => {
+              ;(e.currentTarget as HTMLElement).style.opacity = '0.8'
+            }}
             onclick={removeSelf}
             title="Close Notification"
             variant="contained"
@@ -116,7 +133,16 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
             ✖
           </Button>
         </div>
-        <div style={{ padding: '16px 16px' }}>{props.model.body}</div>
+        <div
+          style={{
+            padding: '16px 20px 18px 20px',
+            fontSize: '0.9em',
+            lineHeight: '1.5',
+            fontWeight: '400',
+          }}
+        >
+          {props.model.body}
+        </div>
       </>
     )
   },

package/src/components/suggest/index.tsx

@@ -124,10 +124,15 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'flex-end',
-            padding: '0 1em',
-            borderRadius: '5px',
+            padding: '0 1.25em',
+            borderRadius: '12px',
             position: 'relative',
-            background: 'rgba(128,128,128,0.1)',
+            background: 'rgba(128,128,128,0.08)',
+            border: `1px solid ${manager.isOpened.getValue() ? 'rgba(128,128,128,0.3)' : 'rgba(128,128,128,0.15)'}`,
+            boxShadow: manager.isOpened.getValue()
+              ? '0 4px 12px rgba(0,0,0,0.15), 0 0 0 3px rgba(128,128,128,0.05)'
+              : '0 2px 4px rgba(0,0,0,0.05)',
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
             ...props.style,
           }}
         >
@@ -135,9 +140,18 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
             className="term-icon"
             style={{
               cursor: 'pointer',
-              color: '#aaa',
-              fontWeight: 'bolder',
-              textShadow: '0 0 1px #aaa',
+              color: theme.text.secondary,
+              fontWeight: '600',
+              fontSize: '0.95em',
+              transition: 'color 0.2s ease',
+              padding: '0.5em 0.75em 0.5em 0',
+              userSelect: 'none',
+            }}
+            onmouseenter={(ev) => {
+              ;(ev.target as HTMLElement).style.color = theme.text.primary
+            }}
+            onmouseleave={(ev) => {
+              ;(ev.target as HTMLElement).style.color = theme.text.secondary
             }}
             onclick={() => manager.isOpened.setValue(true)}
           >
@@ -162,14 +176,26 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
             <div
               className="close-suggestions"
               onclick={() => manager.isOpened.setValue(false)}
+              onmouseenter={(ev) => {
+                ;(ev.target as HTMLElement).style.background = 'rgba(255,255,255,0.15)'
+                ;(ev.target as HTMLElement).style.transform = 'scale(1.1)'
+              }}
+              onmouseleave={(ev) => {
+                ;(ev.target as HTMLElement).style.background = 'transparent'
+                ;(ev.target as HTMLElement).style.transform = 'scale(1)'
+              }}
               style={{
-                width: '20px',
-                height: '20px',
+                width: '24px',
+                height: '24px',
                 opacity: manager.isOpened.getValue() ? '1' : '0',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 cursor: 'pointer',
+                borderRadius: '6px',
+                transition: 'all 0.2s ease',
+                fontSize: '14px',
+                color: theme.text.secondary,
               }}
             >
               ✖

package/src/components/suggest/suggest-input.tsx

@@ -26,14 +26,18 @@ export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
     return (
       <input
         autofocus
+        placeholder="Type to search..."
         style={{
           color: theme.text.primary,
           outline: 'none',
-          padding: '1em',
+          padding: '0.875em 0.5em',
           background: 'transparent',
           border: 'none',
           display: 'inline-flex',
-          width: 'calc(100% - 2em)',
+          width: 'calc(100% - 1em)',
+          fontSize: '0.95em',
+          fontWeight: '400',
+          letterSpacing: '0.01em',
         }}
       />
     )