@startdownnotez404/ui 1.3.5 → 1.3.6

package/dist/{chunk-Y74ALKBL.mjs.map → chunk-4MSPA7U7.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/elemental/Avatar/src/Avatar/Avatar.tsx","../src/components/elemental/Avatar/src/_utils/_const.ts","../src/components/elemental/Avatar/src/Avatar/themes.ts","../src/components/elemental/Avatar/src/Avatar/AvatarButton.tsx","../src/components/elemental/Avatar/src/StatusAvatar/StatusAvatar.tsx","../src/components/elemental/Avatar/src/StatusAvatar/theme.ts"],"sourcesContent":["import MuiAvatar, {type AvatarProps} from '@mui/material/Avatar'\nimport { CLASSNAMEs } from '@/_utils/_const/classNames';\nimport { Stack } from '@/ele/Box'\nimport { Skeleton } from '@/ele/Skeleton'\n\nimport { Subscript } from '@/ele/Typography'\n\nimport { AVATAR_SIZEs, AVATAR_SX, type Size } from '../_utils'\n\ninterface MuiAvatarProps {\n    name?: string;\n    src?: string;\n    size?: Size;\n    fontSize?: string | number;\n    displayName?: boolean;\n    direction?: 'column' | 'row';\n    dim?: {\n        width?: string | number;\n        height?: string | number;\n    };\n    backgroundIcon?: React.ReactNode;\n}\n\n/**\n * A styled Mui Avatar component\n * \n * [Doc](https://mui.com/material-ui/api/avatar/)\n */\nexport default function Avatar(props: MuiAvatarProps) {\n    const {\n        name,\n        src,\n        size=\"md\", // sm, md, lg\n        fontSize, \n        displayName=true, \n        direction=\"column\",\n        dim={},\n        backgroundIcon,\n        ...rest\n    } = props\n\n    const h = dim.height || AVATAR_SIZEs[size]\n    const w = dim.width || AVATAR_SIZEs[size]\n\n    return (\n        <Stack\n            className={CLASSNAMEs.elemental.avatar.root}\n            style={{\n            '--AVATAR_SX': direction,\n            '--gap': AVATAR_SX[direction]?.stackSX[size]?.gap,\n        } as React.CSSProperties}\n        sx={() => ({\n            direction:\"var(--AVATAR_SX)\",\n            gap: `calc(var(--gap) * 8px)`,\n            justifyContent: \"center\",\n            overflow: \"hidden\",\n        })} \n        alignItems=\"center\" direction={direction}>\n            <AvatarSkel \n                name={name} \n                src={src} \n                h={h} \n                w={w} \n                backgroundIcon={backgroundIcon} \n                {...rest}\n            />\n            {name && displayName && <NameSkel name={name} direction={direction} fontSize={fontSize}/>}\n        </Stack>\n    )\n}\n\ninterface AvatarSkelProps extends Omit<AvatarProps, \"children\"> {\n    name?: string;\n    src?: string;\n    h: string | number;\n    w: string | number;\n    backgroundIcon?: React.ReactNode;\n}\n\nfunction AvatarSkel(props: AvatarSkelProps) {\n    const { name, src, h, w, backgroundIcon, ...rest } = props\n    if(!name && !src) return <Skeleton variant=\"circular\" width={w} height={h} />\n    if(backgroundIcon) return (<Stack sx={{\n        position: 'relative', width: w, height: h,\n        alignItems: 'center', justifyContent: 'center',\n        \"&>svg\":{\n            height: w, width: h,\n            padding: '0.25em',\n            borderRadius: '50%',\n        },\n    }}>{backgroundIcon}</Stack>)\n    return (<NameAvatar name={name} src={src} h={h} w={w} {...rest}/>)\n}\n\ninterface NameSkelProps {\n    name?: string;\n    direction: 'column' | 'row';\n    fontSize?: string | number;\n}\n\n/**\n * A Mui Skeleton component which used as a placeholder for loading image\n * \n * [Doc](https://mui.com/material-ui/api/skeleton/)\n */\nexport function NameSkel(props: NameSkelProps) {\n    const { name, direction, fontSize } = props\n    if(!name) return <Skeleton variant=\"text\" width={40} height={20} />\n\n    const fs = typeof fontSize === 'number' ? `${fontSize}px` : fontSize\n    return <Subscript fontSize={fs || AVATAR_SX[direction]?.fontSize} lineHeight=\"1.2\" \n        style={{\n            \"--fs-n\": fontSize || AVATAR_SX[direction]?.fontSize,\n            \"--lh-n\": \"1.2\",\n        } as React.CSSProperties}\n        sx={{\n            \"&.MuiTypography-root\":{\n                whiteSpace:\"nowrap\",\n                fontSize: \"var(--fs-n)\",\n                lineHeight: \"var(--lh-n)\",\n                WebkitLineClamp: \"3\",\n                WebkitBoxOrient: \"vertical\",\n                maxWidth: '-webkit-fill-available',\n                lineBreak: 'anywhere',\n            },\n        }}>{name}</Subscript>\n\n}\n\ninterface NameAvatarProps extends Omit<AvatarProps, \"children\"> {\n    name?: string;\n    src?: string;\n    h: string | number;\n    w: string | number;\n}\n\nfunction NameAvatar(props: NameAvatarProps) {\n    const { name, src, h, w, ...rest } = props\n    return (\n    <MuiAvatar \n        {...stringAvatar(name,src)} \n        {...rest} \n        \n        style={{\n            '--w': typeof w === 'number' ? `${w}px` : w,\n            '--h': typeof h === 'number' ? `${h}px` : h,\n            '--fs': \"calc(var(--w) / 2)\", // half of the height, so it will be fit in the circle\n        } as React.CSSProperties} \n        sx={{\n            \"&.MuiAvatar-root\":{\n                fontSize: \"var(--fs)\",\n                color: 'var(--avatar-color)',\n                backgroundColor: 'transparent',\n                width: 'var(--w)',\n                height: 'var(--h)',\n            },\n        }}\n    />)\n}\nfunction stringAvatar(name?:string,src?:string){\n    if(src) return {src}\n    if(!name) return { children: '' }\n\n    const splitName = name.split(' ')\n    const first = splitName[0] || ''\n    const second = splitName[1] || ''\n    const str = `${first[0] || ''}${second[0] || ''}`\n\n    return {\n        children: str,\n    }\n}","import type { Size } from '../_utils'\n\nexport const AVATARBUTTON_STANDARD_DIMENSIONs = {\n  xs:\"36px\",\n  sm: \"100px\",\n  md: \"120px\",\n  lg: \"200px\",\n  xl: \"240px\",\n} as const satisfies Record<Size, string>;\n\nexport const AVATAR_SIZEs = {\n  xs: \"20px\",\n  sm: \"24px\",\n  md: \"40px\",\n  lg: \"56px\",\n  xl: \"80px\",\n} as const satisfies Record<Size, string>;\n\nexport const AVATAR_SX = {\n    column:{\n        stackSX:{\n            xs: {gap: 0.5},\n            sm: {gap: 0.5},\n            md: {gap: 0.75},\n            lg: {gap: 1},\n            xl: {gap: 1},\n        },\n        fontSize: \"0.6rem\",\n    },\n    row:{\n        stackSX:{\n            xs: {gap: 0.75},\n            sm: {gap: 0.75},\n            md: {gap: 1},\n            lg: {gap: 1.5},\n            xl: {gap: 2},\n        },\n        fontSize: \"0.8rem\",\n    }\n} as const satisfies {\n    [key in 'column' | 'row']: {\n        stackSX: Record<Size, {gap:number}>,\n        fontSize: string,\n    }\n};","import type { MuiComponentTheme } from '@/_utils/_types'\nimport type { SxProps, Theme } from '@mui/material/styles'\n\nexport const avatarTheme = {\n  styleOverrides: {\n    root: {\n      '--avatar-bg': 'var(--mui-palette-action-selected)',\n      '--avatar-color': 'var(--mui-palette-text-primary)',\n      backgroundColor: 'var(--avatar-bg)',\n      color: 'var(--avatar-color)',\n    },\n  },\n} as const satisfies MuiComponentTheme<'MuiAvatar'>\n\n/** Static palette aliases for AvatarButton root element */\nexport const avatarButtonRootSx: SxProps<Theme> = {\n  '--avatar-button-text':       'var(--mui-palette-text-primary)',\n  '--avatar-hover-icon-color':  'var(--mui-palette-text-subscript)',\n} as const satisfies SxProps<Theme>\n","import React from 'react'\nimport { IconButton } from '@/ele/Button'\nimport { Box } from '@/ele/Box'\n\nimport Avatar, { NameSkel } from './Avatar'\nimport { CLASSNAMEs } from '@/_utils/_const/classNames';\nimport { Size, AVATARBUTTON_STANDARD_DIMENSIONs } from '../_utils'\nimport { avatarButtonRootSx } from './themes'\nimport { mergeSx } from '@/_utils/_func'\n\nconst pos = {\n    top: {dir:\"column-reverse\",gap:0.5,direction:\"column\"},\n    bottom: {dir:\"column\",gap:0.5,direction:\"column\"},\n    left: {dir:\"row-reverse\",gap:1,direction:\"row\"},\n    right: {dir:\"row\",gap:1,direction:\"row\"},\n} as const\n\ninterface AvatarButtonProps {\n    onClick?: React.ComponentProps<typeof IconButton>['onClick'];\n    size?: Size;\n    disabled?: boolean;\n    dim?: React.ComponentProps<typeof Avatar>['dim'];\n\n    backgroundUrl?: string;\n    backgroundIcon?: React.ReactNode;\n    icon?: React.ReactNode;\n    fontSize?: string | number;\n\n    name?: string; \n    src?: string;\n    showName?: boolean;\n    namePosition?: keyof typeof pos;\n    hasBorder?: boolean;\n    'aria-label'?: string;\n}\n\n/**\n * A clickable Mui Avatar component\n * \n * use button to wrap an Avatar component\n * \n * logic:\n *  use backgroundIcon if any\n *  then use backgroundUrl if any\n *  then name if any\n */\nexport default function AvatarButton(props: AvatarButtonProps) {\n    const {\n        onClick,\n        size=\"md\",\n        disabled=false,\n        dim,\n\n        backgroundUrl=\"transparent\",\n        icon=null,\n        fontSize,\n\n        name=\"\", \n        src=\"\",\n        showName=false, \n        namePosition=\"bottom\",// namePosition: top, bottom, left, right\n        \n        backgroundIcon,\n        hasBorder=true,\n        'aria-label': ariaLabel,\n    } = props\n\n    const _dim = {\n      w: dim?.width ?? AVATARBUTTON_STANDARD_DIMENSIONs[size],\n      h: dim?.height ?? AVATARBUTTON_STANDARD_DIMENSIONs[size],\n    }\n\n    return (\n        <Box\n            className={CLASSNAMEs.elemental.avatar.button}\n            sx={mergeSx(avatarButtonRootSx, {\n            display:\"flex\",\n            flexDirection:pos[namePosition]?.dir,\n            alignItems:\"center\",\n            gap:pos[namePosition]?.gap,\n        })}>\n            <IconButton\n                onClick={onClick}\n                disabled={disabled}\n                disableRipple\n                aria-label={ariaLabel}\n                style={{\n                    '--bg': backgroundUrl,\n                    '--bg-size': _dim.w,\n                    '--size': _dim.w,\n                    '--shadow': hasBorder ? 'var(--mui-palette-shadow-border-1)' : 'none',\n                } as React.CSSProperties}\n                sx={{\n                    '&.MuiButtonBase-root':{\n                        border:\"none\",\n                        position: 'relative',\n                        color:\"var(--avatar-button-text)\",\n                        background:\"var(--bg)\",\n                        backgroundSize:'var(--bg-size)',\n                        width:'var(--size)',\n                        height:'var(--size)',\n                        // allow overlay banner to fit the button\n                        padding: 0,\n                \n                        // shadow\n                        boxShadow: \"var(--shadow)\",\n                        borderRadius:\"50%\",\n                \n                        // hover effect\n                        '&:hover, &.Mui-focusVisible': {\n                            zIndex: 1,\n                            '& .MuiImageBackdrop-root': {\n                                opacity: 0.5,\n                            },\n                            '& .MuiImageMarked-root': {\n                                opacity: 0,\n                            },\n                            '& .MuiTypography-root': {\n                                border: '4px solid currentColor',\n                            },\n                        },\n                    },\n                }} \n            >\n                <Box sx={{\n                    width:\"100%\",\n                    position:\"absolute\",\n                    top:0,\n                    left:0,\n                    right:0,\n                    bottom:0,\n                    zIndex:1,\n                    \"&>.MuiStack-root\":{\n                        width:\"100%\",\n                        height:\"100%\",\n                        maxWidth:\"100%\",\n                        maxHeight:\"100%\",\n                    },\n                }}>\n                    <ImageBackdrop/>\n                    <HoverIcon icon={icon} />\n                    <Avatar\n                        name={name} src={src} backgroundIcon={backgroundIcon}\n                        displayName={false}\n                        dim={{\n                            width:_dim.w,\n                            height:_dim.h,\n                        }}\n                    />\n                </Box>\n            </IconButton>\n            {showName && <NameSkel name={name} direction={pos[namePosition].direction} fontSize={fontSize}/>}\n        </Box>\n\n    )\n}\n\nfunction HoverIcon({ icon }: { icon: React.ReactNode }) {\n    return (\n    <Box className=\"HoverIcon-root\"\n    sx={{\n        position:\"absolute\",\n        top:0,\n        left:0,\n        right:0,\n        bottom:0,\n        zIndex:2,\n        \"&>*\":{display:\"none\"},\n        \"&:hover>*\":{display:\"flex\"},\n        borderRadius:\"50%\",\n    }}>\n        <Box sx={{\n          width:\"100%\",\n          height:\"100%\",\n          display:\"none\",\n          justifyContent:\"center\",\n          alignItems:\"center\",  \n          color:\"var(--avatar-hover-icon-color)\",\n        }}>\n            {icon}\n        </Box>\n    </Box>\n    )\n}\n\nfunction ImageBackdrop() {\n    return (\n    <Box component=\"span\"\n    className=\"MuiImageBackdrop-root\"\n    sx={{\n        zIndex: 2,\n        position: 'absolute',\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0,\n        backgroundColor: \"#000\", // photo overlay — CSS variable tokens cannot reliably target this layer\n        opacity: 0,\n        transition: \"opacity 0.3s\",\n        borderRadius:\"50%\",\n    }}/>\n    )\n}","'use client'\nimport { styled } from '@mui/material/styles'\nimport { Badge } from '@/ele/Badge'\n\nimport { useMenu, MenuPopper } from '@/ele/Menu'\n\nimport { Avatar, AvatarButton } from '../Avatar'\nimport { statusAvatarRootSx } from './theme'\nimport { mergeSx } from '@/_utils/_func'\n\n// all the status that can be changed except offline\nconst USER_STATUSs = {\n  online: 'online',\n  away: 'away',\n  busy: 'busy',\n  offline: 'offline',\n  invisible: 'invisible',\n} as const\nconst changable_status = Object.values(USER_STATUSs).filter(s=>s!=='offline')\ntype UserStatusTypes = typeof USER_STATUSs[keyof typeof USER_STATUSs]\n\n/**\n * StatusAvatar\n * @description: avatar of the participant with status\n * @param status - status of the participant\n * @param src - src of the avatar\n * @param name - name of the participant\n * \n * user status will be shown as a dot on the avatar\n */\nexport function Renderer(props:{\n  status:UserStatusTypes;\n  statusEditable?:boolean;\n  handleStatusChange?:((status:UserStatusTypes)=>void);\n  name:string;\n  src?:string;\n\n  slotProps?:{\n    badge?:React.ComponentProps<typeof Badge>;\n    avatar?:Partial<React.ComponentProps<typeof Avatar>>;\n    avatarButton?:Partial<React.ComponentProps<typeof AvatarButton>>;\n  };\n}){\n  const {\n    name, src,\n    status, handleStatusChange,\n    statusEditable,\n    slotProps,\n  } = props\n\n  const p = useMenu({\n    multiple: false,\n    initSelected: [status],\n  })\n  return (\n    <>\n    <StyledBadge \n\n      status={status}\n      overlap=\"circular\"\n      anchorOrigin={{\n        vertical: 'bottom',\n        horizontal: 'right',\n      }}\n      variant=\"dot\"\n\n      sx={mergeSx(statusAvatarRootSx, {\n        height:\"fit-content\",\n      })}\n    >\n      {statusEditable\n        ?<AvatarButton name={name} src={src} {...slotProps?.avatarButton} onClick={p.onTriggerClickHandler}/>\n        :<Avatar name={name} src={src} {...slotProps?.avatar} displayName={false}/>\n      }\n    </StyledBadge>\n    <MenuPopper\n      openMenuProps={p}\n      options={changable_status.map((s)=>({\n        id: s,\n        label: s,\n        onClick:()=>{\n          p.closeHandler()\n          if(handleStatusChange) handleStatusChange(s)\n        },\n      }))}\n    />\n    </>\n  )\n}\nexport const status = USER_STATUSs\nexport type Status = UserStatusTypes\n\n/**\n * StyledBadge\n * @description: styled badge for the avatar\n * @param status - status of the participant\n * \n * use css variables to set the color and animation of the badge\n */\nconst StyledBadge = styled(Badge,{\n  shouldForwardProp: p=> p!==\"status\"\n})<{status:UserStatusTypes}>(() => ({\n  '& .MuiBadge-badge': {\n    width:\"15%\",\n    height:\"15%\",\n    minWidth: '10px',\n    minHeight: '10px',\n    borderRadius: '50%',\n    borderColor:\"transparent\",\n    backgroundColor: 'var(--color)',\n    color: 'var(--color)',\n    boxShadow: `0 0 0 2px var(--status-badge-shadow)`,\n    display:\"var(--display)\",\n    '&::after': {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      height: '100%',\n      borderRadius: '50%',\n      animation: 'var(--animate)',\n      border: '1px solid currentColor',\n      content: '\"\"',\n    },\n  },\n  '@keyframes ripple': {\n    '0%': {\n      transform: 'scale(.8)',\n      opacity: 1,\n    },\n    '100%': {\n      transform: 'scale(2.4)',\n      opacity: 0,\n    },\n  },\n\n  variants:[\n    {\n      props: {status:USER_STATUSs.online},\n      style: {\n        '--color': 'var(--status-color-online)',\n        '--animate': 'ripple 1.2s infinite ease-in-out', // ripple animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.away},\n      style: {\n        '--color': 'var(--status-color-away)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.busy},\n      style: {\n        '--color': 'var(--status-color-busy)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.offline,},\n      style: {\n        '--color': 'var(--status-color-offline)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.invisible,},\n      style: {\n        '--color': 'var(--status-color-offline)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n  ]\n}))\n","import type { SxProps, Theme } from '@mui/material/styles'\n\nexport const statusAvatarRootSx: SxProps<Theme> = {\n\t'--status-badge-shadow': 'var(--mui-palette-background-default)',\n\t'--status-color-online': 'var(--mui-palette-success-main)',\n\t'--status-color-away': 'var(--mui-palette-warning-main)',\n\t'--status-color-busy': 'var(--mui-palette-error-main)',\n\t'--status-color-offline': 'var(--mui-palette-grey-500)',\n}\n"],"mappings":"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","names":["default","jsx","jsxs","default","jsx","jsxs","status"]}
+{"version":3,"sources":["../src/components/elemental/Avatar/src/Avatar/Avatar.tsx","../src/components/elemental/Avatar/src/_utils/_const.ts","../src/components/elemental/Avatar/src/Avatar/themes.ts","../src/components/elemental/Avatar/src/Avatar/AvatarButton.tsx","../src/components/elemental/Avatar/src/StatusAvatar/StatusAvatar.tsx","../src/components/elemental/Avatar/src/StatusAvatar/theme.ts"],"sourcesContent":["import MuiAvatar, {type AvatarProps} from '@mui/material/Avatar'\nimport { CLASSNAMEs } from '@/_utils/_const/classNames';\nimport { Stack } from '@/ele/Box'\nimport { Skeleton } from '@/ele/Skeleton'\n\nimport { Subscript } from '@/ele/Typography'\n\nimport { AVATAR_SIZEs, AVATAR_SX, type Size } from '../_utils'\n\ninterface MuiAvatarProps {\n    name?: string;\n    src?: string;\n    size?: Size;\n    fontSize?: string | number;\n    displayName?: boolean;\n    direction?: 'column' | 'row';\n    dim?: {\n        width?: string | number;\n        height?: string | number;\n    };\n    backgroundIcon?: React.ReactNode;\n}\n\n/**\n * A styled Mui Avatar component\n * \n * [Doc](https://mui.com/material-ui/api/avatar/)\n */\nexport default function Avatar(props: MuiAvatarProps) {\n    const {\n        name,\n        src,\n        size=\"md\", // sm, md, lg\n        fontSize, \n        displayName=true, \n        direction=\"column\",\n        dim={},\n        backgroundIcon,\n        ...rest\n    } = props\n\n    const h = dim.height || AVATAR_SIZEs[size]\n    const w = dim.width || AVATAR_SIZEs[size]\n\n    return (\n        <Stack\n            className={CLASSNAMEs.elemental.avatar.root}\n            style={{\n            '--AVATAR_SX': direction,\n            '--gap': AVATAR_SX[direction]?.stackSX[size]?.gap,\n        } as React.CSSProperties}\n        sx={() => ({\n            direction:\"var(--AVATAR_SX)\",\n            gap: `calc(var(--gap) * 8px)`,\n            justifyContent: \"center\",\n            overflow: \"hidden\",\n        })} \n        alignItems=\"center\" direction={direction}>\n            <AvatarSkel \n                name={name} \n                src={src} \n                h={h} \n                w={w} \n                backgroundIcon={backgroundIcon} \n                {...rest}\n            />\n            {name && displayName && <NameSkel name={name} direction={direction} fontSize={fontSize}/>}\n        </Stack>\n    )\n}\n\ninterface AvatarSkelProps extends Omit<AvatarProps, \"children\"> {\n    name?: string;\n    src?: string;\n    h: string | number;\n    w: string | number;\n    backgroundIcon?: React.ReactNode;\n}\n\nfunction AvatarSkel(props: AvatarSkelProps) {\n    const { name, src, h, w, backgroundIcon, ...rest } = props\n    if(!name && !src) return <Skeleton variant=\"circular\" width={w} height={h} />\n    if(backgroundIcon) return (<Stack sx={{\n        position: 'relative', width: w, height: h,\n        alignItems: 'center', justifyContent: 'center',\n        \"&>svg\":{\n            height: w, width: h,\n            padding: '0.25em',\n            borderRadius: '50%',\n        },\n    }}>{backgroundIcon}</Stack>)\n    return (<NameAvatar name={name} src={src} h={h} w={w} {...rest}/>)\n}\n\ninterface NameSkelProps {\n    name?: string;\n    direction: 'column' | 'row';\n    fontSize?: string | number;\n}\n\n/**\n * A Mui Skeleton component which used as a placeholder for loading image\n * \n * [Doc](https://mui.com/material-ui/api/skeleton/)\n */\nexport function NameSkel(props: NameSkelProps) {\n    const { name, direction, fontSize } = props\n    if(!name) return <Skeleton variant=\"text\" width={40} height={20} />\n\n    const fs = typeof fontSize === 'number' ? `${fontSize}px` : fontSize\n    return <Subscript fontSize={fs || AVATAR_SX[direction]?.fontSize} lineHeight=\"1.2\" \n        style={{\n            \"--fs-n\": fontSize || AVATAR_SX[direction]?.fontSize,\n            \"--lh-n\": \"1.2\",\n        } as React.CSSProperties}\n        sx={{\n            \"&.MuiTypography-root\":{\n                whiteSpace:\"nowrap\",\n                fontSize: \"var(--fs-n)\",\n                lineHeight: \"var(--lh-n)\",\n                WebkitLineClamp: \"3\",\n                WebkitBoxOrient: \"vertical\",\n                maxWidth: '-webkit-fill-available',\n                lineBreak: 'anywhere',\n            },\n        }}>{name}</Subscript>\n\n}\n\ninterface NameAvatarProps extends Omit<AvatarProps, \"children\"> {\n    name?: string;\n    src?: string;\n    h: string | number;\n    w: string | number;\n}\n\nfunction NameAvatar(props: NameAvatarProps) {\n    const { name, src, h, w, ...rest } = props\n    return (\n    <MuiAvatar \n        {...stringAvatar(name,src)} \n        {...rest} \n        \n        style={{\n            '--w': typeof w === 'number' ? `${w}px` : w,\n            '--h': typeof h === 'number' ? `${h}px` : h,\n            '--fs': \"calc(var(--w) / 2)\", // half of the height, so it will be fit in the circle\n        } as React.CSSProperties} \n        sx={{\n            \"&.MuiAvatar-root\":{\n                fontSize: \"var(--fs)\",\n                color: 'var(--avatar-color)',\n                backgroundColor: 'transparent',\n                width: 'var(--w)',\n                height: 'var(--h)',\n            },\n        }}\n    />)\n}\nfunction stringAvatar(name?:string,src?:string){\n    if(src) return {src}\n    if(!name) return { children: '' }\n\n    const splitName = name.split(' ')\n    const first = splitName[0] || ''\n    const second = splitName[1] || ''\n    const str = `${first[0] || ''}${second[0] || ''}`\n\n    return {\n        children: str,\n    }\n}","import type { Size } from '../_utils'\n\nexport const AVATARBUTTON_STANDARD_DIMENSIONs = {\n  xs:\"36px\",\n  sm: \"100px\",\n  md: \"120px\",\n  lg: \"200px\",\n  xl: \"240px\",\n} as const satisfies Record<Size, string>;\n\nexport const AVATAR_SIZEs = {\n  xs: \"20px\",\n  sm: \"24px\",\n  md: \"40px\",\n  lg: \"56px\",\n  xl: \"80px\",\n} as const satisfies Record<Size, string>;\n\nexport const AVATAR_SX = {\n    column:{\n        stackSX:{\n            xs: {gap: 0.5},\n            sm: {gap: 0.5},\n            md: {gap: 0.75},\n            lg: {gap: 1},\n            xl: {gap: 1},\n        },\n        fontSize: \"0.6rem\",\n    },\n    row:{\n        stackSX:{\n            xs: {gap: 0.75},\n            sm: {gap: 0.75},\n            md: {gap: 1},\n            lg: {gap: 1.5},\n            xl: {gap: 2},\n        },\n        fontSize: \"0.8rem\",\n    }\n} as const satisfies {\n    [key in 'column' | 'row']: {\n        stackSX: Record<Size, {gap:number}>,\n        fontSize: string,\n    }\n};","import type { MuiComponentTheme } from '@/_utils/_types'\nimport type { SxProps, Theme } from '@mui/material/styles'\n\nexport const avatarTheme = {\n  styleOverrides: {\n    root: {\n      '--avatar-bg': 'var(--mui-palette-action-selected)',\n      '--avatar-color': 'var(--mui-palette-text-primary)',\n      backgroundColor: 'var(--avatar-bg)',\n      color: 'var(--avatar-color)',\n    },\n  },\n} as const satisfies MuiComponentTheme<'MuiAvatar'>\n\n/** Static palette aliases for AvatarButton root element */\nexport const avatarButtonRootSx: SxProps<Theme> = {\n  '--avatar-button-text':       'var(--mui-palette-text-primary)',\n  '--avatar-hover-icon-color':  'var(--mui-palette-text-subscript)',\n} as const satisfies SxProps<Theme>\n","import React from 'react'\nimport { IconButton } from '@/ele/Button'\nimport { Box } from '@/ele/Box'\n\nimport Avatar, { NameSkel } from './Avatar'\nimport { CLASSNAMEs } from '@/_utils/_const/classNames';\nimport { Size, AVATARBUTTON_STANDARD_DIMENSIONs } from '../_utils'\nimport { avatarButtonRootSx } from './themes'\nimport { mergeSx } from '@/_utils/_func'\n\nconst pos = {\n    top: {dir:\"column-reverse\",gap:0.5,direction:\"column\"},\n    bottom: {dir:\"column\",gap:0.5,direction:\"column\"},\n    left: {dir:\"row-reverse\",gap:1,direction:\"row\"},\n    right: {dir:\"row\",gap:1,direction:\"row\"},\n} as const\n\ninterface AvatarButtonProps {\n    onClick?: React.ComponentProps<typeof IconButton>['onClick'];\n    size?: Size;\n    disabled?: boolean;\n    dim?: React.ComponentProps<typeof Avatar>['dim'];\n\n    backgroundUrl?: string;\n    backgroundIcon?: React.ReactNode;\n    icon?: React.ReactNode;\n    fontSize?: string | number;\n\n    name?: string; \n    src?: string;\n    showName?: boolean;\n    namePosition?: keyof typeof pos;\n    hasBorder?: boolean;\n    'aria-label'?: string;\n}\n\n/**\n * A clickable Mui Avatar component\n * \n * use button to wrap an Avatar component\n * \n * logic:\n *  use backgroundIcon if any\n *  then use backgroundUrl if any\n *  then name if any\n */\nexport default function AvatarButton(props: AvatarButtonProps) {\n    const {\n        onClick,\n        size=\"md\",\n        disabled=false,\n        dim,\n\n        backgroundUrl=\"transparent\",\n        icon=null,\n        fontSize,\n\n        name=\"\", \n        src=\"\",\n        showName=false, \n        namePosition=\"bottom\",// namePosition: top, bottom, left, right\n        \n        backgroundIcon,\n        hasBorder=true,\n        'aria-label': ariaLabel,\n    } = props\n\n    const _dim = {\n      w: dim?.width ?? AVATARBUTTON_STANDARD_DIMENSIONs[size],\n      h: dim?.height ?? AVATARBUTTON_STANDARD_DIMENSIONs[size],\n    }\n\n    return (\n        <Box\n            className={CLASSNAMEs.elemental.avatar.button}\n            sx={mergeSx(avatarButtonRootSx, {\n            display:\"flex\",\n            flexDirection:pos[namePosition]?.dir,\n            alignItems:\"center\",\n            gap:pos[namePosition]?.gap,\n        })}>\n            <IconButton\n                onClick={onClick}\n                disabled={disabled}\n                disableRipple\n                aria-label={ariaLabel}\n                style={{\n                    '--bg': backgroundUrl,\n                    '--bg-size': _dim.w,\n                    '--size': _dim.w,\n                    '--shadow': hasBorder ? 'var(--mui-palette-shadow-border-1)' : 'none',\n                } as React.CSSProperties}\n                sx={{\n                    '&.MuiButtonBase-root':{\n                        border:\"none\",\n                        position: 'relative',\n                        color:\"var(--avatar-button-text)\",\n                        background:\"var(--bg)\",\n                        backgroundSize:'var(--bg-size)',\n                        width:'var(--size)',\n                        height:'var(--size)',\n                        // allow overlay banner to fit the button\n                        padding: 0,\n                \n                        // shadow\n                        boxShadow: \"var(--shadow)\",\n                        borderRadius:\"50%\",\n                \n                        // hover effect\n                        '&:hover, &.Mui-focusVisible': {\n                            zIndex: 1,\n                            '& .MuiImageBackdrop-root': {\n                                opacity: 0.5,\n                            },\n                            '& .MuiImageMarked-root': {\n                                opacity: 0,\n                            },\n                            '& .MuiTypography-root': {\n                                border: '4px solid currentColor',\n                            },\n                        },\n                    },\n                }} \n            >\n                <Box sx={{\n                    width:\"100%\",\n                    position:\"absolute\",\n                    top:0,\n                    left:0,\n                    right:0,\n                    bottom:0,\n                    zIndex:1,\n                    \"&>.MuiStack-root\":{\n                        width:\"100%\",\n                        height:\"100%\",\n                        maxWidth:\"100%\",\n                        maxHeight:\"100%\",\n                    },\n                }}>\n                    <ImageBackdrop/>\n                    <HoverIcon icon={icon} />\n                    <Avatar\n                        name={name} src={src} backgroundIcon={backgroundIcon}\n                        displayName={false}\n                        dim={{\n                            width:_dim.w,\n                            height:_dim.h,\n                        }}\n                    />\n                </Box>\n            </IconButton>\n            {showName && <NameSkel name={name} direction={pos[namePosition].direction} fontSize={fontSize}/>}\n        </Box>\n\n    )\n}\n\nfunction HoverIcon({ icon }: { icon: React.ReactNode }) {\n    return (\n    <Box className=\"HoverIcon-root\"\n    sx={{\n        position:\"absolute\",\n        top:0,\n        left:0,\n        right:0,\n        bottom:0,\n        zIndex:2,\n        \"&>*\":{display:\"none\"},\n        \"&:hover>*\":{display:\"flex\"},\n        borderRadius:\"50%\",\n    }}>\n        <Box sx={{\n          width:\"100%\",\n          height:\"100%\",\n          display:\"none\",\n          justifyContent:\"center\",\n          alignItems:\"center\",  \n          color:\"var(--avatar-hover-icon-color)\",\n        }}>\n            {icon}\n        </Box>\n    </Box>\n    )\n}\n\nfunction ImageBackdrop() {\n    return (\n    <Box component=\"span\"\n    className=\"MuiImageBackdrop-root\"\n    sx={{\n        zIndex: 2,\n        position: 'absolute',\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0,\n        backgroundColor: \"#000\", // photo overlay — CSS variable tokens cannot reliably target this layer\n        opacity: 0,\n        transition: \"opacity 0.3s\",\n        borderRadius:\"50%\",\n    }}/>\n    )\n}","'use client'\nimport { styled } from '@mui/material/styles'\nimport { Badge } from '@/ele/Badge'\n\nimport { useMenu, MenuPopper } from '@/ele/Menu'\n\nimport { Avatar, AvatarButton } from '../Avatar'\nimport { statusAvatarRootSx } from './theme'\nimport { mergeSx } from '@/_utils/_func'\n\n// all the status that can be changed except offline\nconst USER_STATUSs = {\n  online: 'online',\n  away: 'away',\n  busy: 'busy',\n  offline: 'offline',\n  invisible: 'invisible',\n} as const\nconst changable_status = Object.values(USER_STATUSs).filter(s=>s!=='offline')\ntype UserStatusTypes = typeof USER_STATUSs[keyof typeof USER_STATUSs]\n\n/**\n * StatusAvatar\n * @description: avatar of the participant with status\n * @param status - status of the participant\n * @param src - src of the avatar\n * @param name - name of the participant\n * \n * user status will be shown as a dot on the avatar\n */\nexport function Renderer(props:{\n  status:UserStatusTypes;\n  statusEditable?:boolean;\n  handleStatusChange?:((status:UserStatusTypes)=>void);\n  name:string;\n  src?:string;\n\n  slotProps?:{\n    badge?:React.ComponentProps<typeof Badge>;\n    avatar?:Partial<React.ComponentProps<typeof Avatar>>;\n    avatarButton?:Partial<React.ComponentProps<typeof AvatarButton>>;\n  };\n}){\n  const {\n    name, src,\n    status, handleStatusChange,\n    statusEditable,\n    slotProps,\n  } = props\n\n  const p = useMenu({\n    multiple: false,\n    initSelected: [status],\n  })\n  return (\n    <>\n    <StyledBadge \n\n      status={status}\n      overlap=\"circular\"\n      anchorOrigin={{\n        vertical: 'bottom',\n        horizontal: 'right',\n      }}\n      variant=\"dot\"\n\n      sx={mergeSx(statusAvatarRootSx, {\n        height:\"fit-content\",\n      })}\n    >\n      {statusEditable\n        ?<AvatarButton name={name} src={src} {...slotProps?.avatarButton} onClick={p.onTriggerClickHandler}/>\n        :<Avatar name={name} src={src} {...slotProps?.avatar} displayName={false}/>\n      }\n    </StyledBadge>\n    <MenuPopper\n      openMenuProps={p}\n      options={changable_status.map((s)=>({\n        id: s,\n        label: s,\n        onClick:()=>{\n          p.closeHandler()\n          if(handleStatusChange) handleStatusChange(s)\n        },\n      }))}\n    />\n    </>\n  )\n}\nexport const status = USER_STATUSs\nexport type Status = UserStatusTypes\n\n/**\n * StyledBadge\n * @description: styled badge for the avatar\n * @param status - status of the participant\n * \n * use css variables to set the color and animation of the badge\n */\nconst StyledBadge = styled(Badge,{\n  shouldForwardProp: p=> p!==\"status\"\n})<{status:UserStatusTypes}>(() => ({\n  '& .MuiBadge-badge': {\n    width:\"15%\",\n    height:\"15%\",\n    minWidth: '10px',\n    minHeight: '10px',\n    borderRadius: '50%',\n    borderColor:\"transparent\",\n    backgroundColor: 'var(--color)',\n    color: 'var(--color)',\n    boxShadow: `0 0 0 2px var(--status-badge-shadow)`,\n    display:\"var(--display)\",\n    '&::after': {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      height: '100%',\n      borderRadius: '50%',\n      animation: 'var(--animate)',\n      border: '1px solid currentColor',\n      content: '\"\"',\n    },\n  },\n  '@keyframes ripple': {\n    '0%': {\n      transform: 'scale(.8)',\n      opacity: 1,\n    },\n    '100%': {\n      transform: 'scale(2.4)',\n      opacity: 0,\n    },\n  },\n\n  variants:[\n    {\n      props: {status:USER_STATUSs.online},\n      style: {\n        '--color': 'var(--status-color-online)',\n        '--animate': 'ripple 1.2s infinite ease-in-out', // ripple animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.away},\n      style: {\n        '--color': 'var(--status-color-away)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.busy},\n      style: {\n        '--color': 'var(--status-color-busy)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.offline,},\n      style: {\n        '--color': 'var(--status-color-offline)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.invisible,},\n      style: {\n        '--color': 'var(--status-color-offline)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n  ]\n}))\n","import type { SxProps, Theme } from '@mui/material/styles'\n\nexport const statusAvatarRootSx: SxProps<Theme> = {\n\t'--status-badge-shadow': 'var(--mui-palette-background-default)',\n\t'--status-color-online': 'var(--mui-palette-success-main)',\n\t'--status-color-away': 'var(--mui-palette-warning-main)',\n\t'--status-color-busy': 'var(--mui-palette-error-main)',\n\t'--status-color-offline': 'var(--mui-palette-grey-500)',\n}\n"],"mappings":"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","names":["default","jsx","jsxs","default","jsx","jsxs","status"]}

package/dist/{chunk-24XDGNJ6.mjs → chunk-4P45Z5LR.mjs}

@@ -13,43 +13,39 @@ import {
   isEmptyFormValue,
   mergeFieldSx,
   validateFormSchema
-} from "./chunk-UTVSYS6S.mjs";
-import {
-  StandardStepper_default
-} from "./chunk-V26V2S3W.mjs";
+} from "./chunk-FNSIQ2B7.mjs";
 import {
   MuiSwitch
 } from "./chunk-T34IULP5.mjs";
 import {
   ToggleButtonGroup
-} from "./chunk-2ZZJTBTE.mjs";
+} from "./chunk-WJZ3IYET.mjs";
 import {
   MuiSelect_default
-} from "./chunk-UGMRJMFZ.mjs";
+} from "./chunk-BO5CU4ZM.mjs";
+import {
+  StandardStepper_default
+} from "./chunk-3O3N6X6D.mjs";
 import {
-  default as default14
+  default as default15
 } from "./chunk-EW4DTFH3.mjs";
 import {
   MuiModal
-} from "./chunk-UDREPVEY.mjs";
-import {
-  default as default15
-} from "./chunk-VYD3PDBB.mjs";
+} from "./chunk-RVSMEZE3.mjs";
 import {
   CheckboxGroup
-} from "./chunk-BGB7JHIU.mjs";
+} from "./chunk-FMGZCOJC.mjs";
 import {
   MuiFormLabel,
-  default as default12,
-  default3 as default13
+  default as default13,
+  default3 as default14
 } from "./chunk-T4X375IG.mjs";
 import {
   CircularProgress
 } from "./chunk-WYYP3Y34.mjs";
 import {
-  Button,
-  IconButton_default
-} from "./chunk-JIU5GVM7.mjs";
+  default as default12
+} from "./chunk-VYD3PDBB.mjs";
 import {
   default125 as default10,
   default126 as default11,
@@ -60,11 +56,17 @@ import {
   default69 as default8,
   default82 as default9
 } from "./chunk-ZVFYOXDE.mjs";
+import {
+  Button,
+  IconButton_default
+} from "./chunk-D4XPNSSI.mjs";
 import {
   default as default2,
-  default2 as default3,
+  default2 as default3
+} from "./chunk-PNSJC6PC.mjs";
+import {
   mergeSx
-} from "./chunk-S6EZVRZC.mjs";
+} from "./chunk-AFLEG5ZC.mjs";
 
 // src/components/compound/UseForm/src/useHooks.ts
 import { useForm } from "react-hook-form";
