@furystack/shades-common-components 5.0.17 → 5.0.19

package/src/components/paper.tsx

@@ -1,25 +1,25 @@
-import type { PartialElement } from '@furystack/shades'
-import { attachProps } from '@furystack/shades'
+import { attachStyles } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 
-export const Paper = Shade<PartialElement<HTMLDivElement> & { elevation?: 1 | 2 | 3 }>({
+export const Paper = Shade<{ elevation?: 1 | 2 | 3 }>({
   shadowDomName: 'shade-paper',
-
+  elementBase: HTMLDivElement,
+  elementBaseName: 'div',
+  style: {
+    borderRadius: '3px',
+    margin: '8px',
+    padding: '6px 16px',
+  },
   render: ({ injector, props, children, element }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
     const { elevation = 1 } = props
 
-    attachProps(element, {
-      ...props,
+    attachStyles(element, {
       style: {
-        borderRadius: '3px',
         boxShadow: elevation ? `1px ${elevation}px ${elevation}px rgba(0,0,0,0.3)` : '',
         backgroundColor: themeProvider.theme.background.paper,
         color: themeProvider.theme.text.secondary,
-        margin: '8px',
-        padding: '6px 16px',
-        ...props?.style,
       },
     })
 

package/src/components/skeleton.tsx

@@ -1,4 +1,4 @@
-import { attachStyles, Shade } from '@furystack/shades'
+import { Shade } from '@furystack/shades'
 import { promisifyAnimation } from '../utils/promisify-animation.js'
 
 export type SkeletonProps = {
@@ -10,6 +10,15 @@ export type SkeletonProps = {
 
 export const Skeleton = Shade<SkeletonProps>({
   shadowDomName: 'shade-skeleton',
+  style: {
+    opacity: '0',
+    display: 'inline-block',
+    background: 'linear-gradient(-45deg, rgba(128,128,128,0.1), rgba(128,128,128,0.3), rgba(128,128,128,0.1))',
+    backgroundSize: '400% 400%',
+    width: '100%',
+    height: '100%',
+    minHeight: '1em',
+  },
   render: ({ element, props }) => {
     const { delay = 1500 } = props
     setTimeout(() => {
@@ -29,17 +38,7 @@ export const Skeleton = Shade<SkeletonProps>({
         )
       })
     })
-    attachStyles(element, {
-      style: {
-        opacity: '0',
-        display: 'inline-block',
-        background: 'linear-gradient(-45deg, rgba(128,128,128,0.1), rgba(128,128,128,0.3), rgba(128,128,128,0.1))',
-        backgroundSize: '400% 400%',
-        width: '100%',
-        height: '100%',
-        minHeight: '1em',
-      },
-    })
+
     return null
   },
 })

package/src/components/suggest/index.tsx

@@ -25,8 +25,10 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
   SuggestProps<any>
 >({
   shadowDomName: 'shade-suggest',
+  style: {
+    flexGrow: '1',
+  },
   render: ({ props, injector, element, useDisposable, useObservable }) => {
-    element.style.flexGrow = '1'
     const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry))
     const { theme } = injector.getInstance(ThemeProviderService)
     const inputContainer = element.querySelector('.input-container') as HTMLDivElement

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

@@ -4,12 +4,13 @@ import type { SuggestManager } from './suggest-manager.js'
 
 export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
   shadowDomName: 'shades-suggest-input',
+  style: {
+    width: '100%',
+    overflow: 'hidden',
+  },
   render: ({ element, props, useObservable, injector }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
 
-    element.style.width = '100%'
-    element.style.overflow = 'hidden'
-
     useObservable(
       'isOpened',
       props.manager.isOpened,

package/src/components/tabs.tsx

@@ -9,15 +9,17 @@ export interface Tab {
 
 const TabHeader = Shade<{ isActive?: boolean; onActivate: () => void }>({
   shadowDomName: 'shade-tab-header',
+  style: {
+    padding: '1em 2.5em',
+    cursor: 'pointer',
+    transition: 'box-shadow 1s linear',
+  },
   render: ({ children, element, injector, props }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
     const { isActive } = props
 
     attachProps(element, {
       style: {
-        padding: '1em 2.5em',
-        cursor: 'pointer',
-        transition: 'box-shadow 1s linear',
         fontWeight: isActive ? 'bolder' : 'inherit',
         background: isActive ? theme.background.paper : theme.background.default,
         color: isActive ? theme.text.primary : theme.text.secondary,

package/src/services/{default-variable-theme.ts → css-variable-theme.ts}

@@ -1,6 +1,6 @@
 import type { DeepPartial } from '@furystack/utils'
 import type { Theme } from './theme-provider-service.js'
-export const defaultVariableTheme: Theme = {
+export const cssVariableTheme: Theme = {
   text: {
     primary: 'var(--shades-theme-text-primary)',
     secondary: 'var(--shades-theme-text-secondary)',
@@ -79,5 +79,5 @@ const assignValue = <T extends object>(
 
 export const useThemeCssVariables = (theme: DeepPartial<Theme>) => {
   const root = document.querySelector(':root') as HTMLElement
-  assignValue(defaultVariableTheme, theme, root)
+  assignValue(cssVariableTheme, theme, root)
 }

package/src/services/index.ts

@@ -5,4 +5,4 @@ export * from './default-dark-theme.js'
 export * from './default-light-theme.js'
 export * from './default-palette.js'
 export * from './noty-service.js'
-export * from './default-variable-theme.js'
+export * from './css-variable-theme.js'

package/src/services/theme-provider-service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@furystack/inject'
 import type { DeepPartial } from '@furystack/utils'
-import { defaultVariableTheme, getCssVariable, useThemeCssVariables } from './default-variable-theme.js'
+import { cssVariableTheme, getCssVariable, useThemeCssVariables } from './css-variable-theme.js'
 
 export type Color = string // `#${string}` | `rgba(${number},${number},${number},${number})` |
 
@@ -122,7 +122,7 @@ export class ThemeProviderService {
     throw Error(`Color format '${color}' is not supported.'`)
   }
 
-  public readonly theme = defaultVariableTheme
+  public readonly theme = cssVariableTheme
 
   public set(change: DeepPartial<Theme>) {
     useThemeCssVariables(change)

package/esm/services/default-variable-theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"default-variable-theme.d.ts","sourceRoot":"","sources":["../../src/services/default-variable-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AACxD,eAAO,MAAM,oBAAoB,EAAE,KAkDlC,CAAA;AAED,eAAO,MAAM,cAAc,QAAS,MAAM,SAAS,MAAM,QAAQ,WAAW,SAE3E,CAAA;AAED,eAAO,MAAM,cAAc,QAAS,MAAM,SAAQ,WAAW,WAE5D,CAAA;AAmBD,eAAO,MAAM,oBAAoB,UAAW,YAAY,KAAK,CAAC,SAG7D,CAAA"}

package/esm/services/default-variable-theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"default-variable-theme.js","sourceRoot":"","sources":["../../src/services/default-variable-theme.ts"],"names":[],"mappings":"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"}