@owlmeans/web-panel 0.1.2 → 0.1.4

package/src/components/form/component.tsx

@@ -1,23 +1,19 @@
 import type { FC } from 'react'
-import { useCallback, useMemo } from 'react'
+import { Children, useCallback, useMemo } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { ajvResolver } from '@hookform/resolvers/ajv'
-import Grid from '@mui/material/Grid'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import CardActions from '@mui/material/CardActions'
 import { FormContext, schemaToFormDefault } from '@owlmeans/client-panel'
 import type { JSONSchemaType } from 'ajv'
 import Ajv from 'ajv'
 import formatsPlugin from 'ajv-formats'
-import type { SxProps } from '@mui/material/styles'
-import { useTheme } from '@mui/material/styles'
 import { SubmitButton } from './button/component.js'
 import { useToggle } from '@owlmeans/client'
 import { scalingToStyles } from '../helper.js'
 import { ResilientError } from '@owlmeans/error'
 import { Status } from '../status.js'
 import type { WebFormProps } from './types.js'
+import { Card, CardContent, CardFooter } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
 
 const ajv = new Ajv({ coerceTypes: true })
 formatsPlugin(ajv)
@@ -25,9 +21,8 @@ formatsPlugin(ajv)
 export const Form: FC<WebFormProps> = (props) => {
   const {
     defaults, children, formRef, validation, name, horizontal, vertical,
-    decorate, onSubmit, i18n, styles
+    decorate, onSubmit, i18n, className, style
   } = props
-  const theme = useTheme()
   const _defaults = useMemo(
     () => defaults ?? (validation != null ? schemaToFormDefault(validation) : undefined),
     [name, defaults != null, validation != null]
@@ -61,35 +56,39 @@ export const Form: FC<WebFormProps> = (props) => {
     })
   }, [name])
 
-
   if (formRef != null) {
     formRef.current = { form, update, loader, error: setError }
   }
 
-  const style: SxProps = useMemo(() => scalingToStyles(horizontal, vertical, theme), [horizontal])
+  const scaling = useMemo(() => scalingToStyles(horizontal, vertical), [horizontal, vertical])
 