@@ -405,7 +407,7 @@ var TextField = ({ field }) => {
         gap: 1
       }, mergeFieldSx(size, sx)), children: [
         /* @__PURE__ */ jsx3(
-          default15,
+          default12,
           {
             ...restField,
             value: value ?? "",
@@ -544,7 +546,7 @@ var SliderField = ({ field }) => {
       name,
       defaultValue,
       render: ({ field: { onChange, value, ...restField }, fieldState: { error } }) => /* @__PURE__ */ jsxs3(
-        default12,
+        default13,
         {
           disabled,
           required,
@@ -558,7 +560,7 @@ var SliderField = ({ field }) => {
               /* @__PURE__ */ jsx5(Explanation_default, { explanation: getFieldExplanation(field) })
             ] }),
             /* @__PURE__ */ jsx5(default2, { sx: { px: 4 }, children: /* @__PURE__ */ jsx5(
-              default14,
+              default15,
               {
                 ...restField,
                 value: typeof value === "number" || Array.isArray(value) ? value : sliderSlotProps?.min ?? 0,
@@ -685,7 +687,7 @@ var ToggleButtonField = ({ field }) => {
       render: ({ field: { onChange, value }, fieldState: { error } }) => {
         const helperTextNode = /* @__PURE__ */ jsx7(FieldHelperText, { error, errorMsg, helpers: [field.helperText] });
         return /* @__PURE__ */ jsxs4(
-          default12,
+          default13,
           {
             disabled,
             required,
@@ -743,7 +745,7 @@ var SwitchField = ({ field }) => {
       name,
       defaultValue: defaultValue ?? false,
       render: ({ field: { onChange, value }, fieldState: { error } }) => /* @__PURE__ */ jsxs5(
-        default12,
+        default13,
         {
           disabled,
           required,
@@ -807,7 +809,7 @@ var CustomField = ({ field }) => {
           field.onChange?.(v, getValues());
         };
         return /* @__PURE__ */ jsxs6(
-          default12,
+          default13,
           {
             disabled,
             required,
@@ -887,7 +889,7 @@ var TextArrayField = ({ field }) => {
           setItems(next);
         };
         return /* @__PURE__ */ jsxs7(
-          default12,
+          default13,
           {
             disabled,
             required,
@@ -903,7 +905,7 @@ var TextArrayField = ({ field }) => {
               /* @__PURE__ */ jsxs7(default2, { sx: { py: 1, display: "flex", flexDirection: "column", gap: 1 }, children: [
                 items.map((it, idx) => /* @__PURE__ */ jsxs7(default2, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
                   /* @__PURE__ */ jsx10(
-                    default15,
+                    default12,
                     {
                       size: "small",
                       value: it,
@@ -964,7 +966,7 @@ var NumberField = ({ field }) => {
           update(next);
         };
         return /* @__PURE__ */ jsx11(
-          default12,
+          default13,
           {
             disabled,
             required,
@@ -974,7 +976,7 @@ var NumberField = ({ field }) => {
             sx: mergeSx(mergeFieldSx(size, sx), { maxWidth: "200px" }),
             children: /* @__PURE__ */ jsxs8(default2, { sx: { display: "flex", alignItems: "flex-start", gap: 1 }, children: [
               /* @__PURE__ */ jsx11(
-                default15,
+                default12,
                 {
                   fullWidth: true,
                   size: "small",
@@ -1018,8 +1020,8 @@ var NumberField = ({ field }) => {
                     },
                     input: {
                       ...numSlot?.slotProps?.input ?? {},
-                      startAdornment: /* @__PURE__ */ jsx11(default13, { position: "start", children: /* @__PURE__ */ jsx11(IconButton_default, { size: "small", onClick: handleMinus, disabled: typeof value === "number" && typeof numSlot?.min === "number" ? value <= numSlot.min : false, children: /* @__PURE__ */ jsx11(default4, { fontSize: "small" }) }) }),
-                      endAdornment: /* @__PURE__ */ jsx11(default13, { position: "end", children: /* @__PURE__ */ jsx11(IconButton_default, { size: "small", onClick: handlePlus, disabled: typeof value === "number" && typeof numSlot?.max === "number" ? value >= numSlot.max : false, children: /* @__PURE__ */ jsx11(default5, { fontSize: "small" }) }) })
+                      startAdornment: /* @__PURE__ */ jsx11(default14, { position: "start", children: /* @__PURE__ */ jsx11(IconButton_default, { size: "small", onClick: handleMinus, disabled: typeof value === "number" && typeof numSlot?.min === "number" ? value <= numSlot.min : false, children: /* @__PURE__ */ jsx11(default4, { fontSize: "small" }) }) }),
+                      endAdornment: /* @__PURE__ */ jsx11(default14, { position: "end", children: /* @__PURE__ */ jsx11(IconButton_default, { size: "small", onClick: handlePlus, disabled: typeof value === "number" && typeof numSlot?.max === "number" ? value >= numSlot.max : false, children: /* @__PURE__ */ jsx11(default5, { fontSize: "small" }) }) })
                     }
                   },
                   disabled
@@ -1037,37 +1039,47 @@ var NumberField = ({ field }) => {
 // src/components/compound/UseForm/src/FormRenderer/RowRenderer.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
 var DateField = React3.lazy(
-  () => import("./DateField-ZYMZFHL4.mjs").then((m) => ({
+  () => import("./DateField-CDJ6W6XF.mjs").then((m) => ({
     default: m.DateField
   }))
 );
 var DateTimeField = React3.lazy(
-  () => import("./DateTimeField-TPTJ7YIZ.mjs").then((m) => ({
+  () => import("./DateTimeField-SFAF4I6A.mjs").then((m) => ({
     default: m.DateTimeField
   }))
 );
+var TimeField = React3.lazy(
+  () => import("./TimeField-XVWXBJID.mjs").then((m) => ({
+    default: m.TimeField
+  }))
+);
+var DateRangeField = React3.lazy(
+  () => import("./DateRangeField-ZWSFT5KV.mjs").then((m) => ({
+    default: m.DateRangeField
+  }))
+);
 var TelField = React3.lazy(
-  () => import("./TelField-LOGRVZ4I.mjs").then((m) => ({
+  () => import("./TelField-FRQT2UBJ.mjs").then((m) => ({
     default: m.TelField
   }))
 );
 var FileUploadField = React3.lazy(
-  () => import("./FileUploadField-NTMWBJER.mjs").then((m) => ({
+  () => import("./FileUploadField-TSNCSLXX.mjs").then((m) => ({
     default: m.FileUploadField
   }))
 );
 var AvatarField = React3.lazy(
-  () => import("./AvatarField-SAODT3CZ.mjs").then((m) => ({
+  () => import("./AvatarField-KFASMVZU.mjs").then((m) => ({
     default: m.AvatarField
   }))
 );
 var JSONEditorField = React3.lazy(
-  () => import("./JSONEditorField-TMRWGXVR.mjs").then((m) => ({
+  () => import("./JSONEditorField-3KXC2GOG.mjs").then((m) => ({
     default: m.JSONEditorField
   }))
 );
 var AutocompleteField = React3.lazy(
-  () => import("./AutocompleteField-ZKNU2IRR.mjs").then((m) => ({
+  () => import("./AutocompleteField-653233JU.mjs").then((m) => ({
     default: m.AutocompleteField
   }))
 );
@@ -1087,6 +1099,10 @@ var FieldRenderer = ({ field }) => {
       return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(DateField, { field }) });
     case FIELD_TYPEs.dateTime:
       return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(DateTimeField, { field }) });
+    case FIELD_TYPEs.time:
+      return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(TimeField, { field }) });
+    case FIELD_TYPEs.dateRange:
+      return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(DateRangeField, { field }) });
     case FIELD_TYPEs.toggleButton:
       return /* @__PURE__ */ jsx12(ToggleButtonField, { field });
     case FIELD_TYPEs.autocomplete:
@@ -1121,6 +1137,7 @@ var RowFieldFrame = ({
       sx: {
         flex: field.size?.width || 1,
         minWidth: field.size?.width || "auto",
+        overflow: "visible",
         ...hidden && { display: "none" },
         "& > *": {
           minWidth: 200
@@ -1290,7 +1307,9 @@ var FormRenderer = (props) => {
     flexDirection: "column",
     gap: "4px",
     overflow: "hidden",
-    px: 1.5,
+    // Vertical pad only on the outer clip shell. Horizontal pad belongs
+    // on the scroll body below so elevated field shadows can bleed into
+    // padding before overflow clips (fixes left-clipped Autocomplete shadow).
     py: 1
   }), children: [
     isMulti && /* @__PURE__ */ jsx14(StepperSection_default, {}),
@@ -1299,7 +1318,10 @@ var FormRenderer = (props) => {
       flexDirection: "column",
       gap: "8px",
       flex: 1,
-      overflow: "auto"
+      overflow: "auto",
+      // Inside scrollport: room for soft elevated shadow on all sides.
+      px: 2.5,
+      py: 0.75
     }, children: /* @__PURE__ */ jsx14(default2, { sx: { flex: 1 }, children: /* @__PURE__ */ jsxs10("form", { onSubmit: handleFormSubmit, children: [
       sortedSchema.map((row, idx) => /* @__PURE__ */ jsx14(RowRenderer_default, { row }, `${row.row}-${idx}`)),
       children
@@ -1447,4 +1469,4 @@ export {
   FormModalRenderer,
   UseForm
 };
-//# sourceMappingURL=chunk-24XDGNJ6.mjs.map
+//# sourceMappingURL=chunk-4P45Z5LR.mjs.map