-  const content = () =>
-    <Grid container direction="column" justifyContent="flex-start" alignItems="stretch"
-      rowSpacing={2} sx={!decorate ? style : {}}>{
-        Array.isArray(children)
-          ? children.map((child, index) =>
-            <Grid key={index}>{child}</Grid>
-          ) : children
-      }</Grid>
+  const content = () => (
+    <div className={cn('flex flex-col items-stretch justify-start gap-4', !decorate && scaling, !decorate && className)} style={!decorate ? style : undefined}>
+      {Array.isArray(children)
+        ? Children.map(children, (child, index) => <div key={index}>{child}</div>)
+        : children
+      }
+    </div>
+  )
 
   if (decorate === true) {
     const root = form.getFieldState('root')
     return <FormProvider {...form}>
       <FormContext {...props} loader={loader}>
-        <Card sx={{ ...style, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', ...styles } as SxProps}>
+        <Card className={cn(scaling, 'flex flex-col justify-between', className)} style={style}>
           <CardContent>
             {content()}
             {root.invalid && root.error?.message &&
-              <Status ok={false} i18n={i18n} error={ResilientError.ensure(root.error.message)} />}
+              <div className="mt-4">
+                <Status ok={false} i18n={i18n} error={ResilientError.ensure(root.error.message)} />
+              </div>
+            }
           </CardContent>
-          {onSubmit != null ? <CardActions sx={{ flexDirection: 'row', justifyContent: 'flex-end', pr: 2, pb: 2 }}>
-            <SubmitButton loader={loader} onSubmit={async data => onSubmit(data, update)} />
-          </CardActions> : undefined}
+          {onSubmit != null && (
+            <CardFooter className="flex flex-row justify-end gap-2 pr-4 pb-2">
+              <SubmitButton loader={loader} onSubmit={async data => onSubmit(data, update)} />
+            </CardFooter>
+          )}
         </Card>
       </FormContext>
     </FormProvider>

package/src/components/form/text/component.tsx

@@ -1,45 +1,54 @@
 import type { FC } from 'react'
 import { useFormContext, Controller } from 'react-hook-form'
-import { TextInputProps } from './types.js'
-
-import TextField from '@mui/material/TextField'
-import { useFormError, useFormI18n } from '@owlmeans/client-panel'
-import { useClientFormContext } from '@owlmeans/client-panel'
+import type { TextInputProps } from './types.js'
+import { useFormError, useFormI18n, useClientFormContext } from '@owlmeans/client-panel'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 
 export const TextInput: FC<TextInputProps> = ({ name, label, placeholder, hint, type, def, disableAutocomplete }) => {
   const { control } = useFormContext()
   const t = useFormI18n()
-  const key = name
-  if (typeof label === 'boolean' && label) {
-    label = t(`${key}.label`)
-  } else {
-    label = undefined
-  }
-  if (typeof placeholder === 'boolean' && placeholder) {
-    placeholder = t(`${key}.placeholder`)
-  } else {
-    placeholder = undefined
-  }
-  if (typeof hint === 'boolean' && hint) {
-    hint = t(`${key}.hint`)
-  } else {
-    hint = undefined
-  }
+
+  let resolvedLabel: string | undefined
+  let resolvedPlaceholder: string | undefined
+  let resolvedHint: string | undefined
+
+  if (typeof label === 'boolean' && label) resolvedLabel = t(`${name}.label`)
+  else if (typeof label === 'string') resolvedLabel = label
+
+  if (typeof placeholder === 'boolean' && placeholder) resolvedPlaceholder = t(`${name}.placeholder`)
+  else if (typeof placeholder === 'string') resolvedPlaceholder = placeholder
+
+  if (typeof hint === 'boolean' && hint) resolvedHint = t(`${name}.hint`)
+  else if (typeof hint === 'string') resolvedHint = hint
 
   return <Controller control={control} name={name} defaultValue={def} render={
     ({ field, fieldState }) => {
       const error = useFormError(name, fieldState.error)
       const { loader } = useClientFormContext()
+      const disabled = loader != null && loader.opened === true
 
-      return <TextField fullWidth {...field}
-        error={fieldState.error != null}
-        disabled={loader != null && loader.opened === true}
-        label={label}
-        type={type ?? 'text'}
-        placeholder={placeholder}
-        autoComplete={disableAutocomplete ? 'off' : 'on'}
-        helperText={error ?? hint}
-      />
+      return (
+        <div className="flex w-full flex-col gap-1.5">
+          {resolvedLabel != null && <Label htmlFor={name}>{resolvedLabel}</Label>}
+          <Input
+            id={name}
+            {...field}
+            type={type ?? 'text'}
+            placeholder={resolvedPlaceholder}
+            autoComplete={disableAutocomplete ? 'off' : 'on'}
+            disabled={disabled}
+            aria-invalid={fieldState.error != null}
+          />
+          {(error != null || resolvedHint != null) && (
+            <p className={
+              error != null
+                ? 'text-sm text-destructive'
+                : 'text-sm text-muted-foreground'
+            }>{error ?? resolvedHint}</p>
+          )}
+        </div>
+      )
     }
   } />
 }

package/src/components/form/types.ts

@@ -1,6 +1,7 @@
-import type { SxProps } from '@mui/material/styles'
-import type { FormProps  } from '@owlmeans/client-panel'
+import type { FormProps } from '@owlmeans/client-panel'
+import type { CSSProperties } from 'react'
 
 export interface WebFormProps extends FormProps {
-  styles?: SxProps
+  className?: string
+  style?: CSSProperties
 }

package/src/components/helper.ts

@@ -1,70 +1,85 @@
-import type { SxProps, Theme } from '@mui/material/styles'
-import { useTheme } from '@mui/material/styles'
-import useMediaQuery from '@mui/material/useMediaQuery'
+import { useEffect, useState } from 'react'
 import { BlockScaling } from '@owlmeans/client-panel'
 
+/**
+ * Map MUI's previous `scalingToStyles(horizontal, vertical, theme): SxProps`
+ * to a Tailwind utility class composition string. Consumers compose this
+ * with their own classes via `cn()` or template literals.
+ *
+ * Breakpoint semantics mirror the old MUI implementation:
+ *   - Half:  capped width/height on >=md, expanded on <md, `flex-grow: 1`
+ *   - Wide:  10% horizontal/vertical margin, `flex-grow: 1`
+ *   - Full:  fill axis, `flex-grow: 1`
+ */
 export const scalingToStyles = (
   horizontal?: BlockScaling,
-  vertical?: BlockScaling,
-  theme?: Theme
-): SxProps => {
-  const style: SxProps = {}
+  vertical?: BlockScaling
+): string => {
+  const parts: string[] = []
+
   switch (horizontal) {
     case BlockScaling.Half:
-      Object.assign(style, {
-        maxWidth: '50%',
-        [theme?.breakpoints.down('md') ?? 'xs']: {
-          maxWidth: '90%'
-        },
-        flexGrow: 1
-      })
+      parts.push('max-w-[90%]', 'md:max-w-[50%]', 'grow')
       break
     case BlockScaling.Wide:
-      Object.assign(style, { mx: '10%', flexGrow: 1 })
+      parts.push('mx-[10%]', 'grow')
       break
     case BlockScaling.Full:
-      Object.assign(style, { flexGrow: 1 })
+      parts.push('grow')
       break
   }
 
   switch (vertical) {
     case BlockScaling.Half:
-      Object.assign(style, {
-        maxHeight: '50%',
-        [theme?.breakpoints.down('md') ?? 'xs']: {
-          maxHeight: '90%'
-        },
-        flexGrow: 1
-      })
+      parts.push('max-h-[90%]', 'md:max-h-[50%]', 'grow')
       break
     case BlockScaling.Wide:
-      Object.assign(style, { my: '10%', flexGrow: 1 })
+      parts.push('my-[10%]', 'grow')
       break
     case BlockScaling.Full:
-      Object.assign(style, { height: '100%', flexGrow: 1 })
+      parts.push('h-full', 'grow')
       break
   }
 
-  return style
+  return parts.join(' ')
 }
 
-export const useBreakPoint = () => {
-  const theme = useTheme()
+/**
+ * Tailwind default breakpoints — kept stable across consumers. If a consumer
+ * has customised Tailwind breakpoints in their app config, override this
+ * via a wrapping hook in the app.
+ */
+const BREAKPOINTS: Array<{ name: string, min: number, max: number }> = [
+  { name: 'xs', min: 0,    max: 639  },
+  { name: 'sm', min: 640,  max: 767  },
+  { name: 'md', min: 768,  max: 1023 },
+  { name: 'lg', min: 1024, max: 1279 },
+  { name: 'xl', min: 1280, max: Number.POSITIVE_INFINITY },
+]
 
-  // Define breakpoints
-  const isXs = useMediaQuery(theme.breakpoints.only('xs'))
-  const isSm = useMediaQuery(theme.breakpoints.only('sm'))
-  const isMd = useMediaQuery(theme.breakpoints.only('md'))
-  const isLg = useMediaQuery(theme.breakpoints.only('lg'))
-  const isXl = useMediaQuery(theme.breakpoints.only('xl'))
+const matchBreakpoint = (width: number): string => {
+  for (const bp of BREAKPOINTS) {
+    if (width >= bp.min && width <= bp.max) {
+      return bp.name
+    }
+  }
+  return 'xs'
+}
 
-  let currentBreakpoint = isXs ? 'xs' : 'unknown' // Default value
-  if (isSm) currentBreakpoint = 'sm'
-  if (isMd) currentBreakpoint = 'md'
-  if (isLg) currentBreakpoint = 'lg'
-  if (isXl) currentBreakpoint = 'xl'
+export const useBreakPoint = (): string => {
+  const [bp, setBp] = useState<string>(() =>
+    typeof window === 'undefined' ? 'lg' : matchBreakpoint(window.innerWidth)
+  )
 
-  return currentBreakpoint
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const onResize = () => setBp(matchBreakpoint(window.innerWidth))
+    onResize()
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  return bp
 }
 
 export const useMapBreakpoint = <T>(map: Record<string, T>, def?: T, breakpoint?: string): T => {
@@ -74,6 +89,5 @@ export const useMapBreakpoint = <T>(map: Record<string, T>, def?: T, breakpoint?
   if (result == null) {
     throw new SyntaxError(`Breakpoint should always return value. We have ${breakpoint}, but ${Object.keys(map).join(', ')} are available`)
   }
-
-  return result
+  return result as T
 }

package/src/components/layout/component.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import type { LayoutProps } from './types.js'
-import Box from '@mui/material/Box'
 
-export const Layout: FC<LayoutProps> = ({ children }) => {
-  return <Box>{children}</Box>
+export const Layout: FC<LayoutProps> = ({ children, className, style }) => {
+  return <div className={className} style={style}>{children}</div>
 }

package/src/components/layout/types.ts

@@ -1,4 +1,6 @@
-import type { PropsWithChildren } from 'react'
+import type { CSSProperties, PropsWithChildren } from 'react'
 
 export interface LayoutProps extends PropsWithChildren {
+  className?: string
+  style?: CSSProperties
 }

package/src/components/link.tsx

@@ -1,13 +1,12 @@
 import { usePanelI18n } from '@owlmeans/client-panel'
 import type { FC } from 'react'
 import type { LinkProps } from './types.js'
-import MUILink from '@mui/material/Link'
-import type { TypographyOwnProps } from '@mui/material'
 import { useValue } from '@owlmeans/client'
 import { useContext } from '@owlmeans/web-client'
-import type { ClientModule } from '@owlmeans/client-module'
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
+import { cn } from '@/lib/utils'
 
-export const Link: FC<LinkProps> = ({ src, module, name, variant, children, center, open, styles }) => {
+export const Link: FC<LinkProps> = ({ src, module, name, children, center, open, className, style }) => {
   const t = usePanelI18n()
   const context = useContext()
 
@@ -16,9 +15,8 @@ export const Link: FC<LinkProps> = ({ src, module, name, variant, children, cent
       return src
     }
     if (module != null) {
-      module = typeof module === 'string' ? context.module<ClientModule<string>>(module) : module
+      module = typeof module === 'string' ? context.module<ClientEntrypoint<string>>(module) : module
       const [url] = await module.call<string>()
-
       return url
     }
     return null
@@ -27,8 +25,20 @@ export const Link: FC<LinkProps> = ({ src, module, name, variant, children, cent
   const label = name != null
     ? t(name)
     : children != null || module == null
-      ? undefined : t(`modules.${typeof module == 'string' ? module : module.alias}`)
+      ? undefined
+      : t(`modules.${typeof module === 'string' ? module : module.alias}`)
   const target = open ? '_blank' : undefined
-  return <MUILink href={href ?? undefined} target={target} variant={variant as TypographyOwnProps['variant']}
-    sx={{ textAlign: center ? 'center' : 'inherit', ...styles }}>{label ?? children}</MUILink>
+  const rel = open ? 'noopener noreferrer' : undefined
+
+  return <a
+    href={href ?? undefined}
+    target={target}
+    rel={rel}
+    className={cn(
+      'text-primary underline-offset-4 hover:underline',
+      center && 'text-center',
+      className
+    )}
+    style={style}
+  >{label ?? children}</a>
 }

package/src/components/panel-app/component.tsx

@@ -1,20 +1,16 @@
 import type { FC } from 'react'
-import { useMemo } from 'react'
 import type { PanelAppProps } from './types.js'
 
 import { App } from '@owlmeans/client'
 import { I18nContext } from '@owlmeans/client-i18n'
-import CssBaseline from '@mui/material/CssBaseline'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { cn } from '@/lib/utils'
 
-export const PanelApp: FC<PanelAppProps> = ({ context, provide, children, theme }) => {
-  theme = useMemo(() => theme ?? createTheme(), [theme])
-  return <ThemeProvider theme={theme}>
+export const PanelApp: FC<PanelAppProps> = ({ context, provide, children, rootClassName }) => {
+  return <div className={cn('min-h-screen bg-background text-foreground', rootClassName)}>
     <I18nContext config={context.cfg}>
       <App context={context} provide={provide}>
-        <CssBaseline />
         {children}
-      </App >
+      </App>
     </I18nContext>
-  </ThemeProvider>
+  </div>
 }

package/src/components/panel-app/types.ts

@@ -1,6 +1,10 @@
-import type { Theme } from '@mui/material/styles'
 import type { AppProps } from '@owlmeans/client'
 
 export interface PanelAppProps extends AppProps {
-    theme?: Theme
+  /**
+   * Optional CSS class added to the outermost wrapper. Use to scope
+   * Tailwind theme overrides (e.g. `'dark'` or a custom theme class).
+   * Replaces the legacy MUI `theme?: Theme` prop.
+   */
+  rootClassName?: string
 }

package/src/components/status.tsx

@@ -3,21 +3,32 @@ import { useMemo } from 'react'
 import type { StatusProps } from './types.js'
 import { usePanelI18n } from '@owlmeans/client-panel'
 import { ResilientError } from '@owlmeans/error'
-import Alert from '@mui/material/Alert'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 
-const prepareMessage = (msg: string) => msg.replace(/\:/g, '.')
+const prepareMessage = (msg: string) => msg.replace(/:/g, '.')
+
+const variantToAlert = (variant: string): 'default' | 'destructive' | 'success' => {
+  if (variant === 'error' || variant === 'destructive') return 'destructive'
+  if (variant === 'success') return 'success'
+  return 'default'
+}
 
 export const Status: FC<StatusProps> = ({ ok, name, i18n, children, variant, message, error }) => {
   variant = useMemo(() => variant ?? (ok ? 'success' : 'error'), [ok, variant])
   const t = usePanelI18n(name ?? variant, i18n)
   message = useMemo(() => {
     const resilient = error != null ? ResilientError.ensure(error) : null
-    return message != null ? t(message) : resilient != null ? t(
-        [
-          `${resilient.type}.${prepareMessage(resilient.message)}`,
-          prepareMessage(resilient.message)
-        ],
-      ) : t(variant)
+    return message != null
+      ? t(message)
+      : resilient != null
+        ? t([
+            `${resilient.type}.${prepareMessage(resilient.message)}`,
+            prepareMessage(resilient.message)
+          ])
+        : t(variant as string)
   }, [message, error?.name, ok, variant])
-  return <Alert severity={variant as any}>{children ?? message}</Alert>
+
+  return <Alert variant={variantToAlert(variant as string)}>
+    <AlertDescription>{children ?? message}</AlertDescription>
+  </Alert>
 }

package/src/components/text.tsx

@@ -1,14 +1,33 @@
-
 import { usePanelI18n } from '@owlmeans/client-panel'
-import type { FC } from 'react'
-import type { TextProps } from './types.js'
-import Typography from '@mui/material/Typography'
-import type { TypographyOwnProps } from '@mui/material'
+import type { FC, JSX } from 'react'
+import type { TextProps, TextVariant } from './types.js'
+import { cn } from '@/lib/utils'
 
-export const Text: FC<TextProps> = ({ variant, name, children, center, styles, nested, i18n }) => {
-  const t = usePanelI18n(undefined, i18n)
+const variantClasses: Record<TextVariant, string> = {
+  h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight',
+  h2: 'scroll-m-20 text-3xl font-semibold tracking-tight',
+  h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',
+  h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
+  p: 'leading-7',
+  lead: 'text-xl text-muted-foreground',
+  large: 'text-lg font-semibold',
+  small: 'text-sm font-medium leading-none',
+  muted: 'text-sm text-muted-foreground',
+  blockquote: 'mt-6 border-l-2 pl-6 italic',
+}
 
+const variantTag = (variant: TextVariant, nested: boolean): keyof JSX.IntrinsicElements => {
+  if (nested) return 'span'
+  if (variant === 'h1' || variant === 'h2' || variant === 'h3' || variant === 'h4') return variant
+  if (variant === 'blockquote') return 'blockquote'
+  return 'p'
+}
+
+export const Text: FC<TextProps> = ({ variant = 'p', name, children, center, className, style, nested = false, i18n }) => {
+  const t = usePanelI18n(undefined, i18n)
   const label = name != null ? t(name) : undefined
-  return <Typography component={nested ? 'span' : 'p'} variant={variant as TypographyOwnProps['variant']}
-    sx={{ textAlign: center ? 'center' : 'inherit', ...styles }}>{label ?? children}</Typography>
+  const Tag = variantTag(variant, nested)
+  const cls = cn(variantClasses[variant], center && 'text-center', className)
+
+  return <Tag className={cls} style={style}>{label ?? children}</Tag>
 }

package/src/components/types.ts

@@ -1,28 +1,40 @@
-import type { SxProps } from '@mui/material/styles'
 import type { I18nProps } from '@owlmeans/client-i18n'
 import type { BlockScaling } from '@owlmeans/client-panel'
-import type { FC, PropsWithChildren } from 'react'
-import type { TypographyOwnProps } from '@mui/material'
-import type { ClientModule } from '@owlmeans/client-module'
+import type { CSSProperties, FC, PropsWithChildren } from 'react'
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
 
-export interface BlockProps extends PropsWithChildren<I18nProps> {
+/**
+ * Shadcn `Typography`-equivalent text variants. Each value maps to a Tailwind
+ * class composition inside `Text` / `Link`. This replaces MUI's
+ * `TypographyOwnProps['variant']`.
+ */
+export type TextVariant =
+  | 'h1' | 'h2' | 'h3' | 'h4'
+  | 'p' | 'lead' | 'large' | 'small' | 'muted' | 'blockquote'
+
+export interface StyledProps {
+  /** Tailwind utility classes appended after the component's base classes. */
+  className?: string
+  /** Raw inline CSS — escape hatch for non-class styling. */
+  style?: CSSProperties
+}
+
+export interface BlockProps extends PropsWithChildren<I18nProps>, StyledProps {
   horizontal?: BlockScaling
   vertical?: BlockScaling
   Actions?: FC
-  styles?: SxProps
 }
 
-export interface TextProps extends PropsWithChildren<I18nProps> {
+export interface TextProps extends PropsWithChildren<I18nProps>, StyledProps {
   name?: string
-  variant?: TypographyOwnProps['variant']
+  variant?: TextVariant
   center?: boolean
-  styles?: SxProps
   nested?: boolean
 }
 
 export interface LinkProps extends TextProps {
   src?: string
-  module?: string | ClientModule
+  module?: string | ClientEntrypoint
   open?: boolean
 }
 

package/src/components/uploader/image.tsx

@@ -1,31 +1,31 @@
 import type { FC } from 'react'
 import { ImageUploader as Uploader } from '@owlmeans/web-client'
-import Paper from '@mui/material/Paper'
+import { ImagePlus } from 'lucide-react'
 import type { ImageUploaderProps } from './types.js'
-import AddPhotoAlternateOutlinedIcon from '@mui/icons-material/AddPhotoAlternateOutlined';
-import Box from '@mui/material/Box'
+import { cn } from '@/lib/utils'
+
+// Tailwind responsive sizes — mirrors the previous MUI breakpoint object.
+//   xs:  60/65px   md: 120/125px   lg: 200/205px
+const wrapperClasses = 'w-[65px] h-[65px] md:w-[125px] md:h-[125px] lg:w-[205px] lg:h-[205px]'
+const previewClasses = 'max-w-[60px] max-h-[60px] md:max-w-[120px] md:max-h-[120px] lg:max-w-[200px] lg:max-h-[200px]'
+const iconClasses    = 'size-[60px] md:size-[120px] lg:size-[200px] text-primary'
 
 export const ImageUploader: FC<ImageUploaderProps> = ({ Root, rootProps, previewUrl, ...others }) => {
-  return <Uploader Root={Root ?? Paper} rootProps={{
-    elevation: 2,
-    sx: {
-      width: wrapperSize,
-      height: wrapperSize,
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      cursor: 'pointer',
-    },
-    ...rootProps
-  }} {...others}>
-    {
-      previewUrl != null
-        ? <Box component="img" src={previewUrl}
-          sx={{ maxWidth: previewSize, maxHeight: previewSize }} />
-        : <AddPhotoAlternateOutlinedIcon sx={{ fontSize: previewSize }} color="primary" />
+  const DefaultRoot: FC<any> = ({ children, className, ...rest }) => (
+    <div
+      {...rest}
+      className={cn(
+        'flex items-center justify-center rounded-md border bg-card shadow-sm cursor-pointer',
+        wrapperClasses,
+        className
+      )}
+    >{children}</div>
+  )
+
+  return <Uploader Root={Root ?? DefaultRoot} rootProps={rootProps} {...others}>
+    {previewUrl != null
+      ? <img src={previewUrl} className={previewClasses} />
+      : <ImagePlus className={iconClasses} aria-hidden />
     }
   </Uploader>
 }
-
-const previewSize = { xs: 60, md: 120, lg: 200 }
-const wrapperSize = { xs: 65, md: 125, lg: 205 }

package/src/exports.ts

@@ -2,10 +2,10 @@
 export { handler, useNavigate, useValue, useModule } from '@owlmeans/client'
 export { config } from '@owlmeans/client-context'
 export { service } from '@owlmeans/config'
-export { guard, parent } from '@owlmeans/module'
+export { guard, parent } from '@owlmeans/entrypoint'
 export { addWebService } from '@owlmeans/client-config'
-export { module, elevate, provideRequest, stab } from '@owlmeans/client-module'
-export type { ClientModule as Module } from '@owlmeans/client-module'
+export { entrypoint, elevate, provideRequest, stab } from '@owlmeans/client-entrypoint'
+export type { ClientEntrypoint as Module } from '@owlmeans/client-entrypoint'
 export { route as croute } from '@owlmeans/client-route'
 export { route, frontend } from '@owlmeans/route'
 export { DEFAULT_ALIAS as DAUTH_GUARD, setupExternalAuthentication } from '@owlmeans/client-auth'